Animate CC (anciennement Flash Professional) est un logiciel de création multimédia et d’animation développé par Adobe Systems. Il permet, entre autres, de concevoir des graphiques vectoriels et des animations HTML interactives pour le web.
L’espace de travail
Dans l’espace de travail, il y a plusieurs « blocs fonctionnalités » :
- pour réaliser une action, il faut des « outils » (plume, crayon, pinceau, etc.)
- pour mettre en forme ensuite avec les « propriétés » (position, taille, effet de couleur, etc.)
- et peaufiner en utilisant le bloc « transformations » (faire des alignements, des rotations, etc.)
- Le bloc « scénario » est, comme son nom l’indique, la ligne de temps de l’animation
- Enfin, le bloc « bibliothèque » comporte tous les objets (images et clips) mis à disposition et modifiables par la suite.
Manipulations de base : dessins
Dessiner en mode objet
Pour réaliser un dessin sur Animate CC, il faut passer en « mode de dessin d’objet » pour pouvoir avoir un seul bloc de dessin. Ainsi les formes en
intersection ne seront pas fusionnées.
Pour dessiner en mode objet : une fois l’outil sélectionné (crayon, pinceau, etc.), cliquer sur « mode de dessin d’objet ».
Mettre un objet en bibliothèque
Pour mettre un objet en bibliothèque afin de pouvoir l’utiliser dans une ou plusieurs scènes, il suffit de :
- sélectionner l’objet en entier
- puis, clic-droit et choisir « convertir en symbole »
L’objet est maintenant dans la bibliothèque.
Importer des dessins (objet)
Dans Animate CC, il est possible d’importer du SVG. La procédure est simple. Cliquer sur fichier puis importer, soit importer dans la scène, soit importer dans la bibliothèque.
Transformer les objets
Pour transformer un objet, sélectionner l’outil « Outil transformation libre ».
Utiliser des calques
Lorsque l’on prévoit d’utiliser plusieurs éléments dans une scène, il faut utiliser des « calques ». Pour ajouter un calque, il faut se rendre au niveau du scénario, faire un clic-droit sur le calque déjà présent (par défaut « calque_1 ») et choisir « insérer un calque ».
Utiliser un calque est une bonne pratique :
- cela permet de se concentrer sur un seul élément à la fois
- cela évite de devoir « changer » toute une scène.
Manipulations de base : animations
Pour réaliser des animations, il y a 3 méthodes possibles :
L’animation par interpolation classique
L’animation par interpolation classique permet de définir une image-clé au départ puis à l’arrivée, Animate se charge du calcul de la transformation (exemple : un petit rond se transforme en grand rondAnimate crée automatiquement une trajectoire qui anime les images entre la première image et l’image-clé suivante.
L’animation par interpolation de mouvement
L’animation par interpolation de mouvement permet de définir un chemin en indiquant des bornes, ainsi le logiciel se charge du calcul des positions intermédiaires. Pour animer un objet en bibliothèque, il faut le glisser dans la scène puis faire clic-droit > créer une interpolation de mouvement. Cet outil est très pratique car il permet d’animer un objet :
- par la position (d’un endroit à un endroit)
- par la taille (devenir plus ou moins grand)
L’animation de forme
L’animation de forme permet de transformer un objet en un autre (exemple : transformer une boule en carré). Pour réaliser une animation de forme, prendre un dessin simple (cela est plus facile de transformer une pomme en poire qu’une citrouille en girafe). Le prérequis pour réaliser une animation de forme est donc de choisir un dessin simple.
La première chose à faire est de « séparer » le dessin, c’est-à-dire ne plus l’avoir en un seul bloc, ce qui permettra de travailler dessus. Pour cela, sélectionner le dessin > clic-droit > Séparer > créer une interpolation de forme.
Le but est de réaliser l’animation de départ et l’animation d’arrivée, le logiciel se chargera de calculer le chemin pour réaliser l’animation de forme :
- Créer le dessin de départ
- Copier-coller ce dessin plus loin dans le scénario et réaliser le dessin d’arrivée.
Raccourcis clavier :
- F5 : insérer une nouvelle image (ou Insertion > Scénario > Image)
- F6 : créer une image-clé (ou Insertion > Scénario > Image-clé)
- F9 : ouvrir une fenêtre pour écrire le code javascript (exemple this.stop(); pour stopper l’animation)
Publication d’animations au format HTML5
Pour publier du contenu sur scène vers HTML5, procéder comme suit :
- Sélectionner Fichier > Paramètres de publication.
- Dans la boîte de dialogue Paramètres de publication > Paramètres simples, spécifier les paramètres suivants :
- Sortie. Répertoire de publication du fichier FLA. Il s’agit, par défaut, du même répertoire que celui du fichier FLA, mais il est conseillé de le changer en sélectionnant une nouvelle destination de publication (appelée exportation), qui regroupera ainsi les fichiers HTML5 et JavaScript de l’animation.
- Dans les paramètres avancées :
- Remplacer le fichier HTML à la publication : cocher la case Remplacer le fichier HTML à la publication pour l’activer, avec l’option Inclure le code JavaScript dans le fichier HTML.