Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Animate CC 2015

Réaliser le codage initial de votre travail pour WebGL

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Initialisez des variables et réalisez la structure du code WebGL.
08:21

Transcription

Nous allons maintenant coder notre animation. Je vous rappelle que l'objectif à atteindre c'est de prendre le bandeau que nous avons crée précédemment qui est positionné de cette manière sur la scène « x=0 », « y=0 » et de le faire se déplacer vers la gauche de manière négative de telle sorte que le deuxième bandeau qui est au bout du premier puisse venir, si je prends ce phare, à cet emplacement-là. Ensuite, une fois que nous serons arrivés très exactement à cette position, nous allons, toujours par le code, demander à Animate CC de remettre notre bandeau dans la position initiale. Et l'animation continuera une nouvelle fois et ceci ad vitam æternam. Pour réaliser cela, il faut avoir quelques petites connaissances en programmation. Je ne vais pas rentrer dans le détail, mais si vous avez déjà des connaissances en programmation, cela va vous aider. Si vous n'avez aucune connaissance en programmation, commencez peut-être par écouter ce que je vais vous présenter puis si vous ne comprenez pas tout essayez de le reproduire puis recherchez dans notre catalogue des formations ayant trait à la programmation. Vous verrez ce n'est pas vraiment quelque chose de très très difficile, tout le monde peut y arriver. J'ai donc sur ma scène mon bandeau. Il a un nom, il s'appelle « Bandeau ». Il est de type « Clip ». Il est positionné actuellement à « x=0 », « y=0 ». Je vais donc par le code travailler ce bandeau pour le faire se déplacer. Première chose : il faut que mon code puisse se rattacher à ce bandeau pour que je puisse le manipuler. C'est ce qu'on appelle « obtenir » « une référence » « au symbole » « sur la scène ». Ça, c'est la première opération à faire. Si je veux manipuler mon bandeau, eh bien ma foi, il faut que je puisse le récupérer dans mon code pour dire, voilà, c'est de ça dont je te parle et cet élément, je veux lui faire subir tel ou tel outrage. Je vais créer une variable. Pour ce faire j'utilise le mot clé « var ». Je l'appelle « leBandeau ». Je pourrais l'appeler « toto », ça marcherait tout pareil, et maintenant je vais dire sur la scène. Pour dire sur la scène je dis « this ». Je mets un point. On me propose plusieurs instructions. Je vais prendre l'instruction qui s'appelle « getChildByName ». Je double clique dessus, ça veut dire quoi ? Donne-moi les enfants par leur nom. J'ouvre la parenthèse, j'ouvre les guillemets. Comment s'appelle mon bandeau ? Il s'appelle « Bandeau », « B.a.n.d.e.a.u », c'est le nom que je lui ai donné lorsque je l'ai mit sur la scène. Eh bien, je vais reproduire ce nom ici. Je ferme ma parenthèse, je mets un point virgule, je valide. J'ai actuellement une variable qui fait référence au bandeau qui est sur ma scène. Grâce à cette variable, je vais pouvoir ensuite manipuler mon bandeau sur la scène, le faire se déplacer, etc. Je vais maintenant « initialiser » « des variables ». Pour la petite histoire, une variable, comme la précédente d'ailleurs que j'ai crée c'est ni plus ni moins qu'une case en mémoire que l'on baptise on lui donne un nom, je l'ai appelé « leBandeau », et puis dedans on y met quelque chose et ensuite on va chercher ce quelque chose et on le manipule comme on veut. Voilà très très sommairement ce qu'est une variable. Je vais donc créer une variable que je vais appeler « deplacementX ». Et comme je souhaite me déplacer vers la gauche, je vais donner une valeur négative. Si vous voulez ça, c'est l'incrément de déplacement. À chaque fois que je vais vouloir me déplacer vers la gauche, je me déplacerai de 5 pixels. Si je voulais me déplacer vers la droite, je mettrais « 5 » tout court. Je veux me déplacer vers la gauche, je mets « -5 ». Je valide. Je vais créer une autre variable pour le « deplacementY » qui restera égal à 0 puisque je ne compte pas déplacer mon bandeau verticalement. Et je vais maintenant créer une troisième et dernière variable pour mémoriser en temps réel la position de mon bandeau. Le déplacement en y, il n'est pas obligatoire. Je pourrais très bien par la suite, au moment où je vais effectuer réellement le déplacement, écrire en dur la valeur de 0. Mais je préfère travailler avec des variables parce que si un jour j'ai le besoin de faire un déplacement en y, je n'aurais pas à retoucher mon code. Je n'aurais qu'à changer la valeur qui est ici pour que mon bandeau se déplace en y. Je viens créer une variable que je vais appeler « positionActuelle » ou tout autre nom qui me passe par la tête. Si j'ai un conseil à vous donner, donnez toujours des noms à vos variables qui vous rappelle ce à quoi ça sert. Et donc là je vais dire « 0 » et je valide. Maintenant, je vais mettre en place un « écouteur » « sur la scène ». Un écouteur c'est quoi ? C'est comme une oreille et cette oreille, elle ne sait écouter qu'un seul son. Là je vais lui dire d'écouter le son que fait ce petit rectangle rouge lorsqu'il arrive sur l'image clé numéro un de mon animation. L'écouteur, je le pose sur la scène. La scène, c'est « this ». Je mets un point. Rajouter un écouteur, on dit « add » « EventListener ». Je regarde, est-ce que j'ai un « addEventListener », oui j'en ai un, je double clique dessus. « add » : ajouter, « event » : évènement, « écouteur ». Ajouter évènement écouteur, rajouter un écouteur d'évènement. J'ouvre ma parenthèse et maintenant je vais indiquer le type d'écouteur que je veux. C'est un écouteur de type WebGL. Donc « flwebgl », point, « events », c'est un évènement dans « flgl » qui est l'évènement, alors la syntaxe est un peu lourde mais il faut vivre avec, « ENTER_FRAME ». C'est donc l'évènement arrivée de la tête de lecture sur l'image. Et donc lorsque cet évènement ce produit, c'est à dire lorsque la tête de lecture arrive sur l'image clé numéro un, qu'est-ce que je veux faire ? Eh bien je veux appeler ce que l'on appelle une fonction. Une fonction c'est une espèce de boîte à l'intérieur de laquelle on va mettre un code et ce code se fera à chaque fois que l'on fera appel à cette fonction. Ça nous évite de réécrire plusieurs fois les mêmes lignes de code. Je vais lui donner un nom à ma fonction, je vais l'appeler « surEntree », je ne mets pas d'accent parce que je n'ai pas le droit aux accents, « Image ». Et je ferme ma parenthèse, je mets un point virgule. Voilà. Donc là à partir de maintenant, qu'est-ce qui va se passer ? Il va se passer que, à la cadence de l'animation, mon écouteur va écouter si la tête de lecture arrive sur l'image clé numéro un. La cadence de l'animation c'est 25 images par seconde. Tous les un vingt-cinquième de seconde, cet écouteur va voir si la tête de lecture rouge ici arrive sur l'image clé numéro un. Si oui, la fonction « surEntreeImage » va se produire. Je fais Ctrl+C. Je vais maintenant écrire « ma fonction ». Donc ma fonction, pour la déclarer, je dis : « function », c'est le mot clé, je mets derrière le nom que j'ai donné à ma fonction. le nom que j'ai là permet de faire le raccord avec le nom que j'ai mis là. Il faut que les deux noms soient écris exactement de la même manière. Et donc cette fonction peut recevoir des informations que je vais appeler « evenement » comme ceci ou tout autre nom qui me passe par la tête. En réalité, ce qui rentre dans cette fonction je ne vais pas m'en servir donc peu importe le nom que j'y donne. Pour dire que les instructions de la fonction commencent à cet emplacement, j'ouvre une accolade. Je valide et j'obtiens donc une accolade qui se ferme automatiquement. Maintenant toutes les instructions que je vais mettre entre ces deux accolades sont des instructions appartenants à cette fonction. Que va-t-il se passer ? Il a se passer, comme je vous le disais précédemment, que tous les un vingt-cinquième de seconde nous allons aller exécuter les instructions que nous allons mettre ici, c'est à dire les instructions qui vont permettre au bandeau de se déplacer.

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 !