Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Animate CC 2015

Préparer un nouveau projet

Testez gratuitement nos 1344 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Créez ici une animation HTML5 par le code. Comprenez et mettez en place les éléments de votre future animation.
04:24

Transcription

Je vous propose maintenant de réaliser cette animation entièrement par le code, il s'agit d'une animation au format WebGL. Pour pouvoir faire ce type d'animations, qui consiste à faire défiler de manière perpétuelle, un bandeau d'images, il faut déjà comprendre comment cela fonctionne. L'idée est très simple. Au départ, l'utilisateur va voir cette série d'images à l'écran. La zone que j'ai mis en grise ici, c'est la scène. La scène fait très exactement la largeur du bandeau d'images que je vais vous fournir. Donc, notre spectateur ne voit que ces images là. L'animation débute, ce bandeau d'images va défiler vers la gauche. Pour ne pas avoir un trou derrière la dernière image, je recopie ce bandeau une seconde fois, et je le mets au bout du premier. Ce qui fait que, quand le bandeau commence à défiler vers la gauche, l'image avec le phare disparait progressivement en dehors de la scène, et refait son apparition du côté droit et se déplace à son tour, progressivement, petit à petit, jusqu'au moment où ce phare qui est ici, se retrouvera à la position qui est là. Quand il sera très exactement à cette position là, nous aurons visuellement à l'écran la dernière image de notre animation totalement identique à la première. Ce qui nous permettra par le code de dire, je souhaite reprendre tout le bandeau, et le repositionner de cette manière là. Et ensuite l'animation reprendra à nouveau. Ce qui fait que, comme ma première image, et ma dernière image, sont totalement identiques. Le fait de déplacer le bandeau, pour le remettre à cette position initiale, est totalement invisible pour l'utilisateur, ce qui lui donne l'impression que le bandeau tourne de manière perpétuelle. Alors pour réaliser cela, je vais vous convier à ouvrir dans Fichier, Ouvrir, dans le chapitre 6 des sources de cette formation, le document qui s'appelle « Bandeau ». Ce document pour l'instant est vide. Il s'agit d'une scène qui fait 1071 pixels de large, c'est la taille du bandeau, sur 102 pixels de haut, c'est la hauteur du bandeau. Elle est cadencée cette scène, à 25 images par seconde, et elle est au format WebGL Aperçu. Je viens dans la bibliothèque, je vais commencer par importer mon bandeau dans ma bibliothèque. Je fais Fichier, je viens sur Importer, je viens sur Importer dans la bibliothèque, je clique. Je trouve dans les sources de cette formation, chapitre 6, le document qui s'appelle Bandeau.jpg, je clique dessus, je fais Ouvrir, le bandeau fait son apparition à l'intérieur de ma bibliothèque. Je vais maintenant mettre ce bandeau dans une enveloppe, et cette enveloppe, je vais la poser sur la scène. Pour réaliser cela, je clique sur Insertion, Nouveau symbole, je vais l'appeler Bandeau, ou tout autre nom qui me convient. Je dis que c'est un élément de type clip, pourquoi ? Eh bien, parce que si je disais graphique, je ne pourrais pas le nommer. Si je ne peux pas le nommer, je ne peux pas agir dessus par programmation. Donc je n'ai comme choix que clip. Je clique sur Clip, je fais OK. Je rentre dans mon enveloppe Bandeau, qui pour l'instant est vide. Je vais mettre dedans l'image JPG une fois. Je vais mettre dedans l'image JPG deux fois. Je prends l'une des deux images JPG, je viens dans Propriétés, et je positionne cette image à X=0, Y=0. Maintenant que mon image est correctement positionnée, je prends la deuxième image que j'ai mis, et je vais la mettre à Y=0 bien évidemment, pour qu'elle soit à la même hauteur que la première. Et je vais la mettre au bout de la première. Comme la première fait 1071, eh bien, la seconde vient en X=1071. Je valide, je me retrouve donc avec mon image, positionnée au bout de la première. Je reviens sur ma scène, je viens dans ma bibliothèque et je récupère mon enveloppe Bandeau, que je positionne sur la scène. Je la positionne en X=0, et en Y=0. Je valide, il ne me reste plus qu'à lui donner un nom, sous lequel je vais le manipuler par le code. Je vais l'appeler bandeau, écrit tout en minuscule. Je valide avec Entrée. Je nomme mon calque image, ou tout autre nom qui vous convient, et je vais maintenant faire un clic droit sur la première image-clé, puis un clic gauche sur action, pour pouvoir débuter le code.

Découvrir Animate CC 2015

Prenez en main Adobe Animate CC. Apprenez à réaliser des animations, des illustrations vectorielles, des interfaces, des vidéos, voire même des exécutables pour Mac et PC.

4h47 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Adobe Animate Animate CC
Spécial abonnés
Date de parution :9 févr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !