joomladay

Suivez l'actualité et découvrez nos formations Joomla

NosyWeb centralise toutes les ressources Joomla pour les professionnels :  Actualités, formations Joomla, tests, support, astuces & tutoriels.

centre formation joomlaJoomea est le premier centre de formation Joomla en ligne permettant aux professionnels de se former rapidement à Joomla.

A qui s'adresse Joomea ?

Joomea s'adresse aux professionnels du web mais aussi aux entrepreneurs et décideurs d'entreprise TPE / PME qui peuvent désormais apprendre à développer rapidement et de manière professionnelle leur activité sur Internet. Lire la suite...
screen rokNosyWeb est une agence web localisée en Ile de France spécialisée Joomla. Nous prenons en charge la réalisation complète de votre site Internet Joomla, son hébergement, sa promotion et son référencement ciblé dans les principaux moteurs de recherche. NosyWeb s'appuie sur 4 années d'expérience en conception de sites Webs Joomla pour vous proposer un site de qualité et un référencement efficace.
Lire la suite...

Créer un défilement d'images avec Flash CS4


Aidez-nous à nous améliorer en votant pour cet article !
89
(0 votes, moyenne 0 sur 5)
Créer un défilement d'images avec Flash CS40 sur 5 based on 0 voters.


Logo FlashVoici un nouveau tutorial qui cette fois-ci concerne le logiciel Flash CS4. Je vais vous expliquer comment créer très simplement un défilement d'images grâce à la technologie flash. Flash CS4 permet de réaliser de nombreuses animations de la plus simple à la plus complexe, le défilement d'images que je vous propose d'apprendre à faire est une animation simple comme vous pourrez le constater.

Créer un défilement d'images

 

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

 

Comme d'habitude, la première étape consiste à créer un nouveau document comme avec Photoshop ou Fireworks. Commencez par cliquer sur le raccourci ctrl+N, ensuite, vous deviez voir que par défaut "Fichier Flash (AS 3.0)" est séléctioné, ne changez rien et cliquez directement sur OK.
 
Nouveau document Flash

Il faut ensuite modifier les dimensions du document, pour cela, cliquez droit sur le document et séléctionnez "Propriétés du document..." et rentrez les mêmes informations que sur l'image suivante :

Propriété document Flash

Enfin, réglez le zoom sur 50% pour obtenir le document vierge suivant :

Document vierge Flash
 

2ème étape - Création du fond de l'animation

 

Avant de passer à la suite, je voudrais préciser qu'il faut mettre le mode d'affichage sur "Animateur". La prochaine étape consiste donc à créer le fond sur lequel défileront les images. Il faut tout d'abord définir les paramètres graphiques de ce fond, un dégradé radial bleu sans contour, voilà ce que ça donne :
 
Paramètre graphique Flash Radial bleu Flash
 
Ensuite, séléctionnez l'outil création de forme rectangle Rectangle Flashet dessinez en un de la même taille que la scène. Maintenant, vous pouvez personnaliser votre fond en changeant les couleurs et la forme du dégradé. Pour cela, rien de plus simple, il suffit de changer les paramètres du dégradé. Vous pouvez choisir les couleurs que vous voulez cela n'a pas d'importance. Enfin, séléctionnez l'outil de transformation libre Transformation libre Flashet retournez votre rectangle comme sur l'image qui suit :
 
Paramètres graphiques FlashRetourner rectangle Flash
 

3ème étape - Importation des images

 

La prochaine étape consiste à importer les images que vous allez faire défiler. Allez dans Fichier > Importer > Importer dans la bibliothèque..., choisissez le nombre d'images que vous souhaitez, elles doivent apparaîtrent en bas à droite dans votre bibliothèque. Maintenant, créez un nouveau calque et renommez les deux comme sur cette image :
 
Nouveau calque Flash
 
Séléctionnez toutes les images de votre bibliothèque et faites un glisser-déposer de ces dernières sur la scène. Ensuite, il ne reste plus qu'à les mettre à la même taille et à les aligner. Pour la taille, vérifier bien que le verrou est fermé afin que la hauteur et la largeur de vos images soient proportionnelles. Enfin, réduisez le zoom une nouvelle fois afin de voir la scène dans son ensemble. Si vous êtes perdu, regardez les images suivantes :
 
Taille FlashAlignement Flash
Placement image Flash
 

4ème étape - Création de l'interpolation

 

Les prochaines étapes vont consister à créer l'animation flash à proprement dit. Tout d'abord, séléctionnez toutes vos images et cliquez sur F8 afin de les convertir en symbole. Entrez les paramètres suivants :
 
Clip Flash
 
Ensuite, il faut créer une image-clé sur la 100ème image de chacun des deux calques (fond et images). Pour ce faire, placez vous sur la 100ème image, faites clique droit et choisissez "insérer une image-clé". Restez sur cette 100ème image et déplacez vos images complètement à gauche de la scène. Comme d'habitude une petite image pour vous guider :
 
