Matthieu Lombard [ mediabox devblog ]

Je cherche depuis un petite heure comment faire pour interragir entre mes liens html et une animation Flash côte � côte dans ma page. C'est � dire que lors d'un clic sur un lien, l'animation parte de l'endroit où elle en est et se joue jusqu'� un temps précis; donc sans rechargement de la page.

Un début de réponse m'a été donné sur flash.media-box : la classe LocalConnection.

Après quelques recherches, je me suis aperçu que les solutions avec cette classe utilisent un iframe (mmmh pas bon ça...)

Pour y remédier, pourquoi ne pas finalement passer par un petit script Ajax ?

Essayons

Tests réalisés à l'aide de la fonction sendData() présentée chez ce cher Qwix avec une simple modification du passage en paramètre de l'id de la div d'affichage : Javascript :

<script type="text/javascript">
  //définition de l'endroit d'affichage:
  var content = document.getElementById(div);
</script>

si de palier le problème causé au développeur depuis peu par Microsoft : l'activation du Flash sous Internet Explorer.

Prenons un page index.htm où seront insérés : L'appel la fonction javascript sendData() :

<script type="text/javascript">**Script de Qwix**</script>

le menu, l'animation Flash à contrôler et la div qui va recevoir les données via la fonction : Html :

<ul>
  <li><a href="javascript:sendData('&part=part1', 'sender.php', 'GET', 'swf_sender');" title="part1">Part 1</a></li>
  <li><a href="javascript:sendData('&part=part2', 'sender.php', 'GET', 'swf_sender');" title="part2">Part 2</a></li>
  <li><a href="javascript:sendData('&part=part3', 'sender.php', 'GET', 'swf_sender');" title="part3">Part 3</a></li>
</ul>
 
<object type="application/x-shockwave-flash" data="receiver.swf" width="550" height="400">
  <param name="movie" value="receiver.swf" />
</object>
 
<div id="swf_sender"></div>

Prenons maintenant la page sender.php. Celle-ci va simplement contenir un petit Swf permettant de dialoguer avec le Flash principal :

<object type="application/x-shockwave-flash" data="sender.swf" width="550" height="400">
  <param name="movie" value="sender.swf" />
  <param name="flashvars" value="part=<?php echo $_GET['part']; ?>" />
</object>

La variable "part" est récupérée de la page "index.htm" par la méthode GET et passée dans le Flash.

Et voilà vous êtes déjà prêt côté Html et il vous reste à créer vos fichiers "sender.swf" et "receiver.swf".

• sender.swf :

// Création d'un objet LocalConnection
var sender = new LocalConnection();
// Connection �  un canal de communication "transmission" via la méthode "send", Envoi de la méthode utilisée et envoi de la variable passée dans par flashvars dans le html
sender.send("transmission","change",part);
// Fermeture de l'objet
sender.close();

_Code à placer sur la première image clé.

• receiver.swf :

 // Création d'un objet LocalConnection
receiver = new LocalConnection();
// Déclenchement de la méthode par le send de sender.swf avec passage de la variable récupérée
receiver.change = function(mapart) {
  // Déplacement vers l'endroit de la scène souhaitée (pour moi, des étiquettes au nom des parties reçues sont posées sur des images clés)
  gotoAndStop(mapart);	
}
// On se met à l'écoute d'informations extérieurs sur le canal "transmission"
receiver.connect("transmission");
// Arrêt de l'animation au départ
stop();

_Code � placer sur la première image clé. _Parties visées par les menus à mettre sur les clés suivantes

Une solution m'a autrement été proposée par bigop, c'est d'utiliser l'objet javascript "SWFObject" fourni par adobe que l'on peut trouver ici.

Il permet aussi de palier le problème causé au développeur depuis peu par Microsoft : l'activation du Flash sous Internet Explorer.