Animeren met behulp van tijdlijn labels

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Animeren met behulp van tijdlijn labels
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.

HTML5 Canvas in Animate CC: JavaScript Basics

perm_identity Belinda | video_library 31 video's | query_builder 2:04:51

In Adobe Animate CC kun je interactieve HTML5 publicaties maken met behulp van het zogeheten Canvas-element. Animate CC 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 Adobe Animate 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

 

 

We hebben zojuist de animatie, van de groene knop, aangestuurd door naar een framenummer te verwijzen.

Hierdoor laten we de robot naar voren springen.

Zolang er geen nieuwe frames aan de productie worden toegevoegd, of weggehaald, is dit prima.

Maar het zal je vaak gebeuren dat je toch frames in de animatie gaat tussenvoegen.

Of overbodige frames gaat weghalen.

Dat verandert dan de hele timeline en de momenten waarop iets gebeurt.

Met als gevolg dat alle code fragmenten waarin je juist refereert naar een specifiek framenummer niet meer klopt.

Het is dan veiliger om met frame labels te gaan werken.

Zolang je het frame met de frame label maar niet verwijderd.

Voeg je nieuwe frames toe, dan schuift het frame met de framelabel gewoon op.

Ongeacht op welk framenummer deze dan terecht komt.

Ik laat zien hoe dit werkt.

ik heb het venster Actions geactiveerd.

De groene knop op de afstandsbediening heeft als instantie naam ‘RobotJump’.

We hebben hier een ‘gotoAndPlay’-actie aan verbonden.

Klik men op de groene knop dan springt de CTI naar frame en speelt de tijdlijn af.

Veiliger is het om dit frame te labelen.

En daarna zullen we dit script nog moeten aanpassen.

Activeer de timeline en zet de CTI op frame .

Vergroot eventueel met de schalingsschuif de timeline.

Zodat je beter zicht hebt op de aparte frames.

Selecteer van de Actions-laag frame .

Je kunt onderin de timeline controleren welk frame op dit moment actief is.

Maak een keyframe aan op deze actionslaag.

Klik met de rechtermuisknop ingedrukt op frame

En kies uit het contextuele menu voor ‘Insert keyframe’.

Met de keyframe geselecteerd kijk je naar het properties-venster.

Deze biedt nu de mogelijkheid om deze keyframe te voorzien van een Label naam.

Ik typ hier ‘PlayTimeline’. Enter om te bevestigen.

Onthoud deze naam en bedenk dat deze naam hoofd- en kleine letter gevoelig is.

In de actionslaag is de labelnaam terug te lezen op frame .

En een klein rood vlaggetje geeft aan dat dit frame gelabeld is.

Ik verklein de timeline.

Selecteer dan frame .

En dan maak ik hier nog een keyframe aan via Insert keyframe.

En deze noem ik 'NextTimeline'. Wederom Enter om te bevestigen.

Je kunt op een Timeline net zoveel labels aanmaken als jij dat wilt.

Ik keer terug naar mijn Actions-venster waar de groene knop nu nog naar een framenummer springt.

Ik verwijder het framenummer en typ dan tussen dubbele aanhalingstekens “PlayTimeline”.

Bekijk het resultaat in de browser.

Ik druk op de groene knop en de robot springt naar voren.

Er lijkt niets veranderd, maar dat is wel zo.

Ik keer terug naar Animate.

Want als ik nu de labelnaam in het script wijzig met “NextTimeline” en deze start dus pas halverwege.

Test ik opnieuw het resultaat in de browser.

Klik ik nu op de groene knop.

Dan start de animatie halverwege de sprong en niet netjes vanaf het begin.

Leer jezelf om zoveel mogelijk met frame-labels te werken in plaats van frame-nummers.

Dat voorkomt een hoop extra werk in de toekomst.