Mouse Double Click Event

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.