Utilisation des css avec Flash

MX 2004 – Flash 8 Dans ce tutoriel, nous allons examiner la mise en oeuvre d’une feuille de style externe (.css) qui sera appliquée à un champ de texte dynamique dont le contenu est situé dans un fichier externe (.txt)

Pour ce tutoriel, on a besoin de 3 fichiers :

• un fichier Flash avec un champ de texte dynamique et au format html, appelé contact_txt (nom d’occurrence)
• une feuille de style externe appelée style.css
• un fichier texte externe appelé contact.txt

Le fichier Flash

code sur l’image 1 du calque Actions dans l’animation Flash

On crée un objet StyleSheet

monStyle = new TextField.StyleSheet();

On crée la fonction appelée lors du chargement d’un fichier externe

monStyle.onLoad = function(succes) {
  if(succes) {
    contact_txt.styleSheet = _root.monStyle;
  } else {
    trace("problème...");
  }
}

on charge la feuille de style (fichier externe)

monStyle.load("style.css");

On crée un objet de la classe LoadVars et on définit une fonction pour le chargement d’un texte externe.

texte_lv = new LoadVars();
texte_lv.onLoad = function(succes) {
  if(succes) {
    contact_txt.htmlText = this.contact;
    // contact est le nom de la variable dans le fichier txt externe
  } else {
    contact_txt.htmlText = "erreur de chargement";
  }
}

on charge le fichier externe

texte_lv.load("contact.txt");

Tout le code pour Flash

monStyle = new TextField.StyleSheet();
monStyle.onLoad = function(succes) {
  if(succes) {
    contact_txt.styleSheet = _root.monStyle;
  } else {
    trace("problème...");
  }
}

monStyle.load("style.css");

texte_lv = new LoadVars();
texte_lv.onLoad = function(succes) {
  if(succes) {
    contact_txt.htmlText = this.contact;
  } else {
    contact_txt.htmlText = "erreur de chargement";
  }
}

texte_lv.load("contact.txt");

La CSS

voici le contenu du fichier style.css

.texte {
  font-family: verdana;
  font-size: 12px;
  color: #666666;
}
a:link {
  color: #660000;
}
a:hover {
  color: #666666;
}

Le fichier texte

Voici le contenu du fichier contact.txt

contact=<p><b>Un titre en gras</b><p class='texte'>
Voici maintenant le texte principal de cette belle page pour ne rien dire.
C'est pour rien dire mais en fait, on peut tester aussi les problèmes
d'accents dûs à l'encodage...</p><br>
<a href='http://emafructidor.com'>un petit lien peut-être?</a>
<br><br>
<p>Du texte sans aucun style pour finir cette page</p>

Attention : le texte doit tenir sur une seule ligne (attention aux caractères invisibles, utilisez le bloc notes Windows ou un éditeur de texte)

Pour Flash, le texte doit être enregistré au format UTF-8

Balises supportées pour le HTML dans Flash

<p> <b> <u> <a> <img> <br> <font> <li> <span>

Un tutoriel complet sur le html dans Flash est dispo ici