Tips & Astuces JoomlaPour ceux à qui cela aurait échappé, les traductions d'extensions Akeeba se gèrent manuellement et des pages spéciales "Translations" ont été mises à disposition par Akeeba pour AkeebaBackup et AdminTools
Un problème avec Joomla ? Un problème avec une extension Joomla ? Postez sur notre forum et l'un de nos experts Joomla vous aidera à le résoudre. Inscrivez-vous sur le forum.

Créer un gif animé avec Fireworks CS4


Aidez-nous à nous améliorer en votant !
87
com_content.article
(1 vote, moyenne 5.00 sur 5)
Créer un gif animé avec Fireworks CS45.00 sur 50 basé sur 1 votants.


Logo FireworksCe tutorial concerne à nouveau Fireworks CS4, je vais vous expliquer comment créer facilement des gif animé afin d'apporter un peu de vie à votre site internet. Dans cet exemple, je vais vous montrer comment réaliser un bandeau avec un texte clignotant à l'intérieur, ce qui peut vous servir si vous souhaité attirer l'attention des visiteurs de votre site.

 

Créer un gif animé avec Fireworks

 

1ère étape - Créer un nouveau document

Commençons par le début, la première étape consiste à créer un nouveau document Fireworks, utilisez le raccourci ctrl+N et rentrez les paramètres suivants :

Nouveau document Fireworks

2ème étape - Créer un dessin à animer

Maintenant, il faut créer le bandeau, séléctionnez l'outil rectangle arrondi Rectangle arrondi Fireworkset dessinez en un comme sur l'exemple, vous pouvez choisir les couleurs que vous désirez.

Rectangle Fireworks

 
 Vous pouvez embellir votre bandeau en appliquant un biseau interne et une ombre portée. Voilà le résulat :

Effets Fireworks

Une fois votre bandeau terminé, créez une zone de texte Outil texte Fireworksà l'intérieur de ce dernier et écrivez ce que vous voulez.

Bandeau Fireworks

3ème étape - Créer l'animation

A ce stade, nous avons donc un bandeau et un texte mais il n'est pas encore animé, nous allons le faire clignoté dans la prochaine étape. Pour cela, rien de plus simple, commencez par séléctionnez votre rectangle et faites copier (ctrl+C). Ensuite, rendez-vous dans l'onglet "ETATS", cliquez sur Nouvel état Fireworkset faites coller (ctrl+V). Vous devez obtenir un "Etat 1" contenant le bandeau + le texte et un "Etat 2" contenant seulement le bandeau. Enfin il faut régler la vitesse du clignotement, double-cliquez sur le chiffre "7" à droite du nom de l'état et écrivez le nombre de ton choix (plus le nombre est élevé plus le clignotement est lent). Cliquez sur Lecture Fireworkspour vérifier la vitesse de clignotement et pour voir si tout fonctionne bien. Si vous êtes perdu, aidez-vous du schéma suivant pour voir les différentes étapes :

Animation Fireworks

4ème étape - Exporter au format gif animé

Enfin, il faut exporter votre réalisation au format gif, cliquez sur Apercu Fireworkset sur la droite séléctionnez les paramètres d'exportation suivant :

Exportation Fireworks

Pour exporter, utilisez le raccourci ctrl+shift+R.

 

Résultat final

Gif animé Fireworks

Articles sur le même sujet
Articles en rapport
Astuce Joomla
Grâce à Adwords de Google, vous avez la possibilité de publier une annonce pour votre site internet ou autre et ce sous la forme d'une animation flash. Par contre, vous devez respecter certaines...
Tutoriels Joomla 2.5
Dernièrement, nous vous parlions d'un composant qui s'appelle HikaShop et qui s'avère être une excellente alternative à VirtueMart. Après l'avoir testé en profondeur, nous proposerons quelques...
Tutoriels Joomla 2.5
Ozio Gallery 2 est un gestionnaire de galeries d'images proposant des effets en flash très dynamique. Dans ce petit tutorial, je vous propose simplement de vous expliquer comment le paramétrer et...
Tutoriels Joomla 2.5
Pour créer un nouvel article (ou page), il faut une fois de plus se rendre dans la section « gestion des articles ». Pour cela, identifiez-vous pour accéder au panneau d’administration de...
Tutoriels Joomla 2.5
Phoca Gallery est l'un des meilleurs composants en matière de galerie d'images. De plus, il est très simple d'utilisation ce qui ne gâche rien. Mais il se peut que ceux qui débutent avec Joomla...
Derniers Articles
Derniers articles
Test Extensions Joomla
Test Extensions Joomla
Comme vous le savez peut-être, RocketTheme propose en plus de ses templates, des extensions qui s'avèrent très utiles pour intégrer certaines fonctionnalités à votre site web Joomla. Comme...
News Joomla
Pour la troisième année consécutive, la conférence internationale J and Beyond a eu lieu du 18 au 20 mi 2012 à Bad Nauheim en Allemagne. A cette occasion des développeurs venus de 30 pays...
Test Extensions Joomla
Ce composant dans sa version 2.6.1 est l'un des outils les plus puissants existants pour Joomla 1.5 et Joomla 2.5. Il est le meilleur dans sa catégorie, à savoir celle des réseaux sociaux &...
Le CMS Joomla
Comme vous le savez, Joomla est un projet bénévole élaboré par des membres motivés de la communauté présente à travers le monde. C’est cette diversité et l’engagement de ces membres...
Articles de la même catégorie
Articles de la même catégorie
Tutoriels Joomla 2.5
Comme vous avez pu le lire lors de notre article précédent, AcyMailing permet de gérer ses envois de newsletters et de mailing via son site internet Joomla 1.5. Nous allons donc maintenant...
Tutoriels Joomla 2.5
Nous y voilà, Joomla 2.5 est arrivé. Et il se pose maintenant une question épineuse pour tous ceux qui seraient encore à Joomla 1.5 et qui voient avril 2012 arrivé à grands pas : Comment migrer...
Tutoriels Joomla 2.5
Durant ce tutoriel Joomla, nous allons voir ensemble comme installer le CMS Joomla 2.5 sur un serveur (Ici un serveur mutualisé 1and1) en quatre étapes. Similaire à tout autre CMS cette...
Tutoriels Joomla 2.5
Lorsque vous avez plusieurs partenaires liés à votre activité, il est intéressant de pouvoir faire apparaître leur logo sur votre site web. Pour ce faire, une des solutions est d'utiliser un...
Tutoriels Joomla 2.5
Dans ce petit tutoriel, nous allons vous expliquer comment mettre en place une image sous forme de bandeau dans un des coin de votre site Joomla. Le but principal de ce bandeau est en quelque sorte...
Articles les plus lus
Articles les plus lus
Tutoriels Joomla 2.5
Durant ce tutoriel Joomla, nous allons voir ensemble comme installer le CMS Joomla 2.5 sur un serveur (Ici un serveur mutualisé 1and1) en quatre étapes. Similaire à tout autre CMS cette...
Test Extensions Joomla
Phoca Gallery est à ce jour le composant Joomla le plus intuitif pour gérer ses galeries, ses photos, ses thumbnails et tout ce qui est relatif à la gestion d'images sur son site Internet.
Outils pour Joomla
Si vous avez les moyens d'investir dans un template (comptez entre 20 $ et 60 $), vous êtes alors en mesure d'habiller votre site web avec ce qu'il se fait de mieux sur Internet. En effet, des...
Tutoriels Joomla 2.5
Le composant Joomla, JoomFish 2.1.5, permet de traduire votre site internet dans quasiment toutes les langues. Il se base sur les packs de langue Joomla qui sont déjà très nombreux à ce jour....
Tutoriels Joomla 2.5
Ce tutorial concerne à nouveau Fireworks CS4, je vais vous expliquer comment créer facilement des gif animé afin d'apporter un peu de vie à votre site internet. Dans cet exemple, je vais vous...

