At this point in our project, we have created our design file for the website header in Photoshop^R. We placed every design element on its own layer in the Photoshop Layers panel. When we imported our Photoshop design file into Flash^R Catalyst^TM, the images where maintained on their layers. Then working in Catalyst, we built the Start and End pages or "States" for our animation and positioned our design elements for the Start state. Finally, we used the Timeline controls to set the sequence and duration of the slide-in effects for each of our design elements.

We have tested our project by clicking the Play button on the Timeline. But we haven't tested it outside of the Catalyst workspace. Let's do that now.

1. From the menu, click File – Run Project.
   
   What do you see? Nothing happens! When the test page loads all that we see is the background image and the lower bar. The cards and company name do not slide-in as they should. This is because we need to tell Catalyst to run the animation when the file loads. Don't worry, there isn't any programming needed here. At the right under the Layers panel is the Interactions panel.
   
   
2. Click on the + Add Interaction button. You will see three new buttons.
   
   
3. Click on the first button called On Application Start to show the drop-down menu list. You will see that we only have one option in our list. So, this will stay set to On Application Start.
   
   
4. The next button and drop-down menu gives use a choice of actions. We want to play our animation until it reaches the End State. Set this menu to the action called Play Transition to State in the drop-down menu.
   
   
5. Finally, set the CHOOSE STATE drop-down menu to End. Then, click OK.
   
   Now that we have programmed the animation, let's test our animation again. Click File – Run Animation. Great, it works!
   
   We are ready to publish our header intro as a Flash SWF file. Catalyst does all the work.
   
   
6. Click File – Publish as SWF to open the dialog box. Use the Browse button to select an Output Directory. We don't want to build an AIR app or embed fonts. So, keep the default settings and click Publish.
   
   

Go to your output directory and you will find a folder with the same name as your Catalyst project file. Inside are two more folders. The deploy-to-web folder contains all that we need for our website header.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.