Vous êtes ici : Accueil - Ressources Flash - Simulation de feuilles de styles sous MX.
Bien que le support des feuilles de styles soit implémenté sous Flash MX2004 - et encore, je n'ai pas réellement étudié la chose - on est souvent restreint de rester sous le player 6 et la mise en forme des textes devient vraiment laborieux. Avec un peu de bidouille et quelques scripts, on peut arriver cependant à faire quelque chose de très puissant, hormis le fait que l'on ne peut inclure des images dans un TextField sous Flash MX.
Il existe plusieurs concepts de traitement de css suivant les projets existants sur le net. Le modèle que je vais reprendre ici est celui du phpBB avec son BBCode qui est plus que simple et optimisé.
Pour exposer la problèmatique, on va imposer de pouvoir utiliser un fichier externe qui puisse paramétrer les styles des textes, de pouvoir gérer les polices sans toucher au code et de pouvoir changer les polices sans modifier le fla principal.
Plus qu'un fichier css, on va utiliser un fichier xml pour faciliter le parsage des données.
<?xml version="1.0" encoding="utf-8"?>
<css>
<style>
<!-- styles css pour les textes : à n'utiliser que pour les classes css
dans les textField HTML -->
<s id="bleu" color="#006699" face="FFF Galaxy" />
<s id="bleuBold" color="#006699" face="FFF Galaxy Bold" />
<s id="bleuNote" color="#006699" face="FFF Harmony" />
</style>
<textFormats>
<!-- TextFormat pour les textes n'ayant qu'un seul style comme les titres,
les liens individuels... -->
<s id="h1" color="0xBB0000" size="8" font="FFF Galaxy Bold" />
<s id="h2" color="0xBB0000" size="8" font="FFF Galaxy" />
</textFormats>
</css>
Note : Les fontes FFF données en exemple peuvent être téléchargées sur le site officiel http://www.fontsforflash.com/ et sont disponibles dans la partie Freebies.
Sous Flash, il est possible d'appliquer des styles de deux façons : la première est l'utilisation de la classe TextFormat, la deuxième consiste à appliquer le style dans un texte formaté en HTML - sur lequel se base le BBCode. Pour ces deux cas, certains mots cléfs peuvent changer, comme l'attribut face dans le formatage HTML et font dans la classe TextFormat. De ce fait, j'ai décomposé les deux cas dans mon fichier xml.
Pour utiliser les styles à n'importe quel endroit d'un projet Flash, l'utilisation de l'objet _global permettra de stocker tous les styles. Il suffira alors de coder une classe StyleSheet par exemple qui puisse renvoyer une chaîne de caractères pour un identifiant particulier.
// Object conteneur pour les styles
_global.CSS = new Object();
// chaine à renvoyer pour un style destiné à un texte HTML :
CSS.bleu = 'color="#006699" face="FFF Galaxy"';
// object à renvoyer en temps que nouveau TextFormat
CSS.h1 = new TextFormat();
CSS.h1 = { color : 0xBB0000, size : 8, font : "FFF Galaxy" };
Plus qu'une copie du BBCode, il est nécessaire de comprendre comment Flash gère les chaînes de caractères et d'adapter à notre utilisation : dans les forums phpBB, le BBCode est utilisé à l'aide de crochets [ et ] pour créer les tags ouvrant et fermant.
// model de BBCode
[BBCode=leStyle] le texte ici [/BBCode]
Sous Flash, en anticipant le parsage des chaînes de caractères, on peut optimiser le BBCode de façon à ce que le parsage soit fait à moitier dès le début. En effet, le BBCode original nécessite de traiter 2 tags à la fois : un ouvrant et un autre fermant. Dans le principe, on va simplement laisser le tag fermant dans sa forme final et travailler uniquement sur le tag ouvrant.
// model BBCode à utiliser dans Flash
<font=bleu> le texte ici </font>
// chaîne de caractères à retourner
<font color="#006699" face="FFF Galaxy" > le texte ici </font>
De cette façon, il ne reste plus qu'à utiliser un script qui parse une chaîne et remplace une sous-chaîne donnée par une autre pour appliquer les styles.
// propriétée _cssText permettant de formater un texte avec style
TextField.prototype.getCSSText = function () { return this.htmlText; }
TextField.prototype.setCSSText = function (txt) {
var n = -1, c = 0, t = new String();
while ( n < txt.length ) {
var tps = txt.indexOf("<font=", ++n), n = tps;
t += ( tps != -1) ? txt.slice(c, tps) : txt.slice(c) ;
if ( tps == -1) break;
c = txt.indexOf(">", n)+1;
t += "<font "+CSS[ txt.slice(tps+6, c-1) ]+">";
}
this.html = true;
this.htmlText = t;
}
with ( TextField.prototype ) {
addProperty( "_cssText", getCSSText, setCSSText );
}
ASSetPropFlags( TextField.prototype, "getCSSText,setCSSText", 7, 0 );
ASSetPropFlags( TextField.prototype, "_cssText", 3, 0 );
Contrairement au BBCode, les styles définis pour la classe TextFormat s'utilisent comme n'importe quel TextFormat déclaré habituellement. Il suffit pour cela d'appeler la méthode setTextFormat.
// TextFormat appliqué sur une occurence de texte :
with ( monTitreH1 ) { text : leTexte, autoSize : "left", setTextFormat( CSS.h1 ) }
Une fois le concept mis en place et les scripts rédigés, il ne reste plus qu'à créer les fichiers Flash qui comporteront les fontes de polices et le code.
Pour la structure des fichiers Flash, reportez-vous à l'article sur les bibliothèques partagées et la décomposion des fontes par fichier. Je ne présente ici que le contenu et l'utilisation d'un seul fichier fonte, les autres étant identiques. Le code quant-à lui est à placer dans le fichier principal.
Une fois l'inclusion d'une fonte dans un fichier Flash faite, toute création de textField dans des clips liés utilisant cette fonte n'allourdit pratiquement pas le fichier Flash en question. L'astuce est ensuite de créer autant de "modèle" de texte-box que l'on a besoin de type de texte.
Dans mes habitudes, j'inclus toujours une fonte normal et son équivalent en caratère gras. Si la fonte grasse existe, je préfère inclure celle-ci plutôt que de la créer via les options de Flash. Ensuite, je créé deux symbols de textField de largeur la plus petite possible par fonte, l'un en ligne simple, l'autre en multiligne. De ce fait, lorsque je fais un attachMovie, je choisi le bon symbol et n'ai pas besoin de le paramétrer via quelques lignes de code.
Au final, une fois le projet d'un client délivré, lorsque j'ai besoin de changer une fonte ou un style, le code actionscript ne nécessite absolument aucun remaniement. Pour certain projet multilingue, c'est d'autant plus bénéfique qu'il suffit de dupliquer les styles dans la feuille de styles, de créer les fichiers Flash incluants les bonnes fontes et de cibler les bons contenus.
Note : il est aussi intéressant de rajouter des paramètres sur les textField comme la couleur par défaut de l'ensemble d'un projet. Tout ce qui peut être fait via les symbols sera en moins dans le code. Les textField multilignes ont besoin d'avoir une largeur définie par le code, de ce fait, je les utilise pour les blocks de texte. Les textFields en ligne simple n'ayant pas de contrainte de largeur - à défaut de paramétrer la propriétée autoSize - ils sont plus destinés pour des titres ou des textes de vignettes ou boutons.