Atelier Flash : ma première animation

___

Flash permet de créer des séquences animées destinées à illustrer des pages Web. Déjà dans ce premier registre, il est très performant puisque les séquences qu’il crée en format vectoriel [1] sont plus légères en taille et peuvent être plus élaborées que des images gif animées.

Mais Flash peut aller plus loin, en créant des séquences animées capables réagir en fonction des actions de l’internaute et du comportement de la la souris.
Quelques applications concrètes [2] : des menus et des jeux interactifs, des tutoriaux animés.

Flash sait dialoguer avec une base de données. On peut donc l’utiliser pour concevoir des exercices ou quizz animés dont les résultats sont récupérés et interprêtés, une carte géographique liée à une base d’infos sur les lieux qui apparaissent, etc.

Le but de cet article est de vous aider à réaliser votre première animation Flash. Il s’inspire du didactiel très bien conçu livré avec le logiciel.
Les captures d’écran ont été réalisées sur Flash MX Professionnel 2004 version 7.1 sur Windows XP.

Voici le type de résultat que nous allons obtenir :

___

Commencez par créer un nouveau fichier en lui attribuant une vitesse de 12 images par seconde. Sans attendre, enregistrez-le sous le nom "exemple". Il devient le fichier "exemple.fla". Les fichiers fla sont les fichiers sources (fichiers natifs - fichiers de travail), à distinguer - nous le verrons - du fichier .swf qui est le fichier résultat (fichier publié) de votre travail, celui que vous insérerez dans votre code html.

A l’aide de l’outil rectangle et de l’outil pot de peinture (les outils Flash de dessin et de création de texte sont semblables à ceux d’autres logiciels graphiques), créez une zone colorée (grise dans notre exemple) :

Déjà apparaît l’outil de base de Flash : la fenêtre de scénario, dont les lignes comportent les différents calques et les colonnes les différentes images.

Pour plus de facilité, nous allons partir de deux images déjà conçues auparavant : car.png et logo.ai (la première est bitmap et aurait pu être conçue avec Fireworks, ImageReady, etc., la seconde est vectorielle et aurait pu être conçue avec Illustrator… ou Flash).
Pour les trouver sur votre disque dur, allez dans le fichier d’aide de Flash (le chemin est quelque chose comme Macromedia\Flash MX 2004\fr\First Run\HelpPanel\Help\GettingStarted\start_files\Assets logo.ai et car.png).
Effectuez ainsi l’opération Fichier > Importer > Importer dans la bibliothèque à deux reprises (pour logo.ai, dans la boîte de dialogue Illustrator Import, assurez-vous que l’option "Inclure les calques invisibles").
Les deux images sont maintenant dans la bibliothèque (que vous faites apparaître en cliquant sur "Fenêtre" puis "Bibliothèque").

Cliquez sur l’icone de chaque illustration dans la fenêtre bibliothèque pour la positionner sur votre zone de travail Flash. Saisissez également le texte "Ne laissez pas la voiture de vos rêves disparaître !" (en effet, ce serait dommage).

Sélectionnez la voiture. Un liséré gris apparaît autour d’elle, indiquant qu’elle est bien sélectionnée. Cliquez sur "Insérer" puis "effets du scenario" puis "Transformation-transition" puis "Transition". La fenêtre d’effet de transition s’affiche avec ses paramètres par défaut. C’est un outil magique de Flash.

Essayez différentes variations d’effets, en cliquant sur “Mettre à jour l’aperçu” après chaque modification.

Une fois satisfait, validez votre effet de transition par "ok". Vous avez créé un nouveau calque (une nouvelle couche d’image), qui se nomme ici Transition 1.

Remontez le calque Transition 1 au-dessus du calque Calque 1, pour que la voiture et le logo soient visibles.

Choisissez Contrôle > Tester l’animation pour visionner l’animation. La voiture disparaît comme prévu avec l’effet de transition, mais le texte et le cadre gris ne demeurent que le temps d’une image.
Pour que ces derniers demeurent pendant tout le temps où disparaît la voiture, il faut étendre le calque Calque 1 jusqu’à l’image finale (image n°30 dans notre exemple).

Pour l’instant en effet, le calque Transition 1 s’étend jusqu’à l’image 30, alors que le calque Calque 1 se trouve uniquement sur l’image 1 :

Pour étendre le calque Calque 1 jusqu’à l’image finale, cliquez avec le bouton droit sur Image 1 dans le calque Calque 1 et choisissez "Copier les images". Cliquez ensuite avec le bouton droit de la souris sur l’Image 30 dans le calque Calque 1 et choisissez "Insérer une image".

Retestez l’animation pour vérifier que le fond de couleur et le texte demeurent bien jusqu’à la fin.

Avant d’enregistrer définitivement votre animation en format .fla, vous pouvez pour vous familiariser modifier quelques couleurs et dimensions. Pour cela, positionnez-vous sur le bon calque, sélectionnez votre image ou texte et effectuez un clic droit pour choisir “Transformer librement”. Une modification effectuée sur une image se répercute par défaut à toutes les autres (ouf !).

Il ne vous reste plus qu’à utiliser la commande Publier pour créer une version web portant l’extension swf. Flash crée ainsi un fichier .swf et un fichier .html, qui comporte les codes que vous pouvez insérer dans toute page html, php, asp, etc.

A bientôt ;-)