Accueil | Tutoriaux

Tutoriaux : Effet lampe de poche
 

1. Introduction
 
C'est en allant regarder un des tutoriaux de Lee Brimelow que j'ai eu l'idée d'écrire ce tutoriel : j'ai décidé de réaliser une animation quasiment semblable à la sienne en n'utilisant que du code. Vous êtes dans le Grand Palais et vous avez réussi à vous faire enfermer dans une des salles contenant les oeuvres d'Egon Schiele. Enfin seul, c'est à la lumière d'une lampe de poche que vous pouvez contempler les tableaux...
 
 
Cliquez sur le tableau ci-dessus pour modifier l'éclairage de votre lampe de poche... Cette animation illustre les nouvelles possibilités de Flash 8 : désormais il est possible d'utiliser les propriétés de transparence du clip servant de masque.
 
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 325 pixels de hauteur. Ces dimensions correspondent à celles de l'image avec laquelle j'ai illustré ce tutoriel.
- Dans le panneau "propriétés du document", définissez la cadence de l'animation à 30 images par seconde.
- Importez dans la bibliothèque de votre animation l'image de votre choix. Vous n'avez aucune image d'Egon Schiele sur votre disque dur et bien dans ce cas je vous propose de télécharger ce superbe autoportrait de l'artiste.
- Créez dans votre bibliothèque un nouveau clip dans lequel vous placez une occurrence de l'image importée précédemment. Dans le panneau "propriétés de liaison", sélectionnez "Exporter pour ActionScript" et saisissez le nom "monImage" dans le champ de texte "Identifiant".
 
3. Le code
 
Dans la première image clé de la scène principale, placez le code suivant :
  
prc = 0.3;
 
a = new Array();
a = a.concat([prc, 0, 0, 0, 0]);
a = a.concat([0, prc, 0, 0, 0]);
a = a.concat([0, 0, prc, 0, 0]);
a = a.concat([0, 0, 0, 1, 0]);
 
filtreCouleur = new flash.filters.ColorMatrixFilter(a);
this.attachMovie("monImage", "image0", 0);
image0.filters = [filtreCouleur];
 
this.attachMovie("monImage", "image1", 1);
 
this.createEmptyMovieClip("masque", 2);
 
n = 50;
r = 60;
 
masque.beginFill(0, 100);
masque.moveTo(r, 0);
for (var i = 0; i<=n; i++) {
var angle = i*2*Math.PI/n;
var x = r*Math.cos(angle);
var y = r*Math.sin(angle);
masque.lineTo(x, y);
}
masque.endFill();
 
filtreBlur = new flash.filters.BlurFilter(60, 60, 1);
masque.filters = [filtreBlur];
 
image1.cacheAsBitmap = true;
 
image1.setMask(masque);
 
Mouse.hide();
 
onMouseMove = function () {
masque._x = _xmouse;
masque._y = _ymouse;
};
 
onMouseDown = function () {
masque.filters = [];
};
 
onMouseUp = function () {
masque.filters = [filtreBlur];
};
 
4. Le code avec ses commentaires
 
Cette constante est un pourcentage : plus ce pourcentage est proche de 0, plus l'obscurité qui règne dans le musée est importante. Si ce pourcentage vaut 1, nous sommes en plein jour !
prc = 0.3;
 
Nous allons avoir besoin d'un tableau qui contiendra 20 valeurs numériques.
a = new Array();
 
Au lieu de définir d'un seul coup les 20 valeurs numériques du tableau a, nous les définissons 5 par 5. La fonction concat() est très pratique et permet de concaténer des tableaux. A la fin de ces 4 lignes de code, voici à quoi ressemble notre tableau : [0.3,0,0,0,0,0,0.3,0,0,0,0,0,0.3,0,0,0,0,0,1,0]. Ce tableau permettra de redéfinir les couleurs de notre photo qui semblera dans la pénombre.
a = a.concat([prc, 0, 0, 0, 0]);//rouge
a = a.concat([0, prc, 0, 0, 0]);//vert
a = a.concat([0, 0, prc, 0, 0]);//bleu
a = a.concat([0, 0, 0, 1, 0]);//alpha
 

Le filtre ColorMatrixFilter sépare chaque pixel d'origine (la source) en composants rouge, vert, bleu et alpha comme suit : srcR, srcG, srcB, srcA, puis il associe de nouveau chaque composant de couleur pour former un pixel unique et renvoie le résultat en suivant les relations mathématiques suivantes :

rouge = a[0] x srcR + a[1] x srcG + a[2] x srcB + a[3] x srcA + a[4]
vert = a[5] x srcR + a[6] x srcG + a[7] x srcB + a[8] x srcA + a[9]
bleu = a[10] x srcR + a[11] x srcG + a[12] x srcB + a[13] x srcA + a[14]
alpha = a[15] x srcR + a[16] x srcG + a[17] x srcB + a[18] x srcA + a[19];

Les 5 premières valeurs du tableau a permettent de définir la composante rouge de l'image finale. Les 5 dernières permettent de définir la transparence de chaque pixel de l'image finale. Voilà pourquoi nous avons défini les valeurs du tableau a par "tranche" de 5 : c'est pour y voir plus clair !
filtreCouleur = new flash.filters.ColorMatrixFilter(a);
 
On place une occurrence de notre image sur la scène principale : cette occurrence s'appelle "image0".
this.attachMovie("monImage", "image0", 0);
 
On applique le filtre de couleur au clip "image0".
image0.filters = [filtreCouleur];
 
On place sur la scène principale une deuxième occurrence de notre image : cette occurrence s'appelle "image1" et vient se placer au dessus de l'image précédente.
this.attachMovie("monImage", "image1", 1);
 
On crée un clip vide dans lequel nous allons tracer un disque qui masquera le clip "image1".
this.createEmptyMovieClip("masque", 2);
 
Nous définissons le nombre "n" de points qui permettront de tracer un disque de rayon "r" à l'intérieur du clip "masque".
n = 50;
r = 60;
 
A l'aide de quelques rudiments de trigonométrie, nous traçons un polygone inscrit dans un cercle de rayon "r". Comme "n" est suffisamment grand ce polygone semble être un cercle... L'idée n'est pas de moi... Merci Archimède !
masque.beginFill(0, 100);
masque.moveTo(r, 0);
for (var i = 0; i<=n; i++) {
var angle = i*2*Math.PI/n;
var x = r*Math.cos(angle);
var y = r*Math.sin(angle);
masque.lineTo(x, y);
}
masque.endFill();
 
Nous utilisons la classe BlurFilter pour créer un effet visuel de flou que nous appliquons au clip "masque".
filtreBlur = new flash.filters.BlurFilter(60, 60, 1);
masque.filters = [filtreBlur];
 
Sans cette ligne de code, la transparence du masque serait inexistante !
image1.cacheAsBitmap = true;
 
On masque dynamiquement "image1" en prenant comme masque le disque que nous avons tracé précédemment.
image1.setMask(masque);
 
Nous cachons le curseur de la souris.
Mouse.hide();
 
Nous définissons une fonction qui sera exécutée à chaque déplacement de notre curseur. Nous plaçons le clip "masque" aux coordonnées exactes de notre curseur. Le spot lumineux semble suivre nos déplacements sur la toile du tableau.
onMouseMove = function () {
masque._x = _xmouse;
masque._y = _ymouse;
};
 
Si le bouton de la souris est enfoncé, on enlève les filtres appliqués au clip masque.
onMouseDown = function () {
masque.filters = [];
};
 
Si le bouton de la souris est relâché, on applique à nouveau le filtre BlurFilter.
onMouseUp = function () {
masque.filters = [filtreBlur];
};
 
5. Une petite variation : animation + code
 
