ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Utiliser une galerie JavaScript (LiteBox & MediaBox)
Nous allons voir ici comment utiliser les galeries photos javascript (tel que LiteBox ou MediaBox) à partir de Flash.

La première chose à prendre en compte, c'est la visualisation du Flash sous un filtre JavaScript. Votre animation Flash ne sera pas visible. Il faut donc prévoir un GIF/JPG de backup qui s'affichera lorsque votre galerie javascript ce déclachera. Placez le de la manière suivante, et profitez-en pour paramètrer correctement l'insertion de votre SWF dans le HTML comme ceci :

<div style="width:550px; height:400px; background:url(images/backup.jpg);">
<object type="application/x-shockwave-flash" data="fichier.swf" width="550" height="400">
<param name="movie" value="fichier.swf" />
<param name="wmode" value="transparent" />
<param name="allowscriptaccess" value="samedomain" />
</object>
</div>

Ensuite, pour executer la galerie, il faut passer par une commande javascript. Pour cela, procédez de la manière vu en Exécuter une fonction JavaScript.

Importer les fichiers (CSS/JS) de votre galerie dans votre page HTML (comme si vous vouliez l'executer de manière classique en HTML). Procédez d'ailleur à quelques test en HTML afin d'être sûr que votre galerie est opérationnelle.

Enfin, dans Flash, chaque galerie à sa propre méthode. Certaines l'ont prévues dans leur développement, et d'autres nécessiteront de passer par des plugins développés par la communauté autour de l'application. Nous allons voir ici deux exemples :

- LiteBox :

Pour utiliser une galerie LightBox en Flash, j'utilise la version LightBox++, développé par {codefidelity} et disponible gratuitement sur leur site à cette adresse : http://blog.codefidelity.com/

Commencez par importer les fichiers CSS et JavaScript (plus une petite fonction supplémentaire) dans votre page HTML entre les balises <head> </head> :

<link href="http://www.startmeup.fr/julien_test/lightbox++/css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://www.startmeup.fr/julien_test/lightbox++/js/prototype.js" type="text/javascript"></script>
<script src="http://www.startmeup.fr/julien_test/lightbox++/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="http://www.startmeup.fr/julien_test/lightbox++/js/lightbox++.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
function LightboxDelegate(url,caption)
{
var objLink = document.createElement("a");
objLink.setAttribute("href",url);
objLink.setAttribute("rel","lightbox");
objLink.setAttribute("title",caption);
Lightbox.prototype.start(objLink);
}
-->
</script>

Ensuite, dans Flash :

//Imports Flash
import flash.events.MouseEvent;
import flash.net.URLRequest;

function runLightbox(e:MouseEvent):void
{
var jscommand:String = "LightboxDelegate('images/digg_en.jpg','Titre du visuel');";
var url:URLRequest = new URLRequest("javascript:" + jscommand + " void(0);");
navigateToURL(url, "_self");
}
btn.addEventListener(MouseEvent.CLICK, runLightbox);

Sources : (Flash CS4)

- MediaBox :

MediaBox est une galerie développée à partir de LightBox, SlimBox et Mootools. Elle a l'avantage de pouvoir afficher une multitude de contenu, et plusieurs à la fois. Toutes les informations sont disponibles sur le site de l'auteur "iaian7" à l'adresse suivante : http://iaian7.com/

Un inconvéniant de cette galerie, c'est l'utilisation de style CSS inconpatible avec IE (les ombres portées par exemple). J'ai donc ajouté une fonction JS afin de personnaliser les styles CSS en fonction du navigateur. Voici la function à mettre entre les balises <head> </head>.

<link rel="stylesheet" type="text/css" href="css/background.css" id="feuille_de_style" />
<script language="javascript">
<!--
var strChUserAgent = navigator.userAgent;
var intSplitStart = strChUserAgent.indexOf("(",0);
var intSplitEnd = strChUserAgent.indexOf(")",0);
var strChStart = strChUserAgent.substring(0,intSplitStart);
var strChMid = strChUserAgent.substring(intSplitStart, intSplitEnd);
var strChEnd = strChUserAgent.substring(strChEnd);

if(strChMid.indexOf("MSIE 7") != -1)
{
document.getElementById('feuille_de_style').href = 'css/background_ie.css';
}
else
{
if(strChMid.indexOf("MSIE 6") != -1)
{
document.getElementById('feuille_de_style').href = 'css/background_ie6.css';
}
else
{
if(strChMid.indexOf("MSIE 8") != -1)
{
document.getElementById('feuille_de_style').href = 'css/background_ie.css';
}
else
{
document.getElementById('feuille_de_style').href = 'css/background.css';
}
}
}
-->
</script>

Ensuite, entre les balises <body> </body>, insérer les imports CSS et JS de la galerie MediaBox :

<link rel="stylesheet" href="css/mediaboxAdvBlack.css" type="text/css" media="screen" />
<script src="js/mootools-1.2.3-core.js" type="text/javascript"></script>
<script src="js/mediaboxAdv-1.1.6.js" type="text/javascript"></script>

<script src="js/mootools-1.2.3.1-more.js" type="text/javascript"></script>
<script src="js/AC_QuickTime.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/an7effectsAdv.js" type="text/javascript"></script>

Enfin, dans Flash, voici le code à mettre sur votre bouton : (ici on ouvre une page YouTube, avec lecture uniquement de la vidéo)

//Imports Flash
import flash.events.MouseEvent;
import flash.net.URLRequest;

function onClick(e:MouseEvent):void
{
var jscommand:String = "Mediabox.open('http://www.youtube.com/watch?v=MrqcK5arPPk', 'Blue Monster::Movie', '480 380');";
var url:URLRequest = new URLRequest("javascript:" + jscommand + " void(0);");
navigateToURL(url, "_self");
}
btn.addEventListener(MouseEvent.CLICK, onClick);

Ici on ouvre une galerie de 3 images :

//Imports Flash
import flash.events.MouseEvent;
import flash.net.URLRequest;

function onClick(e:MouseEvent):void
{
var jscommand:String = "Mediabox.open([['images/img01.jpg', 'Titre::Description', '400 350'], ['images/img02.jpg', 'Titre::Description', '400 350'], ['images/img03.jpg', 'Titre::Description', '400 350']], 0);";
var url:URLRequest = new URLRequest("javascript:" + jscommand + " void(0);");
navigateToURL(url, "_self");
}
btn.addEventListener(MouseEvent.CLICK, onClick);

Sources : (Flash CS4)
Commentaire(s)
Aucun.