Tuesday, June 8, 2010

Create a Flash Professional Project in Flash Builder - Part 2

In my previous post "Create a Flash Professional Project In Flash Builder Part 1" I talked about creating a Flash Professional Project starting from Flash Builder 4. In this post I am going to cover creating Flash Professional Project starting from Flash Professional CS5. Let me first go over the new "ActionScript 3.0 Class" and  "ActionScript 3.0 Interface" templates that got added to Adobe Flash Professional CS5.Do the following to create a new ActionScript 3.0 Class template:
  1. Launch Adobe Flash CS5.
  2. File > New and select "ActionScript 3.0 Class item as follows :



  3. Click OK.
  4. Since I have Adobe Flash Builder 4.0 installed on my machine, I got promoted with the following dialog that ask me to choose which product (Flash Professional or Flash Builder) to use to create my class.


  1. Enter a class name and select Flash Professional to create my class.
  2. Click OK.
  3. As you see below,a new ActionScript file gets created with a bare bone class code. 
  4. File > Save. Notice that the save dialog was automatically populated with the name of the class, in our case it is "MyClass" And notice it is going to automatically save it next to the Fla file by default unless user choose a different location.

Enough Talking about the class template and let's jump into creating a Flash Professional Project from Flash. Entry points to create FPP(Flash Professional Project) are :
  1.  Document Class edit class definition button : 
  2. Symbol (Movie Clip, Button, Bitmap, Font, Sound) class.
Let's create a Flash Professional Project using the document class "Edit class definition" button :

  • Launch Adobe Flash Professional CS5.
  • File > New and select "ActionScript 3.0" Fla file.
  • Click OK.
  • File > Save and save the Fla file inside a folder on your desktop.
  • Window > Properties to show the PI if it is not already there.
  • Enter a class name in the class name text field in the PI. Let's assume you enter "MyClass" as a document class.
  • Click on "Edit class definition". The first time you click on the document class "Edit class definition", you should get the following dialog :

  • Check on "Don't show again." and click OK.
  • Click on "Edit class definition" button again. You should get promoted with the following dialog :

  • Select "Flash Builder" and click OK.
  • Flash Builder is going to get launched if it is not already and you should get promoted with the Project creation dialog as follows :


Notice the following : 
  1. Target file is the Fla file where you triggered the project creation from.
  2. Default location is where your project is going to get created,Which is by default is the Flash Builder workspace. You can always change the location and point to a different location.
  • Click Finish.
  • Flash Builder is going to prompt you with a dialog to create your document class since it does not exist yet as follows :

  • Click Finish.
Results : 
  1. Flash Professional Project named after the Fla file name.
  2. Document Class "MyClass.as".
  3. Flash Professional Test Movie, Debug, Publish icons gets enabled.
  4. ActionScript class file named after the Fla file name. Flash Professional Project does not use this ActionScript file at all. It is just a Flash Builder project dependency and it has to be created.
See the below screenshot :
From here you can code in Flash Builder all you want and utilize all the good code editor features and Test Movie, Debug Or publish from within Flash Builder.
Enjoy!


12 comments:

  1. Nice. This doesn't work with CS4, does it??

    ReplyDelete
  2. No. This is a CS5 feature.

    Thanks,
    tareq

    ReplyDelete
  3. In CS3 I used Flex for writing / manahgin my actionscript code and The Flash IDE to build and design applications...

    Is it possible to keep the FLA file on a shared local server but setup Flash Builder so that the AS files used in that project actually live on my local machine?

    ReplyDelete
  4. Over the network fla files is not a supported workflow, but that does not mean it's not doable. I have not tried that myself. Please let me know the result when you try it.

    Thanks,
    tareq

    ReplyDelete
  5. It is so funny that we cannot develop a Flash Professional Project in Flash Builder 4, if Flash CS5 is not installed.

    If Flash Professional Project is a kind of integration binding fla into ActionScript Project. There should be some workarounds to integrate fla and swc into actionscirpt project. NOT ASKING the developer to BUY Flash CS5!!

    ReplyDelete
  6. This is seriously killing me. I checked the box for flash initially, and now I can't find a way to switch it to Flash Builder. Help?

    ReplyDelete
  7. @vmedium just open the preferences and click on "ActionScript" category and change "Class Editor" to Flash Builder.

    ReplyDelete
  8. how do i go about checking in a flash pro project in to svn and retrieving it. when getting the project i am asked to point to the target fla. but i want that in svn. and help?

    ReplyDelete
  9. Hi Tareq,

    If I use Flash Builder to edit my Flash Pro document class can I link to an outside library? I've failed so far. When I link, the library is relative to the Flash Builder path and not the Flash Pro path. The only way it seems to work is if I add a library path in Flash but if I do that I don't get any code hinting and it kind of defeats the purpose. Any suggestions?

    Thanks!

    ReplyDelete
  10. I thought I'd answer my own question for everyone since I think I've figured it out. If you want to add a source path for something like a tweening library in Flash Builder you need to add the path in BOTH Flash Builder and Flash Pro. If you try and add in Builder alone, Pro won't know how to find the package. One hint, if you add the additional Source path before you create the project in Flash Builder, Flash Builder will automatically add the path when it creates your project. You'll have to do that step manually otherwise.

    ReplyDelete
  11. Hello. I've been trying to use Flash Builder as the debugger for my Flash Professional project, but it seems no matter what I do, when I place a breakpoint in an *.as file, the debugger that gets used is always the one on Flash Professional. I'm using Flash Builder 4 and Flash CS5. This happens when I launch the project with the "Test Movie" button, which is the only one that works anyway, since when I try to use Run > Debug "name" I get the infamous "this file cannot be launched" error message.

    Ironically, using the FlashDevelop debugger with Flash Professional works perfectly, and it's the tool I'm using at the moment to develop.

    Any tips on how to fix this?

    ReplyDelete
  12. I know this is weird but for "Edit Class Definition" how to allow it to have that message once again.....

    ReplyDelete