martes, enero 23, 2007
Las imagenes perennes (a.k.a. Todo se puede hacer)
Lo que K queria para la pagina en que estamos trabajando era un menu infinito....
Si, tan simple y complejo como un menu infinito.

Despues de buscar casi 100 combinaciones de palabras (scrolling menu, vertical image, image slider, slider scrolling, etc..etc...)
se me ocurrio scrolling image loop, y llegue a este maravilloso tutorial.

 The Infinite Menu (El Menu Infinito)
creado por ilyas usal

Lo que el hizo es un menu infinito, que gira y gira y gira. El objetivo que quiere K es un poco distinto, pero no tanto.
Es crear un scroll horizontal con imagenes, que gire, gire y gire.

Asi que aqui viene el tutorial simplificado de como hacer

Las imagenes perennes
FLA final de Las Imagenes perennes

  1. El Flash
    Crear un archivo flash con el alto y ancho deseado para el menu.
    Partimos creando un cubo con una proporcion de 4x3 (casi todas las imagenes tienen esta proporcion)
    Por ejemplo, si queremos un ancho de 160 = 40x4 pixeles, por lo que el alto de esta imagen sera 40x3 = 120 pixeles.

    Una vez creado, lo convertimos en un Movie Clip (Windows = F8)
    mc_imagen

    Repetimos cuantas veces queramos el recien creado Movie Clip, esto dependiendo de las imagen que queramos mostrar
    Nota: Los numeros estan sobre los Movie Clips, son solo referenciales. Tambien la imagen esta corrida 40 pixeles hacia abajo para ver el espacio seteado.

    Cuadro 4 fuera
    Cuadro 4 fuera.


    Una vez que tenemos eso listo, le ponemos un nombre de instancia a cada elemento, por ejemplo mc_1, mc_2, mc_3 y mc_4
    Esto sera importante para la etapa de cargar una imagen en dichos elementos.

    nombre de instancia
    Nombre de instancia

    Luego convertimos el conjunto en un nuevo Movie Clip.
    Yo le llame mc_compacto.

  2. El Efecto
    La idea del efecto es bastante simple (y claramente no se me ocurrio a mi)
    El clip se mueve de izquierda a derecha, hasta quedar completamente fuera del cuadro. Cuando sucede esto, el clip vuelve a su comienzo, por esto el clip se debe repetir.

    mc_compacto repetido
    mc_compacto repetido
    Nuevamente convertimos a Movia Clip el conjunto.
    Yo lo llame mc_general.

    Y asi, cuando la primera parte salga del cuadro, la segunda estara en la misma posicion que la primera, repetimos el cuadro, y no se notara que nos saltamos a la primera.

  3. La mafia, perdon magia (a.k.a. Actionscript)
    Una vez que tenemos el Movie Clip mc_general con todo dentro (mc_compacto 2 veces), simplemente le hacemos un click para seleccionarlo e incluimos lo siguiente

    Codigo:
     onClipEvent (load)
    {
       velocidad=-5;
       limite=-640;

    }
     onClipEvent (enterFrame)
    {
       _x+=velocidad;
       if (_x < limite) _x=0;
    }





    IMPORTANTE
    Explicacion de algunas cosas en el Actionscript

    limite=-640;

    Como vemos, en la linea 9 es donde ocurre la magia.
    Si el clip llega a los limite (negativo del largo de mc_compacto) volvemos a 0.

    velocidad=-5;

    Con estos podemos definir la velocidad que se mueve, tambien dependera de los FPS que tenga nuestra pelicula.
    Recomiendo 24 fps para la pelicula.


    Actionscript en Flash
    Actionscript en Flash

    Fijense que en la parte de arriba de la imagen dice Action - Movie Clip y abajo mc_general, por lo que esta correctamente seleccionado el


  4. Cargando las imagenes (algo mas de Actionscript)
    Para cargar las imagenes, usaremos un poco de action script simple, sin precarga ni nada muy exotico, mal que mal, las imagenes solo deberian pesar 7KB maximo.
    Utilizaremos las siguientes imagenes

    inf_1inf_3inf_4

    Para esto, tendremos que abrir cada Movie Clip con doble click, para asi editarlo internamente)
    Doble Click -> mc_general
    Doble Click -> mc_compacto

    En el Timeline seleccionamos el unico cuadro que tendremos

    Y incluimos la siguiente accion




    mc_1.loadMovie("http://www.kyl.cl/rapidin/inf_1.jpg");
    mc_2.loadMovie("http://www.kyl.cl/rapidin/inf_2.jpg");
    mc_3.loadMovie("http://www.kyl.cl/rapidin/inf_3.jpg");
    mc_4.loadMovie("http://www.kyl.cl/rapidin/inf_4.jpg");
    stop();



    De esta manera, cuando se carguen los elementos se llamara a su respectiva imagen y cargara en cada elemento que creamos.

  5. El Gran Final

    El Gran Final



P.D.: As you wish
 
Enviado por L a las 00:38 | Permalink |


0 Comentarios: