This modern scrollbar component will make it easy to scroll virtually any content you wish.  It can be setup with very little effort and can be customized to suit your needs.  You can use it to scroll static, dynamic, and input text objects.  It can scroll MovieClips containing any content you wish to scroll.  It can even be used to scroll content loaded from an external source at runtime.

This component will be included in a future installer of SWiSH Max2 and SWiSH miniMax2 but for now please download this component here - max2-contentscroller-component

You can also download the demo file shown above from here – scrollbar_component_sample

Unzip the files into the components folder in your SWiSH Max2 or SWiSH miniMax2 program folder.  Unless you changed the default installation folder, the file path would typically be:

C:\Program Files\SWiSH Max2\components
or,
C:\Program Files\SWiSH miniMax2\components

If you are running Max2 (or miniMax) when you copy the component, you may need to refresh the component tree by right clicking on the tree in the Components panel then selecting ‘Reload’. To use the component, simply drag it into your movie.

I will give an overview of the available parameters along with a brief tutorial for scrolling various types of content below.  Setting up the scrollbar is fairly simple; however, there are a few important things to remember.

 Scrolling Text Only

The component comes with a text object included, so all you need to do is edited the text object to suit your needs (i.e. change the font, size, color, and text type).

1. Drag the component onto the stage.
2. Select the ContentScroller MovieClip in the Outline and open the Parameters window.
3. Make sure the Target | Scroll Target is set to ‘textArea’.
4. Edit the General Settings | Area Width and Area Height parameters and any other options you want.
5. In the Outline panel, open the ContentScroller MovieClip and select the textArea object in the Outline.
6. Edit the text properties in the Properties panel, if you are using Dynamic or Input text, make sure the “Auto-size height” option is disabled.

Note: If you change the text type to Static and then back to Dynamic or Input, the Auto-size height option will automatically be enabled.  You will need to manually disable this on the Properties panel.

Scrolling Static Content

For best results, accumulate your static content OUTSIDE of the component (i.e. on the movie’s main timeline).  Keep in mind that you can only scroll a single object with this component, so you will need to group any necessary content into either a MovieClip, a Group, or a Button.

When you have your static content grouped together, cut and paste it in place into the component.

If you are going to scroll anything other than a MovieClip, you need to ensure that the object is named and the Target option is selected on the Properties panel for that object.

Finally, change the Scroll Target parameter for the component to point to the named object or MovieClip you want to scroll.

Keep in mind, if your content is smaller than the Area Height, the scrollbar will not be needed and will be hidden when your movie is played.

Scrolling External Content

Detailed instructions for loading external content are beyond the scope of this tutorial but you need to set up the Scrollbar parameters just as you would for static content.  If you are loading external text, then you would need to set the Scroll Target parameter to “textArea” and load your text into it.  If you are loading dynamic static content, you would need to load it into a MovieClip defined as the Scroll Target.

You should set the Start on Load? parameter to False if loading external content.  Use your own method to determine when your content has been loaded into the component.  When it is loaded and displayed, you should call the SetScroll() function to initialize the scrollbar.  For example:

ContentScroller.SetScroll();

Have some fun with this component and post comments or questions if you need assistance. I’ve added important notes and a description of the parameters for your reference.

Important Notes

Do not delete or change the name of the vertScroll, textArea, or scrollArea objects.

To change the dimensions (size) of the component, use the Area Width and Area Height parameters.

If static content (such as a MovieClip, Group, Shape, or Image) is used as the scroll target, the textArea object will automatically be hidden and excluded from export; however, it must remain for other features to function correctly.

If you want to scroll nothing but text (whether it be dynamic, input, or static) then all you need to do is type your text into the textArea object and alter the text properties on the Properties panel.

The “scrollArea” object is simply a visual guide for you to use.  This object is used as a mask and will NOT be visible when you play or export your file.  Think of it as a window … whatever content you choose to scroll will only be visible within that window.  Any content hanging outside the boundaries of this object will not be visible.  The “scrollArea” object also determines the height and position (location) of the scrollbar.

The specified Scroll Target object will have its transformation and reference points automatically set to the top-left position.  Its X and Y coordinates will also be forced to 0 (zero) to align with the scrollArea object.

Parameters

Methods

Tags: scrollbar

This entry was posted on Friday, February 20th, 2009 at 1:16 pm and is filed under Max2, components, miniMax2. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.