Estilos CSS en documentos EPUB. Parte II: Controlar el tamaño de los márgenes de página

Como hemos visto en la entrada anterior Estilos CSS en documentos EPUB. Parte I: Introducción, en un libro digital en formato EPUB el contenido legible se guarda en archivos HTML y el formato se controla con un archivo de hoja de estilos CSS.

Al exportar un documento InDesign en formato EPUB, se crean dentro del paquete de archivos todos los documentos HTML necesarios y además un archivo de hoja de estilos CSS independiente que controla el formato, compuesto normalmente por varias reglas CSS.

La ventaja de utilizar un archivo de hoja de estilos independiente es que si modificamos la hoja de estilos, el formato de todos los documentos HTML que usen esa hoja de estilos se actualizará automáticamente. Este método de trabajo define una separación entre el contenido y el formato y brinda una mayor flexibilidad y control en la tarea de diseño.

En esta entrada veremos mediante ejemplos concretos cómo controlar los márgenes de página en un EPUB.

Antes de comenzar diremos que el espacio en blanco es un elemento de diseño que posee entidad propia y está constituido por todas aquellas partes de la composición donde hay ausencia de cualquier otro elemento gráfico. El espacio en blanco sirve para equilibrar el peso de los objetos ayudando a conseguir armonía en la composición. Los márgenes en especial cumplen la función de encuadrar el resto de los elementos y marcar los límites espaciales de la composición.

InDesign permite definir el tamaño de los márgenes de página de un documento al configurar un nuevo documento.

Con la siguiente configuración de documento obtendremos páginas con márgenes superior, inferior, izquierdo y derecho de un tamaño fijo de 50 píxeles:

Si insertamos texto en el documento InDesign, las páginas de documento se verán similares a la siguiente:

Si exportamos el documento InDesign en formato PDF, los márgenes del archivo exportado serán los que hemos fijado al configurar el documento.

Si exportamos el documento InDesign en formato EPUB, aparecerá un cuadro con opciones de exportación y en la ficha General podremos configurar el tamaño de los márgenes del EPUB:

Mantenga los valores en 0 píxeles, como muestra la figura.

Abra el EPUB exportado con el visor de libros electrónicos de Calibre o con Adobe Digital Editions y observe que aunque hayamos configurado el documento InDesign con márgenes de 50 píxeles, los márgenes de página del EPUB exportado son nulos.

Vamos a editar la hoja de estilos CSS del EPUB utilizando Dreamweaver.

En la hoja de estilos CSS del documento exportado encontraremos la regla CSS: @page {margin : 0px 0px 0px 0px}, que es la responsable de controlar el tamaño de los márgenes de página del EPUB. Esta regla CSS se aplica al selector @page y los 4 valores son 0px.

El selector @page identifica la caja de página y permite definir propiedades tales como tamaño, orientación, márgenes, etc.

En este ejemplo, la propiedad margin controla los márgenes del elemento. El primero de los 4 valores controla el margen superior, el siguiente el margen derecho, el tercero el margen inferior y el cuarto el margen izquierdo, es decir que los 4 valores se deben leer partiendo desde el margen superior y en el sentido de las agujas del reloj.

Si por ejemplo quisiéramos modificar solamente el margen izquierdo de la caja de página a 10px, la regla CSS quedaría: @page {margin : 0px 0px 0px 10px}

Importante: al exportar un documento InDesign en formato PDF se utilizarán los márgenes de página establecidos en el cuadro de configuración del nuevo documento. Al exportar un documento InDesign en formato EPUB los márgenes de página se deben ajustar utilizando el cuadro de Opciones de exportación EPUB.

Exporte nuevamente el documento InDesign en formato EPUB y en la ficha General del cuadro Opciones de exportación EPUB configure el tamaño de los márgenes como muestra la siguiente figura:

Abra el EPUB exportado con el visor de libros electrónicos de Calibre o con Adobe Digital Editions.

Cambie el tamaño de la caja de página o cambie el tamaño de la fuente tipográfica y observe los márgenes de página del EPUB.

En la hoja de estilos CSS del documento exportado, la regla CSS: @page {margin : 10px 10px 10px 50px} controla el tamaño de los márgenes del EPUB:

Si en lugar de definir valores en unidades absolutas en píxeles utilizamos unidades relativas em, por ejemplo @page {margin : 1em 1em .5em 3em}, al variar el tamaño de la fuente tipográfica del EPUB, los márgenes variarán proporcionalmente.

También se pueden combinar unidades absolutas y relativas, por ejemplo @page {margin : 10px 10px 10px 3em}

Estilos CSS en documentos EPUB. Parte I: Introducción

El estándar para libros electrónicos EPUB de maquetación fluida tradicional se caracteriza porque el contenido del libro se reorganiza y adapta a cualquier tamaño de pantalla y se basa en otros estándares anteriores como el HTML de páginas web y el CSS utilizado para modificar el aspecto de los elementos de las páginas web.

La adopción de los estándares HTML y CSS es una muy buena noticia para los diseñadores web que deseen incursionar en el desarrollo EPUB porque ya conocen las ventajas que ofrece el trabajo con estilos CSS en el diseño web. Si usted tiene alguna experiencia en la edición del código de páginas web y archivos de hojas de estilo, el trabajo será más sencillo. En caso contrario no se preocupe porque estos ejemplos serán un buen punto de partida. 

En octubre de 2008, con el lanzamiento de la Creative Suite 4, Adobe incluyó en InDesign CS4 el proceso para generar documentos en formato EPUB que incluyen estilos CSS.

La tecnología CSS es compatible con todos los navegadores web y las aplicaciones para la lectura de documentos EPUB y está en constante evolución. El soporte CSS es diferente entre tabletas y e-readers y puede variar entre un dispositivo lector y otro.

Un documento en formato EPUB es un archivo comprimido en un paquete que contiene documentos con extensiones HTML, XML, OPF, OTF, NCX, CSS, JPG, PNG, etc. La estructura de archivos y carpetas de un EPUB sencillo podría ser la siguiente:

• mimetype
• META-INF/
• container.xml
• OEBPS/
• content.opf
• title.html
• content.html
• style.css
• toc.ncx
• IMAGES/
• cover.jpg

Esta estructura contiene, en el nivel raíz, el documento mimetype y las carpetas META-INF y OEBPS y se empaqueta en un archivo de formato ZIP.

Todos los archivos de esta estructura incluyen el contenido del documento EPUB, que puede ser, por ejemplo, un libro digital: el texto, la imagen de tapa y las imágenes incluidas en el interior del libro, los archivos de fuentes tipográficas, la tabla de contenido, los metadatos, e incluye además un archivo de hoja de estilos CSS, que no es una parte legible del contenido, pero es muy importante porque incluye los estilos CSS que sirven para definir el aspecto del contenido del libro digital.

1. El archivo de hoja de estilos CSS

En un e-book en formato EPUB el archivo de hoja de estilos es un documento con extensión CSS almacenado en la carpeta OEBPS (Open E-book Publication Structure) donde se guarda todo el contenido del libro.

De la misma forma que en un sitio web, en un EPUB el contenido legible se guarda en archivos HTML y el formato de estos se controla con un archivo de hoja de estilos CSS.

La siguiente figura muestra una línea de código en un archivo de hoja de estilos CSS editado con Dreamweaver:

El nombre y la ubicación del archivo de hoja de estilos es: \OEBPS\Styles\style.css

El código: p { text-align:justify; margin:0; text-indent:1.5em; line-height:1.3em; }, es una regla CSS.

2. Reglas CSS

Un archivo de hoja de estilos CSS u hoja de estilos está compuesta normalmente por varias reglas CSS que sirven para controlar el aspecto del contenido de una o más páginas web.

