1- Une animation Flash est constituée d'un ensemble de calques superposés (donc transparents). Chaque calque est lui-même composé d'une série d'images. Certaines images de la série sont des images-clés, elles peuvent être modifiées pour faire bouger des objets. L'animation que nous allons réaliser ici va comporter trois calques de 25 images. (cliquer ici pour voir l'animation que nous allons réaliser ensemble) Voici sa description :

Appuyer 25 fois sur la touche F5 pour créer les 25 images fixes de ce calque.

2- Nous allons dans un premier temps faire un calque de fond contenant le texte de base "Bienvenue dans le didactitiel FLASH".  (On considère que FLASH4 (ou 5) est lancé).

3- Nous allons maintenant rajouter un second calque sur lequel va se dérouler une petite animation d'une image de votre choix. Personnellement je vais utiliser le logo du site "Pause c@fé" :
Cliquer sur le symbole  +
  pour créer un nouveau calque (il se nomme calque 2 par défaut mais on peut le renommer à l'aide d'un double clic).
Cliquer sur l'œil et le cadenas du calque 1 pour en cacher et protéger le contenu pendant que nous allons travailler sur le calque 2.

  Ramener la mire à l'origine (position 1).
Commencer par faire Fichier > Importer pour placer l'image au format jpg (ou gif) sur le calque (pour moi ce sera l'image 'pause_cafe.jpg'). Placer cette image en bas et à droite. Dans la fenêtre de l'inspecteur d'objets taper les coordonnées du logo (exemple 290, 320 ) de façon à pouvoir gérer les animations le plus finement possible. Transformez-la en clip en appuyant sur F8.

Cliquer sur le 5 pour positionner la mire sur l'image 5. Taper alors la touche  F6 pour que cette image devienne une image clé. Nous allons modifier cette image clé pour faire notre première animation par interpolation.

Dans un premier temps remonter l'image 'pause_cafe' (qui maintenant est un clip) en haut et à droite (ne pas oublier de vérifier si la coordonnée x est bien toujours à 290). Ramener ensuite la mire en position 1 et cliquer avec le bouton droit de la souris pour créer une interpolation de mouvement. Pour faire un essai il suffit de faire Contrôle > Tester l'animation.
Voir l'animation

Nous allons maintenant faire tourner le logo de 'pause café' sur lui-même. Amener la mire sur l'image 10 et appuyer sur F6 pour créer une image clé. Sélectionner l'image (en cliquant dessus) et, dans l'inspecteur d'objets, sélectionner Transformer>pivoter>180 Ramener la mire en position 5 et (bouton droit) créer une interpolation de mouvement.
Vous pouvez essayer votre animation (Ctrl ENTREE).
Il est temps de faire une sauvegarde. Faire Fichiers-Enregistrer sous et taper le nom de l'animation 'Pause_cafe_01' . Votre animation sera sauvegardée au format *.fla. Ce format permet les modifications de l'animation mais n'est pas utilisable dans les pages html.
Voir l'animation
Nous allons maintenant faire redescendre le logo. Amener la mire en 15, appuyer sur F6 pour créer une image clé puis descendre l'image (elle retrouve en fait sa position initiale mais elle est à l'envers). Ne pas oublier de vérifier les coordonnées et remettre les coordonnées initiales. Revenir alors à la position 10 et créer une interpolation de mouvement. Il se peut que l'image 10 se retourne (elle doit rester à l'envers !); Il suffit alors de la faire pivoter une nouvelle fois pour la remettre à l'envers (dans l'inspecteur d'objets pivoter : 180°).
Entre les images 15 et 20 créer un retournement pour ramener l'image à l'endroit. Et entre les images 20 et 25 créer une animation de votre choix. Il est possible de ne définir que des images clés et de les modifier (redimensionner par exemple) une à une.
Voir l'animation
4- Claque 3 : des boutons.
Cliquer sur le symbole  +  pour créer un nouveau calque (il se nomme calque 3 par défaut mais vous pouvez le renommer à l'aide d'un double clic). Verouiller (cadenas) les deux autres calques.
Nous allons créer des boutons pour commander l'animation. Nous allons commencer par définir un script pour l'image 5. Nous allons utiliser une variable (appelons la position par exemple) de type numérique. Cette variable prendra la valeur 1 pour indiquer que l'image est en haut et 0 pour indiquer quelle est en bas. Commencer par cliquer sur l'image 5 du calque 2 avec le bouton droit et demander les Actions (Flash 5) ou Propriétés-Actions (flash 4).
Dérouler le signe +  et choisir Set Variable. La nommer position et choisir la valeur 1. Redérouler le signe + pour ajouter la commande Stop de façon à ce que le script s'arrête sur cette image. On peut alors exécuter le script. Le logo monte (image 5) et s'arrête. En Flash 5 on aura un script légèrement différent :
position= 1 ;
stop( );
En arrivant sur cette image (5) la variable position prendra la valeur 1 (utile pour pouvoir programmer les autres boutons) et le script s'arrêtera.
Maintenant nous allons créer un bouton pour commander à l'image de tourner quand elle se trouve en haut. Bien vérifier que l'on est sur l'image 1 du calque 3 et verouiller les autres calques pour ne pas faire d'erreur de sélection. Dessiner alors un rectangle plein (voir barre d'outils) qui va servir de base pour tous les boutons. On écrit "Tourner" sur le dessin. Nous allons maintenant convertir ce dessin en bouton. Sélectionner l'ensemble du dessin en tirant un rectangle de sélection autour du rectangle et choisir  Insertion> Convertir en symbole (raccourçi : F8). Cliquer sur Bouton et taper le nom "Bouton1".
A présent que notre dessin est devenu un bouton nous allons pouvoir le modifier pour qu'il prenne l'allure d'un vrai bouton. Dérouler le menu contextuel du bouton (bouton droit de la souris!) et demander Modifier. Appuyer sur la touche F6 pour générer une image clé correspondant au dessus du bouton. Modifier alors les couleurs du bouton a votre guise. En appuyant encore sur F6 faire la position abaissé puis encore une fois pour faire la position Cliqué. Le dessin est devenu un vrai bouton. Cliquer sur Scène 1 pour revenir à l'animation.
Nous allons associer une action à ce bouton. Avec le menu contextuel du bouton (bouton droit de la souris) demander les Propriétés et activer l'onglet Actions (sous Flash 5 la fenêtre Actions est sans doute déja ouverte) . Cliquer sur le signe + pour choisir l'action Go to puis sur Go to And Play et choisir l'image 6. Un clic sur le bouton provoquera donc un saut à l'image 6. On peut alors  essayer l'animation. On constate que le logo tourne bien mais il continu son mouvement et redescend. Pour pallier cet inconvénient il suffit de rajouter un script (Action) sur l'image 10 du calque 2 (penser à le déverouiller) : Go To and Stop (5)
(Ctrl + Entrée pour essayer)
Voir l'animation

Plaçons nous sur le calque 3, sur l'image 1 et verouillons les autres calques.
Nous allons créer un second bouton pour commander à l'image de redescendre. Demander Fenêtre > Bibliothèque pour afficher la bibliothèque propre à l'animation. On voit dans la liste le Bouton1 qui a été créé. Cliquer dessus avec le bouton droit et demander Dupliquer. Appeler ce nouveau bouton Bouton2 et glisser une instance de bouton sur le calque sous le bouton 1 .

  Dérouler le menu contextuel de ce nouveau bouton et demander l'option Modifier. Choisir alors l'outil texte et remplacer "Tourner" par "Descendre". Revenir à la scène 1. Associer àce nouveau bouton le script (Action : "Go To en Play (11)"). Essayer l'animation. Le logo descend mais remonte aussitôt. Il faut donc faire un script pour l'image 15 du calque 2 qui sera le suivant en flash 4:
Set Variable :"Position" = 0;
Stop
ou bien en flash 5
position=0;
stop()
La variable position sera donc égale à zéro en bas et à 1 en haut. Le stop() permet de s'arrêter sur cette image.

Un nouveau problème se pose lorsque le logo est en bas : un clic sur le bouton "Tourner" le ramène en haut. Il faudrait donc que le bouton "Tourner" ne soit actif que lorsque la variable Position est égale à 1. Revenir à la fenêtre Actions du bouton "Tourner" Cliquer sur le signe - pour détruire l'action actuelle. Cliquer sur le signe + et choisir If ; Taper alors la condition Position=1. Cliquer alors une nouvelle fois sur le + et valider Go To and Play (6). On a alors le script suivant (flash 4):
         On (Release)
                     If (position=1)
                          Go to and Play (6)
                 End If
         End On En Flash 5 la condition (position = 1) sera remplacée par la syntaxe (position = = 1); De plus les blocs sont entourés par des { } syntaxe propre au C, C++; Le script sera le suivant :
............on (release) {
..................if (position == 1) {
......................gotoAndPlay (6);
..................}
.............}
Le bouton "Tourner " est devenu inactif quand le logo se trouve en bas. En faire de même pour le bouton "Descendre" qui ne doit être actif que lorsque le logo est en haut (position=1). Il devient facile d'inventer deux nouveaux boutons : Remonter et Gonfler par exemple. Il suffit maintenant d'exporter l'animation (dans le menu Fichiers --> publier) pour fabriquer un fichier .swf qui sera utilisable dans une page html. Il suffit de trouver l'option : insérer une animation Flash dans votre éditeur html.