Archive for May, 2010

External Interface Mastery

Friday, May 14th, 2010

Mastering the External Interface.

It surprises me how many people know so little about the External Interface and what can be done with it.
You can communicate back and forth from ActionScript to JavaScript using the External Interface.
Many wonderful things are possible.

I have made a class called DOMEx that utilizes the External Interface and JavaScript stored as XML to aid in the communication between JavaScript and ActionScript.

To get a quick idea of some of the things that can be done, you can view some of the examples I’ve made using the DOMEx set of classes.

Dragging a green circle outside and back into the flash

Three D Cube following the mouse no matter where the mouse is

The swf responding to the wrappers key events

Basic Overview

Basic use of the External Interface.

import flash.external.ExternalInterface;

if (ExternalInterface.available) ExternalInterface.call("function () { alert('Hello World'); }");

//or

var javaScript:XML =
<script>
<![CDATA[
function (words) {

   alert(words);

}
]]>
</script>;

if (ExternalInterface.available) ExternalInterface.call(javaScript, "Howdy Ya'll");

//and

var browserLocation:String = ExternalInterface.call("window.location.toString()");
trace(browserLocation);

//adding a callback
if (ExternalInterface.available) ExternalInterface.addCallback("javaScriptCalling", myActionScriptFunction);

function myActionScriptFunction(...args):void {

//do something in the swf

}

Things To Know
The External Interface has been around for some time now, (Flash 8) but got popular with AS3.

You can pass, Strings, Numbers, Booleans, Arrays, basic Objects, and XML back and forth between ActionScript and JavaScript.
XML is converted to a string when accessed via JavaScript, and sometimes has a hard time getting back to an ActionScript form.
When communicating between the two, it is best to just stick to the main types of Objects (Strings, Numbers, Arrays)

When adding a call back for javaScript to call, there are some words that are reserved and will not work in Internet Explorer as callbacks.
GetVariable, SetVariable, Play, and most of the words found here as methods or properties:

http://www.adobe.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html

When testing in the Flash IDE, ExternalInterface.available may return true.
You can test against that by doing something like this:

var javascript:XML=<script><![CDATA[function(){return ["some", "array"];}]]></script>;
if (ExternalInterface.available && ExternalInterface.call(javascript) == null) {
    //you may be in the IDE
}

The DOMEx Class
The DOMEx Class makes it possible to easily communicate back and forth between AS and JS,
without having to set anything up in the wrapper.
The documentation is here: DOMEx Documentation

Automate the command prompt on Windows

Tuesday, May 11th, 2010

Many developers use just the mxmlc compiler of the Flex SDK to compile their Flex/ActionScript 3.0 projects.
My personal basic work flow is FlashDevelop or notepad for code editing and the SDK for compiling.
I made a little video on the basics of using the mxmlc compiler from the command prompt in windows, you can find that here: simpleflvplayer example
(that example is of an flv player, and the video it plays is about using the mxmlc compiler)

Having to open the command prompt and type everything each time can be tedious. Especially if you need to compile multiple SWFs or assets together to form one final application. But on windows there is a very simple way to automate the command prompt.

Just use a bit of JavaScript and the Windows Based Script Host.

Say for instance we need to always compile a SWC file, then compile a SWF using that SWC file.
Instead of having to open the command prompt each time and first type out the commands to compile the SWC, compile it, then type out the commands to compile the SWF and compile it. We can just make a little JavaScript file that will run the command prompt with whatever commands we want.

/* two backslashes are used in the commands because we want to be sure
    it knows we need a backslash and not, for instance, \t or \r  */

var compileSWC = "compc -include-sources c:\\yourPath\\theSwcSourcesFolder -output c:\\yourPath\\theSWC.swc";

var compileSWF = "mxmlc.exe -include-libraries c:\\yourPath\\theSWC.swc -file-specs c:\\yourPath\\MainApp.as";

var shell = new ActiveXObject("WScript.shell");

shell.run("cmd.exe /k cd/Flex SDK Location/bin &"+compileSWC+"&"+compileSWF+"", 1, true);

shell.Quit;

The above would be saved as a .js file.

The shell.run command is used to run a Windows program.
In this case we open the command prompt and give it some commands.
The /k starts the commands.
Change directory (cd) to the Flex SDK bin directory
(wherever that is on your computer)
The ampersand (&) signifies another command.
Since our commands are somewhat long, we put them in variables and just plug those variables in.
A command to compile the SWC file, then the next command to compile the SWF, which uses that SWC.

In Windows Vista or better you should be able to right click on the .js file and select Open With, then Windows Based Script Host. (System32/wscript.exe)

It will run the JavaScript, which will open the command prompt and run the commands in order. When it is done you will need to close the command prompt.

And now you have a quick and easy way to recompile your project without having to retype everything!