Yes! yes you can! And it is fairly simple. In the code below I’ll show you how to embed JQuery-1.3.2min inside of a SWF so that it is ready to be used in the wrapper.
The major benefit is that by embedding JQuery inside a SWF you save about 35kb worth of space. JQuery-1.3.2min on its own is 56kb, the code below compiles to about 20.7kb!
To do the actual embedding we use the Embed Flex meta data tag. You can also use Embed in the Flash IDE, you just need to point it to the correct library path. CS4 should prompt you with the path automatically.
package
{
import flash.display.Sprite;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.external.ExternalInterface;
public class jQueryInside extends Sprite
{
//jquery 1.3.2 min embedded as an octet stream
//the JQuery Class is a ByteArray
[Embed(source="js/jquery.js", mimeType="application/octet-stream")]
private var JQuery:Class;
public function jQueryInside() {
//a little delay to allow the DOM to be ready
var t:Timer = new Timer(400, 1);
t.addEventListener(TimerEvent.TIMER_COMPLETE, giveJQuery, false, 0, true);
t.start();
}
private function giveJQuery(e:TimerEvent):void {
//convert the ByteArray to a String
var jq:String = new JQuery().toString();
//a string is used to insert the jquery contents into a function wrapped in xml cdata tags
var outJq:String = "<script><![CDATA[function () {"+jq+"}]]></script>";
// and wrapp the javascript in a function and in xml for ease of passage
//turn it into true XML
var theJQuery:XML = new XML(outJq);
//use the ExternalInterface to call the wrapped function wich thereby applies jQuery to the DOM
if (ExternalInterface.available) ExternalInterface.call(theJQuery);
//jquery is ready to be used in the HTML page at this point
//clear the event listener
e.target.removeEventListener(TimerEvent.TIMER_COMPLETE, giveJQuery);
}
}
}
A basic HTML page using the above SWF would look like this:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function doAnimation() {
$("#someDiv").animate({"left": "-=50px"}, 3000);
}
</script>
<script type="text/javascript" src="swfobject.js"></script>
<div id="someDiv" style="width:100px;background:black;position:relative;left:5px" onclick="doAnimation()">Some Text</div>
<div id="theSWF"></div>
<script type="text/javascript">
//<![CDATA[
var flashvars = {};
var params = {};
var atts = {};
params.menu = "true";
params.quality = "high";
params.wmode = "opaque";
params.swfliveconnect = "true";
params.allowscriptaccess = "sameDomain";
swfobject.embedSWF("jQueryInside.swf", "theSWF", "100", "100", "9.0.0",
false, flashvars, params, atts);
//]]>
</script>
</body>
</html>
Tags: Flex, JavaScript, JQuery, JQuery inside a SWF
Thanks for this post!