g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Test and Publish Flash Catalyst Animation

At this point in our project, we have created our design file for the website header in PhotoshopR. We placed every design element on its own layer in the Photoshop Layers panel. When we imported our Photoshop design file into FlashR CatalystTM, 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.

Join us in the Flash forum.

Add Test+and+Publish+Flash+Catalyst+Animation to Twitter Add Test+and+Publish+Flash+Catalyst+Animation to Facebook Add Test+and+Publish+Flash+Catalyst+Animation to MySpace Add Test+and+Publish+Flash+Catalyst+Animation to Digg Test+and+Publish+Flash+Catalyst+Animation Add Test+and+Publish+Flash+Catalyst+Animation to Yahoo My Web Add Test+and+Publish+Flash+Catalyst+Animation to Google Bookmarks Add Test+and+Publish+Flash+Catalyst+Animation to Stumbleupon Add Test+and+Publish+Flash+Catalyst+Animation to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor