Atelier Flash : ma seconde animation

Créons un nouveau document et dessinons un rond vert dans la zone de travail. Ce rond vert est automatiquement créé dans un premier calque nommé par défaut "calque 1" [1]. Nous aurions aussi pu, comme dans le tutoriel précédent, importer une image de la bibliothèque.

Créons un second calque, sur lequel nous ne dessinons rien pour l’instant.
Sur le calque du rond vert ("calque 1"), positionnons-nous à l’intersection de l’image 15 et du calque 1 puis, à l’aide d’un clic droit (sur PC) ou des instructions "Insertion", "Scénario" puis "Image", créons une image fixe.

Plaçons-nous maintenant à l’intersection de l’image 40 et du calque 1.

Créons une "image-clé" qui sera bientôt un rectangle rouge.

On remarque que l’image "fixe", initialement placée à l’image 15, a progressé jusqu’à l’image 39. En effet, Flash a compris que le calque 1 était resté inchangé entre l’image 1 et la 39, et il a translaté l’image fixe du rang 15 au rand 39. En réalité, cette image fixe ne sert à rien du tout dans notre exemple ;-) Mais dans d’autres cas de figure, elle peut servir à indiquer jusqu’à quelle image se déroule une séquence sur un calque d’un document Flash, en parallèle d’autres séquences qui se déroulent sur d’autres calques.

Dessinons notre rectangle rouge sur le calque 1 de l’image 40 (en prenant soin d’effacer le rond vert sur cette image seulement) :

Avant de continuer, arrêtons-nous un instant pour contempler : nous voyons apparaître sur le scénario ci-dessus les trois types d’images clés de Flash :
 la "vraie" image clé, qui contient une image nouvelle et va marquer une rupture ou un changement graphique dans l’animation Flash,

Image clé "pleine"

 l’image clé vide, qui ne contient pas d’image mais peut contenir du code Actionscript (ce sera l’objet d’un prochain article de GénérationCyb). Signalons qu’une image clé "pleine" peut aussi contenir du code Actionscript en plus d’une image,

Image clé "vide"

 l’image fixe marque la dernière image de la séquence d’images à partir de la dernière image clé (vide ou pleine).

Image fixe

L’interpolation de formes

Si nous testons notre animation, elle fait pour l’instant apparaître une transition brutale entre les deux images clés : le rond vert et le rectangle rouge.
Nous disposons de deux moyens pour rendre plus fluide cette transition :
 l’interpolation de forme, qui crée un effet similaire au morphing (changement de forme progressif, mais cela peut aussi concerner le changement de couleur et de taille),
 l’interpolation de mouvement, qui rend progressif le mouvement depuis la position de départ jusqu’à la position d’arrivée.

Pratiquons tout d’abord l’interpolation de forme. Il faut pour cela cliquer sur l’image de départ ou celle d’arrivée (sur le bon calque !) et choisir, dans la fenêtre propriété, "Interpolation de forme" :

Dans la fenêtre de scénario, une flèche noire sur fond vert relie maintenant les deux images clés. C’est le signe que l’interpolation de forme est activée. Voici une image saisie au vol de cet effet.

Et voici l’effet en fichier joint.

Sachez que pour appliquer une interpolation de forme à des images bitmaps, vous devez tout d’abord "séparer" ces images. S’il s’agit de texte, vous devez le séparer deux fois afin de le convertir en objets. Nous y reviendrons.