Flash Banner – Motion Tweening en Gradient fills

Voor deze tutorial wordt gebruik gemaakt van Adobe Flash.
In deze tutorial leer je een simpele flash banner te maken met behulp van motion tweens. Ik zal geen gebruik maken van actionscripts. Wanneer u Flash al redelijk kent en bekent bent met termen als gradient fills, motion tweening en timeline control, kunt u beter kijken bij de overige flash tutorials die hier binnekort zullen worden gepubliceerd.

Het eindresultaat:

Stap 1: Achtergrondkleur en canvas size
De voorbeeld banner is 450*100 pixels je kunt hem natuurlijk ook van een ander formaat maken dit past u aan door eerst op het canvas te drukken en vervolgens ziet u onderin het flash menu bij properties een knop ‘size’ staan, klik deze aan en pas de grote aan. Tevens kun je hier de achtergrondkleur instellen, deze staat direct rechts van ‘size’ zet deze op zwart.

Fig 1

Canvas size

Stap 2: Layers aanmaken
Maak vervolgens een extra layer aan door bovenin op de ‘new layer’ knop te drukken, het is handig om de layers een naam te geven zodat je niet in de war raakt, noem deze layer ‘rectangles’. De Layers hebben net zoals bij Photoshop de functionaliteit om ze te’ locken’ en ‘hiden’ (zie figuur 2).

Fig 2

Layers

Stap 3: Tekenen en gradient fill
Klik de eerste layer aan en trek een rechthoek, zorg ervoor dat de stroke color uit staat(selecteer het witte vakje met rode streep er doorheen). Klik vervolgens het vierkant aan, onderin bij properties kun je nu de gewenste maten instellen. Maak hem 450 px lang en 8 px breed. Vervolgens kun je hier ook de exacte positie bepalen, zet deze op x = 0, y = 0, als het goed is staat de rechthoek nu precies bovenin het canvas. Klik de rechthoek wederom aan we zullen hem nu een ‘gradient fill’ geven, deze optie zullen we vaker in deze tutorial gebruiken. Bij de fill opties onderin bij properties, kies de gradient fill helemaal links onderin (zie figuur 3).

Fig 3

gradient fill

Deze gradient fill kunnen we vervolgens aanpassen in de color mixer in het menu ‘color’ rechts in het scherm, wanneer het bij u niet zichtbaar is klik Window>Color Mixer. Hierin kunt u aangeven welke kleuren er in de fill voor moeten komen, door op de bovenste kleuren balk te klikken kan u extra kleuren toevoegen en door op een van de vakjes van de aanwijzende pijltjes onder de bovenste kleuren balk te drukken kan u de kleuren aanpassen. Zorg ervoor dat de gradient overeenkomt met die van figuur 4. Denk eraan dat wanneer u de kleur wilt veranderen van een object deze altijd geselecteerd moet staan voor dat u in de color mixer aan de slag gaat.

Fig 4

uitleg gradient fill

Wanneer u dit alles gedaan hebt zal de canvas er als vogt uitzien :

Fig 5

canvas 1

Klik vervolgens de nieuwe layer aan die u gemaakt heeft en teken hierin dezelde rechthoek onderin de canvas.

 

Stap 4: Tweening
De volgende stap is het laten bewegen van de onderste balk en bovenste balk met behulp van motion tweens. Klik in de layer van de bovenste balk op keyframe 25 en druk op F6 of Insert>Timeline>Keyfame dit zorgt ervoor dat hetzelde plaatje op dezelfde plek ook op positie 25 komt te staan. Klik vervolgens keyframe 1 weer aan van dezelfde layer en klik de rechthoek weer aan, versleep deze vervolgens omhoog totdat deze net buiten de canvas staat. Het is belangrijk dat de horizontale posite niet veranderd tussen de twee keyframe waartussen we willen ‘tweenen’. Wanner u de positie heeft verander en het vierkant heeft gedeselecteerd klikt u met uw rechter muisknop op een van de frames tussen 1 en 25, selecteer vervolgens de eerste optie: ‘Create Motion Tween’. De keyframes kleuren nu blauw en er komt een pijl tussen te staan.

Fig 6

timeline tween

Wanneer u nu op ctr+Enter of Control>Test movie drukt wordt de movie getest en ziet u het vierkant langzaam naar binnen schuiven. De snelheid van de movie en de kwaliteit kunt u aanpassen door het aantal frames per second aan te passen. Dit bereikt u door dubbel op het fps vakje te drukken welke ook zichtbaar is in figuur 6, waarin 12.0 fps staat. Dit is de default instelling voor een flash file. Klik dubbel op het vakje en verander de frame rate naar 30.0 fps.

Herhaal deze tween voor het onderste vierkant waarbij deze uiteraard van onderin inschuift.

Stap 5: Instellen van alpha waarden in een gradient fill
Maak een nieuwe layer onder die u zojuist gemaakt hebt en noem hem ‘black gradient fills’, zoals u merkt zal deze layer net zo lang worden als de layers die u al gemaakt heeft. Klik nu op frame 20 van de zojuist gemaakte layer en druk op F7 of Insert>Timeline>Blank Keyfame. Teken nu een rechthoek van ongeveer 120 hoog en 130 breed zorg ervoor dat de stroke color wederom uit staat, selecteer het vierkant en maak een gradient fill zorg nu dat de rechter kant van de gradient fill de kleur zwart heeft en zet de alpha property op nul.

Fig 7

alpha gradient

zet nu het vierkant op de canvas aan de linker kant en zorg ervoor dat hij het gehele gebied zover mogelijk overlapt

Herhaal deze procedure in spiegelbeeld aan de andere kant: u wisselt de kleuren om dus de zwarte kant komt nu aan de rechter kant. U kunt dit vierkant in delfde layer tekenen.

als het goed is ziet uw canvas er nu ongeer zo uit als in figuur 8
Wanneer ik black gradient fills gebruik in de rest van de tutorial bedoel ik layer van de zojuist gemaakte rechthoeken.

Fig 8

canvas2

Stap 6: Tweening voortgezet
De afbeeldingen die verder worden gebruikt bij deze tutorial zet ik hieronder neer.

logo blue white mini mini zwart

We zullen nu het mini-logo vanaf de linker kant naar binnen tweenen. Maak een nieuwe Layer aan onder de andere en noem hem Logo. Maak een nieuw keyframe(F7) op frame 23 in de zojuist gemaakte layer. Plaats in dit keyframe het logo van mini door het keyframe te selecteren en File>import>import to stage te kiezen en de juiste afbeelding te selecteren.
Wanneer het plaatje is binnengehaald plaats het op de goede eind locatie zoals hieronder.

Fig 9

canvas3

Maak nu de tween af door in Frame 50 een nieuw keyframe te maken (F6) en het plaatje op frame 23 naar links te verschuiven. Vervolgens herhalen we weer de tween procedure die we al eerder tegen zijn gekomen. In dit geval: klik tussen frame 23 en frame 50 op de rechte muisknop en vervolgens op ‘Create motion tween’ . Een van de opties van tweening is om het object in het begin of het eind relatief sneller te laten bewegen wat een iets natuurlijker effect met zich mee brengt. In het voorbeeld is een ease out effect gebruikt op het logo wat naar binnen schuift. Om dit te activeren druk op de zojuist gemaakte tween en onderin bij properties kan nu de ease property worden ingesteld zie fig 10. Het is ook mogelijk om een ‘ease in’ (negatieve ease waarde) effect te creeren dit geeft precies het tegenover gestelde effect; het object zal langzaam versnellen. In het voorbeeld heb ik een ease out waarde van 78 gekozen.

Zoals u waarschijnlijk zult zien zal de zwarte gradient die boven het mini logo staat op een gegeven ogenblik niet meer aanwezig zijn wanneer u de movie test. Het is zaak dat zolang u wenst dat een bepaald object in beeld blijft (in het geval van de zwarte gradients de gehele movie) u de tijdlijn verlengt van het desbetreffende object door achter het laatste keyframe te klikken vast te houden en vervolgens naar de gewenste lengte te verslepen.

Fig 10

easing

