Tutoriaux : Effet de masque sur une photo

1. Introduction :

L'objectif de ce tutoriel est de détailler la réalisation de l'animation ci-dessous. Cet effet est basé essentiellement sur l'utilisation de masques sur une photo. Vous voyez 20 occurrences d'un même clip placées dynamiquement sur la scène à l'aide de la fonction attachMovie.

2. Dans la bibliothèque

0) Dans le panneau propriétés du document, définissez une largeur de 400 pixels, une hauteur de 300 pixels et une cadence de 25 images/seconde.

1) Symbole n°1 : le_masque
- Créez un nouveau symbole et nommez-le "le_masque". Sur la scène de ce clip, tracez un carré de 100 pixels de côté et centrez-le (horizontalement et verticalement). Veillez à remplir l'intérieur de ce carré à l'aide d'une couleur quelconque.

2) Symbole n°2 : la_photo
-  Créer un nouveau symbole et nommez-le "la_photo".
- Sur la scène de ce clip, importez la photo crane.jpg, centrez-la verticalement et horizontalement.
- Insérer un nouveau calque au dessus du calque précédent et placez une occurrence du symbole "le_masque" sur la scène : nommez cette occurrence"masque_mc" afin que l'on puisse modifier par la suite les propriétés de cette occurrence à l'aide du code.
- Modifier les propriétés des deux calques : le calque supérieur doit être un masque alors que le calque inférieur doit être masqué. En verrouillant les deux calques, vous ne devriez voir que la partie centrale de la photo.
- Dans le panneau propriétés de liaison du symbole "la_photo", cochez la case "Exporter pour ActionScript" et modifiez l'identifiant en saisissant le nom "photo_mc".

Avertissement : les débutants veilleront à ne pas confondre différents noms. En effet, "le_masque" est le nom du symbole n°1 dans la bibliothèque alors que "masque_mc" est le nom (de code) d'une occurrence du symbole n°1 placé dans la scène principale d'un clip... je suis certain de ne pas être clair ! N'hésitez pas à me le confirmer en m'écrivant. De même, le nom "la_photo" est un nom quelconque qui vous permet de mieux vous y retrouver dans l'organisation des symboles de votre bibliothèque. "photo_mc" est en revanche un nom qui interviendra dans la partie programmation : sa syntaxe devra être respectée rigoureusement, on pourrait dire qu'il s'agit du nom de code du symbole n°2.

3. Le code

Ci-dessous l'intégralité du code de cette animation à placer dans le calque action de la première et seule image de la scène principale.

nbr = 20;
x0 = 200;
y0 = 150;
hauteur = 260;
largeur = 350;
amplitude = 10;
angle = 0;
dangle = 2*Math.PI/50;
 
for(var i = 0; i < nbr; i++) {
var mc = attachMovie("photo_mc", "photo_mc" + i, i);
mc._x = x0;
mc._y = y0;
mc.masque_mc._width = largeur*(1 - i/nbr);
mc.masque_mc._height = hauteur*(1 - i/nbr);
mc.angle0 = i*2*Math.PI/nbr;
mc.onEnterFrame = deplacement;
}
 
function deplacement() {
this._x = x0 + amplitude*Math.cos(angle + this.angle0);
}
 
onEnterFrame = function() {
angle += dangle;
}

4. Quelques variations

Il est ensuite facile de réaliser des modifications de cette animation : changer les valeurs numériques des variables nbr, amplitude et/ou dangle permet d'obtenir des effets complètement différents. Attention : l'augmentation de nbr risque de demander trop de calculs à votre ordinateur, soyez raisonnable !

On peut évidemment ajouter des glissières pour permettre à l'internaute de modifier lui même ces paramètres... Il s'agit de l'animation suivante.

Selon la photo et l'effet recherché, il est préférable de prendre un masque circulaire ou triangulaire : laissez libre cours à votre imagination débordante !