Interactieve web animaties en infographics maken in Animate CC

Deze cursus biedt:

• 24-7 Toegang tot de online cursus Interactieve web animaties en infographics maken in Animate CC (32 video’s)
• Downloadbaar bronmateriaal bij video’s
• Nederlandstalig onderwijs
• Certificaat na afronding

Interactieve animaties met html5-canvas
In Adobe Animate CC 2017 kun je interactieve HTML5 publicaties (Interactieve web animaties en infographics) 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.

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.

Doel
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

Doelgroep
Zij die al kunnen animeren met Adobe Animate CC 2017 maar nog niet de interactieve functies van HTML5 canvas gebruiken en onder de knie hebben.

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.

Inhoudsoverzicht van instructievideo’s
32 video’s | Totale videoduur is 02:07:09
Docent: Belinda KampfIntroductie cursus

• Introductie JavaScript Basics Adobe Animate
• Algemene cursusinformatie

Opzetten HTML5 canvas productie

• HTML5 Canvas document opstarten en bewaren
• Illustratie voorbereiden voor import in Animate
• Illustratie importeren
• Eigenschappen van Symbolen en Instances (Properties)
• Actions laag aanmaken voor Scripting
• Illustratie omzetten naar MovieClip Symbol tijdens importeren
• Voorbereiding van het werkdocument

Code Snippets > Timeline Navigation

• Stop at this Frame
• Click to Go to Frame and Play
• Click to Go to Frame and Stop & Play
• Animeren met behulp van tijdlijn labels

Code Snippets > Actions

• Click to Go to Web Page
• Click to Show/Hide an Object
• Click to Position an Object
• Click to Display a Textfield
• Custom Mouse Cursor
• Stop & Play a Movie Clip

Code Snippets > Event Handlers

• Mouse Over Event
• Mouse Out Event
• Mouse Click Event
• Mouse Double Click Event

Code Snippets > Animation

• Move Horizontally / Vertically
• Animate Horizontally / Vertically
• Rotate Once / Continuously
• Fade In / Out a Movie Clip

Code Snippets > Load and unload

• Click to load Image from Library
• Add Instance from Library

Exporteren en Publiceren

• Afbeelding exporteren (poster-image)
• Publish Settings > Basic & Advanced
• Publish Settings > Spritesheet & Webfonts
• Publicatie gereed voor verspreiding