CATALOGUE Code & Data Formation Animate CC Ateliers créatifs Adobe Animate CC Créer un bouton avec survol animé

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

2h 16min

40 leçons

Transcription

39,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

2h 16min

40 leçons

39,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Procédure étape par étape

Objectifs

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.

Résumé

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

Description

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.

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.

Programme détaillé

Accueil de la formation

Module 1 - Création de bouton simple et avancée avec Animate CC

Organisation du projet et présentation d'un bouton simple (4 états) 05:33

Fonctionnement d'un symbole bouton avec etat rollOver animé 02:41

Conception du symbole bouton pas à pas 01:51

Conception du symbole bouton avec état rollOver animé pas à pas 02:53

Module 2 - Création d'un symbole movieClip

Création d'un symbole movieClip (avec animations de survol et de sortie de survol) 03:14

Code : ajout d'un comportement bouton au movieClip 04:19

Code : ajout de gestionnaires d'évènements pour cibler les animations internes du MC 04:53

Module 3 - Création d'un symbole movieClip à deux états type switch

Présentation de l'exercice 01:10

Code : création de variables de référence 01:48

Création d'une zone cliquable 01:40

Code : ajout d'un gestionnaire d'évènements à la zone cliquable 01:27

Code : ajout d'une action avec condition 07:15

Module 4 - Comment coder un comportement bouton sur un movieClip

Code : ajout d'un comportement bouton de base au movieClip 02:00

Code : ajout des gestionnaires d'évènements survol et sortie de survol 04:46

Code : ajout des fonctions Tween d'animation pour animer les états du bouton 05:48

Module 5 - Création d'une animation complexe avec trajectoire

Présentation de l'exercice et création du document 00:38

Configuration et organisation du scénario, création des calques 03:24

Animation d'un objet sur une trajectoire 03:58

Animation de texte 01:16

Animation de masque sur un tracé de trajectoire 06:02

Module 6 - Création d'une animation complexe

Présentation de l'exercice et choix du mode de publication 00:55

Création du document et importation des médias ; paramétrage de la scène et du scénario 02:45

Animation de l'escargot sur le scénario principal 03:19

Animation interne du movieClip : étirement du corps 04:39

Animation interne du movieClip : mouvement d'un objet sur Animate CC - Elephorm 05:46

Ajout d'une ombre portée 01:39

Ajout de code sur l'escargot pour stopper et lancer les mouvements internes 03:37

Animation de la coccinelle sur le scénario principal 02:27

Animation interne des pattes de la coccinnelle 04:10

Coccinelle : Synchronisation décalée du mouvement des pattes 04:32

Coccinnelle : Ajout de code pour stopper et lancer les mouvements internes 02:21

Récupération du movieClip animé dans le fla exemple pour le scarabée 02:12

Animation du déplacement du scarabé sur le scénario principal 01:09

Récupération du movieClip animé dans le fla exemple 01:12

Détail et explications des animations interne des pattes 02:08

Animation des sauts sur le scénario principal 04:51

Ajout de code pour lancer les mouvement internes de propulsion des pattes 04:53

Animation du symbole de la libellule 05:36

Animation de la trajectoire de la libellule 08:06

Réglage des vitesses des insectes 03:46