Mouse Over Event

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Mouse Over 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 Out 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

 

 

Event Handlers zijn gebruikers gebeurtenissen.

Hiermee kun je dus een functie laten uitvoeren zodra de gebruiker een handeling verricht.

Er zijn verschillende soorten gebruikers gebeurtenissen die je kunt aanspreken.

Open in het venster Code Snippets de map ‘Event handlers’.

Tot nu toe hebben we voornamelijk al gebruik gemaakt van de simpele klik actie.

Maar ook als de gebruiker met de muis ergens overheen beweegt.

Kan een gevolg krijgen. Of zodra de muis ergens over heen bewogen heeft.

En het dubbelklikken.

Met deze codefragmenten wordt enkel de handeling van de gebruiker afgevangen.

Het gevolg hiervan kun je zelf bepalen met de function die je hieraan koppelt.

We zijn nu al enigszins thuis in het toepassen van JavaScript.

Je kunt eerdere codefragmenten gaan combineren met deze event handlers.

Ik doe er een paar voor en verder is het kwestie van experimenteren.

Ik start met het codefragmenten ‘Mouse Over'.

Zorg dat de CTI op het eerste frame staat.

Er is al een actions-laag aangemaakt in het lagengedeelte van de timeline.

Dus hierin zullen de scripts opgeslagen worden die je toepast.

Nog voordat we iets doen bekijken we het huidige document in de browser.

De wijzer van de Countdown loopt af.

En de raket spuugt al rookwolken uit.

Deze twee geneste animaties zijn al voorbereid in deze publicatie.

Keer ik weer terug naar Adobe Animate.

Selecteer in de stage een knop op de countdown.

Alle illustratieve onderdelen zijn al omgezet in MovieClip Symbolen.

Met bijbehorende instantie naam.

De instantie naam van deze knop is 'ButtonRed'.

Dus je kunt meteen aan de slag met scripten.

Met de rode knop geselecteerd dubbelklik ik op het codefragment ‘Mouse Over Event’.

Bekijk de code in het actions-venster.

De regel stage.enableMouseOver() is belangrijk.

Want hiermee zorg je ervoor dat deze gebeurtenis ook daadwerkelijk afgevangen wordt door de browser.

Deze functie werkt natuurlijk alleen op een desktop computer.

Waarop de gebruiker met de muis over de illustratie kan bewegen.

Als iemand de productie bekijkt op een tablet of smartphone.

Dan werkt deze functie natuurlijk niet.

Standaard biedt Animate een variabele aan.

Waarmee je de frequentie waarop gereageerd moet worden een maximum kunt geven.

Als ik het getal bij frequentie bijvoorbeeld verander in .

Dan zal deze functie slechts keer plaatsvinden.

Gedurende het afspelen van de tijdlijn.

Maar van deze beperking maak ik nu geen gebruik.

Dus ik verwijder de variabele en wisook ‘frequency’ bij de 'stage.enableMouseOver()'.

Ik wil de planeet rechts laten verdwijnen zodra de bezoeker met de muis boven de rode knop hangt.

De planeet heeft als instantienaam ‘PlanetRight’ gekregen.

Ik maak nu gebruik van een bestaand Code Snippet.

Namelijk 'Click to Hide an object'.

Keer ik terug naar de vorige code.

Allereerst wijzig ik de function naam in 'HidePlanet'.

En deze neem ik ook op in de eventListener die deze function oproept.

Kijk je naar de code waarin we zojuist de opdracht hebben gegeven om te klikken en de planeet te verbergen.

Dan zie je dat achter de function naam.

De code .bind(this) staat geschreven.

En dat zorgt ervoor dat de PlanetRight binnen de function onzichtbaar wordt gemaakt.

Dus deze code moeten we ook nog kopiëren of typen achter ons mouse-over script.

Dan kunnen we nu de function van 'Click to Hide an Oject' overnemen.

Ik knip deze hier weg en ik vervang de function van de mouseover event.

Dan heb ik al deze code hieronder niet meer nodig. Ik verwijder ook de commentaar regels.

En kijk nog eens goed naar de code die is overgebleven.

Met 'stage.enableMouseOver();' zorg je ervoor dat de browser afvangt waar de muis zich bevindt.

Op het moment dat de gebruiker met zijn muis boven de button 'ButtonRed' staat.

Dan moet de volgende functie worden uitgevoerd.

De functie heet 'HidePlanet'.

Die staat hieronder beschreven. En daarin staat 'this' en dat slaat op de tijdlijn.

Op de tijdlijn staat een element met de instantienaam 'PlanetRight'.

Daarvan moet de zichtbaarheid op 'false' worden gezet. Oftewel onzichtbaar.

Ik bekijk een voorbeeld in de browser.

Zodra ik nu met mijn muis over de rode knop heen ga.

Moet de planeet verbergen en dat doet hij ook.

In de volgende video halen we de planeet weer tevoorschijn.

Op het moment dat de bezoeker met de muis weer van de knop af beweegt.