Actionscript ADOBE FLASH CS5. Cursus gratis aangeboden door Cevora. Ontwikkeld en verzorgd door Carabas.

Transcriptie

1 ADOBE FLASH CS5 Actionscript Cursus gratis aangeboden door Cevora Ontwikkeld en verzorgd door Carabas 1 Adobe Flash CS5 Actionscript 2010 Carabas.be

2 2 Adobe Flash CS5 Actionscript 2010 Carabas.be

3 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 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

4 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 5 Adobe Flash CS5 Actionscript 2010 Carabas.be

6 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 Adobe Flash CS5 Actionscript 2010 Carabas.be

7 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 Adobe Flash CS5 Actionscript 2010 Carabas.be

8 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 Adobe Flash CS5 Actionscript 2010 Carabas.be

9 Tekenen met code 85 Shapes...85 Standaard figuren...86 Oefening Tekenen...86 Schermvullend in de browser 88 Elementen centreren Adobe Flash CS5 Actionscript 2010 Carabas.be

10 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

11 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

12 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 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

13 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

14 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

15 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

16 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

17 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