Kennismaking met Adobe Creative Cloud

Animatie


Animate CC en andere applicaties


In deze oefening met applicaties uit het Adobe Creative Cloudpakket gaan we werken met Animate CC (die CC gebruiken we om het te onderscheiden van Edge Animate), maar ik begin met een bespreking van alle vormen van animatie, die mogelijk zijn met Creative Cloudapplicaties.

De oudste vorm van animatie is de Animated GIF. Zit u al wat langer op internet, dan kent u zeker het in de beginjaren noodzakelijkerwijze veel gebruikte stratenmakertje wat u hier vindt. Wat later werden ze fraaier, zie hier. Opent u ze beide eens in Photoshop, en doe dan Venster › Tijdlijn. U ziet dat u ze kunt 'afspelen', en dat de tweede uit meer dan twee frames bestaat. Adobe vindt ze overigens verouderd om twee redenen: in Photoshop kan je nu ook 'echte' animaties bouwen, en je kan met Animate CC werken. Maar zie hier hoe aardig je ze als 'instructiefilmpje' kunt inzetten.

Adobe Flash, voluit 'Flash Professional CC and Mobile Device Packaging', was altijd het bekendste programma om animaties te maken. Rond de tijd dat Adobe Creative Suite CS5 op de markt kwam (2010) besloot Apple dat Flash (.SWF, Small Web Format) niet meer kon draaien op iOS. Dit omdat het teveel dataverkeer en batterijfunctie zou kosten. Dit heeft enerzijds het programma een zware slag toegebracht (over de volgende versie, Flash CS6, verscheen niet eens een Nederlandstalig boek), anderzijds heeft het de ontwikkeling van HTML5 sterk gestimuleerd. Met HTML5 en CSS3 kan je ook animaties maken, en Adobe Edge Animate en Animate CC exporteren HTML5. Dat je met Flash CS6 en CC ook HTML5 kunt exporteren naast .SWF heeft het programma weinig geholpen, evenmin als het feit dat Flash CC enkel draait op een 64-bitscomputer. Adobe heeft met Edge Animate nieuwe zaken ontwikkeld die werden geïntegreerd in Flash. Dit programma is daarna dus op de markt verschenen als Adobe Animate CC. Informatie daarover vindt u hier, en ook daar waar wij 3D bespreken.



Een animatie bouwen in Flash.


Het bestand van deze animatie vindt u hier, als zip, want anders lukt dat niet.
Open het eventueel, na downloaden, via een rechtermuisklik (Openen met › 'Adobe Flash Player')



Animate CC kent verschillende soorten animatie. Op de eerste plaats een Bewegings-tween: we verplaatsen een object en geven dan aan dat er tussen de oorspronkelijke positie en de huidige een Pad moet lopen waarlangs het object zich verplaatst. Daarna kunnen we dat pad gaan bewerken. We kunnen ook in omgekeerde volgorde te werk gaan: we maken een Pad en zetten daar een object op. Daarnaast kunnen we met de 'Virtuele camera' gaan werken: we kunnen de camera roteren en zoomen ten opzichte van een object, en pannen (je naar links of rechts verplaatsen ten opzichte van het object). We kennen ook de Vorm-tween: een cirkel bijvoorbeeld wordt een rechthoek. Tot slot kunnen we werken met het Bone-gereedschap: we brengen 'botten' aan met 'gewrichten' ertussen en we laten die 'ledematen' dan 'bewegen'. Het is vergelijkbaar met wat Mixamo doet en ook Character Animator (zie later op deze pagina), en met de gereedschappen 'Marionet verdraaien' in Photoshop en Illustrator.

Eerst een Bewegings-tween. Open Animate CC en kies voor 'ActionScript 3.0'. Zorg dat onder Venster is aangevinkt 'Balk bewerken' en de twee daaronder. Kies in de Gereedschapskist zowat helemaal onderin een vulkleur, kies het gereedschap Rechthoek en teken linksboven in het werkgebied een rechthoek. Rechtsklik op het zwarte bolletje onder Frame 1 en kies 'Bewegings-tween maken'. U ziet dat u het object moet omzetten naar Symbool. Een Tijdlijn wordt aangebracht, welke u later kunt aanpassen. Selecteer het zwarte pijltje in de Gereedschapskist en sleep het object naar rechtsonder. U ziet het Pad verschijnen. Klik onderin op de knop Afspelen. Het pad kunt u vervormen, slepend met het zwarte pijltje.

