Fade In / Out a Movie Clip

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Fade In / Out a Movie Clip
5 (100%) 1 stem[men]

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 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 een Movie Clip-Symbol laten verdwijnen met ‘Fade Out a Movie Clip’.

De onderliggende laag wordt dan zichtbaar.

Activeer de timeline.

Helemaal onderin het lagen gedeelte staat de laag ‘Night’.

Verplaats deze boven de laag ‘Day’.

Zo nu is het nacht geworden in de illustratie.

Omdat deze laag de onderliggende laag bedekt.

We gebruiken hiervoor een tijdevent op de tijdlijn.

Zet de CTI op het eerste frame.

Zodra de animatie wordt afgespeeld in de browser wil ik dat dit tijdevent opgestart wordt.

Selecteer in het werkgebied de laag ‘Night’,

En activeer de Code Snippet ‘Fade Out a Movie Clip’.

We zullen nog de benodigde aanpassingen gaan maken in het script.

Maar nu moet je even goed opletten.

Dit script is complexer dan alle voorgaande scripts.

Want een variabele zijn we nog niet eerder tegengekomen.

Ook de naamgeving van de variabelen kun je zelf bepalen.

Dat maakt het script beter leesbaar.

Kijk goed naar de automatische naamgeving van deze variabele die Animate eraan gegeven heeft.

En controleer op welke plekken binnen het script deze variabele aangeroepen wordt.

Je herkent de automatische naamgeving van de variabele aan de laatste letters ‘Cbk’. Onthoud dat.

Dubbelklik op de naam van de variabele en ik hernoem deze naar ‘ChangeNight’.

Deze naamswijziging moet ik doorvoeren op alle plekken binnen het script waar de variabele opgeroepen wordt.

Dus dat is op deze plek binnen de eventListener, maar ook binnen de function.

Dan hebben we nog de naam van de function zelf.

Ook deze geef ik een herkenbare naam mee. Bijvoorbeeld ‘NightFade’.

Controleer dat je ook deze naamswijziging overal wijzigt waar dat nodig is.

Bekijk dan het eindresultaat in de browser.

Direct bij het opstarten van de animatie wordt het langzaam aan dag.

Het script werkt. Ik keer terug naar Animate.

Met Alpha wordt de zichtbaarheid van de laag bepaald.

staat gelijk aan % is dus volledig zichtbaar.

staat gelijk aan % en is volledig onzichtbaar.

Alles daar tussenin is een transparantie waarde.

Wat hier staat geschreven is het volgende.

Een variabele geef je aan met 'var'.

En deze is gekoppeld aan een identiteit of opdracht.

In dit geval aan de functie ‘Nightfade’.

Met .bind(this) zorg je ervoor dat de opdracht moet worden uitgevoerd op de instantie binnen de functie.

En dat is de instantie ‘Night’.

Dat is dus de zwarte afbeelding die boven de afbeelding van de dag ligt.

De gebeurtenis die opgestart wordt met this.addEventListener is een tijdsgebeurtenis.

Dat herken je aan 'tick'.

'this' slaat op de huidige tijdslijn.

Wij hebben de CTI op frame gezet en daar is dit script aan verbonden.

Dus zodra de CTI frame afspeelt wordt deze gebeurtenis opgestart.

Wat wordt er dan opgestart? Wel ‘ChangeNight’.

En wat is ‘ChangeNight’? Dat is een variabele gekoppeld aan de functie ‘Nightfade’.

De regel ’this.Night.Alpha = ’ bepaalt dat de zichtbaarheid van de laag ‘Night’ % is, ofwel .

Dan bekijken we de functie zelf.

In de eerste regel wordt de zichtbaarheid van de instantie ‘Night’ verlaagd met stappen van ,.

Omgerekend is dat %.

Omdat dit een tijds-event is dat zich afspeelt op de tijdlijn.

Wordt dus de zichtbaarheid van de laag met frames per seconde.

Nu met % per seconde transparant gemaakt.

Dat betekent dat de afbeelding in zo’n seconde geheel onzichtbaar is geworden.

De raket stijgt op frame op.

Dus iets daarna, op frame , moet het volledig dag zijn geworden.

De laatste twee regels zorgen ervoor dat zodra de MovieClip Symbol ‘Night’ volledig onzichtbaar is geworden.

Ofwel minder dan is.

Dat dan de variabele die de gebeurtenis aanstuurt wordt verwijderd met removeEventListener.

Immers de taak is volbracht.

Stel dat je vindt dat het te snel dag wordt

Dan kun je de snelheid van vervagen verminderen.

Door bijvoorbeeld , op , te kiezen of een andere waarde naar keuze.

Bekijk ik opnieuw het eindresultaat.

Ditmaal duurt het langer voordat het dag wordt.