4. Animaties

4.1 Inleiding animaties

Een animatie kan van alles zijn. Of het nu gaat om een vallende bloempot, of om een wegscheurende auto, één ding staat vast, animatie suggereert beweging. Iedere animatie bestaat uit een serie plaatjes, die snel achter elkaar worden weergegeven.

Flash staat bekend om zijn flitsende animaties. Je hoeft met Flash vaak niet eens alle losse plaatjes te tekenen om een animatie te maken. Alleen de belangrijkste plaatjes (in keyframes) zijn vaak voldoende. Flash kan dan zelf de rest van de beelden uitrekenen.

Voor meer gecompliceerde animaties (tekenfilms) biedt Flash veel mogelijkheden. Alle objecten kunnen afzonderlijk geanimeerd worden in verschillende layers. Daardoor heb je veel controle over de uiteindelijke animatie.

In dit hoofdstuk gaan we in op het hoe, wat en waarom van animaties in Flash. Je zult zien dat Flash je alle ruimte en mogelijkheden biedt om je project te laten slagen.

Preview van het swf bestand

• Kies menu control>test movie. Nu opent het preview venster, waarin je kunt debuggen en kunt kijken hoe het uiteindelijk resultaat eruit ziet. Zie voor een uitgebreide beschrijving het hoofdstuk Publiceren.

4.1.1 Wat is animatie?

Een animatie is een aaneenschakeling van een aantal beelden die snel na elkaar worden afgespeeld. Doordat ieder beeld een klein beetje anders is dan het vorige wordt de suggestie van een vloeiende beweging gewekt. Het menselijk oog is er op getraind om beweging te zien, en zal dat dus zo ervaren. Hoe vloeiend de film is hangt af van de mate van verandering tussen de beelden en de snelheid waarmee ze na elkaar worden vertoond.

Animaties kunnen heel klassiek zijn (bijvoorbeeld tekenfilms), maar ook redelijk modern (bijvoorbeeld buttons). In alle gevallen biedt Flash je veel houvast. Op internet zijn dan ook voorbeelden genoeg te vinden waar Flashanimaties zijn gebruikt.

Bij animatie is tijd onontbeerlijk. De timeline in Flash zorgt ervoor dat we kunnen animeren. We spreken van het aantal plaatjes dat per seconde wordt weergegeven, of, zoals Flash het noemt frames per Second (FPS).

Aanpassen frames per second

1. Kies MODIFY > MOVIE
2. Type Bij Frame Rate een getal tussen de 1 en 99 Frames per Seconde in. Hoge Frame rates zijn vaak niet haalbaar op oudere computers.Of dubbelklik op de FrameRate aanduiding op de TimeLine.

4.1.2 frames

De timeline is onderverdeeld in vakjes. Die vakjes noemen we frames. In ieder frame kan een plaatje staan. Doordat Flash snel, één voor één, de inhoud van ieder frame weergeeft, kun je animaties maken. Flash beschikt over een aantal handige tools om vrij eenvoudig van de stilstaande beelden, animaties te maken.

Het gemak van Flash begint al bij het maken van de stilstaande beelden; de frames.Hiervoor is een scala aan tools aanwezig, zoals uitvoerig is besproken in het hoofdstuk afbeeldingen. Vervolgens is het vrij eenvoudig om deze frames te kopiëren, steeds een beetje te wijzigen en achter elkaar te plaatsen. Als de beelden dan tenslotte achter elkaar afgespeeld worden, is er al sprake van bewegend beeld. Deze manier van animeren wordt vaak gebruikt om zeer complexe animaties te maken.

Hoewel deze manier van animeren soms erg tijdrovend kan zijn, ontstaat de suggestie van beweging zeer snel. Zelfs met twee plaatjes die verschillend zijn, is dat vaak al het geval. Denk maar eens aan buttons die ³ingedrukt² kunnen worden.

4.1.3 Keyframes

Flash maakt een onderscheid tussen frames en keyframes. Keyframes zijn belangrijke punten in je animatie. Dit zijn vaak de punten waarop er iets belangrijks moet gebeuren, of waar er iets moet veranderen. Keyfframes worden in de timeline aangegeven met een zwarte stip.

Snel keyframes maken

