Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Parallax scrolling (défilement différentiel), sans les math - de A à Z

Compatible Flash. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash Professionnel. Priorité aux techniques d'animation, de dessin et recours minimum à ActionScript.. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par dldler (Didier Durandet), le 09 février 2011

Bonjour à tous.

Objectif

Aujourd'hui au menu, un monument des effets réalisés en flash : le famous effet parallaxe.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Notre objectif est le suivant :

Réaliser un effet parallaxe en limitant l'usage du code et des math au strict nécessaire, grâce à un usage pertinent de la scène.

Avant même d'oser une définition, voici les prérequis pour suivre ce tutoriel.

Pré-requis

Pour suivre ce tutoriel vous avez juste besoin de maîtriser les points suivants.

  • Définir l'échelle d'un movie-clip
  • Définir la position d'un movie-clip
  • Insérer un movie-clip à l'intérieur d'un autre movie-clip
  • Savoir comment ajouter un peu de code Actionscript au document

En somme, quelques manipulations de base. Rien de bien sorcier, je crois. Il vous faudra par la suite adapter le code à votre projet, mais il est très simple et je vous l'expliquerai abondamment.

Mise en garde

Juste pour info, je suis un bavard impénitent et je prends le temps de tout expliquer aussi précisément que possible. C'est certes agréable pour un élève, surtout débutant, mais la longueur du tutoriel pourrait aussi vous effrayer. Rassurez-vous. Tout ce qui suit est d'une simplicité enfantine et se résume à pas grand-chose une fois assimilé. :)

Passons donc à la définition du parallaxe.

La définition

En voici une, trouvée sur wikipédia.fr, à l'entrée “Défilement parallaxe” (celui qui nous intéresse).

Le défilement parallaxe, parallax scrolling en anglais, est le déplacement d'un calque de décors dans un jeu vidéo en deux dimensions.

Voui. En français : Quand vous vous déplacez en voiture, regardez par la fenêtre latérale. La haie, au bord de la route, défile rapidement. Les maisons, un peu plus loin, défilent plus lentement. Les collines, derrière le village, encore plus lentement, et, au fond, l'horizon ne se déplace que très peu.

Voilà ce que veut reproduire le défilement parallaxe. Un effet de profondeur, par le déplacement relatif de différents plans.

L'usage

L'effet parallaxe est à l'origine un effet reproduisant la perspective, comme l'exemple présenté au début de cette page, et que nous allons développer au fil de ce tutoriel.

Mais il est souvent utilisé de façon plus graphique, ce qui lui donne pas mal de cachet, comme ici (ou là) :

Maracoudja

i10 Communication

Ecoute ta nature

Manoush

La réalité

Il est important de bien comprendre la réalité pour profiter de ce qui va suivre : une simplification radicale du problème (et donc du code).

Je viens avec vous m'installer dans votre voiture. Si vous m'y autorisez. Merci. :)

Avancez de 100 m.

Qu'a fait la haie ? Elle a reculé, oui. Et de combien… 100 m ? C'est exact.

Et le village ? … ? Vous hésitez ? Vous ne devriez pas. 100 m aussi.

Les collines ? L'horizon ? 100 m… oui.

Allez-y, je sais que vous avez une question qui vous démange…

Mais, la haie avance bien plus vite que les maisons, non ?

Non. C'est vous qui vous déplacez, de 100 m, dans une direction. Tous les objets de votre environnement sont donc situés maintenant à 100 m, dans l'autre direction.

Ce qui est vrai, c'est que ces 100 m “paraissent” plus petits… Pourquoi ? Parce qu'ils sont plus loin. Évidemment.

Il n'est peut-être pas inutile de rappeler cette célèbre illusion d'optique.

Un classique

Me direz-vous que ces 2 personnages sont de la même taille, ou de taille différente ?

(On me glisse à l'oreille que l'illusion n'est pas ici très sensible, OK. Mais nous retrouverons cet exemple un peu plus loin dans ce tutoriel, aussi je le laisse. Si vous voulez voir une version plus puissante de cette illusion, allez faire un tour chez 123opticalillusions).

Quoi qu'il en soit, la bonne réponse est :

  • Ils sont de la même taille.
  • Ils paraissent de tailles différentes.

Car notre cerveau s'adapte très naturellement à cette vision-ci :

Ici, plus d'illusion :

  • Ils sont de tailles différentes.
  • Ils paraissent de même taille.

… Et là, nous venons de plonger dans une notion importante : la perspective.

Loin des yeux…

… Petit en perspective. Voilà le secret.

Ce qui s'éloigne nous apparaît plus petit. Si je veux représenter quelque chose au loin, je le réduis. Si je veux le rapprocher, je l'agrandis.

Ce qui est vrai pour un personnage est tout aussi vrai pour les 100 m que vous avez parcourus avec votre voiture.

Les 100 m de la haie, qui est proche, paraissent grands. Les 100 m de la colline, qui est loin, paraissent petits.

Reproduisons le phénomène

Posons notre objectif : peut-on, dans Flash, faire aussi simple que dans la réalité ? Déplacer tous nos éléments d'une même distance (un même nombre de pixels) et pour autant, avoir cet effet plus ou moins grand selon l'éloignement ? Au premier abord, ça semble impossible. Et pourtant…

Suivez-moi…

Dessinez un personnage, un arbre, ou récupérez cette image si vous n'êtes pas inspiré: personnage.png

Importez dans Flash, collez le sur la scène, sélectionnez le et créez aussitôt un symbole dans la bibliothèque à l'aide de la touche F8. Sur la scène, nous avons maintenant une instance de ce symbole. Nous l'appellerons le “personnage”, retenez bien cette information.

Toujours sur la scène, sélectionnez le “personnage”. Faites à nouveau F8 pour créer un nouveau symbole dans la bibliothèque. Sur la scène, nous avons maintenant une instance de ce symbole que nous appellerons “planPersonnage”.

A ce stade, nous avons sur la scène un “planPersonnage” et dans “planPersonnage”, un “personnage”. Si je vais trop lentement, dites-le moi :-) mais je le fais pour être sûr que vous ayez une bonne vision d'ensemble. Cette double coquille autour du dessin du personnage est le socle du principe.

Doublons la mise

Toujours sur la scène, ajoutons une autre instance de “planPersonnage”. Vous avez le choix pour la technique : copiez-collez celle qui est déjà présente, ou déposez le symbole présent dans la bibliothèque de votre projet.

Appliquez lui une échelle dans le panneau transformation : par exemple 50%. Déplacez-le pour qu'il ne soit pas sur l'autre personnage. Vous verrez mieux ce qui va se passer.

Si vous avez un doute, voici où vous devriez en être:
personnage-base-cs3.fla

Double-cliquez sur le grand “planPersonnage”, celui qui est à 100%. Cela vous permet d'éditer le symbole de la bibliothèque. Vous y êtes ?

Action

Sélectionnez le personnage présent, déplacez-le vers la droite ou la gauche : qu'observez-vous ?

Le 2ème personnage se déplace aussi, normal. Mais dites-moi, il se déplace comment… Alors, plus ? Moins ? Hé, hé. Vous êtes d'accord qu'il se déplace normalement autant. C'est le principe même de Flash : un symbole dans la bibliothèque, autant d'occurrences (de copies) que l'on veut. Quand on modifie une occurrence sur la scène, en vrai on modifie le symbole et toutes les occurrences se retrouvent modifiées de la même façon. Mais, dans notre cas, comme une occurrence est affichée en réduction, elle se déplace “moins”… sur l'écran.

S'il vous reste un doute, vérifiez par vous-même. Notez les coordonnées du personnage que vous venez de déplacer (les coordonnées se trouvent dans le panneau propriétés). En double cliquant dans le vide, revenez sur le scénario principal. Puis, double-cliquez sur l'autre “planPersonnage”. Sélectionnez le “personnage”. Quelle est sa position ? Exactement la même que celle de son camarade.

Pour ceux qui ne sont pas assez curieux, n'ont pas le temps de mettre la main dans la pâte, ou tout autre mauvaise raison, voici une petite simulation.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Conclusion

Ça y est, nous avons reproduit le phénomène : quand nous déplaçons nos 2 personnages de 100 pixels (c'est un exemple), celui qui est affiché à 100% se déplace apparemment davantage que celui qui est affiché à 50%. Et tout ceci sans calcul mathématique, formule savante, sinusite ou hypothénusite aiguë. C'était mon objectif ;-). L'échelle de nos clips “plan” joue exactement le même rôle que l'éloignement dans la vraie vie. Si nous voulons nous déplacer dans notre parallaxe, nous pouvons le faire en déplaçant tous les éléments intérieurs aux plans d'une seule et même distance.

Allez, on le code…

Pas de panique, vous allez voir

Évidemment, déplacer notre personnage dans Flash lui-même, à la main, n'a pas beaucoup d'intérêt. Il faudrait le faire par le code.

Il faudrait faire quoi exactement ?

Positionner le personnage de chacun des plans à 100 pixels, par exemple… Rien de difficile. Pour cela nous devons “nommer” nos clips dans le panneau propriété. C'est une condition nécessaire pour pouvoir les désigner dans le code.

  1. Il faut éditer le symbole “planPersonnage” dans la bibliothèque (vous pouvez double cliquer sur l'une des occurrences présentes sur la scène, c'est pareil). Sélectionnez le “personnage” et donnez-lui un nom. Que diriez-vous de “personnage” ? ;-) Ça se fait dans le champ “nom de l'occurrence” du panneau “propriétés”.
  2. Il faut revenir sur le scénario principal et nommer nos plans. Je vous propose “plan1” et “plan2”. Pour chaque plan, sélectionnez-le, allez dans le champ “nom de l'occurrence” du panneau “propriétés” pour lui donner son nom.
Je suis prêt. Quel est le code ?

Il est très simple :

plan1.personnage.x += 100;
plan2.personnage.x += 100;

Pour visualiser, il faut compiler. Dans le menu “Contrôle” choisissez “Tester l'animation”, ou, au clavier : Commande Entrée. Testez plusieurs fois en changeant la valeur : -300, 400, 1000…

Si vous avez vraiment besoin d'explications (y a pas de honte), un petit topo, sinon, passez directement au chapitre suivant.

Décomposons la première ligne :

plan1.personnage

Ce code “pointe” vers un personnage. Ici, le personnage du clip que nous avons nommé plan1.

plan1.personnage.x

De la même façon ce code pointe vers la propriété x (la position horizontale) du “personnage” de l'occurrence “plan1”.

Et pourquoi +=5 ?

Le += est un petit raccourci pour ajouter une valeur à une autre. Par exemple, ajouter 5 à x :

x+=5;

La version étendue serait celle-ci :

x = x+5;

Vous ne voyez pas trop l'avantage ? C'est normal sur une ligne aussi simple. Revenons à notre code, c'est un peu plus parlant…

plan1.personnage.x += 100
// ou
plan1.personnage.x = plan1.personnage.x + 100

Voyez ? Dès que l'on pointe, c'est assez agréable de ne pas avoir à se répéter. :)

Une autre question ? Je vous écoute

Pourquoi définir 2 fois la position du personnage ? Quand on le faisait dans flash, ça se faisait tout seul.

C'est vrai. Mais dans Flash, en vrai ce que l'on modifie c'est toujours le symbole de la bibliothèque. Par contre, une fois compilé, chaque instance devient indépendante, il faut intervenir sur chacune d'elles. D'ailleurs, nous n'allons pas animer que des personnages mais des éléments différents, donc différents symboles. Il faudra bien agir sur chacun. C'est le minimum syndical nécessaire.

Changement de décor

Jouer avec la taille de personnage ce n'est pas très sexy, et rarement utile. Changeons de décor, si vous voulez bien, ou plutôt, je vous propose d'illustrer maintenant notre/votre trajet en voiture. De quoi avons-nous besoin. Rappelons-nous…

  • Une route sur laquelle nous passons. Comme nous ne l'animerons pas, un rectangle gris dans Flash sera suffisant.
  • Une haie
  • Un champ (derrière la haie)
  • Un village (au fond d'un champ)
  • Une ligne de collines
  • Une ligne d'horizon.

Exemple que vous pouvez télécharger ici:

Un problème de taille

Je soulève tout de suite un problème de taille. De taille au sens propre. Les éléments du décor ci-dessus sont dessinés pour correspondre aux dimensions finales, à l'utilisation. Or, nous voulons appliquer un taux de réduction de plus en plus fort pour les plans de plus en plus lointains. Ils vont donc être réduits.

En théorie, il faudrait dessiner les arrières-plans beaucoup plus grands que les premiers-plans, de façon proportionnelle à leur taille réelle. Mais essayez, vous, de dessiner un brin d'herbe et une colline de façon proportionnelle… A moins qu'on puisse s'en sortir avec une méthode de travail adaptée ?

C'est ce que je vous propose, à suivre.

Méthodologie

Techniquement, je vous propose de travailler ainsi :

  1. Dessinez vos éléments à la taille que vous voulez.
  2. Créez les 2 symboles imbriqués à partir de votre dessin. Vous savez, pour les personnages nous avions créé “personnage” et “planPersonnage”. Par exemple pour la haie, créez un symbole haie, puis un symbole planHaie. Etc.
  3. Définissez maintenant le taux d'agrandissement du planHaie. Comme il n'est pas très loin un taux de 95% devrait faire l'affaire. Ceci va déformer proportionnellement votre dessin de la haie. Pour la rectifier, éditez le symbole planHaie (double-clic sur l'occurrence…) et transformez l'instance du symbole haie avec l'outil de votre choix pour qu'il reprenne la bonne taille. Ce n'est pas fini…
  4. Maintenant, vous devez positionner la haie (toujours à l'intérieur du symbole planHaie) en x=0 et y=0, via le panneau “propriétés”. C'est impératif. Profitez que vous êtes dans le panneau propriétés pour nommer la haie. Nommez-la “image”. Tous les clips contenus dans un plan, nous les appellerons “image”, cela nous simplifiera le code.
  5. Votre haie est à nouveau mal placée, sans doute… Revenez vers le scénario principal (en double-cliquant en dehors de la haie). Vous pouvez déplacer le planHaie pour positionner la haie à l'endroit de votre choix.

Tout ceci vous semble étrange ? Laborieux ? Je ne peux pas le nier. Mais vous êtes là en train de faire des maths sans vous en rendre compte :-) et ce n'est pas si compliqué. Je résume.

Pour chaque dessin participant à l'effet parallaxe vous devez avoir une imbrication de 2 symboles.

  • Le plan
  • L'image

Le plan :

  • Son échelle doit correspondre à l'éloignement du plan. Plus il est loin, plus l'échelle est petite. Plus il est près, plus l'échelle est grande.
  • Sa position en x et y est totalement libre. Vous pouvez donc le déplacer pour composer votre décor.

L'image :

  • Est positionnée dans le clip plan.
  • Sa position en x et en y doit être de zéro. C'est impératif. Elle doit être nommée “image” dans le champ “nom” du panneau propriété, pour simplifier notre code.
  • son échelle est libre. Vous pouvez donc l'agrandir ou le réduire pour composer votre décor.

Ça y est ? Ça rentre ? Vous voulez un dernier récapitulatif ? C'est parti.

Pour modifier la taille d'un élément de votre décor, modifiez la taille de son 'image'.
Pour modifier la position d'un élément de votre décor, modifiez la position de son 'plan'.

Je ne peux pas le dire plus simplement. À ce stade, si vous avez compris le mécanisme et la méthodologie d'exécution, vous pouvez respirer, c'est fini.

Sinon, relisez une nouvelle fois les chapitres précédents…
Vous pouvez aussi télécharger le .fla disponible à la fin de la page pour voir comment il est fait.

Non ? Et si ça ne vient vraiment pas, sautez à la conclusion, vous y trouverez d'autres pistes pour réaliser un effet de parallaxe. On ne sait jamais ;-)

Mise en place générale

Ça y est ? Vous avez créé tous vos plans de parallaxe ? Et vous aimeriez maintenant que ça bouge ? Doucement, nous y sommes presque.

Si ce n'est pas fait, placez tous vos plans sur le scénario principal. Nommez-les dans le panneau propriétés pour que nous puissions les pointer dans notre code. Faites simple : haie, village, colline, horizon… C'est clair et suffisant.

Sélectionnez tous ces plans, et hop, créez une nouvelle fois un symbole (touche F8). Appelons-le Décor, et nommons-le dans le panneau propriété. Pour quoi pas “décor” ? :D

Vous y êtes ?

Alors…

Attaquons-nous au code

Je vous le donne en totalité et si vous avez respecté les noms que je vous ai suggérés, il devrait fonctionner sans souci aucun.

Ensuite, je détaillerai ligne à ligne pour les débutants, les curieux, mais si vous pensez pouvoir vous passer des explications (le code est vraiment simple), je vous donne rendez-vous au chapitre Avant de finir.

