Tutorial Adobe Flash Catalyst: Conoce la interfaz y las herramientas básicas del programa.
Escrito por Revista NeoPixel Miércoles, 08 de Diciembre de 2010 21:21
Como ya lo hemos mencionado anteriormente, Flash Catalyst es una herramienta de diseño interactivo para crear rápidamente interfaces y contenido interactivo con salida Flash (swf) sin la necesidad de saber AS3 y/o escribir una sola línea de código. Catalyst básicamente es una herramienta de "diseño interactivo" que está basada en el "framework" de Flex y que nos sirve para crear rápidamente interfaces de aplicaciónes web expresivas.
A continuación un pequeño tutorial de las herramientas básicas de Catalyst para explicar el flujo de trabajo y los componentes básicos del programa. Lo que haremos a continuación es crear una pequeña interfaz en Photoshop para después importarla desde Flash Catalyst y darle interactividad.
Puedes descargar los archivos que vienen de ejemplo desde aqui y ver la estructura u orden que tienen los layers en nuestro archivo base de Photoshop. El cuidado que tengas al crear tus archivos en Photoshop será muy importante para no tener problemas más adelante.
El orden que utilizamos y que basicamente recomendamos para cualquier proyecto (tan sencillo como este) es el siguiente: Background Layer, Layers de navegación, Layers de contenido, Header layer. Aunque los nombres son muy descriptivos y específicos aqui una pequeña explicación de lo que pondremos en cada uno de ellos:
"Background - Fondo": El fondo de nuestro sitio, que será el mismo para cada una de las secciones del proyecto y no cambiará en ninguna sección.
"Botones de Navegación": Textos y gráficos que serán convertidos en botones para dar interactividad al proyecto.
"Layers de Contenido (Páginas)": El contenido, fotos, texto etc de cada página o sección del proyecto.
"Header - Logo": Ubicado en la parte superior, son los elementos que igualmente no cambirán de aspecto en cada una de las páginas del proyecto.
Iniciando en Flash Catalyst.
Podemos crear un documento nuevo y luego importar nuestro archivo de Phtoshop desde File > Import > Adobe Phtoshop File, o crear un nuevo proyecto desde un archivo ya diseñado, esto desde File > New Project From Design File.
En ambos casos las opciones que debemos seleccionar son las que mostramos en la imagen: Image Layers: Keep editable, Shape layers: Crop y Text layers: Keep Editable. En Other import options dejamos seleccionado Import non-visible layers y damod click en Ok.
Después de haber importado nuestro archivo veremos que la interfaz se verá exactamente igual que como la hicimos en Photoshop. Incluso nuestros layers tendrán los mismos nombres y estarán ocultos los que dejamos ocultos en Photoshop.
La interfaz, herramientas y áreas principales en Catalyst:
Pages/States: Por el momento solo tendremos un estadao o página (Page/States). Más adelante agregaremos mas estados al proyecto.
Tools panel:El panel de herramientas es mu similar al que tenemos en programas como Photoshop, Illustrator o Flash, con el cual podremos agregar elementos, textos, mover, hacer zoom entre otros.
Layers panel: Al igual que en Photoshop tenemos nuestros Layers o capas de trabajo.
Interactions panel: Sirve para agregar posteriormente interacción a cada boton o elemento.
Properties panel: Cada que seleccionemos un elemento de nuestro stage apareceran las propiedades de este, como tamaño, posición en X & Y, opacidad, rotación, y nombre del archivo entre otros.
Páginas y estados:
Las páginas (como su nombre lo indica) son usadas generalmente para describir las diferentes "páginas de un sitio". Los estados son elementos como botones, que tiene propiedades (o estados) como "up", "down", "over", muy similar a como funcionan en Flash.
En Catalyst las páginas y los estados son creados o tratados de la misma manera. Las páginas que tendremos en nuestro sitio y los estados de los botones serán creados con las mismas técnicas.
El flujo de trabajo para crear un proyecto requiere que creemos estados individuales denro de nuestra página o aplicación. Para controlar la navegación entre las páginas, los botones pueden ser creados desde Photoshop (como lo hemos hecho ya) o incluso cambiarlos o crearlos directo en Catalyst.
Después de que los estados y los botones son creados podemos agregar transiciones e interactividad a nuestros elementos. La interactividad es controlada definiendo qué es lo que queremos que haga el componente cuando el usuario interactue con él. Podemos crear transiciones una vez que el usuario da click en algun boton (rotaciones, fades, redimensionamiento de elementos, movimiento, etc)
Una ves que el proyecto es terminado le daremos salida como aplicaciones de escritorio (Adobe AIR) o en archivos SWF para subirlos a internet. Incluso podremos utilizarlo para trabajarlo en Flash Builder e incorporarle opciones avanzadas como contenido dinámico o integración con base de datos.
Siguiendo con nuestro proyecto:
Como hemos comentado, los estados y las páginas son conceptos básicos para el uso de Catalyst. Ahora trabajaremos con ellos.
1.- En el panel Pages/States damos click dos veces en "Duplicate States" para crear dos estados más al proyecto.
2.- Cambiamos el nombre a cada uno de los estados y les ponemos el que corresponderá a cada una de nuestras secciones: Noticias, AcercaDe, Galeria (sin espacios en blanco).
3.- Ahora, seleccionando cada uno de los Estados o Páginas iremos mostrando o descubriendo en el panel de Layers los Layers correspondientes a cada página. Damos click en Noticias y en el panel de Layers, damos click a la izquierda del layer "Pagina: Noticias" para hacerlo visible.
Después en la seccion de Pages/States damos click en AcercaDe, volvemos a ir al panel de Layers y descubrimos el layer que dice "Pagina: Acerca de".
Una vez mas damos click en el Estado/Pagina Galería y en los Layers descubrimos o damos click a la derecha de "Pagina: Galeria".
A continuación agregaremos la navegación para ir de una página a otra: Para crear la interacción y transiciones entre una página y otra utilizaremos los botones que anterior hemos creado desde Photoshop.
Para esto, seleccionaremos el elemento que queramos convertir a boton (dentro de la venta de Layers en la carpeta Botones de Navegación). Seleccionamos el boton "Acerca de", en este caso los elementos están separados, el texto, el boton azul y el rojo; seleccionaremos los tres desde el panel de layers. Aparecerá el HUD o panel que nos indicará que tenemos 3 elementos seleccionados. Seleccionamos Convert Artwork to Component > Button.
Inmediatamente veremos que el HUD cambia de apariencia y nos dará la opción de los estados del botón (Up, Over, Down y Disabled). Damos Click en Up para editar cada uno de los estados del boton. En Up dejemos el boton en color rojo, en Over esconderemos el layer Acerca de_1 (el rojo) para dejar el estado del boton en azul. Lo mismo haremos con el estado Down.
Seleccionamos el texto "Acerca de" y en el HUD elejimos Convert Artwork to Button Part > Label.
Podremos ver ahora en el Panel de propiedades (con nuestro boton seleccionado) que la propiedad Label tiene el mismo nombre que nuetro botón (Acerca de), en caso de querer cambiar el nombre del botón lo haremos desde aquí.
Ahora hay que borrar los otros dos botones que tenemos, (Noticias y Galería) que importamos desde Photoshop pero que no hemos usado.
Vamos ahora a copiar y pegar dos veces nuestro botón "Acerca de" y colocaremos uno a cada lado del botón ya creado (como estaba originalmente en Photoshop). Seleccionamos cada uno de ellos y los nombraremos, en el panel de Propiedades en donde dice Label: y le pondremos el nombre del botón, para que queden cada uno con los nombres: Noticias, Acerca de, y Galeria.
En nuestro panel de Layers renombraremos adecuadamente cada botón para que los podamos localizar y distinguir, seleccionando el de Noticias y renombrandolo en el panel de Layers como "Noticias", e igualmente con el de Galería.
A continuación seleccionamos cada uno de los botones desde nuetro canvas o área de trabajo, damos click derecho y seleccionamos Share to State > All States. Lo que estamos haciendo con esto es controlar la visibilidad de los layers, haciendo que todos los botones sean visibles en cada una de las páginas (Noticias, Acerca de y Galeria).
Agregando funcionalidad e interaccion a nuestros botones:
Ahora que tenemos cada uno de nuestros botones como los necesitamos, les agregaremos funcionalidad, haciendo que cada uno de ellos haga lo que queramos cuando se le de click.
Seleccionamos el boton de Noticias y, en el panel "Interactions" daremos click en "+ Add Intereaction" y seleccionaremos "On Click". A continuación, en Choose State seleccionamos el estado "Noticias" que será la página donde nos mandará cada que sea presionado el botón. Realizamos lo mismo con los otros dos botones.
Ahora, en la página de Noticias seleccionamos el botón de "Noticias" y dentro del panel de Properties, debajo de la etiqueta "Label:" deseleccionamos "Enabled". Vamos a la página "Acerca de", seleccionamos el boton del mismo nombre y deseleccionamos en el panel de Properties la opción "Enabled". Nos vamos a la página de Galería y hacemos lo mismo con el boton de esta sección.
Esto es para que cada botón aparezca como seleccionado cada que estemos en la página/sección correspondiente, es decir, si estamos en Noticias, el botón de Noticias aparecerá como seleccionado, si estamos en Galería será este el que aparecerá como seleccionado, y así con cada uno.
Hasta este momento hemos ya creado caa una de nuestras páginas con contenido y le hemos dado interacción a los botones para que nos lleven a la sección de nuestro sitio cada que le demos click. Lo podemos probar en File > Run Project. Esto abrirá el proyecto dentro de tu explorador. Pruebalo para ver si todo funciona como debería, de no ser así revisa que cada uno de los pasos se haya ralizado como mencionamos.
Crearemos ahora una ventana o imagen PopUp dentro de nuesro Flash. Esto nos servirá mucho cuando estemos trabajando con imágenes que queramos ampliar o mostras más a detalle (como en portafolios o galerías).
En el panel Pages/States selecciona Noticias y da click en "Duplicate State". Lo renombraremos como Noticias_popup. Selecciona nuestra imágen que dice click para agrandar, que será la que lance el popup y muestre la fotografía con detalle.
En el panel de Layers haz visible el layer correspondiente a la imagen o popup que quremos agrandar.
Una vez que puedas ver tu imagen como popup necesitamos hacer que esta se pueda cerrar o desaparecer, por lo que tendremos que crear un boton con la cruz (o X) que está en la parte superior derecha de nuestro popup.
Una vez que tengamos este boton, en el panel de Interactions le daremos click en +Add Interaction, dandole la instrucción de que una vez que se le de click vaya directamente a la sección o página de Noticias.
Hasta aqui está casi todo terminado, solamente necesitamos establecer la transición entre dos estados o páginas.
Para esto debemos tener visible el panel de Timeline. Con esta linea de tiempo podemos crear transiciones tales como escalar, mover, redimensionar, fades o disolvencias y rotaciones entre dos estados o páginas.
Para esto creamos una transición dando click en la flecha que esta en la parte inferior de la línea de tiempo a un lado de "Smooth Transition". Esta abrirá un panel de opciones para la transición como la duración y el "Timing". Ponemos los siguientes valores o puedes experimentar con unos que gustes:
• Duration 0.90 sec.
• Timing en Smart Smoothing
• Damos click en la opción Overwrite existing effects
Hasta aqui tu transición ha sido creada, solo resta aplicarsela a cada una de las páginas o estados, esto se hace seleccionando cada una de las "State Transitions" que se encuentran en la línea de tiempo (del lado izquierdo) y dando click después en Smooth Transition.
Puedes probar tu proyecto y ver como se ha aplicado una transición cada que das click para navegar de una página a otra.
Nos resta solamente hacer la transición de la imagen muestra (popup) para verla ampliada:
• Seleccionamos la Página/Estado Noticias.
• En el panel Layers hacemos visible el Layer Imagen PopUp para ver la imagen del auto ampliada.
• Escalamos la imagen para que quede del tamaño de la pequeña (previsualización o thumbnail).
• Una vez que la tenemos del tamaño deseado la ocultamos de nuevo en el panel de Layers.
• Damos ahora click en la Página/Estado Notucias_popup, seleccionamos en la línea de tiempo Noticias > Noticias_popup y damos click en Smooth Transitions. Lo que estamos haciendo es hacer una transición entre el estado/pagina Noticias y el de Noticias_popup, que es donde tenemos nuestra imagen ampliada.
Únicamente nos restaría, en el Timeline (o línea de tiempo) seleccionar Noticias_popup >Noticias y dar click en Smooth Transition de nuevo, esto para que veamos de nuevo la transición una vez que le demos click en el boton cerrar de la página Noticias_popup y nos lleve a Noticias (osea el paso inverso).
Le damos click en File > Run Project y veremos como nuestro pequeño sitio está ahora funcionando. También podemos dar en File > Publish to SWF/AIR para crear nuestro SWF e incluso crear también nuestro archivo tipo AIR para crear una aplicación e instalarla en nuestra maquina.
Con esto terminamos este pequeño tutorial de introducción a Adobe Flash Catalyst, esperamos que les sea de utilidad y nos hagan saber sus comentarios. De cualquier manera estaremos publicando próximamente algunos tutoriales más avanzados y que le sacarán más provecho a la aplicación, ya que hasta ahora solo hemos hablado de las herramientas básicas para empezarnos a familiarizar con el programa.
Da click aquí para ver el proyecto completo.
RSS feed Comments
escrito por Jhonnathan, enero 27, 2011
De nuevo gracias por compartir sus conocimientos. 
escrito por SAnChO, octubre 26, 2011
escrito por Maynor, enero 31, 2012
esperamos más tutoriales complejos
escrito por gandma, enero 31, 2012
