Mouse Click Event

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Mouse Click Event
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: Mouse Double Click 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 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

 

 

Met de gebruikersgebeurtenis ‘klik’ gaan we een planeet verplaatsen op de stage.

Met de gebeurtenis ‘dubbelklik’ zetten straks de planeet weer op zijn originele positie.

Maar we starten met de eenvoudige klik-actie waarmee we al vaker hebben gewerkt.

Selecteer de oranje button.

Activeer dan de Event Handler ‘Mouse Click Event’.

Bekijk de code in het actions venster.

Standaard laat Animate een waarschuwingsvenster verschijnen

Om aan te tonen dat de functie werkt.

Dat is de function code 'alert("Mouse Clicked");'

Bekijk het resultaat in de browser.

Zodra je op de oranje button klikt. Verschijnt er een venster met de tekst ‘Mouse clicked’.

Ik keer terug naar Animate.

De instantienaam van de linker planeet is 'PlanetLeft’.

Dan wijzig ik al sowieso de function name in ‘MovePlanetLeft’.

Wijzig dan ook de function naam bij de event handler die deze oproept.

Dan heb ik nu de functieregel nodig waarmee ik een element op de stage kan verplaatsen of positioneren.

Ik selecteer de linker planeet.

En activeer het codefragment ‘Click to Position an Object.

Van dit fragment heb ik dus enkel de functieregels nodig.

Selecteer deze. Kopeer deze met Commando C.

En ik plak deze op de plek van mijn huidige functie regels.

Daarna kan ik de overige commentaar regels en functie die ik niet meer nodig heb, verwijderen.

Dan houden we deze code over.

Met de function regel ‘this.PlanetLeft.x = ’ .

Geef je opdracht om de planeet op pixels horizontaal te positioneren.

Daar staat de x voor.

En met de volgende functieregel geef je opdracht om de verticale positie op pixels te zetten.

Daar staat de y voor.

Posities worden bepaald vanaf het -punt.

Het -punt bevindt zich standaard in de linker bovenhoek.

Dus ik bekijk de productie in de browser om te zien wat er gebeurt.

Ik klik op de oranje knop en de planeet wordt verplaatst.

Nu staat deze pixels opzij en pixels naar beneden vanaf het -punt.

Keer ik weer terug naar Animate.

Beide waarden zet ik nu op .

En ik bekijk opnieuw het resultaat in de browser.

Nu wordt het midden van de planeet op het -punt geplaatst.

Dat betekent dus dat het -punt van de planeet in het midden van de planeet staat.

Terwijl het -punt van het document zich in de linker bovenhoek bevindt.

Erg belangrijk om te weten.

En ik ga weer terug naar Adobe Animate.

Nu wil ik dat de bezoeker door op de oranje knop te drukken de planeet telkens een stukje verschuift.

Vanaf zijn huidige positie.

Dan moet je het volgende doen.

Typ direct voor het = teken een + teken.

Er mag geen spatie tussen zitten, want dan doet de opdracht het niet meer.

En achter het = teken zet je het aantal pixels waarmee je de planeet wilt verplaatsen.

Dus ik wil dat de planeet vanaf zijn huidige positie...

... pixels naar rechts verschuift en dan ook pixels naar beneden.

Test ik dit weer in de browser.

Telkens als ik nu klik, wordt de verschuiving opgeteld bij de nieuwe positie.

Stel dat ik de planeet juist omhoog wil verplaatsen.

Dan typ ik niet de waarde maar -.

Dan verplaatst de planeet zich omhoog.

Dat kun je natuurlijk ook doen voor de horizontale verplaatsing.

Dan wordt de planeet naar links verplaatst in plaats van naar rechts.