Share
ActionScript en JavaScript. Beide talen zijn geweldig op zichzelf, maar heb je je ooit afgevraagd wat je zou kunnen doen als ze met elkaar zouden kunnen praten? Nou, je hebt geluk! Dat is waar de ExternalInterface Class in beeld komt. Volg mij terwijl ik je de basis leer.
Foto door Dave Spellman.
Momenteel is de ExternalInterface Class beschikbaar in de volgende browsers:
Met de klasse ExternalInterface kunt u:
We zullen hier meteen op ingaan en beginnen met een heel eenvoudig voorbeeld. Eerst moeten we onze HTML-pagina maken, dus start uw favoriete HTML-editor op en laten we beginnen. Maak een formulier in uw HTML.
Externe interfacetest 1
Om gemakkelijk naar de SWF te verwijzen in onze HTML, gaan we een Javascript-functie maken, zodat we in onze code naar de SWF kunnen verwijzen. Om dit te bereiken, plaatst u dit script tussen de "head" -tags.
Deze functie retourneert de SWF die is doorgegeven als een parameter van de functie flashMovie (). Bijvoorbeeld: "flashMovie ('testMovie');" zou de swf retourneren met een id van 'testMovie'.
Nu maken we een Javascript-functie die een waarde uit ActionScript accepteert. Plaats dit in ons reeds gemaakte script
labels.
functie sendToJS (waarde) document.forms ["myForm"]. output.value = waarde;
Dit zal de waarde aannemen die we van de ActionScript krijgen en deze in ons tekstveld plaatsen met een id van "output".
Laten we Flash openen en gaan werken aan de ActionScript-code. Maak een nieuw ActionScript 3.0-bestand en maak een nieuwe documentklasse met de naam "EIFace1".
Ik zal FDT gebruiken om EIFace.as te schrijven, maar u kunt elke ActionScript-editor gebruiken waar u zich prettig bij voelt. We beginnen met het maken van een standaard documentklasse-shell.
pakket import flash.display.Sprite; / ** * @author kreativeKING * / openbare klasse EIFace1 breidt Sprite uit openbare functie EIFace1 ()
Maak het tekstveld dat we zullen gebruiken om onze waarden te verzenden.
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 (veld1); Maak een knop om te klikken. Ik ben geen voorstander van het gebruik van componenten, dus ik zal vanaf nul een nieuwe knop bouwen met behulp van Flash IDE. U kunt gewoon een box maken of de component SimpleButton gebruiken; Ik zal je die creatieve sappen laten gebruiken. Als u geen verdere hulp nodig hebt bij het bouwen van een knop, kunt u doorgaan naar stap 11.
Begin met het maken van een rechthoek met het Rechthoekige primitieve gereedschap. Ik zal geen specifieke waarden geven, ik voel het gewoon om je te asetting.
Converteer de rechthoek in een MovieClip.
Maak een nieuwe laag in de MovieClip en plaats de tekst "Send To JS".
Ga naar uw bibliotheek, klik met de rechtermuisknop op de knop en exporteer voor ActionScript.
We gaan onze knop coderen in onze documentklasse.
button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1);
Dit is hoe uw HTML-pagina nu zou moeten verschijnen.
Externe interfacetest 1
De documentklasse zou er als volgt uit moeten zien.
pakket import flash.display.MovieClip; import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; / ** * @author kreativeKING * / openbare klasse EIFace1 breidt Sprite uit private var field1: TextField; privé var-knop 1: MovieClip; openbare functie 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 (veld1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1); We moeten nu de functie maken die de gegevens van Flash naar Javascript verzendt. Dit zal een eenvoudige functie zijn die verzendt
Een touwtje.
button1.addEventListener (MouseEvent.CLICK, sendToJS); private function sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); We voegen eerst een gebeurtenislistener toe aan onze knop in onze constructeur Documentklassen. Dan creëren we onze luisteraar. De ExternalInterface.available propertychecks om te zien of onze browser de ExternalInterface Class kan gebruiken. Dit is niet nodig om te gebruiken, omdat we weten dat onze browser dit kan ondersteunen, maar het is een goede gewoonte om te ontwikkelen voor internet en we weten nooit zeker of de browser van de client compatibel zal zijn.
De ExternalInterface.call () functie is wat we gebruiken om onze Javascript-functie te gebruiken. De eerste parameter is de naam van de Javascript-functie die we willen bellen. Het is de naam van onze functie in Javascript als een tekenreeks. De tweede parameter is de waarde die we willen doorgeven aan de Javascript-functie. In dit geval geven we de waarde van ons tekstveld door.
Opmerking: u kunt zoveel parameters doorgeven als u wilt, maar de eerste parameter moet de naam van de Javascript-functie zijn.
Voordat we kunnen testen, moeten we eerst onze SWF in de HTML insluiten. Ik moet benadrukken dat het het beste is om SWFObject te gebruiken en niet de standaardmethode die Flash gebruikt om SWF-bestanden in te sluiten. Laten we onze SWF publiceren, SWFObject instellen en ons bestand insluiten.
Hier is de SWFObject-insluitcode die in het hoofd van het HTML-bestand wordt geplaatst:
Het is ook belangrijk dat u de SWF een ID geeft. Dit is belangrijk bij het gebruik van de ExternalInterface en voor ons om het te targeten met behulp van de Javascript-functie die we eerder hebben gemaakt. Laten we onze div maken die het SWF-bestand zal bevatten.
Dit wordt vervangen door een SWF. Zo niet, dan moet je je Flash Player updaten.
Hier zijn de documentklasse en het HTML-bestand tot nu toe:
pakket 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 * / openbare klasse EIFace1 breidt Sprite uit private var field1: TextField; privé var-knop 1: MovieClip; openbare functie 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 (veld1); button1 = new SendButton (); button1.x = stage.stageWidth * .5 - button1.width * .5; button1.y = field1.y + 30; stage.addChild (button1); button1.addEventListener (MouseEvent.CLICK, sendToJS); private functie sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); Externe interfacetest 1 Dit wordt vervangen door een SWF. Zo niet, dan moet je je Flash Player updaten.
Open nu uw HTML-wrapper en test deze. U ziet dat de waarde van het tekstveld in Flash de waarde op het tekstveld wordt in onze HTML. In één oogopslag is de code hierachter vrij eenvoudig en rechttoe rechtaan. Laten we nu eens wat informatie van Javascript naar ActionScript verzenden.
We gaan extra velden maken om informatie van JavaScript naar ActionScript te verzenden.
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 (veld2); We moeten een functie maken die de waarde van onze HTML naar Flash verzendt. Dit is vergelijkbaar met de functie die we hebben gemaakt om waarden van ActionScript naar JavaScript te verzenden.
functie sendToFlash (waarde) flashMovie ("EIFace"). sendToFlash (waarde); We gebruiken de functie die we eerder hebben gemaakt om naar de ingesloten SWF te verwijzen. Nu moeten we naar onze documentklasse gaan en Flash instellen om waarden uit Javascript te ontvangen en een nieuwe functie te maken die door Javascript wordt aangeroepen.
Om Javascript-functies te registreren, moeten we callbacks toevoegen zodat Flash weet wat we proberen te verzenden wanneer we een ActionScript-functie aanroepen. Laten we eindelijk eens wat ActionScript gaan noemen.
private function addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS); De ExternalInterface.addCallback () functie registreert een functie in ActionScript die door JavaScript moet worden aangeroepen. De eerste parameter is de functienaam waarmee Javascript de functie zal kennen. De tweede parameter is de eigenlijke functie.
Simpel gezegd, dat betekent in onze Javascript, we zouden sendToFlash () noemen en dat zou de functie fromJS () in ActionScript aanroepen.
Nu gaan we de fromJS () functie maken. Dit is een zeer eenvoudige functie die de waarde die aan de tekst is doorgegeven, aan het tekstveld toewijst.
private function fromJS (value: String): void field2.text = value;
Tijd voor een nieuwe test en zie wat we verzinnen. Dit is hoe de documentklasse en HTML er nu uitzien:
pakket 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 * / openbare klasse EIFace1 breidt Sprite uit private var field1: TextField; privé var-knop 1: MovieClip; private var field2: TextField; openbare functie 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 (veld1); 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 (veld2); 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 (); private function addCallbacks (): void if (ExternalInterface.available) ExternalInterface.addCallback ("sendToFlash", fromJS); private function fromJS (value: String): void field2.text = value; private functie sendToJS (e: MouseEvent): void if (ExternalInterface.available) ExternalInterface.call ("fromAS", field1.text); Externe interfacetest 1 Dit wordt vervangen door een SWF. Zo niet, dan moet je je Flash Player updaten.
Zoals u kunt zien, wordt door het plaatsen van tekst in ons nieuwste veld en het verzenden van verzenden de waarde naar het Flash-tekstveld verzonden. Het gebruik van de klasse ExternalInterface is heel eenvoudig en kan vaak van pas komen bij het maken van API's en toepassingen die buiten de Flash Movie kunnen worden gemanipuleerd. Dit kan bijvoorbeeld worden geïmplementeerd in Video Player API's voor het maken en besturen van de video met Javascript.
Voor de meeste mensen die er nu zijn, maakt niemand echt gebruik van klassiek Javascript; jQuery is de golf van de toekomst. Hier is een voorbeeld van het gebruik van jQuery in plaats van klassiek Javascript.
Hier is de nieuwe en bijgewerkte HTML voor gebruik met jQuery:
Externe interfacetest 1 Dit wordt vervangen door een SWF. Zo niet, dan moet je je Flash Player updaten.
Hopelijk heb je nu een beter begrip van het gebruik van de ExternalInterface Class. Als je vragen of ideeën hebt over wat je nog meer zou willen leren, laat dan een reactie achter of tweet me en ik zal zien wat ik kan doen. Ik hoop dat je de concepten hebt geleerd en ze gaat gebruiken in je eigen projecten. Bedankt voor het lezen!
kreativeKING
