Découvrir Animate CC 2015

Utiliser les présélections de mouvement

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Animez un élément avec les préselections et apprenez à programmer un arrêt.
08:50

Transcription

Je vous propose maintenant de découvrir comment il est possible de réaliser ce type d'animations. Vous avez remarqué que le hamburger descend, rebondit plusieurs fois, se déforme à chaque rebond, et ensuite il transpire tout ce qu'il peut tout en nous tirant gentiment la langue. Donc, la transpiration, la langue qui est tirée, ainsi que les yeux, ce sont des interpolations de mouvement, comme nous avons pu le voir précédemment. Par contre, la chute du hamburger que je réactualise en rafraîchissant mon écran, est faite automatiquement par Animate CC. À savoir que j'ai utilisé les présélections de mouvement. Je réduis, vous allez trouver dans les sources de cette formation, au chapitre 5, le document qui s'appelle burger.fla. On a dans ce document plusieurs calques, et on va commencer par le calque fond, sur lequel je me positionne, je prends ici l'outil Rectangle, je prends la palette, je vais choisir un remplissage sous la forme d'un dégradé radial. Je vais choisir, en double-cliquant sur ce pot de peinture, un petit jaune comme ça, et je double-clique ici pour aller choisir un autre petit jaune, comme celui-là. Je n'ai plus qu'à dessiner mon rectangle, Voilà, et donc il ne reste plus maintenant qu'à venir en maintenant le bouton gauche de la souris enfoncé, modifier tout simplement, hop là, cet élément là, les deux couleurs sont trop proches l'une de l'autre. On va éclaircir celle-là, en cliquant sur ce petit icône, et là, on va l'éclaircir pour aller plutôt vers les jaunes presque blancs. Voilà, comme ceci. Donc, là ça me permet d'avoir un point chaud, et d'avoir plus bas, un jaune qui est peut-être un peu trop claquant. On va essayer plutôt quelque chose comme ça, par ici, ça serait bien. Voilà, bon, on va dire que c'est bien. Voilà, on va agrandir la zone, le point chaud comme ceci, très bien. Maintenant que c'est fait, je verrouille, je viens sur le calque que j'ai baptisé frites, dans les ingrédients, je trouve une boîte à frites, que je m'empresse de déposer sur la scène. Ensuite je vais prendre une frite, une deuxième frite, une troisième frite, jusqu'à temps que j'ai suffisamment de frites éparses sur le sol. Nous allons zoomer à 200 %. Et nous allons prendre en maintenant le bouton de la souris enfoncé l'Outil de transformation libre pour faire bouger un peu nos frites dans un sens ou dans l'autre. Voilà, et comme ça, et puis, il n'y a plus qu'à les mettre en place. On va mettre celle-là ici, on va mettre celle-là en dessous, celle-là par ici, et celle-ci, quelque part par là. Voilà donc, notre frites sont mises sur le sol, hop voilà, on va revenir à Ajuster la fenêtre. On verrouille, on déverrouille le burger, et on prend donc notre burger que nous allons poser sur la scène à l'emplacement où il doit être. Là du coup, les frites sont trop proches. Nous allons donc tout verrouiller sauf les frites, Ctrl+A pour tout sélectionner, flèche à gauche pour déplacer, et mettre les frites un petit peu plus loin, comme ceci. Voilà, très bien, je reverrouille, et je reviens à mon burger. Pour faire bouger ce burger, je vais prendre l'Outil de sélection, je me positionne sur le burger en question, et j'utilise cet icône, Présélection de mouvement. Je peux cliquer sur cet icône ou faire encore Fenêtre, et venir sur Présélection de mouvement, blanc bonnet et bonnet blanc, lorsque j'arrive sur cette fenêtre, je trouve un dossier qui s'appelle Présélection par défaut, lorsque j'ouvre, j'ai la possibilité en cliquant, puis en me déplaçant suite à l'aide des flèches de direction sur le clavier, de voir ce que sont ces présélections et qu'est-ce qu'elles me proposent comme mouvement. Donc, ça, ça ne va pas aller, ça non plus. Voilà, ça, c'est pas mal, voilà, rebond multiple, on pourrait prendre celui-là. On pourrait aussi prendre rebond, non, rebond smoosh. Oui, tiens, celui-là, il est bien. Alors, je clique dessus mais, ce qu'il faut bien voir, au préalable, j'ai bien sélectionné mon clip. Et donc, lorsque je sélectionne mon animation, je clique dessus et je clique sur Appliquer pour appliquer instantanément, vous avez vu, cette animation qui est composée en réalité de plusieurs images-clés. Si je déplace maintenant, je vois donc mon burger qui se déplace beaucoup trop bas. Donc, nous allons zoomer à 25 %, et nous allons remonter ce petit sauvage ici. Puis, nous allons faire Ctrl+A, pour sélectionner absolument tout ou nous glissons dessus, pour sélectionner absolument tout, on va remonter ce point, pour le mettre quelque part par là, descendre un petit peu notre burger par ici, voilà. Et là donc, on va essayer de faire Entrée pour voir ce que ça donne. C'est pas mal, sauf qu'il a tendance à sortir un peu du cadre, puisqu'il se déforme énormément. Donc, en faisant Ctrl+A, et en faisant flèche gauche, on va se déplacer un petit peu plus sur la gauche, par là. J'appuie sur Entrée, je regarde ce que ça donne. Voilà, là, c'est pas mal, il y a encore un petit bout qui dépasse, mais pas trop. Je vais verrouiller, je vais venir sur le calque où il y a le fond, et je me mets sur la dernière image ici, où je vais pouvoir faire clic droit, et je vais dire que je veux Insérer une image. Je vais faire pareil pour les frites, clic droit, je veux Insérer une image. J'ai donc maintenant mes frites mais mon burger, à priori, il écrase les frites. Donc je viens à 200 %, je maintiens Entrée enfoncé, je me déplace, oui, et je vais donc déverrouiller les frites, Ctrl+A pour tout sélectionner, et je les déplace avec la flèche gauche maintenue enfoncée pour venir à peu près ici. Parfait, je n'ai plus qu'à verrouiller, je déverrouille, je viens sur texte. Je n'ai plus qu'à dire Ajuster la fenêtre. Je cherche mon texte qui est là, le titre est là, je le prends, je le glisse, et je l'amène là où je souhaite le voir apparaître. Alors, on va se mettre, hop là, sur la première image d'abord. C'est mieux, parce que là, j'ai essayé de le mettre sur une image qui n'existe pas. Je glisse, je lâche, voilà, le burger, il est là. Je n'ai plus qu'à, maintenant, faire comme pour les autres calques, clic droit et dire je veux Insérer une image. Voilà, nous avons donc mis en place notre animation, il ne reste plus qu'à publier par Ctrl+Entrée pour se rendre compte de ce que ça donne. Et nous voyons donc, dans le navigateur, le petit monstre qui tombe. Et vous remarquez une différence avec celui que je vous ai présenté précédemment, c'est que ça tourne en boucle ! Alors que celui-là s'arrête, il faut que je rafraîchisse. Donc, la question est, comment faire pour faire la même chose avec le nôtre ? Eh bien, c'est là que la programmation rentre en ligne de compte. Je vais créer un nouveau calque. Et donc, sur ce nouveau calque, au bout ici, je vais venir mettre une action de script, tout bêtement. Pour faire cela, je fais clic droit sur ma dernière image, je viens sur Action, et dans la fenêtre Action qui fait son apparition. Voilà, donc ici il me suffit de cliquer sur cet icône, Fragment de code, de choisir HTML Canvas, puisque je suis sur un Canvas, et de choisir Navigation dans le scénario, par exemple. Arrêter la lecture à partir de cette image, ça me semble bien, je double-clique. Le code s'écrit, il y a un commentaire au départ, et puis on me dit, l'animation.stop, l'animation, arrête-toi. Voilà, c'est tout, j'ai donc terminé, je ferme ici, et je vais republier par Ctrl+Entrée. Et on va voir si effectivement, notre animation s'arrête. Il tombe, il rebondit, et voilà. L'animation s'arrête, elle ne va pas plus loin. Voilà donc en quelques mots, comment à la fois, faire de la programmation sans connaître le code et comment utiliser les présélections de mouvement.

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 !