Introduction

Trois méthodes permettent d’ajouter du texte à votre projet Animate :

  • Utilisation de l’outil de texte.
    Dans la palette Outils, cliquez sur le grand T (ou utilisez le raccourci clavier T) puis, dans votre document, cliquez et dessinez un rectangle pour créer une zone de texte. Au début, ne vous souciez pas trop du positionnement ou de la taille de la zone de texte. Ces détails pourront être revus plus tard. Commencez simplement à taper. Essayez l’expression « On the Edge ». Le texte que vous entrez apparaît sur la scène, comme illustré à la Figure 1. Pour créer plusieurs paragraphes, appuyez simplement sur la touche Entrée comme vous le feriez dans votre traitement de texte. Une fois terminé, pour fermer la fenêtre de texte, appuyez sur la touche Echap ou cliquez sur le bouton X dans le coin supérieur droit.
  • Copie et collage.
    Si vous travaillez avec des blocs de texte de grande taille, vous pouvez déjà avoir composé un brouillon dans un traitement de texte ou une autre source. Dans ce cas, vous pouvez copier le texte dans votre traitement de texte puis, dans Animate, créer une zone de texte et appuyer sur les touches Ctrl+V (Commande-V) pour coller le texte dans votre projet. Il ne sera pas exactement formaté comme le modèle d’origine, mais le texte sera là. Ce processus conserve certains éléments principaux de formatage, tels que les sauts de paragraphe.
  • Ouverture de code HTML avec texte.
    Vous avez peut-être déjà créé une page Web dans un éditeur HTML ou un autre outil de création pour le Web. Vous souhaitez ajouter une certaine forme d’animation à la page statique. Vous pouvez ouvrir cette page dans Animate via la commande FichierOuvrir, puis utiliser Animate afin que les éléments puissent se déplacer. Cette méthode restreint ce que vous pouvez faire du texte importé de cette manière. Vous ne pouvez pas le modifier ou changer sa mise en forme. Au fond, il s’agit juste d’un autre élément graphique que vous pouvez utiliser dans une animation. Un avantage significatif de cette méthode est qu’elle permet de conserver les liens dans le texte.

Modification de propriétés spécifiques au texte

Une fois que votre projet Animate contient un texte, vous pouvez utiliser diverses propriétés spécifiques à ce dernier pour modifier son apparence, comme illustré à la Figure 2. Ces propriétés s’affichent dans le sous-panneau Texte. Au départ, il se peut que certaines des options moins utilisées soient masquées. Cliquez sur le bouton dans le coin inférieur gauche du sous-panneau pour afficher ou masquer des propriétés supplémentaires. Les noms de chacun de ces outils respectent les conventions de nommage CSS (feuille de style en cascade), qui utilisent des lettres minuscules et des traits d’union entre les mots.

  • font-family. Vous avez le choix entre plusieurs polices de caractères différentes. Il est possible que certaines des polices soient absentes de votre ordinateur. Dans la conception Web, vous êtes limité aux polices qui sont disponibles à votre public, sauf si vous disposez d’un moyen pour fournir la police avec votre projet. Pour plus de détails sur les polices et les caractères, consultez la section suivante.
  • color. Cliquez sur le nuancier pour afficher le sélecteur de couleurs standard qui permet de définir la couleur de votre texte.
  • font-size. Entrez un nombre pour la taille de police. En regard de la taille de la police figure un bouton nommé Unités des propriétés du texte. Pour modifier la méthode permettant de spécifier la taille de la police, cliquez sur celui-ici.
  • font-unit. Animate utilise trois unités différentes pour spécifier la taille de police : pixels (px), ems (em) et pourcentage (%). Les pixels sont équivalents à un simple point sur un écran. Un em est à peu près de la taille de la lettre M. Dans la mesure où la plupart des navigateurs Web permettent aux utilisateurs d’ajuster la taille du texte, un em est une unité qui change selon le réglage du navigateur. Le pourcentage est une option utile lors de la conception Web d’un contenu qui peut être visionné sur des appareils mobiles ainsi que sur des ordinateurs de bureau.
  • font-style. Permet d’incliner le texte afin qu’il ait un aspect en italiques.
  • font-weight. Propose plusieurs options telles que Thin, Extra Light, Normal et Extra Bold. L’ordre des options et leurs numéros associés vous donnent des indices lors de la comparaison de différentes graisses.
  • font-decoration. Utilisez ce bouton pour souligner le texte.
  • text-align. Tout comme un traitement de texte, Animate permet d’aligner le texte à droite, au centre ou à gauche. L’alignement affecte l’ensemble du texte dans la zone de texte. Par conséquent, si vous souhaitez créer un paragraphe aligné à droite et un autre centré, vous devez placer les deux dans des zones de texte distinctes.
  • text-indent. Permet de mettre en retrait la première ligne dans une zone de texte. La valeur, modifiable, est exprimée en pixels. Elle n’accepte pas de nombres négatifs pour la création de retraits négatifs.
  • line-height. Permet de définir l’espacement entre des lignes de texte.
  • letter-spacing. Comme son nom l’indique, permet de régler l’espacement entre des lettres. Souvent utilisé pour créer des logos d’entreprise ou des titres distinctifs, utilisez cet effet avec parcimonie pour un corps de texte normal.
  • word-spacing. Permet de faire varier la distance entre des mots. Utilisez ce paramètre avec précaution, faute de quoi vous pourriez obtenir un texte maladroit, difficile à lire.

Utilisation de polices Web

Une autre méthode permet d’augmenter le nombre de polices de caractères que vous utilisez dans vos animations Animate. Depuis des années, les concepteurs de sites Web ont recours à des polices Web. Pour que les programmes, y compris les navigateurs Web, puissent afficher une police de caractères spécifique, ils doivent accéder à la description de la police. Habituellement, cette description réside sur le même ordinateur que le programme, parfois appelé le client. Le fonctionnement des polices Web est un peu différent. Par exemple, dans le cas de polices Web Google (www.google.com/webfonts), les définitions des polices sont stockées sur les serveurs de Google. En tant que concepteur pour le Web, vous pouvez utiliser ces polices en ajoutant à vos pages un code qui indique aux navigateurs l’emplacement des descriptions de police.

Tout d’abord, recherchez la police Web à utiliser. Les polices Web Google étant gratuites et étonnamment faciles à utiliser, elles constituent un candidat idéal pour votre première tentative. Pour sélectionner une police Web Google et saisir le code requis pour l’identifier dans votre projet, procédez comme suit :

  1. Dans votre navigateur Web, visitez l’adresse www.google.com/webfonts. Une page affichant des échantillons de police apparaît. Les polices se comptent par centaines et les widgets sur la gauche permettent de filtrer celles-ci. Les boutons au bas de la page vous dirigent vers les trois étapes pour une chasse aux polices Web fructueuse : choisir, examiner et utiliser.

  2. Sur la gauche, sous le mot Filtres, cliquez sur le menu déroulant. Vous avez le choix entre Serif, Sans-Serif, Affichage et Manuscrit. Les cases à cocher du menu permettent de choisir une combinaison de caractéristiques. Par exemple, vous pouvez utiliser Sans-Serif et Affichage.

  3. Le cas échéant, utilisez les curseurs Epaisseur, Inclinaison et Largeur pour affiner votre recherche. Avec autant de choix, il peut être utile de limiter le nombre de polices affichées à l’écran.

  4. Utilisez les onglets en haut de la fenêtre de polices pour changer l’affichage sur Mot, Phrase ou Paragraphe.

    Si vous recherchez une police pour les en-têtes, l’onglet Mot ou Phrase est le choix le plus approprié.
    Si vous choisissez une police pour le corps du texte, veillez à vérifiez son aspect à l’aide de l’option Paragraphe.

  5. Cliquez sur le bouton « Ajouter à la collection » de couleur bleue. Une collection peut comprendre plusieurs polices mais, pour des questions de conception et de vitesse de rendu de la page, vous souhaiterez limiter le nombre de polices utilisées.

  6. Cliquez sur Examiner. Cette étape peut ne pas être toujours nécessaire mais, comme son nom l’indique, cette page permet d’observer de plus près l’utilisation de votre police dans un titre ou un paragraphe.

  7. Cliquez sur Utiliser. Une nouvelle page présente des instructions concernant l’utilisation des polices sur votre site Web. Vers le centre de la page figure un cadre bleu intitulé « Ajouter ce code à votre site Web » (voir la Figure 3).

  8. Cliquez sur l’onglet Standard, puis sélectionnez et copiez le code affiché. Le code étant stocké dans le Presse-papiers, vous êtes prêt à aborder la deuxième partie du processus : ajouter l’emplacement de la description de police à votre projet Animate.

Ajout de polices Web à votre composition

Une fois que vous avez choisi une police Web Google (ou d’une autre marque) et copié le code qui l’identifie, il est facile de l’ajouter à votre projet dans Animate. Voici la procédure :

  1. Dans le panneau Bibliothèque, sur la barre qui indique Polices, cliquez sur le bouton +, comme illustré à la Figure 4.

    La boîte de dialogue Ajout de polices Web s’affiche.

  2. Dans la zone de texte inférieure contenant le code intégré, collez le code qui identifie l’emplacement de votre police.

    Ce code est fourni par l’organisme qui héberge la police Web. Si vous avez suivi les étapes précédentes, le code est stocké dans le Presse-papiers.

  3. Dans le champ Liste des polices de secours supérieur, entrez le nom de la police Web ainsi que les polices à utiliser si la police Web n’est pas disponible. Si l’ordinateur client n’est pas connecté à Internet, la police Web ne sera pas disponible.

  4. Cliquez sur le bouton Ajouter une police. La police apparaît maintenant dans le menu déroulant Nom de la police lorsque vous utilisez du texte.

Modification d’autres propriétés de texte

