Crear ventanas flotantes con Adobe Digital Publishing Suite (DPS)

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. Cre 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. Crea una capa con el nombre “overlay”. En ella colocaremos los elementos multimedia. Renombra 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. Selecciona la capa “overlay” y dibuja el icono que se comportará como botón de apertura de la ventana flotante. En el panel Capas, renómbralo como “info”.

Paso 3
Paso 3

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

Paso 4
Paso 4

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

Paso 5
Paso 5

6. Selecciona el botón «cierre» creado en el paso anterior y, en el panel Botones, pulsa 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. Agrupa el objeto «ventana» con el «Boton_cierre». Comprueba, en el panel Capas, que ambos objetos pertenecen al mismo grupo. Renombra el grupo como «ventana_info».

Paso 7
Paso 7

8. Arrastra, 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, crea un botón y cambie su nombre a «Boton_info». No le asignes ninguna acción todavía.

Paso 8
Paso 8

9. Selecciona el objeto «Boton_info» y el grupo «ventana_info». En el panel Estados de objeto, crea un nuevo estado.  Asigna el nombre «ventana» al nuevo objeto. Asegúrate que el «Boton_info» sea el primero. Cambia 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. Selecciona, en el panel Estados de objeto, el primer estado. Haz 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 escoge Al soltar en el menú desplegable Evento. Como acción, selecciona ir al estado. En el desplegable objeto, escoge «ventana» y, por último, en el menú Estado, selecciona «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 selecciona el segundo estado, «ventana_info». Ahora haz 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, selecciona ir al estado. En el desplegable objeto, escoge «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. Selecciona la «ventana» en la página, abra el panel Overlay Creator y marca 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 deseas, puedes previsualizar el efecto de ventana flotante que acaba de crear pulsando el botón Vista previa del panel Overlay Creator. O, si lo prefieres, puedes 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.