Graphics in Flash

Using ActionScript to Create the Slide Show

Movie clips are more than small, self-contained animations. Over the years, movie clips have become the building blocks of Flash movies. In this exercise, you will build the same slide show as the previous exercise, only this time the movie will consist of a single frame and the five images used for the slides won’t be added to the library. Instead, the images and their descriptive text will load into the movie from the server, when it is playing. As you will discover, the advantage to this technique is a surprisingly small SWF file.

The key to this is the creation of an emptyMovieClip when the movie starts. Each time a button is clicked; the image associated with the button is pulled from the server and placed into this empty movie clip. You create a new empty movie clip instance by using the createEmptyMovieClip() method. This new instance, which can be placed on the main Timeline (root) or nested in another movie clip on the Stage, requires two parameters: the name and the depth of the new instance.

What can be loaded into an empty movie clip? You can load another SWF file or a JPEG image into the instance. In this exercise, you will load the JPG images used in the previous exercise.
Tip: If you are loading JPEG images into an empty movie clip, they can’t be progressive JPG images. If you do use one, you will discover that nothing will load.

If you do load a JPEG image into an empty movie clip, just be aware that once the image data loads into the movie clip, the Timeline data is replaced with the JPEG data. The implication here is that the object can no longer be treated as a movie clip object. Instead, it is treated by Flash as more of an instance of a graphic symbol than a movie clip symbol.

1. Open the SlideShow_AS.fla file in your Lesson 3 Exercise folder.

When you open this file, the first thing you will notice is that the Timeline consists of one frame. You will also notice that the image and the text are missing from the Stage. If you open the library, the images aren’t in the library. If you click on the text box, you will also notice that its Type has changed from Static to Dynamic.

The text box type has changed because the text will be added to it when the button is clicked. Whenever text is added to a movie, either through ActionScript or contained in an external source such as an XML document, the text type should be set to Dynamic. When the text type is Dynamic, the Line Type drop-down list in the Property inspector becomes available. The type chosen here is Multiline, which ensures that text that is too long for the text area wraps.

2. Select Frame 1 of the Actions layer, press F9 (PC) or Option+F9 (Mac) to open the ActionScript panel. When the panel opens, enter the following code:

_root.createEmptyMovieClip("mcImageHolder",1);

mcImageHolder._x = 0;

mcImageHolder._y = 65;

The first line creates the empty movie clip on the main Timeline: _root. The first parameter is the instance name for the empty movie clip, and the second parameter places the clip on Level 1 on the Stage.

The next two lines tell Flash where the emptyMovieClip is placed on the Stage. In the previous exercise, we used the Property inspector to place the image at those x and y coordinates. In this case, because the clip is being created at runtime, you have to enter them.

If you are using an emptyMovieClip and are unsure of its coordinates on the Stage, use the Rectangle tool to draw a placeholder for the movie clip. After it is in position, write down its x and y coordinates from the Property inspector. If you are putting a JPEG image into the emptyMovieClip, match the size of the rectangle to the size of the image. This way, you can see if the image will interfere with any other content on the Stage. If the images are different sizes, use the size of the largest image.

3. Press Enter (PC) or Return (Mac) twice and enter the following function:

Button01.onRelease = function(){
mcImageHolder.loadMovie("Image01.jpg");
textBox.text = " The Coastal rain forest on the West Coastof Vancouver Island is an amazing place.";
}

The first thing to notice about this code is that the function is remarkably similar to that from the previous exercise. JPEG images are loaded into emptyMovieClips using the loadMovie() method. The parameter for the method is the name of the image. Keep in mind that ActionScript 2.0 is case sensitive, and the main reason an image won’t appear in the emptyMovieClip will be due to a spelling error. There are two ways of pointing to the JPEG image. This example, using just the name of the image, requires the SWF file to be in the same folder as the images. This is the second most common reason why an image won’t appear when the movie plays. If the images are kept in another location on the server, an absolute path—…/Images/Image01.jpg—must be used. If you do use this method, the path must be enclosed in quotation marks as well.

I have a never-ending series of Teacher Tricks. One Teacher Trick involves getting the correct name of an image. Locate the image on your hard drive, select the image, and copy the name to the Clipboard. Paste that name, between quotation marks, into the loadMovie() parameter.

Click the Check Syntax button and if there are no errors, close the Actions panel. Save the movie and test it, keeping in mind that only the first button works. When the movie starts, the image and the text are missing. Click the button and the image will appear where you positioned the emptyMovieClip and the text will appear in the dynamic text box.
Tip: Testing the movie at this stage is a good habit to develop. The code for the remaining buttons, as you saw in the previous exercise, is exactly the same as that for Button01. If it works for one button, it will work for them all.

4. Close the SWF file and reopen the Actions panels. Enter the following code to complete the exercise:

Button02.onRelease = function(){
mcImageHolder.loadMovie("Image02.jpg");
textBox.text = "The regular rainfall results in a lush growth of the vegetation in the forest.";
}

Button03.onRelease = function(){
mcImageHolder.loadMovie("Image03.jpg");
textBox.text = "The moisture in the rain forest is also due to the regular fog that rolls in from the Pacific Ocean.";
}

Button04.onRelease = function(){
mcImageHolder.loadMovie("Image04.jpg");
textBox.text = "The fog makes for a sense of mystery on the beach.";
}

Button05.onRelease = function(){
mcImageHolder.loadMovie("Image05.jpg");
textBox.text = "Trees grow to amazing heights and sizes in the rain forest.";
}

5. Save and test the movie.

Why do it in one frame when you can do it in five? As I said at the start of this section, the SWF file is really small. The file size for this SWF file is 13K. The file size for the one created in the previous exercise is a hefty 530K thanks to the inclusion of the bitmaps in the SWF file . On top of that, this SWF file only requires the browser to download a file that is 13K in size. The other one will take much longer to open in a browser.

Who is tom green?

Teacher, author, raconteur. Here's a run down of what I have been up to over the past few years. My Bio.

Classes

• The Flash interface:
  Week 1
• ActionScript basics:
  Week 2
• Working with graphics:
  Week 3,4
• Working with text:
  Week 5
  
• Working with audio:
  Week 6,7
• Animation basics:
  Week 8
• Video basics:
  Week 9,10
• Building Stuff:
  Week 12,13,14

Class Project 1