Comme pour tout autre élément dans Animate, vous n’envisagez probablement pas que votre texte reste statique en permanence. Heureusement pour vous, en tant que concepteur, vous n’avez pas besoin d’apprendre à utiliser de nouveaux outils pour faire danser votre texte autour de l’écran. Les propriétés de position X/Y déterminent l’emplacement de votre texte alors que les propriétés de taille L/H définissent les dimensions de la zone de texte. Gardez à l’esprit que les propriétés de taille modifient la taille de la zone de texte, mais pas celle des lettres. Pour modifier la taille des lettres, vous pouvez utiliser les propriétés font-size ou les propriétés Echelle. Il peut arriver que vous souhaitiez que la taille de votre texte change selon celle de la fenêtre du navigateur. Si tel est le cas, utilisez % (pourcentage) pour les unités des propriétés du texte. Comme pour les dessins et photos, vous pouvez créer des images-clés de propriété dans le scénario afin de modifier les propriétés de texte au fil du temps.

Vous souvenez-vous de ces outils de pliage, de brochage et de massicotage ? Vous pouvez aussi utiliser les propriétés Transformation sur le texte. Faites pivoter ou inclinez des blocs de texte pour obtenir des effets spéciaux que vous pouvez ajouter ou retirer de la page Web. Utilisez les propriétés Echelle pour agrandir ou réduire la zone de texte et le texte à l’intérieur de celle-ci. Le fonctionnement de la propriété Echelle sur un texte est semblable à celui sur une image JPEG : entrez un pourcentage et tout se développe ou se rétrécit. N’oubliez pas que le texte devient un peu flou lors de son agrandissement à l’aide de la propriété Echelle.

Détourage de texte autour des bords

Comme avec d’autres éléments graphiques sur la scène, vous pouvez utiliser les propriétés Clip pour masquer les bords d’une zone de texte. Cela est un peu équivalent à rogner les bords d’une photo. Supposons que vous souhaitiez animer une zone de texte afin que seule une tête d’épingle soit visible dans un premier temps, puis que celle-ci se développe pour afficher un bloc de texte entier. Sélectionnez votre texte, puis accédez au bas du panneau Propriétés. Cliquez sur le bouton en forme de triangle pour développer le sous-panneau Clip. Dans le coin supérieur droit du sous-panneau, cliquez sur le bouton pour activer le rognage. Edge Animate propose quatre commandes qui représentent les bords haut, bas, gauche et droit de l’élément (Figure 7). Entrez des valeurs en pixels (px).

A mesure que vous effectuez des changements, vous voyez l’effet obtenu sur votre zone de texte. Vous souhaitez supprimer des propriétés clip après les avoir appliquées ? Il suffit de cliquer avec le bouton droit (Ctrl-clic) sur l’élément découpé et de choisir Supprimer le clip dans le menu contextuel.

Organisation de la chute d'un titre

Puisque dans la plupart des cas, le texte vise à communiquer un message, il est contreproductif de soumettre votre public à une modification et un déplacement constants du texte. Ce qui ne signifie pas que vous ne pouvez pas vous faire un peu plaisir ! Par exemple, le titre peut se dérouler sur votre page Web ou rebondir en place au premier chargement de la page. Dans ce projet, vous créez une bannière en haut de la scène. Lorsque la page Web se charge, trois mots — « ON the EDGE » — tombent en place. Dans notre cas, vous allez animer l’expression « ON the EDGE ». Pour ce faire, vous allez répartir les mots en trois zones de texte distinctes afin de pouvoir déplacer chaque mot indépendamment. Dans d’autres cas, vous pourrez souhaiter animer toutes les lettres individuelles dans un mot ou une expression. La partie la plus difficile de la manœuvre consiste à aligner correctement la lettre ou les mots une fois qu’ils sont en place. Vous souhaitez que l’interlettrage ait un aspect naturel et que le texte repose uniformément sur une ligne horizontale. Il peut fréquemment arriver que, lorsque vous animez ainsi des mots ou des lettres, il s’avère utile de créer un modèle de positionnement, et c’est exactement ce que vous faites dans ce projet. Au moment de la conception, le modèle de positionnement (Figure 8) est visible afin de vous aider à aligner les mots et les lettres qui se déplacent. Une fois la construction de l’animation terminée, vous pouvez retirer le modèle.

