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

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 :

Actionscript

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

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 »

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.

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

Et voici le code compris par tous

L’exemple
Le fla

Voila +++

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *