Javascript și ActionScript Converse Introducere în ExternalInterface

ActionScript și Javascript. Ambele limbi sunt mari pe cont propriu, dar v-ați întrebat vreodată ce ați putea face dacă ar putea vorbi unul cu celălalt? Ei bine, ai noroc! Aici intră clasa ExternalInterface în imagine. Urmați-mă pe măsură ce vă învăț de bază.

Fotografie de Dave Spellman.

Pasul 1: Clasa ExternalInterface

Unde pot să-l folosesc??

În prezent, clasa ExternalInterface este disponibilă în următoarele browsere:

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

Ce pot face cu ea?

Clasa ExternalInterface vă permite:

Apelați orice funcție Javascript din ActionScript.
Apelați orice funcție ActionScript din Javascript.
Parcurgeți argumentele și parametrii dintre cele două.
Primiți o valoare de returnare dintr-o funcție Javascript.
Returnați o valoare unei funcții Javascript.

Pasul 2: Să creăm pagina HTML

Vom sari direct la asta si vom incepe cu un exemplu foarte bun. Mai intai trebuie sa cream pagina noastra HTML, incat sa incarci editorul HTML preferat si sa incepem. Creați un formular în interiorul HTML-ului.

     Exercițiul de interfață externă 1     Text din Flash

Pasul 3: Funcția de referință SWF

Pentru a trimite cu ușurință SWF în HTML, vom crea o funcție Javascript, astfel încât să putem face referire la SWF în codul nostru. Pentru a realiza acest lucru, plasați acest script între etichetele "cap".

Această funcție va returna SWF care este trecut ca parametru al funcției flashMovie (). De exemplu, "flashMovie (" testMovie ");" ar reveni la swf cu un id de "testMovie".

Pasul 4: Creați o funcție pentru a primi valori din ActionScript

Acum vom crea o funcție Javascript care acceptă o valoare din ActionScript. Plasați acest lucru în interiorul scenariului deja făcut
Etichete.

 funcția sendToJS (valoare) document.forms ["myForm"] output.value = value;

Aceasta va lua oricare valoare obținută de la ActionScript și o vom plasa în câmpul de text cu un id de "ieșire".

Pasul 5: Deschideți Flash

Să deschidem Flash și să începem să lucrăm la ActionScript. Creați un nou fișier ActionScript 3.0 și creați o nouă clasă de documente numită "EIFace1".

Pasul 6: Configurați clasa de documente

Voi folosi FDT pentru a scrie EIFace.as, dar sunteți binevenit să utilizați orice Editor ActionScript pe care vă simțiți confortabil. Vom începe prin a crea o clasă standard pentru documente.

 pachet import flash.display.Sprite; / ** * @ autorul creativității * / clasa publică EIFace1 extinde Sprite funcția publică EIFace1 ()

Pasul 7: Crearea textului nostru

Creați câmpul de text pe care îl vom folosi pentru a trimite valorile noastre.

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

Pasul 8: Creați un buton de trimitere

Creați un buton pentru a face clic. Nu sunt un fan al utilizării componentelor, așa că voi construi un buton de la zero folosind Flash IDE. Puteți crea doar o cutie sau utilizați componenta SimpleButton; Vă las să folosiți sucurile creative. Dacă nu mai aveți nevoie de ajutor pentru construirea unui buton, puteți trece la pasul 11.

Începeți prin a crea un dreptunghi cu instrumentul Primitiv Rectangular. Nu voi oferi valori specifice, doar simțiți-vă că vă plac.

Pasul 9: Continuați crearea butoanelor

Conversia dreptunghiului într-un filmClip.

Creați un nou strat în interiorul filmului și plasați textul "Trimiteți la JS".

Pasul 10: Exportați pentru ActionScript

Du-te în bibliotecă, faceți clic dreapta pe buton și Export pentru ActionScript.

Pasul 11: Cod în buton

Vom codifica butonul nostru în clasa noastră de documente.

 butonul1 = nou TrimiteButton (); buton1.x = stage.stageWidth * .5 - buton1.width * .5; butonul1.y = field1.y + 30; stage.addChild (button1);

Pasul 12: Unde suntem acum

