Archivo de Marzo, 2008

Flash CS3. SwfAddress o cómo disponer de un History Manager en Flash

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.

SwfAddress Menu

Ver ejemplo >>

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.

Leer más »

Flex 3. Flex Component Kit para Flash CS3

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).

Leer más »

Flash CS3. Transiciones entre MovieClips

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".

Transiciones en Flash CS3

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

hdr.jpg

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.

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

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.

« Página anterior