In case you missed it, here’s part 1. In part 1 I showed you how to take your child’s artwork into Photoshop, chop, layer and label it, import that into Flash Catalyst and turn all that artwork into working components. If you follow all the way through these tutorials, you should have a working twitter search application built with your child’s (or your) artwork.

The final apps can be seen at the following links:  Joey Twitter and Ana Twitter.

And now on to part 2.

Flash Catalyst Interface

We’re going to now build the application states and transitions within Flash Catalyst. If you haven’t created all your components yet or are not sure how to do that please check out the first part of the tutorial. For this application, we’ll have 3 states: start, searchPage and searchResults. The idea is that the start page will show the Start button.  When that is clicked, the application will transition to the searchPage state where the user can enter their search terms to search Twitter.  When the user searches for something and clicks the search button, the application will transition to the searchResults page and display the results of the search. For fun, we’ll also hook up the signature button.  If it is clicked on the searchResults page, the application will transition back to the searchPage state. If it is clicked on the searchPage state, it will transition back to the start state.

Step 1: Rename the Page1 state to start.  Double-click on the Page1 name

Rename to Start state

and type “start”.  Now we’ll get the start state configured.

Step 2: Hide all the components that don’t appear in the start state.

In the Flash Catalyst layers palette, click on the eye icon next to everything except for the startButton layer.  Drag the startButton object to where you want it to be when the app starts.

The work area in Flash Catalyst should look something like below:

Completed Start state

That’s it.  The first state is complete.  You can run the project and you should see a browser with your application.  Only the start button should be visible.  It should also behave correctly as far as mousing over or clicking the button.  But right now it won’t do anything.  We need to make some more states.

Step 2: Create the searchPage state.

In the top left of Flash Catalyst, click on the + New Blank State button. The workspace will turn white and you should see a new Page1 state appear next to your start state.  Double click on Page1 and rename it to searchPage.

In the layers palette, make the searchButton, searchText and the signatureButton visible.  Move these components to where you want them to be for the search screen.

The searchPage state now looks like this:

Step 3: Create the searchResults state

With the searchPage state selected, click on he Duplicate State button.  Rename this state to searchResults. Make the dataGrid layer visible.

At this point, I dragged the signatureButton down (using shift to constrain to only moving vertically).

If you run your application now, you’ll be able to see that start button but you will not be able to see any of the other states.

Step 4: Create the transitions

Click on the start state in the state palette in the top left of the Flash Catalyst interface. Click on the start button.  On the right is an interactions tab.  Click on the +Add Interaction button.

Add Interactions in Flash Catalyst

By default this box is already set up almost how we need it to be.  In the CHOOSE STATE drop down, pick the searchPage state.

This tells the search button that when it is clicked the application should change to the state to the searchPage state.

We can also set up animations for this state transition from within Flash Catalyst.

In the lower left area of Flash Catalyst, find the timelines tab.  Look for the start > searchPage transition.  Click on the Smooth Transition button to allow Flash Catalyst to automatically create animations between states.

You can choose the amount of time the transition should take to play and also choose if you’d like simultaneous (all animations run at the same time) or smart smoothing (Catalyst makes things look cool).

You can also add your own animations to the transition effects.

You’ll also want to create transitions for the following states:

  • searchPage > start
  • searchPage > searchResults
  • searchResults > searchPage

On the searchPage state, click on the search button and add an interaction to transition to the searchResults state.

Also, on the searchPage, click on the signature button, and add an interaction to transition to the start state.  Make sure you indicate that you change the “When in any state” selection to searchPage. The signature button is going to behave differently in different states.

On the searchResults page, click on the signature button and add an interaction to transition to the searchPage state.

At this point you’ve got a “working” app that will let you click on the buttons and see the transitions between the various states of your application.  To see if it works and looks right, go ahead and run your application in Flash Builder.

Test Data:

You may notice that you’ve now got 5 copies of your data in the searchResults page.  Flash Catalyst will let you modify this data so you can see what your app would look like with a variety of data.

In the lower left of the Flash Catalyst interface, you should see a tab titled “Design-Time Data” next to the timeline.  Click on it and you should see the various pieces of information in your repeating element.

Flash Catalyst Design Time Data

In my example with my artwork, the Image 1 and Image 2 data will not change from one result to another.  To get rid of these pieces, double click on the Data List element.  Then double click on the repeated item. Then click to select the image or part of the repeated element that is not data driven.

You can select one or more of these pieces at once.  In any case, once you’ve selected the pieces that are not going to change from one result to another, click on the Remove Image from Design-Time Data.

When you look back at the Design Time data tab now, you should see only the parts that will change from one result to the next: the Tweeter’s picture, their name and their tweet.  In the design time data grid, you can now change the values including the images and text.  With a twitter app, it’s a good idea to make sure that a 140 character tweet will fit within the repeating data area so you could put in a 140 character message (put in all W’s to see the largest it should be).

Next, just test the app out again by running it.  If all the transitions are working and the data pieces are looking correct, then save your project.  The next tutorial will talk about how to get your Flash Catalyst project into Flash Builder and add in the Twitter functionality.

Look for part 3 to be posted soon.  Feel free to post comments and ask questions.

Thanks,

David Stockton

« »