darqwan’s cookie jar..

    Beats me why writing code in year 2009 should be done with notepad and debug it with traces. Adobe thinks it’s ok for Flash developers to do it like that (no disregard for the impressive editor/debugger in the IDE though.. sarcasm should be noted if not obvious). There is a light a the end of the tunnel (Catalyst) and a neon above you and me since Flex Builder (aka Eclipse) CAN be used to publish/debug Flash files. Actually Adobe took a product (Eclipse) and made sure that it cant be used (by default) for anything else but Flex, even though with minor changes in Flash/their Eclipse plugin they could have passed the hack-me-now-or-cry-working level for actionscripting in Flash.
Story short goes like this:
    You need Flex 3, Flash CS4 (though I’m quite sure it can be done with prior versions of both products), you also need to install ANT in Flex. With a JSFL script, a build path for ANT and some settings in publishing the fla, we will be able to edit,build,debug from Flex. YEY!
Long story goes like that:

Code editing with Flex

1. Have Flex 3/Flash CS4 installed
2. Have a .fla ready (should have some .as files otherwise it doesnt make that much sense to use this procedure-hack)
3. In Flex create a new Actionscript project, you can use the default settings, just make sure that you add the SWC’s from Flash, depending of what you develop you might need to add files from either: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\libs, C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\FP10 or FP9, C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Components\User Interface or whatever SWC you use and want to have code completion for
4. If you used the default project structure when creating the flex actionscript project, you will have to move the fla+.as files that you have already to the src folder of the newly created project. At this point you can use Flex to edit the AS code. Already a big improvement in the process of Flash-actionscripting process.

Building Flash with Flex

5. The building/debugging parts are a bit nastier but worth the effort. Make sure that you add ANT in flex. The way to install any new components for Eclipse involves going to Help/Software Updates/Find and Install/Search for new features to install. There you chose the Eclipse project updates/Finish. You might want to install other stuff also, but for ANT chose Eclipse 3.3.2 (this of course if you dont have other patches installed)/Eclipse Java development tools.
6. With ANT you will be able to automate the process of building Flash from Flex. For this you need a build script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?xml version="1.0" encoding="utf-8"?>
<project name="Build SWF" default="compile" basedir=".">    
	<property name="flashIDE" value="C:/Program Files/Adobe/Adobe Flash CS4/Flash.exe" />
	<property name="file" value="file" />
	<property name="srcDir" value="D:/projects/flashproject/src" />
	<property name="destDir" value="D:/projects/flashproject/bin-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}/${file}.fla"/>
			<replacefilter token="%swf%" value="${destDir}/${file}.swf"/>
		</replace>
	</target>
</project>

    This actually just opens Flash with the file you set up there and also runs a JSFL script(that will do the actual compiling). Put this file somewhere in the project (where .actionScriptProperties/.project files reside is a good place). You already installed ANT so it’s a good time as any to feed the script to it. In Flex, open Window/Other Views/Ant/Ant. This adds tabbed window for ANT (by default in the right of the workspace area). You can add this build file there. Remember once everything is set up you will have to run the script from that window in order to build the .fla. If you have only one script in there you can always use the Alt+Shift+X, Q to run it.

7. In the last step we made possible for Flex to start Flash, to actually build/export this next JSFL script can be used.

1
2
3

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

Debugging Flash with Flex

8. First thing’s first.. Open the .fla in Flash, File/Publish Settings/Flash. Make sure you select the “Permit debugging” checkbox.
9. In Flex, go to Project/Properties/Run-Debug Settings. Either create a new configuration or use the existing one. Either way, Edit it. You can add source lookup paths, but that is not important if you moved already the files to the src folder. What you need to do is, in the Main tab, uncheck Use defaults for Url or path to launch and add to all three text boxes the path to your swf/html. (This should match the file exported in the JSFL script).
10. You need to install the debugging Flash Player to actually debug. It can be found here:
http://www.adobe.com/support/flashplayer/downloads.html
Depending on what you put in the text boxes at step 9, you need either the stand alone player if you put the swf or the activex if html and IE default browser or netscape version for firefox/chrome/opera.

happy, nearly proper, Flash actionscripting,
dw

Tags: Flash actionscript Flex

This entry was posted on Tuesday, April 21st, 2009 at 8:36 pm and is filed under Action Script. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.