Javascript et ActionScript Converse Introduction à ExternalInterface

ActionScript et Javascript. Ces deux langues sont excellentes en elles-mêmes, mais vous êtes-vous déjà demandé ce que vous pourriez faire si elles pouvaient se parler? Eh bien, vous avez de la chance! C'est là que la classe ExternalInterface entre en scène. Suivez-moi pendant que je vous enseigne les bases.

Photo de Dave Spellman.

Étape 1: la classe ExternalInterface

Où puis-je l'utiliser?

Actuellement, la classe ExternalInterface est disponible dans les navigateurs suivants:

Internet Explorateur 5.0+
Netscape 8.0+
Mozilla 1.7.5+
Firefox 1.0+
Safari 1.3+

Que puis-je faire avec?

La classe ExternalInterface vous permet de:

Appeler une fonction Javascript à partir d'ActionScript.
Appelez n'importe quelle fonction ActionScript à partir de Javascript.
Passer des arguments et des paramètres entre les deux.
Recevoir une valeur de retour d'une fonction Javascript.
Renvoyer une valeur à une fonction Javascript.

Étape 2: créons notre page HTML

Nous allons passer directement à cela et commencer par un exemple très basique. Nous devons d’abord créer notre page HTML. Lancez donc votre éditeur HTML préféré et commençons. Créez un formulaire dans votre HTML.

     ExternalInterface Test 1     Texte de Flash

Étape 3: fonction de référencement de fichiers SWF

Pour référencer facilement le fichier SWF dans notre code HTML, nous allons créer une fonction Javascript afin de pouvoir référencer le fichier SWF dans notre code. Pour ce faire, placez ce script entre les balises "head".

Cette fonction renverra le fichier SWF transmis en tant que paramètre de la fonction flashMovie (). Par exemple, "flashMovie ('testMovie');" renverrait le swf avec un identifiant de 'testMovie'.

Étape 4: Créer une fonction pour recevoir des valeurs d'ActionScript

Nous allons maintenant créer une fonction Javascript qui accepte une valeur d'ActionScript. Placez ceci dans notre script déjà fait
Mots clés.

 function sendToJS (value) document.forms ["myForm"]. output.value = valeur;

Cela prendra n'importe quelle valeur du code ActionScript et le placera dans notre champ de texte avec un identifiant de "sortie"..

Étape 5: Ouvrez Flash

Ouvrons Flash et commençons à travailler sur le code ActionScript. Créez un nouveau fichier ActionScript 3.0 et créez une nouvelle classe de document nommée "EIFace1"..

Étape 6: Configuration de la classe de document

J'utiliserai FDT pour écrire EIFace.as, mais vous pouvez utiliser n'importe quel éditeur ActionScript avec lequel vous vous sentez à l'aise. Nous allons commencer par créer un shell de classe de document standard.

 package import flash.display.Sprite; / ** * @author kreativeKING * / classe publique EIFace1 étend Sprite fonction publique EIFace1 ()

Étape 7: Créer notre TextField

Créez le champ de texte que nous utiliserons pour envoyer nos valeurs.

 field1 = new TextField (); field1.type = TextFieldType.INPUT; field1.width = 300; field1.height = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (champ1);

Étape 8: Créer un bouton d'envoi

Créez un bouton sur lequel cliquer. Je ne suis pas un fan de l'utilisation de composants, je vais donc créer un bouton à partir de zéro avec Flash IDE. Vous pouvez simplement créer une boîte ou utiliser le composant SimpleButton. Je vous laisse utiliser ces jus créatifs. Si vous n'avez plus besoin d'aide pour créer un bouton, vous pouvez passer à l'étape 11..

Commencez par créer un rectangle avec l'outil Rectangle Primitive. Je ne fournirai pas de valeurs spécifiques, je vous le ferai savoir..

Étape 9: continuer la création du bouton

Convertir le rectangle en MovieClip.

Créez un nouveau calque à l'intérieur du MovieClip et placez le texte "Envoyer à JS".

Étape 10: Exporter pour ActionScript

Allez dans votre bibliothèque, faites un clic droit sur le bouton et Exporter pour ActionScript.

Étape 11: Code dans le bouton

Nous allons coder notre bouton dans notre classe de document.

 button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; bouton1.y = champ1.y + 30; stage.addChild (button1);

Étape 12: Où sommes-nous maintenant

Voici comment votre page HTML devrait maintenant apparaître.

     ExternalInterface Test 1      Texte de Flash

La classe de document devrait ressembler à ceci.

 package import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @author kreativeKING * / classe publique EIFace1 étend Sprite private var field1: TextField; private var button1: MovieClip; fonction publique EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; field1.width = 300; field1.height = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (champ1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; bouton1.y = champ1.y + 30; stage.addChild (button1);

Étape 13: Créer une fonction ActionScript en Javascript

Nous devons maintenant créer la fonction qui envoie les données de Flash à Javascript. Ce sera une fonction simple qui envoie
un string.

 button1.addEventListener (MouseEvent.CLICK, sendToJS); fonction privée sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

Nous ajoutons d’abord un écouteur d’événement à notre bouton, dans notre constructeur Document Classes. Ensuite, nous créons notre auditeur. le ExternalInterface.available propriété vérifie si notre navigateur peut utiliser la classe ExternalInterface. Cela n'est pas nécessaire, car nous savons que notre navigateur peut le prendre en charge, mais c'est une bonne pratique de développement pour le Web et nous ne sommes jamais certains que le navigateur client deviendra compatible..

le ExternalInterface.call () fonction est ce que nous utilisons pour appeler notre fonction Javascript. Le premier paramètre est le nom de la fonction Javascript que nous voulons appeler. C'est le nom de notre fonction en Javascript sous forme de chaîne. Le deuxième paramètre est la valeur que nous voulons transmettre à la fonction Javascript. Dans ce cas, nous passons la valeur de notre champ de texte.

Remarque: vous pouvez transmettre autant de paramètres que vous le souhaitez, mais le premier paramètre doit être le nom de la fonction Javascript..

Étape 14: Temps de test

Avant de pouvoir tester, nous devons d'abord intégrer notre fichier SWF au code HTML. Je dois souligner qu'il est préférable d'utiliser SWFObject et non la méthode par défaut utilisée par Flash pour incorporer des fichiers SWF. Publions notre fichier SWF, installons SWFObject et intégrons notre fichier.

Voici le code SWFObject Embed qui va dans la tête du fichier HTML:

Il est également important de donner un identifiant au fichier SWF. Ceci est important lors de l'utilisation de ExternalInterface et pour nous de le cibler à l'aide de la fonction Javascript que nous avons créée précédemment. Créons notre div qui hébergera le fichier SWF.

  Cela sera remplacé par un fichier SWF. Sinon, vous devez mettre à jour votre lecteur Flash..

Voici la classe de document et le fichier HTML jusqu'à ce point:

 package import flash.external.ExternalInterface; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @author kreativeKING * / classe publique EIFace1 étend Sprite private var field1: TextField; private var button1: MovieClip; fonction publique EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; field1.width = 300; field1.height = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (champ1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; bouton1.y = champ1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS);  fonction privée sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

     ExternalInterface Test 1       Cela sera remplacé par un fichier SWF. Sinon, vous devez mettre à jour votre lecteur Flash..
 
   Texte de Flash

Ouvrez maintenant votre wrapper HTML et testez-le. Vous verrez que la valeur du champ de texte dans flash devient la valeur du champ de texte dans notre code HTML. En un coup d'œil, le code derrière cela est assez simple et simple. Essayons maintenant d'envoyer des informations depuis Javascript vers ActionScript..

Étape 15: Créer des champs supplémentaires

Nous allons créer des champs supplémentaires pour envoyer des informations de Javascript à ActionScript.

 Envoyer du texte à Flash

 field2 = new TextField (); field2.type = TextFieldType.DYNAMIC; field2.width = 300; field2.height = 20; field2.border = true; field2.borderColor = 0x565656; field2.background = true; field2.backgroundColor = 0xEFEFEF; field2.defaultTextFormat = new TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; champ2.y = champ1.y - 50; stage.addChild (champ2);

Étape 16: création de la fonction Javascript vers ActionScript

Nous devons créer une fonction qui envoie la valeur de notre code HTML à Flash. Ceci est similaire à la fonction que nous avons créée pour envoyer des valeurs d'ActionScript à Javascript..

 fonction sendToFlash (valeur) flashMovie ("EIFace"). sendToFlash (valeur);

Nous utilisons la fonction créée précédemment pour référencer le fichier SWF intégré. Maintenant, nous devons aller dans notre classe de document et configurer Flash pour recevoir les valeurs de Javascript et créer une nouvelle fonction que Javascript appellera.

Étape 17: Ajout de rappels

Pour enregistrer des fonctions Javascript, nous devons ajouter des rappels afin que Flash sache ce que nous essayons d’envoyer lorsque nous appelons une fonction ActionScript. Commençons enfin à appeler du code ActionScript.

 fonction privée addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS);

