Vector Animatie Animate CC

<<< terughistorie & inspiratieMotion GraphicsAnimate CC basicsAnimate CC animation opdracht

LET OP: Met de komst van Adobe Animate CC is het programma Adobe Flash vervallen. Adobe Animate lijkt wel veel op Flash, dus wellicht dat je met de onderstaande tutorial best een eind kunt komen :)

Zodra je Animate CC opent krijg je de vraag welk type document je wilt openen. In Flash was dat een ActionScript-bestand, maar in Animate kies je bij voorkeur voor HTML5 Canvas. Dit formaat is zeer geschikt voor webtoepassingen en wordt, in tegenstelling tot het ShockWave Flash (swf) formaat, door alle browsers en apparaten ondersteund.

1 Stop Motion | Frame by Frame

Animatie is het snel achter elkaar weergeven van afbeeldingen (frames). Op elke afbeelding is de situatie net iets anders. Dit zien we als een bewegend beeld. Het maken van al die losse frames heet STOP-MOTION animatie. Het gebied waar je tekent, heet de STAGE.

Voorbeeld hark-poppetje (stick-man) animatie, gemaakt in Flash

2 Motion Tween

Bij STOP MOTION verander je zelf in elk frame het beeld. Flash kan veel van deze stappen ook automatisch doen. Dat heet een MOTION TWEEN. Flash rekent dan zelf uit welke stappen er tussen het begin- en eindpunt gemaakt moeten worden.

3 Motion Tween via een pad

Via een GUIDE-pad kun je een vorm een bepaalde weg laten afleggen. Zo maak je bijvoorbeeld een eenvoudige stuiterbal of laat je een vorm over een heuvel en door een dal gaan. Een GUIDE-pad staat altijd automatisch in een motion tween. Je kunt er zelf ook een tekenen en die vervangen met het bestaande GUIDE-pad. Tekenen gaat  op dezelfde manier als in Illustrator en InDesign (vector-pennetje)

4 Roteren van een vorm

Naast het verplaatsen van vormen kun je deze ook roteren via een motion tween. In dit filmpje wordt er gebruik gemaakt van een stervorm.

Je kunt op twee manieren roteren:
1. met de klok mee (CW = ClockWise)
2. tegen de klok in (CCW = Counter Clockwise)

5 Vergroten en verkleinen van een vorm

Naast roteren kun je tegelijkertijd ook vergroten en verkleinen (transformeren).
Zorg er voor dat het laatste beeld van de animatie weet aansluit op het eerste beeld. Maak hiervoor gebruik van COPY/PASTE PROPERTIES (rechter muisknop).

TIP: Voor het selecteren van 1 los frame houdt je de CMD/CTRL- toets ingedrukt.

6 Heen en Terug animatie

De ster draait, vergroot en verkleint. Nu gaat deze ook nog heen en weer vliegen terwijl hij draait en verschaalt.

1. Hiervoor verplaats je in het eerste en laatste frame de ster.
2. Vervolgens kopieer-sleep je met de ALT-toets ingedrukt ALLE frames.
3. Bij de kopie van alle frames draai je de beweging om met INVERSE KEYFRAMES (rechter muisknop).

7 Foto omzetten naar vectorbeeld

Je kunt een foto gebruiken als achtergrond voor je animatie.
Om te zorgen voor een eenheid in illustratiestijl is het mooi om deze foto via TRACE BITMAP om te zetten in vectoren.

8 Animeren in lagen

Via een tweede laag boven de achtergrond-afbeelding kun je een animatie laten afspelen. Het is hierbij handig de achtergrond visueel (oogje in de laag) uit te zetten. Bij het tekenen van deze vorm gebruiken we ook de kwast en potlood.

De vorm wordt als motion tween en met behulp van een Guide-pad over de achtergrond geanimeerd.

9 Transparantie en licht-donker animeren

Door gebruik te maken van een zwart vlak met ALPHA (transparantie) in een motion tween kun je het beeld donkerder animeren. Dit kan ook op de zelfde manier met BRIGHTNESS (helderheid).

1. selecteer de vorm op het eerste frame van de motion tween
2. kies in het properties-venster de COLOR-EFFECTS
3. stel de ALPHA of BRIGHTNESS in op de kleinste waarde
4. selecteer nu de vorm op het laatste frame van de motion tween
5. stel de ALPHA of BRIGHTNESS in op de grootste waarde

10 Gebruik van Symbols: Graphic & MovieClip

Je kunt 1 vorm of animatie meerdere keren in je hoofd-animatie zetten. Maak dan van een vorm een SYMBOL (convert to symbol).

Er zijn 3 soorten SYMBOLS in Flash:
1. Graphic = een stilstaand beeld/afbeelding.
2. MovieClip = een animatie.
3. Button = een interactieve knop.

Alle SYMBOLS worden in de LIBRARY geplaatst.

In deze video wordt er voor de sterrenhemel gebruik gemaakt van een Graphic en MovieClip.
De MovieClip wordt vervolgens meerdere keren in de hoofdanimatie geplaatst. Je sleept vanuit het LIBRARY-VENSTER de MovieClip op je Stage. Indien je de MovieClip wijzigt zullen alle clips met de zelfde naam ook veranderen.

11 Namen geven aan Lagen en Symbols

Om niet het overzicht te verliezen is het noodzakelijk dat je lagen en symbols een duidelijke naam hebben.

Werkwijze voor het maken van een animatie

1. nieuwe animatie: HTML5 Canvas
2. teken in vectoren of importeer een fotobeeld op de Stage
3. maak van elke geanimeerde vorm een Symbol. Deze staan dan in de Library.
4. zet elk symbol op een eigen laag
5. geef lagen en symbols duidelijke namen zonder spaties en 'vreemde' tekens
6. animeer zoveel mogelijk IN MovieClip symbols
7. animeer zomin mogelijk direct op je Stage

12 Vervormen met Shape Tweens

Naast een Motion Tween bestaat er ook een SHAPE TWEEN. Deze is bedoeld om objecten te vervormen. Hiervoor gebruik je TWEE KEYFRAMES:
1. het eerste keyframe met de eerste vorm.
2. het laatste keyframe met de vorm die het moet worden.
Daar tussen maak je een SHAPE-TWEEN.

LET OP: deze vormen NOOIT groeperen, want dan werkt het niet.

13 Teksten vervormen

Met een SHAPE TWEEN kun je ook letters en woorden vervormen en in elkaar laten overlopen. Je bent hierin wel afhankelijk van wat de software er mee doet.
Indien je zelf de verandering wilt sturen, kun je gebruik maken van SHAPE HINTS (zie volgende video)

14 Vervormen met Shape Hints

Door gebruik te maken van SHAPE HINTS kun je de vervorming een beetje sturen.
TIP: zet de SHAPE HINT- punten op de plekken die VAST moeten staan. Dus NIET mogen bewegen.

15 AUTO: Tekenen in vectoren

Eenvoudig gebruik van de tekengereedschappen zoals vlakvulling, lijnvulling, pentool, samenstellen van overlappende vormen en uiteindelijk en als losse symbols bewaren. Lijkt dit programma veel op Adobe Illustrator.

16 AUTO: In een Symbol werken en aanpassen -- NESTEN

Zodra een VORM een SYMBOL is geworden kun je deze bewerken door er op te dubbelklikken. Je komt dan 'in het SYMBOL' terecht. Alle Symbols met dezelfde naam zie je dan tijdens het aanpassen mee veranderen.

17 AUTO: Roteren in een Symbol -- NESTEN

Door een MovieClip te maken van de Graphic 'wiel', kun je door te dubbelkikken op het wiel 'in de MovieClip' 'wiel_mc' komen. Hier kun je het wiel laten roteren door middel van een MotionTween.

18 AUTO: Animeren van de achtergrond

Nu de wielen draaien kun je op eenvoudige manier laten zien dat de auto rijdt. In werkelijkheid staat ie stil en beweegt de achtergrond.....

19 AUTO: Parallax of Panning in het Landschap, de heuvels

PANNING is het spelen met verschillende snelheden, waardoor iets verder weg lijkt te bewegen. Denk aan een landschap dat minder snel beweegt als de weg waarop een auto rijdt. Hierdoor ontstaat diepte in een animatie.

TIP: indien je animatie de verkeerde kant op beweegt, kun je de animatie omkeren (rechter muisklik op de TimeLine)

20 AUTO: Parallax of Panning in het Landschap, de boom

Door het landschap nog meer te vertragen (tijdlijn langer maken in 'landschap_mc') en er een boom voor te plaatsen die snel voorbij gaat, ontstaat er nog meer diepte en snelheid. Ook dit is PANNING

21 Button symbol maken met link naar website

Met het symbol BUTTON voeg je interactiviteit toe aan je animatie. Je kunt dan bijvoorbeeld een geanimeerde banner maken met link naar een website.

Een BUTTON heeft 4 visuele standen:
1. standaard zichtbaar
2. rollover-effect
3. klik-effect
4. het actieve gebied van de button (onzichtbaar en meestal even groot als de button zelf)

22 Geanimeerde Button en Tijdlijn Stoppen

Een BUTTON kun je ook animeren. Gebruik van EFFECTEN is hiervoor erg handig. Dit zijn voorgeprogrammeerde effecten die je animatie veel dynamiek geven. Door gebruik te maken van een STOP-action aan het einde van de tijdlijn, zorg je dat de button-animatie stopt met spelen en niet eindeloos repeteert.

23 Masker maken en animeren

Via een masker kun je vormen uitsnijden/maskeren. Als je een masker animieert krijg je het spannende effect van een zoeker. Je maakt een masker door:

1. plaats een achtergrond, bijvoorbeel een foto
2. teken een willekeurige vorm (maak er een symbol van) in een nieuwe laag
3. rechtermuisklik op de bovenste laag met de vorm klikken.
4. Kies dan voor MASK.

Je achtergrond wordt dan in de vorm uitgespaard. Door ontgrendelen van de maskerlaag kun je de vorm bewerken.

24 Start en Stop knoppen maken

Starten en stoppen van een animatie geeft de gebruiker vrijheid om zelf te bepalen hoe de animatie wordt afgespeeld. Deze video laat zien hoe je een stop en een play knop maakt.