Javascript og ActionScript-omvendt Introduksjon til ExternalInterface

ActionScript og Javascript. Begge disse språkene er flotte på egenhånd, men har du noen gang lurt på hva du kan gjøre hvis de kunne snakke med hverandre? Vel, du har lykke! Det er der ExternalInterface Class kommer inn på bildet. Følg meg da jeg lærer deg det grunnleggende.

Bilde av Dave Spellman.

Trinn 1: ExternalInterface Class

Hvor kan jeg bruke den?

For øyeblikket er ExternalInterface Class tilgjengelig i følgende nettlesere:

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

Hva kan jeg gjøre med det?

The External Interface Class lar deg:

• Ring noen Javascript-funksjon fra ActionScript.
• Ring noen ActionScript-funksjon fra Javascript.
• Pass argumenter og parameters mellom de to.
• Motta en returverdi fra en Javascript-funksjon.
• Returner en verdi til en Javascript-funksjon.

Trinn 2: La oss lage vår HTML-side

Vi hopper rett inn i dette og starter med et veldig grunnleggende eksempel. Først må vi lage vår HTML-side, så brann opp din favoritt HTML Editor og la oss starte. Opprett et skjema inne i HTML-en din.

        
 
 Tekst fra Flash  
 
  

Trinn 3: SWF-referansefunksjon

For å referere til SWF-en i HTML-en, skal vi lage en Javascript-funksjon slik at vi kan referere til SWF-en i vår kode. For å oppnå dette, plasser dette skriptet mellom "hodet" -kodene.

Denne funksjonen returnerer SWF som er bestått som en parameter for flashMovie () -funksjonen. For eksempel, "flashMovie ('testMovie');" ville returnere swf med et ID av 'testmovie'.

Trinn 4: Lag funksjon for å motta verdier fra ActionScript

Nå skal vi opprette en Javascript-funksjon som aksepterer en verdi fra ActionScript. Legg dette inn i vårt allerede skapt skript
tags.

 funksjon sendToJS (verdi) document.forms ["myForm"]. output.value = value; 

Dette vil ta av hvilken verdi vi får fra ActionScript, og plasser den i tekstfeltet med et ID med "output".

Trinn 5: Åpne Flash

La oss åpne Flash og begynne å jobbe med ActionScript. Opprett en ny ActionScript 3.0-fil og opprett en ny dokumentklasse med navnet "EIFace1".

Trinn 6: Konfigurer dokumentklassen

Jeg bruker FDT til å skrive EIFace.as, men du er velkommen til å bruke hvilken som helst ActionScript Editor du føler deg komfortabel med. Vi starter med å opprette en standard Document Class Shell.

 pakke import flash.display.Sprite; / ** * @author kreativeKING * / offentlig klasse EIFace1 strekker seg Sprite offentlig funksjon EIFace1 () 

Trinn 7: Opprette vårt TextField

Opprett tekstfeltet vi skal bruke til å sende våre verdier.

 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 = nytt TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1);

Trinn 8: Opprett en Send-knapp

Lag en knapp for å klikke. Jeg er ikke en fan av å bruke komponenter, så jeg skal bygge en knapp fra bunnen av med Flash IDE. Du er velkommen til å bare opprette en boks eller bruke SimpleButton-komponenten; Jeg lar deg bruke disse kreative juicer. Hvis du ikke trenger hjelp til å bygge en knapp, kan du hoppe over til trinn 11.

Start med å lage et rektangel med Primitive Tool Rectangle. Jeg vil ikke gi spesifikke verdier, bare føl deg ute for å sette deg til.

Trinn 9: Fortsett knappenopprettingen

Konverter rektangelet til en MovieClip.

Lag et nytt lag inne i MovieClip og legg "Send til JS" -teksten.

Trinn 10: Eksporter til ActionScript

Gå inn i biblioteket ditt, høyreklikk på knappen og eksporter for ActionScript.

Trinn 11: Kode i knappen

