Printer Friendly Version

BellaOnline's Flash and Animation Editor

Building Webpages Along The Flash Timeline

If you have been following along with the previous tutorials, you should have sectioned your webpages along the Actions layer in the Flash Timeline. So far we have also added the images and text that will make up the Home webpage of your Flash website. Now we will continue to build the individual webpages. We will do this by adding a Keyframe on the Content layer for each webpage along the Timeline just as we did for the Actions layer. We will then add images and text to the Stage for each webpage.

Step 1. The Contact (Contact Us) Webpage. The next webpage we encounter along the Timeline is the Contact Us webpage. Click on Frame 10 on the Content layer. Now go to the Menubar and click Insert > Timeline > Keyframe to add a Keyframe. This Keyframe tells Flash to display new contents at Frame 10. Therefore, our next step is to remove the contents for the Home webpage and replace it with the contents for the Contact Us webpage. The Home contents should already by selected so just go back to the Menubar and click Edit > Cut. Aside from the navigation menu and the copyright notice, you should have a blank Stage.

Step 2. Add The Contact Us Content. Let's add a title and some images for the Contact Us webpage. Click on Frame 10 in the Content layer and then click on the Text Tool. Now click and drag to draw a text box at the center of the stage just under the menu. Set the Property Inspector for the Text Tool to the values below. Of course, you can use any settings you prefer for your project. Type in a title for this webpage.

Text Type: Static Text
Font: Arial
Size: 38
Color: 000000 (Black)
Style: Bold
Align: Center

If you wish to add any graphics to your Contact Us webpage use the same Import to Stage method you learn previously. In the example, I placed the title above Fred the Frog and used a cartoon balloon image to make it appear that we is talking. But of course, you will want to add your own special touches to your webpages.

That's all we will add to this webpage for now. We are going to add the major text for the webpage in a future tutorial.

Step 3. Next Page Please. To begin working on the Artist webpage, use the Selection Tool to click on Frame 20 on the Content layer. Now add a Keyframe as you did before. We need to change the title for this new webpage so click on the Text Tool and select the text in the text box. Change the text from Contact Us to Artist Bio (or the title of your choice). Remove any images and/or replace them with new images for this webpage.

Step 4. The Rest Of The Story. Now you can repeat the previous steps for each webpage along the Timeline.

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

Step 5. Time For Testing. Click on Frame 1 on the Timeline Header to set the Playhead back to the beginning. Now click the Shift and Enter keys on your computer keyboard to watch your webpages change as the Playhead moves along the Timeline Header.

Step 6. 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 © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor