Rotate Once / Continuously

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Rotate Once / Continuously
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: Fade In / Out a Movie Clip

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

 

 

je kunt functions laten uitvoeren door een gebruikers-event of een tijd-event.

Bij de gebruikers event maak je gebruik van een handeling die de gebruiker moet verrichten.

Zoals ergens met de muis op inklikken of overheen bewegen.

Een tijd-event is gekoppeld aan het moment op de timeline waaraan je het script verbindt.

In deze opdracht maken we gebruik van beide soorten events.

We werken verder in het vorige bestand.

Vlak nadat de raket opstijgt moet het windmolentje op de voorgrond gaan roteren.

Zet de CTI ongeveer op frame .

Selecteer het windmolentje in de werkruimte en activeer de Snippet ‘Rotate Continuously’.

ik verwijder de commentaar regels zodat ik goed kan kijken naar de code.

De function geef ik een herkenbare naam, zoals 'RotateWindMill'.

De function naam moet ik dan ook wijzigen bij de eventListener.

De waarde die Animate standaard opgeeft is een rotatie van graden.

Eerst maar eens kijken wat dit oplevert.

Oke, de raket stijgt op en niet lang erna begint het windmolentje te draaien.

Als je even geduld hebt zul je zien dat de windmolen steeds sneller gaat draaien.

Dat komt omdat de animatie zichzelf herhalend afspeelt.

Dus zodra de CTI opnieuw langs frame komt.

Dan zal het windmolentje met nog eens ° erbij gaan roteren.

Hoe langer je naar de animatie blijft kijken.

Hoe sneller het windmolentje gaat draaien.

Je kunt dit proces stoppen door op het laatste frame het afspelen van de timeline te laten stoppen.

Activeer de timeline en selecteer frame .

Activeer dan de code 'Stop at this Frame'.

Als ik nu een langere tijd naar de animatie blijf kijken.

Zul je zien dat het windmolentje niet langer meer sneller gaat draaien.

Maar constant met ° blijft roteren.

Zou je het windmolentje de andere kant op willen laten draaien.

Dan kun je voor de rotatiewaarde een negatief getal invoeren, bijvoorbeeld -.

Dan nu de gebruikers-event.

Ik gebruik de groene knop om een planeet te laten roteren met een klik actie.

Ik keer terug naar e timeline.

En zorg dat de CTI op frame komt te staan.

Want ik wil dat deze functie gedurende de gehele animatie uitgevoerd kan worden.

Selecteer de linker planeet in de Stage.

Activeer de Code Snippet ‘Rotate Once’.

Ook nu biedt Animate enkel de function regel aan.

En niet de resterende bijbehorende code.

Maar je bent hopelijk ondertussen zo bekend met de standaard klik-gerelateerde opdrachten.

De gebruikers-events.

Dat je begrijpt dat bijvoorbeeld deze bovenstaande code.

Al voor een groot deel precies hetgeen is wat je nodig hebt.

Ik kopieer dit codefragment en plak deze eronder.

Ik wijzig de functie naam in ‘RotatePlanet’.

Zowel bij de function als bij de eventListener.

Het moet een klik-actie zijn, dus het soort event ‘click’ klopt. dat is een gebruikers-event.

Ik gebruik de groene knop hiervoor dus wijzig de instantie naam ‘ButtonYellow’ in ‘ButtonGreen’.

Want dat is de instantie naam van deze knop.

Dan vervang ik de inhoudelijke functie om de planeet te laten roteren met °.

Ik kan de waarde hier natuurlijk ook wijzigen in bijvoorbeeld °.

Dan zou dit moeten werken.

klik op de groene knop.

En jawel de planeet roteert met ° met elke klik.

De oranje knop verplaatst de planeet.

Aan één instantie kun je dus meerdere opdrachten verbinden.

Dat is mooi om te weten want hier kun je dan weer heel creatief mee omgaan.

Dat is mooi om te weten want hier kun je dan weer heel creatief mee omgaan.