Illustratie importeren

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Illustratie importeren
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

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

 

 

We hebben in de eerste video al een HTML Canvas document aangemaakt.

En daar kijk ik nu weer naar.

We gaan de illustrator-illustratie importeren in het werkgebied.

Ga naar File > Import > Import to Stage.

Navigeer naar de oefenmap en selecteer het bestand robotworld-Layernames.ai. En klik op open.

In het importvenster worden alle illustratielagen weergegeven.

Je kunt door op de driehoekjes te klikken lagen weer inklappen.

Om snel alle lagen dicht te klappen klik je op het icoon ‘Collapse All’.

Om ze allemaal open te klappen klik je op het icoon ‘Expand All’.

Je herkent de lagen-structuur al.

Die is hier exact hetzelfde zoals die gemaakt en bewaard is in Adobe Illustrator.

Het enige wat ik nu hier doe is zorgen dat het formaat van mijn Canvas-document.

Wordt afgestemd op het formaat van mijn illustratie.

Daarvoor zet ik deze optie aan. Set stage size to the same as illustrator.

Ook de optie 'Place objects at original position' moet je aanvinken.

Dan wordt de gehele illustratie direct op de juiste posities gezet.

Klik op Import en klik eenmaal naast het document in het canvas.

En je ziet dat het formaat van het document is aangepast naar pixels breed en pixels hoog.

Met de sneltoets Commando - verklein ik de afbeelding.

Bekijk de Timeline, je herkent alle aparte lagen.

Elke laag heeft nu een eigen tijdlijn gekregen in Animate waarin je animaties kunt gaan maken.

Maar onze missie voor nu is dat ik alle onderdelen van deze illustratie interactief wil kunnen maken.

Dan moet je je aan een paar regels houden.

In Animate maak je gebruik van symbolen.

Als je wilt gaan animeren, interactiviteit of speciale effecten wilt toepassen.

Elk symbool dat je maakt wordt automatisch onderdeel van de bibliotheek van het document, de Librairy.

Het grote voordeel van symbolen is dat je één symbool oneindig vaak kunt toepassen binnen een animatie.

De bestandsgrootte neemt nauwelijks toe want ze refereren allen naar het originele symbool.

Het maken van symbolen doe je als volgt.

Selecteer een illustratie in het werkgebied.

Zie je hoe fijn het is dat je de delen alvast bij elkaar gegroepeerd hebt in illustrator?

Nu kun je met één klik de groep oppakken en ook eventueel verplaatsen.

Ook in de Timeline wordt automatisch de laag geselecteerd waarin de illustratie zich bevindt.

Ga naar Modify > Convert to Symbol.

Voer een unieke naam in, bijvoorbeeld Logo.

En maak een keuze voor het Type symbool.

Je kunt kiezen uit Movie Clip, Button en Graphic.

Maar dan volgt nu de volgende regel.

Want objecten waaraan je een actie wilt verbinden moeten een Movie Clip zijn en een Instantienaam krijgen.

Dus kiezen we voor het type > Movie Clip.

Dan kopieer ik, met commando C, de unieke naam bij Name.

En klik ik op OK.

Kijk dan direct naar het bibliotheek- en eigenschappen-venster.

Je ziet dat de illustratie nu als een MovieClip-symbool is opgeslagen in de bibliotheek.

In het venster Properties heeft het symbool nog geen instantienaam gekregen.

Ga met de muis in het invoerveld staan.

En met Commando V, plak ik exact dezelfde naam als die ik aan het symbool heb gegeven.

Dit hoeft niet dezelfde naam te zijn.

Het enige wat je moet onthouden is dat je bij de naamgeving van een instantie.

Nooit vreemde leestekens, cijfers en/of spaties mag gebruiken.

Dat mag weer wel bij de naamgeving van symbolen.

Ik vind het nu wel handig om zowel het symbool als de instantie dezelfde naam te geven.

Nou en nu moet je elke illustratielaag op deze manier omzetten in een symbool.

Je kunt ook met de rechtermuisknop ingedrukt klikken op een geselecteerde illustratie.

Kies uit het contextuele menu voor Convert to Symbol.

Geef deze een unieke naam.

Want in de bibliotheek kan een symbool niet twee keer dezelfde naam hebben.

Zorg dat je kiest voor het type MovieClip.

Kopieer de naam met Commando C. Klik op OK of druk op de Enter-toets.

En plak de naam in het invoerveld van de instantienaam.

Dit kun je dan herhalen voor alle illustraties.

Uiteindelijk moeten alle illustratieve onderdelen in de bibliotheek komen te staan.

En elk symbool moet voorzien zijn van een instantienaam.