Botones para cambiar de página

Índice

¿Qué es?

Una vez hayas pasado el proyecto a tu dispositivo móvil, podrás pasar de página simplemente deslizando el dedo de izquierda a derecha o viceversa, pero también puedes crear botones para navegar por la App, por ejemplo un botón para que vaya directamente a la última página, o a una página concreta de la publicación.

En InDesign existen varias acciones que nos permiten crear botones para desplazarnos de una página a otra. Estas acciones nos pueden servir para crear un índice, añadir botones de navegación o crear publicaciones con un recorrido no lineal. Puedes crear tu menú de botones para navegar por la App dentro de una página maestra de InDesign, así podrás poner el menú rápidamente en todas las páginas que quieras. [Ver tutorial de Páginas maestras]

Estas son las acciones disponibles:

Acción Descripción Opciones
Ir a Página Ir a una página según su número de página. Página: Establece el número de la página a la que quieres ir.
Ir a Primera Página Ir a la primera página de la publicación.
Ir a Última Página Ir a la última página de la publicación.
Ir a Página Siguiente Ir a la página siguiente.
Ir a Página Anterior Ir a la página anterior.
Ir a Destino Ir a una página usando un marcador de página. Destino: Establece el marcador de página que quieres usar. El botón te llevará a dicha página.

¿Cómo funciona?

Guía rápida

Por ejemplo, puedes usar la acción «Ir a página» de este modo:

  1. Convierte a botón el elemento al que le vas as a añadir la acción (una imagen o un marco rectangular).
  2. Añádele la acción «Ir a Página»
  3. Indica la página a la que quieres ir en el campo «Página».

    Botón ir a página

Caso práctico

En este tutorial vas a aprender a usar algunas de las acciones que te permiten cambiar de página utilizando botones interactivos.

Crear un índice interactivo

En este tutorial vamos a ver cómo crear un índice de contenidos en nuestra publicación para que el usuario pueda acceder directamente a la sección que desea ver.

Para realizar el índice utilizaremos la acción Ir a página ya que nos va a permitir ir directamente a la página de la publicación que deseemos.

¿Qué necesitas?

Para crear un índice es necesario que hagas uso de tus habilidades creativas con el fin de diseñar el aspecto que va a tener, según tus necesidades. Por ejemplo, podríamos diseñar un índice como este:

Índice

En este caso, hemos diseñado una imagen en Photoshop que contiene todo el índice a excepción de los números de las páginas que los hemos insertado en inDesign. De este modo, si necesitamos cambiarlos, podemos hacerlo fácilmente desde el propio inDesign. Evidentemente, tú puedes hacerlo a tu manera y usando las herramientas que más te gusten.

Paso 1

Para dotar de interactividad a nuestro índice, lo primero que vamos a hacer es delimitar las zonas donde el usuario puede tocar para ir a una determinada página.

En este caso, queremos que el usuario acceda a las distintas secciones tocando el número de la página. Así pues, situaremos un marco vacío sobre cada uno de los números de página.

Recuerda que puedes añadir un marco vació con el botón Crear marco rectangular

Índice

A continuación, le añadiremos la interactividad a los marcos vacíos que acabamos de insertar para enlazaros con la página correspondiente. Es tan sencillo como realizar los siguientes pasos en cada marco.

Paso 2

Convierte el marco vació a botón. Para ello, selecciónalo y haz lo siguiente:

  • Abre el panel Botones y formularios
  • Elige el tipo «Botón» o pulsa el botón «Convertir a botón» Convertir a botón (situado en la parte inferior de panel).
  • Ponle un nombre.
    convertir a botón

Paso 3

Ahora vamos a añadirle una acción. Desde el mismo panel que hemos abierto para convertir a botón:

  • Elige el evento «Al hacer clic».
  • Pulsa el botón «Añadir acción» Anyadir acción
  • Elige la acción «ir a Página».

    añadir acción

  • Finalmente, escribe en el campo Página el número de la página a la que quieres que lleve el enlace.
    seleccionar página

    No te preocupes por el valor del campo Zoom ya que no va a afectar a tus enlaces.

Fin

Repite los pasos 2 y 3 para cada uno de los marcos vacíos y ya tendrás tu índice terminado.

¿¡A qué esperas para probarlo!?

Caso Práctico

Crea un botón para ir a otra página

En este tutorial vas a aprender a crear botones para ir a una determinada página, botones para ir a la primera página o para ir a la página anterior/siguiente.

Hazlo tu mism@

Si quieres realizar este caso práctico o ver como se ha hecho, descarga los ficheros del proyecto.

Caso práctico terminado Descargar
Preparado para practicar Descargar

Después de descargar un fichero, descomprímelo y verás que en su interior ya está todo preparado. Si abres la carpeta del proyecto podrás comrpobar que incluye la carpeta «Libraries» y en su interior encontrarás todo lo necesario para diseñar la publicación.

Pruébalo en tu dispositivo

También puedes ver el resultado en «480i Viewer iPad/Android» instalando el caso práctico a través de su id. Si nunca has añadido una aplicación por id y quieres saber cómo se hace, échale un vistazo a este minitutorial.

ID de instalación irapagina
Ir al Foro