Difference between revisions of "LibreOffice-Suite-Draw/C3/Working-with-Objects/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with '{| border=1 |Visual Cue ||Narration |- |Show Slide Welcome to the Spoken Tutorial on <br/> Flowcharts Glue Points and Beizer curves in LibreOffice Draw. ||<br/> Welcome to the…')
 
Line 4: Line 4:
  
 
|-
 
|-
|Show Slide  
+
|Show Slide 1
Welcome to the Spoken Tutorial on <br/> Flowcharts Glue Points and Beizer curves  in LibreOffice Draw.
+
Welcome to the Spoken Tutorial on <br/> Working with Objects in LibreOffice Draw.
||<br/> Welcome to the Spoken Tutorial on Flowcharts, Glue Points and Beizer curves in LibreOffice Draw.
+
||<br/> Welcome to the Spoken Tutorial on<br/>  Working with Objects in LibreOffice Draw.
  
 
|-
 
|-
|Show Slide  
+
|Show Slide 2
 
Learning Objectives
 
Learning Objectives
Draw Beizer curves and Flowcharts.<br/>
+
Position objects using Grids and Guide lines
Connect Flowcharts using <br/> Connectors and Glue points. 
+
Use snap functions
||
+
Customize lines and arrowheads
In this tutorial you will learn to  
+
||In this tutorial we will learn how to:<br/>
Draw Beizer curves and Flowcharts.
+
Position objects using Grids and Guide lines
You will also learn how to  
+
Use snap functions
Connect Flowcharts using<br/>  Connectors and Glue points.                 
+
Customize lines and arrowheads
 +
 
 +
|-
 +
|
 +
Duplicate objects
 +
Re-size objects exactly
 +
Distribute objects
 +
Combine, Merge, Subtract and Intersect Objects
 +
||You will also learn how to:
 +
Duplicate objects
 +
Re-size objects exactly
 +
Distribute objects
 +
Combine, Merge, Subtract and Intersect objects
  
 
|-
 
|-
Line 24: Line 36:
 
Ubuntu Linux version 10.04
 
Ubuntu Linux version 10.04
 
LibreOffice Suite version 3.3.4
 
LibreOffice Suite version 3.3.4
||<br/> Here we are using <br/> Ubuntu Linux version 10.04 and  LibreOffice Suite version 3.3.4.
+
 
 +
||<br/> Here we are using <br/> Ubuntu Linux version 10.04 as our operating system and  LibreOffice Suite version 3.3.4.
 +
 
  
 
|-
 
|-
|  
+
|Show Slide 3
||Let’s learn about Bezier Curves.
+
Grids
 +
Grids aid to position objects
 +
Accurately on the draw page.
 +
||<br/> What are Grids?
 +
Grids aid to position objects
 +
Accurately on the draw page.
  
 
|-
 
|-
|Show Slide
+
|Switch to the already open RouteMap file.
Bezier Curves
+
||Let us open the file RouteMap that was saved on the Desktop.
Bezier Curves are used mainly in computer graphics
+
To make curves smoother.
+
Use these curves to experiment
+
With the shape and size of curves.
+
||
+
  
Bezier Curves are used mainly in computer graphics
+
|-
To make curves smoother.
+
|
You can use these curves to experiment
+
||In the previous tutorials, we had briefly used grids.
With the shape and size of curves.
+
  
 +
Now let us learn about grids in detail.
  
 
|-
 
|-
|Show Slide
+
|Switch to the Draw file Route Map.
<< Display Figure Two. >>
+
From the Main menu >> select View >> click on Grid.
 +
||From the Main menu, select View, and click on Grid.
  
||All curves have a start point and an end point.
 
The points on the curve are referred to as Nodes.
 
  
 
|-
 
|-
|Switch to the RouteMap file.
+
|Point to the Display Grid
||Let us go to our Routemap file.
+
||Then click on Display Grid.
  
 +
|-
 +
|Use the mouse to point to  the small grids.
 +
||The Draw page is filled with a number of horizontal and vertical dotted lines.
 +
These form the grid.
  
 
|-
 
|-
|Point as per the narration
+
|Use the mouse to point to the small grids.
||Let’s to go to the Commercial Complex from Home.
+
||These grids are for display purposes only. They will not be printed.
  
 
|-
 
|-
|Point a right-bottom corner of the Parking Lot.
+
|Use the mouse to point to  the small grids.
||To do so, we have to go right from the Parking Lot.
+
||You can customize the size of the grids, that is, make them smaller or bigger as required.
  
 
|-
 
|-
|Refer Figure Three.
+
|Main menu >> select Tools >> click Options
Select the Drawing toolbar >> right-click for the context menu >> click Ungroup.
+
||From the Main menu, select Tools and click Options.  
||Remember, previously we had grouped the drawing.
+
So let’s ungroup it.
+
  
 
|-
 
|-
|From the Drawing toolbar >> click  Curve >> select Curve.
+
|Options dialog box appears.
||Now, from the Drawing toolbar, click Curve and select Curve.
+
||You will see the Options dialog box.
  
 
|-
 
|-
|Click once with your mouse.
+
|Select LibreOffice Draw >> select Grid
 +
||Click LibreOffice Draw and select Grid.
  
||On the Draw page, click on the start point of the route - this is Home.
+
|-
 +
|Click Resolution.
 +
Under “Resolution” enter the following values:
 +
Horizontal – 7 cm
 +
Vertical – 5 cm
 +
||Under “Resolution” enter the following values:
 +
Horizontal – 7 cm
 +
Vertical – 5 cm
  
 
|-
 
|-
|Keep the left mouse button pressed and drag straight
+
|  
downward <<This will look like a straight line.>>
+
||Subdivision decides the number of spaces in a grid.
||Keep the left mouse button pressed and drag till the Play Ground.
+
  
You will see a straight line.
+
|-
 +
|Under “Subdivision” enter the following values:
 +
Horizontal – 3
 +
Vertical – 4
 +
||Let us enter Subdivision values.
 +
Horizontal – 3
 +
Vertical – 4
  
 
|-
 
|-
|Release the mouse and move the pointer to the side entrance of the school.
+
|Synchronize axes >> Leave this option unchecked.
||Release the mouse button.
+
Click OK.
 +
||Let us leave the Synchronize axes option unchecked.
 +
Click OK.
  
Now move the pointer to the Commercial Complex.
+
|-
 +
|Move to the Draw page.
 +
Move the mouse in a circular fashion so that it goes over a grid.
 +
||Look at the Draw page now.
 +
Look at the size of each box in the grid.
  
The line will curve as the mouse moves.
+
|-
 +
|
 +
||Let us count the spaces that we set in Subdivision.
  
 
|-
 
|-
|Double-click  at the Commercial Complex.
+
|Point to the Horizontal 1, 2, 3 spaces and vertical 1, 2, 3, 4 spaces.
Now, click anywhere on the page.
+
||Horizontally there are 1, 2, 3 spaces and vertically there are 1, 2, 3, 4 spaces.
 +
<<Pause>>
  
||Double-click at the end point, that is the Commercial Complex.
 
  
 
|-
 
|-
|
+
|  
 +
||Now let us learn about Guides.
  
Move the mouse over the curve to indicate the smoothness of the curve.
+
|-
||We have drawn a curve!
+
|Show Slide 4
 
+
What are Guides?
Notice that the curve transition is smooth.
+
Guides are helper lines
 +
Extensions of the edges of the objects
 +
That are displayed when it is moved.
 +
||
 +
What are Guides?
 +
Guides are helper lines or
 +
Extensions of the edges of the objects
 +
That are displayed when it is moved.
  
 
|-
 
|-
 
|  
 
|  
||Now let us edit the points on this curve using the Edit Points toolbar.
+
||Let us enable the guidelines.  
  
 
|-
 
|-
|Click on the curve.
+
|Go to the Main menu >> click View >> select Guides.
||Click on the curve.
+
||Go to the Main menu, select View and select the option Guides.
  
 
|-
 
|-
|Right-click on the curve and choose Edit Points.
+
|Click “Display Guides”.
||To enable the Edit Points toolbar, right-click on the curve and choose Edit Points.
+
If the guides are already enabled then just point to the option.
 +
||Now, click the option Display Guides.
 +
 
  
 
|-
 
|-
|Point to the end-points of the curve where the blue boxes are visible.
+
|From the Main menu >> click Tools >> Options.
||When the blue boxes appear at the end-points of the curve, we can edit the curve.
+
The Options dialog box appears.
 +
||From the Main menu, click Tools and Options.
 +
The Options dialog box appears.
  
 
|-
 
|-
|Click on the start point of the curve.
+
|From the left panel, click on the small black triangle next to LibreOffice Draw.
||Click on the start point of the curve.
+
Click View.
 +
||From the left panel, click on the small black triangle next to LibreOffice Draw.
 +
Click View.
  
 
|-
 
|-
|Drag so that the dotted line with a control point is shown.
+
|From the right panel, select Guides when
||You will see a dotted line with a control point.
+
moving.  
  
 +
||From the right panel, select Guides when
 +
moving.
 +
This way you can see the guides when moving objects.
  
 
|-
 
|-
|Drag the curve a little.
+
|Click OK.
||You can now drag the dotted line to reduce or expand the curve, as required.
+
||Click OK.
  
 
|-
 
|-
|Double-click anywhere on the Draw page
+
|  
 +
||Now, let us move the park a little to the right.
  
||Double-click anywhere on the Draw page, once you have made a change.
+
|-
 +
|Select the park, move it a little to the right.
 +
Wait so that the extensions lines are visible.
 +
||When the park is moved, the extension lines of the edges of the object become visible.
 +
These are the Guidelines.
 +
<<Pause>>
 +
 
 +
|-
 +
|Show Slide 5
 +
Snap Lines
 +
Snap Lines help us position two or more objects
 +
within an area that is defined.
 +
Snap lines and Snap points are created by the user
 +
Snap lines run vertically and horizontally
 +
and appear as dashed lines.
 +
||
 +
What are Snap Lines?
 +
Snap Lines help us position two or more objects
 +
within an area that is defined.
 +
Snap lines and Snap points are created by the user
 +
Snap lines run vertically and horizontally
 +
and appear as dashed lines.  
  
 
|-
 
|-
 
|  
 
|  
||You can use the Edit Points toolbar to insert, move or delete points on the curve to create a smoother curve.
+
||You must enable the Snap Lines option before you create snap lines.
  
 
|-
 
|-
|Show Slide
+
|Switch to the Draw file.
Assignment
+
||  
Draw a Bezier curve
+
Work with all the options
+
Using the Edit Points toolbar.
+
||Here is a small assignment for you.<br/>
+
Draw a Bezier curve and
+
Work with all the options
+
Using the Edit Points toolbar.
+
  
 +
|-
 +
|Go to the Draw page, right-click for the context menu and select Snap Lines.
 +
Now check all the three options:
 +
Snap Lines Visible
 +
Snap to Snap Lines
 +
Snap Lines to Front
 +
||Go to the Draw page.
 +
Right-click for the context menu and select Snap Lines.
 +
Now check all the three options:
 +
Snap Lines Visible
 +
Snap to Snap Lines
 +
Snap Lines to Front
  
 
|-
 
|-
 
|  
 
|  
||Now, let us learn to create Flowcharts.
+
||Snap lines that we create, will now be visible.
  
 
|-
 
|-
|Go to the Main menu >> select Insert >> click Slide.
+
|Show Slide 6
Repeat these steps.  But in the final video show both the page creations at a fast pace.
+
<<Show Figure One.>>
||Let’s add 2 new pages to the file RouteMap.
+
||Let’s define an area, using Snap Lines, within which the objects in the map must fall (as shown in the slide).
  
 
|-
 
|-
|Go to the Drawing toolbar >> Move the mouse to Flowcharts icon >> Click on the small black triangle.
+
|Switch to the Draw file RouteMap.
||Draw provides a separate option in the Drawing toolbar for Flowcharts.
+
  
|-
+
||  
|Show Slide 3
+
<< Show the flowchart as show in Figure One.>>
+
||This flowchart shows all the stages in the Spoken Tutorial process.
+
  
 
|-
 
|-
|  
+
|Move the mouse cursor over the vertical ruler.
||Let’s create this flowchart.
+
||Move the mouse cursor over the vertical ruler.
  
 
|-
 
