Beginning ActionScript 2.0 2006

Chapter 7

parentClip.getNextHighestDepth()); var thumbnailClip:MovieClip = ;

newClip.createEmptyMovieClip(“thumbnailClip”, ; newClip.getNextHighestDepth());

thumbnailClip.loadMovie(buttonImage); thumbnailClip._x = 5; thumbnailClip._y = 5;

newClip._x = xPos; newClip._y = yPos;

newClip.moveTo(0, 0); newClip.lineStyle(1, 0x666666); newClip.beginFill(0xFFFFFF, 100); newClip.lineTo(170, 0); newClip.lineTo(170, 60); newClip.lineTo(0, 60); newClip.lineTo(0, 0); newClip.endFill();

newClip.createTextField(“labelField”, newClip.getNextHighestDepth(), ; 60, 25, 100, 20);

newClip.labelField.text = buttonLabel;

newClip.onRelease = function()

{

trace(“Pressed button: “ + this._name);

}

}

var ROOT_PATH:String = “thumbnails/”;

createButton(“image1”, “A Study In Texture”, ;

ROOT_PATH + “aStudyInTexture_off.jpg”, this, 20, 20); createButton(“image2”, “Buntzen Winter”, ;

ROOT_PATH + “buntzenWinter_off.jpg”, this, 20, 90); createButton(“image3”, “Flower In Detail”, ;

ROOT_PATH + “flowerInDetail_off.jpg”, this, 20, 160); createButton(“image4”, “Galiano Sunset”, ;

ROOT_PATH + “galianoSunset_off.jpg”, this, 20, 230);

8.Save the file, return to the Macromedia Flash project file, and select Control Test Movie. Clicking each of the buttons should produce a trace statement in the output panel.

How It Works

The function call has been modified to allow an additional parameter (shown in bold) to provide a path to an image:

function createButton(buttonName:String, buttonLabel:String, ; buttonImage:String, parentClip:MovieClip, xPos:Number, yPos:Number) : Void

188

Controlling Movie Clips

Within the function, two movie clips are created:

var newClip:MovieClip = this.createEmptyMovieClip(buttonName, ; parentClip.getNextHighestDepth());

var thumbnailClip:MovieClip = newClip.createEmptyMovieClip(“thumbnailClip”, ; newClip.getNextHighestDepth());

The first movie clip is an overall button container; the second is created within the first and is used to hold the image. The two nested clips are needed because loading external content removes event handlers and properties assigned to the movie clip, and controlling external content is easier when it sits within a dedicated movie clip.

Next the thumbnail image and the button container clips are loaded and positioned:

thumbnailClip.loadMovie(buttonImage); thumbnailClip._x = 5; thumbnailClip._y = 5;

newClip._x = xPos; newClip._y = yPos;

A background color and an outline are drawn:

newClip.moveTo(0, 0); newClip.lineStyle(1, 0x666666); newClip.beginFill(0xFFFFFF, 100); newClip.lineTo(170, 0); newClip.lineTo(170, 60); newClip.lineTo(0, 60); newClip.lineTo(0, 0); newClip.endFill();

Drawing a background serves more than just an aesthetic purpose; it also provides a larger area for the user to click on. Without the background, the user can activate the button by clicking the icon and the label, but the user cannot click the button just outside of those boundaries. Figure 7-2 illustrates the difference.

Figure 7-2

If you want to define a larger clickable area, but don’t want a visible background, draw a background with the alpha set to 0 and with no line style. The shape still adds to the button’s clickable area, but it isn’t visible. The bold line in the following example shows how to create an invisible background by setting the alpha parameter of the beginFill() method to 0:

newClip.moveTo(0, 0); newClip.beginFill(0xFFFFFF, 0); newClip.lineTo(170, 0); newClip.lineTo(170, 60);

189

Chapter 7

newClip.lineTo(0, 60); newClip.lineTo(0, 0); newClip.endFill();

Next, the text field is created and a label is assigned:

newClip.createTextField(“labelField”, newClip.getNextHighestDepth(), ; 60, 25, 100, 20);

newClip.labelField.text = buttonLabel;

The movie clip is made into a clickable button:

newClip.onRelease = function()

{

trace(“Pressed button: “ + this._name);

}

Finally, four buttons are placed on the stage:

var ROOT_PATH:String = “http://www.nathanderksen.com/book/thumbnails/”;

createButton(“image1”, “A Study In Texture”, ;

ROOT_PATH + “aStudyInTexture_off.jpg”, this, 20, 20); createButton(“image2”, “Buntzen Winter”, ;

ROOT_PATH + “buntzenWinter_off.jpg”, this, 20, 90); createButton(“image3”, “Flower In Detail”, ;

ROOT_PATH + “flowerInDetail_off.jpg”, this, 20, 160); createButton(“image4”, “Galiano Sunset”, ;

ROOT_PATH + “galianoSunset_off.jpg”, this, 20, 230);

The rootPath constant is there to keep each createButton() call a bit shorter, and also so that if the location were to change, it would need to be updated in only one place.

Using Movie Clips as Masks

One of the cool things that you can do with movie clips is to mask them. Masking involves using the shape of one movie clip to indicate to another movie clip which parts should be visible. Figure 7-3 shows an example of using one shape to mask another.

Shape

Mask

Masked Shape

Figure 7-3

190

Controlling Movie Clips

This feature can be used for a number of things, such as ensuring that content does not fall outside a given area, creating transitions, and creating cursor reveal effects.

The basic form for applying a mask is as follows:

baseClip.setMask(maskClip:MovieClip) : Void

Only the shape of the mask is considered when it is applied to a movie clip. Any filters or blending modes that are applied do not have an impact on the masked shape. Also, one of the limitations of masks is that alpha transparency effects do not apply, so even if a mask symbol has an alpha value of zero, it still contributes to the overall mask shape.

In the following example two movie clips are created; a triangle is drawn in the content clip and a rectangle is drawn in the mask clip. Any part of the triangle that falls outside of the bounding box is not shown.

this.createEmptyMovieClip(“contentClip”, this.getNextHighestDepth()); this.createEmptyMovieClip(“maskClip”, this.getNextHighestDepth());

contentClip.beginFill(0x000066, 100); contentClip.moveTo(200, 0); contentClip.lineTo(400, 300); contentClip.lineTo(0, 300); contentClip.lineTo(200, 0);

maskClip.beginFill(0x000000, 100); maskClip.moveTo(50, 50); maskClip.lineTo(300, 50); maskClip.lineTo(300, 250); maskClip.lineTo(50, 250); maskClip.lineTo(50, 50);

contentClip.setMask(maskClip);

Next, use a mask to create a camera-shutter transition effect.

Try It Out

Creating an Animated Masking Effect

In this exercise you use an animated mask to achieve a transition effect: revealing an image by opening an animated camera iris.

1.Grab the file called tryItOut_shutterMask.swf from the Chapter 7 folder in the downloadable source folder and place the file in a convenient location.

2.Create a new Macromedia Flash document.

3.Click the first frame in the timeline, open the Actions panel, and type in the following ActionScript code:

#include “tryItOut_maskEffect.as”

4.Select File Save As, name the file tryItOut_maskEffect.fla, choose the directory where you placed the shutter effect file in step 1, and save it.

191

Chapter 7

5.Create a new Macromedia Flash document.

6.Select File Save As and ensure it is showing the directory containing the Flash project file. Name the file tryItOut_maskEffect.as and save it.

7.Enter the following code into the new ActionScript file:

this.createEmptyMovieClip(“imageHolderClip”, this.getNextHighestDepth()); this.createEmptyMovieClip(“maskClip”, this.getNextHighestDepth());

var loadListener:Object = new Object(); loadListener.onLoadStart = function(contentHolder:MovieClip)

{

contentHolder._visible = false; maskClip._visible = false;

}

loadListener.onLoadInit = function(contentHolder:MovieClip)

{

if (contentHolder._name == “imageHolderClip”)

{

contentHolder._x = Stage.width / 2 - contentHolder._width / 2; contentHolder._y = Stage.height / 2 - contentHolder._height / 2; contentLoader.loadClip(“tryItOut_shutterMask.swf”, maskClip);

}

else

{

imageHolderClip._visible = true; maskClip._xscale = 120; maskClip._yscale = 120; maskClip._x = -10;

maskClip._y = -50; imageHolderClip.setMask(maskClip); maskClip.play();

}

};

var contentLoader:MovieClipLoader = new MovieClipLoader(); contentLoader.addListener(loadListener); contentLoader.loadClip(“http://www.nathanderksen.com/book/afternoonShower.jpg”, ;

imageHolderClip);

8.Save the file, return to the Macromedia Flash project file, and select Control Test Movie.

How It Works

Most of the code in this example is for handling the timing of loading two external movie clips. You want to make sure that the animation does not start until both the loaded image and the mask clip are ready, otherwise either the mask animation will start before the image is on the screen, or the mask may not be applied and a red shape will animate instead.

First, placeholder movie clips are created:

this.createEmptyMovieClip(“imageHolderClip”, this.getNextHighestDepth()); this.createEmptyMovieClip(“maskClip”, this.getNextHighestDepth());

192

Controlling Movie Clips

Next, the pre-loader event handlers are defined:

var loadListener:Object = new Object(); loadListener.onLoadStart = function(contentHolder:MovieClip)

{

contentHolder._visible = false; maskClip._visible = false;

}

The onLoadStart handler ensures that the movie clip holding the image does not show until the mask has been applied, otherwise there will be a short flicker where the full image is visible.

The onLoadInit handler is called when the image and the mask clip are both loaded and rendered onscreen, ready to be used:

loadListener.onLoadInit = function(contentHolder:MovieClip)

{

if (contentHolder._name == “imageHolderClip”)

{

contentHolder._x = Stage.width / 2 - contentHolder._width / 2; contentHolder._y = Stage.height / 2 - contentHolder._height / 2; contentLoader.loadClip(“tryItOut_shutterMask.swf”, maskClip);

}

else

{

imageHolderClip._visible = true; maskClip._xscale = 120; maskClip._yscale = 120; maskClip._x = -10;

maskClip._y = -50; imageHolderClip.setMask(maskClip); maskClip.play();

}

};

Because the same pre-loader is used for loading both the image and the mask, a check is done to see which clip has been loaded. If it is the image holder that has just finished loading, the image is centered onscreen, and then the mask is loaded. If it is the mask holder that has loaded, the mask is sized, positioned, and applied to the image holder movie clip. Take a look at the tryItOut_shutterEffect.fla file; you’ll see that the movie clip used for the mask is in fact a multi-frame animation. As the animation plays, it changes which part of the image is masked, creating the iris effect.

Finally, the pre-loader class is set up, and the loading of the image is triggered:

var contentLoader:MovieClipLoader = new MovieClipLoader(); contentLoader.addListener(loadListener); contentLoader.loadClip(“http://www.nathanderksen.com/book/afternoonShower.jpg”, ;

imageHolderClip);

Next, you take masking a step further.

193

Chapter 7

Try It Out

Creating a Mouse-Driven Masking Effect

In this exercise you create a masking effect that follows the position of the cursor.

1.Create a new Macromedia Flash document.

2.Click the first frame in the timeline, open the Actions panel, and type in the following ActionScript code:

#include “tryItOut_maskEffect2.as”

3.Select File Save As, name the file tryItOut_maskEffect2.fla, choose the directory where you placed the shutter effect file in step 1, and save it.

4.Create a new Macromedia Flash document.

5.Select File Save As and ensure it is showing the directory containing the Flash project file. Name the file tryItOut_maskEffect2.as and save it.

6.Enter the following code into the new ActionScript file:

function drawCircle(movieClipHandle:MovieClip, x:Number, y:Number, ; radius:Number) : Void

{

var c1 = radius * (Math.SQRT2 - 1); var c2 = radius * Math.SQRT2 / 2;

movieClipHandle.beginFill(0x000000, 100); movieClipHandle.moveTo(x + radius, y); movieClipHandle.curveTo(x + radius, y + c1, x + c2, y + c2); movieClipHandle.curveTo(x + c1, y + radius, x, y + radius); movieClipHandle.curveTo(x - c1, y + radius, x - c2, y + c2); movieClipHandle.curveTo(x - radius, y + c1, x - radius, y); movieClipHandle.curveTo(x - radius, y - c1, x - c2, y - c2); movieClipHandle.curveTo(x - c1, y - radius, x, y - radius); movieClipHandle.curveTo(x + c1, y - radius, x + c2, y - c2); movieClipHandle.curveTo(x + radius, y - c1, x + radius, y);

}

this.createEmptyMovieClip(“contentClip”, this.getNextHighestDepth()); this.createEmptyMovieClip(“maskClip”, this.getNextHighestDepth());

contentClip.beginFill(0x000066, 100); contentClip.moveTo(200, 0); contentClip.lineTo(400, 300); contentClip.lineTo(0, 300); contentClip.lineTo(200, 0);

drawCircle(maskClip, 0, 0, 30);

contentClip.setMask(maskClip);

var mouseListener:Object = new Object();

194

Controlling Movie Clips

mouseListener.onMouseMove = function()

{

maskClip._x = _xmouse;

maskClip._y = _ymouse;

}

Mouse.addListener(mouseListener);

7.Save the file, return to the Macromedia Flash project file, and select Control Test Movie.

How It Works

This example uses a circular mask, so a function called drawCircle() handles the complexity of drawing the circle:

function drawCircle(movieClipHandle:MovieClip, x:Number, y:Number, ; radius:Number) : Void

{

// ...

}

Two movie clips are created — one for the main content and one for the mask:

this.createEmptyMovieClip(“contentClip”, this.getNextHighestDepth()); this.createEmptyMovieClip(“maskClip”, this.getNextHighestDepth());

A triangle is drawn to the main content movie clip:

contentClip.beginFill(0x000066, 100); contentClip.moveTo(200, 0); contentClip.lineTo(400, 300); contentClip.lineTo(0, 300); contentClip.lineTo(200, 0);

A circle is then drawn in the movie clip to be used for the mask:

drawCircle(maskClip, 0, 0, 30);

The event handler causes the position of the mask to be updated every time the mouse cursor moves:

var mouseListener:Object = new Object(); mouseListener.onMouseMove = function()

{

maskClip._x = _xmouse; maskClip._y = _ymouse;

}

Mouse.addListener(mouseListener);

You see more about using event handlers in Chapter 9.

195

Chapter 7

Improving Movie Clip Performance

Unfortunately, there is a limit as to how much complexity can be added before visible lags in animation playback occur. You can do a few things to reduce the impact of animation on the user’s computer:

Make use of bitmap caching for Flash 8 movies.

Watch your use of transparency.

Make use of the _visible property when targetting Flash Player version 7 and earlier.

Moderate your use of filters and blending modes.

Refrain from using full-screen movies.

Keep in mind that many people do not have machines as capable as yours.

Bitmap Caching

Macromedia Flash player version 8 includes a new feature designed to improve playback performance. All movie clips in Macromedia Flash take processing power to render for every frame, even if the contents within the movie clip do not animate. Any movie clip whose contents will not be animated can benefit from being marked for bitmap caching. At runtime, Flash goes through each movie clip so marked, renders it once as a bitmap, and then uses that bitmap instead of the movie clip for all future rendering purposes. Bitmaps are significantly faster to render than vector shapes, so the whole movie benefits from a speed boost.

Bitmap caching can be enabled from the visual development environment and also programmatically through ActionScript. Figure 7-4 shows the Properties panel checkbox to select to mark a movie clip for bitmap caching.

Bitmap caching checkbox

Figure 7-4

The same thing can be easily done with ActionScript:

movieClipInstance.cacheAsBitmap = true;

This property needs to be set for each movie clip instance to be cached.

Transparency

The transparency of a movie clip is the degree to which you can see content behind a movie clip. The degree of transparency of a movie clip is called its alpha value. An alpha value of 100 means that you

196

Controlling Movie Clips

cannot see through the movie clip, and an alpha value of 0 means that you cannot see the movie clip content, just the content behind the movie clip.

Transparency is one of the biggest causes of processor slowdown. The greater the number of movie clips that have an alpha value of 1 to 99, the bigger the processor drag is. If you have a complex animation within a movie clip and set the base movie clip to anything other than 100 alpha, each child of the movie clip needs to be involved in the alpha calculations as well.

The rule of thumb is that the greater the number of movie clips that have alpha effects applied to them and the greater the pixel dimensions of those clips, the slower the movie becomes.

Additionally, with Flash Player version 7 and earlier, movie clips that have an alpha value of 0 also take part in the rendering cycle. In version 8 of the player, an optimization was added to exclude movie clips with the _alpha property set to 0 from the rendering cycle. If you are targeting Flash Player version 7 or earlier and if you don’t need a movie clip temporarily, set the _visible property of the clip to false instead of setting the _alpha property to 0. This prevents the renderer from trying to draw the clip and saves processor cycles. If you no longer need a movie clip at all, delete it from the stage using the removeMovieClip() method.

Filters and Blending Modes

Filters and blending modes are great additions to Flash 8, but they do require significant processing power from users’ computers. In particular, filters can take a huge amount of processor power to render. If you are working with content that is not animated, there is no problem with applying both filters and blending modes. Performance primarily becomes an issue when you start adding filters and blending modes to animated content.

Be careful about applying filters and blending modes to animated content, and be especially careful about applying multiple filters to the same animated content simultaneously. Always remember that many people who view your work do not have as powerful a computer as you do.

Full Screen

Many people enjoy expanding their Flash presentations to take up the full screen. Unfortunately, the greater the pixel dimensions of the stage being used, the slower the animation. If you resist the temptation to present a full-screen site, the performance will be better, and your users will likely also appreciate having more screen real estate available for their other applications.

Summar y

This chapter went into significant detail on using the movie clip. Some of the things you learned include the following:

The movie clip is one of three primary symbol types. The other two types are the graphic symbol and the button symbol. Only the movie clip is suitable for most ActionScript programming tasks.

New movie clips can be placed on the stage with the createEmptyMovieClip() method.

197