Initiation – Animate

Définir les caractéristiques d'une animation HTML5

• Utiliser les modes ActionScript3 ou HTML5 et analyser les différences à la publication
• Découvrir la balise Canvas dans le HTML5 et le rôle des fichiers .fla, .js, html
• Créer un document Animate et tester une animation en mode AS3 ou HTML5
• Paramétrer le package de publication HTML5 : responsivité dans le navigateur, formats d'images (SVG, JPG, PNG), optimisation à la publication (utilisation des spritesheet), paramétrage du HTML et du JavaScript
• Quiz de compréhension

Appréhender l’interface

• Découvrir et agencer les panneaux
• Sauvegarder et restaurer l’espace de travail

Gérer le design dans un document Animate

• Différencier design bitmap et vectoriel
• Convertir les différents types de design
• Découvrir les outils dédiés aux formes vectorielles en mode trait ou remplissage
• Manipuler les vecteurs
• Comprendre les différents objets graphiques vectoriels
• Mettre à profit les outils de dessin
• Exercices : créer une illustration simple / Importer une illustration, la vectoriser et la préparer en vue d’une animation

Animer au sein de scénarios multiples

• Créer des symboles clips, graphique et boutons
• Comprendre l’importance des occurrences de symboles et le concept des scénarios imbriqués
• Découvrir et manipuler l’affichage du scénario
• Gérer les images clés sur le scénario
• Répartir des éléments sur des calques ou des images clés
• Choisir un mode d’animation : image par image, par interpolation de forme ou de symboles
• Animer sur des trajectoires
• Animer avec des masques
• Améliorer le dynamisme et la fluidité des animations avec des courbes d’accélération
• Ajouter des effets de couleur et des filtres
• Associer une police pour le Web (Typekit) aux animations
• Dynamiser une animation avec une caméra
• Aller plus loin avec les profondeurs et le parentage de calques
• Importer et utiliser du son
• Utiliser l’outil de synchronisation labiale
• Exercices : créer des animations pour maîtriser chaque fonctionnalité découverte

Développer une méthode de travail efficace

• Travailler sur la base de story-boards
• Préparer les médias en amont : formatage des fichiers Photoshop et Illustrator
• Travailler automatiquement une animation (calques, symboles) de la structure à l’importation
• Mettre à jour des éléments graphiques
• Utiliser un calque et un symbole modèle
• Intervertir des symboles
• Préparer un gabarit d’animation
• Exercice : créer une animation à partir d’un fichier Photoshop formaté / mettre à jour l’animation à partir de modifications effectuées dans Photoshop

Produire et publier des bannières publicitaires ou des animations interactives

• Évaluer les contraintes des régies : formats et poids des bannières
• Créer des boutons
• Contrôler une animation avec des actions de base en JavaScript
• Affecter un lien URL en JavaScript sur le scénario
• Ajouter une gestion clickTag, un contour à la bannière en CSS dans le code HTML
• Créer un nouveau modèle de publication HTML à partir du code modifié
• Gérer le nombre de boucles
• Rendre les mentions légales accessibles
• Préparer un GIF ou un JPG de backup
• Régler les paramètres de publication
• Publier l'animation
• Optimiser le poids du package HTML5 pour la livraison
• Exercice : réaliser et publier un master de bannière publicitaire à partir d’un story-board / Apprendre à décliner différents formats à partir d’une animation master

Profiter des formats de publication alternatifs

• Exporter au format vidéo avec la liaison à Adobe Media Encoder
• Exporter et optimiser un gif animé