Las nuevas características que Flash Catalyst Panini nos ofrece en su versión Beta, proveen un flujo de trabajo más transparente para el diseñador y el desarrollador. Aprenderemos como desarrollar una mini-Aplicación que muestre unas de las nuevas características de esta versión Beta de Panini la cual se puede descargar aquí: http://labs.adobe.com/technologies/flashcatalyst_panini/.

Flash Catalyst

Comenzaremos creando un nuevo proyecto (Adobe Flash Catalyst Project), con un width de 500px y un height de 600px, al que arrastraremos uno de los nuevos componentes llamado Tabs.

Podremos encontrar el panel de Components en la parte inferior junto a Timelines y a Design-Time Data. Y dentro del cual podremos encontrar tres divisiones para estos componentes, la primera muestra todos los componentes ya sean de Flex o de Wireframe & Media, la segunda contiene los componentes de Flex, y la tercera división llamada Wireframe & Media, contiene todos los componentes nuevos de FC.


Tabs es un componente que servirá como interfaz de navegación dentro de nuestra aplicación (en escencia es un Group con ToggleButtons y la lógica generada mediante estados) donde cada elemento dentro de este nos permitirá cambiar el estado de nuestra aplicación. Su posición en x será 50px y en y 7px.

Ahora crearemos cuatro estados para nuestra aplicación, podemos hacerlo de dos formas, con clic derecho sobre el estado actual y seleccionando Duplicate State, o dando clic sobre el botón Duplicate State que se encuentra debajo de nuestro estado inicial.

Hemos duplicado el estado inicial para que en todos ellos se muestre este componente, en total deben ser cuatro estados. Dando doble clic sobre cada estado podemos cambiar su nombre, de modo que los llamaremos: one, two, three y four respectivamente.

Es recomendable trabajar con capas (layers), dentro de cada estado, de modo que cada una corresponda a un estado en específico, esto debido a que en cada una podemos almacenar los componentes que se visualizaran en cada estado. Por lo cual crearemos cuatro capas, una para cada estado, y a las que les pondremos los siguientes nombres: First, Second, Third y Fourth.

Como Flash Catalyst nos proporciona una primera capa por defecto, solo bastara renombrarla y fijarnos que nuestro componente Tabs se encuentre fuera de todas estas capas, e incluso podemos arrastrarla sobre todas estas. Cada elemento dentro de estas capas posee dos propiedades, una que lo hace visible y otra que nos permite modificar cualquiera de sus valores. Para modificar cualquiera de las dos, en caso de que este elemento no deba ser visible en un estado o incluso que no queramos que se puedan cambiar sus propiedades más adelante, solo basta con dar clic en uno de los dos (o en los dos) cuadros que se encuentran a la izquierda de nuestro componente en el panel Layers.

Veremos como un pequeño símbolo aparece, indicando que el cambio se ha realizado, en este caso, nuestro componente Tabs debe tener seleccionado solo la propiedad de visibilidad (seleccionando el cuadro de la izquierda), que nos permitirá visualizarlo en todos los estados de la aplicación.

Con la herramienta Rectangle que se encuentra sobre el panel layers, haremos un pequeño header que haga más vistoso nuestro menú (un color #2E2E2E estará bien). Con un width de 500px y un heigth de 39px, una posición en X y en Y de 0px posicionaremos este objeto debajo de nuestro componente Tabs (en el panel de layers), lo haremos visible para todos nuestros estados y lo bloquearemos (seleccionando el segundo cuadro) puesto que no modificaremos sus propiedades más adelante.

Dando doble clic sobre el componente podemos “entrar en él” para así editarlo más fácilmente, podremos notar que los objetos que se visualizan en el panel layers son ahora los que están contenidos dentro de este componente. En este caso, está compuesto por unos botones a los cuales daremos la posibilidad de cambiar el estado de la aplicación al ser seleccionados por el usuario. Sin embargo antes cambiaremos el estilo por defecto que tiene este componente.

Ya en el interior del componente Tabs, seleccionaremos el primer elemento para comenzar a hacer modificaciones a sus propiedades, esto lo haremos en el panel de propiedades. Tabs tiene 4 estados, uno por cada elemento. En el panel de propiedades procederemos a modificar solo el label de estos elementos, las cuales sustituiremos por: Accordion, PieChart, DropDown y Calendar.

Si cambiamos de estado podremos ver que no se han efectuado los cambios, esto debido a que el comportamiento que recibe un elemento en cada estado puede ser diferente, por ejemplo, si nosotros regresamos al primer estado y seleccionamos el elemento ahora nombrado Accordion, y damos clic derecho sobre él, una de las opciones que tendremos será Make same in All Other States (Hacer igual en los otros estados), con lo cual al cambiar a los demás estados, la etiqueta Accordion será visualizada, pero a cambio también se mantendrá seleccionado este botón y nuestro menú no será intuitivo para el usuario.

Para solucionar este problema, haremos lo mismo con los otros tres botones, y en cada estado elegiremos un botón diferente para ser visualizado como seleccionado, mientras que deseleccionamos este primer botón Accordion, de manera que al cambiar de estado sea un botón diferente el seleccionado. Para visualizar un botón como seleccionado solo basta marcar el checkbox Selected que se encuentra debajo de la propiedad label en el panel de propiedades y deshabilitando/habilitando (según sea el caso) el checkbox Enabled.

Dando doble clic sobre cualquiera de estos botones, podremos entrar en ellos para así editar sus estilos. No importa cuál de estos elementos modifiquemos, los cambios afectaran a los demás. En este caso, cada elemento contiene ocho estados (Up, Over, Down, Disabled, Selected Up, Selected Over, Selected Down y Selected Disabled), en cada estado el botón puede tener un estilo diferente, aunque en este caso repitamos los estilos de los estados Selected. De modo que cuando un botón sea seleccionado se vea diferente de los demás y de una forma intuitiva le exprese al usuario el estado en el que se encuentra.

Ahora añadiremos acciones a estos botones. Para volver un paso atrás, basta con dar clic sobre este. Sin importar que tan adentro de un componente estemos, siempre podemos volver solo con seleccionar un nivel anterior. Al hacerlo, veremos cómo los cambios se han realizado para los demás botones.

Seleccionaremos el primer elemento (Accordion). Entre los paneles Layer y Properties encontraremos el panel Interactions, dentro del cual podremos añadir y visualizar las acciones que puedan ser ejecutadas por este elemento. Por default tiene ya una función que realizar cuando se dé clic sobre este elemento, sin embargo nosotros necesitamos agregar otra que nos permita cambiar el estado de nuestra aplicación y no solo el estado de este elemento.

Dando clic en el botón Add Interaction, podremos seleccionar el tipo de evento que se agregara al elemento. Podemos elegir entre muchos eventos como: on click, on double click, on roll over, etc. Esta vez seleccionaremos On Click, el target al que aplicaremos este evento será a nuestra aplicación y el estado al que cambiara nuestra aplicación, cada vez que se seleccione este botón y en cualquier estado.

A nuestros otros tres botones les daremos una acción parecida, de la cual solo cambiara el estado al que se cambiara la aplicación al ser seleccionado dicho botón. Deben ser: Accordion -> One, PieChart-> Two, DropDown->Three y Calendar->Four (recordando que one, two, three y four son los nombres de nuestros estados en la aplicación).
Hasta ahora tenemos ya la mitad de nuestro trabajo hecho, es posible ir a File > Run Project para probar lo que llevamos. En la siguiente parte del tutorial (parte 2), continuaremos a partir de este punto hasta terminar la aplicación.

También te puede interesar:

Tags: , , ,