WEB FLASH TWEEN JUAN GARCIA EN 12KB

Posted by
/ / 15 Comments
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...

Esta Animación Requiere Adobe Flash Player version 8.0 Minimo.

Y este el complejo...

Esta Animación Requiere Adobe Flash Player version 8.0 Minimo.

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!



  1. 15/07/2008

    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. 15/07/2008

    ivan

    Es interesante la interacción ^_^….

    y los .fla para descargar?

     
  3. 15/07/2008

    webmaster

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

     
  4. 15/07/2008

    ivan

    oh… gracias n_n`

     
  5. 15/07/2008

    ivan

    parece que los botones de descarga no estan activados…

    gracias…

     
  6. 15/07/2008

    webmaster

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

     
  7. 18/07/2008

    Juan García

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

     
  8. 25/08/2008

    alfonso

    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. 03/09/2008

    brenda

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

     
  10. 12/09/2008

    Juan Garcia Delicado

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

     
  11. 03/03/2009

    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. 11/04/2009

    Franco

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

     
  13. 03/01/2010

    webmaster

    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!

     

Dejanos tu comentario ;)

  1. RECURSOS WEB PROFESIONALES » Blog Archive » RECOMENDADOS POR MÉTODO PROFESIONAL07-18-08
  2. WEB FLASH TWEEN (ENGLISH VERSIÓN) | RECURSOS WEB PROFESIONALES07-03-09



NUESTRO CURSO SEO…..

 Tu Nombre:
*Tu Email:


NO SPAM - LOPD- Email marketing

SIGUENOS EN FACEBOOK

Categorias

open all | close all