[Ktutorial-commits] SF.net SVN: ktutorial:[383] trunk/web-src
Status: Alpha
Brought to you by:
danxuliu
Menu
▾
▴
[Ktutorial-commits] SF.net SVN: ktutorial:[383] trunk/web-src
|
From: <dan...@us...> - 2012-08-30 14:34:51
|
Revision: 383
http://ktutorial.svn.sourceforge.net/ktutorial/?rev=383&view=rev
Author: danxuliu
Date: 2012-08-30 14:34:37 +0000 (Thu, 30 Aug 2012)
Log Message:
-----------
Add news, videos and sources for the "example of KTutorial for the real world" series of the blog.
Modified Paths:
--------------
trunk/web-src/newsList.xml
trunk/web-src/pages/index.xml
trunk/web-src/pages/news.xml
trunk/web-src/pages/screenshots.xml
Added Paths:
-----------
trunk/web-src/data/files/examples/
trunk/web-src/data/files/examples/gwenview-fullScreenInterface.xml
trunk/web-src/data/files/examples/gwenview.patch
trunk/web-src/data/files/examples/kdenlive-simpleSlideTransitionBetweenTwoClips.xml
trunk/web-src/data/files/examples/kdenlive.patch
trunk/web-src/data/files/examples/showfoto-levelsAdjust.xml
trunk/web-src/data/files/examples/showfoto.patch
trunk/web-src/data/files/gwenview-fullScreenInterface.ogv
trunk/web-src/data/files/gwenview-fullScreenInterface.png
trunk/web-src/data/files/kdenlive-simpleSlideTransitionBetweenTwoClips.ogv
trunk/web-src/data/files/kdenlive-simpleSlideTransitionBetweenTwoClips.png
trunk/web-src/data/files/showfoto-levelsAdjust.ogv
trunk/web-src/data/files/showfoto-levelsAdjust.png
Added: trunk/web-src/data/files/examples/gwenview-fullScreenInterface.xml
===================================================================
--- trunk/web-src/data/files/examples/gwenview-fullScreenInterface.xml (rev 0)
+++ trunk/web-src/data/files/examples/gwenview-fullScreenInterface.xml 2012-08-30 14:34:37 UTC (rev 383)
@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="utf-8"?>
+<tutorial name="Full screen interface">
+ <description>An overview of the full screen interface of Gwenview.</description>
+ <step id="start">
+ <text><para>Gwenview features two modes: browse and view. In versions prior to 2.9 only the view mode had also a full screen interface. In Gwenview 2.9 a full screen interface was added for the browse mode too.</para>
+
+<para>This tutorial will show you an overview of the full screen interface for browse and view modes. We will start by looking at the full screen browse mode, so browse to a folder with several images and, then, change to full screen.</para>
+
+<para>To change to full screen you can click on the <interface>Full screen</interface> button in the <link url="widget:mainToolBar">tool bar</link>, or click on the <interface>View|Full screen mode</interface> menu item in the menu bar.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForStepActivation/>
+ <waitForProperty objectName="StartMainPage" propertyName="visible" value="true"/>
+ </waitForComposed>
+ <nextStep id="start when start page is selected"/>
+ </reaction>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForStepActivation/>
+ <waitForProperty objectName="StartMainPage" propertyName="visible" value="false"/>
+ <waitForProperty objectName="BrowseMainPage" propertyName="visible" value="false"/>
+ </waitForComposed>
+ <nextStep id="start when view page is selected"/>
+ </reaction>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="fullscreen" signalName="triggered()"/>
+ <nextStep id="fullscreen browse mode"/>
+ </reaction>
+ </step>
+ <step id="start when start page is selected">
+ <text><para>Gwenview features two modes: browse and view. In versions prior to 2.9 only the view mode had also a full screen interface. In Gwenview 2.9 a full screen interface was added for the browse mode too.</para>
+
+<para>This tutorial will show you an overview of the full screen interface for browse and view modes. We will start by looking at the full screen browse mode so, first, change to browse mode.</para>
+
+<para>You can change to browse mode from the start page by double clicking on any of your <link url="widget:mHistoryWidget">recent folders</link> or by single clicking on any of your <link url="widget:mPlacesTagsWidget">places</link>.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="browse" signalName="triggered()"/>
+ <nextStep id="enter fullscreen in browser mode"/>
+ </reaction>
+ </step>
+ <step id="start when view page is selected">
+ <text><para>Gwenview features two modes: browse and view. In versions prior to 2.9 only the view mode had also a full screen interface. In Gwenview 2.9 a full screen interface was added for the browse mode too.</para>
+
+<para>This tutorial will show you an overview of the full screen interface for browse and view modes. We will start by looking at the full screen browse mode so, first, change to browse mode.</para>
+
+<para>You can change to browse mode from the view mode by clicking on the <interface>Browse</interface> button in the <link url="widget:mainToolBar">tool bar</link>, or by clicking on the <interface>View|Browse</interface> menu item in the menu bar.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="browse" signalName="triggered()"/>
+ <nextStep id="enter fullscreen in browser mode"/>
+ </reaction>
+ </step>
+ <step id="enter fullscreen in browser mode">
+ <text><para>Now browse to a folder with several images. Then, change to full screen.</para>
+
+<para>To change to full screen you can click on the <interface>Full screen</interface> button in the <link url="widget:mainToolBar">tool bar</link>, or click on the <interface>View|Full screen mode</interface> menu item in the menu bar.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="fullscreen" signalName="triggered()"/>
+ <nextStep id="fullscreen browse mode"/>
+ </reaction>
+ </step>
+ <step id="fullscreen browse mode">
+ <text><para>As you can see, the full screen interface for browse mode is pretty much the same as the normal interface. However, it does not have a menu bar, and neither a tool bar.</para>
+
+<para>It does have, though, a <link url="widget:mStatusBarContainer">status bar</link>, so you can use it to <link url="widget:mToggleSideBarButton">show or hide the side bar</link>, or <link url="widget:mThumbnailSlider">change the size of the thumbnails</link>. It also contains a top bar with a few buttons and the <link url="widget:mUrlNavigatorContainer">navigation bar</link> showing the current folder path.</para>
+
+<para>As the full screen interface for the browse mode is pretty much like its normal interface we will change now to the full screen view mode.</para>
+
+<para>To change to the view mode, select an image and then click on the view mode button in the top bar (its icon is a single picture).</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="view" signalName="triggered()"/>
+ <nextStep id="fullscreen view mode"/>
+ </reaction>
+ </step>
+ <step id="fullscreen view mode">
+ <text><para>The full screen interface for the view mode differs a lot more from its normal interface. The full screen interface only contains the selected image (or images) and an <link url="widget:fullScreenBar">auto-hiding top bar</link> (move the cursor to the top of the screen and the bar will appear, move the cursor outside the bar and the bar will dissapear).</para>
+
+<para>This full screen interface is designed to show a slideshow of your images. The slideshow (and other details of the full screen interface) can be configured clicking on the <interface>Configuration</interface> button in the top bar.</para>
+
+<para>Now start the slideshow. To do this, just click on the <interface>Start slideshow</interface> button (its icon is a <emphasis>Play</emphasis> icon) in the top bar.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="toggle_slideshow" signalName="triggered()"/>
+ <nextStep id="slideshow"/>
+ </reaction>
+ </step>
+ <step id="slideshow">
+ <text><para>The slideshow starts from the current image and shows all the images in the current folder, stopping at the last one (unless you check the <interface>Loop</interface> option in the configuration, in which case it will go back to the first image and continue the slideshow). Depending on the interval set in the configuration the images will change faster or slower.</para>
+
+<para>Stop the slideshow clicking on the same button in the top bar that you used to start it (this time its icon will have changed to a pause or stop icon).</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="toggle_slideshow" signalName="triggered()"/>
+ <nextStep id="change to browse mode from view mode"/>
+ </reaction>
+ </step>
+ <step id="change to browse mode from view mode">
+ <text><para>Besides the automatic image change performed by the slideshow you can change the current image using the <interface>Previous</interface> and <interface>Next</interface> buttons in the top bar, or clicking on a specific image in the thumbnail list (which can be shown or hidden in the <interface>Configuration</interface>).</para>
+
+<para>You can also change to full screen browse mode to select the image there. To do this, just click in the browse mode button in the top bar (its icon is a browser with several files).</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="browse" signalName="triggered()"/>
+ <nextStep id="change back to view mode"/>
+ </reaction>
+ </step>
+ <step id="change back to view mode">
+ <text><para>After selecting the desired image you can go back to the full screen view mode like the first time, that is, clicking on the view mode button in the top bar.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="view" signalName="triggered()"/>
+ <nextStep id="zoom in"/>
+ </reaction>
+ </step>
+ <step id="zoom in">
+ <text><para>Even if the full screen view mode shows the image fit to the screen size you can still zoom it in.</para>
+
+<para>Click with the right mouse button in the image. Then, in the menu that pop ups, click on <interface>Zoom in</interface>.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="view_zoom_in" signalName="triggered()"/>
+ <nextStep id="leave fullscreen mode"/>
+ </reaction>
+ </step>
+ <step id="leave fullscreen mode">
+ <text><para>Changing to the normal interface from the full screen interface is done in the same way in the view mode and in the browse mode. Just click in the <interface>Leave fullscreen</interface> button in the top bar.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="leave_fullscreen" signalName="triggered()"/>
+ <nextStep id="end"/>
+ </reaction>
+ </step>
+ <step id="end">
+ <text><para>And that is all. We have seen how to use the full screen interface for both the browse and view modes.</para></text>
+ </step>
+</tutorial>
Added: trunk/web-src/data/files/examples/gwenview.patch
===================================================================
--- trunk/web-src/data/files/examples/gwenview.patch (rev 0)
+++ trunk/web-src/data/files/examples/gwenview.patch 2012-08-30 14:34:37 UTC (rev 383)
@@ -0,0 +1,307 @@
+diff --git a/CMakeLists.txt b/CMakeLists.txt
+index d1a192d..d79dbf5 100644
+--- a/CMakeLists.txt
++++ b/CMakeLists.txt
+@@ -45,6 +45,9 @@ endif (NOT GWENVIEW_SEMANTICINFO_BACKEND_NONE)
+ find_package(LibKonq)
+ macro_log_feature(LIBKONQ_FOUND "libkonq" "Provides file management features" "http://www.kde.org" TRUE "" "")
+
++macro_optional_find_package(KTutorial "0.5")
++macro_log_feature(KTUTORIAL_FOUND "KTutorial" "Provides interactive tutorials support" "http://ktutorial.sourceforge.net" FALSE "0.5")
++
+ ## Global settings
+
+ # Avoid some build-time warnings in Nepomuk
+@@ -73,6 +76,7 @@ add_subdirectory(icons)
+ add_subdirectory(cursors)
+ add_subdirectory(color-schemes)
+ add_subdirectory(doc)
++add_subdirectory(tutorials)
+
+ configure_file(config-gwenview.h.cmake ${CMAKE_CURRENT_BINARY_DIR}/config-gwenview.h)
+
+diff --git a/Messages.sh b/Messages.sh
+index 6462d4e..078872d 100644
+--- a/Messages.sh
++++ b/Messages.sh
+@@ -1,3 +1,3 @@
+ #! /bin/sh
+ $EXTRACTRC `find . -name "*.ui" -o -name "*.rc" -o -name "*.kcfg" ` >> rc.cpp
+-$XGETTEXT `find . -name "*.cpp" -o -name "*.h"` -o $podir/gwenview.pot
++$XGETTEXT `find . -name "*.cpp" -o -name "*.h"` `find tutorials -name "*.js"` -o $podir/gwenview.pot
+diff --git a/app/CMakeLists.txt b/app/CMakeLists.txt
+index e039198..0478d5d 100644
+--- a/app/CMakeLists.txt
++++ b/app/CMakeLists.txt
+@@ -9,6 +9,11 @@ if (KIPI_FOUND)
+ include_directories(${KIPI_INCLUDE_DIR})
+ endif (KIPI_FOUND)
+
++if(KTUTORIAL_FOUND)
++ add_definitions(-DKTUTORIAL_FOUND)
++ include_directories(${KTUTORIAL_INCLUDE_DIRS})
++endif(KTUTORIAL_FOUND)
++
+ # For lib/gwenviewconfig.h and config-gwenview.h
+ include_directories(
+ ${CMAKE_CURRENT_BINARY_DIR}/..
+@@ -96,6 +101,10 @@ if (NOT GWENVIEW_SEMANTICINFO_BACKEND_NONE)
+ target_link_libraries(gwenview ${NEPOMUK_LIBRARIES})
+ endif (NOT GWENVIEW_SEMANTICINFO_BACKEND_NONE)
+
++if(KTUTORIAL_FOUND)
++ target_link_libraries(gwenview ${KTUTORIAL_LIBRARIES})
++endif(KTUTORIAL_FOUND)
++
+ install(TARGETS gwenview
+ ${INSTALL_TARGETS_DEFAULT_ARGS})
+
+diff --git a/app/gwenviewui.rc b/app/gwenviewui.rc
+index 0b1baad..da0e4a7 100644
+--- a/app/gwenviewui.rc
++++ b/app/gwenviewui.rc
+@@ -86,6 +86,9 @@
+ <Action name="options_configure_toolbars"/>
+ <Action name="options_configure"/>
+ </Menu>
++ <Menu name="help">
++ <DefineGroup name="ktutorial"/>
++ </Menu>
+ </MenuBar>
+
+ <ToolBar name="mainToolBar" noMerge="1">
+diff --git a/app/mainwindow.cpp b/app/mainwindow.cpp
+index 27d9584..682a8b8 100644
+--- a/app/mainwindow.cpp
++++ b/app/mainwindow.cpp
+@@ -60,6 +60,10 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ #include <KXMLGUIFactory>
+ #include <KWindowSystem>
+
++#ifdef KTUTORIAL_FOUND
++#include <ktutorial/KTutorial.h>
++#endif
++
+ // Local
+ #include "configdialog.h"
+ #include "contextmanager.h"
+@@ -852,6 +856,15 @@ MainWindow::MainWindow()
+ updatePreviousNextActions();
+ d->mSaveBar->initActionDependentWidgets();
+
++#ifdef KTUTORIAL_FOUND
++ //Hack to make actions usable by KTutorial.
++ foreach (QAction* action, actionCollection()->actions()) {
++ action->setParent(this);
++ }
++
++ ktutorial::KTutorial::self()->setup(this);
++#endif
++
+ createGUI();
+ loadConfig();
+
+diff --git a/tutorials/CMakeLists.txt b/tutorials/CMakeLists.txt
+new file mode 100644
+index 0000000..f6f836a
+--- /dev/null
++++ b/tutorials/CMakeLists.txt
+@@ -0,0 +1 @@
++install(FILES fullScreenInterface.js DESTINATION ${DATA_INSTALL_DIR}/gwenview/tutorials/)
+diff --git a/tutorials/fullScreenInterface.js b/tutorials/fullScreenInterface.js
+new file mode 100644
+index 0000000..0c4153d
+--- /dev/null
++++ b/tutorials/fullScreenInterface.js
+@@ -0,0 +1,191 @@
++t = Kross.module("kdetranslation");
++
++tutorial.tutorialInformationAsObject().setName(t.i18n("Full screen interface"));
++tutorial.tutorialInformationAsObject().setDescription(t.i18n("An overview of the full screen interface of Gwenview."));
++
++//Step start
++startStep = ktutorial.newStep("start");
++startStep.setText(t.i18nc("@info", "<para>Gwenview features two modes: browse and view. In versions prior to 2.9 only the view mode had also a full screen interface. In Gwenview 2.9 a full screen interface was added for the browse mode too.</para>\n\n<para>This tutorial will show you an overview of the full screen interface for browse and view modes. We will start by looking at the full screen browse mode, so browse to a folder with several images and, then, change to full screen.</para>\n\n<para>To change to full screen you can click on the <interface>Full screen</interface> button in the <link url=\"widget:mainToolBar\">tool bar</link>, or click on the <interface>View|Full screen mode</interface> menu item in the menu bar.</para>"));
++
++function startStepSetup(step) {
++ waitForStepActivation = ktutorial.newWaitFor("WaitForStepActivation");
++ waitForStepActivation.setStep(tutorial, step);
++
++ waitForVisibleInStartMainPage = ktutorial.newWaitFor("WaitForProperty");
++ waitForVisibleInStartMainPage.setProperty(ktutorial.findObject("StartMainPage"), "visible", true);
++
++ waitForAnd = ktutorial.newWaitFor("WaitForAnd");
++ waitForAnd.add(waitForStepActivation);
++ waitForAnd.add(waitForVisibleInStartMainPage);
++ step.addWaitFor(waitForAnd, "start when start page is selected");
++
++ waitForStepActivation2 = ktutorial.newWaitFor("WaitForStepActivation");
++ waitForStepActivation2.setStep(tutorial, step);
++
++ waitForVisibleInStartMainPage2 = ktutorial.newWaitFor("WaitForProperty");
++ waitForVisibleInStartMainPage2.setProperty(ktutorial.findObject("StartMainPage"), "visible", false);
++
++ waitForVisibleInBrowseMainPage = ktutorial.newWaitFor("WaitForProperty");
++ waitForVisibleInBrowseMainPage.setProperty(ktutorial.findObject("BrowseMainPage"), "visible", false);
++
++ waitForAnd2 = ktutorial.newWaitFor("WaitForAnd");
++ waitForAnd2.add(waitForStepActivation2);
++ waitForAnd2.add(waitForVisibleInStartMainPage2);
++ waitForAnd2.add(waitForVisibleInBrowseMainPage);
++ step.addWaitFor(waitForAnd2, "start when view page is selected");
++
++ waitForTriggeredByFullscreen = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByFullscreen.setSignal(ktutorial.findObject("fullscreen"), "triggered()");
++ step.addWaitFor(waitForTriggeredByFullscreen, "fullscreen browse mode");
++}
++connect(startStep, "setup(QObject*)",
++ this, "startStepSetup(QObject*)");
++
++tutorial.addStep(startStep);
++
++//Step start when start page is selected
++startWhenStartPageIsSelectedStep = ktutorial.newStep("start when start page is selected");
++startWhenStartPageIsSelectedStep.setText(t.i18nc("@info", "<para>Gwenview features two modes: browse and view. In versions prior to 2.9 only the view mode had also a full screen interface. In Gwenview 2.9 a full screen interface was added for the browse mode too.</para>\n\n<para>This tutorial will show you an overview of the full screen interface for browse and view modes. We will start by looking at the full screen browse mode so, first, change to browse mode.</para>\n\n<para>You can change to browse mode from the start page by double clicking on any of your <link url=\"widget:mHistoryWidget\">recent folders</link> or by single clicking on any of your <link url=\"widget:mPlacesTagsWidget\">places</link>.</para>"));
++
++function startWhenStartPageIsSelectedStepSetup(step) {
++ waitForTriggeredByBrowse = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByBrowse.setSignal(ktutorial.findObject("browse"), "triggered()");
++ step.addWaitFor(waitForTriggeredByBrowse, "enter fullscreen in browser mode");
++}
++connect(startWhenStartPageIsSelectedStep, "setup(QObject*)",
++ this, "startWhenStartPageIsSelectedStepSetup(QObject*)");
++
++tutorial.addStep(startWhenStartPageIsSelectedStep);
++
++//Step start when view page is selected
++startWhenViewPageIsSelectedStep = ktutorial.newStep("start when view page is selected");
++startWhenViewPageIsSelectedStep.setText(t.i18nc("@info", "<para>Gwenview features two modes: browse and view. In versions prior to 2.9 only the view mode had also a full screen interface. In Gwenview 2.9 a full screen interface was added for the browse mode too.</para>\n\n<para>This tutorial will show you an overview of the full screen interface for browse and view modes. We will start by looking at the full screen browse mode so, first, change to browse mode.</para>\n\n<para>You can change to browse mode from the view mode by clicking on the <interface>Browse</interface> button in the <link url=\"widget:mainToolBar\">tool bar</link>, or by clicking on the <interface>View|Browse</interface> menu item in the menu bar.</para>"));
++
++function startWhenViewPageIsSelectedStepSetup(step) {
++ waitForTriggeredByBrowse = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByBrowse.setSignal(ktutorial.findObject("browse"), "triggered()");
++ step.addWaitFor(waitForTriggeredByBrowse, "enter fullscreen in browser mode");
++}
++connect(startWhenViewPageIsSelectedStep, "setup(QObject*)",
++ this, "startWhenViewPageIsSelectedStepSetup(QObject*)");
++
++tutorial.addStep(startWhenViewPageIsSelectedStep);
++
++//Step enter fullscreen in browser mode
++enterFullscreenInBrowserModeStep = ktutorial.newStep("enter fullscreen in browser mode");
++enterFullscreenInBrowserModeStep.setText(t.i18nc("@info", "<para>Now browse to a folder with several images. Then, change to full screen.</para>\n\n<para>To change to full screen you can click on the <interface>Full screen</interface> button in the <link url=\"widget:mainToolBar\">tool bar</link>, or click on the <interface>View|Full screen mode</interface> menu item in the menu bar.</para>"));
++
++function enterFullscreenInBrowserModeStepSetup(step) {
++ waitForTriggeredByFullscreen = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByFullscreen.setSignal(ktutorial.findObject("fullscreen"), "triggered()");
++ step.addWaitFor(waitForTriggeredByFullscreen, "fullscreen browse mode");
++}
++connect(enterFullscreenInBrowserModeStep, "setup(QObject*)",
++ this, "enterFullscreenInBrowserModeStepSetup(QObject*)");
++
++tutorial.addStep(enterFullscreenInBrowserModeStep);
++
++//Step fullscreen browse mode
++fullscreenBrowseModeStep = ktutorial.newStep("fullscreen browse mode");
++fullscreenBrowseModeStep.setText(t.i18nc("@info", "<para>As you can see, the full screen interface for browse mode is pretty much the same as the normal interface. However, it does not have a menu bar, and neither a tool bar.</para>\n\n<para>It does have, though, a <link url=\"widget:mStatusBarContainer\">status bar</link>, so you can use it to <link url=\"widget:mToggleSideBarButton\">show or hide the side bar</link>, or <link url=\"widget:mThumbnailSlider\">change the size of the thumbnails</link>. It also contains a top bar with a few buttons and the <link url=\"widget:mUrlNavigatorContainer\">navigation bar</link> showing the current folder path.</para>\n\n<para>As the full screen interface for the browse mode is pretty much like its normal interface we will change now to the full screen view mode.</para>\n\n<para>To change to the view mode, select an image and then click on the view mode button in the top bar (its icon is a single picture).</para>"));
++
++function fullscreenBrowseModeStepSetup(step) {
++ waitForTriggeredByView = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByView.setSignal(ktutorial.findObject("view"), "triggered()");
++ step.addWaitFor(waitForTriggeredByView, "fullscreen view mode");
++}
++connect(fullscreenBrowseModeStep, "setup(QObject*)",
++ this, "fullscreenBrowseModeStepSetup(QObject*)");
++
++tutorial.addStep(fullscreenBrowseModeStep);
++
++//Step fullscreen view mode
++fullscreenViewModeStep = ktutorial.newStep("fullscreen view mode");
++fullscreenViewModeStep.setText(t.i18nc("@info", "<para>The full screen interface for the view mode differs a lot more from its normal interface. The full screen interface only contains the selected image (or images) and an <link url=\"widget:fullScreenBar\">auto-hiding top bar</link> (move the cursor to the top of the screen and the bar will appear, move the cursor outside the bar and the bar will dissapear).</para>\n\n<para>This full screen interface is designed to show a slideshow of your images. The slideshow (and other details of the full screen interface) can be configured clicking on the <interface>Configuration</interface> button in the top bar.</para>\n\n<para>Now start the slideshow. To do this, just click on the <interface>Start slideshow</interface> button (its icon is a <emphasis>Play</emphasis> icon) in the top bar.</para>"));
++
++function fullscreenViewModeStepSetup(step) {
++ waitForTriggeredByToggle_slideshow = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByToggle_slideshow.setSignal(ktutorial.findObject("toggle_slideshow"), "triggered()");
++ step.addWaitFor(waitForTriggeredByToggle_slideshow, "slideshow");
++}
++connect(fullscreenViewModeStep, "setup(QObject*)",
++ this, "fullscreenViewModeStepSetup(QObject*)");
++
++tutorial.addStep(fullscreenViewModeStep);
++
++//Step slideshow
++slideshowStep = ktutorial.newStep("slideshow");
++slideshowStep.setText(t.i18nc("@info", "<para>The slideshow starts from the current image and shows all the images in the current folder, stopping at the last one (unless you check the <interface>Loop</interface> option in the configuration, in which case it will go back to the first image and continue the slideshow). Depending on the interval set in the configuration the images will change faster or slower.</para>\n\n<para>Stop the slideshow clicking on the same button in the top bar that you used to start it (this time its icon will have changed to a pause or stop icon).</para>"));
++
++function slideshowStepSetup(step) {
++ waitForTriggeredByToggle_slideshow = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByToggle_slideshow.setSignal(ktutorial.findObject("toggle_slideshow"), "triggered()");
++ step.addWaitFor(waitForTriggeredByToggle_slideshow, "change to browse mode from view mode");
++}
++connect(slideshowStep, "setup(QObject*)",
++ this, "slideshowStepSetup(QObject*)");
++
++tutorial.addStep(slideshowStep);
++
++//Step change to browse mode from view mode
++changeToBrowseModeFromViewModeStep = ktutorial.newStep("change to browse mode from view mode");
++changeToBrowseModeFromViewModeStep.setText(t.i18nc("@info", "<para>Besides the automatic image change performed by the slideshow you can change the current image using the <interface>Previous</interface> and <interface>Next</interface> buttons in the top bar, or clicking on a specific image in the thumbnail list (which can be shown or hidden in the <interface>Configuration</interface>).</para>\n\n<para>You can also change to full screen browse mode to select the image there. To do this, just click in the browse mode button in the top bar (its icon is a browser with several files).</para>"));
++
++function changeToBrowseModeFromViewModeStepSetup(step) {
++ waitForTriggeredByBrowse = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByBrowse.setSignal(ktutorial.findObject("browse"), "triggered()");
++ step.addWaitFor(waitForTriggeredByBrowse, "change back to view mode");
++}
++connect(changeToBrowseModeFromViewModeStep, "setup(QObject*)",
++ this, "changeToBrowseModeFromViewModeStepSetup(QObject*)");
++
++tutorial.addStep(changeToBrowseModeFromViewModeStep);
++
++//Step change back to view mode
++changeBackToViewModeStep = ktutorial.newStep("change back to view mode");
++changeBackToViewModeStep.setText(t.i18nc("@info", "<para>After selecting the desired image you can go back to the full screen view mode like the first time, that is, clicking on the view mode button in the top bar.</para>"));
++
++function changeBackToViewModeStepSetup(step) {
++ waitForTriggeredByView = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByView.setSignal(ktutorial.findObject("view"), "triggered()");
++ step.addWaitFor(waitForTriggeredByView, "zoom in");
++}
++connect(changeBackToViewModeStep, "setup(QObject*)",
++ this, "changeBackToViewModeStepSetup(QObject*)");
++
++tutorial.addStep(changeBackToViewModeStep);
++
++//Step zoom in
++zoomInStep = ktutorial.newStep("zoom in");
++zoomInStep.setText(t.i18nc("@info", "<para>Even if the full screen view mode shows the image fit to the screen size you can still zoom it in.</para>\n\n<para>Click with the right mouse button in the image. Then, in the menu that pop ups, click on <interface>Zoom in</interface>.</para>"));
++
++function zoomInStepSetup(step) {
++ waitForTriggeredByView_zoom_in = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByView_zoom_in.setSignal(ktutorial.findObject("view_zoom_in"), "triggered()");
++ step.addWaitFor(waitForTriggeredByView_zoom_in, "leave fullscreen mode");
++}
++connect(zoomInStep, "setup(QObject*)",
++ this, "zoomInStepSetup(QObject*)");
++
++tutorial.addStep(zoomInStep);
++
++//Step leave fullscreen mode
++leaveFullscreenModeStep = ktutorial.newStep("leave fullscreen mode");
++leaveFullscreenModeStep.setText(t.i18nc("@info", "<para>Changing to the normal interface from the full screen interface is done in the same way in the view mode and in the browse mode. Just click in the <interface>Leave fullscreen</interface> button in the top bar.</para>"));
++
++function leaveFullscreenModeStepSetup(step) {
++ waitForTriggeredByLeave_fullscreen = ktutorial.newWaitFor("WaitForSignal");
++ waitForTriggeredByLeave_fullscreen.setSignal(ktutorial.findObject("leave_fullscreen"), "triggered()");
++ step.addWaitFor(waitForTriggeredByLeave_fullscreen, "end");
++}
++connect(leaveFullscreenModeStep, "setup(QObject*)",
++ this, "leaveFullscreenModeStepSetup(QObject*)");
++
++tutorial.addStep(leaveFullscreenModeStep);
++
++//Step end
++endStep = ktutorial.newStep("end");
++endStep.setText(t.i18nc("@info", "<para>And that is all. We have seen how to use the full screen interface for both the browse and view modes.</para>"));
++
++tutorial.addStep(endStep);
++
Added: trunk/web-src/data/files/examples/kdenlive-simpleSlideTransitionBetweenTwoClips.xml
===================================================================
--- trunk/web-src/data/files/examples/kdenlive-simpleSlideTransitionBetweenTwoClips.xml (rev 0)
+++ trunk/web-src/data/files/examples/kdenlive-simpleSlideTransitionBetweenTwoClips.xml 2012-08-30 14:34:37 UTC (rev 383)
@@ -0,0 +1,202 @@
+<?xml version="1.0" encoding="utf-8"?>
+<tutorial name="Simple slide transition between two clips">
+ <description>Basic usage of "slide" transition.</description>
+ <license>Copyright (C) 2012 by Daniel Calviño Sánchez <dan...@gm...>
+
+This tutorial is licensed under the Creative Commons Attribution-ShareAlike License (http://creativecommons.org/licenses/by-sa/3.0/).</license>
+ <step id="start">
+ <text><para>In this tutorial you will learn how to add a <emphasis>slide</emphasis> transition between two clips and how to do some basic changes in the transition.</para>
+
+<para>For this tutorial you will need a project with at least two video tracks in the <link url="widget:TimeLine_UI">timeline</link>, and you will need too two clips.</para>
+
+<para>Do you want to use your own clips, or do you want to add two example clips just for this tutorial?</para></text>
+ <reaction triggerType="OptionSelected" responseType="NextStep">
+ <option name="I will use my own clips"/>
+ <nextStep id="add clips to timeline"/>
+ </reaction>
+ <reaction triggerType="OptionSelected" responseType="NextStep">
+ <option name="Let's add the example clips"/>
+ <nextStep id="add the first color clip"/>
+ </reaction>
+ </step>
+ <step id="add the first color clip">
+ <text><para>First, we will add a new color clip.</para>
+
+<para>To do this there are several options:
+<list>
+<item>In the menu bar, you can select <interface>Project|Add color clip</interface>.</item>
+
+<item>In the <link url="widget:project_tree">project tree</link>, you can click with the right mouse button on the clip list and then select <interface>Add color clip</interface>.</item>
+
+<item>In the project tree, you can click with the left mouse button on the arrow near to the <interface>Add clip</interface> button (its icon is a film with a <emphasis>+</emphasis> sign), and then select <interface>Add color clip</interface>.</item>
+</list>
+</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForWindow windowObjectName="ColorClip_UI"/>
+ <nextStep id="set name for first color clip"/>
+ </reaction>
+ </step>
+ <step id="set name for first color clip">
+ <text><para>In the dialog that has just been opened, change the <link url="widget:clip_name">clip name</link> to <emphasis>First clip</emphasis>.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForProperty objectName="clip_name" propertyName="text" value="t.i18n("First clip")"/>
+ <nextStep id="set color for first color clip"/>
+ </reaction>
+ </step>
+ <step id="set color for first color clip">
+ <text><para>Change the <link url="widget:clip_color">color</link> to black.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForStepActivation/>
+ <waitForProperty objectName="clip_color" propertyName="color" value=""#000000""/>
+ </waitForComposed>
+ <nextStep id="set duration for first color clip"/>
+ </reaction>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForProperty objectName="clip_color" propertyName="color" value=""#000000""/>
+ <nextStep id="set duration for first color clip"/>
+ </reaction>
+ </step>
+ <step id="set duration for first color clip">
+ <text>Set the clip duration to something around 4 or 5 seconds and then accept the dialog.</text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="ColorClip_UI" signalName="accepted()"/>
+ <nextStep id="add the second color clip"/>
+ </reaction>
+ </step>
+ <step id="add the second color clip">
+ <text><para>Now add another new color clip.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForWindow windowObjectName="ColorClip_UI"/>
+ <nextStep id="set name for second color clip"/>
+ </reaction>
+ </step>
+ <step id="set name for second color clip">
+ <text><para>Change the <link url="widget:clip_name">clip name</link> to <emphasis>Second clip</emphasis>.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForProperty objectName="clip_name" propertyName="text" value="t.i18n("Second clip")"/>
+ <nextStep id="set color for second color clip"/>
+ </reaction>
+ </step>
+ <step id="set color for second color clip">
+ <text><para>Change the <link url="widget:clip_color">color</link> to white.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForStepActivation/>
+ <waitForProperty objectName="clip_color" propertyName="color" value=""#FFFFFF""/>
+ </waitForComposed>
+ <nextStep id="set duration for second color clip"/>
+ </reaction>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForProperty objectName="clip_color" propertyName="color" value=""#FFFFFF""/>
+ <nextStep id="set duration for second color clip"/>
+ </reaction>
+ </step>
+ <step id="set duration for second color clip">
+ <text>Set the clip duration to something around 4 or 5 seconds and then accept the dialog.</text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="ColorClip_UI" signalName="accepted()"/>
+ <nextStep id="add clips to timeline"/>
+ </reaction>
+ </step>
+ <step id="add clips to timeline">
+ <text><para>Add the first clip to a video track in the <link url="widget:tracks_frame">timeline</link>. The track must have at least another video track below it.</para>
+
+<para>Then add the second clip to the track below the track of the first clip. Make sure that the two clips overlap by one or two seconds.</para>
+
+<para>Now it is time to add the <emphasis>slide</emphasis> transition. Look at the first clip in the timeline. One of its lower corners overlaps the second clip. Put the cursor on that corner, and an arrow will appear on it. Then, click with the right button of the mouse and, in the menu that pops up, select <interface>Add transition|Slide</interface>.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForSignal emitterName="transition_slide" signalName="activated()"/>
+ <nextStep id="select slide transition"/>
+ </reaction>
+ </step>
+ <step id="select slide transition">
+ <text><para>A <emphasis>slide</emphasis> transition has been added between the first and the second clip. You can see it by the yellow rectangle placed between the clips, in the area they overlap.</para>
+
+<para>Click with the left mouse button on that yellow rectangle to see the transition properties. Note that if you click in the upper part or in the lower part of the yellow rectangle you may select the clips instead; if that happens, just try again to select the yellow rectangle.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForStepActivation/>
+ <waitForProperty objectName="transition" propertyName="visible" value="false"/>
+ </waitForComposed>
+ <nextStep id="select slide transition when transition dock is hidden"/>
+ </reaction>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForEvent receiverName="transitionList" eventName="EnabledChange"/>
+ <waitForProperty objectName="transitionList" propertyName="enabled" value="true"/>
+ </waitForComposed>
+ <nextStep id="change slide transition length"/>
+ </reaction>
+ </step>
+ <step id="select slide transition when transition dock is hidden">
+ <text><para>A <emphasis>slide</emphasis> transition has been added between the first and the second clip. You can see it by the yellow rectangle placed between the clips, in the area they overlap.</para>
+
+<para>The transition panel is hidden. Before going any further, show that panel to be able to see the transition properties (<interface>View|Transition</interface>).</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForProperty objectName="TransitionSettings_UI" propertyName="visible" value="true"/>
+ <waitForEvent receiverName="TransitionSettings_UI" eventName="Show"/>
+ </waitForComposed>
+ <nextStep id="select slide transition after showing dock"/>
+ </reaction>
+ </step>
+ <step id="select slide transition after showing dock">
+ <text><para>Now, click with the left mouse button on the yellow rectangle to see the transition properties. Note that if you click in the upper part or in the lower part of the yellow rectangle you may select the clips instead; if that happens, just try again to select the yellow rectangle.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForEvent receiverName="transitionList" eventName="EnabledChange"/>
+ <waitForProperty objectName="transitionList" propertyName="enabled" value="true"/>
+ </waitForComposed>
+ <nextStep id="change slide transition length"/>
+ </reaction>
+ </step>
+ <step id="change slide transition length">
+ <text><para>By default, the second clip slides from the left to the center of the image. You can use the project monitor to see how it looks.</para>
+
+<para>Suppose that you have seen the transition and found that it was too slow. In that case, you have to reduce the transition length for it to become quicker.</para>
+
+<para>The easiest way to do this is just moving the second clip so its overlapping with the first clip is reduced. If you do it, as soon as you release the mouse button (not while you are dragging the clip), you will see how the transition is automatically resized to fit with the new position of the clips. You can check again the project monitor after moving the clip to see how it looks now.</para>
+
+<para>Once you are done changing the transition length we will see how to make changes in the transition itself.</para></text>
+ <reaction triggerType="OptionSelected" responseType="NextStep">
+ <option name="Continue"/>
+ <nextStep id="edit slide transition start"/>
+ </reaction>
+ </step>
+ <step id="edit slide transition start">
+ <text><para>Instead of sliding from left to center we will change the transition to slide from bottom to center.</para>
+
+<para>The start position of the slide is defined by the button toggled in the <link url="widget:Wipeval_UI/groupBox">start parameters</link> of the <emphasis>slide transition</emphasis>. So, to start from the bottom, just toggle the <link url="widget:start_down">bottom button</link>.</para>
+
+<para>If you check the project monitor after toggling the bottom button you will see how the transition has changed, sliding as expected from the bottom instead of from the left.</para>
+
+<para>And that is all. We have seen how to add a <emphasis>slide</emphasis> transition between two clips and how to make some basic changes on that transition.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForStepActivation/>
+ <waitForProperty objectName="transitionList" propertyName="enabled" value="false"/>
+ </waitForComposed>
+ <nextStep id="edit slide transition start when transition not selected"/>
+ </reaction>
+ </step>
+ <step id="edit slide transition start when transition not selected">
+ <text><para>Instead of sliding from left to center we will change the transition to slide from bottom to center.</para>
+
+<para>First you have to select the transition again, as it was deselected when moving the clip.</para></text>
+ <reaction triggerType="ConditionMet" responseType="NextStep">
+ <waitForComposed compositionType="And">
+ <waitForEvent receiverName="transitionList" eventName="EnabledChange"/>
+ <waitForProperty objectName="transitionList" propertyName="enabled" value="true"/>
+ </waitForComposed>
+ <nextStep id="edit slide transition start after selecting the transition"/>
+ </reaction>
+ </step>
+ <step id="edit slide transition start after selecting the transition">
+ <text><para>The start position of the slide is defined by the button toggled in the <link url="widget:Wipeval_UI/groupBox">start parameters</link> of the <emphasis>slide transition</emphasis>. So, to start from the bottom, just toggle the <link url="widget:start_down">bottom button</link>.</para>
+
+<para>If you check the project monitor after toggling the bottom button you will see how the transition has changed, sliding as expected from the bottom instead of from the left.</para>
+
+<para>And that is all. We have seen how to add a <emphasis>slide</emphasis> transition between two clips and how to make some basic changes on that transition.</para></text>
+ </step>
+</tutorial>
Added: trunk/web-src/data/files/examples/kdenlive.patch
===================================================================
--- trunk/web-src/data/files/examples/kdenlive.patch (rev 0)
+++ trunk/web-src/data/files/examples/kdenlive.patch 2012-08-30 14:34:37 UTC (rev 383)
@@ -0,0 +1,415 @@
+diff --git a/Messages.sh b/Messages.sh
+index f69bd55..44a01a4 100755
+--- a/Messages.sh
++++ b/Messages.sh
+@@ -5,5 +5,5 @@ kdenlive_subdirs="plugins renderer src src/widgets"
+ $EXTRACTRC --tag=name --tag=description --tag=label --tag=comment --tag=paramlistdisplay effects/*.xml data/kdenliveeffectscategory.rc >> rc.cpp
+ $EXTRACTRC `find $kdenlive_subdirs -name \*.rc -a ! -name encodingprofiles.rc -o -name \*.ui` >> rc.cpp
+
+-$XGETTEXT `find $kdenlive_subdirs -name \*.cpp -o -name \*.h` *.cpp -o $podir/kdenlive.pot
++$XGETTEXT `find $kdenlive_subdirs -name \*.cpp -o -name \*.h` `find data -name \*.js` *.cpp -o $podir/kdenlive.pot
+ rm -f rc.cpp
+diff --git a/data/CMakeLists.txt b/data/CMakeLists.txt
+index b593105..47e0c65 100644
+--- a/data/CMakeLists.txt
++++ b/data/CMakeLists.txt
+@@ -2,3 +2,5 @@ install(FILES banner.png timeline_nothumbs.png timeline_athumbs.png timeline_vth
+ install( FILES kdenliveeffectscategory.rc DESTINATION ${CONFIG_INSTALL_DIR} )
+ install (FILES kdenlive.xpm DESTINATION share/pixmaps)
+ install (FILES kdenlive.menu DESTINATION share/menu RENAME kdenlive)
++
++install(FILES simpleSlideTransitionBetweenTwoClips.js DESTINATION ${DATA_INSTALL_DIR}/kdenlive/tutorials)
+diff --git a/data/simpleSlideTransitionBetweenTwoClips.js b/data/simpleSlideTransitionBetweenTwoClips.js
+new file mode 100644
+index 0000000..375f877
+--- /dev/null
++++ b/data/simpleSlideTransitionBetweenTwoClips.js
+@@ -0,0 +1,310 @@
++/*********************************************************************************************************************************************
++ * Copyright (C) 2012 by Daniel Calviño Sánchez <dan...@gm...> *
++ * *
++ * This tutorial is licensed under the Creative Commons Attribution-ShareAlike License (http://creativecommons.org/licenses/by-sa/3.0/). *
++ *********************************************************************************************************************************************/
++
++t = Kross.module("kdetranslation");
++
++tutorial.tutorialInformationAsObject().setName(t.i18n("Simple slide transition between two clips"));
++tutorial.tutorialInformationAsObject().setDescription(t.i18n("Basic usage of \"slide\" transition."));
++
++//Step start
++startStep = ktutorial.newStep("start");
++startStep.setText(t.i18nc("@info", "<para>In this tutorial you will learn how to add a <emphasis>slide</emphasis> transition between two clips and how to do some basic changes in the transition.</para>\n\n<para>For this tutorial you will need a project with at least two video tracks in the <link url=\"widget:TimeLine_UI\">timeline</link>, and you will need too two clips.</para>\n\n<para>Do you want to use your own clips, or do you want to add two example clips just for this tutorial?</para>"));
++
++function startStepSetup(step) {
++ iWillUseMyOwnClipsOption = ktutorial.newOption(t.i18nc("@action Tutorial option", "I will use my own clips"));
++ step.addOption(iWillUseMyOwnClipsOption, "add clips to timeline");
++
++ letSAddTheExampleClipsOption = ktutorial.newOption(t.i18nc("@action Tutorial option", "Let's add the example clips"));
++ step.addOption(letSAddTheExampleClipsOption, "add the first color clip");
++}
++connect(startStep, "setup(QObject*)",
++ this, "startStepSetup(QObject*)");
++
++tutorial.addStep(startStep);
++
++//Step add the first color clip
++addTheFirstColorClipStep = ktutorial.newStep("add the first color clip");
++addTheFirstColorClipStep.setText(t.i18nc("@info", "<para>First, we will add a new color clip.</para>\n\n<para>To do this there are several options:\n<list>\n<item>In the menu bar, you can select <interface>Project|Add color clip</interface>.</item>\n\n<item>In the <link url=\"widget:project_tree\">project tree</link>, you can click with the right mouse button on the clip list and then select <interface>Add color clip</interface>.</item>\n\n<item>In the project tree, you can click with the left mouse button on the arrow near to the <interface>Add clip</interface> button (its icon is a film with a <emphasis>+</emphasis> sign), and then select <interface>Add color clip</interface>.</item>\n</list>\n</para>"));
++
++function addTheFirstColorClipStepSetup(step) {
++ waitForColorClip_UIToBeShown = ktutorial.newWaitFor("WaitForWindow");
++ waitForColorClip_UIToBeShown.setWindowObjectName("ColorClip_UI");
++ step.addWaitFor(waitForColorClip_UIToBeShown, "set name for first color clip");
++}
++connect(addTheFirstColorClipStep, "setup(QObject*)",
++ this, "addTheFirstColorClipStepSetup(QObject*)");
++
++tutorial.addStep(addTheFirstColorClipStep);
++
++//Step set name for first color clip
++setNameForFirstColorClipStep = ktutorial.newStep("set name for first color clip");
++setNameForFirstColorClipStep.setText(t.i18nc("@info", "<para>In the dialog that has just been opened, change the <link url=\"widget:clip_name\">clip name</link> to <emphasis>First clip</emphasis>.</para>"));
++
++function setNameForFirstColorClipStepSetup(step) {
++ waitForTextInClip_name = ktutorial.newWaitFor("WaitForProperty");
++ waitForTextInClip_name.setProperty(ktutorial.findObject("clip_name"), "text", t.i18n("First clip"));
++ step.addWaitFor(waitForTextInClip_name, "set color for first color clip");
++}
++connect(setNameForFirstColorClipStep, "setup(QObject*)",
++ this, "setNameForFirstColorClipStepSetup(QObject*)");
++
++tutorial.addStep(setNameForFirstColorClipStep);
++
++//Step set color for first color clip
++setColorForFirstColorClipStep = ktutorial.newStep("set color for first color clip");
++setColorForFirstColorClipStep.setText(t.i18nc("@info", "<para>Change the <link url=\"widget:clip_color\">color</link> to black.</para>"));
++
++function setColorForFirstColorClipStepSetup(step) {
++ waitForStepActivation = ktutorial.newWaitFor("WaitForStepActivation");
++ waitForStepActivation.setStep(tutorial, step);
++
++ waitForColorInClip_color = ktutorial.newWaitFor("WaitForProperty");
++ waitForColorInClip_color.setProperty(ktutorial.findObject("clip_color"), "color", "#000000");
++
++ waitForAnd = ktutorial.newWaitFor("WaitForAnd");
++ waitForAnd.add(waitForStepActivation);
++ waitForAnd.add(waitForColorInClip_color);
++ step.addWaitFor(waitForAnd, "set duration for first color clip");
++
++ waitForColorInClip_color2 = ktutorial.newWaitFor("WaitForProperty");
++ waitForColorInClip_color2.setProperty(ktutorial.findObject("clip_color"), "color", "#000000");
++ step.addWaitFor(waitForColorInClip_color2, "set duration for first color clip");
++}
++connect(setColorForFirstColorClipStep, "setup(QObject*)",
++ this, "setColorForFirstColorClipStepSetup(QObject*)");
++
++tutorial.addStep(setColorForFirstColorClipStep);
++
++//Step set duration for first color clip
++setDurationForFirstColorClipStep = ktutorial.newStep("set duration for first color clip");
++setDurationForFirstColorClipStep.setText(t.i18nc("@info/plain", "Set the clip duration to something around 4 or 5 seconds and then accept the dialog."));
++
++function setDurationForFirstColorClipStepSetup(step) {
++ waitForAcceptedByColorClip_UI = ktutorial.newWaitFor("WaitForSignal");
++ waitForAcceptedByColorClip_UI.setSignal(ktutorial.findObject("ColorClip_UI"), "accepted()");
++ step.addWaitFor(waitForAcceptedByColorClip_UI, "add the second color clip");
++}
++connect(setDurationForFirstColorClipStep, "setup(QObject*)",
++ this, "setDurationForFirstColorClipStepSetup(QObject*)");
++
++tutorial.addStep(setDurationForFirstColorClipStep);
++
++//Step add the second color clip
++addTheSecondColorClipStep = ktutorial.newStep("add the second color clip");
++addTheSecondColorClipStep.setText(t.i18nc("@info", "<para>Now add another new color clip.</para>"));
++
++function addTheSecondColorClipStepSetup(step) {
++ waitForColorClip_UIToBeShown = ktutorial.newWaitFor("WaitForWindow");
++ waitForColorClip_UIToBeShown.setWindowObjectName("ColorClip_UI");
++ step.addWaitFor(waitForColorClip_UIToBeShown, "set name for second color clip");
++}
++connect(addTheSecondColorClipStep, "setup(QObject*)",
++ this, "addTheSecondColorClipStepSetup(QObject*)");
++
++tutorial.addStep(addTheSecondColorClipStep);
++
++//Step set name for second color clip
++setNameForSecondColorClipStep = ktutorial.newStep("set name for second color clip");
++setNameForSecondColorClipStep.setText(t.i18nc("@info", "<para>Change the <link url=\"widget:clip_name\">clip name</link> to <emphasis>Second clip</emphasis>.</para>"));
++
++function setNameForSecondColorClipStepSetup(step) {
++ waitForTextInClip_name = ktutorial.newWaitFor("WaitForProperty");
++ waitForTextInClip_name.setProperty(ktutorial.findObject("clip_name"), "text", t.i18n("Second clip"));
++ step.addWaitFor(waitForTextInClip_name, "set color for second color clip");
++}
++connect(setNameForSecondColorClipStep, "setup(QObject*)",
++ this, "setNameForSecondColorClipStepSetup(QObject*)");
++
++tutorial.addStep(setNameForSecondColorClipStep);
++
++//Step set color for second color clip
++setColorForSecondColorClipStep = ktutorial.newStep("set color for second color clip");
++setColorForSecondColorClipStep.setText(t.i18nc("@info", "<para>Change the <link url=\"widget:clip_color\">color</link> to white.</para>"));
++
++function setColorForSecondColorClipStepSetup(step) {
++ waitForStepActivation = ktutorial.newWaitFor("WaitForStepActivation");
++ waitForStepActivation.setStep(tutorial, step);
++
++ waitForColorInClip_color = ktutorial.newWaitFor("WaitForProperty");
++ waitForColorInClip_color.setProperty(ktutorial.findObject("clip_color"), "color", "#FFFFFF");
++
++ waitForAnd = ktutorial.newWaitFor("WaitForAnd");
++ waitForAnd.add(waitForStepActivation);
++ waitForAnd.add(waitForColorInClip_color);
++ step.addWaitFor(waitForAnd, "set duration for second color clip");
++
++ waitForColorInClip_color2 = ktutorial.newWaitFor("WaitForProperty");
++ waitForColorInClip_color2.setProperty(ktutorial.findObject("clip_color"), "color", "#FFFFFF");
++ step.addWaitFor(waitForColorInClip_color2, "set duration for second color clip");
++}
++connect(setColorForSecondColorClipStep, "setup(QObject*)",
++ this, "setColorForSecondColorClipStepSetup(QObject*)");
++
++tutorial.addStep(setColorForSecondColorClipStep);
++
++//Step set duration for second color clip
++setDurationForSecondColorClipStep = ktutorial.newStep("set duration for second color clip");
++setDurationForSecondColorClipStep.setText(t.i18nc("@info/plain", "Set the clip duration to something around 4 or 5 seconds and then accept the dialog."));
++
++function setDurationForSecondColorClipStepSetup(step) {
++ waitForAcceptedByColorClip_UI = ktutorial.newWaitFor("WaitForSignal");
++ waitForAcceptedByColorClip_UI.setSignal(ktutorial.findObject("ColorClip_UI"), "accepted()");
++ step.addWaitFor(waitForAcceptedByColorClip_UI, "add clips to timeline");
++}
++connect(setDurationForSecondColorClipStep, "setup(QObject*)",
++ this, "setDurationForSecondColorClipStepSetup(QObject*)");
++
++tutorial.addStep(setDurationForSecondColorClipStep);
++
++//Step add clips to timeline
++addClipsToTimelineStep = ktutorial.newStep("add clips to timeline");
++addClipsToTimelineStep.setText(t.i18nc("@info", "<para>Add the first clip to a video track in the <link url=\"widget:tracks_frame\">timeline</link>. The track must have at least another video track below it.</para>\n\n<para>Then add the second clip to the track below the track of the first clip. Make sure that the two clips overlap by one or two seconds.</para>\n\n<para>Now it is time to add the <emphasis>slide</emphasis> transition. Look at the first clip in the timeline. One of its lower corners overlaps the second clip. Put the cursor on that corner, and an arrow will appear on it. Then, click with the right button of the mouse and, in the menu that pops up, select <interface>Add transition|Slide</interface>.</para>"));
++
++function addClipsToTimelineStepSetup(step) {
++ waitForActivatedByTransition_slide = ktutorial.newWaitFor("WaitForSignal");
++ waitForActivatedByTransition_slide.setSignal(ktutorial.findObject("transition_slide"), "activated()");
++ step.addWaitFor(waitForActivatedByTransition_slide, "select slide transition");
++}
++connect(addClipsToTimelineStep, "setup(QObject*)",
++ this, "addClipsToTimelineStepSetup(QObject*)");
++
++tutorial.addStep(addClipsToTimelineStep);
++
++//Step select slide transition
++selectSlideTransitionStep = ktutorial.newStep("select slide transition");
++selectSlideTransitionStep.setText(t.i18nc("@info", "<para>A <emphasis>slide</emphasis> transition has been added between the first and the second clip. You can see it by the yellow rectangle placed between the clips, in the area they overlap.</para>\n\n<para>Click with the left mouse button on that yellow rectangle to see the transition properties. Note that if you click in the upper part or in the lower part of the yellow rectangle you may select the clips instead; if that happens, just try again to select the yellow rectangle.</para>"));
++
++function selectSlideTransitionStepSetup(step) {
++ waitForStepActivation = ktutorial.newWaitFor("WaitForStepActivation");
++ waitForStepActivation.setStep(tutorial, step);
++
++ waitForVisibleInTransition = ktutorial.newWaitFor("WaitForProperty");
++ waitFo...
[truncated message content] |
