codeur & geek

Je pense qu'on est tous déjà passé par là: créer un champ de texte dynamique dans flash, définir la typo, la taille, la couleur... et ainsi de suite pour tous les autres champs de texte de l'animation!

Mais lorsqu'il faut changer la typo de tous les titres, par exemple, on se rend bien compte que ce système basic n'est pas très flexible! L'affichage du texte dans une animation flash peut donc vite devenir problématique lorsque celui-ci n'est pas geré de manière centrale.

Un moyen éfficace pour résoudre ce problème consiste à utiliser une feuille de styles externe et l'appliquer sur nos champs de texte. L'avantage majeur de cette méthode est qu'il n'y a pas besoin de recompiler l'animation pour changer l'affichage d'un ou plusieurs éléments!

Objectif:
Charger une feuille de styles et l'appliquer sur un champ de texte.

Implémenation:

var text:TextField = new TextField();
text.styleSheet = StyleSheetManager.getStyle();
text.htmlText = "
<h3>Lorem ipsum dolor sit amet,</h3>
 
<strong>consetetur sadipscing elitr</strong>";
addChild(text);

Vous pouvez télécharger un exempe ici!

La Classe:

package com.erwanjegouzo.text {
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.StyleSheet;
 
	/**
	 * ...
	 * @author Erwan Jégouzo
	 */
	public class StyleSheetManager {
 
		public static var       S_SHEET                 :StyleSheet;
		public static var       LOADER                  :URLLoader
		public static var       INST                    :StyleSheetManager;
 
		public function StyleSheetManager():void {
			   S_SHEET = new StyleSheet();
		}
 
		public static function loadStyleSheet(s:String):void {
			var req:URLRequest = new URLRequest(s);
 
			LOADER = new URLLoader();
			LOADER.addEventListener(Event.COMPLETE, (INST as StyleSheetManager).onCSSFileLoaded);
			LOADER.load(req);
		}
 
		public static function parseStyleSheet(s:String):void {
			if (S_SHEET == null) { S_SHEET = new StyleSheet(); }
			S_SHEET.parseCSS(s);
		}
 
		public function onCSSFileLoaded(event:Event):void {
			S_SHEET.parseCSS(LOADER.data);
		}
 
		public static function getStyle():StyleSheet {
			return S_SHEET;
		}
	}
}

Dans le cas où vous souhaitez également changer la typo, il faut passer par la propriété "embedFonts". Pour d'avantages d'informations sur cette propriété, je vous conseille de vous reporter à la documentation sur livedocs.