Share
ActionScript och Javascript. Båda dessa språk är stora på egen hand, men har du någonsin undrat vad du kan göra om de kunde prata med varandra? Tja, du har tur! Det är där ExternalInterface Class kommer in i bilden. Följ mig när jag lär dig grunderna.
Foto av Dave Spellman.
För närvarande är Externinterface klassen tillgänglig i följande webbläsare:
Externinterface klassen tillåter dig att:
Vi hoppar precis in i detta och börjar med ett riktigt grundläggande exempel. Först måste vi skapa vår HTML-sida, så skjut upp din favorit HTML Editor och låt oss börja. Skapa en blankett i din HTML.
ExternalInterface Test 1
För att lätt hänvisa till SWF i vår HTML, kommer vi att skapa en Javascript-funktion så att vi kan referera till SWF i vår kod. För att uppnå detta, placera det här skriptet mellan "huvud" -taggarna.
Den här funktionen returnerar den SWF som överförs som en parameter för funktionen flashMovie (). Till exempel "flashmovie (" testmovie ");" skulle returnera swf med ett ID av "testmovie".
Nu skapar vi en Javascript-funktion som accepterar ett värde från ActionScript. Placera detta i vårt redan gjorda skript
taggar.
funktion sendToJS (värde) document.forms ["myForm"]. output.value = value;
Detta kommer att ta det värde vi får från ActionScript och placera det i vårt textfält med ett ID för "output".
Låt oss öppna Flash och börja arbeta med ActionScript. Skapa en ny ActionScript 3.0-fil och skapa en ny dokumentklass med namnet "EIFace1".
Jag använder FDT för att skriva EIFace.as, men du är välkommen att använda vilken ActionScript Editor du känner dig bekväm med. Vi börjar med att skapa ett standard Document Class Shell.
paket import flash.display.Sprite; / ** * @author kreativeKING * / public class EIFace1 utökar Sprite public function EIFace1 ()
Skapa det textfält vi ska använda för att skicka våra värden.
Accentsconagua
field1 = new TextField (); field1.type = TextFieldType.INPUT; fält1.width = 300; fält1.höjd = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = ny TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (fält1); Skapa en knapp för att klicka. Jag är inte en fan av att använda komponenter, så jag bygger en knapp från början med Flash IDE. Du är välkommen att bara skapa en ruta eller använda SimpleButton-komponenten; Jag låter dig använda dessa kreativa juicer. Om du inte behöver hjälp med att bygga en knapp, kan du gå vidare till steg 11.
Börja med att skapa en rektangel med Primitive Tool Rectangle. Jag kommer inte att ge specifika värden, bara känna att det är så att du gillar det.
Konvertera rektangeln till en MovieClip.
Skapa ett nytt lager i MovieClip och placera "Skicka till JS" -texten.
Gå in i ditt bibliotek, högerklicka på knappen och exportera till ActionScript.
Vi ska koda vår knapp i vår dokumentklass.
button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1);
Så här ska din HTML-sida nu visas.
ExternalInterface Test 1
Dokumentklassen ska se ut så här.
paket import flash.display.MovieClip; importera flash.display.Sprite; importera flash.text.TextField; importera flash.text.TextFieldType; importera flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 utökar Sprite private var field1: TextField; privat var-knapp1: MovieClip; offentlig funktion EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; fält1.width = 300; fält1.höjd = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = ny TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (fält1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1); Vi behöver nu skapa den funktion som skickar data från Flash till Javascript. Detta kommer att vara en enkel funktion som skickar
en sträng.
button1.addEventListener (MouseEvent.CLICK, sendToJS); privat funktion sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); Vi lägger först till en händelselytt till vår knapp, inne i vår Document Classes-konstruktör. Då skapar vi vår lyssnare. De ExternalInterface.available egenskapskontroller för att se om vår webbläsare kan använda ExternalInterface Class. Det här är inte nödvändigt att använda eftersom vi vet att vår webbläsare kan stödja den, men det är bra att utveckla för webben och vi är aldrig säkra på om klientens webbläsare kommer att bli kompatibel.
De ExternalInterface.call () funktionen är vad vi använder för att ringa vår Javascript-funktion. Den första parametern är namnet på Javascript-funktionen vi vill ringa. Det är namnet på vår funktion i Javascript som en sträng. Den andra parametern är det värde vi vill överföra till Javascript-funktionen. I det här fallet passerar vi värdet av vårt textfält.
Obs! Du kan skicka så många parametrar som du vill, men den första parametern måste vara namnet på Javascript-funktionen.
Innan vi kan testa måste vi först bädda in vår SWF i HTML. Jag måste betona att det är bäst att använda SWFObject och inte den standardmetod som Flash använder för att integrera SWF-filer. Låt oss publicera vår SWF, konfigurera SWFObject och bädda in filen.
Här är SWFObject Embed-koden som går in i huvudet av HTML-filen:
Det är också viktigt att du ger SWF ett id. Det här är viktigt med hjälp av ExternalInterface och för oss att rikta in det med hjälp av Javascript-funktionen som vi skapade tidigare. Låt oss skapa vår div som kommer att rymma SWF-filen.
Detta kommer att ersättas med en SWF. Om inte behöver du uppdatera din Flash Player.
Här är dokumentklassen och HTML-filen upp till denna punkt:
paket importera flash.external.ExternalInterface; importera flash.events.MouseEvent; importera flash.display.MovieClip; importera flash.display.Sprite; importera flash.text.TextField; importera flash.text.TextFieldType; importera flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 utökar Sprite private var field1: TextField; privat var-knapp1: MovieClip; offentlig funktion EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; fält1.width = 300; fält1.höjd = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = ny TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (fält1); 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 funktion sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); ExternalInterface Test 1 Detta kommer att ersättas med en SWF. Om inte behöver du uppdatera din Flash Player.
Öppna nu ditt HTML-inslag och testa det. Du ser att värdet på textfältet i blixt blir värdet på textfältet i vår HTML. I ett ögonblick är koden bakom denna ganska enkel och rakt framåt. Låt oss nu försöka skicka information från Javascript till ActionScript.
Vi ska skapa ytterligare fält för att skicka information från Javascript till 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 = nytt TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; field2.y = field1.y - 50; stage.addChild (fält2); Vi måste skapa en funktion som skickar värdet från vår HTML till Flash. Detta liknar den funktion som vi skapade för att skicka värden från ActionScript till Javascript.
funktion sendToFlash (värde) flashMovie ("EIFace"). sendToFlash (värde); Vi använder den funktion som vi skapade tidigare för att referera till den inbäddade SWF. Nu måste vi gå in i vår dokumentklass och skapa Flash för att ta emot värden från Javascript och skapa en ny funktion som Javascript kommer att ringa.
För att registrera Javascript-funktioner måste vi lägga till återuppringningar så att Flash vet vad vi försöker skicka när vi kallar en ActionScript-funktion. Låt oss äntligen börja ringa lite ActionScript.
privat funktion addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS); De ExternalInterface.addCallback () funktionen registrerar en funktion i ActionScript som ska kallas av Javascript. Den första parametern är funktionsnamnet genom vilket Javascript kommer att känna till funktionen. Den andra parametern är den faktiska funktionen.
Enkelt uttryckt, det betyder i vår Javascript, vi skulle kalla sendToFlash () och det skulle anropa funktionen fromJS () i ActionScript.
Nu ska vi skapa funktionen fromJS (). Det här är en mycket enkel funktion som tilldelar värdet som skickas till det till textfältet.
privat funktion frånJS (värde: String): void field2.text = value;
Tiden för ett annat test och se vad vi gör med. Så här ser dokumentklassen och HTML ut nu:
paket importera flash.external.ExternalInterface; importera flash.events.MouseEvent; importera flash.display.MovieClip; importera flash.display.Sprite; importera flash.text.TextField; importera flash.text.TextFieldType; importera flash.text.TextFormat; / ** * @author kreativeKING * / public class EIFace1 utökar Sprite private var field1: TextField; privat var-knapp1: MovieClip; privat var field2: TextField; offentlig funktion EIFace1 () field1 = new TextField (); field1.type = TextFieldType.INPUT; fält1.width = 300; fält1.höjd = 20; field1.border = true; field1.borderColor = 0x565656; field1.background = true; field1.backgroundColor = 0x121212; field1.defaultTextFormat = ny TextFormat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * .5 - field1.width * .5; field1.y = stage.stageHeight * .5- field1.height * .5; stage.addChild (fält1); 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 = nytt TextFormat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * .5 - field2.width * .5; field2.y = field1.y - 50; stage.addChild (fält2); 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 funktion addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS); privat funktion frånJS (värde: String): void field2.text = value; privat funktion sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); ExternalInterface Test 1 Detta kommer att ersättas med en SWF. Om inte behöver du uppdatera din Flash Player.
Som du kan se placerar du text i vårt senaste fält och slår sänds värdet i Flash-textfältet. Att använda klassen ExternalInterface är mycket enkel och kan ofta vara till nytta när du skapar API och program som kan manipuleras utanför Flash Movie. Till exempel kan detta implementeras i Video Player API för att skapa och styra videon med Javascript.
För de flesta människor där ute, använder ingen verkligen klassisk Javascript; jQuery är framtidsvågan. Här är ett exempel på att använda jQuery istället för klassiska Javascript.
Här är den nya och uppdaterade HTML för användning med jQuery:
ExternalInterface Test 1 Detta kommer att ersättas med en SWF. Om inte behöver du uppdatera din Flash Player.
Förhoppningsvis har du nu bättre grepp om att använda ExternalInterface Class. Om du har några frågor eller idéer om vad du annars vill lära dig, lämna bara en kommentar eller tweet mig och jag ser vad jag kan göra. Jag hoppas att du lärde dig begreppen och börjar använda dem i dina egna projekt. Tack för att du läser!
kreativeKING
