Login

Annuleer
Wachtwoord vergeten?
Kopen

Mouse Double Click Event

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Move Horizontally / Vertically

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

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.

Doelgroep van deze cursus

De cursus is speciaal ontwikkeld voor mensen die geen kennis van JavaScript of andere codetalen hebben maar wel graag willen leren hoe je interactieve html5-webpublicaties kunt maken.

Wat ga je leren

In deze cursus leer je met duidelijke instructievideo’s hoe je de standaard codefragmenten (Code Snippets) van Animate CC kunt toepassen in jouw publicatie.

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

Vereiste voorkennis en vaardigheden

Aan het creëren van de animaties zelf wordt geen aandacht besteed, dus enige 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.

 

 

 

Met een dubbelklik-actie wil ik de planeet weer op de originele positie zetten.

Selecteer de oranje button en activeer het codefragment 'Double click event'.

Ook nu geeft Animate weer een fractie van de benodigde code.

Het is nu makkelijker om ook weer het voorgaande te kopiëren

En eronder te plakken.

En dan de benodigde verbeteringen met de hand te gaan maken.

Ik wijzig de function naam in ‘ResetPlanetLeft’

En wijzig deze ook bij de event Handler die de functie oproept.

In plaats van 'click' wijzig ik de gebeurtenis in ‘dblclick’.

Dan moeten we nu de originele positie opgeven. En ik verwijder deze code.

In de vorige video hebben we gezien dat het positioneren op de stage...

... geschiedt vanuit het -punt, de linker bovenhoek.

Maar het -punt van de planeet bevindt zich in het midden van de planeet.

Dus zullen we een rekensom moeten maken om de exacte positie uit te rekenen.

Selecteer de planeet en kijk ik activeer een calculator in beeld.

Kijk naar het properties-venster die de waarden weergeeft van het geselecteerde.

Het horizontale midden van de planeet is ,. Ik deel deze door .

En tel daar de huidige positie , bij op.

En dan is de absolute positie ,.

Het verticale midden van de planeet is / .

Plus , . En dat is dan ,.

Dus plaatsen we deze uitkomsten als horizontale en verticale positie.

De plus-icoon haal ik weg. De x-positie wordt ,.

En de y-positie wordt ,.

Ik test het resultaat in de browser.

Ik verplaats met een enkele klik de planeet van zijj huidige positie.

Als ik nu dubbelklik dan wordt de planeet inderdaad weer op zijn originele positie gezet.

Zou je in de toekomst meer willen kunnen scripten.

Dan laat ik je nu een betere manier zien.

Maar mocht je dit te gecompliceerd vinden.

Dan kun je altijd terugvallen op de vorige methode.

Stel dat ik nu ineens besluit om de planeet op een andere positie in de stage te plaatsen.

Dan zou mijn huidige code niet meer kloppen.

En moet ik opnieuw de nieuwe positie gaan uitrekenen. Kijk maar.

De planeet verplaatst zich wel vanaf zijn huidige positie met een enkele klik.

Maar zodra ik dubbelklik wordt deze absoluut gepositioneerd op de ingevoerde waarden.

Dan kan het lonen om het volgende te leren.

Ik schrijf bovenaan in het script de volgende code.

PositionPlanetLeftx = this.PlanetLeft.x;

Deze code kopieer ik. Plak ik in de regel eronder,

En voor de verticale waarde voer ik dan een y in.

Wat je hiermee doet is de browser opdracht geven om direct de huidige positie van de planeet afvangen,

Zowel de horizontale positie van de x als de verticale positie met de y.

Nu plaats ik de functionregel van ons script het volgende .

this.PlanetLeft.x = PositionPlanetLeftx ;

En deze regel kan ik dan weer kopiëren en plakken.

En de x verander ik voor de y.

Ik bekijk het resultaat in de browser.

De planeet verplaatst met een enkele klik vanaf zijn huidige positie.

Maar als ik dubbelklik wordt deze op zijn originele positie tijdens het laden in de browser opgehaald.

Dus ik keer terug naar Animate.

Ik wijzig opnieuw de positie van de planeet.

Bekijk het resultaat in de browser.

De verplaatsing functioneert. Dubbelklik en hij wordt op zijn originele positie teruggezet.

Dit is een veiligere manier werken, maar vereist wel meer kennis van het scripten.

Delen