Tuesday, December 02, 2008

Flash Catalyst Tutorial: Weather Widget, Part 3

Download the file for this part here:
Previous tutorial posts:
Part 2
Part 1


In this part of our project, I will begin to skin the widget with a graphical treatment similar to the Apple iPhone application. We'll be designing our skin in Adobe Illustrator due to the supported round trip features in the beta release. Normally, I would design these type of skins in Fireworks - I'm more familiar with the drawing and creation tools in Fireworks.

In Illustrator

  1. create a new document in Illustrator

  2. draw a black background box on the stage 250px wide x 400px tall to match the size of our widget

  3. draw a rounded rectangle that is slightly smaller than the background box with a dark blue color and a heavy light colored border

  4. name this layer with an appropriate name - blueBack

  5. copy blueBack layer and paste. change the color to a grey color for the background and for the lighter rule. this background will be for the 'back' of our widget

  6. name this layer - greyBack

  7. create 7 rectangles 230px wide x 30px tall for the background color of each of the days in the list

  8. alternate the color of the seven rectangles to represent an alternating list of items

  9. name these rectangles row1-row7

  10. create a small white circle in the lower right corner of the interface for the 'flip button'

  11. place the text 'i' on the white circle to represent 'info'

  12. group the white circle and the 'i' and call the group infoButton

  13. save your work

Uploaded with plasq's Skitch!

Rather than starting from scratch with an import of our Illustrator document, we'll be copying and pasting our design elements into our current work in the Catalyst document.

In Illustrator

  1. select the blueBack and row1-row7 layers

  2. copy these layers

  3. switch to Flash Catalyst

In Flash Catalyst

  1. click on the direct select tool - the white arrow

  2. double click on the cityComponent to edit it in place - you should see the grey chevrons around the component and see the crumb trail in the upper left and see cityComponent as the right most item

  3. paste the copied Illustrator items in the cityComponent

  4. to make the items easy to move, group them and name the group graphics

  5. move the graphics layer to the bottom of the list in the component's layers

  6. adjust the position to your liking

Uploaded with plasq's Skitch!

At this point, you should see the background image in place with the day components laying in place over the rectangles for the alternating days. You might need to adjust the position of those layers to space them evenly. You can do that either in Illustrator or in Catalyst. Next we'll define our info button graphics.

In Flash Catalyst

  1. select the direct select tool - white arrow

  2. double click on the round button in the lower right of the interface

  3. in the HUD click on the 'edit button appearance' 'up' button. this will open up the four states for the button component and list the button in the crumb trail

  4. briefly switch to Illustrator and copy the infoButton graphics group

  5. switch back to Catalyst and paste the graphics into the 'up' state for the button

  6. paste the graphics in each of the button states or select the small colored box in the layers palette for each of the states to copy them over

  7. change the colors of the background layers for each of the states by selecting the state and selecting the background layer. change it's color with the HUD

Uploaded with plasq's Skitch!

To make the rounded rectangle background stand out a bit more, we'll add a black background to the component in both states. You can either draw this layer and put it to the lowest layer in Catalyst, or draw it in Illustrator and copy and paste it like the steps above.

For the second state - chooseCity - we'll want to have a background with a rounded rectangle that has a bit of a different color to it to make the transition from the front to the back more dynamic. We created a greyBack layer in Illustrator so copy and paste that layer to the back of the choose city state. It should be placed to the bottom of the cityListGroup in Layer 1 in the layers palette.

If you test the application you'll see the blue background in place with the button graphics. Click on the button to see the transition we've previously built with the 'backside' color applied.

No comments: