Lab 03: Preloading and Loading Movies

Assigned: Sept 9th, 2009

Instructions:

Instructor will show students how to preload content and load swf's inside one another. Students should see demo's for the creation of both in AS 2.0 and 3.0.

Description:

Due to the diversity of Flash and the fact that there now exists three versions of ActionScript, there is always "more than one way to skin a cat." As a result, there are a number of methods for creating preloaders in Flash, and even more ways of loading content. The examples below will show three approaches to preloading content. Students will learn how to create simple pre-loaders for Flash content using both AS 2.0 and AS 3.0 . Students will also learn how to load external swfs into main .swf files.

Note: There are copies of the starter files found in the Lab 04 folder in the "Handouts" directory on the G drive.

Exercise 1 - AS 2.0 Preloader with Embedded Content:

1. Open Preload_starter.fla. Note that the movie has already been embedded for you in the layer named "videos". Also note that there are four other layers named " labels"," actions", "progress bar", and "play button"
2. Add a keyframe (F7) on frame 2 of the "labels" layer. In the properties panel, label this keyframe "preload".
3. Add a keyframe (F7) on frame 10 of the "labels" layer. In the properties panel, label this keyframe "start".
4. Select the "start" keyframe. Extend the number of frames by hitting F5 until the total frames extend out to frame 20
5. Select frame 1 of the layer "progress bar" and insert a single frame.
6. Draw a rectangle (black line, red fill) with the rectangle tool. Resize this rectangle to 300 x 10 in the Property Inspector and position it at coordinates 80, 220.
7. Select both the stroke and fill and turn them into a movie clip by hitting the F8 key. Name the symbol loaderclip_mc and click the middle left registration position.
8. With the clip selected on stage, assign the clip the instance name loaderclip_mc in the Property Inspector.
9. On the progress bar layer extend the frames out to frame 3. (Make sure this is a frame on frame 3 and not a keyframe)
10. Double-click the loader_mc instance on the stage. Once insider the movie clip, rename the lone layer to bar and create another layer and call it frame. Make sure the frame layer is above the bar layer.
11. Cut and paste the outline of the bar in place in the frame layer.
12. On the bar layer, select the red fill and again convert this to a movie clip (F8). Make sure to choose the middle left registration point again and name this clip bar_mc
13. With the bar clip selected, assign it an instance name bar_mc in the Property Inspector
14. Decrease the width of the bar to 1% in the Transfrom panel. Move the resized clip over to the left side of the bar outline.
15. Create another layer and name it textfield
16. Select the text tool and create a Dynamic text field (16 pt Arial) on frame 1of the textfield layer. Place this text field underneath the bar and give it the instance name percentage_txt. Make the percentage_txt text field approximately the width of the bar.
17. Return to the main timeline
18. Insert a blank keyframe on frame 10 of the "play button" layer
19. Add a play button to frame 10 in a new layer and give it the instance name play_btn
20. Add a blank keyframe to frame 145 of the Actions layer. With this keyframe selected open the Actions panel (F9).
21. Add the following code:
• gotoAndStop("start");
22. Insert a blank keyframe in frame 3 of the actions layer. With this keyframe selected open the Actions panel (F9).
23. Add the following code:

• Test your movie, making sure to use the "Simulate Download" feature to test the preloader. When you are satisfied, rename the file AS2_Preload_Lastname_FirstInitial.

Exercise 2 - AS 2.0 Preloader with Loaded Content Using MovieClipLoader Class:

In this example you will create the same preloader, but instead of having the video already embedded you will load an external .swf containing the video using the MovieClipLoader Class. While embedded content such as in the first example is a good place to start...you must get used to loading other swfs into your primary movies.

1. Open the Preload_V2.fla starter file. Note that there are only two layers this time, "actions" and "Loader Clip"
2. Also note that the movieclip loaderclip_mc is pretty much the same as in the previous example
3. Open CatFan.fla. Notice that the first frame in the "Content" layer contains a button, and the rest of the layer contains the "Cat Fan" video.
4. Look at the ActionScript in the first frame of the "Actions" layer (F9). After the initial stop() action, type the following code:

   play_btn.onRelease = function(){
   play();
   }

• This code will allow the button to play the movie once the user clicks the button. Publish the movie (Shift+F12), then close the CatFan.fla file.
• Return to the Preload_V2 file. Click the first frame in the "Actions" layer, hit F9 to open the Actions panel, and type the following code:

• Once you are finished, test your files. When you are satisfied, place the CatFan and Preload_v2 files into a folder labeled AS2_MovieClipLoader_Lastname_FirstInitial.

Exercise 3 - AS 3.0 Preloader with Loaded Content:

In this example you will create the same preloader one more time, but instead of using AS 2.0 code you will use AS 3.0.

1. Open the Preload_AS3.fla starter file.
2. Open the CatFan2.fla file. Note that it is very similar to the CatFan file used in the second exercise.
3. Open the ActionScript Editor on the first frame of the "Actions" layer. After the stop() action, type the following code:

play_btn.addEventListener(MouseEvent.CLICK, clickButton);

function clickButton(myevent:MouseEvent): void{

play();

}

• Publish the file and close CatFan.fla
• Return to Preload_AS3
• Open the first frame in the "Actions" layer and type the following code in the ActionScript Editor:

• Once you are finished, test your files. When you are satisfied, place the CatFan and Preload_AS3 files into a folder labeled AS3_Preloader

Wrapping Up:

Submit your all your .fla files to the G drive in a single folder labeled LastName_FirstInitial_Lab03.