Move Horizontally / Vertically

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Move 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

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

 

 

Niet alle Code Snippets bieden de volledig benodigde code om te kunnen functioneren.

Zo ook de codefragmenten ‘Move Horizontally en -Vertically’.

Je zult hier zelf nog de aanvullende code bij moeten schrijven.

Voor diegenen die geen ervaring en kennis hebben met het schrijven van script.

Doe ik voor hoe je deze fragmenten toch aan de praat krijgt door ze te combineren.

Ik ga de gele knop gebruiken om de ufo te verplaatsen.

Deze staat nu buiten beeld.

Maar kan de gebruiker dan voorbij laten komen.

Door op de gele knop te gaan drukken.

Selecteer de gele knop en activeer de Code Snippet ‘Click to Position an Object’.

Dit is de basiscode die je nodig hebt.

Ik bekijk het script in het Actions-venster.

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

Ik geef de function een herkenbare naam als ‘MoveUfo’.

Wijzig dan ook de function naam bij de evenListener die de functie oproept.

In de functie wordt nu de gele knop op een andere positie gezet.

Want de waarden x= en y= zijn absolute waarden.

Die vanaf het -punt van de stage worden uitgevoerd.

Ik bekijk het resultaat in de browser.

Klik op de gele knop en deze wordt verplaatst naar de opgegeven positie.

Ik keer terug naar Animate.

Allereerst selecteer ik de ufo.

Want die wil ik gaan verplaatsen.

Met de ufo actief activeer ik de Code Snippet ‘Move Horizontally’.

Ook hier verwijder ik de commentaar regels.

En daarna activeer ik ook nog eens de Code Snippet voor het verticaal verplaatsen.

Selecteer de ufo en activeer 'Move Vertically'.

En ook hier haal ik de commentaar regels weg.

En dan kunnen we beide function-opdrachten even goed vergelijken.

De juiste instantie wordt nu aangesproken, dat is de ufo.

Belangrijker is de wijze waarop de waarden worden opgegeven.

Bij de ufo staat nu voor het =teken een +teken.

Die staat er niet bij de ButtonYellow en dat is een groot verschil.

De ButtonYellow wordt nu namelijk gepositioneerd vanaf het -punt.

Terwijl de ufo nu met de ingevoerde waarde verplaatst wordt vanaf zijn huidige positie.

Dat is de functie van het +teken.

Een heel belangrijk verschil dus.

Ik selecteer de ufo-regels die knip ik weg met Commando X.

En de huidige function-regels vervang ik hiermee.

Ik kan beide regels selecteren en met de tab een stukje laten inspringen.

Nu kijk ik eerst wat er gebeurt als ik deze standaard waarden van Animate gebruik.

En test het resultaat in de browser.

Ik klik op de gele button.

Na de eerste klik zie ik al een stukje van de ufo in beeld verschijnen.

Bij elke klik verplaatst de ufo zich diagonaal onderin uit beeld.

Terug naar Adobe Animate.

Experimenteer met andere waarden om de ufo diagonaal rechts bovenin uit beeld te laten verdwijnen.

Voor de horizontale verplaatsing typ ik en de verticale verplaatsing zet ik op .

Ik kijk opnieuw naar het eindresultaat in de browser.

Klik meerdere malen op de gele knop om de ufo voorbij te laten vliegen.

Zelfs als de ufo boven de gele knop vliegt en deze bedekt functioneert de knop alsnog.