g
Printer Friendly Version

editor  
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



Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.



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


BellaOnline Editor