Recently I was working on a project that due to a requirement had to be compiled in Flash CS3. Having spent the last few years exclusively using FlexBuilder I was shocked at the HORRIBLE AS3 editor and debugger in Flash CS3. I quickly tried to figure out how to edit and debug from FlexBuilder 3. I got some help along the way, and wanted to share the process.
Step 1: (FB3) Create a new ActionScript project in Flex Builder 3 and give it a name.
Step 2: (Flash CS3) Make a new Flash CS3 project, save it in the SAME DIRECTORY as the AS3 project.
Step 3: (Flash CS3) Open up File --> Publish Settings in your Flash CS3 project and select "Permit debugging".
Step 4: (Flash CS3) Click on the Settings button and enter the name of your main AS3 class. If your main AS3 class is not in the same directory as the FLA then add the directory as a Classplath. Click the green check mark to validate the class location.
Step 5: (FB3) Write a bit of code and put in a break point.
Step 6: (Flash CS3) Compile a debug version of the SWF. The breakpoint you entered in FB3 will be compiled into the SWF. After it compiles and opens in the Flash CS3 debugger just close it. The SWF should have been compiled into the root of your FB3 project. I had to quit FB3 and reopen it for the SWF to show up.
Step 7: (FB3) Make a new debugging profile that points directly to the Flash CS3 complied SWF (NOT THE FB3 SWF in the bin directory).
Step 8: (FB3) Debug with your new profile.
If the debugger times-out and does not connect you may need to configure the debugger setting in your Flash Player. Do this by rt-clicking on the SWF and selecting Debugger.
This workflow allows for you to use the code hinting and debugger in FlexBuilder 3 even when compiling in Flash CS3. Let me know if you run into any problems.
Special thanks to Melih Elibol who helped me with some of these steps :).
--jason
[...] The Morphic Group » Blog Archive » Using FlexBuilder 3 to debug & edit Flash CS3 projects Recently I was working on a project that due to a requirement had to be compiled in Flash CS3. Having spent the last few years exclusively using FlexBuilder I was shocked at the HORRIBLE AS3 editor and debugger in Flash CS3. I quickly tried to figure out how to edit and debug from FlexBuilder 3. I got some help along the way, and wanted to share the process. [...]
Great tip!
Some notes for others trying this. I couldn’t choose the Application file for some reason in the dropdown first seen in step 7. Not sure why. But I manually edited the .actionscriptProperties file manually. Instead of
<— no application in this node
showing that no application file was selected (empty applications tag)
which it happily worked with. Very neat.
ah it stripped all the xml out :-(
lets try this again.
It went from:
<applications/>
to
<applications>
<application path="SendMeAToy.as"/>
</applications>
<applications>
<application path="MyAppFile.as"/>
</applications>
First, Jason and Melih, I love you.
Secondly, Michael, I had the same problem. I wasn’t given any options to select the Application file in the dropdown seen in Step 7.
So before Step 7, I solved this by Right-clicking my document class .as file then selecting “Set as Default Application”.
A note to Jason: I had to right-click and “view image” on some of the images on this blog entry in order to see the whole image.
Wow this is so cool !!
But how do i access / reference the movie clips within the fla ???
k3ch0ng, you have to declare the clips as variables in the main document class, or associate them with their own classes. I like to add an underscore to the clips on the flash timeline, then declare them in the class file as follows:
public var myClip:MovieClip = _myClip;
Flex Builder will now auto-complete your clip instance names. If you associate them with their own classes and type them appropriately (public var myClip:MyClip = _myClip) then you can access their public properties from the document class. One caveat though–the flash player will not let you access clips that are created on the timeline from within the document class constructor. You can get around this by listening for added to stage events or just waiting until frame 2 to execute your functions.
Parker
I hope I ain’t gonna sound like a total clueless guy who shouldn’t touch computers for the rest of his life :-), but I can’t figure out how the heck did you created the .fla file. (Step 2 in the above process.)
I just installed Flex Builder 3 and was trying to write a basic HelloWorld application (pretty much as the one used in the example here). So far, I was unable to run it in Debug mode.
So, if the good blogger who wrote the above step-by-step procedure could actually provide more clarification on how to create the .fla file (first screen capture in the second step), well, that would be much appreciated.
Thanks!
A Note for above post by FlexNewbie. I hope u figured this by now but you got to make .fla in Flash CS3 offcourse. Isn’t this post about debugging Flash CS3 projects ;) ?
Read Step-2 again:
Step 2: —>(Flash CS3)<— Make a new Flash CS3 project, save it in the SAME DIRECTORY as the AS3 project.
and I have a Q myself, will this work with Flex Eclipse Edition? I am gonna try.
[...] Using FlexBuilder 3 to debug & edit Flash CS3 projects « The Morphic Group Recently I was working on a project that due to a requirement had to be compiled in Flash CS3. Having spent the last few years exclusively using FlexBuilder I was shocked at the HORRIBLE AS3 editor and debugger in Flash CS3. I quickly tried to figure out how to edit and debug from FlexBuilder 3. I got some help along the way, and wanted to share the process. [...]
Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.
Great Post! This will make debugging my flash apps so much easier! Thank you!
Thanx for this most useful post. It works too with flash builder 4 beta 2.
Thanx again!