HTML5 Canvas in Animate CC: JavaScript Basics

Interactieve animaties met html5-canvas

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.

Doel van de cursus

In deze cursus leer je met duidelijke instructievideo’s hoe je de standaard codefragmenten (Code Snippets) van Animate CC kunt toepassen in jouw publicatie. Je leert hoe je met de codefragmenten van het programma zowel gebruikers- als tijdsgebeurtenissen activeert. Uiteindelijk ben je in staat om interactieve html-producties te maken voor online publicaties.

Wat ga je leren

• Het opzetten van een html5 canvas productie
• Illustraties voorbereiden en importeren
• Werken met eigenschappen van symbolen en instanties
• Werken met actions en crippting

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 tonen, verbergen, opstarten en stoppen
• Werken met tijdlijnlabels
• Interactiviteit met mouse over, -out en (double)click
• Animeren met verplaatsen, roteren en positioneren
• Animeren in- en uitfaden
• Vormgeven en animeren van teksten
• De cursor van uiterlijk doen veranderen
• Publiceren met Publish Settings

Duur en studiebelasting

De duur van deze videocursus is 2 uur en 04 minuten met een studiebelasting van ca. 8 tot 10 uur. Onze video’s zijn met zorg gemonteerd. Hierin leggen we in een zo kort mogelijke tijd exact uit wat je moet weten. Echter om je deze technieken volledig eigen te maken zul je met al het geleerde moeten experimenteren en oefenen. Hiervoor kun je ofwel ons downloadbaar materiaal of eigen materiaal gebruiken. Houd rekening met een minimale studiebelasting van drie keer de videoduur.

Doelgroep van deze cursus

De cursus is speciaal ontwikkeld voor mensen die geen kennis van JavaScript of andere codetalen hebben maar wel graag willen leren hoe je interactieve html5-webpublicaties kunt maken met het WYSIWYG programma Adobe Animate CC.

Lesmaterialen

De cursus bestaat uit video’s met downloadbaar oefenmateriaal. Al onze video’s zijn Nederlands gesproken en ondertiteld. Wij maken zoveel mogelijk gebruik van de Engelse Interface van de software maar we benoemen in onze uitleg ook de Nederlandse (vak)termen. Je dient zelf zorg te dragen voor de installatie van de benodigde software op je computer.

Opbouw van de cursus

Deze cursus is opgebouwd uit instructievideo’s verdeeld over hoofdstukken. Wij adviseren om de volgorde van de hoofdstukken en de video’s aan te houden aangezien latere video’s vaak teruggrijpen op geleerde kennis in eerder video’s.

Vereiste voorkennis en vaardigheden

Aan het creëren van de animaties zelf wordt geen aandacht besteed, dus enige kennis van de applicatie Adobe Animate CC is wel een pré. In deze cursus werk je met voorbereidde bestanden. Al kun je natuurlijk de kennis ook direct gaan toepassen in een eigen productie.

Toetsing

Deze cursus bevat geen (eind)toets. Je ontvangt bij afronding een certificaat als bewijs van deelname.

Certificaat / afronding

Na het succesvol volgen van deze cursus ontvang je een bewijs van afronding van House-of-Training. Bewaar dit deelnamebewijs bij je (LinkedIn) profiel, portfolio of online CV. Zo toon je aan iedereen jouw kennis, ambitie en talent.