Vous voulez éclairez le tableau avec un faisceau lumineux jaune... Il suffit de modifier légèrement le code ci-dessus en créant un prototype afin d'éviter les répétitions inutiles dans le programme.
 
  
MovieClip.prototype.colorier = function(prc0, prc1, prc2) {
var a = new Array();
a = a.concat([prc0, 0, 0, 0, 0]);
a = a.concat([0, prc1, 0, 0, 0]);
a = a.concat([0, 0, prc2, 0, 0]);
a = a.concat([0, 0, 0, 1, 0]);
var filtreCouleur = new flash.filters.ColorMatrixFilter(a);
this.filters = [filtreCouleur];
}; 
 
this.attachMovie("monImage", "image0", 0);
image0.colorier(0.3, 0.3, 0.3);
 
this.attachMovie("monImage", "image1", 1);
image1.colorier(0.7, 0.7, 0);
 
this.createEmptyMovieClip("masque", 2);
 
n = 50;
r = 60;
 
masque.beginFill(0, 100);
masque.moveTo(r, 0);
for (var i = 0; i<=n; i++) {
var angle = i*2*Math.PI/n;
var x = r*Math.cos(angle);
var y = r*Math.sin(angle);
masque.lineTo(x, y);
}
masque.endFill();
 
filtreBlur = new flash.filters.BlurFilter(60, 60, 1);
masque.filters = [filtreBlur];
 
image1.cacheAsBitmap = true;
 
image1.setMask(masque);
 
Mouse.hide();
 
onMouseMove = function () {
masque._x = _xmouse;
masque._y = _ymouse;
};
 
onMouseDown = function () {
masque.filters = [];
};
 
onMouseUp = function () {
masque.filters = [filtreBlur];
};
 
6. Quelques commentaires
 
Pour simuler un faisceau lumineux de couleur jaune, il suffit d'appliquer un filtre de couleur au clip "image1". Comme ce filtre était déjà appliqué au clip "image0" j'ai opté pour la création d'une fonction "colorier" afin d'éviter d'écrire deux fois des lignes de code quasiment identiques. Voici quelques brefs commentaires sur les "nouvelles" lignes de code de ce deuxième script.
 
La fonction "colorier" crée un filtre de couleur qui multiplie les composantes primaires du clip (à savoir le rouge, le vert et le bleu) respectivement par les coefficients prc0, prc1 et prc2. La transparence du clip n'est pas modifiée.
MovieClip.prototype.colorier = function(prc0, prc1, prc2) {
var a = new Array();
a = a.concat([prc0, 0, 0, 0, 0]);
a = a.concat([0, prc1, 0, 0, 0]);
a = a.concat([0, 0, prc2, 0, 0]);
a = a.concat([0, 0, 0, 1, 0]);
var filtreCouleur = new flash.filters.ColorMatrixFilter(a);
this.filters = [filtreCouleur];
}; 
 
Cette ligne de code permet d'appliquer le filtre de couleur au clip "image0" : on garde les composantes des 3 couleurs primaires (rouge, vert et bleu) de l'image en les multipliant par un facteur 0.3. L'image semble alors plongée dans l'obscurité.
image0.colorier(0.3, 0.3, 0.3);
 
On applique un filtre de couleur au clip "image1". Cette fois, on élimine complètement la troisième composante, à savoir le bleu (d'où le zéro en troisième argument de la fonction "colorier"). Les deux premières composantes (rouge et vert) sont multipliées par 0.7 : on donne ainsi une teinte jaune à l'image qui semble balayée par un faisceau lumineux de couleur jaune.
image1.colorier(0.7, 0.7, 0);
 
7. Vous n'aimez pas le code ?
 
Si vous n'aimez pas le code, je vous conseille la visite du site de Lee Brimelow qui utilise beaucoup plus l'interface graphique de Flash 8 et un peu moins le panneau "action" pour arriver à un résultat quasiment semblable. D'ailleurs que vous aimiez le code ou pas, dans tous les cas je vous recommande vivement d' aller voir les tutoriaux consacrés à Flash sur le site www.gotoandlearn.com : des explications claires sous la forme de petites vidéos ! La grande classe quoi...
 
 
 
 
 
 
 
 
 
Accueil | Tutoriaux