Tutorial Flash : Animation multi plans

7475 vidéos de formations wisibility.com/WE

« Un chien poisson pour Noël… - Web Design n°3 est disponible en kiosque ! »

29 décembre
2008

Tutorial Flash : Animation multi plans

Rangé dans Pas à pas Flash CS3 | Posté par Bertrand Biss | Lien permanent

Niveau initiation

Voir la vidéo

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

Durée : 07:53
Auteur : Jean-Luc Delon

Commentaires

kola Le 29-12-08 (13:29) 1

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 Le 29-12-08 (20:52) 2

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

jorge Le 30-12-08 (14:22) 3

très bon

Jean-Luc Delon Le 31-12-08 (12:11) 4

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......

http://www.aexpmil.com

Soda Le 04-01-09 (22:55) 5

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 Le 09-02-09 (10:37) 6