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

Autism Spectrum Disorders
Mental Health
Blogs / Social Networking
Kidney Disease
Today in History

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Section Your Webpages Along The Flash Timeline

In the last tutorial, you created a button template and then the menu buttons for your Flash website. You should now have all the buttons in place in your navigational menu area. Now we will work on the Timeline of your Flash website. If you look at the Timeline it should have one layer labeled Layer 1. This layer contains your menu background image, the buttons and the copyright information at the bottom of the webpage. In fact, it contains everything you have added to your Flash website so far. This layer is deserving of a better name than Layer 1. Let's rename this layer Recurrent to indicate that the contents of this layer should be visible throughout the website.

As you can see, there is only one frame in the Timeline so far. We will now divide the Timeline into sections that will represent the webpages of your site. We will do this on a new layer that we will call Actions. Although we will lay out the sections in a linear fashion that does not mean that your readers must view these webpages in this same linear order. This is just a way for us to visualize the webpages of your Flash movie. Open your Flash .fla file and let's get started.

Step 1. Rename Layer 1. Double click on Layer 1 and rename this layer Recurrent.

Insert Layer Button
Step 2. New Actions Layer. Click on the Insert Layer button and Flash will create a new layer above the Recurrent layer. Rename this new layer Actions.

Step 3. Frame 1 Is Home. We will designate Frame 1 in the Timeline as the Home webpage. So click on Frame 1 in the Actions layer. You will notice that it already has a Keyframe (look for the little white circle) but we still need to label the frame Home. Go to the Property Inspector and type Home in the Frame label box. You should see a tiny flag appear in Frame 1 on the Timeline.

We need Flash to stop at this Home frame and display the webpage for the reader. We will tell Flash to stop here with a simple Stop action. In the Actions Panel, click on Global Functions to expand the menu. Now click on Timeline Control to expand the menu again. Finally double click on stop and you will see the ActionScript stop(); appear in the Script pane to the right. Also there is now a small a in Frame 1 on the Actions layer.

That's all you need to do to designate a frame on the Timeline as a webpage. So now you need to do this for each webpage of your site. To make it easier to work along the Timeline let's place your webpages across the Timeline in 10 frame intervals.

Step 4. Play It Again Sam. Frame 1 on the Actions layer should still be selected. RIGHT click on Frame 1 and choose Copy Frames from the pop-up menu. Now go over to Frame 10 and RIGHT click again and choose Paste Frames from the pop-up menu. You now have two frames labeled Home. We need to change the label on Frame 10 to Contact. Repeat this for each of your webpages.

Frame 1 will be Home
Frame 10 will be Contact
Frame 20 will be Artist
Frame 30 will be Products
Frame 40 will be Weblog
Frame 50 will be Portfolio

Step 5. Add Ten At The End. Add 10 more frames after Frame 50 - Portfolio. RIGHT click on Frame 60 in the Actions layer and choose Insert Frame from the pop-up menu.

Did you notice that as we moved along the Timeline the beautiful work you did on the Recurrent layer disappeared. Let's bring it back.

Step 6. Bring It Back. Go to the Recurrent layer and RIGHT click on Frame 60. Choose Insert Frame and it's all back again.

Step 7. Save Your Flash Movie. You can now save the new additions to your movie. Click File> Save.

Macromedia Flash MX 2004 Workspace

Add Section+Your+Webpages+Along+The+Flash+Timeline to Twitter Add Section+Your+Webpages+Along+The+Flash+Timeline to Facebook Add Section+Your+Webpages+Along+The+Flash+Timeline to MySpace Add Section+Your+Webpages+Along+The+Flash+Timeline to Del.icio.us Digg Section+Your+Webpages+Along+The+Flash+Timeline Add Section+Your+Webpages+Along+The+Flash+Timeline to Yahoo My Web Add Section+Your+Webpages+Along+The+Flash+Timeline to Google Bookmarks Add Section+Your+Webpages+Along+The+Flash+Timeline to Stumbleupon Add Section+Your+Webpages+Along+The+Flash+Timeline 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 © 2015 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
Image Preparation for Holiday Intro Video

Holiday Season Motion Graphics Storyboard

Understanding Video SEO by Ian Lurie

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor