LeCompagnon.info

Voir produits sur TeeSpring.comCliquez ici pour voir les produits

Internet

Internet: Les graphiques animés

Introduction
Création d'une animation
Quelques images animées
Références

Introduction

Il y a juste un genre de format graphique qui est capable d'avoir des images animées. Il s'agit d'un format de graphique GIF 89a. C'est une séquence d'images dont on contrôle le temps d'exposition de chaque image de l'animation. Cela ressemble un peu à une série de cartes avec des images différentes. La prochaine partie de cette page consiste à démontrer comment créer une animation et de couvrir les concepts de base.

Création d'une animation

Avant de créer l'animation, vous devez avoir déterminé ce que vous voulez animer. Il ne fois pas prévoir quelque chose d'extravagant pour votre premier essai. De plus, une animation lourde va prendre plus de temps à télécharger. Les images qui composeront l'animation doivent aussi être prêtes. Il faut aussi prévoir la durée que chaque image sera affichée à l'écran. Celle-ci est déterminée en centième de seconde pour tous les logiciels de conception d'images animées.

Le logiciel pour créer des images animées qui sera utilisé pour cet exercice est une veille version de Gif Construction Set. Il existe d'autres logiciels tel que Advanced GIF animator, Animation shop de JASC, Barbosa GIF animator, Easy GIF animator, MagicViewer, Ulead GIF Animator et plusieurs autres. Cette version exige plus d'opérations que les versions les plus récentes des différents logiciels de création d'images animées. Les versions les plus récentes offrent aussi plus d'options tel que les bannières et des effets de transitions entre deux images. Mais il couvre bien les éléments qui doivent être prisent en considération au moment de la création de l'animation. Une fois terminée, l'animation devra ressembler à ceci.

Internet
La nétiquette
Courrier électronique
Courrier électronique (avec Netscape)
FTP (File Transfer Protocol)
Les newsgroups
Internet Relay Chat (IRC)
World Wide Web (WWW ou W3)
Conseils pour la conception de pages Web
Conception de page Web avec FrontPage
Conception de page Web avec Netscape Composer
Conception de page Web avec Word
Les formulaires
Les codes HTML
Les images animées

Autres formations

Word 2003
Word 2007
Excel
Excel
VBA pour Excel
PowerPoint 2003
PowerPoint 2007
Access
Access 2010
Internet
Général
Intelligence financière
Vidéos

Navigation
Précédent
Suivant
Page Principale
FAQ
Nouveautés
Plan du site
Références
Motivations
Manuels de formation
Fichiers de démonstration
Droits d'auteur
Text in English
Nous joindre
Par courriel
Abonnez-vous à
l'infolettre LCI





























Abonnez-vous à l'infolettre LeCompagnon.info


Voici les trois images que vous aurez besoin pour créer l'animation.

Vous pouvez les copier en plaçant le pointeur sur l'image, en appuyant sur le bouton droit de la souris et de choisir du menu contextuel l'option Enregistrer l'image sous. Attention de ne pas prendre des images ayant des droits d'auteur ou une marque déposée. Il faut demander l'autorisation et spécifier dans quel contexte l'image sera utilisée. En cas de doute, ne l'utilisez pas.

L'exemple qui suit utilise une veille version de Gif Construction Set de Alchemy Mindworks Inc.

*Du menu File, sélectionnez l'option New.

