Motion Tweening In FlashSoftware: Adobe Flash CS2/CS3

We hebben allemaal wel eens geprobeerd een animatie te maken in Flash en hiervoor zijn een aantal tools erg handig:- Motion-Tween(voor beweging en rotatie)- Shape Tween(voor veranderen van los getekende vormen)

“Tweening” is vernoemd naar “in between”, het gaat namelijk om een verloop tussen 1 beginframe, 1 eindframe en de frames die ertussen zitten. In deze tutorial gaan we het vooral hebben over Motion Tweening en de mogelijkheden ervan.

Maar eerst:- Als je een animatie maakt met Motion Tweening zorg dan dat als je bewegende delen geconverteerd zijn in Flash naar een Image, Movie of Button(wanneer dit niet het geval is zal Flash zelf een filmpje maken en het filmpje ook zelf een naam geven waardoor je library al snel in de war raakt)- De animatie moet een begin en eind keyframe hebben om de “Motion Tween” goed te laten verlopen.- Denk van te voren uit wat je wilt doen scheelt later weer een hoop werk(schrijf/teken het desnoods uit).- Geef je objecten, movies & buttons duidelijke namen zodat je later niet in de war raakt.

Voorwerpen laten draaien:Eerst we moeten een nieuw bestand maken(Afbeelding 1).1. Kies File>New

Afbeelding 1: Nieuw document aanmaken

2. Nu heb je het object nodig wat je wilt animeren. Deze kun je of zelf tekenen of importeren in dit geval tekenen we een simpel vierkant met de “Rectangle Tool”(Sneltoets R, O voor een Rondje).

Afbeelding 2: Converteren naar een symbool(instance)

3. Na dit vierkant te hebben gemaakt selecteren het hele figuur en drukken dan op F8.(deze functie converteert de geselecteerde delen en maakt er een instance van, oftewel een object.)

Nu willen we graag dit vierkant laten draaien. Dat gaat als volgt:

4. We gaan naar de tijdlijn boven in het Flash scherm en selecteren een later punt op de tijdlijn(30) en drukken dan op F6(New Keyframe).Nu hebben we een verloop van 0 naar 30 frames met het vierkant.

Afbeelding 3: Aantal frames later “Keyframe” aanmaken

5. Nu selecteren we de éérste frame en drukken dan de rechter-knop van de muis in en kiezen Create Motion Tween in het menu.

Afbeelding 4: Tussenframe(of éérste keyframe) selecteren en “Motion Tween” toepassen

Nu worden de frames lichtblauw met een pijltje erin. Dit geeft aan dat er een motion tween is toegepast.(Bij Shape Tweens worden de frames groen)

Afbeelding 5: Motion Tween toegepast

Als je nu bij de Properties kijkt(onderin) zie je dat opties zijn bijgekomen nl:

Afbeelding 6: Properties van de “Motion Tween”

- Ease (het langzaam in of uitlopen van de animatie)- Rotate (x hoeveelheid met de klok mee(CW) of tegen de klok in(CCW) roteren van object)- Scale (grootte aanpassen)

6. Om het object te roteren kiezen we Rotate en zetten deze op CCW en we vullen 5 in.Nu draait ons vierkant 5 keer tegen de klok in(Afbeelding 7).

Afbeelding 7: Rotatie van 5 keer tegen de klok in(CounterClockWise)

Beweging van objecten1. Om een object van punt A naar punt B te bewegen kun je, om de beurt, de begin- en eind keyframe selecteren en sleep je het object naar de plaats waar deze vandaan komt in de begin-keyframe en waar het object heen moet in de eind-keyframe van de “Motion Tween".

-Het is belangrijk om rekening te houden met het feit dat eigenschappen van objecten alleen kunnen worden opgeslagen in keyframes; dus ga niet halverwege een motion tween in de tijdlijn proberen een vierkant te bewegen, want het enige wat je veranderd is de keyframe in het begin van die tween. Wel kun je halverwege toch een keyframe maken met F6(Nieuw keyframe).-

Verloop van kleureffecten in Motion TweenWe gaan verder met ons vierkant.Het gebruik van kleurverloop en transparantie kun je vrij makkelijk bewerkstelligen.(Dit is alleen mogelijk als je een Graphic, Button of Movie Clip van het object maakt wat moet verkleuren.)

