Share
Las tabletas son lo más grande de hoy. Claro, el iPad no puede hacer Flash, pero es solo el primero de una ola. Adobe InDesign CS5 puede hacer un montón de cosas interactivas que son perfectas para el espacio de pantalla grande de una tableta, y luego pasarlo a Flash para realizar ajustes y mejoras. En este tutorial, veremos cómo trabajar con el lado de InDesign..
Cuando Adobe lanzó su Compilador de iPhone para Flash en Max el año pasado, debo admitir que, por un momento, me quedé impresionado. Luego me dirigí al tipo que estaba a mi lado en la audiencia y le dije: "Esto va a ser genial hasta que Apple encuentre la manera de cerrarlo". Lo que explica por qué el "shock de abril" de Apple realmente no me sorprendió. Cómo lo hicieron fue una sorpresa, pero cerrarlo no fue inesperado.
Un par de semanas más tarde, Richard Galvan, el Gerente de Producto de Flash, estaba en el escenario en FlashinthePuede mostrar algunas cosas bastante "extrañas" que Flash CS5 puede hacer. Durante el curso de su presentación, demostró cómo InDesign CS5 ahora puede hacer una tonelada de cosas interactivas que luego se pueden pasar fácilmente a Flash CS5 como un .fla o simplemente se puede sacar de InDesign como un swf totalmente interactivo. Voy a admitir que tuve la misma reacción que muchos de ustedes: "Dame un respiro. No hay forma de que un desarrollador / diseñador de Flash digno de ese título cree un gran swf de InDesign".
Después de la presentación de Richard, lo acorralé y le pregunté por qué demostraba algo que equivalía a darle un arma a un loco. Su respuesta de una palabra me hizo retroceder.
Pastillas.
él dijo.
Si hay una regla fundamental que trato de golpear en la cabeza de mis alumnos, es que, cuando se trata de lidiar con problemas, "comience con lo obvio y vuelva a lo oscuro". La respuesta de Richard fue tan obvia que me sentí un poco avergonzado..
Aunque el iPad es un dispositivo realmente genial, tendemos a olvidar que las tabletas son una tecnología emergente. Google, HP y otros van a salir con una cornucopia regular de estas cosas y todas estarán habilitadas para Flash. Incluya esta versión de Flash Player 10.1 que comenzará a aparecer en todos los dispositivos móviles, excepto en las ofertas de Apple, y no es difícil suponer que es solo una cuestión de tiempo antes de que nuestros clientes se suban al carro móvil..
Solo porque Apple fue el primero en salir del bloque con su "juguete para niños geniales", no significa que sea el punto de referencia. Si estas cosas se quitan, es posible que Apple haya producido un producto de "nicho".
Lo que me lleva a este tutorial. Las tabletas tienen una gran cantidad de espacio en la pantalla, lo cual es bastante parecido al tamaño de una hoja de papel normal que sale de su impresora láser. Tiene sentido (y Wired ya lo está mostrando), considerar las publicaciones impresas como nada más que páginas de "contenido" y usar Flash Player para convertir un medio bastante pasivo en una experiencia de medios enriquecidos..
Durante los próximos meses, habrá una serie de nuevos móviles y tabletas con Android que saldrán al mercado este verano. La línea incluye el ADAM de Notion Ink, pero hay otros también, como Marvell Moby, WePad y Dell Mini 5, por mencionar algunos.
A lo largo de esta serie de dos partes, descubrirá por qué a Flash CS5 se le dieron vuelta las moléculas y se reorganizó con el nuevo formato XFL; cómo InDesign CS5 ha cambiado repentinamente de una aplicación de diseño estático a una con una gran cantidad de funciones interactivas y cómo el nuevo TextLayout Framework en Flash es mucho más que una adición bastante curiosa a la alineación. Naturalmente, vamos a comenzar a ensamblar los activos en InDesign. Al final de este artículo, espero que muchos de ustedes descubran cuán "geniales" son realmente las características interactivas de InDesign y, lo que es más importante, por qué están allí en primer lugar. Empecemos:
DE ACUERDO. Soy perezoso. Dejo que mi iPhone se encargue de eso. Brendan Dawes, de MagneticNorth en los EE. UU., Me ofreció una aplicación de iPhone bastante interesante, addLib, que toma una imagen de la que se alimenta y saca algunas variaciones bastante interesantes de cómo se puede usar. Viendo cómo quería mostrar algunas de las características de InDesign CS5, pensé que un viaje que hice a un pequeño pueblo en China, Huo Guo, encajaría en la cuenta y la foto del anciano que me mira por encima del muro es una de Mis favoritos de ese viaje. Alimenté la imagen en addLib y realmente me gustó el último tratamiento..
Basándome en ese diseño, sabía que la herramienta para el trabajo era Illustrator CS5 y que la imagen se hacía mejor en ... prepararse ... Fireworks CS5.
Cuando se abrió la imagen, lo primero que se hizo fue lograr un tamaño más manejable. La imagen original de mi Nikon D200 era de 2896 por 1944 píxeles, lo cual no iba a funcionar ni en Illustrator CS5 ni en Fireworks CS5. Seleccioné la imagen en el lienzo de Fireworks, seleccioné Modificar> Lienzo> Tamaño de imagen y cambié las dimensiones en píxeles a las que se muestran en la Figura. Con la imagen redimensionada, hice clic en el botón Ajustar lienzo en el panel Propiedades para asegurar que no hubiera lienzo adicional en la imagen final.
La imagen es bastante oscura y podría usar un poco de corrección de color. Seleccioné la imagen en el Lienzo y, en el panel de Propiedades, seleccioné Filtros> Ajustar colores> Niveles. El histograma me dijo que necesitaba recortar algo del blanco en el lado derecho de la gráfica. Moviendo el Punto Blanco, como se muestra en la figura, iluminó la imagen. La imagen fue guardada como CoverColor.jpg.
Crear una versión en escala de grises también fue instantáneo. Con la imagen seleccionada en el lienzo, seleccioné Filtros> Ajustar colores> Tono / Saturación y configuré el valor de saturación a -100, lo que eliminó el color de la imagen. Esta imagen fue guardada como CoverGrey.jpg.
Pensé que cargar una galería de fotos en InDesign era una obviedad y demostraría esta característica de la aplicación. Por supuesto, 12 imágenes, el mismo tamaño que la imagen de portada no iba a volar y escalarlas, a mano, no es divertido.
Una de mis características favoritas de Fireworks CS5 es Procesamiento por lotes: Archivo> Proceso por lotes ... Es un flujo de trabajo muy simple. Identifique las fotos, determine la cantidad de escala y deje que Fireworks pegue las versiones a escala en una carpeta separada. Esto tomó menos de 30 segundos para lograr.
El diseño addLib fue muy fácil de replicar en Illustrator CS5. Usando una combinación de formas simples, máscaras y tipo, pude juntarlo en menos de 30 minutos. La decisión principal involucró el formato de salida. Fui con el formato ai porque Flash e InDesign me permiten volver a Illustrator para realizar cambios. Si estuviera destinado a una aplicación web con una parada en Catalyst o Flex, habría recurrido a FXG en todos los ámbitos en Fireworks, Flash e Illustrator..
Con los activos reunidos, llegó el momento de trabajar en InDesign.
Pensé que me tomaría un minuto o dos para profundizar un poco más en este tema antes de pasar al proyecto porque, francamente, como muchos de ustedes, lo vi como una herramienta de diseño de impresión que se encontraba en el banco de herramientas en lugar de una. en mi caja de herramientas interactiva. Sin embargo, al ser un poco adicto a los tipos, nada me frustraba más que ser capaz de usar técnicas de buena tipografía en el lado impreso de la cerca, mientras que en cierto modo teníamos que "simularlo" en el lado interactivo. Sin mencionar que intentar que un diseño de múltiples columnas o un sistema de cuadrícula funcionara en Flash fue algo que mis colegas gráficos en la parte de la calle de la impresión nunca dejaron de mencionarme..
InDesign CS5 de alguna manera detiene esta punción amigable. Entre las características de InDesign CS5 que acabo de descubrir están:
No se equivoquen al respecto, amigos. Estas cosas no son extravagantes, se agregaron características gratuitas a la aplicación para crear coros de "Cool" de los Fan Boyz en demostraciones y conferencias. Estas son, como está a punto de descubrir, características de grado industrial que se mueven sin problemas en un SWF o en Flash. De hecho, para tus codies, ni siquiera tienes que tocar Flash o Catalyst. Los documentos de InDesign se pueden generar como buenos viejos XML.
Dicho esto, este es un flujo de trabajo emergente que, especialmente para el equipo de Flash, requerirá un trabajo adicional de su parte. Considero que esto es "algo bueno" porque, como está a punto de ver, sacar un documento de Flash de InDesign no hace que uno sea un artista de Flash. Obtienes los huesos pelados y si tus habilidades de destello son mínimas, esencialmente estás muerto en el agua.
Finalmente, este no es un tutorial de InDesign. Su propósito es mostrar cómo se agregan las características interactivas de InDesign a una página y cómo se envía un documento a los formatos SWF y Fla.
Vamos a seguir con esto ...
Abra InDesign CS5 y seleccione Ventana> Espacio de trabajo> Interactivo para abrir el panel Interactividad.
Aquí, en términos generales, es lo que hace cada elemento del panel:
Ahora vamos a aplicar un efecto de animación a la leyenda. Seleccione el objeto que se animará, abra el panel Animación y seleccione la animación del menú emergente Predefinido. Cuando haces eso suceden algunas cosas:
La ruta del movimiento, en verde, se muestra en la página y se aplica una vista previa de la animación a la mariposa en la ventana de vista previa del panel. Estas rutas de movimiento se pueden editar con la herramienta Pluma y un aspecto realmente bueno de esto es que cualquier ruta personalizada que pueda crear en Flash se puede usar aquí y viceversa. Utilice el área del nombre para asignar un nombre a la animación y seleccione cuándo se producirá el evento - En carga de página, clic de página, clic de clic (auto), on roll over (auto) - desde el menú emergente del evento (s).
También puedes elegir la duración y la frecuencia con la que se produce e incluso si la animación es un bucle. El desplegable de velocidad es donde puedes aplicar Easing.
Las propiedades, si usted es un diseñador de Flash, parecen muy familiares. El menú desplegable Animate le permite determinar cómo funciona la animación: desde o hasta la apariencia actual o hasta la ubicación actual. Y el área Animar a le permite aplicar rotación y escala al estado final del objeto en movimiento.
Probar animaciones o interactividad en versiones anteriores de InDesign fue doloroso. Crearía la animación, compilaría el SWF y dejaría InDesign para obtener una vista previa de su trabajo en Flash Player. El panel de vista previa pone todos esos pasos en un solo lugar.
Cuando termine con su animación, simplemente haga clic en el botón del panel de vista previa y aparecerá el panel. Será, al principio estará en blanco. Esto se debe a que InDesign está creando un swf que se reproducirá en el panel. Cuando aparezca la página, haga clic en el botón Reproducir en la esquina inferior izquierda y el título se desliza en.
Si el panel parece demasiado pequeño, simplemente arrastre una esquina para agrandarla la vista.
Las 12 imágenes que preparamos anteriormente utilizando el procesamiento por lotes en Fireworks CS5 ahora pueden incorporarse al documento y usarse en una presentación de diapositivas. Este es un proceso de dos pasos: traiga las imágenes y alinéelas en la página y luego conviértalas en un objeto de varios estados. Así es cómo:
Seleccione Editar> Colocar, ubique la carpeta que contiene las imágenes a escala y, con la tecla Mayús presionada, selecciónelas todas y haga clic en Aceptar. Verá una pequeña "pistola" que contiene una miniatura de una imagen. Haga clic en él y la imagen en la miniatura se colocará en la página y la "pistola" le mostrará la siguiente imagen en la pila. Mueva aproximadamente todas las imágenes a donde aparecerán las diapositivas y, con todas las imágenes seleccionadas, abra el panel Alinear presionando la tecla F7. Alinea las imágenes por sus bordes superior e izquierdo..
Una vez que haya creado la "pila", abra el panel Estados del objeto y haga clic en el botón "Convertir la selección en objeto multiestado" (la página con la esquina doblada hacia arriba en la parte inferior del panel) y todas las imágenes aparecerán en el panel . Asígnele un nombre al objeto y, si lo desea, reorganice las imágenes arrastrándolas, en el panel, a diferentes "capas" de la pila..
Una pila es inútil si no la pones a trabajar. En este caso, los botones Adelante y Atrás creados en Fireworks CS5 se importan para la tarea en cuestión. InDesign, como muchas de las aplicaciones CS5, contiene una biblioteca de botones "pre-rolled" (Ventana> Botones de muestra), pero ninguno se ajusta al diseño. Fueron traídos usando File> Place y se movieron a sus posiciones finales en la página.
Para crear un botón, abra el panel Botones y, con el objeto seleccionado, haga clic en el botón "Convertir objeto en un botón", que está justo al lado de la Papelera en el panel Botones. Cuando esto sucede, el panel se ilumina y puede asignar al botón algunas propiedades..
Lo primero que hay que hacer es darle un nombre al botón. A continuación, adjunte un evento al botón. Hay seis eventos, dos de los cuales son estrictamente para proyectos PDF, para elegir. "On Release" es una apuesta segura. El siguiente paso es asignar una acción a un evento. Haga clic en el signo + en el área de acciones y aparecerá una lista desplegable. Esta es una presentación de diapositivas, por lo que tiene sentido asignar una acción "Ir al estado siguiente". Lo importante a tener en cuenta aquí es que las acciones se agrupan de acuerdo con el uso final. En este caso vamos a SWF y Flash para que la elección funcione..
Cuando se selecciona la Acción, el panel de Botones cambiará para preguntarle qué Objeto debe ser controlado por el botón. En este caso, será la pila Village. También puede hacer clic en el botón de opción "Detener en el último estado" para asegurarse de que el usuario realmente se detenga en la última imagen de la pila..
Repita este proceso para el botón Atrás y pruebe la presentación de diapositivas en el panel Vista previa.
Agregar una pista de audio a una página es muy simple. Puede usar el menú Archivo> Colocar o hacer clic una vez en el panel Medios y usar el botón Colocar un archivo de audio o video, el que está en la esquina inferior derecha del panel, que abrirá el cuadro de diálogo Colocar medios. Solo ten en cuenta que el único formato de audio que puedes usar es mp3..
Una vez que se importa el archivo, aparece un pequeño contenedor de audio en el escenario. En muchos aspectos, este contenedor es similar a cómo Flash administra el audio en el escenario. El contenedor se puede colocar en cualquier lugar porque es más un marcador de posición que cualquier otra cosa.
El panel de audio le permite probar el sonido haciendo clic en el botón Reproducir y las opciones son un tanto autoexplicativas. Su mejor apuesta, si va por la ruta interactiva, es seleccionar las dos primeras opciones. Si no lo hace, su archivo de audio continuará reproduciéndose incluso cuando salga de la página..
Los principios de diseño de UX simples establecen que si estás reproduciendo un archivo de audio, debes darle al usuario la oportunidad de matarlo. En este caso, se crearon un botón Pausa y un botón Reproducir en Fireworks CS5 y se convirtieron en botones en InDesign CS5. Tan pronto como vincula el botón a una fuente, reconoce un archivo de audio y se le presentan las opciones de control de audio que se muestran en la Figura. Una característica realmente interesante del panel de Botones es el icono en la esquina inferior izquierda. Haz clic en él y se abrirá el panel de Vista previa para que puedas determinar si el botón hace lo que quieres que haga.
Video (FLV, F4V, MP4) se puede agregar a InDesign tan fácilmente como un archivo de audio y las propiedades de video se configuran en el panel de medios. Todavía hay algunos aspectos de esto que necesitas saber.
Aunque tiene dos opciones de reproducción, si va a darle un controlador al usuario, déjela sin seleccionar. La opción Póster le permite elegir un marco del video o incluso otra imagen para que aparezca en el documento. En este ejemplo, utilicé el depurador en el panel para identificar el marco que aparecerá en el diseño. También puede elegir un controlador (las máscaras de SkinOver de Flash son sus únicas opciones) y si el controlador aparecerá o no cuando el cursor se desplace sobre el video en la página. También puede agregar puntos de referencia (InDesign los llama Puntos de navegación) al video o se pueden agregar utilizando Adobe Media Encoder CS5.
La otra cosa que necesita saber acerca de esta función de video, especialmente si usa video en Flash, es que se debe hacer clic en el video en el escenario para que comience a reproducirse o para revelar el aspecto. Puede que no sea una mala idea, si va a enviar solo un archivo SWF, agregar un pequeño subtítulo o un icono que indique al usuario que haga clic en la imagen para iniciar la reproducción del video..
Finalmente, usa el panel de vista previa para probar el video.
En este artículo, le mostré cómo usar todas las funciones del panel interactivo de InDesign CS5. Le mostré cómo crear botones, agregar audio y video y cómo convertir una pila de imágenes importadas en una presentación de diapositivas. También se te mostró cómo usar los botones para controlar el audio y cómo agregar un aspecto a un video.
También incluí la cantidad de activos creados en Fireworks CS5 e Illustrator CS5 y preparados para su colocación en el proyecto InDesign CS5.
En la próxima entrega de esta serie, lo guiaré a través de los pasos necesarios para generar un documento de InDesign interactivo para su reproducción en un navegador o para realizar más ajustes en Flash. Gracias por leer!
Accentsconagua