Adobe Flash Tutorials

[Kai-ShockWave]

---

Geschreven door: Ophion & Kai-ShockWave | Programma: Adobe Flash

---

Welkom bij de Tutorials van Adobe Flash!

In dit topic worden verschillende handelingen uitgelegd over Adobe Flash door Ophion en Kai-ShockWave. Eerst zullen we de grondbeginselen uitleggen van het programma die later steeds een stukje moeilijker worden. Elke tutorial heeft ook een moeilijkheidsgraad. Ben je bijvoorbeeld totaal niet bekend met Flash? Dan kan je de 1 ster-tutorials volgen die echt voor beginners zijn. Ben je al een echte prof en zoek je naar uitdagingen? Dan kan je de 5-ster tutorials volgen. Wij wensen je veel succes met Adobe Flash!

In dit topic mag niet gepost worden. Voor vragen of opmerkingen over de tutorials kan je terecht in ons vragen- en opmerkingen topic! Deze vind je hier.

De Adobe Flash-Serie is NIET gratis te verkrijgen en kost geld. Over illegale downloads mag hier niet gesproken worden. Voor de verkoop, check Adobe.nl

---

Adobe Flash

Adobe Flash is een multimediaprogramma waar je websites, interactieve games en animaties mee kan maken. Het mooie aan dit programma is dat je zelf alles kan laten bewegen. HTML en PHP zijn altijd vrij standaard websites, maar met Flash kan je de mooiste dingen laten bewegen. Als je met flash aan het werk gaat hoef je ook niet de gehele website in flash te maken. Je kan ook onderdelen zoals headers, menu's of banners maken die je weer in je HTML zet.

Adobe Flash maakt gebruikt van vector. Dit betekend dat alles wat je tekent in Flash, je zo groot kan schalen als je maar wilt. Dit geldt natuurlij niet als je pixel-bestanden (png, jpg, psd e.d.) importeert en dit schaalt. Als extra hoofdonderdeel maakt Flash dan nog gebruik van actionscript. Hiermee kan je acties toevoegen aan onderdelen zodat er bijvoorbeeld iets beweegt als je op een knop drukt. Verdere uitleg over actionscript volgt nog in de komende tutorials. Flash kan je herkennen aan de bestandsnaam .fla. Op website wordt de extensie .swf gebruikt. Om .swf te kunnen afspelen op internet moet je pc over Adobe Flash Player beschikken (gratis).

De tutorials die hier worden geplaatst zijn het meest geschikt voor Flash 8, CS3 en CS4.

---

Begrippenlijst

Kom je er niet uit wat sommige woorden betekenen?

Hieronder staat een begrippenlijst die steeds wordt aangevuld met nieuwe woorden:

Flash:

Flash: Flash is een programma waarmee je websites/spelletjes/advertenties/animaties kan maken.

Actionscript: Actionscript is een script taal waar je Flash mee kan onderbouwen.

Stage: Een Stage is het 'podium' waar je plaatjes/text enzovoort op neer kan zetten.

Movieclip: Dit is een object waarin je een animatie in kan plaatsen en dat op je Stage kan zetten.

Button: Een Button is een knop waarmee je met Actionscript een actie aan kan verbinden.

Motion tween: Een object wordt verplaats naar een aan te geven plek.

Vensters:

Component: Dit is een vooraf door Adobe gemaakte object dat je in je Stage kan plaatsen zoals een menu/laadbalk.

Timeline: Dit is waar je een animatie mee kan maken, dit gaat in frames.

Library: Een Library is een lijst van plaatjes/liedjes/objecten die je naar je Stage kan slepen.

Properties: Dit is een venster waar je de eigenschappen van movieclips/buttons etc kan aanpassen.

Output: is een venster waar je doormiddel van de functie trace() iets kan laten weergeven.

Actionscript:

String: is een letter of woord.

Number: is een getal.

Functie: is een

Loop: Dit is een stukje code waarmee je iets een x (variabele) keer kan laten herhalen.

Variabele: Een Variabel is een string/getal dat kan veranderen.

Array: opsomming van variabelen.

Timer: Kan een functie aanroepen na een aan te geven tijd.

Boolean: kan true of false zijn.

Event: is als er iets gebeurt.

---

Bestanden downloaden

Bij elke tutorial vind je een begin- en eindbestand. Kom je er toch niet uit, dan kan je deze bestanden downloaden.

Hieronder een voorbeeld. Wil je het downloaden? Klik met je rechtermuisknop op de link en kies daarna Opslaan als..

Eind bestand: Rechtermuisknop hierop en dan opslaan als

Het is niet toegestaan het materiaal uit deze tutorial voor verdere doeleinden te gebruiken.

---

Bewerkt: 10 oktober 2009 door Kai-ShockWave

[Kai-ShockWave]

---

Geschreven door: Kai-ShockWave | Moeilijkheidsgraad:

---

Als eerste tutorial gaan we het programma zelf een beetje uitleggen. Het programma bestaat zelf namelijk uit verschillende elementen. Hieronder kan je een screen zien van het programma en de werkvlakken.

Tools:	Alle tools die je kan gebruiken om vlakken te tekenen, te schalen of effecten aan te geven. Een totale lijst met betekenis vindt je hier rechts naast deze tekst.
Tijdlijn:	Hierin komen al je frames te staan. Met frames kan je objecten laten bewegen of elementen toevoegen. In een van de volgende tutorials wordt verder uitgelegd hoe je gebruik maakt van frames.
Werkgebied:	In het werkgebied maak je je flash-movie. Daar kan je van alles plaatsen en je eigen animatie maken.
Eigenschappen/actions:	Hier kan je de instellingen vinden van bijvoorbeeld een object. Je kan hier de maten, positie namen e.d. aanpassen. Naast eigenschappen vindt je hier ook actions. Hier kan je gerbuik maken van codes om voorwerpen te laten bewegen.
Lagen:	In het lagen-paneel vind je alle objecten van je flash-movie. Om alels te ordenen kan je mapjes aamaken. Je hebt daarnaast verschillende soorten bestanden in het lagen-paneel: movieclips, graphics, tekst, audio en film.

Let er op dat dit een standaard opbouw is. Je kan in het programma zelf nog alles verschuiven en venster bijvoegen.

---

Eind bestand: Rechtermuisknop hierop en dan opslaan als

Het is niet toegestaan het materiaal uit deze tutorial voor verdere doeleinden te gebruiken.

---

Bewerkt: 10 oktober 2009 door Kai-ShockWave

[Ophion]

---

Geschreven door: Ophion | Moeilijkheidsgraad:

---

Het maken van een simpele animatie.

Laten we gelijk beginnen!

Open een nieuw bestand of download het bestand hieronder.

---

Begin bestand:Rechtermuisknop hierop en dan opslaan als

Maak met de Rectangle tool een vierkant zoals het plaatje hieronder.

Stap 1

Als je dat gedaan hebt moet je met je rechtermuisknop in de frames venster op een nieuw vakje klikken en daarna uit de lijst op 'Insert Keyframe' klikken.



Daarna moet je het vierkantje door middel van de Selection Tool een stukje verplaatsen in de richting dat je de animatie wil hebben.



Herhaal deze stap totdat het vierkantje op de plek uitkomt waar jij hem wilt hebben.

Pas op: Verplaats het vierkantje niet in te grote stappen! Hoe meer kleinere stapjes hoe beter het er uit komt te zien!

Mijn uitkomst:



Druk nu op control + enter voor windows of op de mac met appel enter.

Gaat je filmpje voor jou te snel? Maak dan het getal bij 'fps' onderin kleiner te zien op dit plaatje:



Druk nu op opnieuw op control + enter voor windows of op de mac met appel enter.

---

Eind bestand: Rechtermuisknop hierop en dan opslaan als

Het is niet toegestaan het materiaal uit deze tutorial voor verdere doeleinden te gebruiken.

---

Bewerkt: 10 oktober 2009 door Ophion

[Ophion]

---

Geschreven door: Ophion | Moeilijkheidsgraad:

