La parallaxe est l’incidence du changement de position
de l’observateur sur l’observation d’un objet.
Ce mot apparait au XVIe siècle,
emprunté au grec παράλλαξις, qui signifie « déplacement contigu ; parallaxe ». sources : Wikipédia
L’effet parallaxe
Je me suis amusé à reproduire cet effet avec une de mes photos. La technique consiste à découper une photo à l’aide d’un outil de retouche photo selon les plans qui la composent. Chaque image exportée doit présenter la même taille que la taille de l’image originale. On utilise un outil de détourage pour isoler les plans les uns des autres. Ainsi on obtient une série d’images contenant chacune le plan et le reste de l’image transparente.
Un peu de flash et d’actionscript
Une fois les différentes images importées dans un document flash, il suffit de créer autant de clips que d’images.
Dans mon animation, j’utilise 4 images : une image sans modification, une image pour le danseur suspendu dans les airs, une image pour le parvis et les spectateurs et enfin une image pour l’horizon parisien.
On crée donc un clip par image dans lequel on glisse l’image correspondante centrée horizontalement et verticalement par rapport au centre de l’image.
On crée un clip « conteneur » qui contient les 4 clips posés chacun sur un calque. Le premier plan est bien sûr posé sur le calque le plus haut. On nomme chaque occurrence de clip par un nom concaténé avec un chiffre en partant de 1.
Ici je les ai nommés « p_1″, « p_2″, « p_3″. Le dernier, je ne le nomme pas car il ne sera pas pris en compte dans les déplacements de plans. Ce dernier plan est là pour faire un fond au cas où certains plans ne se chevaucheraient pas assez, laissant découvrir du vide.
Une fois ce clip conteneur créé, il suffit de le déposer sur la scène principale et de lui donner un nom d’occurence. Ici je l’ai appelé « cont_mc ». Sur un nouveau calque , on écrit le scrit suivant:
this.cont_mc.onMouseMove = function() {
for (var i = 1; i<=3; i++) {
var mc = this["p_"+i];
var x = -i*(this._xmouse/70);// modifier 70 par la valeur souhaitée en fonction de la taille de la photo.
var y = -i*(this._ymouse/70);// modifier 70 par la valeur souhaitée en fonction de la taille de la photo.
mc._x = x;
mc._y = y;
}
};
Voilà, le tour est joué. Cette page n’est pas vraiment un tutoriel, je donne ces indications comme une piste à suivre, afin de vous creuser un peu la tête sur les zones qui vous paraissent floues.
Bonjour, serait il possible d’avoir la version AS3 ?
Merci d’avance…
salut, avec un peu de retard voici la version AS3
package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class Container extends MovieClip
{
public var p_0 :MovieClip;
public var p_1 :MovieClip;
public var p_2 :MovieClip;
public var p_3 :MovieClip;
public var items_arr :Array:[];
//=================================================================
// fonction constructor
//=================================================================
public function Container():void
{
trace(this + » :: Container »);
init();
}
//=================================================================
// fonction init
//=================================================================
public function init():void
{
trace(this + » :: init »);
var i :uint = 0;
var mc :MovieClip;
for (i; i < 4; i++ ){
items_arr.push(this["p_" + i]);
}
addEventListener(MouseEvent.MOUSE_MOVE, doParallaxe);
}
//=================================================================
// fonction doParallaxe
//=================================================================
public function doParallaxe(event:MouseEvent):void {
trace(this + " :: doParallaxe" +event.currentTarget.mouseX);
var i :uint = 0;
var mc :MovieClip;
var xpos :Number;
var ypos :Number;
for (i; i < items_arr.length; i++)
{
if (i > 0)
{
mc = items_arr[i];
xpos = -(Number(i + 1) * (event.currentTarget.mouseX / 250));// modifier 70 par la valeur souhaitée en fonction de la taille de la photo.
ypos = -(Number(i + 1) * (event.currentTarget.mouseY / 250));// modifier 70 par la valeur souhaitée en fonction de la taille de la photo.
mc.x = xpos;
mc.y = ypos;
}
}
}
}
}