Illustratie omzetten naar MovieClip Symbol tijdens importeren

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Illustratie omzetten naar MovieClip Symbol tijdens 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.

HTML5 Canvas in Animate CC: JavaScript Basics

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

In Adobe Animate CC kun je interactieve HTML5 publicaties maken met behulp van het zogeheten Canvas-element. Animate CC 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 Adobe Animate 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

 

 

Er is een manier waarmee je tijdens het importeren van een illustratie.

Alle delen die je wilt gaan animeren of van interactiviteit wilt voorzien.

Direct kunt omzetten naar een Movie Clip Symbool en een instantienaam kunt geven.

Dat is sneller dan de methode die ik eerder heb gebruikt.

Dat heb ik eigenlijk alleen gedaan om duidelijk te maken dat Movie Clip symbolen.

En instantienamen een voorwaarde zijn om te kunnen gaan scripten.

Ik maak een nieuw HTML Canvas document aan.

Het formaat maakt niet uit, die nemen we over van de illustratie.

Importeer de illustratie via File > Import > Import to Stage.

Navigeer naar het oefenbestand ‘robotworld.ai’ en klik op Open.

Ik klap eerst alle lagen in met de opdracht ‘Collapse All’.

Klap dan alleen de eerste laag open en kijk naar de inhoud.

Hierin bevindt zich een groep.

En binnen de groep zijn alleen paden getekend.

Dat zal geen probleem opleveren.

Selecteer de hoofdlaag ‘Signal’.

Vink de optie ‘Create a movie clip’ aan.

Het venster ‘Instance name’ wordt actief.

Voer hier een herkenbare naam in voor deze laag.

Ik neem dezelfde naam over ‘Signal’. Want dat is het meest duidelijk.

Selecteer de volgende laag en klap deze open.

Kijk opnieuw naar de inhoud.

Zolang er alleen maar paden in staan is er geen probleem.

Activeer weer de hoofdlaag. Vink de optie ‘Create a movie clip’ aan.

En geef een herkenbare naam op als Instance name.

Zo werk je laag voor laag af.

Ik maak even een sprong in de tijd.

En ben nu beland bij de laag van de grond ‘Ground’.

Hier heb ik in de illustratie gebruik gemaakt van een Gradiënt Mesh.

Een creatief verloop maar onuitvoerbaar in html met behulp van CSS en JavaScript.

Deze vector-illustratie moet omgezet worden naar een bitmap-afbeelding.

Daarvoor vink je de optie 'Import as bitmap' aan.

Soms herkent Adobe Animate zelf al dat een laag problemen zal gaan opleveren.

En wordt deze optie 'Import as bitmap' automatisch geactiveerd.

Maar dat gebeurt niet altijd.

Dus zul je zelf altijd de inhoud van je illustraties moeten aflopen.

Zodra je een laag tegenkomt waarvan je weet dat deze transparantie...

... bijzondere verlopen of anderszins complexe vormgeving bevat.

Dan kun je problemen voorkomen door voor die laag de optie ‘Import as bitmap’ te activeren.

Geef alle lagen opdracht om een Movie Clip te worden.

Voer alle bijbehorende instantienamen in.

Vink dan de optie ‘Set stage size to the same as illustrator’ aan.

Om het huidige document om te zetten naar de breedte en de hoogte van de illustratie.

Zorg dat de optie ‘Place objects at original position’ aangevinkt staat.

En klik dan op ‘Import’.

En de illustratie is gelijk aan het ontwerp.

En klaargestoomd om te kunnen animeren in Adobe Animate.

In de bibliotheek is een map verschenen. Die heet robotworld.ai.

Die kun je open klappen.

En hierin bevinden zich alle opgeslagen symbolen.

Zoals je ziet is de laag 'Ground' uitgebreid met een bitmap afbeelding

Elk symbool is als het goed is ook direct voorzien van de bijbehorende instantienaam.

Dit maakt dat dit document direct geschikt is om te gaan scripten.