My first interaction design using Flash Catalyst
I installed CS5 on my laptop today. After my euphoria around all the exciting feature in Photoshop, I got around to my first love - flash platform 
. We have a new tool called Flash Catalyst shipping in Creative Suite. for the uninitiated, it is a new interaction design tool for Flex applications. This was code named 'Thermo' earlier.
In my first 10 mins with the tool I had already added states and transition effects to my application! While that may not really sound very productive from a designers perspective. My expertise lies in "Developer Art", hence this productivity is amazing for me .
Flash Catalyst is an awesome bridge between designers and developers. It can be used to import artwork from Illustrator and Photoshop and then bring the mockups to life. That said, Flash Catalyst can also be used to create new projects from scratch.
So here's a run through of my first experience creating states in Flash Catalyst and design interactions for your Flex application. Check out this nifty little app. When the button is clicked the rectangle rotates in 3D and moves across the screen. On the next click of the button, the rectangle moves back to its original position.
Start off by launching Flash Catalyst. A welcome screen greets us.
When prompted for a project name enter a name of your choice - its a free open world . Click OK and watch the tool show up the various panels available.
On the top right corner of the screen click on the Wireframe Components panel. Drag and drop a button from there onto the design surface in the center of your screen. Next, click on the Rectangle tool on the top right of FC and draw an rectangle on the design surface of FC next to the button.
We would like to animate this rectangle when the user clicks on the button and then bring it back to its original position when the user clicks on the button again. All Catalyst projects have a default state in the project known as Page1. We can go ahead and add a new state which duplicates the current state by simply clicking on the "Duplicate State" button in the "Page/States" panel.
A new state called Page2 is created. Select the rectangle and move it to the right. Note that a new transition appears in the Timelines panel at the bottom of FC. Select the transition and click on the "Smooth Transition" button. Further note that the current transition being edited is the transition from Page2 > Page1 (see highlighted transition on the left side of the Timelines panel.
We can configure the transition from Page1>Page2 by simply selecting the transition on the left and clicking on the "Smooth Transition" button.
So we have two states in our application, we've defined the transitions between the states - lets wire up the state change to the button .
Any easier than this, it would be happening automatically for you! .
Activate the select cursor by clicking on the cursor button on the top right corner of FC. Select the button and not that the Interactions panel on the right comes to life. Click on "Add Interaction". Next leave the first two default options and select Page1 in the "Choose State" combo and Page2 in the "When in any state" combo.
This has just configured the app such that when the button is clicked, if the app is in the state Page2, the state will will be changed to Page1. Similarly, add another interaction this time reversing the state selections. You should see a new interaction on the panel which reads - "Play transition to Page2 if in Page1".
Press Ctrl+Enter key to run the app. The app will be launched in your default browser. Click on the button to see your first animation come to life.
Finally, to add the 3D rotation, click on the Page1 > Page2 transition in the Timelines panel. Next click on the Add Action button and select Rotate 3D.
That's all there is to it! . Flash Catalyst, I believe has the potential to bring our the "dormant" designers in developers. Use it to freely express your creative side and create more interactive experiences for your Flex applications.
Enjoyyy!!!