// Plans du parallaxe :
var plans:Array;
with (decor) {
	plans=[haie,champ,village,colline,horizon];
}
 
// Position du parallaxe :
var parallaxe:Number = 0;
 
addEventListener(Event.ENTER_FRAME,move);
 
function move(e:Event):void {
	// Calcul du parallaxe
	parallaxe = decor.mouseX;
	// Effet parallaxe :
	for each (var plan:MovieClip in plans) {
		plan.image.x = parallaxe;
	}
}

Ce qui nous donne ceci :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Décodage

On peut séparer ce code en 3 parties dont 2 méritent un peu plus d'explications.

Une déclaration de la liste des plans formant le parallaxe, stockée dans un tableau

// Plans du parallaxe :
var plans:Array;
with (decor) {
	plans=[haie,champ,village,colline,horizon];
}

Attention, j'ai utilisé ici un “with”, peu utilisé, mais je trouve qu'il simplifie souvent l'écriture, surtout pour les débutants.

Le “with” permet de coder comme si l'on était à l'intérieur de l'objet placé en paramètre. Sans le “with”, le code serait celui-ci :

// Plans du parallaxe :
var plans:Array=[decor.haie,decor.champ,decor.village,decor.colline,decor.horizon];
}

Il s'agit d'une simple déclaration de tableau, je ne vois pas quoi dire de plus. Si vous découvrez les tableaux, vous avez un bon tuto qui pose les bases ici : Comprendre les tableaux (Array) par Nataly.

Ensuite, dans l'ordre du code, je déclare une variable “parallaxe” de type Number.

// Position du parallaxe :
var parallaxe:Number=0;

Je m'en servirai pour stocker les calculs. Dans cette version, on peut la trouver inutile, mais bientôt, elle nous sera indispensable, et, là aussi, je trouve plus clair d'avoir une variable pour distinguer le calcul de l'affectation.

Étape suivante : je pose un écouteur sur l'événement ENTER_FRAME

addEventListener(Event.ENTER_FRAME,move);

Cette commande lancera ma fonction “move” à chaque nouvelle image de l'animation.

On aurait pu aussi utiliser un événement MOUSE_MOVE dans cette version, sur le principe minimaliste : si la souris bouge, alors je replace les éléments. Mais plus tard, avoir un ENTER_FRAME nous offrira d'autres subtilités.

Enfin, vient le bloc principal, celui qui fait le boulot pour nous.

La fonction “move”

L'en-tête de la fonction est la suivante :

function move(e:Event):void {

Alors, pourquoi le petit (e:Event) en paramètre ? Parce que c'est le principe des écouteurs d'événements. Ils passent en paramètre, à la fonction associée, un objet événement qui contient diverses infos.

Même si, dans notre cas, nous ne nous servirons pas de ces infos, nous devons déclarer ce paramètre.

Je saute volontairement la première ligne de la fonction, elle est tellement simple qu'elle demande quelques commentaires, j'y reviens juste après. :-)

Vient ensuite une boucle “for each” que je vous conseille fortement d'apprendre à utiliser. Je décompose le mouvement.

for each (enumerateur in liste) {
	// le code
}

Ceci est la structure de base d'un “for each”. Entre les parenthèses, il y a 2 choses :

- une variable qui servira d'énumérateur, et une “liste”, un objet capable d'être énuméré.

On peut bien sûr déclarer cette variable énumérateur en dehors de la boucle… ou utiliser une variable déjà existante. Mais alors, n'oubliez pas qu'à la sortie de la boucle for, l'énumérateur aura la valeur du dernier élément de la liste.

Par habitude, je déclare ma variable entre les parenthèses du “for each”, en la typant au plus près de l'usage que je vais en faire. Ici, je type ma variable énumératrice “plan” en temps que MovieClip.

Et cette “liste” alors, c'est quoi ?

Dans notre cas, c'est un tableau. On peut aussi utiliser : des Vectors, des Objects… en fait des trucs qui savent s'énumérer tout seuls, car c'est là l'intérêt de l'instruction “for each”.

Le code à l'intérieur des accolades sera exécuté autant de fois qu'il y a d'éléments dans la liste. Et à chaque passage dans cette boucle, la variable énumérateur “pointera” toute seule comme une grande vers chaque élément de la liste.

