Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash - Photo Panorama/Panorama Menu

131 Intermediate
Flash Compatibility: MX 02      For Flash MX04 & Flash 8 Click Here
Flash Compatibility: MX 2002

Written by: Joseph Levin of:  Portal Web Services   Email Joe

Sub Editor: Martin

Editor: Phil Schulz

Updated By: Rabid Lemming

Length: 2100 words

Assumed Knowledge: Getting around the Flash menus, basic movie clips and some basic ActionScript.

Level: Easy / Medium

Access: Free Tutorial

Note:   For Flash MX 2004 & Flash 8 Click Here

 

Important Note: This tutorial has not yet been edited - so that I cannot be sure it is error free or that the instruction are easy to follow. It will be edited soon. Thanks - Phil

 

Learn how to make a panoramic style view of an image that will scroll in as the mouse cursor moves. This same technique can be used to make a scrollable menu with a series of buttons.

Example: Download the Flash file   Int 131g

Scroll your Mouse over the Image: Example of the Movie you will learn to make.

Step one: Create the Layers

1. Open a new Movie: File > New
2. Set the Size: 550 x 300
3. Create 5 extra layers by clicking on the Insert Layer button at the bottom of the Timeline or by selecting Insert > Timeline > Layer
4. Double click on each layer and rename the layers as follows:
   
   
   Layer Names.
   
   
5. Right-click (Mac: Ctrl click)  on the Mask label select: Mask
   
   
   Creating the Mask Layer.
   
   
6. Drag the layers Border and Panorama into the Mask Group:Border and Panorama
   You do this by dragging the Layers in between the Mask and Button layers:
   
   
   Drag other layers into the Mask group.
   
   
   
   Panorama, Topboard and Button Layers are now all part of the Mask group.
   
   
7. Drag the layers so that they are in the correct order again:
   
   
   Layers in correct order.
   
   
8. Lock all the Layers in the Mask group:
   
   
   Layers in mask group locked:

Step two: Setting up the Scrollable Image

1. Select Frame 1 of the Panorama layer. Frame 1
2. Unlock the Panorama layer:
3. You will need a long thin JPEG or GIF picture. Mine is: 2960 x 246 pixels
   Import the image to the Stage: File > Import > Import to Stage
   
   Example: Download the Flash file   Int 131e
   
   
   Thumbnail of my image.

Note: You may use any image, graphic or even text so long as:

• It is much longer than the Stage or
• It is much taller than the Stage if you wish to scroll up and down.

4. If the Align panel is closed Open it: Window > Design Panels > Align (Ctrl K)
5. In the Panel, if the Align to Stage button is not selected, select it:
6. Centre the image: Vertically
7. Centre the image: Horizontally
8. Right click on your image and select: Convert to Symbol
9. For Name type: Panorama
10. For Behaviour select: Movie Clip
11. For Registration select: Centre
12. Click: OK
13. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
14. Select the new Movie Clip (Image) by clicking on it: Select Movie Clip
15. In the Property Inspector give it an Instance Name: panorama_mc

    Note: panorama_mc is the Movie Clip's Instance Name that will be referred to later in ActionScript. The Movie Clip's Library Name (Panorama) cannot be used in the ActionScript.
    
    You may place additional layers within your Movie Clip and these can include any content that you wish such as buttons.

Step three: The textured background

You can see that the image ends up being curved and there is small amount of background that is visible above and below the scrolling image. This curve is false and if you wish you can leave out this section and have your image scroll in a standard rectangle as below:


Example of the Flash Movie with the Curved top and bottom.

Example: Download the Flash file   Int 131g


Example of the Flash Movie without the Curved top and bottom.

In the curved illustration above I you will place textured background in the area. It is not essential as you could just have a plain background colour or crop the movie so that the curvature is not visible.

1. Select Frame 1 of the: Topboard layer
2. Import a small textured image onto your stage: File > Import > Import to Stage
   My image is: 50 x 50 pixels
   
   Example: Download the Flash file   Int 131d
   
   
   The image that I imported to the Stage.

Note: You may use any image you can right click (Mac Ctrl click) and save the image.

3. Select the: Textured Image
4. Break it apart: Modify > Break Apart (Ctrl B)
5. Use your Eyedropper tool to: Sample the Image Colour
6. You now need a rectangle that is slightly longer than your Stage. Select the Rectangle tool and draw a: Rectangle
   
   
   The rectangle takes on the texture of the imported Bitmap image!
   
   
7. Select the selection tool:
8. If your rectangle is selected, deselect it by clicking on a blank area of the Stage: Deselect the Rectangle
9. Move the cursor over the top of the rectangle until you see a small curved line appear under the cursor:
10. Drag the top edge of the rectangle up so that is looks similar to this:
    
    
    The top of the rectangle is now curved.
    
    
11. Use the Fill Transformation tool to adjust the skew and scale of the textured fill:
    

Using the Fill Transformation Tool to change the texture. I was going for a brushed paint kind of look.



12. Double click on the Stroke (outline) and delete the: Stroke
13. Select your: Shape
14. Using the Alt Key to drag the shape above it's current position. This leaves you with a new: Copy
15. Use your Paint Bucket tool to fill the copy with: Black Paint
16. Select the black shape and select: Modify > Shape > Soften Fill Edges
17. Select the following settings:
    
    
    
    Your black image ought to look like this:
    
    Note that there is a blurriness around the black image.
    
    
18. Move the gray centre over top of the blurred outline so that it is aligned:
    
    
    Gray and Blurred outline.
    
    
19. Drag over top of the two shapes and Group them: Modify > Group
20. Select the: Group
21. Right click and select: Convert to Symbol
22. Name the symbol: mc_bord1
23. For behaviour select: Movie Clip
24. Select the Centre Registration point:
25. Grab the Movie Clip and drag with Alt key to make a: Copy
26. Using the Free Transform tool and Shift key rotate the copy: 180°
27. Place them on the stage as shown, such that the clips you just made/copied extend slightly above and below the stage boundaries:
    
    
    Background curves are now in place.

Step four: Creating the Button

1. Unlock the Button Layer:
2. Select Frame 1 of the: Button layer
3. Draw a shape (any colour) that takes the approximate shape of the visible portion of panorama_mc.
   
   It should look like the yellow shape below:
   
   
   Draw a shape similar to the yellow one above.
   
   
4. Right click on the shape and select: Convert to Symbol
5. For Name: Panorama Button
6. For behavior select: Button
7. Click: OK
8. In the Property Inspector give the button the Instance name: panorama_but
9. Double click on the new symbol to: Open Button Symbol
10. Right click on the Up Frame and select: Cut Frames

Note: This should remove the shape that you previously drew.

11. Right click on the Hit Frame and select: Paste Frames
12. Return to your main movie scene by clicking on Scene 1 tab:
    
    
    The button will look like a light, transparent blue.

Note: This colour means the button will be invisible in the final Flash Movie.

Step five: The Mask

1. Unlock the Mask Layer:
2. Select Frame 1 of the: Mask Layer
3. Draw any coloured filled rectangle and make it slightly larger than the Stage: Draw a Rectangle
4. Centre the shape horizontally and vertically in relation to the stage: Centre the Rectangle  
5. It maybe easier to work if you re lock all the layers in the Mask group:
   
   
   All the Layers in the Mask group are locked again.

   Note: When all the layers in the Mask group are locked you will not see the rectangle that you just drew as it is now working as a Mask. Note this lock effect make no difference to the final Flash Movie.

Step six: The ActionScript

The final step is to create the ActionScript. Select frame 1 of the: Actions Layer and place the following script:

stop();
var dist;
var fraction;
var decel;
var halfWidth = (Stage.width/2);
var newposx = halfWidth;
var range = (_root.panorama_mc._width-Stage.width)/2;
var currtime;
var now;
_root.onEnterFrame = function() {
    if (_root.borders_mc.hittest(_xmouse, _ymouse, true) == false) {
        // if cursor not over the borders_mc clip...
        distancex = _root.panorama_mc._x-newposx;
        _root.panorama_mc._x = _root.panorama_mc._x-(distancex/decel);
        _root.onMouseMove = function() {
            currtime = getTimer();
            dist = _root._xmouse-halfWidth;
            fraction = Math.abs(dist/halfWidth);
            decel = (fraction)*15+5;
            if (dist<0) {
                newposx = halfWidth+(fraction*range);
            } else {
                newposx = halfWidth-(fraction*range);
            }
            _root.currposx = _root.panorama_mc._x;
        };
    } else {
        delete _root.onMouseMove;
        _root.panorama_mc.onEnterFrame = function() {
            now = getTimer();
            decel = 35;
            if (now>currtime+(delay*1000)) {
                distancex = _root.panorama_mc._x-halfWidth;
                _root.panorama_mc._x = _root.panorama_mc._x-(distancex/decel);
            }
        };
    }
};

ActionScript Explained:

stop();
Stops the playhead from moving.

var dist:Number;
dist represents the distance in pixels from the centre of the panorama_mc clip (as well as the stage) to the _xmouse coordinate.

var fraction:Number;
fraction represents the ratio of distance to half of the stage width, as measured from the centre of the stage. In other words, if your mouse cursor is 5/6th of the way across the stage, as measured from the left edge, it is 2/3rd of the way across the right half of the stage as measured from the centre of the stage. We are only interested in the fractional distance away from the centre of the stage.

var decel:Number;
decal is an arbitrary number that affects how fast the panorama_mc clip scrolls. The larger decel is, the slower the panorama_mc clip moves.

var halfWidth:Number=(Stage.width/2);
halfWidth represents the coordinate of the centre of the stage.

var newposx:Number=halfWidth;
newposx represents the goal, or final position of the registration point of panorama_mc. Here it is set to the centre of the stage; it will change later depending on the mouse position.

var range:Number=(_root.panorama_mc._width-Stage.width)/2;
range represents the total range of possible movement of the panorama_mc clip.

var currtime:Number;
currtime represents a timer value at the time the mouse is moved

var now:Number;
now represents a timer value that increments with your PC's clock

_root.panorama_but.onRollOver=function() {
Sets the panorama_but clip to trigger with an onRollover event.

_root.onEnterFrame=function() {  
Sets a function for the _root that executes on every frame such that the panorama_mc clip moves toward the goal position of newposx.

distancex=_root.panorama_mc._x-newposx;
distance represents the distance in pixels from the panorama_mc's registration point _x coordinate to the goal coordinate of newposx.

_root.panorama_mc._x=_root.panorama_mc._x-(distancex/decel);
Change the _x position of panorama_mc by distancex/decel, one time every frame. Initially, newposx and the panorama_mc._x are the same and no motion of panorama_mc occurs.

_root.onMouseMove=function() {
If the mouse is moved....

currtime=getTimer();
Find out what time it is each time the mouse is moved.

dist=_root._xmouse-halfWidth;
Find out the distance the mouse cursor is from the center of the stage , in the _x direction.

fraction=Math.abs(dist/halfWidth);
Calculate what percent (as a decimal fraction) the mouse is at as compared to half of the stage width.

decel=(fraction)*15+5;
We want the deceleration number to vary based on the fraction, but we want it to have a lower limit of 5. i.e., decel will range from 5 to 20. When the mouse is at 100% fraction (at either right or left edge of the stage), the decel will be 20 (slower movement, but greater dist). If close to the centre of the stage, the fraction will be approx. 0, and decel will be approx. 5 (faster movement, but smaller dist).

if (dist<0) { 
If dist is negative (i.e., to the left of the centre of the stage), we want newposx (the goal position of panorama_mc._x) to be to the right of the centre of the stage.

newposx=halfWidth+(fraction*range);
If your mouse is at 100% fraction (i.e., at either edge of the stage in the _x direction), make your goal 10% of the range of motion so that the entire panorama_mc may be shown. Similarly, when your mouse position is at 0% fraction (i.e., at the centre of the stage), you want panorama_mc_x to move to the centre of the stage (newposx will equal halfWidth).

} else {
newposx=halfWidth-(fraction*range);
Otherwise, set newposx to be to the left of the centre of the stage.

_root.panorama_but.onRollOut=function() {
delete _root.onMouseMove;
When your mouse leaves the panorama_but clip, delete the onMouseMov function to stop the panorama_mc from responding to mouse movements

_root.onEnterframe=function() {
Sets another onEnterFrame function to wait to see if some time has passed. If enough time has passed (the delay variable), move the panorama_mc clip's _x position to the center of the stage (halfWidth).

now=getTimer();
Keep track of the time since the mouse rolled out from panorama_but.

var delay:Number=15;
In seconds, the amount of time you want to wait until the panorama_mc clip gets moved.

decel=35;
Sets an arbitrary deceleration value.

if (now>currtime+(delay*1000)) {
If the now time is greater than the currtime variable....

distancex=_root.panorama_mc._x-halfWidth;
...calculate the new distance, replacing newposx by your new goal, halfWidth...

_root.panorama_mc._x=_root.panorama_mc._x-(distancex/decel);
...and move panorama_mc.

 

For Flash MX users you can use this code instead (Amended by Rabid Lemming) :

stop();
var dist;
var fraction;
var decel;
var halfWidth = (Stage.width/2);
var newposx = halfWidth;
var range = (_root.panorama_mc._width-Stage.width)/2;
var currtime;
var now;
_root.panorama_but.onRollOver = function() {
    _root.onEnterFrame = function() {
        distancex = _root.panorama_mc._x-newposx;
        _root.panorama_mc._x = _root.panorama_mc._x-(distancex/decel);
};
_root.onMouseMove = function() {
    currtime = getTimer();
    dist = _root._xmouse-halfWidth;
    fraction = Math.abs(dist/halfWidth);
    decel = (fraction)*15+5;
        if (dist<0) {
            newposx = halfWidth+(fraction*range);
        } else {
            newposx = halfWidth-(fraction*range);
        }
    };
};
_root.panorama_but.onRollOut = function() {
    delete _root.onMouseMove;
    _root.onEnterframe = function() {
    now = getTimer();
    var delay = 15;
     //in seconds
    decel = 35;
        if (now>currtime+(delay*1000)) {
            //trace("now=" +now+ " last time=" +currtime);
            distancex = _root.panorama_mc._x-halfWidth;
            _root.panorama_mc._x = _root.panorama_mc._x-(distancex/decel);
        }
    };
};

This works in Flash MX action script 6

That's it so test your movie! As always, thank you for your time!