Click to Go to Frame and Stop & Play

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Click to Go to Frame and Stop & 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
Volgende video: Click to Go to Web Page

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

 

 

Ik werk verder in het eindresultaat van de vorige video.

Op de afstandsbediening staan knoppen waarmee ik het dansen van de robot wil kunnen stoppen of juist starten.

Alle aparte onderdelen van deze illustratie zijn al omgezet naar een MovieClip Symbool.

En hebben een herkenbare instantienaam gekregen.

Als je een element in de Stage selecteert

Dan geeft het Properties-venster aan of het element een Symbool is.

Wat voor soort symbool het is, namelijk een Movie Clip

En de instantienaam die het element heeft gekregen.

Ik heb de Play-button geselecteerd. Dit symbool heet ‘RobotPlay’.

En ook de instantienaam die we gebruiken in het script.

Om deze illustratie aan te sturen en op te roepen heet ‘RobotPlay’.

Selecteer de Stop-button.

Deze heeft als symbool de naam ‘RoboStop’ en zo is ook de instantienaam.

Op dit moment is de robot continu aan het dansen.

Allereerst wil ik de robot ook kunnen laten stoppen met dansen.

Dus moet ik ook de instantienaam van de dansende robot weten.

Klik op de robot in de stage en onthoud de instantienaam hiervan.

Dan gaan we nu het script activeren.

Zet de CTI op het eerste frame.

Want ik wil dat de Stop- en Play-buttons gedurende de hele productie deze functionaliteit hebben en houden.

Selecteer dan de stopknop op de afstandsbediening.

Open het Code Snippets venster.

En klik in de map Timeline Navigation.

Op het script ‘Click to Go to Frame and Stop’.

Dubbelklik om deze te activeren.

Het actionsvenster wordt geopend.

Nu gaan we het script lezen en op de benodigde punten aanpassen en wijzigen.

this, slaat op de tijdlijn.

Op deze tijdlijn staat het Movie Clip symbool ‘RobotStop’.

Dat is die rode stopknop op de afstandsbediening.

De gebeurtenis die volgt.

Is één met een gebruikersgebeurtenis, namelijk een klik-actie.

Want dan moet de functie , dan komt die hele lange naam die Adobe Animate zelf voor je aanmaakt.

De 'fl_ClickToGoAndStopAtFrame'.

Dit vind ik geen duidelijke benaming voor wat er gebeurt.

Dus wijzig ik de benaming van de function in ‘StopRobot’.

Ik kopieer deze naam met Commando C

En vervang ook bij de eventListener.

De naam die deze function juist oproept en activeertt en die plak ik daar met Commando V.

Dan de functie zelf.

Deze staat standaard op het afspelen vanaf een bepaalde frame in de tijdlijn.

Ik wil dat ongeacht waar de CTI zich bevindt op de tijdlijn de robot stopt met dansen.

Dus ik verwijder het referentie naar een framenummer.

En ik gebruik dan de javaScript-opdracht 'stop'.

De robot moet stoppen.

En deze heeft als instantienaam 'robot' gekregen.

Dus dat wordt dan this. op de tijdlijn

Staat een element met de instantienaam 'robot', punt stop. Die moet stoppen.

Ik test het resultaat in de browser.

De groene knop maakt dat de robot naar voren springt.

En de stop-button moet nu het afspelen stoppen. En dat gebeurt.

Maar nu wil ik hem met de Play-button ook weer aan het dansen krijgen.

Ik keer terug naar mijn doeldocument.

Je kunt dit huidige script ook kopiëren en plakken.

En aanpassen naar de nieuwe situatie.

Dus ik selecteer het hele script. Commando C om te kopiëren. Commando V om te plakken.

Ditmaal gaat het niet om de Stop-knop maar om de Play-knop.

Dus hoe heet deze afspeelknop? Dat is 'RobotPlay'.

Ik keer weer terug naar mijn Timeline. Ja, ik zorg dat ik op frame sta. Kan ik weer gaan naar mijn actions.

Dus de naam 'RobotStop' moet worden 'RobotPlay'.

De functie wordt dan niet 'StopRobot', maar die noem ik zelf 'PlayRobot'.

En die verander ik ook bij de eventListener, waar deze functie wordt opgeroepen.

En de actie die hieruit volgt, de functie, is niet 'this.robot.stop'.

Maar 'this.robot.play'.

Dan test ik het eindresultaat opnieuw in de browser.

Springen doen we met de Jump-knop.

Stoppen met de Stop-knop. En afspelen met de Play-knop.

En je ziet dat dit gedurende de hele sequence, de hele tijdlijn, reageert op deze knoppen.

Nu kun je alle knoppen van de afstandsbediening gebruiken van springen, stoppen tot afspelen.