Animation parallaxe - Wisibility
Animation parallaxe

Animation parallaxe

Flash CS3

 07 novembre 2008
Jean-Luc Delon
1090720470
Cette technique permet de surprendre le visiteur en liant au mouvement de la souris le déplacement de plans tant sur l'axe vertical que sur l'axe horizontal recréant ainsi le monde réel. Vous apprendrez aussi à régler l'amplitude du déplacement des plans les uns par rapport aux autres. Cette animation est réalisable avec très peu de ligne de code tant en AS2 qu'en AS3. Le code exemple est en AS2
Obtenir Adobe Flash Player

17Commentaires

Jean-Luc Delon  | 2008-11-07 13:59:11

Bonjour,

En complément du présent tutorial voilà le code commenté, intégral, en AS2 et en AS3.

Bon courage....


AS2

//Gestion du déplacement de la souris
boite.onMouseMove = function(Void):Void {
//Plus petite valeur = plus grande amplitude dans les mouvements
var deplaceH:Number = 10;
var deplaceV:Number = 15;
//Nombre de plan a animer
var nbrPlan:Number = 4;
//Deplacement des plans
for (var i:Number = 0; i<=nbrPlan; i++) {
//Facilité d'écriture
var MCAnim:MovieClip = boite["p_"+i];
//Position du ieme plan par rapport à la distance entre la souris et le point d'accroche du MC boite
MCAnim._x = boite._xmouse/(deplaceH*(nbrPlan-i));
MCAnim._y = boite._ymouse/(deplaceV*(nbrPlan-i));
}
};


AS3

//animation des plans
function animation(evenement:Event):void {
var deplaceH:Number = 10;
var deplaceV:Number = 15;
var nbrPlan:Number = 4;
//balayage des plans
for (var i:Number = 0; i<=nbrPlan; i++) {
//Recuperation du plan a animer
var MCAnim:MovieClip = boite["p_"+i];
//Calcul de la nouvelle position x du plan par rapport a la distance entre le point d'accroche du container et la position de la souris.
MCAnim.x = boite.mouseX/(deplaceH*(nbrPlan-i));
//Calcul de la nouvelle position y du plan
MCAnim.y = boite.mouseY/(deplaceV*(nbrPlan-i));
}
};
//Appel a la fonction animation dès que la souris bouge
boite.addEventListener(MouseEvent.MOUSE_MOVE, animation);



Tim  | 2008-11-07 17:55:52

Source intéressante, par contre la parallaxe abordée telle quelle est erronée.

Il s'agit là d'un effet "rotation autour de l'indienne", et comme l'image est 2D,le rendu semble faux. La source du problème, c'est que les clips du fond se déplacent plus rapidement que ceux de devant, alors que normalement pour un vrai effet de parallaxe, on déplace plus rapidement les clips de devant, et de cette façon on recrée vraiment un effet de travelling.

C'est entre autre la raison pour laquelle on a l'impression que la lune ne bouge pas quand nous nous déplaçons.

Jean-luc Delon  | 2008-11-07 18:03:51

Oui en effet mais dans le cas inverse la tête du mouflon se détache du corps. ;-(

Pour inverser le mouvement et reproduire un effet de parallaxe plus réel il suffit d'inverser la numérotation des plans.

Tim  | 2008-11-07 19:22:00

Ah en effet. LOL
Sinon il reste la bonne vieille méthode du coefficien.
Définir une profondeur factice pour chaque MovieClip, du style

gazon.profondeur = 20
indienne. profondeur = 50
moufflon. profondeur = 70

Il reste plus qu'à diviser le déplacement des clips selon le coefficient, ce qui va ralentir les clips dont la profondeur est la plus élevée. Ca permet d'ailleurs gérer précisément le décalage entre chaque plan.


Un excellent site d'ailleurs qui utilise cet effet :
www.highlife.fr/

Jean-Luc Delon  | 2008-11-07 19:29:06

Sympa le site :-D

Pour que le système fonctionne bien visuellement il faut aussi prévoir un premier plan plus large que le dernier plan.

stealx  | 2008-11-10 19:40:10

Merci pour votre tuto. Je suis novice en ActionScript et j'ai réussi a faire l'animation. Que du plaisir. Encore une fois merci, et c'est un régal de vous lire tous les jours.

Kola  | 2008-11-13 18:46:12

ben mince...
Est-ce le sujet sur la parallaxe que j'avais lancé sur le forum qui est à l'origine de ce tuto? RMistral était venu à mon secours...
Je suis fier de moi! ça veut dire que je pose les bonnes questions! LOL

Jean-Luc Delon  | 2008-11-14 06:15:30

Ben oui ....
Mais le tuto était déjà dans les cartons de Wisi avant ta question. Il n'empêche que c'est une bonne question LOL

salomon  | 2009-02-22 22:34:07

superbe tuto !!
j'ai essayé d inversser les numeros des plans pour un effet + réaliste et ça marche !!
juste un soucis ennuyeu, dans les 2 cas tous mes plans s'anniment autour de leur propre centre, ducoup si j'utilise une grande image au premier plan elle recouvre celle qui sont en desous .j' ai du forcément louper qqchose 8-O

Jean-Luc Delon  | 2009-02-27 06:40:41

Bonjour,

Il faut utiliser des images au format png avec de la transparence et les calibrer de telle sorte que chaque image recouvre partiellement l'image précédente.

Bon courage....

kokopelli  | 2009-06-30 11:53:17

Bonjour !! Très bon tuto merci !!!
J'aurais tout de fois une question !!!
Voilà j'ai suivit le tuto et ça marche correctement ! par contre.... Toutes mes images se centre et se recouvre les une les autres. Esque quelqu'un aurait une idée pour résolve mon problème??
Merci d'avance !!

oldelaff  | 2009-09-21 11:21:09

Bonour!
J'ai suivi ce tuto bien expliqué et je suis débutant en AS et lorsque je fais un test de l'animation, l'animation est bonne, mais j'ai un message d'erreur...

TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.

Ce message se répète indéfiniment dés que je bouge ma souris sur le plan bien évidemment...Je ne sais ce que j'ai fait, et je n'arrive pas à le corriger. Mon projet est en AS3!
Merci d'avance ;)

Jean-luc Delon  | 2009-12-03 07:50:26

Bonjour,

Le message vient du fait que la boucle fait un tour de trop.

Il faut remplacer : for (var i:Number = 0; i<=nbrPlan; i++) {
par : for (var i:Number = 0; i<nbrPlan; i++) {

et voilà......

thelud  | 2010-05-13 12:01:10

il n'y aurait un soucis dans ton code de remplacement (c'est le même)

Il faut remplacer : for (var i:Number = 0; i<=nbrPlan; i++) {
par : for (var i:Number = 0; i<nbrPlan; i++) {

thelud  | 2010-05-13 12:07:12

autant pour moi j'avais pas vu le = (discret le bougre) ^^

twistytwist  | 2010-06-07 21:27:17

Pour ma part j'ai un problème qui semble n'apparaitre sur aucun forum, pourtant toute les personne que je connais ayant employé ce médium ont eu le meme souci,
le contenu de mon movie clip "boite" se retrouve en bas a droite de mon écran au passage de la souris. Je suis en AS2, et j'ai scrupuleusement suivi toute les étapes, auriez déja vous rencontré ce problème ?

sohoo  | 2011-10-14 14:51:50

super merci !

 Vous aussi, commentez l'article

  • Autres tutoriels du formateur
  • Galerie photo

    Galerie photo

    Jean-Luc Delon  |
    48 769

    Flash CS3

  • Cookie Flash

    Cookie Flash

    Jean-Luc Delon  |
    2 822

    Flash CS4

  • Animation parallaxe

    Animation parallaxe

    Jean-Luc Delon  |
    26 037

    Flash CS3

  • Interface, Gestion 3D, Kinematic inverse

    Interface, Gestion 3D, Kinematic inver…

    Jean-Luc Delon  |
    40 061

    Flash CS4

  • Galerie vidéo

    Galerie vidéo

    Jean-Luc Delon  |
    26 301

    Flash CS3


  • Remonter en haut du tutoriel

    Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
    Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
    Contact - Wisibility est une marque déposée

    Blog - Tutoriels - Wisi TV - Forum