---

Vandaag ga ik jullie de verschillende soorten textvelden uitleggen.

Dit komt als je later Flash gaat doen, heel vaak voor.

Laten we beginnen.

---

Er zijn 3 verschillende soorten textvelden namelijk: Statisch, Dynamisch, en input velden.

Het verschil tussen die 3 textvelden is heel groot.

Laat ik beginnen met het statische textveld.

---

Een statische textveld is een textveld die je niet door middel van actionscript kan veranderen.

Ook kunnen bezoekers een statisch textveld niet veranderen.

Vaak wordt een statisch gebruikt in buttons, reclame banners.

---

Een dynamische textveld is anders dan een statische textveld.

Bezoekers kunnen dit textveld nog steeds niet aanpassen.

Wel kun je door middel van Actionscript, het text in je veld aanpassen.

Dit soort textveld wordt het meest van alle soorten gebruikt.

---

Met een input text kun je eigenlijk alles.

Bezoekers kunnen dit aanpassen, en met actionscript kan je dit ook aanpassen.

De input velden worden altijd gebruikt voor loginsystemen, email formulieren enzovoort.

---

Oke! Dat zijn de verschillende soorten textvelden!

---

Het is niet toegestaan het materiaal uit deze tutorial voor verdere doeleinden te gebruiken.

---

Bewerkt: 18 oktober 2009 door Ophion

[Kai-ShockWave]

---

Geschreven door: Kai-ShockWave | Moeilijkheidsgraad:

---

Dit keer gaan we beginnen om een button te maken. Later in een van de volgende tutorials wordt uitgelegd hoe je actionscript toepast op deze buttons.

---

Begin bestand: Rechtermuisknop hierop en dan opslaan als

---

Eerst maken we een een knop in de Library (Bibliotheek). Op dit te doen gaan we naar het Library scherm en drukken we op het papiertje linksonder van het scherm (papiertje met een + teken). Daarna krijg je het onderstaande scherm waar je de optie "Button" selecteert. We noemen hem gelijk ook button. Daarna klik je op Oke en je ziet je "Button" in de Library staan.

---

Nu dubbelklik je op deze button waarna je bovenaan 4 frames ziet (Up, Over en Down).

- Up is de standaard knop. Wat je op deze frame zet zie je dus als knop.

- Over is de knop die je gaat zien als je met je muis er overheen gaat

- Down is de knop die je ziet als je op de button klikt.

---

Wat we nu gaan doen is een simpele button maken. We selecteren het 1e frame en tekenen een vierkant met gebruik van de Retangle Tool ®. Houd SHIFT ingedrukt om een vierkant te maken.

---

Wanneer je klaar bent geef je hem een leuk kleurtje en zet je hem d.m.v. Properties op de 0 x-as en de 0 y-as.

---

Hierna selecteren we opnieuw de 1e frame en kopiëren we de frame (rechtermuisknop > Copy Frames). Klik daarna op de frame daarnaast en plak hem daarin (rechtermuisknop > Paste Frames). Doe dit ook bij de 3e frame. De timeline ziet er nu als volgt uit:

---

Nu gaan we weer terug naar de 2e frame en selecteren we het vierkantje. Geef hem een andere kleur zoals hieronder groen. Doe dit hetzelfde bij frame 3 (met alweer een andere kleur). Nadat je dit gedaan hebt heb je dus 3 verschillende frames met wel hetzelfde vierkantje alleen met andere kleuren.

---

Je button is nu klaar voor gebruik. Ga weer terug naar je werkgebied (klik daarvoor op Scene 1, linksonder op onderstaande afbeelding). Sleep nu je button vanuit de Library in je werkgebied.

---

Test je film: druk nu op control + enter voor windows of op de mac met apple + enter.

In een vand e volgende tutorials gaan we je leren hoe je actionscript toepast op deze button om bijvoorbeeld naar een ander frame te gaan.

---

Eind bestand: Rechtermuisknop hierop en dan opslaan als

Het is niet toegestaan het materiaal uit deze tutorial voor verdere doeleinden te gebruiken.

---