Video Tutorial – How to use the scroller

Intro

Welcome to this Barisco tutorial! In this tutorial we are going to have a look at the Scroller in Barisco.

The Scroller in Barisco has similar behavior to that of a group. But scroller can be used to create an area that will have scrolling features.

This way you will be able to add a lot of extra content in your pages, without having to divide the content over different pages or overlays.

Tutorial

Adding a Scroller to your page is easy. To add a Scroller to your page, all you need to do is press the Scroller button on the Toolbar and the Scroller will be added to the page. Let’s add a Scroller to the page and see how we can use it.

As you can see the Scroller has been added to the page. On the right side and on the bottom of the Scroller you can see scrollbars.

Like I mentioned before, the Scroller is quite similar to a Group and mostly behaves the same way. This means that you will be able to change the position and size just like you would do for a Group.

Below the Position & Size section at the Property Panel, you will find the Scroller section. The Scroller section contains all the unique features that can be used for the Scroller.

The first two features allow you to enable the vertical and horizontal scrollbars. This can be used in case you absolutely do not want a scrollbar on either the vertical or horizontal axis. Please note that if the contents of the Scroller are smaller than the scrollable area; the scroller will not display any scrollbars.

The Thumb and Track features allow you to change the colors of the scrollbars. So for example: if I change the color of the Thumb to blue. You can see that the color of the Thumb on the scrollbar have changed to blue. To change the background of the Scroller, we can use the Background feature on the Style section of the Property Panel.

So let’s set the Background to light grey. By using these features, you will be able to change the appearance of the Scroller to make it match the designs or color scheme of your project.

To test our Scroller we need to add some contents. Let’s open the Scroller and add some images to our Scroller, so that we see how it looks like when the Scroller has some contents to scroll.

Now that we have opened the Scroller, I’m going to drag these images from the library onto the Stage Area.

Now that this has been done, let’s open the page preview and have a look at our Scroller. As you can see we have vertical and horizontal scrollbars. This is because the images exceed both the width and height of the Scroller’s scrollable area. When I scroll down I’m able to see the 3 images on the left. And when I scroll to the right and then scroll up and down I’m also able to see the 3 images on the right.

Now if I close the page preview and disable the horizontal scrollbar. And then go back to the page preview; you will see that it is no longer possible for me to scroll horizontally.

Next we’re going to use the Layout features to organize our images into a list. To do this you need to go to the Layout section on the Property Panel. Here we will be able to choose from Normal, Vertical and Horizontal. Since we have already disabled the horizontal scrollbar; let’s go and use the vertical layout. As you can see the images in the scroller have been organized into a list of images. You will be able to do the same with any other type of object.

So if you add a Text to the Scroller and then enable the vertical layout, the text will also be organized in the same way. Let’s set the spacing to 10 pixels. As you can see a space has appear between the images. If you want to find out more about Layouts, please refer to the documentation or watch the Groups tutorial.