le ExternalInterface.addCallback () function enregistre une fonction dans ActionScript appelée par Javascript. Le premier paramètre est le nom de la fonction par lequel Javascript connaîtra la fonction. Le deuxième paramètre est la fonction réelle.

En termes simples, cela signifie dans notre code Javascript que nous appellerions sendToFlash () et qui invoquerait la fonction fromJS () dans ActionScript.

Étape 18: Créer fromJS ()

Nous allons maintenant créer la fonction fromJS (). C'est une fonction très simple qui assignera la valeur qui lui est passée au champ de texte.

 fonction privée fromJS (value: String): void field2.text = valeur;

Il est temps de faire un autre test et de voir ce que nous proposons. Voici à quoi ressemblent la classe de document et le HTML:

 package import flash.external.ExternalInterface; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @author kreativeKING * / classe publique EIFace1 étend Sprite private var field1: TextField; private var button1: MovieClip; private var field2: TextField; fonction publique EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; field1.width = 300; field1.height = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = new TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (champ1); field2 = new TextField (); field2.type = TextFieldType.DYNAMIC; field2.width = 300; field2.height = 20; field2.border = true; field2.borderColor = 0x565656; field2.background = true; field2.backgroundColor = 0xEFEFEF; field2.defaultTextFormat = new TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; champ2.y = champ1.y - 50; stage.addChild (champ2); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; bouton1.y = champ1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); addCallbacks ();  fonction privée addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS);  fonction privée fromJS (valeur: chaîne): void champ2.text = valeur;  fonction privée sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

     ExternalInterface Test 1       Cela sera remplacé par un fichier SWF. Sinon, vous devez mettre à jour votre lecteur Flash..
 
   Envoyer du texte à Flash   
 
 Texte de Flash

Étape 19: Résultats

Comme vous pouvez le constater, placer du texte dans notre dernier champ et appuyer sur Envoi envoie la valeur dans le champ de texte Flash. L'utilisation de la classe ExternalInterface est très simple et peut souvent s'avérer utile lors de la création d'API et d'applications pouvant être manipulées en dehors de Flash Movie. Par exemple, cela peut être implémenté dans les API du lecteur vidéo pour créer et contrôler la vidéo avec Javascript.

Étape 20: Qui utilise le Javascript classique plus?

Pour la plupart des gens, personne n’utilise vraiment le Javascript classique; jQuery est la vague du futur. Voici un exemple d'utilisation de jQuery au lieu de Javascript classique.

Voici le nouveau code HTML mis à jour à utiliser avec jQuery:

     ExternalInterface Test 1        Cela sera remplacé par un fichier SWF. Sinon, vous devez mettre à jour votre lecteur Flash..
 
   Envoyer du texte à Flash   
 
 Texte de Flash

Conclusion

J'espère que vous maîtriserez mieux l'utilisation de la classe ExternalInterface. Si vous avez des questions ou des idées sur ce que vous aimeriez apprendre, laissez un commentaire ou tweetez-moi et je verrai ce que je peux faire. J'espère que vous avez appris les concepts et commencez à les utiliser dans vos propres projets. Merci d'avoir lu!

kreativeKING

Code