Rangé dans Pas à pas Flash CS3 |
Posté par Bertrand Biss | Lien permanent
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
 |
Durée : 9:25 Auteur : Jean-Luc Delon |
 |
Créer un mur vidéo avec le réplicateur Motion Florence Curtet |
 |
Bridge, piles et filtres Photoshop CS5 Frédéric Perpere |
 |
Recherches personnalisées dans Google Chrome Internet Stéphane Baril |
 |
Lissage de courbes avec Ease&Wizz After Effects Nicolas Doretti |
Contact - Wisibility est une marque déposée - Mentions légales
infos - inspiration - rendez-vous - logiciels materiels - tutoriels gratuits - formations en ligne - forums - galeries - glossaire - wisi tv
Propulsé par Dotclear
Drupal 7 - Les fondamentaux
Photoshop Elements 10 - Les fondamentaux
Premiere Elements 10 - Les fondamentaux
Les calques de forme dans After Effects
Ateliers créatifs avec Adobe Flash Vol. 2
Contacts
Newsletter
Twitter
RSS
RSS des commentaires
Podcasts des tutoriels
Commentaires
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);
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.
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.
Ah en effet.
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/
Sympa le site
Pour que le système fonctionne bien visuellement il faut aussi prévoir un premier plan plus large que le dernier plan.
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.
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!
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
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
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....
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 !!
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
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à ......
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++) {
autant pour moi j'avais pas vu le = (discret le bougre) ^^
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 ?
super merci !