Comment afficher des indices et des exposants dynamiquement dans des champs texte en utilisant les balises HTML <sup> et <sub> en AS3 .

Nous sommes nombreux à charger des contenus depuis des fichiers XML contenant du texte au format HTML, ou tout simplement confrontés au problème pour afficher des exposants dynamiquement.

Une solution consiste à modifier la police de caractères utilisée en remplaçant un caractère inutile par nos caractères en exposant. Ce n’est pas très souple, vous en conviendrez. Et il faut modifier la police de caractères à chaque nouveau caractère.

Une autre solution consiste à utiliser les fonts GGShow, puis à utiliser une feuille de style CSS pour prendre en charge les balises <sup> et <sub>.

Ces polices de caractères contiennent tous leurs caractères en exposant ou en indice (les polices « Subscript » contiennent les caractères en indice, les polices « Superscript » les exposants).

Vous devez incorporer la(es) police(s) (GG Subscript Sans, GG Superscript Sans, GG Subscript Serif, GG Superscript Serif) dans votre swf suivant vos besoins.

Attention si vous incorporez vos polices dans Flash à bien choisir l’option de format du contour correspondant au type de champ texte utilisé (« Classique » ou « TLF ») pour la police GG.

Vous devez ensuite créer une feuille de style CSS que vous appliquerez à votre champ texte :

var css:String =
"p {" +
" font-family: " + fontName_de_votre_police_globale + ";" +
" color: #FFFFFF;" +
" font-size: 20px;" +
"}" +
"" +
"sup{" +
" font-family:" + fontName_de_la_police_GGSuperscript_embeddee + ";" +
" display:run-in;" +
"}" +
"" +
"sub{" +
" font-family:" + fontName_de_la_police_GGSubscript_embeddee + ";" +
" display:run-in;" +
"}";

var styleSheet:StyleSheet = new StyleSheet();
styleSheet.parseCSS(css);

champTexte.embedFonts = true;
champTexte.styleSheet = styleSheet;
champTexte.htmlText = « <p>Votre texte normal du XXI<sup>e</sup> siècle.</p> »;

Le contenu de la balise <sup> sera remplacé par la police GG, nous affichant ainsi un exposant, ce qui donnera :
Votre texte normal du XXIe siècle.

Sources :
html sub & super tag
How to use subscript & superscript in dynamic and input text field
Download free TrueType Fonts

Test des différents moteurs 3D flash utilisants Stage 3D : Away 3D 4.0.110915 Alpha

Je vais « essayer » de faire une série d’articles de veille sur les différents moteurs 3D flash utilisant Stage 3D, pour essayer de comparer les avantages et les inconvénients de chacun.

Je vais commencer par le moteur Away 3D 4.0.110915 Alpha et suivre ce tutoriel.

J’utilise Adobe Flash Builder 4.5 avec le SDK 4.5.1 pour ce test, ce qui permet de commencer le tutoriel à l’étape 4 directement, puis 5, sauter l’étape 6 et suivre la 7.

Tout marche parfaitement. Le seul « hic » est que les exporteurs au format « awd » ne sont pas encore développés au moment où j’écris ces lignes (http://code.google.com/p/awd/). Il faut bidouiller pour arriver à le faire, donc je laisse tomber Away3D pour l’instant.

Voici tout de même le résultat du tutoriel, cliquez sur l’image pour lancer l’animation (nécessite Adobe Flash Player 11) :

Formes magiques

Nécessite Adobe Flash Player !

 

Voici une version plus évoluée des Carrés Magiques, avec plusieurs formes disponibles, et l’ajout d’ombres paramétrables et (dés)activables.

Attention à ne pas trop « bourriner » sur les paramètres sous peine de ralentissements, vous êtes prévenus ;)

Voici quelques captures :

Capture forme 5

Capture forme 1

Capture forme 3

Capture forme 1

screenshot15

screenshot7

 

Carrés magiques

Nécessite Adobe Flash Player !

 

Voilà la première expérimentation que je mets en ligne sur mon blog. Youpi.

Chaque valeur R, V, et B de chaque couleur est aléatoire, et l’amplitude est définie par « Couleur min. » et « Couleur max. » de 0 à 255.

Vous pouvez vous amuser avec les sliders, masquer le panneau, et passer l’animation en plein-écran.

Réalisé en Actionscript 3.