Un estilo CSS se forma a partir de un conjunto de reglas CSS que residen normalmente en un lugar independiente del objeto al que aplica formato, por ejemplo en la sección head de un documento HTML o en una hoja de estilos externa.

Una regla CSS tiene 2 partes: el selector y la declaración y a su vez la declaración está compuesta por uno o más pares propiedad:valor.

La creación de una regla CSS lleva 2 pasos:

• Definir el selector, o sea determinar a qué parte de la página se va a aplicar la regla, por ejemplo el nombre del selector p establece que la regla aplicará a todos los elementos <p>.
• Definir los pares propiedad:valor que se aplicarán al selector, por ejemplo text-align:justify, margin:0, text-indent:1.5em, line-height:1.3em.

2.1. El selector

Indica el elemento o elementos HTML a los que se aplicará la regla CSS, en este caso es la etiqueta p, que identifica a los párrafos.

En HTML un párrafo es una porción de texto y para definir un párrafo en un documento HTML se debe utilizar la etiqueta p. La marca de inicio de párrafo es <p> y se debe colocar al comienzo del párrafo, mientras que la marca de fin de párrafo es </p> y se debe colocar después del punto final.

Entre ambas marcas se encuentra el texto y también pueden insertarse otros elementos HTML: <p>Para definir un párrafo en un documento HTML se debe usar la etiqueta p.</p>

Una regla CSS puede aplicarse a muchas etiquetas a la vez y en el caso de las hojas de estilo externas, la regla CSS se puede aplicar a muchas etiquetas de diferentes páginas a la vez.

De este modo, los estilos CSS proporcionan un método muy sencillo de actualización de formato porque al cambiar una regla CSS, el formato de todos los elementos que usen ese estilo se actualizará automáticamente con el nuevo estilo.

Tipos de selectores:

• Etiqueta: es un selector que permite crear una regla CSS para establecer el aspecto de una etiqueta HTML concreta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada. Se identifica por la etiqueta, por ejemplo p.
• Clase: es un selector que permite crear una regla CSS que se pueda aplicar a cualquier elemento de la página. Una vez creada la clase, esta se puede aplicar tantas veces como se quiera y a los objetos que uno quiera. Se identifica con un punto, por ejemplo .imagen.
• ID o Identificador: es un selector que permite crear una regla CSS para ser aplicada a una etiqueta identificada con un nombre y así personalizar el aspecto de un único elemento concreto de la página, identificado con ese nombre. Al elemento que se desea formatear se le debe dar un nombre previamente, insertando una etiqueta Div. Se identifica con el símbolo numeral, por ejemplo #destacado.
• Compuesto: es un selector que permite crear una regla CSS para ser aplicada a combinaciones de los tipos anteriores o a varios selectores agrupados.

2.2. La declaración

Está compuesta por uno o más pares propiedad:valor y especifica las características de formato que se aplicarán al selector, por ejemplo { text-align:justify; margin:0; text-indent:1.5em; line-height:1.3em }

Los pares propiedad:valor se deben escribir entre llaves y separados por el carácter de punto y coma.

Cada par propiedad:valor permite establecer el aspecto de una característica por medio de un valor determinado.

En nuestro ejemplo, la declaración { text-align:justify; margin:0; text-indent:1.5em; line-height:1.3em } está compuesta por 4 pares propiedad:valor:

• La propiedad text-align controla la alineación horizontal del texto y el valor justify indica que el texto se debe mostrar de forma justificada, es decir igualando la longitud de todas las líneas de texto.
• La propiedad margin controla el tamaño de los márgenes y el valor 0 indica que todos los márgenes deben tener un valor nulo.
• La propiedad text-indent controla el tamaño de la tabulación o sangrado de primera línea y el valor 1.5em indica que la sangría de la primera línea de texto debe ser de 1,5 emes, es decir 1,5 veces el ancho de la letra "M" mayúscula del tipo y tamaño de letra del elemento. Si se utilizan unidades em, el valor que se toma como referencia es el tamaño de la fuente.
• La propiedad line-height controla el tamaño de la altura de cada línea de texto y el valor 1.3em indica que el interlineado debe ser de 1,3 emes, es decir 1,3 veces el tamaño de la fuente. Si se utilizan unidades em o porcentajes, el valor que se toma como referencia es el tamaño de la fuente y los valores 1.3em y 130% producen idéntico resultado.

