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.
Au programme
- Preface
- Principe de fonctionnement
- Cas d'un titre h*
- Cas d'une div avec une classe precise
- Exemples
- Download
Preface
L'objet DOM en javascript
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.
SwfObject
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.
FlashVars
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.
Principe de fonctionnement
Coté flash
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.
Dans mon exemple le champs est crée dynamiquement, mais ça fonctionne egalemrnt avec un champs deposé sur la scene.
Coté javascript
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é.
Cas d'un titre h*
Notre swf
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_root.taille;,_root.couleur;et_root.texte;correspondent aux paramètres qui seront passé par flashvars.
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.
Notre javascript
/************************************************* #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.
Notre page html
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 titres h2 ET pour nos balises de remplacement fltext. A noter que vous pouvez tout à fait donner un style different aux balises de remplacement.
Ps: J’ai aussi inclu swfobject.js pour integrer notre swf
Cas d'une div avec une classe precise
Notre swf
J’ai utilisé le mème swf que l’exemple precedant.
Notre javascript
/************************************************* #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. Mais vous pourriez tout à fait lui ajouter une autre class si besoin.
Notre page html
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
Exemples
- 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
Download
Contenu du zip:
- Les 2 exemples de remplacement
- Les .fla du swf de substitution
- Le fichier swfobject.js







![[netvibes]](images/digglike/netvibes.gif)
![[technorati]](images/digglike/technorati.png)
![[blogmarks]](images/digglike/blogmarks.gif)
![[delicious]](images/digglike/delicious.gif)
![[digg]](images/digglike/digg.gif)
![[furl]](images/digglike/furl.gif)
![[google]](images/digglike/google.png)
![[newsburst]](images/digglike/newsburst.gif)
![[bloglines]](images/digglike/bloglines.gif)
![[yahoo]](images/digglike/yahoo.gif)
![[newsgator]](images/digglike/newsgator.gif)
![[aol]](images/digglike/aol.gif)
![[windows]](images/digglike/windows.gif)
![[msn]](images/digglike/msn.gif)
![[feedfeeds]](images/digglike/addfeedfeeds.gif)
![[pageflakes]](images/digglike/pageflakes.gif)
![[kinja]](images/digglike/addkinja.gif)
![[blogarithm]](images/digglike/blogarithm.gif)
![[rojo]](images/digglike/rojo.gif)
![[feedshow]](images/digglike/feedshow.gif)
Commentaires
Bonjour K-ny,
Quelle est la différence ou avantages entre ta méthode et le Sifr que tu dois connaitre www.mikeindustries.com/si... ?
Bravo pour ton blog qui semble plein de bonnes ressources
frank
Hello,

et bien en fait, j'ai découvert sifr après avoir pondu ce tuto, et moi qui croyais avoir été inventif .... ^^
Donc soit, en fait la méthode sifr est certainement plus complète (genre elle fonctionne aussi avec des images), mais la mienne à l'avantage d'être full compatible avec swfobject et aussi d'être plus légère.
De plus il est plus simple de comprendre le fonctionnement de ma méthode plutôt que de sifr
Donc à toi de choisir
Et merci :p
C'est clair, le tien semble bcp plus facile à intégrer et à comprendre. Sifr m'a toujours posé des problèmes de margin et padding entre les différents navigateurs. Je vais tester ta méthode
frank
Bonjour,
Toutefois, cela ne prend pas en compte les accents et j'ai beau chercher sur le net ou modifier le fichier fla, je n'ai pas trouvé de solution 
Merci pour ce tuto qui est très clair et permet d'intégrer une police exotique même pour un profane en flash
Tu as peut être une réponse à mon problème.
Merci d'avance.
Stéphane
Concernant les caractères spéciaux (accents), cela se passe dans Flash.
Au moment où tu fais ton champs texte contenant la police, dans la palette des propriétés, tu trouveras un bouton "caractères".
Cliques dessus, c'est là que l'on inclut les caractères spéciaux.
Tape-les un à un dans le champs ou utilise les listes déjà prêtes (ou les deux).
Bon courage.
Ced.
en fait tu forces le client a l'activation de JS et l'installion flashpalyer.
Autant utiliser le tweeft de MS
il mrite une bonne place sur tous les coparateur
comparateurprix.gratuit-0...
comparateur.gratuit-01.co...
electromenager.gratuit-01...
moinscher.gratuit-01.com
comparateurgratuit.en-lig...
comparateurdeprix.gratuit...
comparatif.gratuit-01.com
comparatif.en-ligne-01.bi...
comparateur.en-ligne-01.b...
comparateurinformatique.g...
comparer.gratuit-01.com
Bonjour.
merci pour le tuto, j'ai récupéré tes fichiers.
je ne comprends comment faire pour les accents, "insérer le champs texte " bouton caractère ?
merci pour ton aide
Laurent
Ajouter un commentaire