21  novembre

Effet de profondeur dans Djehouti

Cet effet, appelé parallaxe, est très simple à mettre en place. Suivez le pas à pas ci-dessous pour voir comment construire le vôtre.

 

 

[pageview url= »http://beta.djehouti.com/13/178-.htm » height= »520px » width= »940″ border= »yes’ ]

 

Cet effet repose sur un principe très simple, lors d’un déplacement ce qui est proche de nous semble « aller plus vite » que ce qui est éloigné de nous.

Dans un premier temps il va nous falloir une image panoramique dans laquelle nous allons pouvoir nous ballader. Cette image sera constituée de plusieurs calques correspondant à nos différents plans. Voici une capture d’écran montrant les différents éléments constituant le paysage, chaque élément étant une image détourée et placée sur un calque différent.

 

 

Pensez à exporter les images qui doivent être détourées en .png pour conserver la transparence dans Djehouti.

Passons maintenant à l’intégration dans Djehouti.

Première chose à faire : paramétrer la taille de la scène, elle doit être moins large que ne le sont vos images pour pouvoir déplacer ces dernières et ainsi créer l’illusion de mouvement.
Après avoir chargé toutes nos images dans la partie médias, nous pouvons les importer sur la scène par ordre de profondeur :
Dans mon cas, le ciel puis la première série de montagne suivie de la seconde, des arbres et enfin de la ville (cf image de droite).
Attention de les centrer sur la scène pour pouvoir à la fois aller à gauche et à droite.

Maintenant nous allons faire bouger tout ça !
Deux hotlink feront l’affaire, un de chaque côté, ensuite libre à vous, bien sûr, de placer une image en forme de flèche en dessous de chacun d’eux.
Sur le hotlink de gauche (que j’appellerai flèche gauche dorénavant)  nous allons ajouter des actions lors de survol :

Comme vous pouvez le constater un nouveau paramètre a fait son appartition : « Position actuel + X »

Comme son nom l’indique, quel que soit la position de l’élément sur la scène, il va lui ajouter la valeur indiquée dans le champs d’à côté « valeur ». Dans mon exemple je vais donc déplacer mon élément « ciel.jpg » de 500 pixels vers la droite sur une durée de 6 secondes. Je répète ensuite l’opération pour tous les éléments constituant mon paysage en augmentant la « valeur » plus les éléments sont au premier plan. Ainsi les éléments les plus proche de nous avance plus vite que ceux à l’horizon !

Vous remarquerez que sur le hotlink flèche gauche je fais se déplacer les éléments vers la droite , nous donnons ainsi l’impression que c’est le spectateur qui se déplace, pas le décor.

Il ne vous reste plus qu’à faire de même pour  le hotlink flèche droite. La seule différence résidera dans le fait que les valeurs devrons être négative (-500 pour mon ciel, -750 pour ma première montagne, etc.) les durée elles restent inchangées. Pour aller plus vite dupliquez le hotlink de gauche en faisant un clic droit dessus puis « dupliquer ». Renommer-le, placez le à droite puis re-éditez ses actions en plaçant des « – » devant chaque « valeur » !

C’est fini :-)

 

NB : Pour stopper le mouvement quand les éléments arrivent à leur extrémité, il existe un petit truc ! Placer un hotlink au dessus de tous vos calques, puis placer le à droite de l’élément qui va le plus vite en défilement (dans notre exemple la ville). Se hotlink doit être suffisamment grand pour recouvrir le hotlink flèche droite. Dans les actions du hotlink flèche droite nous allons juste ajouter la même action que celle de « ville.png » ainsi il se déplacera à la même vitesse. Il finira donc par recouvrir le hotlink flèche droite, et prendra donc le dessus sur lui au niveau des actions. Vu qu’il n’y a pas d’action sur ce nouvel hotlink rien ne se passe plus lorsqu’on arrive en bout de course !