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 4×3 (casi todas las imagenes tienen esta proporcion)
    Por ejemplo, si queremos un ancho de 160 = 40×4 pixeles, por lo que el alto de esta imagen sera 40×3 = 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

8 comentarios en “Las imagenes perennes (a.k.a. Todo se puede hacer)”

  1. Hola! Me gustó mucho su tutoria, justo lo que andaba buscando. Pero tengo un para de dudas y quisiera saber si me pueden echar la mano. Quiero hacer algo así, pero quiero que dada imagen sea un botón y me mande a otra parte. Imagino que con hacer cada una de ellas un botón en vez de un MC es suficiente. Pero ¿cómo le hago para que cuando mis usuarios pongan el cursor sobre mi menú este se detenga o mueva conforme muevan el cursor?

    Gracias!

  2. maestro una ayudita, estaba tratando de hacer lo de la imagen pero no cacho como hacer para ubicar en otra ubicacion, siempre me sale arriba izquierda… gracias

  3. hola gracias por la atencion, mira estoy tratando de hacer una pagina y estaba tratando poner unas “imagenes perennes”, pero no como ubicarla en un lugar de la pagina con cordenadas (ancho 212 – alto 70 – x=119 y=-225, en ese lugar y espacio me gustaria poner imagenes cada imagen de 106 * 70 , sorry si no me expreso bién, soy deotro rubro, pero si me pudieses ayudar se agradeceria mucho….

  4. Lasc imagenes que tiene este script son de 160×120, lo que debes hacer para poner imagenes mas chicas es ajustar uno de los Movie Clips a ese tamaño (uno de los finales), de ahi tienes que ordenarlo y hacerlo calzar bien, ya que lo que hace el script es mover el cierta cantida de pixeles un movie clip compuesto.

    La otra solucion (quizas mas simple) seria que le pintes bordes negros arriba y abajo (hasta lograr los 120px con 25px a cada lado) de la imagen, pero dejarla igual en 160 de ancho….

    La ubicacion simplemente depende del HTML, puedes ponerlo en cualquier lugar, incluso podria ser flotando, solo tienes que revisar la alineacion o un poco de CSS (Cascade Style Sheet).

    (yo tambien soy de otro rubro … soy Ingeniero Civil en Sonido y Acústica [E])

  5. Buenas tardes

    Tengo una inquietud…con este tipo de menu hay algun limita en la cantidad de imagenes o botones a colocar???….Es que ya lo he intentado hacer, pero despues de determinado número de elementos que quiero que vayan en este tipo de menu, sale un error…. Gracias…

  6. Lo que ebes hacer es incluir mas moviclips, y ponerlos en el orden correcto.

    Osea es cosa de incluir mas imagenes, cargar mas, pero tambien modificar la ventana que las muestra, velocidad, desplazamiento..pero no es tan dificil como pueda parecer.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *