As an example we are going to create a stack for viewing a map of Edinburgh. The map is larger than our viewing stack so we need to be able to scroll the map to view different parts. First we create our stack, by going to File-> New Stack. Open the stack Property Inspector from the Object menu(1) and name it "Map Viewer". Go to the Position tab, resize it (2) and turn off the ability to resize the stack(3).

Now we import our map using Import as Control from the File menu. This imports the image on to our stack ready to be used. You can get all the images we used in this lesson here:

 https://tinyurl.com/ycyj3yhz

Now that we have imported the map we can see that it is much bigger than our stack. If we check the property inspector we can see that it is actually 1171 x 795, compared to our stack which is only 300 x 300.

If we want to be able to see different parts of our map we need to be able to scroll it. As we can't make an image scroll we will put our map into a group. It may seem a little unnecessary to group a single object but in this case we do it because when you scroll a group the contents scroll so we can use this to show us different parts of our map.

Firstly we want to position the map so that it's top left corner is in the top left corner of the stack, our scrolling will then be relative from that point. We can do this in the property inspector of the map image, we just set the left (1) and top (2) co-ordinates of the image to 0.

We select our map image and then use the Group button in the toolbar(1) to create a group containing our map, we will call this group map display (2)

We now need to make our map scroll, firstly we make the map display group the same size as our stack and lock it's size and position. This means when the group is scrolled the displayed contents scroll but the group itself stays in the same position on the card. This allows us to see different parts of the map. After setting these options you might need to set the topLeft of the map display group back to 0,0.

Now to make the map scroll all we need to do is to add horizontal and vertical scrollbars to the map display group. Go to the Basic tab of the group Property Inspector (1), and check Horizontal and Vertical scrollbars (2).

You can now switch to Run mode and use the scrollbars to show you Thistle Street, the home of LiveCode.

Having 2 scrollbars on your stack certainly works but maybe the stack would look nicer without them? I think so. Instead of the scrollbars lets add some arrow buttons to allow us to navigate around our map.

Firstly lets remove the scrollbars and add our buttons up, down, left and right. Drag four buttons from the tools palette, and name them in the basic tab of the Property Inspector.

Now lets add icons to our buttons so they look a little nicer. Add a new card to store the button icons, in the Object menu (1) choose New Card (2) and name it graphics (3). Import the graphics you want to use as button icons (4) in the same way we imported the map image in the second step.

Go back to the main card using the View menu -> go prev, and select the up button. We are going to add the up arrow as an icon so we need to turn off the opaque, show name, 3-D and Show border properties in Basic Properties.

Now go to Icons and Borders, turn off Hilite Border (1), and use the Icon picker (2) to select the up arrow graphic we just imported (3). Note: since the icon is white on transparent, it may be hard to see...

Repeat this for the other buttons, then play around with the size and position of them until you are happy with how it looks.

Now that we have our buttons in place it's time to make them do something. What we want our buttons to do is to mimic using the scrollbar to scroll the contents of the group. To do this we set the vScroll and hScroll properties of the group. The vScroll is the amount in pixels the object has been scrolled down, the hScroll is the amount in pixels that the object has been scroll right. If the vScroll or hScroll is zero, the object has not been scrolled.

Lets start with the down button. Select the button and open the Code editor from the toolbar. Enter:

on mouseUp
	local tCurrentScroll
   
	put the vScroll of group "map display" into tCurrentScroll
	add 10 to tCurrentScroll
	set the vScroll of group "map display" to tCurrentScroll
end mouseUp

Click apply, and switch to run mode to test. Every time the down button is clicked we add 10 to the vScroll of the map display group so the map will scroll down by 10 pixels.

Now all we need to do is script the other 3 buttons in the same way. The up button also uses vScroll but right and left use hScroll as we want the map to scroll horizontally when using those buttons. To move up and left, use -10 instead of 10.

Now we can navigate around our map until we can see Thistle Street again.