exemple flash

Il faut dans un premier temps bien différencier les flashs qui sont intégrés dans un article en tant que média, les flashs intégrés directement dans un template par l'intégrateur ou bien encore le flash "coverflow" qui est mis en place pour les visuels additionnels des produits. Je vous propose d'étudier chaque cas séparément et de voir les astuces pour forcer le flash à passer AU-DESSOUS du menu déroulant.

Cas numéro 1 : le flash intégré dans un article :

En insérant un flash avec un article en bloc par exemple, il peut arriver que dans certains cas, le menu passe au-dessus du flash. Il y a une solution, c'est de définir le paramètre de transparence du flash. Ce peut se faire en cliquant sur la petite icône "modifier" du bloc, puis dans la fenêtre qui s'ouvre en cliquant sur le bouton "modifier" et enfin sur l'onglet "Modifier le flash". Vous accéderez ainsi aux préférences du flash où l'on peut remarquer une boite à cocher "transparence". En cliquant dessus, vous forcerez ainsi le flash à devenir transparent. Rassurez-vous, cela ne veut pas dire qu'il va devenir invisible mais plutôt qu'il va pouvoir laisser apparaître l'image ou la couleur du fond de votre document HTML. D'autre part il va gérer les layers qui passeront au-dessus, comme un menu déroulant par exemple. En examinant le code qui va être généré par e-majine (et qui est tout à fait standard), on notera la présence d'une ligne paramétrant la transparence et réglant dans bien des cas le problème du menu qui passe dessous.

<object height="300" width="1000" data="/media/clx_juxt__059093700_1133_24072008.swf" type="application/x-shockwave-flash">
<param name="quality"/>
<param value="transparent" name="wmode"/>
<param value="/media/clx_juxt__059093700_1133_24072008.swf" name="movie"/>
</object>

Cas numéro 2 : le flash intégré dans un template :

Il peut arriver que l'on doit doive insérer une animation flash dans un template, quitte à ce qu'il ne soit pas facilement administrable. Dans ce cas là, quel code mettre ? Tout d'abord vous pouvez essayer celui qui est écrit au-dessus, en pensant à bien changer les tailles, le nom du fichier et le chemin pour y accéder. Si cela ne résout pas l'affaire, il y a une alternative très intéressante qui est d'utiliser une solution extérieure et gratuite '"swfobject" et que l'on trouve à cette adresse : http://wiki.mediabox.fr/documentation/swfobject Cette solution permet d'une part de régler la transparence d'un flash, mais également de désactiver le cadre activeX que l'on trouve parfois chez les utilisateurs Windows et qui se met automatiquement autour des flashs, obligeant à cliquer dessus pour le désactiver. Très perturbant sur un bouton en flash où il est nécessaire de cliquer deux fois pour accéder au lien. Notons enfin que cette solution utilise un code reconnu valide par le W3C, donc votre site, s'il est bien intégré, restera valide.

Voilà comment mettre en place le script :

  • Téléchargez le "swfobject.zip"
  • Vous y trouverez à l'intérieur "swfobject.js". Mettez-le sur le serveur dans le dossier /scripts/.
  • Dans le "mainPage.html", insérez cette ligne de code, en changeant l'adresse du lien en fonction de l'endroit où vous avez mis le js : <script type="text/javascript" src="/scripts/swfobject.js"></script>
  • A l'endroit du template où vous souhaitez insérer le flash, mettez le code suivant :
<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
   var so = new SWFObject("/images/swf/movie.swf", "mymovie", "400", "200", "7", "#336699");
so.addParam("wmode", "transparent");
   so.write("flashcontent");
</script>

Le texte "This text is replaced by the Flash movie." représente le contenu alternatif qui s'affichera si l'internaute a une vieille version de lecteur flash. En dessous, dans la balise <script> vous indiquerez les propriétés de votre flash : le nom, la largeur, la hauteur, et la couleur de fond de l'animation. Le "7" correspond à la version minimum du lecteur flash que vous souhaitez que l'internaute ait pour voir l'animation. Vous noterez qu'ici également, on insère une ligne sur la transparence : so.addParam("wmode", "transparent");

Et voilà, si tout va bien, le flash passe bien sous le menu.

Cas numéro 3 : le coverflow des visuels supplémentaires des produits :

Comme vous l'avez peut-être vu, il est possible de mettre en place une méthode de visualisation dynamique des visuels supplémentaires des produits : http://communaute.medialibs.com/support/forum/topic-988.html Il est possible que là également, le flash passe au-dessus de votre menu déroulant. Pour régler cela, il suffit d'éditer votre template "product.html" (par exemple : /modeles/fr/Modele1/catalog/product.html) et au niveau de la ligne :

RunFlash("/images/swf/pictureflow-H180.swf", "600", "300", "#000000", "window", "PictureFlow", flashVars);

remplacez "window" par "transparent"

RunFlash("/images/swf/pictureflow-H180.swf", "600", "300", "#000000", "transparent", "PictureFlow", flashVars);