Acesta este modul în care ar trebui să apară acum pagina HTML.

     Exercițiul de interfață externă 1      Text din Flash

Clasa de documente ar trebui să arate așa.

 pachet import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @ autorutul creativității * / clasa publică EIFace1 extinde Sprite private var field1: TextField; privat buton var1: MovieClip; funcția publică 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 = TextFormat nou ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1); butonul1 = nou TrimiteButton (); buton1.x = stage.stageWidth * .5 - buton1.width * .5; butonul1.y = field1.y + 30; stage.addChild (button1);

Pasul 13: Creați funcția ActionScript în Javascript

Acum trebuie să creăm funcția care trimite datele din Flash în Javascript. Aceasta va fi o funcție simplă pe care o trimite
o sfoară.

 butonul1.addEventListener (MouseEvent.CLICK, sendToJS); funcția privată sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

Adăugăm mai întâi un asistent de participare la butonul nostru, în interiorul constructorului nostru de clase de documente. Apoi ne creăm pe ascultător. ExternalInterface.available verificări de proprietate pentru a vedea dacă browserul nostru este capabil să utilizeze clasa ExternalInterface. Nu este necesar să utilizăm așa cum știm că browserul nostru o poate sprijini, dar este o practică bună pentru dezvoltarea pentru web și nu suntem siguri dacă browserul client va fi compatibil.

ExternalInterface.call () este ceea ce folosim pentru a numi funcția noastră Javascript. Primul parametru este numele funcției Javascript pe care dorim să o apelam. Este numele funcției noastre în Javascript ca un șir. Al doilea parametru este valoarea pe care dorim să trecem la funcția Javascript. În acest caz, depășim valoarea textului nostru.

Notă: Puteți trece cât mai mulți parametri doriți, dar primul parametru trebuie să fie numele funcției Javascript.

Pasul 14: Timpul de testare

Înainte de a putea testa, trebuie mai întâi să încorporăm SWF în HTML. Trebuie să subliniez că este mai bine să utilizați SWFObject și nu metoda implicită utilizată de Flash pentru a încorpora fișierele SWF. Să publicăm SWF-ul nostru, configurați SWFObject și să încorporăm fișierul nostru.

Iată codul SWFObject Embed, care intră în capul fișierului HTML:

De asemenea, este important să dați SWF-ul un ID. Acest lucru este important cu utilizarea ExternalInterface și pentru noi să-l țintească folosind funcția Javascript pe care am creat-o mai devreme. Să creăm Divul nostru care va găzdui dosarul SWF.

  Acest lucru va fi înlocuit cu un SWF. Dacă nu aveți nevoie să vă actualizați Flash Player-ul.

Iată clasa de documente și fișierul HTML până la acest punct:

 pachet import flash.external.ExternalInterface; importul flash.events.MouseEvent; import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @ autorutul creativității * / clasa publică EIFace1 extinde Sprite private var field1: TextField; privat buton var1: MovieClip; funcția publică 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 = TextFormat nou ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1); butonul1 = nou TrimiteButton (); buton1.x = stage.stageWidth * .5 - buton1.width * .5; butonul1.y = field1.y + 30; stage.addChild (button1); butonul1.addEventListener (MouseEvent.CLICK, sendToJS);  funcția privată sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

     Exercițiul de interfață externă 1       Acest lucru va fi înlocuit cu un SWF. Dacă nu aveți nevoie să vă actualizați Flash Player-ul.
 
   Text din Flash

Acum, deschideți ambalajul HTML și testați-l. Veți vedea că valoarea câmpului de text din flash devine valoarea din câmpul de text din codul nostru HTML. Pe scurt, codul din spatele acestui lucru este destul de simplu și direct. Acum, să încercăm să trimitem niște informații de la Javascript la ActionScript.

Pasul 15: Faceți câmpuri suplimentare

Vom crea câmpuri suplimentare pentru a trimite informații de la Javascript la ActionScript.

 Trimiteți textul în Flash

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

Pasul 16: Creați funcția Javascript la ActionScript

Trebuie să creăm o funcție care trimite valoarea din interiorul HTML-ului nostru în Flash. Acesta este similar cu funcția pe care am creat-o pentru a trimite valori de la ActionScript la Javascript.

 funcția sendToFlash (valoare) flashMovie ("EIFace") sendToFlash (valoare);

Utilizăm funcția pe care am creat-o mai devreme pentru a face referire la SWF-ul încorporat. Acum trebuie să mergem în clasa noastră de documente și să setăm Flash pentru a primi valori de la Javascript și pentru a crea o nouă funcție pe care Javascript o va apela.

Pasul 17: Adăugarea de callback-uri

Pentru a înregistra funcțiile Javascript, trebuie să adăugăm callback-uri, astfel încât Flash să știe ce încercăm să trimitem atunci când apelăm o funcție ActionScript. Să începem în sfârșit să sunăm ceva ActionScript.

 funcția privată addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", dinJS);

ExternalInterface.addCallback () funcția înregistrează o funcție în ActionScript care va fi apelată de Javascript. Primul parametru este numele funcției prin care Javascript va cunoaște funcția. Al doilea parametru este funcția reală.

Pur și simplu pus, asta înseamnă în Javascriptul nostru, am numi sendToFlash () și care ar invoca funcția fromJS () în ActionScript.

Pasul 18: Crearea dinJS ()

Acum vom crea funcția fromJS (). Aceasta este o funcție foarte simplă care va atribui valoarea câmpului textului.

 funcția privată de la JS (valoare: String): void field2.text = value;

Timp pentru un alt test și pentru a vedea ce vom veni. Iată ce arată acum clasa de documente și codul HTML:

 pachet import flash.external.ExternalInterface; importul flash.events.MouseEvent; import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @ autorutul creativității * / clasa publică EIFace1 extinde Sprite private var field1: TextField; privat buton var1: MovieClip; privat câmp var2: TextField; funcția publică 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 = TextFormat nou ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1); field2 = TextField nou (); field2.type = TextFieldType.DYNAMIC; field2.width = 300; field2.height = 20; field2.border = true; field2.borderColor = 0x565656; field2.background = true; field2.backgroundColor = 0xEFEFEF; field2.defaultTextFormat = TextFormat nou ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; field2.y = field1.y - 50; stage.addChild (field2); butonul1 = nou TrimiteButton (); buton1.x = stage.stageWidth * .5 - buton1.width * .5; butonul1.y = field1.y + 30; stage.addChild (button1); butonul1.addEventListener (MouseEvent.CLICK, sendToJS); addCallbacks ();  funcția privată addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", dinJS);  funcția privată dinJS (valoare: String): void field2.text = value;  funcția privată sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text);

     Exercițiul de interfață externă 1       Acest lucru va fi înlocuit cu un SWF. Dacă nu aveți nevoie să vă actualizați Flash Player-ul.
 
   Trimiteți textul în Flash   
 
 Text din Flash

Pasul 19: Rezultate

După cum puteți vedea, plasarea textului în cel mai nou câmp și apăsarea mesajului trimite trimite valoarea în câmpul pentru textul Flash. Utilizarea clasei ExternalInterface este foarte simplă și poate fi adesea utilă atunci când creați aplicații API și aplicații care pot fi manipulate în afara filmului Flash. De exemplu, acest lucru poate fi implementat în API-urile Video Player pentru crearea și controlul videoclipului cu Javascript.

Pasul 20: Cine folosește Javascript clasic mai mult?

Pentru majoritatea oamenilor de acolo, nimeni nu folosește cu adevărat Javascript clasic; jQuery este valul viitorului. Iată un exemplu de utilizare a jQuery în loc de Javascript clasic.

Iată noul HTML actualizat pentru jQuery:

     Exercițiul de interfață externă 1        Acest lucru va fi înlocuit cu un SWF. Dacă nu aveți nevoie să vă actualizați Flash Player-ul.
 
   Trimiteți textul în Flash   
 
 Text din Flash

Concluzie

Sperăm că acum aveți o mai bună înțelegere cu privire la utilizarea ExternalInterface Class. Dacă aveți întrebări sau idei despre ce altceva doriți să învățați, lăsați-mi un comentariu sau tweet-mă și voi vedea ce pot face. Sper că ați învățat conceptele și să începeți să le utilizați în propriile proiecte. Vă mulțumim pentru lectură!

kreativeKING

Cod