Article écrit par k-ny ( Blog ).

Dans ce tutorial je vais vous expliquer comment pouvoir inserer une typo “exotique” dans une page html classique.

En effet, vous le savez peut-ètre déjà, mais lorsque vous construisez un site classique, vous n'avez le droit que d'utiliser que 5 grandes familles de police.

Pourquoi ? Et bien tout simplement pour vous assurez que votre page aura le mème rendu chez tout le monde. Si vous utilisiez la police WaltDisney par exemple, seul les utilisateurs disposant de cette police sur leur ordinateur la verrait ! Ce qui est, comme vous vous en doutez, completement inconcevable.

Heureusement, il existe des moyens de contourner ce problème. Ceux qui ont l'habitude d'utiliser flash savent qu'il est possible d'inclure une police (entierement ou pas) dans un swf. Je vais donc vous montrez comment à l'aide d'un swf, et d'un bout de javascript nous allons pouvoir nous sortir de ce mauvais pas.

Ma methode laisse intact votre page d'origine, donc votre page restera valide, de plus si le visiteur n'a pas javascript d'activé, la page n'en souvfrira pas car le contenu ne change pas.
Les possiblités sont donc nombreuses … inclure une police exotique, faire faire une rotation a votre texte, des effet lumineux, de distorsion, etc …. et tout ça en un minimum de code !
Allez directement voir les exemples et examinez le code source de la page, vous comprendrez mieux la methode.

Pour ce tuto, nous allons utiliser l'objet DOM. Si vous avez déjà manipulé du xml, vous devriez ètre familiarisé avec cet objet. A l'aide de DOM, notre fonction javascript va parcourir notre page à la recherche de certains noeuds. Ces noeuds en xml sont generalement désignés par leur id ou par les nom de tag (div est un nom de tag) gràce à getElementById('content') et getElementsByTagName('div').
On peut evidement cumuler les 2 approches, par exemple document.getElementById('content').getElementsByTagName('div'); va renvoyer un tableau avec le contenu de chaque balise 'div' se trouvant dans une balise qui à l'id 'content'.

Il est utile de prendre le temps de bien assimiler cette aproche de DOM pour pouvoir cibler au mieux les elements que vous desirez.

J'ai utilisé la methode swfobject (decrite dans ce tuto) pour integrer les swf de substitution. Cette methode permet d'avoir un code valide et actif mème sous ie7.

Nous allons utiliser flashvars pour passer le contenu de l'element substitué à notre swf de remplacement, donc un seul swf pour remplacer plusieurs elements differents sur la page.

Alors là rien de special, le swf de substitution contiendra un champs de texte, avec une police liée dans la bibliothèque. On recuperera le texte de remplissage de ce champs, via la methode flashvars

Au chargement de la page, nous allons lancer une fonction qui va parcourir tout le contenu, et remplacer certains elements par le swf de substitution.
Etant donné que la substitution se fait coté client (à l'inverse du php qui agit coté serveur), aucunes données de votre page ne sera alterées aux yeux des validateurs et des robots. De plus, ça permet de garder votre contenu intact si le javascript est desactivé.
Le swf de substituion remplacera chaque occurence de l'element que vous aurez prealablement defini. Et il affichera le contenu de l'element substitué.

En gros n'importe quel swf contenant un champs de texte avec la police integrée de votre choix, sans oublié d'assigner une variable externe pour remplir ce champs de texte.
Après à vous de voir vos besoin, voici le contenu du swf que j'ai utilisé pour mes exemples:

/*************************************************
#Initialisation
*************************************************/
Stage.scaleMode = "noScale";
Stage.align = "TL";
Stage.showMenu = false;
/*************************************************
#Definition du style de texte
*************************************************/
var my_fmt:TextFormat = new TextFormat();
this.my_fmt.font = "Police 1";
this.my_fmt.size = _root.taille;
this.my_fmt.color = _root.couleur;
this.my_fmt.target = "_self";
this.my_fmt.kerning = true;
/*************************************************
#Creation et remplissage du champs de texte
*************************************************/
var my_txt:TextField = this.createTextField("my_txt", this.getNextHighestDepth(), 0, 20, Stage.width, Stage.height);
this.my_txt.wordWrap = true;
this.my_txt.embedFonts = true;
this.my_txt.selectable = false;
this.my_txt.html = true;
this.my_txt.htmlText = _root.texte;
this.my_txt.setTextFormat(my_fmt);
/*************************************************
#Effet sur le texte
*************************************************/
this.my_txt._rotation = -2;

Ici j'ai ettofé le champs de texte en permettant l'html et en ajoutant la possibilité de changer taille et couleur via flashvars.

• this.my_fmt.font = “Police 1”; correspond à ma police perso, qui se trouve dans la bibliothèque

Decortiquez le zip en fin de page, il vous suffira d'editer la police dans la bibliothèque et de choisir la police de votre choix.

/*************************************************
#Fonction de remplacement
**************************************************/
function scan(){
	var newflash, newflash_param;
	//Nom de tag des elments a remplacer (ici <h2></h2>)
	var fltext = document.getElementsByTagName('h2');
	//Boucle sur le nombre d'occurence h2 trouvées
	for(var i = 0; i < fltext.length; i++){
		//On crée un div pour mettre notre swf
		var newflash_div = document.createElement('div');
		//On ajoute une classe 'fltext' à cette div
		newflash_div.className = 'fltext';
		//On insère notre div dans le flux de la page
		fltext[i].parentNode.insertBefore(newflash_div, fltext[i]);
		//Insertion de nos swf + paramètres
		var so = new SWFObject("exemple_h2.swf", "fltext", "500", "75", "8");
		so.addParam("wmode", "transparent");
		so.addVariable('texte', escape(fltext[i].innerHTML));
		so.addVariable('couleur', '0x09002F');
		so.addVariable('taille', '35');
		so.write(newflash_div);
	}
	//Boucle qui supprime les elements h2
	while(fltext.length > 0){
		fltext[0].parentNode.removeChild(fltext[0]);
	}
}
/*************************************************
#Appel de fonction au chargement
**************************************************/
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
/*************************************************
#On execute le scan au chargement de la page
**************************************************/
addLoadEvent(scan);

Le javascript ci-dessus, va donc parcourir la page et remplacer tout les elements h2 par une div contenant notre swf.
J'ai affecté une class ('fltext') à cette div, pour permettre un meilleur controle de la mise en forme.

Notez qu'on a la possibilité de donner une taille et une couleur a notre police.

Ajouter ceci entre les balises <head> et </head>

	<!-- script: swfobject, pour l'integration de flash valide -->
	<script type="text/javascript" src="swfobject.js"></script>
	<!-- script: notre fonction javascript -->
	<script type="text/javascript" src="exemple_h2.js"></script>
	<!-- style: style propre a cette page -->
	<style type="text/css">
	<!--
	div#content h2, .fltext {
		color: #09002F;
		padding: 0.5em;
		margin: 0 -12px 0.5em;
		border: 1px solid gray;
	}
	-->
	</style>

