Click to Position an Object

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Click to Position an Object
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.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe jouw 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

 

 

Elk Movie Clip Symbool met een unieke instantienaam kun je positioneren.

En dus ook verplaatsen op de stage met een script.

Ik wil dat als ik op de linker steenformatie klik de planeet verplaats.

De linker steenformatie heeft als instantienaam ‘RockLeft’.

De planeet heeft als instantienaam ’planet’.

Met de linker steenformatie geselecteerd in de stage.

Dubbelklik ik op het codefragment ‘Click to Position an Object’.

Bekijk het script in het Actions-venster.

Op de tijdlijn staat een symbool met de instantienaam 'RockLeft'.

Dat is de linker steenformatie.

Met addEvenentListener wordt een gebruikersgebeurtenis opgestart.

En wel een klik-actie.

Dat staat als eerste aangegeven tussen haakjes met “click”.

Dan moet er een functie worden uitgevoerd.

Ik verander deze functienaam in bijvoorbeeld ‘MovePlanet’.

Dan wijzig ik de functienaam ook bij de eventListener die de functie oproept.

In de functie wordt de linker steenformatie, de ‘RockLeft’ geplaatst op x= en y=.

Die nieuwe positie verzint Animate voor je.

Om te zien wat deze horizontale en verticale positie inhoudt zet ik deze eerst allebei op .

En ik wil niet de linker steenformatie verplaatsen maar de planeet.

Dus vervang ik ‘RockLeft’ voor ‘planet’.

Zowel voor de x als voor de y.

Dan ga ik nu de productie testen in een browser.

Ik klik op de linker steenformatie.

En de planet verplaatst naar de linker bovenhoek van het document.

maar niet de linkerbovenhoek van de planeet wordt daar gepositioneerd. Maar het midden.

Het oriëntatiepunt van de planeet staat namelijk op het midden.

Die kun je ook herkennen aan de witte stip in het midden van de illustratie.

En het -punt van het document staat op de linkerbovenhoek.

Wat is dan de positie waarop de planeet op de stage staat in de illustratie?

ik kijk naar mijn Properties-venster.

De huidige positie voor de horizontale verplaatsing is pixels

En verticaal is dit pixels.

Maar dat is de positie van de linkerbovenhoek van de planeet.

En we zagen net dat door het positioneren via JavaScript .

Niet de linkerhoek van de illustratie op het -punt werd gezet maar het middelpunt.

Dat kan ik ook laten zien door nu bij de verplaatsing de waarden voor de x-as.

En voor de y-as.

Dat correspondeert met de huidige positie-weergave bij 'Position en Size' voor de x- en y-positie.

Als dit de juiste coördinaten zijn dan moet de planeet op dezelfde positie blijven staan.

Ik klik op de linker steenhoop.

En de planeet wordt verplaatst. Blijft niet op zijn originele positie staan.

Als je goed kijkt zie je dat in de positionering niet van het middelpunt van de planeet is uitgegaan.

Maar van de linker bovenhoek.

Dus om de positie van het middelpunt van de planeet uit te rekenen moeten we het volgende doen.

Ik keer weer terug naar Animate.

Ik selecteer de planeet op de stage.

De planeet is pixels breed

Het middelpunt daarvan staat dus op pixels.

Die tel je op bij de x-positie. Dat is dus + = pixels.

Dan is dat de x-positie.

Dan de y-positie.

Hierbij moet ik de helft van de hoogte erbij optellen.

Dus + , (de helft van de hoogte) = ,

Deze nieuwe coördinaten heb ik nu ingevoerd.

En ik ga het document testen in de browser.

Klik wederom op de linker steenhoop. En nu verplaatst de planeet niet.

Nu weet ik dus de echte originele positie en die onthoud ik.

Ik keer weer terug naar mijn doeldocument.

Ik wil met de linker steenformatie de planeet horizontaal op het midden van mijn illustratie plaatsen.

Mijn stage is pixels breed. Het midden is .

Dan voer ik bij de x-positie, pixels.

De y-positie staat al goed. Ik test de publicatie opnieuw in de browser.

klik op de linker steenhoop. En inderdaad...

De planeet wordt netjes horizontaal in het midden geplaatst.

Nu wil ik dat als ik op de planeet zelf klik.

Deze ook weer terug gezet wordt op zijn originele positie.

Die hebben we al eerder uitgerekend.

Ik kopieer deze code met Commando C en plak deze eronder.

Ik wijzig de instantienaam voor de klikactie in ‘planet’.

Als er op de planeet wordt gedrukt moet er het volgende gaan gebeuren.

De instantienaam 'MovePlanet', wijzig ik in 'PlanetMoveBack'.

Dezw naam voer ik ook in bij de addEventListener die de functie oproept.

De originele positie van de planeet is en de y-positie staat nog steeds goed.

Ik test opnieuw de publicatie in de browser.

Klik op de linker steenhoop om de planeet te verplaatsen.

Klik op de planeet om deze weer op zijn originele positie terug te zetten.

Experimenteer nu zelf met het herpositioneren van elementen op de stage.