| The previous example demonstrated that Flash 8 Basic has the capability to load JPEG (or GIF's and PNG's if you prefer) files into a SWF file on the fly (or dynamically) at runtime. Besides loading JPEG images, Flash can also load other SWF files into movie clips on the fly. In everyday practice, a Flash application is broken out into many SWF files that are loaded when a user requests them, and each SWF file contains a specific category of content. Like externalizing images, breaking your Flash application into smaller content modules that are loaded on demand keeps your application file size manageable and makes it easier to update content. When you have smaller content modules, you only update the SWF file that's being changed, rather than the whole application. Like JPEG images, these smaller content SWF files can be loaded into movie clips. Flash 8 does, however, come with a special prebuilt component that makes the process a little easier, because you can add the component to your document without adding a behavior or ActionScript of your own to tell it to go and retrieve the external SWF file or JPEG image. This component is called the Loader component. The Loader component allows you to easily embed SWF files or JPEG, PNG, or GIF images into an SWF file without having to write any ActionScript or add a behavior. All you have to do is drag an instance of the Loader component onto the Stage; once the component is on the Stage, you alter a special parameter on the Property inspector called contentPath, which tells the component where to get external data to load up. When the component is fully drawn in the SWF file, it will go and get the external content without being told and then display it. Of course, you can control that retrieval of external content with ActionScript if you need to be fussy about when that process occurs. Note The Loader component does make it easier to load up external SWF files or JPEG images. It has a dark side, though: It adds extra file sizeto the tune of 25K. You can reuse it as often as you like, though, without it adding any further size to your application. In this exercise, you will learn how to load the SWF file you created in Lesson 2 into the Loader component. Specifically, you will be using the Loader component to load map.swf, which was initially created in Lesson 2, into the SWF file. 1. | Select Frame 60 of the map layer and add a Loader component to the Stage. On the main Timeline, select Frame 60 on the map layer, which is labeled map. The frame is already a keyframe and has a couple of text fields for the address and map title already positioned on the Stage that you created in earlier exercises. Open the Components panel, expand the User Interface category and find the Loader component. Drag an instance of the component onto the Stage. | 2. | Select the Loader component and then look at the component parameters found in the Property inspector. Select the instance of the Loader component on the Stage and open the Property inspector. In the Property inspector, switch to the Parameters tab; all components have modifiable parameters (things you can change, for those of you not accustomed to geek speak). The Loader component has three: - autoLoad: This parameter controls whether the content should load automatically or whether you have to explicitly trigger the content for it to load (using ActionScript). A value of true means the content automatically loads; false means you need to trigger it before it loads.
- contentPath: The text entered into this text field sets the path to the SWF file or JPEG,GIF, or PNG image that you want to load into the component.
- scaleContent: This parameter controls whether the content is scaled to match the size of the component (true) or if the component is scaled to match the size of the content (false).
Tip You can also control and modify components with the Component inspector panel. Open the Component Inspector panel by choosing Window > Development Panels > Component inspector panel. What you can change depends on which component you're using, but all the changeable options are listed in the Parameters tab. The bindings and the Scheme tabs are not covered in this book. | 3. | Set the parameters in the Property inspector for the Loader component instance. Because you'll just be loading map.swf into this component right away, set the autoLoad parameter to true and then type map.swf into the contentPath text field. Note If you saved map.swf into a folder different from bookstore10.fla, you have to modify the path. You need to use a relative URL such as lesson05/map.swf. This means that you can store certain files in other files in the directory for better organization. Set the scaleContent parameter to false to make the component resize on the Stage to match the size of the external SWF file. | 4. | Resize the component so it is the same size as map.fla, which can be found in the lesson05/complete folder, and position it on the Stage. With the component selected, open the Property inspector. Change the width to 500 and the height to 355. The map should be aligned to the bottom of the How to find us text field and aligned to the right edge of the bookstore's slogan and the page title, similar to the layout in the following figure.
You probably still have guides visible that will help you align the component on the Stage. Just remember to allow enough empty space below the drop-down lists so they do not overlap the map. Make sure that the map either aligns or is (preferably) below the horizontal guide located at 140 on the vertical ruler. Note Depending on your own layout, you might need to move the How to find us text field. | 5. | Save the changes you made to the file. In the next section, you will begin to add more ActionScript to the FLA file. You will also use more instances of the Loader component in subsequent lessons. Right now, you won't be able to see the content loading into the map section of the Tech Bookstore website. However, when you test the file in Lesson 9, it should show up. If not, you'll have to check your contentPath parameter to make sure it's set right! |
|