Stop at this Frame

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Stop at this Frame
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

 

 

Open het bestand ‘robotworld.fla’ uit de oefenmap.

Speel de productie af in een browser.

Ga naar Control > Test movie > In browser.

Direct springt de robot naar voren.

Deze animatie blijft zichzelf herhalend afspelen.

Het eerste wat we willen doen is het automatisch afspelen van de animatie laten stoppen.

Ik keer terug naar mijn doeldocument. Zet de CTI op het eerste frame.

Open het venster Code Snippets. Deze heb ik hier staan en kan ik uitklappen.

Je kunt het venster openen via Window > Code Snippets.

Open dan de map Timeline navigation. Hiermee gaan we beginnen.

Dubbelklik op het codefragment ‘Stop at this Frame’.

Het venster ‘Actions’ wordt automatisch geactiveerd.

De grijze tekst staat tussen zogeheten commentaartekens.

Hierdoor kun je tekst in een Scriptbestand plaatsen.

Animate legt in deze tekst uit wat het script doet.

Je kunt deze tekst houden of wissen, maar ook je eigen tekst erin plaatsen.

Zolang je de commentaartekens aan het begin en aan het einde van je commentaar maar behoudt.

En dat is aan het begin / * en aan het eind * /. Als je dit niet doet.

Dan zou deze tekst opgevat worden als code en dat is niet het geval.

De bedoeling van dit script is dat de animatie direct op frame moeten stoppen.

Wat inhoudt dat de robot op zijn plek moet blijven staan.

We gaan dit testen door de productie af te spelen in een browser.

En inderdaad, de robot springt niet meer, maar hij danst nog wel.

Dat komt omdat het dansen een geneste animatie van de robot zelf is.

En die heeft geen stop-opdracht gekregen.

Ik keer weer terug naar mijn doeldocument.

Activeer in de timeline de robot en dubbelklik hierop.

Nu kijk je naar de tijdslijn van de robot. Ik activeer mijn timeline-venster. Daar zie je hem.

Zet ook hier de CTI op het eerste frame.

Laten we deze animatie ook stoppen op het eerste frame.

Dubbelklik op de Scriptopdracht ‘Stop at this Frame’.

Zie hoe Animate dit Script weergeeft in het Actions-venster.

Hier lees ja af dat er nu twee scripts zijn toegepast.

Eén in Scene op frame en één script is gekoppeld aan het symbool met de naam ‘robot’.

En ook daar is een script toegepast op frame .

En dat klopt precies met wat we zojuist gedaan hebben.

Test de productie opnieuw in een browser.

Ga naar Control > Test Movie in Browser of gebruik de toetscombinatie ‘Commando > Harde return’.

De robot danst nu ook niet meer.

Nu zou je zelf met een volgend script kunnen gaan bepalen wanneer je de animatie wilt starten.

Ik keer terug naar mijn doeldocument.

En ga de stopactie voor de dansende robot verwijderen.

Want deze mag gewoon dansen als we de publicatie opstarten.

Dubbelklik in het Actions-vensterop het bewuste script .

Daar kun je deze nu selecteren en verwijderen.

Zie hoe het venster Actions, automatisch weer bijgewerkt wordt.

Activeer Scene en bewaar dit document onder een aparte naam in een map.

Ik bewaar dit bestand als 'robotworld' en hiermee werken we zometeen verder.