At the Adobe MAX conference in San Francisco, Adobe passed out DVD's of both Flash Catalyst (code name Thermo) and Flex Builder 4 (code name Gumbo). These products together hope to bridge the gap between designers and developers, by giving designers the ability to control the look of the application and then handing off a project ready to be coded by a developer.

Designers can use the tools they are all ready comfortable with from creative suite. PhotoShop, Illustrator and Fireworks can all be used by Flash Catalyst. Catalyst in turn will convert the artwork into components that can be used in a Flex Builder 4 project. Also with Catalyst you can create multiple Pages for the project as well as states for the components you create.

This tutorial has been created with the version of Flash Catalyst that was distributed during the MAX conference last November. Since this is an early build of the software some features may change and others added before the final release.

Getting Started with Catalyst

When opening Catalyst you come up with the same kind of start screen you have in Flash or Flex Builder. From here you can open a PSD, AI or PNG file (PNG is disabled in this version). In addition to that you can open an FXG file. FXG is a new format that is XML based. Using XML it describes all the visual elements of a document. You can think of it similar to SVG but mapped to the features of Flash Player. So it will grow as the feature set of Flash grows in the future.

For our tutorial we will open up a PSD file. When opening, Catalyst will see that there are image, shape and text layers that can be editable. You have the option of keeping them editable or flatten them. For this example we will just keep them editable.

Once imported you can see the layers in the layers panel just like in PhotoShop, all your layers are there and can be edited.

As you go thought the tutorial, remember to save your files. The file format that Catalyst will be using is FXP. FXP is a Flex Project ready to be used by a Flex developer. All the visual states that will be created here will transfer over to the Flex developer.

Create Your Components and Button States

The Go button is made up of different layers. And I want to move them over a few pixels. You can go to the layers panel and highlight them all. Just shift-click until they are all selected. Then right click (control-click) and select group. Now that they are all grouped you can move them all in to position.

This will also bring up your HUD (Heads up Display) from here you can take your art work and create components from them.

From the HUD there is an option "Convert Artwork to Component". Once your button component has been created you can see the HUD change and ask you how you want that button to look like in each of those different states.

The Up, Over, Down and Disabled states are the different looks for your button. If you were to select "OVER" the top of the window will change to show you the different states of your button.

This is your Pages/States panel, similar to how flash can let you describe each state of a button. Here we are just going to create a quick highlight to the Over state. On the right you can select one of the drawing tools. Select the rounded rectangle shape. We are going to draw a round rectangle over the word "GO" and change the opacity to 50 from the HUD. This way when we roll over it in our Flex application it will highlight.

To change the view back to the main application just click the arrow pointing left under the button "Duplicate State". These are your breadcrumbs, similar to what you have in Flash when inside a symbol.

Now that we have one component created, we are going to do the same thing to what looks like an input text field. We want someone to put in their zip code or city in the field later but for now it's just artwork.

Select the words "Enter city, state or ZIP code" then select the outline around it.

Go to the HUD and select "Convert Artwork to Component" again, this time we will make a TextInput field. This will do the same thing that happened to our button. It grouped the layers and made a Flex component from it.

Events and Application States

On the right side of the HUD there is a plus sign (+) when clicked you can set up events for your components. When selected you have OnClick, OnRollOver and OnRollOut as your events, each of these events can have functions assigned to them.

If you were to click on it you could direct what the next state would be in your application then using the timeline at the bottom you could direct visually what the transition to that state would look like.

For our example we are going to make multiple states, and based on the results from the Yahoo! Weather service we will decide what state to go to.

One way to look at how Catalyst deals with states is to think of the first state "page 1" by default as the master page. All others could be sub pages. Similar to what you may have in a page layout program like Indesign.

Your first page is where you would position all your layers to their first 'keyframe' if you were to think of it in flash terms. The next state will be the final position of your layers for that state, so whatever you want to be visible or positioned in a different place you can do there. Catalyst will do your transitions (or tweens) for you.

Now that you have an idea of how the layers work. You can go into each layer group and set up your start position for your transitions. For some objects that you want to control at the same time it may be easier to group them together then position them and change the alpha.

At the bottom of our document we have the degrees, city, date, Celsius and Fahrenheit that will change when the data comes back from the web service. These need to all be text fields. Select each of these fields and change them to TextInput fields.

Now that you have your base ready we are going to create new pages or states of our application that we will transition to.

The first thing we will do is change the name from "page 1" to "Main" since this will be the main state of our application. Double click on the words "page 1" and rename it to Main.

At the bottom of the panel select "Duplicate State" this will make a copy of our current state that we will rename to "Foggy".

Once your new state has been created you can then position or change any of the properties (like alpha) of your layers to the end "keyframe" or where you want them to be when the transition is finished.

At the bottom of the screen you have your timeline panel. Similar to the timeline you would have in flash. This is where you would customize the transitions between states. In our example we will transition from Main to Foggy.

The timelines panel has a list of "State Transitions" so you can define the look from one state to any other state you create. In this case we have two scenarios from Main to Foggy and from Foggy back to Main. We will start with Main to Foggy.

At the bottom of the timeline panel there is "Add Action" this will let you add to your transitions. You can Move, Rotate, Fade, Rotate 3D or Change Properties. We will pick a simple Fade and Move.

After setting that up you can click the Play button at the top of the panel it will show you the transition between the Main state and the Foggy state.

On the left side of the timeline in red is your starting state (in this case Main) in blue on the right side is your new state. By clicking on the names for each state, Catalyst will bring you to that state to further edit the transition between the two.

You should be able to see the transition. In our application the transition will be based on the data coming back from our web service. To further illustrate how transitions work, let's now go back to our Main state and add an action to our button.

Go back to Main, click on your Go button. From your HUD select plus (+) and then select "OnClick".

Now you add your action from choosing from the dropdown menu, "Play Transition to State" once selected you can then choose the state you want to transition to. Currently we only have one state you can choose. You may notice that there is also the option to duplicate state to create a new one or create a new state entirely.

Now that you have chosen your state, you can see what this would look like in your browser. Select File>Run Project this will compile your move and launch your browser.

From here you can see that your Main state is the one you start off with. The highlight for the button works on rollover and when you click it will transition to the Foggy state.

Hopefully this will give you a good idea of what can be accomplished with Flash Catalyst. All of the presentation logic has been worked out and frees up our developer to write the Actionscript that will talk to the web service.

Duplicate States

Let's remove that action from the Go button in our main state. Select it again and go to the HUD. When it appears roll over the state that you are setting your transition to. On the right there is a minus (-) button. By selecting that you will remove the behavior created.

Now we can create the rest of the states for our application.

Duplicate the Main state again. This time call this Night. The image of the moon in the main state should have an alpha of 0, if not go over to main and make the change.

Now in the new state we can give it an alpha of 100. Select the image and go to the timeline panel. Choose add action at the bottom of the panel. This time we will select "Set Property".

The HUD will change and show you properties of the Object you can change. Select the alpha then move the slider to 100. The effect is the same as if you chose the fade option from the list. But now you know another way to working with your objects as you make transitions from state to state.

You may notice a slider at the bottom of the panel. This is for the speed of your transition. You can select how long you want the animation to run. Your panel gives you a little over 2 seconds for the animation. By using the slider you can adjust how long or short you want the animation to run.

At anytime you're unhappy with the results of a transition you can select that transition and delete it using the garbage can icon. Just like deleting a layer in Photoshop.

As you are creating more states you can see the list in your timeline growing where you can create transitions from state to state in every combination possible.

Each layer can be moved individually, so you can fade, move or rotate anything you like. For example the clouds in the "Sunny but Cloudy" layer are not grouped together; therefore they can be animated one by one, adding to the effect of the transition.

Note: It looks like the transitions are smoother if the alpha is set to 0 if you are doing a fade transition; it is also noticeable when doing a combination fade/move transition.

Using Gumbo

Once you have all your states set up, we will add some code using Flex Builder 4. Since this is a Catalyst tutorial and not a Flex tutorial we will quickly show off how this helps your Flex developer and add some code provided with this tutorial.

Open Flex Builder 4 (Gumbo) and from the File menu choose Import FXP. This is your Flex Project that was created by Catalyst.

The Flex Package Explorer on the left side if the screen will have the entire flex project that was just imported. Take a look at the src folder inside there is a folder called Default Project. This will have the main document of your Flex project, double click on the mxml file and load up your project.

This panel will also show the components and assets that were created using Catalyst separated by folders. By clicking on the arrow you can see everything that is in the folder.

From the design view you can see that the project created in Catalyst looks exactly the same here in Flex Builder.

On the top right there is the states panel. All the states that you created earlier in Catalyst can be found here ready to go. All the names you created show up and now a Flex developer is ready to code.

In this example we won't be doing much coding, just enough to get this example to work.

Stay in the design view for the next few steps.

Make sure the "Main" state is selected. Click on your text field and in the Flex Properties panel call it "cityZipField" in the ID field then select your "Go" button and name it "goButton". Giving the components ID names makes it possible to write Actionscript that will work with those components.

For the temperature field we will call that "tempField", the date will be called "dateYear", city will be called "cityState". The "C" and "F" will be called Celsius and Fahrenheit.

When changing the names here, it will also name the components across all of the states in your application.

If you control-click (right Click) on the src folder. Then from the context menu select New>Folder. Name it "as" and from there we are going to add some Actionscript. Then select the "as" folder, right click and choose New>Actionscript file name the file "YahooWeather" and select Finished.

With a text editor copy and paste the Actionscript into this document. It contains everything you need to get the weather widget to work.

Now we need to add one line of code to tie our visuals and code together.

Click on your mxml file, go to the source view. Scroll up to the top if you are not there all ready. Right under the line <FxApplication> add a <Script> tag.

Your script tag will have one attribute, source. From here point to your YahooWeather.as file. Your tag should look like this:

<Script source="as/YahooWeather.as" />

Notice the forward slash before the ending brace to signal that there isn't a closing tag.

We just need to make one more adjustment to get things running. In your FxApplication tag make a space inside the tag to add one more attribute. This attribute will be called "creationComplete" this is a function that Flex executes when the application is ready to go. We are going to assign a function from our Actionscript file to it called "init()" so your tag should partly look like this:

<FxApplication creationComplete="init();" …

That's it. Click Go over to the Run pull down menu and select your project. This should open your browser and run your application. Throw in some zip codes and check the weather all over the country. If you don't see a state change, it may be that the weather condition returned from the webservice, had not been added to the ActionScript. Running the application in debugger mode will show you all the information coming from the Yahoo! Weather Service and you can adjust the ActionScript based on that.

In this release of Catalyst we don't yet have the option of making this an AIR project. The option is grayed out so expect that in a future release.