Animation d'images Adobe Stock dans Animate
Parcourez les images vectorielles Adobe Stock directement dans Animate. Ajoutez du mouvement et exportez vos animations dans de multiples formats.
Publié le
Adobe Animate CC, anciennement Flash Professional, permet de parcourir et d'utiliser facilement sous licence des millions de photos, d'images et d'illustrations d'Adobe Stock pour réaliser des animations dans de multiples formats.
Créons un nouveau document HTML5 Canvas, puis ouvrons le panneau Bibliothèques CC pour accéder à Adobe Stock.
Recherchons dans Adobe Stock une ressource que nous pourrons ensuite animer.
Le panneau Bibliothèques CC permet d'effectuer cette recherche directement dans Animate CC, puis de télécharger la ressource dans la bibliothèque de mon choix.
Par exemple, si je tape « underwater ocean sea deep Arctic water », différentes images apparaissent, toutes marquées d'un filigrane.
Je possède déjà une licence pour la première image, ce qu'indique la coche ici.
Pour pouvoir utiliser une image sous licence, je peux télécharger son aperçu et l'insérer dans mon document puis, si elle me convient, acheter la licence directement via le panneau Bibliothèques CC, en cliquant sur cette icône.
Puisque j'ai déjà l'image qu'il me faut, j'efface les résultats de la recherche.
Effectuons un clic droit sur l'image et cliquons sur Use in document (Utiliser dans le document).
Voici mon image bitmap, qui est bien plus grande que ma scène.
Je vais donc la ramener aux dimensions de ma scène : 550 x 400.
Il me suffit de saisir les dimensions directement dans ces champs.
Je renomme ensuite ce calque « Ocean » et je le verrouille.
Maintenant, je vais créer un autre calque directement sur celui-ci.
Je retourne dans Adobe Stock pour faire une nouvelle recherche.
Par exemple, avec les mots-clés « dolphin porpoise blue cartoon ».
De nouvelles images apparaissent.
Ce sont, pour la plupart, des images vectorielles.
Ce format va me permettre de manipuler et d'animer facilement des parties distinctes de la ressource.
De plus, les images vectorielles sont redimensionnables à l'infini, sans aucune pixellisation.
Je peux à nouveau enregistrer un aperçu Bitmap ou acheter la licence de l'image directement depuis le panneau.
Puisque je possède déjà la licence qui figure ici, dans cette bibliothèque, je n'ai plus qu'à cliquer dessus avec le bouton droit et à choisir Use in document (Utiliser dans le document).
Comme il s'agit d'une image vectorielle, je dispose de quelques paramètres pour ajuster son comportement dans Animate CC.
J'indique que je souhaite conserver les chemins modifiables et je sélectionne l'option Un seul calque Animate.
Puis je clique sur OK.
Voici mon dauphin.
Notez qu'avant achat, les ressources vectorielles apparaissent sur fond blanc, et non sur fond transparent.
Une fois la licence achetée, vous obtenez une véritable image vectorielle sur fond transparent.
Renommons ce calque « Dolphin ».
Je vais à présent redimensionner l'image avec l'outil Transformation manuelle.
Je vais réduire sa taille à l'aide des petites poignées qui s'affichent ici.
Avec ce type d'image vectorielle, je vous recommande d'utiliser la touche Maj. afin de conserver les proportions du dauphin sans l'écraser ou l'étirer.
Réduisons-le encore un peu et cliquons à nouveau sur l'outil Sélection pour nous assurer qu'il est sélectionné.
On peut ensuite choisir Modifier et Convertir en symbole.
Créer un symbole de clip permet d'animer facilement des images vectorielles complexes comme celle-ci.
Je la nomme « Dolphin » et clique sur OK.
J'étends ensuite mes images jusqu'à l'image 80.
Pour cela, je clique et je fais glisser mon curseur sur les deux calques jusqu'à l'image souhaitée.
Je clique sur Insertion, Scénario et Image, ce qui étend ma plage d'images jusqu'à l'image 80.
Puisque je ne vais pas animer le calque Ocean, je peux le laisser verrouillé.
Par contre, je vais faire un clic droit sur le calque Dolphin et sélectionner Interpolation de mouvement.
Replaçons-nous sur la première image et décalons le dauphin sur le côté, comme ceci.
Puis, vers l'image 40, plaçons-le ici.
Un guide de mouvement apparaît.
Si je place mon curseur dessus, il se transforme en un curseur modificateur de forme.
Le curseur est assorti d'un petit arc.
Je peux donc cliquer et faire glisser le guide pour modifier la trajectoire de mouvement.
Je peux le faire sur ces côtés, autant de fois que je le souhaite.
Passons à l'image 80 et faisons glisser le dauphin à l'extérieur de l'écran.
Je peux là aussi faire glisser le guide pour ajuster la trajectoire du dauphin.
Vous pouvez ainsi réaliser tous les ajustements que vous souhaitez.
Lançons l'aperçu.
Le dauphin entre dans l'image et en ressort en décrivant une jolie boucle.
Apportons maintenant quelques améliorations en cochant l'option Orienter vers la trajectoire (l'option Interpolation de mouvement doit être sélectionnée).
Le dauphin fait désormais une jolie pirouette avant de sortir de l'écran.
Pour lancer l'aperçu, je clique sur la première image puis sur le bouton de lecture ici.
Pour publier l'animation pour Canvas, il me suffit de cliquer sur Contrôle et Tester.
Et voilà.
Toutes les tâches réalisées dans cette vidéo, dont l'intégration de ressources Adobe Stock, l'animation de ces ressources et l'exportation d'un document HTML5 Canvas fonctionnel, ont été exécutées sans quitter le logiciel Animate CC.
Contributeur
