Découvrir Animate CC 2015

Finaliser le code de la fonction

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Écrivez le code de la fonction d'animation et testez-le pour vérifier le résultat.
09:35

Transcription

Maintenant que la structure de notre code est en place, il nous reste plus qu'à programmer notre fonction de déplacement. Je vais l'appeler « ma fonction de déplacement ». Notre code est constitué dans un premier temps d'une variable baptisée « leBandeau » ou tout autre nom qui vous passe par la tête, qui fait référence au movie clip qui est posé sur la scène. Si je pousse un petit peu ça, nous avons ici un movie clip sur la scène. qui s'appelle « Bandeau ». Cette variable fait référence à cet élément et va donc nous permettre d'agir sur cet élément, notamment pour le faire se déplacer. Ensuite nous avons prévu une variable « deplacementx » qui est l'incrément de déplacement, c'est à dire de combien en combien on souhaite se déplacer. Comme j'ai mis une valeur négative, je souhaite me déplacer vers la gauche. Nous avons l'incrément de « deplacementy », verticalement, qui est de zéro puisque je ne souhaite pas me déplacer verticalement. Vous allez me dire, cette variable sert à rien. c'est vrai, mais comme j'en ai besoin lorsque je paramètre mon déplacement, j'ai besoin d'indiquer une valeur en x et une valeur en y, je crée cette variable malgré le fait que je ne me déplace pas verticalement. Et ensuite une variable chargée de mémoriser la position actuelle de telle sorte que je sois en capacité de déterminer à quel moment est-ce que je dois revenir à la position initiale. Je vais utiliser cette variable « positionActuelle ». Ensuite, j'ai mis sur la scène un écouteur chargé d'écouter l'arrivée de la tête de lecture, ce petit rectangle rouge, sur la seule image clé de notre animation. Dès que cette tête de lecture arrive sur cette image clé, eh bien mon écouteur va réagir. Et il va réagir à la cadence de un vingt-cinquième de seconde. Notre animation a été réglée pour fonctionner, si je clique n'importe où sur du gris ici, à la cadence de 25 images par seconde. Donc, de part le fait, tout les un vingt-cinquième de seconde, notre écouteur va réagir et va exécuter la fonction qui s'appelle « surEntreeImage ». Donc maintenant, dans cette fonction, nous allons expliquer ce que nous souhaitons faire. Alors là, attention, c'est pas simple. Si vous n'avez jamais programmé, ça va être un peu délicat. Essayez de comprendre. Le but de cette formation ce n'est pas de vous transformer en codeur fou, c'est de vous montrer les possibilités. Si vous souhaitez apprendre réellement la programmation, ce qui est tout à fait honorable, voire même conseillé, Rapprochez-vous de notre catalogue où vous trouverez toutes les formations possibles et inimaginables sur les concepts de la programmation et sur la programmation en tant que telle. Revenons-en à nos moutons. Lorsque l'on travaille en WebGL et que l'on veut faire un déplacement, ça se pratique en deux temps. Premier temps : je paramètre mon déplacement, deuxième temps : j'applique mon déplacement. Je mets un petit commentaire : « paramétrage » « du déplacement ». Je valide avec Entrée. Donc, petit commentaire, commenter sans arrêt, mettez des commentaires de partout, ça aide à la relecture par la suite. Mon paramétrage, je vais le stocker dans une variable que je vais appeler « déplacement » ou tout autre nom qui me passe par la tête. Et donc, je veux déplacer quoi ? Je prends le bandeau, Ctrl+C, Ctrl+V. Ce bandeau je vais donc le déplacer grâce à « getLocalTransform ». Je dois l'avoir ici, je double clique. Et... parenthèse, parenthèse, point. Donc j'utilise ce qu'on appelle une classe, dans cette classe j'utilise une méthode qui est la méthode « translate » que je dois trouver quelque part par là. et cette méthode « translate » requiert deux éléments : un premier paramètre qui est le déplacement sur l'axe des x, Ctrl+C, Ctrl+V, le deuxième paramètre dont je vous parlais tout à l'heure, qui est obligatoire, c'est d'indiquer de combien on veut se déplacer sur l'axe des y. Alors ici je mets ma variable « deplacementy », j'aurais pu aussi écrire zéro. Mais je suis obligé de mettre les deux éléments si je veux que ça se déplace. Donc là, je ne me suis pas déplacé. J'ai juste crée une variable expliquant comment se déplacer. Maintenant je vais faire le déplacement. Ce déplacement, il doit s'appliquer sur quoi ? C'est sur le bandeau. Je fais un copier, coller. Point. « setLocal »... alors, je vais le trouver quelque part par là... « sestLocalTransform », le voilà. Je dois me déplacer de « deplacement ». On peut faire la chose suivante, on pourrait prendre tout ce paquet de code ici et venir le mettre directement à l'intérieur de la parenthèse mais c'est plus propre, plus lisible de cette manière-là. Voilà, maintenant je me suis déplacé. Donc en théorie, si je m'arrête là, si je fais Ctrl+Entrée, je devrais voir mon bandeau qui se déplace. C'est ce qu'on va voir tout de suite. Je regarde, je vois mon bandeau qui se déplace avec le petit problème suivant c'est que, quand lui va arriver au bout, derrière il n'y a plus rien parce que je n'ai pas détecté le moment opportun de replacer mon bandeau à sa position initiale pour recommencer le déplacement et donc au bout d'un moment, je n'ai plus rien à l'écran. Je ferme cette fenêtre. Il faut donc maintenant que je rajoute à mon code ce qu'il faut pour détecter le moment opportun de tout remettre à la position initiale. Première chose que je vais faire, c'est « stockage » « de la position » « actuelle ». Je vais donc prendre « positionActuelle », Ctrl+C, Ctrl+V, c'est égal à Ctrl+V, duquel je vais soustraire ma valeur négative qui est ici. Comme cela. Moins par moins, ça donne un plus, ne l'oublions pas. Donc là, « positionActuelle » contient la valeur où se trouve actuellement au premier passage mon bandeau. Et puis tout les un vingt-cinquième de seconde, « positionActuelle » va changer. Et donc maintenant, il me suffit tout simplement de faire un « controle » « de position » Je fais pour cela une condition, « if( », et là je vais dire si ma position actuelle si elle est plus grande ou si elle est égale à « 1071 », qui est la taille de ma scène, ça veut dire que je me suis déplacé suffisamment et qu'il faut que je remette tout en place. J'ouvre mon accolade, je valide avec Entrée, et donc ici je vais me déplacer. Pour se déplacer, on vient d'en parler, il a deux opérations à faire : on doit paramétrer le déplacement et on doit ensuite faire le déplacement. Je récupère ces deux éléments, Ctrl+C, je viens me positionner à l'intérieur, Ctrl+V. Ça m'évitera de les retaper. Je resélectionne tout ces éléments et j'appuie sur la touche Tab comme ceci, pour venir bien mettre mes lignes de code dans le « if » pour que ça reste lisible. Donc là je veux me déplacer bien en x, je veux revenir à « 1071 » qui est la position initiale et ici je veux rester toujours à zéro. Donc là, en dur, je dis reviens à ta position de départ. Tu t'es déplacé de « 1071 », revient à « 1071 ». Maintenant, je vais tout simplement réinitialiser ma variable de déplacement, de position. Donc, « initialisation » « de la variable » « de position ». C'est à dire que je dois remettre « positionActuelle » à la valeur zéro. N'oublions pas que « positionActuelle », elle est égale à « 1071 » ou à plus si je suis rentré à l'intérieur de ma condition. Donc je le remets à zéro parce que sinon je ne retrouverais plus jamais cette condition et mon code ne fonctionnera pas. Voilà, c'est fait, donc maintenant Ctrl+Entrée et puis on va bien voir ce qui se passe. Alors, je prends ma fenêtre, je l'ouvre, je vais rafraîchir ma page et je vois ce qui se passe. Donc là c'est le début du deuxième bandeau. Je me déplace... et à un moment donné, et bah voilà, ça marche. Là à nouveau je me redéplace du début du deuxième bandeau et quand il va arriver là, il va réapparaître ici. Donc à chaque coup, je reprends ma position initiale. Ça fonctionne très très bien. Je ferme cette petite fenêtre. Nous pouvons maintenant gérer très facilement la vitesse de déplacement. Au lieu de « -5 » ici par exemple, nous allons mettre « 1 ». Pourquoi pas. On fait Ctrl+Entrée et là nous allons avoir une animation WebGL qui va se déplacer beaucoup plus lentement. Si nous voulons l'effet inverse, il nous suffit simplement de mettre une valeur importante, par exemple « 100 », Ctrl+Entrée, et donc là on va avoir un bandeau qui va bondir tel un cabri. Ça devient totalement illisible d'ailleurs. Voilà donc en quelques mots comment créer un code de type WebGL. Il est bien évident que ça ne s'invente pas et qu'il faut déjà avoir des connaissances en programmation pour pouvoir réfléchir à se type de chose. Mais ces connaissances, vous pouvez les acquérir très facilement en consultant notre catalogue.

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 !