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
  • Interface, Info bulle, Spry Data Set et CSS sur Dreamweaver CS4

    Interface, Info bulle, Spry Data Set e…

    Jean-Luc Delon  |
    42 700

    Dreamweaver CS4

  • Animation en plein écran en AS3

    Animation en plein écran en AS3

    Jean-Luc Delon  |
    18 467

    Flash CS4

  • Cookie Flash

    Cookie Flash

    Jean-Luc Delon  |
    2 854

    Flash CS4

  • Animation multi plans

    Animation multi plans

    Jean-Luc Delon  |
    21 257

    Flash CS3

  • Galerie vidéo

    Galerie vidéo

    Jean-Luc Delon  |
    26 357

    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