|-
|Go to the Drawing toolbar >> Move the mouse over the Flowcharts icon
+
|Press the left mouse button; wait till the cursor is now shaped like a two-sided arrow.
||From the Drawing toolbar click on Flowcharts.
+
||Press the left mouse button.
 +
 
 +
You will notice that the cursor is now shaped like a two-sided arrow.
  
 
|-
 
|-
|Click on the small black triangle >>
+
|Drag the mouse towards the Draw page.
Click Flowchart: Process
+
||Drag the mouse towards the Draw page.
||Click on the small black triangle and select Flowchart: Process.
+
You will see a dotted line.
  
 
|-
 
|-
|Go to the Draw page and draw the Flowchart:Process
+
|Do not let go of the mouse button.
 
+
||Do not release the mouse button.
<< Refer Figure One to draw the flowchart.>>
+
||Place the cursor on the Draw page
+
Hold the left mouse button and drag it down.
+
  
 
|-
 
|-
|  
+
|Holding the left mouse button drag the dotted line that appears to the page.
||You have drawn a Process box.  
+
Let go of the mouse button.
 +
||Holding the left mouse button, drag the dotted line to the page.
 +
Now, release the mouse button.
  
 
|-
 
|-
 
|  
 
|  
||A Process box represents a step or an event in the entire process.  
+
||Can you see the line?
 +
This is the Snap Line.
  
 
|-
 
|-
 
|  
 
|  
||We can insert text in flowchart objects, too.
+
||To create the bottom most limit, simply drag the line to the bottom of the page.
  
 
|-
 
|-
|Double-click on the Process box.
+
|Refer figure one and draw one more horizontal snap line and two vertical Snap Lines.
Enter the text “Create the Tutorial Outline to chunk content into 10-minute scripts” inside it.
+
||Let’s create three more Snap Lines to define the area within which the map is enclosed. <Pause>
||Let’s double-click on the Process box and type the text “Create the Tutorial Outline to chunk content into 10-minute scripts” inside it.
+
  
 
|-
 
|-
 
|  
 
|  
||Formatting options for flowcharts are also similar to that of other objects.
+
||We have created horizontal and vertical Snap Lines.
 +
Now you can position the objects along these Snap Lines.
  
 
|-
 
|-
|  
+
|Show Slide 7
||Now, let’s align the text inside the Process box.  
+
Snap Lines
 +
Create as many Snap Lines as you want.
 +
||<br/> You can, of course,
 +
Create as many Snap Lines as you want.
 +
 
  
 
|-
 
|-
|Select the text >> Right-click for the Context menu and click Text
+
|Point to the horizontal and vertical Snap Lines function like the X-and Y-axis on the graph.
||Let us select the text.
+
 
Right-click to view the Context menu and click Text.
+
||The horizontal and vertical Snap Lines function like the X-and Y-axis on a  graph.
 +
 
 +
Within these two axes, you can position objects exactly.
  
 
|-
 
|-
| The Text dialog box appears
+
|Show Slide 8<br/>
||The Text dialog box appears.
+
Snap function
 +
Snap to Grid - position an object exactly on grid points
 +
Snap to Snap lines - position an object exactly on a snap line
 +
Snap to Page margin - position an object exactly on the page margin
 +
||You can use Snap function along with the grid lines to position objects accurately.
 +
You can also:
 +
Snap to Grid - position an object exactly on grid points
 +
Snap to Snap lines - position an object exactly on a snap line
 +
Snap to Page margin - position an object exactly on the page margin
  
 
|-
 
|-
|Check the box “Resize shape to fit text width” >> Click OK.
+
|Show Slide 9
 +
Assignment
 +
Explore all the Grid options Tools >> Options >> LibreOffice Draw >> Grid.
 +
Check what happens to objects when you snap to
 +
snap to Grids, snap lines and page margins
 +
||Pause this tutorial and do this assignment.
  
||In the Text dialog box, check the box Resize shape to fit text width.
+
Explore all the Grid options.<br/>
Click OK.
+
Check what happens to objects when you snap to
 +
snap to Grid, snap lines and page margins
  
 
|-
 
|-
|  
+
|(Refer Figure Two for placement of the lake.)
||You will see that the Process box has changed its shape to fit the text!
+
Switch to the Draw file.
 +
Point to the lake that is already drawn.
 +
||Now let’s add one more lake, in the exact shape of this lake, next to the School Campus.
  
 
|-
 
|-
|Undo this action, by pressing the Keys CTRL+Z.
+
|  
||Now let us undo this action, by pressing the CTRL+Z keys together.
+
||To do this let’s use the Duplicate option.
  
 
|-
 
|-
|Select the text.
+
|Select the lake.
||Again, let’s select the text.  
+
||Let’s select the Lake.
  
 
|-
 
|-
|Go to the Main menu >> select Format >> click Text
+
|Go to the Main menu >> click Edit >> select Duplicate >>
||Go to the Main menu and select Format and click Text.
+
||Go to the Main menu, select Edit and click on Duplicate.  
  
 
|-
 
|-
|The text dialog box appears.
+
|The Duplicate dialog box appears.  
||The Text dialog box appears.
+
||The Duplicate dialog box appears.
  
 
|-
 
|-
| Check the option Word wrap text in shape >> Click OK.
+
|In the Number of copies field, enter the value 1.
||Let us check the option Word wrap text in shape.
+
 
Click OK.
 
Click OK.
 +
||In Number of copies, enter the value 1 and click OK.
 +
  
 
|-
 
|-
 
|  
 
|  
||The text has adjusted itself to fit the shape of the Process box.
+
||The Lake is duplicated.
  
 
|-
 
|-
|Draw a process box beneath it.
+
|Drag the lake and place it as shown in Figure two.
Go to the Drawing toolbar >> Move the mouse over the Flowcharts icon >> Click on the small black triangle >> click Flowchart: Process >> go to the Draw page and draw the object.
+
||Let’s drag the lake and place it near the school.
 
+
||In the same manner, let us now draw another  Process box beneath the first one.
+
  
 
|-
 
