Click to Show/Hide an Object

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Click to Show/Hide 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
Volgende video: Click to Position an Object

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 elementen op de stage doen verdwijnen en weer laten verschijnen.

Hiervoor gebruiken we de codefragmenten ‘Click to hide An Object’ en ‘Show an Object’.

Ik wil dat de steenhoop in het midden zichzelf verbergt zodra je erop klikt.

Klik je dan op stenen rechts onderaan dan moet deze weer tevoorschijn komen.

De instantienaam van de steenhoop in het midden is ‘RockMiddle’.

Zorg dat de CTI weer aan het begin van de tijdlijn staat.

Met de middelste steenhoop geselecteerd dubbelklik ik op het codefragment ‘Click to Hide An Object’.

we gaan de code lezen en eventueel aanpassen.

'this' slaat op de tijdlijn.

RockMiddle is de instantienaam van de middelste steenhoop.

Dus hier staat. Op deze tijdlijn staat een symbool met de instantienaam ‘RockMiddle’. En dat klopt.

Voor dit element moet een gebeurtenis gaan gelden.

Dat wordt aangegeven met addEventListener.

De gebeurtenis refereert naar een gebruikersgebeurtenis, namelijk een klikactie.

Dus als iemand op de middelste steenhoop klikt dan moet het volgende gebeuren.

En daarvoor wordt een functie opgeroepen.

De functie krijgt van Adobe Animate automatisch een naam mee.

Maar handiger is het om deze een herkenbare naam te geven voor jouw productie .

Wijzig dan ook de naam bij de EventListener. Dus ik kopieer deze nieuwe naam.

En deze plak ik ook in de eventListener.

Dan bekijken we nog even de functie zelf.

this.RockMiddle.visible = false

Betekent dat de zichtbaarheid van de middelste steenhoop er niet meer mag zijn.

Dus wordt deze onzichtbaar gemaakt.

Ik test het resultaat in de browser.

Klik op de middelste steenhoop. Als het goed is moet deze verdwijnen.

Dan kan ik een ander element uitkiezen om de steenhoop weer tevoorschijn te halen.

Ik keer terug naar mijn doeldocument.

Ik activeer het Actions-venster en bekijk de actions van frame .

Ik selecteer het huidige script en kopieer deze met command C.

Daarna plak ik deze eronder met Commando V.

Ik wil dat de steenhoop rechts vooraan de middelste steenhoop weer zichtbaar kan maken.

Dan moet ik de instantienaam van deze steenhoop weten. En dat is ‘RockRight’.

Ik wijzig dan het element waarop de gebeurtenis moet plaatsvinden.

Dus 'RockMiddle' wordt dan 'RockRight'.

Als men daarop klikt dan wil dat de middelste stenen weer tevoorschijn komt.

In plaats van de function 'HideRockMiddle' te noemen, noem ik deze 'ShowRockMiddle'.

En deze naam moet ik dan ook weer bij de eventListener laten oproepen.

De functie zelf moet de middelste steenhoop niet verbergen met ‘false’.

Maar juist weer tevoorschijn halen met ‘true’.

Zo, dit zou moeten werken. En ik test het eindresultaat weer in de browser.

Klik op de middelste steenhoop en deze verdwijnt uit beeld.

Klik nu op de voorste steenhoop en de stenen in het midden verschijnen weer.

Je kunt nu gaan variëren met deze codefragmenten.

En bedenk dan zelf ook leuke toepassingen hiervan.