Crear ventanas flotantes con Adobe Digital Publishing Suite (DPS)

El panel Overlay Creator permite crear un total de 7 elementos interactivos que añadirán características multimedia a nuestras publicaciones. Aunque en un principio puede parecer un arsenal un tanto escaso, con un poco de imaginación y mucho criterio artístico podemos crear experiencias de usuario realmente inmersivas. En este tutorial aprenderá a añadir una capa de complejidad a lo que en un principio se trata de un simple botón. El resultado final será espectacular y el coste de realización mínimo.

La última versión de Adobe Digital Publishing Suite (1.8 en la fecha de publicación de este artículo) nos ofrece dos grandes avances: por un lado, ahora es posible anidar un overlay en otro; por ejemplo, podemos crear un overlay del tipo “Proyección de diapositivas” formado por una sucesión de vídeos, algo hasta ahora impensable. Por otra, es capaz de convertir una página en formato PDF con las funciones de pellizco y zoom habilitadas.

Sin embargo no existe, al menos de forma directa, la manera de crear un botón que abra una ventana flotante y que ésta, a su vez, muestre un control de cierre. No obstante, con las herramientas de que disponemos y un poco de ingenio será fácil crear este “efecto”. Veamos cómo.

1. Cree la página en su estado “normal”. En nuestro caso, un libro de arte, se trata de un detalle a toda pantalla de una acuarela.

Paso 1
Paso 1

2. Cree una capa con el nombre “overlay”. En ella colocaremos los elementos multimedia. Renombre la capa “Capa 1” como “Contenido” y bloquéela. De este modo el contenido de la página no podrá ser modificado de forma accidental al crear los elementos multimedia. A partir de ahora trabajaremos en la capa “overlay” exclusivamente.

3. Seleccione la capa “overlay” y dibuje el icono que se comportará como botón de apertura de la ventana flotante. En el panel Capas, renómbrelo como “info”.

Paso 3
Paso 3

4. Cree la ventana flotante, y sitúela en la posición definitiva que ocupará en la página. Agrupe todos los elementos que componen la ventana. En el panel Capas, renombre este grupo como “ventana”.

Paso 4
Paso 4

5. Cree un icono que se comportará como botón de cierre de la ventana flotante. En el panel Capas, renómbrelo como “cierre”.

Paso 5
Paso 5

6. Seleccione el botón “cierre” creado en el paso anterior y, en el panel Botones, pulsar el icono Convierta el objeto en un botón. Lo llamaremos “Boton_cierre” y, de momento, no le asignaremos ninguna acción.

Paso 6
Paso 6

7. Agrupe el objeto “ventana” con el “Boton_cierre”. Compruebe, en el panel Capas, que ambos objetos pertenecen al mismo grupo. Renombre el grupo como “ventana_info”.

Paso 7
Paso 7

8. Arrastre, en el panel Capas, el objeto “info” (creado en el paso 3) hasta situarlo por encima del grupo creado en el paso 7. Con el objeto “info” todavía seleccionado, cree un botón y cambie su nombre a “Boton_info”. No le asigne ninguna acción todavía.

Paso 8
Paso 8

9. Seleccione el objeto “Boton_info” y el grupo “ventana_info”. En el panel Estados de objeto, cree un nuevo estado.  Asigne el nombre “ventana” al nuevo objeto. Asegúrese que el “Boton_info” sea el primero. Cambie su nombre a “info”.

Paso 9
Paso 9

10. Ahora ya tenemos un objeto multiestado. El primer estado muestra el botón “info”. El segundo estado muestra la ventana de información flotando el cuadro y, sobre ella, el botón de cierre. Seleccione, en el panel Estados de objeto, el primer estado. Haga doble clic en el botón “info” situado en la página. Una linea punteada gruesa nos indica que éste elemento está seleccionado y que es un botón. En el panel Botones escoja Al soltar en el menú desplegable Evento. Como acción, seleccione ir al estado. En el desplegable objeto, escoja “ventana” y, por último, en el menú Estado, seleccione “ventana_info”. De esta forma, cuando pulsemos el botón, el objeto multiestado cambiará al segundo estado, es decir, mostrará la ventana flotante.

Paso 10
Paso 10

11. En el panel Estados de objeto seleccione el segundo estado, “ventana_info”. Ahora haga doble clic sobre el botón de cierre hasta que muestre una gruesa línea punteada. En el panel Botones escoja Al soltar en el menú desplegable Evento. Como acción, seleccione ir al estado. En el desplegable objeto, escoja “ventana” y, por último, en el menú Estado, seleccione “info”.  De manera que, al pulsar este botón, el objeto multiestado volverá al estado inicial, es decir, ocultará la ventana flotante y mostrará el botón “info”.

Paso 11
Paso 11

12. Seleccione la “ventana” en la página, abra el panel Overlay Creator y marque el botón de verificación Tocar para reproducir/pausa. Desmarque el resto de opciones excepto Fundido cruzado. Esta opción mostrará un interesante efecto de desvanecimiento de 0,5 segundos de duración (más que suficiente).

Paso 12
Paso 12

Y eso es todo. Si lo desea, puede previsualizar el efecto de ventana flotante que acaba de crear pulsando el botón Vista previa del panel Overlay Creator. O, si lo prefiere, puede crear un folio online, añadir el artículo que acaba de crear y comprobar su funcionamiento en la aplicación Content viewer de iPad o Android.

8 Comentarios. Dejar nuevo

  • ¡Estupendo! Mil gracias 🙂

    Responder
  • Hola Javier,

    he estado practicando el ejercicio de las ventanas flotantes, todo OK,
    pero una cosa no, cuando pongo texto (por ejemplo una caja con texto falso) en esa ventana flotante, como la tuya a modo de ejemplo como tú pones JOSÉ BEILLURE, etc.
    No me sale ese texto, pero no en el visor, ya no en IN design, ni siquiera si lo pongo en una capa superior a la llamada Overlay sólo para visualizar.

    Si me salgo del tamaño iPAD y relleno con texto falso, se rellena, sabes a qué se puede deber, esto que me trae loco.

    Salud.

    Responder
  • Hola F. Javier, he realizado tu efecto y me funciona en el visor del escritorio, pero no en el ipad. a que puede ser?

    Gracias.

    Responder
    • F. Javier Gómez Laínez
      13th febrero 2013 4:20 pm

      Comprueba la versión de Adobe Viewer del iPad, y también la versión con la que estás exportando el contenido (prueba con la más alta).

      Responder
  • Hola Javier, muchas gracias por el tutorial.
    Yo necesito que en popup que se abra haya un elemento pam&zoom.
    He seguido el ejercicio al pie de la letra y funciona, pero no el pam&zoom

    Responder
  • Jenny Paredes
    24th abril 2014 2:05 am

    esto lo vi en clase y no lo entendí gracias salvaron mi vida …………. obvio se me hizo más fácil y muy util.

    n_n

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Rellena este campo
Rellena este campo
Por favor, introduce una dirección de correo electrónico válida.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Menú