Developers that have been using Flex should be pretty familiar by now with the Embed metadata tag which allows you to embed assets into a SWF (like images, SWFs, XML, etc). This option has also been added to CS4 (CS4 uses the Flex SDK to complete this task).
What some of you may not know or though of, is that you can actually embed JavaScript libraries into your SWF and have your SWF write those libs to the pages DOM. We've been using this technique for a while. However, when someone asked for a reference on the subject, I searched the web and didn't find one. So here we are 
.
This technique is quite simple. The basics of it are that you embed the JavaScript library using the embed syntax, then create a Class that references it when instantiated, instantiate that class, get the string representation of the instance, and send that string to the page to be embedded using a JavaScript eval statement.
To illustrate this, lets create a JavaScript file called hello.js which has a single function hello that throws an JS alert.
Hello.js
-
function hello()
-
{
-
alert("hello");
-
}
Now lets create the ActionScript file that embeds the JS into a SWF, writes it to the page, and calls the hello function in the lib.
-
package
-
{
-
import flash.display.Sprite;
-
import flash.external.ExternalInterface;
-
-
public class EmbeddedJavaScriptExample extends Sprite
-
{
-
// embed the JavaScript into the SWF
-
[Embed(source="hello.js", mimeType="application/octet-stream")]
-
// create a class that can instantiate the JavaScript for embedding
-
private static const HelloJS:Class;
-
-
public function EmbeddedJavaScriptExample()
-
{
-
if (ExternalInterface.available)
-
{
-
// embed the JavaScript to the page
-
ExternalInterface.call("eval", new HelloJS().toString());
-
-
// the embedded JavaScript has a function call named hello
-
// now that it has been embedded to the page call it
-
ExternalInterface.call("hello");
-
}
-
}
-
}
-
}
You can download the full example here.
Pretty nifty eh? Hope this shows you a neat little trick to use in distributing some of your SWF/JS libraries.
Subscribe to RSS
Follow me on twitter
Follow me on LinkedIn
Visit Dreamsocket.com
Visit Dreamsocket's YouTube page
#1 by senocular - September 25th, 2009 at 13:41
I’ve also used XML CDATA before. It’s not as clean, but it does lift the dependency on the Flex SDK.
#2 by Adobe Flex Tutorial - September 27th, 2009 at 04:48
That’s a great trick, i’ve been looking for something like this for a long time now (for dynamically loaded flex modules).
I translated your article for french folks here:
http://www.flex-tutorial.fr/2009/09/27/flex-tips-embarquer-un-fichier-javascript-dans-un-swf-embed/
Thx again
Fabien
http://www.flex-tutorial.fr
#3 by sixfngers - October 5th, 2009 at 14:46
@senocular, I am curious how you did this with XML CDATA. I ask because I am using cs3 and can’t use the embed tag like Kenny shows in his example. Wondering if you have an example? Thx.
#4 by Kenny Bunch - October 5th, 2009 at 18:39
SixFingers,
I’ll try and update the article with the XML based solution, as we’ve used it too. The basics are you put the script inline in your code by wrapping it in XML.
For example:
// your script in XML
var script:XML =
// embed the script
ExternalInterface.call(”eval”, script);
// use the script
ExternalInterface.call(”hello”);
#5 by Tad - October 29th, 2009 at 13:22
You can also embed the script without using eval, by having vars set up in a simple .js file or in the wrapper.
For example:
in a .js file:
var myFunction;
var otherFunction;
from a AS3 call:
ExternalInterface.call(setVariables);
when wrapping javascript calls in XML use cdata blocks like this:
var setVariables:XML=
;
now myFunction and otherFunction can be called from both the wrapper and the flash. and no eval command was used.
ExternalInterface.call(”myFunction”);
in the wrapper you can call myFunction(); after it has been initiated by the flash.
#6 by Russ - December 30th, 2009 at 09:38
So is the js eval function build it to the browser? It’s not in the html file included in you source, so I assume it is, but I can’t get it to work.