Conoce Flash Catalyst (1 de 3)

En esta ocasión queremos compartir con todos los diseñadores Web que pertenecen al Web Designers Adobe User Group México uno de los mejores tutoriales acerca de la tecnología Adobe Flash Catalyst. En cada oportunidad subiremos nuevos ejercicios en español para iniciarnos en este nuevo producto que nos ofrece Adobe. Recuerden seguirnos y enviarnos sus comentarios en cualquiera de nuestras vías de contacto.

Twitter: @tejedoresSuenos
Facebook: http://www.facebook.com/pages/Tejedores-de-sue%C3%B1os/198877026798912
Página Web: www.tejedoresdesuenos.com.mx
Web Designers Adobe User Group México: http://webdesignersmx.groups.adobe.com/

Introducción.

Flash Catalyst es una herramienta enfocada a los diseñadores cuyo principal objetivo es la creación de interfaces para RIA’s (Rich Internet Applications); así como para la generación de contenido interactivo sin utilizar siquiera una línea de código. Como ejemplos podemos mencionar: banners interactivos, guías de productos, portafolios, micrositios, acceso a datos, etc.

Si ya estás familiarizado con herramientas de diseño Adobe como: Photoshop, Fireworks e Illustrator; estamos seguros que te encantará el entorno de trabajo de Flash Catalyst. Puedes comenzar un proyecto creando una interfaz en Photoshop, para después importar completamente el diseño a Flash Catalyst. Dicha tecnología es capaz de convertir cada elemento de nuestro diseño en componentes interactivos (botones de navegación y barras de desplazamiento). De igual forma podemos definir diferentes estados y vistas para nuestra aplicación; agregar interacción usando transiciones para una página o componente hacia un recurso externo, animación, video, sonido u otros estados; configurar animación tradicional y 3D, así como otros efectos especiales. Por último; es posible publicar nuestro proyecto en Web o exportarlo a una aplicación de escritorio para Adobe AIR.

Flash Catalyst es una herramienta extraordinaria enfocada a la producción de prototipos y aplicaciones interactivas basándose en el uso de su amplia colección de componentes integrados.

Flash Catalyst permite a los desarrolladores  que utilizan Adobe Flash Builder 4 (antes Flex Builder) y el SDK (Software Development Kit) de Flex 4 trabajar de una manera más eficiente. En primera instancia se diseña la interfaz de usuario y experiencia funcional para después pasar la estafeta a los desarrolladores que incluirán funcionalidad adicional, integración de datos y conexión a servicios.

• Conoce Adobe Flash Catalyst CS5.

Resumen.

Usando Flash Catalyst CS5 puedes generar diseños espectaculares y proveerlos de contenido interactivo para su publicación en Web o en aplicaciones de escritorio sin utilizar una sola línea de código. Esta lección nos muestra una pequeña introducción de algunas de las características y beneficios clave de Flash Catalyst. Analizaremos el área de trabajo, trabajaremos con un proyecto ya existente, crearemos uno nuevo y probaremos uno  ya terminado.

¿Qué aprenderemos al final de la lección?

• Crear un nuevo proyecto en Flash Catalyst.
• Definir dimensiones y color de fondo.
• Utilizar apropiadamente los espacios de trabajo llamados “Diseño” y “Código”.
• Mostrar y ocultar diferentes paneles en el área de trabajo.
• Utilizar zoom y vista panorámica en el área de trabajo.
• Abrir un proyecto ya existente.
• Vista previa de un proyecto en el navegador.
• Búsqueda de ayuda, demostraciones y tutoriales en línea.

Flash Catalyst permite a los diseñadores un control total sobre la integración de sus diseños en la producción de contenidos interactivos. Un desafío común para muchos diseñadores es la entrega de bocetos gráficos estáticos y la descripción de la experiencia de usuario final requerida al equipo de desarrollo. Gran parte de la conceptualización se deja  a la interpretación y algunas veces el diseño inicial se pierde debido a las limitaciones de las herramientas de desarrollo utilizadas para la conexión a servicios de datos.

Utilizando Flash Catalyst los diseñadores pueden transformar rápidamente sus diseños creados en Adobe Photoshop, Adobe Illustrator y Adobe Fireworks en aplicaciones totalmente interactivas y funcionales sin agregar una sola línea de código.

¿Flash Catalyst es la herramienta qué realmente necesito?

Flash Catalyst fue creado para cualquier diseñador que produzca contenido interactivo para la Web o aplicaciones de escritorio, dentro de los cuales podemos mencionar:

1. Diseñadores Web que requieran la creación de contenido visual y experiencia de usuario.
2. Arquitectos de información que requieran de la creación de modelos de alto nivel para diversos medios.
3. Diseñadores gráficos y Directorescreativos que generen contenido gráfico, componentes y elementos para una amplia gama de aplicaciones.
4. Desarrolladores de RIA’s que trabajan con proyectos Flash Catalyst para agregar servicios avanzados de acceso a datos.

Características clave.

Dentro de las principales ventajas que nos ofrece Flash Catalyst están:

• Es posible diseñar utilizando tu aplicación preferida de Adobe. Flash Catalyst nos ofrece una corta y sencilla curva de aprendizaje aprovechando los conocimientos previos que tengamos de Photoshop, Illustrator o Fireworks.
• Importar y almacenar imágenes, video, sonido y animaciones en Adobe Flash (.swf) a nuestra biblioteca de proyecto.
• Podemos generar interfaces consistentes para diferentes sistemas operativos y dispositivos.
• La generación de componentes basados en nuestras ilustraciones; tales como botones, casillas de verificación, listas y barras de desplazamiento se logra rápidamente.
• Crear formularios interactivos usando componentes prefabricados como campos de entrada y botones de selección.
• Agregar interacción y definir el comportamiento de cada componente, por ejemplo: qué pasará cuando el usuario de clic a un botón o cuando las condiciones preestablecidas se cumplan.
• Agregar transiciones suaves entre páginas o entre diferentes estados (vistas) de un componente con el simple clic a un botón.
• Es posible editar directamente contenido generado en Photoshop e Illustrator desde el área de trabajo de Flash Catalyst.
• Crear directamente contenido gráfico en vectores a través de las herramientas de dibujo que ofrece Flash Catalyst.
• La conversión de bocetos gráficos a una lista variable de elementos o componentes (imágenes, texto o ambos).
• Usar bocetos para la creación de prototipos interactivos.

Beneficios adicionales para diseñadores.

• Vende tus ideas, mostrando diseños funcionales en lugar de pantallas estáticas.
• Asegúrate que la visión creativa inicial se expresa con precisión.
• Trabajar en colaboración y de manera más eficiente con los desarrolladores de RIA’s.

Flujo de trabajo de Flash Catalyst.

Existen dos tipos de aplicaciones que pueden crearse con Flash Catalyst (Micrositios y aplicaciones basadas en datos centralizados). Podemos definir un micrositio como una aplicación desarrollada completamente en Flash Catalyst donde ningún desarrollo adicional es requerido. Una aplicación basada en datos requiere de la integración de componentes para el acceso a datos y servicios Web a través de Adobe Flash Builder.

El flujo de trabajo para el diseño y creación de micrositios y aplicaciones de acceso a datos son muy similares:

• Planificar la aplicación.

Comience con una especificación detallada del proyecto donde se describa cada página o pantalla; incluyendo la navegación, el diseño de cada sección, los componentes interactivos y los diferentes estados de cada componente.

• Diseñar o adquirir los recursos necesarios, como imágenes, video y sonido.

Debemos crear los diseños, videos y sonidos necesarios para la aplicación a desarrollar. Para este apartado podemos apoyarnos en Photoshop, Illustrator o Fireworks.

• Importar cada recurso al área de trabajo de Flash Catalyst.

Se debe realizar la importación del diseño creado anteriormente en Photoshop, Illustrator o Fireworks. Los recursos adicionales (imágenes, videos, sonido, animaciones en Adobe Flash) también deben colocarse en la biblioteca del proyecto. Por último, es aconsejable tener una muestra representativa de datos como listas de imágenes o texto.

• Crear y editar páginas.

Un proyecto en Flash Catalyst comienza generalmente con una sola página o estado inicial. A lo largo del desarrollo de la aplicación se deben agregar o duplicar secciones de acuerdo a las especificaciones establecidas. Es posible mostrar u ocultar componentes o páginas dependiendo de cada evento. Por último podemos incluir cada recurso anteriormente importado (imágenes, video, sonido, animaciones, etc.).

• Crear componentes interactivos.

Convierte tus diseños a componentes interactivos: botones, barras de desplazamiento, paneles y listas. De igual forma es posible la creación y personalización directa de componentes con apariencia similar al diseño establecido o con un comportamiento especial.

• Definir el estado de cada componente.

Pueden asociarse diferentes estados a cada componente en base a la especificación establecida al inicio de cada proyecto; tales como “Up”, “Over”, “Down” y “Disabled” en un botón.

• Definir interacción y transiciones.

Se anexan las definiciones de lo que debe suceder cuando el usuario interactúa con la aplicación. Como ejemplo podemos mencionar: transiciones entre páginas cuando se dé clic a un botón. También es posible agregar animaciones, control de video o acceso a recursos externos (páginas Web); todo esto a través de la línea de tiempo incluida en Flash Catalyst.

• Prueba y publicación del proyecto.

Probamos nuestro proyecto en un navegador para luego publicarlo en Web o como aplicación para escritorio. O si se requiere, exportar nuestros avances en (.fxp) para un desarrollo adicional en Flash Builder.