motion tween

In deze tutorial probeer ik de beginnende flasher uit te leggen hoe je objecten kan laten bewegen door middel van motion tweening.

Aan het einde van deze tutorial kan je complete anime vecht scenes maken of complete inter galatische starwars vluchten simuleren.
Dus wacht niet langer en begin met lezen !
In plaats van een groovy spaceship, neem ik maar een insect als voorbeeld.......Okay, genoeg gezegd, op naar de tutorial.

We moeten natuurlijk beginnen met een object te maken dat je wilt laten bewegen, stel dat je bij een insect de vleugeltjes wilt laten bewegen.
Je moet dan beginnen met het lijfje te maken, dus open flash, creeer een nieuwe movie clip (ctrl+f8) en teken een lijfje.

Mijn voorbeeld is niet echt kicken, maar je snapt de bedoeling wel Je kan om het jezelf makelijker te maken, natuurlijk ook gebruik maken van layers .

Als je een geweldig lijf hebt gemaakt is het nu tijd om een vleugeltje te tekenen, maak daarvoor een NIEUWE laag aan.
Je kan dit niet op dezelfde laag zetten als het lijfje, want de vleugeltjes moeten gaan bewegen, niet het lijf erbij.
Doe dit ook voor het andere vleugeltje.

Bij mij ziet er dat dus zo uit

Nu we al een volwaardig insect hebben (lol) is het tijd voor de daadwerkelijke motion tweening.
Klik met je rechter muis op de keyframe van de vleugel, er verschijnt dan een popup en selecteer daar dus "create motion tween".
De keyframe zal nu paars worden, wat gewoon een optisch hulpmiddeltje is en zo aangeeft dat het om een motion tween gaat.

Nu moeten we een ander keyframe maken op dezelfde tijdlijn, het aantal frames tussen die 2 keyframes bepaalt dus de tijd hoelang het object er over doet om van punt a naar punt b te gaan (afhankelijk van de frames per second)
Een frame plaatsen doe je door in de tijdlijn op een frame te gaan staan, dan met de rechtermuisknop klikken en in het popup venster "insert keyframe" te kiezen.
De ruimte tussen het eerste en laatste keyframe word dan ook paars en er verschijnt een pijl in.

Bij mijn voorbeeld ziet de tijdlijn er dan als volgt uit Terwijl je op een andere keyframe staat zal het lijfje uit beeld verdwenen zijn, dat komt doordat er in de tijdlijn van het lijfje nog geen frame staat. Zodra je op die tijdlijn een frame plaats zal het lijfje weer te zien zijn. (dit kan gewoon een "frame" zijn).

Nu moeten we de laatste keyframe selecteren van onze vleugel, en daar de vleugel verplaatsen/draaien/laten verkleuren, al wat je wilt.
Dit kan je gewoon doen door op de vleugel te klikken en hem te verslepen (draaien in mijn geval).

Omdat een vleugel een klein beetje "smooth" moet fladderen en niet van zodra hij op het eindpunt is ineens moet terug schieten, moeten we ook zorgen dat die vleugel weer terug gaat naar zijn "Start" positie.
Dat is niet zo moeilijk te maken, maar dat mogen jullie zelf uitproberen.

In mijn voorbeeld ziet de tijdlijn er ondertussen dus zo uit Nu we onze motion tween hebben gemaakt, willen we natuurlijk wel zien hoe dat eruit ziet in het echt. Daarvoor moeten we terugkeren naar onze "Scene" Waar we dan ons insect uit de library (ctrl+l)op het werkblad slepen.

Zodra het insect op het werkblad staat publish je je movie (ctrl+enter) en TADAAA je eerste motiontween in beeld

Nu kunnen we onze creatie ook nog eens via een "pad" laten bewegen, want alleen maar op en neer is ook maar saai, dus we gaan ons insect langs een "getekend" path laten bewegen, terwijl hij met zn vleugels fladdert.

We zitten dus nog steeds op de "scene" en hebben daar op een layer ons insect staan. Maak nu BOVEN die layer, een nieuwe layer aan en dubbelklik op het icoontje wat voor de layer naam staat, in het popup wat opent selecteer daar de optie "guide". Doe hetzelfde voor de layer waar ons insect staat, maar selecteer dan "guided".

Nu selecteren we de "guide" layer, en gaan daar gewoon met het potlood tool een "pad" tekenen waarlangs ons insect moet gaan bewegen.
Dit "pad" is overigens niet zichtbaar in onze flash.
Als je een leuk pad hebt getekend, maak dan een nieuw frame aan op bijvoorbeeld frame 100.

Selecteer nu het keyframe van de layer waarop het insect staat en met de rechtermuisknop "create motion tween".
Zet nu een KeyFrame op frame 100.

Nu gaan we weer naar frame 1 van ons insect en pak dan het insect vast en sleep het over het startpunt van je guidelijn, je insect "snapped" nu als het ware aan je guidelijn.
Ga nu op het laatste keyframe staan van de motion tween en sleep je insect naar het eindpunt van je guidelijn.
Publish nu je movie (ctrl+enter) en je zal zien dat je beest precies de weg volgt die je hebt getekend en ondertussen met zijn vleugels fladdert.
Geef het geheel nog een achtergrondje en je heb een resultaat wat hopelijk mooier is dan mijn creatie hieronder.

Nu is er nog een simpele optie om je insect mee te laten draaien aan de hand van je pad.
Daarvoor kan je het vinkje aanzetten bij "orient to path". (in het properties panel van de eerste keyFrame van de tijdlijn)
Onderstaande flash is exact dezelfde flash als hierboven, alleen heb ik "orient to path" aangevinkt.

Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek dan mijn website voor een eventuele geupdate tutorial. mvg vinTage