Continuando con el avance previamente realizado en la primera parte de este tutorial, tenemos ya un menú que nos permitirá cambiar de estado dentro de nuestra aplicación, utilizando Tabs uno de los nuevos componentes que Flash Catalyst Panini nos brinda. Continuemos con nuestra aplicación.

Tutorial de Flash Catalyst

Crearemos un rectángulo (al cual cambiaremos el color a un gris claro) con width de 500px y heigth de 569px, el cual arrastraremos hasta nuestro layer First, y lo renombraremos como BG1, su posición en X será de 0px y en Y de 39px, el cual además copiaremos a nuestros siguientes layers, renombrándolo como BG2, BG3 y BG4 respectivamente. (además de que para cada estado cambiaremos el color de este rectángulo).

Debemos mantener visibles estos rectángulos en todo momento, además de posicionarlos de manera seguida de forma que más adelante podamos agregar una transición de estado que sea atractiva. La posición en X del BG2 sera de 504px, la posición del BG3 en X será de 1008px, y de BG4 seran 1512px en X, manteniendo la posición en Y de todos en 31px.

Esto en el primer, estado, para el segundo recorreremos BG1 a una posición en -504px, mientras que BG2 tenga una posición en X de 0px, podemos seleccionar los cuatro BGs y moverlos con las flechas del teclado hasta que este BG2 tenga la posición deseada. Para los otros dos estados haremos lo mismo respectivamente para que BG3 y BG4 queden en una posición en X de 0px, en su respectivo estado.

Las transiciones entre estados no son más que simples movimientos que realizan nuestros objetos al cambiar de estado la aplicación, y que buscan hacer más vistosa e interactiva nuestra aplicación. Dentro del panel Timelines se encuentran todas estas transiciones que se realizan de “estado a estado”, y las cuales podemos personalizar agregando un Fade In/Out a los componentes que se visualizan en un estado, pero que al pasar al siguiente van a desaparecer, esto para que no se vea muy forzado este cambio en la aplicación. En esta ocasión agregaremos un efecto de movimiento para nuestros rectángulos, que aparte de ser muy sencillo es bastante agradable al usuario.

Dentro de Timelines encontramos cada cambio de estado, podemos ir seleccionando uno por uno y agregando los efectos que queramos, pero podemos también seleccionar todos estos cambios de estado, y presionando en el botón Smooth Transitions automáticamente nos agregara un efecto de movimiento al cambiar de estado que durara 5 segundos entre cada estado.

Al presionar Ctrl + Enter ejecutaremos nuestro proyecto, el cual abrirá nuestro explorador predeterminado donde podremos ver nuestro avance. Es notable que no se hayan respetado las medidas que hemos definido al crear nuestro proyecto, pero cuando exportemos nuestro proyecto hacia AIR podremos ver que estos valores de Width y Heigth se respetan.

Seleccionaremos nuestros BGs, y los convertiremos en un Custom Component a cada uno dando click derecho sobre estos, Convert Artwork to Component -> Custom/Generic Component. De modo que al dar doble clic sobre cualquiera, podamos editarlo desde su interior.
Arrastraremos del panel de componentes, un Accordion para BG1, un PieChart dentro de BG2, un DropDown dentro de BG3 y para BG4 arrastraremos un Calendar y un Datepicker (todos estos, nuevos componentes de Flash Catalyst).

Las propiedades en X y el Y del Accordion serán las siguientes: 10px y 21 px, dando doble click sobre este, podremos entrar en él para editarlo. De modo que cambiaremos el width de nuestros AccordionTitle a 480px. El width de nuestro Rectangle también será de 480px, mientras que el heigth será de 420px. Podremos ver como los demás AccordionTitle quedan sobre este Rectangle, de modo que solo los moveremos hacia abajo en cada estado. En cada estado tendremos que ir modificando el width y el heigth de nuestros rectangles, puesto que sus valores por defecto son menores a los cuales estamos modificando. Dentro de estos rectángulos podemos arrastrar un Sample Copy, desde el panel de componentes. El cual también es uno de los nuevos componentes, y el cual nos permite la posibilidad de ingresar texto en su interior sin tener que modificar sus dimensiones originales nosotros mismos, puesto que se redimensionara al tamaño de nuestro texto. A este componente le aplicaremos un estado de Fade Out/In cada vez que se seleccione otra división de nuestro Accordion.

Dentro de BG2 tenemos un PieChart, el cual será perfecto para cuando se realizan demos de aplicaciones que utilizan charts basados en datos ya sean dinámicos o estáticos. Como podemos ver, solo es un simulador el cual podemos sustituir por un pieChart verdadero dentro de Flex (por ejemplo). Su posición en X sera de 99px y en Y de 43, mientras que si width y su heigth serán de 300px.

Dentro de BG3 previamente arrastramos un DropDown, el cual podemos editar completamente, desde el width y heigth de cada uno de sus componentes hasta su combinación de colores para cada estado. Seleccionando el label, podemos editar los elementos que se desplegaran al seleccionar este DropDown en nuestra aplicación. Cada elemento se mostrara en un estado diferente, lo que quiere decir, que cuando se seleccione un elemento de este DropDown, podemos cambiar el estado ya sea de nuestro BG3 o de la aplicación en general, además de que para agregar elementos a la DropDown, solo basta con crear un nuevo estado y agregar una label dentro de este. La posición del DropDown dentro de BG3 será de X 145px y Y 30px.

En BG4 el Calendar tendrá una posición en X de 160px y en Y de 30px. El Datepicker tendrá una posición de X 80px y en Y 270px. Ambos son componentes muy requeridos en el desarrollo de RIA`s, ya sea para hacer búsquedas de registros dependiendo de una fecha seleccionada o de la impresión de reportes por fecha.

Con Ctrl + Enter podemos ejecutar nuestra aplicación, para ver como en cada estado tenemos componentes diferentes, los cuales al formar parte de nuestros custom components no necesitan de transiciones que aligeren su aparición en pantalla. Estos son algunos de los nuevos componentes que Flash Catalyst Panini nos brinda en esta versión Beta.