Teachers

This article comes with exercise files. Click on the link below to download:
[GO TO EXERCISE FILES DOWNLOAD PAGE]

Step 1
Open the animated-button.fla file. On the Stage, you will see a smiley face.

Step 2
Use your selection tool to select the smiley face on the stage. MAKE SURE YOU SELECT THE WHOLE ARTWORK. Dont just click on it. Instead, use the selection tool to click and drag a selection area around the smiley face to ensure that the whole drawing is selected.

Then convert it into a button symbol named ButtonSmiley.

Step 3
Now double-click on the ButtonSmiley instance on the stage in order to enter symbol editing mode. In the edit bar, you should now see that you are inside the ButtonSmiley timeline.

Step 4
You will see that the UP state already has a keyframe. Insert keyframes in the OVER, DOWN, and HIT states as well.

Step 5
Then click on the OVER keyframe in order to select it. This is where we will place the animation so that the button becomes animated whenever the user mouses over it. The animation will actually be nested inside a movie clip thats going to be inside this OVER keyframe. Well learn how to do that in the steps that follow.

Step 6
Once the OVER keyframe is selected, go to the stage and make sure that the smiley face is selected. MAKE SURE THAT THE ENTIRE THING IS SELECTED. Then convert it into a movie clip symbol named SmileyAnimation. We are converting it into a movie clip symbol so that we can place the animation inside it.

Step 7
After converting it into a symbol, double-click on the SmileyAnimation instance on the stage in order go inside its timeline. In the edit bar, you should see that you are now inside the timeline of the SmileyAnimation movie clip.

And remember, this movie clip instance is inside the OVER keyframe of the ButtonSmiley symbol.

Step 8
To animate the smiley face, we can use classic tweens. But first, well need to convert the smiley face into a symbol again since we are now actually inside the timeline of the SmileyAnimation movie clip. Inside the SmileyAnimation movie clip, the smiley face on the stage is just a drawing. Its not yet a symbol. Well need to convert into a symbol so that we can use classic tweens to animate it. So once again, make sure that the whole smiley face is selected and convert it into a movie clip symbol. This time, just name it Smiley.

So now, we have the Smiley symbol, which is inside the SmileyAnimation symbol, which is inside the OVER keyframe of the ButtonSmiley symbol.

Step 9
Then insert keyframes on frames 10 and 20 of the SmileyAnimation symbols timeline.

Step 10
Then go back to the keyframe on frame 10.

Step 11
Once you are back on the keyframe on frame 10, increase the size of the instance of the Smiley symbol on the stage. Select the free transform tool to be able to scale the instance on the stage.

Once the free transform tool is selected, click on the Smiley instance on the stage to make sure that its selected. DO NOT DOUBLE CLICK IT. Just click it once.

You should then see adjustment handles on the corners and the sides of the instance.

Place the cursor over any of the corner handles and click and drag outward in order to make the Smiley instance bigger.

Step 12
Once youve increased the size, insert classic tweens in between all of the keyframes. We have 3 keyframes, so well insert a classic tween between the first and middle keyframes, and then well insert another one between the middle and last keyframes. To insert a classic tween, right-click anywhere in between the keyframes and choose Create Classic Tween.

Once the classic tweens have been added, your animation should now be complete.

To recap, youve created a nested animation inside the SmileyAnimation symbol. And since the SmileyAnimation symbol is inside the OVER keyframe of the ButtonSmiley symbol, this means that the animation is only going to come out when the user mouses over the button.

Step 13
Test the movie by pressing ctrl + enter (PC) or cmd + return (Mac). Once the test movie comes out, mouse over the smiley face and watch it animate. When you mouse out of the button, then the animation will stop. Mouse over it again, and the animation starts again.

Congratulations! You have just created an animated button.

Course: Tutorom Adobe Flash CS5 Nouveautés et ActionScript 3.0
Author: Rachel Thiebaud
Training Site: VTC Online University.

Below, you will find free sample videos to an Adobe Flash CS5 and ActionScript 3 training course in French. This course is provided by the VTC Online University. If you wish to view the entire course, learn more about the VTC Online University and sign-up for a membership.

Introduction

Présentation du tutorom
Nouveautés dAdobe Flash CS5
Travail collaboratif : format de fichier .xfl

Créer du texte avec le nouvel outil TLF

Créer des paragraphes
Formater du texte
Créer des colonnes
Relier des blocs de texte entre les images

Dessiner et animer des décors avec loutil Déco

Dessiner avec de nouveaux remplissages
Nouveau : dessiner des images animées

Animer avec un squelette

Utiliser les modèles danimation Flash
Créer un squelette avec loutil Segment
Créer un effet de ressort avec loutil Segment

Les bases dActionScript 3.0

Introduction et nouveautés
Fenêtre Actions : panneaux et assistant de script
Fenêtre Actions : barre doutils de code
Objets : classe et propriété
Objets : méthode et fonction
Variables
Expressions - Types de données
Syntaxe de code
Externaliser le code A.S

Coder avec les fragments de code AS 3.0

Créer un lien vers une page web
Créer un lien vers une animation
Contrôler lanimation avec des boutons Stop et Play
Déclencher une animation - Événements de souris (clic - survol…)
Déplacer un objet avec les flèches du clavier
Ajouter une action de glisser-déposer sur une image
Cliquer pour positionner un objet
Placer lobjet au premier plan
Faire disparaître une image en fondu
Cliquer pour masquer lobjet
Afficher un objet
Cliquer pour afficher un champ de texte
Personnaliser le curseur de la souris
Générer un numéro aléatoire
Afficher le temps - Compte à rebours

Animer avec les fragments de code AS 3.0

Animation de pixels en pixels
Animation fluide
Rotation
Copier un code danimation

Les fragments de code AS 3.0 pour texte et images

Cliquer pour charger des images de la bibliothèque
Ajouter - Supprimer instances de la bibliothèque
Charger du texte externe

Créer un diaporama avec des boutons

Créer des boutons reliés à des images externes
Charger des images externes

Créer un menu déroulant

Créer un menu principal et des sous-menus
Créer un menu déroulant animé
Créer des boutons de menu
Fermer un menu déroulant

Utiliser les fragments de code AS 3.0 pour la vidéo

Introduction et nouveautés
Paramétrer le lecteur FLVPlayback
Extraire une image de la vidéo comme image de prévisualisation
Charger limage de prévisualisation
Lancer la vidéo après la prévisualisation
Nouveau : insérer des points de repères directement dans Flash
Insérer des sous-titres
Lire plusieurs vidéos avec des boutons
Lire plusieurs vidéos avec une Playlist
Créer le code pour la Playlist

Conclusion

Résumé et aide
Présentation de lauteur