Actionscript

ADOBE® FLASH® CS5
Actionscript
Cursus gratis aangeboden door Cevora
www.cevora.be
Ontwikkeld en verzorgd door Carabas
www.carabas.be
1 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
2 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Cevora
U bent bediende in een ANPCB-bedrijf? CEVORA heeft voor u kosteloze opleidingen
ontwikkeld waarin meer dan 200 verschillende thema's worden aangesneden. Naast
het opleidingsaanbod waarvoor u zich inschrijft via uw werkgever, heeft u ook de
mogelijkheid zich rechtstreeks in te schrijven voor een aanvullende opleidingsdag.
Hieraan is een premie van € 40,00 verbonden!
Via online tests kunt u uw bureauticakennis evalueren.
Ook de minder klassieke leervormen hebben een plaats in ons opleidingsaanbod.
U volgt, op eigen kosten, een beroepsopleiding buiten de werkuren? CEVORA
kan uw inschrijvingskosten geheel of gedeeltelijk terugbetalen via individuele
vormingspremies.
U bent bediende en recent ontslagen uit een ANPCB-onderneming? CEVORA stelt voor
u na uw ontslag te begeleiden in het zoeken naar een nieuwe ANPCB-job.
Als 45-plusser combineert u heel wat voordelen voor uw werkgever. Zelf hebt u er ook
alle belang bij om langer actief te blijven. Maar hoe uw competenties op peil houden
en op het vereiste niveau functioneren?
Met de Check-up 45+ van Cevora zet u alvast een stap in de goede richting!
Carabas
Wij bieden een breed assortiment informatica opleidingen en workshops aan als:
• open trainingen bij ons – raadpleeg onze agenda en schrijf u rechtstreeks in via
www.carabas.be
• in-company trainingen bij de bedrijven zelf.
De verschillende opleidingen die we aanbieden vallen onder de volgende categorieën:
prepress & DTP, CAD & 3D, Web, CD-ROM productie, Office, Internet, Programmeren.
Voor opleidingen rond standaard softwarepakketten trachten wij iedere opleiding af
te stemmen op de noden van de klant: programma, syllabus, inhoud, oefeningen en
accenten wordt in de mate van het mogelijke gepersonaliseerd. Daarnaast bieden
wij compleet unieke opleidingen aan in functie van leemtes op de snel evoluerende
ICT-markt.
Tijdens onze opleidingen wordt veel aandacht besteed aan de individuele begeleiding.
De nadruk wordt geplaatst op het verwerven van praktische kennis. Er worden dan ook
maximaal 10 personen toegelaten per opleiding.
3 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Adobe Flash
Rijke, interactieve inhoud maken en leveren
Adobe® Flash® CS5 Professional is de toonaangevende omgeving
voor het creëren van boeiende interactieve belevingen. Lever aan
een publiek op diverse platforms en apparatuur.
4 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
5 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Inhoud
Cevora��3
Adobe Flash��4
ActionScript in Flash CS5�� 10
Stap voor stap�� 11
Inleiding�� 12
De verschillende versies�� 12
De help�� 13
Het Action Paneel�� 14
Functie overzicht�� 14
Gekoppeld code-overzicht�� 14
Het codevenster�� 14
De toolbar�� 15
Positie van de ActionScript-code�� 16
In de FLA-file�� 16
Als een extern bestand�� 16
Naamgevingen�� 18
Commentaar�� 19
//�� 19
/**/�� 19
Variabelen��20
Naamgeving��20
Types��20
Trace��21
Rijen ��22
Hoe het niet moet
��22
Hoe het beter kan��22
De constructor��22
Elementen Toevoegen��22
Tijdslijncontrole��23
stop en play��23
nextFrame en prevFrame��23
gotoAndPlay en gotoAndStop��23
Andere tijdslijnen controleren��24
6 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Functies��25
Naamgeving��25
De opbouw��25
De aanroep��25
Parameters��26
Return��26
Scope�� 27
Logische operatoren��28
Programmastructuren��29
if() else��29
else if��29
switch��30
While lus��31
Do While��31
Break��32
Continue��32
For lus��33
Movieclip properties��34
Display Properties��35
VB��35
Dynamisch elementen uit de library halen��36
Export for ActionScript��36
Element toevoegen��37
Oefening op Dynamisch laden��37
Animatie via AS��39
ENTER_FRAME��39
Oefening ENTER_FRAME��39
Tween Class��40
Timer��42
Events��43
De opbouw��43
MouseEvent��43
Oefening MouseEvent��44
Knop Acties (Click)��44
Oefening Knoppen��45
7 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Keyboard acties��46
Oefening Keyboard��47
Drag & Drop��48
Oefening op Drag&Drop��50
De klasse��52
De theorie��52
De Package��53
Praktisch��53
Public/Private��56
Getters & Setters��57
Klasse koppelen aan een Symbool��59
Static��60
Eigen Events�� 61
Oefening Klasse��63
Math�� 67
Contante waarden��67
Wiskundige berekeningen��67
Gebruik��69
Random��69
Oefening Dobbelsteen��69
Oefening dynamische animatie (Regen)��71
Tekst�� 73
Dynamisch tekstveld��73
Tekst inladen��73
HTML inladen��73
CSS toepassen op tekst�� 74
Multimedia inladen�� 75
Afbeeldingen inladen��75
Preloader�� 76
Geluid inladen��77
Oefening geluid��78
Video inladen��79
Oefening Video��79
XML��82
Oefening XML��82
8 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Tekenen met code��85
Shapes��85
Standaard figuren��86
Oefening Tekenen��86
Schermvullend in de browser��88
Elementen centreren��88
9 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
ActionScript in Flash CS5
Het doel van deze cursus is ervoor te zorgen dat je de vaardigheid
ontwikkelt om ActionScript te begrijpen en de mogelijkheden ervan
kan vatten. Het is onrealistisch om op een korte tijdspanne alles
volledig te kennen. Dit moet voornamelijk een aanzet zijn tot
zelfstudie en uitdieping.
10 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Stap voor stap
Om vertrouwd te raken met de code en manier van werken,
worden er enkele oefeningen volledig uitgewerkt en stap voor
stap uitgelegd. De cursus heeft een opbouwend karakter. Dit
zorgt ervoor dat je soms even zal moeten teruggrijpen naar vorige
hoofdstukken.
?
De sleutelwoorden of de zoekterm die je moet ingeven in de
helpfunctie voor meer informatie, zullen te vinden zijn in de
vet aangeduide paragrafen voorafgegaan door een vraagteken.
Voor een optimaal zoekresultaat, plaats je de zoektermen best altijd
tussen aanhalingstekens in de helpfunctie.
!
Extra tips of belangrijke aandachtspuntjes zullen te vinden
zijn in de vet aangeduide paragrafen voorafgegaan door een
uitroepteken.
Menuitems worden op de volgende manier aangeduid: ➥Menu >
Sub menu > Functie❙. Hierdoor kan je op een vlotte manier alles terug
vinden binnen het programma.
Ook opties in kaders zullen op deze manier worden weergegeven.
Bijvoorbeeld: ➥PropertiesBox > Framename❙.
11 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Inleiding
Om met Flash verder te gaan dan de basis animatietechnieken die
het pakket te bieden heeft, kan je gebruik maken van ActionScript.
Actionscript zit al zeer lang in Flash en stelt je in de mogelijkheid
om interactie te programmeren binnen je Flashprojecten.
De verschillende versies
Sinds Flash CS3 staat de ActionScript versieteller op 3. In deze cursus
zal dan ook versie 3 gegeven worden.
Om versie 3.0 goed te vatten is het echter aan te raden - in tegenstelling
tot versie 2.0 - om over een grondige programmeerervaring te
beschikken. Versie 3.0 is nog werkt nog meer objectgeörienteerd dan
versie 2.0 en vereist een zeker abstract denkvermogen.
!
Wanneer je banners maakt, waarbij het vaak aangeraden is om
oudere versies van flash te gebruiken, zal je vaak nog 2.0 code
moeten typen.
12 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
De help
Flash is uitgerust met een zeer duidelijke help. Je kan de help oproepen
met de F1 toets.
Je hebt ook een zeer handige shortcut is flash, waarmee je zeer snel
de help van een bepaalde functie kan oproepen. Dit doe je door de
functie in de code te selecteren en dan op F1 te drukken.
F1
13 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Het Action Paneel
Het Action paneel bestaat uit 3 grote delen:
Functie overzicht
Linksboven vind je een kader met het volledig overzicht van alle
mogelijke functies binnen ActionScript.
Al de functies zijn onderverdeeld onder verschillende rubrieken.
Sommige van deze rubrieken zullen meer intuïtief zijn dan andere.
Gekoppeld code-overzicht
Linksonder vind je een kader met een overzicht van al de elementen
waaraan code is gekoppeld binnen het niveau dat je aan het
werken bent. Je kan dan makkelijk naar de code springen door op
de elementen te klikken.
Het codevenster
Rechts vinden we het codevenster. In dit venster zal uiteindelijk al de
code komen te staan. Bovenaan het kader zijn enkele functieknoppen
en onderaan geeft een tab het element weer waarop je aan het
werken bent.
14 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
De toolbar
Een klein overzicht van de knoppen van links naar rechts.
1. Met het plusteken kan je een functie invoeren door een keuze te
maken uit het menu via de verschillende rubrieken. De structuur van
dit menu komt overeen met de structuur in het kader linksboven.
2. Met de zoekfunctie kan je tekst opsporen in de code of op een
makkelijke manier vervangen.
3. Met de target tool kan je het pad naar een element op een
makkelijke manier laten uitschrijven. Dit kan je doen op een
absolute of een relatieve manier.
4. De syntax controle, gaat eventuele syntax fouten opsporen. Deze
functie zal, indien er fouten in de code zitten, een kader openen
met een opsomming van de fouten. Deze foutmeldingen geven
een indicatie wat de fout is en waar ze optreedt.
5. Autoformat zorgt ervoor dat de code op een gestructureerde
manier geschikt wordt.
6. Show Code Hint zorgt ervoor dat je op de lijn waar je op aan
het werken bent de hints te zien krijgt, indien je deze functie zou
uitgeschakeld hebben in de opties.
7. Debug Options geeft je enkele controles over de breakpoints die
je in je code zet om de code stap voor stap te debuggen.
8. Collapse Between Braces zorgt ervoor dat alles tussen accolades
dichtgeklapt wordt om de lengte van de code visueel beperkt te
houden.
9. Collapse Selection, zal een geselecteerd stuk code dichtklappen
om de code overzichtelijker te maken.
10. Expand All, heft alle verrichtingen van de voorgaande twee tools
op.
11. Apply Block Comment, zal het geselecteerde stuk code in
commentaar plaatsen.
12. Apply Line Comment, zal elke geselecteerde lijn afzonderlijk in
commentaar plaatsen.
13. Remove Comment, verwijdert de commentaartekens uit de
geselecteerde code.
14. Show/Hide Toolbox, verbergt of toont de twee kaders aan de
linkerkant van je werkvenster.
15 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Positie van de ActionScript-code
In de FLA-file
Binnnen een Flash bestand, kan je de code koppelen aan een
keyframe.
Om de code mooi te centraliseren en makkelijk beheerbaar te maken,
koppel je de code best altijd aan een keyframe. Bij voorkeur zet je
deze keyframe ook nog eens op een aparte laag die enkel en alleen
keyframes met code bevat.
Probeer ook steeds al de code naar het hoogste niveau te brengen. Het
hoogste niveau zal steeds de tijdslijn van de scene zijn. Enkel wanneer
je code schrijft die op elke instantie van een bepaald symbool van
toepassing is, breng je het een niveau lager in het symbool zelf.
Hieronder een screenshot van een 'good practice' opbouw van de
frames.
!
De code staat nu op het eerste keyframe van de laag "Actions".
Merk ook op dat in deze keyframe een kleine letter "a" staat. Dit
duidt aan dat er Action Scripting op deze keyframe staat.
Actionscript zal ook steeds van boven naar beneden uitgevoerd
worden en op de tijdslijn van links naar rechts. Dus eerst al de code
in keyframe 1, vervolgens de code in keyframe 2, enz….
Als een extern bestand
Je kan je actionscript code ook in een apart bestand plaatsen. Zo een
extern bestand zal de extensie .as mee krijgen.
Code in externe bestanden moeten altijd in een package en een class
zitten. Meer uitleg hierover kan je in de verdere hoofdstukken vinden.
Je kan aan je project een extern document hangen door het toe te
voegen in de properties. Deze code zal uitgevoerd worden in het eerste
keyframe van de movie.
16 | Adobe Flash CS5 Actionscript © 2010 Carabas.be
Een voorbeeldje (initCode.as)
package {
import flash.display.MovieClip;
public class initCode extends MovieClip{
public function initCode():void {
trace("initial code when the movie starts");
}
}
}
17 | Adobe Flash CS5 Actionscript © 2010 Carabas.be

Download Report