Share
1 de junio de 2009; La fecha en que Adobe lanzó su nueva herramienta dirigida a "diseñadores y desarrolladores". Este fue casi el eslogan de Flash Catalyst, anteriormente llamado "Thermo".
Echemos un vistazo por primera vez a esta potente aplicación que les promete a los diseñadores que ahora podrán participar en el desarrollo de aplicaciones y sitios web de Flash..
Flash Catalyst, anteriormente llamado "Adobe Thermo", es una aplicación desarrollada específicamente para acercarse tanto a diseñadores como a desarrolladores. Puede transformar fácilmente cualquier diseño de Photoshop o Illustrator en un sitio web completo, animado e interactivo o una aplicación de Internet enriquecida basada en la plataforma Flash. El resultado final de Flash Catalyst puede ser importado y modificado por Flash Builder (anteriormente Flex Builder), permitiendo a los desarrolladores tener un hermoso diseño listo para ser codificado. La aplicación está repleta de características que les permiten a los diseñadores tomar un diseño simple, agregar efectos y luego publicar en la plataforma flash sin tener que escribir una sola línea de código. Este es el poder de Flash Catalyst..
Después de la primera charla de MAX sobre una nueva herramienta fantástica llamada "Thermo", todos los blogs y foros de RIA y Flash se llenaron con algunos videos sorprendentes. En estos videos, pudimos ver un diseño estático de Adobe Illustrator que se transformó en una aplicación completamente funcional en pocos minutos. Adobe se estaba preparando para impresionar aún más ...
Esto fue en octubre de 2007, mientras que Thermo se convirtió en Catalyst, pasó otro año y todavía solo pudimos encontrar fotos escasas en algunas conferencias. Al mismo tiempo, Flex 4 comenzó a llamar la atención con noticias casi semanales. Thermo parecía haber desaparecido.
Noviembre de 2008; una fecha inesperada! Adobe distribuyó copias de vista previa gratuitas de Flash Catalyst, solo para MAC OS y Gumbo (Gumbo era el nombre en código de Flash Builder 4). Los desarrolladores y diseñadores comenzaron a prestar más atención a los laboratorios de Adobe, pero desafortunadamente, hasta junio de 2009, no se escuchó nada más ...
Junio. 2009. El primer día del mes (finalmente) Adobe lanzó la primera beta pública de Flash Catalyst. Bueno, las cosas empiezan aqui!
El IDE está bien diseñado y dividido, es intuitivo y los elementos son fáciles de encontrar. Discutiré estos paneles un poco más. Tenga en cuenta que mi sistema operativo está en francés, por lo que si ya conoce FC y su sistema operativo está en otro idioma, es posible que encuentre algunas diferencias, pero las nombraré también en inglés.
En la parte superior izquierda, el primer panel que vemos es "Estados / Páginas". Estos son los estados de la aplicación. Imagínese, en el primer estado que tiene un panel de inicio de sesión, en el segundo tiene la aplicación principal. Estos estados se identifican fácilmente como muestra la siguiente imagen!
La aplicación se cargará en el primer estado y si desea ir al segundo estado, tendrá que realizar algunos trucos (bueno ... solo un truco - currentState = "Page2"), pero en Flash Catalyst las cosas se hacen con cierto estilo. . Ponemos un botón simple en el "escenario" y lo cambiamos a "Página2" con la interacción onClick.
El segundo panel es donde colocamos todas nuestras cosas, si importa un archivo de Photoshop o un archivo de Illustrator, todos los elementos aparecerán aquí. Si trabajas con Flash y Flex, puedes considerar esto como el escenario principal. Mira lo similar que es:
También puede encontrar un botón en la esquina superior derecha, que actualiza el escenario. Esto es útil cuando la etapa contiene muchas cosas y, por alguna razón, Flash Catalyst se olvida de actualizar los cambios automáticamente.
El tercer panel es el panel "Líneas de tiempo" y contiene algunas grandes sorpresas. Flash Catalizador tiene una línea de tiempo, pero si espera que funcione como la Línea de tiempo de Flash, encontrará que está equivocado. Esta línea de tiempo es muy limitada y su propósito principal es crear animaciones fluidas entre páginas (transición de la página 1 a la página 2 y retroceder) con algunos elementos y efectos simples como fundir, mover, rotar. Este panel puede ser un poco difícil de entender, pero en un corto espacio de tiempo, pensará de manera diferente. Echémosle un vistazo.!
En este panel, encontrará a la izquierda las transiciones de estado / página y las secuencias de acción (no, esto no se tradujo al francés) donde puede crear acciones y efectos personalizados. Cuando un diseño "real" se carga y se transforma en elementos, aparecerán en esta línea de tiempo. Puede aplicar un efecto específico a un solo componente específico. Esta línea de tiempo funciona de manera similar al Panel de animación de Flash, pero aquí especifica la hora de inicio y finalización del efecto o transición. Verás en la siguiente imagen de lo que estoy hablando, esto se hizo con un diseño simple:
Como he explicado, a la izquierda encontrará los componentes de "Página1", en el centro tiene la línea de tiempo de la animación y a la derecha (no se muestra antes) los componentes de "Página2". Puedes poner un efecto separado en cada componente lateral; aquí los elementos "Page1" comienzan a FadeOut, luego a la mitad, los elementos "Page2" comienzan a FadeIn, dando un efecto de transición muy suave.
También podemos ver una de las mejores características de Flash Catalyst aquí; el botón de vista previa (el pequeño botón "Play" en el medio). Si tiene algunas transiciones, efectos o secuencias, solo presione este botón y verá la animación en el escenario sin salir del IDE. Esto es realmente útil, créeme.!
El siguiente panel es el panel "Utilidades / Herramientas" y aquí encontrará algunos componentes nativos de Flash / Flex, como formas, texto, el zoom y herramientas de selección..
En la parte inferior de este, tiene el panel común "Calques / Capas", donde puede organizar los elementos de su aplicación. Si abre un archivo PSD o AI, el orden de la capa seguirá siendo el mismo; Todo estará en el mismo lugar. Si tienes cosas bien separadas en Photoshop o Illustrator, ¡también te beneficiarás aquí! Usted tiene su diseño importado todo aquí. Si está creando un proyecto a partir de una plantilla vacía, aquí es donde aparecerán las cosas cuando se agreguen al escenario. Ver el panel:
El siguiente panel es el más completo. Contiene tres partes principales, los Componentes, la Biblioteca y el panel "Datos":
Mira como se ve!
El último panel es "Propiedades / Propuestas" donde puede encontrar información sobre un elemento seleccionado en el escenario. Por ejemplo, si hace clic en un elemento de Texto, aquí puede definir sus propiedades como color, fuente, tamaño ...
Por último, el panel mágico "Sin nombre", el panel que antes llamé "Opciones de elementos". Este es en realidad el panel más importante de todos; Realiza toda la magia en Flash Catalyst. Es un panel posterior / gris-negro que aparecerá cuando hagas clic en el escenario. Al hacer clic en cualquier parte de un diseño, se abrirá este panel y contiene 3 secciones principales:
Vamos a echarle un vistazo ...
Bueno, básicamente se presenta nuestro IDE. Sin embargo, estamos olvidando una cosa, algo en lo que los diseñadores pueden no estar interesados, pero es importante para los desarrolladores. El código. En la esquina superior derecha, tiene un cuadro combinado donde puede seleccionar la vista Diseño o Código. Si hace clic en él y no está familiarizado con flex, probablemente lo cierre de inmediato, pero si es un desarrollador de Flex, querrá explorar esto con cuidado. Encontrará muchas cosas nuevas (especialmente si desarrolla en Flex 3) orientadas a Flash Builder 4. El lenguaje es MXML con algunos elementos en ActionScript. También verá un Explorador de proyectos donde encontrará todo lo que ya se ha convertido en elementos y componentes MXML de la aplicación listos para ser utilizados en Flash Builder. Este es un tema completamente distinto y si desea obtener más información, le recomiendo que lea la excelente reseña que Jesse Freeman escribió sobre Flash Builder 4.
Una de las otras cosas interesantes es que el proyecto está listo para usar y también para ser visualizado. Simplemente vaya a Archivo> Ejecutar proyecto (CTRL + ENTRAR en Win), su proyecto se compila y se abre en un navegador.
Esto puede ser mal entendido, Flash Catalyst no es fácil de usar y, para empezar, podría ser confuso, pero sí. Realmente hace las cosas simples. Simplemente diseñe su diseño, o obtenga el diseño de su diseñador en un archivo de Photoshop o Illustrator, seleccione su archivo y cree un nuevo proyecto de Flash Catalyst. Las cosas se verán exactamente igual en Flash Catalyst. Desde aquí, simplemente convierta los elementos a los que desea agregar comportamiento, genere algunas páginas, algunas transiciones, pruebe el proyecto y guárdelo. ¡Eso es todo! Está listo para las manos del desarrollador.!
Para los diseñadores esto no es necesariamente de interés, pero para los desarrolladores este podría ser el punto más difícil en FC. Como todos los elementos y el código de propiedades se generan automáticamente, el código necesitará una buena revisión y, probablemente, algunas modificaciones para que funcionen de acuerdo con las necesidades del desarrollador. En Flash Catalyst ya podemos ver el nuevo motor de vectores Flash en acción; Si carga algunos elementos vectoriales en el catalizador de Flash, encontrará en el código algunos elementos de "Grupos", "Trazo", "Rect", "Relleno" y "Ruta" con algunos datos. Así es como Flash diseña elementos vectoriales. Un simple vector de flecha producirá este código:
Estos elementos son la implementación de la nueva especificación Flash 10 / Flex FXG que permite a los desarrolladores usar elementos de estilo XML o grupos de elementos para dibujar en flash, utilizando no solo elementos nativos como círculos, rectángulos, texto o curvas sino también gráficos más complejos indicando información vectorial.
Encontrará muchos estados y, principalmente, código MX 4 de Flex 4 que es un poco diferente de Flex 3 y completamente nuevo para desarrolladores de Flash o principiantes de Flex.
¡Es una aplicación fantástica! No tener duda!
Para empezar, los desarrolladores ahora podemos realmente trabajar en conjunto con los diseñadores, mostrarles el punto de vista del desarrollador y algunas interacciones de la aplicación antes de ir al desarrollo de la aplicación, acelerando todo el proceso. Será fácil encontrar aplicaciones fantásticas y sitios creados con FC, la creatividad ahora invadirá las aplicaciones de Internet enriquecidas. Dicho esto, los desarrolladores tendrán que prestar atención. El código generado es bastante extenso y cada cambio tiene un impacto en el diseño. Colocar cosas en Flash Catalyst y tener un buen código generado es una cosa, pero codificar algo de acuerdo con el código FC a veces quema el cerebro de un desarrollador!
Flash Catalyst trae muchas cosas nuevas para explorar, pero para ser honesto, esperaba más. La biblioteca de componentes se reduce, la interacción con los elementos también se reduce, el texto importado no siempre conserva su calidad original y algunas cosas no funcionan correctamente (especialmente en DataList con unas pocas filas ...). Dicho esto, esto es sólo una versión beta, ¿verdad? Todavía tenemos que esperar el lanzamiento final..
Definitivamente, Flash Catalyst alcanzará las masas, pero el código generado y la interacción de Flash Builder 4 necesitarán algo de tiempo para ganar popularidad, principalmente porque las nuevas especificaciones de Flex 4 son muy diferentes de Flex 3.
Para aquellos que quieran aprender más sobre Flash Catalyst, visite la página de tutorial de Catalyst en Adobe Labs.
Gracias por leer, sería genial escuchar lo que tienes que decir.!
Accentsconagua