FLASH MX LES 1 - INTRODUCTIE

De Flash MX ontwikkelomgeving Ontwikkelomgeving die enige gewenning vereist Macromedia heeft er echter voor gezorgd dat al zijn producten op een gelijkaardige manier te bedienen zijn. (Fireworks, Dreamweaver, Authorware, Freehand, …) Samenwerking tussen deze diverse pakketten kan vrij soepel en vrij simpel verlopen. Om Flash te kunnen bekijken via de browser, is er een speciale plugin nodig. Deze plugin, de Flash Player genaamd, is ondertussen voorzien in elke belangrijke internetbrowser

GEBRUIKERSINTERFACE Bespreking van de verschillende onderdelen van de Flash MX user interface

Gebruikersinterface van Flash Mx 1. werkgebied (stage) 2. algemene instellingen (properties) 3. de tijdslijn (timeline) 4. lagen (layers) 5. gereedschapskist (toolbox) 6. menubalk 7. panels 8. Property Inspector 9. bibliotheek

Het Werkgebied In het midden van het scherm werkgebied of canvas Hierin kan je verschillende objecten plaatsen waarmee dan diverse animaties gemaakt kunnen worden. Tip : Maak altijd uw animatie in de linkerbovenhoek van uw werkgebied zodanig dat je op het einde via de movie properties de juiste hoogte en breedte nog kan aanpassen.

Algemene instellingen Deze eigenschappen bepalen de : - snelheid van uw animatie - de achtergrondkleur - de grootte van de animatie - de eenheden waarmee je in je werkgebied wenst te werken. Deze eigenschappen wijzigen kan je als volgt: modify>document

Algemene instellingen (2) Frame rate : snelheid van de animatie. fps staat voor frames per seconde. Hoe hoger deze waarde hoe sneller uw animatie zal afspelen. Om een soepele animatie te krijgen is het belangrijk dat je deze framerate niet te laag plaatst; vb. tussen 12 en 20 fps. Match printer zal uw werkgebied verkleinen zodanig dat het juist past binnen het afdrukbereik van je printer Match Contents zal uw werkgebied verkleinen naar de inhoud van uw werkgebied, zodanig dat het perfect past. Save Default: indien je speciale instellingen steeds wenst te gebruiken kan je deze bewaren als standaard-instellingen. Ruler units: de eenheid van de linialen

De tijdslijn Gebied bovenaan scherm Bij nieuwe animatie staat er in de timeline al standaard 1 layer (laag) en zie je rechts allemaal blokjes met een soort liniaal erboven. De blokjes zijn frames

De layers Bevat eigenlijk de kern van je flashanimatie. Afzonderlijke rijen die je bovenaan ziet in de timeline. De volgorde van de verschillende layers is belangrijk. De hoogste layer staat in de voorgrond. ( Dit kan je gerust uittesten door een figuur te tekenen in 'layer 1' en ééntje in 'layer 4'. Indien deze figuren zich boven elkaar bevinden zal enkel de figuur uit layer 4 te zien zijn.) Men kan uiteraard ook deze layers van plaats verwisselen door er eentje aan te klikken en naar boven te verslepen.

De layers (2) In de layers kan je de afzonderlijke onderdelen van een animatie in plaatsen. Het is de bedoeling dat elke animatie een eigen layer krijgt. (Dit maakt het mogelijk op elk ogenblik één bepaald onderdeel afzonderlijk te behandelen.) Tip : Wanneer je in een bepaalde laag (layer) aan het werken bent, zet dan een lock op de andere lagen. Dit is belangrijk omdat je in meerdere lagen tegelijk kan werken, en misschien in de verkeerde laag een wijziging zou kunnen aanbrengen. Je moet altijd opletten welke laag dus de actieve laag is (die laag wordt aangeduid met een potlood). Om een laag vast te zetten kan je klikken op het sleuteltje in de bewuste layer.

De layers (3) LOCK FRAME ACTIEVE LAYER LAYER FOLDER FOLDER TOEVOEGEN LAYER VERWIJDEREN LAYER TOEVOEGEN

De layers (4) Elk layer kan éen of meerdere objecten bevatten. De objecten die in de bovenste layer staan, vallen over alle andere layers die eronder liggen heen. Oefening : Probeer eens in 2 verschillende layers een object te tekenen, sleep vervolgens het onderste layer(layer 1)boven het bovenste layer(layer 2)en je zal zien dat het object dat je op layer 1 had getekend naar de voorgrond is verplaatst. Je kunt layers een naam geven door dubbel te klikken op de tekst, bijvoorbeeld 'layer 1', typ vervolgens een passende naam in om zo het overzicht te bewaren.

Basisbewerkingen van layers Toevoegen van een layer Verwijderen van een layer Naam geven aan een layer Verplaatsen van een layer: selecteer en versleep naar boven of onder. Toevoegen van een 'Guide layer': dit is een layer die een weg bevat die een bepaald object moet afleggen. Kopiëren naar verschillende layers: wens je een stukje uit een bepaald layer te kopiëren naar een andere layer kies je best voor het plakken 'paste in place' dan krijg je de kopie op de exact aangeduide plaats Layer in een map plaatsen: een bestaand layer kan in een map geplaatst worden door deze erin te slepen.

Layer toestanden Actieve modus Verborgen modus Beveiligde modus Contouren modus Mask modus Actieve modus: layer met het potlood in = layer waarin je aan het werken bent Normale modus: modus wanneer er met de layer niets aan het gebeuren is. Beveiligde (locked) modus: dan kan je geen enkel object van deze laag selecteren, bewerken of wissen. Dit kan interessant zijn zodat dat je niet per toeval een object uit een andere laag zou manipuleren. (Layer met slot)

Layer toestanden (2) Verborgen modus: deze modus kun je herkennen door het rode kruis. Dit kan interessant zijn indien je wenst te werken in een andere layer en niet gestoord wenst te worden door andere aanwezige layers. Contouren modus: deze modus kan je herkennen door een rechthoekje, het zorgt ervoor dat enkel de contouren van je tekeningen weergegeven worden. Mask modus: deze modus laat je de ene layer de andere masken, in het geval van het plaatje is het 'mask' layer de layer die de vorm bevat die de mask uitvoerd. In de 'vormen' layer zit bijvoorbeeld een foto, hierop wordt de mask dus toegepast.

Tips voor layers Het is handig om een bepaalde structuur te handhaven in je werken met layers : In het bovenste layer plaats je de acties die je wil verrichten met actionscript In layer 2 plaats je alle objecten die je over de tekst heen wil laten gaan (als je erg veel objecten hebt, verdeel het dan over meerdere layers) Plaats dan het tekst layer, indien nodig gebruik hiervoor meerdere layers Plaats vervolgens objecten (eventueel over meerdere layer) Maak de achtergrond (tip: als je klaar bent met de achtergrond, hang er dan een slotje op, dit is overigens erg handig voor alle afgemaakte layers)

Voorbeeld indeling layers Hou vooral aan om 'actions' bovenaan te doen en achtergrond onderaan. Als je ook geluiden wilt gebruiken, zet deze dan nog onder de achtergrond.

De frames Empty frame - leeg cirkeltje in het frame. Dit wil zeggen dat er geen objecten in dit frame aanwezig zijn, of er is geen wijziging van een vorig frame in dezelfde laag. Keyframe - zwart bolletje in het frame. Er zitten in dit frame objecten. De sneltoets om een keyframe te maken is F6 Action frame - letter a in het frame. Op dit frame bevindt zich een actie

De frames (2) Motion tweened frame - paarse kleur. Om een object van positie x naar positie y te verplaatsen. De eenvoudigste manier : object plaatsen op een keyframe (druk F6), kies een frame een stukje verder, verplaats het object en plaats daar opnieuw een keyframe. Daarna klik je op het eerste keyframe, kies je het snelmenu en daarna kies je de optie create motion tween. Shape tweened frame - groene kleur. Dit wil zeggen dat er overgang is van een eerste figuur naar een tweede figuur qua vorm. Instellen zoals motion tween, enkel bij tweening (Property Inspector) kiezen voor shape.

De frames (3) Snelmenu : klik op het keyframe met de rechtermuisknop. Insert Blank Keyframe (F7) : voegt een blanco keyframe toe, dit kan interessant zijn wanneer een bepaalde animatie moet stoppen. Als je een animatie lopen hebt van frame 1 tot 25 en het object moet verdwijnen, dan kan je een blank keyframe invoegen

De toolbox

Panels Panelen (panels) rechts op het scherm Zijn een essentieel onderdeel voor het werken met objecten, kleuren, text, frames, scenes en gebeurtenissen. Geven o.a. informatie omtrent de verschillende objecten in een animatie, of helpen je bepaalde bewerkingen uit te voeren met die objecten. Om een panel te openen kan je als volgt te werk gaan : Window > Design Panel > …

Panels (2) Het is mogelijk om bepaalde panels zichtbaar of onzichtbaar te maken via dit menu of via de sneltoetsen.

De property inspector Onderaan de gebruikersinterface. Contextgevoelig eigenschappenvenster ( Toont enkel de eigenschappen van het geselecteerde element ) Voorbeeld : Selecteer je een stukje tekst dan verkrijg je de teksteigenschappen, selecteer je het werkgebied dan verkrijg je de documenteigenschappen.

De Flash bibliotheek (library) De bibliotheek van flash beval alle symbolen die jij gemaakt hebt. Dit kunnen grafische objecten, knoppen of animaties zijn. Ook alle geïmporteerde audio, movies, images vind je in de library terug Om de de library te openen window > library.

Rasters en hulplijnen Om nauwkeuriger te kunnen werken. Uitlijnen op een wit vlak niet gemakkelijk.  Flash bezit een Grid (Raster) om dat eenvoudiger te maken. Via het menu View > Grid > Show Grid Met de optie Snap to Grid verkrijgen de rasterlijnen een soort magnetische werking, waardoor uw Objecten sneller tegen het raster worden uitgelijnd. Het raster kunt u instellen op de grootte die u wilt via View > Grid > Edit Grid (bvb pixels of centimeters)

Rasters en hulplijnen Linialen kunt u inschakelen via View > Rulers Linialen passen zich aan de Movie Properties aan. (afmetingen in cm/pixels) Om hulplijnen op de Stage te laten verschijnen dient u eerst de linialen actief te maken. Door met de cursor in het liniaal te gaan staan kan je met ingedrukte linkermuisknop hulplijnen uit het liniaal de Stage op te slepen. Om deze lijnen weer te verwijderen sleept u de hulplijnen simpel terug naar de linialen.

WERKEN MET KLEUREN Bespreking van de verschillende mogelijkheden die flash biedt op het vlak van kleuren

Vaste kleuren in Flash Flash heeft de mogelijkheid om met twee types van kleuren te werken : vaste en overgangen. We zullen eerst onze eigen (vaste) kleuren leren maken en leren werken met de flash kleurenpalletten. Om gemakkelijk te werken is het handig om het « color mixer » panel te openen. Flash beschikt over een kleurenpallet waar je éénvoudig een vaste kleur kan selecteren. Dit palet kan je oproepen via

Eigen vaste kleur toevoegen met de muis een kleurselectie te maken in het « color mixer » paneel (zoals hieronder). Open vervolgens het snelmenu bovenaan rechts in het « color mixer » paneel en voeg de kleur toe via « add swatch » SNELMENU

Eigen vaste kleur oproepen Indien je nu zou overschakelen naar het kleurenpallet dan zal je onderaan een nieuw kleurtje merken. NIEUWE KLEUR !

Werken met kleuren gradients Met de overganskleuren gradients kan je vrij eenvoudig werken in het « color mixer » paneel. Je kan er in het selectiemenu twee types van overgangen terugvinden : linear gradient and radial gradient.

Kleuren gradients instellen De werkwijze om overgangskleuren te maken is in beide gevallen gelijk. Ze verschillen enkel in weergave. De linear kleurt van de ene zijde naar de andere zijde en de radial kleur van binnen naar buiten. We gebruiken eerst onderstaande balk met op de uiteinden twee kleurmarkeerders . Deze zijn om de kleuren zelft te maken.

Kleuren gradients instellen (2) Wijzigen kleuren : Selecteer de kleurmarkeerder, dan verschijnt rechts een kleurselectievakje. Gebruik dit vakje om een andere kleur te selecteren (-> een volledige nieuw kleurovergang). Nieuwe kleurmarkeerder toevoegen : in het midden onder de balk klikken. Er verschijnt dan een nieuwe kleurmarkeerder. Kleurmarkeerder verwijderen : selecteer markeerder en sleep hem weg van van de balk. Lineair verloop wijzigen : versleep de kleurmarkeerders in de balk Kleuren gradient opslaan : via add swatch, hergebruiken kan via « color swatches » panel

Oefeningen op kleuren gradients Teken een bol met een radiaal kleurverloop dat van binnen -> buiten rood geel zwart wordt. Sla dit radiaal verloop op. Teken een vierkant met een lineair kleurverloop van groen naar bruin. Teken een 8-hoek met hetzelfde radiaal verloop als de bol. Hoe kan je een bol en een vierkant tekenen ? Hoe kan je een 8-hoek tekenen ?

Bitmap opvulling Het is ook mogelijk om een bepaalde vorm met een bitmap op te vullen. Hiervoor kies je in het « color mixer » paneel in het keuzelijstje de optie bitmap Vervolgens selecteer je de bitmap en kan deze als opvulling van je figuur worden gebruikt. Oefening : Probeer dit even uit door een ster te tekenen en deze op te vullen met een figuur naar keuze.

OBJECTEN Bespreking van de verschillende mogelijkheden die flash biedt voor het selecteren, vervormen, … van objecten

Selecteren van objecten Alleen de gehele rand selecteren = dubbelklik op de lijn rond een Object Selecteer een lijn of gedeelte van een lijn of een vulkleur = klik op een lijn of vulkleur Selecteer het hele Object, met alle lijnen en vulkleuren ineens = dubbelklik op een vulkleur U kunt ook meerdere elementen selecteren door de Shift-toets ingedrukt te houden als u klikt. Door met de muisaanwijzer een denkbeeldige rechthoek over lijnen en vormen te trekken selecteert u alles binnen die rechthoek.

Schalen & draaien Object veranderen in schaal : Modify > Transform > Scale Roteren : Modify > Transform > Rotate and Skew Er is ook mogelijkheid tot spiegelen, zowel horizontaal als verticaal : Modify > Transform > Flip. Al deze bewerkingen zijn ook uit te voeren met de Free Transform Tool. Afhankelijk van de plek waar je het object beetpakt kan je het hiermee roteren, schalen, spiegelen et cetera.

Free Transform Tool

Uitlijnen van objecten Door de verschillende Objecten te selecteren en Window > Design Panels > Align aan te klikken. Vervolgens kiest u een optie uit het panel om objecten ten opzichte van elkaar te positioneren. (Top, Bottom, Left, Right) Je kan objecten ook ten opzichte van de Stage uitlijnen. Daarvoor klikt u dan de knop To Stage aan.

Groeperen van objecten Door meerdere elementen te selecteren en vervolgens Modify > Group (Ctrl + G). Hiermee voegt u de losse objecten samen tot één object, dat u in één keer kan verplaatsen of transformeren. Om een groep te kunnen bewerken dubbelklikt u op de groep of kies Edit > Edit Selected. Modify > Ungroup : om de groep weer op te breken in de oorspronkelijke losse objecten. Modify > Break Apart : om een tekst in afzonderlijke letters te breken en een bepaalde letter te bewerken.

Oefening Teken 3 rechthoeken en lijn deze rechts t.o.v. elkaar uit. Groepeer vervolgens de rechthoeken en roteer ze over 30° (kloksgewijs). Spiegel ze vervolgens verticaal en ungroup ze. Vervorm vervolgens één van de rechthoeken met de Free transform tool en herschaal de andere met schaal ½ . Hint : Het panel Transform kan van pas komen !

Bespreking van het gebruik van symbolen in Flash

Waarom symbolen ? Je hoeft een tekening maar 1 keer te maken. Door ze op te slaan in de bibliotheek, kan je ze meerdere keren gebruiken in je animatie en dit terwijl ze maar één keer bestandsgrootte zal vereisen. Wanneer je de kleur, vorm, enz van een symbool wijzigt, zal dit in heel de animatie wijzigen. Het maken van symbolen is noodzakelijk als je met een Motion Tween werkt.

Soorten symbolen Graphic: dit symbool wordt gebruikt om de lijn en opvulling van een object als het ware te bundelen en voorts in een (motion) tween te gebruiken Button: dit symbool wordt gebruikt om knoppen te maken en zo interactiviteit toe te voegen aan de animatie (via ActionScript) MovieClip: dit symbool is een animatie op zich. Dit symbool wordt ook erg vaak gebruikt in ActionScript omdat er aparte actions voor bestaan

Nieuwe symbolen aanmaken Je kan een object selecteren en dan converteren naar een symbool via insert > convert to symbol (F8) Of je kan kiezen voor instert > new symbol om een nieuw object te maken Een symbool kan een graphic, een movie clip of een button zijn. Bovenaan het bibliotheekvenster krijg je een voorbeeld van het symbool. Je kan dit verslepen in je animatie om het daar te gebruiken. Symbolen worden in bibliotheken (libraries) gestopt.

2 soorten libraries Common library : Deze bibliotheek bevat standaard knoppen, geluiden en andere symbolen. Je kan deze bibliotheek openen door te klikken op Window – Other Panels – Common Libraries Movie library : Hierin verschijnen al de symbolen die je zelf maakt. Deze bibliotheek open je met Ctrl + L of door te klikken op Window – Library.

Instanties Wanneer je het symbool vanuit de bibliotheek op je stage sleept, maak je een instantie. Een instantie is als het ware een kopij van een symbool. Oefening : Maak een symbool cirkel. Plaats vervolgens 6 instanties van het symbool “cirkel” op je stage. Zorg ervoor dat ze mooi in een cirkel staan. Verander nu de kleur van 1 van de instanties. Wat merk je op ?

Brightness & alpha waarde Toch kan je in beperkte mate ervoor zorgen dat elke instantie anders is. (bvb via Color, Free Transform Tool) Klik op een instantie. In het eigenschappenvenster verschijnt “color”. Verander hier de alfa-waarde in 50%. Dit zorgt ervoor dat de figuur half transparant is. Verander de brightness-waarde van een andere instantie in 50%. Dit zorgt ervoor dat de figuur 50% lichter wordt.

Brightness versus alpha ALPHA BRIGHTNESS Opmerking : Je kan ook via de optie TINT de kleur van de instanties wijzigen

WERKEN MET KNOPPEN Bespreking van de verschillende mogelijkheden die flash biedt voor het maken van knoppen

Knoppen in Flash MX Indien je interactiviteit wenst zijn knoppen een essentieel onderdeel in flash. Knoppen zijn één van de drie mogelijke objecten (symbolen) die je met flash kan maken. (De andere zijn een grafisch object en een animatie) Knoppen verschillen van de andere objecten. De tijdslijn van een knop beschikt immers maar over vier verschillende onderdelen: - de up status - de over status - de down status - de hit status.

Verschillende toestanden van knoppen De up-toestand is hoe de knop eruit zal zien als niets zal gebeuren. De over-toestand is hoe de knop eruit zal zien als de gebruiker met de muis over de knop zal bewegen. De down-toestand is hoe de knop eruit zal zien als de gebruiker met de muis op de knop zal klikken. De hit-toestand is een toestand dat een gebruiker nooit zal merken. Dit zal het aanklikbaar gedeelte van de knop aanduiden.

Knoppen aanmaken (werkwijze 1) Kies in het menu insert > new symbol Geef een passende naam en maak de keuze « button » Vervolgens wordt de timeline voor de knop geopend. De 4 toestanden zijn nog leeg. In het onderdeel up teken je de knop zoals de gebruiker hem op uw pagina zal zien. Oefening : teken in de up status een rechthoekige knop waarvan de hoeken afgerond zijn met een radius 5 en met een radiaal verloop van donkerblauw naar lichtblauw. Voeg een tekst toe aan de knop en zorg ervoor dat deze perfect gecentreerd staat. Welke problemen kom je tegen ?

Knoppen aanmaken (werkwijze 1) Daarna plaats je een keyframe in het onderdeel over in het layer. Pas de knop aan zoals je hem wilt zien als er wordt over bewogen. Daarna plaats je een keyframe in het onderdeel down in het layer. Pas de knop eventueel weer aan. Dit zul je zien als je op de knop zal drukken. Daarna plaatje een keyframe in het onderdeel hit in het layer. Hier is het niet noodzakelijk een andere kleur te kiezen, dit onderdeel zal alleen aanduiden waar je kan klikken. Keer vervolgens via het blauwe pijltje terug naar je layeroverzicht in scene1 en voeg de knop via de library toe.

Oefening op eenvoudige knoppen Ontwerp 4 knoppen : bij knop1 verandert de achtergrondkleur al naargelang de status, bij knop2 de tekstkleur, bij knop3 de vorm van de knop en bij knop4 verandert de tekst op de knop. Voeg de knoppen vervolgens toe aan je scene. Knoppen aanmaken (werkwijze 2) Construeer eerst het uitzicht van je knop op de scene en transformeer hem vervolgens naar een symbool > knop. De up status zal dan reeds het uitzicht bevatten dat je in de scene hebt aangemaakt

TWEENING Bespreking van de verschillende mogelijkheden die flash biedt voor het bewegen en vervormen van objecten

Wat is tweening ? Frame-by-frame animaties zijn erg tijdrovend wegens het vele werk dat je hebt. Je moet namelijk elk frame zelf tekenen. Tweening geeft je de mogelijkheid om objecten te verplaatsen of te vervormen zonder dat je op elke frame een kleine aanpassing moet uitvoeren. Je hoeft enkel het begin en eindpunt van je animatie aan te maken. Dit gebeurt op erg belangrijke sleutelframes, keyframes genaamd. Flash zal vervolgens zelf berekenen wat er tussen deze 2 keyframes zit. Deze berekening is een Tween.

Soorten Tweens Er bestaan 2 verschillende soorten Tweens: Motion Tween: hiermee kan je objecten laten verplaatsen, vergroten, verkleinen, vervagen, draaien enz. Zolang de vorm van de figuur maar dezelfde blijft. Opmerking : Wanneer je een motion tween gebruikt, moet je steeds een symbool maken van je figuur. Shape Tween: hiermee kan je objecten laten vervormen en verkleuren. Opmerking : Hier mag je nooit een symbool maken. Objecten die je wenst te tweenen moeten afzonderlijk (broken) zijn, maw woorden en gegroepeerde objecten zijn niet mogelijk.

Kenmerken van beide Tweenings Eerste frame                                 Laatste frame                              Shape tweening Motion tweening

Voorbeeld shape tween Teken een vierkant in frame 1. Maak een keyframe (F6) in frame 30 en verwijder het vierkant. Teken een cirkel. Klik tussen de 2 keyframes en kies in het eigenschappenvenster voor Shape. Opmerking : een shape tween wordt steeds aangetoond met groene frames en een pijl, tussen de keyframes. Wanneer de pijl gestippeld is, zit er een fout in de tween. Je kan de tween verwijderen door te kiezen voor None in het eigenschappen-venster of door met de rechtermuisknop te klikken op de tween en te kiezen voor remove tween.

Voorbeeld motion tween Maak een tekening (bv. bol). Selecteer deze tekening (volledig!) en maak er een symbool van (F8). Maak een keyframe (F6). Versleep, draai, vergroot of vervaag de figuur in één van de 2 keyframes. Leg een Motion Tween tussen de 2 keyframes door in het eigenschappenvenster te kiezen voor Motion of door met de rechtermuisknop te klikken tussen de 2 keyframes en te kiezen voor Create Motion Tween. Automatisch voert de tweening ook een rotatie uit. Indien je dit niet wenst moet je dit veranderen (zie volgende slide)

Eigenschappen Motion Tween Scale: dit moet je aanvinken als tijdens je motion tweening de schaal van je figuur zal wijzigen Easing: Om de snelheid in overgang te wijzigen. (ook voor shape tweening) Om het begin van de tweening traag te laten verlopen en dan telkens te versnellen kiezen we een waarde tussen -1 en -100. Om van snel -> traag te gaan, neem een waarde tussen 1 en 100. Rotate: Om het object te draaien tijdens de tweening. None (voor geen rotatie) Auto (om een rotatie uit te voeren in de richting die het minste werk is) cw (clockwise) of ccw (counterclockwise)

Oefeningen Laat een woord letter voor letter op het scherm komen aan de hand van een frame by frame animatie. (Hint : gebruik de functie break apart om een woord in letters te splitsen) Laat een vierkant vervormen in je eigen naam. Doe dit over 40 frames. (Gebruik 2x Break Apart om van de tekst vervormbare objecen te maken) Laat een bal stuiteren. Zorg ervoor dat een schaduw de hoogte van de bal duidelijk maakt.

Snelheid van animatie De snelheid van de animatie kan je bepalen aan de hand van de Framerate. Wanneer een animatie loopt over 50 frames, moet je deze delen door de Framerate om de duur van de animatie te weten te komen. Framerate is standaard 12 frames per seconde (FPS). Je kan de framerate zelf instellen, maar 12 is de optimale snelheid, waarbij je een vrij vloeiend beeld krijgt en toch geen al te zware bestandsgrote. Ter vergelijking: een film bestaat uit 24 à 25 beelden per seconde.

Ingebouwde effecten Flash voorziet in een aantal ingebouwde effecten die je op je objecten kunt toepassen. Je vindt deze terug onder Timeline effects in het menu Insert. Voorbeeld : Selecteer een object en kies voor Insert – Timeline effects – Effects – Explode/Blur of Insert – Timeline effects - Transition Oefening : Probeer even enkele van deze Timeline effecten uit.

MOTION GUIDE EN MASKING Extra mogelijkheden die flash biedt voor het bewegen van objecten en het creëren van een doorschijnend effect

Motion guide Bij een tweening zal het object zich in een rechte lijn verplaatsen van punt A naar punt B. Dit is soms te beperkt. Motion guides/paths zijn lijnen die je kan tekenen en samengroeperen met een object of een symbool zodanig dat het object de opgegeven weg (lijnen) zal volgen. Met een motion guide, kun je werken met een kromme, een cirkel, een zigzag-lijn, of nog een eigen creatie,..

Werkwijze motion guide Maak in een nieuwe laag het object dat je langs een pad wil laten bewegen en maak er een symbool van. Voeg vervolgens een motion guide toe door de laag te selecteren en in de timeline op het symbool van « add motion guide » te klikken. In de laag van de motion guide tekenen we enkel de weg die het object moet volgen. Nadien plaatsen we voor beide lagen een keyframe op een bepaald frame (eindframe).

Werkwijze motion guide (2) In de laag van de figuur breng je vervolgens in het eerste frame het object naar het beginpunt. (Let op : hier moet de eigenschap snap aangevinkt staan) Daarna doe je hetzelfde voor het eindpunt en voeg je een motion tweening toe. Vink vervolgens orient to path aan.

Masking Met flash kun je door gebruik te te maken van de masking-technologie een doorschijnend effect maken. Best werk je daarvoor in een drietal lagen onder elkaar. De beste manier om te starten is eerst de achtergrond te maken, dit is hetgene dat door het masker zichtbaar zal zijn. (Layer 2)

Masking (2) Daarna maak je daarboven een nieuwe laag met daarin het bewegende object dat het doorschijnend effect zal geven. Dit kan bvb een bol zijn met een motion tweening. Daarna moet je van deze laag een mask maken : met de rechtermuisknop op layer klikken en mask selecteren. Als laatste kan je dan ook nog een derde layer toevoegen die als een soort voorgrond fungeert.

Oefeningen Maak een masker over de foto van je favoriete TV-serie. Het masker bestaat uit de de naam van deze serie. Laat vervolgens dit masker naar alle hoeken van de figuur bewegen. Creëer een hulplijn die 2 lussen maakt ( via Pen Tool ). Laat een vliegje bewegen langs deze hulplijnen. Door de vlieg groter/kleiner te maken kan je het effect bekomen van ver/dichtbij alsof de vlieg naar je toevliegt. Probeer ook om eenvoudig een 2de vlieg langs dezelfde lijn te laten bewegen.

Volgende les Werken met tekst Werken in 3 dimensies Externe media importeren Inleiding tot action scripts Deel 1 Portfolio : MP3 Speler in Flash