Exercice : Bouton animé

Bouton
Dans cet exercice, vous allez reproduire le bouton ci-contre avec l'animation lorsque l'utilisateur passe la souris par dessus le bouton.

 



Créez un symbole de type bouton

Dans le menu Insertion, choisissez Nouveau symbole...



Calques

On va utiliser 2 calques. Le calque Texte est utilisé pour ajouter le texte du bouton. Le calque Arrière, est utilisé pour la forme du bouton.

Sur le calque Arrière, tracé la forme du bouton.

Ensuite sur le calque texte, ajoutez le nom d'un site web, exemple : Google




Images clés

Sur le calque Arrière, ajoutez des images clés sur les calques Dessus et Abaissé. Ajoutez un image pour la zone Cliquable.

Sur le calque Texte, ajoutez une image clé sur Abaissé car le texte chagera de couleur lorsque l'utilisateur appuira sur le bouton.



 



Animation

À l'image Dessus, convertissez la forme du bouton en symbole Clip.

Pour modifier le clip que vous venez de créer, double cliquer dessus. Vous pouvez également ouvrir la fenêtre Bibliothèque et modifier le clip.


Dans ce clip, vous allez créer une interpolation de forme. L'apparence des images est indiqué ci-contre. Un truc facile pour reproduire cet exemple : Insérer immédiatement toutes les images clés et par la suite, changez le remplissage du bouton.

Sur les images, 5 et 10, il suffit de changer l'orientation du dégradé. À l'image 15 changez le remplissage dégradé pour bleu. L'image 20 doit être la même que celle de l'image 1. Si vous avez créer toute vos images clés au début, il n'y a pas de changement à faire à l'image 20.

Image 1

Image 5

Image 10

Image 15

Image 20

 


Action sur le bouton : lien Internet


Il ne reste plus qu'à ajoutez votre bouton sur la séquence et insérez l'action getURL.

  1. Revenez à la Séquence1
  2. Ouvrez la fenêtre Bibliothèque (F11)
  3. Insérez votre bouton, dans sur la fenêtre de travail.
  4. Sur le bouton, Cliquez sur le bouton de droite de la souris, et choisissez l'option Actions
  5. Ajoutez l'action getURL.
  6. Dans la zone URL, indiquez l'adresse complète de votre site web.

Vous avez terminé! Testez votre animation pour voir le résultat