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.

Comparte:

* * * * * 8 votos

Acerca de esta entrada

Usted está leyendo “Efectos en Flex 2.0 (MIF ONLINE I),” una entrada de MadeInFlex

Autor: Alberto Albericio: Alberto es un arquitecto de aplicaciones web especializado en Rich Internet Applications basadas en Flex y Ajax. Actualmente trabaja desarrollando software en Codeoscopic como Jefe de Proyecto.

URL del Autor:: http://www.codeoscopic.com

Ver: otras entradas del autor

Publicada:: 19.12.06 / 12pm

Categorías:: AUG, Artículos

Entradas relacionadas:: Flash Player 10 released!
Mini Photoshop en Flex
Primera reunión MIF online
Flex 2.0.1 HotFix 2

Número de visitas:: 20535

Ramón Helena 19.12.06 / 2pm

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

Alberto Albericio 19.12.06 / 8pm

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

Israel Gaytan 20.12.06 / 12am

Excelente Alberto gracias!!!!

MadeInFlex » Blog Archive » Estilos en Flex a través de CSS (MIF ONLINE I) 21.12.06 / 9am

[...] Estilos en Flex a través de CSS (MIF ONLINE I) Bueno, ahora toca el turno de revisar de nueva cuenta aquella charla de CSS, no sin antes obvio darse una vuelta por las excelentes charlas de Alberto y de Carlos. Mi charla fue un paseo introductorio acerca de lo que se puede lograr con CSS dentro de Flex para la personalización de los componentes entre otras cosas. Respecto a esta charla existen estos archivos: [...]

Kike 21.12.06 / 11pm

genial!!! gracias alberto, un trabajo muy chulo para en’rich’ecernnos…

salu2

Chema Roldan 11.01.07 / 1am

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

Alberto Albericio 11.01.07 / 11am

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!

Blog de Sergio Ílvarez Fernández » Conferencias Offline 14.01.07 / 2pm

[...] Alberto Albericio. Efectos en Adobe Flex 2.0 [...]

Adriana 21.04.07 / 2am

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

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????

Adriana 26.04.07 / 2am

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.

Adriana 01.06.07 / 10pm

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

Carlos Rovira 02.06.07 / 1am

@Adriana: Te aconsejo que te subscribas a nuestra lista de correo ya que es el sitio ideal donde puedes esperar contestaciones a tus preguntas.

Roosevelt Salazar 17.07.07 / 3am

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

Luis Rodriguez 01.08.07 / 4am

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

Xeito 03.09.07 / 9am

Magnífico recurso. Lo añado a mis favoritos y en cuanto tenga un rato me pondré con ellos.
Muchas gracias por la aportación

Juan Carlos 06.09.07 / 12pm

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

David 16.10.07 / 4pm

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.

Xevi Colomer 20.11.07 / 8pm

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

Arturo Murillo 22.07.08 / 1pm

buenos dias quiero saber como abrir un documento en flex 3

alberto morales 20.01.10 / 7pm

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.

Alberto Albericio 20.01.10 / 9pm

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.

Efectos en Flex 2.0 (MIF ONLINE I)

Definición de efecto

Efectos animados en Adobe Flex 2.0: mx.effects

Filtros bitmap: flash.filters

Transformaciones geométricas

Custom Effects

Consideraciones

Acerca de esta entrada

22 Comentarios

Su comentario

Próximo encuentro...

Entradas Recientes

Archivos Mensuales

Top Entradas

Mejores entradas del mes

Categorías