Accueil | Tutoriaux

Tutoriaux : Création d'un texte défilant
 

1. Introduction
 
Vous voulez créer un long texte qui défile de droite à gauche avec une vitesse qui dépend de la proximité du curseur : lisez ce tutoriel ! Comme j'aime bien ajouter des petits "trucs" à mes tutoriaux, je vous propose également d'ajouter un lien hypertexte à l'intérieur du texte défilant et de vous présenter quelques astuces pour formater votre texte de manière à ce qu'il ressemble à un texte html. Et puis comme Flash 8 le permet désormais, nous allons utiliser un effet de filtre pour faire disparaître le texte avec un effet de "brouillard" londonien... Observez l'animation ci-dessous, utilisez la glissière, déplacez les deux flèches xLeft et xRight et faîtes varier la distance entre le texte et votre curseur...
 
 
L'animation ci-dessus a pour but de vous faire comprendre comment a été obtenu l'effet de "halo" aux extrémités du texte défilant. Un rectangle noir est tracé dynamiquement en utilisant les valeurs de xLeft et de xRight. Un effet de flou est appliqué au rectangle qui sert ensuite de masque. Seule la partie du texte qui se trouve sous le rectangle est alors visible. Le bouton "masque" vous permet d'annuler l'effet de masque, le bouton "border" vous permet d'ajouter une bordure au champ de texte afin de mieux percevoir ses limites. La glissière vous permet de faire varier l'intensité du flou appliqué au rectangle noir. Au-dessus du texte vous pouvez voir les valeurs numériques des variables dy et vx qui représentent respectivement la distance verticale entre la souris et le champ de texte et la vitesse de déplacement latérale du texte.
 
2. Dans la bibliothèque et sur la scène principale
 
- Ouvrez le logiciel Flash et créez un nouveau document. Définissez les dimensions de l'animation : 400 pixels de largeur et 400 pixels de hauteur.
- Dans le panneau "propriétés du document", définissez la cadence de l'animation à 30 images par seconde.
- Il n'y a rien dans la bibliothèque de l'animation et il n'y a rien sur la scène principale (vous pouvez simplement ajouter un carré de 360 px de côté pour délimiter la surface de votre animation mais ceci n'est pas une obligation).
 
3. Le code et l'animation obtenue
 
Dans la première image clé de la scène principale, placez le code suivant :
  
monTexte = "<p>Dans ce tutoriel vous apprendrez à créer un texte qui défile de droite à gauche. Si ce tutoriel
vous a été utile, n'oubliez pas de signer <a href='http://www.zoneflash.net/livre.php' target='_blank'>le livre
d'or de zoneflash !</a></p>";
 
vxmin = 0;
vxmax = 8;
vx = 0.5*(vxmin+vxmax);
 
monStyle = new TextField.StyleSheet();
monStyle.setStyle("p", {fontFamily:'Arial', fontSize:'11px', color:'#666666'});
monStyle.setStyle("a", {fontFamily:'Arial', fontSize:'11px', color:'#FF0000'});
monStyle.setStyle("a:hover", {fontFamily:'Arial', fontSize:'11px', textDecoration:'underline', color:'#FF9900'});
 
this.createEmptyMovieClip("monClip", 0);
monClip.cacheAsBitmap = true;
 
monClip.createTextField("monChampDeTexte", 0, 0, 0, 0, 0);
 
with (monClip.monChampDeTexte) {
autoSize = true;
html = true;
styleSheet = monStyle;
htmlText = monTexte;
selectable = false;
border = false;
largeur = _width;
hauteur = _height;
}
 
xRight = 300;
xLeft = 100;
 
this.createEmptyMovieClip("masque", 1);
 
masque._x = monClip._x=xLeft;
masque._y = monClip._y=100;
 
masque.beginFill(0, 100);
masque.moveTo(0, 0);
masque.lineTo(xRight-xLeft, 0);
masque.lineTo(xRight-xLeft, hauteur);
masque.lineTo(0, hauteur);
masque.lineTo(0, 0);
masque.endFill();
 
blurX = 30; 
filtre = new flash.filters.BlurFilter(blurX, 0, 1);
masque.filters = [filtre];
 
monClip.setMask(masque);
 
