• Start downloading the discussed demo object here and import it as objects inside your theme.

• Scroll accordingly. Also, the text content will be correctly clipped outside the bounding frame.

• The composition is made by the following objects

  • scroll_base - base parent

  • scroll_title - "Scroll demo" text object

  • scroll_mask - This is an object that has no states, thus it has no visual representation. It is sized to exactly match the black frame though.

  • scroll_item - This is the actual text object. It is a contained children of scroll_mask. Because of this, the content will be clipped outside the parent (scroll_mask) area.

  • scroll_dot - The blue draggable dot object.

• So, the interesting features are two: the making of a draggable object with a limited fixed path (blue dot) and the technique of clipping an object through a stateless parent.

Making the Scrollbar

This is actually very simple. The blue dot script does the magic:

Dim top_pos
Dim bottom_pos

Sub Object_OnScriptEnter
top_pos=33
bottom_pos=161
End Sub

Sub Object_OnDrag(mousex,mousey,newposx,newposy)
Object.left = Object.left
If newposy<top_pos Then Object.top=top_pos
If newposy>bottom_pos Then Object.top=bottom_pos
DesktopX.Object("scroll_item").top = (DesktopX.Object("scroll_mask").height- _
DesktopX.Object("scroll_item").height)*(object.top-top_pos)/(bottom_pos-top_pos)
End Sub

We define first the upper and lowest position it can reach.

Object_OnDrag is called when the object is being dragged. It receives the current relative cursor position and the new object position.

Setting Object.left and Object.top inside Object_OnDrag has a special meaning. It'll affect the newly assigned position. In this case the left position is kept in place, while the top position is limited inside top_pos and bottom_pos.

Finally, the scroll_item object is moved accordingly, using a simple calculation.

Making the Text Clipping

The hardest part is to create the mask object and moving and sizing it in the correct position. A method can be the following:

• Create a default object. Move and size it to fit in the wanted area.

• Use the Summary page text boxes to carefully adjust the position and size.

• Create the child object and make sure you configure it to be 'contained' inside the parent (Child = yes property in the Summary page).

• When things seem ok, select the mask object and remove the existing state.