Using Catalyst with FlashDevelop

Adobe have just released the first version of Catalyst, a great addition to the Adobe suite which addresses the long-standing annoyances of skinning Flex applications.  Basically Catalyst allows you to take a PSD or AI file, chop it up into Flex components, optionally add some interactions and then export the whole shebang info Flash Builder 4 so you can start coding.  However, Catalyst only wants to save a Flash Builder readable FXP file which is no use for the likes of us who use FlashDevelop.  Luckily it turns out that FXP files are just normal zips of the Flash Builder code tree, so we can extract the assets into a FlashDevelop project using a simple script.  Note that you will need to download unzip.exe and put it into your path for this to work.

First of all create a folder called ‘fxp’ in the root level of your FlashDevelop project.  Then save your Catalyst project to this project (you can call it anything as long as it has an fxp extension).  Then create a text file, also in the root of your project called ExtractCatalystProject.bat and put the following code into it:

   1: unzip.exe fxp/*.fxp -x html-template/* .* libs/* src/PrivateData.mxml mimetype

Now to import the Catalyst project into your application right click on the bat file and choose ‘Execute’.  Every time you make a graphical change in Catalyst run the script again to extract.  Obviously you’ll have to be careful not to make any changes to the generated code in FlashDevelop otherwise it will get overwritten next time you extract.

Obviously this is a very simple solution and there are certainly better ways to do this (C# script macro anyone?), but as a first solution this seems to work ok 🙂

Getting FlashDevelop intellisense code hinting to work with Flash CS3 v3 components

Just a quick post here in response to a query I recently got from someone.  Since FlashDevelop doesn’t have the source of the v3 component set the automatic code-hinting won’t work for components like fl.controls.Button or whatever.

In order to get FlashDevelop to pick up these classes do the following:

  1. In Flash CS3 open the File->Publish Settings… dialog
  2. Click on the Flash tab
  3. Select ‘Export SWC’
  4. Export your project
  5. In FlashDevelop right-click on the generated swc file and select ‘Add to library’
  6. Finally right-click on the generated swc file again, click Options… and select ‘External library (not included)

Et voila!  Code hinting for all classes contained within the swf.  If you add more components to the movie they should automatically be picked up by Intellisense.

UPDATE: In fact none of this is necessary – just choosing a Flash IDE project in FlashDevelop links in the appropriate libraries from the start.  Thanks to Philippe for pointing this out!

On a further note (and in reponse to a question posted on the FlashDevelop forum), if for some reason you are unable to turn off ‘Automatically declare stage instances’ in Flash and want Intellisense to pick up the objects on the stage you can hack this by re-declaring the instances in a separate namespace.  For example, if you have a TextInput component and a TextField on your stage you could do:

   1: public class TextEntryView extends Sprite {
   3:     namespace dummy;
   5:     dummy var textInput:TextInput;
   6:     dummy var textField:TextField;
   8: }

Now typing textField into the IDE will automatically pop up a list of available properties and methods like usual.