monClip.onEnterFrame = function() {
var dy = Math.abs(this._ymouse-0.5*hauteur);
if (dy>0.5*hauteur) {vx = vxmin+(vxmax-vxmin)*dy/Stage.height;} else {vx = vxmin;}
this._x -= vx;
if (this._x<xLeft-largeur) {this._x = xRight;}
};
 
 
4. Le code avec ses commentaires
 
monTexte est le texte qui sera affiché dans la zone de texte dynamique que nous allons créer un peu plus loin. Il s'agit d'un texte contenant des balises html : les balises <p> et </p> marquent respectivement le début et la fin d'un paragraphe tandis que les balises <a> et </a> permettent d'insérer un lien hypertexte. Ainsi en cliquant sur le texte "le livre d'or de zoneflash" vous serez dirigé vers l'url http://www.zoneflash.net/livre.php. Cette page s'ouvrira dans une autre fenêtre (target="_blank").
monTexte = "<p>Dans ce tutoriel vous apprendrez à créer un texte qui défile de droite à gauche. Si ce tutoriel vous a été utile, n'oubliez pas de signer <a href='http://www.zoneflash.net/livre.php' target='_blank'>le livre d'or de zoneflash !</a></p>";
 
Le texte défilera de la droite vers la gauche avec une vitesse variable qui dépendra de la position de la souris par rapport à la zone de texte. Cette vitesse sera proportionnelle à la distance verticale qui sépare le texte du curseur et restera comprise entre vxmin et vxmax.
vxmin = 0;
vxmax = 8;
 
vx est la vitesse de déplacement de la zone de texte. Au début de l'animation cette vitesse est égale à la moyenne des bornes vxmin et vxmax et variera ensuite en fonction de la position de la souris par rapport à la zone de texte.
vx = 0.5*(vxmin+vxmax);
 
Pour formater "monTexte" nous créons une feuille de style qui nous permettra de définir la police, la couleur et la taille des textes selon les balises entre lesquelles ils se trouvent.
monStyle = new TextField.StyleSheet();
 
Nous définissons le format (police, taille et couleur) du texte qui apparaîtra entre les balises <p> et </p>.
monStyle.setStyle("p", {fontFamily:'Arial', fontSize:'11px', color:'#666666'});
 
Nous définissons le format du texte qui apparaîtra entre les balises <a> et </a> : les liens hypertextes seront de couleur rouge.
monStyle.setStyle("a", {fontFamily:'Arial', fontSize:'11px', color:'#FF0000'});
 
Nous définissons le format des liens hypertextes lorsque le curseur les survole. Le lien est alors souligné et d'une couleur légèrement différente (proche du rouge).
monStyle.setStyle("a:hover", {fontFamily:'Arial', fontSize:'11px', textDecoration:'underline', color:'#FF9900'});
 
Nous créons dynamiquement un clip vide que nous appelons "monClip".
this.createEmptyMovieClip("monClip", 0);
 
Sans cette ligne de code, l'effet final ne fonctionnera pas : nous demandons au Flash Player de placer en mémoire cache une version bitmap interne du clip "monClip".
monClip.cacheAsBitmap = true;
 
A l'intérieur de l'occurrence "monClip" nous plaçons un champ de texte que nous appelons "monChampDeTexte" : l'abscisse, l'ordonnée, la largeur et la hauteur de ce champ de texte valent zéro.
monClip.createTextField("monChampDeTexte", 0, 0, 0, 0, 0);
 
L'instruction with est très pratique et permet de "factoriser" une longue expression. Ici elle permet d'éviter d'écrire :

monClip.monChampDeTexte.autoSize = true;
monClip.monChampDeTexte.html = true;
(...)
monClip.monChampDeTexte.border = false;
largeur = monClip.monChampDeTexte._width;
hauteur = monClip.monChampDeTexte._height;

Ce bloc permet de définir les propriétés de notre champ de texte : "autoSize = true" permet de s'assurer que les dimensions du champ de texte s'adapteront à la longueur du texte qu'il contiendra. Ce champ de texte pourra contenir du texte html contenant des balises (que l'on ne verra donc pas dans le texte affiché), sera formaté avec la feuille de style "monStyle" que nous avons définie précédemment et contiendra le texte non sélectionnable "monTexte". Enfin nous récupérons la largeur et la hauteur de ce champ de texte. Par défaut, les champs de texte n'ont pas de bordures : pour visualiser avec précision les dimensions et le placement du champ de texte, il suffit de donner à "border" la valeur "true".
with (monClip.monChampDeTexte) {
autoSize = true;
html = true;
styleSheet = monStyle;
htmlText = monTexte;
selectable = false;
border = false;
largeur = _width;
hauteur = _height;
}
 
Si vous avez manipulé l'animation qui se trouve dans l'introduction de ce tutoriel vous avez compris que xRight et xLeft permettent de définir les dimensions du masque que nous allons créer.
xRight = 300;
xLeft = 100;
 
Nous créons un clip vide qui s'appelle "masque".
this.createEmptyMovieClip("masque", 1);
 
Les clips "masque" et "monClip" ont les mêmes abscisses et les mêmes ordonnées qui valent respectivement xLeft et 100. Pourquoi 100 ? Et bien pourquoi pas ? J'ai choisi arbitrairement cette ordonnée !
masque._x = monClip._x=xLeft;
masque._y = monClip._y=100;
 
A l'intérieur du clip "masque" nous traçons un rectangle de couleur noire dont la largeur est égale à la variable "hauteur" et dont la longueur est égale à la différence entre les abscisses xRight et xLeft. Le placement du clip "masque" est précis et défini la "fenêtre" à travers laquelle nous verrons une petite partie de l'occurrence "monClip".
masque.beginFill(0, 100);
masque.moveTo(0, 0);
masque.lineTo(xRight-xLeft, 0);
masque.lineTo(xRight-xLeft, hauteur);
masque.lineTo(0, hauteur);
masque.lineTo(0, 0);
masque.endFill();
 
Nous définissons l'intensité de l'effet de flou.
blurX = 30;
 
Nous créons un filtre qui produira un effet de flou : 30 est l'intensité du flou horizontal. Le deuxième argument est nul car nous ne souhaitons pas créer de flou vertical.
filtre = new flash.filters.BlurFilter(blurX, 0, 1);
 
Nous appliquons le filtre à l'occurrence "masque". Désormais un effet de flou est visible aux extrémités latérales du rectangle "masque". C'est cet effet qui permettra de créer une transition douce entre les parties visibles et invisibles du texte.
masque.filters = [filtre];
 
On demande au rectangle noir qui se trouve dans le clip "masque" de masquer le clip "monClip". Seule la partie de "monClip" qui se trouve "sous" le rectangle noir sera visible dans l'animation publiée.
monClip.setMask(masque);
 
Nous définissons une fonction qui sera appelée à chaque image de la ligne de temps ("timeline" en anglais) de "monClip".
monClip.onEnterFrame = function() {
 
Nous calculons la distance verticale entre l'ordonnée du curseur et le centre du champ de texte.
var dy = Math.abs(this._ymouse-0.5*hauteur);
 
Nous définissons la vitesse vx de défilement du champ de texte. Si dy est supérieur à la moitié de la hauteur du champ de texte (dans ce cas la souris n'est pas au-dessus du champ de texte) la vitesse est définie proportionnellement à la distance dy. Si la souris est au-dessus du champ de texte la vitesse de défilement est nulle. Dans tous les cas vx varie entre vxmin et vxmax.
if (dy>0.5*hauteur) {vx = vxmin+(vxmax-vxmin)*dy/Stage.height;} else {vx = vxmin;}
 
On enlève la valeur de "vx" à l'abscisse de l'occurrence "monClip" qui se déplace donc horizontalement vers la gauche.
this._x -= vx;
 
Si l'abscisse de "monClip" est inférieure à (xLeft - largeur) alors on donne à cette abscisse la valeur de "xRight". Le texte défile de la droite vers la gauche : lorsqu'il semble avoir totalement disparu, il réapparaît à droite...
if (this._x<xLeft-largeur) {this._x = xRight;}
 
fin de la fonction "onEnterFrame".
};
 
5. Une dernière remarque !
 

Lorsque je dis que la vitesse vx de défilement du texte est proportionnelle à la distance verticale dy entre le curseur de la souris et le champ de texte et bien cela est vrai dans le cas où vxmin vaut zéro. Dans le cas contraire, vx et dy sont liés par une relation qui n'est pas linéaire.

En effet la fonction : dy ---> vxmin+(vxmax-vxmin)*dy/Stage.height, est linéaire si vxmin est nul et affine sinon.

Mes élèves de troisième viennent parfois sur mon site c'est pourquoi je dois être rigoureux sur les termes mathématiques employés... ;-)
 
 
Accueil | Tutoriaux