Carrousel Flash

Voir le sujet précédent Voir le sujet suivant Aller en bas

Astuce Carrousel Flash

Message par Invité le Mar 3 Nov 2009 - 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"?>

<!--

   flShow Carousel 2.0 configuration file
   Please visit http://www.flshow.net/ for more info
-->

<slide_show>

<options>
<background>transparent</background>
<!-- #RRGGBB, transparent -->

<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.


Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum