Abordando Rich Media para tabletas con Adobe CS5 Parte 2

En el artículo anterior, le expliqué cómo uno usa una variedad de aplicaciones para crear los activos para una revista interactiva y luego el proceso de agregar medios, movimiento e interactividad a esos activos en InDesign CS5. Este artículo se centrará en el juego final: enviará el proyecto para su entrega a través de una página web o enviará el proyecto a Flash para obtener más trabajo y enviarlo a un SWF o incluso a una aplicación de AIR.


Introducción

La razón por la que estoy usando un diseño estilo revista aquí es para demostrar muchas de las características de InDesign CS5. Admito que desde el principio, el tamaño de la página puede parecerle a muchos de ustedes un poco más grande. Recuerde, puede usar cualquier tamaño de página que necesite y sospecho que uno de los tamaños más comunes será de 800x600. Aún así, la elección depende de usted..

Antes de profundizar, tratemos con el inevitable "¿Por qué un SWF?" y "¿Por qué un archivo flash?" preguntas Son válidos y la respuesta puede sorprender a algunos de ustedes..

Durante demasiados años, los diseñadores se han visto obligados a sentarse en las sillas a lo largo de la pared en la velada de Flash. Podrían tener algunas ideas geniales, pero su influencia disminuyó al mismo ritmo que aumentaron sus contrapartes de Desarrollador. A medida que nos adentramos en un ámbito de las comunicaciones digitales en el que el papel y las pantallas no se consideran más que medios de visualización, el diseño gráfico se vuelve cada vez más importante. Los proyectos diseñados para imprimir, como ha visto, pueden salir de la página de impresión estática y la interactividad, los elementos de audio y video pueden integrarse directamente en el diseño.

El formato SWF, especialmente con la versión Flash Player 10.1, que pone a un monstruo de un reproductor multimedia en manos de todos los que tienen acceso a una pantalla, le permite crear prototipos rápidos para sus clientes. El solo hecho de que lo "entendamos" no significa que sus clientes lo harán. Hacer el salto intelectual del papel a la pantalla será una nueva experiencia y poner un swf en sus manos les permite "ver" de lo que estás hablando.

El formato Flash absolutamente emocionará a los desarrolladores. El proyecto se desglosará y se volverá a ensamblar en piezas compatibles con Flash que requerirán las habilidades de un desarrollador de Flash con experiencia para revivir. No hay nada de esto: "Sí, solo haz que salga a Flash y estás en el juego". que siempre parece llamar la atención de personas que nunca han usado Flash. Como me gusta decir, "No va a suceder". Verás por qué estoy diciendo eso más adelante.

A partir de ahí, el flujo de trabajo normal de Flash se afianza cuando el desarrollador reúne los archivos de clase, el código y los elementos de medios que se construyen, y en muchos casos incluso mejoran, gracias a los esfuerzos del Diseñador gráfico. Lo que emocionará a los diseñadores es que Flash CS5 hace todo lo posible para adaptarse a la integridad del diseño. Una vez que se complete este proceso, el proyecto se puede enviar como resultado del SWF final para incorporarlo en una página web a una aplicación AIR 2.0.

Empecemos:


Paso 1: Exportar como un SWF

Con el documento de InDesign abierto, seleccione Archivo> Exportar para abrir el cuadro de diálogo Exportar. Seleccione Flash Player (SWF) en el menú desplegable Formato y haga clic en Guardar.

Sus opciones son, en su mayor parte, autoexplicativas, pero hay una pareja aquí que puede llamar su atención:

InDesign Markup (IDL): Este formato permite abrir el documento en InDesign CS4. Esto no es algo que nos preocupe..

Fragmento de InDesign: Esto no tiene absolutamente nada que ver con la función de fragmento de código de Flash CS5. Le permite guardar y reutilizar objetos en la página de InDesign.

XML: Apuesto a que te llamó la atención. No se entusiasme demasiado con este porque requiere mucho trabajo adicional por parte de los desarrolladores. Si está intrigado con esta opción, entienda que solo puede exportar XML después de haber:

  • Creó y cargó las etiquetas de elementos apropiadas..
  • Aplica esas etiquetas a los elementos de las páginas..
  • Se abrió el panel Estructura y se ajustó la jerarquía si fuera necesario..

Eso sí, si esto "flota tu bote", pégate.


Paso 2: Preferencias generales

Cuando se abra el cuadro de diálogo Exportar SWF, determine sus preferencias generales para el SWF.

