kinetische typografie met Flash

Je maakt hier een filmpje met kinetische typografie in Flash. Er wordt hier voorgedaan hoe dat in Flash gaat tot en met het online zetten via een Dropbox-account.
Het resultaat van de training zie je hier.

De docent heeft ook nog een uitgebreider voorbeeld uitgeprobeerd.
Mocht daarover nog vragen hebben, stel die gerust.

stap 1: de teksten plaatsen (00:07:54)

Om een goede typografische layout te maken, zet je de teksten eerst neer zoals ze na de animatie eruit zouden moeten zien.


stap 2: een frame-to-frame animatie (00:05:28)

Het is handig verschillende zaken in aparte lagen te plaatsen. Met keyframes kun je een verandering in de animatie laten plaatsvinden. Frames zorgen ervoor dat de tijd verstrijkt zonder dat er veranderingen doorgevoerd worden.


stap 3: een animatie met bewegings-tween (00:06:02)

Voor een bewegings-tween moet er een object (symbool of TLF-tekst ) in een eigen laag staan.
Hierna kun je eenvoudig de tween maken.
Hier wordt zelfs een 3_D animatie gemaakt.
Om de beweging precies de juiste waarde te geven, spring je even over naar de bewegingseditor.


stap 4: een animatie met faden en tweens (00:10:35)

Faden en schuiven gaan met bewegings-tweens.
Ze kunnen gelijktijdig, als je een movieclip tweent.
Een filmclip wordt getweend als een fade, terwijl in de filmclip verschillende letters op de lagen staan, die op hun buurt verschuiven. Denk er aan dat voor een tween een object eerst een eigen laag moet hebben.


stap 5: de truc met het symbool als afbeelding (00:08:16)

Je kunt ook eerst in een filmclip een animatie maken en deze vervolgens in een tween laten bewegen.
Zet je het type in het eigenschappenvenster om naar 'Afbeelding', dan kun je in de hoofdfilm de gecombineerde beweging zien.
Een stop-actie lukt niet in een afbeelding. Daarom moet het eindbeeld nog los achter de animatie geplaatst worden.


stap 6: de hele inhoud draaien (00:05:48)

Als je de hele inhoud wil draaien, moet je het geheel eerst naar een filmclip omzetten.
Daarna kun je met een bewegings-tween die filmclip draaien, verschuiven en schalen.

Mocht in die filmclip nog een movieclip zitten, dan zal die opnieuw afspelen. Je kunt dat voorkomen door die filmclip te vervangen door het laatste beeld van die clip.


stap 7: animatie met masker (00:11:40)

Je kunt een masker gebruiken, als je een bepaald deel van de onderliggende laag (of lagen) niet wilt laten zien.
In deze video zie je een tekst in scriptletter, waarvan telkens een klein stukje meer wordt getoond, doordat in de onderliggende laag met het penseel steeds een stukje meer wort bedekt.

stap 8: animatie afronden (00:03:18)

De animatie in de movieclip is bijna klaar. In de hoofdfilm kun je het verloop van de movieclip zien als je deze omzet naar afbeelding. Je kunt dan precies vaststellen wanneer de clip klaar is.
De hoofdfilm moet tot slot nog wel een stop-actie meekrijgen om te voorkomen dat hij zich gaat herhalen.

 

stap 9: de animatie op een webpagina plaatsen (00:05:05)

De swf moet ook van een swc-bestand worden voorzien.
Met Flash kan de HTML-pagina worden gemaakt en met Dreamweaver wordt de pagina verder aangepast.

 

stap 10: online zetten (00:04:50)

Een website kun je online zetten door de hele map te kopiƫren naar de Public-map van je Dropbox-map. Als je nog geen Dropbox-account hebt, maak je er eerst een aan en installeer je Dropbox po je computer.
Eventuele bronbestanden, die niet noodzakelijk zijn om de site te bekijken, kun je op je computer laten en hoeven niet in je Dropbox-map.

ZORG ERVOOR DAT ER GEEN SPATIES, LEESTEKENS of VREEMDE TEKENS IN DE BESTANDSNAMEN of MAPPEN VOORKOMEN!

Als je online in je Dropbox-account op zoek gaat naar de index.html, kun je daarvan de link kopiƫren en naar iedereen toesturen.


Stuur de link van index.html naar t.denblanken@ma-web.nl.