Click to Go to Frame and Play

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Click to Go to Frame and Play
5 (100%) 2 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

 

 

In dit hoofdstuk gaan we de knoppen op de afstandsbediening interactief maken.

De groene knop moet ervoor zorgen dat de robot naar voren gaat springen.

Daar beginnen we mee. Selecteer in de Stage de groene knop op de afstandsbediening.

Kijk naar het properties-venster.

De groene knop is een Movie Clip Symbool en heet RobotJump.

De instantienaam is ook ’RobotJump’.

Dit zijn de voorwaarden om een element te kunnen voorzien van een script. Dus daaraan voldoen we nu.

Zet de CTI op frame , want ik wil vanaf het begin ervoor zorgen dat deze knop fucntioneert.

Zorg dat je de knop actief hebt.

En dubbelklik in het Code Snippets-venster op het codefragment ‘Click to Go to Frame and play’.

De code wordt in het Actions-venster weergegeven.

Ik lees de code met je af.

Het woord ‘this’ refereert naar de tijdlijn.

Daarop staat een symbool met de naam RobotJump.

addEventListener duidt erop dat er een gebeurtenis moet gaan plaatsvinden.

Tussen haakjes daarachter, tussen accolades, staat dan het soort event beschreven.

Hier staat “click”. Dat duidt op een gebruikersgebeurtenis.

Als iemand klikt op het het symbool ‘RobotJump’, dat is de groene knop.

En het gevolg wordt beschreven na de komma met...

fl_ClickToGoandPlayFromFrame_

Hiermee wordt de function opgeroepen die beschreven staat bij ‘function’.

Je ziet dat deze namen exact hetzelfde zijn.

In een function beschrijf je tussen de accolades wat je wilt laten uitvoeren.

Elke function moet een unieke naam krijgen en die heeft Animate zojuist voor jou verzonnen.

Het echte JavaScript staat tussen de accolades.

En dat is this. this slaat weer op de tijdlijn.

gotoAndPlay(); Hier mag je geen letter aan veranderen.

Want dan functioneert die functie niet meer.

Alleen wat tussen haakjes staat mag je aanpassen.

De opdracht die hiermee uitgevoerd wordt.

Is dat de CTI nadat de bezoeker op de groene knop gedrukt.

Naar frame zal gaan springen en vanaf hier verder gaat afspelen.

In ons geval staat de CTI nu stil op frame .

En willen we dat de CTI naar het tweede frame springt en verder gaat afspelen.

Tot en met frame .

Dus wijzig ik het getal in .

Ik zei al dat Animate zelf namen geeft aan de functies.

Deze namen mag je ook zelf bedenken.

Soms is het dan wat makkelijker te lezen wat een script nu eigenlijk doet in de interactieve animatie.

Dus ik dubbelklik op de functienaam en wijzig deze in play...

En dan met een hoofdletter This..., hoofdletter Timeline.

Want dat is wat er zometeen gaat gebeuren.

De CTI springt op deze tijdlijn naar frame en speelt dan de huidige tijdlijn tot en met frame af.

Als ik de functienaam verander bij ‘function’.

Moet ik ook deze naam bij de gebeurtenis gaan wijzigen.

Ik dubbelklik op de vernieuwde functionnaam en kopieer deze met Commando C.

Daarna dubbelklik ik op de function naam bij de EventListener.

En vervang ik deze met Commando V voor de nieuwe naam. Zo, dit zou moeten werken.

Ik activeer de timeline.

En test het bestand in de browser door de sneltoets Commando Return te gebruiken.

De robot staat te dansen maar de CTI staat direct op frame stil.

Nu klik ik op de groene knop. En hoppa daar springt de robot naar voren.

Dat is de animatie van de timeline die frames duurt.

Maar aan het einde van die frames staat de robot ineens weer terug op frame en blijft daar staan.

Dat komt omdat we op frame een stop-opdracht hebben gegeven.

Nu wil ik dat de robot nadat hij naar voren is gesprongen, tot en met frame , op dit laatste frame blijft staan.

Dan zal ik op frame een stop-opdracht moeten geven.

Zorg ervoor dat je de CTI op frame plaatst.

Dubbelklik nu in het venster Code Snippets op de opdracht 'Stop at this Frame'.

In het Actions-venster wordt er ook nu op frame een nieuwe actie toegevoegd.

Ik activeer mijn timeline, test de publicatie in de browser.

Ik laat de robot weer opnieuw naar voren springen.

Wacht tot je aan het einde van de animatie bent.

En nu blijft de robot op de voorgrond staan dansen.

Precies wat ik wilde.

In de volgende video leer ik je hoe je de robot kunt laten starten en stoppen met dansen.