Click to load Image from Library

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Click to load Image 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
Volgende video: Add Instance from Library

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

 

 

Tot nu toe hebben we enkel illustraties geanimeerd die al in het werkgebied aanwezig waren.

En al deze illustraties waren al omgezet in een Movie Clip Symbol.

En hadden een instantie naam gekregen in het venster Properties.

Maar je kunt ook een illustratie of afbeelding laten oproepen uit de bibliotheek.

En dan op de stage laten plaatsen.

In deze video leer ik je hoe je een afbeelding importeert in de bibliotheek.

En hoe je daarna deze afbeelding uit de bibliotheek kunt oproepen met een gebruikers-event.

We beginnen met het importeren van een afbeelding.

Ga naar File > Import > import to Library.

Kies uit de oefenmap voor de afbeelding ‘ThatsAll.png’. Klik op Open.

Zorg dat je in de bibliotheek de afbeelding ziet.

Aan het icoon kun je al herkennen dat dit een 'Graphic' is en geen ‘Movie Clip’.

Tot nu toe heb ik altijd gezegd dat illustraties die je wilt kunnen benaderen met JavaScript.

Een Movie Clip Symbol moet zijn en een instantie naam moet krijgen.

Het is namelijk de instantie naam die je opgeeft binnen de function.

Instantie namen zijn alleen maar beschikbaar voor illustraties die op de Stage worden gezet.

En in dit geval wil ik deze afbeelding niet op de stage plaatsen.

Dan kun je in de bibliotheek een ‘Linkage’ naam opgeven.

Dubbelklik achter het bibliotheek-item onder de kolom ‘Linkage’ en een invoerveld verschijnt.

Ik noem deze afbeelding “ThatsAll’.

Deze Linkage-naam kun je nu gaan gebruiken binnen de function om het item op te roepen.

Ik doe het voor.

Activeer de timeline, zorg dat de CTI op frame staat.

Ik selecteer in de stage de blauwe knop.

En activeer dan de Code Snippet ‘Click to Load Image from Library’.

Ik haal de grijze commentaar regels weer weg.

Ik wijzig de functienaam in ‘EndImage’.

De naamswijziging voer ik ook door bij de eventListener.

Binnen de functie wordt een variabele gemaakt die een nieuw element gaat introduceren.

Dit element is te vinden in de library.

En dat wordt aangegeven met 'libImage'.

En de Linkage Name die Animate hier invoert is 'MyImage'.

Nou dat klopt natuurlijk niet!

Want deze heb ik zojuist de Linkage name ‘ThatsAll’ meegegeven.

Dus wijzig ik ‘MyImage’ in ‘ThatsAll’.

Met de functieregel this.addChild wordt een nieuw element toegevoegd aan de stage.

Welk element? Nou de ‘libImage’.

En dat refereert naar de variabele die de afbeelding met de Linkage ‘ThatsAll’ definieert.

Dus we gaan eens kijken wat er gebeurt in de browser.

Ik klik op de blauwe knop en hoppa, daar verschijn mijn afbeelding die trouwens transparant is.

Door de opening zag je zojuist nog net een deel van de raket opstijgen.