Illustratie voorbereiden voor import in Animate

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Illustratie voorbereiden voor import in Animate
5 (100%) 1 stem[men]

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen
Volgende video: Illustratie importeren

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

HTML5 Canvas in Animate CC: JavaScript Basics

perm_identity Belinda | video_library 31 video's | query_builder 2:04:51

Interactieve animaties met geavanceerde tekentools

In Adobe Animate CC kun je interactieve HTML5 publicaties maken met behulp van het zogeheten Canvas-element. Het programma biedt standaard een aantal codefragmenten aan waarmee je heel snel een interactieve animatie of -infographic kunt maken. Met de nadruk op interactief, want daarvoor gebruik je de zogeheten Code Snippets.

In deze online cursus leer je met duidelijke instructievideo’s hoe je de standaard codefragmenten (Code Snippets) van Animate CC kunt toepassen in jouw publicatie. De cursus is juist speciaal ontwikkeld voor mensen die geen kennis van JavaScript of andere codetalen hebben.

Aan het creëren van de animaties zelf wordt geen aandacht besteed, dus kennis van de applicatie Adobe Animate CC is wel een vereiste. In deze cursus werk je met voorbereidde bestanden. Al kun je natuurlijk de kennis ook direct gaan toepassen in een eigen productie.

Je leert hoe je met de codefragmenten van het programma zowel gebruikers- als tijdsgebeurtenissen activeert. Dus je creëert interactiviteit op basis van een muisklik of als de bezoeker met de muis ergens overheen beweegt (user-event). Of zodra de animatie een bepaald punt in de tijd heeft bereikt (tijd-event). Je kunt dan interacties maken als:
• Animaties opstarten en stoppen
• Illustraties verplaatsen, roteren en positioneren
• Illustraties in- en uitfaden
• Tekst in beeld tonen
• De cursor van uiterlijk doen veranderen

 

 

Je kunt in Animate alle onderdelen van je animatie gaan creëren met de tekengereedschappen.

Maar je kunt ook illustraties voorbereiden in Adobe Photoshop of Illustrator.

Werk je in Adobe Animate dan heb je alleen beschikking over de gereedschappen en toepassingen.

Die ook door de publicatievorm ondersteund worden.

Werk je echter in Photoshop of illustrator

Dan kun je makkelijk gebruik maken van heel veel technieken.

Die niet ondersteund worden door Adobe Animate.

Ik heb hier een illustratie voorbereid in Adobe Illustrator.

Deze illustratie wil ik gaan animeren en interactief maken in Adobe Animate.

Ik weet dat er een aantal technieken zijn die je eenvoudig kunt toepassen in Illustrator.

Maar problemen opleveren in Adobe Animate als je daar niets aan doet.

Je zult onder andere tegen problemen aanlopen als je de volgende technieken gebruikt.

Een slagschaduw die transparantie heeft naar onderliggende vectorillustraties.

Deze kun je met een effect makkelijk toepassen op geselecteerde vormen.

Hier zou je uiteindelijk een afbeelding van moeten maken via Object > Rasterize.

Ik wil de achtergrond wel transparant houden, dus zet ik deze wel op Transparent.

Kijk maar eens in het lagenvenster.

Je ziet dat de vectorvorm nu omgezet is naar een afbeelding.

De vectorgegevens zijn nu wel verloren gegaan.

Het zijn afbeeldingspixels geworden.

Het maken en toepassen van bijzondere verlopen met bijvoorbeeld het verloopnet.

De Gradient mesh. Zijn ontzettend leuk om te maken.

Maar in een HTML-productie kun je dit enkel laten tonen als het een afbeelding is.

Dus ook hier zal ik een afbeelding van moeten maken.

Eigenlijk kun je stellen dat alle vormen van transparantie bij uitwisseling problematisch kunnen zijn.

Dus ook bijvoorbeeld de overvloeimodi die je eenvoudig bij het venster Appearance kunt activeren.

Bijvoorbeeld Multiply. geeft een bijzonder resultaat.

Maar je ziet dat dit gewoon een speciale uitvoering van transparantie is.

Om geen problemen te krijgen zou je eigenlijk alleen met volle, dekkende kleuren moeten werken.

En alleen gebruik maken van de standaard radiale en lineaire verlopen.

Nu is het wel zo dat je problemen met de illustratie ook nog in Adobe Animate kunt oplossen.

Want ook daar kun je ze ook nog laten omzetten naar een Graphic, een afbeelding.

Verder is het aan te raden om alle aparte illustraties te groeperen en op een aparte laag te zetten.

Geef dan de lagen een herkenbare naam mee.

Dus, maak eerst een nieuwe laag aan in het lagenvenster .

Door onderin het venster te klikken op het nieuwe laag symbool.

Zorg dat die laag actief is en teken de illustratieve vormen.

Elke vorm of lijn wordt dan in de huidig actieve laag geplaatst.

Klap de laag open en je ziet alle losse onderdelen.

Om alles bij elkaar te houden kun je deze het beste groeperen.

Selecteer alles binnen een laag door achter de naam van de laag op het selectierondje te klikken.

Aan de selectiekleur kun je zien wat er allemaal geselecteerd is.

Ga naar Object > Group om al het geselecteerde te groeperen.

Met de opdracht ‘Ungroup’ kun je ook weer degroeperen.

Dubbelklik op de naam van de laag en je kunt een andere naam invoeren.

Zoals je ziet heb ik deze illustratie al helemaal geordend in lagen en groepen opgebouwd.

ik heb zo min mogelijk gebruik gemaakt van bijzondere verlopen.

Slagschaduwen, overvloeimodi of complexe illustraties.

Ik bewaar dit document en in de volgende video gaan we deze plaatsen in Adobe Animate.