Ce tutoriel a pour but de vous montrer étape par

Comment créer des GIF animés en dix étapes ?
Tutoriel GIF Movie Gear
Septembre 2002
Rédigé par :Visicom Média
inc.
1
TABLE DES MATIERES
PRÉSENTATION DE GIF MOVIE GEAR ................................................................................................................... 2
BARRE DE MENUS ............................................................................................................................................................ 2
BARRE D'OUTILS SUPÉRIEURE .......................................................................................................................................... 2
BARRE D'OUTILS INFÉRIEURE ........................................................................................................................................... 2
BARRE DE STATUT ........................................................................................................................................................... 3
ÉTAPE 1 : COMMENT INSÉRER ET AJOUTER DES CADRES DANS UNE ANIMATION .............................. 3
INSÉRER CADRES.............................................................................................................................................................. 5
COLLAGE ......................................................................................................................................................................... 5
ÉTAPE 2 : RÉGLAGE DU TEMPS DE DÉLAI............................................................................................................ 5
ÉTAPE 3 : AFFICHER UN APERÇU DE L'ANIMATION......................................................................................... 7
ÉTAPE 4 : SAUVEGARDE DE L'ANIMATION.......................................................................................................... 8
ÉTAPE 5 : MODIFICATION DE L'ANIMATION....................................................................................................... 9
SUPPRESION D'UN CADRE ................................................................................................................................................. 9
RÉORGANISATION DE CADRES.......................................................................................................................................... 9
ÉTAPE 6: CHARGEMENT DE CADRES ET D'ANIMATIONS ............................................................................... 9
ÉTAPE 7 : OPTIMISATION DE L'ANIMATION ..................................................................................................... 11
ÉTAPE 8 : GÉNÉRATION D'UN CODE HTML........................................................................................................ 12
ÉTAPE 9 : COMMENT CHANGER LES COORDONNÉES X ET Y D'UN CADRE............................................ 12
ÉTAPE 10 : COMMENT CRÉER UNE ANIMATION À PARTIR D'UN FICHIER DE PHOTOSHOP
DE FORMAT PSD.......................................................................................................................................................... 14
2
CONSTRUIRE DES GIF ANIMÉS EN HUIT ÉTAPES AVEC GIF MOVIE
GEAR
Ce tutoriel a pour but de vous montrer étape par étape, la construction d’une image GIF animée
en utilisant GIF MOVIE GEAR. Il s’adresse aux nouveaux utilisateurs de GIF animés et à ceux
qui ne connaissent pas le fonctionnement de GIF MOVIE GEAR.
Afin de permettre aux nouveaux usagers d’utiliser à profit ce logiciel, nous allons l’illustrer par un
exemple facile et simple d’une animation. Les fichiers de cet exemple se trouvent dans le dossier
C:\Program Files\Gmg\exemples\ de votre disque dur. Voici les noms de sept fichiers
d’images GIF : chien1, chien2, chien3, chien4, chien5, chien6 et chien7.
Nous vous invitons à suivre les quatre premières étapes afin de saisir la démarche poursuivie.
Pour mieux consulter ce tutoriel, il est conseillé de le faire imprimer. Bonne lecture!
PRÉSENTATION DE GIF MOVIE GEAR
GIF Movie Gear possède une interface conviviale pour l'utilisateur. En effet, celui-ci bénéficie
de barres d'outils graphiques lui permettant de construire aisément des GIF animés en peu de
temps.
BARRE DE MENUS
BARRE D’OUTILS SUPÉRIEURE
Nouveau
Sauvegarder
Ouvrir
Couper
Copier
insérer cadre
Coller
Effacer Refaire
Annuler
Arrêter aperçu Réduire les palettes Réduire Bandes verticales Aide
Optimiser animation
Agrandir
Orientation implicite
Aperçu animation
Dimensions réelles
Bandes horizontales
BARRE D’OUTILS INFÉRIEURE
Propriétés cadre
Intervalle
Supprimer
Sélection couleur de
(retour cadre précédent)
transparence
Afficher
palette locale
Afficher
palette globale
3
Nom du cadre
Supprimer
supprimer
Permuter
(laisser tel quel) (Rétablir arrière-plan) transparence
Palette locale
Propriétés
animation
Entrelacer
Nbre itération
BARRE DE STATUT
Sélection actuelle
Grossissement actuel de l’affichage
Nbre total de cadres de l’animation
Temps de téléchargement estimé
Volume du fichier d’animation GIF
Durée totale de l’animation
ÉTAPE 1 : COMMENT INSÉRER ET AJOUTER DES CADRES DANS UNE ANIMATION ?
D’abord un mot sur les cadres et l’animation :
Un cadre est simplement une image de l’animation.
Une animation désigne une série d’images superposées à laquelle des instructions de durée et de
couleurs sont données.
Utilisation de l’exemple du tutoriel
Voici sept fichiers d’image qui se trouvent dans le dossier C:\Program Files\Gmg\exemples\
de votre disque dur que nous allons associer afin de construire notre animation du chien qui
court. Nous appellerons cette animation : chien. Pour ce faire, vous devez vous trouver dans
l’écran principal de GIF Movie Gear et procéder de la manière qui suit :
Pour insérer le premier cadre :
1. Cliquez sur le bouton
“Insérer cadre” de la barre d’outils supérieure;
2. Sélectionnez l’image chien1.gif du dossier C:\Program Files\Gmg\exemples\ de
votre disque dur ;
“Ouvrir” ;
3. Appuyez sur le bouton
4. Dans la boîte “Nom du cadre”, sélectionnez Aucun (None).
4
Vous obtenez ceci :
Répétez les points 1, 2, 3 et 4 pour insérer les images chien2, chien3, chien4, chien5, chien6 et
chien7.
Après avoir inséré les sept images, voici ce que vous obtenez :
Pour voir les autres images, utilisez la barre de défilement horizontale.
Vous pouvez également visualiser tous les cadres en appuyant sur le bouton
barre d’outils supérieure.
“Réduire” de la
5
Et pour revenir aux dimensions réelles des images, appuyez sur le bouton
réelles” de la barre d’outils supérieure.
“Dimensions
Vous pouvez insérer des cadres dans l'animation selon diverses méthodes.
Méthode 1. Insérer cadres
Dans le menu “Fichier”, sélectionnez l’option “Insérer cadre(s)” (ou utiliser le
bouton
“Insérer cadre”) de la barre d’outils supérieure pour ouvrir un ou
plusieurs fichiers d'image et insérer leur contenu dans l'animation affichée. Cette
fonction fait afficher la boîte de dialogue “Ouvrir fichiers”. Sélectionnez les fichiers à
insérer et cliquez sur OK.
Méthode 2. Collage
Vous pouvez coller deux types d'objets dans GIF Movie Gear depuis le presse-papiers
de Windows :
1. Des images autonomes en mode point coupées ou copiées d'une autre
application ;
2. Des cadres coupés ou copiés dans GIF Movie Gear.
Peu importe l'objet, l'image est insérée immédiatement avant le cadre sélectionné ou à
la toute fin de l'animation si aucun cadre n'est sélectionné.
ÉTAPE 2 : RÉGLAGE DU TEMPS DE DÉLAI
Le temps de délai correspond à l’intervalle de temps durant lequel l’animation s’arrête
momentanément entre deux cadres. Ce temps est exprimé en 1/100e de seconde. Par défaut, le
temps de délai est de 100/100e de seconde soit 1 seconde.
GIF Movie Gear vous offre la possibilité de changer ce temps de délai.
Pour changer le temps de délai de l’animation dans notre exemple du chien qui court :
1. Sélectionnez le 1er cadre;
6
2. Cliquez deux fois sur la boîte texte
barre d’outils inférieure;
3. Inscrivez 5.
“Intervalle (1/100e seconde)” de la
Vous pouvez aussi changer cet intervalle soit :
1. En cliquant deux fois sur le cadre
•
La boîte de dialogue “Propriétés” apparaît ;
•
•
Dans la boîte texte “1/100 e seconde d’intervalle après cadre”, inscrivez 5.
Appuyez sur le bouton OK.
2. En sélectionnant le cadre
• Dans le menu “Cadre”, sélectionnez l’option “Propriétés…” ;
• Dans la boîte de texte “Intervalle 1/100e seconde après le cadre”, inscrivez 5.
• Appuyez sur le bouton OK.
Le temps d’intervalle pour ce cadre deviendra
.
GIF Movie Gear vous offre également la possibilité d’uniformiser le temps de délai pour tous les
cadres de l’animation d’un seul coup.
Pour changer le temps de délai des cadres 2, 3, 4, 5, 6 et 7 globalement pour que ce temps soit
uniforme entre tous les cadres de l’animation à 5, procédez de la manière suivante :
7
•
•
•
Dans le menu “Cadre”, sélectionnez l’option “Propriétés globales…” ;
Dans la boîte de texte “Intervalle 1/100e seconde après l’image”, inscrivez 5 ;
Appuyez ensuite sur le bouton OK.
ÉTAPE 3 : AFFICHER UN APERÇU DE L’ANIMATION
Pour visualiser l'animation :
•
•
Cliquez sur le bouton
“Afficher aperçu d’animation” de la barre d’outils
supérieure ;
Ou
Dans le menu “Affichage”, sélectionnez l’option “Aperçu d'animation”.
Cette fonction fait afficher une nouvelle fenêtre d'animation.
Pour arrêter l'animation, cliquez sur le bouton
Movie Gear”.
“Arrêter” de la fenêtre “Animation GIF
Pour reprendre l’animation, cliquez de nouveau sur le bouton
d’animation” de la fenêtre “Animation GIF Movie Gear”.
“Afficher aperçu
Cliquez sur l'un des boutons de défilement image par image pour arrêter l'animation (s'il y a lieu)
et la faire avancer une image à la fois. La bande passe à l'image suivante chaque fois que vous
cliquez.
8
Premier cadre
Cadre suivant
Agrandir
Boutons de défilement
Cadre précédent
Dernier cadre
Réduire
Bordure cadre Dimensions réelles
Avec ces boutons, vous pouvez cliquez sur l’un des boutons de défilement afin d’arrêter
l’animation (s’il y a lieu) et la faire avancer une image à la fois. Vous pouvez également agrandir,
réduire l’image dans la fenêtre d’aperçu de l’animation et insérer une bordure autour du cadre
d’animation avec la couleur désirée en cliquant sur le bouton “Bordure cadre”. Le bouton
“Dimensions réelles” permet de revenir aux dimensions normales de l’animation dans la fenêtre
d’aperçu de l’animation.
Fermeture de la fenêtre d’aperçu de l’animation
Pour fermer la fenêtre d'aperçu :
•
Cliquez sur le bouton
GIF Movie Gear” ;
Ou
•
Cliquez sur le bouton
supérieure.
“X” dans le coin supérieur droit de la fenêtre “Animation
“Arrêter aperçu d’animation” de la barre d'outils
ÉTAPE 4 : SAUVEGARDE DE L’ANIMATION
Pour sauvegarder l’animation :
1. Dans le menu “Fichier”, sélectionnez l’option “Sauvegarder sous”. La boîte de
dialogue Sauvegarde de l’animation sous… apparaîtra ;
2. Sélectionnez le dossier dans lequel vous désirez faire la sauvegarde ;
3. Dans la boîte de texte “Nom”, inscrivez “chien” ;
9
4. Appuyez sur le bouton “Enregistrer”.
10
ÉTAPE 5 : MODIFICATION DE L’ANIMATION
1. SUPPRESSION D’UN CADRE
Pour supprimer un cadre :
•
•
Sélectionnez le cadre ;
Dans le menu “Éditer”, sélectionnez l’option “Supprimer” ;
ou
•
Appuyez sur le bouton
“Supprimer cadre” de la barre d’outils supérieure.
Il vous est également possible de couper le cadre et de l'enregistrer dans le presse-papiers en
sélectionnant l’option “Couper” du menu “Éditer” ou en composant la séquence de touches
Ctrl-X au clavier. Le cadre peut alors être extrait du presse-papiers et être ramené (collé) dans
GIF Movie Gear tout en conservant ses informations d'animation de départ ou dans une autre
application sous forme d'image en mode point.
2. RÉORGANISATION DE CADRES
Il vous est possible de réorganiser les cadres d'une animation selon diverses techniques :
•
La plus simple consiste à :
1. Sélectionner un cadre ;
2. Maintenir le bouton gauche de la souris enfoncé ;
3. Faire glisser ce cadre vers la position voulue.
Lorsque vous faites glisser un cadre, le pointeur devient un curseur de déplacement à
flèches multiples et “le point d'insertion” du cadre est indiqué par une “barre
d'insertion”. Vous ne pouvez pas faire glisser un cadre au-delà des bordures de
l'application GIF Movie Gear.
•
L'autre façon de déplacer un cadre consiste à utiliser la fonction “Couper-Coller”.
1.
2.
3.
4.
Sélectionnez le cadre que vous désirez déplacer ;
Dans le menu “Éditer”, sélectionnez l’option “Couper” ;
Positionnez le curseur à l’endroit voulu ;
Dans le menu “Éditer”, sélectionnez l’option “Coller”.
ÉTAPE 6 : CHARGEMENT DE CADRES ET D’ANIMATIONS
Pour charger les cadres d’une animation déjà existante :
1. Appuyez sur le bouton
“Ouvrir fichier d’animation” de la barre d’outils
supérieure. La boîte de dialogue “ouvrir fichiers” apparaîtra ;
11
2. Sélectionnez le dossier C:\Program Files\Gmg\exemples\ ;
3. Sélectionnez monstre.gif ;
4. Appuyez sur le bouton “Ouvrir”.
La série de 29 images monstre1, monstre2 … monstre29 sera affiché sur l’écran de GIF Movie
Gear.
Pour connaître d'autres façons d'ajouter des cadres à une animation, consultez l’étape1 (Comment
insérer et ajouter des cadres dans une animation).
Cette version de GIF Movie Gear reconnaît également les formats graphiques autres que GIF :
AVI (Video for Windows), BMP (format mode point pour Windows), JPG (format JPEG), PSD
(format Photoshop PSD) et les bandes GIF. Vous pouvez également ouvrir ces types de fichier
en sélectionnant l'option “Importer…” du menu “Fichier”.
12
ÉTAPE 7 : OPTIMISATION DE L’ANIMATION (Cette
étape est optionnelle)
L’optimisation est un procédé qui permet de réduire les palettes, de supprimer les couleurs
inutilisées et de réduire les cadres. Le but principal de l’optimisation est la réduction du volume
du fichier. Veuillez à ce que, cette opération d’optimisation n’affecte pas la qualité de l’image.
Pour optimiser une animation :
•
Dans le menu “Animation”, sélectionnez l’option “Optimiser…” ;
ou
•
Cliquez sur le bouton
“Optimiser animation” de la barre d’outils supérieure.
La boîte de dialogue “Optimiser l’animation” apparaît sur l’écran.
Les outils proposés par cette dernière permettent de réduire presque automatiquement le volume
du fichier d'animation.
Deux fonctions principales sont exécutées : réduction de palette et réduction de cadre. La section de
droite de la boîte de dialogue assure le suivi du volume du fichier avant et après l'optimisation.
Les étiquettes “Dimensions actuelles” représentent la taille du fichier avant l’optimisation tandis que
“Dimensions optimisées” représentent la taille du fichier après optimisation.
Notes :
Au cours de vos essais des différentes options, jetez un coup d’œil aux valeurs de volume ; il est
possible que certaines opérations fassent augmenter le volume des fichiers et, par conséquent,
elles ne doivent pas être utilisées. N'oubliez pas que vous cherchez d'abord à réduire le volume
des fichiers.
13
ÉTAPE 8 : GÉNÉRATION D’UN CODE HTML
Pour faciliter l'intégration d'une animation GIF à une page HTML, GIF Movie Gear peut générer
le code <IMG SRC=…> qui correspond à l'animation courante.
Pour générer le code HTML de l’animation :
•
Dans le menu “Fichier”, sélectionnez l’option “HTML…”.
La boîte de dialogue “Code HTML” apparaît
GIF Movie Gear ajoute automatiquement les attributs largeur (WIDHT=) et hauteur
(HEIGHT=) et vous permet de convertir l'image en lien et de l'inclure dans un texte descriptif
(ALT=) ainsi que d'ajouter une marge.
Pour intégrer le code HTML généré dans votre page HTML :
1. Appuyez sur le bouton “Copier le code” ;
2. Ouvrir la page HTML désirée ;
3. Appuyez simultanément la touche CTRL-V du clavier.
ÉTAPE 9 : COMMENT CHANGER LES COORDONNÉES X ET Y D’UN CADRE
GIF Movie Gear offre la possibilité de modifier verticalement et horizontalement l’emplacement
de l’image se trouvant dans un cadre d’animation. Pour ce faire, vous devez changer les
coordonnées de X et les coordonnées de Y de l’image. Ce changement de coordonnées peut se
faire en deux méthodes.
14
Méthode 1 :
•
•
Sélectionnez le cadre que vous désirez modifier les coordonnées de l’image ;
Dans le menu “Cadre”, sélectionnez l’option “Propriétés…”. La boîte de dialogue
“Propriétés” apparaît
•
•
•
Spécifiez la valeur du décalage X.;
Spécifiez la valeur du décalage Y ;
Appuyez ensuite sur le bouton OK.
Méthode 2 :
•
•
Sélectionnez le cadre que vous désirez modifier les coordonnées de l’image ;
Dans le menu “Cadre”, sélectionnez l’option “Déplacer/Rogner…”. La boîte de
dialogue “Déplacer/Rogner cadre” apparaît
15
•
•
•
•
•
L’image du cadre apparaît avec des points d’ancrages autour ;
Passez la souris sur l’image du cadre; la flèche blanche de la souris se transforme en
curseur de déplacement à flèches multiples ;
Appuyez sur le bouton droit de la souris en le maintenant enfoncé ;
Déplacez l’image dans le cadre à la position désirée ;
Appuyez ensuite sur le bouton OK.
GIF Movie Gear vous permet également de changer manuellement les coordonées X, Y du
cadre.
Pour Changer manuellement les coordonnées X, Y :
1. Spécifiez la valeur de X dans la 1ère liste déroulante à droite de l’cône
2. Spécifiez la valeur de X dans la 2ème liste déroulante à droite de l’icône
;
;
Si vous n’êtes pas satisfait de la position de l’image dans le cadre et que vous voulez retourner aux
valeurs initiales, appuyez sur le bouton “Réinitialiser”
.
ÉTAPE 10 : COMMENT CRÉER UNE ANIMATION À PARTIR D’UN FICHIER DE PHOTSHOP
DE FORMAT PSD
GIF Movie Gear facilite la conversion d’un fichier de format PSD en animation. Un fichier
d’image crée dans Photoshop prend le format PSD lors de la sauvegarde. Le fichier PSD de
Photoshop représente une image avec différentes couches ou étages. Raison pour laquelle ce type
de fichier est appelé “fichier multi-étage”.
16
Avec GIF Movie Gear, vous pouvez convertir directement ces étages ou couches en cadres
d’animation afin de créer une animation.
Illustrons ceci par un exemple afin de mieux exploiter les deux types d’animation qui peuvent être
créer à partir d’un même fichier de format PSD. Notre fichier d’exemple se nomme
“intdemo.psd” qui se trouve dans le dossier C:\Program Files\Gmg\exemples\ de votre
disque dur et procédez de la manière suivante :
Animation 1.
1. Appuyez sur le bouton
“Ouvrir fichier d’animation” de la barre d’outils
supérieure. La boîte de dialogue “ouvrir fichiers” apparaîtra ;
2. Sélectionnez le dossier C:\Program Files\Gmg\exemples\ ;
3. Sélectionnez intdemo.psd ;
4. Appuyez sur le bouton “Ouvrir”. La boîte de dialogue “Support d’étages PSD”
apparaîtra ;
5. Choisissez l’option “Étages comme multiples cadres d’animation” ;
6. Choisissez l’option “Intégrer chaque étage à l’étage d’arrière-plan” ;
7. Appuyez sur le bouton OK.
17
Vous obtenez ceci :
Dans ce premier cas, le fichier intdemo.psd comporte six étages intégrés comme cadres.Chaque
étage s’intègre à l’arrière-plan de couleur mauve. Le premier cadre est vide tandis que les cinq
autres comportent le mot “Internet” en jaune, affiché dans diverses polices et à différents
endroits. Il s’agit d’une “série cumulative d’étages”.
Avec ces cadres, vous pouvez afficher l’aperçu de l’animation, la sauvegarder et la modifier si
nécessaire.
Animation 2.
1. Répétez l’étape 1 jusqu’à 5 de l’animation 1;
2. Choisissez l’option “Intégrer chaque étage à l’image composite” ;
3. Appuyez sur le bouton OK.
18
Vous obtenez ceci :
Dans ce deuxième cas, le fichier intdemo.psd comporte sept étages intégrés comme cadres. Le
premier cadre représente l’étage d’arrière-plan de couleur mauve et six autres cadres dont cinq
comportent le mot “Internet” en jaune, affiché dans diverses polices et à différents endroits. Il
s’agit d’une “série d’images individuelles”.
Avec ces cadres, vous pouvez afficher l’aperçu de l’animation, la sauvegarder et la modifier si
nécessaire.
19
Conclusion
Nous sommes heureux que vous ayez parcouru ce tutoriel et espérons que ce dernier a su
répondre à vos questions sur “Comment construire des GIF animés ? ”.
Pour tout commentaire et toute suggestion, n’hésitez pas à nous joindre à cette adresse :
[email protected]
GIF Movie Gear est une version partagicielle pour une période d’essai de 30 jours. Si
vous appréciez ce logiciel, il serait bienvenu de vous enregistrer au prix de 39.95 $ CAN
(199FF). Vous pouvez vous enregistrer à l’adresse suivante :
http://www.visic.com/commander/
Si vous avez des questions au niveau de votre commande pour GIF Movie Gear, veuillez
contacter notre service à la clientèle à l’adresse ci-dessous :
http://www.visic.com/contact/
Pour toute question et tout problème relatifs à l’utilisation de GIF Movie Gear, contactez
notre service de soutien technique à l’adresse suivante (utilisateurs enregistrés seulement) :
http://www.visic.com/gifmoviegear/support.html
De plus, pour insérer vos animations dans vos pages web, nous vous conseillons d’utiliser
l’éditeur HTML WebExpert. Vous pouvez le télécharger à cette adresse :
http://www.visic.com/webexpert/
Enfin, Vous pouvez transférer vos fichiers rapidement et facilement au serveur avec FTP
Expert. Vous pouvez le télécharger à cette adresse :
http://www.visic.com/ftpexpert/