Tutorial 3: Adición de superposiciones interactivas

A lo largo de este tutorial, trabajará con la carpeta CityGuide_Folio de la carpeta TutorialAssets. Creará objetos interactivos directamente en InDesign. A continuación se muestra la apariencia que debería tener la primera página del artículo principal en el iPad al finalizar esta lección.

Apariencia de una publicación completa en un iPad

A. Vista horizontal B. Vista vertical C. Hipervínculos D. Superposiciones de vídeo  

Si aún no lo ha hecho, descargue los archivos del tutorial. Consulte Configuración de tutorial.

Importación de artículos

En la lección anterior, creó un artículo abriendo el documento de origen y seleccionando Añadir artículo. También puede importar artículos. Si usa las convenciones de nombre de archivo y estructura de carpetas correctas, puede importar uno o varios artículos.

Cuando importe un artículo, trabaje con una carpeta de artículos. Cuando importe varios artículos, trabaje con la carpeta de publicaciones.

  1. Antes de importar artículos, abra los documentos de origen de InDesign de la carpeta TutorialAssets > CityGuide_Folio para asegurarse de que todos los vínculos están actualizados y los archivos guardados.

  2. Vaya a la vista de artículo y seleccione Importar artículo en el menú del panel Folio Builder.

  3. Seleccione Importar varios artículos.

  4. Haga clic en el icono de la carpeta Ubicación y vaya a TutorialAssets > CityGuide_Folio. Haga clic en Abrir.

    Seleccione la carpeta CityGuide_Folio, no una subcarpeta.

  5. Haga clic en OK para importar los artículos de la carpeta CityGuide_Folio y cárguelos al servidor.

  6. Arrastre y suelte el artículo “WiFi Ad” al final de la lista.

    El panel Folio Builder tras importar los artículos

Cambio de las propiedades de la publicación

  1. En el panel Folio Builder, haga clic en el icono de flecha para volver a la vista de publicaciones. Seleccione la publicación City Guide y, en el panel Folio Builder, seleccione Propiedades de la publicación.

  2. Para el nombre de la publicación, escriba City Guide Monthly.

    El nombre del documento es distinto del nombre de la publicación. El nombre del documento aparece en el visor. El nombre de la publicación se utiliza para fines internos, tales como la vinculación y la configuración de representaciones.

  3. Si aún no lo ha hecho, especifique cover_v.jpg para Vertical y cover_h.jpg para Horizontal, y haga clic en OK. Estas imágenes de portada aparecen en la carpeta CityGuide_Folio.

    La vista previa de portada aparece en la biblioteca del visor. Las vistas previas de portada son necesarias para publicar la aplicación.

    Cuadro de diálogo Propiedades de la publicación

Adición de un hipervínculo interactivo

Ahora editará los archivos “Enjoy” para incluir objetos interactivos.

InDesign incluye muchas características interactivas. Sin embargo, solo algunas funcionan con las herramientas de publicación digital. Además de las características originales compatibles, el panel Overlay Creator incluye las superposiciones interactivas que solo funcionan con las herramientas de publicación digital.

