Your DesktopX Documentation Resource Guide

Documentation Home

Quick Start

User's Guide

Developer's Guide

Resources

Tutorials

Scrolling content

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

• You'll see a white text and a scrollbar on the right. Try to move the blue dot up and down and the text will 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 accordinly, 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.