Efectos en Flex 2.0 (MIF ONLINE I)

Hola de nuevo a todos, ya han pasado unos cuantos días ( y os pedimos perdón desde aquí ) desde que la primera reunión online de MadeInFlex se celebrara. El retraso para ir colgando las charlas se debe a unos problemas de permisos y al ajetreo que tenemos últimamente todos.

Como os comentamos en su momento, nuestra intención es la de ir presentando todo el material de las charlas en forma de entradas en la web y enlaces a las conferencias grabadas, tanto para dar un mayor ámbito al artículo como para poder repasar y estudiar todas las charlas que, por falta de tiempo, se tuvieron que acelerar o cortar.

Pues bien, la charla que ofrecí llevaba por título “Efectos en Flex 2.0” y pretendía ser un repaso a los efectos en Flex 2.0 que iría, desde qué entendemos por efectos en Flex 2.0, hasta qué podemos llegar a hacer con ellos.


Definición de efecto

En el punto 1, damos un primer enfoque de qué entendemos por efecto, tipos de efectos: animados, filtros bitmap, tranformaciones geométricas, custom effects…

Efectos animados en Adobe Flex 2.0: mx.effects

El segundo punto analiza los efectos animados, basados en la clase TweenEffect, que podemos encontrar en Adobe Flex 2.0. En este punto aprenderemos a buscar, definir y utilizar estos efectos ( Move, Resize, Rotate, Glow, etc ) además de dar unas pequeñas nociones de uso y rendimiento al final del punto.

Filtros bitmap: flash.filters

El punto tercero repasa una gran parte de los filtros bitmap que podemos utilizar en Flex 2.0. Tanto imágenes como componentes en Flex 2.0 tienen una representación bitmap que podemos variar para expresar diferentes sensaciones. Muchos de estos filtros ( Emboss, Sharpen, Saturation, Brightness, Edge Detection, etc ) los podemos encontrar como parte de los efectos predefinidos en muchos programas de tratamiento de imágenes como Adobe Photoshop. Algunos de estos efectos utilizan matrices de color o convolución para generarse con lo que también hacemos una pequeña explicación de las mismas.

Transformaciones geométricas

El punto 4 nos ilustra el proceso de cómo deformar imágenes y componentes del framework de Flex 2.0. Mediante una matriz de transformación, podemos aplicar efectos de Rotación, Escalado, Deformación y Traslación.

Custom Effects

Por último, el quinto punto sirve para ver hasta que extremo se pueden personalizar y combinar todo lo anterior visto para conseguir efectos espectaculares como: efectos 3D, flip, etc cubriendo así el vacío que existe en Flash Player para efectos 3D.

Consideraciones

Como consideraciones finales, haceros reflexionar sobre el uso de los efectos, su rendimiento en máquinas diferentes, el tiempo de desarrollo y, como no, en lo espectaculares que quedan!

Todos estos puntos los tenéis explicados en profundidad en el documento PPT/PDF de la charla que se adjunta más abajo.

Como grabamos la charla, dejamos a vuestra disposición el link a la misma donde podréis revivir la sesión:

Made in Flex: Efectos en Flex 2.0 parte I
Made in Flex: Efectos en Flex 2.0 parte II

De la misma forma que la charla, os dejamos también los ficheros fuente que sirvieron para ir siguiendo con ejemplos la explicación. En este fichero .zip encontrareis el proyecto ‘Effects’ para Flex Builder. Además, en la carpeta lib de este proyecto esta el componente ( swc ) de la ventana que utilizamos para los ejemplos de la charla; tendréis que añadir este swc a vuestro “Library Path” en Proyecto->Properties->Flex Build Path->Library Path->Add swc

Descargar presentación: Efectos_PPT_PDF.zip
Descargar proyecto para Flex Builder: Effects.zip

Si tenéis cualquier duda de instalación o compilación, hacedme llegar un comentario al final de este mismo artículo.

