Flex 3 as CS3 development tool
I’ve played around a little with Flex 3 Builder. I love the FDT plugin to Eclipse. But I think it’s a little to expensive and for having a use for it I need the enterprise to get debugger functionality.
So I started to search and to play around with my Flex 3 Builder, why can’t I use this??? Well, as it looks like it’s actually possible.
I created a little video tutorial how to set it up. This is my first video tutorial so sorry if it’s a little strange. If anyone got some good tips of how to create video tutorials please let me know because this was harder than I thought. The files are very big so will try to record them all over.
1.) Compile CS3 core library
Watch the video (3.6mb)
1.1) Create Flex Library Project.
1.2) Copy the Flash CS3 fl.* package to project folder.
1.3) Go into Project Properties -> Flex Library Build Path
1.4) Mark the fl.* package to be build, then close window.
1.5) Done, now the Flex Builder compiles the SWC file.
– UPDATE –
You can download swc file from here
2.) Change Flex framework
Watch the video (19.2mb)
2.1) Find the Flex 3.0.0 SDK (inside Flex Application folder) and make a copy
2.2) In your copy change the name of the SDK inside flex-sdk-description.xml
2.3) Remove all files except the “player” folder in framework/lib
2.4) Inside the “player” folder, remove the swc file.
2.5) Copy the “playerglobal.swc” file from “Flash CS3/Configuration/ActionScript 3.0/Classes/” into the “player” folder.
– UPDATE –
Place the created/downloaded SWC file in same folder
————
2.6) Open Flex Builder 3 and open Preferences->Flex-Installed Flex SDKs.
2.7) Add new SDK and point to your SDK folder. Then click OK and close.
2.8) All done, you have a new SDK CS3 and Flash CS3 compiled fl.* package, start to work!
3.) Create a Project
Watch the video (11.0mb)
3.1) Create a ActionScript project.
3.2) Change the SDK to the one created in Step 2. Then hit next (NOT Finished)
3.3) Change tab to “Library Path” and add the SWC file created in step 1. Then hit Finished.
3.4) Create FLA file and save to project, add the Flex class as Document Class.
3.5) Open “Publish Settings” and Check “Permit debugging”.
3.6) Open Settings for ActionScript version. Unmark “Automatically declare stage instances”.
3.7) Now you all good to go. Example, add Textarea to stage and declare instance.
– UPDATED –
If you doing the updated tags, skip 3.3
4.) Debug a Project
Watch the video (9.4mb)
3.1) Flash CS3: Export your flash project with Debug -> Debug Movie
3.2) Flex: In the menu open debugger profile.
3.3) In URL;s remove default settings and point Debug to your exported SWF file.
3.4) Add a breakpoint in the code and run from flex debugger.
nice!
I have tried it out and it works great! You really are smart!
But you have to have a pause button in the videos!! You are to fast for me.
The Path for the “fl” folder for windows users
[Installation directory]:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface
Dude, that’s just awesome!
Now, is there a way of skipping the Flash CS3 compiling step, and use Flex Builder for doing the compile instead?
If you don’t need to work with the Flash IDE you can compile and build the application with “docroot” class. As you normaly do when building Flex sites.
But if you are dependent on Flash IDE for GUI graphics, animations and so on you need to compile with Flash =(
I see..
But now, I have another question. Is it possible to support both Flex and CS3 assets within the same project?
I mean, is it possible to have, somehow, a custom SDK that contains a playerglobal.swc that is a mixture of the playerglobal.swc from Flex CS3 and the playerglobal.swc from Flex SDK 3.0.0?
It would be interesting to, say, use a custom FlashCS3 component and a Flex UI interface within the same project…
Do you think it can be done?
Thanks in advance, Claudius
Flex can use Flash CS3 as assets, you for e.g. use a Flash file and embed fonts, graphics animations, skinning for Flex components and also create own components. Then load them with a stylesheet or embed when compiling.
On the other hand I don’t think it’s possible to run Flex components/classes in Flash (not sure but guessing). I’ve tried to replace swc files with no success. The playerglobal.swc is the basic Flash classes, flex uses another 10 swc files and I don’t think it’s possible to decompile to recompile a new set of playerglobal.swc. And if it is possible the question is if Flash CS3 compiler engine can handle it because of all the “special” little things.
To combine my suggestion is, make all the pretty nice stuff with Flash, use the Flash/Flex component to load all graphics and animations and build your applications on the robust and strong Flex.
Flash Component kit from Adobe
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1273018
Some inspiration
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1273018
thanks for nice tut Fredrick. im just wonder if know a workaround when you export a movieclip for actionscript and flash automatically generat class in the swf. when debugging in flex i get an error.
Do you mean when using the export setting “Automatically declare stage instances”?
Sorry no, there is no bridge for it, to use Flex and its editing power you need to turn this off and manually declare everything in your classes.
It can be a real pain sometimes, flex needs a relation to the classes to get the debugger/error helper to work. But look at it the other way! You will get a far better control of what is happening, a instance on the stage with a class attached is not declared as a movieclip but as the actual class and then flex editor helps your out with code hinting e.g.
Doing this way you will not get the error in flex because everything is declared correctly. Doing the other way Flex will complain but you can export your files with Flash without any problem. But if you are doing this way, I would recommend another editor as FlashDevelop (http://www.flashdevelop.org).
I know this is over a year old, but do you have documentation or where can I get the video demos now?
Sorry about that, fixed the links so the videos should work again.
For Flash CS4, the path to the “fl” folder on PC/Windows Vista is: “c:\Program Files (x86)\Adobe\Adobe Flash CS4\Common\Configuration\Component Source\ActionScript 3.0\User Interface\”