Animate Horizontally / Vertically

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Animate Horizontally / Vertically
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: Rotate Once / Continuously

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

 

 

De scripts 'Animation' worden direct op de tijdlijn uitgevoerd en opgestart.

Zodra de CTI het frame bereikt waarop het script is toegepast.

Zonder verder ingrijpen zal dit script dan ook niet stoppen.

Dus ook al is een animatie uit beeld verdwenen en zie je deze niet meer.

Het script blijft draaien en de animatie verplaats zich al maar verder uit beeld.

Ik ga eerst de timeline verlengen met seconden.

Een productie die is ingesteld op frames per seconde maak je dan frames lang.

Ik gebruik de schuif eerst om de timeline te verkleinen.

En daarna de navigatieschuif om naar het bewuste frame te komen.

Klik in op hte frame voor de bovenste laag.

Houd de Shift-toets ingedrukt en klik in op het frame voor de onderste laag.

Klik dan met de rechtermuisknop ingedrukt op een van de frames.

En kies voor 'Insert Frame' uit het contextuele menu.

Na seconde wil ik dat de raket gaat opstijgen.

Dan moet de CTI op frame staan.

Je kunt de schuif weer gebruiken om naar dit frame toe te navigeren.

Of typ onderin de timeline het frame waar je naartoe wilt .

Enter om te bevestigen en de CTI staat op het juiste frame.

Selecteer dan de ‘Rocket’ in het werkgebied en activeer de Code Snippet 'Animate Vertically'.

Ik verwijder de commentaar regels zodat ik goed zicht heb op de code.

Dit is de eerste keer dat een Code Snippet standaard een tijdevent gebruikt.

Je herkent dit aan het soort event bij de eventListener. Hier staat “tick”.

En daarmee zorg je dat het moment in de tijd bepalend is voor het activeren van het script.

In dit geval dus het moment waarop dit script geactiveerd wordt op de tijdlijn.

En dat is op frame , dus na seconde.

Allereerst geef ik de function weer een herkenbare naam mee, als bijvoorbeeld ‘RocketStart’.

Wijzig deze naam dan ook bij de evenListener die deze functie aanroept.

ik speel de animatie af in een browser.

na seconde vliegt de raket weg, maar wel de verkeerde richting uit.

Dit moeten we herstellen bij de ingevoerde waarde in de functie.

Ik keer terug naar Adobe Animate.

Hier moet niet een positieve waarde staan maar juist een negatieve waarde.

Dus zet ik hem op - en bekijk ik opnieuw het resultaat in de browser.

na seconde moet hij nu, jawel, omhoog vliegen.

Als je vindt dat het te snel gaat dan kun je de waarden verlagen in de function.

Ik zet hem nu op -, maar je zou hem natuurlijk ook kunnen verhogen.

nu moet de raket na seconde minder snel opstijgen en dat gebeurt.

Op deze manier zou je ook op een opgegeven moment de ufo voorbij kunnen laten vliegen.

Misschien een leuke uitdaging om nu te proberen.