W WORKFLOW DOKUMENTATION, SVENDEPRØVE 2017 DIANA GULDHAMMER OLESEN
Projekt: Skab en animation der matcher den visuelle identitet til Hilsen Hjemmefra
1
HILSEN HJEMMEFRA To gange om ĂĽret sender vi en Hilsen Hjemmefra til de udsendte soldater.
2
3
Infografisk plakat til dagligvarebutikkerne. NĂŚsten alle elementer til animationen er hentet her.
Detalje.
Logoet med budskabet i sig selv.
Farvepalette. 4
Der er ingen tvivl om, at det betyder rigtig meget, at få en Hilsen Hjemmefra. Hendes Majestæt Dronningen
Den første Hilsen Hjemmefra blev sendt i efteråret 2015 i form af 48 pakker til vores udsendte, og siden er antallet af sendte pakker vokset. Soldaterne skal vide, at folk derhjemme værdsætter deres indsats, og de udsendte soldater udtrykker stor glæde over at få en Hilsen Hjemmefra. Samtidig skaber det en stærkere forbindelse mellem kommunens garnisoner og lokalsamfund. 5
2 IDÉ OG STORYBOARD
Jeg følger den kronologiske rækkefølge i Hilsen Hjemmefras genkendelige plakat.
6
7
Intro
Indkøbsvogn
Skotøjsæske
Fly
Soldater
Credits
Jeg følger den kronologiske rækkefølge i Hilsen Hjemmefras genkendelige plakat. 8
Jeg holder mig til enkelthed og infografik. Alle, der ser animationen, skal nemt kunne aflæse buskabet. Ung som ældre.
Programmer til opgaven: Adobe Animate CC, Illustrator CC, Media Encoder CC, Adobe Stock og Wacom Intuos Pro S tablet.
Kompatibel til smartphone, tablet og desktop.
Format 1280 x 720 px 1920 x 1080 px
9
3 OPSÆTNING
ActionScript.3 er programmeringssprog til Adobe Flash Player og Adobe AIR runtime miljøer
10
11
Bredde og højde er sat til 1280x720 px, da det er standarden. I eksporteringen kan det forstørres til 1080 px for at gøre det HD. fps = frames per second. Jeg har valgt 30 fps, da det er nemmere at regne ud. 30 fps = 1 sekund.
ActionScript.3 er programmeringssprog til Adobe Flash Player og Adobe AIR runtime miljøer 12
Min animationsvideo er opdelt i syv scener. På denne måde kan jeg rykke på keyframes og symboler, uden at det kan give en negativ effekt på min tidslinje. På denne måde forbliver min tidslinje også kort og overskuelig.
Mit workspace er sat op, så det bedst muligt møder mine behov og gør mit arbejde lettere.
13
GrafikAnimation.ai i Illustrator CC
14
GrafikAnimation.ai i Animate CC
File > Import to Stage. Alt i "Lag 1" fra Illustratorfilen bliver vinget af. Jeg gør det ikke straks til et movieclip, da elementerne skal brydes op hver især og gjort til symboler.
Alle elementer samles i ét Illustratordokument, der bliver brudt op i Animate CC og gjort til hver sit symbol. (Cmd+B, Shift+F8)
Type: Movie Clip. Denne type gør, at jeg kan animere avanceret med mit symbol. 15
4 ANIMERING
Tween er en forkortelse af "in-betweening" som bruges til at animere.
16
17
Scene 1 / Logo Symbolet 'LogoHilsenHjemmefraUdenHjerte' placeres på sit eget lag og starter på keyframe 5. På keyframe 20 er den udvidet og på keyframe 30 er den, den ønskede størrelse. Kun med en Tween vil symbolet bevæge sig. Jeg modificerer min tween med Ease 100 Out for at give en langsom afslutning inden for samme tidsramme. Symbolets Alpha kanal afhænger af hvilken procent synlighed jeg ønsker.
fps = frames per second.
1 sekund Layers
Frames
Classic Tween Keyframe
Audio
Afspil i browser (Cmd+Enter)
Keyframe 40
Classic Tween
Keyframe 55
18
Classic Tween anvendes til simpel animering som fx 'fading'.
Lydfilen afspilles først på frame 2, da det er et kendt problem, at lyd ikke afspiller på frame 1. Der er ikke nogen umiddelbar løsning, udover at starte på frame 2.
FunGuitarAndUkulele.mp3 er fra AudioBlocks 2040 fps
Sync: Event under Properties gør, at jeg kun behøver at sætte lydfilen på i første scene, således jeg ikke skal klippe det ind i de andre scener. Lyden spiller til sidste scene.
Effect: Custom gør, at jeg ved et bestemt punkt kan "fade" ud. Mine syv scener er samlet 2.105 fps. Jeg fader det ud fra 2040.
2105 fps
Scene 1 / 0-100 fps (3,3 sekunder)
5 fps
20 fps
30 fps
40 fps
55 fps
85-100 fps
100 fps 19
Scene 2 / Intro Denne scene er udelukkende tekst elementer. Da min overskrift "Støt soldaterne" skal animeres med en Classic Tween, er de lavet til symboler. Underteksterne har en maske, så jeg manuelt kan styre, hvornår teksten skal afsløres.
En maske fungerer på samme måde som i Photoshop.
Masken låses for at afsløre underteksterne. 20
Shape Tween
Masken har en limegrøn farve, så den skiller sig ud. Nedenfor ses animationen med maskens "wireframe" dvs. outline på objektet. Alle farverne på teksten er taget fra "Swatches". På denne måde, kan jeg ændre i min swatch, hvis jeg vil ændre en farve og ikke manuelt ændre alle teksters farve, sæt nu, den skal ændres.
Scene 2 / 0-250 fps (8,3 sekunder)
5 fps
50 fps
20 fps
30 fps
100 fps
210 fps
240-250 fps
Laget "Afslutning" er en hvid kasse, som jeg sætter som det øverste lag, der går fra Alpha 0% - Alpha 100%, for at undgå at skulle "fade" alle mine elementer ud. Det er tidskrævende i forhold til den hvide kasse. Sådan her kan jeg også hurtigt se, hvor mange frames min scene har.
Shape Tween anvendes til animering af objekter/ shapes. 21
Scene 3 / Vogn I denne scene demonstrerer jeg teksten "Du lÌgger dit bidrag i den camouflerede indkøbsvogn". Bidragene er relevante i forhold til, hvad man eventuelt kunne komme i vognen.
Undertekster kopieres fra tidligere lag.
Frame by frame animation anvendes til deltajeanimering. 22
Classic Tween
Symboler og tekst
Shape Tween
Objekter
Ease -100 in giver den et tungt fald, da den kommer langsomt ind i starten af sin classic tween.
Undertekster i position A
150 fps
Classic Tween Ease 100 out 165 fps
Undertekster i position B 180 fps 23
Onion Skin giver mulighed for at se animationen før og efter under redigeringen.
179 fps
180 fps
Jeg anvender frame by frame animation ved hjælp af keyframes, hvor jeg manuelt, frame by frame, estemmer symbolets gøren. Således falder vognen "på plads" på en naturlig måde 24
Slikket er kopier af hinanden og fylder mindre i sin egen mappe.
Indkøbsvognen er outlined, da den ligger foran gaverne. På denne måde kan jeg rette gaverne uforstyrret, da deres slutposition er anderledes ift. startpositionen, for at give det et flot fald.
Hver symbol har en startposition A (keyframe) og B (ny keyframe) og imellem er en classic tween med Ease 100 out for et blødt fald. 250 fps
Keyframe (A)
265 fps
Classic Tween
290 fps
Keyframe (B)
265 fps
Onion Skin
Outlines/ wireframes giver et visuelt overblik 25
Nemt overblik over det symbol man arbejder med.
26
Scene 3 / 0-365 fps (12,1 sekunder)
5 fps
105 fps
160 fps
180 fps
190 fps
200 fps
220 fps
240 fps
280 fps
300 fps
300 fps
360-365 fps
Hjertet er fra Hilsen Hjemmefra logoet og er en sød detalje.
27
Scene 4 / Kasse Borgernes bidrag bliver lagt i en skotøjsÌske i denne scene. Her er Motion Tween introduceret som er til avanceret animation.
Shape Tween
Motion Tween
180 fps
195 fps 28
Classic Tween
Kassen er ét element brudt op i tre (Cmd+B) Låg Skygge Kasse
187 fps
189 fps
190 fps
200 fps
203 fps
205 fps
Skygget på låget er et symbol, brækket ned fra kassens oprindelige form. Den går fra frame 185 (alpha 0%) til frame 190 (alpha 100%) classic tween ease 100 out for at følge låget og omvendt fra 200205.
29
I Properties vĂŚlger jeg at mit symbol skal rotere ĂŠn gang rundt om sig selv fra A til B.
30
Alle perler er keyframes og kan justeres hver for sig.
Sko copy er en kopi af symbolet Sko og fylder derfor ikke i mit Library.
Motion Tween anvendes til avanceret animation.
Motion Tween Onion Skin Outlines Rotate 1 time Ease -100 in
Motion Tween Onion Skin Rotate 1 time Ease -100 in
Motion Tween Onion Skin Rotate 1 time Ease -100 in
31
Gaverne falder i kassen som i indkøbsvognen.
Der ligger en hvid kasse under skotøjsæsken, så gaverne kan rende igennem
Logo Hilsen Hjemmefra hvid
Sort rektangel (shape) Klistermærke 410 fps Alpha 30% Classic Tween
32
Klistermærke 435 fps Alpha 100% Classic Tween
Scene 4 / 0-470 fps (15,6 sekunder)
5 fps
105 fps
170 fps
185 fps
190 fps
210 fps
240 fps
305 fps
380 fps
415 fps
415 fps
465-470 fps
33
Scene 5 / Fly Borgernes bidrag bliver fløjet ud af landet i et fly.
Baggrund Sky 4 A-B = 50 fps (langsom)
Mellemgrund Fly Stillestående fra 180-270 fps
Forgrund Sky 7 A-B = 20 fps (hurtig)
Parallax animation kan gøres ved brug af bagmellem- og forgrund. 34
Skyerne er samlet i Illustrator men brudt op i Animate, hvor de hver især er blevet et symbol.
Hvert symbol kan ændres i symbolets "indre" lag. Her har jeg ændret skyernes faver. Hvert symbol (sky) kan blive ændret i symbolets "univers".
Scene 5 / 0-300 fps (10 sekunder)
5 fps
105 fps
160 fps
180 fps
220 fps
230 fps
270 fps
285 fps
285-300 fps 35
Scene 6 / Soldater Borgernes bidrag ankommer til de udsendte soldater.
Soldat copy
Soldat
Hver soldat er 10 fps efter den nĂŚste.
36
Soldat copy 2
Kopi af Soldat laget mindsker dobbeltarbejde.
Pakken lander roligt i hænderne på soldaten. Herefter kommer et lille hjerte op som "tak".
Scene 6 / 0-300 fps (10 sekunder)
5 fps
105 fps
160 fps
180 fps
220 fps
230 fps
250 fps
270 fps
285-300 fps 37
Scene 7 / Credits Borgernes bidrag bliver fløjet ud af landet i et fly.
Maske (1) Maske (2) Maske (3) Maske (4) Logo Credits
38
Masken er et objekt, der i position A er lille og position B fylder teksten. Ved at "Maske" den pĂĽ laget under, vises det, som masken ligger pĂĽ i animationen. 1 fps 50 fps
Undertekst alpha 0%
Undertekst alpha 100%
Scene 7 / 0-320 fps (10,6 sekunder)
5 fps
80 fps
205 fps
255 fps
220 fps
320 fps 39
5 EKSPORT
Konvertering i Media Encoder letter videoen fra 1,57 GB til 22,8 MB.
40
41
Eksporterer i .mov format der kan snakke sammen med alle. Top billedkvalitet
Giver den bedste rĂĽ lyd pĂĽ alle enheder.
Standard videoformaterne er 1280x720 og HD er 1920x1080 px. For at fĂĽ mit animationsdokument til at fylde mindre, arbejder jeg i 720, men udvider til 1080 i eksporteringen. Der sker ikke noget med filerne, da jeg arbejder i vektorgrafik.
42
Konvertering i Media Encoder letter videoen fra 1,57 GB til 22,8 MB.
Mappen er enkel med kun to originale filer. Movie filen er eksporteret via Animate CC og fylder ekstremt i forhold til MP4 filen. Movie filen kan sagtens slettes, nĂĽr man har MP4-filen.
43
Der er ingen tvivl om, at det betyder rigtig meget, at fĂĽ en Hilsen Hjemmefra. Hendes MajestĂŚt Dronningen 44