ExternalInterface to communicate with javascript

Created May 3, 2012    Last Updated: May 03, 2012

ExTERNAL INTERFACE allows communication between a swf and the webpage using javascript.

Skill Level: Intermediate. Actionscript version: AS3

Flash skills needed:
  1. Creating MovieClip symbols
  2. Using Components: FLVPlayback Component
  3. Event Listeners and Functions
  4. Using ActionScript panel
HTML/CSS skills needed:
  1. Naming and styling a Div
Javascript/JQuery skills needed:
  1. Writing a function

We will take this real world objective from a question posed on Creative Cow Forum seeking informatiaon on how to have a swf with a video increase it's size on roll-over.

This will use a mouse click rather than a roll-over.

Here is the finished piece that we will be aiming for:

The SWF

Open a new flash file, with a stage of 640 x 480, or whatever size you want the 'expand size' to be. 640 x 480 happens to be twice the size of a standard .flv/.f4v which can be 320 x 240.

From the Components pallete, drag out a FLVPlayback component to the stage. Give it an instance name 'flvPlayer'. Align it to the stage top and left.

Turn this component into a MovieClip symbol by pressing F8. Give this MovieClip symbol an instance name of 'greyBox' or whatever you like of course.

Open the Actions pallet if it is not already open.

Create a new layer on the timeline for the actionscript. In the actionscript panel, place this code:

import flash.external.ExternalInterface;

greyBox.buttonMode=true;

greyBox.flvPlayer.source="lucy.f4v";

greyBox.addEventListener(MouseEvent.CLICK, myAS3function );
function myAS3function(event:Event):void {
	ExternalInterface.call("myJavaScriptFunction"); 
	greyBox.width=640;
	greyBox.height=480;
}

Set UP your Web page (HTML)

Create your web page. I will be using SWFObject to embed the swf, and recommend you do too. You can use the convenient SWFObject code generator here:

Place the SWF inthe Body of the webpage

<div id="flvDIV">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  	width="640" height="480" id="myFlashContent">
		<param name="movie" value="flvResize.swf" />
		<!--[if !IE]>-->
		<object type="application/x-shockwave-flash" 
          data="flvResize.swf" width="640" height="480">
			<!--<![endif]-->
			<!--[if !IE]>-->
		</object>
		<!--<![endif]-->
  </object>
</div>

Notice that the container Div is given an ID of 'flvDIV'.

Scripts on your web page document's head: CSS

This div needs to be styled. Give it a width, and height, and make sure the overflow is set to 'hidden'

<style type="text/css">
  #flvDIV {width:320px; height:240px; overflow:hidden;   }
</style>

Scripts on your web page document's head: Javascript

The following lines import the swfobject.js file, as well as 'registers' the embedded swf. You will either need to download the swfobject.js file and place it along with the other files in the same directory of your server, or you can link to a hosted copy ( Google for more info).

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	swfobject.registerObject("myFlashContent", "9.0.0");
</script>

Additional javascript placed in the head:

This is the javascript which will actually resize the Div:

<script type="text/javascript">
  function myJavaScriptFunction () { 
     document.getElementById("flvDIV").style.width="640px";
     document.getElementById("flvDIV").style.height="480px";
  }
</script>

Explanation/Overview of the Code

The flash file has code which imports (includes) the ExternalInterface class, which will allow the SWF to 'talk to' the web page via javascript. We did not touch upon the reverse case - where javascript on the web page can actually communicate to and cause effects within the SWF. We'll leave that to a future tutorial.

A movieclip, which contains the video component, listens for a CLICK, and triggers a function. This function resizes the movieclip ( and thus the video component) to the full size of the SWF, AND it triggers the javascript function inthe webpage.

The javascript function in the webpage, resizes the div to the full size of the SWF, thereby revealing the entire SWF.

NOTES:

This is a simple scenario of this concept. If you were using this example, you might decide to utilize JQuery, or another javascript library, to animate the Div to its desired size.


If you have questions or comments, feel free to let me know.

You must have 'styles' or 'CSS' disabled. That's OK.

If so, and you see this, please DO NOT fill out the next 3 fields: name, email and zipcode. Thank you.

Name:

Email:

Just continue on to the rest of the form below this. Thank you.








Thanks for helping us control spam by filling in this question:
What is 10 + 3 = ? (Use numerals only)