martes, 9 de junio de 2009

Catalyst


Adobe ha sacado la versión beta de Flash Builder,  sucesora de Flex Builder. Aunque se va ha tardar en olvidarse la palabra "flex", adobe parece estar dispuesta a olvidarla, "unificando" con el nombre Flash las dos "corrientes" hasta de ahora.
Antes se "suponía" que Flash era para diseñadores y Flex para programadores. Pero ahora parece unificarse todo en la nueva herramienta, más parecida a Flex 3 que a Flash CS4. Sin embargo se ha sacado de la manga una nueva herramienta llamada catalyst que sirve para hacer algo muy interesante para los diseñadores.
Catalyst En una herramienta que sirve para crear graficamente un interface de usuario (Usando alguna cosilla  que recuerda un poco al viejo Flash CS4), de una forma muy sencilla, pudiendo "importar" al proyecto imágenes y otro tipo de recursos gráficos.
Sobre la escena o interface de usuario que se va generando, se pueden ir cambiando elementos graficos a componentes que se les da cierta  funcionalidad mínima, y se pueden probar interactivamente. 

A medida que se va generando ese interface de usuario, Catalyst genera código ActionScript necesario para "ejecutar" la aplicación que se está creando.
El resultado es tener el esqueleto de un proyecto, que se puede importar directamente desde Flash builder, para "rematar" la programación .

Instrucciones para descargar:

http://labs.adobe.com/





Puedes empezar descargando un proyecto ejemplo ( sample files ) y juguetear con  los ejemplos.

 

¿ Como hacer un sitio interactivo, partiendo de una imagen ?

Tomemos una imagen "fija". En nuestro caso es un fichero Gif. Lo editamos con el photoshop.

 



 

 


Lo que queremos hacer es varias capas de esta imagen. Aunque un especialista en photoshop lo haga más "limpio" y claro, se puede usar un método sencillo y efectivo aunque un poco "basto".

 




 

 

Se "Corta" los rectángulos de la imagen, y se pega en una capa nueva. ( se le podría dar el nombre orientativo ya a la capa)

De esta forma nuestra imagen original la tenemos igual, pero por capas.

 


 

Este archivo se puede importar a Catalyst directamente .

Primero combertimos las capas que nos interese a componentes.

 



 

 

A cada componente se le puede añadir una funcionalidad. En nuestro caso indicamos que actúa como un botón.

En la caja de dialogo "negra" aparece las propiedades y acciones que se puede realizar con el tipo de objeto.

 

 

 



 

 

Aquí indicamos que cuando se le hace click al "boton grafico" haya un cambio de transición a una nueva "pantalla".

Se puede seleccionar "duplicate State", y duplicara la pagina original como página nueva igual, a la que podemos personalizar y cambiar.

Así conseguimos que al hacer click se muestre otro contenido.

Se puede poner un "efecto" para hacer la transición. Luego lo vemos.



 

 

Al final tenemos un resultado parecido al siguiente.

 


1) Los estados o pantallas.

2) La pagina seleccionada.

3) El editor de un Botón.

4) La linea de tiempo que define una transición . A la parte izquierda abajo indica

page1-page2. Significa cuando está seleccionada la acción al hacer una transición entre el estado "page 1" y "page 2".

Por ejemplo Fade in, seria una transición que aparece o desaparece poco a poco. Se indica el tiempo "alargando" el rectángulo "fade in" de (4).

 

Este proyecto lo guardamos con el nombre archivo basekiosko1.fxp

fxp es también un proyecto flash4. Así que puedes entrar en Flash Builder e importar el proyecto a Flash builder

 



 

 

 Al importarlo a Flex, tenemos el típico proyecto Flex , dividido en módulos.

1)Nuestro programa sera el modulo main.mxml que esta en src.

2) Tenemos la posibilidad ahora de incluir nuevos componentes o controles de flex.

3) Al abrir main.mxml vemos el diseño creado si estamos en "design", y el código fuente si vamos a "source"


 
 

 

 

Esta aplicación está lista para ejecutarse sin nada más y se vera lo mismo que cuando la ejecutamos en catalyst.

Ahora se puede entrar a ver el código fuente, y cambiar o añadir el código necesario.

 



 
(c) Multi-Informática Teruel