• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Flash tutorial [deel 2] motion tween met afbeeldingen.

Status
Niet open voor verdere reacties.

Erikk

Heeft veel posts
Lid geworden
18 dec 2005
Berichten
11.160
Waarderingsscore
279
[hand]

Flash tutorial [deel 2] het maken van een motion tween.

Na deel 1 nu ook deel 2 waar we wat meer in gaan op "motion tweening". dit hebben we in het vorige deel al eens gedaan maar nu gaan we dit doen met bestaande .png afbeeldingen. hiervoor moeten wat andere dingen worden gedaan.

1. wat gaan we doen.

nou we gaan dus een motion tween (morph) van twee afbeeldingen maken. we laten dus twee afbeeldingen in elkaar over lopen.

dit moet het uiteindelijk worden:
http://www.freewebs.com/erikkr/evolution.html <-- flash afbeelding



TIP: als je nog niet bekend bent met flash neem dan eerst deel 1 door. hier te vinden

dit zijn de afbeeldingen die we gaan gebruiken. download ze en sla deze ergens op je schijf op. waar je ze later terug lan vinden:
1:
evolution1.png
http://www.freewebs.com/erikkr/evolution1.png
2:
evolution2.png
http://www.freewebs.com/erikkr/evolution2.png
3:
evolution3.png
http://www.freewebs.com/erikkr/evolution3.png
4:
evolution4.png
http://www.freewebs.com/erikkr/evolution4.png
5:
evolution5.png
http://www.freewebs.com/erikkr/evolution5.png
6:
evolution6.png
http://www.freewebs.com/erikkr/evolution6.png
7:
evolution7.png
http://www.freewebs.com/erikkr/evolution7.png

de afbeeldingen zijn in PSD formaat dus als je ze niet kan zien licht het daar aan. download dan gewoon via de link.


zoals je kunt zien gaan we een animatie maken over het verloop van de evolutie van de mens!.

[/hand]
 
Laatst bewerkt door een moderator:
[hand]

2. Intro.

Je kunt in flash (zoals al in deel 1 geleerd) afbeeldingen een motion tween geven. een motion tween creeert de tussen liggende plaatjes tussen twee objecten. zodat je dat zelf niet hoeft te doen. hierdoor kan je bijvoorbeeld een animatie maken van een bewegend object.
een motion tween kan je maken van 1 object die op meerdere plaatsen in de timeline voorkomt (wel op de zelfde layer). zolang het gewoon hetzelfde object is kun je met dat object vanalles doen. zoals:
-de kleur veranderen
-de doorzichtigheid veranderen
-de groote veranderen
-en nog veel meer

in deze tut gaan we alleen gebruik maken van de doorzichtigheid veranderen. oftwel de "alpha". hierdoor laten we twee afbeeldingen (tot objecten gemaakt) op twee layers in tegenovergestelde richting van alpha veranderen. dus de 1 gaat van volledig zichtbaar naar onzichtbaar en de ander gaat van onzichtbaar naar volledig zichtbaar. hierdoor lijkt het of je van het ene plaatje gaat morphen naar het andere plaatje. zo gaat het lijken dat het poppetje beweegt.

we gaan voor elke evolutie periode (verandering) gebruik maken van een layer. en dan laten we steeds twee met elkaar morphen totdat we uiteindelijk de hele evolutie van de mens hebben gehad.

[/hand]
 
Laatst bewerkt door een moderator:
[hand]

3. Afbeeldingen importeren.

om afbeeldingen (bestaande afbeeldingen ergens op je hardeschijf) te gebruiken als een object in flash moet je deze importeren.
dit kan via bestand/import/import to stage. en dan de afbeelding te kiezen.
(je kunt deze manieer gebruiken voor allerlei formats. dus ook voor filmpjes. je kan ook filmpjes gebruiken in je flash animatie.!)