Een Vorm-tween nu. Met een Bewegings-tween kunnen we ook nog die rechthoek zich laten vervormen door in de eindpositie de vorm aan te passen met het gereedschap 'Vrije transformatie'. Een Vormtween is toch wat anders: u kunt zich voorstellen dat een rechthoek moeilijk tot ovaal om te vormen is. Doe Bestand › Nieuw en bestudeer het dialoogvenster. Klik op OK. Teken weer een rechthoek linksboven; dit keer maken we er geen Symbool van. Selecteer met het zwarte pijltje een later Frame, bijvoorbeeld 30, en doe Invoegen › Tijdlijn › 'Leeg hoofdframe'. Verander de vulkleur, selecteer het gereedschap Ovaal en teken rechtsonder een ovaal. Klik met het zwarte pijltje ergens ongeveer in het midden van de tijdlijn (bij 15 of zo) en doe Invoegen › 'Vorm-tween maken'. Klik op de afspeelknop en doe dat nog een keer.



Werken met Animate


Een Vorm-tween, met behulp van Photoshop uitgebeeld.



Animatie met Adobe Muse kwam al kort ter sprake: scrollende achtergronden bijvoorbeeld. Ik laat u daar nu iets van zien. Open een nieuwe site in Muse. Kies voor 'Vaste breedte' en klik op OK. Dubbelklik op het vakje Home om vanuit de site naar die pagina te gaan. Teken een rode rechthoek. Doe Venster › Scrolleffecten. Selecteer het eerste knopje, Beweging (zie trouwens dat u via het vierde knopje een Animate-project kunt invoegen). Geef bij Eindbeweging zowel Omhoog als 'Naar rechts' een waarde van ongeveer 10. Doe Bestand › 'Voorvertoning van pagina weergeven in browser'. Nu valt er niks te scrollen en zijn er dus geen scrolleffecten te zien, maar daarvoor hebben we een simpele oplossing. Sleep de onderrand van het browservenster omhoog, tot de scrollbalk verschijnt. Ga nu scrollen.

Er resten mij nog drie vormen van animatie te bespreken. Op de eerste plaats HTML5 / CSS3, ook wel 'CSS3 Transitions' genoemd. Voor voorbeelden, ook met codes erbij, verwijs ik u naar de links op dit bestand. Of zie een voorbeeld van werken met transitions hier. Ga met de muis over de menu-items.

Een korte oefening, om u de basisprincipes bij te brengen van het maken van animaties met Adobe Photoshop. Animaties langs een tijdlijn dus, geen hakkelige zoals met Animated GIF. Open een nieuw bestand met een transparante achtergrond. Teken een cirkel met het gereedschap Ovaal (selecteer links boven eerst Vorm). U geeft de cirkel een bepaalde vulling en een bepaalde rand ('Lijn'). Rechtsklik op de vormlaag in het deelvenster Lagen (dat kan niet in het deelvenstermenu) en kies 'Laag omzetten in pixels'.
Open het deelvenster Tijdlijn. Klik op 'Videotijdlijn maken'. Staat het op 'Frameanimatie maken' klik dan eerst op het zwarte pijltje. Klik rechtsboven in het menu van het deelvenster op 'Framesnelheid voor tijdlijn instellen'. Kies bijvoorbeeld 24 fps (frames per seconde). Klik op OK. Klik de eigenschappen open, links van 'Ovaal 1'; misschien moet u het deelvenster wat hoger maken. Klik op de stopwatch bij Positie; de Afspeelknop moet aan het begin staan natuurlijk. Met het gereedschap Verplaatsen sleept u het object naar de plek die u als startpositie kiest. Sleep de Afspeelknop naar 02.00; zie links onder in het deelvenster. Versleep het object naar waar het zich op dat tijdstip moet bevinden. Er wordt automatisch een Keyframe toegevoegd. Herhaal deze stap voor punt 03.00 en voor het einde. Bekijk de animatie door deze te starten (klik op Afspelen). Sla het bestand op als PSD.
We kunnen in Photoshop ook 3D-animaties maken. Zie hier een Youtube daarover; wat ouder maar de principes zijn gelijk gebleven.



Animatie met Photoshop.