Stap 7: Tekst invoegen
Nu het mini-logo is ingetweened kan de tekst zichtbaar worden gemaakt. Maak onderaan een nieuwe layer aan met de naam ‘tekst’ en maak een blank keyframe(F7) aan, net na de tween van het logo is beeindigt (na keyframe 50). Type vervolgens de gewenste tekst in ‘Mini Cooper Nieuwe serie’ en verleng dit keyframe weer zoals op de manier beschreven in stap 6. De gehele movie duurt in het voorbeeld zo’n 350 keyframes, aangezien deze tekst net als de ‘black gradient fills’ de gehele movie zichtbaar zijn, kan u deze timelines al zo ver verlengen, het nadeel hiervan is dat elke keer wanneer u de movie test deze nu ook 350 frames lang zal zijn.

Wanneer u in het bezit bent van flash 8 of CS3 is het mogelijk om een filter toe te voegen aan de tekst klik hiervoor op de tekst en vervolgens op filter (naast het properties menu) In het voorbeeld heb ik een bevel filter gebruikt op ‘Mini Cooper’.

Fig 11

filter

Stap 8: Tweening van de mini’s
Nu de tekst en het logo er staan kunnen de mini coopers ingetweened worden. Dit gaat op de volgende manier per auto:

> Maak een nieuwe layer aan Belangrijk onder de black gradient fill layer
>
Maak een blank keyframe op het gewenste tijdstip van het binnekomen van het plaatje, voor auto 1 is dit in het voorbeeld ongeveer op keyframe 55.
> Import het gewenste plaatje in het keyframe en zet het op de gewenste plek (file>import>import to stage).
> Maak een nieuw keyframe aan(F6) op een x aantal frames vanaf het eerste frame afhankelijk van hoe lang het intweenen moet duren in het voorbeeld zo’n 30 frames.
> Sleep vervolgens het plaatje op frame 55 omhoog net buiten de canvas, let op alleen in verticale richting en maak het af door de de twee keyframes te verbinden met een tween zoals beschreven in stap 4 en 6.
> Vervolgens moet het plaatje een tijdje in beeld blijven, maak een nieuw keyframe aan zo’n 30 frames later zie Fig 12.
> Om het plaatje weer naar buiten te laten schuiven maak 30 frames later opnieuw een nieuw keyframe en schuif het plaatje nu naar onderen buiten de canvas en verbind de twee keyframes wederom met een tween.
> Ik heb in het voorbeeld een ‘ease out’ en ‘ease in’ effect gebruikt bij de binnenkomende respectievelijk de uitgaande tween, dit zorgt ervoor dat de beweging een stuk soepeler verloopt.(voor uitleg zie stap 6)

Wanner de u deze stappen hebt doorlopen zou de timeine er ongeveer zo uit moeten zien:

Fig 12

tween

De beweging van de tweede mini komt pas op gang nadat de eerste bijna is uitgetweened dus herhaal de procedure nogmaals voor dit plaatje in een nieuwe layer net onder de zojuist gemaakte.

Stap 9: Nog meer tweening
Maal een nieuwe layer aan boven de black gradient fills layer en onder de rectangles layer en noem hem ‘white rectangle’ . Maak een blank keyframe aan in deze layer net nadat de laatste mini is uitgetweened. Teken in dit keyframe de vorm zichtbaar in onderstaand figuur en laat hem intweenen, door een key frame te maken waar hij over het canvas staat en deze twee te verbinden met een tween. Maak vervolgens net boven de zojuist gemaakt layer een nieuwe layer waarin de verkoopprijs tekst veschijnt wanneer het witte valk is ingetweend.

Fig 13

white rectangle

Laat deze verkoopprijs plus uiteraard het witte vlak een tijdje in beeld blijven door hun timelines te verlengen.

Stap 10: Finishing touch
De banner is imiddels bijna af het enige wat nog moet gebeuren is het langzaam uitfaden van de tekst, het logo en de prijs. Maak een nieuwe Layer aan, helemaal boven de overige layers maak hierin rechhoek met een zwarte gradient fill, die net zo groot is als de gehele banner met een alpha waarde van 0 onder. Laat deze langzaam naar beneden schuiven, waarmee de banner netjes word uitgefade. Zie Fig 14

Fig 14

outgoing

Om de banner niet gelijk weer overnieuw te laten beginen verleng de laatst gemaakt layer nog een stuk zoals in bovenstaand figuur.
Ik hoop dat de tutorial duidelijk was en dat je de geleerde technieken op een creatieve wijze in je eigen werk kunt toepassen.