Flash Tutorials

1. Create a new Layer and call it: Big Map
2. Go to: Insert - New Symbol Name: My Big Map Behavior: Movie Clip
3. Drag the JPEG of the map into the new symbol.
4. As before place the image at: X = 0, Y = 0 This time you do not reduce the size of the image. This is what we are going to see in the Property Inspector:

Note the image is still 1200 x 1000px.

1. Go back to the main stage and drag the new movie clip from the library and place it on the main stage.

   This movie clip must be in the new layer: Big map

   Note: The large map does not need to be on top of the smaller map but can be shunted off to the side of the stage. This makes it easier to work with.

2. In the Property inspector give this movie clip an instance name: myMap

   7.Attach the following ActionScript to the new movie clip:

   onClipEvent (enterFrame) { _root.myMap._x = (_root._xmouse * -1.5); _root.myMap._y = (_root._ymouse * -1.5); }

   This little bit of code is the key: ** Line 1**: onClipEvent (enterFrame) { Do this every time the play head hits the frame. Normally 12 times per second.

   Line 2: _root.myMap._x = (_root._xmouse * -1.5); The x position of the map moves in the opposite direction to the mouse times 1.5

   Line 3: _root.myMap._y = (_root._ymouse * -1.5); Same as line 2 but for the Y axis.

   Remember that the large picture is bigger than the visible stage by 2.5 times. So it will stick to the mouse position but also move more that the mouse by 1.5 times. This at first seems odd but let me explain:

   If your mouse is on x position zero so is the picture (0 x -1.5 = 0).

Both mouse and map on _x zero.

  If your mouse is on _x position 480 (on the far right of the movie) the mouse has moved 480 pixels to the right.

  The picture moves 720 pixels to the left (480 x -1.5 = -720).

  The total mouse + picture move 1200 pixels (480 + 720 = 1200)

  This is why we get a magnification of 2.5 times (480 x 2.5 = 1200).

  Think of it like this: The mouse moves 1 part, the picture moves 1.5 parts, total 1 +1.5 = 2.5 parts/magnification.

This illustrates the _x (sideways) movement only.

  **Note**: Whatever the magnification, you multiply by one number less because the cursor always moves once across the screen.

  If I wanted a magnification of 3 times the code will be:


_root.myMap._x = (_root._xmouse * -2);
         _root.myMap._y = (_root._ymouse * -2);



  **Note**: If the magnification was 3 times, the large map would also have to be bigger, or the small map (and the Flash document) smaller.