In Adobe InDesign kunnen we animaties maken die we kunnen exporteren op verschillende manieren. Dit kan als SWF (een 'filmpje' dat afspeelt in de Flash Player, of middels de Flash Player in een browser), als FLA, een bestand waarmee we in Adobe Flash Professional en in Animate CC kunnen werken, en als PDF. Een FLA kunnen we openen in Adobe Flash, en het van daaruit exporteren als HTML5-bestand, zodat het ook werkt op iOS.

Open in InDesign een nieuw document (Bestand › Nieuw › Document) en teken daarin bijvoorbeeld een grote groene rechthoek. Laat deze geselecteerd. Doe Venster › Interactief › Animatie. Kies een voorinstelling (zie hoeveel mogelijkheden u hebt), bijvoorbeeld Uitfaden. Als u Continu aanvinkt ziet u de animatie nogmaals, en als u afvinkt weer.
Kies in het menu van het deelvenster (rechtsboven, de streepjes) voor 'Voorvertoning selectie SWF'. Het deelvenster SWF-voorvertoning opent dan. Klik ook eens het paneel Eigenschappen in het deelvenster Animatie open. En klik in het menu van het deelvenster SWF-voorvertoning eens op 'Testen in browser'.

U kunt een object ook langs een Pad laten lopen. Een Pad maakt u met een vormgereedschap, of met Potlood of Pen, of simpelweg met het gereedschap Lijn. Dit pad moet 'boven' het object staan, in de diepte gezien; selecteer het met het zwarte pijltje en werk met Object › Schikken. Selecteer daarna beide objecten door Shift ingedrukt te houden en ze aan te klikken met het selectiegereedschap, en kies dan in het menu van het deelvenster Animatie voor 'Omzetten in bewegingspad'. Denk er bij roteren en zo aan dat een en ander geschiedt op basis van de positie van het referentiepunt, helemaal linksboven in de Optiebalk.



Werken met InDesign


Een animatie maken in Adobe InDesign.
U ziet weer het bewegingspad.



Tot slot behandel ik hier de nieuwste Adobe-applicatie voor het maken van animaties, 'Character Animator'. Het principe is simpel: u kiest een van de poppetjes die in het programma voorhanden zijn (ze staan op het startscherm), of u importeert er een die u maakte in Photoshop of in Illustrator. U start een project, waarbij de webcam met microfoon aan moet staan. Het poppetje staat in het midden van het werkgebied en rechtsboven ziet u wat de webcam ziet. Kies linksboven de naam van het poppetje om het rechts te kunnen bewerken. Kiest u 'Scene - [naam poppetje]' dan kunt u een opname starten (ik kom daarop terug). Alles wat u gaat doen wordt nu ook live door het poppetje gedaan. U lacht, u knijpt uw ogen dicht, u schudt met uw hoofd...
Zoek eens op adobe + "character animator" en ga dan naar Video's. U ziet ook armen bewegen, maar dat moet met slepen met de muis geregeld worden.

Open Character Animator, zet uw webcam aan, zorg voor voldoende belichting, en klik linksboven op 'Open Interactive Tutorial' (ziet u het niet, klik dan midden boven op Start). Het laden duurt even. U ziet weer de Tijdlijn, en daar waar Andrew staat krijgt u de instructie om rechtsboven te klikken op 'Set Rest Pose', de startpositie kiezen. Zorg eerst dat uw hoofd recht vooruitkijkend mooi midden in de cirkel staat rechtsboven. Begin te praten en met uw hoofd te bewegen. Ga verder met het tutorial door op de afspeelknop te klikken.

Klik midden boven weer op start en nu op Wendigo. Selecteer linksboven Wendigo en zie wat u rechts allemaal kunt aanpassen. Selecteer linksboven 'Scene - Wendigo' en u kunt een opname starten met de rode knop. Stop deze met dezelfde knop, kijk terug met de afspeelknop en exporteer via File.
Op de afbeelding hieronder ben ik rechts de ademhaling van Wendigo aan het instellen (hoe snel, hoe zwaar, in welke richting enzovoorts). Rechtsboven ziet u dat ik mijn hoofd scheef houd en mijn mond open heb. Wendigo 'doet me dat na'.



Werken met Character Animator.


(Zie de tekst boven de afbeelding.)



Zie een voorbeeld van een animatie met het programma hier.