nu gaan we de afbeeldingen importeren naar onze animatie. ga naar
bestand/import/import to stage. en importeer alle afbeeldingen naar de stage. als er wordt gevraagd of je alle afbeeldingen in eens wilt importeren zeg dan nee.
als je alle afbeeldingen hebt geimporteerd selecteer ze dan allemaal door CTRL-A. en ga vervolgens naar MODIFY/TIMELINE/DISTRIBUTE TO LAYERS. alle afbeeldingen worden nu op een eigen layer geplaats voor je en de layers krijgen ook gelijk de juiste naam.

je kunt layer 1 nu verwijderen.!

maak nu van alle afbeeldingen een eigen object. (als het goed is weet je nu hoe je een object moet maken uit deel1.)

Erikk deel 1 flsh tutorial zei:
Klik op de afbeelding waarvan je een object wilt maken en druk vervolgens op F8. of via MODIFY/convert to symbol. als je een scherm krijgt vul je een naam in voor het object. en kies je je voor graphic.
je object verschijnt nu in de object browser rechtsonderin je scherm (tenzij je het hebt uitgeschakeld)
TIP! geef de afbeeldingen een duidelijke naam zoals "evolution 1 tot evolution 7" zodat je ze makkelijk terug vind.
TIP! selecteer de layer waarop de afbeelding staat. hierdoor wordt de juiste image meteen geselcteerd en druk dan op F8. zo weet je zeker dat je de juiste image de juiste naam geeft.

verwijder nu alle afbeeldingen die je op de layers in de timeline hebt staan zodat je weer een lege timeline hebt.


[/hand]
 
Laatst bewerkt door een moderator:
[hand]

4. De animatie maken

4.1. image 1 een motion tween geven.
voordat we de eerste motion twee gaan maken moeten we eerst de grote van onze stage aanpassen naar een juiste grote.
klik op een blanco space in je stage en ga dan naar de properties balk en druk op size. en verander de grootte in 200 bij 200.
en druk op OK. dit is de juiste grootte die ik hier had bij het maken van de animatie.

oke nu gaan we de eerste motion tween maken. dit gaan we doen met de eerste afbeelding die ik evolution 1 had genoemd. haal uit de object browser rechtsonderin het scherm het !!OBJECT!! van de eerste afbeelding. dus niet de geimporteerde afbeelding maar het object ervan. en sleep het object naar de stage (zorg wel dat je het object op de juiste layer plaatst). zie hieronder.
objectbrowserlv6.jpg


je hebt nu op de eerste frame van layer "evolution1" het object van "evoultion 1" staan in een eigen keyframe. hier zal de animatie dus gaan beginnen door de aap weertegeven.

we willen elk plaatje eerst 10 frames gewoon laten zien. zonder andere images te laten zien en dan binnen de 20 frames daarna met het volgende plaatje laten overlopen.

hiervoor gaan we op de layer "evolution1" de keyframes aanmaken. zorg dat jouw timeline er net zoals hieronder uitziet:
layer1yf0.jpg

TIP: gebruik de rechtermuisknop op een keyframe en kies dan uit die opties om je keyframes te beinvloeden
TIP: gebruik in het rechtermuismenu de optie kopie frame en paste frame om indien nodig het eerste frame naar frame 10 en 30 te kopieren zodat je precies hetzelfde hebt op alle frames. anders wordt de animatie wat raar.


ga nu naar de keyframe op 30 en druk daar vervolgens op. met die afbeelding geselecteerd ga je naar de properties balk (mischien moet je nog op de afbeelding drukken om deze opties te krijgen). je krijgt daar de optie "color" kies in het dropdown menu voor alpha. en dan verschijnt er weer een optie waar je het aantal procent kan invullen. kies daarvoor 0%. de afbeelding in keyframe 30 wordt nu geheel doorzichtig.

je kunt nu de motion tween aanbrengen tussen keyframe 10 en 30. doe dit zodat je het zelfde als hieronder krijgt:
eerstemotiontweengf2.jpg


TIP: motion tween breng je aan door met je muis te klikken tussen de twee keyframes waartussen je de tween wilt aanbrengen en dan via properties menu of rechtermuisknop te kiezen voor motion tween.

je hebt nu het eerste gedeelte van de Morph van de eerste twee afbeeldingen gemaakt. je kunt even controleren of je motion tween werk door met de lijn op je timeline te schuiven of door te drukken op CTRL-ENTER.

om de eerste layer aftemaken moet je nog een "blanco keyframe" op keyframe 31 zetten. doe dit door op keyframe 31 te drukken en dan rechtermuisknop "insert blanc keyframe".

4.2. Motion tween image 2 maken.
nu je een motion tween hebt op de eerste layer die ervoor zorgt dat de aap verdwijnt moet je er nog voor zorgen dat de volgende mens verschijnt. hiervoor moeten we weer een moion tween maken. maar nu met de tweede image en op de tweede layer.

sleep het tweede object "evolution 2" naar de tweede layer "evolution2". (in het eerste frame of dergelijk.)

zorg dat deze afbeelding kwa voeten ongeveer op de zelfde hoogte zit als de aap.
(let op we werken nu op layer 2 he. je kunt voor de zekerheid layer 1 op slot zetten met het slotje. dit werkt makkelijker)
verplaats dat frame dan naar frame 10. doe dit door het eerste frame te selecteren en dan nog een keer te klikken en te verslepen (muis ingehouden) naar frame 10. maak op frame 1 nu een blanco keyframe aan. zodat frame 1 tot met 9 leeg zijn. maak op frame 30 vervolgens weer een keyframe aan door rechtermuisknop/insert keyframe. en doe het zelfde op frame 40 en op frame 60.

maak het object op frame 10 vervolgens doorzichtichtig door de alpha op 0% te zetten.

maak een motion tween tussen frame 10 en 30. zodat je het onderstaande krijgt:
motion2kc6.jpg

je hebt nu de morph tussen de eerst twee afbeeldingen gemaakt. speel je animatie maar eens af om te zien hoe het eruit ziet. doe dit door CRL-ENTER.

de frames 30 tot 40 is om de afbeelding een tijd van 10 frames te laten zien. hier gebeurt verder niks. in de frames 40 tot 60 zal de afbeelding van "evolution2" weer wegvagen. en de afbeelding van "evolution 3" zal in de layer erboven weer inkomen zodat je de morph van die twee krijgt.

maak het object op frame 60 weer een alpha van 0%. en zet op frame 61 een blanco keyframe. zet tussen de frames 40 en 60 een motion tween.

layer 2 is nu klaar.!

4.3 Maken rest van de layers
maak nu de rest van de layers op precies dezelfde manier als layer "evolution2". zodat je het onderste krijgt.
volledigetweeningtimelineph5.jpg

zet steeds op een nieuwe layer de fade-in van de nieuwe layer precies boven het
fade-out stuk van de layer eronder.

zoals je ziet hoef je bij de laatste layer "evolution7" geen fadeout motion tween te doen. doe wel de tien frames na het infaden. anders zie je de image niet lang genoeg.

sla je afbeelding weer op via properties/publish. deze afbeelding wordt niet heel mooi in .gif formaat maar in een .swf wordt die wel mooi.

succes.

EXTRA TIP: (ja beetje laat mischien) als je de nieuwe afbeelding gaat plaatsen kun je alvast de alpha op 50% zetten zodat je de afbeelding eronder kunt zien. dan kun je de voeten op 1 lijn zetten zodat je een mooie fade krijgt

[/hand]
 
Laatst bewerkt door een moderator:
[hand]

5. slot

Dit is het einde van de deel 2. waar je meer hebt geleerd over het importeren van afbeeldingen. en over een wat meer advanced manier om een motion tween te gebruiken.

in het volgende deel gaan we nog iets doen met motion tweening maar dan met letters. ook hier zitten weer wat bijzonderheden en mogelijke opties aan.



[/hand]



*mod-edit* : Omdat we de Tuts sluiten kunnen evtle reacties op en/of vragen over deze tut, gesteld worden in het vragengedeelte van het forum, bij Grafische en Design (verwijs er dan even bij naar deze tutorial)
 
Laatst bewerkt door een moderator:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan