calligrastage 1:2.4.0-0ubuntu2 / usr / share / doc / kde / HTML / en / stage / tutorial.docbook

<!-- <?xml version="1.0" ?>
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd">
          
To edit or validate this document separately, uncomment this prolog
Be sure to comment it out again when you are done -->
   
<chapter id="tutorial">
<chapterinfo>
<authorgroup>
<author>
<firstname>Neil</firstname>
<surname>Lucock</surname>
<affiliation>
<address><email>neil@nlucock.freeserve.co.uk</email></address>
</affiliation>
</author>
<author>
<firstname>Krishna</firstname>
<surname>Tateneni</surname>
<affiliation>
<address><email>tateneni@pluto.njcc.com</email></address>
</affiliation>
</author>
<author>
<firstname>Anne-Marie</firstname>
<surname>Mahfouf</surname>
<affiliation>
<address><email>annemarie.mahfouf@free.fr</email></address>
</affiliation>
</author>
<!-- TRANS:ROLES_OF_TRANSLATORS -->
</authorgroup>
</chapterinfo>
<title>A Step-By-Step Tutorial</title>

<para>
In this chapter, &stage; is introduced using a simple tutorial. We
shall walk through the most basic steps that are involved in creating a
presentation, and adding some basic effects.
</para>

<sect1 id="start-new">
<title>Start a new document</title>

<para>
When you start &stage;, the usual &calligra; startup dialog appears.
</para>

<screenshot>
<screeninfo>The <guilabel>&calligra;</guilabel>
startup dialog</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="tut01.png" format="PNG"/></imageobject>
<textobject><phrase>The &calligra; startup dialog</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Select <guilabel>Screen</guilabel> on the left then select the template labeled
<guilabel>Empty</guilabel> (highlighted in blue in the screenshot above) by
clicking on it. You can check <guilabel>Always use this template</guilabel> to
make it the default template.  
</para>

<para>
Now click <guibutton>Use This Template</guibutton>. This brings up the slide
editor window, where you can view and edit the slides (and objects contained in
them) in your document.
</para>

<para>At the moment, we just have one empty slide, so select the upper left slide 
with the single text box from the <guilabel>Slide Layouts</guilabel> docker.</para>

<para>
Double-click the text box. The cursor changes to a vertical bar to show
that you can now type some text.
</para>

<screenshot>
<screeninfo>The text insertion cursor</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut03.png" format="PNG"/>
</imageobject>
<textobject><phrase>The text insertion cursor</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Go ahead, type some text!
</para>

<screenshot>
<screeninfo>Adding text</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="tut04.png" format="PNG"/></imageobject>
<textobject><phrase>Adding text</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Click away from the text to de-select the text box when you are done
typing.
</para>

</sect1>

<sect1 id="insert-page">
<title>Add a new page</title>

<para>
Let's now add a new slide to our document. To do so, click the
<guimenu>Slide</guimenu> menu, and then click on
<guimenuitem>Insert Slide</guimenuitem>.
</para>

<para>
Now we can decide what the new slide should look like. This time, select 
one column layout (highlighted in blue.)
</para>

<screenshot>
<screeninfo>Choosing a layout for the new page</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut07.png" format="PNG"/></imageobject>
<textobject><phrase>Choosing a layout for the new
page</phrase></textobject>
</mediaobject>
</screenshot>

<para>
The new slide layout now appears in the editing window. To change between pages
of your presentation, you can select slides in the pane to the left
(highlighted in blue for this screenshot).
</para>

<para>
The newly inserted slide has two text boxes. There is one for a title,
and another to contain a bulleted list of items.
</para>

<screenshot>
<screeninfo>The new slide</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut09.png" format="PNG"/></imageobject>
<textobject><phrase>The new slide</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Double-click and type a title. Then double-click on the second text
box with the bullet. Type some text and end the paragraph by pressing the
<keycap>Enter</keycap> or <keycap>Return</keycap> key. As you type new
paragraphs, bullets automatically appear in front of them.
</para>

