Throughout this book, you have created content that will ultimately load into the Tech Bookstore site at different pointssome when a user first clicks a button, and some when the application first loads up. This decreases the amount of information you have to store in the main Flash SWF file, particularly some of the components that can quickly bulk up the size of your SWF file. So let's add the rest of the content into the Tech Bookstore.
Open bookstore13.fla if it isn't already open, and save a new version of the file by selecting File > Save As. Save the new document as bookstore14.fla.
Make sure that this file is saved in the TechBookstore folder on your hard drive. You can also find a copy of bookstore13.fla on the book's CD-ROM if you would rather begin with that file instead.
When you are placing the content in this exercise on the Stage, make sure that you leave enough room for the menus to drop down. Drag a horizontal guide to approximately 140 pixels on the vertical ruler. Place all new content below this guide.
Add a Loader component instance on the home layer. Resize the component instance to 580 by 345 and give it an instance name. Resize the component to the size of the home.swf document (which is 580w by 345h) that the component will load in. Remember, you produced home.swf in Lesson 9.
The home layer is in the pages layer folder. The Loader component instance is to load in the content for the Home page, which is in an external SWF file.
Expand the Components panel and drag an instance of the Loader component onto Frame 1 of the home layer, which is within the pages folder. Give the component an instance name of home_ldr and position it on the left side of the Stage under the navigation.
You can leave the component at its default size and let Flash resize the instance when the content loads in. It is often easier to size the component manually because it allows you to see where the content will load in relation to the other instances on the Stage. Also make sure that scaleContent is set to false. If it is set to true, your content will resize and this can end up distorting it. Text can look horrible after it is scaled. Set the contentPath for the Loader component to home.swf in either the Parameters tab of the Property inspector. This is the URL of the content you want to load into the component.
There are three properties you can change for the Loader component using the Property inspector:
For each of the sections in the website, you want to make sure that the autoLoad is set to TRue and the scaleContent is set to false.
- autoLoad: Determines whether or not the content should load automatically when the frame is loaded (true). If not, you have to explicitly call the load function (false).
- contentPath: The URL pointing to the content that should be loaded. This field accepts both relative and absolute URLs.
- scaleContent: Boolean (true or false) value that determines whether the Loader component should resize itself to fit the content being loaded (false) or whether the content should be scaled to fit the size of the existing Loader component (TRue).
Insert a new layer called catalog. Add a Loader component instance to the Catalog page. Resize the instance, set the contentPath, and position it on the Stage.
Insert a new layer directly below the home layer. Rename the new layer catalog. Insert a new keyframe on Frame 10, and delete all the frames on the layer after Frame 19 by highlighting them with the mouse, Right-clicking (or Control-clicking), and selecting Remove Frames from the contextual menu.
Click Frame 10 of the catalog layer in the Timeline and drag an instance of the Loader component onto the Stage. Give the component an instance name of catalog_ldr. Expand the Property inspector and set the contentPath to catalog.swf and then set the scaleContent property to false. Resize the component to the same dimensions as the catalog.swf document, which you produced in Lesson 9 and is 720 (width) by 345 (height).
Position the component so it is roughly in the center of the main content area, as seen in the following graphic.
Insert a new layer called reviews. Add a Loader instance on the Reviews page to load in reviews.swf. Resize and position the component as well as change its parameters.
Insert a new layer directly below the catalog layer. Then insert a new keyframe on Frame 20 of the layer by pressing F6 and delete all the frames greater than Frame 30 on the layer. Highlight the frames with the cursor, Right-click (or Control-click), and select Remove Frames from the context menu.
Click on Frame 20 of the reviews layer and drag an instance of the Loader component onto the Stage. In the Property inspector, set the instance name to reviews_ldr and set the contentPath property to reviews.swf. Then set the scaleContent property to false. Resize the component to 720 by 360 and position it in the middle of the Stage.
Insert a new layer called tour. Add a Loader instance on the tour page to load in tour.swf. Resize and position the component and change its parameters.
Insert a new layer directly below the reviews layer. Then insert a new keyframe on Frame 30 of the layer by pressing F6 and delete all the frames greater than Frame 40 on the layer. Highlight the frames with the cursor, Right-click (or Control-click), and select Remove Frames from the context menu.
Click on Frame 30 of the tour layer and drag an instance of the Loader component on to the Stage. In the Property inspector, set the instance name to tour_ldr and set the contentPath property to tour.swf. Then set the scaleContent property to false. Resize the component to 720 by 360 and position it in the middle of the Stage.
Insert a new layer called news and add a Loader instance to the Stage. Give the instance an instance name and then resize and position it on the Stage.
Insert a new layer, rename it to news, and make sure that it is directly below the tour layer. Click Frame 40, insert a new keyframe by pressing F6, and then remove all the frames on the layer that are greater than 49.
Click Frame 40 of the news layer and add a Loader component. Give the component an instance name of news_ldr, set the contentPath to news.swf, and set scaleContent to false. Resize the Loader instance so it is 635 wide by 345 high and place it in the horizontal center of the News page.
When you are finished, the Timeline should look similar to the following figure.
Give the Loader instance already on the map layer a new instance name.
The Map page already has a Loader component on the Stage from a previous lesson. Click the instance, and in the Property inspector give it an instance name of map_ldr and set the scaleContent property to false.
Add any additional graphics or text to the Tech Bookstore site.
Before you finish up, you might want to add some static text on some of the individual pages just to dress things up a little bit. Of course, this step is completely optional.
Clean up the library. Then test and save the changes that you made to the FLA file. If one of the SWF files does not load, make sure that it is saved in the TechBookstore directory, and that the SWF file's filename is entered correctly (without typos) into the Property inspector for the particular Loader instance.
Move any of the new graphics or symbols you might have created, and the new components into their respective folders in the library.
At this point, you can test the entire Tech Bookstore application. Press Ctrl+Enter or Cmd+Enter to test the SWF file in the testing environment or in a web browser window by pressing F12. Each of the sections should now have content load when you click one of the menu buttons to navigate to each page.