Accueil | Tutoriaux

Tutoriaux : Effet de flou sur un texte
 

Introduction
 
Flash 8 permet d'appliquer un effet visuel de flou à un clip. Je vous propose de vous montrer une utilisation de la classe BlurFilter pour créer un effet de texte. Si votre navigateur est doté de la version 8 du flash player, vous pouvez observer ci-dessous un texte rendu flou et donc illisible. Déplacez verticalement votre souris sur ce texte afin de le lire ligne par ligne. L'effet est réalisé uniquement à l'aide d'ActionScript ce qui permet de modifier rapidement le texte et d'adapter facilement l'effet à votre projet personnel. Outre le résultat final qui peut attirer votre attention, vous apprendrez dans ce tutoriel à créer dynamiquement un champ de texte, à formater le contenu d'un champ de texte et à définir les événements onRollOver et onRollOut sur des clips placés dynamiquement sur la scène. Pour bien comprendre ce tutoriel je vous conseille de lire en préambule celui qui détaille la technique du "easing".
 
 
Dans la bibliothèque
 

- Ouvrez flash et créez un nouveau document de 400 pixels de largeur et de 300 pixels de hauteur.
- Définissez la cadence de l'animation à 30 images par seconde.
- Quatre lettres pour définir le contenu de la bibliothèque : R-I-E-N <:=) Nous pouvons donc nous jeter dans le code.
 
Le code et l'animation obtenue
 
Placez le code ci-dessous dans la première image clé de la scène principale :
  
monTexte = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse
quis dolor et dolor accumsan dictum. Nulla augue neque, suscipit quis, egestas non,
sollicitudin non, orci. Curabitur id libero. Aenean mattis dapibus quam. Duis sit
amet mi. Vivamus libero enim, imperdiet sit amet, fermentum vitae, scelerisque at,
erat. Phasellus non quam vel mi rhoncus vehicula. In hac habitasse platea dictumst.
Duis orci ipsum, eleifend nec, dictum vehicula, faucibus ac, tortor. Aenean lectus.
Sed gravida vulputate mauris."; 
 
nbrDeMotsParLigne = 9;
x0 = 0;
y0 = 20;
hauteurDeLigne = 28;
flouMax = 15;
qualite = 1;
coeffRollOver = 0.5;
coeffRollOut = 0.15;
 
mots = monTexte.split(" ");
nbrDeMots = mots.length;
lignes = new Array();
lignes[0] = "";
nbrDeLignes = 0;
 
for(var i = 0; i < nbrDeMots; i++) {
lignes[nbrDeLignes] += mots[i] + " ";
if((i + 1) % nbrDeMotsParLigne == 0) {
nbrDeLignes++;
lignes[nbrDeLignes] = "";
}
}
 
monFormatDeTexte = new TextFormat();
with (monFormatDeTexte) {
size = 12;
font = "Comic Sans MS";
color = "0x666666";
align = "center";
}
 
MovieClip.prototype.creerUnChampDeTexte = function (texte) {
var ligne = this.createTextField("texte", 0, 0, 0, 400, 20);
ligne.selectable = false;
ligne.text = texte;
ligne.setTextFormat(monFormatDeTexte);
}
 
MovieClip.prototype.easing = function() {
var difference = this.flouCible - this.flou;
this.flou += this.coefficient*difference;
var filtre = new flash.filters.BlurFilter(this.flou, this.flou, qualite);
this.filters = [filtre];
if(Math.abs(difference) < 0.1) {
delete this.onEnterFrame;
this.flou = this.flouCible;
var filtre = new flash.filters.BlurFilter(this.flouCible, this.flouCible, qualite);
this.filters = [filtre];
}
}
 
for(var i = 0; i <= nbrDeLignes; i++) {
var mc = this.createEmptyMovieClip("ligne"+i, i);
mc._x = x0;
mc._y = y0 + hauteurDeLigne*i;
mc.creerUnChampDeTexte(lignes[i]);
mc.flou = mc.flouCible = flouMax;
mc.easing();
mc.onRollOver = function() {
this.flouCible = 0;
this.coefficient = coeffRollOver;
this.onEnterFrame = easing;
}
mc.onRollOut = mc.onReleaseOutside = function() {
this.flouCible = flouMax;
this.coefficient = coeffRollOut;
this.onEnterFrame = easing;
}
}
 
 
Commentaires du code
 
La variable monTexte est une chaîne de caractères. Lorsque vous avez besoin d'un texte long et que vous avez la flemme de taper vous même ce texte, je vous conseille d'aller sur www.lipsum.com qui vous permettra d'éditer très rapidement de longs textes composés d'un nombre arbitraire de paragraphes...
monTexte = " Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse quis dolor et dolor accumsan dictum. Nulla augue neque, suscipit quis, egestas non, sollicitudin non, orci. Curabitur id libero. Aenean mattis dapibus quam. Duis sit amet mi. Vivamus libero enim, imperdiet sit amet, fermentum vitae, scelerisque at, erat. Phasellus non quam vel mi rhoncus vehicula. In hac habitasse platea dictumst. Duis orci ipsum, eleifend nec, dictum vehicula, faucibus ac, tortor. Aenean lectus. Sed gravida vulputate mauris.";
 
Cette constante permet de définir le nombre de mots affichés sur chaque ligne. Si le nombre total de mots de la phrase monTexte n'est pas un multiple de nbrDeMotsParLigne alors la dernière ligne ne contiendra pas le même nombre de mots que les lignes précédentes.
nbrDeMotsParLigne = 9;
 
x0 et y0 sont respectivement l'abscisse et l'ordonnée du point où nous placerons le premier champ de texte dynamique.
x0 = 0;
y0 = 20;
 
Cette constante permet de définir le nombre de pixels entre deux lignes.
hauteurDeLigne = 28;
 
Ce paramètre définit l'intensité maximale de l'effet de flou.
flouMax = 15;
 
Ce paramètre définit la qualité du flou et peut prendre des valeurs comprises entre 0 et 15.
qualite = 1;
 
Je vous conseille de lire mon tutoriel sur la technique du "easing" car nous allons utiliser cette technique pour faire apparaître et disparaître l'effet de flou. coeffRollOver est un coefficient compris entre 0 et 1 qui permet de définir la vitesse de disparition de l'effet de flou au moment où la souris survole une ligne. Si ce coefficient est proche de 1 le texte sera lisible quelques centièmes de seconde après le survol de la souris tandis que s'il est proche de zéro il faudra beaucoup plus de temps pour parvenir à lire le texte.
coeffRollOver = 0.5;
 
Ce coefficient permet de définir la vitesse d'apparition du flou au moment où la souris quitte la surface définit par une ligne de texte. Le choix des valeurs numériques de coeffRollOver et coeffRollOut détermine grandement l'effet obtenu sur l'ensemble du texte.
coeffRollOut = 0.15;
 
La fonction split renvoie un tableau dans lequel chaque élément est un mot de la phrase monTexte.
mots = monTexte.split(" ");
 
Nous calculons le nombre de mots qui se trouvent dans la phrase monTexte.
nbrDeMots = mots.length;
 
Nous définissons un tableau qui s'appelle lignes. lignes[0], lignes[1]... seront les chaînes de caractères affichées respectivement dans la première et la seconde ligne de l'animation.
lignes = new Array();
 
Nous initialisons la première ligne qui contient une chaîne vide.
lignes[0] = "";
 
nbrDeLignes est un nombre qui est initialisé à zéro mais qui après une boucle for sera égal au nombre de lignes nécessaires pour afficher entièrement la phrase monTexte.
nbrDeLignes = 0;
 
Nous utilisons une boucle for qui permet de calculer le nombre de lignes et de définir le texte qui sera affiché sur chaque ligne de l'animation.
for(var i = 0; i < nbrDeMots; i++) {
lignes[nbrDeLignes] += mots[i] + " ";
if((i + 1) % nbrDeMotsParLigne == 0) {
nbrDeLignes++;
lignes[nbrDeLignes] = "";
}
}
 
Par la suite, nous allons créer dynamiquement des champs de texte. La classe TextFormat permet de définir la police utilisée, la taille des caractères, la couleur et l'alignement du texte.
monFormatDeTexte = new TextFormat();
with (monFormatDeTexte) {
size = 12;
font = "Comic Sans MS";
color = "0x666666";
align = "center";
}
 
Nous utilisons un prototype qui permet de placer dans un clip un champ de texte de 400 pixels de largeur, de 20 pixels de hauteur, non sélectionnable et contenant la chaîne de caractères "texte" envoyée comme argument. Ce texte est ensuite formaté à l'aide de la fonction setTextFormat().
MovieClip.prototype.creerUnChampDeTexte = function (texte) {
var ligne = this.createTextField("texte", 0, 0, 0, 400, 20);
ligne.selectable = false;
ligne.text = texte;
ligne.setTextFormat(monFormatDeTexte);
}
 
Un autre prototype largement inspiré du tutoriel sur la technique du "easing"... d'où le nom de ce prototype.
MovieClip.prototype.easing = function() {
 
On calcule la différence entre l'intensité actuelle du flou et l'intensité souhaitée, autrement dit l'intensité "cible".
var difference = this.flouCible - this.flou;
 
On ajoute une partie de cette différence à l'intensité actuelle.
this.flou += this.coefficient*difference;
 
On utilise la classe BlurFilter pour créer un filtre.
var filtre = new flash.filters.BlurFilter(this.flou, this.flou, qualite);
 
Dans Flash 8 chaque clip est doté d'un tableau qui s'appelle filters. Pour appliquer un filtre à un clip, il suffit de définir les éléments de ce tableau.
this.filters = [filtre];
 
Si la valeur absolue de la différence est inférieure à un dixième, autrement dit si l'intensité actuelle du flou est quasiment égale à l'intensité "cible" alors on "stoppe" l'interpolation et on applique un effet de flou dont l'intensité est égale à l'intensité "cible".
if(Math.abs(difference) < 0.1) {
delete this.onEnterFrame;
this.flou = this.flouCible;
var filtre = new flash.filters.BlurFilter(this.flouCible, this.flouCible, qualite);
this.filters = [filtre];
}
 
fin du prototype
}
 
On utilise une boucle for qui permettra de placer les différentes lignes.
for(var i = 0; i <= nbrDeLignes; i++) {
 
On crée sur la scène principale un clip vide.
var mc = this.createEmptyMovieClip("ligne"+i, i);
 
On définit l'abscisse et l'ordonnée de ce clip vide.
mc._x = x0;
mc._y = y0 + hauteurDeLigne*i;
 
On place dans ce clip vide un champ de texte contenant la chaîne de caractère lignes[i].
mc.creerUnChampDeTexte(lignes[i]);
 
On définit les valeurs initiales de l'intensité du flou.
mc.flou = mc.flouCible = flouMax;
 
On utilise le prototype easing() pour rendre le texte flou dès le début de l'animation.
mc.easing();
 
Nous allons définir les instructions à suivre lorsque la souris survole la ligne i : la valeur de l'intensité du flou "cible" vaut zéro, le coefficient prend la valeur de coeffRollOver et on lance la fonction easing qui sera exécutée à chaque image.
mc.onRollOver = function() {
this.flouCible = 0;
this.coefficient = coeffRollOver;
this.onEnterFrame = easing;
}
 
On donne les instructions à suivre lorsque la souris quitte la surface définie par une ligne ou que le bouton de la souris est relâché à l'extérieur de cette zone : la valeur de l'intensité du flou "cible" devient maximale, le coefficient prend la valeur de coeffRollOut et on exécute la fonction easing à chaque image.
mc.onRollOut = mc.onReleaseOutside = function() {
this.flouCible = flouMax;
this.coefficient = coeffRollOut;
this.onEnterFrame = easing;
}
 
fin de la boucle for.
}
 
 
Accueil | Tutoriaux