1. Doe één van het volgende om een KeyFrame te maken.
2. Klik op het gewenste Frame en kies INSERT > KeyFrame, terwijl het Frame nog steeds geselecteerd is.
3. Selecteer het Frame waar je een KeyFrame wilt plaatsen en Rechts Klik (windows) of Option Klik (macintosh) en Kies uit het menu Insert KeyFrame
4. Vanuit hetzelfde popupmenu kun je ook kiezen voor Insert Frame en Insert Empty KeyFrame. Als je insert Frame kiest, dan zal het plaatje van het laatste KeyFrame daarvoor, ook in dat frame zichtbaar zijn. Je verlengt dus de lengte van je animatie. Met Insert Blank Keyframe prepareer je in feite een Frame om er in te kunnen tekenen als Keyframe.

De grote kracht van keyfframes zit in het gebruik van een belangrijke techniek die Flash biedt: tweening.

4.1.4 Tweening

Als je van iedere animatie zelf alle beelden handmatig moet aanpassen ben je wel even bezig. Flash biedt daarom de mogelijkheid om de veranderingen tussen de keyframes automatisch te laten plaatsvinden. Zo hoef je zelf niet Je hoeft ieder plaatje met de hand te veranderen. Het principe van tweenen stamt eigenlijk nog uit de tijd dat Disney de tekenfilms nog helemaal met de hand maakte. De grote animators tekenden de belangrijkste punten in de film en de tweeners tekenden de tussenliggende frames. Met Flash heb je dus een heel leger tweeners in huis gehaald.

Met tweening kun je een beginframe en een eindframe aanwijzen, waarna Flash de tussenliggende frames automatisch aanmaakt. Dit levert een enorme tijdsbesparing op als je animaties moet maken. Tegelijkertijd blijft het werken met tweening wel flexibel.

Flash kent 3 soorten animatie, die je door elkaar heen kunt gebruiken:

4.1.4.1 frame by frame

Dit lijkt het meest op het handmatig maken van een tekenfilm. Je maakt zelf alle keyframes en plaatst ze op de timeline. Als ze afgespeeld worden heb je een animatie. Deze manier van animeren biedt je de meeste controle over het uiteindelijke resultaat, maar is vaak ook het meest tijdrovend.

4.1.4.2 Motion tweening

Als je twee keyframes plaatst op de timeline waarop hetzelfde symbool staat, maar dan op een andere plaats op de stage, dan kun je Flash de tussenliggende frames laten berekenen. Als je het afspeelt zie je het symbool over de stage bewegen. Dit noemen we een motion tween. Motion tween is alleen mogelijk bij movie clipmovie clips. De movie clipmovie clips kunnen wel andere vormen van animatie bevatten (hierover meer in de paragraaf over de timeline). Behalve rechte lijnen kun je voorwerpen met behulp van motion tweening ook over een lijn laten bewegen en ze eventueel laten roteren en schalen.

4.1.4.3 Shape tweening

Als je twee keyframes plaatst op de timeline waarbij op het eerste keyframe een vierkant staat en op het tweede keyframe een cirkel, dan kun je Flash de tussenliggende frames laten berekenen. Als je het afspeelt zie je een vierkant dat geleidelijk in een cirkel verandert. Dit noemen we een shape tween. Shape tweening werkt het best bij eenvoudige vormen. Bij complexere vormen kan het nogal eens een brij worden van lijnen en vlakken in de getweende frames. Zogenaamde shape hints bieden dan een oplossing.

4.1.5 layers

Flash werkt net als Photoshop met layers. Een layer kun je beschouwen als een doorzichtig folie, waarop een afbeelding staat. layers kun je stapelen en het resultaat lijkt op het stapelen van doorzichtige folies met daarop afbeeldingen. Je hebt de afbeelding op de bovenste layer, maar doordat de bovenste layer verder transparant is, zie je naast de afbeelding ook alles van de layers daaronder.

Een animatie is een aaneenschakeling van beelden (frames) en het principe van layers werkt ook voor animaties. Hierbij zijn de layers gewoon aan elkaar geknoopt, vergelijkbaar met een stapeltje foto negatieven.

Met behulp van layers kun je complexe objecten animeren, zonder dat je het overzicht verliest. Door bijvoorbeeld de onderdelen van een poppetje (linkerarm, rechterarm, linkerbeen, rechterbeen, hoofd en romp) op afzonderlijke layers te plaatsen zijn deze eenvoudiger te animeren.

4.1.6 Timeline

Om de frames van een animatie op een overzichtelijke manier achter elkaar te kunnen plaatsen en te zien, wordt er in Flash een timeline (tijdlijn) gebruikt. Op de timeline bevinden zich een heleboel lege vakjes waarin de frames en keyframes geplaatst kunnen worden. Als een film wordt afgespeeld worden deze vakjes met een bepaalde snelheid (standaard 12 frames per seconde), één voor één weergegeven. Op de timeline kun je per layer aangeven welke frames op welk punt geplaatst moeten worden. Iedere layer zie je dus op de timeline als een horizontale balk met vakjes waarin de frames geplaatst kunnen worden.

de tijdlijn

Flash kan werken met meerdere timelines. Je kunt bijvoorbeeld een movie clip animeren in zijn eigen timeline met behulp van shape tweening, terwijl je deze in de centrale timeline verplaatst met behulp van motion tween.

4.1.7 scenes

Als je een animatie maakt, dan kun je die opdelen in scenes, vergelijkbaar met scènes in een film. Je kunt je wel voorstellen dat het overzicht op de timeline een beetje verloren kan raken als de animatie lang wordt. Door de totale animatie nu op te delen in logische stukken, scenes, wordt het veel overzichtelijker. Met het paneel Scene kun je de scenes beheren.

Overzicht scenes

Scenes maken en bewerken

1. Om een nieuwe Scene te maken doe je één van het volgende
2. Kies INSERT > SCENE
3. Open met WINDOW > SCENES het Scenes venster. Klik op de Plus knop onderaan het venster.
4. Het hernoemen van Scenes doe je door te dubbelklikken op de Scene in het Scenes venster.
5. Het kopiëren van een Scene doe je door op de kopiëerknop te klikken, onderaan het Scenes venster.
6. Scenes verwijderen doe je door op het prullenbakje te klikken onderaan het Scenes venster.
7. Wisselen tussen de verschillende Scenes doe je door de betreffende Scene aan te klikken in het Scenes venster, of door de scenes overzichtknop te gebruiken rechtsboven de TimeLine.

4.1.8 Wat kan wel en niet met Flash

In principe zijn er vrijwel geen grenzen aan de animatiemogelijkheden die Flash je biedt. Hoewel fotorealistische driedimensionale animaties niet mogelijk zijn in Flash, biedt het programma je toch voldoende mogelijkheden om uit de voeten te kunnen in de meeste situaties. Toch is Flash juist op zijn best met Vector animaties (zie hiervoor het hoofdstuk: afbeeldingen). Dit houdt de bestandsformaten klein, waardoor ze sneller te downloaden zijn. Het gebruik van lange bitmap animaties met behulp van frame by frame animatie (bijvoorbeeld geanimeerde gif-bestanden) is vaak af te raden.

Behalve animatie tools, biedt Flash je ook de mogelijkheid om Interactieve animaties te maken. Met de programmeertaal ActionScript kun je animaties afhankelijk maken van de aansturing door gebruikers. Daarover meer in het hoofdstuk ActionScript.

4.1.9 De tools die je gebruikt

Aangezien Flash oorspronkelijk ontworpen is als animatie pakket, biedt het je een zeer grote verscheidenheid aan tools. Er staan verschillende panelen, opties en functies tot je beschikking om je creativiteit de vrije hand te bieden bij het maken van animaties. Hier volgt een greep uit de verscheidenheid aan tools die Flash biedt. Als je wilt kun je alvast wat gaan experimenteren met de tools, om te kijken wat ze doen. Later wordt uitgebreid ingegaan op elke tool.

• Panelen (te openen via window > Panels)
  • Effect
  • Frame
  • Info
  • Scene
• Menu's
  • Edit
    • Cut frames
    • Copy frames
    • Paste frames
  • Insert
  • Modify

4.2 Timeline gedetailleerde uitleg

De animatie wordt schematisch weergegeven op de timeline.

Alle opties van de tijdlijn worden in dit hoofdstuk besproken

