WEB FLASH TWEEN JUAN GARCIA EN 12KB

He podido investigar en los últimos días el comportamiento de una página web que me ha parecido muy muy curiosa.

La pagina en cuestion es la siguiente:

http://www.christinarosenvinge.com/

Tras algunas pruebas con el código actionscript y jugando con la clase tween, este fué el resultado, hay dos versiones, una simple (la primera que hice) y otra algo más compleja. En esencia las dos funcionan con el mismo código, salvo pequeñas modificaciones. Este es un recurso que he desarrollado yo íntegramente y lo comparto con la comunidad, pensando en que puede ser interesante para nuestros proyectos. Se me ocurre por ejemplo hacer una galeria de fotos con este sistema, o un micro site, de presentacion de algún producto o servicio.

Ahí los tenéis y espero que sea de vuestro agrado…

Este es el simple…
[SWF] /wp-content/home1.swf, 500, 300[/SWF]

Y este el complejo…

[SWF] /wp-content/home.swf, 500, 300[/SWF]

al final del post facilitaré tambien los archivos.fla, a fín de que quien lo desee, lo pueda descargar.

¿COMO SE HACE?

La idea es sencilla:

1) Crearemos movie clips con cada uno de los apartados de nuestra web

2) En Flash, seleccionaremos todos los MovieClips y crearemos un movie Clip-Total, que llamaremos contenedor.

3) En una hoja de papel iremos anotando las posiciones de «x» e «y» así como el ángulo que deberian rotar para que vieramos justo ese apartado en el escenario:

En el ejemplo y partiendo de que la Sección I esta inicialmente centrada en el escenario.
SECCION I � x= 750 px ; y= 400 px: rotación= 0º.

SECCION II � x= 400 px ; y= 50 px: rotación= -90º.*

SECCION III � x= 250 px ; y= -100 px: rotación= 0º. *
SECCION IV � x= 100 px ; y= -50 px: rotación= 90º. *

SECCION V � x= -250 px ; y= -100 px: rotación= 0º. *
SECCION VI � x= 750 px ; y= 400 px: rotación= 0º. *
*el angulo que anotémos será siempre haciendonos la siguiente pregunta ¿cuanto tiene que rotar el contenedor desde la sección I para llegar a la sección que sea…?

Pues la parte más compleja, ya la tenemos lista!

ahora a programar que en este caso es super sencillo, en este caso.
4) Generaremos, una capa con la botonera, os podeis currar la que querais…y finalmente la disposicion de las capas será asi de sencilla:

5) Abriremos el panel de Acciones (F9- Windows /ALT+F9 -Mac)

Lo primero que haremos será importar las clases, poniendo «*», las importamos todas.
import mx.transitions.*;
definirémos los botones como funcionesque contendrán tweens para que realicen las siguientes cosas:

A)� posición X……desde la posición X desde donde se encuentre el contenedor (contenedor._x) hasta la posicion que le demos (en cada botón).

B) posición Y……desde la posición Y desde donde se encuentre el contenedor (contenedor._y) hasta la posicion que le demos (en cada botón).

C) Rotacion……desde el angulo que tenga el movie-clip «contenedor (contenedor._rotation) al ángulo que queramos.

definimos los tweens dentro de cada boton en extructura, quedará algo así.
btn1.onPress=function(){

los tweens
} ;
btn2.onPress=function(){

los tweens
} ;
btn3.onPress=function(){

los tweens
};
btn4.onPress=function(){

los tweens
};
btn5.onPress=function(){

los tweens
};

btn6.onPress=function(){

los tweens
};

Para el que no controle los «tween por programación», próximamente escribiré un post al completo hablando sobre ellos.

6) Básicamente la estructura, o idea de este recurso, esta aquí recogida, no obstante, para quien deseé, ampliar información, como con todos los recursos que ofrezco, facilito los archivos .fla para vuestro estudio.

MODELO SENCILLO: aquí

MODELO MÁS COMPLEJO: aquí

RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia – webmaster@4cuarenta.com Julio 2008
Saludos!