Added TBO tutorial

diff --git a/data/Makefile.am b/data/Makefile.am
index c6a24e4..b776b20 100644 (file)
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -1,7 +1,7 @@
 SUBDIRS = doodle
 
 tbodir = $(datadir)/tbo
-tbo_DATA = *.png
+tbo_DATA = tutorial.pdf tut.tbo *.png
 
 tbouidir = $(datadir)/tbo/ui
 tboui_DATA = ui/*.xml
@@ -20,4 +20,6 @@ EXTRA_DIST = \
        ui/*.xml \
        icons/*.svg \
        tbo.desktop \
+       tut.tbo \
+       tutorial.pdf \
        tbo.svg

diff --git a/data/tut.tbo b/data/tut.tbo
new file mode 100644 (file)
index 0000000..15ddf31
--- /dev/null
+++ b/data/tut.tbo
@@ -0,0 +1,203 @@
+<tbo width="800" height="450">
+ <page>
+  <frame x="39" y="21" width="718" height="401" border="0" r="1,000000" g="1,000000" b="1,000000">
+   <svgimage x="131" y="-49" width="431" height="431" angle="0,000000" flipv="0" fliph="0" path="tbo/logo/tbo.svg">
+    </svgimage>
+   <text x="161" y="304" width="364" height="105" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Tutorial
+   </text>
+  </frame>
+ </page>
+ <page>
+  <frame x="44" y="24" width="700" height="401" border="1" r="0,577615" g="1,000000" b="0,832288">
+   <svgimage x="529" y="256" width="115" height="112" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio9.svg">
+    </svgimage>
+   <text x="28" y="28" width="608" height="183" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Bienvenido al tutorial de TBO. Te voy a ir explicando cómo utilizar
+este fantabuloso editor de cómics.
+En este editor existen tres cosas básicas que en conjunción
+componen tu cómic.
+
+En todo cómic existe al menos una página, en cada página
+suelen haber viñetas, y en cada viñeta suelen estar los &quot;objetos&quot;,
+que pueden ser dibujos, globos, texto, etc.
+   </text>
+  </frame>
+ </page>
+ <page>
+  <frame x="24" y="23" width="751" height="409" border="1" r="0,392874" g="0,971038" b="1,000000">
+   <svgimage x="58" y="250" width="115" height="112" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio10.svg">
+    </svgimage>
+   <text x="66" y="25" width="653" height="127" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Cuando ejecutas TBO se te abrirá un documento con una página y un
+tamaño determinado. Si quieres otro tamaño puedes pulsar Archivo-&gt;Nuevo,
+y podrás elegir el tamaño del nuevo cómic.
+
+Con los botones de la barra de herramientas puedes añadir páginas, borrar
+páginas y moverte por estas.
+   </text>
+   <text x="246" y="285" width="409" height="79" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Prueba a añadir una página
+y luego a borrarla
+   </text>
+  </frame>
+ </page>
+ <page>
+  <frame x="28" y="20" width="744" height="412" border="1" r="0,354513" g="0,464637" b="1,000000">
+   <svgimage x="19" y="281" width="115" height="112" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio10.svg">
+    </svgimage>
+   <text x="17" y="15" width="708" height="270" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Ahora que ya dominas las páginas vamos a algo más complejo,
+las viñetas.
+Las viñetas solo pueden dibujarse en el modo página, que es el
+estandar. Para dibujar una viñeta tienes el botón de &quot;nueva
+viñeta&quot; (f) que estará activo, seleccionalo y dibuja un marco.
+
+Puedes dibujar todas las viñetas que estimes oportunas para
+formar tu escena.
+Para borrar una viñeta seleccionala y presiona suprimir, o desde
+el menú Editar-&gt;Eliminar.
+   </text>
+  </frame>
+ </page>
+ <page>
+  <frame x="21" y="18" width="757" height="426" border="1" r="0,675212" g="0,433494" b="1,000000">
+   <svgimage x="628" y="315" width="115" height="112" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio9.svg">
+    </svgimage>
+   <text x="16" y="13" width="709" height="326" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Para seleccionar se utiliza la &quot;herramienta de
+selección&quot; (s) una flecha. Una vez seleccionada esta
+herramienta puedes pulsar sobre las viñetas para seleccionarlas.
+
+Cuando una viñeta está seleccionada aparece con un marco
+amarillo punteado, y abajo a la derecha aparece un recuadro.
+Si arrastras ese recuadro, podrás redimensionar la viñeta.
+Si pinchas en la viñeta y la arrastras puedes moverla
+a lo largo de la página.
+
+En el panel de herramientas (derecha) aparecerán diferentes
+opciones donde podrás modificar tu viñeta.
+   </text>
+  </frame>
+ </page>
+ <page>
+  <frame x="20" y="12" width="763" height="427" border="1" r="1,000000" g="0,655818" b="0,908385">
+   <svgimage x="39" y="299" width="115" height="112" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio10.svg">
+    </svgimage>
+   <text x="12" y="11" width="710" height="293" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Ahora que sabes todo acerca de las vieñetas y el modo de edición de
+página vamos a pasar al modo de edición de viñeta.
+
+Para ello haz doble click sobre una de las viñetas dibujadas. Al pasar
+el ratón por encima debe aparece un mensaje.
+
+Al hacer doble click se pasa al modo de edición de viñeta y desaparece
+todo lo demás.
+Ahora verás que se activan las herramientas de &quot;monigote&quot; (d),
+&quot;texto&quot; (t), &quot;globos&quot; (b) e inserción de &quot;imagen externa&quot;.
+
+Para volver al modo página, pulsa escape.
+   </text>
+  </frame>
+ </page>
+ <page>
+  <frame x="42" y="20" width="707" height="408" border="1" r="1,000000" g="0,706081" b="0,702663">
+   <svgimage x="49" y="301" width="115" height="112" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio10.svg">
+    </svgimage>
+   <text x="14" y="13" width="679" height="279" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Para añadir un monigote, pulsa sobre la herramienta, y en el panel
+lateral verás una lista de monigotes disponibles. Para añadirlo a
+tu escena tan solo tienes que arrastrarlo hasta la posición deseada.
+
+La selección de &quot;monigotes&quot; es similar a la selección de viñetas. Puedes
+moverlos, redimensionarlos y borrarlos de igual forma. Además de
+esto, aparecerá un circulo en la parte superior izquierda. Con este
+circulo podrás rotar tus monigotes.
+
+En el menú editar puedes ver las opciones que te ofrece TBO para
+modificar la escena, una vez seleccionado un monigote, junto con
+los atajos de teclado correspondientes.
+   </text>
+   <text x="191" y="311" width="491" height="78" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,637491" b="0,022873">
+Truco: utiliza las teclas &quot;&gt;&quot; y &quot;&lt;&quot; para escalar
+proporcionalmente, mientras tienes un
+objeto seleccionado.
+   </text>
+  </frame>
+ </page>
+ <page>
+  <frame x="28" y="16" width="749" height="414" border="1" r="1,000000" g="0,765240" b="0,387060">
+   <svgimage x="607" y="291" width="115" height="112" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio9.svg">
+    </svgimage>
+   <svgimage x="456" y="301" width="109" height="106" angle="0,000000" flipv="0" fliph="1" path="arcadia/one/arcadio5.svg">
+    </svgimage>
+   <svgimage x="384" y="221" width="105" height="84" angle="0,000000" flipv="0" fliph="1" path="bubble/ellipse/horizontal.svg">
+    </svgimage>
+   <svgimage x="634" y="197" width="105" height="84" angle="0,000000" flipv="0" fliph="0" path="bubble/misc/horizontal.svg">
+    </svgimage>
+   <svgimage x="526" y="205" width="68" height="82" angle="0,000000" flipv="0" fliph="0" path="bubble/ellipse/vertical-shadow2.svg">
+    </svgimage>
+   <text x="18" y="53" width="704" height="78" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Los &quot;globos&quot; son exactamente lo mismo que los monigotes.
+Arrastra el globo deseado a la zona correspondiente y modificalo
+como creas oportuno.
+   </text>
+  </frame>
+ </page>
+ <page>
+  <frame x="31" y="19" width="742" height="415" border="1" r="0,959167" g="1,000000" b="0,548974">
+   <svgimage x="82" y="282" width="97" height="94" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio10.svg">
+    </svgimage>
+   <svgimage x="4" y="288" width="115" height="112" angle="0,000000" flipv="0" fliph="1" path="arcadia/one/arcadio5.svg">
+    </svgimage>
+   <text x="32" y="19" width="682" height="239" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+La herramienta de texto es un poco diferente a las anteriores. Una vez 
+seleccionada, pulsa sobre una zona del dibujo para añadir un objeto de texto.
+Al añadir este objeto, en la parte derecha verás que puedes seleccionar la
+fuente y el color. Además ahí está la caja de texto donde debes poner el
+texto que quieras que aparezca.
+
+Una vez se sale del modo de edición de texto, el texto se comporta como un
+objeto más que se puede modificar de igual forma.
+
+Si quieres editar algún texto, debes coger la herramienta de texto y pinchar
+sobre el texto que quieras cambiar, en la caja de texto debe salir
+el texto actual del objeto en cuestión.
+   </text>
+   <svgimage x="220" y="275" width="115" height="123" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio4.svg">
+    </svgimage>
+  </frame>
+ </page>
+ <page>
+  <frame x="28" y="18" width="764" height="409" border="1" r="0,475486" g="1,000000" b="0,623301">
+   <text x="16" y="14" width="731" height="165" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="0,000000" g="0,000000" b="0,000000">
+Para añadir una imagen externa está la herramienta de &quot;imagen&quot;. Pulsando
+sobre esta herramienta podrás añadir un fichero .png que será como un objeto
+más.
+
+Las imágenes externas se enlazan, así que si se pasa el fichero fuente .tbo
+a otra persona, o si se mueve la imágen, puede que el programa no encuentre
+el png y no salga correctamente.
+   </text>
+   <svgimage x="591" y="312" width="134" height="94" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio2.svg">
+    </svgimage>
+   <svgimage x="447" y="285" width="115" height="112" angle="0,000000" flipv="0" fliph="0" path="arcadia/one/arcadio10.svg">
+    </svgimage>
+  </frame>
+ </page>
+ <page>
+  <frame x="22" y="18" width="767" height="424" border="1" r="0,000000" g="0,359564" b="0,080934">
+   <text x="17" y="13" width="731" height="389" angle="0,000000" flipv="0" fliph="0" font="Sans 12" r="1,000000" g="1,000000" b="1,000000">
+Fin del tutorial
+A partir de aquí tu imaginación es la
+encargada.
+
+Para cualquier duda / sugerencia / parche
+/ agradecimiento, etc, contacta con
+dani@danigm.net o dirígete a
+http://trac.danigm.net/tbo, donde
+econtrarás más información.
+   </text>
+  </frame>
+ </page>
+</tbo>

diff --git a/data/tutorial.pdf b/data/tutorial.pdf
new file mode 100644 (file)
index 0000000..6d75764
Binary files /dev/null and b/data/tutorial.pdf differ

diff --git a/data/ui/tbo-menu-ui.xml b/data/ui/tbo-menu-ui.xml
index 758e8b3..88a7c87 100644 (file)
--- a/data/ui/tbo-menu-ui.xml
+++ b/data/ui/tbo-menu-ui.xml
@@ -21,6 +21,7 @@
        <menuitem name="orderdown" action="OrderDownObj" />
      </menu>
      <menu name="HelpMenu" action="Help">
+         <menuitem name="Tutorial" action="Tutorial" />
          <menuitem name="About" action="About" />
      </menu>
     </menubar>

diff --git a/src/ui-menu.c b/src/ui-menu.c
index 2f6c196..5436f3b 100644 (file)
--- a/src/ui-menu.c
+++ b/src/ui-menu.c
@@ -161,6 +161,16 @@ gboolean close_cb (GtkWidget *widget, gpointer data){
 }
 
 gboolean
+tutorial_cb (GtkWidget *widget, TboWindow *tbo){
+    char *filename = DATA_DIR "/tut.tbo";
+    tbo_comic_open (tbo, filename);
+    tbo_window_set_path (tbo, filename);
+    update_drawing (tbo);
+    tbo_window_update_status (tbo, 0, 0);
+    return FALSE;
+}
+
+gboolean
 about_cb (GtkWidget *widget, TboWindow *tbo){
     const gchar *authors[] = {"danigm <dani@danigm.net>", NULL};
     const gchar *artists[] = {"danigm <dani@danigm.net>",
@@ -272,6 +282,9 @@ static const GtkActionEntry tbo_menu_entries [] = {
       G_CALLBACK ( order_down_cb ) },
 
     /* Help menu */
+    { "Tutorial", NULL, N_("Tutorial"), "",
+      N_("Tutorial"),
+      G_CALLBACK (tutorial_cb) },
 
     { "About", GTK_STOCK_ABOUT, N_("About"), "",
       N_("About"),