En primer lugar, cree un objeto de hipervínculo para el logotipo “D. I. Y. Meet”.

  1. En el panel Folio Builder, vaya a la vista de diseño de Enjoy_Article y haga doble clic en Maquetación vertical para abrir Enjoy_v.indd.

  2. Seleccione la herramienta Rectángulo de la barra de herramientas y, a continuación, arrastre un rectángulo sobre el logotipo “D. I. Y. Meet” de la primera página. Asegúrese de que el rectángulo no tiene ningún trazo ni relleno.

  3. Abra el panel Hipervínculos (elija Ventana > Interactivo > Hipervínculos) y, a continuación, elija Nuevo hipervínculo en el menú del panel.

  4. Seleccione URL en el menú Vincular a, y escriba una dirección URL en el campo URL (hemos utilizado http://www.bikeworks.org/). Anule la selección de Destino de hipervínculo compartido. En Apariencia, deje seleccionados Rectángulo invisible y Ninguno. Haga clic en OK.

    Aplicación de un hipervínculo a un marco rectangular

  5. En el panel Folio Builder, haga doble clic en Maquetación horizontal para abrir el documento Enjoy_h.indd. Copie el objeto de hipervínculo del archivo Enjoy_v.indd y péguelo en el archivo Enjoy_h.indd. Coloque el objeto sobre el logotipo “D.I.Y. Meet”.

  6. Para generar rápidamente la vista previa del documento, guarde el documento y seleccione Archivo > Vista previa de la publicación. Haga clic en el hipervínculo. Salga de Adobe Content Viewer.

De forma predeterminada, los hipervínculos se abren en un visor de la aplicación, no en el navegador del dispositivo móvil. Puede usar el panel Overlay Creator para cambiar la configuración de forma que los hipervínculos se abran en un sitio web en el navegador Safari del dispositivo móvil. Aprenderá más acerca del panel Overlay Creator a continuación.

Creación de una superposición de película

Las películas que añada a un documento de InDesign pasan a ser interactivas al compilar los archivos. Añadirá el vídeo y después usará el panel Overlay Creator para cambiar la configuración. Se tratará de una película sobre ciclismo.

  1. En el archivo Enjoy_h.indd, seleccione Archivo > Colocar, busque la carpeta GityGuid_Folio > Enjoy_Article > Vínculos y haga doble clic en cycling_432x234.mpg. Coloque el archivo de película en la esquina superior derecha.

    Los diseñadores han creado una imagen de vídeo con un icono de película para indicar que el objeto es interactivo. A continuación, usará esa imagen como póster.

  2. En el panel Multimedia (Ventana > Interactivo > Multimedia), seleccione Elegir imagen en el menú emergente Póster. En la carpeta CityGuide_Folio > Enjoy_Article > Vínculos, haga doble clic en cyclist.jpg.

    Aparece la nueva imagen de póster. Ahora, usaremos el panel Overlay Creator para determinar cómo se reproducirá la película.

  3. Seleccione Ventana > Extensiones > Overlay Creator para abrir el panel Overlay Creator.

  4. Con el objeto de película aún seleccionado, en el panel Overlay Creator, seleccione Tocar para ver controlador.

    Uso de Overlay Creator para editar la configuración de la película

  5. Con la herramienta Selección, copie la imagen, cambie a Enjoy_v.indd y péguela. Vaya al área vacía de la primera página y alinéela con los objetos del entorno.

  6. Para generar la vista previa de la película, guarde el documento y seleccione Archivo > Vista previa de la publicación. Haga clic en la película para reproducirla. Salga de Adobe Content Viewer.

Creación de una superposición de proyección de diapositivas

A continuación, crearemos una proyección de diapositivas interactiva con el panel Estados de objeto. Ya hemos añadido las imágenes a la segunda página del archivo vertical “Enjoy”. Deberá organizarlas en una pila, convertirlas en un objeto de varios estados y crear botones de desplazamiento por las diapositivas.

  1. Abra Enjoy_v.indd en InDesign y vaya a la página 2.

  2. Seleccione las siete imágenes entre las flechas rojas y, a continuación, haga clic en los botones Alinear centros horizontales y Alinear centros verticales del panel de control. Centre las imágenes entre las flechas.

  3. Con las imágenes aún seleccionadas, elija Ventana > Interactivo > Estados de objeto para mostrar el panel Estados de objeto. Haga clic en el botón Convertir selección en objeto de varios estados.

    Imágenes combinadas en un objeto de varios estados

    Cada imagen aparece como un estado independiente en el panel Estados de objeto.

  4. En el panel Estados de objeto, cambie el nombre de objeto a Sea Slugs.

    Cuando el iPad se gira, el estado se recuerda si los objetos de varios estados de los documentos horizontales y verticales tienen el mismo nombre. Ahora que ha creado el objeto de varios estados, debe habilitar el desplazamiento de los usuarios a través de ellos.

  5. Elija Ventana > Interactivo > Botones para mostrar el panel Botones y, a continuación, seleccione la flecha roja de la izquierda.

  6. Haga clic en Convertir el objeto en un botón y, a continuación, elija Ir al estado anterior desde el icono más que se sitúa junto a Acciones.

    Creación de los botones de navegación

    A continuación, haremos que el aspecto del botón cambie ligeramente cuando el usuario lo toque.

  7. En el panel Botones, haga clic en el icono Sombra paralela del panel de control.

  8. Seleccione la flecha roja de la derecha, conviértala en un botón y aplique la acción Ir al siguiente estado. Aplique una sombra paralela a la apariencia [Clic].

    Los botones permiten a los usuarios pasar de una imagen a otra. Hagamos también que sirvan para pasar de una diapositiva a otra.

  9. Seleccione el objeto de varios estados. En el panel Overlay Creator, seleccione Barrido para cambiar imagen.

    Activación del barrido para la proyección de diapositivas

  10. Copie las flechas y el objeto de varios estados del archivo Enjoy_v.indd y péguelos en la página 2 del archivo Enjoy_h.indd. Mueva las flechas bajo el objeto de varios estados para un mejor ajuste.

  11. Para generar la vista previa de la proyección de diapositivas, guarde el documento y seleccione Archivo > Vista previa de la publicación. Haga clic en los botones de navegación para cambiar de diapositivas. Salga de Adobe Content Viewer.

Creación de una superposición de panorámica

Las panorámicas requieren seis imágenes; cada una representa una cara del cubo.

  1. Abra Enjoy_v.indd y vaya a la página 3.

  2. En el cuadro de herramientas, seleccione la herramienta Marco rectangular y arrastre para crear un rectángulo de cualquier tamaño.

  3. En el panel Overlay Creator, seleccione Panorama.

  4. Haga clic en la carpeta de origen y seleccione la carpeta CourtyardPano en la carpeta CityGuide_Folio > Enjoy_Article > Vínculos. Haga clic en Abrir.

    El rectángulo marcador de posición ha tomado la forma de las imágenes panorámicas, pero nos interesa que el área de clic sea más pequeña.

  5. Con las teclas Ctrl+Mayús (Windows) o Comando+Mayús (Mac OS) pulsadas, arrastre una selección para cambiar el tamaño del objeto de panorámica hasta que alcance aproximadamente 400 x 400 píxeles.

    Creación de una superposición de panorámica

    Usemos la configuración predeterminada para que la panorámica tenga un rango de movimiento completo.

  6. Copie el objeto de panorámica del archivo Enjoy_v.indd y péguelo en la página 3 del archivo Enjoy_h.indd.

  7. Guarde y cierre los archivos de InDesign.

Vista previa de la publicación en un iPad (solo para Mac OS)

A continuación, utilice la función Vista previa en dispositivo para obtener una vista previa de su publicación. Si está usando un ordenador con Windows, vaya al siguiente apartado para obtener información sobre cómo obtener una vista previa mediante la carga y descarga de archivos.

  1. Si no lo ha hecho aún, instale Adobe Content Viewer desde App Store en el iPad. En la App Store, busque “Content Viewer”.

  2. Conecte el iPad al ordenador Mac OS e inicie la aplicación de Adobe Content Viewer.

  3. En el panel Folio Builder, vaya a la publicación City Guide que acaba de crear.

  4. En la parte inferior del panel, seleccione Vista previa > Vista previa en [nombre del dispositivo iPad].

  5. Vea la publicación de la revista City Guide.

    • Gire el iPad, de forma que pueda ver las versiones horizontales y verticales del archivo.

    • Haga un gesto de barrido hacia la izquierda o derecha para ver artículos diferentes. Haga un gesto de barrido hacia arriba o abajo para leer un artículo.

    • Busque el artículo “Enjoy”. Compruebe que las superposiciones interactivas funcionan.

    • Toque un área no interactiva para mostrar las barras de navegación y toque el botón de inicio para ir al principio de la publicación. Toque el botón de tabla de contenidos, situado en la esquina superior izquierda para ver la tabla de contenidos y las miniaturas. Deslice la barra de desplazamiento para navegar por las vistas previas del artículo.

    Toque para mostrar las barras de navegación en Adobe Content Viewer

Carga y vista previa de los archivos

También puede obtener una vista previa de las publicaciones en el iPad, si inicia sesión en el panel Folio Builder, carga la publicación y, a continuación, la descarga.

  1. En el panel Folio Builder, seleccione Iniciar sesión en el menú del panel. Después, inicie sesión con un ID de Adobe que se haya comprobado que funciona con DPS.

    Si está abonado a Creative Cloud, utilice dichas credenciales. Si no está abonado a Creative Cloud, inicie sesión en http://digitalpublishing.acrobat.com/es y siga las indicaciones para verificar su cuenta.

  2. Tras iniciar sesión, seleccione la publicación City Guide en el panel y elija Cargar en Folio Producer en el menú del panel.

    Los activos de la publicación se cargan en el servidor de Acrobat.com.

  3. Si no lo ha hecho aún, instale Adobe Content Viewer desde App Store en el iPad.

    Nota:

    Si tiene otro dispositivo móvil, como un tablet Android o Kindle Fire, puede descargar Adobe Content Viewer desde Google Play o Amazon Appstore.

  4. Inicie Adobe Content Viewer en el iPad.

  5. Si aún no ha iniciado sesión, toque el botón Iniciar sesión. Inicie sesión con el mismo ID de Adobe que ha utilizado para iniciar sesión en el panel Folio Builder.

    El iPad debe estar conectado a Internet para poder conectarse.

  6. Cuando se le solicite, descargue y visualice la publicación de la revista City Guide.

    Si modifica cualquier documento de origen de InDesign, seleccione el artículo y elija Actualizar en el menú del panel para actualizar los artículos. En Adobe Content Viewer en el iPad se le preguntará si desea descargar la publicación actualizada.

¿Y ahora qué?

Ya conoce los conceptos básicos de la creación de artículos y publicaciones y puede añadir superposiciones interactivas. Para obtener más información sobre las superposiciones y otras funciones de DPS, realice una de las siguientes acciones:

  • Abra los documentos de origen en Overlay_Examples_Folio y pruebe los diferentes activos de superposición. Puede editar las superposiciones de los documentos existentes o crear sus propias superposiciones.

  • Descargue la aplicación gratuita “DPS Tips”. Busque “DPS Tips” en la App Store del iPhone o iPad; o realice una búsqueda en Google Play Store para dispositivos con Android o en Amazon Appstore para Kindle Fire.

  • ¿Desea publicar una aplicación en el App Store de Apple? Si está abonado a Adobe Creative Cloud, puede crear y enviar un número ilimitado de aplicaciones de una sola publicación para iPad. O bien, puede adquirir una licencia Single Edition para crear una aplicación de una sola publicación. Cuando esté listo para crear su aplicación, seleccione la publicación en el panel Folio Builder y elija Crear aplicación en el menú del panel. Se le pedirá que especifique si desea descargar la guía de publicación paso a paso. Siga las instrucciones que aparecen en esta guía para crear su primera aplicación.

  • Si desea crear aplicaciones de varias publicaciones, puede obtener una suscripción Enterprise o Professional a Digital Publishing Suite.

Logotipo de Adobe

Inicia sesión en tu cuenta