Animation sous Fireworks
Niveau : Initié
Temps : 10 à 20 minutes

Au cours de ce tutoriel, vous allez découvrir les possibilités d'animation sous fireworks en réalisant dans notre exemple une LED animée. Il est préférable d'avoir suivi le tutoriel précédent destiné à fireworks : "création d'une led" en deux parties, puisque nous allons utiliser deux images qui y sont réalisées : une LED éteinte et sa version allumée. L'animation consistera donc à faire clignotter cette LED.

Lancez Fireworks et ouvrez les documents contenant vos deux LEDs. Créez un nouveau document d'une dimension suffisement grande pour accueillir votre LED et d'une couleur de fond au choix, les deux modèles de LED devant être superposés par la suite.
Normalement si vous avez suivi correctement ce tutoriel de création de LED, elles doivent être groupées en un seul et unique objet (CTRL+"G"). Sélectionnez la LED éteinte, copiez puis collez dans votre nouveau document. Remarquez la LED présente dans votre palette des calques.



Copiez maintenant votre LED en version allumée précédemment créée et collez celle-ci par dessus la LED normale. Ajustez pour que les deux LED soient bien superposées, soit par tranche de dix pixels au clavier grâce aux commandes "flèche"+"MAJ", soit pixel par pixel pour plus de précision juste avec les flèches directionnelles du clavier.
Pensez à sélectionner les LEDs via leurs sous-calques respectifs pour ajuster leur position l'une envers l'autre.



Maintenant coupez le calque de la LED allumée afin de la copier en mémoire mais également de la supprimer de l'image. Rendez-vous dans la palette d'outils nommée "Images et historique", puis sur son onglet "Images" si ce n'est pas déjà fait.



Vous pouvez voir ici une seule image. Créez-en une nouvelle en cliquant sur l'icone prévue à cet effet. Remarquez le chiffre 7 à côté du nom de l'image dans la palette, en double-cliquant dessus, vous pouvez modifier la durée d'affichage de l'image.



Cette nouvelle image est vide, collez votre LED allumée précédemment coupée. Vous obtenez sur votre image principale deux sous-images, l'une avec la LED éteinte, l'autre avec celle allumée. Pour visualiser le résultat, cliquez sur le bouton de lecture situé en dessous de votre image.



L'animation est un peu brutale, nous allons ajouter des étapes pour que l'éclairage soit progressif.
Dupliquez la première image en la faisant glisser sur l'icone de création de nouvelle image en bas de la palette "Images et Historique". Une nouvelle image identique se créé à la suite (image 2).



Sur cette image, choisissez l'outil de sous-sélection (flèche blanche / touche de raccourci "A") puis sélectionnez la partie principale de la LED.



Appliquez un effet néon/lueur de couleur verte, de largeur 2, d'adoucissement 6 et d'opacité 20% (ou adaptez suivant la taille de votre objet, il faut que la lueur soit légère). Décochez juste au dessus le dernier effet d'ombre portée s'il y en a un.



Maintenant il faut créer une autre étape. Dupliquez cette fois la dernière image, vous en obtenez 4 au total. Sélectionnez la troisième.



Adoucissez les divers effets qui font que la LED parait allumée (assombrir les couleurs, baisser les lueurs etc).

Vous obtenez quatre images avec une intensité lumineuse bien distincte pour chacune d'elle, et l'animation s'en trouve plus fluide.



Maintenant, vu que l'animation va être lue en boucle, il faut ajouter des images pour le mouvement retour (LED allumée vers LED éteinte). Dupliquez la troisième image et placez-là dernière, puis faites de même avec la seconde image. Vous obtenez cette suite d'images : 1-2-3-4-3-2 , qui sera lue en boucle.

Pour terminer, nous allons exporter cette animation au format GIF animé, mais sachez toutefois que Fireworks permet l'exportation sous d'autres formats de fichiers. Rendez-vous dans le menu "Fichier"/"Apperçu avant exportation" (ou "Fichier"/"Apperçu de l'image" pour Foreworks 8 ).

Dans le menu déroulant de droite (voir tutoriel précédent : Exportation de design pour le web, première partie, pour plus d'informations sur les options possibles), choisissez "Gif animé" comme type de fichier. Pour gagner en poids de fichier, vous pouvez baisser par exemple le nombre de couleurs à 128, voir moins suivant le cas.



Nous verrons les paramètres de transparence dans un prochain tutoriel.
Cliquez sur l'onglet en haut à gauche nommé "fichier". Ici vous pouvez redimensionner votre image exportée sans modifier celle d'origine.
Cliquez sur l'onglet animation. Vous pouvez ici modifier la durée d'affichage de chaque image, ou encore définir si l'animation sera jouée en boucle ou seulement une fois. Ici, vérifiez juste que "En continu" est défini. Cliquez sur "exporter" et enregistrez votre image. Terminé !