Personal Design Training
Professionele design trainingen bij op maat of privé les van een ervaren professional en vakdocent?
<<< 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.
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.
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.
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)
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)
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.
De ster draait, vergroot en verkleint. Nu gaat deze ook nog heen en weer vliegen terwijl hij draait en verschaalt.
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.
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.
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).
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.
Om niet het overzicht te verliezen is het noodzakelijk dat je lagen en symbols een duidelijke naam hebben.
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.
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)
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.
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.
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.
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.
Nu de wielen draaien kun je op eenvoudige manier laten zien dat de auto rijdt. In werkelijkheid staat ie stil en beweegt de achtergrond.....
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)
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
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)
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.
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:
Je achtergrond wordt dan in de vorm uitgespaard. Door ontgrendelen van de maskerlaag kun je de vorm bewerken.
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.