22 Comentarios

  1. Ramón Helena

    Saludos Alberto,

    Pues me alegro muchísimo de esta publicación, se que muchos estabamos ansiosos de poder repasar mas detenidamente el contenido de tu charla, así como las demás que impartieron.
    Vamos a evaluarla (siempre con miras de enriquecernos todos) y desde ya te adelanto las gracias por tu publicación y el esfuerzo de todo el equipo de Made in Flex, por ventilar esta tecnología.

    Abrazos,

    Ramón Helena

  2. Alberto Albericio

    Hola Ramón,

    En el material adjunto al post podrás encontrar, mejor explicado y con más ejemplos, todo lo que pasamos “de forma rápida” al final de la charla por falta de tiempo.

    Algunos de los ejemplos, de los que ni siquiera pude introducir el concepto, los he recortado para una siguiente charla en la que, espero, no pasarme de nuevo de tiempo.

    Saludos y gracias por tu comentario!

    Alberto

  3. Pingback: MadeInFlex » Blog Archive » Estilos en Flex a través de CSS (MIF ONLINE I)

  4. Chema Roldan

    Hola, me he bajado los archivos pero no sé como abrirlos como nuevo proyecto desde el Eclipse, alguna ayudita please??? Saludos

  5. Alberto Albericio

    Hola Chema,

    Te comento los pasos a seguir:

    1) Creas un proyecto con el nombre que quieras en el Flex builder

    2) Copias los ficheros del archivo .zip dentro del proyecto

    3) Refrescas el proyecto

    4) Incorporas el componente ventanaAzul.swc al Library Path de tu proyecto: Properties->Flex Build Path->Library Path->Add swc

    5) A cada uno de los 3 ficheros principales mxml: Tweens, Transformations y Filters les pones el flag de “Default Application” ( Set as default application )

    6) Ejecutas cada uno de ellos: right click->Run As->Flex Application

    Ya me dirás qué tal!

    Alberto

  6. Pingback: Blog de Sergio Ílvarez Fernández » Conferencias Offline

  7. Adriana

    Hola a todos, estoy trabajando en un proyecto, donde utilizamos Flex 2.0 ActionScript y ColdFusion, y estoy teniendo un gran problema, pork no se como le puedo hacer para mostarr un archivo pdf al usuario, es decir, por ejemploun usuario sube un material en pdf, y despues lo quieren ver otros usuarios como le puedo hacer para cuando alguien mas lo quiera ver, lo pueda visualizar en pantalla, no se si me explique bien, pero lo que quiero saber es que componete puedo usar para mostrar el archivo y como hacerlo????

    Por favor si alguien sabe como hacerlo, les agradeceria muchisimo su ayuda, estoy desesperada 😥 , puesto que he estado buscando y solo me habla del componente RichTextEditor, pero dice que ese solo puede mostrar archivos .doc y html

    Se los agradeceria muchisimo 😆

  8. Adriana

    Hola a todos.

    Estoy trabajando en un proyecto, donde utilizamos Flex 2.0 ActionScript y ColdFusion, y estoy teniendo un gran problema, pork no se como le puedo hacer para mostarr un archivo pdf al usuario, es decir, por ejemploun usuario sube un material en pdf, y despues lo quieren ver otros usuarios como le puedo hacer para cuando alguien mas lo quiera ver, lo pueda visualizar en pantalla, no se si me explique bien, pero lo que quiero saber es que componete puedo usar para mostrar el archivo y como hacerlo????

    Por favor si alguien sabe como hacerlo, les agradeceria muchisimo su ayuda, estoy desesperada 😥 , puesto que he estado buscando y solo me habla del componente RichTextEditor, pero dice que ese solo puede mostrar archivos .doc y html

    Se los agradeceria muchisimo 😆

  9. Adriana

    Hola a todos, oigan alguin me podria ayudar, lo que pasa esque tengo un aplicacion en flex, entonces estoy usando oracle 9i para la base, lo que necesito es lo siguiente, tengo en una tabla un tipo de dato LONG(oracle), entonces cuando quiero mostrar su contenido en flex, no me muestra nada, pero si lo guarda pork esta la info en la tabla, lo que pasa esk estoy usando el componente RichTextEditor, y el texto que estoy guardando. lo guardo el .htmlText, para que me guarde su formato pero pero no me lo muestra cuando lo vuelvo a cargar.

    public function CargarDGTema():void
    {
    RichTextObjetivo.htmlText = dgTemas.selectedItem.TEMOBJETIVO2;

    }
    algo asi es la funcion, donde cargo el contenido del campo, donde:
    RichTextObjetivo = Es el RichTextEditor
    dgTemas = es el Grid del cual lo cargo;
    TEMOBJETIVO2= Es el campo de la tabla de tipo LONG.

    Ojala que alguien me pueda yudar, muchas gracias. 🙂

  10. Adriana

    Hola a todos, quisiera saber si alguien pudiera ayudarme, estoy trabajando
    con ActionScript, y quiero sacar una diferencia en fechas, quisiera saber si
    existe en AS alguna funcion con la que pueda hacerlo.
    Tendo dos variable tipo fecha y a cada una le estoy asisgnado una fecha la
    de inicio y la de fin, entonces lo que quiero obtener es la diferencia en
    dias.

    Por ejemplo si pongo de fecha inicio el 01/05/2007 y la fecha fin 01/06/2007
    que me diga que la diferencia en dias son 31 dias.

    Ojala alguien me pudiera ayudar, en verdad lo necesito mucho….Gracias a
    todos

    Saludos 🙂

  11. Roosevelt Salazar

    en la parte de los ejemplos no puedo ver bien los video cuando esta editando se ve la pantalla pero cuando le da play al proyecto no veo la pantalla donde se muestran los efectos en flex solo me aparece un gran cuadro celeste con lineas blancas y azules me los podrian enviar a mi correo plz

  12. Luis Rodriguez

    Me alegra mucho podamos aprender de esta presentacion, y mas aun si este contenido es en español ya que en realidad la mayoria de video tuto o charlas que he visto estan en ingles.

    Gracias , sumamente importante este contenido

  13. Juan Carlos

    Me ha encantado la charla, me ha sido super útil. A parte me gustaría saber si es posible guardar la imágen que se ha modificado con los filtros.
    Saludos y gracias

  14. David

    Magnífico trabajo y funciona al pelo.Quiero preguntarte una cuestión. Las transformaciones geométricas las realizas sobre un componente. He intentado hacer el efecto de rotación sobre una label y no me funciona bien,no me admite ningun ángulo posible. Con qué clase se podría hacer en flex??.Gracias.

  15. Xevi Colomer

    Hola Buenas,

    Los enlaces de las peliculas no funcionan, me pide que me instale la version 8 o superior pero yo ya tengo la 9. De echo esto ya me ha pasado con algunos de mis proyectos y creo que es debido a una actualizacion de adobe, aunque el error era este “Alternate HTML content should be placed here. This content requires the Adobe Flash Player. Get Flash “, en una web vi que si trabajas en flex solo tienes que desactivar la casilla de “Detect flash version” en Proyecto -> Propiedades o la otra solucion es editar el AC_OETags.js directamente.

    Estuve en el MIF onSite i el AIF Toolkit es impressionante, pero creo que aun no se pueden usar en los swf o si es asi depende mucho de la GPU

    Pero lo cierto es que me gustaria per esas peliculas xD

    Gracias

  16. alberto morales

    hola alberto que buena publicacion me gusta mucho, sabes estoy hacinedo un proyecto en flex 2.0 action script, es una galeria fotografica. pero lo que no puedo conseguir por ningun medio es lograr que esta corra automaticamente, me podrias ayudar por favor? de antemano muchisimas gracias, espero tu respuesta.

  17. Alberto Albericio

    Hola Alberto,

    Para simular este automatismo te sugiero que uses Timers o eventos del propio Flash Player tipo ENTER_FRAME. Como desconozco parte de los requisitos, creo que lo que mejor te funcionará será crear unos Timers para conseguirlo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase