Webmaster Resources - Macromedia Flash Tutorial

Creating a Panoramic Zoomable View in Macromedia Flash MX.

This type of masking will allow you to pan across your image and zoom in or out.

View the movie.

You will need an image that is very wide. I chose one that is 110 x 470.

Create a new Flash movie and select File -> Import to Library to import your image.

Center the image on the stage and select Insert -> Convert to symbol, select Movie Clip and name it picMC.

Name the instance picMC.

Make sure the instance is on the stage.

You will need two buttons. I used buttons from the Component Library.

Hide the picMC layer.

Create a new layer and name it buttons. Put it above the picMc layer.Position a button on the lower left and the lower right of the stage.

Create a mask. Create a new layer and name it mask. Create a rectangle the same size as the stage and chose insert -> symbol, make the mask into a movie clip. Name it theMask.

Drag an instance of theMask to the stage and name the instance greenMask.

Convert the mask layer into a mask. The picMC layer should be directly below it.

Next, you will add actionscripting to frames 1, 2, and 3.

Create a layer and call it actions. Put it on top of the other layers.

The actions in Frame 1 will create the initial conditions for the movie.

newX=_root.picMC._x;
newY=_root.picMC._y;

newScale=100;
initial_imageWidth=picMC._width;
imageWidth=initial_imageWidth;

initial_imageHeight=picMC._height;
imageHeight=initial_imageHeight;

The actions in Frame 2 determine how the cursor is tracked relative to the edges of picMC.

if (_xmouse<=10){
if(newX <= (imageWidth/2)){
newX=newX+4;
picMC._x =newX;
}
}

if (_ymouse<=10){
if(newY <= (imageHeight/2)){
newY=newY+4;
picMC._y=newY;
}
}

if (_xmouse>=(greenMask._width-10)) {
if(newX >= (imageWidth/2)-(imageWidth-greenMask._width)){
newX=newX-4;
picMC._x=newX;
}
}

if (_ymouse>=(greenMask._height-10)) {
if(newY >= (imageHeight/2)-(imageHeight-greenMask._height)){
newY=newY-4;
picMC._y=newY;
}
}

The actions in Frame 3 simply loop back to frame 2.

gotoAndPlay(2);

The actionscripting for the left button scales the image to decrease the size.

on (press) {
newScale=newScale-10;
imageWidth=initial_imageWidth*(newScale/100);
imageHeight=initial_imageHeight*(newScale/100);
_root.picMC._xscale=newScale;
_root.picMC._yscale=newScale;
}

The actionscripting for the right button scales the image to increase the size.

on (press) {
newScale=newScale+10;
imageWidth=initial_imageWidth*(newScale/100);
imageHeight=initial_imageHeight*(newScale/100);
_root.picMC._xscale=newScale;
_root.picMC._yscale=newScale;
}

Save and test the movie.