Animation multi plans - Wisibility
Animation multi plans

Animation multi plans

Flash CS3

 29 décembre 2008
Jean-Luc Delon
1090720470
Cette animation permet de recréer l'effet que vous pouvez observer quand vous êtes dans un train et que vous regardez le paysage par la fenêtre. Cette technique inventée par Monsieur Walt Disney pour Blanche Neige est ici mise au goût du jour avec Flash. Vous apprendrez à gérer le déplacement de plusieurs plans et à créer une animation en boucle sans raccord visible. Le code ActionScript 2 utilisé ici est très concis et peut être très facilement converti en AS3
Obtenir Adobe Flash Player

8Commentaires

kola  | 2008-12-29 13:29:27

Tuto super bien expliqué, merci beaucoup!
J'aime beaucoup le petit plus historique! ;-)
J'ignorais que Walt Disney était à l'origine de cet effet. Ca peut paraitre anodin à d'autres, mais moi j'aime bien connaitre ce genre de petits détails.

lahune  | 2008-12-29 20:52:07

vraiment bien. Net, concis et complet. On en veut d'autres ! Merci.

jorge  | 2008-12-30 14:22:01

très bon :-)

Jean-Luc Delon  | 2008-12-31 12:11:34

Bonjour,

Merci de regarder mon petit tutoriel.

Je rajoute le code en AS3 qui est très voisin dans le principe.

//Fonction d'animation
function AnimPlan(NomDuPlan:Event):void {
//Récupere le nom du MovieClip à manipuler
var PlanActuel:MovieClip = NomDuPlan.currentTarget
//Déplace de vitesse pixels
PlanActuel.x -= PlanActuel.vitesse;
//Si nous sommes à la moitié de la taille du plan
if (PlanActuel.x<=-PlanActuel.width/2) {
//Repositionne le plan
var difference:Number = PlanActuel.x-(-PlanActuel.width/2);
PlanActuel.x = difference;
}
};
//Réglage des vitesses des plans par attribution d'une nouvelle propriété
FondRue.vitesse = 2;
Sol.vitesse = 3;
Lampadaires.vitesse = 4;
Voitures.vitesse = 8;
SolDevant.vitesse = 14;
//appel a la fonction d'animation à la cadence de 1/25 de seconde
FondRue.addEventListener(Event.ENTER_FRAME,AnimPlan);
Sol.addEventListener(Event.ENTER_FRAME,AnimPlan);
Lampadaires.addEventListener(Event.ENTER_FRAME,AnimPlan);
Voitures.addEventListener(Event.ENTER_FRAME,AnimPlan);
SolDevant.addEventListener(Event.ENTER_FRAME,AnimPlan);

Bonne fêtes a toutes et a tous......

Soda  | 2009-01-04 22:55:20

On peut relier ça à MouseX et faire des sites très intéressants basé sur cet effet de parallax. Pour de meilleures performances, avec beaucoup de calques, il peut-être utile de créer un Array avec tous les calques à animer et de traiter cet array dans la fonction de l'enterframe.

braincut  | 2009-02-09 10:37:17

Un grand merci !

J'en ai fait une petite animation rapide ... à perfectionner !

><www.nature-graphique.com/...

boardingnow  | 2009-05-31 04:57:31

Merci explications clairs tres bon tuto

Damien  | 2010-08-12 20:47:39

bonjour
j'ai l'erreur suivante
vous pouvez m'aiguiller ?

1118: Contrainte implicite d'une valeur du type statique Object vers un type peut-être sans rapport flash.display:MovieClip.

a bientot

 Vous aussi, commentez l'article

  • Autres tutoriels du formateur
  • Galerie photo

    Galerie photo

    Jean-Luc Delon  |
    49 116

    Flash CS3

  • Script déplacement rotation

    Script déplacement rotation

    Jean-Luc Delon  |
    28 297

    Flash CS3

  • Interface, Gestion 3D, Kinematic inverse

    Interface, Gestion 3D, Kinematic inver…

    Jean-Luc Delon  |
    40 303

    Flash CS4

  • Animation multi plans

    Animation multi plans

    Jean-Luc Delon  |
    21 402

    Flash CS3

  • Interface, Info bulle, Spry Data Set et CSS sur Dreamweaver CS4

    Interface, Info bulle, Spry Data Set e…

    Jean-Luc Delon  |
    42 870

    Dreamweaver CS4


  • 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