Este documento describe cómo crear una publicación interactiva en Neobook con varias páginas y efectos. Incluye instrucciones para agregar música, imágenes y videos, y crear una lista desplegable de navegación entre páginas sobre actores. El documento explica paso a paso cómo configurar los diferentes elementos y efectos, como hacer que los objetos aparezcan secuencialmente y detener la música al cambiar de página.

1. Herramientas Interactivas II
1
Antes de hincarle el diente a la segunda práctica es conveniente que hayas visto cómo funciona
la publicación ya terminada. De esta manera serás más consciente de lo que estás y por qué
lo estás haciendo. Además, todas aquellas operaciones que ya hemos realizado en la Práctica 1
no se vuelven a explicar: sólo se hace referencia a ellas.
Primero creamos una nueva publicación de tamaño 640x480.
Vista de la página maestra
Como en todas las páginas de la publicación hay un marco o
borde, vamos a dibujar en página maestra un rectángulo
hueco con el borde negro y la línea un poco más ancha de lo
normal.
Vista de la portada
Cuando abres la práctica 2 son muchas las
cosas que ocurren automáticamente:
primero hay un efecto que va mostrando
poco a poco la página, luego van
apareciendo las fotos secuencialmente al
mismo tiempo que suena una música de
fondo. Vamos a ver paso a paso cómo
se consiguen todos estos efectos con
Neobook.
Paso 1: Efecto visual de entrada música de fondo
Lo primero que vamos a hacer es que cuando ejecutemos la publicación aparezca ese efecto
visual mostrando la portada y que a la vez que van apareciendo las imágenes, tengamos una
música de fondo.
Para ello tenemos que ir al botón de propiedades de página.
Laboratorio 3: Neobook

2. Herramientas Interactivas II
2
Nos saldrá un cuadro de diálogo como este:
El efecto de transición ya lo hemos
configurado. Vamos ahora con la
música de fondo. Le vamos a
decir a Neobook que cuando se abra
la portada suene un archivo de
sonido. Para ello pulsamos el apartado
de acciones. Después pulsamos sobre
seleccionar acción y multimedia
Buscamos el archivo de sonido (mid o
wav, en nuestro caso se llama:
tombraiderlastrevelation.mid) El
cuadro de diálogo que nos aparece
para insertar un archivo de sonido es el
que sigue:
Desde aquí puedes
cambiar también el
nombre de la página:
llámala portada.
Una vista previa de
cómo tenemos la página
Estos botones son los
que determinan y
configuran los efectos de
transición entre páginas.
En la práctica 2 ésta es la
configuración.
Puede copiar la configuración
de esta página a las demás
que tengas hechas. De
momento esto no lo tocamos.

3. Herramientas Interactivas II
3
Una vez puesta la música y el efecto de transición de página vamos a ver cómo queda todo junto.
Para ello pulsa F8 o haz “clic” en el botón de ejecutar la publicación: .
Paso 2: Insertar las imágenes y hacer que aparezcan cuando se abra la página
Insertamos las imágenes de la portada. (Si no lo recuerdas cómo se hacía mira la práctica 1, Los archivos
que son fotos de actores los tienes en el CD en practica2/imágenes y todo lo relativo a titulares y botones
en práctica2/botones)
Además de las imágenes, tenemos un botón (entrar) que realiza la función de ir a la página siguiente.
Fíjate en el aspecto del botón: cuando pasamos el ratón por encima cambia el color. Vamos a
configurar el aspecto del botón. (Para insertar el botón y decirle que vaya a la página siguiente
mira la práctica1)
Primero señalamos en botón creado. Nos situamos encima y damos al botón derecho del ratón.
Nos saldrá este cuadro de diálogo y lo dejamos tal y como está en la imagen.

4. Herramientas Interactivas II
4
Si pulsamos sobre apariencia tendremos este otro cuadro de diálogo:
Elegimos usar imágenes individuales de tal manera que sin presionar elegimos la imagen que
aparecerá en el botón si nadie lo toca y en realzado lo que aparecerá si pasamos el ratón por encima del
botón. Si hubiéramos seleccionado otra imagen en presionado, ésta aparecería cuando apretáramos el
botón.
La configuración del estilo del botón de la práctica 2 es esta. Toquetea los tres parámetros y observa
cómo cambia el aspecto de tu botón.
El aspecto final de la página de portada es: Ahora
debemos realizar el efecto óptico para que los
elementos que hay en la página primero no se
vean y después vayan apareciendo
secuencialmente.
Cambiemos las imágenes y el botón en
invisibles.
Para trabajar con los objetos (así es como llama
Neobook a cada elemento insertado en una
página) vamos a activar el panel de lista de
objetos.

5. Herramientas Interactivas II
5
Desde el menú superior vamos a opciones y activamos mostrar lista de objetos. Desde
este panel de lista de objetos se nos muestran todos los elementos que contiene la página sobre la
que estamos trabajando.
En esta imagen he señalado desde el panel de lista de objetos el cuadro1 que resulta ser la
imagen que lleva el titulo de la portada (actores de doblaje). Si entramos en propiedades de
objeto podemos cambiarle el nombre para luego identificar este elemento cuando no lo veamos.
Una vez cambiado el nombre por titular lo hacemos invisible.

6. Herramientas Interactivas II
6
La misma operación hacemos con los demás objetos: propiedades del objeto /cambiamos el nombre y lo
ocultamos el aspecto de nuestra portada sería al final una página en blanco.
Lo siguiente sería decirle al programa que cuando alguien ejecute la publicación todos los
elementos ocultos de la portada vayan apareciendo secuencialmente. Para ello vamos a las
propiedades de la página.
y al apartado acciones.
Fíjate que la primera
acción que realizará la
página cuando se abra
es poner la música de
fondo tal como le
dijimos en pasos
anteriores. Debajo de
esta acción vamos a
establecer que
aparezcan
secuencialmente objetos
que ahora están ocultos.

7. Herramientas Interactivas II
7
En seleccionar acción vamos
al apartado de objetos y
luego mostrar objeto (show
object).
En este cuadro de diálogo vamos eligiendo los objetos que van a ir apareciendo y les podemos
añadir un efecto visual cuando aparezcan. Experimenta con los parámetros de configuración.
Esta operación la repetimos con cada uno de los objetos que hay en la página de la portada.
Una vez que hayas terminado ejecuta la publicación (F8) para ver cómo queda la portada de
la publicación.

8. Herramientas Interactivas II
8
Vista de la página portada2
Paso 1: Crear nuevas páginas
Antes de hacer un sistema de navegación, es aconsejable crear (aunque sean páginas en
blanco) las páginas a las que harán referencia los sistemas de navegación. En nuestro caso
debemos crear cinco páginas: una para cada actor.
Primero creamos la portada2 (que es en la que vamos a trabajar en este apartado). Recuerda:
para crear una nueva página.
Luego le cambias el nombre a Portada2 (fíjate en la práctica1 ). Sigue creando páginas en
blanco y llámalas: banderas, arnold, pitt, brendan, carrey.
Paso 2: Crear la lista desplegable
Una vez que tenemos las páginas, vamos a crear un
sistema de navegación con una lista desplegable. Para ello
echamos mano del cuadro de herramientas y
pulsamos sobre el botón de lista desplegable.
Este es un
simple cuadro de
texto
Una imagen
insertada.
Un botón de
salida de la
publicación.
Una lista desplegable que
dependiendo del actor que se
seleccione nos lleva a la página
deseada. No es ni más ni menos
que un método de navegación un
poco más sofisticado que el mero
botón que nos lleva a una página.
En este caso si lo hubiéramos hecho
por botones, tendríamos que haber
creado uno por actor.
-

9. Herramientas Interactivas II
9
Dibujamos el tamaño de la lista desplegable y la configuramos.
Vamos ahora a programar las acciones de la lista desplegable. Lo primero es tener bien claro
lo que queremos que haga la lista: queremos que cuando alguien pulse sobre ella nos muestre los
nombres de los cinco actores y que si elegimos uno, nos lleve directamente a su página. Esto es lo
más trabajoso y complicado de Neobook: el conseguir unas serie de acciones que se realicen
mediante unas líneas de programación (que a partir de ahora llamaremos script) y que las debemos
pensar y crear nosotros mismos.
Para empezar a programar un script podríamos empezar por escribir o pensar qué es lo que queremos
que haga Neobook cuando alguien elija un actor de la lista desplegable: a este razonamiento se
le llama algoritmo. El razonamiento para que la lista desplegable haga lo que queremos sería el
siguiente:
Aquí escribimos los elementos que
queremos que aparezcan en nuestra
lista. Los podemos ordenar o no
alfabéticamente
Dependiendo del elemento (del actor) que elijamos en la
lista desplegable la variable [listadesplegable1] tendrá un
valor de terminado. De esta manera luego podremos
programar un guión que diga “si el actor escogido es
Banderas, llévame a la página de Banderas”. El valor que
almacenará Neobook dependiendo del actor que hayamos
escogido podrá ser el número de orden en el que hemos
escrito los actores o el texto que hay escrito (el nombre del
actor). En nuestro caso hemos seleccionado que la
variable [listadesplegable1] tome el valor del número de
orden en el que escribimos los actores en la lista
desplegable.

10. Herramientas Interactivas II
10
La lista desplegable va a guardar en una variable [Listadesplegable1] la elección del actor. De
tal manera si la variable [listadeplegable1] es igual al elemento que primero va en la
lista (Banderas) entonces vete a la página banderas.
Si la variable [listadeplegable1] es igual al elemento número 2 (arnold) entonces vete a la
página arnold. Si así sucesivamente con todos los elementos de la lista.
Vamos, ahora sí, a escribir el script en Neobook.
Vamos a las acciones de la lista desplegable y en seleccionar acción escogemos control y dentro de control
condicional y luego si(if).
Nos encontraremos con un cuadro de
diálogo que lo configuraremos como
está en la imagen.
Desde aquí establecemos la prima
parte de la condición: si la variable
[listadesplegable1] es igual a 1 (es
decir al primer actor que hay en la lista
desplegable) .........
Pulsamos aceptar y ahora seguimos con
la segunda parte de la condición.
.

11. Herramientas Interactivas II
11
El script completo de la lista desplegable sería:
If "[listadesplegable1]" "=" "1"
GotoPage "banderas"
EndIf
If "[listadesplegable1]" "=" "2"
GotoPage "arnold"
EndIf
If "[listadesplegable1]" "=" "3"
GotoPage "brad"
EndIf
If "[listadesplegable1]" "=" "4"
GotoPage "brendan"
EndIf
If "[listadesplegable1]" "=" "5"
GotoPage "carrey"
EndIf
Guarda tu trabajo, ejecuta (F8) y mira a ver si funciona tu lista desplegable.
Situamos el cursor aquí y vamos seleccionar
acción/navegación/ir a la pagina (gotopage). Escogemos
ahora la página a la que queremos que vaya el
programa (banderas)
Si la variable [listadesplegable1] es igual a 1...
Vete a la página “banderas”
Y si no .....
Aquí insertaríamos una acción que haría el programa si
alguien no pulsara la opción de Antonio Banderas.
A nosotros en esta práctica no va a haber un “y si no”
en este script: sólo queremos que si alguien pulsa
sobre Banderas le lleve a la página de Banderas y si
no nada de nada. Por eso borramos el else del script

12. Herramientas Interactivas II
12
A todo esto, la música de fondo sigue sonando. nos interesa que cuando alguien seleccione un
actor, automáticamente se pare la música. Para ello vamos a ir a las propiedades de
página
Y le decimos a Neobook que pare cualquier archivo multimedia que se esté ejecutando
cuando salgamos de la página.
Para conseguir ese stopmedia vamos
a seleccionar
acción/multimedia/detener
difusión(stop-media)

13. Herramientas Interactivas II
13
Vista de la página de un actor
Si has echado un vistazo a la publicación de ejemplo habrás visto lo que hacen cada uno de los
botones que aparecen. Vamos a ir paso a paso para configurarlos correctamente.
Paso 1 Insertar todos los objetos de la parte derecha
El botón biografía oculta cualquier objeto que haya en la parte derecha de la pantalla y luego
muestra un archivo de texto con la biografía de Antonio Banderas. Insertamos el archivo de texto
desde el cuadro de herramientas (recuerda la práctica1). El archivo de texto banderas lo tienes
en la carpeta textos.
Esto es un gráfico dentro de la
carpeta botones.
Esto es un gráfico dentro de la
carpeta imágenes.
Los gráficos de los botones
los tienes dentro de la carpeta
botones

14. Herramientas Interactivas II
14
Una vez que lo hayas colocado más o menos como en la imagen anterior, oculta el archivo de
texto.
El botón video oculta cualquier objeto que haya en la parte
derecha de la pantalla y luego muestra el reproductor
multimedia con un vídeo listo para ejecutarse.
Para insertar el reproductor multimedia echamos mano
del cuadro de herramientas y pulsamos aquí.
Dibujamos un rectángulo dentro del cual aparecerá el
vídeo (en nuestro caso) que seleccionemos. Después...

15. Herramientas Interactivas II
15
Finalmente le damos a abrir para insertarlo dentro de nuestra página. Después lo ocultamos.
Si luego queremos configurar nuestro de vídeo, primero lo señalamos y luego pulsamos el
botón derecho del ratón.
El botón de actor de doblaje primero oculta todos los objetos que haya en la parte derecha de la
pantalla y luego muestra ....
Imagen dentro de la
carpeta botones.
Imagen dentro de la
carpeta imágenes.
Archivo de texto dentro
de la carpeta textos
Los botones de reproducir y
parar sonido los explicamos
en la siguiente página

16. Herramientas Interactivas II
16
Botón reemplazar sonido: Neobook soporta diferentes tipos de archivos de sonido entre los que se
encuentra el MP3. El archivo de sonido del doblador de Banderas (Salvador Aldeguer) se encuentra en este
formato. Para configurar la acción del botón...
Luego buscaremos el archivo en nuestro disco ALDEGUER_SALVADOR.mp3 que está dentro de
la carpeta sonidos. Seguidamente ocultamos el botón.
Botón parar sonido seguimos los pasos anteriores sólo que escogeremos la acción mp3stop.
Después lo ocultamos.

17. Herramientas Interactivas II
17
Ya hemos insertado todos los elementos de la parte derecha de la página. Ahora tenemos que
configurar los botones biografía , video y actor de doblaje
Paso 2 Configuración del botón biografía
Paso 3: Configuración del botón video
Estas acciones ocultan todos los
elementos que haya en la parte
derecha de la pantalla
Nota
Ten en cuenta que el nombre de los
objetos puede variar y no coincidir
con los de la imagen
Por último, esta acción enseña el
archivo de texto de la biografía.
Estas acciones se encuentran en seleccionar
acción/objetos/mostrar, ocultar

18. Herramientas Interactivas II
18
Paso 4: Configuración del botón actor de doblaje
Todas las demás páginas de actores seguirían los mismos pasos anteriores.
Estas acciones ocultan los
objetos de los botones biografía
y vídeo.
Estas acciones muestran todos
los objetos del botón actor de
doblaje