Voorbereiding van het werkdocument

uit de cursus HTML5 Canvas in Animate CC: JavaScript Basics

Voorbereiding van het werkdocument
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
Volgende video: Stop at this Frame

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 jouw 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

 

 

We gaan het scripten leren met een voorbereid oefenbestand.

ik laat zien welke handelingen ik nog verricht heb om dit document voor te bereiden.

Er is al een nieuwe bovenste laag aangemaakt.

En deze heb heeft de naam ‘actions’ gekregen.

Hierin zal Animate de scripts gaan wegschrijven.

Er moet een dansende robot komen.

Open het bestand ‘robot-animatie.fla’ uit de oefenmap.

Speel de animatie af in de Timeline.

De robot springt naar voren.

Speel dan de animatie af in een browser.

Ga naar Control > Test Movie > Browser.

Hier zie je dat de robot niet enkel naar voren springt maar ook nog eens aan het dansen is.

Deze animatie is gemaakt met de Bones-techniek.

Een super makkelijke manier om snel natuurlijke, dynamische bewegingen te creëren.

Dubbelklik op de robot in het werkgebied en je komt op de timeline van de robot terecht.

Hier kijk je naar de animatie die is gemaakt met een zogeheten Pose-laag.

Elk onderdeel van de robot. De onderarm, bovenarm, hand etcetra is omgezet in een Movie Clip.

Je koppelt dan de Movie Clips als een keten aan elkaar vast.

Dus de hand zit vast aan de onderarm vast. De onderarm aan de bovenarm. En de bovenarm aan de torso.

Als je nu een bone-punt oppakt en verplaatst.

Worden alle aaneengeschakelde bone-connecties op redelijk realistische wijze met elkaar mee verplaatst.

Zo is deze dansende robot gemaakt.

Keer terug naar de Scene. Selecteer de laag ‘robot’.

Klik met de rechtermuisknop ingedrukt op de laag en kies uit het contextuele menu voor ‘Copy Layers’.

Activeer dan weer ons doeldocument.

Klik met de rechtermuisknop ingedrukt in het lagen gedeelte van de timeline.

En kies uit het contextuele menu voor ‘Paste Layers’.

De robotlaag staat nu tussen de lagen.

Eventueel kun je deze nog verslepen naar de gewenste positie.

ik kan het eindpunt van het bewegingspad nog oppakken en verplaatsen.

Zodat de sprong beter past in dit document.

De animatie van de robot duurt frames.

Klik met de rechtermuisknop ingedrukt op dat frame voor een andere laag.

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

Doe dit ook voor alle overige aanwezige lagen.

Nu zijn alle objecten zichtbaar gedurende de frames.

Speel de animatie nogmaals af in een browser.

En met dit document starten we in het nieuwe hoofdstuk met het scripten met JavaScript.