The Flex-Ajax Bridge is a wonderful little code library that completely opens up a swf to be controlled via JavaScript. Quoting the Flex-Ajax Bridge Labs page, “essentially anything you can do with ActionScript, you can do with JavaScript.” At least as far as I know, up until now this has been limited to use with the Flex framework and could not be used with a standard AS3 project.
With a recent project we worked on, we really didn’t need the entire Flex framework, but did however desperately want to use the capabilities of the Flex-Ajax Bridge. After a little digging in the framework code and a little more testing, we found out that its completely possible to use the Flex-Ajax Bridge with standard AS3 projects as well. Quite possibly the name should be changed to Flash-Ajax Bridge instead. We used this with the original FABridge source that was released quite a while ago, but right before posting this I tested it with the latest Flex Builder 3 Beta (which finally includes the code, so you don’t have to search random sites for it).
Note: I’m really not sure how this fits in with the EULA, so use at your own risk.
With the latest Flex Builder 3 Beta, copy the following sourcecode from the frameworks directory and paste them into your AS3 project source directory:
1) FABridge.as
from: /sdks/3.0.0/frameworks/javascript/fabridge/src/bridge/
to: bridge/
2) FABridge.js
from: /sdks/3.0.0/frameworks/javascript/fabridge/src/bridge/
to: your bin/js/ directory
3) IMXMLObject.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/core/
to: mx/core/
4) Version.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/core/
to: mx/core/
5) mx_internal.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/core/
to: mx/core/
6) ItemPendingError.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/collections/errors/
to: mx/collections/errors/
7) IResponder.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/rpc/
to: mx/rpc/
Once you get those 6 classes and 1 js file into your AS3 project, you’re good to go!
To test, in your AS3 project base class create a new FABridge instance, then set the rootObject property of the instance to “this” (the base class reference). Give the bridgeName property of the instance a name and then in js you reference the flash bridge with that name, like the following: FABridge.[bridge name].root(). Now follow along to the tutorials on the Labs page.
That’s it… nothing to it.
Just remember, until we find out some more information regarding the EULA on this topic, use at your own risk.
Hey,
Thanks for the great info.
Just what i was looking for!
Thumbs up!
Updated FABridge that allows access to statics/constants.
https://bugs.adobe.com/jira/browse/SDK-12279
Thanks for this, it works. Your intructions are correct but it still took me a while to get this right. I hope the following comments will help someone:
– firstly, note the comment about EULA
– this will enable you to build an app just like the FABridge sample apps found on the Adobe website
– I got this working using Flash CS3 only (I don’t have FLEX) but you’ll need to get the above mentioned .as files and .js file from inside the SDK which you download from http://download.macromedia.com/pub/labs/flex/3/flex3sdk_b3_121207.zip
– I followed the exact instuctions above but at compile time of the flash application FABridge.as threw a compile error because it couldn’t resolve a reference to something like mx.controls.Alert (this implies that extra classes need adding to the classpath) anyway, I got bored of going through the library finding specific classes to copy so I just copied the lot.
* To do this unzip the download and then locate \frameworks\projects\framework\src and copy src to somewhere on your hard drive, like “C:\Flash classes” (can be anywhere) and then add a classpath entry…
– …to add a classpath entry that will be present for every project you work on you’ll need to go to Edit > Preferences… > ActionScript > ActionScript 3.0 Settings…
Click on this. You should see:
.
$(AppConfig)/ActionScript 3.0/Classes
now click the + symbol and add
C:\Flash classes (or where ever you put it)
– to get started create a new Flash File (AS3), set Document Class: Initializer (don’t worry about the warning message), then create a new ActionScript File and save it as Initializer.as and it’s contents should look like:
package {
import flash.display.MovieClip;
import bridge.FABridge;
public class Initializer extends MovieClip {
private var externalBridge:FABridge;
public function Initialiser() {
super();
externalBridge = new FABridge();
externalBridge.rootObject = this;
}
}
}
– now just add components like buttons etc to your stage. Give them names like btnSayHello, and then publish your project to a SWF.
– now you’ll have to write some javascript code that makes use of the FABridge.js file and you’ll have to learn the special way in which you reference your components like “btnSayHello”.
… i’ll leave that to someone else to contribute!
Paul you are completely defeating the purpose of trying to use FABridge outside of Flex. All you’ve done is add the Flex overhead into Flash. The point I was going for is that you can actually use FABridge with only 6 classes from the Flex framework.
I just tested it out myself and you can definitely compile in Flash with only the 6 Flex classes above. You should have no references to any other classes.
I wouldn’t have thought of using FABridge without using Flex. Interesting.
When I started using FABridge I had some issues because I was using swfobject to include my Flash. I was able to resolve the issues, and others might be interested in using FABridge and swfobject together.