Elementos interactivos para navegar por un libro electrónico. Parte III: botones

Además de orden visual y contenidos valiosos, el usuario de un libro espera sencillez para moverse a través de las diferentes partes que componen el libro y acceder a la información que le interesa.

Para facilitarle al lector encontrar esa información, el libro impreso contiene una tabla de contenido, generalmente incluida en las primeras páginas y con una numeración independiente. La tabla de contenido o índice general del libro consiste en una lista de entradas con los nombres de los capítulos y títulos principales. Cada entrada de esta lista está acompañada de un número de página donde el lector deberá ir para encontrar lo que busca.

Otro elemento de un libro impreso que puede ayudar al lector a encontrar el contenido buscado son los índices. Un índice alfabético, por ejemplo, contiene una lista de palabras o términos acompañados de los números de página a lo largo del libro donde se hace referencia a esas palabras.

InDesign cuenta con las herramientas para crear tablas de contenido e índices y también permite añadir otros elementos interactivos que sirven para navegar por un libro electrónico, como los marcadores, los hipervínculos y los botones. Cada uno de estos elementos interactivos tiene sus propios usos particulares y antes de empezar a trabajar, usted deberá determinar cuál es el elemento más adecuado a sus necesidades.

En esta entrada veremos uno de estos elementos interactivos: los botones.

Un botón es un área de una página en la que es posible hacer clic para realizar una acción, por ejemplo “navegar” hacia un destino.

En este ejemplo, en un documento InDesign vamos a crear un botón de navegación tal que, al hacer clic con el mouse sobre el mismo naveguemos hacia la página siguiente, como muestra la figura:

En este caso, el evento es hacer clic con el mouse y la acción es navegar hacia la página siguiente.

Además de botones de navegación puede añadir otros elementos interactivos en un documento InDesign, como transiciones de página, hipervínculos, películas, sonidos, animaciones y proyecciones de diapositivas, que se podrán ver en los archivos exportados en formatos PDF y SWF.

Para probar el funcionamiento del contenido interactivo, exportaremos el documento InDesign en formato PDF, habilitando el contenido interactivo y luego visualizaremos el archivo exportado con Adobe Reader.

También exportaremos el documento InDesign en formato SWF (Flash) para visualizar el archivo exportado con Adobe Media Player, o bien con un navegador con Adobe Flash Player integrado.

Adobe Flash Player es un complemento o plug-in que sirve para visualizar contenido multimedia y está disponible para diferentes navegadores como Explorer, Chrome, Firefox, etc. y con versiones para diferentes sistemas operativos.

Antes de crear botones con InDesign debemos contar con algunos archivos de imagen.

En este ejemplo, para crear un botón interactivo simple, necesitaremos 2 imágenes con forma de flecha hacia adelante:

Usaremos la flecha más clara para el botón en estado Normal y la flecha más oscura para el botón cuando el ratón pase por encima de él, es decir para el estado Al pasar sobre él.

Los 2 archivos de imagen son:

• siguiente_on.jpg (Al pasar sobre él)
• siguiente_off.jpg (Normal)

En este ejemplo crearemos solamente el botón para navegar hacia la página siguiente. Si usted desea completar el ejercicio deberá utilizar otros 2 archivos de imagen para las flechas hacia la página anterior.

Configure el documento InDesign con calidad Publicación digital y marque la opción Páginas opuestas para crear pliegos de 2 páginas enfrentadas.

Configure el tamaño de página iPad con orientación Vertical y los siguientes valores de márgenes del documento:

• Superior: 40 px
• Inferior: 40 px
• Interior: 40 px
• Exterior: 150 px

Hemos configurado un valor muy grande de margen exterior (150 píxeles) porque allí aparecerán nuestros botones de navegación, como muestra la figura:

Colocar los archivos de imagen de los botones

No colocaremos las imágenes en las páginas del documento, sino en los márgenes exteriores de la página maestra. De esta forma nos aseguramos que los botones serán visibles en todas las páginas de documento que tengan aplicada dicha página maestra.

Utilizando el panel Páginas (F12) abra la página maestra, coloque en el margen exterior de la página maestra de la derecha el archivo de imagen siguiente_on.jpg y, a continuación, coloque el archivo de imagen siguiente_off.jpg, justo encima de la primera.

La imagen de la flecha más oscura quedará oculta debajo de la más clara.

Utilizando estas imágenes crearemos un botón interactivo que nos servirá para navegar hacia la página siguiente.

El panel Botones y formularios de InDesign

Elija el menú Ventana > Interactivo > Botones y formularios, para abrir el panel Botones y formularios.

Elija la herramienta Selección (flecha negra) y rodee la imagen de la flecha. Se seleccionarán la flecha clara y también la oscura que está oculta debajo.

Elija el menú Objeto > Agrupar, o presione Ctrl+G, para formar un grupo con ambos objetos.

Haga clic en el icono Convertir a botón, en la parte inferior del panel Botones y formularios:

En el panel Botones y formularios, escriba un nombre para el botón, por ejemplo Adelante.

Configurar el evento y la acción

En Evento, seleccione el evento Al liberar o tocar, para determinar el modo en que se activará la acción. Con esta opción, la acción se realizará al soltar el botón del ratón tras hacer clic. 

Haga clic en el botón de signo más (+) junto a Acciones y seleccione la acción Ir a página siguiente, es decir la acción que se va asignar al evento.

También puede configurar el nivel de Zoom. Elija la opción Zoom anterior.

Es posible añadir tantas acciones como sea necesario para el evento.

Eventos

Indican la manera de activar acciones en los botones cuando exporta el documento a PDF o SWF, por ejemplo:

• Al liberar o tocar. La acción se realizará al soltar el botón del ratón tras hacer clic. Este evento da al usuario la oportunidad de mover el cursor fuera del botón para no activar la acción.
• Al hacer clic. La acción se realizará cuando se haga clic en el botón del ratón, sin soltarlo. A menos que tenga una razón concreta para usar "Al hacer clic", es preferible usar "Al liberar o tocar", para que el usuario tenga la oportunidad de cancelar la acción.
• Al pasar sobre el objeto. La acción se realizará cuando el puntero del ratón entre en el área definida por el cuadro delimitador del botón.
• Al alejarse del objeto. La acción se realizará cuando el puntero del ratón salga del área de botón.

Acciones

Al crear una acción indicamos qué ocurrirá cuando se produzca el evento especificado, normalmente cuando alguien hace clic en el botón, por ejemplo:

• Ir a destino. Salta al anclaje de texto especificado en el panel Marcadores o Hipervínculos.
• Ir a la primera/última/siguiente/anterior página. Salta a la primera, última, siguiente o anterior página del archivo PDF o SWF. Seleccione una opción del menú Zoom para determinar cómo se mostrará la página.
• Ir a URL. Abre la página web de la URL especificada.
• Abrir archivo. Inicia y abre el archivo especificado. Se debe especificar una ruta de acceso absoluta.

Configurar la apariencia del botón

En el área Apariencia estará seleccionada la apariencia del botón en estado [Normal]. En este caso vemos una pequeña imagen con la flecha de color claro y a la derecha la leyenda [Normal] aparece resaltada.

Ahora debemos configurar la apariencia del botón en el estado [Al pasar sobre él].

Con el botón seleccionado, haga clic en [Al pasar sobre él], haga doble clic sobre el botón y presione la tecla Supr para borrar la imagen de la flecha más clara. Aparecerá la imagen de la flecha más oscura (que estaba oculta abajo).

¡Listo! Hemos configurado la apariencia del botón en el estado [Al pasar sobre él].

Seleccione el botón con la herramienta Selección y observe los dos estados del botón en el área Apariencia:

Más abajo, en Descripción escriba el texto Página siguiente.

Este texto es la descripción emergente, una ayuda visual que al exportar en formato PDF se mostrará en pantalla cuando pasemos el ratón por encima del botón.

La descripción emergente o tooltip sirve para informar al usuario la finalidad del elemento sobre el que se encuentra.

Vista previa de SWF

Utilice el botón Previsualizar pliego, en el ángulo inferior izquierdo del panel Botones y formularios, para abrir el panel Vista previa de SWF.

Este panel permite, antes de exportar el documento InDesign, previsualizar la apariencia del botón. Pase el cursor por encima de la flecha para ver el resultado.

Cuando exporte el documento InDesign a PDF interactivo, asegúrese de que en Formularios y medios está seleccionada la opción Incluir todo.

Si exporta a Flash Player (SWF) seleccione la opción Incluir todo en Interactividad y multimedia.