Accueil | Tutoriaux

Tutoriaux : Création d'un masque avec un effet de flou
 

1. Introduction
 
Flash 8 présente de nombreuses nouvelles possibilités. Dans ce tutoriel je vous propose d'utiliser la classe BlurFilter qui permet désormais de créer des effets de flou. Observez l'animation ci-dessous et déplacez votre souris vers le centre de l'image : à chaque déplacement du curseur un flou est appliqué à un clip contenant un cercle, ce cercle étant lui même utilisé comme un masque sur une photo. Je vous propose dans les lignes suivantes de vous détailler la réalisation de cette animation... C'est parti !
 
2. Dans la bibliothèque
 

- Ouvrez flash 8 et créez un nouveau document de 250 pixels de largeur et de 250 pixels de hauteur. Dans le menu Fichier, définissez les Paramètres de publication en sélectionnant la version "Flash Player 8" : si vous publiez l'animation que nous allons détailler pour une version antérieure du Flash Player, vous n'obtiendrez pas l'effet de flou désiré !
- Dans la bibliothèque de l'animation (F11) insérez un nouveau clip que vous nommerez "image". Sélectionnez les commandes suivantes : "Fichier-Importer-Importer dans la scène" et parcourez votre disque dur à la recherche d'une image au format jpeg. Centrez cette image horizontalement et verticalement à l'aide du panneau "aligner". Si vous êtes un amateur de fleurs, je vous propose de télécharger l'image utilisée dans l'animation ci-dessus en cliquant sur ce lien !
- Créez un nouveau clip que vous nommerez "cercle". Dans ce clip, tracez un cercle de rayon quelconque et de la couleur de votre choix. Centrez ce cercle horizontalement et verticalement.
 
3. Sur la scène principale
 
- Sur la scène principale, placez une occurrence du clip "image". Centrez ce clip horizontalement et verticalement puis dans le panneau "propriétés" nommez cette occurrence "image_mc".
- Sur la scène principale, placez une occurrence du clip "cercle". Centrez ce clip horizontalement et verticalement puis dans le panneau "propriétés" nommez cette occurrence "cercle_mc".
 
4. Le code
 
Dans le panneau "action" de l'image clé n°1, placez le code ci-dessous.
  
rayon = 100;
cercle_mc._height = cercle_mc._width = 2*rayon;
image_mc.cacheAsBitmap = true;
dir0 = 50;
dir1 = 5;
qualite = 1;
blur =new flash.filters.BlurFilter(dir0, dir0, qualite);
image_mc.setMask(cercle_mc);
cercle_mc.filters = [blur]; 
 
onMouseMove = function() {
var x = cercle_mc._xmouse;
var y = cercle_mc._ymouse;
var dist = Math.sqrt(x*x+y*y);
if(dist > rayon) {dist = rayon;}
var dir = dir1 + dist/rayon*(dir0 - dir1);
blur.blurX = blur.blurY = dir;
cercle_mc.filters = [blur];
}
 
5. Le code avec ses commentaires
 
Le paramètre rayon nous permet de définir le rayon du cercle qui masquera la photo. Ce paramètre sera également utilisé pour définir l'intensité du flou en fonction de la distance entre le curseur et le centre de la photo.
rayon = 100;
 
On utilise les propriétés _height et _width de l'occurrence cercle_mc pour modifier la largeur et la hauteur de ce clip.
cercle_mc._height = cercle_mc._width = 2*rayon;
 

Cette ligne permet de placer en mémoire cache une version bitmap interne du clip image_mc. Sans cette ligne de code l'effet ne fonctionne pas ! Testez cette affirmation en ajoutant // en début de ligne, puis en publiant l'animation...
image_mc.cacheAsBitmap = true;
 
Ce paramètre est l'intensité du flou au chargement de l'animation ou lorsque le curseur est éloigné du centre de l'image.
dir0 = 50;
 
Ce paramètre est l'intensité du flou lorsque le curseur est au centre de l'image : dir1 < dir0... le flou augmente à mesure que le curseur s'éloigne du centre de l'image.
dir1 = 5;
 
Flash 8 propose plusieurs types de flou : un flou assez doux (qualite = 1) ou gaussien (qualite = 3).
qualite = 1;
 

On utilise la nouvelle classe BlurFilter : BlurFilter([blurX:Number], [blurY:Number], [quality:Number])
blurX et blurY sont respectivement le montant du flou horizontal et vertical.
Dans cet exemple, j'ai choisi des montants égaux dans les deux directions.
blur =new flash.filters.BlurFilter(dir0, dir0, qualite);
 
Cette ligne fait du clip cercle_mc un masque du clip image_mc. Ajoutez // en début de ligne et publiez l'animation pour observer l'effet de flou appliqué au cercle.
image_mc.setMask(cercle_mc);
 
On applique le filtre blur que nous venons de créer au clip cercle_mc.
cercle_mc.filters est un tableau qui doit contenir la liste de tous les filtres que l'on veut appliquer au clip cercle_mc. On peut en effet appliquer simultanément plusieurs filtres à un même clip !!
cercle_mc.filters = [blur];
 
On définit une fonction qui sera exécutée lors des déplacements du curseur.
onMouseMove = function() {
 
x et y définissent les coordonnées du curseur par rapport au clip cercle_mc.
var x = cercle_mc._xmouse;
var y = cercle_mc._ymouse;
 
A l'aide du théorème de Pythagore, on calcule la distance entre le curseur et le centre du cercle... Rappel : dans un triangle rectangle, le carré de l'hypoténuse est égal à la somme des carrés des deux autres côtés. Ben ça sert les maths, parfois !
var dist = Math.sqrt(x*x+y*y);
 
On fait en sorte que le paramètre dist soit toujours inférieur à la valeur du rayon.
if(dist > rayon) {dist = rayon;}
 
La variable dir qui permet de définir le nouveau montant du flou horizontal et vertical. Une petite étude mathématique vous permettra de voir que la valeur de dir reste comprise entre celles de dir1 et dir0. Lorsque dist vaut 0 (le curseur est au centre du cercle) dir vaut dir1 (le flou est léger) tandis que lorsque dist vaut rayon (le curseur est à l'extérieur du cercle) dir vaut dir0 (l'intensité du flou est forte). Ce genre d'équation fait appel aux connaissances de 3ème et de seconde générale sur les fonctions affines... On me demande souvent des ouvrages de référence en maths : des manuels scolaires du lycée, y a pas mieux :=)
var dir = dir1 + dist/rayon*(dir0 - dir1);
 
On redéfinit le montant horizontal et le montant vertical du flou.
blur.blurX = blur.blurY = dir;
 
Ne pas oublier d'appliquer à nouveau ce filtre à notre cercle ! Chaque fois qu'un filtre est modifié, il faut à nouveau l'appliquer au clip pour observer les effets.
cercle_mc.filters = [blur];
 
Fin de la fonction onMouseMove et du tutoriel...
}
 
 
Accueil | Tutoriaux