Comment créer des GIF animés en dix étapes?

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 Ouvrir Couper Coller Effacer Refaire Arrêter aperçu Réduire les palettes Réduire Bandes verticales Aide Sauvegarder Copier Annuler Optimiser animation Agrandir Orientation implicite insérer cadre Aperçu animation Dimensions réelles Bandes horizontales BARRE D OUTILS INFÉRIEURE Supprimer Sélection couleur de Afficher Afficher Propriétés cadre Intervalle (retour cadre précédent) transparence palette locale palette globale

3 Nom du cadre Supprimer supprimer Permuter Propriétés (laisser tel quel) (Rétablir arrière-plan) transparence animation Palette locale Entrelacer Nbre itération BARRE DE STATUT Sélection actuelle Grossissement actuel de l affichage Temps de téléchargement estimé Nbre total de cadres de l animation 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 ; 3. Appuyez sur le bouton Ouvrir ; 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 1 er cadre;

6 2. Cliquez deux fois sur la boîte texte Intervalle (1/100 e seconde) de la barre d outils inférieure; 3. Inscrivez 5. 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/100 e 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/100 e 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 Boutons de défilement Premier cadre Cadre suivant Agrandir Dernier cadre Réduire Cadre précédent 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 X dans le coin supérieur droit de la fenêtre Animation GIF Movie Gear ; Ou Cliquez sur le bouton Arrêter aperçu d animation de la barre d'outils supérieure. É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 ;

4. Appuyez sur le bouton Enregistrer. 9

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. Sélectionnez le cadre que vous désirez déplacer ; 2. Dans le menu Éditer, sélectionnez l option Couper ; 3. Positionnez le curseur à l endroit voulu ; 4. 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 Méthode 2 : Spécifiez la valeur du décalage X.; Spécifiez la valeur du décalage Y ; Appuyez ensuite sur le bouton OK. 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 : feedback@visicommedia.com 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/