23 juil. 2010

Créer un flash dans une mediabox

Ce n'est pas très difficile à réaliser, mais il faut aller chercher les fichiers sur différents sites, c'est donc long.

Faîtes le test : Cliquez pour voir l'animation flash




Première étape :

Allez sur Mediabox
Cliquez sur :
  • Mediabox.css :


    • le contenu apparaît,
    • vous sélectionnez tout
    • vous copiez
    • vous ouvrez le bloc note sur le PC
    • vous collez
    • vous enregistrez sous mediabox.css
  • Mootools :


    • vous arrivez sur le site mootools
    • vous cliquez sur toutes les cases
    • vous sauvegardez
  •  SWFobject :


    • vous arrivez sur le site
    • vous cliquez sur Download
    • il s'agit d'un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers.
  • Mediabox68.js :


    • le contenu apparaît,
    • vous sélectionnez tout
    • vous copiez
    • vous ouvrez le bloc note sur le PC
    • vous collez
    • vous enregistrez sous mediabox.js
  • mediaboxImages.zip :


    • il s'agit d'un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, extraire vers
  • JW Mediaplayer :


    • vous vous retrouvez sur le site MediaPlayer
    • vous cliquez sur Download You can download the FLV Media Player here.
    • vous venez d'enregistrer un fichier zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, extraire vers
Deuxième étape :

Dans l'administration de votre blog - Mes documents - Autres fichiers :
  • vous créez un répertoire mediabox :


    • vous y enregistrez les 4 images :


      • 1_close.png
      • 1_loading.gif
      • 1_next.png
      • 1_prev.png
      • mediaplayer.swf
    • vous notez leur adresse
Troisième étape :

Sur votre PC :
  • vous ouvrez le bloc-note
  • vous appelez le fichier mediabox.css
  • vous modifiez les adresses des images (celles que vous venez d'enregistrer dans votre administration)
  • vous enregistrez sous le même nom
  • vous appelez le fichier mediabox.js
  • vous modifiez l'adresse : playerpath: '/js/mediaplayer.swf' (vous avez enregistré ce fichier lors de l'étape précédente)
  • vous enregistrez sous le même nom
Quatrième étape :

Dans l'administration de votre blog - Mes documents - Autres fichiers - Mediabox :
  • vous enregistrez les fichiers :


    • mediabox.css
    • mediabox.js
    • swfobject.js
    • mootools.v1.11.
  • Vous notez leur adresse
Cinquième étape :

En HTML, vous collez ce pavé, en respectant l'ordre
<a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/animations-flash/Design-Blog-Paques-Annak.swf" rel="mediabox[200 200]" title="flash animation">Cliquez pour voir l'animation flash</a>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mediabox/mediabox.css" type="text/css" media="screen" />
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mediabox/mootools.v1.11.js" type="text/javascript">
</script><script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mediabox/swfobject.js" type="text/javascript">
</script><script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mediabox/mediabox1.js" type="text/javascript">
</script>

En rouge, l'adresse du fichier flash
En vert, ses dimensions
En bleu, l'adresse des différents fichiers. Si votre blog est sur OB, vous pouvez utiliser mes fichiers. Il suffit de changer l'adresse et les dimensions du flash

Aucun commentaire:

Enregistrer un commentaire

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)