diverse anmatietechnieken in Flash

een maskertechniek

Maak in Flash een nieuw document zet de grootte van het document op 310 bij 50 pixels, een achtergrondkleur. Sla het document op als glans.fla.
(Als je al in en flashdocument werkt kun je natuurlijk ook kiezen om via Insert>>New Symbol... een nieuwe movieclip te maken en daarin deze 9 punten van deze oefening uit te voeren.)
Download de afbeelding hier links en importeer hem op je stage.
Noem de laag die je daarvoor gebruikt foto.
Maak een nieuwe laag en noem deze masker. In deze laag geef je gebieden aan, waar je doorheen kunt kijken naar de laag die daaronder gemaskerd wordt. Kies daarvoor het Brush tool (het kwastje). Zet hem relatief grof en kwast die gebieden, die moeten "oplichten".
De kleur maakt niet uit, maak hem dus flink contrasterend, zoals in de figuur hier rechts.
Maak een nieuwe laag verloop. Deze moet onder de laag masker komen. Hierin zullen we een witverloopje laten bewegen. Kies het cirkelgereedschap. zet de rondkleur uit, en ga naar het paneel Color Mixer om de solid-kleur om te zetten naar Radial.
Je kunt de kleuren van het radiaal verloop bepalen door in het paneel op een van de ruiters te gaan staan en vervolgens de kleur te veranderen met het kleurvakje daarbeven en/of de vakjes R, G, B en Alpha daar rechts van. maak de linkerruite wit in plaats van zwart en de rechter ruiter wit, maar dan transparant door Alpha op nul te zetten. Teken de cirkel, met een hoogte die minstens zo groot is als de teksthoogte.
Het verloop moet nu met een motion-tween gaan bewegen achter het masker langs. Zet hem op een positie links van de tekst. Voor een motion-tween moet de shape eerst een Symbol worden: kies F8 of Modify>>Convert to Symbol... om er een graphic van te maken met als naam verloop. Maak een keyframe op een later tijdstip (en frames in de andere lagen zodat alles aanwezig blijft). Zet het verloop op de eindpositie en klaat de tussenliggende frames een motiontween zijn.
Klik met je rechter-muisknop (ctrl-klik voor Apple-gebruikers) in de laag masker (niet in de frames) en kies in het contekst-menu de optie Mask. De laag verloop wordt nu gemaskerd door de laag masker. Ze krijgen allebei een ander icoontje en worden op slot gezet. De laag foto wordt niet gemaskerd.

De maskering moet nu werken als je de movie test.

frame-to-frame animatie: eenvoudig maar vaak meer werk

Start een nieuw Flash-document met en grootte van 550 bij 90 pixels. Sla het op als fr2fr.fla. (Als je al in en flashdocument werkt kun je natuurlijk ook kiezen om via Insert>>New Symbol... een nieuwe movieclip te maken en daarin deze 6 punten van deze oefening uit te voeren.)
Plaats de tekst frame-to-frame animatie zodat het de ruimte goed opvult. Kies vervolgens +B (Ctrl+B voor PC-gebruikers) ofwel Modify>>Break Apart om de tekst in losse letters te splitsen.
Hoewel de animatie-techniek eenvoudig is, moet je wel blijven nadenken met waarmee je bezig bent. De hoeveelheid werk is meestal meer dan normaal en als je ondoordacht te werk gaat, wordt de hoeveelheid werk nog veel groter. Plaats met F5 een frame op frame 45.
Selecteer alle losse letters. Hierdoor worden ook alle frames geselecteerd. Met een F6 worden nu op alle frames een keyframe geplaatst. Selecteer frame 1. Alle letters zijn nu geselecteerd. Klik ernaast om alles te deselecteren. Maak de eerste letter nu rood.
Ga naar frame 2 en maak daar de twee eerste letters rood.
Op frame 3 de eerste 3 en op frame 4 de letters 2,3, en 4.
Ga op deze manier alle keyframes af, waarbij telkens 3 letters rood worden gemaakt. In het voorbeeld is ook telkens de middelste van de 3 letters iets vergroot.

Met een motion-tween een overvloeier maken

Download beide afbeeldingen

Bij andere afbeeldingen is het voor dit effect wel prettig dat ze allebei dezelfde afmetingen hebben.
Start een Flashpresentatie met de afmetingen van 600 bij 450 pixels. (Als je al in en flashdocument werkt kun je natuurlijk ook kiezen om via Insert>>New Symbol... een nieuwe movieclip te maken en daarin deze 5 punten van deze oefening uit te voeren.) Importeer op de eerste laag de eerste foto. Deze gaat bedekt worden door een tweede laag, die afwisselende doorzichtig en dekkend wordt.
Maak een tweede laag aan. Importeer daar de tweede foto.
Omdat deze vloeiend doorzichtig moet worden is er een Motion-tween nodig. Vandaar dat we al een aparte laag voor deze foto gemaakt hebben. Daarom gaan we de foto ook omzetten naar een Symbol: F8 of Modify >> Convert to Symbol. Je kunt er een Graphic van maken.
Maak nu een keyframe op frame 50. Maak voor de onderste laag een frame op frame 50. Op de bovenste laag maak je een motion-tween van frame 1 naar frame 50. frame 1 en 50 zijn nu nog gelijk. We maken een animatie die "heen-en-weer" gaat; dat wil zeggen dat het eind van de animatie hetzelfde is als het begin van de animatie. Maak in frame 25 weer een keyframe. Wijs de graphic aan en in de Property-balk kun je de color op Alpha zetten en de waarde van alpha op 0 zetten. Hierdoor is de bovenste afbeelding voledig transparant. Test je movie.