Céline.
Admin
Date d'inscription : 29/08/2010
Localisation : Canada
 | Sujet: Site pour apprentissage informatique en ligne!  Mer Fév 02 2011, 21:51 | |
|
Voici les trois images que vous aurez besoin pour créer l'animation.
[Vous devez être inscrit et connecté pour voir cette image]
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.
[Vous devez être inscrit et connecté pour voir cette image]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.
[Vous devez être inscrit et connecté pour voir cette image]Placez le pointeur sur la ligne Header.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Edit.
[Vous devez être inscrit et connecté pour voir cette image]Entrez 30 pour la largeur (screen width).
[Vous devez être inscrit et connecté pour voir cette image]Entrez 30 pour la hauteur (screen depth).
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton OK.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Insert.
[Vous devez être inscrit et connecté pour voir cette image]
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.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Loop.
[Vous devez être inscrit et connecté pour voir cette image]
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.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Insert.
[Vous devez être inscrit et connecté pour voir cette image]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.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Insert.
[Vous devez être inscrit et connecté pour voir cette image]De la liste des objets, appuyez sur le bouton Image.
[Vous devez être inscrit et connecté pour voir cette image]
Vous pouvez maintenant choisir l'image de votre choix.
[Vous devez être inscrit et connecté pour voir cette image]Pour les besoins de l'exercice, sélectionnez l'image animo1.gif .
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Ouvrir.
[Vous devez être inscrit et connecté pour voir cette image]
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.
[Vous devez être inscrit et connecté pour voir cette image]Pour les besoins de l'exercice, sélectionnez l'option Use a local palette for this image.
[Vous devez être inscrit et connecté pour voir cette 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.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Insert.
[Vous devez être inscrit et connecté pour voir cette image]De la liste des objets, appuyez sur le bouton Control.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Insert.
[Vous devez être inscrit et connecté pour voir cette image]De la liste des objets, appuyez sur le bouton Image.
[Vous devez être inscrit et connecté pour voir cette image]Sélectionnez l'image Animo2.gif .[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Ouvrir.Appuyez sur le bouton Insert.
[Vous devez être inscrit et connecté pour voir cette image]De la liste des objets, appuyez sur le bouton Control.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Insert.
[Vous devez être inscrit et connecté pour voir cette image]De la liste des objets, appuyez sur le bouton Image.
[Vous devez être inscrit et connecté pour voir cette image]Sélectionnez l'image Animo3.gif..
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Ouvrir.
[Vous devez être inscrit et connecté pour voir cette image]
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.
[Vous devez être inscrit et connecté pour voir cette image]Placez le pointeur sur le contrôle devant la première image (animo1)
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton Edit.
[Vous devez être inscrit et connecté pour voir cette image]
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.
[Vous devez être inscrit et connecté pour voir cette image]Placez le pointeur dans la case Delay.
[Vous devez être inscrit et connecté pour voir cette image]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.
[Vous devez être inscrit et connecté pour voir cette image]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.
[Vous devez être inscrit et connecté pour voir cette image]Cliquez sur la couleur qui est autour du cercle de l'image.
[Vous devez être inscrit et connecté pour voir cette 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.
[Vous devez être inscrit et connecté pour voir cette image]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.
[Vous devez être inscrit et connecté pour voir cette image]Appuyez sur le bouton View.
Voyez l'animation en action.
[Vous devez être inscrit et connecté pour voir cette image]
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 |
[Vous devez être inscrit et connecté pour voir cette image]
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. |
[Vous devez être inscrit et connecté pour voir cette image]
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. |
[Vous devez être inscrit et connecté pour voir cette image]
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. |
[Vous devez être inscrit et connecté pour voir cette image]
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.
[Vous devez être inscrit et connecté pour voir cette image]
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 outilspour 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
|
[Vous devez être inscrit et connecté pour voir cette image] [Vous devez être inscrit et connecté pour voir cette image]Ce site est hébergé par 1&1.com
_________________
Quand ils diront : « Paix et sécurité ! », alors une destruction subite sera sur eux...1 Thessaloniciens 5:3
| |
|
Accueil 
Portail 
S'enregistrer 
Connexion 
Cliquez ICI pour participer aux échanges du Forum 
Forum 