Beyond the Valley of Flash - Part 1

Intermediate Ant, Mtasc, and MX2004.
2005-07-28

Lots of cool stuff is happening with Flash lately. Macromedia has announced they will be working with the Eclipse foundation. The Mtasc compiler is a solid, free AS2 compiler. The flash 8 player beta is out, and you can create flash 8 files right now using Mtasc. Flashout and ASDT, along with Mtasc, allow you to compile swfs from Eclipse without requiring Flash MX 2004. Swfmill or KineticFusion allow for the creation of swfs via XML. These and other building blocks are opening the floodgates for Flash as a 'platform'.

Are these techniques actually viable production techniques? How useful are these to the average flash developer? Many developers tried the examples given in Carlos Rivera's Towards Open Source Flash Development. This great article shows how you can code swfs with just open source tools. The scope of Carlos' primer was huge, but most importantly, inspiring. The idea of being able to get away from Macromedia's sluggish recompiles was intriguing, and better yet, the tools are all open source. Alas, it was only a primer, a robust 'hello world' example, requiring a lot of configuration of tools just to make a 'hello world'. But what a world!

And so I hope to further Carlos' work, to help others go beyond Hello World and start making useful things with open source Flash tools. So please read his work before this.

Assumed Knowledge: Topics covered in Towards Open Source Flash Development and Ant for Flash Primer ( XML, Actionscript, Mtasc, Ant, MX2004).

Magical Flash Arsenal

Here's the full list of stuff you'll need installed:

For the purpose of this article, we will be examining a simple image slideshow application, and the files involved.

Configuration

  1. Unzip Mtasc somewhere.
  2. You'll need Flash MX2004 if you want to view the fla, not required.
  3. Install LuminicBox Log into your flash classpath.
  4. Configure Ant to work on your system.
  5. Modify the build.xml locations to match your paths.

Towards a Common Build File: Ant

Ant is the de facto standard for building Java applications. It will most probably become the de facto standard for building Flash applications. Carlos used a couple of Eclipse plugins and a lot of configuration to get his swf off the ground. Instead we will use Ant and <your favorite text editor here>. If you like Primalscript, here's a link. If you like Eclipse, great, Ant's built in. If you're a jEdit guy like me, you can download the Ant Farm plugin.

Using an Ant-centric approach allows you to build your flash in a way that is not as Eclipse-centric.Of course you can use Eclipse if you like, but the important thing is you can not use Eclipse if you like. Ant allows you to automate all the tasks you might have associated with building. For instance you can build a swf from xml using swfmill, then pass that file on to mtasc, then (re)build your API documentation, all in one go using Ant.

MX2004 isn't going anywhere.

Because this is an attempt to be more 'real world' in regards to Flash Development, we will assume that any swf that Mtasc will make will be based off a swf coming from MX2004. There are a few caveats when creating swfs using MX2004.

Building our Assets File.

We first start with our 'assets' swf. This is our MX2004-created swf which contains all of our fonts, images, sound, and components. Basically everything but our custom classes. We export the swf with all these assets. If you have code in there, don't worry Mtasc does not touch any code except classes.

For our intents, I've created an .fla that includes 3 pictures (exported in the Library as 'pic1','pic2','pic3)'. There is also an editable text field with Arial Bold which we will use to display the picture's name.

Ok, we've got our assets. Now we need a class that will function as our main code block and do something with our assets.

Re-introducing Mtasc

I say 're-introducing' because you should have already installed Mtasc and Ant from the previous tutorials. If you're skimming, these steps are covered in Towards Open Source Flash Development and Ant for Flash Primer.

Here is the main class, in it's entirety:

import LuminicBox.Log.Logger;
import LuminicBox.Log.ConsolePublisher;
import Picture;

class MainClass{
	private static var mainClass:MainClass;
	private var logger:Logger;
	private var clip:MovieClip;
	private var pics:Array;
	private var pic:Picture;
	
	public function MainClass(){
		//initialize variables
		logger = new Logger("Logger");
		logger.addPublisher(new ConsolePublisher());
		logger.log("MainClass Constructor Called.");
		
		clip = _root.pictures;
		
		//initialize array of pics
		pics = new Array();
		pics.push( { pic:"pic1",text:"Rock Pyramid"} );
		pics.push( { pic:"pic2",text:"Sunset"} );
		pics.push( { pic:"pic3",text:"Yellow Flower"} );
		
		//display the first picture.
		playNextPic();
	}
	
	public function playNextPic(){
		//grab the first element in pics
		var tmp = pics.shift();
		//create a picture element. Notice that this must not be locally scoped, otherwise Mtasc will delete it.
		pic = new Picture( clip, tmp.pic , tmp.text ,this);
		//push it back on the end
		pics.push(tmp);
	}
	
	public static function main(){
		mainClass = new MainClass();
	}
	
	public function log(msg){
		logger.log(msg);
	}
}

Overall, this looks like a normal Actionscript class. The only big difference is our use of the static main function. This is what Mtasc will call in the first frame of the movie, our insertion point. We'll cover a couple Mtasc issues in a bit, but this should all build nicely.

Building our swf using Ant.

Continuing in the tradition of MainClass.as, here's our Ant build file (build.xml):

<project name="Beyond the Valley of Flash" default="compile" basedir=".">
	<description>An example of how to use MX2004 content with Mtasc.</description>

	<!-- 	Modify the following properties to match your system. -->
	<!-- 	The location of the LuminicBox Log classes required for compilation. -->
	<property name="MyClassPath" value="C:\AsClassPath\Trunk"/>
	<!--	Note: If you don't have your own classpath set up, you may install 
		the LuminicBox classes into this directory, and set the location to equal "."
	-->
	
	<!-- The location of mtasc.exe -->
	<property name="mtasc" location="C:\Program Files\mtasc-1.09\mtasc.exe"/>
	<!-- The location of the flash standalone player -->
	<property name="flashplayer" value="C:\Program Files\Macromedia\Flash MX 2004\Players\SAFlashPlayer.exe"/>
	
	<!-- project specific files -->
	<property name="outFile" location="slideshow.swf"/>
	<property name="inFile" location="assets.swf"/>
	<property name="mainclass" value="./MainClass.as"/>
	
	<target name="compile">
	<echo message="Compiling ${inFile} into ${outFile}."/>
		<exec executable="${mtasc}" failonerror="true">
			<arg value="-cp"/>
			<arg value="${MyClassPath}"/>
			<arg value="-swf"/>
			<arg value="${inFile}"/>
			<arg value="-out"/>
			<arg value="${outFile}"/>
			<arg value="-main"/>
			<!--  <arg value="-v"/> -->
			<arg value="${mainclass}"/>
		</exec>
	<echo message="Opening flash player."/>
		<exec executable="${flashplayer}" spawn="true">
			<arg value="${outFile}"/>
		</exec>
	</target>
</project>


First we define our variables. We define the location of the LuminicBox Log classes (our classpath), and the flash standalone player. We then define a target which will run mtasc, then open up our new swf in the Flash Standalone Player.

Debugging our swf.

Since we aren't going to be working in MX2004, we need something to replace the Output window (if you haven't replaced it already). The LuminicBox Log is a great replacement for the output window, and you will not look back. The following lines in our MainClass.as example create and use the logger:

logger = new Logger("Logger");
logger.addPublisher(new ConsolePublisher());
logger.log("MainClass Constructor Called.");		
	

public function log(msg){
		logger.log(msg);
}


If you have the FlashInspector.swf file open when building, you'll get some useful information being logged:

Beautiful! Now we're coding, compiling and debugging. To go over the basic steps:

  1. Create your assets swf in MX2004(or others). All the animation, fonts, movies, sounds, etc.
  2. Create a class file (such as our MainClass) that works as an insertion point into our swf, and uses the swf assets.
  3. Use a debugger such as the LuminicBox Log as a replacement to the Output Window.
  4. Create an Ant build file that will automate the process of building the swf, opening the flash player ( and any other tasks you might require).
  5. Run the build file to create your swf. Use the debugger to debug it. Fix bugs. Repeat :P

In addition to these steps, there are some specific hiccups with this method that need to be addressed. And for that, on to Part 2.
 
 

©2004 Chris Hill. All Rights Reserved.Legal Crapola