<!-- <?xml version="1.0" ?>
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.1-Based Variant V1.0//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">
<title>A Step-By-Step Tutorial</title>

<para>
In this chapter, &kpresenter; 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 &kpresenter;, the Choose Template dialog appears.
</para>

<screenshot>
<screeninfo>The <guilabel>Choose a Template</guilabel>
dialog</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="tut01.png" format="PNG"/></imageobject>
<textobject><phrase>The <guilabel>Choose a Template</guilabel>
dialog</phrase></textobject>
</mediaobject>
</screenshot>

<para>
The default option is <guilabel>Start with an empty
document</guilabel>. Select the template labeled
<guilabel>Title</guilabel> (highlighted in red) by clicking on it. This
also selects <guilabel>Create new document from a template</guilabel>.
</para>

<para>
Now click <guibutton>OK</guibutton>. This brings up the slide editor
window, where you can view and edit the slides (and objects contained in
them) in your document. At the moment, we just have one slide, with one
object on it, which is a text box.
</para>

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

<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>Insert</guimenu> menu, and then click on
<guimenuitem>Page</guimenuitem>.
</para>

<screenshot>
<screeninfo>Inserting a page from the menu</screeninfo>
<mediaobject>
<imageobject>
<imagedata fileref="tut05.png" format="PNG"/></imageobject>
<textobject><phrase>Inserting a page from the menu</phrase></textobject>
</mediaobject>
</screenshot>

<para>
This brings up the <guilabel>Insert Page</guilabel> dialog.
</para>

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

<para>
Click <guibutton>OK</guibutton> to accept the defaults, which will add a
new page after page 1.
</para>

<para>
The <guilabel>Choose</guilabel> dialog comes up so that we can decide
what the new slide should look like. This time, double click on the
<guilabel>One</guilabel> template (highlighted in red.)
</para>

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

<para>
The new slide 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 red for this screenshot).
</para>

<screenshot>
<screeninfo>The slides list</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut08.png" format="PNG"/></imageobject>
<textobject><phrase>The slides list</phrase></textobject>
</mediaobject>
</screenshot>

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

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

<para>
Double-click and type a title. Then double-click on the second text
box. Note that a bullet automatically appears when you start
typing. 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 page</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut10.png" format="PNG"/></imageobject>
<textobject><phrase>Adding text to the second page</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 page 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 click on the
<guimenu>Insert</guimenu> menu item, and then on
<guimenuitem>Picture</guimenuitem>.
</para>

<screenshot>
<screeninfo>Using the menu to add an image</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut11.png" format="PNG"/></imageobject>
<textobject><phrase>Using the menu to add an image</phrase></textobject>
</mediaobject>
</screenshot>

<para>
This brings up a file selection dialog. 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 (highlighted in red.) Clicking the <guiicon>up arrow</guiicon>
takes you up one directory level.
</para>

<para>
Find the file named <filename>koffice-logo.png</filename>, which may be
in a different directory than the one shown in the screenshot below. You
can also choose any other graphic file if you like! Select the file, and
click <guibutton>Open</guibutton>.
</para>

<screenshot>
<screeninfo>Choosing a picture to add</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut12.png" format="PNG"/></imageobject>
<textobject><phrase>Choosing a picture to add</phrase></textobject>
</mediaobject>
</screenshot>

<para>
The logo graphic is now visible in the top left corner of the editing
window. There are selection handles (little black 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.
</para>

<screenshot>
<screeninfo>Moving the image into place</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut14.png" format="PNG"/></imageobject>
<textobject><phrase>Moving the image into place</phrase></textobject>
</mediaobject>
</screenshot>

<para>
That's it. Now you have a picture on the title page!
</para>

</sect1>

<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</guimenuitem> option in the pop-up 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.
</para>

<para>
Change the color to blue by clicking on the <guiicon>dark blue</guiicon>
icon in the color palette on the right side of the editing window (this
icon is highlighted in red.)
</para>

<screenshot>
<screeninfo>The color palette</screeninfo>
<mediaobject>
<imageobject><imagedata fileref="tut19.png" format="PNG"/></imageobject>
<textobject><phrase>The color palette</phrase></textobject>
</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>

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

<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>play</guiicon> button (the grey arrow) on
the top toolbar. The first slide should appear on your screen.
</para>

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

<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>

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

<para>
To exit the slide show, <mousebutton>right</mousebutton> click, and then
select the <guimenuitem>Exit presentation</guimenuitem> option from the
pop-up menu.
</para>

</sect1>

</chapter>
