my.Opera FlexCoders

Things would be alot easier if Adobe had a special type of project you could create to take advantage of the Eclipse environment. Their isn't one, but I welcome anyone who builds a special plugin to make this process easier. I've come up with a simplistic workflow that I currently use. First you set up the project, then you need to set the debugging up and create a build file for your FLA file.

Creating the project
The first thing you need to do is create a new Actionscript project. In the creation process you will need to add the flash specific source paths for Classes and User Interface components.
On Windows the default locations are:

• C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\ActionScript 3.0\Classes
  
• C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface
  

If your FLA also uses the FLVPlayback component and you will be programmatically controlling it you'll need to add those libraries as a source path as well.

• C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\FLVPlayback
  
• C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\FLVPlaybackCaptioning
  

You will also need to add the directory where your actionscript files are for the FLA. After that set up any other source paths you need to for the project. The project is now set up, but you can't debug yet.

Debugging
One post I read about using Flex Builder to edit your actionscript for FLA files said to edit the HTML template for the project to point specifically to the SWF file created from the FLA file. This works, but if you have more than one FLA you could be editting in a project you would have to edit it every time you wanted to debug or profile a different SWF. Why not use Eclipse's built in run/debug/profile configuration tool?

Before you use the run configuration tool, you'll need to make sure your FLA's document class is set up as an application recognized by the project. If, like me, you tried to organize your document classes in folders you may have to edit the .actionScriptProperties file by hand. If you run into this and have questions, feel free to make a comment and I will respond.

To set up a new run configuration just left click on one arrow to the right of the Run, Debug or Profile icons. From the dropdown menu choose other. You should now be looking at the Create, manage, and run configurations screen. Don't worry, there isn't much to do and you only need to do it once for each FLA in the project.

1. The steps to set up debugging:
   
2. Right Click Flex Application and select New.
   
3. Give this configuration a name ( I use the name of the SWF )
   
4. Make sure it is set to the correct Project and set the application file to the Document class.
   
5. Uncheck Use defaults in the URL or path to launch section
   
6. Put the path(or URL) to the SWF( or HTML ) file in all 3 lines.
   
7. Click the Apply button and close the configuration
   

You can now debug the swf from the dropdown menu. The only inefficient thing is that if it opens up in the standalone player you need right click and select debugging then reload the movie clip to get it to connect to the debugger. If someone knows how to deal with this better I would be much appreciative. If only we could compile from eclipse without opening the Flash IDE.

Compiling
I hate to say it, but the Flash IDE has to be opened to compile an FLA file. The good news is that this can be automated with JSFL files.
The code I am currently using to automate this looks like this:

fl.openDocument( "file:///%fla%" );
fl.getDocumentDOM( ).exportSWF( "file:///%swf%", true );
fl.quit( false );

%fla% stand for the path to the, you guessed it, FLA file and %swf% stand for the outputted swf. This file is quite simple and handles everything automatically. Wouldn't it be nice if you could automate this with a keyboard shortcut? With ANT you can.

ANT is a build tool that is part of Eclipse and Flex Builder. It is a very adaptable tool that can do many things. Rather than try to explain all the possibilities, I'll put in a standalone file that works for me and let you change the variables as necessary. For the automation.jsfl file, use the code I supplied above.

<!-- Save this as build.xml in your project -->
<project default="compile">
<!-- Set Properties -->
<property name="flashIDE" value="C:\Program Files\Adobe\Adobe Flash CS3\Flash.exe" />
<property name="moviePrefix" value="myMovie" />
<property name="srcDir" value="D:/Projects/Workspaces/Flex Builder 3/myProjectTrunk/Flash" />
<property name="destDir" value="D:/Projects/Workspaces/Flex Builder 3/myProjectTrunk/debug" />
<property name="jsflFile" value="compile.jsfl" />
<property name="jsflTemplate" value="automation.jsfl" />

<target name="compile" depends="writeJSFL">
<exec executable="${flashIDE}" failonerror="true">
<arg value="${jsflFile}"/>
</exec>
</target>

<target name="writeJSFL" >
<concat destfile="${jsflFile}">
<filelist files="${jsflTemplate}" />
</concat>
<replace file="${jsflFile}">
<replacefilter token="%fla%" value="${srcDir}/${moviePrefix}.fla"/>
<replacefilter token="%swf%" value="${destDir}/${moviePrefix}.swf"/>
</replace>
</target>
</project>

For your convenience I attached the code here.
FB_FLA_compile.zip
Now with a ALT+SHIFT+X then a Q you can automatically compile this MovieClip. There are many ways to configure this ANT script. You could set up different compile targets to compile different FLA files, you could change the JSFL file dynamically ( like not closing the FLA file ).

Hopefully this will get you started with a workflow in Flex Builder for editing Flash actionscript files. If you come up with any improvements, I'd love to hear them in the comments.