RISC OS 3.7 User Guide

# Draw tutorial

This tutorial section introduces Draw by helping you create the picture below. If necessary, remind yourself of general RISC OS ideas and terms before you start, by going back to your Welcome Guide.

The drawing above shows a six mile walk through the countryside, and is divided into four parts:

- A map showing the route of the walk and how to get to the starting point.
- A written description of the walk.
- A photographic view of part of the walk.
- An information box describing how many miles long the walk is, how long it takes to complete, the going (wet) and any points of interest.

The following pages will take you step-by-step through the process of creating the above drawing, showing you how to draw a map compass, lake, roads, road scale, woods and rivers. You'll also learn how to drag text files (created by Edit) and sprites (created by Paint) into a Draw window.

### Undoing your mistakes

If you do something by mistake while you're working through this tutorial, try pressing F8. This is a keyboard short-cut for the Misc/Undo option, and should undo your last operation. If you decide that you didn't want to undo something after all, just press F9 (Redo).

### Selecting Draw objects

Before you start on the map, it's worth spending a short time practising how to select objects. This is important: before you can do anything to a Draw object - move it, for instance, or change its colour - you need to select it.

A Draw picture will typically contain lots of objects overlapping each other, and often one object will be completely behind another. Selecting just the object you want to alter needs a bit of skill.

  1 Open the`Tutorials.DrawTutor` directory and double-click on the file called `Sign`. Once this file is loaded it looks like this:

This drawing consists of three objects:

- the outside circle - this is at the front (i.e. on top) of the three objects
- the triangle
- the exclamation mark - at the back of the stack of three objects.

  2 Choose the Select tool from the toolbox (if it's not already highlighted).

The toolbox is the strip of icons down the lefthand side of the Draw window - click on the arrow at the bottom of the toolbox and it will be highlighted.

  3 Click on the circle to select it. A dotted box (known as a bounding box) will appear around it, indicating that it is selected:

#### Selecting 'buried' objects

When an object's bounding box extends beyond others, it's easy to select: as long as you click on that part of the object, it will be selected. When an object is in front of others (as the circle is), again you'll have no problem: click anywhere within it to select it.

However, it can be difficult to select an object that's 'underneath' other objects. You can often see many objects apparently occupying the same physical place, but in fact they're 'stacked' on top of one another.

For instance, clicking on the triangle will in fact select the circle, because the circle is in front of the triangle. To select the triangle, you need to double-click on it.

If you double-click many times, you'll 'tunnel down' through the objects that are stacked on top of each other, selecting each one in turn.

#### Changing the 'stacking order' of overlapping objects

The exclamation mark is behind the triangle, so you could select it by double-clicking and tunnelling down through the stack of objects to reach it. However, another way of getting to a buried object is to send the objects covering it to the back of the stack:

  1 Select the circle, press Menu and choose Select/Back (or press Ctrl-B).
  2 Select the triangle (by double-clicking) press Menu and choose Select/Back.
  3 Select the exclamation mark by single-clicking on it.

Now the exclamation mark is always at the front; you don't need to double-click repeatedly each time you want to select it.

You can change the stacking order of objects using this method (e.g. you could bring the circle to the front of the stack by selecting it and choosing Select/Front).

#### Moving selected objects

Once you've selected an object, you can drag it anywhere within the Draw window. For example:

  1 Select the exclamation mark and move the pointer inside the bounding box.
  2 Now hold down Select and drag the exclamation mark outside the circle (don't click on the 'handles', these stretch and rotate the object):

Having practised selecting objects, there is nothing else you need to do with this file, so you can close it by clicking on its Close icon. If during your experimenting, you have changed the file at all, you'll see a message warning you of this; click on Discard to tell the computer you don't want to save your changes.

### Start the drawing: create the map symbols

Six different symbols are used on the map; two types of tree, a picnic site, a mountain, an historic building and a parking site symbol:

The first part of this tutorial takes you through creating these symbols.

#### Set the size of the drawing area

The first step in creating the map is to click on the Draw icon on the icon bar (if you don't have Draw loaded on the icon bar see page 193). This displays an empty

Draw window. You should now check that the drawing area is A4, landscape:

  1 Move your pointer into the Draw window and press Menu.
  2 Make sure both Landscape and A4 are ticked in the Misc/Paper limits menu.

#### Make the Draw window larger

The Draw window that is displayed is quite small. Increase the size of this window:

  1 Make sure that the zoom is 1:1 (press Menu and check the Zoom option).
  2 Drag the window to the top left of your screen.
  3 Drag the Adjust size icon down and to the right so the window is larger, and looks nearly square.

#### Switch on Draw's grid

To superimpose a grid within the window:

  1 Press Menu on the Draw window.
  2 Choose Grid/Show by clicking with Adjust.
  3 Choose Grid/Lock (this time click Select and the menu will disappear):

The easiest way to create most of the map symbols is to draw them large and then shrink them down to the size you want. When you have finished creating all the map symbols your Draw window will look something like this:

#### Create the hall symbol

There are five steps involved in creating the hall symbol:

  1 Choose the Rectangle tool from the toolbox, then move the pointer over one of the grid markers near the top lefthand corner and click. This marks one corner of the rectangle. Move the pointer down two grid units and right three grid units and click again. The rectangle will be displayed, locked to the grid.
  2 Now choose the Straight line tool. Create two vertical lines within the rectangle. (To draw a single line, click once at the start point of the line, move the pointer, then double-click at the end point of the line.)
  3 Now draw a two-segment line for the roof: Move to the top left of the rectangle and click once. Move right one and a half grid units and up one grid unit and click again. Finally move to the top right of the rectangle and double-click.
  4 Next, to make the rectangle and all the lines in the symbol into one object, you have to select them all and then group them:

Choose the Select tool at the bottom of the toolbox. Select all the objects in the hall symbol (by dragging a select box around them), press Menu and choose Select/Group:

If you now click outside the new bounding box, it will disappear. To select the symbol again just click on it.

  5 Finally, thicken the lines in the symbol to make it stand out more: Select the hall symbol, press Menu and choose 4 from the Style/Line width menu. All the lines in the symbol will be redrawn 4 points wide (a point is 1/72 inch).

#### Create the conifer tree symbol

  1 Choose the Straight line tool in the toolbox.
  2 Move to the right of the hall symbol and draw a vertical line four grid units high (notice that the lines you draw now are very thick).
  3 Move to the left of the line and create a two-line segment to act as the top two branches of the tree (do this in the same way you created the roof of the hall symbol).
  4 Now move down and create two more sets of branches.
  5 When you've finished the tree choose the Select tool, drag a select box around the tree and group it into one object.

#### Create the picnic site symbol

The picnic site symbol is much easier to create than it looks:

  1 Select the tree symbol you have just created, press Menu and choose Select/Copy. A copy of the tree will appear slightly below and to the right of the original. Drag this copy several grid markers to the right of the original tree.
  2 Choose the Straight line tool and add three lines to the copy of the tree to make up the remainder of the picnic site symbol.
  3 Once again make the symbol into a single object by grouping it.

#### Create the mountain symbol

The mountain symbol is just a solid triangle and is very simple to create.

  1 Choose the Joined line tool.

This tool allows you to create straight lines with the added feature that, when you double-click to end your path, an extra line is drawn to join the last point to the first point.

  2 Move to the right of the picnic site symbol and draw a triangle as shown below. (The third line is drawn automatically when you double-click on the last point. )
  3 Now colour the inside of the triangle black: Choose the Select tool and Select the triangle, press Menu and go into the Style/Fill colour box. Click on the black patch near the bottom right of the Fill colour box and click on OK:

#### How style options work

Before you draw your next symbol it is important that you understand how the Style menu works. Every time you choose a style, e.g. Fill colour, it stays in force until you change it again, and it affects other tools. So if you set Fill colour to black, any subsequent rectangles, lines and curves you draw will also be filled in black. To avoid drawing an object in the wrong style, each time you choose a new tool check that you have the correct fill colour, line width etc. before you draw the new object.

#### Create the deciduous tree symbol

The deciduous tree symbol requires a little more time and 'artistry' to create. Draw this symbol below the other symbols. All your symbols will then be in full view without the need to scroll.

  1 Choose the Straight line tool. Move the pointer near to the bottom right of the window and draw a small vertical line.
  2 Turn off the Grid/Show and Grid/Lock options (it's very difficult to draw curves with the grid switched on).
  3 Choose the Curved line tool.
  4 Choose None in the Style/Fill colour box, then click on OK. This will ensure that whatever you draw next will not be filled in.
  5 Move the pointer to the top of the small vertical line and click. Now move very slightly down and to the left.

You'll notice that there is a small blue square over the point where you first clicked Select, and as you move the pointer a small orange square will also appear. The blue squares are simply to show you where you clicked Select as you build up a curve. The orange squares are control points; they help to show you how the curve is being generated (there's more on this in Editing curves on page 243). Both types of square will disappear when you finish your curve. For the time being, just build up your curve clicking Select at roughly the points shown below:

When you come to the end of the curve double-click (and leave your pointer where it is). Don't worry if your curve isn't exactly the same as the one above.

  6 Now you can create the other two curves in the same way. By starting the next curve where you finished the previous one you will create a smoother, more continuous effect to the outline of the tree.

If you are dissatisfied with your curves you can either delete them and start again, or edit them. You can delete a curve (or any object) by selecting it and choosing Select/Delete. If you want to learn how to edit curves see page 243.

  7 Finally, make the symbol into a single object by grouping it.

#### Create the parking symbol

There are five steps involved in creating the car parking symbol:

  1 Turn on the Grid/Show option (but leave the Grid/Lock option off). Then choose the Rectangle tool and set the Style/Line width to Thin.
  2 Now move to the left of the deciduous tree symbol. Click and drag the pointer to make a small rectangle, about half a grid unit wide, and almost one grid unit tall.
  3 Choose the Select tool and select the rectangle. Then press Menu and go into the Style/Fill colour box. Click on the black patch near the bottom right of the box and click on OK.
  4 Choose the Text tool. Position the pointer near the rectangle you've just drawn and click. A red vertical bar (known as a 'caret') will appear. Type the letter `P`.
  5 Use the Select tool to select the `P`. Now go into the Style/Font size box and click Adjust on 14pt. The size of the `P` will increase to 14 points. Now move to the Font name submenu and choose Homerton/ Bold. The `P` will be changed into the new font.
  6 While the `P` is still selected go into the Style/Text colour box and change the colour of the `P` to a light grey. Then drag the `P` so that it is centred inside the rectangle. Now go back into the Text colour box and change the colour of the `P` to white.

Note: Never leave text colour set to white, or you won't see anything next time you type in any text. Always change it to black again. To do this, choose the Text tool, then click Menu and set the Style/Text colour to black (don't forget to click on OK).

  7 Finally, choose the Select tool and group the rectangle and the P to make a parking symbol.

#### Scale the map symbols

Now reduce the size of the first five symbols to the correct size for the map:

  1 Begin by selecting the hall and mountain symbols (by clicking Adjust on each symbol). Press Menu and copy them using Select/Copy.
  2 Now drag the two selected copies down towards the bottom lefthand corner.

Notice that both selected objects move as you drag one of them. Deselect them, drag each one separately into the bottom lefthand corner, then select them both again.

  3 Press Menu and move to the Transform/Magnify box. Use the Delete key to delete any value already in the box, then type in `0.2` and press Return. The two symbols will be reduced in size.
  4 Select and copy the picnic site symbol, reduce the copy of the symbol to `0.15`, and move it near the two already reduced.
  5 Select and copy the two tree symbols, reduce the copies of these symbols to `0.1`, and move them near the three already reduced.
  6 Now move the parking sign symbol to the right of the five reduced symbols.
  7 Finally, select all five original, large symbols and press Delete. All that you should now see are the six symbols at the bottom left of the window:

#### Save your work for the first time

Now is a good time to save the work you've done so far. To do this:

  1 Make sure that you have a directory display visible.
  2 Press Menu over the Draw window, go into the Save/File/Save as box, delete the word`DrawFile` and type in a new filename, for example `Map1`.
  3 Drag the Save as icon to your directory display.

### Drawing the map compass

The next task before actually drawing the map is to construct the map compass.

#### Draw the first compass quadrant

The compass is made up of four quadrants, but you only need to create one.

  1 Turn on Grid/Lock (Grid/Show should still be on).
  2 Choose the Joined line tool. Change the Style/Fill colour to white. Then move to the middle of the Draw window and click on one of the small grid markers. Now move up 1.5 units and right 0.5 units and click again. Finally move down two grid units and double-click to create a closed triangle:
  3 Move to the top of the triangle you've just created and click. Now draw a second triangle:
  4 Choose the Select tool and select the first triangle (the lefthand one) and fill it in black using the Style/Fill colour box:
  5 Finally, group the two triangles into a single object.

#### Create the other quadrants of the compass

The next step is to make three copies of this quadrant and rotate them to form the four quadrants of the compass.

  1 With the quadrant selected, copy it three times (instead of using the menu, just select the quadrant and then press Ctrl-C three times). As each quadrant is copied it will be drawn in front of the previous one:
  2 The last quadrant copied will still be highlighted. Press Menu and type 90 into the Transform/Rotate box, then press Return. The quadrant will be rotated anticlockwise around its centre by 90 degrees. Then highlight the quadrant above this one and rotate it by 180 degrees. Rotate the other quadrant by 270 degrees:

#### Fit the quadrants together

The four quadrants overlap each other at the moment and will be difficult to join accurately:

  1 First, drag the three copied quadrants so that they form a fragmented star.
  2 Then drag them so that their tips all meet the bottom tip of the original quadrant:
  3 Finally, group the four quadrants into a single object.

#### Add the text

The next step is to add the text indicating north, south, east and west.

  1 Choose the Text tool from the toolbox. Press Menu and choose Style/Font size/20. From now on the size of any text you type into the drawing area will be drawn at 20pt. (The font should still be set to Homerton/Bold.)
  2 Position the pointer just above the top of the first quadrant and click. A caret will appear. Type `N`.
  3 Move the pointer and click where you want to put the E. Type in the `E` then move the pointer again and add the `S` and `W`.
  4 Press Menu and switch off Grid/Show and Grid/Lock.
  5 Now choose the Select tool and drag the letters into the correct positions:

#### Scale and move the compass

When you finish drawing the compass drag a select box around it and group it. Then press Menu and Transform/Magnify the compass by `0.5`. Finally drag it to the top right corner of the Draw window:

#### Save your work as you go along

Now is a good time to save your drawing. The easiest way to do this is to use a shortcut - press the F3 button at the top left of the keyboard. This displays the Save as box. You've already saved your work in a file called`Map1`, so just click on OK and the work you've done since you last saved your file will be saved.

Note: It's a good idea to save your work every 10 minutes or so.

### Drawing the map

The next stage is to draw the map itself. When you have finished the map your Draw window will look something like this:

The sequence in which you'll build up the various parts of the map is:

  1 Main road to Swafford
  2 Road to Burfell and river
  3 Hardley Lake, Garston Hall and picnic site
  4 Path and Brooks Farm
  5 Mountain and parking area
  6 Conifers and deciduous trees
  7 Map scale
  8 Map text.

#### Draw the main road to Swafford

Choose the Curved line tool and set the Style/Fill colour to None. Move the pointer above the Hall symbol and create the following curve (don't forget to double-click at the end of the curve):

Once you've created the curve, copy it and drag the copy so that it is just below the original curve. The second curve should be parallel to the first curve to give the appearance of a road. Select both lines (hint: drag a select box that passes through both lines) and group them.

Note: If you accidentally select one of the symbols immediately beneath the two lines, you can deselect it by clicking Adjust on it.

To add the circle to the road, first choose the Ellipse tool. Then turn Grid/Show and Grid/lock on, click on any grid marker, and drag the pointer in any direction until a small circle is displayed. Click again to finish the circle. Then turn the Grid off again. Select the circle and magnify it by `0.5`. Then go into the Style/Fill colour box and fill the circle with white. Now drag the circle so that it sits on the road as shown below:

#### Draw the road to Burfell and the river

The road to Burfell can be drawn as one thick line. Choose the Curved line tool and set the Style/Fill colour to None. Set the Style/Line width to 1. Move the pointer to the upper line in the main road and draw a road going upwards almost to the top of the window (see the picture overleaf).

The river can be drawn using a thinner line. Set the Style/Line width to 0.5, then go into the Style/Line colour box and choose light blue (the patch at the bottom right of the box). Now move to the left of the window and draw the river.

#### Construct Hardley Lake, Garston Hall and the picnic site

Choose the Joined curve tool. Now draw the outline of the lake. (Remember that the Joined curve tool will join your last point and starting point when you double-click. Notice also that the line is drawn in blue, because you selected a blue line colour to draw the river.) Select the lake and fill it with light blue.

Drag the Hall symbol near the bottom left of the river, and then drag the picnic site symbol to the right of the lake. Your Draw window should now look like this:

#### Draw the path and Brooks Farm

The path is made up of a number of filled circles. Select and copy the circle on the main road, then magnify the copied circle by `0.5`. Go into Style/Fill colour and change the colour of the new circle to light grey.

Now drag the new circle to the right of the Hall symbol. Then repeatedly copy the circle and drag the copies to form the entire path (see the picture overleaf). If you drag the wrong object, don't forget you can press F8 to undo a mistake!

Make one more copy of the circle and drag it below the picnic site symbol (this will become the symbol for Brooks farm) then click Adjust on each circle in the path and group them all. (If you accidentally click Adjust on an object you don't want to group, click Adjust on the same symbol to deselect it and continue.)

Finally, magnify the circle below the picnic site by 1.2 and fill it with dark grey.

Now is a good time to save your work again.

#### Draw the mountain and parking area

Drag the mountain symbol near the top lefthand corner of the Draw window.

Drag the parking symbol below and to the left of where the road to Burfell first passes through the path.

Your map should now look something like this:

#### Draw the conifers and deciduous trees

Creating the conifer wood is very simple. Drag the conifer symbol near to the Hall symbol and copy and drag it until you have created a wooded area similar to the one on page 216.

Creating the deciduous woods is just the same. Drag and copy the symbol to each of the three deciduous woods shown on page 216.

#### Draw the map scale

  1 Begin by switching on Grid/Show and Grid/lock.
  2 Choose the Rectangle tool and set the Line width to 0.25, the Line colour to black and the Fill colour to white.
  3 Move below the circle on the main road and draw a rectangle one grid unit long and half a grid unit high.
  4 Draw three more rectangles, joined together.
  5 Select the first and third rectangle and fill them in dark grey:
  6 Turn Grid/Lock and Grid/Show off, select the four rectangles and group them. While the grouped rectangle is still selected, click on the handle at the bottom right and drag it up so that the rectangle becomes thinner:
  7 Choose the Text tool. Set the Font name to Homerton/Medium and the Font size to 12.
  8 Type in `0` at one end of the scale, and `1 mile` at the other.
  9 Finally group the scale and text.

#### Add the map text

  1 Type in the following text at the positions shown on the map on page 216:

`Garston Hall`

to Burfell

R. Ley

Garside Fell

Hardley to Swafford

417

Brooks Farm

  2 The text you have just typed in should still be in Homerton Medium 12pt. To make the text stand out, change`to Swafford` and`to Burfell` to Trinity/Medium.Italic. Then change`R. Ley` to Trinity/Medium.
  3 Use the rotate handle to rotate`R. Ley` so that it is parallel to the direction of the river:
  4 Rotate the text`Garside Fell` in the same way. Your map should now look like this:

Now is a good time to save your work again.

### Adding a written description of the walk

Now to add a written description of the walk immediately above your map...

#### Add the title

Drag the scroll bar on the righthand side of the Draw window up as far as you can, then choose the Text tool. Set the font to Trinity Medium.Italic at 20pt.

Click at the top left of the window and type in:

`A circular walk around Hardley lake`

#### Import a text file into your drawing

You can include the contents of a text file into a text area in a Draw file. A text area is a special object which accepts text from another file. An Edit file called `MapText` has been included in the`Tutorials.DrawTutor` directory which contains a description of the walk around Hardley lake. The first few lines of this file contain commands which specify the font, paragraph spacing and so on.

For a full description of text areas, and the special commands that you can include in a text editor to describe how to format the text, see Text areas on page 250.

  1 Choose the Select tool.
  2 Open the`Tutorials.DrawTutor` directory and you'll find an Edit file called `MapText`. Drag this file onto your Draw window. When you release Select some text will be displayed:

The text that is displayed is only part of the text contained in the Edit file. To display the entire contents of the file:

  3 Select the text area and drag it beneath the title.
  4 Drag the bottom handle down and to the right so that all the text in the file is displayed:

### Importing a picture

Now to import a photograph of the lake, which has been scanned into a sprite file:

  1 Begin by dragging the scroll bars on of the Draw window as far down and right as you can, then go into the`Tutorials.DrawTutor` directory and drag the sprite file called `LakeView` onto the Draw window.
  2 Select the sprite and magnify it by 0.7. The sprite will now be re-drawn slightly smaller. Drag it to the position shown below:
  3 Now choose the Rectangle tool (set the Style/Fill colour to None) and draw a rectangle around the sprite.
  4 Choose the Text tool and type in`View from the Picnic site` at 16pt:

### Information box

The final part of the map is the Information box.

#### Draw the box outlines

  1 Begin by dragging the scroll bar on the bottom of the Draw window as far right as you can, and the scroll bar on the right of the window as far up as you can. Then switch on the Grid and Grid lock.
  2 Choose the Rectangle tool and draw a rectangle near the top righthand corner of the window 11 grid units wide and 7 grid units deep.
  3 Choose the Straight line tool and draw a vertical line dividing the box in two. Now draw a horizontal line one grid unit down from the top of the box, and a second horizontal line four and a half grid units down. The left side of the box is now divided into three smaller boxes:

#### Add text to the box

  1 Choose the Text tool and change the font to Homerton Bold 14pt.
  2 Click on the grid marker two grid units down from the top of the box and half a grid unit in from the left of the box. Type in the word `GOING`. Click down one grid unit and type in `TIME`, then click another grid unit down and type in `LENGTH`. Now click to the right of `GOING` and type in `Wet`, and then type in `3 hours` and `6 miles` one grid unit down and two grid units down from `Wet`.
  3 Turn the Grid and Grid lock off. Then type `** Feature **` in the centre of the bottom box.
  4 Click in the centre of the top box and change the font size to 16pt. Type `INFORMATION`.
  5 Finally click below the word 'Feature', change the Font name to Trinity Medium.Italic and the Text size to 14pt, and type in`Horses you might` then press Return and type `see in the wood`. Now choose the Select tool and drag the two lines you have just typed in to centre them inside the box:

#### Import a picture of some horses

Scroll the Draw window down. Then drag the sprite file called`Horse` from the`Tutorials.DrawTutor` directory to a spot just above the word 'Farm' in 'Brooks Farm'. To start with, the horse is displayed far too large, so select and magnify it by 0.4. Now scroll back up and drag it so that it's centred inside the righthand side of the box:

### The final map

Your map is now finished. If you want to display the entire map in your Draw window, press Menu and set the zoom factor to 1:2 in the Zoom/Magnifier box.

The entire map will then be displayed (at half its original size) in the Draw window:

Save your map if you want to, and compare it with the file`Map` in the`Tutorials.DrawTutor` directory.

If you have a printer connected you can print your finished map by pressing the Print button on your keyboard; it may take a while to print due to the size of the picture files included. If it doesn't quite fit on your printer's paper, try grouping all the objects in the file and magnifying them (e.g. by 0.9). For more details about printing Draw files see page 249.