Vayamos a través de sus opciones:

  • Exportar: Puede optar por exportar una parte de una página, el documento completo o un rango de páginas. La selección del archivo HTML generado creará el contenedor HTML para el SWF y la última opción, Ver SWF después de exportar, abrirá la página HTML o SWF y le permitirá tomar el proyecto para un viaje de prueba.
  • Tamaño (píxeles): Estas opciones le permiten elegir el tamaño físico del SWF final. Por ejemplo, el menú desplegable Ajustar a: le ofrece una amplia gama de tamaños comunes o puede configurar los suyos propios. Si cambia el tamaño físico del documento, se mantendrá la integridad del diseño, lo que eliminará la discusión del "tamaño físico" de la tabla..
  • Fondo: Si elige transparente se utilizará el color de fondo del HTML..
  • Interactividad y Medios de Comunicación: Seleccione Solo apariencia y todos los elementos interactivos y medios se convierten en marcadores de posición.
  • Transición de página: Puede aplicar un rango de efectos cursis desde Blinds hasta Alejar. Si estás en PowerPoint, estás en el cielo. De lo contrario, simplemente ignora este.
  • Rizo de página interactivo: Esta es una opción muy buena. Haga clic y arrastre una página de giro y la página gira. Sin embargo, esto no está del todo listo para el horario estelar. Encuentro esta función un poco difícil de usar porque, si no lo haces bien, la página retrocede. Encontré que usar un botón para este propósito de navegación es más útil.

Paso 3: Preferencias avanzadas

En el cuadro de diálogo Exportar SWF, haga clic en la pestaña Avanzado para abrir las opciones avanzadas.

Aquí es donde los profesionales se hacen cargo porque este panel determinará cómo funciona el SWF. Vayamos a través de sus opciones:

  • Cuadros por segundo: La velocidad de fotogramas SWF se establece aquí. Tenga en cuenta que la tasa predeterminada, 24 fps, es la que usa Flash.
  • Texto: Aquí tienes tres opciones. El texto Flash Classic se imprimirá como texto de búsqueda y resultará en el tamaño de archivo más pequeño. Convert To Outlines es una buena opción si solo tiene titulares. En este proyecto, esta elección es incorrecta porque hay un golpe de texto de cuerpo. Convertir a píxeles aplanará el texto en un mapa de bits y toda la maldad que conlleva.
  • Manejo de imágenes: Estas opciones son muy familiares para cualquiera que haya publicado un SWF..

Paso 4: Haga clic en Aceptar para publicar el SWF

Al hacer clic en Aceptar, se crea el archivo SWF y, como puede ver en la captura de pantalla, el proyecto se abre en una página Web..


Paso 5: La carpeta SWF

Aceptar, minimizar InDesign y abrir la carpeta SWF ...

Solo para que todos estemos en la misma página, por así decirlo, aquí están los archivos que se atascan allí:

  • Recursos: Se trata de los medios externos, incluidos los aspectos FLVPlayback, utilizados en el documento..
  • HTML: El contenedor HTML para el SWF.
  • SWF: El swf que acabas de crear.

Si se está preguntando acerca de las imágenes, los botones y el texto, todos están incrustados en el SWF..


Paso 6: Salida a Flash CS5:

Para un desarrollador o diseñador de Flash, ir inmediatamente a un SWF es "simplemente no está hecho". No podría estar mas de acuerdo. Creo que la función de video es un poco "básica" y no soy muy fanática de poner un aspecto de video sobre el video mientras se reproduce. También puedo usar los distintos paneles para "cablear" los botones y así sucesivamente cuando puedo hacerlo de manera más eficiente utilizando ActionScript 3.0, lo que hace que estas características "extrañas" de InDesign se parezcan más a juguetes "de cuerda" que a cualquier otra cosa. Todavía presentan una oportunidad para probar la funcionalidad, por lo que tienen un uso. Aun así, si desea crear un SWF ligero, medio y de carga rápida, Flash es la siguiente parada en el proceso..

Antes de que me entusiasme con esto, debe saber que esta técnica, como pronto aprenderá, funciona mejor entre Flash CS5 e InDesign CS5; de hecho, es el único formato Flash disponible para usted. Además, Adobe ha descontinuado la opción de exportación de XFL en InDesign. Fue simplemente para dar a InDesign CS4 la capacidad de pasar a Flash. Flash Export lo reemplaza.

Finalmente antes de exportar, asegúrese de crear un nuevo directorio para guardar los archivos.

Empecemos.


Paso 7: Exportar como FLA

Seleccione Archivo> Exportar> Flash CS5 Professional (FLA) y haga clic en el botón Guardar para abrir el cuadro de diálogo Exportar Flash CS5 Professional (FLA).


Paso 8: Elija sus opciones de exportación

Muchas de las opciones se pueden encontrar en el área general del cuadro de diálogo de exportación SWF. El nuevo es texto.

Tienes cuatro opciones. Tres: el texto clásico, Convertir a contornos y Convertir a píxeles ya se han cubierto. El nuevo es el texto Flash TLF. Esta es la nueva forma de administrar texto en Flash CS5. TLF significa Marco de diseño de texto y es la característica que lleva la tipografía a Flash. Cualquier cambio tipográfico que realice en InDesign se transferirá, intacto, a Flash. Esta es una gran noticia para los diseñadores. La mala noticia es que esta función solo funciona con Flash CS5 y con Flash Player 10 o superior.

La selección de Insertar puntos de separación de guiones discrecionales "rompe" las palabras cuando chocan contra el borde de un cuadro de texto.

Antes de exportar a Flash, es posible que desee realizar una verificación de "verificación previa" para asegurarse de que realmente obtiene WYSIWYG. Entre las cosas para comprobar:

  • Color: No creas que puedes tomar un diseño CMYK y colocarlo en Flash. Flash utiliza el espacio de color RGB y cualquier color directo (Pantone es un gran ejemplo) se cambiará al espacio RGB.
  • Transparencia: Asegúrese, especialmente al exportar al formato SWF, que los objetos transparentes no se superponen con ningún elemento interactivo. Existe el riesgo de que la interactividad se pierda..
  • Atributos 3D: Cualquier efecto 3D utilizado en InDesign - Texto en una ruta - no se moverá a Flash ni al SWF.
  • Fuentes: TLF solo funciona con fuentes OpenType y TrueType. No se permiten fuentes postscript.

Paso 9: La carpeta de Flash

Minimiza InDesign y abre la carpeta Flash.

La única diferencia que debe ver entre el contenido de esta carpeta y el de su contraparte SWF es la inclusión de un archivo .fla.


Paso 10: Flash CS5

Tome la .fla y ábrala en Flash CS5 (aquí es donde se pone realmente genial).

En primer lugar, la película solo tiene tres cuadros. La razón es que cada propagación en InDesign, y hay tres de ellas en este documento, está envuelta en su propio movieclip (llamado "Spread-xxx") en la Biblioteca. Todos los botones utilizados en el documento de InDesign se convierten en símbolos de botones en la Biblioteca de Flash y cada una de las imágenes utilizadas en la presentación de diapositivas (un objeto de varios estados en InDesign) se convierte en un clip de película y las imágenes se agregan a Flash. biblioteca como símbolos de mapa de bits.

La mala noticia, y para muchos de ustedes esta no es realmente una mala noticia, es que toda la interactividad se pierde. Deberá "volver a cablear" el proyecto con ActionScript 3.0.


Paso 11: Animación

Vamos a discutir la apertura de un clip de película que contiene un objeto animado.

En este proyecto hay un bloque de texto animado en la página 3 que comienza con un valor Alfa de 0 y usa el efecto Volar desde arriba en InDesign. Estos efectos se mueven, intactos, a Flash, se agregan a las capas de movimiento y las rutas son completamente editables en Flash.


Paso 12: Seleccionar texto

Haga doble clic en una extensión en la línea de tiempo principal para abrir el clip de película y haga clic en un bloque de texto.

Como puede ver, todo el formato de texto, incluido el flujo entre contenedores, aplicado en InDesign se refleja en las propiedades de texto del contenedor de texto en Flash CS5. Esto es enorme Lo único que falta es el ajuste de texto; no se moverá entre InDesign y Flash. Lo que sí se mueve, sin embargo, son las imágenes en línea. Estas son imágenes o elementos gráficos agregados a contenedores de texto en InDesign como elementos en línea. Una vez más, esto es enorme.


Paso 13: Seleccione el video

El video y el audio, activos externos típicos, no se mueven a Flash. Cualquier video se reemplaza con un marcador de posición de mapa de bits del marco del póster del video de InDesign CS5 y el audio se ignora. Nuevamente, estos dos tipos de medios se manejan mejor a través de ActionScript 3.0, por lo que no es una gran pérdida. De hecho, el marcador de posición de video se puede reemplazar con un componente FLVPlayback u objeto de video.

Conclusión:

En este tutorial, lo guié por los pasos necesarios para obtener un documento de InDesign CS5 preparado para la reproducción web como un archivo SWF o .fla. Son muy similares en cuanto a la forma en que se exportan, pero los dos formatos son completamente diferentes..

Como señalé, la exportación de SWF es buena para la creación de prototipos y un par de otros usos muy específicos. Para muchos de ustedes, lo que más importa es el .fla expulsado de InDesign..

Les mostré cómo se mueven a Flash el movimiento, los recursos de página, el texto, el audio y el video. El aspecto más importante de esto es que todos los activos están en la Biblioteca Flash, pero se requerirá la atención de un desarrollador de Flash para "volver a cablear" el proyecto con ActionScript 3.0. Ésto es una cosa buena; los que no tienen sus habilidades y conocimientos lo pensarán dos veces antes de exportar documentos de Indesign a Flash porque creen que eso resolverá sus problemas. Lejos de ahi. Ellos estan empezando.

Finalmente, una vez que el proyecto está "conectado" y es funcional, se puede mover a la web o agruparse como un documento de la XFL y entregarse al equipo de Flex. Este es un nuevo flujo de trabajo y sospecho que muchos de ustedes lo verán como un trabajo adicional. Sinceramente, siento que una vez que lo entiendes, InDesign está a punto de convertirse en otra herramienta de nuestro arsenal porque una gran cantidad de tabletas, Android y otros sistemas operativos, están a la vuelta de la esquina..