|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