Free Flash Tutorials	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

131Intermediate
Flash Compatibility: MX 2004 Only      For Flash MX Click Here

Editor: Phil Schulz

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

Length: 2100 words

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

Level: Easy / Medium

Access: Free Tutorial

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 131a

Example of the Panorama Movie with a Menu.

Note: This technique only works in Flash MX 2004 and not earlier versions.

Example: Download the Flash file  Int 131b

Example of the Panorama Movie without a Menu.

Step One: Create the Layers

1. Open a new Movie: File > New
2. Set the Size: 550 x 300
3. Create 4 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 (bear in mind that while we are not going to use the "labels" layer, it is always a good idea to include one in every scene in every FLA file you create):
   
   
   Layer Names.
   
   
5. Right-click (Mac: Ctrl click)  on the Mask label select: Mask
   
   
   Creating the Mask Layer.
   
   
6. Drag the layer "panorama" into the Mask Group:Border
   You do this by dragging the Layer until you see the grayed-out bar directly beneath the "border" layer.:
   
   
   Drag the "panorama" layer into the Mask group.
   
   
   
   Panorama, and Border Layers are now all part of the Mask group.
   
   
7. 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. Note that images of much greater width in pixels than 2960 will yield unexpected results. This is a graphical glitch in the Flash Player, at least up to version 8.
   Import the image to the Stage: File > Import > Import to Stage
   
   Example: Download the Flash file  Int 131d
   
   
   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.

   Additional Notes: While it is not necessary to do so (but helpful if you want some more interactivity), you may also place additional movie clips, graphics, or text within the panorama_mc movie clip. In our case, we have borrowed clips from the "Tsunami Menu" tutorial and have roughly centered them about the center of the panoramic image; you may use your own clips, but here are the Tsunami Menu clips up close (do not worry about any Actionscript code for these clips yet except for what is explained later, below):

   

   Cross Ref: Tsunami Menu
   

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 131c


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: border 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 131e
   
   
   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 (Note that the "Tsunami Menu" items have been omitted for clarity):
    
    
    Background curves are now in place.

Step Four: 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 Five: Add additional frames

1. Highlight every layer's frame #2 by left clicking and dragging from Frame 2 in the labels layer down to frame 2 in the panorama layer.
2. Right click and select: Insert Frame (see Fig. 5-1, below)
   
3. Right click frame 2 of the actions layer and select: Insert Blank Keyframe (see Fig. 5-2, below)
4. The timeline, before addition of ActionScript, will look like Fig. 5-3, below.  

Fig. 5-1: Inserting new frames for each layer.

 

Fig. 5-2: Inserting a blank keyframe in Frame 2 of the actions layer.

 

Fig. 5-3: Your timeline after inserting the blank keyframe in Frame 2 of the actions layer.

Step Six: (optional) Create a new scene to hold your website content

1. Click on Window->Design Panels->Scene (or press Shift-F2 on a Windows based PC) (See Fig. 6-1, below) and click on the large + symbol to add a new scene.
2. After adding the new scene, your scene dialog box ought to look like Fig. 6-2, below.
3. Click on the words "Scene 2" in your dialog box. Since this entire step is optional, and adding in frames and keyframes has already been covered, some minor intermediate steps will be skipped. What you will need to do, however, is make Scene 2 look like Fig. 6-3, below. To do so, you will need to add layers as shown, rename them as shown, add frames to both layers at frame 50, add empty keyframes on both layers at frame 20. As directed in Step 7, below, you will add some Actionscript code to Frame 20. Then, you will place any clip you want in Frame 20 (in our example, a button was used), and actionscript code on that button to go back to Frame 2 of Scene 1. Just make sure to label Frame 20 of the labels layer to be "item1" by left-clicking on that frame and entering in "item1" into the properties dialog box (See Fig. 6-4, below).

Fig. 6-1: Scene dialog prior to adding a new scene.

 

Fig. 6-2: Scene dialog after adding a new scene.

 

Fig. 6-3: Scene 2 should be made to look like so.

 

Fig. 6-4: Place the label name "item1" for Frame 20 of the labels layer in Scene 2 into the Properties dialog box as shown.

Step Seven: The ActionScript

This step involves creation of the ActionScript.
Select frame 1 of the: Actions Layer and place the following script:

stop();
var dist:Number;
var fraction:Number;
var decel:Number;
var halfWidth:Number=(Stage.width/2);
var newposx:Number=halfWidth;
var currposx:Number;
var range:Number=(_root.panorama_mc._width-Stage.width)/2;
var currtime:Number;
var now:Number;
var menutriggerdist=150; //variable strictly for "tsunami menu" in the "menu options" layer in panorama_mc
var menumaxscale=300; //ditto
var menumultiplier=1.5; //ditto
//place any sort of movie clip or button within panorama_mc on the "menu options" layer, so long as you
 //do not place events on panorama_mc (such as onPress, onRelease, etc.) and the menu clips will work.

_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();
              var delay:Number=5; //in seconds
              decel=35;
              if (now>currtime+(delay*1000)) {
                   //trace("now=" +now+ " lasttime=" +currtime);
                   distancex=_root.panorama_mc._x-halfWidth;
                   _root.panorama_mc._x=_root.panorama_mc._x-(distancex/decel);
   
              }

         }

    }

}

Select frame 2 of the: Actions Layer and place the following script:
_root.panorama_mc._x=_root.currposx;



Place the following script on any movie clip within panorama_mc (in our case the leftmost clip on the menu options layer):

Note: In our example, we placed code from the Tsunami Menu into each of the clips placed on the menu options layer inside of panorama_mc. You do not have to worry about this code unless you wish to emulate the wobbly scaling up/down that corresponds to the Tsunami Menu in action. The code that is important is the following, which should be placed on any movie clip you wish to have the user click on. In our example, I have used an on press event to move the timeline play head to the frame labeled "item1", which resides in Scene 2. It is also important to note that the frame labeled "item1" could reside in Scene 1 (it really doesn't matter), but you would have to at least add in more frames in Scene 1 to make room for "item1" frame in Scene 1.

on (press) {
_root.gotoAndStop("item1");
}

Select frame 20 of the: Actions Layer in Scene 2 and place the following script:
stop();
newposx=halfWidth;

Select the button you will place on frame 20 of Scene 2 and place the following script on that button:
on(press){
_root.gotoAndStop(2);
}

ActionScript Explained:

For Frame 1:

stop();
Stops the play head 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;
decel 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 currposx:Number;
currposx represents the _x position of panorama_mc every time the mouse is moved. It is stored so as to set the position of panorama_mc should the timeline play head ever land on Frame 2.

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

var menutriggerdist=150;
var menumaxscale=300;
var menumultiplier=1.5;
menutriggerdist, et al. represents variables used strictly for the "tsunami menu" in the "menu options" layer in panorama_mc. Check out the tutorial for the "Tsunami Menu" on this website!

_root.onEnterFrame=function() {
Define an onEnterFrame function that will check to see if the mouse cursor is "hitting" the borders_mc movie clip, and what to do in either case.

if (_root.borders_mc.hittest(_xmouse, _ymouse, true)==false) {
If the mouse cursor's x and y position registers as false when a hittest is checked for the movie clip borders_mc (i.e. the mouse is not overtop of borders_mc but is over the panorama)s.....do the following:

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.currposx=_root.panorama_mc._x;
Set the currposx variable to hold the current value of the _x location of the panorama_mc when the mouse is moved. This variable will be used in the Actionscript code in Frame 2 so that if a movie clip (a "Tsunami Menu" clip, for example) is pressed and the timeline goes to a different frame, upon return to frame 2, the panorama_mc's _x position is reset to currposx so that the panorama will be at the position it last was at when you return to the main panorama scene.

} else {
delete _root.onMouseMove;
If the mouse cursor is overtop of borders_mc (i.e., not over the panorama_mc clip), delete the _root.onMouseMove function. This is done as you don't want the panorama to respond to mouse movement when the mouse cursor is not overtop the panorama_mc clip. However, we want the panorama_mc to move back to its original position if no mouse movement happens for a while, so we do this:

_root.panorama_mc.onEnterframe=function() {
Define a new onEnterFrame function....

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

var delay:Number=5;
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 Frame 2:

_root.panorama_mc._x=_root.currposx;
Sets the _x position of the panorama_mc to where it was last when the mouse was last moved.

For Frame 20 of Scene 2:

stop();
Simple stop action.

newposx=halfWidth;
This sets the new target goal to be equal to halfWidth, but will only get executed when the timeline play head goes back to frame 2 of Scene 1 after the user has clicked on the button placed in Frame 20 of Scene 2.

 

For the button that was placed in Frame 20 of Scene 2:

on(press){
_root.gotoAndStop(2);
}
When the button is pressed, the onPress event will take the timeline play head to Frame 2. Do not confuse this with the Frame 2 of Scene 2. Based on the syntax of the gotoAndStop method, the "2" used as its argument is understood to mean the "global" frame 2, as if all frames in the movie were placed from left to right, starting with the frames of Scene1 and then Scene 2, and numbering the frames sequentially from 1 to the last frame from left to right.

Note: I have found that if you wanted to go back to Frame 1 (i.e., frame 1 of Scene 1) by using a "1" as the argument of the gotoAndStop method, then the entire Actionscript fails.
As it does no harm to go to Frame 2 (which works fine!) just return to the main panorama scene (i.e., Scene 1) by returning to Frame 2.

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

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here