MiMoriarty

Trucos de diseño para diseñar como locos

Botones interactivos en iPad

La herramienta Slideshow del Interactive Overlay Creator, no se encuentra disponible en la versión beta, con ella la mayoría de nosotros estamos aprendiendo a realizar publicaciones digitales. En el artículo Proyección de fotografías interactiva para iPad, tienes toda la información.

Como solución podemos controlar la proyección de fotografías con botones interactivos. Perderemos en experiencia de usuario, al no poder desplazar las fotos con los dedos, pero puede ser de utilidad en alguna ocasión y siempre la podremos utilizar para crear un pdf interactivo.

Para realizar este proyecto tienes que utilizar Indesign CS 5. Primeramente hay que crear un objeto de varios estados y posteriormente asignar el movimiento interactivo con botones. Terminando el trabajo exportando la página con el Digital Content Bundler (Content Bundler. Empaquetado y exportación de la revista).

Objeto de varios estados

Creamos en Indesign una capa denominada “proyección fotos” en la que colocamos en el orden deseado las fotografías que componen la galería fotográfica. En la imagen inferior, puedes ver el panel de capas extendido en el que las fotos 1, 2 y 3 tienen un orden. Selecciona las tres imágenes y con la herramienta alinear las posicionas en el lugar donde aparecerán.

Abre el panel de estados de objeto (ventana/interactivo). Esta herramienta nos permite tener varias versiones de un objeto en un mismo lugar. Con las tres imágenes seleccionadas crea un nuevo estado de objeto, bien desde el menú o en el botón inferior izquierdo. (Para visualizar a mayor tamaño las fotografías haz clic sobre ellas).

Puedes ver que hay tres estados, que corresponden a cada fotografía de la galería. Haciendo clic en el botón que hay junto al nombre de estado nos aseguramos que tenemos seleccionado todos los estados del objeto. Lo indica visualmente con una línea discontinua, de color naranja, que bordea a las fotografías.
También es muy importante que le des un nombre al objeto, en este caso le llamo “PASE FOTOS”. Luego lo utilizarás al crear lo botones interactivos.

Movimiento interactivo con botones

Necesitamos dos botones en forma de flechas para que el usuario pueda navegar por las fotos. Puedes crearte tu propio diseño o utilizar, como en este ejemplo, las que incluye la librería de botones de muestra de Indesign.

Abre la librería de botones (ventana/botones de muestra) y elige dos en forma de flecha. Uno que apunte hacia la izquierda y otro del mismo diseño que apunte a la derecha. Colocamos las flechas sobre la página, próximas a las fotografías con las que interactúa. El tamaño de las flechas es muy importante ya que el usuario las presionará con su dedo.

Te recomiendo que cualquier icono para interactuar mida 1 cm como mínimo.

Selecciona la flecha izquierda y abre el panel de botones (ventana/interactivo/botones). La acción que aparece por defecto la borras presionando sobre el signo menos. Ahora crea una nueva acción presionando sobre el símbolo de “+”, escoge la acción “ir al estado anterior”, ya que queremos que la persona, al presionar, desplace la foto a una anterior.
Marca también la casilla “detener en el primer estado”, lo que producirá que la galería fotográfica se detenga en la primera foto.

Para la flecha derecha realizamos el mismo proceso, eligiendo esta vez la acción “ir al estado siguiente” con el que conseguimos que la foto cambie por la siguiente en el orden establecido.
Al igual que para el botón izquierdo señala en esta ocasión la casilla “detener en el último estado”, parándose la interacción cuando alcance la última foto.

Ya tienes realizada la interactividad de los botones con las fotos. Si seleccionas cualquiera de los dos botones puedes ver, en la ventana del panel de botones, que el objeto al que hacen referencia es “PASE FOTOS” que es el nombre dado cuando se creó el objeto de varios estados.
Esto es sumamente importante ya que la versión de página horizontal y vertical (Página digital para ipad. Una página dos vidas) tienen que hacer referencia al mismo objeto (PASE FOTOS).

La organización es el éxito del proyecto, como he comentado en alguna ocasión. La persona cuando visualice una foto, y gire su iPad, tiene que ver la misma fotografía en posición horizontal y vertical.

También quiero comentarte que esto no es una ley de obligado cumplimiento, buscar nuevas experiencias en el lector-usuario puede resultar interesante. Por ejemplo si estás en la foto 2ª vertical del montaje que he realizado, en la que los pingüinos están plácidamente sobre el hielo, y giras el iPad, puedes poner una imagen en la posición 2ª para horizontal que refleje el escenario surgido después de una cacería de pingüinos por un oso polar.

Para terminar sólo tienes que exportar con el Digital Content Bundler (Content Bundler. Empaquetado y exportación de la revista) para poder ver tu revista en el iPad.

About miguel monge

Experiencia visual de lo que miras pero no ves, de lo que imaginas y te gustaría enseñar.

10 comments on “Botones interactivos en iPad

  1. David
    April 12, 2011

    muy buen blog, felicidades, sigue así porfavor, me lo voy a leer todo ahora mismo, a ver si aprendo a diseñar para ipad

    • miguel monge
      April 12, 2011

      Gracias David.
      Espero que te sea práctico.
      Si tienes alguna duda, no dejes de comentarla.

      Un saludo,
      Miguel

  2. Daniel
    April 13, 2011

    Un crack , te sigo desde hace tiempo, muchas gracias por compartir todos tus conocimientos con nosotros, como dice David: sigue así.

    Muchas gracias!!

    • miguel monge
      April 13, 2011

      Hola Daniel,
      Gracias por tu apoyo.
      El blog MiMoriarty es un espacio abierto. Podéis preguntar, enlazar los post, sugerir temas… toda idea es bienvenida.
      Últimamente no me canso de decir que compartir ideas, información y ayudas, es lo que está cambiando el Mundo.

      Un saludo, y felicidades por tu blog
      Miguel

  3. Pingback: Fotografía panorámica interactiva en iPad « MiMoriarty's Blog

  4. manel
    September 11, 2011

    Muy buen trabajo el tuyo Miguel, te lo agradezco.
    tengo una pregunta, sabes si en la dps puedes vincularte a una app que tengas cargada en tu ipad. Y en el caso de que puedas vincularte a ella puedes abrirla sin salir de la dps.
    Por ejemplo abrir la aplicación brújula en un marco de imagen pero sin salir de la publicación?
    Gracias por tu trabajo

    • mimoriarty
      September 11, 2011

      Hola Manel,

      Supongo que Miguel tendrá buena respuesta para tu cuestión. De todas maneras te adelantaré yo lo que conozco al respecto.

      La versión beta de la DPD no pernitía este tipo de vínculos. O más bien diría yo, no permitía ejecutar ningún tipo de código que permitiese abrir una aplicación, puesto que eso sería lo necesario para realizar esa tarea. Sí es posible crear hipervínculos a direcciones HTML que abrirán el explorador web por defecto, pero eso es todo lo que se puede hacer al respecto. Cualquier otra aplicación que no esté soportada por el navegador no puede ejecutarse.

      Esto es lo que yo se por el momento. Aún no he podido testar la versión comercial pero lo haré pronto.

      Espero haber podido serte ayuda.

  5. maria
    March 12, 2012

    Buenas! Lo primero muchas gracias por el blog GRAN TRABAJO!!!
    Llevo varios meses manejando Indesign5.5 hay dos cosas que se me escapan…
    Lo primero las animaciones, se ven perfectamente en la vista previa de indesign pero nunca en el ipad.
    y la segunda… es una preguntilla.. ¿es posible meter botones dentro de un scroll?
    Un saludo!

    • mimoriarty
      March 15, 2012

      Buenas noches María,

      Disculpa que no te haya contestado más rápidamente, ha sido una semana muy ajetreada y llena de tropiezos. Antes de nada me gustaría preguntarte a qué tipo de animaciones te refieres y con que herramientas las creas, Adobe es muy estricto respecto a los formatos.
      Respecto a la segunda pregunta, no se me ha ocurrido meterlos, es decir, el objeto de los botones es estar a disposición del lector dónde sean útiles y bien visibles, pero en todo caso supongo que puedes hacer una prueba y ver que pasa, como muy mal dejarían de cumplir su cometido. Aparte la opción del scroll no me atrae precisamente, creo que no es elegante. En todo caso prefiero añadir una página más al artículo.

      Un saludo,
      A&8s

    • miguel monge
      March 16, 2012

      Hola María, disculpa, últimamente estoy un poco off line.

      Como te comenta Víctor, el formato de la animación es importante para su correcta visualización en e iPad. Hay varias aplicaciones para realizar animaciones sin saber de Html, JavaScript y CSS3.
      Tanto Wallaby, Edge y Muse están en Adobe Labs, puedes probar gratis estas versiones beta.
      Por ejemplo:
      – De Indesign a Html 5 a través de flash y Wallaby (http://indesignsecrets.com/from-indesign-to-html5-via-flash.php).

      – Tutorial sobre el uso de Adobe Muse para crear contenido HTML para publicaciones digitales (http://tv.adobe.com/watch/muse-code-name-feature-tour/muse-creating-content-for-dps/).

      También existe a la venta la aplicación Hype (http://tumultco.com/hype/) para crear animaciones en Html 5 de forma sencilla.

      Por otro lado, lo cierto es que no se como incluir unos botones en un marco deslizable. Seguramente tienes una buena razón para querer aplicarlo.

      Desde el punto de vista de la usabilidad, es suficiente con indicar a la persona que interactúa que hay un contenido oculto, mediante un icono o con el recurso de atenuar el texto entrante y saliente del marco desplazable te paso un enlace a vídeo explicativo: http://vimeo.com/35942167).

      Un saludo,
      Miguel

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on April 12, 2011 by in digital publishing, Publicaciones digitales and tagged , , , .

Top Rated

April 2011
M T W T F S S
« Mar   May »
 123
45678910
11121314151617
18192021222324
252627282930  
%d bloggers like this: