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.

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”.

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”.

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

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.

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».

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.

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».

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.

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».

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).

¡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 🙂
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.
¿Has agrupado el texto y la imagen antes de hacer el objeto multiestado?
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.
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).
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
Pues para eso tendrás que anidar un overlay dentro de otro. Créeme, no es difícil pero sí que hay que ser metódico en los pasos a seguir. Recuerda que desde hace varias versiones de DPS (ahora van por la v25) se pueden anidar overlays. Puedes mirar un tutorial (en inglés) aquí: http://blogs.adobe.com/jlockman/2012/02/08/nested-overlay-solution-for-dps/
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