Custom Mouse Cursor

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Custom Mouse Cursor
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: Stop & Play a Movie Clip

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

 

 

Je kunt de standaard curosr vervangen door een andere illustratie of animatie.

Maar hier kleeft wel een klein nadeel aan vast.

Dat komen we vanzelf wel tegen.

Allereerst plaats ik een nieuwe illustratie op de stage.

Ik ga naar File > Import > Import to Stage.

Kies uit de oefenmap voor cursor.ai en klik op Open.

Daarna op import.

Als we deze illustratie willen oproepen met JavaScript.

Zullen we hier een symbool van moeten maken en een instantienaam aan moeten verbinden.

Klik met de rechtermuisknop ingedrukt op de illustratie.

En kies uit het contextuele menu voor de optie ‘Convert to Symbol’.

Als naam voer ik ‘Star’ in.

Zorg dat je voor het type Movie Clip kiest. En klik op OK.

Daarna voer ik in het propertiesvenster een instantienaam in.

En deze noem ik ‘StarMouse’.

Met de illustratie geselecteerd in de stage.

Dubbelklik ik in het Code Snippets venster op ‘ Custom Mouse Cursor’.

Bekijk het script in het Actions-venster.

De gewone cursor wordt verborgen met de eerste regel

‘stage.canvas.style.cursor =“none”. Verwijder “none”.

En bekijk dan het resultaat in de browser.

Je ziet nu niet alleen nog de normale cursor.

Want daarvan hebben we zojuist "none" weggehaald, waardoor deze alsnog zichtbaar is.

Maar ook de illustrtaie.

Die nu eigenlijk in plaats van de muis getoond had moeten worden.

En dan valt je meteen iets vreemds op.

Zodra je met de muis naar de linker bovenhoek loopt.

Dan staat de illustratie precies boven de positie van de cursor.

Maar zodra ik met de muis hiervan weg beweeg.

Dan verplaatst de illustratie zich keer sneller dan mijn cursor.

Dat is vreemd want de illustratie behoort de positie van de cursor te vervangen.

Wat is hier aan de hand.

Het is een vreemd fenomeen.

Maar als je nu met de rechtermuisknop ingedrukt klikt op de html-pagina.

Kun je uit het contextuele menu kiezen voor ‘Inspecteren’.

klik dan bovenin het inspect-menu op ‘Elements.

Zorg dat je naar de code van de html-pagina kijkt.

De browser staat nu bij mij op een weergave van standaard %.

Als ik kijk naar de omsluitende div waarin mijn canvas-illustratie vanuit Adobe Animate is geëxporteerd.

Dan zie ik dat het canvasformaat van mijn document pixels breed en pixels hoog is.

En dat terwijl mijn documentformaat de helft kleiner is.

Namelijk pixels breed en pixels hoog.

Ik weet niet waarom Adobe Animate alle producties standaard x groter wegschrijft.

Misschien om rekening te houden met Retina beeldschermen.

Maar dit is de reden waarom mijn muis wegloopt van de cursor.

Ik keer terug naar Adobe Animate.

Ik kan dit probleem oplossen door de x-positie en de y-positie van de cursor.

Op de stage te gaan halveren.

Dan typ ik achter ‘stage.mouseX /.

Gedeeld door , zowel bij de x als bij de y.

Dan bekijk ik opnieuw het resultaat in de browser.

En nu loopt de illustratie perfect op dezelfde positie als mijn cursor.

Maar wat gebeurt er als de bezoeker de weergave van de browser gaat vergroten.

Ik gebruik de sneltoets Commando +.

Om de weergave in de browser groter te maken. En je ziet het al wel.

De illustratie loopt weer weg bij de cursor.

Klik opnieuw met de rechtermuisknop ingedrukt op de html pagina en kies voor Inspecteren.

Door de weergave te vergroten is het canvas ook weer groter geworden.

Wellicht heeft dit te maken met het feit dat we in Animate superstrakke vector tekeningen maken.

Terwijl het canvas-element hiervan weer bitmaps maakt.

En door het canvas te vergroten.

Lijkt de illustratie nog steeds uit vectoren te bestaan.

Best slim maar voor onze cursorwisseling erg onhandig.

Wat je eigenlijk moet doen is ervoor zorgen dat de cursor telkens herberekend wordt.

En daarvoor heb je een script nodig dat Animate niet levert.

Ik heb de code in een textbestand gezet.

Ik ga terug naar Adobe Animate.

Open een tekstprogramma als bijvoorbeeld Texteditor.

In de oefenmap staat een tekstbestand en deze heet 'ChangeMouse.txt'. Open deze.

Selecteer de code die hierin staat.

En kopieer deze met Commando C.

Vervang het codefragment wat we via Adobe Animate hebben geplaatst.

Met Commando V.

De instantienaam van de illustratie van de sterren is StarMouse.

Dus die zullen we weer op de juiste plek moeten zetten.

Vervang de namen 'instance_name_here' voor 'StarMouse'.

Doe dat op alle plekken waar het nodig is, dus ook hier in de uitvoering van de function.

Dit script zorgt ervoor dat de positie van de cursor op de Stage continu opnieuw berekend wordt.

Dankzij de variabele p.

Die de positie van mouseX en mouseY telkens afleest van de stage.

En als basispositie teruggeeft aan de illustratie die de cursor moet vervangen.

Bekijk het resultaat in de browser.

Als het goed is vervangt de illustratie nu weer perfect de positie van de cursor.

Ook als ik de afbeelding verklein in de browser.

Blijft de illustratie op de positie van de cursor staan.

Controleer dan dat alle klik-acties nog werken.

Als je van de illustratie van de sterren een geneste animatie maakt.

Dan kun je de cursor zelfs met een animatie laten vervangen.

Misschien een leuk idee om dat nu uit te proberen.