Vi skal kode vår knapp i vår Dokumentklasse.

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

Trinn 12: Hvor er vi nå?

Slik viser HTML-siden din nå.

         
 
 Tekst fra Flash  
 
  

Dokumentklassen skal se slik ut.

 pakke import flash.display.MovieClip; importer flash.display.Sprite; importer flash.text.TextField; importer flash.text.TextFieldType; importer flash.text.TextFormat; / ** * @author kreativeKING * / offentlig klasse EIFace1 strekker seg Sprite private var field1: TextField; private var button1: MovieClip; offentlig funksjon 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 = nytt 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 = field1.y + 30; stage.addChild (Button1); 

Trinn 13: Lag ActionScript til Javascript-funksjonen

Vi må nå opprette funksjonen som sender dataene fra Flash til Javascript. Dette vil være en enkel funksjon som sender
en streng.

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

Vi legger først en hendelseslytter til vår knapp, inne i vår Dokument Classes-konstruktør. Da skaper vi vår lytter. De ExternalInterface.available egenskapskontroller for å se om nettleseren vår kan bruke ExternalInterface Class. Dette er ikke nødvendig å bruke som vi vet at nettleseren vår kan støtte den, men det er god praksis for å utvikle seg på nettet, og vi er aldri sikre på om klientens nettleser kommer til å bli kompatibel.

De ExternalInterface.call () funksjonen er det vi bruker til å ringe vår Javascript-funksjon. Den første parameteren er navnet på Javascript-funksjonen vi vil ringe. Det er navnet på vår funksjon i Javascript som en streng. Den andre parameteren er verdien vi ønsker å overføre til Javascript-funksjonen. I dette tilfellet overfører vi verdien av vårt tekstfelt.

Merk: Du kan sende så mange parametere som du vil, men den første parameteren må være navnet på Javascript-funksjonen.

Trinn 14: Testtid

Før vi kan teste, må vi først legge inn vår SWF i HTML. Jeg må understreke at det er best å bruke SWFObject og ikke standardmetoden Flash bruker til å bygge inn SWF-filer. La oss publisere vår SWF, sette opp SWFObject og legge inn filen vår.

Her er SWFObject Embed-koden som går inn i hodet til HTML-filen:

Det er også viktig at du gir SWF et id. Dette er viktig ved å bruke ExternalInterface og for oss å målrette den med Javascript-funksjonen vi opprettet tidligere. La oss lage vår div som vil huse SWF-filen.

 
 
Dette vil bli erstattet med en SWF. Hvis ikke, må du oppdatere Flash Player.
 

Her er dokumentklassen og HTML-filen opp til dette punktet:

 pakke import flash.external.ExternalInterface; importer flash.events.MouseEvent; importer flash.display.MovieClip; importer flash.display.Sprite; importer flash.text.TextField; importer flash.text.TextFieldType; importer flash.text.TextFormat; / ** * @author kreativeKING * / offentlig klasse EIFace1 strekker seg Sprite private var field1: TextField; private var button1: MovieClip; offentlig funksjon 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 = nytt 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 = field1.y + 30; stage.addChild (Button1); button1.addEventListener (MouseEvent.CLICK, sendToJS);  privat funksjon sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); 

           
 
Dette vil bli erstattet med en SWF. Hvis ikke, må du oppdatere Flash Player.
 
 
 
 Tekst fra Flash  
 
  

Åpne nå HTML-omslaget ditt og test det ut. Du ser at verdien av tekstfeltet i flash blir verdien på tekstfeltet i HTML-en. Kort sagt, koden bak dette er ganske enkel og rett frem. La oss nå prøve å sende litt informasjon fra Javascript til ActionScript.

Trinn 15: Lag flere felt

Vi skal lage flere felt for å sende informasjon fra Javascript til ActionScript.

 Send tekst til Flash  

 field2 = nytt 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 = ny TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; field2.y = field1.y - 50; stage.addChild (field2);

Trinn 16: Opprett Javascript til ActionScript-funksjonen

Vi må opprette en funksjon som sender verdien fra vår HTML til Flash. Dette ligner på funksjonen vi opprettet for å sende verdier fra ActionScript til Javascript.

 funksjon sendToFlash (verdi) flashMovie ("EIFace"). sendToFlash (verdi); 

Vi bruker funksjonen vi opprettet tidligere for å referere til den innebygde SWF. Nå må vi gå inn i vår dokumentklasse og sette opp Flash for å motta verdier fra Javascript og opprette en ny funksjon som Javascript skal ringe.

Trinn 17: Legge til tilbakeringinger

For å registrere Javascript-funksjoner må vi legge til tilbakeringinger slik at Flash vet hva vi prøver å sende når vi kaller en ActionScript-funksjon. La oss endelig begynne å ringe noen ActionScript.

 privat funksjon addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS); 

De ExternalInterface.addCallback () funksjonen registrerer en funksjon i ActionScript for å bli kalt av Javascript. Den første parameteren er funksjonsnavnet der Javascript vil kjenne funksjonen. Den andre parameteren er den faktiske funksjonen.

Enkelt sagt, det betyr at i Javascript, vi vil ringe sendToFlash () og det ville påkalle funksjonen fromJS () i ActionScript.

Trinn 18: Opprette fraJS ()

Nå skal vi lage funksjonen fromJS (). Dette er en veldig enkel funksjon som tilordner verdien som sendes til den i tekstfeltet.

 privat funksjon fraJS (verdi: streng): void field2.text = value; 

Tiden for en annen test og se hva vi kommer opp med. Slik ser dokumentklassen og HTML ut akkurat nå:

 pakke import flash.external.ExternalInterface; importer flash.events.MouseEvent; importer flash.display.MovieClip; importer flash.display.Sprite; importer flash.text.TextField; importer flash.text.TextFieldType; importer flash.text.TextFormat; / ** * @author kreativeKING * / offentlig klasse EIFace1 strekker seg Sprite private var field1: TextField; private var button1: MovieClip; private var field2: TextField; offentlig funksjon 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 = nytt TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (field1); field2 = nytt 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 = ny TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; field2.y = field1.y - 50; stage.addChild (field2); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (Button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); addCallbacks ();  privat funksjon addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS);  privat funksjon fraJS (verdi: streng): void field2.text = value;  privat funksjon sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); 

           
 
Dette vil bli erstattet med en SWF. Hvis ikke, må du oppdatere Flash Player.
 
 
 
 Send tekst til Flash   
 
 Tekst fra Flash  
 
  

Trinn 19: Resultater

Som du kan se, plasserer du tekst i vårt nyeste felt og rammer send sender verdien i Flash-tekstfeltet. Bruk av ExternalInterface-klassen er veldig enkel og kan ofte være nyttig når du oppretter APIer og programmer som kan manipuleres utenfor Flash Movie. For eksempel kan dette implementeres i Video Player API for å opprette og kontrollere videoen med Javascript.

Trinn 20: Hvem bruker Classic Javascript Anymore?

For de fleste av folkene der ute nå bruker ingen virkelig klassisk Javascript; jQuery er fremtidens bølge. Her er et eksempel på bruk av jQuery i stedet for klassisk Javascript.

Her er den nye og oppdaterte HTML for bruk med jQuery:

            
 
Dette vil bli erstattet med en SWF. Hvis ikke, må du oppdatere Flash Player.
 
 
 
 Send tekst til Flash   
 
 Tekst fra Flash  
 
  

Konklusjon

Forhåpentligvis har du nå en bedre forståelse av bruk av ExternalInterface Class. Hvis du har noen spørsmål eller ideer om hva annet du vil lære, bare legg igjen en kommentar eller tweet meg, og jeg vil se hva jeg kan gjøre. Jeg håper du lærte konseptene og begynner å bruke dem i dine egne prosjekter. Takk for at du leste!

kreativeKING