1. We selecteren eerst de éérste keyframe van de tween waar het object in zit (begin van het kleurverloop).

2. Nu klikken we op het object dat moet verkleuren.(Als je nu in de properties bar kijkt, kun je zien dat er een Optie “Color” bij is gekomen.)

Afbeelding 8: Color effect dropdown-menu

In het dropdown-menu(Afbeelding 8) zitten een aantal opties nl.:- Brightness %(van huidige kleur naar wit)- Tint %(kleur over huidige kleur heen)- Alpha %(transparantie)- Advanced %(specifieke kleuraanpassingen)

3. We kiezen Alpha en zetten deze op 0%.(Nu is het vierkant transparant in déze KEY-frame.)

4. Vervolgens selecteren we de laatste keyframe(!) van de huidige tween en vervolgens het object weer Herhaal stap 2 en 3 (3 natuurlijk met een andere waarde in dit geval kiezen we alpha=100%)

Controleer met Alt-Enter of de animatie naar wens is en gebruik de properties(positie, schaal, van het object in de keyframes om de Tween te fine-tunen.

Nu heeft Flash 2 keyframes met gegevens( Rotatie & Transparantie) met daartussen de Motion Tween (een verloop die door Flash is gemaakt om ervoor te zorgen dat keyframe 1 en keyframe 2 in elkaar overlopen.

Het gebruik van een Motion Guide:1. Als we ons object een bepaald pad willen laten afleggen kunnen gebruik maken van een “Motion Guide”.Rechter-klik op de laag(op de naam van de laag) die je object bevat en kies Add Motion Guide uit het menu.

Afbeelding 9: Een Motion Guide aanmaken

Nu plaatst Flash een layer bovenop je huidige layer(Afbeelding 10).

Afbeelding 10: De “Guide Layer”

Afbeelding 11: 1e Keyframe selecteren van de Motion Guide Layer

Afbeelding 12: Getekende Motion Guide lijn

2. Selecteer de NIEUWE laag(Afbeelding 11) en teken met de Pen Tool (Sneltoets P)een lijn.(Het is aan te raden om je pen tool op smooth te zetten voor een soepele lijn.)

Afbeelding 13: Smooth(gladde) lijnen functie

+TIP:Het kan zijn dat de laag vastgezet is maar dit kun je uitzetten met het slot tekentje in je layer/tijdlijn.

Als we eenmaal het pad getekend hebben moeten we zorgen dat de motion guide de hele lengte(aantal frames) van de Tween bevat. We moeten de frame selecteren in de tijdlijn die bovenop de laatste ligt van de Tween( laag eronder). Druk nu op F6 om hier een nieuwe key-frame te maken. Nu is de motion Guide nét zo lang als de Tween en kan Flash de eigenschappen, van de objecten, op de keyframes “opslaan”.

Afbeelding 14: Laatste key-frame selecteren

Ga vervolgens terug naar de eerste frame op de vierkant-layer.

Afbeelding 15: Selecteer 1e keyframe van vierkant-tween(Layer 1)

3. Nu gaan we Flash vertellen wat het begin en het eind van het pad is.Selecteer het vierkant en sleep deze naar het begin (Afbeelding 16) van het pad. Het midden van het

vierkant zou zichzelf moeten vastklikken aan de lijn(niet? = Klik op het magneet teken in je Tools-bar).

Afbeelding 16/17: Vastklikken van object aan begin- & eindkey-frame lijn in de Motion Guide

4. Nu gaan we naar de laatste frame van de Tween(nogmaals in de vierkant-layer) en slepen het vierkant naar het andere uiteinde van de getekende lijn(zie Afbeelding 17).

5. Nu is onze animatie gereed en kunnen we op Alt-Enter drukken om te kijken hoe ons vierkant draait, langs een pad beweegt en langzaam verschijnt.

Afbeelding 18: Frame 10 & Frame 30

6.Nu kunnen we, om de overzichtelijkheid te vergroten, de lijn die in de Motion Guide layer zit, verbergen met het oogje in de layer(Afbeelding 19).

Afbeelding 19: Verbergen van een bepaalde laag