Un archivo de hoja de estilos CSS puede contener un número ilimitado de reglas CSS, cada regla puede contener varios selectores y cada declaración puede estar formada por un número ilimitado de pares propiedad:valor.

La versión 2.1 del estándar CSS define 115 propiedades, cada una de las cuales tiene su propia lista de valores permitidos.

Ejemplo A: Controlar el interlineado del texto

La propiedad line-height establece el interlineado del texto.

El valor por defecto es normal y establece un valor recomendado entre 1.0 y 1.2. Si el valor es un número, la altura de la línea se calculará multiplicando el tamaño de la fuente por ese número.

Los valores permitidos pueden ser en unidades absolutas o relativas y no se permiten valores negativos de interlineado.

Si el valor es un porcentaje, la altura de la línea se calculará con respecto al tamaño de fuente del elemento. Por ejemplo p { line-height: 130% } establece un párrafo de texto igual a 1.3 multiplicado por el tamaño de la fuente.

Ejemplo B: Controlar el tamaño de los márgenes

La propiedad margin establece la anchura de los márgenes de un elemento.

El valor por defecto es cero, los valores permitidos pueden ser tanto positivos como negativos y en unidades absolutas o relativas.

Los valores se escriben separados por un espacio, por ejemplo: {margin: 10px 0 20px 10px;}

Si se establecen los cuatro valores, estos definirán los márgenes superior, derecho, inferior e izquierdo en ese orden.

Si sólo se establece un valor, este se aplicará a los cuatro lados.

Si se establecen dos valores, el primero se aplicará a los márgenes superior e inferior y el segundo a los márgenes izquierdo y derecho.

Si se establecen tres valores, el primero se aplicará al margen superior, el segundo a los márgenes izquierdo y derecho y el tercero al margen inferior.

3. El vínculo entre un archivo de hoja de estilos y un documento HTML

Como vimos, en un e-book en formato EPUB los estilos se aplican utilizando un archivo de hoja de estilos independiente y, además, este archivo CSS está vinculado a uno o varios documentos HTML.

La siguiente figura muestra el código de un archivo HTML editado con Dreamweaver que está vinculado a una hoja de estilos externa:

El nombre y la ubicación del archivo HTML es: \OEBPS\Text\capitulo1.html

En la vista Código de Dreamweaver, observe la cabecera del documento HTML, definida por las etiquetas <head> y </head>.

Las líneas de código 5 a 8 contienen la "cabecera" o sección "head" del documento HTML, entre las etiquetas <head> y </head>.

En la cabecera, suelen utilizarse otras etiquetas, por ejemplo <title>, <link>, <style>, <script> y <meta>.

La línea 7 de código contiene una etiqueta <link> que define el vínculo entre el documento HTML y el archivo de hoja de estilos style.css, mediante el atributo href="../Styles/style.css"

De la misma forma, se pueden vincular todos los documentos HTML que se quiera al archivo de hoja de estilos style.css.

La ventaja de utilizar un archivo de hoja de estilos independiente es que si modificamos la hoja de estilos, el formato de todos los documentos HTML que usen esa hoja de estilos se actualizará automáticamente.

Este método de trabajo define una separación entre el contenido y el formato y brinda una mayor flexibilidad y control en la tarea de diseño.

4. Los estilos de InDesign y la hoja de estilos CSS

Si se exporta un documento InDesign en formato HTML, se creará un documento HTML y además un archivo de hoja de estilos CSS para controlar su formato.

Si se exporta en formato EPUB se crearán dentro del paquete de archivos los documentos HTML necesarios y también un archivo de hoja de estilos CSS para controlar su formato.

En ambos casos, el archivo CSS estará vinculado a los documentos HTML a los que debe aplicar formato.

InDesign utilizará los formatos que se apliquen con los controles de formato de carácter o de párrafo para crear reglas CSS.

Si se crean y aplican estilos de párrafo y estilos de carácter en el documento InDesign, las propiedades de formato de esos estilos también se traducirán en reglas CSS en el archivo de hoja de estilos.

La siguiente imagen muestra la definición del estilo parrafo normal, aplicado a todo el texto de un documento InDesign:

En la categoría Formatos de caracteres básicos del estilo de párrafo, se han definido las siguientes propiedades de formato:

• Familia de fuentes: Times New Roman
• Estilo de fuente: Regular
• Tamaño: 12 pt
• Interlineado: 16 pt

Las propiedades de formato definidas en el estilo de párrafo, se traducen en la hoja de estilos CSS para el documento EPUB exportado, en la siguiente regla CSS:

En esta regla CSS, se han combinado el selector de etiqueta p y el selector de clase .parrafo-normal creando un selector más específico: p.parrafo-normal

El selector p.parrafo-normal se debe interpretar como "aquellos párrafos que contengan un atributo <class> cuyo valor es "parrafo-normal".

Las propiedades de formato que se han definido en el estilo de párrafo se aplicarán a los párrafos identificados con la clase .parrafo-normal y sólo a ellos.

En la declaración, los pares propiedad:valor están ordenados en una lista, donde cada par ocupa una línea de código.

Observemos la correlación entre las propiedades de formato definidas en el estilo de párrafo y los pares propiedad:valor en el archivo de hoja de estilos CSS:

• Familia de fuentes: Times New Roman >> font-family:"Times New Roman", serif;
• Estilo de fuente: Regular >>  font-style:normal;
• Tamaño: 12 pt >> font-size:1em;
• Interlineado: 16 pt >> line-height:1.333;

El tamaño de fuente definido en el estilo de párrafo en unidades absolutas (12 pt), se ha convertido a unidades relativas (1em) en la hoja de estilos y el valor del interlineado será igual al 1.333 el tamaño de la fuente.

En la siguiente figura podemos ver dos párrafos del documento HTML con el contenido del documento, editado con Dreamweaver en la vista Código:

Ambos párrafos están definidos por las etiquetas de apertura y cierre <p> y </p>.

Las etiquetas de apertura <p> contienen el atributo class="parrafo-normal">

Si más adelante se desea cambiar el formato del EPUB, hay 2 opciones para modificar la hoja de estilos CSS:

• Editar los estilos de párrafo y de carácter en el documento InDesign y luego volver a exportar en formato EPUB.
• Editar el archivo de hoja de estilos utilizando Dreamweaver, realizar los cambios en el CSS y empaquetar los archivos que integran la estructura del EPUB.

Con la segunda opción contará con muchas herramientas para cambiar el aspecto del EPUB, aunque será necesario tener conocimientos y mucha práctica con estilos CSS.

En las próximas entradas veremos ejemplos concretos para mejorar el formato de nuestros libros en formato EPUB, tanto utilizando los estilos de InDesign como editando la hoja de estilos y escribiendo las reglas CSS.

Agregar contenido multimedia: archivos de sonido, video y galerías de imágenes

En un documento InDesign es posible colocar clips multimedia FLV, F4V, SWF, MP3 y MP4, que son compatibles con los formatos PDF interactivo y SWF. Los archivos MOV, AVI y MPEG no son compatibles con el formato SWF.

Cree un nuevo documento InDesign, elija el menú Archivo > Colocar, o presione Ctrl+D.

En el cuadro Colocar seleccione el archivo de sonido o de película y haga clic en el botón Abrir. Se creará un marco contenedor para el archivo multimedia en la página del documento InDesign.

1. Archivos de sonido

Coloque un clip de sonido MP3 en el documento InDesign.

Elija el menú Ventana > Interactivo y haga clic en la opción Multimedia para abrir el panel Elemento multimedia, que sirve para cambiar la configuración del clip de sonido.

Seleccione el marco contenedor del clip de sonido y observe su configuración.

Haga clic en el botón Reproducir en el panel Elemento multimedia para reproducir el archivo multimedia.

Si desea que el clip de sonido se reproduzca al cargar la página, marque la casilla de opción Reproducir al cargar la página.

La opción Detener al pasar la página detiene la reproducción del archivo de sonido al pasar a una página distinta. Si el archivo de audio no tiene formato MP3, esta opción aparece atenuada.

Marque la casilla de opción Bucle para que la reproducción sea repetitiva.

Configurar el Póster

El póster es una imagen representativa de un clip de película o de sonido.

En el panel Elemento Multimedia elija una opción para el póster:

• Ninguno. No muestra ningún póster para el clip multimedia
• Estándar. Muestra un póster genérico que no está basado en el contenido del archivo. Para cambiar el póster estándar guarde una imagen como StandardMoviePoster.jpg o StandardSoundPoster.jpg y sustituya el archivo existente del mismo nombre, que se encuentra en la carpeta Presets/Multimedia de la aplicación
• Elegir imagen. Para seleccionar una imagen para usarla como póster. Haga doble clic en la imagen que desea usar. Puede seleccionar gráficos de mapas de bits y no gráficos vectoriales

Exportar el documento InDesign

El clip de sonido añadido en el documento InDesign se puede reproducir una vez exportado el documento en formato SWF o PDF interactivo.

Elija el menú Archivo > Exportar, o presione Ctrl+E, para exportar el documento InDesign.

Exporte en formato Flash Player (SWF). En Interactividad y multimedia no olvide activar el botón de opción Incluir todo. Abra el archivo exportado con Adobe Media Player o con un navegador web con Adobe Flash Player instalado. Se reproducirá el clip de sonido al cargar la diapositiva.

Exporte el documento InDesign en formato PDF interactivo. En Formularios y medios no olvide activar el botón de opción Incluir todo.

Abra el archivo exportado con Adobe Reader. Se reproducirá el clip de sonido al cargar la página. Para ejecutar contenido interactivo en el Adobe Reader deberá tener Adobe Flash Player instalado.

Haga clic con el botón derecho sobre el objeto multimedia, elija la opción Ver en ventana flotante y coloque la ventana del clip de sonido fuera de la página del documento PDF.

2. Archivos de video

Coloque un clip de película MP4 en el documento InDesign.

Elija el menú Ventana > Interactivo y haga clic en la opción Multimedia para abrir el panel Elemento multimedia, que sirve para cambiar la configuración del clip de video.

Seleccione el marco contenedor del clip de película y observe su configuración.

Haga clic en el botón Reproducir en el panel Elemento multimedia para reproducir el clip de video.

Despliegue el menú Controlador y elija el controlador SkinOverAll, una máscara de controlador prediseñada que permitirá al usuario poner el clip en pausa, iniciar y detener la película, controlar el volumen, etc.

Marque la casilla de opción Mostrar controlador al pasar sobre objeto.

Haga clic en el botón Previsualizar pilego, en el ángulo inferior izquierdo del panel. Se abrirá el panel Vista previa de SWF y se reproducirá el clip. Durante la reproducción, acerque el cursor al marco contenedor del video. Aparecerá el controlador SkinOverAll, que permite hacer pausas, controlar el volumen, etc.

Cierre el panel Vista previa de SWF y guarde los cambios en el documento InDesign.

Exportar el documento InDesign

El clip de película añadido en el documento InDesign se puede reproducir una vez exportado el documento en formato SWF o PDF interactivo.

Elija el menú Archivo > Exportar, o presione Ctrl+E, para exportar el documento InDesign.

Exporte en formato Flash Player (SWF). En Interactividad y multimedia no olvide activar el botón de opción Incluir todo. Abra el archivo exportado con Adobe Media Player o con un navegador web con Adobe Flash Player instalado. Se reproducirá el clip de video al cargar la diapositiva.

