Header Image - charles newman's blog

Building ActionScript 3 projects with Apache Ant

There are several reasons to use Apache Ant to build your ActionScript and Adobe Flex projects:

1) If your team uses Continuos Integration.

2) Your project has lots of dependencies that have version branches of their own.

3) You don’t want to shell out the bucks for Flash Builder.

4) You want to quickly build a project without having to import the project into Flash Builder.

There are quite a few blog posts out there on how to do this, so I’ll keep this short and simple so you can get started.

To start, download the zip file here, I’ll discuss the contents of the zip below. If you are impatient or simply don’t like to read, open a Terminal window, change to the directory where you unzipped the file and type “ant”, and press Enter. The script will build the project, create ASDocs, and then create a release zip file of the built project.

If you are on Windows, you’ll need to download and install Apache Ant.  You will also need the Flex SDK installed on your system, and the location of the SDK is specified in the “build.properties” file you will find in the zip.

The Code

Rather than use a “Hello World” app, we’ll start with an OSMF-based player that is as simple as it gets. This is the bare-bones code to play a video with the OSMF (Open Source Media Framework). You’ll find a ./src and a ./libs folder in the zip. The ./libs folder contains the OSMF.swc built for Flash Player 10.1. This is the same SWC file available at osmf.org.

The ./src folder contains one ActionScript file, OSMFSimple.as:

package
{
    import flash.display.Sprite;

    import org.osmf.elements.VideoElement;
    import org.osmf.media.MediaPlayerSprite;
    import org.osmf.net.StreamingURLResource;

    [SWF(backgroundColor="0x000000", frameRate="25", width="640", height="360")]

    /**
     * This is as simple as an OSMF-based media player can get.
     **/
    public class OSMFSimple extends Sprite
    {
	private static const MEDIA:String =
            "rtmp://cp67126.edgefcs.net/ondemand/mp4:mediapm/osmf/content/test/spacealonehd_sounas_640_700.mp4";

	private var mediaPlayerSprite:MediaPlayerSprite;

	public function OSMFSimple()
	{
		mediaPlayerSprite = new MediaPlayerSprite();
		addChild(mediaPlayerSprite);

		mediaPlayerSprite.media =
                   new VideoElement(new StreamingURLResource(MEDIA));
	}
    }
}

The Ant Build Script

You will notice two files in the zip, “build.properties” and “build.xml”.

The build.properties file contains the settings that can be modified by developers to customize the build for their development environment. The idea here is: developers can tweak this file for their dev environments without having to touch the build script. This particular file contains only locale and the Flex SDK version location, but it could contain properties tied to environment variables, for example.

build.properties

#SDKLocation:
FLEX_HOME=/Applications/Adobe Flash Builder 4/sdks/4.1.0
SDK_VERSION=4.1.0.16076
LOCALE=en_US

build.xml

The build.xml file is the build script. Download the zip file and take a look at the build.xml file. You will see tasks for cleaning the bin-release folder, cleaning the deploy folder, cleaning the ASDocs folder, creating the HTML wrapper files, building the release, building the ASDocs, and creating the zip file.

Notice at the top of file, in the project tag you see default=”main”. This tells Ant to look for a task named “main”. Now look at the bottom of file and you’ll see the main task. This simply kicks off the tasks required to build a release of this project.

To run the script, simply open a Terminal window, change to the directory, type “ant” and hit enter. Because the default task is defined as “main”, no other arguments are required.

If you wanted to run a particular task, you could supply that on the command line, such as:

ant release-build

You don’t need to name your Ant script “build.xml”. If you don’t, you need to supply the filename on the command line like this:

ant -f master-build.xml

And then to specify a task within that build script:

ant -f master-build.xml release-build

Run the script by opening a Terminal window, change to the folder where you unzipped the file, and type “ant”, hit Enter.  You should see output similar to this:

charles:OSMFSimple$ ant
Buildfile: /Users/charles/Downloads/OSMFSimple/build.xml

clean:
     [echo] cleaning...

clean-deploy:
     [echo] cleaning deploy folder...

clean-asdocs:
     [echo] cleaning asdocs...

release-build:
     [echo] building...
    [mxmlc] Loading configuration file /Applications/Adobe Flash Builder 4/sdks/4.1.0/frameworks/flex-config.xml
    [mxmlc] /Users/charles/Downloads/OSMFSimple/bin-release/OSMFSimple.swf (114460 bytes)

wrapper:

build-asdocs:
     [echo] building asdocs...
    [asdoc] Loading configuration file /Applications/Adobe Flash Builder 4/sdks/4.1.0/frameworks/flex-config.xml
    [asdoc] Documentation was created in /Users/charles/Downloads/OSMFSimple/docs/

zip-deploy:
      [zip] Building zip: /Users/charles/Downloads/OSMFSimple/deploy/OSMFSimple-release.zip

main:

BUILD SUCCESSFUL
Total time: 17 seconds

If you were building a library (a SWC file) rather than a SWF, you would use the <compc> task rather than the <mxmlc> task.  For documentation on the Ant tasks supported by the Flex SDK see this page.

There are many other things you can do with Ant, such as sync with your Perforce depot, deploy to an FTP server, etc.

The only thing I haven’t figure out how to do with Ant (yet) is duplicate the “include source” check box in Flash Builder when exporting a release build. This is handy when creating sample projects. If anyone has figured this out please post a comment here.

I hope this helps you get started with ActionScript and Ant. It has made life much easier for our development team.

Mac OS X – change a string in multiple files on the command line

by Charles Newman

Let’s say your team has been using the same license agreement in all source files for the entire year and during a code review someone happens to notice a misspelled word, or maybe the new year has arrived and you want to update the copyright notice.  You can ask the new intern to open all 300 source files in your code repository and change each one, or even better, you can do it on the command line with a single line.

This command, typed into an OS X terminal will recursively change the misspelled word ‘auther’ to ‘author’ in every file with a “.as” extension in the current directory and below:

find . -name ‘*.as’ | xargs perl -pi -e ‘s/auther/author/g’

MinimalComps LineChart Example

I’m working on a project that requires real-time charting. The Flex charting components are just way too CPU intensive for this project. So I needed a pure ActionScript 3 solution. I had heard of Minimal Comps by Bit-101 but had never checked it out before. This is a very cool and efficient set of pure AS3 classes.

So far, I’m moving in the direction of extending the LineChart class and adding a LineSeries class so I can chart more than one series on the same chart, but I had a hard time finding any LineChart samples online so I’ll post this one I wrote to get familiar with the LineChart class in MinimalComps.

Right click anywhere in the sample to view source.  The sample charts a series of numbers from 0 to 100 once per second.  This type of chart would be useful for charting stock prices, bandwidth, or buffer length, for example.

Mac Ant Build – Error: PermGen space

This is worthy of a post because it took me a while to figure it out.

I created a fairly large Ant build script that kicks off builds for a project’s dependencies and it was working great until I added a few more things. It started failing with this:

[compc] Loading configuration file /Applications/Adobe Flash Builder 4/sdks/4.1.0/frameworks/flex-config.xml
[compc] Error: PermGen space

I’m not a hard core Java guy but I figured this had something to do with the Java Virtual Machine running out of memory. So after digging a bit and trying a few different things the solution I came up with was this:

export ANT_OPTS=-XX:MaxPermSize=512m

Try it on the command line first. If that works for you, you might want to add it to your .bash_profile. Once I added that, my build script was able to complete.

OSMF – Release 1.5 is now available

This release includes lots of bug fixes plus support for FMS 4.0 Multicast and FMS 3.5.3 Stream Reconnect. The stream reconnect logic will try to reconnect you to the FMS server if you switch from wired to wireless, for example. If the reconnect happens before the buffer empties, you get a seemless experience. If the buffer does empty, it will try for 2 minutes to reconnect and if successful, it will start right where it left off. Both of these new features require Flash Player 10.1.

You can get the new release at osmf.org

Flash Builder/Flex Builder – No Support for Relative Paths

You can’t enter a relative source path in Flex/Flash builder. For example, if I want the Flash authoring environment to find a class or classes on my system, I can tell it to look here: “../../libs” and it will go up 2 directories, go to libs and look in every directory under that until it finds the class. This allows me to check-in the FLA file and everyone on the team is going to be able to build it.

However, Flex/Flash Builder is built on Eclipse, and from what I’ve been a able to gather, relative paths are not accepted for source paths, which is a real pain. Unless everyone on your team stores code under “${DOCUMENTS}/everyone/uses/the/same/dev/path”, which in that case you could use the built in Linked Resources that Builder defines. But if you work on a framework or a public API, or just a dev team where people want choice over where they place their source code, this sucks.

I complained to one of the guys on the Builder team at Adobe about this and he told me this was a limitation of Eclipse and there is nothing they can do about it. But, he gave me a nice workaround and it occurred to me today, while showing this trick to a co-worker, that I should post this because others may not know about it.

Here’s the problem:

You create a new project in Flex/Flash builder and you want to reference the classes in another project. If that other project is a library, and you don’t want to reference the SWC, but the actual project source, you can simply hit “Add Project…” and select the project from the window that pops up and you are good to go, no relative paths required, Builder knows where everything is:

However, if you want to reference another project that is not a library project, such as an OSMF plugin (a project that creates a SWF, not a SWC), you need to use the “Source path” tab on this dialog and click the “Add Folder…” button:


Here’s the trick:

Don’t use the Browse button on the window that pops-up when you click “Add Folder…” above. Just type a slash (‘/’) followed by the project name.

Of course the project needs to be present in Builder (i.e., you either created it in Builder or imported it into Builder). The problem occurs when you use the browse button to locate the project because the entire path, which is specific to your system, will show up in the project files and no one except you is going to be able to build the project.  But if you just type a slash followed by the project name, builder will find the project and everyone will be able to build it.

In the image just above is what you should see on this tab, not the full path to the projects.

And your .actionScriptProperties file will have entries like this:

<compilerSourcePath>

<compilerSourcePathEntry kind=”1″ linkType=”1″ path=”/AkamaiAdvancedStreamingPlugin”/>

<compilerSourcePathEntry kind=”1″ linkType=”1″ path=”/AkamaiBasicStreamingPlugin”/>

</compilerSourcePath>

Notice the full path is not there.

One more thing:

You need to do one more thing before checking your code into a repository (SVN, Perforce, etc.):
Check your .project file and delete the <linkedResources> tag:
<linkedResources>
<link>
<name>[source path] AkamaiAdvancedStreamingPlugin</name>
<type>2</type>
<location>/Users/cnewman/Documents/Akamai/p4/projects/flash-client-dev/osmf/plugins/advanced-streaming-    plugin/trunk/AkamaiAdvancedStreamingPlugin</location>
</link>
</linkedResources>
Notice the full system path is in there. Builder doesn’t need this tag to build your project, it’s only for the Eclipse GUI, so just remove it from the file so no one gets errors importing your project.

I realize there are Linked Resources at the General->Workspace level for builder such as ${DOCUMENTS}. But this is not a great solution if you work on a project that a lot of people are going to need to be able to build, such as a public framework or API.  Everyone who wants to build your project is going to need to setup your required Linked Resource before they can build. But with the trick above, all they need to do is import your Builder project and go.

Flex Builder/Flash Builder – Switch Perspectives Quickly

I just discovered this by accidentally hitting the wrong key while debugging:

To switch from Debug Perspective back to Development Perspective, hit Cmd+F8.

Flex Builder pops up a list of Perspectives, hit Cmd+F8 again to cycle through your list.  This is very handy when you’re finished debugging and want to quickly get back to the Development Perspective without reaching for the mouse.  I occasionally stumble on these kinds of things I should already know…

Mac OS X – Quick way to get a long path into a terminal window

by Charles Newman

As noted in this post, there is no way to right-click a folder in the Finder and copy it’s full path to the clipboard. This is an annoying omission in OS X that can make life difficult for software developers and power users.  But I just discovered a neat trick: you can simply drag the folder icon from the Finder into the Terminal window.

So for example, bring up a terminal window and type “cd ” (notice the space after “cd”). Then simply drag your folder from the Finder onto the terminal window, let go and you’ll be ready to hit the return key to change directory to that long path rather than having to type the whole thing out.

Flex Builder Warning – “Source path entry, …, is a subdirectory of source path entry”

by Charles Newman

If you have two Flex projects sharing the same parent folder like this:

/Users/your-name/Documents/your-dev-path/ProjectOne

/Users/your-name/Documents/your-dev-path/ProjectTwo

and ProjectTwo refers to ProjectOne in the “Flex Build Path” settings, you’ll get this warning:

Source path entry, ‘/Users/your-name/Documents/your-dev-path/ProjectOne’, is a subdirectory of source path entry, ‘/Users/your-name/Documents/your-dev-path/ProjectTwo/src’.

I don’t know about you, but compile warnings really bug me.  If there is really a problem, I’ll address it directly, but in this case, there is nothing wrong. So to remove this warning from your build, add this to your compile settings:

-allow-source-path-overlap=true

OSMF – Sprint 11 release now available (aka “FC1”)

Sprint 11 is the feature complete release of OSMF.  Lots of bugs were fixed for this release including the bug I mentioned in the Sprint 10 release blog post below about the MAST plugin and the SMIL plugin not working together.  In fact, in the AkamaiPluginSample all of the plugins are working nicely together.  This sample app has become the sample for demonstrating many of the OSMF plugins that reside in the OSMF repository.

For more details on this release, see this blog entry:

http://blogs.adobe.com/osmf/2010/04/osmf_fc1_released.html