Objectifs

Vous souhaitez aller plus loin dans vos créations d’animation Canvas HTML et dépasser le simple cadre des objets et des images clés du scénario principal afin d’automatiser certains effets et ajouter de l’interactivité et de l’intelligence à vos scénario. L’intégration du langage JavaScript via des exemples concrets en intégrant la logique spécifique à Animate est donc un impératif pour vous. Le code JS apparaitra au novice sous un nouveau jour où l’imbrication de l’efficacité avec la créativité deviendra une évidence.
De plus, l’importance de la propreté des animations est aussi une de vos priorités. La scénarisation, le timing, le choix des interpolations de mouvement et le lissage des vitesses sont autant de points incontournables.
Pré-Requis
Maîtrise des fonctions de base d’Animate telles que la création de symboles et la gestion des images clés et des interpolations de mouvement classiques. Des connaissances sur Photoshop et/ou Illustrator sont fortement conseillées.

Contenu de formation

Rappel des bases

• Logique d’une animation Canvas HTML
• Principe des symboles et gestion du scénario

Lister les fonctions avancées en amont

• L’inclusion de symboles
• Animation de propriétés via JS
• Duplication de symbole par JS
• Création d’un symbole et ajout de texte/de dessins en JS
• Ajout de déclencheur lié à la timeline
• Ajout de déclencheur lié à une interaction utilisateur
• Ajout de déclencheur lié à une propriété
• Ajout d’un écouteur

Scénariser avant d’agir

• Définition du scénario principal
• Animation de chaque élément (story-board du Motion Design)
• Compréhension des lissages de vitesse
• Repérer les animations complexes
• Mise en corrélation animation / fonctions avancées Animate

Préparer son contenu

• Insertion d’image optimisée
• Insertion d’Illustration Illustrator

• Découpage en symboles / calques et inclusion
• Utilisation optimisée des fonctions graphiques d’Animate (transparence, masque, chemin…)
• Incompatibilité Animate/HTML

Fonctions JS ciblées

• Respect de la syntaxe – Repères
• Gestion des chemins et des noms d’occurence
• Gestions optimisées des symboles et de leur typologie
• Modifier les propriétés d’un symbole
• Animer les propriétés d’un symbole
• Préparer une fonction réutilisable
• Utilisation d’un écouteur d’événement et déclenchement d’une fonction
• Stockage d’une information « variable »
• Création d’une condition déclenchant une animation
• Utilisation d’une boucle pour répéter une action

Mise en pratique

• Animation d’un menu « intro + survol »
• Création d’un QCM avec score et animation type Motion Design
• Création d’une illustration interactive