LibreOffice-Suite-Draw/C3/Flow-Charts-Connectors-Glue-Points/English
Visual Cue | Narration |
Show Slide
Title Slide |
Welcome to the Spoken Tutorial on Flowcharts, Glue Points and Beizer curves in LibreOffice Draw. |
Show Slide
Learning Objectives
|
In this tutorial you will learn to
You will also learn how to
|
Show Slide
System Requirements Ubuntu Linux version 10.04 LibreOffice Suite version 3.3.4 |
Here we are using
|
Let’s learn about Bezier Curves. | |
Show Slide
Bezier Curves 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 with the shape and size of curves. |
Show Slide
<< Display Figure Two. >> |
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. | Let us go to our Routemap file.
|
Point as per the narration | Let’s to go to the Commercial Complex from Home. |
Point a right-bottom corner of the Parking Lot. | To do so, we have to go right from the Parking Lot. |
Refer Figure Three.
Select the Drawing toolbar >> right-click for the context menu >> click Ungroup. |
Remember, previously we had grouped the drawing.
So let’s ungroup it. |
From the Drawing toolbar >> click Curve >> select Curve. | Now, from the Drawing toolbar, click Curve and select Curve. |
Click once with your mouse. | On the Draw page, click on the start point of the route - this is Home. |
Keep the left mouse button pressed and drag straight
downward <<This will look like a straight line.>> |
Keep the left mouse button pressed and drag till the Play Ground.
You will see a straight line. |
Release the mouse and move the pointer to the side entrance of the school. | Release the mouse button.
Now move the pointer to the Commercial Complex. The line will curve as the mouse moves. |
Double-click at the Commercial Complex.
Now, click anywhere on the page. |
Double-click at the end point, that is the Commercial Complex. |
Move the mouse over the curve to indicate the smoothness of the curve. |
We have drawn a curve!
Notice that the curve transition is smooth. |
Now let us edit the points on this curve using the Edit Points toolbar. | |
Click on the curve. | Click on the curve. |
Right-click on the curve and choose Edit Points. | To enable the Edit Points toolbar, right-click on the curve and choose Edit Points. |
Point to the end-points of the curve where the blue boxes are visible. | When the blue boxes appear at the end-points of the curve, we can edit the curve. |
Click on the start point of the curve. | Click on the start point of the curve. |
Drag so that the dotted line with a control point is shown. | You will see a dotted line with a control point.
|
Drag the curve a little. | You can now drag the dotted line to reduce or expand the curve, as required. |
Double-click anywhere on the Draw page | Double-click anywhere on the Draw page, once you have made a change. |
You can use the Edit Points toolbar to insert, move or delete points on the curve to create a smoother curve. | |
Show Slide
Assignment Draw a Bezier curve Work with all the options Using the Edit Points toolbar. |
Here is a small assignment for you. Draw a Bezier curve and Work with all the options Using the Edit Points toolbar.
|
Now, let us learn to create Flowcharts. | |
Go to the Main menu >> select Insert >> click Slide.
Repeat these steps. But in the final video show both the page creations at a fast pace. |
Let’s add 2 new pages to the file RouteMap. |
Go to the Drawing toolbar >> Move the mouse to Flowcharts icon >> Click on the small black triangle. | 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. |
Let’s create this flowchart. | |
Go to the Drawing toolbar >> Move the mouse over the Flowcharts icon | From the Drawing toolbar click on Flowcharts. |
Click on the small black triangle >>
Click Flowchart: Process |
Click on the small black triangle and select Flowchart: Process. |
Go to the Draw page and draw the Flowchart:Process
<< Refer Figure One to draw the flowchart.>> |
Place the cursor on the Draw page
Hold the left mouse button and drag it down. |
You have drawn a Process box. | |
A Process box represents a step or an event in the entire process. | |
We can insert text in flowchart objects, too. | |
Double-click on the Process box.
Enter the text “Create the Tutorial Outline to chunk content into 10-minute scripts” inside it. |
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. | |
Now, let’s align the text inside the Process box. | |
Select the text >> Right-click for the Context menu and click Text | Let us select the text.
Right-click to view the Context menu and click Text. |
The Text dialog box appears | The Text dialog box appears. |
Check the box “Resize shape to fit text width” >> Click OK. | In the Text dialog box, check the box Resize shape to fit text width.
Click OK. |
You will see that the Process box has changed its shape to fit the text! | |
Undo this action, by pressing the Keys CTRL+Z. | Now let us undo this action, by pressing the CTRL+Z keys together. |
Select the text. | Again, let’s select the text. |
Go to the Main menu >> select Format >> click Text | Go to the Main menu and select Format and click Text. |
The text dialog box appears. | The Text dialog box appears. |
Check the option Word wrap text in shape >> Click OK. | Let us check the option Word wrap text in shape.
Click OK. |
The text has adjusted itself to fit the shape of the Process box. | |
Draw a process box beneath it.
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. |
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>> |
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.
Enter the text “Review Okay”? |
Now, lets draw a Decision box and insert the text “Review Okay?” inside it. <Pause> |
A Decision box represents a decision that has to be made.
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. | Let us now draw another Process box beneath the Decision box.
|
Type the text “Record Video”. | Let us insert the text “Record Video” inside it.<Pause> |
Circle the area with the mouse to show its approximate location. | Next, we need another Decision box here, with the text “Review Okay?” |
Point to the earlier Decision box and then point to the empty space after “Record Video” process box. | Let’s copy the Decision box we created before and place it here. |
Select the decision box “Review Okay”.
Press CTRL+C |
So, select the Decision box and press the CTRL+C keys together. |
then press CTRL+V. | Now press the CTRL+V keys together. |
Select the copied decision box and move it beneath the process box ,
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. |
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>
|
A flowchart-connector connects two parts of a flowchart. | |
Point to the flowchart page in the thumbnails on the left panel | Let’s say that the first part of the flowchart is on one page ….. |
Point to the next page in the thumbnails on the left panel | ….. and the second part on another page. |
Come back to the flowchart page.
Point to the connector. 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 .
Now paste the connector.at the beginning of the page. |
Then we draw the same connector at the beginning of the second page. |
Point to the objects | Before we connect the objects, let us learn about Connector Lines and Glue Points in Draw. |
Show Slide 4
Connectors Connectors are lines or arrows Whose ends are attached or docked to an object. |
Connectors are lines or arrows Whose ends are attached or docked to an object. |
Show Slide 5
Glue Points Glue points are the points That glue the connectors to the objects All objects have glue points. <<On another slide >> |
Glue points as the name indicates are the points
That glue the connectors to the objects.
All the objects have glue points. |
Show Slide 6
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. |
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 | Now, let us connect the objects in the flowchart using connectors. |
Drawing toolbar >> click on Connector | Go to the Drawing toolbar and select Connector. |
Click on the small black triangle next to Connector. | Click on the small black triangle to see the different types of Connectors. |
Select “Straight Connector ends with arrow”. | Let us select the option Straight Connector ends with Arrow. |
Point to the small crosses that appear on the flow chart objects in the draw page. | When you select the Connector, you will see cross marks on all the objects in the Draw page.
These are the glue points. |
Use the “Straight Connector ends with arrow” and join the two process boxes as shown in Figure One. |
Now let’s draw a line from the glue point of the first process box to glue point of the next process box. |
Move the mouse from top to down on the Draw page |
We will connect all the flowchart objects, in a top-to-down manner using connectors. <Pause> |
<<Please draw connectors as shown in Figure One.>> | You will notice that the every line automatically docks itself to the nearest glue point, wherever you place the cursor. <Pause> |
Next let’s connect the Process and Decision boxes. | |
Click on Drawing toolbar >> select Connector.
Select “Connector ends with arrow”. |
From the Drawing toolbar, select the option Connector ends with Arrow. |
Draw an arrow as shown in Figure One. | From the Process box let’s connect to the Decision box. |
Drawing toolbar >> click on the small black triangle next to Connector >> select “Connector ends with arrow”.
Draw an arrow as shown in Figure One. |
Similarly, let’s connect the Decision box with the next Process box. |
You can also add text to a connector. | |
On the connector from the Decision box to the Process box, let us type “No”. | |
Select the connector to the right.
Double-click on it. |
To select the connector, just double-click on it.
|
The end control points become active.
And the text cursor appears. | |
Type the text No. | 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. |
Press Ctrl+S keys to save the document. |
We have created a simple flowchart!
Let’s save our flowchart by pressing Ctrl+S keys. |
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. | You can also connect the objects using lines and arrows, too. |
Circle the mouse over all the objects from top to bottom in a clock-wise manner, to indicate that they should be grouped. | But in that case, you should group the objects.
This is because arrows do not stay docked to objects. |
Show Slide 7
Connectors and Arrows How are connectors different from Lines and Arrows?
|
How are connectors different from Lines and Arrows?
|
Show Slide 8
Assignment << Show the flowchart here >>
|
Pause this tutorial and do this assignment.
|
<<On the next slide show the image>> | It should look like this. |
Show Slide 12
Summary Flowcharts Connectors Glue points |
This brings us to the end of this tutorial.
In this tutorial, you have learnt about:
|
Show About Slide
About the Spoken Tutorial Project
|
|
Show About Slide
Spoken Tutorial Workshops The Spoken Tutorial Project Team
|
|
Show Acknowledgement Slide
Acknowledgements
|
|
Show About the contributor Slide
About the contributor
|
|