Part 1: Flash Catalyst CS5

Launch Flash Catalyst CS5 and load the design you just created. You will see that Catalyst retains all the details.

Now one by one, you will have to tell Catalyst what is the function of each part of your application. In our example, we have a search box at the bottom, and search button next to it. So we select the area we want to designate as a search box and in the floating dialog with “Convert Artwork to Component”, we click on “Choose Component” and select “Text Input”. What we use this text input for and how we use it is something we will define later in our application in Flash Builder.

Now we select the search button and in dialog with “Convert Artwork to Component” we set this one to “Button”.  If you want, you can now double click the button to further define how the button will behave on hover and selection. We went ahead and added a blue glow to the magnifying glass in the hover state.

Now we must do something about our scrollbar. We select all the components of the scrollbar and convert it to a “Vertical Scrollbar” component. Now the vertical scrollbar is a complicated component, with multiple sub-components. So we will need to click on “Edit Parts” and define each element of the scrollbar. The scrollbar needs at least two parts to work: the scroll track, which is the long vertical area along which the scrolling takes place, and the thumb, which is the part of the scrollbar which moves. If you want, you can also specify an up button and a down button, as we have done. You need now worry about the implementation details, all of which will be handled automatically.

Next we come to the main part, the list of tweets. Here we select the vertical scrollbar, the border around the tweets and the single design of the tween and convert them to a “Data List” component. Now, the data list component only needs one part defined in it, which is a sample item that will make up the list.  We select our tweet and set it as a “Repeated Item”. We again have the opportunity to select what this list item will look like on hover and selection.

We are now done!
You can now switch from design mode to code mode to see your work. You can test the file if you want, by pressing Ctrl+Enter or clicking on File->Run Project and the file will launch in the browser. Save this project file in a known location, next we will be opening it in Flash Builder.

Want more? Subscribe to Digit and get the month's most relevant news, feature articles, DVDs with latest softwares and a learning guide called Fast Track.