<screenshot>
<screeninfo>Adding text to the second slide</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut10.png" format="PNG"/></imageobject>
<textobject><phrase>Adding text to the second slide</phrase></textobject>
</mediaobject>
</screenshot>

<para>
You can de-select the text box by clicking away from it.
</para>

</sect1>

<sect1 id="insert-pic">
<title>Insert a picture</title>

<para>
Let's go back to the first slide now. Use the list of slides on the left
of your screen.
</para>

<para>
In this section, we'll liven our presentation up a bit by adding a nice
logo to the title page. To do so, the first step is to enable the <guilabel>Add 
Shape</guilabel> docker using <menuchoice><guimenu>Settings</guimenu>
<guimenuitem>Dockers</guimenuitem></menuchoice> from the menu.
</para>

<para>Now select Image in the <guilabel>Add Shape</guilabel> docker
and click with the &LMB; where you want to place the loge in it's original size or 
draw a rectangle with the left mouse (click the &LMB; and keep the button pressed) 
to specify the position and size for the logo.
</para>

<para>
A file selection dialog appears. To learn about this or other
standard &kde; dialog boxes in detail, please consult the &kde;
documentation. You can browse by clicking on <guiicon>folder</guiicon>
icons or by using the <guiicon>browser</guiicon> style buttons on the
toolbar. Clicking the <guiicon>up arrow</guiicon>
takes you up one folder level.
</para>

<para>
Select a file and click <guibutton>OK</guibutton>.
</para>

<para>
Now the image is inserted in the slide and there are selection handles 
(little squares) visible around the border of the graphic.
</para>

<screenshot>
<screeninfo>The newly added image</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut13.png" format="PNG"/></imageobject>
<textobject><phrase>The newly added image</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Place the mouse cursor anywhere in the middle of the logo, and drag it
to the middle of the title page. Then use the selection handles to resize
it correctly.
</para>

<para>
That's it. Now you have a picture on the title page!
</para>
<!--FIXME Double click opens the file dialog to replace the image-->
</sect1>

<sect1 id="insert-object">
<title>Insert a &calligra; object</title>
<para>Let's insert another &calligra; object under the picture, for example
a chart.</para>

<para>
Every &calligra; supported object can be embedded in a &stage; slide.
Let's choose a chart from the <guilabel>Add Shape</guilabel> docker.
</para>

<para>
Select <guilabel>Chart</guilabel> and then outline with your mouse the area you
want to put your chart in on the &stage; slide.
</para>

<screenshot>
<screeninfo>Select the area where to put the chart</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut25.png" format="PNG"/></imageobject>
<textobject><phrase>Select the area where to put the chart</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Once you release the mouse button, a template chart is added on the slide. Whenever
you work in the chart, its <guilabel>Tool Options</guilabel> appear in the docker.
</para>

<screenshot>
<screeninfo>&kchart; Tool Options</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut26.png" format="PNG"/></imageobject>
<textobject><phrase>&kchart; Tool Options</phrase></textobject>
</mediaobject>
</screenshot>

<para>To move, resize or even delete the embedded chart switch to the 
<guibutton>Basic shape manipulation</guibutton> tool and click anywhere 
within the chart area. It should now appear with a green border 
and with a small yellow square at each corner and in the middle of each edge.
</para>
<para>If you move the cursor over any of the squares it should change 
to a double headed arrow. You can resize the chart by dragging one of these 
squares with the <mousebutton>left</mousebutton> mouse button pressed. To 
delete the chart <mousebutton>right</mousebutton> click on one of the 
squares and select <guimenuitem>Delete</guimenuitem>.</para>
<para>To move the chart move the cursor into the chart. 
The cursor should then change to a cross, press the 
<mousebutton>left</mousebutton> mouse button and you will be able to drag the 
chart to where you want it to be.</para>
<para>To restore the chart to its normal appearance simply click anywhere 
outside of the chart area.</para>
<para>To change the format of the chart itself <mousebutton>left</mousebutton> 
click twice within the chart area. The chart <guilabel>Tools Options</guilabel> 
should appear in the docker. You can then 
use these tools to edit the chart properties like chart type, labels, axis and data.</para>

<para>Click anywhere with the &LMB; outside the chart to go back to
&stage; slide.</para>

<para>A single click on the chart  will allow you to drag it to change its
location and also to drag the borders to make it bigger as with any other
&stage; object. Double click on the chart to get into &kchart; mode and
modify any of the chart property.</para>

</sect1>
<!-- does not work in BETA6 here
<sect1 id="addshadow">
<title>Add a shadow to the title text</title>

<para>
Let's continue enhancing our title page by adding a shadow
behind the title. <mousebutton>Right</mousebutton> click anywhere on the
title text. This achieves two things: the text box containing the title
is selected, and a menu pops up.
</para>

<para>
Select the <guimenuitem>Shadow Objects...</guimenuitem> option in the popup menu.
</para>

<screenshot>
<screeninfo>The context menu</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut15.png" format="PNG"/></imageobject>
<textobject><phrase>The context menu</phrase></textobject>
</mediaobject>
</screenshot>

<para>
The <guilabel>Shadow</guilabel> dialog pops up. The distance between the
shadow and the text is currently 0 so the shadow cannot be seen (this
part of the dialog box is highlighted in red.)
</para>

<screenshot>
<screeninfo>The <guilabel>Shadow</guilabel> dialog</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut16.png" format="PNG"/></imageobject>
<textobject><phrase>The <guilabel>Shadow</guilabel>
dialog</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Increase the distance value to 3. The effect of changing the distance
can be seen in the preview window. Now click <guibutton>OK</guibutton>.
</para>

<screenshot>
<screeninfo>Adding a shadow to the title</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut17.png" format="PNG"/></imageobject>
<textobject><phrase>Adding a shadow to the title</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Now the title has a shadow!
</para>

<screenshot>
<screeninfo>The new shadowed title</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut18.png" format="PNG"/></imageobject>
<textobject><phrase>The new shadowed title</phrase></textobject>
</mediaobject>
</screenshot>

</sect1>
-->
<sect1 id="textcolor">
<title>Change the color of the title text</title>

<para>
Let's finish by changing the color of the title text from black to
blue. To do so, select the title text by double-clicking the text box and select the text.
</para>
<!-- Font from menu Format or contextmenu with a lot of options-->
<para>
Open the color selector by clicking on the <inlinemediaobject><imageobject>
<imagedata fileref="22x22-actions-format-text-color.png" format="PNG"/></imageobject>
</inlinemediaobject> icon in the Text editing Tools Options (this icon has
a Text Color... tooltip).</para>

<screenshot>
<screeninfo>The color selector</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut19.png" format="PNG"/></imageobject>
<textobject><phrase>The color selector</phrase></textobject>
</mediaobject>
</screenshot>

<screenshot>
<screeninfo>The color selector</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut20.png" format="PNG"/></imageobject>
<textobject><phrase>The color selector</phrase></textobject>
<caption><para>Change the color to blue.</para></caption>
</mediaobject>
</screenshot>

<para>
Changing the color of
the selected text to blue changes its appearance. The exact color that
highlighted text turns depends on your system color scheme.
</para>

<note>
<para>Text color selection is also available on the <guilabel>Decorations</guilabel> 
tab of the <guilabel>Select Font</guilabel> dialog. Open this dialog with 
<guimenuitem>Font</guimenuitem> in the <guimenu>Format</guimenu> menu or context menu.
</para>
</note>

<para>
Now click away from the text to de-select it.
</para>


<screenshot>
<screeninfo>The finished title</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut21.png" format="PNG"/></imageobject>
<textobject><phrase>The finished title</phrase></textobject>
</mediaobject>
</screenshot>

<para>
Now that there are two slides, why not try a slide show! To start the
slide show, press the <guiicon>Start Presentation</guiicon> button in
the toolbar. The first slide should appear on your screen.
</para>

<para>
To advance from the first slide to the next, just click anywhere on the
screen, or use the <keycap>Page Down</keycap> key.
</para>

<para>
To exit the slide show, press the &Esc; key.
</para>

</sect1>

</chapter>