Many modern digital cameras come with software that allows you to “stitch” multiple photos together. This can be used to create a spectacular panoramic image. With the addition of a scroll bar, you can add some intrigue to your website by allowing a user to scroll the panorama within a 4:3 aspect ratio window.

This article will show you how to add a scrollbar and a preloader to your movie to scroll wide images. The sample file can be found here.

Step 1. Adjust the size of your movie. Select Scene_1 in the Outline panel, then in the Properties panel press the Movie Properties button. Adjust the size of the movie to be 400×300.

Step 2. Adjust your image. Use a image editing tool such as MS Paint to resize your image so that it is 300 pixels high. Lock the aspect ratio when you re size the image so that the width is adjusted correspondingly.

Step 3. Import the image. Use Menu | Insert | Import Image to import an image into your movie. Press the O=X button in the transform panel and set the reference and transform points to be the top left hand corner. Set the _x and _y position to be 0, 0.

Note the width of the image. In the example it is 1377 pixels. This number will be used later.

Step 4.Rename the image to be “image” and set the target checkbox in the Properties panel.

Step 5. From the Components Panel select Controls | Scrollers | Scroll_silver and drag that component onto the stage. If the Parameters panel is not visible, make it visible using Menu | Window and enable the Parameters panel.

Step 6. Adjust the parameters for the scroll bar as shown in the image to the right:
Note that the following parameters have been altered from their default value.

Scroll bar Length: 400
Direction: Horizontal
Window Size: 400
Document Size: 1377
Reverse Output?: true
Event Function: blank.
Event Variable: _parent.image._x

The Window Size, 400, is set based on the size of the viewable area. The Document size, 1377 is set based on the width of the image.

Once the parameters have been altered, drag the scrollbar to the bottom left hand corner of your movie.

If you press the play button to preview your movie you should see that the scrolling is now working. If it does not scroll see the trouble shooting section below.

At this stage, the movie is pretty much complete. However there are a few optional extras that can make the movie better.

Extra A. Add a mask. Currently the movie relies on the movie dimensions to mask the area of the picture that is not to be viewed. This is OK, but it means you could not add the picture to a larger movie without the unviewable sections from being seen. To get around this limitation it is good practice to add a masking element and combine the three items into a single movie clip.

Step A1. Add a masking rectangle. Using the rectangle tool draw a rectangle (any size will do). In the Reshape panel  press the O=X button and set the reference and transform points to be the top left hand corner. Set the _x and _y position to be 0, 0. Set the width to be 400 and the height to be 300. In the Properties panel rename the rectangle “mask”.

Step A2. In the Outline panel, use the down arrow to move the mask to the bottom of the objects.

Step A3. Convert to movie clip. In the Outline panel select Scroll_silver, then while pressing the shift button, select the mask. This should select all 3 objects. Then from the main menu go Modify | Grouping | Group as Movie Clip. Select the new movie clip using the selection tool. In the Properties panel, rename it “scrollpano”. Set the “Use bottom object as mask” checkbox.

If you press the preview button now, you will observe that the panorama is not masked by the 400×300 masking rectangle. If needed, the entire ‘scrollpano’ movie clip could be added to a larger movie using cut and paste, but the viewable dimensions of the panorama would remain fixed to the dimension of the masking rectangle.

Extra B. Add a preloader. As panoramic pictures can be quite large in size, it is often a good idea to add a preloader to your movie so that users can see that something is happening while the image loads. To add a preloader, follow the steps below:

Step B1. Select Scene_1 in the Outline panel. In the Properties panel, set the “Stop playing at end” checkbox.

Step B2. In the Outline panel Insert a scene. In the Properties panel for the new scene, rename the Scene to be “Preloader” and set the Stop playing at end checkbox. Then use the up arrow in the Outline panel to make this new scene the 1st scene in your movie.

Step B3. From the Components panel, drag Progress | LoaderBar_silver onto the Preloader scene’s stage. In the Parameters panel, change the following parameters:
Event Function: blank
When Loaded: Play Next Scene

If you press the preview button now, the preloader scene should flash briefly before progressing to the scrolling panorama. You can simulate slower internet speeds by setting the speed limit selection in the debug panel (see below). Try setting the speed to Dial-up and then re-previewing your movie.

Trouble shooting

If the image does not scroll:

• Check that the image has been named “image” and the target checkbox is checked.
• Check that the Event Variable of the scrollbar has been set to _parent.image._x

If the preloader does not work:

• Check that both scenes have their “Stop playing at end” checkbox set.
• Check that the Loader bar parameter “When Loaded” is set to Play Next Scene

Tags: panorama, scroll

This entry was posted on Monday, June 22nd, 2009 at 1:47 pm and is filed under Max2, components, tips, tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.