Ajout de texte à votre projet (tutoriel)

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 Fichier➝Ouvrir, 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. L’un des principaux avantages 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 d’un contenu Web 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 :

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 :

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 lorsqu’il est agrandi à l’aide de la propriété Échelle.

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 détourage 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 :

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 moment 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 de luminescence apparaisse, puis disparaisse en fondu, ajoutant ainsi 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 vous fatiguez 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 d’écrasement comme dans un dessin animé pour donner l’impression que le texte se compresse lors de l’impact au sol.

Utilisation de l’effet de rebond préconfiguré 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 de rebond.

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

Réalisation de votre première animation

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. À 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 : création 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 Élé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, cela n’est pas obligatoire.

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 Modifier➝Aligner. 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 :

• Modifier➝Aligner➝À gauche
• Modifier➝Aligner➝Centre horizontal
• Modifier➝Aligner➝À droite
• Modifier➝Aligner➝En haut
• Modifier➝Aligner➝Centre vertical
• Modifier➝Aligner➝En bas Pour définir une distance égale entre trois éléments ou plus sur la scène, utilisez les commandes Modifier➝Ré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 :
• Modifier➝Répartir➝À gauche
• Modifier➝Répartir➝Centre horizontal Modifier➝Répartir➝A droite
• Modifier➝Répartir➝En haut
• Modifier➝Répartir➝Centre vertical
• Modifier➝Répartir➝En 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 (Affichage➝Rè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 Affichage➝Verrouiller les repères.

Cela verrouille les repères en place jusqu’à ce que vous utilisiez la commande Affichage➝Dé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 (Affichage➝Accrocher 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 Affichage➝Repè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 sous le nom de 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 :

• Modifier➝Réorganiser➝Placer au premier plan (Ctrl+Maj+] ou Maj-Commande-])
• Modifier➝Réorganiser➝Déplacer vers l’avant (Ctrl+] ou Commande -])
• Modifier➝Réorganiser➝Déplacer vers l’arrière (Ctrl+[ ou Commande -[)
• Modifier➝Réorganiser➝Mettre 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 être l’introduction d’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 :

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é. Vous aurez pour résultat la magie de l’animation.

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 Angles➝Rayon, 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 Angles➝Rayon en transformant des rectangles en des formes ovales et circulaires. Par exemple, cette procédure permet de transformer un carré en un cercle :

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 :

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 Fichier➝Importer, 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 des ensembles 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 la 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.