Estoy muy entusiasmado con Flex y la posibilidad de él interactuar (aún siendo un camino complicado) con el swf hecho en Flash. Como yo he iniciado en Flash, me sentí un poco afuera del agua en Flex, pero ahora tengo un poco de conocimiento técnico y decidió publicar algunos consejos para aquellos que están pensando en la migración, o para estudiar, o para saber qué es lo Flex.

Flex y Flash son completamente independientes.

Como cuando haces algo en Flash, necesita el Adobe Flash, para construir algo en Flex necesitará un programa llamado Adobe Flex Builder, que de hecho es el Eclipse SDK, mejorado pela finada Macromedia.

Aunque independiente, ambos utilizan el ActionScript y pueden interactuar unos con otros, ya que ambas "plataformas" terminan en el bien conocido archivo SWF.

Un bueno tutorial que cubre este "dar y recibir" es en el sitio Flash 'n Flex Hacks, que abarca esta interacción en un sencillo pero muy instructivo ejemplo.

Las diferencias

El concepto de tiempo en Flex es diferente, en realidad, usted no utiliza una línea de tiempo visual como en Flash, pero ella existe y tiene una velocidad de 30 fps. Usted no puede verlo, pero Flex funciona con sólo 2 tablas: una para el preloader y la otra para su aplicación entera.

La finalidad del Flex gira en torno de interfaces para mostrar o la recoger datos, a diferencia de Flash, que desde la version CS4 tiene un enfoque claro en la animación.

El mayor objetivo del Flex son las aplicaciones web (sistemas) o las aplicaciones desktop (Adobe AIR), el usuario puede descargar, instalar y ejecutar locamente como un software, con la ventaja de ser, como el Java, multi-plataforma.

La principal diferencia es que Flash tiene un interfaz amigable para los diseñadores, y Flex, que utiliza el Eclipse, se centra en los desarrolladores. Pero, en realidad, es el mismo: todo gira en torno a ActionScript 3.

Cada componente de Flex, al igual que en Flash, básicamente es una clase AS que no se puede ver, porque ya se ha importado automáticamente por las bibliotecas, a partir del core básico. O porque simplemente no tuvieron la curiosidad de buscar en el archivo original ".as".

Tienes que aprender otro lenguaje?

En Flex, hay un lenguaje llamado MXML, que básicamente es un lenguaje de marcado, muy similar al XHTML, pero por supuesto, con sus propias peculiaridades

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:TextInput id="source" width="100"/>
<mx:Button label="Copy" click="destination.text=source.text"/>
<mx:TextInput id="destination" width="100"/>
</mx:Application>

Quién he estado en el mundo web hay un tiempo no debe tener miedo. Es más simple que el HTML, muy bien documentado, sin errores, y básicamente, es sólo un resumen de las propiedades de una clase que usted instancia y asigna valores, de la misma manera que podría hacerlo con ActionScript.

Por dónde empezar

Me gustó mucho el curso en video de la Adobe. Estoy haciendo una gran propaganda, porque el curso tiene ejercicios y las clases tienen una metodología de enseñanza muy amigable. Es fácil empezar a aprender con este curso gratuito en línea:
http://www.adobe.com/devnet/flex/videotraining/

Componentes y más componentes

Flex viene con un paquete de componentes muy útiles, con componentes visuales y de datos. Echa un vistazo a la aplicación de Adobe que lista diversos componentes y muestra la configuración predeterminada:
http://examples.adobe.com/flex3/componentexplorer/explorer.html

Cuando se instala Flex Builder, usted gana un montón de componentes reciclables, sin embargo, no elimina la necesidad de crear los componentes específicos para su problema.

La reutilización de código propuesto por la programación orientada a objetos, OOP, favorece la aparición de distintos repositorios a través de Internet, verdaderas bibliotecas de código opensource listo para usar.

Una buena biblioteca es FlexLib, que extiende varios componentes del Flex:
http://code.google.com/p/flexlib/wiki/ComponentList

Además de esto, desde la era de Macromedia, hay un repositorio central de componentes Flex de la comunidad, abierto a quien quiera para enviar y descargar nuevos componentes:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=addSea...

Otra gran manera de ver los componentes que están disponibles para Flex, es la aplicación Tour de Flex, un aplicativo AIR que le permite ver los increíbles componentes.
http://flex.org/tour

Personalización

En el mundo del HTML, no hay nada tan feo como una página blanca con texto negro Arial y una forma sin CSS. En el mundo del SWF, la skin por defecto son bonitas, redondas y tienen estilo, pero nada mejor que poder personalizar los componentes por sí mismo.

En Flex, usted puede tener el control de la apariencia desde una simple adición de CSS (muy similar al HTML, pero con algunas variaciones específicas del ambiente Flex) hasta personalizar completamente la skin utilizando un programa de vector como el Illustrator o Flash o también programas de bitmaps, tales como FireWorks y Photoshop.

En Flex Style Explorer usted puede configurar todas las opciones aceptadas por CSS, ver la modificación que ha hecho en tiempo real y también es capaz de copiar el código para pegar en su aplicación Flex.

Personalización de la skin

Para cambiar el componente de la skin es más complicado. Es necesario instalar una extensión para cada software del paquete CS3/CS4. Esta parte es simple, o descarga y haga doble clic para instalar un archivo mxp del Adobe Extension Manager o tendrás que descomprimir un archivo comprimido en un zip.

En Tom's Blog hay un tutorial paso a paso que cubre muy bien la instalación de estos componentes:
http://lordbron.wordpress.com/2007/05/01/flex-component-kit-step-by...

Un bueno tutorial sobre cómo exportar una skin es en el sitio Ntt.cc:
http://ntt.cc/2008/06/11/using-flexbuilder-3-and-flash-cs3-to-build...

La mejor referencia es la lección de vídeo, se trata de una media hora de vídeo que aborda la cuestión crucial: hacer la skin en un software como Adobe Photoshop y Flash. También se muestra cómo descargar e instalar las extensiones:
Vídeo: Skining components with Adobe CS3 (28:14)

El enlace para descargar las extensiones se encuentra abajo, pero usted debe estar registrado en el sitio de Adobe:
https://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins

Referencia del lenguaje AS3

Para nadie duda de que todo gira en torno a ActionScript, aquí va la lenguaje de referencia, que coincide mucho con Flash, pero tiene sus propias clases, que sólo tienen sentido en Flex:
http://livedocs.adobe.com/flex/3/langref/

Conclusión

Este sitio hice todo en Flex, pensé que era muy útil porque pude utilizar los componentes ya cuasi listos, utilizando los para que quería. Sin embargo, me temo con algunos "errores" que encontré, como un relativo a la personalización de los componentes Panel. Después de todo, cuando se lee la documentación de que algo funciona, se cree, aunque a veces el resultado que obtiene es diferente de lo esperado.