andyMatthews.net
Compiling Actionscript 3 classes into a SWF with Flex Builder for use in JavaScript AIR applications
If you're a JavaScript developer building apps against the AIR platform then you're a rare breed. Those of us who want to leverage our existing skillsets are definitely in the minority, and in some cases so is our code. While the AIR runtime includes lots of handy classes for building robust rich internet applications, it's also missing quite a few. The thing is that while the AIR runtime might not include those classes by default, we can still use them if they exist in our project. This quick tutorial is going to show you just how you'd go about compiling class files down into a SWF that can then be referenced in your project. I'll be using Flex Builder to do the compiling, but you can also do it via command line using the Flex SDK.
A common request for an application might be to capture some portion of the application interface and save it to the file system as a JPG. The class package used in that action is com.adobe.images. You'll need to download the three AS files found in that package and store them on your machine somewhere. If you'd rather download the entire AS3 Core library, that's fine as well. Let's get started.
-
Create a new Flex Builder Actionscript Project
- While in the Flex Builder perspective, select File > New > Actionscript Project
- Call it whatever you like, but it helps to be descriptive. I'll call my project ImageEncoder. Click Finish.
- Once the project is created, your directory structure should look something like this.
-
Create the following directory structure inside the root of your project:
-
com
-
adobe
- images
-
adobe
-
com
- Inside the images directory, place BitString.as, JPGEncoder.as, and PNGEncoder.as
- Open the file named ImageEncoder.as, inside the src folder. You should see something like this.
-
The first thing we need to do is to import the classes that need to wind up in our finished code library
-
After the line reading "import flash.display.Sprite", we want to add these two lines
import com.adobe.images.JPGEncoder; import com.adobe.images.PNGEncoder;
-
After the line reading "import flash.display.Sprite", we want to add these two lines
-
Then we need to actually reference those classes, or the compiler will not include them in the final SWF
-
After the line reading "public function ImageEncoder() { }", we want to add the following function
private function instantiator():void { var j:JPGEncoder = new JPGEncoder(); var p:PNGEncoder = new PNGEncoder(); }
-
After the line reading "public function ImageEncoder() { }", we want to add the following function
- Save this file and close it
-
Select File > Export
- Expand the Flex Builder node, click Release Build, then click Next.
- Make sure all of the correct file names are shown in the final dialog box, then click Finish
- Expand the bin-release folder and you should now see a file named ImageEncoder.swf
-
Transfer this file into your JS AIR application and add the following line to your HTML file. Change the path accordingly.
<script type="application/x-shockwave-flash" src="lib/ImageEncoder.swf"></script>
- If your project is set up correctly, you should now be able to use the JPGEncoder, and PNGEncoder classes in your projects. Look for another blog post soon detailing how to use these classes to capture bitmap data in your apps.