De timeline is verdeeld over frames. Dit zijn de hokjes op de timeline. Ieder frame wordt tijdens het afspelen van de animatie eventjes in beeld gebracht. Dit gebeurt met een snelheid die wordt uitgedrukt in frames per Seconde (FPS). Standaard is deze waarde ingesteld op 12 FPS. Elk frame kan een ander plaatje bevatten. Bij de standaard waarde betekent dat, dat ieder plaatje 1/12e van een seconde (0.083 sec.) in beeld is. De afzonderlijke (stilstaande) beelden zijn dan niet meer waar te nemen, maar de animatie wel.

4.2.1 Weergave van Animaties op de timeline

Animaties op de Flash timeline kunnen op verschillende manier worden weergegeven:

• frame by frame animatie
  Elk frame wordt afzonderlijk getekend.

  Keyframing

• Motion tween animatie
  Met behulp van keyframes wordt de tussenliggende beweging door Flash gemaakt.

  

• Shape tween animatie
  Met behulp van keyframes wordt de tussenliggende vervorming door Flash gemaakt.

  

Als je bij het tweenen één van de noodzakelijke keyframes vergeet, of als de inhoud van één van de frames niet te tweenen is met het andere frame, dan zie je een stippellijn in de timeline verschijnen.

Keyframes worden in de Flash timeline aangegeven met een zwarte stip.

4.2.2 Wat kun je met de timeline

Met de timeline kun je animaties maken, bewerken en bekijken. Het gebruik van meerdere timelines is mogelijk, waardoor je gemakkelijk de animatie in logische delen kunt opdelen (meerdere scenes of movieclips).

Het gebruik van scenes is aan te raden bij grotere projecten. Je kunt er je werk eenvoudig mee opsplitsen in gedeeltes, en je switcht moeiteloos tussen de verschillende scenes van je werk.

Movie clips bieden je de mogelijkheid om hun eigen timeline te gebruiken. Als je een movie clip bewerkt opent zich automatisch de bijhorende timeline. Die timeline kan afzonderlijk van de originele timeline gebruikt worden om de inhoud van de movie clip te animeren met behulp van frames, keyframes en tweening. Je kunt de movie clip dan opnieuw animeren in de originele timeline.

Dit principe kun je bijvoorbeeld gebruiken om een movie clip te maken die een poppetje een wandelbeweging laat maken. De movie clip kan daarna op de standaard timeline worden voorzien van beweging, waardoor een 'realistisch' effect ontstaat.

De timeline biedt je een aantal mogelijkheden om overzicht te geven bij het werken met objecten. Je kunt het verloop van je animatie weergeven als de timeline niet afspeelt, door onion skinning te gebruiken. Dit is een methode die behalve het frame waar de afspeelkop is, ook een aantal frames weergeeft rondom dit frame. Deze frames worden dan steeds transparanter weergegeven, zodat er een soort echo ontstaat van de animatie.

Dit principe kan ook gebruikt worden om meerdere frames tegelijkertijd te bewerken.

4.2.3 Gebruik van layers

Complexere animaties kun je het beste opdelen in layers. Je kunt layers in Flash maken door op het + teken te klikken in de timeline. Iedere layer is volledig transparant, behalve de zichtbare inhoud. Het gebruik van layers is zeer sterk aan te bevelen. Je kunt layers gebruiken om de inhoud in logische onderdelen onder te verdelen (achtergrond, auto, mannetje, fiets, zon, maan).

Layers kunnen beveiligd worden. Daarmee voorkom je dat je dingen ongewenst verandert. Druk op de knop lock keyframe in de layer die je wilt beveiligen (locken) om de layer te beschermen.

Door het gebruik van layers is het ook makkelijker om onderdelen te animeren. Sommige animaties zijn zonder het gebruik van layers zelfs onmogelijk. Als je een movie clip wilt maken van een wandelend poppetje, dan is het aan te raden om de onderdelen (armen, benen, romp en hoofd) in losse layers te zetten en die te animeren. Op die manier voorkom je dat je het plaatje elke keer opnieuw moet tekenen. Om het overzicht te wijzigen, dat je hebt op de Timeline doe je het volgende.

Overzichtsknop

Een simpele bewerking met de timeline

1. Klik op de overzicht wijzigen knop rechtsboven te TimeLine. Je kunt de breedte van de Frames instellen van Tiny tot Large. Standaard staat de breedte op Medium. De hoogte van de TimeLine kun je kleiner maken door Short te kiezen. Dat is vooral handig als je veel layers gebruikt. Verder kun je nog Preview kiezen de inhoud van de KeyFrames wordt weergegeven in de Layer) of Preview in Context Kiezen (complete beeld in Frame weergeven).
2. Je kunt Layers maken door op het Plusteken te klikken. Hernoemen doe je door op de layernaam te dubbelklikken en een naam te typen. Je kunt de volgorde van de layers veranderen door de layernaam te slepen.
3. Je kunt Frames Selecteren door er op te klikken. Meerdere Frames kun je selecteren door te Shift ingedrukt te houden tijden het klikken (selecteren) van de Frames. Je kunt een serie aaneengesloten frames selecteren door control shift ingedrukt te houden en vervolgens op het eerste en het laatste frame te klikken.
4. Je kunt Frames verplaatsen door ze te selecteren en vervolgens de muisaanwijzer over de selectie te houden en met ingedrukte muisknop te slepen naar de gewenste locatie in de TimeLine. De muis verandert in een handje.
5. Je kunt Frames kopiëren, knippen of plakken door ze te selecteren en te rechtsklikken (pc) of te Optionklikken (mac). Kies uit het menu copy frames voor een kopie, cut frames voor knippen. Kies paste Frames voor het plakken van Frames.

4.2.4 Masking

Een belangrijke functie van de timeline is het maken van layers. Met masken zorg je ervoor dat de inhoud van de layer onder de layer die je hebt gekozen niet transparant is. Juist de gedeeltes die met vormen zijn getekend zijn transparant. Zo kun je ervoor zorgen dat alleen heel specifieke delen van het beeld zichtbaar zijn, en andere delen juist niet.

maskedlayer.png

Procedure Masking

1. Maak twee lagen aan. Op de bovenste laag komt de vorm die je zichtbaar wilt maken in het plaatje dat op de eerste laag komt.
2. Plaats een MovieClip of een tekening op op de eerste laag (de onderste).
3. Teken een vorm, of plaats een MovieClip op de tweede laag (bovenste). Deze vorm zie je na het masken helemaal niet meer. Alleen het gedeelte van het onderste plaatje dat onder de vorm van dit plaatje valt, zal uiteindelijk zichtbaar worden. Deze laag Maskeert de laag eronder.
4. Selecteer de tweede (bovenste) laag. Rechtsklik op de naam van de laag en kies uit het menu MASK.
5. De oorspronkelijke laag is nu alleen zichtbaar op de plaatsen waar de vorm van de mask layer zich bevond.

4.2.5 (Movie)Clips

Je hebt inmiddels kennisgemaakt met de timeline van Flash, maar Flash biedt je meer dan dit. Movie clips kunnen ieder hun eigen timeline hebben. Dat betekent dat je een object meerdere malen kunt animeren. Die animaties worden dan gecombineerd als je de movie clip in de centrale timeline plaatst. Met Flash ActionScript kun je de verschillende timelines zelfs aansturen vanuit ieder punt in de film.

Het maken van een movie-clip

1. Kies INSERT > NEW SYMBOL
2. Geef een naam op in het dialoog Venster dat verschijnt.
3. Kies MOVIE CLIP. En Druk op OK.
4. Het Edit MovieClip venster opent zich, en je kunt je MovieClip maken zoals je die zou maken in de normale TimeLine van Flash.

Een movie-clip maken van een bestaande animatie

1. Selecteer alle frames van de animatie die je wilt gebruiken in je MovieClip.
2. Kies EDIT > COPY FRAMES of kies CUT FRAMES.
3. Kies INSERT > NEW SYMBOL
4. Geef een naam op en kies Movie Clip in het Dialoog Venster dat verschijnt.
5. Selecteer het eerste Frame in de TimeLine van de nieuwe MovieClip
6. Kies EDIT > PASTE FRAMES
7. De Frames worden geplakt in de TimeLine. Als je nu de MovieClip vanuit het Library venster naar het centrale werkveld sleept, dan verschijnt de MovieClip alleen in het eerste Frame. De animatie loopt echter wel als je de SWF bekijkt tijdens een preview.

4.2.6 Tweening

Het animeren in Flash kan, zoals we eerder hebben gezien, op drie manieren. Je kunt frame voor frame animeren, je kunt shapes (vormen) tweenen en je kunt motion (beweging) tweenen. In dit stuk nemen we het tweenen van shapes en motion onder de loep.

Het tweenen van animaties houdt in dat Flash de tussenliggende frames voor je berekent bij animaties. Flash verplaatst automatisch een object, in ieder frame, met de juiste waarde bij het motion tweenen. Bij het shape tweenen wordt via een wiskundige berekening de vervorming van een vorm geïnterpoleerd. Het tweenen scheelt je bergen met tijd.

Tweenen geeft je ook de mogelijkheid om het verloop ervan te controleren. Je kunt aangeven hoe snel het tweenen moet beginnen, hoe snel het moet stoppen, en of het object moet roteren of niet.

4.2.7 Shape Tweening

Shape tweenen is het automatisch vervormen van twee vormen door Flash. Een illustratief voorbeeld is het vervormen van een cirkel naar een vierkant. De vloeiendheid waarmee Flash dit doet is onovertroffen. Behalve vormen, kun je ook kleuren laten verlopen, met behulp van shape tweening.

Shape tweening kan niet met elk object in Flash. Movie clips en bitmap graphics kunnen niet geanimeerd worden met behulp van shape tweening. Alle vormen die je direct, met behulp van Flash, kunt tekenen, kun je wel animeren met behulp van shape tweening.

Procedure Shape tween

1. Begin met een leeg Flash bestand.
2. Teken in het eerste Frame een vorm naar keuze. Een cirkel of een vierkant volstaat.
3. Selecteer in dezelfde Layer Frame 30. Plaats een Blank KeyFrame. Kies INSERT > BLANK KEYFRAME of rechtsklik in de Frame en kies INSERT BLANK KEYFRAME uit het menu.
4. Teken een nieuwe vorm in de nog lege KeyFrame. Kies een andere vorm, dan die in het eerste Frame.
5. Open het Frame venster. Kies WINDOW > PANELS > FRAME
6. Selecteer het eerste Frame en kies uit het Tweening menu in het Frame Paneel voor de optie SHAPE.
7. Speel de animatie af. Je ziet de ene vorm vervormen naar de andere vorm.

Als twee vormen qua vorm te verschillend zijn, dan kan het voorkomen, dat het shape tweenen min of meer mislukt. Er ontstaat dan een lijnenbrij. Dit is niet in alle gevallen te voorkomen. Soms zijn de vormen te verschillend.

Het 'mislukken' van shape tweens ontstaat vooral als de lijnomtrek te verschillend is, of als er meer of minder lijnen in de vormen zitten.

Het kan ook voorkomen dat de shape tween een resultaat oplevert dat niet precies is zoals je wilt, hoewel het ook geen mislukking is. Als je bijvoorbeeld een vierkant shape tweent naar een cirkel, dan zul je zien dat het vierkant een beetje roteert. Dit kan vervelend zijn.

Om dit te voorkomen kun je shape hints gebruiken. Shape hints zijn punten die je plaatst op de vormen die je wilt shape tweenen. Je plaats een shape hint op beide vormen waartussen je de shape tween wilt laten berekenen. Flash zorgt er dan voor dat die twee punten dan ook eindigen op dezelfde plaats. Zo kun je de vervorming beter regelen.

hinting.png

hinting2.png

Het geven van hints bij het tweenen

1. Maak een Shape tween, zoals eerder omschreven. Gebruik als voorbeeld een vierkant en een cirkel als vormen die je gaat tweenen.
2. Als je de animatie start, dan zul je zien dat het vierkant, min of meer roteert, terwijl het de vorm van de cirkel aanneemt. Dat gaan we voorkomen. Selecteer het eerste keyframe en kies MODIFY > TRANSFORM > ADD SHAPE HINT. Er Verschijnt een stip op het scherm met daarin een A.
3. Klik en sleep de stip naar de linker bovenhoek van het vierkant.
4. Selecteer het laatste Keyframe en Klik ­ Sleep de stip zo ver mogelijk naar linksboven op de rand van de cirkel als mogelijk.
5. Herhaal stap 3 en 4 voor de overige hoeken van het vierkant, en de rand van de cirkel.
6. Bekijk de animatie. Het roteren is nu verdwenen. Je kunt met het gebruik van Shape Hints experimenteren. Je ziet dat het toevoegen van Hints, direct effect heeft op wat je doet. Vooral in Combinatie met ONION skinning is dit handig.

4.2.8 Motion Tweenen

Je kunt ook bewegingen tweenen. Je geeft dan met keyframes aan waar het begin- en eindframe is van de beweging en Flash doet de rest. Je kunt motion tweening alleen uitvoeren met bitmaps en movie clips. Vooral Movie clips bieden uitgebreide mogelijkheden, omdat zij een eigen timeline hebben. Zodoende kun je van een shape tween een movie clip maken, en die met behulp van motion tweening tegelijkertijd laten vervormen (shape) en bewegen (motion).

Het maken van een motion tween

1. Maak van een Shape Tween animatie, een MovieClip, zoals hiervoor omschreven is.
2. Open het Library Venster. Kies WINDOW > LIBRARY
3. Klik ­ Sleep de MovieClip vanuit het Library venster naar de gewenste plaats op het werkblad.
4. Selecteer een verderop gelegen Frame in de TimeLine, en voeg een keyframe toe. Kies INSERT > KEYFRAME
5. Verplaats de MovieClip naar de gewenste eindpositie.
6. Open het Frame Paneel. Kies WINDOW > PANELS > FRAME
7. Selecteer het eerste keyframe en kies uit het TWEENING menu in het FRAME venster de optie MOTION.
8. Speel de animatie af in Preview mode. Je ziet dat de MovieClip geanimeerd beweegt over het toneel.

Behalve bewegingen, kun je ook de mate van transparantie, en de kleurstelling van een movie clip tweenen. Motion tweening kan objecten ook volgens een vooraf getekende lijn bewegen (guide). Ook kunnen objecten geschaald en geroteerd. Een andere interessante toepassing is dat het eerder genoemde masken ook gedaan kan worden met geanimeerde layers..

Motion tween over een guided layer

1. Maak een Motion tween volgens de methode die hierboven beschreven is.
2. Rechts ­ klik op de naam van de layer die de motion tween bevat. Kies uit het menu ADD MOTION GUIDE.
3. Er verschijnt een nieuwe laag boven de gemotiontweende layer.
4. In deze nieuwe laag kun je een lijn tekenen. De Vorm van die lijn maakt in principe niet zoveel uit, maar in de praktijk blijkt een soepele lijn het beste te werken.
5. Selecteer het eerste Keyframe in de Motion Tween layer. Klik ­ sleep de MovieClip op de lijn, ergens aan het begin daarvan. De MovieClip blijft vastplakken aan de lijn.
6. Herhaal stap 5 voor het laatste KeyFrame.
7. Speel de animatie af. Je ziet dat de MovieClip nu niet van begin tot eind in één lijn beweegt, maar keurig het lijntje volgt.

De opties frame Venster

Tot slot

In dit hoofdstuk heb je geleerd hoe animatie werkt in Flash, en hoe je de verschillende hulpmiddelen kunt gebruiken die het programma je biedt. Je hebt gezien dat animatie eigenlijk niets meer is dan de suggestie van beweging. Je weet inmiddels dat het werken met animaties overzichtelijk wordt gemaakt met behulp van de timeline. Daarop kun je movie clips (die elk weer hun eigen timeline hebben), bitmaps of vectorbeelden plaatsen.

Je weet hoe je keyframes en frames kunt maken om de inhoud van de beelden weer te geven, te animeren en te bewerken.

Verder heb je ook kennis gemaakt met tweenen. Je kunt nu vectoren vervormen en movie clipMovie clips verplaatsen.

Tenslotte heb je gezien dat je layers en scenes kunt gebruiken om alle onderdelen van je animatie in logische onderdelen op te splitsen. Je kunt layers ook gebruiken om volglijnen en maskers te maken.

Je bent nu in staat om animaties te maken. Maak de volgende opdracht om te kijken of je alles hebt begrepen.