Advanced Tutorial

If you followed Tutorial 1 you should be familiar with the basic use of the ultimateScroller component. This tutorial will take things much further and show you how to use the scroller dynamically, and how to configure and control the scroller using ActionScript.

You may also want to refer to the Reference Panel in Flash for a full list of the Properties and Methods of the component.

The first thing we're going to show you is how to create an instance of the ultimateScroller component entirely in code.

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

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

3. Now drag an instance of the ultimateScroller onto your stage.

4. Now Delete the scroller component.

Confused? We only dragged the component onto the stage to add It to our Library.

5. Rename Layer 1 ‘actions’ and open the Actions Panel  in expert mode on frame 1.

6. Now type the following ActionScript:

What we are doing is telling Flash to create an instance of the ‘ultimateScroller’ component, with an instance name of ‘myScroller’ on the root timeline at Level 1.

7. Now save your movie as ‘Tutorial2.fla’ and test it.

You should see a disabled scroller in the top left corner of your movie (as shown below).

Pretty Cool eh?

Now we're going to show you another parameter of the ‘attachMovie’ method.

8. Change the ActionScript we typed in step 4 to look like the code below:

The fourth parameter is an initialization parameter which accepts an array of properties and settings, so we are initializing the scroller component with a position of 100x100.

9. Now test your movie and you’ll see that the scroller has moved slightly.

We can also initialize any of the other parameters of the scroller component.

10. Change the ActionScript again to look like the following:

If you test your movie, you should now see something like our  example below:

As you’ll see, you can initialize any property of the scroller as it’s created, however this isn’t the only way to use the properties.

Let’s look at how to get and set property values after the scroller is initialized.

11. Change the ActionScript again to remove the initialization parameter, so your code looks like this again:

12. Now add a line of code to trace the current value of the ‘size’ property.

Your code should look like this:

13. Now test your movie. You should see the value ‘100’ traced to the output console.

So that’s how to access, or get a property, but how do we set a property?

Very simply.

14. Change the ActionScript yet again to look like the following:

15. Now save and test your movie.

You should see the following:

Simple eh, you now know how to get and set the properties of the component.

We're going to show you how to load an external movie, and set the scrollTarget dynamically:

First, we need to create an external movie that we’ll load into our main movie and use as the scroll target.

16. Use Ctrl+N to create a new Flash MX movie and set the stage size to 200x400.

17. Now simply draw anything that fills the stage height and width.

Our example is shown here:

18. Now save your movie as ‘Tutorial2b.fla’ and use Ctrl+Enter to test your movie (and publish the swf).

Now we’ll create a placeholder movie on our main timeline to load the external movie into.

19. Close the ‘Tutorial2b.fla’ movie and go back to ‘Tutorial2.fla’.

20. Add a new layer and rename it ‘placeholder’.

21. Now use Ctrl+F8 to create a new MovieClip called ‘mov_placeholder’ (as shown below).

22. Simply close the ‘mov_placeholder’ MovieClip and return to the main timeline.

23. Now open the Library (Ctrl+L) and drag an instance of the ‘mov_placeholder’ movie onto a new layer called ‘placeholder’.

24. Name the movie instance ‘ph’ and re-position it to 0x0 like in the example below:

25. Now change the ActionScript on frame 1 of the ‘actions’ layer, to look like the following:

26. Now insert a new keyframe on frame 5 of the ‘actions’ layer and add the following ActionScript:

Ok, what we’ve done above is created our scroller then set its x position to the right of the ‘placeholder’ movie. We then set the ‘scrollTarget’ to be the ‘placeholder’ movie, which attaches the scroller to it.

27. Now finally extend the ‘placeholder’ layer so it spans across the same 5 frames as the ‘actions’ layer.

Now test your movie, you should see the external movie loaded into the placeholder  and an instance of the scroller attached to it (as shown below).

Ok, the final thing we want to show you is how to use the methods of the ultimateScroller.

28. Create a new Layer called ‘buttons’.

29. On the ‘buttons’ layer, create 2 button symbols, ‘scroll up’ and ‘scroll down’ as shown in the example below. Be sure to position them to the right of the stage as we don’t want them overlapping the loaded content.

30. Now select the ‘scrollUp’ button and open the Actions panel in expert mode. Now type the following actions:

31. And finally, select the ‘scrollDown’ button and open the Actions panel in expert mode. Now type the following actions:

Now save and test the movie again – by clicking the buttons we can control the ultimateScroller remotely. You may also want to look at the other methods and properties available:

pageUp()

pageDown()

scrollToTop()

scrollToBottom()

getScrollPosition()

setScrollPosition()

dragHeight(myHeight)

dragHeightAuto = true/false

dragVisible = true/false

scrollSide = "left"/"right"

Right, that wraps up the tutorial. Based on what we’ve covered, you should be comfortable with using the ultimateScroller in your own movies.

Happy Flashing!