Adding Scrollbars to Objects

If an object is too big to display the whole contents within the bounding box, you can add scrollbars so that the user can scroll around it. Scrollbars are most often used for text and images but can also be used for frames which means you can create a collection of objects which can be scrolled together.

Creator allows you to add a Scrollbar object to any object using the Tools toolbar, which contains two scrollbar buttons: the Horizontal Scrollbarimage\Scrollbar_Horiz.jpg button and the Vertical Scrollbarimage\Scrollbar_Vert.jpg button.

Note:
You cannot add a Horizontal Scrollbar to a Text object because text automatically wraps at the end of the line to a new line. Therefore, you can never have text off-to-the-side, which means you do not require a Horizontal Scrollbar.

Adding a Scrollbar object to an object:

  1. Click on the object on the page to which you want to add a Scrollbar object – a bounding box. will surround the selected item. Where the object is larger than this bounding box – there is too much text to fit or the image is set to a Fixed size and is too big for the object.

  2. Select the Vertical Scrollbar button and/or the Horizontal Scrollbar button from the Tools toolbar.

  3. The Vertical Scrollbar object is added to the right of the bounding box. The Horizontal Scrollbar object is added to the bottom of the bounding box.

  4. The object to which the scrollbar has been added will contain a new Scrollbar object showing the Up, Down and Thumb objects that make up the scrollbar – see Example.

Note:
Just like other objects in your publication, each object in the Scrollbar object has its own Properties dialog, so you can change the appearance of the scrollbar to match your publication design – see Custom Scrollbars for more information.

  1. The size of the Thumb is worked out for you when a scrollbar is added. In other words, the size of the Thumb will change depending on how much of the contents in the object is on display within the bounding box i.e. if the border of the bounding box is small compared to the contents within the object, the Thumb will be small; if the border is nearly the same size as the contents, the Thumb will be large.

  2. The Scrollbar object’s right-click menu has one additional option, named Proportional Thumbs. Untick this option if you want to change the size of the Thumb yourself (see point 4 above). By default, this option is ticked. 

Different Uses for Scrollbars

A scrollbar can be added to any object which is too big for the container (bounding box) you have drawn for it. The bounding box then becomes a viewport on the object which the scrollbar allows you to move around.

A scrollbar can be added to a piece of text where there is more text than can be displayed in the box you’ve drawn for it. The scrollbar will be attached to the side of the text object and will automatically scroll the text up and down in the viewport without any further design.

Special Note:

When you add a Vertical Scrollbar to a Text object, a Message box will appear asking you if you want to add keyboard actions to your object as well – these are the same scrolling actions added using the QuickBuild menu, see Add Scroll Actions for more information. Click the Yes button if you want to add the keyboard actions as well as the Vertical Scrollbar and No if you only want to add the Vertical Scrollbar.

A scrollbar can be added to an image which has be set to it’s Fixed size. Vertical scrollbars can be added to right side of the object and the Horizontal scrollbar will be added to the bottom. The scrollbars will scroll the image up and down, left and right in the viewport without any further design.

A scrollbar can also be used to scroll combinations of objects which have been placed on a frame. In this instance you will need to create your own viewport object by drawing another frame and inserting the frame holding the objects into this frame.

Scrolling a Combination of Objects

To create a frame containing several objects and scroll that you should proceed as follows:

  1. Create a frame and layout all the objects you want to use in combination, or select existing objects and choose the Group as Frame option to add them all to one frame.

  2. Draw the frame you want to act as the viewport for the group of objects.

  3. Select the original group of objects in the Organiser and drag that group onto the viewport frame and then use Insert Into to make the group a child of the viewport frame.

  4. The frame holding the group of objects will have resized to fit inside the viewport frame but the objects within it will not.

  5. Hold down the Ctrl key and resize the group frame to it’s original size and is larger than the viewport frame again.

  6. Finally add a vertical and/or horizontal scrollbar to the viewport frame as required. This scrollbar will move the inner frame around.

Note:
This feature is not supported in HTML5

Limitations in Flash

Scrollbars in Flash may require the text to be set to dynamic.

If you have problems with the automatic scrollbars use the technique for scrolling a combination of objects explained above but with just a single object.

Related Topics:

Custom Scrollbars

Add Scroll Action in the QuickBuild menu

Introducing the Text Actions