Mouse Out Event

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Mouse Out Event
5 (100%) 1 stem[men]

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 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

 

 

Deze video is een vervolg op de vorige.

Daarin hebben we de gebruikers event Mouse Over..

... gecombineerd met het codefragment ‘Click to Hide an Object’.

Hiermee hebben we ervoor gezorgd dat als de bezoeker met de muis...

...boven de rode knop gaat hangen de planeet rechts in beeld verdwijnt.

In deze video zorgen we ervoor dat de planeet weer tevoorschijn komt .

Zodra de bezoeker met de muis van de rode knop af beweegt.

Ik keer terug naar Adobe Animate.

Activeer het actions-venster.

En zorg dat je naar het script op het eerste frame kijkt.

Feitelijk zou je de vorige video kunnen gebruiken .

Maar dan de opdrachten ‘Mouse Out Event’ combineren met ‘’Show an Object’.

Maar nu doen we het wat sneller.

Want grotendeels lijken deze twee functies op elkaar.

Behalve dat de planeet dus weer tevoorschijn moet komen.

Dus ik kopieer dit codefragment en plak deze eronder.

Nu maak ik enkel de benodigde wijzigingen in het script.

Het gebruikersevent is ditmaal niet een mouseover, maar een mouseout.

Wil ik daarvoor het element met de instantie naam 'Buttonred' gebruiken?

Ja, maar wees vrij om een andere button hiervoor te kiezen.

En is de functionnaam 'HidePlanet' representatief voor deze functie?

Nee! Want het is de bedoeling dat de planeet weer tevoorschijn komt.

Dus wijzig ik deze functionnaam in ‘ShowPlanet’.

En dat doe ik dan ook bij de function zelf.

Wil ik het element met de instantie naam PlanetRight benaderen?

Ja, dat wil ik dus daie staat goed.

Moet de zichtbaarheid van deze planeet op ‘false’ staan, dus onzichtbaar worden?

Nee, ik wil dat deze juist weer tevoorschijn komt.

Dan verander je ‘false’ in ‘true’.

Nou dan zou dit het moeten zijn.

Ga met de muis boven de rode knop hangen, de planeet verdwijnt.

Beweeg nu met de muis van de rode knop af.

En jawel hoor, daar is de planeet weer

Je kunt nu zelf gaan experimenteren met het tonen en verbergen van de verschillende illustraties op de stage.

Er zijn knoppen zat op de countdown die je hiervoor kunt gebruiken.

Wees creatief in het bedenken van variaties hierop.

Want je hebt eerder ook al geleerd hoe je elementen kunt verplaatsen.

Movieclips kunt afspelen en/of stoppen.

En ook tekst in beeld kunt laten verschijnen.