<<<<<<Retour page précédente

A partir de maintenant, on ne touche plus au dossier fond et travailler avec le

"calque 1 "

2) Animation : celle ci sera composée de 20 images

Pour commencer nous allons ouvrir le panneaux "Aligner" qui noue sera fort utile.

Onglet>>>Fenêtre >>Aligner

Dans le panneau "Image" nous avons une image qui se nomme "Image1 "

C'est celle ci qui va être la première image de notre animation , et nous la dupliquerons pour créer l'image 2 , que nous dupliquerons à son tour pour l'image 3 etc........mais nous reverons tout cela un peu plus bas .

L'objet qui va être animé sera un texte , cela pourrait aussi bien être une ou des formes géométriques, une ou des images ...............

L'image 1 étant selectionnée , dans la barre d'outils cliquez sur l'outils texte et tapez le texte que vous voulez sur votre scène , voici les paramètres de mon texte , visible dans la barre "Propriété", le paramètre qui à la valeur 16 permet de régler l'espacement entre les caractères.

Votre texte tapé , centrez celui ci dans l'axe vertical de la scène à l'aide du panneau "Aligner"

Cliquez d'abord, si ce n'est déjà cocher sur "ce bouton , afin que l'alignement se fasse par rapport à votre scène et non par rapport à un autre objet.	Puis cliquez sur cet autre bouton, pour aligner le texte sur l'axe vertical de notre scène

Pour la première image nous allons faire démarrer notre texte à l'extème droite de notre scène, pour cela (votre texte étant toujours sélectionnez ,donc entouré d'un cadre bleu) déplacez le vers la droite, à l'aide des flèches de déplacement de votre clavier.

..afin qu'elle se trouve à peut prêt a cet emplacement

Avant de continuer nous allons régler le temps d'affichage pour cette première image.

Dans le panneau Image double cliquez sur le chiffre 7 , et mettez 10 dans la fenêtre , cela fait que cette image ,et celles qui seront dupliquées auront un temps d'affichage de 10/100° de seconde ( 100 donnerait un affichage de 1 seconde pour cette image)

NOTA: Evidement vous pourrez régler ce temps pour chaque image , et suivant la fluiditée voulue ,et ce de façon indépendante pour chaque image.

Nous allons créer limage 2

Cliquez (sans relâcher) sur l'image 1 et glissez la jusqu'à l'icone "dupliquer "

Cliquez sur l'image 1 sans relàcher et...	déposez votre image sur cet icone"Dupliquer"

L'image 2 etant sélectionné , déplacez le texte de 20 pixels vers la gauche (soit 20 pressions sur la flêche gauche du pavé directionnel)

L'image 2 étant crée dupliquez la (et le texte étant sélectionné) déplacez le texte de 20 pixels sur la gauche

L'image 3 étant crée dupliquez la (et le texte étant sélectionné) déplacez le texte de 20 pixels sur la gauche

L'image 4 étant crée dupliquez la (et le texte étant sélectionné) déplacez le texte de 20 pixels sur la gauche

...et ceci jusqu' à l'image 16

NOTA:Il y à un moyen plus simple de créer une interpolation de mouvement avec Fireworks (onglet >>Modification >> Animation>> Animer la sélection ) ,mais ce moyen "basique employé permettra de bien comprendre la manipulation des différentes foncions employées ci dessus.

Arrivé sur l'image 16 , dans le panneau "Aligner" le texte étant sélectionné , alignez votre texte dans les deux axes (vertical et horizontal)

Vous pouvez d'ailleurs vérifier , tout au long de la création des images que le texte reste centré verticalement.

Toujours sur l'image 1,6 nous allons marqué un petit temps d'arrêt sur l'animation, double cliquez sur le paramètre de temps (10) et mettez 100 soit une seconde.

Dupliquez cette image 16 , et maintenant sur l'image 17, selectionnez l'outils "Mise à l'échelle"

Etirez votre image dans le plan horizontal......... selon votre convenance

Puis dans le plan vertical

Maintenant re"Alignez" votre texte à l'aide des outils "Aligner" déjà vus plus haut

Dupliquez cette image (16) pour obtenir l'image 17. Le texte étant sélectionné (entouré d'un cadre bleu) nous allons modifier la transparence du texte à l'aide du panneau "Propriété" . Mettez une valeur de 50.

Votre texte à changé de teinte grâce à ce réglage de sa transparence.

Dupliquez cette image et sur l'image cette image 18 redimensionnez à nouveau le texte pour l'agrandir (n'oubliez pas de le re aligner).

Modifiez la transparence à nouveau avec 20 pour valeur.

Dupliquez enfin l'image 19 et sur l'image 20 rétablissez le paramètre de transparence à 100

Testez votre animation en cliquant sur le bouton 'jouer"

Si vous n'êtes pas convaincu par le timing de votre animation , vous pouvez modifier ,pour chaque image , son temps d'apparition

Nous allons enfin pouvoir enregistrer notre travail .

Onglet Fichier>> Aperçu avant exportation

Format: Gif Animé   Palette: Web 216 (pour ne pas trop alourdir notre animation)   Perte: ici à 0 vous pouvez augmenter ce chiffre pour alléger l'animation , au détriment de sa qualité   Transparence: Alpha ,pour que le cercle à droite de la bannière, ait la couleur de l'arrière plan de votre page Web

Dans la même fenêtre Onglet "Animation, vous avez plusieurs choix : soit "en continu" et là votre animation rebouclera en permanence ou faire le choix de la faire reboucler un nombre de fois ,choisi dans cette liste , dans ce cas testez pour qu'à la fin de ces x fois ou votre animation aura bouclé , qu'elle s'arrête sur l'image voulue .

Ceci fait faites "exporter" choisissez l' emplacement voulu sur votre disque dur , puis Enregistrer

Si cela n'a pas été fait , faites >>Fichier>> Enregistrer , Fireworks vous propose d'enregistrer l'animation au format .png , surtout faites le !!!, sinon il vous sera difficile de remodifier votre bannière à partir du fichier .gif , seulement .

Telecharger le .png de cet exemple

Voila .ce fut un peu long , mais si vous avez acquis ces principes de base avec Fireworks , vous serez capable de réaliser tous les gifs animés dont vous rêvez !!!!

Si vous avez besoin d'aide contactez moi                   ©orka01/02/04

<<<< Revenir sur la première page de ce tutoriel

haut de page