Stop & Play a Movie Clip

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Stop & Play a Movie Clip
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
Volgende video: Mouse Over Event

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 jouw 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

 

 

Standaard spelen animaties zichzelf af.

Je kunt het afspelen en stoppen van een animatie gaan regelen met JavaScript.

In een eerdere video heb ik het dansen van de robot laten starten en stoppen.

Met de codefragmenten ‘Click to Go to Frame and Stop en Play’.

Deze vind je in de map ’Timeline navigation’.

Nu biedt de map ‘Actions’ ook codefragmenten aan.

Waarmee je de animatie kunt laten afspelen en stoppen.

Hier vind je de codefragmenten 'Play a Movie Clip' en 'Stop een Movie Clip'.

Maar deze fragmenten bevatten enkel de uitvoerende function-regels.

Dus daar zul je zelf nog de bijbehorende code bij moeten schrijven.

En als je geen kennis van JavaScript hebt is dit nogal veel gevraagd.

Gelukkig kunnen we gebruik maken van de codefragmenten uit de map Timeline Navigation.

Want daar vind je de ontbrekende code die bij deze opdracht hoort.

Ik plaats eerst de uitvoerende function-regels om het afspelen te stoppen en te starten.

Zorg dat de CTI op het eerste frame staat.

Selecteer de stop-knop op de afstandsbediening.

En dubbelklik op het codefragment ‘Stop a Movie Clip’.

Ik verwijder de grijze commentaarregels.

Daarna selecteer ik de play-button en activeerik ’Play a Movie Clip’.

Ook hiervoor verwijder ik de grijze commentaar regels.

Deze twee regels doen helemaal niets.

Want dit zijn slechts de uitvoerende function-regels.

De bijbehorende code waarin het gebruikersevent wordt bepaald is nu niet aanwezig.

Dus er ontbreekt van alles aan dit codefragment.

Wees gerust. Deze twee regels gaan we straks op de juiste plek zetten.

We zullen namelijk eerst de juiste basiscode moeten plaatsen.

Opnieuw selecteer ik de Stop-knop op de afstandsbediening.

En activeer de Code Snippet ‘Click to Go to Frame and Stop’.

ik verwijder opnieuw de grijze commentaarregels.

ik wijzig de function naam in ‘RobotPause’.

Dat doe ik dan ook bij de eventListener die deze functie oproept.

Binnen de function moet je aangeven wat er moet gebeuren.

Hiervoor komt de zojuist geplaatste code van ‘Stop a Movie Clip’ van pas.

Knip deze weg, met Commando X en vervang de huidige function voor deze code.

Zorg ervoor dat de juiste instantie op de stage stopt met animeren.

RobotStop is de stop-knop. De robot heeft als instantie naam 'robot'.

Dubbelklik weer op Actions van frame .

En wijzig de instantie naam.

Dan gaan we nu eerst controleren.

Dat de robot daadwerkelijk stopt met dansen als je op de stop-knop drukt.

ik klik op de stop-knop. En inderdaad de robot stopt met dansen.

Dan keer ik weer terug naar Adobe Animate.

Ik activeer de play-knop.

En dit keer kies ik voor het codefragment 'Click to Go to Frame and Play'.

En ik verwijder weer de commentaar regels.

De function naam wijzig ik in 'RobotPlay'.

En dat doe ik dan ook bij de eventListener die deze function oproept.

De code waarmee de animatie moet worden afgespeeld, staat hier.

Deze kan ik hier uit wegknippen.

En plakken binnen de function.

Moet ik ervoor zorgen dat wel het juiste element op de stage gaat afspelen.

En dat is de robot. Gaan we opnieuw bekijken in een browser.

Hiermee moet ik de animatie kunnen stoppen.

Hiermee moet hij weer gaan afspelen.

Maak nu zelf eens een geneste animatie.

En zorg dat de gebruiker het afspelen en stoppen van de animatie zelf kan gaan bepalen.