Cómo ampliar a página una imagen al tocarla en InDesign para DPS

      El objetivo

      Queremos colocar en una imagen que cuando se toca se amplíe a un tamaño mayor del que tiene —a toda página, por ejemplo— y que al tocarse de nuevo vuelva al tamaño anterior.

      El método

      El problema es que en Adobe DPS e InDesign no existe una orden u opción parecida a "ampliar imagen a toda pantalla", por lo que los métodos para conseguirlo son trucos o apaños. Elegir el que más nos convenga depende de nuestras necesidades y limitaciones.

      1. Colocar la imagen en un objeto multiestado (MSO)

        Éste es básicamente el mismo procedimiento que ya hemos visto para pies de foto que se ocultan y muestran al pulsar un botón.

        Su principal diferencia con respecto al segundo método de llamar a un PDF es que, aunque es más complejo de construir, permite mucha más flexibilidad de diseño sin crear una página extra de contenido. Por eso es el método preferente para simular la ampliación de imágenes en un diseño para Adobe DPS.

        Advertencia: Debido a la complejidad del procedimiento, la conversión de los elementos afectados en objeto MSO no se debe hacer hasta que la edición y corrección de los textos se haya terminado.


        Un ejemplo: Una página con cuatro imágenes que se amplian a página

        En el ejemplo que vamos a mostrar —una página con cuatro imágenes y un texto—, cuando el usuario pulsa una de las imágenes, ésta pasa a mostrarse a toda pantalla. Además, añadimos en cada una de las imágenes grandes un icono para cerrarla y volver a la página anterior.

        El gesto asociado al cambio de imágenes será el de pulsar, no el de deslizar, que se reserva para que el usuario pueda seguir pasando de página verticalmente —ir a otra página del mismo artículo— u horizontalmente —ir a otro artículo distinto.

        De forma resumida el procedimiento es: Creamos cinco estados; cuatro son para las imágenes a toda página con sus respectivos botones de salida y el quinto, el principal, es la página en si con los textos y las imágenes en miniatura.

        Cómo construirlo

        Trataremos cada uno de los cinco estados como un grupo de elementos. Lo más sencillo es construir cada grupo en una capa distinta que iremos ocultando, mostrando, bloqueando y desbloqueando según nos convenga.

        Vamos a trabajar para el iPad 2 a 1024 × 768 píxeles. Comenzamos diseñando el estado principal, el de la página en si con los textos y las imágenes en miniatura. La única particularidad es, como hemos dicho, dejarlo todo en la misma capa, a la que podemos llamar "Estado principal".

        Creamos una nueva capa encima a la que llamamos "Estado uno". Allí ponemos una caja de imagen a toda página y posicionamos un icono que luego servirá para cerrar la imagen regresando al estado principal.

        Colocamos y ajustamos la imagen en la caja —la colocación de un pie de foto que aparezca y desaparezca al tocarlo en cada imagen, se explica más abajo.

        Creamos tres nuevas capa encima a las que llamamos "Estado dos", "Estado tres" y "Estado cuatro" respectivamente. En cada una de ellas, copiamos y pegamos en el mismo sitio la caja de imagen y el icono de cierre.

        Reemplazamos y editamos las imagenes adecuadamente. Ya tenemos los cinco estados que van a formar el objeto multiestado (MSO). Seleccionamos los elementos de cada capa y los agrupamos para que formen cinco grupos.

        Añadir la interactividad

        Hecho esto seleccionamos los cinco grupos de elementos y creamos el objeto multiestado (MSO) mediante el menú "Ventana - Interactivo - Estados de objeto - Nuevo estado". Al hacer esto, los cinco pasarán automáticamente a la capa superior de la selección. Le damos un nombre al estado multiobjeto para identificarlo claramente; "Fotos a pagina 01", por ejemplo.

        Ahora, convertiremos algunos elementos en botones que llevan a diversos estados. Al principio, esto puede parecer un poco enrevesado, ya que hay que navegar por el interior de un MSO que a su vez es un conjunto de grupos de elementos y la tendencia natural es intentar seleccionar el elemento pinchando directamente.

        Ese es un error. Nos ayudaremos de cuatro iconos de la barra "Ventana - Herramientas. Si seleccionamos el elemento multiestado y vamos pinchando cada botón disponible podremos ir navegando dentro de esa selección hasta llegar a tener seleccionado sólo el elemento que deseamos convertir en botón para llamar a otro estado.

        Comenzaremos por las miniaturas. Seleccionamos la primera miniatura del "estado principal" —que en principio se llamará algo así como "Estado 1". Si queremos, podemos cambiarle el nombre pulsando sobre él en la paleta.

        Vamos al menú "Ventana - Interactivo - Botones y formularios". Seleccionamos la opción de "Evento" predeterminada "Al liberar o tocar". Pulsamos el símbolo de suma para asociar una nueva acción y elegimos "Ir a estado". Más abajo, elegimos el estado asociado "Estado uno" —es decir, la foto grande correspondiente a esa miniatura.

        Hacemos eso mismo con las otras tres miniaturas. En el caso de las imágenes grandes, navegamos hasta el icono de cierre y en los cuatro casos, el estado al que llamamos es el estado asociado con el "Estado principal.

        Con esto ya habríamos acabado, pero falta un pequeño detalle: Controlar la suavidad y velocidad de transición entre estados. Si vamos al menú de "Ventana - Folio overlays", y aun tenemos seleccionado el conjunto, veremos que está activada la opción "Proyección de diapositivas".

        La única opción que debemos tener activada es "Fundido cruzado" con un valor como el predeterminado de "0,5" segundos. Si lo quitamos, el paso de un estado a otro sería un poco brusco. Si queremos que sea más gradual, basta con aumentar ese valor.

        Hay una segunda opción, que sólo aparece, si no recuerdo mal, a partir de la la versión 23 de Adobe DPS —y que no siempre funciona al 100%—. Es la de "Formato de exportación en artículos PDF". Sí tenemos textos y queremos que los usuarios puedan ampliarlos con los dedos sin que haya una perdida de calidad visual muy evidente, conviene elegir la opción "Vectorial". Si no lo queremos o si hay fondos de color, puede interesarnos elegir "Rasterizado". Esta opción sólo funciona si al incorporar el artículo a la publicación hemos elegido el formato "PDF". Es de esperar que esta opción mejore con el tiempo.

        Cómo añadir un pie de foto interactivo a un MSO complejo

        Cómo apunte final y para quien quiera sacar nota: Con el primer procedimiento hemos creado un estado multiobjeto (MOS) que nos permite llamar y ampliar imágenes. El problema es que queremos añadir pies de foto a esas imágenes grandes y queremos que también sean interactivos, como ya explicamos en otra página.

        El procedimiento que debemos aplicar es el mismo con la diferencia de que ademas crearemos cuatro nuevos estados multiobjeto, uno para cada pie de foto según se explicaba en el mencionado artículo. Una vez acabados, los agrupamos con cada imagen grande y el icono de cierre. Eso es todo.

        Hay que recordar que en principio y a día de hoy, un objeto MSO sólo puede tener eventos que afecten a sus elementos internos y no a elementos externos o de otro MSO, aunque estén anidados.

        La complejidad del conjunto será grande y por eso conviene seguir un orden prusiano al llamar y agrupar a los objetos.


      2. Llamar a la imagen como si fuera un PDF

        Este segundo procedimiento consiste en crear un PDF aparte con la imagen y su pie, y llamarlo desde nuestra aplicación como tal documento PDF. la apertura es a toda pantalla sin elección posible. Puede parecer un apaño chapucero pero que tiene dos ventajas:

        • La primera es que la imagen se abre en una ventana nueva y, por tanto, no se crea una página extra en la publicación. Cuando el usuario termina, aprieta un botón de "Hecho" (Done) y se regresa al mismo punto de la aplicación de donde habíamos partido.

        • La segunda es que Al tratarse de un PDF y no de un objeto multiestado (MSO), podemos usar datos vectoriales que se respetarán. Por ello, el usuario no estará limitado al tamaño y resolución de su iPad. Esto hace que sea un método ideal, por ejemplo, para incluir mapas grande con cierto detalle sin perder calidad en datos como los textos.

        Creamos la imagen en una página independiente —si vamos a seguir este procedimiento de forma habitual es buena idea tener un lote de plantillas de distintos tamaños para cada necesidad—. De hecho, podemos crear el PDF desde el programa que mejor nos convenga —recuerda que Photoshop crea PDFs en los que se respetan los datos vectoriales, por ejemplo.

        Exportamos el PDF —si lo haces desde InDesign, las opciones para PDFs interactivos son un buen punto de partida— y lo guardamos con un nombre sencillo y razonable —"mapazo.pdf" o similares—.

        Comprimimos ese PDF dentro de un archivo llamado "HTMLResources.zip" —debe llamarse así. Si hubiera otros PDFs para la publicación, los incluimos allí. No importa que salgan en otras páginas.

        vamos al menú "Ventana - Folio Builder" y desde el submenú contextual de su esquna superior derecha, llamamos a la opción "Importar recursos HMTL...".

        Seleccionamos el archivo "HTMLResources.zip" que hemos creado antes. Si necesitásemos añadir o alterar contenidos en ese fichero, lo volvemos a crear y a importar todas las veces que haga falta.

        En InDesign, creamos el icono que vayamos a usar como botón para llamar a la imagen grande —una miniatura del mapa, por ejemplo— y, con él seleccionado, vamos al menú "Ventana - Interactivo - Botones y formularios". Creamos uno de "Tipo - Botón". En "Evento", dejamos "al liberar o tocar". Pulsamos en el símbolo + para agregarle una acción —es decir, lo que ocurrirá cuando se toque ese botón. Elegimos" Ir a URL". En la opción "URL" le indicamos el nombre el archivo al que queremos llamar con la forma" "HTMLResources/mapazo.pdf".

        Detalle importante: Actualmente, Adobe DPS sólo reconoce el gesto de pulsar en los botones, no deja deslizar.

      4 comentarios

      Duda

      Hola otra vez Gus,

      Estoy leyendo tu excelente artículo y me acabo de tropezar con esto "ya no se llamará así dentro del MSO porque no es posible dar nombres arbitrarios a los estados de un MSO", lo cual creo que es incorrecto por que sí se puede renombrar tanto un MSO como los distintos estados que lo componen.

      Muchas gracias por tus artículos, Angel.

      Duda, no. Error mío

      Hola, Ángel

      Tienes razón. Es lo que tiene no haber tocado mucho algo e ir a tientas. Es correcto, se pueden cambiar los nombres de un estado una vez creados pulsando sobre dicho nombre. Simplemente —ejem...— cuando lo hice varias veces, pulsé en sitio equivocado. Qué vergüenza. Lo corrijo en el artículo.

      Muchas gracias.

      El artículo me aparece en blanco

      Hola, Gustavo

      Primero, te felicito porque tu sitio esta muy interesante, me he encontrado con muchas cosas que me han servido sobre todo en el tema de DPS.

      Tengo una pregunta porque soy nueva en el uso de estas herramientas. Utilicé la primera opción que has sugerido para ampliar la imagen y me ha resultado muy bien cuando hago la previsualización en Adobe Content Viewer, sin embargo cuando genero el folio y luego el articulo de esta página, tengo problemas porque el articulo me aparece en blanco, lo que no ocurre con otras páginas. Podrías decirme si este error se debe a algún procedimiento que este mal resuelto al generar objetos de estado?

      Muchas gracias

      Depende el punto en el que pase

      Hola

      Es difícil contestar sin ver el archivo en cuestión y no esoy seguro de entenderte en qué punto se atasca el asunto: ¿Lo ves en el ACV de escritorio (supongo que es eso lo que dices)? ¿Lo ves en el ACV del iPad? ... ¿Es con conexión a través de la nube o de cable? ¿Es para iPad? ¿Qué tipo de iPad?

      Si saber eso, tendría que ver el archivo y generarlo yo para ver qué te puede ocurrir

      El tiro al aire, sin saber más... Orientación mal definida, Tamaños mal definidos o visor 'fuera de fecha? (demasiado reciente o demasiado antiguo).

      Saludos

      Añadir nuevo comentario