Vous avez appris à faire de beaux sites plein de parallaxe avec Muse, mais vous feriez bien aussi quelques contenus du même genre dans Animate, un peu comme ce qui est proposé ici par l'équipe d'Edge Docks.

Comme les fonctions de parallaxe nécessitent un tout petit script (qui fait partie des Edge Commons, nous allons voir comment le mettre en œuvre dans Animate (depuis la v3.0), tout comme cela vous était décrit dans ce tutoriel, mais cette fois-ci, en français et en images… fixes.

1. Créer une scène verticale (histoire de justifier le scroll, mettez bien quelques pixels, ici 2000). On décochera la lecture automatique plus tard, pour l'instant, on peut tester.

EgAn-Scripts-Parallax-01.png

2. Poser les éléments sur la scène. On note ici que seule la Stage possède une action (le petit carré entre les accolades).

EgAn-Scripts-Parallax-02.png

3. On va ensuite animer puis positionner les éléments dans le temps comme pour une animation classique. On en profite, en bout d'animation pour poser une dernière étiquette, dont le nom importe peu, mais qui permettra de bien caler la fin des éléments pris en compte par le parallaxe.

EgAn-Scripts-Parallax-03.png

4. Charger le script, en renseignant bien l'adresse d'où on peut l'inclure cdn.edgecommons.org/an/1.0.2/js/min/EdgeCommons.js, que ce soit via l'inclusion URL ou d'après le script joint dans votre dossier de travail.

EgAn-Scripts-Parallax-04.png

5. Dans composotionReady, activer l'appel au script EC.Parallax (EC comm Edge Commons)

EgAn-Scripts-Parallax-05.png

6. Décocher la lecture auto, que l'animation ne se joue pas sans prendre en compte le défilement de la page.

EgAn-Scripts-Parallax-06.png

7. Tester dans le navigateur !