Commentaires  

 
dauphins83
0 #21 dauphins83 30-11--0001 00:00
Bonjour je voudrais faire un bandeau animée comme vous le montrer mais je suis bloquer je ne trouve pas l'onglet ETATS ni le petit symbole que vous avez mit dans votre explication. Ou puis je trouver l'onglet ETATS. Merci
Citer
 
 
dauphins83
0 #20 dauphins83 30-11--0001 00:00
bonjour, Merci pour votre réponse mais en faite je viens de m'apercevoir que je n'avais pas la même version que vous j'ai Fireworks 8 et donc cet onglet je ne l'ai pas ou du moins je ne la trouve pas meme à côté de l'onglet 'calque"
Citer
 
 
Jo
0 #19 Jo 30-11--0001 00:00
Bonjour, L'onglet "Etats" se trouve normalement à côté de l'onglet "Calques" dans la même fenêtre. Essayez de changer le mode d'affichage de Fireworks, dans le menu en haut à droite.
Citer
 
 
C-Jay
0 #18 C-Jay 30-11--0001 00:00
Bonjour, En effet, d'après mes recherches, il ne semble pas qu'il y ait d'onglet "état" sous Fireworks 8.
Citer
 
 
dauphins83
0 #17 dauphins83 30-11--0001 00:00
Bonsoir, Vous savez pas comment je pourrais faire le meme bandeau que votre explication mais avec fireworks 8. Ou alors savez vous ou je peux télécharger gratuitement fireworks CS4. Merci
Citer
 
 
Jo
0 #16 Jo 30-11--0001 00:00
Bonjour, Pour Fireworks 8, je pense que le principe est le même mais n'ayant pas l'interface de ce dernier sous les yeux, je ne pourrais pas vous dire où se trouve chaque élément décrit dans le tutorial. Vous pouvez télécharger la version CS5 (ressemblant davantage à CS4) en version d'essai (30 jours) à l'adresse suivante : adobe.com/.../...
Citer
 
 
Jo
0 #15 Jo 30-11--0001 00:00
Bonjour, Pour Fireworks 8, je pense que le principe est le même mais n'ayant pas l'interface de ce dernier sous les yeux, je ne pourrais pas vous dire où se trouve chaque élément décrit dans le tutoriel. Vous pouvez télécharger la version CS5 (ressemblant davantage à CS4) en version d'essai (30 jours) à l'adresse suivante : adobe.com/.../...
Citer
 
 
dauphins83
0 #14 dauphins83 30-11--0001 00:00
Bonjour, Maintenant que j'ai trouver la meme version que vous je n'arrive pas à le faire clignoter j'ai fait tout ce que vous avez dit lorsque j'appui sur lecture le texte clignote mais quand je finalise c'est a dire ctrl+schift+R il me demande de l'enregistrer sous ce que je fait et quand je le réouvre cela ne clignote pas et il me reste le fond blanc derrière le bandeau comme vous avant de l'exporter. Merci et désoler de vous ennuyer.
Citer
 
 
Jo
0 #13 Jo 30-11--0001 00:00
Bonjour, Vous ne m'ennuyez pas du tout, on est là pour aider. Alors je pense simplement qu'au moment d'enregistrer sous vous n'avez pas choisi le bon type de fichier. Faites bien attention de choisir "gif animé"
Citer
 
 
dauphins83
0 #12 dauphins83 30-11--0001 00:00
Bonsoir, Je vous remercie beaucoup de votre réponse mais en fait lorsque j'ai fait aperçu avec le navigateur l'animation fonctionne très bien sinon en l'ouvrant seulement avec fireworks je suis obliger de faire lecture pour voir l'animation mais je controlerais comme meme que mon fichier soit bien enregistrer sous gif animé. Et vous savez ou je peux trouver d'autre chose à faire avec fireworks (bouton animé, gif animé ect...) je débute avec ce logiciel et je dois rafraichir un site mais je ne connais absolument rien je travaille avec fireworks et dreamweaver mais sa ma l'air compliquer pour tout ce qui est de mettre en forme si vous pouvez m'aider. Merci encore
Citer
 
 
Jo
0 #11 Jo 30-11--0001 00:00
Bonjour, Vous trouverez un autre tutorial fireworks à cette adresse : nosyweb.fr/.../... Nous avons d'autres tutos mais qui utilisent des logiciels tels que photoshop. Vous les trouverez à cette adresse : nosyweb.fr/.../...
Citer
 
 
dauphins83
0 #10 dauphins83 30-11--0001 00:00
Bonjour, Merci pour vos liens. Pouvez vous m'aider svp. J'ai un bouton que j'ai trouver sur le net et je voudrais y ajouter un texte juste à cote de ce bouton pour que l'on sache à quoi correspond le bouton. Merci
Citer
 
 
Jo
0 #9 Jo 30-11--0001 00:00
Bonjour, Pour rajouter du texte, il suffit d'agrandir la taille de la zone de travail puis d'utiliser l'outil Texte pour écrire à côté de votre bouton.
Citer
 
 
Jo
0 #8 Jo 30-11--0001 00:00
Pas de problème :-)
Citer
 
 
dauphins83
0 #7 dauphins83 30-11--0001 00:00
Vous ête très très forte et je vous en remerci beaucoup pour cette aide qui va me permettre d'avancer. J'espère ne plus avoir à vous embeter. Merci beaucoup.
Citer
 
 
dauphins83
0 #6 dauphins83 30-11--0001 00:00
Bonjour me revoilà :lol: en fait j'ai fait le même bandeau que vous, tout marche, le seul souci c'est lorsque je le met sur mon site, derrière le bandeau c'est blanc. Pouvez vous me dire comment faire pour qu'il n'y ait rien derrière ce bandeau. Merci
Citer
 
 
Jo
0 #5 Jo 30-11--0001 00:00
Bonjour, Alors l'astuce est d'activer la transparence lorsque vous exportez au format gif animé. Cette option se trouve dans le menu "Optimiser", dans le menu déroulant situé au-dessus de la palette de couleur. Par défaut, "Pas de transparence" est sélectionné.
Citer
 
 
dauphins83
0 #4 dauphins83 30-11--0001 00:00
Je vous remercie beaucoupn en fait il faut mettre transparence index ? Je viens d'essayer avec transparence index et ca marche. Merci beaucoup
Citer
 
 
C-Jay
0 #3 C-Jay 30-11--0001 00:00
Bonjour, Oui vous avez le choix entre transparence Alpha ou Index. Personnellement, je me base sur la qualité du Gif et le poids de l'image pour faire mon choix.
Citer
 
 
dauphins83
0 #2 dauphins83 30-11--0001 00:00
Très bien en tout cas je vous remerci encore sans vous je n'aurais arriver à rien. Savez vous comment faire défiler un texte sur une page du site svp sans faire une bannière juste un texte. Merci.
Citer
 

Ajouter un Commentaire


Catégorie : Tutoriels Joomla 2.5

Sur quelle extension souhaiteriez-vous avoir un tutoriel vidéo ?

telechargement joomla
Retrouvez les meilleures extensions Joomla dans notre centre de téléchargement

La Newsletter




feedback