Créer un bouton avec survol animé

Conception du symbole bouton avec état rollOver animé pas à pas
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Ateliers créatifs Adobe Animate CC
Revoir le teaser Je m'abonne
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont d'apprendre à créer un bouton avec survol animé, maîtriser les symboles graphiques et les interpolations classiques, et améliorer l'interactivité des interfaces utilisateurs.

Découvrez comment ajouter un survol animé à un bouton en utilisant des symboles graphiques et des interpolations classiques.

Dans cette leçon, vous apprendrez à créer un bouton interactif avec un survol animé. Pour ce faire, nous allons utiliser un outil graphique pour poser notre symbole sur la scène. En maintenant la touche CTRL et en appuyant sur F8, nous le convertirons en symbole bouton.

Ensuite, nous entrerons dans le bouton pour créer les différents états en ajoutant des interpolations classiques afin de créer une animation de survol. Cette animation impliquera une augmentation de la taille du bouton à 120% avec une accélération au début et une décélération à la fin, tout en insérant une ligne de code pour stopper la tête de lecture au bon moment.

Ce processus permet de rendre l'interface utilisateur plus attrayante et interactive, améliorant ainsi l'expérience utilisateur.

Voir plus
Questions réponses
Quelle est la fonction principale de l'interpolation classique dans cette leçon ?
L'interpolation classique permet de créer une animation fluide entre deux états du bouton, notamment pour le grossissement lors du survol.
Pourquoi est-il important de stopper la tête de lecture dans l'animation ?
Stopper la tête de lecture est crucial pour empêcher l'animation de se répéter indéfiniment et de maintenir l'état souhaité du bouton après l'animation.
Quel outil pourrait être utilisé pour réaliser une animation similaire en dehors de celui mentionné dans la vidéo ?
Adobe Animate pourrait être utilisé pour réaliser des animations similaires, offrant des fonctionnalités avancées pour les animations graphiques.
Pour le deuxième bouton, je vais procéder de la même manière donc je pose mon symbole graphique sur la scène, CTRL F8 pour convertir en symbole, donc bouton avec survol animé, je procède de la même manière, je rentre dans mon bouton, alors je rajoute ce que je peux faire c'est sélectionner les deux images en même temps pour aller un petit peu plus vite, F6, ça me permet de faire deux copies, une copie de la première image, de la première image clé sur chacun des états et ensuite j'ai juste à sélectionner le deuxième état que je vais à nouveau encapsuler dans un symbole qui pour le coup sera un symbole movie clip. Je vous rappelle que ce bouton va me servir à créer un survol animé, donc pour créer un survol animé sur cet état j'ai besoin d'un movie clip, je vais l'appeler survol animé, je rentre dans ce movie clip donc je vois si je vous êtes un petit peu perdu vous pouvez vous repérer ici au niveau de l'arborescence, je vois que je suis bien sur mon scénario principal sur lequel se trouve un symbole bouton qui s'appelle bouton avec survol animé et à l'intérieur du scénario de ce symbole bouton j'ai un symbole clip pour l'état survolé. Je suis à l'intérieur de ce movie clip et c'est là que je vais créer mon animation, donc c'est une animation toute simple, je vais créer une interpolation classique, je vais pas l'embêter, avec un gros un grossissement 120% alors je peux mettre une accélération ou plutôt voilà ça fonctionne mieux avec une accélération au départ et une décélération sur la fin et surtout ce que je dois insérer c'est une petite ligne de code ici à la fin, à la fin de mon scénario pour pouvoir stopper la tête de lecture. Si je n'insère pas de ligne de code ça va donner ça, c'est pas terrible, je veux bien sûr que la tête de lecture soit stoppée à cet endroit là et là j'ai bien mes deux boutons, mon bouton classique avec un survol cut et mon bouton classique mais avec survol animé.

Programme détaillé de la formation

Nos dernières formations Animate CC