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.
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”.
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”.
5. Cree un icono que se comportará como botón de cierre de la ventana flotante. En el panel Capas, renómbrelo como “cierre”.
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.
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».
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.
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».
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.
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».
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).
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 🙂
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