Actions laag aanmaken voor Scripting

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Actions laag aanmaken voor Scripting
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

 

 

Zodra je een action verbindt aan een object.

Dan zal Animate automatisch een actions-laag aanmaken in de timeline.

Deze laag wordt standaard als bovenste laag geplaatst en heet altijd ‘actions'.

Met Commando Z keer ik terug naar de vorige situatie.

Zorg dat de bovenste laag in de timeline geselecteerd is.

Klik onderin het venster op het icoon ‘New Layer’.

Een nieuwe laag verschijnt.

Deze heet nu ‘Layer ’.

Dubbelklik op de naam en je kunt de naam nu wijzigen in ‘Actions’.

Druk op Enter om de naam te bevestigen.

Zodra ik nu een object selecteer in het werkgebied.

En ik verbind hieraan een codefragment.

Dan heeft Animate nu op de tijdlijn van de laag ‘actions’ een keyframe aangemaakt.

Op deze keyframe staat een action beschreven.

Welke code dat is kun je aflezen in het venster ‘Actions’ dat nu automatisch geactiveerd werd.

Kijk maar hier staat in de linkerkolom beschreven dat er in ‘Scene ’ ‘actions’ zijn geschreven op ‘Frame ’.

Inhoudelijk ga ik in het volgende hoofdstuk deze codefragmenten uitleggen.

Dus daar hoef je nu even niet naar te kijken.

Ik wil wel dat je ziet dat in de timeline op frame van de laag ‘actions’ een keyframe is verschenen

Dat met een klein lettertje ‘a’ aangeeft dat op dit frame een ‘action’ staat beschreven.

Zo herken je binnen een project op welke momenten in de tijd bepaalde acties beschreven staan.

Verder geeft het venster ‘Actions’ een goed en duidelijk overzicht van alle acties in de publicatie.