Scroller for a dynamic content

In order to scroll dynamic content in Actionscript 3, the following dimensions needs to be considered:

  1. Length of the visible area, usually the mask
  2. Length of the scroll slider movement
  3. Ratio between the lengths of the scroll movement and the content minus the visible area
  4. Set content position based on slider position

In this example also mouse wheel event is listened in order scroll the content. It is attached to the stage so no additional hit area is needed for it. In case it would be attached to “this” or some other element, the event would only trigger when the mouse is on top of some drawn content.

Additionally a timer is used to track if the arrows have been pressed longer, in order to scroll more content with one click. With a fast click the content does not move due to the timer. This could be fixed with a separate call to a separated moving function, but I did not bother to build one.

Yet another thing to mention which is not so straight forward, is to get the onReleaseOutside event in Actionscript 3. In Actionscript 2 it still exists, but here in Actionscript 3 it needs to be build differently by catching the event via stage. Since the stage might not be available immediately in case you decide to build the scroller as a separate class, it is good fashion to use the event called ADDED_TO_STAGE.

Source code example now available at GitHub.

The symbols used in the example are also available in the code example repository.