Il faut maintenant changer la taille de l'image. L'animation sera de 30 pixels (points de lumière à l'écran) de haut par 30 pixels de large.

*Placez le pointeur sur la ligne Header.
*Appuyez sur le bouton Edit.

*Entrez 30 pour la largeur (screen width).
*Entrez 30 pour la hauteur (screen depth).
*Appuyez sur le bouton OK.

*Appuyez sur le bouton Insert.

Une barre d'outils avec une liste des objets que vous pouvez insérer à l'animation va apparaître. Il faut premièrement insérer une boucle pour l'animation.

*Appuyez sur le bouton Loop.

La ligne Loop s'ajoute en dessous du "Header". Il faut maintenant ajouter les autres éléments de l'animation. Il faut déterminer le temps que la prochaine image va apparaître dans l'animation avant d'insérer l'image.

*Appuyez sur le bouton Insert.
*De la liste des objets, appuyez sur le bouton Control.

L'objet de Contrôle de l'image doit être inséré devant chaque image. Il faudra venir le modifier après l'insertion des images.

*Appuyez sur le bouton Insert.
*De la liste des objets, appuyez sur le bouton Image.

Vous pouvez maintenant choisir l'image de votre choix.

*Pour les besoins de l'exercice, sélectionnez l'image animo1.gif .
*Appuyez sur le bouton Ouvrir.

Gif construction va vous demander quelle palette de couleur doit être choisi pour l'animation. Chaque image vient avec sa propre palette de couleur. L'avantage d'une palette de couleur globale est qu'elle réduit la taille de l'animation et se télécharge donc plus rapidement. Même si les trois images se ressemblent, elles n'ont pas exactement la même palette de couleur. Ill est possible de forcer l'image à« utiliser la palette globale ou de conserver ces couleurs actuels. Pour cet exercice, c'est cette dernière option qui sera choisi.

*Pour les besoins de l'exercice, sélectionnez l'option Use a local palette for this image.
*Appuyez sur le bouton OK.

Il faut maintenant répéter les opérations d'insertion des contrôles et des images pour toute l'animation.

*Appuyez sur le bouton Insert.
*De la liste des objets, appuyez sur le bouton Control.
*Appuyez sur le bouton Insert.
*De la liste des objets, appuyez sur le bouton Image.
*Sélectionnez l'image Animo2.gif .
*Appuyez sur le bouton Ouvrir.

*Appuyez sur le bouton Insert.
*De la liste des objets, appuyez sur le bouton Control.
*Appuyez sur le bouton Insert.
*De la liste des objets, appuyez sur le bouton Image.
*Sélectionnez l'image Animo3.gif..
*Appuyez sur le bouton Ouvrir.

Tous les éléments de l'animation sont placés. Il faut maintenant changer les contrôles des images. Il faut changer le temps que chaque animation va rester à l'écran ainsi que la couleur qui va déterminer la transparence de l'image. Normalement, cela est déjà fait lorsque vous créer l'image. Mais vous devez le déterminer une seconde fois pour ce logiciel. C'est l'une de ses caractéristiques.

*Placez le pointeur sur le contrôle devant la première image (animo1)
*Appuyez sur le bouton Edit.

C'est à partir de cette fenêtre que vous déterminez la durée que l'image sera affichée ainsi que la couleur qui sera transparente pour l'animation.

*Placez le pointeur dans la case Delay.
*Entrez le chiffre 30 dans la case.

La durée est toujours déterminée en centièmes de secondes. Ceci est vrai pour tous les logiciels de création d'animations GIF. L'image sera donc affichée pour seulement 30 centièmes de secondes. Il faut maintenant déterminer la couleur qui sera transparente à l'écran. Toutes les images sont conservées dans des carrés ou des rectangles. Pour notre exemple, il ne faut pas que le contour autour du cercle apparaisse.

*Cliquez sur la pipette au coin supérieur droit de la fenêtre.

Il faut maintenant choisir la couleur qui sera transparent sur l'image.

*Cliquez sur la couleur qui est autour du cercle de l'image.
*Appuyez sur le bouton OK.

La couleur est choisie et la durée d'affichage de l'image est déterminée. Il faut répéter ces opérations pour les deux autres contrôles de l'animation.

*Répétez l'opération pour les deux autres contrôles.

Tous les éléments sont placés. Il est maintenant possible de voir l'animation terminée.

*Appuyez sur le bouton View.

Voyez l'animation en action.

Il suffit d'enregistrer l'animation et de l'insérer dans une page Web comme si cela était une image ordinaire.

Quelques images animées

Le résultat peut donner une animation telle que les graphiques suivants. Voici quelques exemples. Toutes les images animées ci-dessous ont été conçues en utilisant Gif construction set de Alchemy Mindworks Inc. En plus de voir les images, il y a aussi quelques explications sur la manière que l'image a été conçue.

Pour démontrer une option Pour démontrer une possibilité de la page

Pour créer cette animation, j'ai premièrement conçu l'image complète et progressivement retiré les lettres. J'ai ensuite rapiécé les images dans l'ordre inverse; de la dernière réalisée à la première.
courrier électroniqueinformations
Pour cette image, j'ai premièrement réalisé une banderole de 450 pixels de large par 50 de haut. J'ai ensuite copié des cercles de 50 par 50 dans de nouvelles images. Chaque image était décalée d'une distance de 25 pixels l'une de l'autre. Ensuite, j'ai utilisé un filtre pour déformer un peu l'image et lui donner un effet à trois dimensions. J'ai ensuite utilisé Gif construction set pour placer les images l'une derrière l'autre pour avoir le résultat que vous voyez si dessus.
Pour démontrer un concept au lecteur de la page tel que le fonctionnement d'une ligne de production. Recyclez S.V.P.
ligne de production
Ceci est ma toute première image animée que j'ai réalisée. C'est une variation d'un diagramme de recyclage de plastiques. J'ai premièrement créé l'image de base. Ensuite, j'ai ajouté les objets sur l'image à une distance égale de l'une de l'autre.

J'ai trouvé l'image de base parmi la librairie de Corel si ma mémoire est bonne. J'ai ensuite utilisé Photoshop pour réaliser des rotations de 15 degrés.

Transmission de paquets d'informations d'un site à votre ordinateur.

transmission de paquets
Ceci est l'animation la plus élaborée que j'ai conçue. Elle est composée de 44 images et 102 éléments. J'ai premièrement créé une image complète avec toutes les lignes. J'ai ensuite retiré les points inutiles et enregistré individuellement les images. J'ai ensuite regroupé le tout avec Gif construction set.

Il ne faut pas exagérer. Les animations distraient du texte et doivent être utilisées seulement pour augmenter la compréhension du message que vous voulez transmettre. Il faut faire attention à son utilisation. Il y a des fureteurs qui n'affichent pas les images animées ou pas du tout tel que Lynx sur le serveur Merlin. Mais ceux-ci se font de plus en plus rares.

Vous pouvez trouver sur l'Internet plusieurs logiciels qui vous permettent de créer ce genre de graphique. La technique pour créer ces images s'est améliorée avec, en autre, des effets de transitions disponibles à tous. Si vous voulez essayer de créer vos propres "gif" animés, regardez sur la page de référence parmi les outils pour trouver des éditeurs d'images animées. Sinon, vous pouvez toujours utiliser des images déjà créées par d'autres personnes et les insérer sur vos pages Web. Utilisez les mots clés "animated gif" sur un site de recherche pour avoir une liste de sites ayant des images disponibles.

La technique pour insérer un gif animé est identique à celle pour insérer une image ordinaire. Amusez-vous un peu!

Références

Voici une courte liste de sites ayant des images animées. Vous pouvez en trouvez des milliers en utilisant un site de recherche avec les termes "animated gif".

http://www.coolarchive.com
http://www.iconbazaar.com
http://www.gifs.net
http://www.barrysclipart.com
http://bimsan.net
http://www.steveconley.com/kaleid.htm
http://www.clipartconnection.com/index.html
http://www.alphaquark.com/Annuaire/Informatique.htm



 

Abonnez-vous à l'infolettre

Abonnez-vous à l'infolettre du site pour recevoir le manuel " 150 fonctions Excel expliquées ". Vous recevrez aussi les prochaines infolettres sur les nouveautés du site et des formations détaillées que vous ne trouverez nulle part ailleurs.


Cliquez ici pour vous abonner à l'infolettre





Ce site est hébergé par 1&1.com