Adobe Animate et la gestion des polices SVG
La première version de Flash Professional CC est sortie en 2013, marquant le début d'une évolution pour le logiciel d'animation d'Adobe. Au fil des années, plusieurs sous-versions de Adobe Flash CC ont vu le jour, chacune apportant son lot d'améliorations et de nouvelles fonctionnalités. Par exemple, la version Flash CC 2014.1 offrait un support amélioré pour Flash Player 17 et HTML5. Plus tard, la version Animate CC 2015.1 a vu le logiciel changer de nom pour devenir Adobe Animate CC, tout en introduisant plusieurs petites améliorations notables.
Parmi les nouvelles fonctionnalités introduites, on peut citer les contours de largeur variable, permettant de tracer des contours dont la largeur peut être modifiée en tout point, offrant ainsi une plus grande flexibilité dans la création graphique. La fonction d'annulation au niveau de l'objet, très appréciée par les utilisateurs, a également fait son retour.
Il est important de noter que certaines fonctionnalités présentes dans les versions antérieures ont été supprimées. Les "common libraries" ont été retirées dans Flash CC, et les composants tels que les boutons et les sons ne sont plus intégrés nativement, bien qu'il reste possible de les créer soi-même. Pour la variante HTML5, il n'y a pas de composants pré-programmés, car ceux-ci étaient basés sur ActionScript, un langage de programmation.
Configuration et Installation d'Adobe Creative Cloud
Avant de télécharger Flash ou Animate, il est recommandé de configurer les "Apps" dans l'outil Adobe Creative Cloud. Pour ce faire, accédez au menu "roue" en haut à droite, puis sélectionnez "Préférences" et naviguez vers l'onglet "Creative Cloud", puis "Apps". Ce paramètre s'applique aux applications récemment installées via Creative Cloud.
Une remarque pertinente concerne la gestion des langues : il est étonnant de constater qu'une désinstallation soit parfois nécessaire pour changer la langue d'une application Adobe. On peut s'interroger sur la raison pour laquelle Adobe ne propose pas nativement des applications multilingues.
Comme pour la plupart des produits Adobe, il est possible d'adapter la disposition des outils selon les préférences de l'utilisateur, en utilisant le menu déroulant situé en haut à droite.
Adobe Animate CC et la Conception d'Animations HTML5/Canvas
Flash Creative Cloud (qui deviendra Animate CC) représente une avancée majeure en tant que première version de Flash permettant de concevoir des animations HTML5/Canvas de manière intégrée. L'utilisateur a désormais la liberté de choisir entre plusieurs options de production : HTML5 et JavaScript, ou ActionScript 3 (AS3), ActionScript 2 (AS2) ou Adobe AIR. Cependant, il est à noter que les fonctionnalités sont plus limitées dans le mode HTML5, cette exportation ne prenant en charge que les graphismes et les animations.
Gestion du Texte et de l'Internationalisation dans Animate
Animate offre des outils puissants pour la gestion du texte et la création de contenu multilingue. Le panneau Strings (Chaînes de caractères) permet aux localisateurs de modifier les chaînes de texte dans un emplacement centralisé ou dans des fichiers XML externes. Si vous disposez de polices Unicode installées sur votre système, vous pouvez saisir le texte directement dans un champ de texte.
Pour garantir un affichage correct des textes multilingues, notamment lors de l'utilisation de fichiers externes encodés en Unicode, il est essentiel que vos utilisateurs aient accès à des polices contenant tous les glyphes utilisés. Par défaut, Animate enregistre les noms des polices utilisées dans les fichiers de texte dynamiques ou de saisie. Si le texte d'un fichier SWF contient des glyphes non pris en charge par la police spécifiée, Flash Player tente de trouver une police appropriée sur le système de l'utilisateur.
Encodage Unicode et Fichiers Externes
Lorsque vous chargez des fichiers texte ou XML externes non encodés en Unicode dans une application Flash Player 7, le texte peut ne pas s'afficher correctement. Pour assurer la compatibilité sur toutes les plateformes, il est recommandé d'encoder tous les fichiers texte externes en Unicode et de laisser la propriété `system.useCodepage` définie sur `false` par défaut. Cela permet à Flash Player d'interpréter le texte comme étant en Unicode.
Le texte sur un ordinateur est encodé sous forme de série d'octets. L'Unicode est la norme d'encodage universelle pour le texte, et il existe plusieurs formes, notamment UTF-8, UTF-16 BE (Big Endian) et UTF-16 LE (Little Endian). Flash Player 6 et les versions ultérieures prennent en charge l'encodage de texte Unicode. Les fichiers doivent être encodés en UTF-8.
Lors de la lecture de données textuelles dans Animate, Flash Player examine les deux premiers octets d'un fichier pour détecter une marque d'ordre des octets (BOM), qui identifie le format d'encodage Unicode. En l'absence de BOM, l'encodage est interprété comme UTF-8. Si un BOM est détecté, l'encodage est interprété comme UTF-16 BE ou UTF-16 LE selon l'ordre des octets.
Gestion des Polices et Support SVG
Si vous avez des polices Unicode installées sur votre système, vous pouvez saisir du texte directement dans un champ de texte. Lorsque vous sélectionnez des plages de polices à intégrer dans un fichier FLA, Animate utilise le fichier `UnicodeTable.xml` pour déterminer quels caractères intégrer. Ce fichier contient des plages de caractères nécessaires à diverses langues et réside dans le dossier de configuration utilisateur de votre ordinateur.
Le format SVG (Scalable Vector Graphics) est un format de fichier vectoriel basé sur XML. Bien qu'il ait existé comme format de police web avec les suffixes .svg et .svgz, il était limité et peu supporté. Les formats de polices web actuellement en usage courant sont WOFF et WOFF2. Les formats de bureau CFF/OTF et TTF sont également des formats OpenType.
La structure interne des polices OpenType inclut une table SVG, qui contient des informations basées sur les SVG. Dans des outils comme Glyphs, il est possible d'intégrer des informations SVG dans une police de deux manières :
- À partir de fichiers d'images .svg séparés.
- À partir d'un réglage existant d'une police couleur.
Pour intégrer des graphiques SVG dans une police, vous pouvez les placer dans les glyphes respectifs et exporter la police avec une table SVG. Il est recommandé de sauvegarder votre fichier `.glyphs` et de l'accompagner d'un sous-dossier nommé "Images" pour les fichiers SVG. Le calque master contiendra la version noir et blanc du glyphe de repli (fallback), visible dans les logiciels ne pouvant afficher l'information couleur de la table SVG. Le nouveau calque svg peut alors recevoir votre fichier image .svg. Il est important de noter que le calque svg hérite sa chasse (espacement) du calque master ; l'espacement doit donc être ajusté sur le calque master.
Exportation et Test des Polices OpenType-SVG
Lors de l'exportation d'une police comme fonte web (WOFF et WOFF2), il est essentiel de tester son rendu dans les navigateurs qui supportent les polices OpenType-SVG. Sur Mac, Firefox est le seul navigateur à le faire, tandis que sur Windows, Microsoft Edge offre également ce support. Pour tester, vous pouvez créer un fichier HTML contenant le code HTML et CSS nécessaire, ou utiliser des scripts dédiés.
Soyez conscient que les animations de polices peuvent être exigeantes pour les processeurs et consommer la batterie des appareils nomades.
Intégration d'Informations Couleur dans les Polices SVG
Pour les polices utilisant les formats CPAL/COLR, assurez-vous d'avoir défini le réglage "Color Palettes" dans la section "Paramètres personnalisés" de `Fichier > Informations de police > Masters`, et d'avoir numéroté les calques "Color" dans les glyphes (Color 0, Color 1, etc.). Pour des couleurs variées dans un SVG, considérez un paramètre "Color Palette for SVG".
Dans le cas d'une police "calque" ou "sbix", vous devrez créer une nouvelle instance dans `Fichier > Informations de police > Instances`. Pour le format sbix, vous pouvez ajouter un paramètre personnalisé "SBIX to SVG" avec votre taille iColor préférée comme valeur ; les images sbix des calques iColor seront alors transformées en documents graphiques SVG.
Lors de l'exportation, vous pouvez choisir quelles tables de couleur seront générées et intégrées dans la police OpenType afin de réduire la taille des fichiers de polices web.
Moteurs de Texte dans Animate : Classique vs TLF
"Texte classique" est le terme désignant l'ancien moteur de texte d'Animate, toujours disponible dans CS5 et les versions ultérieures. Il est souvent préférable pour certains types de contenu, notamment sur les périphériques mobiles, où la taille du fichier SWF doit être minimale. Cependant, le moteur de texte TLF (Text Layout Framework) est parfois nécessaire pour un contrôle précis de la mise en forme du texte.
Vous pouvez à tout moment changer le moteur de texte utilisé par un objet de texte. Animate offre de nombreuses options pour travailler avec le texte : orientation horizontale ou verticale, sélection d'attributs tels que police, taille, style, couleur et interligne, vérification orthographique, transformations (rotation, redimensionnement, renversement), liaison de blocs de texte, rendu du texte sélectionnable, application d'effets animés prédéfinis, sélection de polices de remplacement, et utilisation d'une police comme partie intégrante d'une bibliothèque partagée.
Utilisation du Texte HTML et des Objets Texte
Vous pouvez conserver le formatage du texte dans les champs de texte à l'aide de balises et d'attributs HTML. Lorsque vous utilisez du texte HTML dans un champ de texte dynamique ou de saisie, vous pouvez même habiller le texte autour d'une image ou d'un clip. Les champs de texte, tout comme les occurrences de clips, sont des objets ActionScript® avec leurs propres propriétés et méthodes. Pour manipuler un champ de texte via ActionScript, il faut d'abord lui affecter un nom d'occurrence.
ActionScript permet de mettre en forme du texte dynamique ou de saisie et de créer des champs de texte défilant. Il offre également des événements pour les champs de texte dynamique et de saisie, permettant de déclencher des scripts.
Mise en Forme et Alignement du Texte
Vous pouvez créer du texte horizontal (de gauche à droite) ou du texte statique vertical (de gauche à droite ou de droite à gauche). Notez que l'utilisation de langues bidirectionnelles horizontales (hébreu, arabe, etc.) dans des champs de texte classique n'est pas prise en charge.
Pour le texte statique, vous pouvez créer des lignes uniques qui s'étendent au fur et à mesure de la frappe, ou des blocs de largeur fixe (pour le texte horizontal) ou de hauteur fixe (pour le texte vertical) qui s'étendent et ajoutent automatiquement des retours à la ligne.
L'espacement des lettres insère un espace fixe entre les caractères. Le crénage contrôle l'espace entre les groupes de deux caractères. La plupart des polices intègrent des informations de crénage. Pour le texte vertical, vous pouvez désactiver le crénage par défaut dans les préférences d'Animate.
L'alignement définit la position de chaque ligne de texte dans un paragraphe par rapport aux bords du champ de texte. Le texte peut être aligné à gauche, centré, aligné à droite ou justifié. Les marges définissent l'espace entre la bordure d'un champ de texte et le texte lui-même. L'indentation définit la distance entre la marge d'un paragraphe et le début de la première ligne. L'interligne définit la distance entre des lignes adjacentes d'un paragraphe.
Anticrénelage et Qualité de Rendu du Texte
L'anticrénelage permet de lisser les contours du texte affiché à l'écran, ce qui est particulièrement efficace pour les polices de petite taille. L'anticrénelage est pris en charge pour le texte statique, dynamique et de saisie, à partir de Flash Player 7.
Le moteur de rendu de texte d'Animate assure une qualité de restitution de texte extrêmement élevée. Le paramètre "Anticrénelage pour la lisibilité" améliore la lisibilité, surtout pour les petites polices. Un anticrénelage de haute qualité est automatiquement activé lors de la publication vers Flash Player 8 (ou une version ultérieure) lorsque les options "Anticrénelage pour la lisibilité" ou "Anticrénelage personnalisé" sont sélectionnées.
Il est important de noter que l'anticrénelage peut légèrement différer le chargement des fichiers SWF et augmenter l'utilisation de la mémoire de Flash Player. L'anticrénelage implique l'incorporation des polices utilisées par un champ de texte. Si vous n'incorporez pas ces polices, le champ de texte peut être vide pour le texte classique.
Utilisation des Polices de Périphériques
L'option "Utiliser les polices de périphériques" spécifie que le fichier SWF utilise les polices installées sur l'ordinateur local pour les afficher. Bien que cette option réduise la taille des fichiers SWF, elle rend l'application dépendante des polices installées sur le système de l'utilisateur. Il est donc conseillé de choisir uniquement les familles de polices les plus couramment installées.
Vous ne pouvez pas utiliser les polices de périphériques avec du texte classique vertical ou avec du texte ayant subi une rotation.
Intégration Vidéo et Gestion des Points de Repère (Cue Points)
Flash CS5 et les versions ultérieures offrent des fonctionnalités avancées pour l'intégration et la gestion de vidéos. Les points de repère (cue points) identifient des moments précis dans une vidéo, permettant de déclencher des actions, des animations ou des transitions.
Vous pouvez ajouter des points de repère directement dans le panneau "Properties" de l'instance FLVPlayback sur la scène. L'avantage de la méthode ActionScript est la facilité avec laquelle ces points de repère peuvent être ajustés si nécessaire.
Sous-titres et Légendes (Captions)
Un sous-titre ou une légende (caption) est un texte affiché dynamiquement pendant la lecture de la vidéo. Pour les afficher, vous pouvez utiliser un "skin" pour le composant de lecture qui inclut un bouton légende, ou glisser-déposer le composant "FLVPlaybackCaptioning" sur la scène. Les légendes doivent être encodées dans un fichier XML au format Timed Text.
Flash ne prend pas en charge la spécification Timed Text complète, mais les utilisateurs familiers avec XML peuvent utiliser une DTD appropriée. Le fichier XML doit spécifier quelle légende insérer, à quel moment et pendant combien de temps.
Il est possible d'afficher plusieurs lignes de sous-titres simultanément en ajustant les attributs `begin` et `dur` des balises `
` dans le fichier XML.
Intégration Vidéo dans la Timeline
Une méthode alternative consiste à intégrer la vidéo directement dans la timeline, sans utiliser le composant vidéo. Cette technique est recommandée uniquement pour les vidéos courtes et de petite taille, car l'intégration d'une vidéo longue peut considérablement augmenter la taille du fichier Flash.
Utiliser une vidéo dans la timeline est particulièrement utile si vous souhaitez ajouter des animations qui se synchronisent avec la vidéo. Les points de repère sont la méthode privilégiée pour faire interagir une vidéo avec d'autres animations.
ActionScript et Interaction Vidéo
Il est relativement simple d'implémenter des sauts vers des points de repère à l'aide de boutons et d'ActionScript. Le code permet de rechercher un point de repère par son nom, d'en extraire le temps, puis d'utiliser la méthode `seek` pour afficher la partie correspondante de la vidéo.
Pour identifier la position actuelle dans la vidéo, notamment lors de l'utilisation de la barre de recherche, il est nécessaire d'utiliser l'événement `SEEKED` et de déterminer le point de repère précédent.
Pour la plupart des événements déclenchés par les points de repère, vous pouvez jouer un clip d'animation. Vous pouvez également importer des fichiers audio dans la bibliothèque et les exporter pour ActionScript afin de les synchroniser avec les animations.
Images SVG et Polices de Caractères : Avantages et Défis
Les images vectorielles SVG (Scalable Vector Graphics) gagnent en popularité en raison de leur taille raisonnable et de leur capacité à s'adapter à différentes tailles d'affichage, contrairement aux images matricielles (JPEG, PNG, etc.). Le format SVG est basé sur XML.
Le principal défi avec le SVG concerne l'intégration de texte. Il existe quatre solutions principales pour un affichage SVG correct :
- Intégrer la police de caractères dans le SVG : Cela préserve l'accessibilité et permet de copier-coller le texte. Chaque caractère n'est défini qu'une seule fois en vecteurs.
- Convertir le texte en chemin vectoriel : Cette méthode peut augmenter la taille du fichier et réduit l'accessibilité, car le texte n'est plus lisible par les lecteurs d'écran.
- Intégrer les polices dans une page web personnalisée : Les images SVG ne fonctionneront correctement que sur le site web où les polices sont intégrées.
- Utiliser des polices de caractères régulièrement intégrées dans les systèmes d'exploitation.
L'intégration des polices dans le SVG garantit que le texte est correctement rendu, même si les polices spécifiques ne sont pas installées sur le système de l'utilisateur. Cela permet également de conserver la sémantique du texte, le rendant accessible aux lecteurs d'écran.
tags: #flsh #cs5 #et #police #svg