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

, , ,
Entrada anterior
Curso de creación de libros electrónicos en formato ePub y Mobi (Kindle) con InDesign CS5.5
Entrada siguiente
Media queries: un ePub para dominarlos a todos

Entradas relacionadas

Seminario de creación de publicaciones con EasyCatalog

Video tutorial: creación automatizada de catálogos con EasyCatalog para InDesign

EasyCatalog es un fantástico plugin para Adobe InDesign que permite diseñar y maquetar de forma completamente automatizada el contenido de cualquier conjunto de datos existente. En este tutorial aprenderá los conceptos básicos necesarios para crear su primer catálogo automatizado.

Leer Más

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 un comentario

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

Fill out this field
Fill out this field
Por favor, introduce una dirección de correo válida.

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

Menú