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

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Add Content For The Home Webpage Of Your Flash Website

Now that we have positioned the keyframes for the webpages along the Timeline of your Flash website, we are finally ready to build the individual webpages themselves. We will do this by adding the images, text, buttons and etc. onto a new layer that we will call Content.

In this tutorial, we will add the specific content for the Home webpage. Because the keyframes that we added to the Timeline in the previous tutorial are what control each webpage, we will add or change the Content layer for each webpage at each corresponding keyframe. If you remember, these keyframes are at 10 frame intervals along the Timeline.

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

In this tutorial we will add the content for the Home webpage, so we will be working at Frame 1 on the Timeline. Open your .fla file into Flash and let's get started.

Insert Layer Button
Step 1. Add Content Layer. We want the Content layer to be above the Recurrent layer, so click on the Recurrent layer and then click the Insert Layer button. Name the new layer Content. You will notice that Flash automatically fills in the 60 frames in the Content layer.

Step 2. Add Home Webpage Images. Click on Frame 1 of the Content layer and you will notice that a keyframe has already been inserted. First, we will add any images onto the Content layer. There really isn't any reason for adding images first except that I am extremely visually oriented. My creative process always begins with images and then I add the supporting content around them. You may want to do the next few steps in the opposite order depending on your own creative process.

To add the images, you will use the same steps that you learned in the previous tutorial about importing the navigational menu image onto the stage. After you use the File > Import > Import to Stage command, you can click and drag your images with the Selection Tool or use the directional arrows on your computer keyboard to refine their placement on the stage.

In the example, I placed my two logo/trademark images at opposite corners of the stage. I also decided to keep the frog in the same location on each of the webpages throughout my site. So I took this into consideration when placing him on the Content layer for the Home webpage. You may decide to keep certain images visible throughout your site and others only visible on certain webpages. If so, you will want to place the permanent image(s) on the Content layer first and build the rest of your Home webpage around that image(s).

Step 3. Add Text. Next we will add any text onto the layer. If you need to refresh your memory, check out the previous tutorial about adding static text to the Flash stage. For each block of text set the Text Tool attributes, draw a text box, and type the text. Then you may want to adjust the size and placement of the text box.

In the example, I only used four words which summarized the main features of my site (Author, Gallery, Weblog and Ebooks). I also used the Modify > Transform > Free Transform command to rotate some of the words to add interest to the page. You may also wish to add buttons or animations on your Home webpage. Check the previous tutorials for instructions.

Step 4. Group All Objects and Convert To Symbol. You may wish to group all of the content for your Home webpage together and then convert the group into a symbol. Click on Frame 1 on the Content layer to select all of the objects on that layer. Then click Modify > Group. Finally click Modify > Convert To Symbol. In the Convert To Symbol dialog box set the Behavior to Graphic and name the symbol ContentsHome. You will see that the symbol has been added to your Library.

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

Macromedia Flash MX 2004 Workspace

Add Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website to Twitter Add Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website to Facebook Add Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website to MySpace Add Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website to Digg Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website Add Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website to Yahoo My Web Add Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website to Google Bookmarks Add Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website to Stumbleupon Add Add+Content+For+The+Home+Webpage+Of+Your+Flash+Website 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