Javascript og Action Converse: Introduksjon til ExternalInterface
Del
Del
en
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Actionscript og Javascript. Begge disse språkene er stor på egen hånd, men har du noen gang lurt på hva du kan gjøre hvis de kunne snakke med hverandre? Vel du er på hell! Det er der den ExternalInterface Klasse kommer inn i bildet. Følg meg som jeg lære deg det grunnleggende
Foto: Dave Spellman
Trinn 1:.. Den ExternalInterface Class Anmeldelser
Hvor kan jeg bruke det
Foreløpig ExternalInterface Class er 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?
ExternalInterface Class kan du:...
Ring en Javascript-funksjonen fra Action
Ring noen Action funksjon fra Javascript
Pass argumenter og paramters mellom de to
Motta en returverdi fra en Javascript-funksjon
Retur en verdi til en Javascript-funksjon
Trinn 2:.. La oss lage vår HTML-side
Vi vil hoppe rett inn i dette og starte med en veldig grunnleggende eksempel. Først må vi lage vår HTML-side, så fyre opp din favoritt HTML Editor og la oss starte. Lag en form inni HTML
. ≪! DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd "> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text /html; charset = UTF-8" /> < title > ExternalInterface Test 1 < /title > < /head > < body > < div id = "testArea" > < form name = "MyForm" > < for = "output" > label; Tekst fra Flash < /label > < input type = "text" id = "output" name = "output" value = "" /> < /skjema > < /div > < /body > < /html >
Trinn 3: SWF Referencing Funksjon
For enkelt å referere til SWF i vår HTML, vi kommer til å lage en Javascript-funksjonen slik at vi kan referere til SWF i koden vår. For å oppnå dette, legger dette skriptet mellom "hodet" tags
. ≪ script type = "text /javascript" > funksjon Flashmovie (movieName) {if (window.document [movieName]) {return window.document [movieName]; } Else {return document.getElementById (movieName); }} ≪ /script >
Denne funksjonen vil returnere SWF som er gått som en parameter av Flashmovie () -funksjonen. For eksempel "Flashmovie ('testMovie');" ville returnere swf med en id av "testMovie '
Trinn 4:. Lag funksjon for å hente verdier fra Action
Nå skal vi lage en Javascript-funksjon som aksepterer en verdi fra Actionscript. .. Plassere denne inne i vårt allerede gjort skript
tags
funksjons sendToJS (verdi) {document.forms ["MyForm"] output.value = verdi; }
Dette vil ta den verdien vi får fra Action og legg den i vår tekstfeltet med en id av "output"
Trinn 5:. Åpne opp Flash
La oss åpne opp Flash og begynne å jobbe på Actionscript. Opprett en ny Actionscript 3.0 File og opprette et nytt dokument klasse som heter "EIFace1"
Trinn 6:. Oppsett Dokument Class
Jeg skal bruke FDT å skrive EIFace.as, men du er velkommen til å bruke noen Actionscript Editor du føler deg komfortabel med. Vi vil starte med å lage en standard Document Class Shell
pakke {import flash.display.Sprite.; /** *author KreativeKING * /public class EIFace1 strekker Sprite {offentlig funksjon EIFace1 () {}}}
Trinn 7: Opprette Vår Textfield
Opprett tekstfeltet vi skal bruke til å sende vår 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 = new tekstformat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * 0,5 - field1.width * 0,5; field1.y = stage.stageHeight * .5- field1.height * 0,5; stage.addChild (field1);
Trinn 8: Opprett en Send-knapp
Lag en knapp til å klikke. Jeg er ikke fan av å bruke komponenter, så jeg vil være å bygge en knapp fra grunnen av ved hjelp av Flash IDE. Du er velkommen til å bare lage en boks eller bruke Simple komponenten; Jeg skal la deg bruke de kreative juice. Hvis du trenger ingen ytterligere hjelp med å bygge en knapp, kan du hoppe til trinn 11.
Start med å lage et rektangel med rektangel Primitive Tool. Jeg vil ikke gi spesifikke verdier, bare føler det ut til asetting du liker
Trinn 9:.. Fortsett Button Creation
Konverter rektangelet inn en MovieClip
Opprett et nytt lag inne i MovieClip og sted "Send til JS" tekst
Trinn 10:.. Export For Action
Gå inn i biblioteket ditt, høyreklikker du på knappen og eksport for Action
Trinn 11: Kode i knappe
Vi kommer til å kode vår knappen inn i vårt dokument Class
Button1 = new SendButton ();. button1.x = stage.stageWidth * 0,5 - button1.width * 0,5; button1.y = field1.y + 30; stage.addChild (Button1);
Trinn 12:.! Hvor er vi nå
Dette er hvordan HTML-siden skal nå vises
<! DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Strict //EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text /html; charset = UTF-8" /> < title > ExternalInterface Test 1 < /title > < script type = "text /javascript" > funksjon Flashmovie (movieName) {if (window.document [movieName]) {return window.document [movieName]; } Else {return document.getElementById (movieName); .}} Funksjons fromAS (verdi) {document.forms ["MyForm"] output.value = verdi; } ≪ /script > < /head > < body > < div id = "testArea" > < form name = "MyForm" > < for = "output" > label; Tekst fra Flash < /label > < input type = "text" id = "output" name = "output" value = "" /> < /skjema > < /div > < /body > < /html >
The Document klasse skal se slik ut
pakke {import flash.display.MovieClip.; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; /** *author KreativeKING * /public class EIFace1 strekker 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 = new tekstformat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * 0,5 - field1.width * 0,5; field1.y = stage.stageHeight * .5- field1.height * 0,5; stage.addChild (field1); Button1 = new SendButton (); button1.x = stage.stageWidth * 0,5 - button1.width * 0,5; button1.y = field1.y + 30; stage.addChild (Button1); }}}
Trinn 13: Lag Action til Javascript-funksjonen
Vi trenger nå å skape den funksjonen som sender data fra Flash til Javascript. Dette vil være en enkel funksjon som sender
en streng
button1.addEventListener (MouseEvent.CLICK, sendToJS.); private funksjons sendToJS (e: MouseEvent): void {if (ExternalInterface.available) {ExternalInterface.call ("fromAS", field1.text); }}
Vi først legge til en hendelse lytteren til vår knappen inne i vårt dokument Classes konstruktør. Da skaper vi vår lytteren. ExternalInterface.available ExternalInterface.call () Merk:. Du kan sende så mange parametere som du vil, men den første parameteren må være navnet på Javascript-funksjonen Før vi kan teste, må vi først til å legge ned vår SWF inn i HTML. Jeg må understreke at det er best å bruke SWFObject og ikke standardmetode som Flash bruker å legge ned SWF-filer. La oss publisere vårt SWF, oppsett SWFObject og legge vår fil Her er SWFObject Embed koden som går inn i hodet av HTML-filen. Det er også viktig at du gir SWF en id. Dette er viktig med hjelp av ExternalInterface og for oss å målrette den ved hjelp av Javascript-funksjonen vi opprettet tidligere. La oss lage vår div som skal huse SWF-fil Her er dokument klasse og HTML-filen opp til dette punktet: Nå åpner opp HTML wrapper og teste det ut. Du vil se at verdien av tekstfeltet i flash blir verdien på tekstfeltet i vår HTML. På et øyeblikk, koden bak dette er ganske enkel og rett frem. La oss nå prøve å sende litt informasjon fra Javascript Action Vi kommer til å lage flere felt for å sende informasjon fra Javascript Action Vi må lage en funksjon som sender verdien fra innsiden vår HTML til Flash. Dette ligner på den funksjonen vi opprettet for å sende verdier fra Action til Javascript Vi bruker funksjonen vi opprettet tidligere for å referere til den innebygde SWF. Nå må vi gå inn i vårt dokument klasse og sette opp Flash for å motta verdier fra Javascript og opprette en ny funksjon som Javascript skal ringe For å registrere Javascript-funksjoner, vi må legge til callbacks slik at Flash vet hva vi prøver å sende når vi kaller en Actionscript-funksjonen. La oss endelig begynne å ringe noen Action ExternalInterface.addCallback () Enkelt sagt, det betyr i vår Javascript, ville vi kalle sendToFlash () og som ville påberope seg fromJS () -funksjonen i Action Nå skal vi lage fromJS () -funksjonen. Dette er en veldig enkel funksjon som vil tildele verdien gått til det i tekstfeltet Tid for en annen test og se hva vi kommer opp med. Her er hva dokument klasse og HTML se ut nå: Som du kan se, plassere tekst i vårt nyeste feltet og treffer send sender verdien inn i Flash tekstfeltet. Bruke ExternalInterface klassen er svært enkel og kan ofte komme godt med når du oppretter API-er og applikasjoner som kan manipuleres utsiden av Flash Movie. For eksempel kan dette bli implementert i Video Player API-er for å skape og styring av video med Javascript For de fleste av folk der ute nå, ingen er virkelig bruker klassisk Javascript; jQuery er bølgen av fremtiden. Her er et eksempel på bruk av jQuery i stedet for klassisk Javascript Her er den nye og oppdaterte HTML for bruk med jQuery: Forhåpentligvis har du nå en bedre forståelse om hvordan du bruker ExternalInterface Class. Hvis du har spørsmål eller ideer om hva annet du ønsker å lære, bare legge igjen en kommentar eller tweet meg, og jeg skal se hva jeg kan gjøre. Jeg håper du har lært begrepene og begynner å bruke dem i dine egne prosjekter. Takk for lesing! kreativeKING Anmeldelser
eiendoms sjekker for å se om nettleseren vår er i stand til å bruke ExternalInterface Class. Dette er ikke nødvendig å bruke som vi kjenner vår nettleser kan støtte det, men det er god praksis for å utvikle for web og vi er aldri sikker på om kundens nettleser skal becompatible.
funksjon er det vi bruker å ringe vår Javascript-funksjonen. Den første parameteren er navnet på Javascript-funksjonen vi ønsker å ringe. Det er navnet på vår funksjon i Javascript som en streng. Den andre parameteren er verdien vi ønsker å passere til Javascript-funksjonen. I dette tilfellet, vi passerer verdien av vår tekstfeltet
<. h2> Trinn 14: Testing Tid
≪ script type = "text /javascript" src = "http : //ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js "> < /script > < script type = "text /javascript" > Var FlashVars = {}; Var params = {}; params.allowscriptaccess = "alltid"; params.allownetworking = "alt"; Var attributter = {}; attributes.id = "EIFace"; swfobject.embedSWF ("EIFace.swf", "flashDiv", "350", "200", "9.0.0", falske, FlashVars, params, attributter); < /script >
. ≪ div id = "flashDiv" > < p > Dette vil bli erstattet med en SWF. Hvis ikke du trenger å oppdatere Flash Player. ≪ /p > < /div >
pakke {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 class EIFace1 strekker 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 = new tekstformat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * 0,5 - field1.width * 0,5; field1.y = stage.stageHeight * .5- field1.height * 0,5; stage.addChild (field1); Button1 = new SendButton (); button1.x = stage.stageWidth * 0,5 - button1.width * 0,5; button1.y = field1.y + 30; stage.addChild (Button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); } Private funksjon sendToJS (e: MouseEvent): void {if (ExternalInterface.available) {ExternalInterface.call ("fromAS", field1.text); }}}} ≪! DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!; < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text /html; charset = UTF-8" /> < title > ExternalInterface Test 1 < /title > < script type = "text /javascript" src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" > < /script > < script type = "text /javascript" > Var FlashVars = {}; Var params = {}; params.allowscriptaccess = "alltid"; params.allownetworking = "alt"; Var attributter = {}; attributes.id = "EIFace"; swfobject.embedSWF ("EIFace.swf", "flashDiv", "350", "200", "9.0.0", falske, FlashVars, params, attributter); < /script > < script type = "text /javascript" > funksjon Flashmovie (movieName) {if (window.document [movieName]) {return window.document [movieName]; } Else {return document.getElementById (movieName); .}} Funksjons fromAS (verdi) {document.forms ["MyForm"] output.value = verdi; } ≪ /script > < /head > < body > < div id = "flashDiv" > < p > Dette vil bli erstattet med en SWF. Hvis ikke du trenger å oppdatere Flash Player. ≪ /p > < /div > < div id = "testArea" > < form name = "MyForm" > < for = "output" > label; Tekst fra Flash < /label > < input type = "text" id = "output" name = "output" value = "" /> < /skjema > < /div > < /body > < /html >
Trinn 15:.. Gjør Andre Fields
< for = "input" > label; Send tekst til Flash < /label > < input type = "text" id = "input" name = "input" value = "" /> < input type = "button" value = "SendToFlash" onclick = "sendToFlash (myForm.input.value);" /> 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 tekstformat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * 0,5 - field2.width * 0,5; field2.y = field1.y - 50; stage.addChild (field2);
Trinn 16: Lag The Javascript Action Function
funksjon sendToFlash (verdi) {Flashmovie ("EIFace") sendToFlash (verdi)..; }
Trinn 17:. Legge tilbakering
privat funksjons addCallbacks (): void {if (ExternalInterface.available) {ExternalInterface.addCallback ("sendToFlash", fromJS);. }}
funksjonen registrerer en funksjon i Action å bli oppringt av Javascript. Den første parameteren er funksjonen navn som Javascript vil vite funksjonen. . Den andre parameteren er den faktiske funksjon
Trinn 18.: Opprette fromJS ()
privat funksjons fromJS (verdi: String):. Void {field2.text = verdi; }
pakke {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 class EIFace1 strekker 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 = new tekstformat ("Arial", 14, 0xEFEFEF); field1.x = stage.stageWidth * 0,5 - field1.width * 0,5; field1.y = stage.stageHeight * .5- field1.height * 0,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 tekstformat ("Arial", 14, 0x121212); field2.x = stage.stageWidth * 0,5 - field2.width * 0,5; field2.y = field1.y - 50; stage.addChild (field2); Button1 = new SendButton (); button1.x = stage.stageWidth * 0,5 - button1.width * 0,5; button1.y = field1.y + 30; stage.addChild (Button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); addCallbacks (); } Private funksjon addCallbacks (): void {if (ExternalInterface.available) {ExternalInterface.addCallback ("sendToFlash", fromJS); }} Private funksjons fromJS (verdi: String): void {field2.text = verdi; } Private funksjon sendToJS (e: MouseEvent): void {if (ExternalInterface.available) {ExternalInterface.call ("fromAS", field1.text); }}}} ≪! DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!; < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text /html; charset = UTF-8" /> < title > ExternalInterface Test 1 < /title > < script type = "text /javascript" src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" > < /script > < script type = "text /javascript" > Var FlashVars = {}; Var params = {}; params.allowscriptaccess = "alltid"; params.allownetworking = "alt"; Var attributter = {}; attributes.id = "EIFace"; swfobject.embedSWF ("EIFace.swf", "flashDiv", "350", "200", "9.0.0", falske, FlashVars, params, attributter); < /script > < script type = "text /javascript" > funksjon Flashmovie (movieName) {if (window.document [movieName]) {return window.document [movieName]; } Else {return document.getElementById (movieName); .}} Funksjons fromAS (verdi) {document.forms ["MyForm"] output.value = verdi; } Funksjon sendToFlash (verdi) {Flashmovie ("EIFace") sendToFlash (verdi).; } ≪ /script > < /head > < body > < div id = "flashDiv" > < p > Dette vil bli erstattet med en SWF. Hvis ikke du trenger å oppdatere Flash Player. ≪ /p > < /div > < div id = "testArea" > < form name = "MyForm" > < for = "input" > label; Send tekst til Flash < /label > < input type = "text" id = "input" name = "input" value = "" /> < input type = "button" value = "SendToFlash" onclick = "sendToFlash (myForm.input.value);" /> < br /> < br /> < for = "output" > label; Tekst fra Flash < /label > < input type = "text" id = "output" name = "output" value = "" /> < /skjema > < /div > < /body > < /html >
Trinn 19: Resultater
Trinn 20:.? Hvem bruker Javascript Classic Anymore
. ≪ script type = "text /javascript" > $ (Function () {$ ('# sendToFlash'). Klikk (function () {if ($ ('# EIFace') [0]) {$ ('# EIFace') [0] .sendToFlash ($ (' #input '.) val ());} else {$ (' # EIFace ') sendToFlash ($ (.' # inngang ') val ());.}});}); funksjons fromAS (verdi) {$ ('# output') val (verdi).; } ≪ /script >
<! DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Strict //EN" "http: //www! .w3.org /TR /XHTML1 /DTD /XHTML1-strict.dtd "> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text /html; charset = UTF-8" /> < title > ExternalInterface Test 1 < /title > < script type = "text /javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" > < /script > < script type = "text /javascript" src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" > < /script > < script type = "text /javascript" > Var FlashVars = {}; Var params = {}; params.allowscriptaccess = "alltid"; params.allownetworking = "alt"; Var attributter = {}; attributes.id = "EIFace"; swfobject.embedSWF ("EIFace.swf", "flashDiv", "350", "200", "9.0.0", falske, FlashVars, params, attributter); < /script > < script type = "text /javascript" > $ (Function () {$ ('# sendToFlash'). Klikk (function () {if ($ ('# EIFace') [0]) {$ ('# EIFace') [0] .sendToFlash ($ (' #input '.) val ());} else {$ (' # EIFace ') sendToFlash ($ (.' # inngang ') val ());.}});}); funksjons fromAS (verdi) {$ ('# output') val (verdi).; } ≪ /script > < /head > < body > < div id = "flashDiv" > < p > Dette vil bli erstattet med en SWF. Hvis ikke du trenger å oppdatere Flash Player. ≪ /p > < /div > < div id = "testArea" > < form name = "MyForm" > < for = "input" > label; Send tekst til Flash < /label > < input type = "text" id = "input" name = "input" value = "" /> < input type = "button" id = "sendToFlash" value = "SendToFlash" /> < br /> < br /> < for = "output" > label; Tekst fra Flash < /label > < input type = "text" id = "output" name = "output" value = "" /> < /skjema > < /div > < /body > < /html >
Konklusjon