login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > Flash


Gegevens:
Geschreven door:
vinTage
Moeilijkheidsgraad:
Gemakkelijk
Hits:
21102
Punten:
Aantal punten:
 (4)
Aantal stemmen:
5
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (4)
 

Tutorial:

motion tween

Motion tween
Voor de absolute beginner..

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..eek.....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.


lijfje

Mijn voorbeeld is niet echt kicken, maar je snapt de bedoeling wel lol

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 lijf en vleugels

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).

tijdlijn1

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. lol


In mijn voorbeeld ziet de tijdlijn er ondertussen dus zo uit


scene
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.

scene
 

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

Ziehier...mijn drama
(verkleint)

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".
pad

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.


De grijze lijn die je nog ziet is nep, het echte pad is niet zichtbaar, maar ik heb het pad gewoon ter verduidelijking bijgezet.

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.

path

In dit paneel zie je nog wel wat opties, maar dat is aan jullie om daaruit te komen.
Nu weten jullie de basis van motion tweenen en daarmee kan je nog heel wat meer doen.
Je kan niet alleen bewegen, maar ook kleuren veranderen, de doorzichtigheid(alpha) veranderen de grote veranderen en zo nog een hoop dingetjes.
Die leer je best door gewoon te spelen met alle settings.


Dit was mijn tutorial tot zover, ik hoop dat je er wat aan hebt gehad.
Een aangepaste versie van de door mij gebruikte FLA kan je hier oppikken.
Eventuele vragen die er overblijven na deze tutorial, kan je kwijt bij de nota's of op het flash forum.

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




« Vorige tutorial : mp3 player in flash Volgende tutorial : Eigen cursor in FLash »

© 2002-2020 Sitemasters.be - Regels - Laadtijd: 0.04s