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.
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.
Wat ga je leren
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. 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
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 vereiste. In deze cursus werk je met voorbereidde bestanden. Al kun je natuurlijk de kennis ook direct gaan toepassen in een eigen productie.
Ga naar HTML5 Canvas in Animate CC: JavaScript Basics
In de cursus worden de volgende onderdelen behandeld:
Has Sub:
- 1 HTML5 Canvas document opstarten en bewaren
- 2 Illustratie voorbereiden voor import in Animate
- 3 Illustratie importeren
- 4 Eigenschappen van Symbolen en Instances (Properties)
- 5 Actions laag aanmaken voor Scripting
- 6 Illustratie omzetten naar MovieClip Symbol tijdens importeren
- 7 Voorbereiding van het werkdocument
- 8 Stop at this Frame
- 9 Click to Go to Frame and Play
- 10 Click to Go to Frame and Stop & Play
- 11 Click to Go to Web Page
- 12 Click to Show/Hide an Object
- 13 Click to Position an Object
- 14 Click to Display a Textfield
- 15 Custom Mouse Cursor
- 16 Stop & Play a Movie Clip
- 17 Mouse Over Event
- 18 Mouse Out Event
- 19 Mouse Click Event
- 20 Mouse Double Click Event
- 21 Move Horizontally / Vertically
- 22 Animate Horizontally / Vertically
- 23 Rotate Once / Continuously
- 24 Fade In / Out a Movie Clip
- 25 Click to load Image from Library
- 26 Add Instance from Library
- 27 Animeren met behulp van tijdlijn labels
- 28 Afbeelding exporteren (poster-image)
- 29 Publish Settings > Basic & Advanced
- 30 Publish Settings > Spritesheet & Webfonts
- 31 Publicatie gereed voor verspreiding
- 32 Introductie JavaScript Basics Adobe Animate