Et mettez des balises h2 dans le body de votre page.

On inclut notre fichier javascript, et on defini un style pour nos titre h2 ET pour nos balises de remplacement fltext. A noter que vous pouvez tout à fait donner un autre style aux balises de remplacement.
Ps: J'ai aussi inclu swfobject.js pour integrer notre swf

J'ai utilisé le mème swf que l'exemple precedant.

/*************************************************
#Fonction de remplacement
**************************************************/
function scan(){
	var newflash, newflash_param;
	//Nom de tag des elements a remplacer (ici <div></div>)
	var fltext = document.getElementsByTagName('div');
	//Boucle sur le nombre d'occurence h2 trouvées
	for(var i = 0; i < fltext.length; i++){
		//Si la div a une classe egal à "mon_titre"
		if (fltext[i].className == "mon_titre") {
			//Insertion de nos swf + paramètres
			var so = new SWFObject("exemple_par_class.swf", "fltext", "500", "75", "8");
			so.addParam("wmode", "transparent");
			so.addVariable('texte', escape(fltext[i].innerHTML));
			so.addVariable('couleur', '0x09002F');
			so.addVariable('taille', '35');
			so.write(fltext[i]);
		}
	}
}
/*************************************************
#Appel de fonction au chargement
**************************************************/
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
/*************************************************
#On execute le scan au chargement de la page
**************************************************/
addLoadEvent(scan);

Le javascript ci-dessus, va donc parcourir la page et remplacer tout les elements div, ayant une class égale à mon_titre par notre swf. Pratique pour cibler precisement une partie des div de la page
Je n'ai pas affecté de class dans ce cas, car le swf va tout simplement se substituer au contenant de la div ciblée.

Ajouter ceci entre les balises <head> et </head>

	<!-- script: swfobject, pour l'integration de flash valide -->
	<script type="text/javascript" src="swfobject.js"></script>
	<!-- script: notre fonction javascript -->
	<script type="text/javascript" src="exemple_par_class.js"></script>
	<!-- style: style propre a cette page -->
	<style type="text/css">
	<!--
	div .mon_titre {
		font-size: 25px;
		font-weight: bold;
		color: #09002F;
		padding: 0.5em;
		margin: 0 -12px 0.5em;
		border: 1px solid gray;
	}
	-->
	</style>

Et mettez des div contenant une class='mon_titre'; dans le body de votre page.

On inclut notre fichier javascript, et on defini un style pour nottre class mon_titre.
Ps: J'ai aussi inclu swfobject.js pour integrer notre swf

• Exemple de remplacement de balises h2
• Fichier js lié au remplacement de balises h2
• Exemple de remplacement de balises div avec une class definie
• Fichier js lié au remplacement de balises div

• Telecharger les fichiers d'exemple

Contenu du zip:

• Les 2 exemples de remplacement
• Les .fla du swf de substitution
• Le fichier swfobject.js

• En cas de soucis, demandez un coup de main sur le forum dreamweaver ou sur le forum flash