Using a Photoshop project design in Flash Catalyst

Transcription

1 Turn layer visibility on and off by clicking in the eye Using a Photoshop project design in Flash Catalyst You must plan your project carefully and design each page with all the necessary components. Some components such as backgrounds and buttons can be used across many pages or states. Each new component should be in its own layer group layers containing related components. Photoshop Layers Window The order of layers can be changed by dragging up or down Keep button elements in groups One label is required and can be. changed in Flash Catalyst Duplicate your button and change its appearance for each state. The same button can be used with many different labels. Keep related elements grouped Graphics can be imported into a new layer

2 1. Creating the file a. Open Flash Catalyst b. Click Create New Project from Design File > From Adobe Photoshop PSD File. Browse to your PSD file and double click on the file name to select it. c. Don t change the standard import options. d. The Catalyst layer structure will be identical to the Photoshop layer structure. The visibility of layers not required for the opening page should be turned off by clicking the eye to the left of the layer.

3 2. Making an animated button a. In the Layers window, select all the button states (shift click). Right click on this selection and choose Group. b. Rename the new grouped layer. c. Select the title and the button group. Right click on the selection and choose Convert Artwork to Component > Button. d. In the Heads Up Device (HUD) select the UP state of the button

4 e. Right click on the text in the button layer and choose Convert Artwork to Button Part > Label. This will allow you to change the label on the button each time it is used for a different purpose. f. Select the Up state of the button and turn off the visibility of each layer except the up layer. g. Continue this process for all 4 button states. 3. Creating other instances of the button to perform different tasks a. Return to the main page by clicking the first name in the Breadcrumb Trail. b. Select the button component in the layers window.

5 c. Drag the button into position on the artboard d. With the button selected, rename the label in the properties window. e. Repeat this process for each button. 4. Creating new pages/states for your site a. Duplicate the Main page to create the other pages for your site. Rename each new page. b. For each new page click the eye in the layers window to show or hide layers for that page.

6 5. Adding navigation interactions to the buttons a. Select the button on the Main page and click +Add in the Interactions window b. This interaction is: On Click > Play Transition to State > Choose the required state from the drop-down list. c. If a button needs to be disabled (it may appear in the page it has navigated to), deselect the Enabled box in the button properties window. d. Repeat this process for each button e. If you require smoother transitions, experiment with the Fades in the timeline.

7 6. Creating rollover callouts a. Draw a white rectangle where you want to place the callout text and use the HUD to convert this to a Custom/Generic Component. b. Go to State 1 of this new component and rename it to Start. c. Select the text tool, draw a text box in the white rectangle and enter the text. d. Duplicate the first state and rename it. Make a new state for each callout.

8 e. Return to the Start State and turn off the visibility of both layers. f. Use the ellipse tool to draw a hotspot over the required area. Change the line and fill properties to empty. g. Use the HUD to convert this to a Custom/Generic Component and apply a Roll Over and a Roll Out interaction. You can also convert the cursor to a hand in the properties window. h. Continue this process for each callout. You can use the same hotspot component to trigger the callout. Run your project to view your work. Publish the project for distribution as a web site and/or a stand-alone Adobe Air application when you are happy with the finished product.