Thursday 10 September 2009

Javascript and ActionScript Converse: Introduction to ExternalInterface

Author: Tut-Designer | Posted at: 11:18 | Filed Under: , , |

Step 1: The ExternalInterface Class

Where Can I Use it?

Currently the ExternalInterface Class is available in the following browsers:

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

What Can I do With it?

The ExternalInterface Class allows you to:

  • Call any Javascript function from ActionScript.
  • Call any ActionScript function from Javascript.
  • Pass arguments and paramters between the two.
  • Receive a return value from a Javascript function.
  • Return a value to a Javascript function.

Step 2: Let's Create Our HTML Page

We'll jump right into this and start with a really basic example. First we need to create our HTML Page, so fire up your favorite HTML Editor and let's start. Create a form inside your HTML.

view plaincopy to clipboardprint?
  1. >
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>ExternalInterface Test 1title>
  6. head>

  8. <body>
  9. <div id="testArea">
  10. <form name="myForm">
  11. <label for="output">Text from Flashlabel>
  12. <input type="text" id="output" name="output" value="" />
  13. form>
  14. div>
  15. body>
  16. html>

Step 3: SWF Referencing Function

To easily reference the SWF in our HTML, we're going to create a Javascript function so that we can reference the SWF in our code. To accomplish this, place this script between the "head" tags.

view plaincopy to clipboardprint?

This function will return the SWF that is passed as a parameter of the flashMovie() function. For example, "flashMovie('testMovie');" would return the swf with an id of 'testMovie'.

Step 4: Create Function to Receive Values From ActionScript

Now we'll create a Javascript function which accepts a value from ActionScript. Place this inside our already made script tags.

view plaincopy to clipboardprint?
  1. function sendToJS(value)
  2. {
  3. document.forms["myForm"].output.value = value;
  4. }

This will take whichever value we get from the ActionScript and place it in our textfield with an id of "output".

Step 5: Open up Flash

Let's open up Flash and start working on the ActionScript. Create a new ActionScript 3.0 File and create a new Document Class named "EIFace1".

Create new ActionScript 3.0 File.
Create EIFace Document Class

Step 6: Setup the Document Class

I'll be using FDT to write EIFace.as, but you're welcome to use any ActionScript Editor you feel comfortable with. We'll start out by creating a standard Document Class Shell.

view plaincopy to clipboardprint?
  1. package
  2. {
  3. import flash.display.Sprite;
  4. /**
  5. * @author kreativeKING
  6. */
  7. public class EIFace1 extends Sprite
  8. {
  9. public function EIFace1()
  10. {

  12. }
  13. }
  14. }

Step 7: Creating Our TextField

Create the textfield we'll be using to send our values.

view plaincopy to clipboardprint?
  1. field1 = new TextField();
  2. field1.type = TextFieldType.INPUT;
  3. field1.width = 300;
  4. field1.height = 20;
  5. field1.border = true;
  6. field1.borderColor = 0x565656;
  7. field1.background = true;
  8. field1.backgroundColor = 0x121212;
  9. field1.defaultTextFormat = new TextFormat("Arial", 14, 0xEFEFEF);
  10. field1.x = stage.stageWidth * .5 - field1.width *.5;
  11. field1.y = stage.stageHeight * .5- field1.height *.5;
  12. stage.addChild(field1);

Step 8: Create a Send Button

Create a Button to click. I'm not a fan of using components, so I'll be building a button from scratch using Flash IDE. You're welcome to just create a box or use the SimpleButton component; I'll let you use those creative juices. If you need no further help with building a button, you can skip to Step 11.

Start by creating a rectangle with the Rectangle Primitive Tool. I won't provide specific values, just feel it out to asetting you like.

Create a square.

Step 9: Continue the Button Creation

Convert the rectangle into a MovieClip.

Convert to symbol.

Create a New Layer inside the MovieClip and place "Send To JS" text.

Create Text.

Step 10: Export For ActionScript

Go into your library, right-click on the button and Export for ActionScript.

Export For ActionScript.

Step 11: Code in the Button

We're going to code our button into our Document Class.

view plaincopy to clipboardprint?
  1. button1 = new SendButton();
  2. button1.x = stage.stageWidth * .5 - button1.width *.5;
  3. button1.y = field1.y + 30;

  5. stage.addChild(button1);

Step 12: Where Are We Now

This is how your HTML page should now appear.

view plaincopy to clipboardprint?
  1. "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. "http://www.w3.org/1999/xhtml">

  4. "Content-Type" content="text/html; charset=UTF-8" />
  5. ExternalInterface Test 1




  10. "testArea">
  11. "myForm"
    >
  13. "text" id="output" name="output" value="" />




    • The Document Class should look like this.

    view plaincopy to clipboardprint?
    1. package
    2. {
    3. import flash.display.MovieClip;
    4. import flash.display.Sprite;
    5. import flash.text.TextField;
    6. import flash.text.TextFieldType;
    7. import flash.text.TextFormat;
    8. /**
    9. * @author kreativeKING
    10. */
    11. public class EIFace1 extends Sprite
    12. {
    13. private var field1 : TextField;
    14. private var button1 : MovieClip;

    16. public function EIFace1()
    17. {
    18. field1 = new TextField();
    19. field1.type = TextFieldType.INPUT;
    20. field1.width = 300;
    21. field1.height = 20;
    22. field1.border = true;
    23. field1.borderColor = 0x565656;
    24. field1.background = true;
    25. field1.backgroundColor = 0x121212;
    26. field1.defaultTextFormat = new TextFormat("Arial", 14, 0xEFEFEF);
    27. field1.x = stage.stageWidth * .5 - field1.width *.5;
    28. field1.y = stage.stageHeight * .5- field1.height *.5;

    30. stage.addChild(field1);

    32. button1 = new SendButton();
    33. button1.x = stage.stageWidth * .5 - button1.width *.5;
    34. button1.y = field1.y + 30;

    36. stage.addChild(button1);
    37. }
    38. }
    39. }

    Step 13: Create ActionScript to Javascript Function

    We now need to create the function that sends the data from Flash to Javascript. This will be a simple function which sends a string.

    view plaincopy to clipboardprint?
    1. button1.addEventListener(MouseEvent.CLICK, sendToJS);
    2. private function sendToJS(e : MouseEvent) : void
    3. {
    4. if(ExternalInterface.available)
    5. {
    6. ExternalInterface.call("fromAS", field1.text);
    7. }
    8. }

    We first add an event listener to our button, inside our Document Classes constructor. Then we create our listener. The ExternalInterface.available property checks to see if our browser is able to use the ExternalInterface Class. This isn't necessary to use as we know our browser can support it, but it's good practice for developing for the web and we're never sure if the client browser is going to becompatible.

    The ExternalInterface.call() function is what we use to call our Javascript function. The first parameter is the name of the Javascript function we want to call. It's the name of our function in Javascript as a string. The second parameter is the value we want to pass to the Javascript function. In this case, we're passing the value of our textfield.

    Note: You can pass as many parameters as you want, but the first parameter needs to be the name of the Javascript function.

    Step 14: Testing Time

    Before we can test, we first have to embed our SWF into the HTML. I must stress that it's best to use SWFObject and not the default method that Flash uses to embed SWF files. Let's publish our SWF, setup SWFObject and embed our file.

    Publish the SWF.

    Here's the SWFObject Embed code which goes into the head of the HTML file:

    view plaincopy to clipboardprint?


    It's also important that you give the SWF an id. This is important with using the ExternalInterface and for us to target it using the Javascript function we created earlier. Let's create our div that will house the SWF file.

    view plaincopy to clipboardprint?
    1. <div id="flashDiv">
    2. <p>This will get replaced with a SWF. If not you need to update your Flash Player.p>
    3. div>

    Here are the Document Class and HTML file up to this point:

    view plaincopy to clipboardprint?
    1. package
    2. {
    3. import flash.external.ExternalInterface;
    4. import flash.events.MouseEvent;
    5. import flash.display.MovieClip;
    6. import flash.display.Sprite;
    7. import flash.text.TextField;
    8. import flash.text.TextFieldType;
    9. import flash.text.TextFormat;
    10. /**
    11. * @author kreativeKING
    12. */
    13. public class EIFace1 extends Sprite
    14. {
    15. private var field1 : TextField;
    16. private var button1 : MovieClip;

    18. public function EIFace1()
    19. {
    20. field1 = new TextField();
    21. field1.type = TextFieldType.INPUT;
    22. field1.width = 300;
    23. field1.height = 20;
    24. field1.border = true;
    25. field1.borderColor = 0x565656;
    26. field1.background = true;
    27. field1.backgroundColor = 0x121212;
    28. field1.defaultTextFormat = new TextFormat("Arial", 14, 0xEFEFEF);
    29. field1.x = stage.stageWidth * .5 - field1.width *.5;
    30. field1.y = stage.stageHeight * .5- field1.height *.5;

    32. stage.addChild(field1);

    34. button1 = new SendButton();
    35. button1.x = stage.stageWidth * .5 - button1.width *.5;
    36. button1.y = field1.y + 30;

    38. stage.addChild(button1);

    40. button1.addEventListener(MouseEvent.CLICK, sendToJS);
    41. }

    43. private function sendToJS(e : MouseEvent) : void
    44. {
    45. if(ExternalInterface.available)
    46. {
    47. ExternalInterface.call("fromAS", field1.text);
    48. }
    49. }
    50. }
    51. }
    view plaincopy to clipboardprint?
    1. >
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. <title>ExternalInterface Test 1title>
    6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js">script>
    7. <script type="text/javascript">
    8. var flashvars = {};
    9. var params = {};
    10. params.allowscriptaccess = "always";
    11. params.allownetworking = "all";
    12. var attributes = {};
    13. attributes.id = "EIFace";
    14. swfobject.embedSWF("EIFace.swf", "flashDiv", "350", "200", "9.0.0", false, flashvars, params, attributes);
    15. script>
    16. <script type="text/javascript">
    17. function flashMovie(movieName)
    18. {
    19. if(window.document[movieName])
    20. {
    21. return window.document[movieName];
    22. }
    23. else
    24. {
    25. return document.getElementById(movieName);
    26. }

    28. }

    30. function fromAS(value)
    31. {
    32. document.forms["myForm"].output.value = value;
    33. }
    34. script>
    35. head>

    37. <body>
    38. <div id="flashDiv">
    39. <p>This will get replaced with a SWF. If not you need to update your Flash Player.p>
    40. div>
    41. <div id="testArea">
    42. <form name="myForm">
    43. <label for="output">Text from Flashlabel>
    44. <input type="text" id="output" name="output" value="" />
    45. form>
    46. div>
    47. body>
    48. html>

    Now open up your HTML wrapper and test it out. You'll see that the value of the textfield in flash becomes the value on the textfield in our HTML. At a glance, the code behind this is pretty simple and straight forward. Now let's try sending some information from Javascript to ActionScript.

    Step 15: Make Additional Fields

    We're going to create additional fields to send information from Javascript to ActionScript.

    view plaincopy to clipboardprint?
    1. <label for="input">Send Text To Flashlabel>
    2. <input type="text" id="input" name="input" value="" />
    3. <input type="button" value="SendToFlash" onClick="sendToFlash(myForm.input.value);" />
    view plaincopy to clipboardprint?
    1. field2 = new TextField();
    2. field2.type = TextFieldType.DYNAMIC;
    3. field2.width = 300;
    4. field2.height = 20;
    5. field2.border = true;
    6. field2.borderColor = 0x565656;
    7. field2.background = true;
    8. field2.backgroundColor = 0xEFEFEF;
    9. field2.defaultTextFormat = new TextFormat("Arial", 14, 0x121212);
    10. field2.x = stage.stageWidth * .5 - field2.width *.5;
    11. field2.y = field1.y - 50;

    13. stage.addChild(field2);

    Step 16: Create The Javascript to ActionScript Function

    We need to create a function which sends the value from inside our HTML to Flash. This is similar to the function we created to send values from ActionScript to Javascript.

    view plaincopy to clipboardprint?
    1. function sendToFlash(value)
    2. {
    3. flashMovie("EIFace").sendToFlash(value);
    4. }

    We use the function we created earlier to reference the embedded SWF. Now we must go into our Document Class and set up Flash to receive values from Javascript and create a new function that Javascript will be calling.

    Step 17: Adding Callbacks

    To register Javascript functions, we need to add callbacks so that Flash knows what we're trying to send when we call an ActionScript function. Let's finally start calling some ActionScript.

    view plaincopy to clipboardprint?
    1. private function addCallbacks() : void
    2. {
    3. if(ExternalInterface.available)
    4. {
    5. ExternalInterface.addCallback("sendToFlash", fromJS);
    6. }
    7. }

    The ExternalInterface.addCallback() function registers a function in ActionScript to be called by Javascript. The first parameter is the function name by which Javascript will know the function. The second parameter is the actual function.

    Simply put, that means in our Javascript, we would call sendToFlash() and that would invoke the fromJS() function in ActionScript.

    Step 18: Creating fromJS()

    Now we're going to create the fromJS() function. This is a very simple function that will assign the value passed to it to the text field.

    view plaincopy to clipboardprint?
    1. private function fromJS(value:String) : void
    2. {
    3. field2.text = value;
    4. }

    Time for another test and see what we come up with. Here's what the Document Class and HTML look like now:

    view plaincopy to clipboardprint?
    1. package
    2. {
    3. import flash.external.ExternalInterface;
    4. import flash.events.MouseEvent;
    5. import flash.display.MovieClip;
    6. import flash.display.Sprite;
    7. import flash.text.TextField;
    8. import flash.text.TextFieldType;
    9. import flash.text.TextFormat;
    10. /**
    11. * @author kreativeKING
    12. */
    13. public class EIFace1 extends Sprite
    14. {
    15. private var field1 : TextField;
    16. private var button1 : MovieClip;
    17. private var field2 : TextField;

    19. public function EIFace1()
    20. {
    21. field1 = new TextField();
    22. field1.type = TextFieldType.INPUT;
    23. field1.width = 300;
    24. field1.height = 20;
    25. field1.border = true;
    26. field1.borderColor = 0x565656;
    27. field1.background = true;
    28. field1.backgroundColor = 0x121212;
    29. field1.defaultTextFormat = new TextFormat("Arial", 14, 0xEFEFEF);
    30. field1.x = stage.stageWidth * .5 - field1.width *.5;
    31. field1.y = stage.stageHeight * .5- field1.height *.5;

    33. stage.addChild(field1);

    35. field2 = new TextField();
    36. field2.type = TextFieldType.DYNAMIC;
    37. field2.width = 300;
    38. field2.height = 20;
    39. field2.border = true;
    40. field2.borderColor = 0x565656;
    41. field2.background = true;
    42. field2.backgroundColor = 0xEFEFEF;
    43. field2.defaultTextFormat = new TextFormat("Arial", 14, 0x121212);
    44. field2.x = stage.stageWidth * .5 - field2.width *.5;
    45. field2.y = field1.y - 50;

    47. stage.addChild(field2);

    49. button1 = new SendButton();
    50. button1.x = stage.stageWidth * .5 - button1.width *.5;
    51. button1.y = field1.y + 30;

    53. stage.addChild(button1);

    55. button1.addEventListener(MouseEvent.CLICK, sendToJS);
    56. addCallbacks();
    57. }

    59. private function addCallbacks() : void
    60. {
    61. if(ExternalInterface.available)
    62. {
    63. ExternalInterface.addCallback("sendToFlash", fromJS);
    64. }
    65. }

    67. private function fromJS(value:String) : void
    68. {
    69. field2.text = value;
    70. }

    72. private function sendToJS(e : MouseEvent) : void
    73. {
    74. if(ExternalInterface.available)
    75. {
    76. ExternalInterface.call("fromAS", field1.text);
    77. }
    78. }
    79. }
    80. }
    view plaincopy to clipboardprint?
    1. "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. "http://www.w3.org/1999/xhtml">

    4. "Content-Type" content="text/html; charset=UTF-8" />
    5. ExternalInterface Test 1






    12. "flashDiv">

    13. This will get replaced with a SWF. If not you need to update your Flash Player.


  • "testArea">
  • "myForm"
    >
  • "text" id="input" name="input" value="" />
  • "button" value="SendToFlash" onClick="sendToFlash(myForm.input.value);" />


  • "text" id="output" name="output" value="" />




    • Step 19: Results

    As you can see, placing text in our newest field and hitting send sends the value into the Flash text field. Using the ExternalInterface class is very simple and can often come in handy when creating API's and applications that can be manipulated outside of the Flash Movie. For example, this can be implemented in Video Player API's for creating and controlling the video with Javascript.

    Step 20: Who Uses Classic Javascript Anymore?

    For most of the people out there now, no one is really using classic Javascript; jQuery is the wave of the future. Here's an example of using jQuery instead of classic Javascript.

    view plaincopy to clipboardprint?

    Here's the new and updated HTML for use with jQuery:

    view plaincopy to clipboardprint?
    1. "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. "http://www.w3.org/1999/xhtml">

    4. "Content-Type" content="text/html; charset=UTF-8" />
    5. ExternalInterface Test 1







    13. "flashDiv">

    14. This will get replaced with a SWF. If not you need to update your Flash Player.


  • "testArea">
  • "myForm"
    >
  • "text" id="input" name="input" value="" />
  • "button" id="sendToFlash" value="SendToFlash" />


  • "text" id="output" name="output" value="" />




    • Conclusion

    Hopefully you now have a better grasp on using the ExternalInterface Class. If you have any questions or ideas of what else you would like to learn, just leave a comment or tweet me and I'll see what I can do. I hope you learned the concepts and start using them in your own projects. Thanks for reading!

    kreativeKING

    source from : flash tuts+

    0 nhận xét:

    Post a Comment

    Subscribe to: Post Comments (Atom)
     

    Blogroll

    Site Info

    Text

    Tut - Designer Copyright © 2009 WoodMag is Designed by Ipietoon for Free Blogger Template