Add Instance from Library

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Add Instance from Library
Geef een waardering

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

 

 

Dit keer roepen we een Movie Clip Symbol op uit de bibliotheek.

Allereerst importeren we een Illustrator-illustratie naar de bibliotheek.

Ga naar File > Import > Import to library.

En kies uit de oefenmap voor het illustrator-bestand voor Rocket-end.ai. klik op Open.

Zoals gewoonlijk krijgen het import-venster in beeld.

Met de keuze om de illustratie te importeren als een Movie Clip Symbol.

Er wordt zelfs de mogelijkheid gegeven om de symbool een instantie naam te geven.

Maar je zult zien dat dit onzin is.

Want een Symbol die enkel in de bibliotheek staat kun je geen instantie naam geven.

Dat kan pas als je deze op de Stage plaatst. Klik op ‘Import’.

Zoek de illustratie op in de bibliotheek-venster.

In de map ‘rocket-end.ai Assets staat een map ‘TheEnd’ en daarin bevindt zich de Movie Clip Symbol ‘The End’.

Dat is de illustratie.

Standaard gebruiken we de instantie naam van een Movie Clip Symbol om deze op te roepen in een script.

Hier, in de bibliotheek, hebben we wel een Movie Clip Symbol.

Maar geen instantie naam om het element mee op te roepen.

We hebben wel de mogelijkheid om aan dit item een Linkage naam te verbinden.

Dubbelklik achter de Movie Clip Symbol in de kolom van Linkage.

En je kunt nu een Linkage naam invoeren als bijvoorbeeld ‘TheEnd’.

Het betreft nu niet een afbeelding zoals in de vorige video maar een Movie Clip Symbol met een linkage naam.

En dat ziet Animate als een vervanger voor een instantie naam.

Zet in de timeline de CTi op frame.

Ik selecteer in de roze knop en deze heeft als instantie naam 'ButtonPink'.

Ik activeer de Code Snippet ‘Add Instance from Library’.

Ik verwijder de grijze commentaar regels en ik zie dat deze code niet compleet is.

Alleen de uitvoerende functieregels heb je gekregen.

Bij de vorige opdracht ‘Click to load Image from Library’ staat wel de rest van de benodigde code.

Dus ik selecteer het vorige code fragment en kopieer en plak deze eronder.

Ik wijzig de function naam bijvoorbeeld in ‘Final’.

Dat doe ik dan ook bij de eventListener.

De knop voor deze functie is niet de blauwe, de 'ButtonBlue', maar de 'ButtonPink'. Dus ook deze wijzig ik.

Dit keer roepen we geen afbeelding op uit de bibliotheek, maar een instantie.

Met een libImage. Maar een instantie.

Ik vervang de gekopieerde functie regels voor deze nieuwe.

Deze knip ik met Commando X hieruit weg en plak ik binnen de function.

Ik wijzig de naam van de variabele in ‘MyEnd’.

Dan moet ik deze bij de uitvoerende functie ook wijzigen.

En dan nog het belangrijkste namelijk de instantie naam van de Movie Clip Symbol die in de bibliotheek staat.

Dat is de Linkage naam ‘TheEnd’.

Dan kan ik nu het resultaat bekijken in de browser.

De roze knop biedt nu een alternatief einde met deze illustratie.

Die rechtstreeks uit de bibliotheek wordt gehaald.