Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Incorporating the Gallery into a Flash Site

Now that you have completed the gallery, it's useful to load it into another SWF file. If you have an existing site (for example, a portfolio website), you might want to add this gallery to that site. Or, you might have an established client site in which you want to add a couple of galleries of their products. Loading a gallery into an existing website is useful for many purposes. The gallery for this project is very lightweight because you load most of the content at runtime. However, you might have an elaborate design or more content in a gallery you design yourself (or if you modify this chapter's gallery). Therefore, you might need to add a progress bar so your visitors understand that there is content loading into the SWF file. This section shows you how to load the gallery into another SWF file and display a progress bar.

Exercise 6: Putting the gallery online

Adding your new dynamic photo gallery into a Flash site is quite easy. The first step is to create a new Flash document that serves as the main document that loads the external gallery.swf file. The remainder of this project deals with loading your dynamic image gallery into a separate Flash document.

1. Create a new Flash document in the same folder as gallery.fla. Save the new document as gallery_loader.fla.

2. Resize the Stage to 550 px (width) by 420 px (height). The new document is 20 pixels greater in height than the gallery.swf file that you load into it. You need the Stage dimensions to be different because in a Exercise 7 you'll create a couple of buttons to move the playhead at runtime in gallery_loader.swf.

3. Click Insert Layer three times until you have four layers total on the main Timeline. Rename the four layers (from top to bottom): actions, labels, menu, and content.

4. To fully test the gallery within a new Flash document you'll need at least two sections. Select frame 1 of the labels layer and type home into the Frame Label text field in the Property inspector. Select frame 10 of the labels layer and press the F6 key to add a new keyframe. With frame 10 still selected, type gallery into the Frame Label text field in the Property inspector.

You cannot read the frame label for frame 10 on the Timeline because there isn't enough space on the Timeline's layer. Select frame 19 of the labels panel and press F5 to add some blank frames so you can see the label.

5. On the actions layer of the Timeline, select frame 10 and press F6 to add a keyframe. Then select frame 19 and press F5 to insert a blank frame. In both frames 1 and 10, add the following code to the main timeline using the Actions panel:

stop();

It is always best to use frame labels instead of using frame numbers. You can target labels using ActionScript, which means that you don't have to target numbered frames that might change while you work on the FLA file.

This simple function stops the playhead on whatever frame you put it on. If you don't add a stop function to the main Timeline in the first frame, the playhead continues to advance along the Timeline, and it might cause your SWF file to loop. You add more code to these frames in later steps.

6. Select frame 19 in the menu layer and press F5 to extend the layer across Timeline. Therefore, you can see the menu on the Stage, no matter where they playhead is.

Exercise 7: Creating navigation buttons

In this exercise, you create two button symbol instances and add the ActionScript that moves the playhead within the SWF file when the user clicks each button.

Depending on your computer system, it might be necessary to type text on the Stage and change the text type to static by using the Property inspector afterward.

1. Create a static text field using the Text tool on frame 1 of the menu layer.

