Easy-Micro

ESPACEMEMBRE ActionScript
Styles AS

Les styles en ActionScript

Afin de mettre en forme du texte, on utilise la classe TextFormat

Exemple de format (AS3)

// Création du formatage
var formatSimple:TextFormat = new TextFormat();

// Police
formatSimple.font = "Calibri";
formatSimple.size = 12;
formatSimple.color = 0x666666;

// Formatage d'un champ de texte
var mazoneTexte:TextField = new TextField();
mazoneTexte.multiline = true;
mazoneTexte.wordWrap = true;
mazoneTexte.width = 400;
mazoneTexte.defaultTextFormat = formatSimple;
mazoneTexte.text = "Easy-Micro vous présente l'ActionScript 3";
addChild(mazoneTexte);

Exemple de format sur des blocs : marges, alignement et interlignage (AS3)

// Mise en forme d'un format pour un titre
var formatTitre:TextFormat = new TextFormat();
formatTitre.font = "Eras Bold ITC";
formatTitre.size = 25;
formatTitre.color = 0x2B6DA4;
formatTitre.align = TextFormatAlign.CENTER;

// Création d'un champ de texte avec un titre
var montitre:TextField = new TextField();
montitre.width = 500;
montitre.defaultTextFormat = formatTitre;
montitre.text = "ActionScript 3";
addChild(montitre);

// Mise en forme d'un cadre
var formatCadre:TextFormat = new TextFormat();
formatCadre.font = "Calibri";
formatCadre.size = 12;
formatCadre.color = 0x666666;
formatCadre.leftMargin = 50;
formatCadre.rightMargin = 10;
formatCadre.leading = 10;

// Nouveau champ de texte
var zoneTexteCadre:TextField = new TextField();
zoneTexteCadre.multiline = true;
zoneTexteCadre.wordWrap = true;
zoneTexteCadre.width = 400;
zoneTexteCadre.y = montitre.y + montitre.textHeight + 20;
zoneTexteCadre.border = true;
zoneTexteCadre.borderColor = 0x2B6DA4;
// Application du format "formatcadre" sur ce champ de texte
zoneTexteCadre.defaultTextFormat = formatCadre;
zoneTexteCadre.text = "Easy-Micro vous présente l'ActionScript 3";
addChild(zoneTexteCadre);

Source: Bases-as3.fr

ActionScript Gestion du CSS (AS3)
En utilisant la méthode setStyle() de la classe StyleSheet.
Cette méthode prend deux paramètres : le nom du style et un objet qui définit les propriétés de ce style.

L'exemple ci-dessous nécessite deux fichiers:
• un fichier CSS (ici "styles.css") qui contien ceci : .textebleu { color: #0000CC; }
• un fichier texte (ici "montexte.txt") qui contien ceci : <p class="titre">titre=Welcome home boys !</p>
Exemple de gestion du CSS (AS3)

var conteneur:URLLoader = new URLLoader();
var monfichier:URLRequest = new URLRequest('montexte.txt');

function yesItIs(evt) {
var variables = new URLVariables(evt.target.data);

// Création d'une zone de texte
var montxt = new TextField();
// Définition des propriétés de la zone de texte
montxt.width = stage.stageWidth - 40;
montxt.height = stage.stageHeight - 40;
montxt.x = 20; montxt.y = 20;
montxt.autoSize = TextFieldAutoSize.LEFT;
montxt.border = true;
montxt.borderColor = 0x0098CF;

// Création d'un format
var format = new TextFormat();
format.font = "Times New Roman";
format.size = 14;
format.italic = true;
format.color = 0x000000;
// Création d'un style
var monstyle = new StyleSheet();
monstyle.setStyle('mestitre', {
color: '#987654',
'font-weight': 'bold'
});

var autreConteneur:URLLoader = new URLLoader();
// appel de fichier CSS externe
var requete:URLRequest = new URLRequest("style.css");

autreConteneur.addEventListener(Event.COMPLETE, function(evt) {
// Utilisation du style créé
monstyle.parseCSS(autreConteneur.data);
//Application du style
montxt.styleSheet = monstyle;
montxt.htmlText = "<h1>Ceci est un Titre</h1> "
+ "<p>Ceci est une ligne de texte. <span class='textebleu'>"
+ "Ceci est une ligne de texte en bleu.</span></p>";
});
// Charge le style dans le conteneur
autreConteneur.load(requete);

addChild(montxt);
}

conteneur.addEventListener(Event.COMPLETE, yesItIs);
conteneur.load(monfichier);


Note: Enregistrez le fichier FLA dans le même répertoire qui contient le fichier CSS (ici "styles.css") et le fichier texte (ici "montexte.txt").


< Page précédente ACTIONSCRIPT Page suivante >