Vous êtes ici : Accueil - Ressources Flash - Les bibliothèques partagées : utilisation des fontes.
Cette article faisant suite à celui des bibliothèques partagées, je vous recommande vivement de le lire avant si vous ne vous êtes pas familliarisés avec leur fonctionnement. Ensuite, la raison de cette article s'explique par le harcelement d'un énergumène à l'apparence d'un chat ne se privant pas entre chips et coca... Remerciez-le; je vous livre encore un de mes secrets.
L'import de fontes dans un projet est souvent imposé par le fait que les internautes ne les possédant pas en local puissent tout de même les afficher. Sauf pour les fontes bitmaps, les fontes importées permet aussi de lisser les contours (antialiasing).
Ce qu'il faut savoir sur les fontes importées, c'est qu'elles ne réagissent pas de la même manière que les fontes systèmes (device fonts : fontes présentes sur le poste n'ayant pas de nécessité d'être importées). Pour une fonte système, les mises en forme gras/italique se font par les tag html <b> ou <i>. De plus, leur rendu n'est pas lissé (antialiasé).
Une fonte dont les contours ont été exportés pour assurer son affichage sur n'importe quel poste ne reconnait plus ses tags. Les contours ayant été "définis" dans l'export ne permettent plus au système de simuler les styles de mise en forme comme l'engraissement ou l'italique. Il faut à la place importer une fonte qui affiche explicitement le style souhaité.
Il existe deux façons pour permettre d'avoir différents style, la première étant d'avoir un jeu de familles de fontes déclinées, comme Helvetica qui possède plusieurs familles (Standart, Neue...) et plusieurs déclinaisons dans chaque famille (Ultra, Light, Roman, Medium, Bold, Black...) avec leur version en italique.
L'autre façon de gérer les styles est d'utiliser l'option de simulation de Flash lors de l'inclusion d'une fonte dans la bibliothèque de Flash. Il est nécessaire alors d'inclure une fonte à chaque fois que vous voulez utiliser un style. Par contre, le choix est très limité puisqu'il ne sera possible de n'avoir que quatre styles pour une fonte donnée : normal, bold, italique et bold italique.
Bien que les jeux de familles déclinées peuvent être attractifs parce qu'ils présentent plus de choix en fontes, il ne faut pas oublier qu'à chaque fonte exportée, le poid du fichier swf augmente. et chaque fonte peut avoir un poid bien différent d'une autre... C'est à gérer avec beaucoup d'attention.
Qu'est-ce que c'est que ce chariaba... Importer et Exporter en même temps?
Pour utiliser une fonte, il est nécessaire de l'importer dans la bibliothèque du fichier Flash dans un premier temps en allant dans le menu en haut à droite du panneau de la biblothèque.
Dans le panneau qui apparait, le choix de la fonte se fait.
Une fois la fonte importée dans la bibliothèque de Flash, il es nécessaire de l'exporter via les paramètres de liaisons (clic droit sur la fonte). En général, pour l'identifiant et le nom dans la bibliothèque, j'utilise le même nom que la fonte elle-même. Mais pour l'utiliser via CSS, c'est par son identifiant (champ name dans le screen du dessus) qu'on la nommera. Pour le cas où les styles sont simulés par Flash, il est donc nécessaire de choisir un identifiant différent à chaque fois, même si la fonte est la même.
Au final, le panneau de la bibliothèque du fichier fontes fourni en source ressemblera à ceci :
On remarquera au passage un clip lienFontes qui servira à la liaison de la bibliothèque partagée pour les autres fichiers flash (voir l'article sur les bibliothèques partagées) et deux autres symboles sur lesquels je reviendrais un peu plus tard dessus.
Note : suite à la note de l'article des bibliothèques partagées abordant l'astuce d'une fonte par fichier swf, le fichier fontes.fla que je viens de construire à l'instant ne contiendrait alors que des symboles importés à la place des fontes. Comme mentionné, les fontes venant du monde Mac serait une fois pour toute compilée et utilisable sous PC et vise versa sans avoir de problème de compatibilité (quoi que les fontes TTF sont aussi bien utilisable sous Mac OS X que PC maintenant...)
Une fois les fontes "prètes à l'emploie", il est temps de créer une feuille de styles pour permettre leur utilisation afin de définir en mise en forme des textes.
En règle générale, il faut se souvenir que tous les styles css ne sont pas applicables dans un textField sous Flash et que les définitions par id (définition de calque en html dans la plupart des cas) ajoute un retour à la ligne, mais comme en html, les styles hynéritent : les propriétés héritent des paramètres parents s'ils ne sont pas définis.
Pour débuter, je vais me limiter à définir une fonte, une taille et une couleur pour chaque style, qu'il soit une définition de classe ou d'id. Pour voir en détail, il suffit juste d'ouvrir la css qui est fourni dans la source.
Il est temps maintenant d'utiliser ce que je viens de préparer, mais avant, je vais revenir sur les deux clips que l'on a pu voir dans la bibliothèque : multi_txt et single_txt.
Lorsque l'on veut développer un projet Flash essentiellement basé sur du code ActionScript, on est souvent tenté de gérer les champs texte avec la classe TextField dynamiquement. Mais à moins de bien contrôler l'actionscript et l'utilisation des fontes incluses (mais pourquoi j'écris cet article alors? ^^). Par ailleurs, passer par du code, à moins de passer par des classes de simplification de code, l'utilisation de symbole permet de gérer certains paramètres directement sur l'objet (graphique) champ texte. Pour cette raison, j'ai recourru à ces deux symboles.
Single_txt est destiné aux champs texte type Titre, pas de retour à la ligne automatique. Il suffit de définir l'alignement, la css à utiliser sur le champ et le texte à afficher. Multi_txt est destiné quant à lui aux blocs de texte. En plus des mêmes paramètres de Single_txt, la largeur du champ texte doit être spécifiée.
Sans passer en détail sur le code, le principe reste simple : charger en premier la feuille de style, une fois cela fait, en se servant de l'écouteur de la classe StyleSheet, on charge le texte en externe (un xml mal formé dans le cas présent, puisque je me sers des tags xml comme du XHTML sans passer par un CDATA... en dur ca marche très bien, mais en dynamique, généré par du php, c'est la galère... Comme cela vous êtes prévenu....) et de la même façon, à l'aide de l'écouteur de la classe XML, on appelle une fonction qui va mixer le tout (dans l'ordre) : un attachMovie d'un des deux clips, la définition de la feuille de style sur le champ et l'affichage du contenu.
Bien entendu, la source de cet article est disponible ici. Les fontes Helvetica ne sont pas incluses dedans. Ils vous faudra utiliser d'autres fontes pour vos propres tests.