Emprendiendo una Startup de Base Tecnológica en España.
Tecnología - Motivación - Ventas y Marketing.
Consultoría Estratégica de Negocios en Internet

WEB FLASH TWEEN JUAN GARCIA EN 12KB

Share

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:
web_flash_tween.gif

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!



Share

← Entrada anterior

Entrada siguiente →

13 Comentarios

  1. oscar

    Muy interesante la web qu hablas, yo tb la estuve ojeando y probando el efecto aunque no me quedaba demasiado bien.
    Donde están los ficheros que dices en el post, me gustaría echarle un vistazo.

  2. ivan

    Es interesante la interacción ^_^….

    y los .fla para descargar?

  3. los estoy colgando en el servidor, dadme unos minutillos. el recurso , vale la pena.
    Saludos!

  4. ivan

    oh… gracias n_n`

  5. ivan

    parece que los botones de descarga no estan activados…

    gracias…

  6. Ya esta listo!
    es que sinceramente, me ha pillado el toro!
    siento la tardanza chicos!

  7. es un recurso muy bueno. aver si somos capaces de ponerlos de moda en españa seremos capaces?

  8. hola, muy interesante el recurso, estoy buscando algo similar, pero quiero que haga un zoom a los contenidos, como en la pagina de muestra

  9. brenda

    waooo esta super bien el tutorial algo muy sencillo pero a la vez muy util y creativo como la pagina que mostraste

  10. Así es, sencillo y además resultón, espero que os haya gustado, pronto dejarñe otro recurso parecido
    nos vemos pronto!

  11. lucas

    Joer..es justo lo he he intentado hacer hace siglos… digo intentar hacer.. porke no habia encontrado un ejemplo ke analizar al no saber el nombre exacto del tipo de efecto ke es.. Lo malo ahora ke esta estos dos aki, es ke no me abre bien el archivo. me da error. en fin.. esta pero ke muy bien lo ke hicistes. saludos

  12. Franco

    Excelente tutorial!!!!! Me sirvio mucho!! . .estare atento a nuevos! . .Graciass!!!

  13. me alegro que te gusten, no se si no puedes abrir por que está en una version que igual no puedes abrir… esta realizado en cs3. actualiza tu software o hazmelo saber y te lo envio en una version que te permita desmenuzar el ejercicio okis?
    saludos!

Deja un comentario