|-
|Enter the text “Create Scripts” inside it.
+
|  
<<Refer Figure One>>
+
||Objects can also be re-sized exactly to any measurement that is required.
||Let us insert the text “Create Scripts” inside it.<Pause>
+
  
 
|-
 
|-
|Go to the Drawing toolbar >> Move the mouse over the Flowcharts icon >> Click on the small black triangle >> click Flowchart: Decision >> go to the Draw page and draw the object.
+
|Show Slide 10
Enter the text “Review Okay”?
+
Show Figure Three.
||Now, lets draw a Decision box and insert the text “Review Okay?” inside it. <Pause>
+
||Let’s use exact measurements and change the shape of the House as shown in this slide.
  
 
|-
 
|-
 
|  
 
|  
||A Decision box represents a decision that has to be made.
+
||Let’s give it the same height and width and slant its corners and rotate it.
 
+
It directs us to the next process based on the outcome of the decision.
+
  
 
|-
 
|-
|Go to the Drawing toolbar >> Move the mouse over the Flowcharts icon >> Click on the small black triangle >> click Flowchart: Process >> go to the Draw page and draw the object.
+
|Switch to the file RouteMap.
||Let us now draw another Process box beneath the Decision box.
+
Select the Home.
 
+
Right click for context menu >> select Position and Size.
 
+
||First, select Home, right-click for the context menu and select Position and Size.
  
 
|-
 
|-
|Type the text “Record Video”.
+
|The Position and Size dialog box appears.
||Let us insert the text “Record Video” inside it.<Pause>
+
||The Position and Size dialog box appears.
  
 
|-
 
|-
|Circle the area with the mouse to show its approximate location.
+
|Click Position and Size tab
||Next, we need another Decision box here, with the text “Review Okay?”
+
||Click the Position and Size tab.
  
 
|-
 
|-
|Point to the earlier Decision box and then point to the empty space after “Record Video” process box.
+
|Enter Width = 3, Height =3
||Let’s copy the Decision box we created before and place it here.  
+
||Under Size, enter the value 3 in both the Width and Height fields.
  
 
|-
 
|-
|Select the decision box “Review Okay”.
+
|Select Rotation tab >> enter angle field = 10.
Press CTRL+C
+
 
||So, select the Decision box and press the CTRL+C keys together.
+
||Then click the Rotation tab.
 +
In the Angle field, enter the value 10.
  
 
|-
 
|-
|then press CTRL+V.
+
|Select Slant Corner and Radius Tab.
||Now press the CTRL+V keys together.
+
||Finally, select the Slant Corner and Radius Tab.
  
 
|-
 
|-
|Select the copied decision box and move it beneath the process box ,
+
|Slant Angle= 5.
Type the rext “Review Okay inside it.
+
||Let’s move this box beneath the previous Process box.
+
  
Now enter the text  “Review Okay” inside it.
+
Click OK.
 +
||In the Slant Angle field, enter 5 degrees.
 +
 
 +
Click OK.
  
 
|-
 
|-
|Go to the Drawing toolbar >> Move the mouse over the Flowcharts icon >> Click on the small black triangle >> click Flowchart: Connector >> go to the Draw page and draw the connector as shown in Figure FOUR.
+
|  
||Finally let’s draw a flowchart-connector and type A inside it. <Pause>
+
||We have re-designed the house!
  
 +
|-
 +
|Show Slide
 +
Assignment
 +
Draw various shapes, using the Drawing tool bar.
 +
Check if you can apply Corner radius to all shapes.
 +
||Pause this tutorial and do this assignment.<br/>
 +
Draw various shapes, using the Drawing tool bar.
 +
Check if you can apply Corner radius to all shapes.
 +
 +
|-
 +
|Switch to the Draw file Route Map
 +
||Now let’s space the right edges of some objects evenly.
  
 
|-
 
|-
 
|  
 
|  
||A flowchart-connector connects two parts of a flowchart.
+
||We will use the Distribution option to achieve this.
  
 
|-
 
|-
|Point to the flowchart page in the thumbnails on the left panel
+
|Show Slide 11
||Let’s say that the first part of the flowchart is on one page …..
+
Distribution
 +
Select at least three objects
 +
To use the Distribution option.
 +
||<br/> We must
 +
Select at least three objects
 +
To use the Distribution option.
  
 
|-
 
|-
|Point to the next page in the thumbnails on the left panel
+
|Switch to Draw
||….. and the second part on another page.
+
Select the Residential Complex, the Parking Lot and the Commercial Complex.
 +
||First, select the Residential Complex, the Parking Lot and the Commercial Complex.
  
 
|-
 
|-
|Come back to the flowchart page.
+
|Group them by dragging the Select arrow to cover all the objects.
Point to the connector.
+
||Let’s group them by dragging the Select arrow to cover all the objects.
Select and copy the connector.
+
||We draw a flowchart-connector at the end of the flowchart on the first page.
+
  
 
|-
 
|-
|Go to the next page .
+
|Right-click and select Distribution >> click Horizontal >> select Right.
Now paste the connector.at the beginning of the  page.
+
Click OK.  
||Then we draw the same connector at the beginning of the second page.  
+
||Now, right-click and select Distribution.
 +
Under Horizontal, select Right.
 +
Click OK.
  
 
|-
 
|-
| Point to the objects
+
|Point to the right edges of the object.
||Before we connect the objects, let us learn about Connector Lines and Glue Points in Draw.
+
||The right edges of the object get distributed evenly.
  
 
|-
 
|-
|Show Slide 4
+
|Show Slide 12
Connectors
+
Distribution
Connectors are lines or arrows
+
The Distribution option
Whose ends are attached or docked to an object.
+
does not distribute
 +
the objects
 +
horizontally or vertically
 +
||<br/>
 +
The Distribution option
 +
does not distribute
 +
the objects
 +
horizontally or vertically
 +
 
 +
|-
 +
|Show Slide 13
 +
Horizontal Distribution
 +
The “Horizontal” option distributes
 +
The right and left edges
 +
The horizontal centers
 +
The spacing of the objects
 
||
 
||
 +
The Horizontal Distribution option distributes<br/>
 +
The right and left edges
 +
The horizontal centers and
 +
The spacing of the objects
  
Connectors are lines or arrows
+
|-
Whose ends are attached or docked to an object.  
+
|Show Slide 14
 +
Vertical Distribution
 +
The “Vertical” option distributes
 +
The top and bottom edges
 +
The vertical centers
 +
The spacing of the objects
 +
||<br/>
 +
The Vertical Distribution  option distributes
 +
The top and bottom edges
 +
The vertical centers and
 +
The spacing of the objects
  
 
|-
 
|-
|Show Slide 5
+
|  
Glue Points
+
||Now let’s create our own line style for this map.
Glue points are the points
+
That glue the connectors to the objects
+
All objects have glue points.  
+
  
<<On another slide >><br/> Glue Points
+
|-
These are invisible.
+
|From the main menu click Format >> select Line
They become visible
+
||From the Main menu select Format and click Line.  
When a connector is selected from the Drawing toolbar
+
When the mouse pointer is moved over an object.
+
||
+
  
Glue points as the name indicates are the points
+
|-
That glue the connectors to the objects.  
+
|Line dialog box appears.  
All the objects have glue points. <br/> <br/>
+
||The Line dialog box appears.
These are invisible;
+
They become visible
+
When a connector is selected from the Drawing toolbar or
+
When the mouse pointer is moved over an object.
+
  
 
|-
 
|-
|Show Slide 6
+
|Click  Line Styles tab
Glue points are not the same as handles.
+
||Click on Line Styles tab.
We use handles to re-size the object.
+
Glue points are used to glue the connector to an object.
+
||
+
Glue points are not the same as handles.
+
We use handles to re-size the object.
+
Glue points are used to glue the connector to an object.
+
  
 
|-
 
|-
|Point to the objects
+
|In “Line Styles” select Three dashes and three dots.
||Now, let us connect the objects in the flowchart using connectors.
+
||In Line Styles  select the option Three dashes and three dots.
  
 
|-
 
|-
|Drawing toolbar >> click on Connector
+
|Leave the Type field as is.
||Go to the Drawing toolbar and select Connector.
+
||Leave the Type field as it is.
  
 
|-
 
|-
|Click on the small black triangle next to Connector.
+
|In Number enter 10 and 5; Length  8%.
||Click on the small black triangle to see the different types of Connectors.
+
||In Number let’s enter 10 and 5; Length as  8%.
  
 
|-
 
|-
|Select “Straight Connector ends with arrow”.
+
|Click Add.
||Let us select the option Straight Connector ends with Arrow.
+
||Click Add.
  
 
|-
 
|-
|Point to the small crosses that appear on the flow chart objects in the draw page.
+
|Enter the name “My Line Style”.
||When you select the Connector, you will see cross marks on all the objects in the Draw page.
+
Click OK.
 +
Click OK.
 +
||Enter the name “My Line Style”.
 +
Click OK.
 +
Again click OK.
  
These are the glue points.
+
|-
 +
|Select any direction arrow in the map, right-click and select Line
 +
||Let’s select this arrow, right-click, and select Line.
 +
 
 +
The Line dialog box appears.
  
 
|-
 
|-
|  
+
|Click the Line tab.
Use the “Straight Connector ends with arrow” and join the two process boxes as shown in Figure One.
+
||Click the Line tab.
||Now let’s draw a line from the glue point of the first process box to glue point of the next process box.
+
  
 
|-
 
|-
|
+
|Click on the “Style” drop-down box.
Move the mouse from top to down on the Draw page
+
||Click on the Style drop-down box.
||We will connect all the flowchart objects, in a top-to-down manner using connectors. <Pause>
+
It now displays the new style that was created.
  
 
|-
 
|-
|<<Please draw connectors as shown in Figure One.>>
+
|Select My Line Style.
||You will notice that the every line automatically docks itself to the nearest glue point, wherever you place the cursor. <Pause>
+
Click OK.  
 +
||Select it and click OK.
 +
We have created a new line style!
  
 
|-
 
|-
 
|  
 
|  
||Next let’s connect the Process and Decision boxes.
+
||Let’s draw a small stadium to the left of the School Campus.
  
 
|-
 
|-
|Click on Drawing toolbar >> select Connector.
+
|From the Drawing toolbar >> click Basic Shapes >> select a Circle.
Select “Connector ends with arrow”.
+
||From the Drawing toolbar, click Basic Shapes and select a Circle.
||From the Drawing toolbar, select the option  Connector ends with Arrow.
+
  
 
|-
 
|-
|Draw an arrow as shown in Figure One.
+
|Draw s small circle to the left of the School Campus.
||From the Process box let’s connect to the Decision box.
+
||Let’s insert it in the Draw page.
  
 
|-
 
|-
|Drawing toolbar >> click on the small black triangle next to Connector >> select “Connector ends with arrow”.
+
|Point to the outline of the circle.
Draw an arrow as shown in Figure One.
+
 
||Similarly, let’s connect the Decision box with the next Process box.
+
Type the text Stadium inside it.
 +
||The outline of the circle is of the style My Line Style.
 +
Let’s type “Stadium” inside it.
  
 
|-
 
|-
 
|  
 
|  
||You can also add text to a connector.  
+
||Now, let’s learn to combine, merge, subtract and intersect objects.
 +
 
 +
|-
 +
|Show Slide 15
 +
Grouping and combining objects?
 +
When we group objects, we just put together a number of objects
 +
When we combine objects we create a new object.
 +
||What is the difference between
 +
Grouping and combining objects?
 +
When objects are grouped, a number of objects are just put together .
 +
When objects are combined, new object is created.
  
 
|-
 
|-
 
|  
 
|  
||On the connector from the Decision box to the Process box, let us type “No”.
+
||We will use three objects to demonstrate these options.
  
 
|-
 
|-
|Select the connector to the right.
+
|Add a new page to the file.
Double-click on it.
+
||To select the connector, just double-click on it.
+
  
 +
||First, let us add a new page to the Draw file.
  
 
|-
 
|-
|  
+
|Draw a Circle
||The end control points become active.  
+
From the Drawing<br/> toolbar>>click Basic<br/> Shapes >>select a Circle<br/> draw to the page.
  
And the text cursor appears.
 
  
|-
+
Draw a Diamond 
|Type the text No.
+
From the Drawing toolbar>>click Basic<br/> Shapes >>Diamond<br/> drag it to the draw page.<br/>  Select  Area Style / >>  “Red 3”
||Let us type the text “No”.
+
  
|-
 
|Do this once more for the other connector.
 
<<Refer to Figure One.>>
 
||Let us do this once more for the other connector.
 
  
|-
+
Draw a Rectangle 
|
+
From the Drawing toolbar>>click Basic Shapes >>Rectangle  drag it to the draw page. select the Area Style / Filling >> “ Green 6”
Press Ctrl+S keys to save the document.
+
Shown  in the Figure three
||We have created a simple flowchart!
+
  
Let’s save our flowchart by pressing Ctrl+S keys.
+
||Let’s draw a circle
 +
From the Drawing toolbar>>click Basic Shapes >>and select a Circle.
 +
move the mouse in the draw page drag it down.
 +
 
 +
 
 +
 
 +
Let’s  draw a second object  Diamond 
 +
From the Drawing toolbar click Basic Shapes and select a Diamond  move  the cursor  to  the draw page drag it  down. And from the menu bar select Area Style / Filling Drop down button and select color “Red 3”
 +
 
 +
 
 +
 
 +
Draw a  third object  a Rectangle  and color the object as “ Green 6”
  
 
|-
 
|-
| Point to the Lines and Arrows tool in the Toolbar. Lines and arrows is the next tool to the right of Connectors in the Drawing Toolbar.
+
|Select the three objects by holding down the Shift key and clicking on each object.
||You can also connect the objects using lines and arrows, too.
+
||Select the three objects by holding down the Shift key and clicking on each object.
  
 
|-
 
|-
|Circle the mouse over all the objects from top to bottom in a clock-wise manner, to indicate that they should be grouped.
+
|Right-click >> Context menu >> Combine.
||But in that case, you should group the objects.
+
||Right click for the Context menu and click Combine.
This is because arrows do not stay docked to objects.
+
A new object is created!
  
 
|-
 
|-
|Show Slide 7
+
|  
Connectors and Arrows
+
||Notice that the new object takes the color of the object that is last and at the back.
How are connectors different from Lines and Arrows?
+
Connectors are lines or arrows
+
Whose end points are automatically docked
+
To the glue point of an object.
+
Lines and Arrows do not dock automatically.
+
||
+
  
How are connectors different from Lines and Arrows?
+
|-
Connectors are lines or arrows
+
|Press the keys CTRL+Z together.
Whose end points are automatically docked
+
||Let us undo this action by pressing the CTRL+Z keys together.
To the glue points of an object.
+
Lines and Arrows, on the other hand, do not dock automatically.
+
  
 
|-
 
|-
|Show Slide 8
+
|Right-click for the Context menu.  
Assignment
+
||Select the figures again and right-click for the context menu.  
<< Show the flowchart  here >>
+
Create the second part of the Spoken Tutorial flow chart
+
Color the processes boxes.
+
Draw a connector with the letter “A”
+
It should be the first object in this flowchart.  
+
||Pause this tutorial and do this assignment.<br/>
+
Create the second part of the Spoken Tutorial flow chart
+
Color the processes boxes.
+
Draw a connector with the letter “A”
+
It should be the first object in this flowchart.  
+
  
 +
|-
 +
|Click Shapes >> Merge.
 +
||Select Shapes and click Merge.
 +
Another new shape is created!
  
 
|-
 
|-
|<<On the next slide show the image>>
+
|  
||It should look like this.
+
||Remember the more you experiment with these functions, the more you will learn.
  
 
|-
 
|-
|Show Slide 12
+
|Show Slide 16
 
Summary
 
Summary
 
+
Use Grids, Guides and snap lines to align objects accurately
Flowcharts
+
Duplicate, Resize and distribute objects<br/>
Connectors
+
Create new line styles
Glue points     
+
Create new objects using
||This brings us to the end of this tutorial.
+
Combine
In this tutorial, you have learnt about:
+
Merge
Flowcharts
+
Subtract
Connectors
+
Intersect
Glue points
+
||This brings us to the end of the tutorial.
 +
In this tutorial, you have learnt how to
 +
Use Grids, Guides and snap lines to align objects accurately
 +
You have also learnt to duplicate, Resize objects and distribute objects
 +
We also created new line styles and learnt how to form new objects using
 +
Combine
 +
Merge
 +
Subtract
 +
Intersect.
  
 
|-
 
|-
|Show Slide 13
+
|Show Slide 17
ACKNOWLEDGEMENT
+
Acknowledgement
 
||  
 
||  
  
 
|-
 
|-
 
|}
 
|}

Revision as of 13:07, 15 April 2014

Visual Cue Narration
Show Slide 1

Welcome to the Spoken Tutorial on
Working with Objects in LibreOffice Draw.


Welcome to the Spoken Tutorial on
Working with Objects in LibreOffice Draw.
Show Slide 2

Learning Objectives Position objects using Grids and Guide lines Use snap functions Customize lines and arrowheads

In this tutorial we will learn how to:

Position objects using Grids and Guide lines Use snap functions Customize lines and arrowheads

Duplicate objects Re-size objects exactly Distribute objects Combine, Merge, Subtract and Intersect Objects

You will also learn how to:

Duplicate objects Re-size objects exactly Distribute objects Combine, Merge, Subtract and Intersect objects

Show Slide

System Requirements Ubuntu Linux version 10.04 LibreOffice Suite version 3.3.4


Here we are using
Ubuntu Linux version 10.04 as our operating system and LibreOffice Suite version 3.3.4.


Show Slide 3

Grids Grids aid to position objects Accurately on the draw page.


What are Grids?

Grids aid to position objects Accurately on the draw page.

Switch to the already open RouteMap file. Let us open the file RouteMap that was saved on the Desktop.
In the previous tutorials, we had briefly used grids.

Now let us learn about grids in detail.

Switch to the Draw file Route Map.

From the Main menu >> select View >> click on Grid.

From the Main menu, select View, and click on Grid.


Point to the Display Grid Then click on Display Grid.
Use the mouse to point to the small grids. The Draw page is filled with a number of horizontal and vertical dotted lines.

These form the grid.

Use the mouse to point to the small grids. These grids are for display purposes only. They will not be printed.
Use the mouse to point to the small grids. You can customize the size of the grids, that is, make them smaller or bigger as required.
Main menu >> select Tools >> click Options From the Main menu, select Tools and click Options.
Options dialog box appears. You will see the Options dialog box.
Select LibreOffice Draw >> select Grid Click LibreOffice Draw and select Grid.
Click Resolution.

Under “Resolution” enter the following values: Horizontal – 7 cm Vertical – 5 cm

Under “Resolution” enter the following values:

Horizontal – 7 cm Vertical – 5 cm

Subdivision decides the number of spaces in a grid.
Under “Subdivision” enter the following values:

Horizontal – 3 Vertical – 4

Let us enter Subdivision values.

Horizontal – 3 Vertical – 4

Synchronize axes >> Leave this option unchecked.

Click OK.

Let us leave the Synchronize axes option unchecked.

Click OK.

Move to the Draw page.

Move the mouse in a circular fashion so that it goes over a grid.

Look at the Draw page now.

Look at the size of each box in the grid.

Let us count the spaces that we set in Subdivision.
Point to the Horizontal 1, 2, 3 spaces and vertical 1, 2, 3, 4 spaces. Horizontally there are 1, 2, 3 spaces and vertically there are 1, 2, 3, 4 spaces.

<<Pause>>


Now let us learn about Guides.
Show Slide 4

What are Guides? Guides are helper lines Extensions of the edges of the objects That are displayed when it is moved.

What are Guides? Guides are helper lines or Extensions of the edges of the objects That are displayed when it is moved.

Let us enable the guidelines.
Go to the Main menu >> click View >> select Guides. Go to the Main menu, select View and select the option Guides.
Click “Display Guides”.

If the guides are already enabled then just point to the option.

Now, click the option Display Guides.


From the Main menu >> click Tools >> Options.

The Options dialog box appears.

From the Main menu, click Tools and Options.

The Options dialog box appears.

From the left panel, click on the small black triangle next to LibreOffice Draw.

Click View.

From the left panel, click on the small black triangle next to LibreOffice Draw.

Click View.

From the right panel, select Guides when

moving.

From the right panel, select Guides when

moving. This way you can see the guides when moving objects.

Click OK. Click OK.
Now, let us move the park a little to the right.
Select the park, move it a little to the right.

Wait so that the extensions lines are visible.

When the park is moved, the extension lines of the edges of the object become visible.

These are the Guidelines. <<Pause>>

Show Slide 5

Snap Lines Snap Lines help us position two or more objects within an area that is defined. Snap lines and Snap points are created by the user Snap lines run vertically and horizontally and appear as dashed lines.

What are Snap Lines? Snap Lines help us position two or more objects within an area that is defined. Snap lines and Snap points are created by the user Snap lines run vertically and horizontally and appear as dashed lines.

You must enable the Snap Lines option before you create snap lines.
Switch to the Draw file.
Go to the Draw page, right-click for the context menu and select Snap Lines.

Now check all the three options: Snap Lines Visible Snap to Snap Lines Snap Lines to Front

Go to the Draw page.

Right-click for the context menu and select Snap Lines. Now check all the three options: Snap Lines Visible Snap to Snap Lines Snap Lines to Front

Snap lines that we create, will now be visible.
Show Slide 6

<<Show Figure One.>>

Let’s define an area, using Snap Lines, within which the objects in the map must fall (as shown in the slide).
Switch to the Draw file RouteMap.
Move the mouse cursor over the vertical ruler. Move the mouse cursor over the vertical ruler.
Press the left mouse button; wait till the cursor is now shaped like a two-sided arrow. Press the left mouse button.

You will notice that the cursor is now shaped like a two-sided arrow.

Drag the mouse towards the Draw page. Drag the mouse towards the Draw page.

You will see a dotted line.

Do not let go of the mouse button. Do not release the mouse button.
Holding the left mouse button drag the dotted line that appears to the page.

Let go of the mouse button.

Holding the left mouse button, drag the dotted line to the page.

Now, release the mouse button.

Can you see the line?

This is the Snap Line.

To create the bottom most limit, simply drag the line to the bottom of the page.
Refer figure one and draw one more horizontal snap line and two vertical Snap Lines. Let’s create three more Snap Lines to define the area within which the map is enclosed. <Pause>
We have created horizontal and vertical Snap Lines.

Now you can position the objects along these Snap Lines.

Show Slide 7

Snap Lines Create as many Snap Lines as you want.


You can, of course,

Create as many Snap Lines as you want.


Point to the horizontal and vertical Snap Lines function like the X-and Y-axis on the graph. The horizontal and vertical Snap Lines function like the X-and Y-axis on a graph.

Within these two axes, you can position objects exactly.

Show Slide 8

Snap function Snap to Grid - position an object exactly on grid points Snap to Snap lines - position an object exactly on a snap line Snap to Page margin - position an object exactly on the page margin

You can use Snap function along with the grid lines to position objects accurately.

You can also: Snap to Grid - position an object exactly on grid points Snap to Snap lines - position an object exactly on a snap line Snap to Page margin - position an object exactly on the page margin

Show Slide 9

Assignment Explore all the Grid options Tools >> Options >> LibreOffice Draw >> Grid. Check what happens to objects when you snap to

snap to Grids, snap lines and page margins
Pause this tutorial and do this assignment.

Explore all the Grid options.
Check what happens to objects when you snap to snap to Grid, snap lines and page margins

(Refer Figure Two for placement of the lake.)

Switch to the Draw file. Point to the lake that is already drawn.

Now let’s add one more lake, in the exact shape of this lake, next to the School Campus.
To do this let’s use the Duplicate option.
Select the lake. Let’s select the Lake.
Go to the Main menu >> click Edit >> select Duplicate >> Go to the Main menu, select Edit and click on Duplicate.
The Duplicate dialog box appears. The Duplicate dialog box appears.
In the Number of copies field, enter the value 1.

Click OK.

In Number of copies, enter the value 1 and click OK.


The Lake is duplicated.
Drag the lake and place it as shown in Figure two. Let’s drag the lake and place it near the school.
Objects can also be re-sized exactly to any measurement that is required.
Show Slide 10

Show Figure Three.

Let’s use exact measurements and change the shape of the House as shown in this slide.
Let’s give it the same height and width and slant its corners and rotate it.
Switch to the file RouteMap.

Select the Home. Right click for context menu >> select Position and Size.

First, select Home, right-click for the context menu and select Position and Size.
The Position and Size dialog box appears. The Position and Size dialog box appears.
Click Position and Size tab Click the Position and Size tab.
Enter Width = 3, Height =3 Under Size, enter the value 3 in both the Width and Height fields.
Select Rotation tab >> enter angle field = 10. Then click the Rotation tab.

In the Angle field, enter the value 10.

Select Slant Corner and Radius Tab. Finally, select the Slant Corner and Radius Tab.
Slant Angle= 5.

Click OK.

In the Slant Angle field, enter 5 degrees.

Click OK.

We have re-designed the house!
Show Slide

Assignment Draw various shapes, using the Drawing tool bar. Check if you can apply Corner radius to all shapes.

Pause this tutorial and do this assignment.

Draw various shapes, using the Drawing tool bar. Check if you can apply Corner radius to all shapes.

Switch to the Draw file Route Map Now let’s space the right edges of some objects evenly.
We will use the Distribution option to achieve this.
Show Slide 11

Distribution Select at least three objects To use the Distribution option.


We must

Select at least three objects To use the Distribution option.

Switch to Draw

Select the Residential Complex, the Parking Lot and the Commercial Complex.

First, select the Residential Complex, the Parking Lot and the Commercial Complex.
Group them by dragging the Select arrow to cover all the objects. Let’s group them by dragging the Select arrow to cover all the objects.
Right-click and select Distribution >> click Horizontal >> select Right.

Click OK.

Now, right-click and select Distribution.

Under Horizontal, select Right. Click OK.

Point to the right edges of the object. The right edges of the object get distributed evenly.
Show Slide 12

Distribution The Distribution option does not distribute the objects horizontally or vertically


The Distribution option does not distribute the objects horizontally or vertically

Show Slide 13

Horizontal Distribution The “Horizontal” option distributes The right and left edges The horizontal centers The spacing of the objects

The Horizontal Distribution option distributes
The right and left edges The horizontal centers and The spacing of the objects

Show Slide 14

Vertical Distribution The “Vertical” option distributes The top and bottom edges The vertical centers The spacing of the objects


The Vertical Distribution option distributes The top and bottom edges The vertical centers and The spacing of the objects

Now let’s create our own line style for this map.
From the main menu click Format >> select Line From the Main menu select Format and click Line.
Line dialog box appears. The Line dialog box appears.
Click Line Styles tab Click on Line Styles tab.
In “Line Styles” select Three dashes and three dots. In Line Styles select the option Three dashes and three dots.
Leave the Type field as is. Leave the Type field as it is.
In Number enter 10 and 5; Length 8%. In Number let’s enter 10 and 5; Length as 8%.
Click Add. Click Add.
Enter the name “My Line Style”.

Click OK. Click OK.

Enter the name “My Line Style”.

Click OK. Again click OK.

Select any direction arrow in the map, right-click and select Line Let’s select this arrow, right-click, and select Line.

The Line dialog box appears.

Click the Line tab. Click the Line tab.
Click on the “Style” drop-down box. Click on the Style drop-down box.

It now displays the new style that was created.

Select My Line Style.

Click OK.

Select it and click OK.

We have created a new line style!

Let’s draw a small stadium to the left of the School Campus.
From the Drawing toolbar >> click Basic Shapes >> select a Circle. From the Drawing toolbar, click Basic Shapes and select a Circle.
Draw s small circle to the left of the School Campus. Let’s insert it in the Draw page.
Point to the outline of the circle.

Type the text Stadium inside it.

The outline of the circle is of the style My Line Style.

Let’s type “Stadium” inside it.

Now, let’s learn to combine, merge, subtract and intersect objects.
Show Slide 15

Grouping and combining objects? When we group objects, we just put together a number of objects When we combine objects we create a new object.

What is the difference between

Grouping and combining objects? When objects are grouped, a number of objects are just put together . When objects are combined, new object is created.

We will use three objects to demonstrate these options.
Add a new page to the file. First, let us add a new page to the Draw file.
Draw a Circle

From the Drawing
toolbar>>click Basic
Shapes >>select a Circle
draw to the page.


Draw a Diamond From the Drawing toolbar>>click Basic
Shapes >>Diamond
drag it to the draw page.
Select Area Style / >> “Red 3”


Draw a Rectangle From the Drawing toolbar>>click Basic Shapes >>Rectangle drag it to the draw page. select the Area Style / Filling >> “ Green 6” Shown in the Figure three

Let’s draw a circle

From the Drawing toolbar>>click Basic Shapes >>and select a Circle. move the mouse in the draw page drag it down.


Let’s draw a second object Diamond From the Drawing toolbar click Basic Shapes and select a Diamond move the cursor to the draw page drag it down. And from the menu bar select Area Style / Filling Drop down button and select color “Red 3”


Draw a third object a Rectangle and color the object as “ Green 6”

Select the three objects by holding down the Shift key and clicking on each object. Select the three objects by holding down the Shift key and clicking on each object.
Right-click >> Context menu >> Combine. Right click for the Context menu and click Combine.

A new object is created!

Notice that the new object takes the color of the object that is last and at the back.
Press the keys CTRL+Z together. Let us undo this action by pressing the CTRL+Z keys together.
Right-click for the Context menu. Select the figures again and right-click for the context menu.
Click Shapes >> Merge. Select Shapes and click Merge.

Another new shape is created!

Remember the more you experiment with these functions, the more you will learn.
Show Slide 16

Summary Use Grids, Guides and snap lines to align objects accurately Duplicate, Resize and distribute objects
Create new line styles Create new objects using Combine Merge Subtract Intersect

This brings us to the end of the tutorial.

In this tutorial, you have learnt how to Use Grids, Guides and snap lines to align objects accurately You have also learnt to duplicate, Resize objects and distribute objects We also created new line styles and learnt how to form new objects using Combine Merge Subtract Intersect.

Show Slide 17

Acknowledgement

Contributors and Content Editors

Desicrew, Nancyvarkey