logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Add Static Text To Craft Product Trailer Template

Drop Zones and Transitions in Motion 5

Craft Product Template - Background Layer

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor