Création de calques de scénario avec Animate

Les calques permettent d’organiser les différents éléments d’un document. Vous pouvez dessiner et modifier des objets sur un calque sans affecter les objets des autres calques. Dans les zones de la scène où les calques sont vides, vous pouvez apercevoir les calques situés en dessous.

Pour dessiner, peindre ou encore modifier un calque ou un dossier, vous devez sélectionner le calque dans le scénario pour le rendre actif. L’icône Crayon en regard du nom d’un calque ou d’un dossier dans le scénario indique que le calque ou le dossier est actif. Vous ne pouvez activer qu’un seul calque à la fois (même si vous pouvez en sélectionner plusieurs à la fois).

Les documents que vous créez dans Animate contiennent un seul calque. Vous pouvez y ajouter d’autres calques de façon à organiser le contenu, les effets animés et les autres éléments de votre document. Vous pouvez également masquer, verrouiller ou réorganiser les calques. Le nombre de calques que vous pouvez créer n’a de limite que la mémoire de votre ordinateur, les calques n’augmentant pas la taille de votre fichier SWF publié. Seuls les objets que vous placez sur les calques influent sur la taille du fichier.

Pour organiser et gérer les calques, créez des dossiers de calques et placez-y des calques. Vous pouvez développer ou réduire les dossiers de calques dans le scénario sans affecter ce qui est affiché sur la scène. Utilisez des calques ou des dossiers distincts pour les fichiers audio, ActionScript, les étiquettes d’images et les commentaires d’images. L’utilisation de calques distincts vous permet de retrouver plus rapidement ces éléments lorsque vous devez les modifier.

Pour créer des effets sophistiqués, vous pouvez utiliser des calques de guide spéciaux afin de faciliter les opérations de dessin et de retouche, et de créer des calques de masque.

Il existe cinq types de calques que vous pouvez utiliser dans Animate :

• Les calques normaux contiennent la plus grosse partie de l’illustration dans un fichier FLA.

• Les calques de masque contiennent des objets utilisés comme masques pour recouvrir et cacher les parties sélectionnées des calques. Pour plus d’informations, voir Utilisation de calques de masque.

• Les calques masqués sont des calques placés sous un calque de masque que vous associez avec ce dernier. Seule la partie du calque masqué non recouverte par le masque est visible. Pour plus d’informations, voir Utilisation de calques de masque.

• Les calques de guide contiennent des contours qui peuvent servir à guider la disposition des objets sur d’autres calques. En outre, vous pouvez les utiliser pour guider le mouvement d’animations d’interpolation classiques sur d’autres calques. Pour plus d’informations, voir Calques de guide et Création d’un mouvement d’interpolation classique le long d’une trajectoire.

• Les calques guidés sont des calques associés à un calque de guide. Les objets placés sur le calque guidé peuvent être disposés ou animés le long des traits sur le calque de guide. Les calques guidés peuvent contenir du contenu statique et des interpolations classiques, mais pas d’interpolations de mouvement.

• Les calques d’interpolation de mouvement contiennent les objets animés avec des interpolations de mouvement. Pour plus d’informations, voir À propos des animations interpolées.

• Les calques de squelette contiennent des objets auxquels sont liés des segments de cinématique inverse. Pour plus d’informations, voir Animation de cinématique inverse à l’aide de l’outil Segment.

Les calques normaux, de masque, masqués et de guide peuvent contenir des interpolations de mouvement ou des segments de cinématique inverse. Lorsque ces éléments sont présents dans l’un de ces calques, seuls certains types de contenu peuvent être ajoutés au calque. Pour plus d’informations, voir Interpolations de mouvement et Animation de cinématique inverse à l’aide de l’outil Segment.

Création d’un calque

Lorsque vous créez un calque, il apparaît au-dessus du calque sélectionné. Le calque que vous venez d’ajouter devient le calque actif.

Création d’un dossier de calques

Organisation des calques et des dossiers de calques

Vous pouvez réorganiser les différents calques et dossiers dans le scénario pour mieux organiser votre document.

Les dossiers de calques vous permettent d’organiser vos tâches en plaçant les calques dans une structure arborescente. Vous pouvez développer ou réduire le dossier pour voir les calques contenus dans un dossier sans affecter ceux qui sont visibles sur la scène. Les dossiers pouvant contenir des calques et d’autres dossiers, vous pouvez organiser les calques de la même manière que vous organisez les fichiers de votre ordinateur.

Les commandes du scénario relatives aux calques s’appliquent à tous les calques d’un même dossier. Par exemple, le verrouillage d’un dossier de calques entraîne le verrouillage de tous les calques qu’il contient.

• Faites glisser le calque ou le nom du dossier de calque jusqu’au nom du dossier de calque souhaité afin de déplacer un calque ou un dossier de calque dans le dossier visé.
• Faites glisser un ou plusieurs calques ou dossiers du scénario dans la position souhaitée pour changer l’ordre des calques ou des dossiers.
• Pour développer ou réduire un dossier, cliquez sur le triangle à gauche de son nom.
• Pour développer ou réduire tous les dossiers, cliquez sur le bouton droit (Windows) ou cliquez en maintenant la touche Ctrl enfoncée (Macintosh) et sélectionnez ensuite Développer tous les dossiers ou Réduire tous les dossiers.

Changement de nom d’un calque ou d’un dossier

Par défaut, Animate attribue des noms aux nouveaux calques dans l’ordre dans lequel ils sont créés : Calque 1, Calque 2 et ainsi de suite. Renommez les calques pour mieux représenter leur contenu.

Sélection d’un calque ou d’un dossier

Copie d’images à partir d’un calque unique

Copie d’images à partir d’un dossier de calques

Suppression d’un calque ou d’un dossier

Verrouillage ou déverrouillage d’un ou plusieurs calques ou dossiers

• Pour verrouiller un calque ou un dossier, cliquez sur la colonne de verrouillage à droite du nom. Cliquez de nouveau pour le déverrouiller.

• Cliquez sur l’icône de verrouillage pour verrouiller tous les calques et dossiers. Pour déverrouiller tous les calques et dossiers, cliquez de nouveau.

• Faites glisser le pointeur de la souris dans la colonne de verrouillage pour verrouiller ou déverrouiller plusieurs calques ou dossiers.

• Pour verrouiller tous les autres calques ou dossiers, cliquez dans la colonne de verrouillage en maintenant la touche Alt (Windows) ou Option (Macintosh) enfoncée. Pour déverrouiller tous les calques ou dossiers, cliquez à nouveau dans la colonne de verrouillage en maintenant la touche Alt ou Option (Macintosh) enfoncée.

Copier et coller des calques (CS5.5 uniquement)

Vous pouvez copier des calques ou dossiers de calques entiers dans le scénario et les coller dans le même scénario ou dans des scénarios distincts. Vous pouvez copier tous types de calques.

Lors du copier-coller de calques, la structure du dossier de calques des calques copiés est préservée.

Les calques s’affichent dans le scénario au-dessus du calque que vous avez sélectionné. Si vous avez sélectionné un dossier de calques, les calques collés se trouvent dans le dossier.

Pour placer un calque dans un calque de masque ou dans un calque de guide, vous devez tout d’abord sélectionner un calque sous le masque ou le guide, puis le coller. Il est impossible de coller un calque de masque, un calque de guide ou un calque de dossier sous un calque de masque ou un calque de guide.

Vous pouvez également dupliquer des calques en les sélectionnant et en choisissant ensuite Modifier > Scénario > Dupliquer les calques. Le mot « copie » est ajouté au nom des nouveaux calques.

Définition de propriétés sur plusieurs calques

Affichage ou masquage d’un calque ou d’un dossier

Une croix rouge (X) placée en regard du nom d’un calque ou d’un dossier dans le scénario indique que celui-ci est masqué. Dans les paramètres de publication, vous pouvez choisir si les calques masqués sont inclus lorsque vous publiez un fichier SWF.

• Pour masquer un calque ou un dossier, cliquez dans la colonne d’affichage à la droite du calque ou du dossier dans le scénario. Cliquez de nouveau pour l’afficher.

• Pour masquer tous les calques et dossiers dans le scénario, cliquez sur l’icône représentant un œil. Pour afficher tous les calques et dossiers, cliquez à nouveau.