Exporte el documento InDesign en formato PDF interactivo. En Formularios y medios no olvide activar el botón de opción Incluir todo.

Abra el archivo exportado con Adobe Reader. Se reproducirá el clip de video al cargar la página. Para ejecutar contenido interactivo en el Adobe Reader deberá tener Adobe Flash Player instalado.

3. Galerías de imágenes

El panel Estados de objeto de InDesign permite crear una proyección de diapositivas o galería de imágenes. El procedimiento consiste de los siguientes pasos:

Preparar los archivos de imagen (Photoshop)

Vamos a crear una galería de imágenes interactiva utilizando las siguientes imágenes:

Abra cada una de las imágenes con Photoshop, elija la herramienta Recortar y para cada imagen ajuste el tamaño del recorte en 1024 px de anchura, 768 px de altura y 150 píxeles/pulgada.

Para cada imagen elija el menú Imagen > Modo > Color RGB y guarde en formato JPG con los nombres diapo1, diapo2, etc.

Colocar y alinear las imágenes (InDesign)

En el segundo paso debemos colocar y alinear las imágenes en el documento InDesign.

Elija el menú Archivo > Colocar, o presione Ctrl+D, seleccione todas las imágenes y haga clic en el botón Abrir. Las imágenes se cargarán en el cursor y estarán listas para ser colocadas en el documento InDesign.

Haga clic en diferentes sitios de la página del documento hasta descargar todas las imágenes. Como ya hemos definido su tamaño con Photoshop, no será necesario modificarlo en InDesign.

Seleccione todos los marcos gráficos y utilice el panel Alinear (Mayús+F7) para alinear las imágenes horizontal y verticalmente.

Crear un objeto con varios estados

El siguiente paso es crear un objeto con varios estados.

Elija el menú Ventana > Interactivo > Estados de objeto para abrir el panel Estados de objeto.

También puede elegir el Espacio de trabajo Publicación digital de InDesign:

Y luego abrir el panel Estados de objeto:

Seleccione las imágenes y haga clic en el botón Convertir selección en objeto de varios estados, en la parte inferior del panel.

Escriba un nombre para el nuevo objeto multi-estado, por ejemplo Galeria  Eiffel, y presione la tecla Enter. Se creará el objeto de varios estados.

No escriba signos de puntuación ni caracteres especiales en los nombres de objeto ni de los estados de objeto.

El panel Folio Overlays

Utilice el panel Folio Overlays de InDesign para cambiar la configuración de la proyección de diapositivas:

Seleccione el objeto de varios estados y especifique los ajustes en el panel:

• Reproducción automática. La proyección de diapositivas comenzará a reproducirse cuando el usuario acceda a la página.
• Tocar para reproducir/pausa. Esta opción permite al usuario tocar para reproducir y realizar una pausa en una proyección de diapositivas que se ejecute automáticamente. Al tocar dos veces se restablece la proyección.
• Retraso. Si la opción Reproducción automática está seleccionada, puede especificar el tiempo que debe transcurrir entre la carga de la página y el inicio de la proyección de diapositivas. Especifique un valor entre 0 y 60 segundos, por ejemplo 1 s.
• Intervalo. Si la opción Reproducción automática o Tocar para reproducir/pausa está seleccionada, el valor Intervalo determinará durante cuánto tiempo se mostrará cada diapositiva. Especifique un valor de 2 s.
• Tiempo de reproducción. Si la opción Reproducción automática o Tocar para reproducir/pausa está seleccionada, puede especificar el número de veces que se reproducirá la proyección de diapositivas. Esta opción está atenuada si se ha seleccionado Bucle. Es una buena opción que el pase de diapositivas se reproduzca por sí mismo por lo menos una vez cuando se carga la página, de esta forma el usuario podrá ver el efecto del paso de diapositivas sin tener que intervenir y además esto servirá para indicarle al usuario que el objeto es un elemento interactivo.
• Bucle. Si la opción Reproducción automática o Tocar para reproducir/pausa está seleccionada, elija Bucle para reproducir la proyección de diapositivas de forma continua, hasta que el usuario toque dos veces la proyección o pase la página.
• Detener en la última imagen. Si la opción Reproducción automática o Tocar para reproducir/pausa está seleccionada, elija Detener en la última imagen para detenerse en la última imagen de la proyección de diapositivas en lugar de en la primera.
• Fundido cruzado. Esta opción crea una transición de fundido a la siguiente diapositiva. El valor predeterminado es de 0,5 segundos. Puede especificar un valor entre 0,125 y 60 segundos. Este valor se aplica tanto a las presentaciones de diapositivas que se reproducen automáticamente como a las que se pasan manualmente.
• Barrido para cambiar imagen. Si desea permitir que el usuario realice un barrido para pasar de una diapositiva a otra, desactive todas las opciones del panel excepto Barrido para cambiar de imagen.
• Detener en la primera y última imagen. Con esta opción se determina si la proyección de diapositivas deja de reproducirse o continúa cuando se llega a la última diapositiva avanzando o cuando se llega a la primera diapositiva retrocediendo. Esta opción solo afecta al barrido.
• Ocultar antes de reproducir. La proyección de diapositivas permanece oculta hasta que el usuario toque un botón para mostrar una diapositiva.
• Reproducir en sentido inverso. La proyección de diapositivas reproduce las imágenes en orden inverso.
• Formato de exportación en artículos PDF. Si la proyección de diapositivas aparecerá en un documento PDF, puede elegir la opción Rasterizado (de mapa de bits) o Vectorial. El formato vectorial es útil para crear una única publicación con texto más nítido para un dispositivo iOS HD, aunque tarda más en cargarse. Utilice la opción Vectorial en las proyecciones de diapositivas con mucho texto y la opción Rasterizado para las proyecciones basadas en imágenes o para crear representaciones distintas para los formatos SD y HD de los dispositivos iOS.

Elija el menú Archivo > Vista previa de la publicación para hacer una vista previa de la proyección de diapositivas.

Se abrirá el Adobe Content Viewer o Desktop Viewer, una aplicación que permite obtener una vista previa de las publicaciones en pantalla.

El botón Vista previa en el ángulo inferior izquierdo del panel Folio Overlays, también permite hacer una previsualización de la proyección de diapositivas en el Adobe Content Viewer.

Agregar botones interactivos

Finalmente debemos crear botones interactivos que nos sirvan para navegar hacia los diferentes estados de nuestro objeto con varios estados.

Para navegar por las diapositivas usaremos las acciones Ir al estado siguiente e Ir al estado anterior y para ir a una diapositiva específica usaremos la acción Ir a estado.

El panel Botones y formularios de ejemplo de InDesign incluye una biblioteca con botones de navegación que puede seleccionar y arrastrar hacia la página del documento.

Si utiliza estos botones de ejemplo, elimine la acción predeterminada y reemplácela por la acción que corresponda. Si desea que la apariencia del botón cambie cuando se toca, haga clic en [Clic] en el área Apariencia y cambie su aspecto. El estado [Al pasar sobre él] no se admite en los dispositivos móviles.

Elija el menú Archivo > Vista previa de la publicación o haga clic en el botón Vista previa en el ángulo inferior izquierdo del panel, para hacer una vista previa de la proyección de diapositivas en el Adobe Content Viewer.

Exportar el documento InDesign

La galería de imágenes añadida en el documento InDesign no se reproducirá en un PDF interactivo, pero sí una vez exportado el documento en formato SWF.

Elija el menú Archivo > Exportar, o presione Ctrl+E, para exportar el documento InDesign.

Exporte en formato Flash Player (SWF). En Interactividad y multimedia no olvide activar el botón de opción Incluir todo.

Abra el archivo exportado con Adobe Media Player o con un navegador web con Adobe Flash Player instalado.