Pour créer un titre qui chute, procédez comme suit :

  1. Créez et enregistrez un nouveau document, d’une taille de 550x400, avec un arrière-plan de couleur blanche. Comme d’habitude, créez un dossier pour les fichiers JavaScript et HTML de votre projet.

  2. A l’aide de l’outil Rectangle (M), créez un rectangle de 550 px x 100 px et placez-le à la position X=0, Y=0. Définissez la couleur d’arrière-plan sur R=200, G=210, B=250 et A=100 %. Définissez la couleur de bordure sur Aucune. Donnez au rectangle l’ID BannerBG. Le moyen le plus rapide de créer un rectangle avec précision consiste à dessiner rapidement un cadre de n’importe quelle forme, puis d’entrer les valeurs dans le panneau Propriétés. Veillez à cliquer sur le lien en regard des propriétés de taille L/H afin de pouvoir entrer des valeurs non proportionnelles.

  3. Dans le panneau Eléments, cliquez sur le bouton Verrouiller l’élément à côté de BannerBG. Un cadenas apparaît en regard de BannerBG. Désormais, vous ne pouvez plus sélectionner ni déplacer accidentellement le cadre bleu sur la scène.

  4. Sélectionnez l’outil de texte et dessinez une zone de texte. Entrez ensuite « ON the EDGE ». Définissez la police sur Arial Black, la taille sur 72 px et l’alignement sur Centré. Ce texte servira de modèle de positionnement pour le texte animé.

  5. Dans le panneau Propriétés, nommez la zone de texte « OnEdgeTemplate ». Comme avec votre dessin, vous souhaitez pouvoir identifier différents blocs de texte dans le scénario et le panneau Eléments. A ce stade, la Figure 9 reflète les propriétés du texte.

  6. Définissez la taille et l’emplacement de la zone de texte afin de correspondre au rectangle de couleur, avec une taille de 550 px x 100 px et l’emplacement sur X=0, Y=0. Une fois que vous avez terminé, la partie supérieure de la scène Animate doit avoir l’aspect de la Figure 10. Si pour une raison quelconque, le texte se trouve derrière le cadre bleu, vous pouvez modifier l’ordre d’affichage dans le panneau Eléments. Il suffit de faire glisser la zone de texte OnEdgeTemplate afin de la placer au-dessus de BannerBG.

  7. Sélectionnez la zone de texte OnEdgeTemplate, puis appuyez sur les touches Ctrl+D (c-D). Cette action duplique le texte, bien que cela ne soit pas immédiatement visible car le texte dupliqué est placé juste au-dessus du texte précédent. Toutefois, vous pouvez voir la zone de texte OnEdgeTemplateCopy dans le panneau Eléments.

  8. Déplacez la zone de texte OnEdgeTemplateCopy jusqu’au milieu de la scène. Dans les étapes suivantes, vous utiliserez cet élément pour créer des zones de texte individuelles avec des mots distincts : « ON », « the » et « EDGE ». Au préalable, vous pouvez finaliser la configuration du modèle de positionnement.

  9. Sélectionnez la zone de texte OnEdgeTemplate d’origine, puis définissez la couleur du texte sur rouge (#ff0000). Comme nous vous l’avons expliqué, ce texte est utilisé pour un modèle de positionnement. Ultérieurement, grâce à la couleur rouge vif, il sera plus facile de voir si le texte est correctement positionné.

  10. Dans le panneau Eléments, cliquez sur le bouton Verrouiller l’élément à côté de la zone de texte OnEdgeTemplate. Ceci verrouille votre modèle de positionnement pour vous éviter de le sélectionner ou de le déplacer accidentellement.

  11. Sélectionnez la zone de texte OnEdgeTemplateCopy, puis appuyez deux fois sur les touches Ctrl+D (c-D). Cela crée deux copies supplémentaires du texte de bannière entier.

  12. Double-cliquez sur la première zone de texte OnEdgeTemplateCopy. Dans la zone d’édition de texte, supprimez tout à l’exception du mot « ON ». Puis, dans le panneau Propriétés, renommez le texte ON. Il est préférable d’éliminer les espaces supplémentaires lorsque vous animez des lettres ou des mots isolés et de réduire la largeur de la zone de texte pour l’adapter au texte modifié.

  13. Répétez l’étape 12 pour créer des éléments de texte pour les mots « the » et « EDGE ». Vous disposez maintenant de trois mots correctement étiquetés que vous pouvez identifier et animer indépendamment. Vous pouvez redimensionner la largeur des zones de texte pour les adapter aux mots, comme illustré à la Figure 11.

  14. Faites glisser le mot « ON » vers le haut afin qu’il soit au-dessus et légèrement à gauche de la scène. Déplacez le mot « EDGE » afin qu’il soit au-dessus et légèrement à droite de la scène. Placez le mot « the » directement vers le haut de sorte qu’il soit au-dessus de la scène. Ce sont les positions de départ de chacun des mots. Ils doivent être complètement hors de la scène.

  15. Sélectionnez « ON » et modifiez la propriété Rotation sur -30. Sélectionnez « EDGE » et définissez la rotation sur 30 degrés. Ces deux mots sembleront tomber suivant un angle à partir de leurs côtés respectifs.

  16. Sélectionnez les trois mots et cliquez sur les boutons Emplacement et Ajouter l’image-clé de la rotation. Les positions de départ de chacun des mots sont dûment enregistrées dans des images-clés.

  17. Déplacez la tête de lecture à la marque de demi-seconde : 0:00.500. L’animation entière durera une seconde, ce qui représente un temps considérable pour une simple animation comme celle-ci. Vous ne voulez pas ennuyer votre public. Chaque mot disposera d’une demi-seconde pour réaliser son mouvement. Chaque mot démarrera à un moment différent.

  18. Sélectionnez « ON », définissez la propriété Rotation sur 0, puis déplacez le mot « ON » au-dessus du même mot dans le modèle de positionnement. Si vous souhaitez examiner le mouvement, déplacez la tête de lecture vers l’avant et vers l’arrière. Le cas échéant, vous pouvez réajuster le point de début ou de fin. Il suffit de déplacer la tête de lecture à la position souhaitée et d’ajuster l’emplacement du mot.

  19. Déplacez la tête de lecture à 0:00.250. Sélectionnez ensuite le mot « the » et cliquez sur le bouton Ajouter une image-clé pour l’emplacement. Le but ici est de démarrer le mouvement du mot « the » avant que le mot « ON » n’ait terminé le sien. Toutefois, vous souhaitez que le mot « the » reste immobile pendant le premier quart de seconde. Pour cela, vous devez créer deux images-clés de position avec des valeurs identiques à 0:00.000 et 0:00.250.

  20. Déplacez la tête de lecture à 0:00.750, puis déplacez le mot « the » sur le même mot dans le modèle de positionnement. Utilisez le curseur Zoom sur le scénario pour obtenir une meilleure vue du scénario. Les unités de mesure dans la partie supérieure du scénario changent en fonction du niveau de zoom. (Figure 11)

    Aucune rotation n’étant utilisée pour le mot « the », ce dernier semblera tomber directement.

  21. Déplacez la tête de lecture à 0:00.500. Sélectionnez le mot « EDGE » et cliquez sur les boutons Emplacement et Ajouter l’image-clé de la rotation.

    Ceci maintient le mot « EDGE » en place pendant la première demi-seconde de l’animation.

  22. Déplacez la tête de lecture à 0:01, puis déplacez le mot « EDGE » sur le modèle de positionnement.

    A la marque 1 seconde sur le scénario, les mots ont terminé leur mouvement, et la première version de l’animation est terminée. Il ne reste plus qu’à retirer le modèle de positionnement.

    Avant de supprimer le modèle de positionnement rouge, vous souhaiterez probablement afficher un aperçu de l’animation. Appuyez sur la touche Origine, puis sur la barre d’espacement pour y jeter un œil. Le cas échéant, vous pouvez continuer à ajuster les points de début et de fin des mots animés. Par exemple, vous pourriez préférer que les mots « ON » et « EDGE » chutent en premier et que le mot « the » soit ajouté en dernier.

Traitement du modèle

Le modèle de positionnement rouge n’est pas censé former un composant permanent de l’animation. C’est pourquoi, si vous êtes satisfait de tous les autres éléments, vous pouvez le supprimer. Tout d’abord, désactivez le bouton Verrouiller l’élément afin de pouvoir sélectionner le modèle. Sélectionnez ensuite le modèle dans le panneau Eléments ou sur la scène, puis appuyez sur la touche Supprimer. Si vous préférez, vous pouvez aussi transformer le modèle en une ombre portée (Figure 13) ou un effet de luminescence à appliquer au texte.

  • Dans le cas d’une ombre portée, définissez le texte sur un ton de gris moyen, puis ajustez l’opacité selon votre goût. Une valeur autour de 30 % fonctionne généralement bien. Vous souhaitez peut-être masquer l’ombre portée jusqu’à ce que les trois mots aient achevé leur déplacement. Si tel est le cas, réglez l’opacité sur zéro jusqu’à ce point dans l’animation, puis augmentez-la de nouveau.
  • Pour obtenir un effet de luminescence, choisissez une couleur jaune ou orange. Utilisez la commande Echelle pour rendre le texte légèrement plus grand que celui qui tombe en place. A nouveau, vous souhaiterez probablement utiliser l’opacité pour contrôler le minutage et l’apparence du texte luminescent. Par exemple, vous pourrez souhaiter que l’effet d’éclat apparaisse, puis disparaisse en fondu, ajoutant une accentuation momentanée sur le titre.

Ajout d’un rebond

Si l’exemple précédent, où le texte tombe en place, est trop calme pour votre page Web, vous pouvez envisager d’ajouter un petit rebond à l’action. Par l’ajout d’un rebond, votre page Web semble adhérer aux lois de la physique. Tel un ballon de basket, votre texte peut commencer par un grand rebond, puis un ou deux rebonds plus petits jusqu’à ce qu’il s’arrête. Vous pouvez créer votre propre rebond en ajoutant des images-clés de position, ou vous pouvez en créer un à l’aide des propriétés d’accélération qui font partie de la transition dans le scénario.

Création manuelle d’un rebond

Ouvrez le fichier et examinez le panneau Eléments : vous voyez la scène avec trois autres éléments. « BOUNCE » est le mot que vous allez animer. « BounceTemplate » (texte en rouge) est le modèle de positionnement. Comme dans l’exemple précédent, il s’agit de la position finale du texte animé. L’élément de sol est un rectangle gris qui est placé au bas de la scène. Vous pouvez le considérer comme le sol sur lequel rebondira le texte.

Un mouvement rebondissant est créé dans le scénario en ajoutant des images-clés avec une alternance d’emplacements en haut et en bas (Figure 14). Avec la tête de lecture toujours à 0:00, sélectionnez l’élément BOUNCE, puis cliquez sur le bouton Ajouter une image-clé pour Y dans le panneau Propriétés. Cela définit le point de départ. L’étape suivante consiste à avancer la tête de lecture à 01:00 et à déplacer l’élément BOUNCE afin qu’il recouvre l’élément BounceTemplate.

Cliquez sur le bouton Ajouter une image-clé pour Y pour ajouter de nouvelles images-clés d’emplacement. Déplacez la tête de lecture à 1,75, puis remontez l’élément BOUNCE près du milieu de la scène. Déplacez la tête de lecture à 2,25, puis ramenez l’élément BOUNCE sur le modèle. Vous pouvez créer quelques rebonds supplémentaires en utilisant une période plus courte pour le mouvement : une demi-seconde, puis un quart de seconde. A chaque rebond vers le haut, réduisez la distance.

Lorsque vous êtes fatigué de ces rebonds répétitifs de haut en bas, vous pouvez toujours ajouter une petite rotation au mouvement, donnant l’impression que le mot rebondit vers l’avant et l’arrière dans les coins inférieurs. Si vous réduisez la propriété d’échelle verticale lorsque le texte touche le sol, vous pouvez créer une action de dessin animé, comme si le texte était compressé lors de l’impact au sol.

Utilisation de l’effet de rebond prédéfini d’Animate

Tout d’abord, revenons un peu sur les transitions et le concept d’accélération. Lorsque vous animez un élément sur la scène, par la modification de propriétés et la création de propriétés d’image-clés dans le scénario, vous créez des transitions. Ces transitions sont indiquées visuellement sous forme de barres dans le scénario. Comme les éléments sur la scène, les transitions possèdent également des propriétés. Une des propriétés est appelée accélération. Dans la réalité, lorsque des objets se déplacent, ils accélèrent et ralentissent. Vous ne voyez jamais une voiture commencer à se déplacer à pleine vitesse ou s’arrêter instantanément. Les propriétés d’accélération vous aident à créer des mouvements plus réalistes en contrôlant automatiquement la transition d’un élément. Il se trouve que l’une des options d’accélération vous permet de créer un mouvement rebondissant.

La procédure suivante permet d’explorer des propriétés de transition :

  1. Placez la tête de lecture à 0:01, puis déplacez l’élément BOUNCE vers le bas afin qu’il recouvre l’élément BounceTemplate. Animate crée une transition dans le scénario.

  2. Dans le scénario, cliquez sur la ligne de la transition en regard de l’élément BOUNCE. La transition dans le scénario est mise en surbrillance.

  3. En haut du scénario, cliquez sur le bouton Accélération. Le panneau Accélération s’affiche au-dessus du scénario. Initialement, l’info-bulle de ce bouton indique Accélération : Linéaire, parce qu’il s’agit de la méthode d’accélération actuelle. Avec une accélération linéaire, la transition est appliquée à un rythme régulier du début jusqu’à la fin.

  4. Sur la gauche du panneau Accélération, cliquez sur Décélération progressive. Ensuite, sur la droite, cliquez sur Rebond, comme illustré à la Figure 15. Lorsque vous cliquez sur Décélération progressive, le panneau affiche un certain nombre de méthodes de décélération. L’illustration vous donne une représentation visuelle de la méthode d’accélération.

  5. Cliquez en dehors du panneau Accélération. Le panneau se ferme et votre méthode d’accélération est appliquée à la transition sélectionnée.

  6. Appuyez sur la touche Origine, puis sur la barre d’espacement.

    La lecture de l’animation permet de visualiser un bel effet de rebond à la fin du mouvement. Si vous aviez appliqué EaseInBounce, le mouvement de rebondissement aurait eu lieu au début de la transition.

    Les propriétés d’accélération des transitions peuvent représenter un véritable gain de temps. Animate comprend un certain nombre de transitions différentes, mais les noms sont parfois un peu cryptiques. Le meilleur moyen d’assimiler les différentes caractéristiques d’accélération est de créer un exercice d’animation et d’appliquer différentes accélérations à des transitions et éléments identiques.

Réalisation de votre première animation

  1. Démarrez Animate et sélectionnez FichierNouveau pour créer un nouveau document. Lorsque vous créez un nouveau document, vous commencez par une scène vide. « Scène » est le seul élément répertorié dans les panneaux Eléments et Propriétés. Comme vous le voyez dans le panneau Propriétés, la scène a une dimension, une couleur et d’autres propriétés. Vous en apprendrez davantage sur chacune de ces propriétés plus tard.

  2. Créez un dossier pour votre projet, puis sélectionnez FichierEnregistrer sous pour enregistrer votre fichier sous un nom tel que Hello_World ou First_Try.

    Vous pouvez créer un dossier en dehors d’Animate à l’aide de l’Explorateur Windows ou du Finder, ou créer un dossier à l’aide de la commande FichierEnregistrer sous. Il est conseillé d’enregistrer immédiatement votre projet Animate sous un nom pratique. De cette façon, vous ne vous retrouverez pas avec une multiplicité de projets « sans titre » dont vous ne vous souvenez pas. En outre, cela permet d’enregistrer votre travail rapidement et fréquemment via les touches Ctrl+S ou Commande-S. Il est préférable d’enregistrer chaque projet Animate dans son propre dossier, dans la mesure où Animate crée plusieurs fichiers et un dossier edge_includes lorsque vous enregistrez un projet pour la première fois.

  3. Dans le panneau Propriétés, cliquez sur le nuancier Couleur d’arrière-plan. Le panneau qui s’affiche permet de choisir une couleur (Figure 16). Si vous préférez une approche strictement visuelle, cliquez sur la barre de spectre sur la gauche pour choisir une teinte de base, puis cliquez dans le carré pour affiner votre sélection. Dans certains cas, vous pouvez avoir une spécification de couleur spécifique au format RGB (Red-Green-Blue - rouge-vert-bleu) ou une valeur hexadécimale.

  4. Lorsque le sélecteur de couleurs s’affiche, choisissez une couleur bleu foncé pour représenter un espace profond. En cas de doute, essayez R=30 G=45 B=90 A=100 pour ce projet. Animate utilise la méthode standard d’Adobe pour le choix des nombres. Lorsqu’un nombre s’affiche en surbrillance, cela signifie que vous pouvez cliquer dessus, puis entrer un nombre, ou cliquer dessus et faire défiler pour afficher une valeur donnée. Faites glisser vers la droite pour augmenter le nombre, ou vers la gauche pour le diminuer.

  5. Toujours dans le panneau de propriétés Scène, modifiez le paramètre Dépassement sur masqué. La propriété Dépassement contrôle la visibilité d’éléments lorsqu’ils sont visualisés dans un navigateur Web. Sur une page Web, la scène peut ne représenter qu’une partie de la totalité de la page. Vous pouvez contrôler la visibilité d’éléments à l’extérieur du rectangle de la scène. Si vous ne souhaitez pas voir les éléments situés hors de la scène, modifiez cette propriété sur masqué.

  6. Choisissez FichierImporter. A l’aide de la fenêtre Importer qui s’affiche, recherchez et sélectionnez une image, comme la planète Terre (Earth), par exemple. Cliquez sur Ouvrir pour importer l’image dans votre projet.

    Une fois un fichier importé dans votre projet Animate, il est répertorié dans le panneau Eléments et apparaît sur la scène. Il est automatiquement sélectionné et ses propriétés sont donc visibles dans la fenêtre Propriétés. L’élément « planet_earth » possède des propriétés de visibilité en haut du panneau. Directement au-dessous figurent des propriétés Position et taille. Au-dessous de celles-ci, vous voyez les propriétés Transformation qui permettent de faire pivoter, d’incliner et de dimensionner des éléments. Toujours au-dessous figure le fichier source — un point utile à garder à l’esprit lorsque vous essayez de vous rappeler « Quel était donc le nom de ce fichier ? ».

  7. Dans le panneau Propriétés, cliquez sur le champ ID tout en haut et changez le titre de l’élément planet_earth en World.

    Lorsqu’Animate importe des éléments graphiques, il les nomme en utilisant le nom du fichier. Dans certains cas, cela peut s’avérer suffisant, mais il arrive fréquemment que vous souhaitiez renommer l’élément dans Animate. Gardez à l’esprit que cela ne change pas le nom de fichier de votre élément graphique. Lorsque vous travaillez dans Animate, l’ID World est utilisé. Comme vous l’apprendrez plus loin dans ce document, les ID ont une fonction importante dans le code HTML. Notez que dans le panneau Eléments , l’élément World s’affiche avec son nouveau nom. World se trouve sur la scène et apparaît donc également dans le scénario.

  8. Dans le scénario, vérifiez que la tête de lecture est à 0:00. Si vous n’avez apporté aucune modification au scénario depuis que vous avez créé ce projet, la tête de lecture est à 0:00, marquant le premier instant (ou première image) de l’animation, comme illustré à la Figure 17. Si vous devez déplacer la tête de lecture, faites glisser la partie inférieure (couleur or) de la tête de lecture. La partie supérieure est appelée l’épingle de verrouillage. Elle doit suivre automatiquement.

    Vous en apprendrez davantage sur les deux parties de la tête de lecture dans les étapes suivantes.

  9. Déplacez l’élément World au-delà du bas de la scène. Ainsi que mentionné à l’étape 5, vous pouvez contrôler si des éléments hors scène sont affichés sur la page Web. Avec le paramètre Dépassement défini sur masqué, lorsque vous êtes dans l’espace de travail Animate, les éléments hors scène apparaissent un peu plus sombres que d’habitude. Lors de la visualisation du projet final dans un navigateur, ces éléments seront masqués.

  10. Dans le scénario, assurez-vous que le bouton Mode image-clé auto est enfoncé. Lorsque le bouton Mode image-clé auto (Figure 17) est activé, des images-clés sont automatiquement créées dans le scénario à mesure que vous apportez des modifications aux propriétés d’élément. Les marqueurs d’image-clé ont la forme de losanges.

  11. Dans le scénario, assurez-vous que le bouton Mode de transition automatique est enfoncé. Lorsque ce bouton est activé, Animate crée des transitions progressives au lieu de changements brusques. Dans ce cas, l’élément World passera en douceur d’une position à l’autre.

  12. Déplacez la tête de lecture à 0:01 dans le scénario. Dans le scénario, 0:01 marque 1 seconde dans l’animation. Une ligne rouge s’étend vers le bas à partir de la tête de lecture, fournissant un marqueur pour l’ensemble des calques de propriété et d’élément.

  13. L’élément World étant toujours sélectionné, dans le panneau Propriétés, accédez au paramètre Position et taille, puis cliquez sur les boutons en forme de losange en regard des propriétés X et Y. Deux images-clés en forme de losange apparaissent dans le scénario, marquant la position des bords gauche et haut du graphique World. Les propriétés X et Y définissent la position des éléments sur la scène. Un clic sur le losange en regard du paramètre Emplacement dans le panneau Propriétés permet d’enregistrer manuellement l’emplacement de l’élément World sur la scène. En conséquence, l’élément World reste à la même position X/Y pendant la première seconde de l’animation.

  14. Cliquez sur le bouton Activer/Désactiver le verrouillage, puis déplacez la partie dorée inférieure de la tête de lecture à 0:03. Pour animer un élément, vous modifiez ses propriétés sur une période de temps spécifique. L’épingle et la tête de lecture permettent de marquer deux points dans le temps, comme illustré à la Figure 18.

  15. Déplacez l’élément World afin que l’élément Earth soit visible sur la scène. Vous pouvez centrer l’image sur la scène, ou choisir toute autre disposition.

  16. Cliquez sur le bouton Activer/Désactiver le verrouillage, puis appuyez sur la touche Origine, suivi de la barre d’espacement. Lorsque vous appuyez sur la touche Origine, la tête de lecture revient à 0:00. Une pression sur la barre d’espacement lit votre animation afin de pouvoir prévisualiser l’action sur la scène.

  17. Ramenez la tête de lecture à 0:00 puis, dans la barre d’outils, cliquez sur la lettre T. L’outil Texte est sélectionné et le curseur prend la forme d’une croix.

  18. Cliquez sur la scène et entrez Hello World. Une fois que vous avez terminé, fermez la fenêtre de texte en appuyant sur la touche Echap ou en cliquant sur le bouton X dans le coin supérieur droit. Les mots « Hello World » apparaissent sur la scène, mais ils ne sont probablement pas positionnés où vous le souhaitez, ni avec une mise en forme adaptée.

  19. Dans le panneau Propriétés, définissez l’ID de la zone de texte sur HelloWorld. Le fait de nommer votre texte simplifie son identification dans le scénario et le panneau Eléments. Dans la mesure où Animate n’autorise pas les espaces dans les noms, vous devez utiliser HelloWorld ou Hello_World.

  20. A l’aide du panneau Propriétés, formatez le texte. Changez la couleur du texte sur blanc ou un bleu très clair. Choisissez Arial Black ou une autre police en gras. Ajustez la taille afin que le texte remplisse presque l’écran (72 px fonctionne bien avec Arial Black). Animate prend note de chaque modification du texte dans le scénario, ajoutant des calques de propriété et créant des images-clés.

  21. Positionnez le texte. Si vous avez des doutes sur l’emplacement, essayez de le centrer horizontalement et environ à un tiers de la trajectoire vers le bas de la scène.

  22. La tête de lecture étant toujours à 0:00, définissez l’opacité sur 0. Le curseur Opacité est en haut du panneau Propriétés. Cela signifie que le texte ne sera pas visible au début de l’animation. Seule la zone de sélection est affichée, mais elle disparaîtra dès que vous cliquerez sur autre chose. Ne vous inquiétez pas, toutefois, vous pouvez sélectionner n’importe quel élément, qu’il soit visible ou non, en cliquant sur son nom dans le panneau Eléments.

  23. Assurez-vous que le bouton Activer/Désactiver le verrouillage est désactivé. Lorsqu’il est désactivé, il n’apparaît pas enfoncé et l’épingle se déplace avec la tête de lecture.

  24. Déplacez la tête de lecture à 0:02. Le texte étant sélectionné, cliquez sur le losange en regard du paramètre Opacité dans le panneau Propriétés. Alors que vous déplacez la tête de lecture, l’élément World se déplace sur la scène. Les réalisateurs et animateurs désignent le déplacement de la tête de lecture sous le nom de « scrubbing », un moyen rapide et facile de revoir un segment de votre animation. Un clic sur le losange Opacité crée une image-clé à la marque 2 secondes lorsque le texte est toujours invisible.

  25. Activez de nouveau le bouton Activer/Désactiver le verrouillage, puis déplacez la tête de lecture à la marque 0:03. L’épingle étant située à 0:02 et la tête de lecture à 0:03, vous êtes prêt à créer une autre transition.

  26. La zone de texte HelloWorld étant sélectionnée, définissez son opacité sur 100. Animate crée une transition afin que le texte passe progressivement d’une opacité de 0 à 100 pour cent entre 0:02 et 0:03 dans votre animation.

  27. Déplacez l’épingle à la marque 0:03, puis placez la tête de lecture à 0:04. Restaurez l’opacité sur 0 %. Le texte disparaît à nouveau.

  28. Appuyez sur les touches CTRL+S (Commande-S) pour enregistrer votre travail.

    Comme expliqué précédemment, Animate enregistre votre animation sous forme d’un ensemble de fichiers JavaScript et HTML. Le fichier HTML principal utilise le nom que vous avez fourni à l’étape 2, lorsque vous avez enregistré votre projet au départ. Ainsi, par exemple, vous pouvez voir le fichier Hello_World.html dans le dossier du projet. Lorsque vous avez importé l’image planet_earth.png, Animate a créé un dossier images et placé une copie de l’image dans le dossier. Votre animation simple est terminée. Vous pouvez la prévisualiser dans Animate en appuyant sur la touche Origine, puis sur la barre d’espacement. La terre se lève, et votre message devient transparent, puis opaque (Figure 19). L’animation entière dure 4 secondes.

Configuration de la scène

Comme le disait Shakespeare, il y a quelques centaines d’années, « Le monde entier est un théâtre ». Ceci est certainement vrai dans Edge Animate. Comme expliqué dans le chapitre 1, lorsque vous placez un élément sur la scène, votre public le voit. Deux façons permettent de masquer ou de retirer des éléments de la scène. Si les propriétés Dépassement de la scène sont définies sur masqué, vous pouvez leur faire quitter la scène par la droite, la gauche, le haut ou le bas en déplaçant l’élément hors de la scène.

Du moins, ils ne sont pas visibles lorsqu’ils sont visualisés dans un navigateur. La scène avec laquelle vous travaillez dans Edge Animate représente une portion d’une page Web lorsqu’elle est affichée dans un navigateur. La scène possède un nombre limité de propriétés. Les plus évidentes sont ses dimensions et sa couleur d’arrière-plan, mais vous aurez envie de toutes les comprendre. L’aperçu suivant commence en haut du panneau Propriétés :

  • Comme vous pouvez le deviner, l’ID est le nom de votre animation. Lorsque vous enregistrez un projet, Animate crée une page Web, également connue sous le nom de document HTML. La plupart des navigateurs affiche l’ID de la page Web dans un onglet ou la barre de titre de la fenêtre.
  • Au départ, les dimensions de la scène sont affichées sous forme des propriétés L (largeur) et H (hauteur) en pixels. Aucune surprise ici. Vous pouvez entrer la largeur et la hauteur de la scène. Il n’est pas obligatoire que la scène apparaisse dans le coin supérieur gauche d’une page Web. Par exemple, si votre composition Animate est une bannière publicitaire, vous pourriez créer une scène haute et étroite, puis la positionner sur le côté gauche de la page. Utilisez le lien en regard des propriétés L et H pour verrouiller et déverrouiller le ratio d’aspect de votre scène. Lorsque les valeurs de largeur et de hauteur sont associées, la modification d’une dimension change automatiquement l’autre de sorte que la scène reste proportionnée ; si le lien est rompu, vous pouvez modifier les propriétés L et H indépendamment. Vous pouvez changer l’unité des mesures des pixels (px) en un pourcentage (%). Par exemple, si vous définissez la largeur de la scène sur 80 %, sa taille représentera 80 % de celle de la fenêtre du navigateur Web dans lequel elle est affichée. Cette fonctionnalité est parfaite si vous développez une page pour des ordinateurs, tablettes et téléphones. De plus, si la fenêtre du navigateur est redimensionnée, la scène s’adapte automatiquement à la nouvelle taille.
  • La couleur d’arrière-plan est définie à l’aide d’un sélecteur de couleurs. Dans le panneau Propriétés, cliquez sur le nuancier de couleurs : un sélecteur de couleurs apparaît, comme illustré à la Figure 20. Cliquez sur la barre (également appelée le spectre) sur la gauche pour choisir une teinte, puis cliquez dans le carré de plus grande taille pour affiner l’ombre. Le cercle est positionné sur la couleur sélectionnée, et le nuancier dans le coin inférieur droit l’affiche. Les trois nuanciers en haut à droite permettent de choisir rapidement un arrière-plan blanc, noir ou transparent. Si vous travaillez avec une équipe, on pourra vous donner une spécification de couleur en RGB ou en format hexadécimal. En revanche, si vous êtes en charge du projet, vous pouvez spécifier une couleur pour les autres concepteurs.
  • Vous pouvez utiliser les paramètres l min. et l max. pour définir les valeurs minimum et maximum de la largeur de la scène. La taille des pages Web n’est pas fixe. Votre page peut être visualisée sur un smartphone ou un téléviseur grand écran. En plus de cela, votre public peut redimensionner la fenêtre du navigateur. Vous pouvez obtenir un certain contrôle sur l’apparence de votre projet en définissant des valeurs minimum et maximum de largeur. Vous pouvez utiliser les pixels pour définir une valeur absolue ou bien un pourcentage pour des conceptions réactives. Au départ, le paramètre l max. est défini sur la valeur Aucune. Pour l’activer, cliquez sur l’étiquette et désactivez l’option Aucune. A ce stade, la valeur apparaît dans le panneau et vous pouvez apporter des ajustements.
  • Le menu Dépassement contrôle la façon dont les éléments apparaissent lorsqu’ils sont hors de la scène. Il arrivera souvent que vous souhaitiez que ce menu soit masqué, rendant ainsi invisibles les éléments en dehors du rectangle de la scène. L’option hidden (masquage) fonctionne bien lorsque vous voulez que des éléments entrent sur la scène et la quittent. Si vous faites en sorte que le menu soit visible, les éléments qui se déplacent au-delà de la limite de la scène restent visibles tant qu’il y a de la place sur la page Web. L’option scroll (défilement) place des barres de défilement à droite et au bas de la scène, permettant ainsi de visualiser des éléments qui se déplacent en dehors des dimensions spécifiées de la scène. L’option auto ajoute automatiquement des barres de défilement si un contenu existe au-delà des limites de la scène.
  • La case à cocher Lecture auto permet de spécifier à votre animation de s’exécuter automatiquement lors du chargement de sa page Web dans un navigateur. Si la case est désactivée, vous devez utiliser un déclencheur JavaScript pour exécuter l’animation.
  • L’ID de composition est utilisé pour identifier cette scène spécifique et le scénario qui l’accompagne. Cela devient important lorsqu’une page Web unique comporte plusieurs compositions Animate. Vous en apprendrez davantage à ce sujet dans les chapitres consacrés à JavaScript.
  • Les propriétés Affiche et Scène de niveau inférieur créent des éléments alternatifs destinés aux navigateurs Web qui ne sont pas à proprement parler compatibles avec le code HTML5.
  • Le Preloader est responsable du chargement de toutes les ressources nécessaires à l’affichage de votre composition sur une page Web. Ces ressources comprennent des éléments graphiques et des bibliothèques JavaScript.

Création artistique dans Animate

La section suivante décrit en détail les propriétés du rectangle. Toutefois, beaucoup de ces propriétés sont utilisées par d’autres objets, tels que des blocs de texte et des images, que vous importez dans Animate. Ainsi, en apprenant tout ce qui concerne la mise à l’échelle, la rotation et l’inclinaison de rectangles, n’oubliez pas que vous pouvez également faire pivoter, incliner et redimensionner des photos et du texte.

Rectangles : construction d’un cadre de base

L’outil Rectangle (M) permet d’ajouter des blocs de couleur à la scène. Ces blocs sont parfaits si vous souhaitez différencier des parties de la page Web. Par exemple, vous voudrez peut-être créer une barre latérale. Ajoutez un rectangle, puis placez un texte ou des graphiques sur le rectangle, en le faisant ressortir du reste de la page. Vous connaissez le refrain de base pour la création d’un rectangle ? Cliquez sur l’outil Rectangle sur la palette Outils, puis cliquez et dessinez sa forme. Pour créer un carré, maintenez la touche Maj enfoncée tout en déplaçant le curseur de la souris. Le nouvel élément apparaît sur la scène et il est automatiquement sélectionné ; huit carrés blancs autour de la bordure symbolisent des poignées (Figure 21). Après avoir dessiné le rectangle, vous pouvez continuer à modifier sa taille et sa forme en déplaçant les poignées. Les rectangles sont décrits par les propriétés de base suivantes :

  • ID. Dès que vous dessinez un rectangle sur la scène, il est répertorié dans le panneau Eléments. Lorsque le rectangle est sélectionné, ses propriétés s’affichent dans le panneau Propriétés. Comme avec tous vos éléments Animate, vous souhaiterez probablement donner à votre rectangle un ID significatif, tel que BarreLateraleGauche ou En_Tete. Dans le cas contraire, vous devrez examiner divers éléments comme Rectangle1, Rectangle2 et Rectangle3 dans le but d’essayer de retrouver celui souhaité. Pour renommer votre rectangle, sélectionnez-le, puis modifiez l’ID en haut du panneau Propriétés. Vous pouvez également double-cliquer sur le nom dans le panneau Eléments.
  • Balise. Examinez l’élément Rectangle dans le panneau Eléments et observez la balise <div> après le nom. Votre rectangle reçoit automatiquement une balise <div> HTML. Animate utilise ces balises pour identifier, positionner et transformer des éléments. Comme dans le cas d’autres éléments, Edge Animate permet de choisir différentes balises. Par exemple, lorsque vous ajoutez une photo à votre animation, il existe de bonnes raisons d’utiliser une balise <img> au lieu de <div>.
  • Position. Sous le nom dans le panneau Propriétés figurent les propriétés Position et Taille. Le coin supérieur gauche de la scène est référencé en tant que X=0, Y=0. Un déplacement de gauche à droite augmente la valeur X. De même, un mouvement de haut en bas augmente la valeur Y. Au départ, la position de votre rectangle est référencée par le coin supérieur gauche. Ce point de référence peut être modifié à l’aide de l’outil « Par rapport à ». Il a l’aspect d’un cadre doté d’un carré à chaque coin. Supposons que vous devez positionner un élément à une certaine distance de l’angle inférieur droit de la scène : vous pouvez utiliser le coin inférieur droit de votre élément comme point de référence. Dans ce cas, cliquez simplement sur le carré inférieur droit dans le cadre « Par rapport à ».
  • Taille. En regard des propriétés Emplacement figurent les propriétés Taille : L (largeur) et H (hauteur). Ces propriétés changent automatiquement lorsque vous déplacez les poignées d’un rectangle. Vous pouvez également entrer un nombre spécifique. Initialement dans le cas de rectangles, les propriétés de taille utilisent des pixels comme unité de mesure. Vous pouvez toutefois passer des pixels à un pourcentage. Ainsi, un rectangle d’une largeur de 20 % occuperait 20 pour cent de la largeur de la scène. Utilisez le lien en regard des propriétés L et H pour verrouiller et déverrouiller le ratio d’aspect de votre rectangle. Lorsque le lien de l'échelle est intact, la modification d’une dimension change automatiquement l’autre de sorte que le rectangle reste proportionné. Lorsque le lien est rompu, vous pouvez modifier les propriétés L et H indépendamment.
  • Afficher. Certains éléments sont toujours sur la scène, tandis que d’autres peuvent aller et venir. Le menu Afficher vous donne un moyen aisé de masquer un élément jusqu’à ce qu’il soit requis. Vos trois choix comprennent : Toujours activé, Activé et Désactivé.
  • Débordement. La commande de débordement de votre rectangle fonctionne comme celle de votre scène, sauf qu’elle s’applique explicitement au rectangle.
  • Opacité. Utilisez le curseur près du haut du panneau Propriétés lorsque vous souhaitez contrôler l’opacité de l’ensemble du rectangle. Pour ajuster indépendamment l’opacité de la bordure ou de l’arrière-plan, cliquez sur son nuancier de couleurs (voir la rubrique Couleur) et changez le A (propriété alpha).
  • Couleur. Un rectangle comporte deux parties principales : couleur de bordure et couleur d’arrière-plan. La couleur de bordure marque le bord extérieur du rectangle, alors que celle d’arrière-plan est la couleur à l’intérieur du cadre. (D’autres programmes appellent parfois ces propriétés « trait » et « remplissage ».) Vous pouvez attribuer des couleurs distinctes à la bordure et à l’arrière-plan, comme vous pouvez les rendre transparents en définissant le canal Alpha sur zéro. Un trait possède deux propriétés supplémentaires. Vous pouvez définir la taille en pixels (px) et vous pouvez choisir entre un trait plein, un trait en tirets, un trait en pointillés ou aucun (aucun trait du tout). La barre d’outils en haut de l’espace de travail propose un autre moyen de modifier rapidement la couleur d’arrière-plan et celle de bordure d’un élément sélectionné. Il fonctionne exactement comme le sélecteur de couleurs dans le panneau Propriétés.

Alignement, distribution et organisation des éléments

Tout doit être à sa place : voilà qui est certainement vrai lorsqu’on parle d’animation. Avec plusieurs éléments sur la scène, la relation de l’un à l’autre est essentielle. Lors de la création de pages imprimées ou de pages Web, les concepteurs ont souvent une grille spécifique à l’esprit. Ils savent qu’il est préférable d’aligner les graphiques ou zones de texte sur cette grille invisible. Si vous alignez plusieurs éléments, positionnez-les à équidistance pour obtenir le meilleur résultat. L’examen de la disposition de la scène peut prendre un certain temps, mais heureusement, vous n’avez pas à le faire.

Pour tester les outils Réorganiser, Aligner et Répartir disponibles dans Animate, créez trois ou quatre objets simples à l’aide des outils Rectangle et Rectangle arrondi tels que ceux illustrés dans la Figure 22. Lorsque vous déplacez des éléments autour de la scène, vous pouvez remarquer des lignes de couleur magenta partent des bords et des points intermédiaires. Il s’agit de repères commentés destinés à vous aider à aligner rapidement un ou plusieurs objets au cours des déplacements. Dans de nombreux cas, cela peut représenter la seule aide dont vous avez besoin.

Dans le cas de besoins d’alignement plus formels, orientez-vous vers le menu ModifierAligner. Pour qu’un alignement fonctionne, vous devez sélectionner au moins deux éléments. Un de ces éléments peut être la scène. Vous pouvez sélectionner les éléments sur la scène ou utiliser le panneau Eléments. Pour utiliser ces commandes, sélectionnez tous les éléments à aligner et choisissez une des options :

  • ModifierAlignerA gauche
  • ModifierAlignerCentre horizontal
  • ModifierAlignerA droite
  • ModifierAlignerEn haut
  • ModifierAlignerCentre vertical
  • ModifierAlignerEn bas Pour définir une distance égale entre trois éléments ou plus sur la scène, utilisez les commandes ModifierRépartir. Vous pouvez choisir quelle partie de vos éléments utilise la commande Répartir pour le processus et spécifier si l’action a lieu le long de l’axe horizontal ou vertical. Les commandes spécifiques sont :
  • ModifierRépartirA gauche
  • ModifierRépartirCentre horizontal ModifierRépartirA droite
  • ModifierRépartirEn haut
  • ModifierRépartirCentre vertical
  • ModifierRépartirEn bas

Règles et repères manuels

La scène comprend des règles qui peuvent vous aider à placer des éléments avec précision. Vous pouvez afficher et masquer les règles à l’aide du menu Affichage (AffichageRègles) ou avec la touche de raccourci : Ctrl+R (Commande-R). Les règles s’étendent au-delà des bords de la scène, mais des marqueurs permettent d’indiquer la taille actuelle de la scène. Pour obtenir de l’aide sur les tâches d’alignement, créez des repères en cliquant sur la règle horizontale ou verticale et en la déplaçant vers la scène. Votre repère suit et reste en place lorsque vous relâchez le bouton de la souris. Si le résultat n’est pas parfait, vous pouvez déplacer le repère vers un nouvel emplacement. Lorsqu’un repère n’est plus requis, vous pouvez le supprimer en le ramenant vers la règle. Pour éviter de sélectionner et de déplacer un repère par inadvertance, utilisez la commande AffichageVerrouiller les repères.

Cela verrouille les repères en place jusqu’à ce que vous utilisiez la commande AffichageDéverrouiller les repères pour les libérer de nouveau. Pour bénéficier d’une aide rapide concernant les tâches d’alignement, activez la commande Accrocher aux repères (AffichageAccrocher aux repères).

Vous pouvez déplacer plusieurs repères sur la scène pour diverses tâches d’alignement et vous pouvez afficher et masquer tous les repères simultanément à l’aide de la commande AffichageRepères (Ctrl+ ; ou Commande-;).

Organisation d’éléments : Ordre Z

Outre les positions horizontale et verticale, une autre méthode vous permet d’organiser les objets sur votre scène. Lorsque vous créez des éléments, vous pouvez remarquer que de nouveaux éléments semblent être situés devant les anciens, et qu’en déplaçant un nouvel élément à la même position X/Y sur la scène, il masque un élément plus ancien. Si vous avez l’habitude d’utiliser Photoshop, vous pouvez envisager ce positionnement en tant que « calques ». En jargon geek, il est souvent désigné comme le Z-layer ou le Z-order, parce que cette troisième dimension est connue comme l’axe Z.

Vous pouvez examiner le Z-order des éléments sur la scène en regardant simplement le panneau Eléments. Les éléments situés en haut de la liste sont les plus proches de l’avant. Si vous souhaitez modifier l’ordre, il suffit de déplacer un élément vers un nouvel emplacement dans le panneau. Animate propose également des commandes de menu et des touches de raccourci pour réorganiser les éléments :

  • ModifierRéorganiserPlacer au premier plan (Ctrl+Maj+] ou Maj-Commande-])
  • ModifierRéorganiserDéplacer vers l’avant (Ctrl+] ou Commande -])
  • ModifierRéorganiserDéplacer vers l’arrière (Ctrl+[ ou Commande -[)
  • ModifierRéorganiserMettre en arrière-plan (Ctrl+Maj+[ ou Maj-Commande -[)

Animation rectangulaire

Retroussez vos manches. Assez de théorie, il est temps de créer un peu d’animation. Dans cet exercice, vous créez quatre rectangles. Vous leur donnez des noms, leur appliquez une couleur et les inclinez.

Vous les positionnez ensuite sur la scène et les faites se déplacer, modifiez leur forme, et leur appliquez un effet de dissolution. C’est le genre d’effet qui pourrait faire partie d’une bannière publicitaire ou l’introduction à une animation plus complexe.

Cet exercice est divisé en deux parties. Dans la première série d’étapes, vous créez et placez les barres de couleur :

  1. Ouvrez et enregistrez un nouveau projet Animate nommé Color_Bars. N’oubliez pas de créer un nouveau dossier pour votre projet.

  2. Définissez la couleur de la scène sur blanc et les dimensions sur L=550 px et H=400 px. Animate mémorise les derniers réglages de scène que vous avez utilisés. Ainsi, si vous suivez des exercices précédents ou expérimentez les vôtres, vous devrez peut-être effectuer ces modifications.

  3. Dans le scénario (Figure 23), assurez-vous que les boutons Mode image-clé auto et Mode de transition automatique sont activés. Si vous déplacez votre curseur sur les boutons, des info-bulles affichent leurs noms. Par exemple, vous voyez en haut du scénario : Mode image-clé auto, Mode de transition automatique, Désactiver le verrouillage et Accélération.

  4. Dessinez un rectangle et, via la commande PropriétésID, entrez Red (rouge). Le champ ID s’affiche en haut du panneau Propriétés lorsque le rectangle est sélectionné.

  5. Dans le panneau Propriétés, cliquez sur la couleur d’arrière-plan et affectez-lui un rouge pur, puis définissez le paramètre sur Aucun. Une fois terminé, la valeur hexadécimale de la couleur doit être #ff0000.

  6. Définissez la taille du rectangle sur L=550 px et H=100 px. Le moyen le plus rapide d’y parvenir est d’entrer les dimensions dans le panneau Propriétés, mais si vous êtes un maître de la souris, vous pouvez déplacer les poignées du rectangle. Vous pouvez avoir à cliquer sur le bouton « lien » en regard de L et H pour modifier la largeur et la hauteur indépendamment.

  7. Définissez l’inclinaison (x) sur 50 degrés. L’inclinaison horizontale est le paramètre du haut. Un nombre positif incline le bord supérieur vers la gauche et le bord inférieur vers la droite.

  8. Positionnez votre rectangle asymétrique rouge dans le coin supérieur gauche de la scène de sorte que seule son extrémité pointue soit visible. Les propriétés de l’emplacement doivent être X=-550 px, Y=0 px. Idéalement, seul un triangle rouge s’affiche dans le coin supérieur gauche de la scène.

  9. Le rectangle rouge étant sélectionné, appuyez sur Ctrl+D (Commande-D). Modifiez l’ID de RedCopy à Green (vert). Modifiez ensuite la couleur pour la faire correspondre. La valeur hexagonale du vert est #00ff00. Vous pouvez modifier la couleur d’arrière-plan d’un élément sélectionné à l’aide du sous-panneau PropriétésCouleur, ou vous pouvez utiliser les nuanciers de couleurs dans la barre d’outils au-dessus de la scène.

  10. Alignez le haut du rectangle vert sur le bas du rectangle rouge (Y=100 px). Maintenez ensuite la touche Maj enfoncée et déplacez le vert vers la droite jusqu’à ce que seule l’extrémité soit visible (X=430 px).

    Le fait de maintenir la touche Maj enfoncée pendant que vous déplacez un élément permet de le verrouiller sur l’axe horizontal ou vertical. Vous pouvez toujours le déplacer hors de l’axe, mais ce sera moins précis.

  11. Créez deux autres rectangles asymétriques, en les nommant Blue (bleu) et Yellow (jaune), et en leur attribuant les couleurs correspondantes. Positionnez les rectangles sur des côtés opposés de la scène. La valeur du bleu est #0000ff, alors que celle du jaune est #ffff00. Une fois le positionnement des rectangles terminé, la scène doit avoir l’aspect de la Figure 23.

Animation par ajout d’images-clés de propriété

Maintenant que vous avez créé et placé les barres de couleur, il est temps de les faire bouger. Le chapitre 1 a montré comment la position d’éléments sur la scène est contrôlée par des images-clés de propriété dans le scénario. Lorsque le bouton Mode image-clé auto est enfoncé, comme illustré à la Figure 23, de nouvelles images-clés de propriété sont créées à chaque fois que vous définissez ou modifiez une propriété. Vous pouvez également créer des images-clés de propriété manuellement en cliquant sur les boutons en forme de losange dans le panneau Propriétés. Vous souhaitez verrouiller les propriétés Position, Taille et Opacité au début de votre animation en créant des images-clés de propriété. Vous déplacerez ensuite le scénario vers le bas et créerez différentes images-clés de propriété. Le résultat sera la magie de l’animation.

  1. Assurez-vous que la tête de lecture du scénario est définie à 0:00. Sélectionnez le parallélogramme nommé Red puis, dans le panneau Propriétés, cliquez sur les boutons en forme de losange en regard de X, Y, L, H et Opacité.

    Les propriétés X et Y sont situées dans le sous-panneau Position et Taille. Elles contrôlent la position. Les boutons L et H créent des images-clés pour la largeur et la hauteur. Le curseur Opacité est proche du haut du panneau Propriétés. Les boutons en forme de losange ajoutent des images-clés de propriété et des calques de propriété individuelle dans le scénario comme vous pouvez le voir à la Figure 24. Les images-clés de propriété ancrent une valeur de propriété spécifique à un moment précis dans le temps. Dans le scénario doivent figurer des images-clés et des calques pour les propriétés suivantes :

    • Gauche
    • Haut
    • Largeur
    • Hauteur
    • Opacité

    Si vous ne voyez pas tous ces scénarios de propriété et ces images-clés sous l’élément Red, vous devez les créer manuellement en cliquant sur le bouton en forme de losange en regard de la propriété manquante.

  2. Répétez l’étape 1 pour les barres des couleur verte, bleue et jaune afin de créer les images-clés de propriété et calques de propriété pour chacune. Pour accélérer les choses, sélectionnez d’abord les trois barres, puis cliquez sur les boutons d’image-clé.

  3. Assurez-vous que les boutons Mode image-clé auto et Mode de transition automatique sont activés (enfoncés) et que les autres ne le sont pas. Lorsque le mode Image-clé auto est activé, Animate crée automatiquement des images-clés de propriété à mesure que vous modifiez des éléments sur la scène. Il s’agit d’un processus en deux étapes. Déplacez la tête de lecture jusqu’à un point dans le temps, puis modifiez les propriétés de votre élément. Vous pouvez apporter des modifications dans le panneau Propriétés, ou vous pouvez effectuer des changements sur la scène à l’aide des outils Sélection et Transformation.

  4. Dans le scénario, déplacez la tête de lecture à 0:02. Pour cette étape, l’épingle doit être désactivée (non enfoncée).

  5. Déplacez chacun des rectangles sur la scène jusqu’à ce que l’extrémité du rectangle asymétrique soit visible.

    A ce stade, la plupart de la scène est couverte par les barres de couleur, avec des triangles blancs de la scène visibles sur les bords. N’oubliez pas d’appuyer sur la touche Maj pendant le déplacement si vous souhaitez stabiliser la position verticale des barres.

  6. Tous les rectangles étant sélectionnés, dans le panneau Propriétés, cliquez sur le bouton Ajouter une image-clé pour l’opacité. Pour prévisualiser l’animation, déplacez la tête de lecture vers l’avant et vers l’arrière. L’opacité de chaque barre de couleur est définie sur 100 pour cent au point 2 secondes. Un « scrubbing » de la tête de lecture permet de jeter un coup d’œil sur l’action.

  7. Déplacez la tête de lecture au marqueur 0:03. Cette position représente le point 3 secondes dans votre animation.

  8. Sélectionnez chaque rectangle, puis modifiez la hauteur (propriété H) sur 300 px et l’opacité sur 50 %. Il en résulte que les rectangles se développent, s’entremêlant verticalement l’un dans l’autre et, simultanément, commencent à devenir flous. Reportez-vous à la Figure 25. N’oubliez pas, vous devrez peut-être dissocier les propriétés L et H pour les modifier indépendamment.

  9. Déplacez la tête de lecture au marqueur 0:04. Changez ensuite la hauteur de chaque rectangle sur 500 px et l’opacité sur 0 %. Les rectangles continuent à se développer et leur aspect devient de plus en plus flou.

Rectangles arrondis : les apparences sont trompeuses

D’accord. Animate fait un tour de passe-passe lorsqu’il s’agit des outils Rectangle, Rectangle arrondi et Ellipse. Le petit secret est que vous pouvez créer toutes ces formes en utilisant l’outil Rectangle et en peaufinant les propriétés. Les raisons de cette bizarrerie proviennent du fait que ces formes sont définies par le code JavaScript. Vous pouvez vérifier cela en créant une forme à l’aide de chaque outil et examiner ses propriétés. Vous pouvez transformer un rectangle en un rectangle arrondi simplement en ajustant les propriétés AnglesRayon, comme illustré à la Figure 26. De même, vous pouvez éliminer la forme arrondie d’un rectangle arrondi avec les mêmes outils. Jetons donc un œil sur leur fonctionnement.

Dans un nouveau projet Animate, créez un rectangle et gardez-le sélectionné. Choisissez l’outil Transformation (Q) puis, avec la souris, placez le curseur sur le losange d’image-clé dans les propriétés du rectangle arrondi et l’info-bulle explique qu’il va « ajouter une image-clé pour les rayons de bordure ». Les trois boutons en haut du panneau sont étiquetés 1, 4 et 8. Le carré placé au-dessous est composé de boutons, et vous pouvez sélectionner individuellement les quatre angles d’un rectangle. Le nombre en regard des boutons d’angle est initialement défini sur 0. Un rayon d’angle nul signifie que votre rectangle est formé d’angles aux arêtes vives. Cliquez sur le nombre et déplacez-le vers la droite pour arrondir les angles. Dans la mesure où ce champ accepte uniquement des nombres positifs, vous ne pouvez pas aller vers la gauche. Vous pouvez constater qu’avec le mouvement, les losanges noirs aux angles de votre rectangle se déplacent vers le centre. Ces losanges sont des points de contrôle pour les rayons d’angle. Vous pouvez déplacer manuellement les losanges sur tout rectangle pour créer et ajuster des coins arrondis.

Réinitialisez votre rectangle afin qu’il soit carré, puis cliquez sur l’angle supérieur droit dans le panneau Propriétés. Modifiez le paramètre de rayon, et cette fois, vous remarquerez que l’angle supérieur droit reste carré tandis que les autres prennent un style arrondi. Une pression sur un bouton d’angle désactive cet angle des paramètres d’arrondi.

Réinitialisez le rectangle une fois de plus et cliquez sur l’angle supérieur droit afin qu’il ressorte. Cliquez ensuite sur le bouton 4 en haut des propriétés d’angle. Quatre nouveaux cadres de nombre s’affichent en regard de chaque angle. Vous pouvez maintenant définir chaque angle indépendamment avec des valeurs de rayon différentes. Cela vous donne la possibilité de créer des formes irrégulières, même si, techniquement, elles ont toujours quatre angles. Combinez cela avec les propriétés d’inclinaison et de mise à l’échelle, et vous pouvez créer des effets d’amibe particulièrement intéressants. Cliquez sur le bouton 8 : chaque angle a deux numéros de contrôle. Cela vous donne la possibilité de déplacer le point de contrôle hors du centre, créant un angle plus plat d’un côté par rapport à l’autre. Vous pouvez noter que, lorsque vous réglez les paramètres, le point de contrôle du losange noir se déplace également. Vous pouvez toujours ajuster vos angles en utilisant les cadres de nombre ou les points de contrôle dans le rectangle.

Un cercle est un rectangle très arrondi

Vous pouvez expérimenter avec les propriétés AnglesRayon en transformant des rectangles en des formes ovales et circulaires. Par exemple, cette procédure permet de transformer un carré en un cercle :

 

  1. Cliquez sur l’outil Rectangle et, tout en maintenant la touche Maj enfoncée, dessinez un cadre. Le fait de conserver la touche Maj enfoncée contraint le rectangle afin que tous les côtés soient égaux.

  2. Dans les propriétés Angles, cliquez sur le bouton 1. Avec ce paramètre, tous les angles partagent la même valeur de rayon.

  3. Cliquez sur le nombre du rayon de bordure et faites-le défiler jusqu’à ce que le carré se transforme en un cercle, comme illustré à la Figure 27.

    Il est possible de déplacer le nombre afin que les rayons d’angle se chevauchent au centre, mais cela n’est pas nécessaire pour créer un cercle. Vous pouvez modifier et ajuster les propriétés de votre cercle, tout comme vous le feriez pour tout autre objet que vous créez dans Animate. En inclinant votre objet, vous pouvez créer des ellipses. En le mettant à l’échelle, vous créez des formes ovales. Et, bien sûr, vous pouvez créer quelque chose entre un carré et une ellipse avec les paramètres adéquats.

Ajout d’ombres portées à des éléments graphiques

Les ombres portées ont un aspect sympathique et offrent également un moyen de séparer visuellement différents éléments. Appliquez une ombre portée à un élément graphique et vous donnerez l’impression qu’il flotte au-dessus de la scène. Ajoutez une ombre à l’intérieur d’un élément, et vous lui donnerez un aspect plus tridimensionnel. Les ombres sont souvent utilisées avec des boutons destinés à créer une apparence différente en fonction de leurs états : survol, clic et sélectionné. Animate vous donne un moyen facile de créer des ombres portées et de les modifier selon vos besoins et vos goûts.

Pour obtenir une ombre subtile permettant de faire ressortir un élément par rapport à l’arrière-plan, essayez les étapes suivantes :

  1. Dessinez trois éléments sur la scène.

  2. Sélectionnez-en un puis, dans le panneau Propriétés, faites défiler la page vers le bas pour afficher les commandes Ombre portée représentées à la Figure 28.

  3. Cliquez sur le nuancier de couleurs et choisissez le noir.

  4. Cliquez sur le décalage horizontal et entrez 4.

  5. Cliquez sur le décalage vertical et entrez 4.

  6. Cliquez sur le rayon de flou et entrez 14.

  7. Cliquez sur Etendre et entrez 2.

    Si vous souhaitez qu’un des éléments ait un aspect tridimensionnel, vous pouvez utiliser les mêmes paramètres mais cliquer sur le bouton Ombre intérieure. Au lieu d’apparaître à l’extérieur de l’élément, l’ombre est créée au sein de celui-ci. Comme son nom l’indique, la propriété Etendre contrôle la taille de l’ombre, la faisant se répandre dans toutes les directions. Comme avec toute autre propriété, vous pouvez faire en sorte que l’ombre portée évolue avec le temps. Avec un peu de créativité, vous pouvez donner au soleil une impression de changement de position dans le ciel, avec des ombres se déplaçant et changeant de forme. Les ombres forment également un outil important pour le texte : le texte est plus lisible sur un arrière-plan animé lorsqu’il est séparé par une ombre.

Importation de travaux artistiques

Il est assez facile de créer un texte et des formes élémentaires dans Animate, mais lorsqu’il s’agit d’une œuvre complexe, vous vous tournez sans doute vers vos outils de création artistique préférés. Dans le cas de dessins complexes ou au trait, il peut s’agir d'Adobe Illustrator. Pour les photos, vous pouvez utiliser iPhoto, Lightroom ou Photoshop. Adobe Fireworks peut être l’outil compagnon idéal pour Animate parce que ces deux outils ont été conçus pour créer du contenu Web. Peu importe comment vous créez des fichiers JPEG, GIF, PNG ou SVG, vous pouvez les importer dans Animate, puis les animer en changeant leur position sur la scène et leur apparence.

Quel que soit le format de fichier, le processus d’importation d’œuvres artistiques est le même. Utilisez la commande Fichier➝Importer, puis recherchez le fichier à insérer dans votre projet. Le dossier 02-2_Sliding_Show sur le CD contient trois photos au format JPEG. Vous pouvez vous exercer en créant un nouveau projet avec un nouveau dossier nommé 02-2_Sliding_Show et importer chacune des photos. Après avoir choisi FichierImporter, une fenêtre de fichier/dossier standard s’ouvre pour votre PC ou votre Mac. Si vous souhaitez importer les trois fichiers à la fois, il suffit d’appuyer sur la touche Maj et de cliquer pour les sélectionner. Comme d’habitude, Animate importe les fichiers et, pour offrir un gain de temps appréciable, les nomme sur la base des noms de fichiers. Dans ce cas, vous trouverez les trois fichiers squirrel (écureuil), farmhouse (ferme) et bike (vélo) dans votre panneau Eléments. Chaque image est automatiquement placée à la position 0,0 sur la scène. Cependant, vous ne verrez qu’une seule des images, parce qu’elles se recouvrent les unes les autres.

Choix entre GIF, JPG, PNG et SVG

Le monde de l’infographie 2D offre deux systèmes de stockage et d’affichage d’images : images bitmap (techniquement appelées graphiques au format raster) et des graphiques vectoriels.

Les programmes informatiques stockent les images bitmap comme un tas de pixels, identifiés par couleur et position. Le terme Graphiques bitmap ne fait pas uniquement référence aux fichiers portant l’extension Windows Bitmap (.BMP) ; il se réfère à toutes les images stockées au format bitmap, y compris .GIF, .JPG, .TIFF et .PNG.

L’avantage des graphiques bitmap, c’est qu’ils vous permettent de créer des détails ultra réalistes avec des couleurs complexes, des dégradés et des nuances subtiles. En revanche, les images bitmap non compressées prennent généralement une énorme quantité d’espace disque et ne sont pas particulièrement évolutives. Par exemple, supposons que vous possédez une image bitmap d’une voiture et que vous demandez à un programme d’augmenter la taille de 500 pour cent.

Puisque le programme doit créer de nouveaux pixels pour agrandir l’image, il duplique les pixels (points colorés) déjà présents dans l’image. Le résultat n’est pas toujours du plus bel effet. L’image entière est susceptible d’apparaître floue. Les bords incurvés peuvent devenir polyédriques et pixélisés.

Les ordinateurs stockent des images vectorielles comme une pile de formules. Par rapport à des graphiques au format raster, les images vectorielles sont de dimensions relativement modestes et sont évolutives. En d’autres termes, si vous dessinez une petite voiture et que vous décidez de la redimensionner suivant un facteur de 500 pour cent, votre dessin à l’échelle présentera toujours des détails précis et plaisants.

Les forces et les faiblesses de chaque format sont importantes lorsque vous travaillez sur des images. Le format bitmap est préférable pour obtenir des images photo-réalistes avec beaucoup de couleurs et de nuances. Les images vectorielles sont préférables pour les dessins au trait, les graphiques, les diagrammes et les images que vous allez mettre à l’échelle suivant différentes tailles. Animate peut importer quatre types de fichiers graphiques : JPG, GIF, PNG et SVG — cependant, quelques pièges pourraient vous surprendre.

Les fichiers JPG, également connus sous le nom de fichiers JPEG, sont un format bitmap répandu, utilisé sur le Web et par de nombreux appareils photo. Le format a été développé par le Joint Photographic Experts Group, d’où l’acronyme correspondant. Les fichiers JPEG utilisent ce qui est connu comme une compression technique pour créer des fichiers moins volumineux. Les éditeurs d’images qui travaillent habituellement avec des fichiers JPEG permettent de choisir le degré de compression. Si votre image doit seulement être visualisée sur un écran, vous pouvez augmenter la compression. Si elle est destinée à une imprimante photo et que vous souhaitez l’imprimer au format Affiche, vous aurez besoin de tous ces pixels.

Les fichiers GIF ont été développés par CompuServe, un des premiers services en ligne. L’acronyme vient de Graphic Interchange Format (format d’échange graphique). La popularité des fichiers GIF semble s’effacer face aux fichiers JPEG et PNG, mais vous les trouverez toujours sur de nombreux sites. Les fichiers GIF sont des images bitmap stockées avec une technique de compression sans perte, mais utilisent une palette limitée de couleurs. Le résultat, c’est qu’une image comportant de grands pans de couleurs pleines, comme un logo de société ou un graphique à barres, pourrait aboutir à un fichier de très petite taille. En revanche, il n’est pas possible de compresser aussi bien une image photo et l’aspect final peut ne être aussi satisfaisant au format GIF que, disons, au format JPEG en raison du nombre limité de couleurs. Les fichiers GIF proposent quelques astuces utiles. Vous pouvez créer des fichiers GIF animés à l’aide d’une animation image par image simple. Des programmes comme Adobe Fireworks et

Flash simplifient le processus. Les fichiers GIF permettent également de désigner des parties de l’image comme transparentes. C’est idéal si vous placez une forme irrégulière, comme un caractère animé, sur un arrière-plan déjà développé, comme l’intérieur d’une pièce.

Les fichiers PNG ont été développés à une époque où il existait des questions relatives à des brevets concernant le format GIF. Prononcée « ping », cette abréviation signifie Portable Network Graphics. Le format PNG a été conçu pour être utilisé sur le Web (par opposition aux images destinées à l’impression) et pour améliorer des caractéristiques déjà populaires dans les formats GIF. Les fichiers PNG utilisent une technique de compression sans perte, fournissent une plus grande palette de couleurs, et peuvent afficher des séquences animées et inclure un mode de transparence au sein de l’image. Les fichiers PNG sont correctement pris en charge parmi les navigateurs Web modernes, mais il existe encore probablement des navigateurs plus anciens qui ne traitent pas ce format. Le format PNG fonctionne bien avec Animate, en partie parce que tous deux ont été développés avec le Web à l’esprit. Les fichiers SVG sont vectoriels. Le nom signifie Scalable Vector Graphics. Cela signifie qu’au lieu d’enregistrer la carte d’une image pixel par pixel, les fichiers SVG contiennent des formules qui décrivent les lignes, courbes, formes et autres détails d’une image. Tous les navigateurs Web modernes prennent en charge le format SVG, mais cette prise en charge par des navigateurs plus anciens est variable.

Si vous redimensionnez une image SVG lorsque vous travaillez dans Animate, il est vraisemblable qu’elle commence à avoir un aspect pixélisé — cette apparence de marches d’escalier que vous obtenez lors de l’agrandissement de fichiers graphiques. Lors de l’affichage de cette image modifiée dans un navigateur, sa pixellisation est visible. Il est intéressant de noter que si vous ne modifiez pas l’image au sein d’Animate, elle est redimensionnée avec élégance dans une fenêtre de navigateur, lorsqu’elle est agrandie ou réduite.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne