You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
511 lines
15 KiB
511 lines
15 KiB
<!-- <?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, &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 usual &koffice; startup dialog appears.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>&koffice;</guilabel>
|
|
startup dialog</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tut01.png" format="PNG"/></imageobject>
|
|
<textobject><phrase>The &koffice; startup dialog</phrase></textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Select <guilabel>Screen</guilabel> on the left then select the template labeled
|
|
<guilabel>Title</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. 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 and the background of the edited area
|
|
becomes grey.
|
|
</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>Slide...</guimenuitem>.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>Inserting a slide from the menu</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tut05.png" format="PNG"/></imageobject>
|
|
<textobject><phrase>Inserting a slide from the menu</phrase></textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
This brings up the <guilabel>Insert Slide</guilabel> dialog.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Insert Slide</guilabel> dialog</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tut06.png" format="PNG"/></imageobject>
|
|
<textobject><phrase>The <guilabel>Insert Slide</guilabel>
|
|
dialog</phrase></textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Select <guilabel>Use different template</guilabel> and click <guibutton>OK</guibutton> to add a
|
|
new page after page 1.
|
|
</para>
|
|
|
|
<para>
|
|
The <guilabel>Create Document</guilabel> dialog comes up so that we can decide
|
|
what the new slide should look like. This time, select <guilabel>Screen</guilabel> on the left and double click on the
|
|
<guilabel>One Column</guilabel> template (highlighted in blue.)
|
|
</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 blue 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 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 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 &tde; dialog boxes in detail, please consult the &tde;
|
|
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 folder level.
|
|
</para>
|
|
|
|
<para>
|
|
Find the file named <filename>koffice-logo.png</filename>, which may be
|
|
in a different folder 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>OK</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>
|
|
Click with the &LMB; where you want to place the loge in it's original size or
|
|
draw a rectangle with the left mouse cursor to specify the position and size for the logo.
|
|
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>
|
|
|
|
<screenshot>
|
|
<screeninfo>Dragging and resizing the image</screeninfo>
|
|
<mediaobject>
|
|
<imageobject><imagedata fileref="tut14.png" format="PNG"/></imageobject>
|
|
<textobject><phrase>Dragging and resizing the image</phrase></textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
That's it. Now you have a picture on the title page!
|
|
</para>
|
|
|
|
</sect1>
|
|
|
|
<sect1 id="insert-object">
|
|
<title>Insert a &koffice; object</title>
|
|
<para>Let's insert another &koffice; object under the picture, for example
|
|
a chart.</para>
|
|
|
|
<para>
|
|
Every &koffice; supported document can be embedded in a &kpresenter; slide.
|
|
Let's choose a chart from &kchart;. To do so, the first step is to click on the
|
|
<guimenu>Insert</guimenu> menu item, and then
|
|
on <guisubmenu>Object</guisubmenu>.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The Insert Object menu</screeninfo>
|
|
<mediaobject>
|
|
<imageobject><imagedata fileref="tut24.png" format="PNG"/></imageobject>
|
|
<textobject><phrase>The Insert Object menu</phrase></textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
A list of the &koffice; available components appears as submenu.
|
|
Select <guilabel>Chart</guilabel> and then outline with your mouse the area you
|
|
want to put your chart in on the &kpresenter; 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>
|
|
|
|
<!--TODO check if the Open Document dialog should appear when the chart is
|
|
created and not a blank chart-->
|
|
|
|
<para>
|
|
Once you release the mouse button, a blank chart is added on the slide. Whenever
|
|
you work in the chart, the toolbars and menubar in &kpresenter; main window are
|
|
replaced by those from &kchart;.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>&kchart; menus and toolbars embedded</screeninfo>
|
|
<mediaobject>
|
|
<imageobject><imagedata fileref="tut26.png" format="PNG"/></imageobject>
|
|
<textobject><phrase>&kchart; menus and toolbars embedded</phrase></textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>While you are in the chart, clicking with the &RMB; will bring the
|
|
&kchart; settings menu which allows you to modify the parameters of the chart.
|
|
Please see the &kchart; user manual to get more information on how to use
|
|
&kchart;.</para>
|
|
|
|
<para>Click anywhere with the &LMB; outside the chart to go back to
|
|
&kpresenter; 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
|
|
&kpresenter; object. Double click on the chart to get into &kchart; mode and
|
|
modify any of the chart property.</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 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>
|
|
|
|
<para>
|
|
Open the <guilabel>Select Color</guilabel> dialog by clicking on the <guiicon>dark blue A</guiicon>
|
|
icon on the right side of the <guilabel>Text</guilabel> toolbar (this icon has
|
|
a Color... tooltip) or choose the <guimenu>Text</guimenu> menu and then click on
|
|
<guimenuitem>Color...</guimenuitem> and change the color to blue.</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>
|
|
Click <guilabel>OK</guilabel> in the <guilabel>Select Color</guilabel> dialog. 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 blue double arrow) on
|
|
the <guilabel>Slide Show</guilabel> 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>End</guimenuitem> option from the
|
|
popup menu.
|
|
</para>
|
|
|
|
</sect1>
|
|
|
|
</chapter>
|