Carrousel Flash

par Invité le Mar 3 Nov - 12:54

Carrousel Flash

Voici un tutoriel qui va vous permettre de réaliser un carrousel en flash avec juste un éditeur de texte style wordpad / bloc note. Vous pouvez voir le résultat ICI

Ce carrousel a été réalisé à partir de ce site http://www.flshow.net/

► Allez dans l'onglet carrousel et cliquez sur download. Nous allons partir de l'exemple 3 : Un carrousel avec un background transparent.

► Téléchargez donc le Zip contenant tous les fichiers nécessaires et extraire ce Zip.

► Vous avez maintenant un répertoire nommé transparent avec un répertoire images et différents fichiers.

► Nous allons commencer par ouvrir le fichier fullpage.html avec un éditeur de texte. Clique droit sur le fichier >> ouvrir avec wordpad ou Notepad.

► Nous allons remplacer la ligne background: white url(bg.jpg); par ----------------------> background: transparent;

► Afin d'avoir notre carrousel sur fond transparent.(il est possible de mettre un code couleur ou une image). N'oubliez pas de sauvegarder.

► Nous allons maintenant mettre nos logos constituant notre carrousel dans le dossier images.
(dans l'exemple c'est une création pour une demande posté chez ForumActif). Insérer donc vos logos (ici au format .png) dans le dossier images. Supprimez les images de l'exemple.

► Ouvrir maintenant le fichier default.xml (clic droit ouvrir avec Wordpad Notepad). Nous allons insérer les liens les titres et les images. Voici le code de mon exemple copiez ce code et changez les Url de redirections les titres et les images par les vôtres.

Code:: <?xml version="1.0" encoding="utf-8"?>  <slide_show> <options> <background>transparent</background>  <titles> <style> font-size: 14px; font-family: Verdana, _serif; color: #003366; </style> </titles> </options> <photo href="http://world-computer.1fr1.net/animations-3d-f5/" target="_blank" title="Animation 3D">./images/animat10.png</photo> <photo href="http://world-computer.1fr1.net/la-charte-du-forum-f1/" target="_blank" title="Charte du Forum">./images/charte10.png</photo> <photo href="http://world-computer.1fr1.net/codes-css-html-javascript-f32/" target="_blank" title="Code css/html">./images/code_c10.png</photo> <photo href="http://world-computer.1fr1.net/themes-et-interfaces-f6/" target="_blank" title="Th mes et interfaces">./images/CommandeImage.png</photo> <photo href="http://world-computer.1fr1.net/duels-et-concours-f3/" target="_blank" title="Duel et Concours">./images/Duel.png</photo> <photo href="http://world-computer.1fr1.net/presentation-des-nouveau-membres-f27/" target="_blank" title="Pr sentation des Membres">./images/Presentation.png</photo> </slide_show>

► Nous allons détailler la première ligne correspondant à un logo:

code a écrit:<photo href="http://world-computer.1fr1.net/animations-3d-f5/" target="_blank" title="Animation 3D">./images/animat10.png</photo>

<photo href="ici votre lien de redirection" target="_blank" title="ici votre titre">./images/ici votre image</photo>

► Répétez l'opération autant de fois que vous avez d'images... Puis enregistrez. (Vous pouvez allez jusqu'à 10 /12 images )

► Il faut maintenant héberger votre dossier et fichiers par exemple chez ArchiveHost http://commande.archive-host.com/

► Créez un répertoire carrousel (par exemple). Il faut ensuite y insérer votre dossier images (avec vos images à l'intérieur). Gardez bien le même nom de dossier images!!

Ainsi que les fichiers utiles:

carousel.swf
fullpage.html
swfobject.js
default.xml

► Vous devez obtenir ceci:

►Récupérez l'adresse absolu du fichier fullpage.html et collez la dans votre navigateur. Si vous avez tout bien fait vous devriez voir votre carrousel.

Mon exemple: http://sd-1.archive-host.com/membres/up/37821634957680146/carou/fullpage.html

►Nous allons mettre maintenant notre page html dans une iframe et pouvoir ainsi placer ce code
dans un widget par exemple.

Voici mon code:

Code:: <iframe src="http://sd-1.archive-host.com/membres/up/37821634957680146/carou/fullpage.html" width="500" height="200" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Code a écrit:<iframe src="votre adresse absolue fullpage.html" width="500" height="200" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

► Vous pouvez changer 500 qui correspond à la largeur et 200 qui correspond à la hauteur dans le code.