Share
ActionScript e Javascript. Entrambe queste lingue sono grandiose da sole, ma ti sei mai chiesto cosa potresti fare se potessero parlare tra loro? Bene, sei fortunato! Ecco dove entra in scena la classe ExternalInterface. Seguimi mentre ti insegno le basi.
Foto di Dave Spellman.
Attualmente la classe ExternalInterface è disponibile nei seguenti browser:
La classe ExternalInterface ti consente di:
Entreremo subito in questo e inizieremo con un esempio di base. Per prima cosa dobbiamo creare la nostra pagina HTML, quindi avvia il tuo editor HTML preferito e cominciamo. Crea un modulo nel tuo HTML.
ExternalInterface Test 1
Per fare facilmente riferimento al file SWF nel nostro codice HTML, creeremo una funzione Javascript in modo da poter fare riferimento al file SWF nel nostro codice. Per fare ciò, posiziona questo script tra i tag "testa".
Questa funzione restituirà il SWF che viene passato come parametro della funzione flashMovie (). Ad esempio, "flashMovie ('testMovie');" restituirebbe swf con un id di 'testMovie'.
Ora creeremo una funzione Javascript che accetta un valore da ActionScript. Metti questo dentro la nostra sceneggiatura già fatta
tag.
function sendToJS (value) document.forms ["myForm"]. output.value = value;
Questo prenderà qualsiasi valore ottenuto da ActionScript e lo posizioneremo nel nostro campo di testo con un ID di "output".
Apriamo Flash e iniziamo a lavorare su ActionScript. Creare un nuovo file ActionScript 3.0 e creare una nuova classe documento denominata "EIFace1".
Userò FDT per scrivere EIFace.as, ma puoi usare qualsiasi editor di ActionScript con cui ti trovi a tuo agio. Iniziamo creando una shell di classe documento standard.
pacchetto import flash.display.Sprite; / ** * @author kreativeKING * / public EIFace1 estende Sprite public function EIFace1 ()
Crea il campo di testo che useremo per inviare i nostri valori.
Accentsconagua
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 (field1); Crea un pulsante per fare clic. Non sono un fan dell'uso di componenti, quindi creerò un pulsante da zero utilizzando Flash IDE. Sei libero di creare una scatola o utilizzare il componente SimpleButton; Ti lascerò usare quei succhi creativi. Se non hai bisogno di ulteriore aiuto con la creazione di un pulsante, puoi saltare al passaggio 11.
Inizia creando un rettangolo con lo strumento Rettangolo. Non fornirò valori specifici, lo sentirò solo per piacerti.
Converti il rettangolo in un Movie Clip.
Crea un nuovo livello all'interno del MovieClip e metti il testo "Invia a JS".
Vai nella tua libreria, fai clic con il pulsante destro del mouse e Esporta per ActionScript.
Inseriremo il codice del nostro pulsante nella nostra Document Class.
button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = campo1.y + 30; stage.addChild (button1);
Ecco come dovrebbe apparire la tua pagina HTML.
ExternalInterface Test 1
La Document Class dovrebbe apparire come questa.
package import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @author kreativeKING * / public EIFace1 estende Sprite private var field1: TextField; private var button1: MovieClip; funzione pubblica 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 (field1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = campo1.y + 30; stage.addChild (button1); Ora dobbiamo creare la funzione che invia i dati da Flash a Javascript. Questa sarà una semplice funzione che invia
una stringa.
button1.addEventListener (MouseEvent.CLICK, sendToJS); funzione privata sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); Per prima cosa aggiungiamo un listener di eventi al nostro pulsante, all'interno del nostro costruttore Document Classes. Quindi creiamo il nostro ascoltatore. Il ExternalInterface.available controlli di proprietà per vedere se il nostro browser è in grado di utilizzare la classe ExternalInterface. Non è necessario utilizzare come sappiamo che il nostro browser può supportarlo, ma è una buona pratica per lo sviluppo per il web e non siamo mai sicuri che il browser client diventerà compatibile.
Il ExternalInterface.call () la funzione è ciò che usiamo per chiamare la nostra funzione Javascript. Il primo parametro è il nome della funzione Javascript che vogliamo chiamare. È il nome della nostra funzione in Javascript come stringa. Il secondo parametro è il valore che vogliamo passare alla funzione Javascript. In questo caso, stiamo passando il valore del nostro campo di testo.
Nota: puoi passare tutti i parametri che vuoi, ma il primo parametro deve essere il nome della funzione Javascript.
Prima di poter testare, dobbiamo prima incorporare il nostro SWF nell'HTML. Devo sottolineare che è preferibile utilizzare SWFObject e non il metodo predefinito utilizzato da Flash per incorporare i file SWF. Pubblichiamo il nostro SWF, configura SWFObject e incorpora il nostro file.
Ecco il codice SWFObject Embed che va nella testa del file HTML:
È anche importante dare un ID al SWF. Questo è importante con l'utilizzo di ExternalInterface e per noi di indirizzarlo usando la funzione Javascript creata in precedenza. Creiamo il nostro div che ospiterà il file SWF.
Questo verrà sostituito con un SWF. In caso contrario, è necessario aggiornare il Flash Player.
Ecco la Document Class e il file HTML fino a questo punto:
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 * / public EIFace1 estende Sprite private var field1: TextField; private var button1: MovieClip; funzione pubblica 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 (field1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = campo1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); funzione privata sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); ExternalInterface Test 1 Questo verrà sostituito con un SWF. In caso contrario, è necessario aggiornare il Flash Player.
Ora apri il tuo wrapper HTML e provalo. Vedrai che il valore del campo di testo in flash diventa il valore sul campo di testo nel nostro HTML. A colpo d'occhio, il codice alla base di questo è abbastanza semplice e diretto. Ora proviamo a inviare alcune informazioni da Javascript a ActionScript.
Creeremo campi aggiuntivi per inviare informazioni da Javascript ad ActionScript.
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; field2.y = field1.y - 50; stage.addChild (campo2); Abbiamo bisogno di creare una funzione che manda il valore dall'interno del nostro HTML a Flash. Questo è simile alla funzione che abbiamo creato per inviare valori da ActionScript a Javascript.
function sendToFlash (value) flashMovie ("EIFace"). sendToFlash (valore); Usiamo la funzione creata in precedenza per fare riferimento al file SWF incorporato. Ora dobbiamo andare nella nostra Document Class e configurare Flash per ricevere i valori da Javascript e creare una nuova funzione che Javascript chiamerà.
Per registrare le funzioni Javascript, dobbiamo aggiungere dei callback in modo che Flash sappia cosa stiamo provando ad inviare quando chiamiamo una funzione ActionScript. Iniziamo finalmente a chiamare un po 'di ActionScript.
funzione privata addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS); Il ExternalInterface.addCallback () funzione registra una funzione in ActionScript che può essere chiamata da Javascript. Il primo parametro è il nome della funzione con cui Javascript conoscerà la funzione. Il secondo parametro è la funzione effettiva.
In poche parole, nel nostro Javascript, chiameremmo sendToFlash () e invocheremmo la funzione fromJS () in ActionScript.
Ora creeremo la funzione fromJS (). Questa è una funzione molto semplice che assegnerà il valore passato ad esso nel campo di testo.
funzione privata fromJS (value: String): void field2.text = value;
È tempo di un altro test e vediamo cosa ci viene in mente. Ecco come appaiono la Document Class e l'HTML ora:
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 * / public EIFace1 estende Sprite private var field1: TextField; private var button1: MovieClip; private var field2: TextField; funzione pubblica 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 (field1); 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; field2.y = field1.y - 50; stage.addChild (campo2); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = campo1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); addCallbacks (); funzione privata addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS); private function fromJS (value: String): void field2.text = value; funzione privata sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); ExternalInterface Test 1 Questo verrà sostituito con un SWF. In caso contrario, è necessario aggiornare il Flash Player.
Come puoi vedere, inserendo il testo nel nostro campo più recente e premendo invia, il valore viene immesso nel campo di testo Flash. L'utilizzo della classe ExternalInterface è molto semplice e spesso può essere utile quando si creano API e applicazioni che possono essere manipolate al di fuori del filmato Flash. Ad esempio, questo può essere implementato nelle API di Video Player per la creazione e il controllo del video con Javascript.
Per la maggior parte delle persone là fuori ora, nessuno usa realmente Javascript classico; jQuery è l'onda del futuro. Ecco un esempio di utilizzo di jQuery al posto del classico Javascript.
Ecco il nuovo e aggiornato codice HTML da utilizzare con jQuery:
ExternalInterface Test 1 Questo verrà sostituito con un SWF. In caso contrario, è necessario aggiornare il Flash Player.
Spero che ora tu possa capire meglio come usare la classe ExternalInterface. Se hai domande o idee su cos'altro ti piacerebbe imparare, lascia un commento o twittami e vedrò cosa posso fare. Spero che tu abbia imparato i concetti e inizi a usarli nei tuoi progetti. Grazie per aver letto!
kreativeKING
