Collision Detection
Finally, results from hittesting code using MovieClip.hitTest will not be affected by Bitmap Caching, as hittesting is still calculated based upon the vector data of a movie clip, not the generated bitmap that you actually see. To prove this create a new movie clip and draw a circle inside it, drag it onto the first frame of the main timeline and give it an instance name of circle_mc. Now add the following code to the first frame of the main timeline:

circle_mc.onMouseMove=function()
{
trace("hit: "+this.hitTest(_root._xmouse,_root._ymouse,true))
}
circle_mc.cacheAsBitmap=true

Cropping and Scrolling

Scrolling large amounts of complex vector data or text was previously a very intensive task for the Flash Player, it still is. However, Macromedia has recognized this problem and has added a new feature to the latest release of the Flash Player that provides a solution to this particular problematic scenario

It is now possible for us to define a rectangular viewing window for a movie clip that basically visually crops the movie clip to a specified size and scrolls the content of the movie clip by a specified offset. The scrolling offset can then be changed to scroll the movie clip's content into view over a number of frames.

How Do I Use It?
As a fairly advanced feature, at present and for the foreseeable future, it can only be utilized through ActionScript. For this, a property has been added to all movie clips called scrollRect which we use to tell Flash to crop a movie clip and shift the position of its content.

The scrollRect property can be though of as a very simplified equivalent of the ScrollPane component but for scrolling movie clips. That is because it allows you to show a certain part of a movie clip and move the content around inside this viewing area all by setting the value of one ActionScript property. This property is set by specifying an object that contains four properties; these four properties define the size and the scrolling offset of the movie clip's content.

They are:

• Width - width of the viewing rectangle
• Height - height of the viewing rectangle
• X - scrolling offset on the x-axis
• Y - scrolling offset on the y-axis

We can create an object that defines a viewing rectangle as follows:

scrollRect={x:50,y:50,width:100,height:100}
//define the viewing area and scrolling offset

And then pass this object to the movie clip we want to scroll by setting the value of the scrollRect property:

scrollingMovieclip.scrollRect=scrollRect
//scroll and crop the movie clip

This will basically crop the movie clip to a 100 * 100 square and the position of the movie clip's contents appears to have changed by 50 pixels along both the x and y axis. The movie clip's _width and _height will change to the cropped size of the movie clip after applying a scrollRect.

trace(scrollingMovieclip._width+"/"+scrollingMovieclip._height)

Local coordinate space A movie clip is always cropped and scrolled in its local coordinate space, from the top left hand corner which is zero on both the x and y axis (0, 0). You cannot move the viewing window of the movie clip; you can only move the content of the movie clip in the opposite direction to bring it into view.

The cropping gives the same effect as having a mask that is positioned at 0,0 in the movie clip's local coordinate space. That's a hard concept to grasp, so let's take a look at an example and see what happens when we apply it to a movie clip.

Below you will see a movie clip with an instance name of gradientMc that contains a 200 * 200 square filled with a gradient. That square is centered on the movie clips local original (0, 0). Therefore the squares top left hand corner in the movie clip's local coordinates starts at 100,100.

The following code defines a viewing area that is 100 * 100 in size with no scrolling offset:

scrollRect={x:0,y:0,width:100,height:100}
//define the viewing area and no scroll offset

When we set the scrollRect property of this movie clip you can see below, that the movie clip has been cropped from, not around its local origin.

gradientMc.scrollRect=scrollRect

Scaling a movie clip will scale the size of the cropped area. For example, if you define the cropped area as a 100 * 100 rectangle:

scrollRect={x:0,y:0,width:100,height:100}
scrollingMovieclip.scrollRect=scrollRect

And then you scale the movie clip to twice its size:

scrollingMovieclip._xscale=scrollingMovieclip._yscale=200
//resize the movie clip to 200%

You will find that the cropped area is now actually a 200 * 200 square.

Similarly, if you rotate a movie clip that has a scrollRect property defined, the coordinate space of the scrollRect is rotated as well. Therefore, if you were to rotate a movie clip by 90 degrees and change the scrolling offset on the x-axis (left and right) by setting the scrollRect property, the movie clips content will actually scroll along the y-axis (up and down):

scrollingMovieclip.scrollRect={x:100,y:0,width:100,height:100}
scrollingMovieclip._rotation=90

Removing the cropping and scrolling Retrieving the value of a movie clip's scrollRect property actually returns a copy of its original scrollRect. It doesn't return the original, which is a shame because it means we can't do something like this:

scrollingMovieclip.scrollRect.x+=10
//doesn't work

Instead you have to get a copy of the original scrollRect, change its properties and then reapply it:

var s=scrollingMovieclip.scrollRect
//store a copy of the scrollRect property
s.x+=10 //change the xaxis
scrolling offset
scrollingMovieclip.scrollRect=s
//reapply with our changed copy

That also means that you can't simply delete the scrollRect property of a movie clip to remove it:

delete scrollMovieClip.scrollRect
//doesn't work

You have to explicitly set the scrollRect property of a movie clip to undefined to remove the cropping and scrolling:

scrollingMovieclip.scrollRect=undefined
//remove the cropping and scrolling

• Figure 1
• Figure 2
• Figure 3
• Figure 4
• Figure 5
• Figure 6