Déplacement Flash
 
Nous avons bientôt terminé, il ne reste plus qu'à créer l'interpolation de mouvement. Pour cela, cliquez droit n'importe où entre l'image 1 et 100 du calque "images" et choisissez "Créer une interpolation classique". Une flèche devrait apparaître pour symboliser cette interpolation. Utilisez le raccourci ctrl+Entrer pour vérifiez que tout fontionne bien. Enfin une dernière petite chose, vous pouvez régler l'accélération de l'animation, par exemple, les images peuvent être ralenties lorsqu'elles passent sur le fond. Il suffit de modifier la courbe comme vous pouvez le voir sur l'image suivante :
 
Accélération Flash

Courbe Flash

La dernière chose à faire est d'exporter votre animation au format .swf. Encore une fois, c'est une opération très simple, rendez vous dans Fichier > Exporter > Exporter l'animation..., choisissez un emplacement et appuyez sur Entrer.

 

Résultat final :

 

Articles sur le même sujet
Articles en rapport
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...
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...
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...
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...
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...
Articles de la même catégorie
Articles de la même catégorie
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 (fin du support) arrivé à grands pas...
Durant ce tutoriel Joomla, nous allons voir ensemble comme installer le CMS Joomla 2.5 sur un serveur (Ici un serveur mutualisé 1&1) en quatre étapes. Similaire à tout autre CMS cette...
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...
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...
Ce petit tutoriel est destiné à ceux qui débutent avec Joomla et qui peuvent se demander comment mettre à jour leur version de Joomla. En effet, cette opération relativement simple n'est pas...
Articles les plus lus
Articles les plus lus
Durant ce tutoriel Joomla, nous allons voir ensemble comme installer le CMS Joomla 2.5 sur un serveur (Ici un serveur mutualisé 1&1) en quatre étapes. Similaire à tout autre CMS cette...
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.
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....
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...
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...



JomSocial Avatar
Jo (16.11.2010 (12:18:39))
oui non Bonjour Simon, D'abord merci à toi de l'avoir suivi :) Pour l'alignement, il faut que tu cliques sur l'onglet "Modificati on", puis que tu ailles sur "Aligner". Tu auras alors le choix entre plusieurs choses dont l'alignement vertical ou horizontal. Pour l'accélération de tes images, il faut que tu te places entre la première et la dernière image de ton scénario, en cliquant sur la flèche qui représente l'interpolation. A ce moment là, tu pourras cliquer sur le petit crayon comme indiqué sur l'image du tuto. Tu pourras alors modifier la courbe. Si tu as encore besoin d'aide n'hésite pas, il y aura quelqu'un pour t'aider. A bientôt, Geoffrey
JomSocial Avatar
Simon (16.11.2010 (12:17:20))
oui non Bonjour, je viens de télécharger la version d'essai de flash CS4 et j'ai suivi ton tuto pour ma première création. Je le trouve très clair et t'en remercie. J'ai seulement deux point qui me pose problème : -je ne trouve pas la fenêtre pour l'alignement ( je l'ai fait image par image ce n'est pas trop grave) -je ne trouve pas pas la fenêtre d'accélération/décélération personnalisée, ce qui est plus problématique car mes image défile trop vite a mon gout ! Il doit y avoir un moyen tout bête de les afficher et je t'en serais reconnaissant de me l'indiquer :-) Je suis conscient que le tuto n'a pas été fait hier donc je ne sais pas si il est encore mis a jour pour les commentaires :-*

Smileys

:confused::cool::cry::laugh::lol::normal::blush::rolleyes::sad::shocked::sick::sleeping::smile::surprised::tongue::unsure::whistle::wink:

 500 caractères restants

Antispam Rafraîchir l'image Respectez la casse (majuscules et minuscules)

Catégorie : HowTo

Téléchargez Joomla

bouton downloadJoomla 2.5.1

Astuce Joomla du mois

compressez-davantage-vos-png-grace-a-pngoutLe format d'images PNG est un format très populaire dans le monde de la création web pour son effet de transparence en autre mais il s'avère parfois un peu lourd en terme de poids. Il existe une astuce qui permet de gagner entre 10 et 20% du poids de vos...
Support & formation Joomla en ligne

Souhaiteriez-vous participer à la communauté Joomea ?

Oui, naturellement - 72.7%
Oui, en échange de services proposés par Joomea - 9.1%
Oui, en tant qu'adhérent à un programme d'affiliation - 9.1%
Non, à priori cela ne m'interesse pas - 9.1%

Total des votes: 11
Le vote pour ce sondage est terminé à: 03 Fév 2012 - 17:27

La Newsletter




feedback