Dans notre tableau, nous avons rangé : haie, champ, village, colline, horizon. Il y aura donc 5 boucles. Dans la première, plan (mon énumérateur) sera le plan haie. Dans la seconde, plan sera le champ. Dans la troisième, le village. Etc.

Et que fait le code à chaque fois ?
plan.image.x=parallaxe;

Il pointe sur l'image contenue dans le plan, puis sur sa propriété “x”, pour lui assigner la valeur du parallaxe que nous avons pris soin de calculer AVANT de rentrer dans notre “for each” puisqu'elle est la même pour tous nos éléments.

Et c'est quoi cette valeur de parallaxe ?

Et bien, c'est la valeur que nous avons rentré tout à l'heure à la main : 100 pixels, par exemple. C'est la position de l'observateur, la distance parcourue par votre voiture.

Pour nous, c'est la position de la souris par rapport à notre clip “décor”.

parallaxe=decor.mouseX;

Pour être au plus près de l'exemple de la voiture, on devrait même faire :

parallaxe= - decor.mouseX; << Notez le signe moins !

En fait, l'effet parallaxe est différent si l'on stocke en positif ou en négatif la position de la souris. Certains préfèrent dans un sens, d'autre pas. Ici je suis allé au plus simple, mais retenez que si vous voulez inverser le mouvement de parallaxe, c'est ici qu'il faut agir.

On aurait aussi pu faire un parallaxe += 1; par exemple. Nous aurions eu un déplacement horizontal de notre décor, infini et régulier. Si on se sert généralement de la position de la souris c'est pour apporter un peu d'interactivité à l'effet mais ce n'est pas une obligation.

C'est aussi ici que vous pouvez agir, si vous trouvez l'effet parallaxe trop fort.

Pour réduire l'effet de moitié, vous pouvez faire :

parallaxe=decor.mouseX/2;
Pour le doubler ?

Heu… ? Un effort ?

Oui, c'est ça :) Bien joué. ;-)

Relisez le code, assurez-vous que vous avez tout bien assimilé, je vous emmène ensuite un tout petit peu plus loin… avec un peu de retard* (*jeu de mot inside).

Un retard volontaire

Notre effet parallaxe fonctionne maintenant bien. Il est juste un peu sec… Quand on déplace rapidement la souris d'un point à un autre, l'affichage suit instantanément, presque brutalement. On peut atténuer cela avec un peu de retard… c'est ce que l'on appelle un effet d'inertie quand on veut montrer son vocabulaire.

Un effet un peu en retard

Pour une inertie donc, le principe utilisé est très souvent le même. Au lieu d'appliquer directement la nouvelle valeur calculée, on va en appliquer une partie seulement + une partie de l'ancienne valeur.

Un exemple ?

OK. Disons que l'ancienne valeur de parallaxe est de 100. La nouvelle valeur, celle que l'on veut atteindre (la position de la souris par rapport à notre clip “decor”) : 200.

Appliquons la moitié de chacune de ces valeurs :

50+100=150;

Si on recommence : notre valeur de départ est maintenant 150, l'objectif est toujours 200…

75+100=175;

On se rapproche :) Avec 175 et 200 ?

88+100 = 188;

Puis pour 188 et 200 ?

94+100=194;

En 4 étapes, nous sommes déjà arrivés (ou presque) à notre objectif de 200. 4 étapes, soit 4 images, puisque notre code s'exécute à chaque ENTER_FRAME. Ce n'est pas beaucoup, le parallaxe va encore être “dur”, mais ça peut être un choix.

Si on veut freiner un peu plus, il faut mettre dans notre mélange une part plus grande de l'ancienne valeur, une part plus petite de la nouvelle. Et, sauf contre-ordre, il vaut mieux que le total des parts fasse 1.

Un effet très en retard

Essayons avec un mélange de 90% d'ancien et 10% de nouveau… Prenons les mêmes valeurs de parallaxe que tout à l'heure, à savoir : position de départ : 100, objectif : 200.

NB : pour obtenir 90%, il suffit de multiplier par 0.9 et pour 10%, multiplier par 0.1.

C'est parti :

Avec 100 et 200 :

90+20=110;

Avec 110 et 200 :

99+20=119;

Avec 119 et 200 :

107+20 = 127;

Avec 127 et 200 :

114 +20=134;