• Pour afficher ou masquer plusieurs calques ou dossiers, faites glisser le pointeur de la souris dans la colonne avec l’icône représentant un œil.

• Pour masquer tous les calques et dossiers autres que ceux en cours, cliquez en appuyant sur la touche Alt (Windows) ou Option (Macintosh) dans la colonne contenant une icône en forme d’œil. Pour afficher tous les calques et dossiers, cliquez de nouveau en appuyant sur la touche Alt ou Option.

Affichage du contenu d’un calque sous forme de contours

Pour savoir à quel calque appartient un objet, affichez tous les objets d’un calque sous forme de contours colorés.

• Cliquez dans la colonne d’affichage sous forme de contours, à droite du nom du calque, pour afficher tous les objets présents sur ce calque sous forme de contours. Pour désactiver l’affichage de contours, cliquez de nouveau dessus.

• Cliquez sur l’icône de contours pour afficher les objets présents sur tous les calques sous forme de contours. Cliquez de nouveau dessus pour désactiver l’affichage des contours sur tous les calques.

• Pour afficher les objets sur tous les calques autres que celui en cours, cliquez en appuyant sur la touche Alt (Windows) ou Option (Macintosh) dans la colonne Contour. Pour désactiver l’affichage des contours pour tous les calques, cliquez de nouveau en appuyant sur la touche Alt ou Option.

 Les trajectoires de mouvement du calque utilisent également la couleur du contour du calque.

Changement de la couleur du contour d’un calque

Affichage de calques et de dossiers de calques

Affichage ou masquage d’un calque ou d’un dossier

Une croix rouge (X) placée en regard du nom d’un calque ou d’un dossier dans le scénario indique que celui-ci est masqué. Dans les paramètres de publication, vous pouvez choisir si les calques masqués sont inclus lorsque vous publiez un fichier SWF.

• Pour masquer un calque ou un dossier, cliquez dans la colonne d’affichage à la droite du calque ou du dossier dans le scénario. Cliquez de nouveau pour l’afficher.

• Pour masquer tous les calques et dossiers dans le scénario, cliquez sur l’icône représentant un œil. Pour afficher tous les calques et dossiers, cliquez à nouveau.

• Pour afficher ou masquer plusieurs calques ou dossiers, faites glisser le pointeur de la souris dans la colonne avec l’icône représentant un œil.

• Pour masquer tous les calques et dossiers autres que le calque ou le dossier en cours, cliquez en appuyant sur la touche Alt (Windows) ou Option (Macintosh) dans la colonne contenant une icône en forme d’œil. Pour afficher tous les calques et dossiers, cliquez de nouveau en appuyant sur la touche Alt ou Option.

Affichage du contenu d’un calque sous forme de contours

Pour savoir à quel calque appartient un objet, affichez tous les objets d’un calque sous forme de contours colorés.

• Cliquez dans la colonne d’affichage sous forme de contours, à droite du nom du calque, pour afficher tous les objets présents sur ce calque sous forme de contours. Pour désactiver l’affichage de contours, cliquez de nouveau dessus.

• Cliquez sur l’icône de contours pour afficher les objets présents sur tous les calques sous forme de contours. Cliquez de nouveau dessus pour désactiver l’affichage des contours sur tous les calques.

• Pour afficher les objets sur tous les calques autres que celui en cours, cliquez en appuyant sur la touche Alt (Windows) ou Option (Macintosh) dans la colonne Contour. Pour désactiver l’affichage des contours pour tous les calques, cliquez de nouveau en appuyant sur la touche Alt ou Option.

Modification de la couleur de contour d’un calque

 Les trajectoires de mouvement du calque utilisent également la couleur du contour du calque.

Définition de la transparence du calque

 La transparence du calque n’a aucun effet sur les calques masqués.

Utilisation de calques avancés

Avec le mode Calques avancés d’Animate, tous les calques dans le scénario sont publiés en tant que symboles. Le mode Calques avancés permet d’accéder aux fonctions suivantes :

• Effets de calque
• Profondeur de calque  
• Parenté de calque
• Caméra

Le mode Calques avancés est activé par défaut. Vous pouvez activer ou désactiver les calques avancés à l’aide des paramètres Modifier > Document. Après avoir appliqué les modifications, cliquez sur Établir comme valeur par défaut pour conserver le paramètre actuel pour les documents suivants et entre les sessions d’Animate. 

Quand vous accédez à ces symboles à l’aide d’un script dans Animate, vous devez les invoquer en utilisant un calque en tant qu’objet. Par exemple, si vous n’utilisez pas de calques avancés, vous pouvez accéder directement à un symbole à l’aide d’un script semblable à l’exemple suivant : 

getchildbyname("symbol1");

Toutefois, si vous utilisez des calques avancés, vous pouvez accéder au symbole uniquement via un calque à l’aide d’un script semblable à l’exemple suivant :

Layer=getchildbyname("L1");

Layer.getchildbyname("symbol1");

Exemple de code pour accéder à des symboles à l’aide des calques avancés pour le type de document AS3 : 

Exemple de code pour accéder à des symboles à l’aide des calques avancés pour le type de document HTML5 Canvas : 

L’illustration suivante montre comment accéder à un symbole en utilisant le script avec et sans calques avancés. 

 La taille de vos projets d’animation publiés peut augmenter lorsque vous utilisez des calques avancés dans Animate. Si vous rencontrez des problèmes lors de l’accès aux fonctionnalités de profondeur de calque ou de caméra, vérifiez si le mode Calques avancés est activé. S’il est désactivé, activez-le afin d’obtenir le comportement prévu.

Application d’effets de calque

Auparavant, les filtres et les effets de couleur s’appliquaient uniquement aux clips. Avec les calques avancés, les filtres et les effets de couleur peuvent désormais être appliqués à des images sélectives qui, à leur tour, s’appliquent à l’ensemble du contenu, y compris des formes, des objets de dessin, des symboles graphiques, etc. Les effets de calque peuvent également être interpolés en utilisant des interpolations classiques, de forme et de cinématique inverse entre les images.

Vous pouvez appliquer des effets de calque à une ou plusieurs images en sélectionnant celles de votre choix. Vous pouvez également appliquer des effets de calque à toutes les images d’un calque en sélectionnant l’intégralité du calque. Les effets de calque peuvent également être appliqués au scénario du symbole, comme un clip et un symbole graphique, et dans toutes les scènes.

 Ces effets ne peuvent être appliqués que lorsque le mode Calques avancés est activé. Il se peut que vous deviez activer le mode Calques explicitement pour que les fichiers utilisent cette fonctionnalité.

Utilisation de filtres pour les images

Pour ajouter des filtres à un cadre spécifique, sélectionnez d’abord l’image. Le panneau Inspecteur des propriétés charge les propriétés spécifiques de l’image. Cliquez sur l’icône + dans la liste déroulante Filtres. 

Lorsque vous ajoutez des filtres à des images, l’inspecteur des propriétés s’affiche, comme illustré dans la capture d’écran ci-dessous. 

Vous pouvez définir des propriétés pour chacun des filtres suivant vos besoins et les appliquer au niveau d’une image. L’interpolation s’applique à tous les filtres de l’image. 

 Les effets de calque ne sont pris en charge que sur le type de document ActionScript 3. Les calques de caméra et d’interpolation de mouvement ne prennent pas en charge les effets de calque.

Utilisation d’effets de couleur

Pour appliquer un effet de couleur à une image spécifique, sélectionnez d’abord cette dernière. Le panneau Inspecteur des propriétés charge les propriétés spécifiques de l’image. Sélectionnez la propriété de couleur de votre choix dans le panneau Inspecteur des propriétés.

Utilisation des modes de fusion

Pour appliquer des modes de fusion sur une image spécifique, sélectionnez tout d’abord l’image, puis choisissez un mode de fusion sous la section Affichage du panneau Propriétés de l’image.

Lorsque vous appliquez la fusion sur des calques ou des images, elle est appliquée à l’ensemble du contenu, y compris les formes, les objets de dessin et les symboles graphiques. Tous les objets d’un calque sont fusionnés avec les objets d’un autre calque, en fonction du mode de fusion appliqué à cette image.

Pour plus d’informations sur les modes de fusion, voir Application de modes de fusion.

Comment améliorer vos animations à l’aide d’effets de calque

Application de la profondeur de calque

En tant qu’animateur, vous pouvez placer les calques sur différents plans d’animation 2D de façon à créer une illusion de profondeur. 

Vous pouvez modifier, de manière dynamique, les profondeurs des calques dans le panneau Profondeur de calque. Pour ouvrir le panneau de profondeur de calque, cliquez sur Fenêtre > Profondeur de calque.

 Vous pouvez définir les valeurs de profondeur de calque minimale et maximale dans la plage 5 000 à 10 000.

Comme le montre la capture d’écran ci-dessus, les valeurs de profondeur de calque sont affichées à côté de chaque nom de calque pour une image donnée.

• À l’aide de la souris, survolez chaque valeur, cliquez et faites glisser le curseur vers la droite ou la gauche.
• Pour réduire la profondeur, faites glisser le curseur vers la gauche. Pour augmenter la profondeur, faites glisser le curseur vers la droite. 
• Vous pouvez utiliser des valeurs positives plus petites pour représenter des objets qui sont plus proches et des valeurs positives plus grandes pour représenter des objets lointains.

Vous pouvez interpoler les valeurs de profondeur de calque dans n’importe laquelle des plages d’interpolation pour votre animation. 

Chaque calque est représenté avec des lignes colorées uniques dans le panneau Profondeur de calque. Vous pouvez afficher les couleurs représentant chacun des calques dans le scénario. 

Vous pouvez également augmenter ou diminuer la profondeur des objets dans chaque calque en déplaçant les lignes multicolores vers le haut ou vers le bas.

• Pour diminuer la profondeur des objets dans un calque, cliquez sur la ligne et déplacez-la vers le haut.
• Pour augmenter la profondeur des objets dans un calque, cliquez sur la ligne et déplacez-la vers le bas.

Illustration d’animations avec et sans profondeur de calque :

Illustration d’une animation avec la profondeur de calque appliquée :

Vous pouvez utiliser la caméra sur des calques à plusieurs plans pour créer un effet de parallaxe ou zoomer sur le contenu d’un plan. Vous pouvez également verrouiller la caméra sur un calque spécifique ou appliquer des effets de caméra lors de l’exécution à l’aide d’API interactives. Pour plus d’informations, voir Création d’un effet de parallaxe avec la profondeur Z de la caméra.

 La profondeur de calque s’applique uniquement au scénario principal.

Conservation de la taille pour la profondeur de calque

Vous pouvez modifier la profondeur de calque des objets sans affecter leur taille ni leur position. Pour activer la fonctionnalité de conservation de la taille, cliquez sur le bouton Conserver la taille dans le coin supérieur droit du panneau Profondeur de calque.

Vous pouvez utiliser l’option Conserver la taille dans deux modes :

• Cliquez sur le bouton Conserver la taille et modifiez la profondeur du calque qui vous intéresse. Le bouton Conserver la taille bascule automatiquement.
• Appuyez sur la touche Alt et maintenez-la enfoncée pour activer temporairement l’option Conserver la taille tout en faisant glisser les valeurs de profondeur de calque.

Application de la profondeur de calque lors de l’exécution

Vous pouvez également afficher la caméra sur les objets à l’exécution et appliquer des effets à l’aide des API de caméra. Pour plus d’informations, voir Utilisation d’une caméra interactive à l’exécution. 

API de profondeur de calques pour AS3

Vous pouvez gérer les calques lors de l’exécution en utilisant des API, par exemple, lorsque vous souhaitez ajouter un calque dans l’animation ou diminuer la profondeur de l’un des calques. 

API de profondeur de calques pour HTML Canvas

Parenté de calque

Animate vous permet d’établir un lien de parenté entre un calque et un autre. La parenté de calque est une manière simple de permettre à un calque/objet de votre animation de contrôler un autre calque/objet. En tant que concepteur d’animation ou de jeu, vous pouvez accélérer votre animation en contrôlant plus facilement les mouvements des différentes parties d’un personnage.

La vue de parenté des calques nécessite l’activation des Calques avancés. Par défaut, les Calques avancés sont activés pour les nouveaux fichiers. Vous pouvez activer la vue de parenté des calques en cliquant sur l’icône de symbole de hiérarchie dans le coin supérieur droit du scénario. 

 La parenté des objets déformés ne fonctionne que lorsque le point de transformation de l’objet calque enfant se trouve sur l’objet calque parent.

Calques parents et enfants

Dans la vue de parenté, lorsque vous déplacez le calque 1 sur le calque 2, le calque 1 devient l’enfant du calque parent 2. L’objet sur le calque enfant hérite de la position et de la rotation de l’objet sur le calque parent indépendamment de porter ses propres propriétés. Ainsi, quand vous déplacez ou tournez le parent, l’enfant se déplace ou tourne également avec le parent. Vous pouvez créer plusieurs relations parent-enfant afin de constituer une hiérarchie.

Parenté de calques

Vous pouvez lier un calque à un autre en cliquant sur la poignée du calque (tête de couleur) et en la faisant glisser sur l’autre calque. Une autre solution consiste à cliquer n’importe où dans l’espace rectangulaire horizontal à côté du nom du calque et à le faire glisser sur un autre calque. Vous pouvez également utiliser un simple clic et choisir le calque parent correspondant dans la liste contextuelle. 

Une ligne pointillée apparaît à côté de la tête de couleur du calque dès que vous cliquez sur la ligne et essayez de la faire glisser. Un lien parent-enfant est établi entre les deux calques dès que vous relâchez le clic et l’action de glissement.

La tête de couleur la plus à gauche dans la hiérarchie de vue de parenté de calque représente le parent. La hiérarchie parent-enfant se déplace de gauche à droite.

Vous pouvez supprimer cette connexion en cliquant sur la tête de couleur d’un calque, et en faisant glisser la ligne pointillée et en la relâchant. Vous pouvez également cliquer sur l’espace horizontal, puis sur Supprimer le parent, comme illustré ci-dessous. 

Dans les copies d’écran ci-dessous, vous pouvez voir les vues avant/après de la hiérarchie des calques et des positions lorsque vous utilisez la parenté de calque.

Vous trouverez ci-dessous un exemple d’illustration représentant l’utilisation de la parenté de calque des parties du corps humain.

Dans l’illustration ci-dessus :

• Le torse est le parent de toutes les parties du corps.
• Legs_thigh est le parent de diverses autres parties d’une jambe telles que Sneaker, Leg_lower et Ankle.
• La tête est un enfant du parent ; le cou et le torse sont les parents du cou. Ainsi, chaque fois que vous déplacez le cou du corps par glisser-déposer, la partie correspondant à la tête se déplace également avec lui.

 La parenté est une propriété de cadre que vous devez placer pour chaque image-clé sur le calque enfant. Sur une image-clé, vous pouvez rompre ou rétablir le lien de parenté du calque enfant avec un autre calque parent.

Prise en charge de l’échelle, de l’inclinaison et de la symétrie dans la parenté

À partir d’Animate 2022, la parenté des calques a été améliorée en vue de propager les propriétés Échelle, Inclinaison et Symétrie en plus des propriétés Position et Rotation de l’objet parent. Par défaut, toutes les propriétés sont propagées, mais la propagation de l’échelle, de l’inclinaison et de la symétrie peut être désactivée ou activée à partir de la fenêtre contextuelle Parenté qui peut être appelée en appuyant longuement sur le bouton Afficher la vue de parenté du panneau Scénario, comme illustré ci-dessous.

En outre, les paramètres de propagation d’échelle, d’inclinaison et de symétrie peuvent être basculés pour des modifications momentanées à l’aide d’une touche de modification lors de l’utilisation de l’outil Transformation libre. Le remplacement temporaire de ce paramètre peut être effectué en maintenant la touche Accent(’) enfoncée tout en mettant à l’échelle ou en inclinant l’objet à l’aide de l’outil Transformation libre. Cette fonction est pratique lorsque vous souhaitez basculer momentanément le comportement de propagation pour les nouvelles propriétés prises en charge.

Tutoriel sur la parenté de calque