Cómo crear un pase de diapositivas sencillo en InDesign para DPS

      El objetivo

      Queremos crear un sencillo pase de diapositivas para una aplicación de iPad con Adobe DPS e InDesign CS6. Lo único que habrá será una serie de fotos en el mismo sitio y con el mismo tamaño que cambia si el usuario lo toca o pasa el dedo por encima y arrastra.

      Los métodos

      1. Carrusel que cambia al deslizar el dedo por encima

        Hay varias maneras de hacer un carrusel e imágenes y cada una de ellas da un resultado distinto. Este primero es el más sencillo y el resultado es el típico pase de imágenes que va cambiando según se desliza el dedo por encima.

        1. Creamos un lote de imágenes del mismo tamaño —es decir: Las cajas que las contienen deben tener el mismo tamaño.

        2. Las colocamos en su sitio alineándolas una encima de otra a la perfección con la herramienta "alinear".

        3. la paleta de estados multiobjeto para un pase de diapositivas en Adobe InDesign CS6.

          Con todas las imágenes seleccionadas, vamos al menú "Ventana - Interactivo - Estados de objeto". Pulsamos "Nuevo estado". Eso crea una pila de objetos.

        4. la paleta de estados multiobjeto para un pase de diapositivas en Adobe InDesign CS6.

          Al ir al menú de "Folio overlays", si aun tenemos seleccionado el conjunto, veremos que está activada la opción "Proyección de diapositivas". Desactivamos todas las opciones salvo la que pone "Barrido para cambiar de imagen".

        Ya está terminado.

        El principal problema de este método se da en el caso de pases de diapositivas a toda página, ya que el gesto de deslizar para pasar de imagen es el mismo que el de pasar de página y la publicación se queda bloqueada al llegar a esa página porque el programa confunde los movimientos de cambio de página con la interactividad del pase —que predominan— y no funciona bien. En el caso de carruseles más pequeños ese conflicto se reduce, obviamente.

      2. Carrusel que cambia al pulsar encima con el dedo

        Es muy parecido al anterior. La diferencia es que en vez de deslizar con el dedo, el usario tiene que pulsar (tap) encima de la imagen para que cambie.

        1. Creamos un lote de imágenes del mismo tamaño —es decir: Las cajas que las contienen deben tener el mismo tamaño.

        2. Las colocamos en su sitio alineándolas una encima de otra a la perfección con la herramienta "alinear".

        3. la paleta de estados multiobjeto para un pase de diapositivas en Adobe InDesign CS6.

          Con todas las imágenes seleccionadas, vamos al menú "Ventana - Interactivo - Estados de objeto". Pulsamos "Nuevo estado". Eso crea una pila de objetos multiestado (MSO). No suele ser imprescindible pero sí muy conveniente asignar un "Nombre de objeto" al conjunto MSO; por ejemplo: "Pase de diapos 1". Eso ayudará a la gestión de elementos interactivos basados en objetos MSO en las páginas donde haya más de uno, ya que permite indicarle al programa en qué objeto concreto queremos que ocurra un cambio determinado.

        4. Al ir al menú de "Folio overlays", si aun tenemos seleccionado el conjunto, veremos que está activada la opción "Proyección de diapositivas". Podemos desactivar todas las opciones ya que no va a funcionar como tal —los estados van a alternar por el botón que crearemos a continuación, no por este pase de diapositivas.

        5. Ahora vamos a crear la zona sensible para colocar el icono que que los usuarios toquen allí. En un pase de diapositivas a toda página, por ejemplo, lo ponemos cerca de una de las esquinas. Para ello, creamos una caja transparente, sin relleno ni trazo, que sea razonablemente grande —es decir, que el usuario no tenga que afinar la puntería para pulsar el pase.

        6. Creamos el icono para indicar que hay un pase de diapositivas y lo colocamos centrándolo sobre la caja transparente, agrupando ambos.

        7. Con el grupo 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 al estado siguiente". Si hubiera más de un objeto multiestado en la página —otro pie similar o un pase de diapositivas—, debemos estar atentos a elegir el nombre de este pie de foto —por eso le pusimos "Pase de diapos 1".

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

        8. Ya está terminado.

      3. Carrusel que corre al deslizar el dedo por encima

        En este caso, hay una tira de imágenes pegadas unas a otras que se desliza en horizontal o vertical cuando se pasa el dedo por encima, de forma similar a un marco deslizante —que, de hecho, es lo que es.

        1. Seleccionamos las imágenes que van a formar parte del carrusel de diapositivas y las ponemos todas en cajas de la misma altura —para un carrusel horizontal— o anchura —para uno vertical—.

          Alineamos esas cajas en horizontal o en vertical para hacer un pase en el sentido de la alineación. Las seleccionamos y agrupamos —si no, no podremos "pegarlas dentro".

        2. Colocamos un marco vacío donde queramos colocar el pase, dándole la altura —para un carrusel horizontal— o anchura —para uno vertical— del grupo que hemos preparado. El mejor resultado se obtiene dándole al marco el mismo tamaño que a las fotos individuales.

        3. Copiamos el grupo en el portapapeles, seleccionamos la caja de destino y con el menú "Edición - Pegar dentro" colocamos dentro el pase de diapos.

        4. Con el contenedor seleccionado, vamos al menú de "Folio overlays" y seleccionamos la opción "Marco deslizable". En "Dirección de desplazamiento", indicamos la que deseamos —horizontal o vertical. No es buena idea usar una de las otras opciones. Ocultar los indicadores de desplazamiento es decisión de cada uno —yo los ocultaría.

          La "Posición inicial de contenido" sirve para decidir dónde tiene que aparecer el inicio del desplazamiento. La opción predeterminada de "Superior izquierda" nos evita tener que colocarla allí a mano.

        5. Ya está terminado.

      Forzar la reproducción automática al cargar la página

      En algunos usos de los dos primeros tipos de pases de diapositivas —los que cambian, no el que corre— puede ser una buena idea que el pase de diapositivas se reproduzca por si mismo al menos una vez cuando se carga la página. De esta forma, el usuario puede ver el efecto del carrusel sin tener que intervenir. Además, eso sirve para indicarle que es un elemento interactivo.

      Crédito: Esta idea la he visto aplicada, por ejemplo, en el número de agosto de 2012 del National Geographic para iPad, donde se explican las fases de un rayo por medio de un carrusel. Éste se reproduce una vez al cargar la página y luego el usuario puede navegar por las fases pulsando botones —imágenes en miniatura de cada fase.

      Con los elementos multiestado (MSO) del pase de diapositivas seleccionado —no el botón—, vamos a la paleta de "Folio overlays". Deseleccionamos todas las opciones excepto la de "Reproducción automática". En reproducir indicamos "1 vez". En "intervalo" ponemos los segundos durante los que debe reproducirse cada imagen. En "retraso" indicamos el tiempo que debe transcurrir entre la carga de la página y el inicio del pase de diapositivas —no suele ser buena idea que comience nada abrirse la página, ya que el ojo necesita un instante para identificar lo que está viendo y el efecto podría perderse se comienza demasiado pronto.

      No necesitamos hacer nada nada más porque, si recuerdas bien, el pase manual de diapositivas en este tipo de carruseles sólo se hace pulsando el botón.

      Este procedimiento no se puede usar con el tercer tipo de pase de diapositivas porque no es un estado multiobjeto sino un marco deslizante.

      No animar todo cuando sólo se quiere un pequeño detalle parcial

      A veces interesa que en una imagen grande haya un pequeño detalle animado para llamar la atención del usuario; por ejemplo: En un anuncio de automóviles, hacer que los faros tengan un pequeño y discreto brillo que se enciende y apaga.

      Podemos hacer eso de muchas maneras pero la más rápida y sencilla puede ser hacer un pequeño pase de diapositivas con dos estados que cambien automáticamente. El truco es no animar toda la imagen, ya que eso añadiría mucho peso innecesario. Lo más sensato es recortar sólo el trozo donde queremos la animación como una pequeña imagen que colocamos en dos cajas: Una es el estado donde no cambia y otra es el estado con el brillo.

      Superponemos las dos imágenes en el mismo sitio y creamos un pase de diapositivas infinito automático. De esa manera toda la imagen parecerá animada. Ese efecto se puede repetir las veces que sea necesario.

      Observaciones

      • Hay que tener cuidado con los tamaños de las imágenes. Cada imagen aumenta el peso del folio final. Un folio sólo con un pase de 12 imágenes de 1024 × 768 píxeles pesa 16 Mb.

      • Los elementos incluidos en la interactividad se rasterizan —al menos hasta la versión 21 de DPS—.

      • Recuerda que los elementos incluidos en la interactividad se rasterizan —al menos hasta la versión 21 de DPS—. Eso quiere decir que si estás trabajando con un folio de DPS en formato PDF y hay textos no interactivos al lado, la diferencia de calidades al hacer zoom puede ser visualmente muy evidente.

      • Como en todos los elementos interactivos es imprescindible indicar al usuario con alguna pista visual que se trata de un elemento interactivo: Un icono de arrastrar, un pequeño texto… Si no se hace, posiblemente no se dará cuenta.

        La elección del icono identificativo de la existencia de un elemento interactivo oculto debe ser cuidadosa. No hay que hacer acertijos, sino usar señales evidentes.

      4 comentarios

      Diapositivas

      Hola, Gustavo

      Tengo un problema con un pase de diapositivas. Lo he intentado todo pero no hay manera. Recurro a ti a ver si me puedes ayudar.

      Tengo un libro que consta de 12 artículos. Cada artículo tiene diez páginas, todas de fotos. En la página 6 de uno de ellos he insertado, a toda página, un pase de diapositivas. Cuando llego a esa página, deslizo el dedo por la foto y se van pasando. Cuando llego a la última y quiero seguir visualizando las siguientes páginas no me deja. No responde el iPad y lo único que hace es seguir con el pase de diapositivas. No puedo ir ni para delante ni para detrás.

      ¿Alguna solución?

      Muchas gracias

      Conflicto de gestos

      Hola, Luis

      Te contesto aquí aunque ya lo hemos hablado por correo: Lo que tienes es un conflicto de gestos que a mi también me ha ocurrido. Es la tentación de hacer un pase de diapositivas a toda página, para que cubra perfectamente todo y entonces hacer que cualquier punto de las fotografías sea botón para arrastrar.

      El problema es que cuando hay una interactividad —lo que en DPS llaman un "Folio overlay"—, el gesto del elemento interactivo predomina siempre sobre el de la página, lo que, si lo piensas un poco es lógico.

      Las dos soluciones posibles son sencillas una vez que lo tienes claro:

      1. Cambiar el gesto de la interactividad —ya que el de pasar la página no lo puedes alterar porque está predefinido—. Pon que sea pulsar (tap) o arrastrar en sentido vertical (vertical swipe) si no tienes más páginas en el artículo…

      2. Manten las imágenes a toda página pero reduce la zona interactiva para el pase de diapositivas sólo a una parte. Eso lo puedes hacer poniendo como botón una caja transparente en una zona más o menos amplia y situando un icono más reducida en esa misma zona. El icono tendrá que ir repetido y agrupado con cada una de las imágenes del pase, claro.

      Exportar estas transiciones

      Buenas tardes,

      Deseo exportar el pase de diapositivas a un formato de codigo, para intrucirlo en un app,¿Qué debo hacer?

      Gracias.

      Espero pronta respuesta.

      Con DPS no puedes

      Buenas tardes,

      Con Adobe DPS no puedes crear 'código' que puedas exportar a otras aplicaciones. Para eso tienes que usar otras herramientas, posiblemente algo basado en HTML5, CSS3 y JavaScript.

      Lo más cercano que se me ocurre a Adobe DPS es Adobe Edge Animate. A partir de ahí las opciones de exportación son varias.

      Aparte, código a mano o con ayuda de alguna herramienta, lo que quieras. Adobe DPS, no.

      Añadir nuevo comentario