STOP. Nous avons calculé 4 étapes, comme tout à l'heure. Mais nous sommes encore loin d'atteindre les 200 de notre objectif. Nous n'en sommes qu'à 134… Ce qui est sûr c'est que nous y parviendrons un jour :-). Pour savoir si vous préférez le 90/10 ou le 50/50 pas besoin d'un coup de fil à un ami. Faites des tests et comparez… vous êtes le seul à pouvoir dire qu'elle est la meilleure valeur, celle qui convient à votre projet.

Si vous n'avez pas compris le principe du calcul, lilive, notre bibliothécaire indispensable, vous en propose un autre dans le sujet des forums dédié à ce tutoriel. Sa logique, également simple, vous conviendra peut-être mieux. N'hésitez pas à comparer et faites votre choix. Utiliser une formule que l'on comprend bien permet de l'adapter si le besoin s'en fait sentir.

Besoin du code ?

Il n'y a pas grand-chose à ajouter-modifier dans le code pour obtenir l'effet d'inertie. Mais si vous en avez besoin, le voici :

// Plans du parallaxe :
var plans:Array;
with (decor) {
	plans=[haie,champ,village,colline,horizon];
}
 
// Position du parallaxe :
var parallaxe:Number=0;
 
addEventListener(Event.ENTER_FRAME,move);
 
function move(e:Event):void {
	// Calcul du parallaxe
	parallaxe = parallaxe*0.9+decor.mouseX*0.1; //< avec effet d'inertie
	// Effet parallaxe :
	for each (var plan:MovieClip in plans) {
		plan.image.x=parallaxe;
	}
}

Voilà l'effet produit :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Avant de finir

Prenons un peu de hauteur avant de terminer ce tutoriel.

Nous savons, à ce stade, nous déplacer horizontalement, dans votre voiture par exemple. Et avec retard, aussi. Mais comme vous m'avez gentiment accueilli, à mon tour de vous inviter… dans mon hélico.

Pourquoi se contenter de l'horizontale alors que la verticalité est aussi simple dans Flash que de remplacer un x par un y ?

Je vous laisse le soin de transposer tout le code précédant en remplaçant les x par des y. Compilez, jouez avec la souris de haut en bas, de bas en haut. Simple, non ?

Et il ne peut pas avancer l'hélico ?

Si, il peut. Mais il vous faut juste un peu plus de courage.

Cette fois, il ne sera pas suffisant de remplacer des x par des y. Il va nous falloir doubler notre travail : nos variables, nos lignes de code. Certes, on devrait pouvoir factoriser tout ceci pour l'appliquer 2 fois, mais à mon avis ça n'en vaut pas la peine. Dupliquons nos variables, en les identifiants pour le x ou le y, et dupliquons les lignes de code. Ça nous donne ceci.

// Plans du parallaxe :
var plans:Array;
with (decor) {
	plans=[haie,champ,village,colline,horizon];
}
 
// Positions des parallaxes en x et en y:
var parallaxeX:Number=0;
var parallaxeY:Number=0;
 
addEventListener(Event.ENTER_FRAME,move);
 
function move(e:Event):void {
	// Calcul des parallaxes
	parallaxeX = parallaxeX*0.9+decor.mouseX*0.1; //< avec effet d'inertie
	parallaxeY = parallaxeY*0.9+decor.mouseY*0.1; //< avec effet d'inertie
	// Effet parallaxe :
	for each (var plan:MovieClip in plans) {
		plan.image.x=parallaxeX;
		plan.image.y=parallaxeY;
	}
}

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Les sources

Il y aurait beaucoup à dire encore sur l'effet parallaxe et quelques idées à creuser. Ça sera peut-être le sujet d'un prochain tutoriel, mais pour l'instant je vais vous laisser pratiquer un peu.

Avant de partir je vous laisse les sources où vous trouverez tous les fichiers Flash et images utilisés pour les illustrations de cet article. Et, à suivre, je vous mets quelques liens vers des articles qui m'ont paru intéressant. Pour ceux qui maîtrisent un peu plus les classes (ou un peu moins le travail sur la scène) vous y trouverez une version tout code.

En savoir plus

Quelques liens à suivre si vous n'avez pas trouvé votre bonheur ici.

Voilà, si vous avez d'autres pistes, n'hésitez pas à éditer l'article pour les citer.

Sinon, il y a le sujet correspondant à votre disposition sur le forum dédié pour toutes vos réactions et questions. …