Basic Tutorial

This example shows you the most basic use of the ultimateScroller component.

The first thing we are going to do is create our scroll target (the movie we want to scroll).

1. Start a new Flash MX movie with a stage size of 550x400.

2. Use Ctrl+F8 to create a new MovieClip symbol and name it ‘mov_target’ as shown below.

3. Now create a movie that you want to scroll. This can be made up of Graphics, Movies, Fonts, Pixel Fonts and any other content you may want to add.

See the example below. In this example we added some text using the ‘FFF Galaxy Extended’ pixel font (available at www.fontsforflash.com) and a few lines to spice it up.

4. A very important point to remember is that the registration point of the MovieClip should be ‘Top Left’ (notice where the cross can be seen in the example above). This can simply be achieved by selecting all elements (Ctrl+A) and repositioning them at 0x0.

5. Ok, now go back into your main timeline and save your movie as ‘Tutorial1.fla’.

6. Now rename Layer1 ‘target’, and drag an instance of your ‘mov_target’ movie from the library onto this layer (as shown below) and name the Instance ‘myTarget’.

Now let’s add the scroller component.

7. Create a new Layer and rename it ‘scroller’.

8. In the Components Panel (Ctrl+F7 to open) select ‘ultimateScrollerComponent’ as shown below.

9. Now ensuring that the ‘scroller’ layer is selected, drag an instance of the ultimateScroller and drop it on top of the target movie.

Firstly you should find that the scroller ‘snaps’ to the top left of the target movie – see below. If this does not happen, ensure that "snap to objects" is turned on (this option can be found in the 'view' menu).

Secondly, if you open the Parameters panel in flash (with the scroller selected), you will see that the Scroll Target is set to ‘myTarget’ which is the instance name of our target movie clip.

10. Now (with the scroller selected) use the arrow keys to move it to the right side of your target (as shown below).

Now providing you have done everything correctly, if you test your movie, you’ll find that the scroller scrolls the target as expected.

Now let’s look at some of the Parameters you can use to customize the way the scroller looks and behaves.

11. Select the scroller and change the horizontal property to true – you will see the scroller flip horizontally (as shown below).

12. Now click the scroller again (to select it) and using the arrow keys re-position the scroller as shown below.

Now test the movie again to see the scroll target scrolls horizontally.

13. Ok, now save your movie.

Now we’ll look at masking and borders.

14. For this example we don’t want horizontal scrolling, so let’s change the horizontal property back to false and reposition the scroller using the arrow keys (as shown below).

15. Now with the scroller selected, change the useMask property to ‘true’:

Now test the movie, you will see that the visible area of the target matches the height of the scroller (as shown below).

16. Now select the scroller and set the borderStyle property to ‘3d’:

And retest your movie. You will see a sunken 3D border around the target.

17. Now try setting the borderStyle property to ‘line’:

And retest the movie to see a plain line border used:

18. Now save your movie again and we’ll test the color settings, try the following for example:

Which will give you the following look:

19. Finally play around with the other settings and see what they do:

easing – which controls whether the target eases into position.

scrollAmount – the number of pixels the target is scrolled by when the buttons are used.

scrollBuffer – the number of pixels the bottom of the scroll target is buffered by.

Dragbar Auto Height - used in combination with "Dragbar Height" to give a fixed height to the dragbar.

Dragbar Height  - used if Dragbar Auto Height is set to false, to set the desired height (in pixels) of the dragbar. Note: The height set will automatically be adjusted to be a maximum of the scrollbar height-16 and a minumum of 2.

Show Dragbar - choose whether you want to display the dragbar or not.

Scroller Position - the scroller can be positioned on the left or right using this setting. The default it "right".