|
|
 Création
d'une bannière animée |
|
|
|
 |
Avant-propos |
 |
Les images animées ne sont qu'une succession d'images fixes,
chacune placée dans une "frame" ou séquence. L'animation se
fait par l'affichage successif des frames selon une vitesse
déterminée.
Pour chaque changement dans l'animation il suffira de rajouter
des frames manuellement ou automatiquement. |
|
|
Informations |
|
Logiciel : 
FireWorks 4 MX
Niveau :  
Initié
Auteur : Sib [Zoomduweb] |
|
Les étapes |
|
|
[Etape 1]
Commencez par créer un nouveau document d'une taille de 468px
de large et 60px de haut, en transparent et d'une résolution
de 72 px/inch.
Crééz le fond de votre bannière, soit en récupérant un fond
libre de droits (sur Freegaïa par
exemple), soit en le construisant vous-même.
[Etape 2]
Sur le même layer (calque), ajoutez un logo que vous aurez
réalisé avec vos petits doigts et votre imagination.
Pour cela, choisissez une police appropriée pour votre texte,
veillez à ce que l'option "smooth anti-alias" soit choisie.
Afin de transformer le texte à votre guise, convertissez-le
en vectoriel (bouton droit / convert to paths), puis séparez
chaque lettre (bouton droit / ungroup) pour les travailler
individuellement.
Finallement, sélectionnez de nouveau toutes les lettres (soit
avec la souris, soit avec "edit / select all") et regroupez-les
(bouton droit / group).
Ce fond doit maintenant être cadenassé pour pouvoir se dupliquer
automatiquement sur toutes les frames de l'animation. Pour
cela, allez dans le menu Layers (calques) double-cliquez sur
le Layer en cours et cochez "share across frames". Ensuite
cliquez sur le crayon (à gauche de l'oeil de votre Layer)
pour cadenasser votre calque qui contient votre fond.
Tout ce qui sera placé sur ce layer sera automatiquement présent
sur toutes les nouvelles frames créées.
[Etape 3]
Nous allons maintenant animer cette bannière.
Notre première animation consistera à afficher successivement
les différents services disponibles sur Freegaia.
Créez un nouveau calque. Ajoutez une frame ou "image" (le
menu en bas à droite près de layers). Réglez la durée de la
frame 1 à "100" et celle de la frame 2 à "30". Pour cela,
il suffit de double-cliquer sur le chiffre "0" à droite du
nom de la frame.
Dans ce calque et dans cette nouvelle frame, ajoutez un texte
(par exemple "ressources").
|
|
Pour ajouter les autres textes, nous allons devoir dupliquer
cette frame. Cliquez sur la flèche noire à droite des onglets
Frame et History et faites "Duplicate Frame" : une nouvelle
frame est créée tout en gardant le texte "Ressources" affiché.
Réglez la durée de la 3ème frame à "30" et ajoutez le texte
de votre choix.
Recommencez l'opération afin d'avoir 5 frames et 4 textes
au total (ici : "Ressources", Tutoriels", "Services" et
"Gratuit"). Réglez la durée de la dernière frame (5) à "80".
[Etape 4]
Un peu de mouvement !
Fireworks peut également générer des animations plus complexes
de façon automatique. C'est à dire qu'il crée les nouvelles
frames automatiquement selon les besoins.
Nous allons donc rajouter un texte qui va se déplacer de la
droite vers la gauche sur la bannière.
Ajoutez une nouvelle frame (pas de duplication) ainsi qu'un
nouveau layer.
Crééz un texte "Ressources gratuites pour webmaster".
Transformez cet objet en symbole animé en allant dans le menu
Modify / Animation / Animate selection. Utilisez comme options
: Frames 7, Move 250, Direction 180.
Fireworks vous demande s'il doit rajouter des frames automatiquement.
Confirmez.
Allez voir dans l'onglet Frames pour confirmer que Fireworks
a bien créé 7 frames d'animation. Réglez la durée des nouvelles
frames à "10" sauf la dernière à "80".
Vous pouvez visualiser l'animation grâce à la petite flèche
blanche dans la fenêtre du bas.
Placez ensuite ce texte tout à droite, à l'extérieur de la
bannière. Vérifiez que le point rouge de la fin d'animation
se trouve bien au bon endroit (vers le centre).
Voilà, votre bannière animée est terminée !
A vous maintenant de peaufiner votre bannière personnelle.
Quelques conseils précieux sont disponibles ici : Dossier
bandeau
|
La bannière réalisée
:
|
|
| |
|
|
cliquez ici pour imprimer la page
