A l'issue de cette formation, vous serez capable de :

• Concevoir et réaliser des animations au format HTML 5, au format GIF animé ou au format vidéo H.264
• Utiliser des fichiers Photoshop et Illustrator pour améliorer le workflow
• Animer des textes, images bitmaps et vectorielles
• Intégrer des médias riches
• Publier les animations en HTML 5 ou GIF animé dans des pages Web.

Jour 1

Présentation d'Animate CC

• Création d'un document HTML5 Canvas ou ActionScript 3.0
• Les différences entre un document ActionScript 3.0 et le HTML5 Canvas
• Les cadences
• Rappel des formats des standards vidéos et bannières publicitaires
• Vocabulaire
• Les nouveautés

Présentation de l'interface et des outils

• Préférences du logiciel
• Panneau Scénario, Scène, Propriétés...
• Organisation et gestion des calques
• Les outils du scénario
• Configuration d'un espace de travail personnalisé
• Création de raccourcis clavier personnalisé

Introduction à l'animation 2D et aux différents types d'interpolations

• Interpolation classique, de mouvement, de forme et animation image par image (frame by frame)
• Utilisation de raccourcis clavier pour créer et insérer les différentes images clés

Exemples de travaux pratiques (à titre indicatif)

• Faire déplacer un carré de coin en coin puis un deuxième carré suivant le premier
• Animation avec des formes : "le chat et la souris"
• Faire rebondir une balle sur des blocs
• Animation du jeu "Pong" et ajout de fichiers audio
• Simple morphing
• Animation de couleurs ou de dégradés

Les bases de l'animation

• Comprendre les principes de base de l'animation
• Les propriétés de transformation :
• Position
• Rotation
• Echelle
• Opacité
• Point d'ancrage

Dessiner avec des formes vectorielles

• Les outils de formes
• Panneau Nuancier
• Création et application d'une couleur
• Modification, transformation et combinaison des objets
• Outil Transformation libre
• Modification des trajectoires (interpolation de mouvement)

Exemples de travaux pratiques (à titre indicatif)

• Création et animation d'une balance avec des formes vectorielles

Jour 2

Présentation des 12 principes d'animation

• Création et animation d'un masque
• Animation de plusieurs masques en utilisant un symbole graphique
• Enregistrer une animation dans un symbole
• Enregistrer l'animation d'un symbole dans le panneau Actifs, en vue de le réutiliser dans un autre document
• Import d'images : jpeg, png
• Accélération / décélération
• L'effet Ken Burn
• Gestion et animation du texte

Exemples de travaux pratiques (à titre indicatif)

• Principe de la compression et de l'étirement (squash and stretch) : une balle qui rebondit
• Diaporama avec des transitions en utilisant les masques

Travail avec Illustrator

• Optimisation d'un fichier Photoshop
• Import d'un fichier .ai
• Réglage des paramètres d'importation dans Animate

Exemple de travaux pratiques (à titre indicatif)

• Animation d'une illustration

Travail avec Photoshop

• Détourage et optimisation d'un fichier Photoshop
• Import d'un fichier .psd
• Réglage des paramètres d'importation dans Animate
• Panneau de Présélections de mouvement
• Application de mouvements enregistrés
• Hiérarchie parent / enfant
• Symbole Clip pour jouer une animation en boucle
• Outil Déformation d'élément (segment flexible)
• Copier, effacer, dupliquer et déplacer des images clés

Exemples de travaux pratiques (à titre indicatif)

• Animation : création d'un effet parallax
• Animation d'un photomontage avec plusieurs calques

Exportation

• Exporter une vidéo pour le Web au format H.264 avec Media Encoder
• Exporter en gif animé

Jour 3

Animation libre

Exemple de travaux pratiques (à titre indicatif)

• Animation d'un logo ou d'un picto avec un fichier illustrator

Présentation des différents symboles

• Graphique, clip, bouton
• Création de symboles et d'occurrences
• Propriétés et permutation des occurrences
• Changement du type d'une occurrence

Animation image par image (frame by frame)

• Dessiner un guide de trajectoire sur un calque
• Les outils Pinceaux et leurs propriétés
• "Pelure d'oignon"

Exemple de travaux pratiques (à titre indicatif)

• Animation d'un visage ou d'une boule qui se déplace

Création d'une bannière publicitaire HTML5

• Document HTML5
• Libellé de calque
• Import fichier .psd ou .ai
• Réglage des paramètres d'importation dans Animate
• Interpolation classique
• Utilisation des fragments de code HTML5 Canvas
• Création d'un ClickTag avec le symbole Bouton (site Web, Google Ads...)
• Réglage du paramètre de publication
• Editer le fichier HTML5 et ajout de lignes de code pour valider le ClickTag
• Exportation de la bannière en HTML5
• Optimisation du poids du fichier
• Vérification du fichier sur Google Creative Studio