Pour créer un effet de carte qui se retourne dans Adobe Animate, utilisez une interpolation de mouvement et animez séparément le recto et le verso de la carte. Le recto et le verso doivent être placés sur des calques distincts, superposés avec précision et associés à des symboles ou à des occurrences pouvant être interpolés.
Le principe consiste à réduire progressivement la largeur apparente d’une face jusqu’à obtenir une tranche très fine, puis à faire apparaître l’autre face en l’étirant depuis cette position. Dans Animate, cet effet peut être réalisé avec une interpolation de mouvement, des images-clés de propriété et une transformation d’échelle horizontale.
Préparer le recto et le verso de la carte
Pour faire cette animation vous allez avoir besoin a minima de deux éléments graphiques : un pour le recto et l’autre pour le verso. Cela peut être des fichiers images (ex : des fichiers jpeg ou png) ou encore des formes réalisées avec PowerPoint (rectangle, cercle, carré …)
Superposer vos images recto et verso. Elles doivent être de mêmes dimensions et superposées exactement l’une sur l’autre pour que l’animation rende bien.
Chaque face doit être placée sur un calque distinct afin de pouvoir l’animer indépendamment. Pour créer une animation comprenant un mouvement interpolé de plusieurs symboles ou champs de texte en même temps, chaque objet doit être placé sur un calque distinct.
Vous pouvez utiliser un calque sous forme de calque d’arrière-plan renfermant un contenu statique, et utiliser d’autres calques contenant un objet animé distinct.
Pour pouvoir gérer facilement le timing de l’animation, nous vous conseillons de nommer chacun de vos visuels.
Organiser les éléments dans le scénario
Lorsqu’un document comporte plusieurs calques, il peut être difficile d’assurer son suivi et de modifier les objets sur un ou plusieurs de ces calques. Cette tâche est plus facile si vous travaillez avec le contenu d’un seul calque à la fois.
Pour masquer ou verrouiller les calques sur lesquels vous ne travaillez pas actuellement, cliquez sur l’icône d’affichage ou de verrou accolée au nom du calque dans le scénario. Les dossiers de calques vous aident à organiser les calques dans des groupes gérables.
Animate déplace automatiquement tout objet vers son propre calque d’interpolation lorsque vous lui appliquez une interpolation de mouvement. Toutefois, vous pouvez également distribuer vous-même les objets à leurs propres calques distincts.
Lorsque vous utilisez la commande Répartir dans les calques (Modifier > Scénario > Répartir dans les calques), Animate distribue chaque objet sélectionné dans un nouveau calque distinct.
Vous pouvez appliquer la commande Répartir dans les calques à tout élément de la scène, tel que les objets graphiques, les occurrences, les bitmaps, les clips vidéo et les blocs de texte séparés.
Créer une interpolation de mouvement
Comme la plupart des éléments dans Animate (précédemment Flash Professional CC), les animations n’impliquent pas l’utilisation du langage ActionScript. Vous pouvez néanmoins créer des animations avec le langage ActionScript si tel est votre choix.
Dans Animate, il existe plusieurs moyens de créer une animation et des effets spéciaux. Chaque méthode offre différentes possibilités pour créer du contenu animé attractif.
Animate prend en charge les types d’animation suivants :
- Interpolations de mouvement
- Interpolations classiques
- Interpolations de forme
- Animation image par image
Utilisez des interpolations de mouvement pour définir les propriétés d’un objet, telles que la position et la transparence alpha d’une image, et ainsi de suite pour chaque image. Animate interpole alors les valeurs des propriétés des images intermédiaires.
Ces interpolations se révèlent très utiles dans le cas d’animations composées de mouvement ou d’une transformation d’objet. Les interpolations de mouvement apparaissent dans le scénario sous forme de plage contiguë d’images, qui peuvent être sélectionnées en tant qu’objet unique par défaut.
Les interpolations de mouvement sont puissantes et faciles à créer.
Lorsque vous créez une interpolation de mouvement, Animate convertit le calque contenant l’objet sélectionné pour l’interpoler en calque d’interpolation. Dans le scénario, le calque d’interpolation présente une icône d’interpolation accolée à son nom.
Un calque d’interpolation ne peut contenir que des plages d’interpolation (groupes contigus d’images contenant une interpolation), des images statiques, des images-clés vides ou des images vides.
Chaque plage d’interpolation ne peut contenir qu’un seul objet cible et une trajectoire de mouvement facultative pour cet objet.
Comme il est impossible de dessiner dans un calque d’interpolation, d’autres interpolations ou images statiques doivent être créées sur d’autres calques, puis glissées vers le calque d’interpolation.
Créer l’interpolation du verso
Sélectionnez l’occurrence correspondant au verso de la carte, puis créez une interpolation de mouvement sur sa plage d’images.
Placez la tête de lecture dans l’image vers laquelle vous souhaitez déplacer l’occurrence cible.
Avec l’outil Sélection, faites glisser l’occurrence cible vers un nouvel emplacement de la scène.
La trajectoire de mouvement s’actualise pour inclure le nouvel emplacement. Toutes les autres images-clés de propriété de la trajectoire de mouvement conservent leur emplacement d’origine.
Pour produire le retournement, insérez une image-clé de propriété à la fin de la première moitié de l’animation et réduisez progressivement la largeur du verso jusqu’à ce qu’il devienne presque invisible.
Créer l’interpolation du recto
Sélectionnez l’occurrence correspondant au recto de la carte et créez une interpolation de mouvement sur une plage complémentaire.
Le recto doit commencer lorsqu’il est vu de profil, puis retrouver progressivement sa largeur normale afin de donner l’impression que la carte poursuit sa rotation.
Sélectionner la carte « recto »
Aller dans animation > Sélectionner « Autres effets d’entrée »
Choisir « Etirer »
Sélectionner à niveau l’image et la passer en arrière-plan
Appliquer la même chose sur les autres cartes recto
Régler l’ordre d’apparition des deux faces
La réussite de l’effet dépend de l’ordre d’affichage des faces. Lorsque la carte commence à tourner, le verso est visible ; pendant la rotation, sa largeur diminue ; ensuite, le recto apparaît et s’élargit.
La face qui doit disparaître doit être placée derrière la face qui apparaît. L’ordre des calques permet de contrôler quelle occurrence est visible lorsque les deux images se chevauchent.
Pour modifier l’ordre d’empilement, faites glisser les calques dans le scénario ou utilisez les commandes de réorganisation appropriées.
Lorsque d’autres objets sont présents sur le même calque que l’objet interpolé, Animate ajoute le cas échéant de nouveaux calques au-dessus ou en dessous du calque original.
Tous les objets situés au-dessous de l’objet interpolé sur le calque original sont déplacés vers un nouveau calque placé sous l’original. Tous les objets situés au-dessus de l’objet interpolé sur le calque original sont déplacés vers un nouveau calque au-dessus de l’original.
Animate insère ces nouveaux calques entre les calques préexistants du scénario. Animate préserve ainsi l’ordre d’empilement d’origine de tous les objets graphiques de la scène.
Régler l’échelle horizontale pour simuler la rotation
Une carte qui se retourne ne doit pas simplement se déplacer : elle doit donner l’impression que sa largeur change pendant la rotation. Pour cela, modifiez l’échelle horizontale de chaque occurrence au fil des images-clés de propriété.
À la première image, la face visible possède sa largeur normale. À l’image centrale, sa largeur est fortement réduite. À la dernière image, l’autre face retrouve sa largeur normale.
Les images-clés de propriété sont des images qui contiennent les changements de propriété que vous avez explicitement définis.
Animate interpole alors les valeurs des propriétés des images intermédiaires.
Pour modifier une trajectoire de mouvement, la méthode la plus simple consiste à déplacer l’occurrence cible de l’interpolation sur la scène dans l’une des images de la plage d’interpolation.
Si l’image actuelle ne contient pas encore d’image-clé de propriété, Animate lui en ajoute une.
Identifier les images-clés dans le scénario
Animate différencie une animation interpolée d’une animation image par image dans le scénario en affichant différents indicateurs dans chaque image renfermant du contenu.
Une plage d’images sur fond bleu indique une interpolation de mouvement. Un point noir dans la première image de la plage indique qu’un objet cible est affecté à la plage d’interpolation.
Des losanges noirs indiquent la dernière image et toute autre image-clé de propriété.
Toutes les autres images de la plage contiennent les valeurs des propriétés interpolées de l’objet cible.
Un point vide dans la première image indique que l’objet cible de l’interpolation de mouvement a été supprimé. La plage d’interpolation contient toujours ses images-clés de propriété et un nouvel objet cible peut lui être appliqué.
Modifier la trajectoire de mouvement
Lorsque vous placez une instance d’interpolation sur la scène, une trajectoire de mouvement pour cette animation apparaît sur la scène.
La trajectoire est une ligne qui représente le mouvement spatial de l’instance interpolée ; ses points (parfois appelés « points d’interpolation » ou « points d’image ») représentent la position de l’objet cible le long de la trajectoire sur le scénario (images uniques ou groupes d’images si une longue plage d’interpolation est sélectionnée).
Vous pouvez modifier la trajectoire de mouvement d’une interpolation de mouvement en procédant comme suit :
- Modifiez la position de l’objet dans l’une des images de la plage d’interpolation.
- Déplacez l’ensemble de la trajectoire de mouvement vers un autre emplacement sur la scène.
- Changez la forme ou la taille de la trajectoire avec les outils Sélection, Sous-sélection ou Transformation libre.
- Changez la forme ou la taille de la trajectoire avec le panneau Transformer ou l’inspecteur des propriétés.
- Servez-vous des commandes du menu Modification > Transformer.
- Appliquez un trait personnalisé sous forme de trajectoire de mouvement.
- Utilisez l’Éditeur de mouvement.
Pour afficher simultanément toutes les trajectoires de mouvement sur tous les calques de la scène, utilisez l’option Toujours afficher les trajectoires de mouvement.
Cet affichage se révèle très utile lorsque l’on conçoit de nombreuses animations sur des trajectoires de mouvement qui se recoupent.
Si une trajectoire de mouvement ou une plage d’interpolation est sélectionnée, choisissez cette option dans le menu d’options de l’inspecteur des propriétés.
Modifier la trajectoire avec Sélection et Sous-sélection
Les outils Sélection et Sous-sélection permettent de modifier la forme d’une trajectoire de mouvement.
L’outil Sélection permet de modifier la forme d’un segment par glissement.
Les images-clés de propriété apparaissent sur le tracé sous forme de points de contrôle dans l’interpolation.
L’outil Sous-sélection permet d’afficher les points de contrôle et les poignées Bezier de la trajectoire correspondant à chaque image-clé de propriété de position.
Vous pouvez alors déplacer ces poignées pour modifier la forme de la trajectoire autour des points des images-clés de propriété.
Cliquez sur l’outil Sélection dans le panneau Outils.
Cliquez sur l’occurrence cible de l’interpolation de façon à ce que la trajectoire de mouvement soit visible sur la scène.
Avec l’outil Sélection, faites glisser l’un des segments de la trajectoire de mouvement pour en modifier la forme. Ne cliquez pas pour sélectionner d’abord le segment.
Pour afficher les points de contrôle Bézier d’un point d’image-clé de propriété sur la trajectoire, cliquez sur l’outil Sous-sélection, puis sur la trajectoire.
Sur la trajectoire de mouvement, les points d’image-clé de propriété s’affichent sous forme de points de contrôle (petits losanges).
Pour déplacer un point de contrôle, faites-le glisser avec l’outil Sous-sélection.
Pour ajuster la courbe de la trajectoire autour d’un point de contrôle, faites glisser les poignées de Bézier du point de contrôle avec l’outil Sous-sélection.
Si les poignées ne sont pas développées, faites glisser le point de contrôle en maintenant la touche Alt (Windows) ou Option (Macintosh) enfoncée pour les développer.
Pour supprimer un point d’ancrage, cliquez dessus avec l’outil Supprimer le point d’ancrage.
La plupart des points d’ancrage générés avec l’outil Sélection sont des points lisses.
Pour convertir un point d’ancrage, cliquez dessus avec l’outil Convertir le point d’ancrage.
Le point d'ancrage se transforme en point d'angle.
Vous pouvez également faire glisser de nouvelles poignées de Bézier d'un point et les positionner, comme vous le feriez pour un point d'ancrage standard.
Vous ne pouvez pas ajouter de points d’ancrage à la trajectoire avec l’outil Ajouter un point d’ancrage.
Déplacer l’objet interpolé
Placez la tête de lecture dans l’image vers laquelle vous souhaitez déplacer l’occurrence cible.
Avec l’outil Sélection, faites glisser l’occurrence cible vers un nouvel emplacement de la scène.
La trajectoire de mouvement s’actualise pour inclure le nouvel emplacement. Toutes les autres images-clés de propriété de la trajectoire de mouvement conservent leur emplacement d’origine.
Déplacer toute la trajectoire
Vous pouvez faire glisser l’ensemble de la trajectoire de mouvement sur la scène ou définir son emplacement dans l’inspecteur des propriétés.
Cliquez sur l’outil Sélection dans le panneau Outils.
Sélectionnez la trajectoire de mouvement par l’une des opérations suivantes :
- Cliquez sur la plage d’interpolation dans le scénario, puis sur la trajectoire de mouvement sur la scène.
- Cliquez sur l’objet interpolé sur la scène, puis sur la trajectoire de mouvement.
- Faites glisser un cadre de sélection autour de la trajectoire de mouvement et de l’occurrence cible pour les sélectionner.
Déplacez la trajectoire par l’une des opérations suivantes :
- Faites glisser la trajectoire vers l’emplacement souhaité sur la scène.
- Définissez les valeurs X et Y de la trajectoire dans l’inspecteur des propriétés.
- Vous pouvez déplacer la trajectoire de mouvement à l’aide des touches fléchées.
Les valeurs X et Y sont destinées au coin supérieur gauche du cadre de sélection de la trajectoire de mouvement.
Pour déplacer l’occurrence cible de l’interpolation et la trajectoire de mouvement en définissant l’emplacement de cette dernière, sélectionnez les deux, puis entrez les emplacements X et Y dans l’inspecteur des propriétés.
Transformer la trajectoire
Cliquez sur l’outil Transformation libre dans le panneau Outils.
Avec l’outil Transformation libre, cliquez sur la trajectoire de mouvement. Ne cliquez pas sur l’occurrence cible de l’interpolation.
Toujours avec l’outil Transformation libre, modifiez l’échelle, inclinez ou faites pivoter la trajectoire.
Vous pouvez également modifier librement la trajectoire de mouvement en la sélectionnant avec l’outil Sous-sélection et en appuyant sur la touche Ctrl (Windows) ou Commande (Macintosh).
Cette opération affiche les mêmes options que l’outil Transformation libre.
Tout en appuyant sur la touche, vous pouvez alors effectuer un glissement pour effectuer vos transformations.
Utiliser une trajectoire personnalisée
Vous pouvez appliquer un trait de calque ou de scénario distinct en tant que trajectoire de mouvement d’une interpolation.
Sélectionnez un trait sur un calque autre que celui d’interpolation et copiez-le dans le Presse-papiers.
Ce trait ne doit pas être fermé. Seuls les traits ininterrompus peuvent être utilisés.
Sélectionnez une plage d’interpolation dans le scénario.
La plage d’interpolation étant toujours sélectionnée, collez le trait.
Animate applique le trait en tant que nouvelle trajectoire de mouvement pour la plage d’interpolation sélectionnée.
L’occurrence cible de l’interpolation se déplace à présent le long du nouveau trait.
Pour inverser les points de début et de fin de l’interpolation, cliquez sur la plage d’interpolation avec le bouton droit de la souris (Windows) ou avec la touche Ctrl (Macintosh), puis sélectionnez Trajectoire de mouvement > Inverser le tracé dans le menu contextuel de la plage d’interpolation.
Pour inverser les points de départ et d’arrivée de l’interpolation, cliquez sur la plage d’interpolation avec le bouton droit (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh).
Sélectionnez Trajectoire de mouvement > Inverser la trajectoire dans le menu contextuel de la plage d’interpolation.
Orienter la carte pendant le mouvement
Lorsque vous créez une trajectoire de mouvement non linéaire, telle qu’un cercle, vous pouvez faire en sorte que l’objet interpolé pivote lors de son déplacement le long de la trajectoire.
Pour conserver une orientation constante par rapport à la trajectoire, sélectionnez Orienter vers la trajectoire dans l’inspecteur des propriétés.
Cette option est particulièrement utile si la carte suit une trajectoire courbe ou si son retournement est intégré à un déplacement dans l’espace.
Synchroniser les images et le timing
Étant donné que vous indiquez une cadence pour l’intégralité du document Animate, il est conseillé de la définir avant de commencer la création de l’animation.
La cadence, la vitesse à laquelle l’animation est lue, est exprimée en nombre d’images par seconde (ips).
Une cadence trop faible donne l’impression d’une animation qui s’arrête et redémarre, alors qu’une cadence trop rapide risque d’entraîner un affichage flou des détails de l’animation.
24 i/s est la cadence d’image par défaut pour les nouveaux documents Animate et celle qui donne les meilleures résultats sur le Web.
La cadence d’image en mouvement standard est également 24 ips.
La complexité de l’animation et la puissance de l’ordinateur sur lequel elle est exécutée affectent la fluidité de la lecture.
Pour déterminer les cadences optimales, testez vos animations sur différents ordinateurs.
Synchroniser le verso et le recto
Pour pouvoir gérer facilement le timing de l’animation, nous vous conseillons de nommer chacun de vos visuels.
Voici le réglage à effectuer pour obtenir l’effet flip :
- Carte verso : Démarrer en cliquant
- Carte recto : Démarrer après le précédent
Appliquer sur les toutes les cartes.
Vous pouvez reproduire le même principe avec plusieurs cartes en conservant une paire d’éléments par carte : un visuel pour le recto et un visuel pour le verso.
Dans notre exemple, nous sommes partis sur 4 cartes à jouer + les cartes verso correspondantes, soit 8 fichiers png.
Modifier ou supprimer l’animation
Vous pouvez modifier la trajectoire de mouvement d’une interpolation de mouvement en procédant comme suit :
- Modifiez la position de l’objet dans l’une des images de la plage d’interpolation.
- Déplacez l’ensemble de la trajectoire de mouvement vers un autre emplacement sur la scène.
- Changez la forme ou la taille de la trajectoire avec les outils Sélection, Sous-sélection ou Transformation libre.
- Changez la forme ou la taille de la trajectoire avec le panneau Transformer ou l’inspecteur des propriétés.
- Servez-vous des commandes du menu Modification > Transformer.
- Appliquez un trait personnalisé sous forme de trajectoire de mouvement.
- Utilisez l’Éditeur de mouvement.
Pour supprimer une trajectoire de mouvement dans une interpolation, sélectionnez la trajectoire du mouvement sur la scène en cliquant dessus avec l’outil Sélection.
Appuyez sur la touche Suppr.
Copier une trajectoire pour plusieurs cartes
Cliquez sur la trajectoire de mouvement sur la scène pour la sélectionner.
Choisissez la commande Modifier > Copier.
Vous pouvez ensuite coller la trajectoire dans un autre calque sous forme de trait ou de trajectoire de mouvement pour une autre interpolation de mouvement.
Cette méthode permet de conserver une trajectoire identique pour plusieurs cartes tout en modifiant séparément les occurrences et leur synchronisation.
Répartir plusieurs cartes dans des calques
La répartition manuelle s’avère également pratique pour appliquer une animation à des objets tout en maintenant un contrôle précis sur la manière dont ils se déplacent d’un calque à l’autre.
Sélectionnez les objets à répartir dans des calques distincts.
Ces objets peuvent se trouver sur un même calque ou sur plusieurs, même non contigus.
Effectuez l’une des opérations suivantes :
- Sélectionnez Modification > Scénario > Répartir dans les calques.
- Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Contrôle (Macintosh) sur un des objets sélectionnés, puis sélectionnez Répartir dans les calques.
Les calques créés pendant la répartition dans des calques sont baptisés selon le nom de l’élément que chacun contient.
Un nouveau calque contenant un élément de bibliothèque (tel que symbole, bitmap ou clip vidéo) prend le nom de cet élément.
Un nouveau calque contenant une occurrence nommée prend le nom de cette occurrence.
Un nouveau calque contenant un objet graphique (sans nom) est nommé Calque 1 (ou Calque 2 et ainsi de suite), les objets graphiques ne possédant pas de nom.
Animate insère les nouveaux calques sous les calques éventuellement sélectionnés.
Les nouveaux calques sont organisés de haut en bas, selon l’ordre de création initial des éléments sélectionnés.
Créer une animation image par image
Lorsque l’effet de retournement exige des dessins ou des déformations très spécifiques, l’animation image par image constitue une autre possibilité.
Cette technique d’animation vous permet de spécifier différents effets artistiques pour chaque image du scénario.
Utilisez cette technique pour créer un effet similaire aux images d’un film défilant en accéléré.
Cette technique est très utile pour les animations complexes dans lesquelles les éléments graphiques de chaque image doivent être différents.
Animate permet de répartir des objets dans des images-clés individuelles.
Vous pouvez choisir de répartir des objets lorsque vous organisez du contenu sur la scène.
Manuellement, cette procédure est fastidieuse et prend beaucoup de temps.
La répartition est très utile lors de la création d’animations interpolées en plaçant des objets sur des images-clés individuelles.
Vous pouvez affecter différents objets ou états d’objet à des images-clés individuelles.
Lorsque la tête de lecture parcourt ces images-clés, l’effet d’une animation est apparent.
Lorsque vous utilisez la commande Répartir dans les images-clés, Animate répartit chaque objet sélectionné dans une nouvelle image-clé distincte.
Les objets que vous ne sélectionnez pas (y compris ceux d’autres images) conservent leurs calques d’origine.
Vous pouvez appliquer la commande Répartir dans les images-clés à tout élément de la scène, notamment à des objets graphiques, des occurrences, des bitmaps, des clips vidéo et des blocs de texte.
Gérer les calques et les scripts
Pour placer des scripts d’image sur un calque d’interpolation, créez-les sur un autre calque, puis faites-les glisser sur celui d’interpolation.
Un script d’images ne peut résider que dans une image qui est hors de la plage d’interpolation de mouvement elle-même.
En général, il est conseillé de conserver tous les scripts d’images sur un calque distinct qui ne contient que du code ActionScript.
Lorsque vous créez une interpolation de mouvement, Animate convertit le calque contenant l’objet sélectionné pour l’interpoler en calque d’interpolation.
Un calque d’interpolation ne peut contenir que des plages d’interpolation, des images statiques, des images-clés vides ou des images vides.
Vérifier le rendu de la carte retournée
La complexité de l’animation et la puissance de l’ordinateur sur lequel elle est exécutée affectent la fluidité de la lecture.
Pour déterminer les cadences optimales, testez vos animations sur différents ordinateurs.
Vérifiez que les deux faces restent parfaitement alignées pendant toute l’animation et que la carte ne se décale pas au moment où le recto remplace le verso.
Contrôlez également que la face masquée ne réapparaît pas derrière la face visible et que les images-clés de propriété sont placées au bon moment dans le scénario.
Pour concevoir des animations plus complexes, vous pouvez modifier la trajectoire, utiliser l’Éditeur de mouvement et afficher simultanément toutes les trajectoires de mouvement sur tous les calques de la scène.