Flash et javascript : externalInterface – appeler une boite modal contenant une vidéo youtube depuis flash

11 février 2009 par Niums dans Action script

Dans cette exemple, nous allons créer une animation flash dans laquelle nous allons écrire l’identifiant youtube de la vidéo.
Ensuite au click après vérification du nombre de caractères, une boite modal, genre « lightbox », va s’ouvrir avec la vidéo Youtube voulu.

Voila l’exemple

Mais avant ca, une petite explication sur ExternalInterface

ExternalInterface

La classe ExternalInterface permet les communications entre actonscript et le conteneur flash. Cette classe est recommandée pour les communications entre javascript et actionscript. Mais attention cette méthode n’est disponible que depuis flash 8. Avant cette version il faut utiliser fscommand.

Du flash, il est possile d’appeler les fonctions javascript d’une page HTML en passant des arguments de tout type (String, boolean, Number, funtion, etc…) et de recevoir une valeur de retour pour un appel. Depuis le HTML, vous pouvez appeler une fonction actionscript dans Flash Player grace au javascript. La fonction ActionScript peut renvoyer une valeur que JavaScript reçoit immédiatement comme valeur de retour de l’appel.

L’exemple
Le fla

Afficher une alerte

Javascript :

function hello(parametre) {
alert(parametre);
}

Actionscript

//import  class external
import flash.external.*;
//action sur le bouton
btn_mc.onRelease = function() {

ExternalInterface.call("hello", "Hello vous!");
};

Flash boite modal et youtube

Avant de commencer récupérer jquery et thickbox.
Le premier est la librairie javascript bien connu et le second nous crééra la boite modal ou lightbox.
Ensuite aller sur youtube et prenez une vidéo au hasard. Sur la page de la vidéo vous avez son permalien. Exemple :

http://www.youtube.com/watch?v=vPTby0N11Ss

l’id de la video est les caractères suivant vPTby0N11Ss

Le but en fait ici est de voir comment appeler la lightbox depuis flash et au dessus du flash.

Nous aurons besoin de 3 éléments

  • index.php : la page qui contient le fichier flash
  • flash-modal-video.swf : le flash qui appelle la boite modal et la vidéo youtube défini d’après son ID
  • popup.php : la page qui contient la vidéo youtube dont le paramètre : video_Id sera envoyé via l’url ($_GET)

index.php

On intégre les éléments dont nous avons besoin : js et css

On intégre le flash

<object width="100" height="100" data="flash-modal-video.swf" type="application/x-shockwave-flash">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="wmode" value="transparent" />
<param name="src" value="flash-modal-video.swf" />
<param name="name" value="flash-modal-video" />
<param name="align" value="middle" />
<param name="allowfullscreen" value="false" />
</object>
 

flash-modal-video.swf

Le flash principal :

  • Sur la scène une zone saisie dont le nom d’occurence est « saisie »
  • Un movieclip qui servira de bouton dont le nom d’occurence est « btn »
  • un champ de texte dynamique dont le nom d’occurence est « info »
// import de la class
import flash.external.ExternalInterface;

this.btn.onRelease = function(){
//on vérifie que le champ de saisie n’est pas vide et que sa longueur est comprise entre 12 et 10 caractère.
                if (saisie.text eq "" || saisie.length > 12 || saisie.length < 10 ) {
                        info.text = "Ecrivez l’ID de la vidéo comme ci-dessous en rouge";
// Si ce n’est pas  le cas
                } else {
                        info.text = "Bon visionnage";
                        // on appelle la boite modal
                        // remarquez la transmission de la variable videoId qui se fait avant les autres variables spécifiques à thickbox
                        flash.external.ExternalInterface.call("tb_show" , null ,"popup.php?videoId="+[saisie.text]+"&KeepThis=true&TB_iframe=true&height=500&width=800" , false);
                }
                }

 

popup.php

On récupère la variable nous renseignant sur l’Id de la vidéo youtube et on affiche celle si s’il n’y pas d’erreur.

<?php

if  (isset($_GET[‘videoId’]))
        {
          ?>
          <div align="center">
                <object width="640" height="420">
                <param name="movie" value="http://www.youtube.com/v/<?php echo $_GET['videoId']; ?>&hl=fr&fs=1&rel=0&color1=0×5d1719&color2=0xcd311b"></param>
                <param name="allowFullScreen" value="true"></param>
                <param name="allowscriptaccess" value="always"></param>
                <embed  src="http://www.youtube.com/v/<?php echo $_GET['videoId']; ?>&hl=fr&fs=1&rel=0&color1=0×5d1719&color2=0xcd311b"
                type="application/x-shockwave-flash"
                allowscriptaccess="always"
                allowfullscreen="true"
                width="640"
                height="420">
        </embed>
        </object>
        </div>
       
<?php   
        }
        else
        {
        echo "oups petit probeleme";
        }

?>

 

PS : Un problème rencontré sous firefox : Lors de mes test le flash envoyait bien les informations mais firefox n’en tenait pas compte. Si je met un code xhtml valide lors de l’insertion du flash il n’y aura pas la balise Embed. Malheureusement Firefox en a besoin dans ce cas :

Code xhtml valide

<object width="550" height="400" data="externalInterface.swf" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="src" value="externalInterface.swf" />
</object>
 

Et voici le code compris par tous

<object width="550" height="400" data="externalInterface.swf" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="src" value="externalInterface.swf" />
<param name="quality" value="high" />
</object>
 

L’exemple
Le fla

Voila +++

Continuez votre lecture avec



Articles similaires


Laisser un commentaire