Enter the string home in the text field, change the font to Arial and set the font size to 12 pixels. Make sure that your text color is set to black (#000000) and select the bold button.

2. Select the home button on the Stage and press F8 to convert the text field to a symbol. Set the behavior to Button and type in a symbol name of home_btn. Click OK.

3. Select the home_btn instance on the Stage and type an instance name of home_btn into the Property inspector.

When you move the button between each letter or stem, you cannot click the button. This makes clicking the button extremely difficult. Remember to add a hit area for your buttons.

4. If you try testing your Flash document in either the authoring environment or your default browser at this point, you'd notice that only the text itself is clickable and not the bounding box of the instance. Your button needs a hit area.

Double-click the home_btn instance, and you see the four frames representing the Up, Over, Down, and Hit states for the button.

5. Position your mouse cursor in the Over frame and press F6 to create a new keyframe.

6. Select the Rectangle tool, set the stroke color to No Color and select a fill color of #999999. Draw a rectangle the same size as the text field.

The easiest way to match the size of the rectangle to the size of the text field is to use the Zoom tool and zoom in on the Stage so that the text field is as large as possible (without going off the Stage). When you select the Rectangle tool, it might be necessary to click the Over frame again so the bounding box becomes visible. Position your cursor in the upper-left corner of the bounding box and drag your mouse to the lower-right corner of the text field. You'll notice that when the rectangle overlaps the bounding box of the text field, the bounding box changes from blue to red.

By drawing the rectangle in the Over frame, your button changes background colors from transparent to gray when the user moves their cursor over the home button. If you do not want rollover colors, create the keyframe from step 5 in the Hit frame instead of the Over or Down frame.

7. Use the Text tool to create a new static text field on the Stage. Type gallery using the same settings as the home button you created in step 1.

8. Repeat steps 26 with the gallery text field and give it any symbol name, and an instance name of gallery_btn.

9. Position the home_btn and gallery_btn instances near the top of the Stage. You use these buttons to navigate between the home and gallery labels that you created in an earlier exercise.

If you want to make the buttons blend into the site a bit better, you can add a background image or a rectangle behind the image that is the same height as the buttons.

10. Add the following code to the first frame of the actions layer:

home_btn.onRelease = function() {
gotoAndStop("home");
};
gallery_btn.onRelease = function() {
gotoAndStop("gallery");
};

This code creates two event handlers, one for the home_btn button instance and the other for the gallery_btn button. When the user clicks the home_btn, the playhead moves to the home frame label. Likewise, when the user clicks gallery_btn, the playhead moves to the gallery frame label.

Because you add the progress bar to the Stage dynamically, you don't need to assign an instance name to the progress bar movie clip.

Exercise 8: Adding a progress bar for the gallery

This exercise demonstrates how to create a progress bar that you use to display the loading status of the gallery.swf document as it loads into the current FLA. You create the progress bar the same way you did for the gallery images earlier in this project.

1. Use the Rectangle tool to draw a rectangle on the Stage to use as a preloader.

2. Click the rectangle's fill and press F8. Convert the fill to a movie clip with a symbol name of bar. Click OK.

3. Select the bar symbol, and open the Property inspector. Type in an instance name of bar_mc.

4. Select both the fill and the stroke of the rectangle and press F8 to nest them both inside a symbol.

5. In the Convert to Symbol dialog box, enter a symbol name of progressBar and switch to advanced mode if you haven't already done so (click the Advanced button).

6. Select the Export for ActionScript check box and set the linkage identifier to progressBar_mc. Click OK to close the dialog box. Then, delete the instance of the progressBar symbol on the Stage. Because you attach it to the Stage dynamically, you do not need an instance on the Stage.

Exercise 9: Loading the gallery using MovieClipLoader

Now that you created the progress bar and it exists in the Library, there are only two small steps remaining. You need to create a movie clip symbol to load the external SWF into and add the necessary code to do so.

1. Before you can add any ActionScript, select frame 10 of the content layer and press F6 to insert a keyframe. Also, select frame 19 of the content layer and press F5 to extend the Timeline to match the other layers.

2. Now you can create a movie clip instance on the Stage that you use to hold the gallery that you load into the SWF file. Click the Create New Symbol button in the Library for the current movie clip. In the Create New Symbol dialog box, set the symbol behavior to Movie Clip and type a symbol name of gallery.

3. Switch to Advanced mode (click the Advanced button) and select the Export for ActionScript check box. Type gallery_mc into the Identifier text field and then click OK. Click Scene 1 on the Edit Bar to return to the main Timeline.

4. Drag a copy of gallery from the Library onto the Stage and give type the instance name gallery_mc into the Property inspector.

5. Position gallery_mc at an X coordinate of 0 pixels and a Y coordinate of 20 pixels.

6. Select frame 10 of the actions layer and add the following code:

this.attachMovie("progressBar_mc", "pBar_mc",
this.getNextHighestDepth(), {_visible:false, _x:100,
_y:420});
var galleryListener:Object = new Object();
galleryListener.onLoadStart = function(target_mc:MovieClip) {
pBar_mc.bar_mc._xscale = 0;
pBar_mc._visible = true;
};
galleryListener.onLoadProgress =
function(target_mc:MovieClip, numBytesLoaded:Number,
numBytesTotal:Number) {
pBar_mc.bar_mc._xscale =
Math.round(numBytesLoaded/numBytesTotal*100);
};
galleryListener.onLoadComplete =
function(target_mc:MovieClip) {
pBar_mc._visible = false;
};

This code begins by attaching the progressBar_mc symbol from the Library and giving it an instance name of pBar_mc. It then goes on to set the new movie clip's _visible property to false so it doesn't immediately display on the Stage. The hidden movie clip also moves to an X coordinate of 100 pixels and a Y coordinate of 420 pixels. This places the progress bar near the bottom of the Stage.

You also create an object, which you use to handle the various listeners for the movie clip loader instance that you create later on in the script. The first listener that you add to the galleryListener object is onLoadStart, which sets the nested bar_mc movie clip's _xscale property to 0%. Next, the pBar_mc's _visible property is set to true so the progress bar becomes visible while the content loads in.

You then add the second listener, onLoadProgress, which triggers throughout the loading process, unless the content loads too fast. This listener calculates the percentage of the SWF file that's loaded by dividing the number of bytes currently loaded by the total number of bytes for the external file. Then the listener multiplies the result by 100 to return a value between 0 and 100. You use this value to display the percentage of data already loaded by Flash to modify the bar_mc's _xscale property.

The third and final listener is onLoadComplete. This listener triggers as soon as the external content finishes loading, but it isn't visible on the Stage yet. After this listener is invoked, the content is nearly ready to display, so you can hide the pBar_mc movie clip again by setting its _visible property to false.

7. In frame 10 of the actions layer, add the following code below the snippet you added in the previous step:

var gallery_mcl:MovieClipLoader = new MovieClipLoader();
gallery_mcl.addListener(galleryListener);
gallery_mcl.loadClip("gallery.swf", gallery_mc);

The last three lines of code in this project create a new MovieClipLoader instance, add the listener object that you created in the previous example, and load the external file (gallery.swf) into the gallery_mc movie clip. The gallery_mc clip is the empty "container" movie clip you created in step 2 of this exercise.

If you load animated content into the SWF file, the loaded animations use the parent SWF file's frame rate. However, if you load Flash Video (FLV files), the FLV frame rate is used, not the SWF frame rate.

8. Select Modify > Document, and change the frame rate to 24 fps. This means the animations in the gallery will be smoother.

9. Save your Flash document, and test the finished product in Flash's authoring environment (Control > Test Movie) or in your default browser (F12). Now you can click 0on the home or gallery buttons and navigate to the appropriate section of your website.

Because gallery.swf is so small, the progress bar might not be visible (display the fill color) if the content loads too quickly from the hard drive. Test it online for a better chance at viewing the progress bar in action.