Flex, AS3, AS2, flash, css
Archivo de marzo, 2008
Flash CS3. SwfAddress o cómo disponer de un History Manager en Flash
30 mar
Flex dispone de un History Manager que permite a los usuarios de la aplicación poder navegar con los botones “Atrás” y “Adelante” del Explorador Web (Internet Explorer, Firefox, etc). Esto mismo lo podemos hacer con Flash si utilizamos el paquete SwfAddress.
En este ejemplo hemos realizado un proyecto ActionScript con Flex 3.
Descargar Proyecto ActionScript completo >>
He utilizado Papervision3D 2.0 (GreatWhite) y Tweener.
Descargar biblioteca Papervision3D 2.0 GreatWhite >>
Descargar biblioteca Tweener >>
En la carpeta “assets” encontrarás el archivo Biblioteca.swc, que contiene los botones que aparecen en la aplicación. Cuando crees el proyecto Flex, selecciónalo con el botón derecho en la ventana “Flex Navigator” y elige “Properties”. En la ventana que aparece selecciona “ActionScript Build Path”, y la pestaña “Library path”. Pulsa sobre el botón “Add SWC…” y dale la ruta al anteríor archivo, Biblioteca.swc.
Flex 3. Flex Component Kit para Flash CS3
29 mar
Una de las novedades de Flex 3 es que permite utilizar recursos dinámicos (dynamic swf9 assets) realizados en Flash CS3. Así, es posible crear un MovieClip -que incluya código ActionScript 3-, e importarlo desde Flex 3, donde podremos acceder a sus métodos, propiedades, etc.
Para poder utilizar recursos creados en Flash CS3 desde Flex es necesario instalar la extensión Flex Component Kit for Flash CS3, que encontrarás en la página de Adobe:
Flex Component Kit for Flash CS3 >>
Para hacer la descarga es necesario registrarse (es gratuito).
Flash CS3. Transiciones entre MovieClips
15 mar
Flash CS3 ha adaptado el paquete de transiciones a AS3
fl.transitions.*
Lo puedes encontrar en la carpeta de instalación de Flash CS3:
/carpeta instalacion FlashCS3/idioma/Configuration/ActionScript 3.0/Classes/
Se aplican a nivel de MovieClip lo que permite utilizarlas, por ejemplo, para pasar de una sección a otra de nuestra aplicación. En este ejemplo las hemos empleado para animar las transiciones de un carrusel de imágenes.
He utilizado 16 variaciones de las 10 básicas. (las combinaciones que se pueden obtener son muchas más) consiguiendo… lo que sólo Homer Simpson haría: un carrusel con todo tipo de transiciones; lástima que no esté el “efecto gusano”.
Ver ejemplo y código fuente >>
Para ver el código fuente entra en el ejemplo, pulsa sobre él con el botón derecho del ratón y elige “View source” en el menú que aparece. Las imágenes no se han incluído en el archivo zip.
En este paquete también puedes encontrar un Tween/Tweener desarrollado por Adobe que a mí personalmente no me convence demasiado; prefiero Tweener a la hora de animar.
P.D.:Me he planteado por qué no utilizo Tween, que viene con Flash, y sí recurro a otros motores de animación. He estado comparando la versión de Tween para Flash CS3/AS3 con la de Flash MX 2004/AS2, y apenas si ha cambiado algo, salvo la lógica conversión de AS2 a AS3. ¡¡¡Y estamos hablando de 2003!!! Se puede argumentar que sí, que para garantizar la compatibilidad con versiones anteriores y bla, bla, bla…; pero si ahora con AS3 prácticamente no se puede reutilizar nada de lo desarrollado con versiones anteriores de Flash (salvo algún elemento gráfico que otro 
).
Para muestra, un botón: quiero animar un movieClip y llevarlo al centro de la pantalla:
a) Tween de Flash:
var movimiento:Tween = new Tween(miMovieClip, “x”, Regular.easeInOut, miMovieClip.x, 400, 1, true)
b) Tweener:
Tweener.addTween(miMovieClip, {x:400, time:1, transition:”easeInOutQuad”})
No sé, parece que con Tweener queda como más “compacto” 
. Por no hablar de la gestión de eventos (cuándo acaba una animación, qué instancia la ha realizado, etc…)
Imagenes HDR
10 mar
Si os gustan las imágenes HDR que tanto están dando que hablar, pasaros por esta magnifica recopilacion.
Flex 2. Galería de imágenes. Ejemplo de transición.
10 mar
La transición entre imágenes está inspirada en el spot televisivo de un conocido banco (el que lo adivine tiene premio ).
Las imágenes que he utilizado son las mismas de siempre. Estamos un pelín repetitivos, pero es que el servidor está casi lleno y tenemos que reutilizar lo que hay ya O:-) .
Ver ejemplo y código fuente >>
Se puede configurar el número de segmentos horizontales y verticales en que se divide la imagen, así como la duración de la transición y del giro de cada pieza.
Para la animación he utilizado Tweener y las clases no están incluídas en el código fuente.
Flex 2. Motor de físicas APE en Flex
3 mar
Este ejemplo estaba ya subido, creo recordar que en noviembre. Lo he borrado accidentalmente y aquí lo tenéis de nuevo. Perdón por las molestias O:-)
Ver ejemplo y código fuente >>
Utilizo el motor de físicas APE para ActionScritp 3, cuyas clases no van incluídas en el código fuente.
FlexLib
2 mar
Os paso un link a la librería de componentes open source FlexLib. Últimamente he estado probando algunos de ellos y me parecen super útiles.
Flex 2. Pasemos página
2 mar
Un ejemplillo de aplicación de la clase DeformBitmap anterior. La he modificado un poco para adaptarla a este caso, pero básicamente es la misma.
He utilizado Tweener para animar el efecto.
Flex 2. Flash CS3. Distorsionar una imagen
2 mar
¿Cómo es posible que Flash Player muestre objetos 3D, si en la página de Adobe, y más concretamente, en la sección de Flash/Flex no se habla nada al respecto? Realmente Adobe/Macromedia no ha desarrollado ningún motor 3D. Lo que Carlos Ulloa concibió y que tan rápidamente ha crecido, dando páginas web impresionantes, es una ingeniosa utilización de la capacidad de Flash para distorsionar bitmaps. La génesis, y los cimientos de Papervision3D están en la clase Bitmap/BitmapData que apareció con Flash 8, si no recuerdo mal.
Aquí tenéis un ejemplo my básico, -y de mi propia cosecha, no tiene nada que ver con Papervision-, de cómo distorsionar un bitmap. Simplemente se trata de transformar una malla (utilizo la ecuación de un plano Bézier de cuatro puntos) y rellenar sus triángulos con bitmapFill.
Ver ejemplo y código fuente >>
Puedes ocultar/mostrar la malla, cambiar su densidad, y aplicar suavizado a la imagen.
La clase que distorsiona la imagen se llama DeformBitmap.as y la encontrarás en el paquete jel.com.effects. Extiende de Sprite, por lo que la puedes utilizar directamente desde Flash. Al instanciarla se le pasa el Bitmap con la imagen y el número de segmentos horizontales y verticales de la malla. Para distorsionarla se llama al método transformBezier, dando como parámetros 4 puntos con la posición de las esquinas.
Encontrarás también la clase DeformSprite que, como su nombre indica, permite distorsionar un sprite. Esta clase tiene dos parámetros más:
- Fondo transparente, o no. Si el sprite no tiene un contorno rectangular es conveniente configurar este parámetro como true.
- Suavizar la conversión de vectorial a bitmap.
P.D.: Por cierto, parece que Adobe por fin se ha decidido, y en el proximo Flash CS4 (verano de 2009) implementará la posibilidad de mover capas en 3D.
