Scroll de imágenes en Flash

FlashEn esta entrada aprenderemos a realizar un scroll de imágenes (tira de imágenes) grandes delimitada por una máscara. Esta tira de imágenes se desplazará sobre un sólo eje (ya sea X en caso de una tira de imágenes horizontal, o sobre el eje Y para una tira de imágenes vertical) por medio de dos botones (uno para desplazarla a la derecha y otro para desplazarla hacia la izquierda).

Para este ejercicio presentaré la solución para Flash 8 (AS2) y Flash CS3 (AS3). El resultado final y los archivos para descargar los encontrarás al final de este post. Los pasos son los siguientes:

Tutorial

1. Crea un nuevo documento de Flash de 500 x 150 pixeles.

2. Renombra la única capa (layer) que existe, ponle de nombre Actions y bloqueala para no poner ningún elemento ahí.

3. Crea una nueva capa y llámala Scroll.

4. Para el scroll de imágenes usaremos las siguientes imágenes, guárdalas en tu disco duro para poder exportarlas al archivo de Flash:

MSN01 MSN02 MSN03 MSN04
MSN05 MSN06 MSN07 MSN08

5. Haz click en el menú File (Archivo) -> Import (Importar) -> Import to Library... (Importar a la Biblioteca).

6. Jala cada una de las imágenes al escenario y distribuyelas a lo ancho. No te preocupes si no quedan todas a la misma altura y si el espacio entre ellas no es el mismo.

7. Haz click en el menú Window (Ventana) -> Align (Alinear) o bien presiona Ctrl. + K. Selecciona todas las imágenes del escenario y dentro del panel Align asegúrate que no esté seleccionado el botón de "To stage:" (En escena). Haz click en el botón de "Align top edge" y después haz click en el botón "Distribute horizontal center".

Figura 1: Alinear y Distribuir las imágenes en el escenario

8. Selecciona todas las imágenes del Escenario y presiona F8 para convertirlas en MovieClip. Ponle de nombre imagenes al MovieClip, y como nombre de instancia imagenes_mc.

9. Crea una nueva capa arriba de la capa Scroll. A la nueva capa ponle de nombre Mascara, dale click con el botón de derecho y haz click en la opción de Mask (Máscara).

10. Dentro de la capa Mascara crea un rectángulo del color y tamaño que tu quieras. En mi caso el tamaño del rectángulo es de tres imágenes, por lo que al correr la película sólo verás tres de las 8 imágenes que tenemos en el escenario. En la siguiente imagen se aprecia la máscara (rectángulo de color morado/rosa/camote/algo por el estilo). Además se puede observar la película ejecutada, en la cual sólo se observan las tres imágenes que están por debajo de la máscara.

Figura 2: Máscara para la capa Scroll

11. Bloquea las capas Mascara y Scroll. Crea una nueva capa FUERA de la Máscara (puede quedar arriba o abajo de la capa Mascara, no importa, lo importante es que quede FUERA de la Máscara). Crea una nueva capa y llámala Botones.

12. Haz click en el menú Window -> Common Library -> Buttons, dentro del panel de esta librería encontrarás la carpeta playback flat. Arrastra al escenario el botón flat blue back y el botón flat blue forward.
Cambiales el tamaño de 25 x 25 a 50 x 50 y colócalos uno en cada lado del escenario, como se muestra en la siguiente imagen:

Figura 3: Common Library Buttons

13. Al botón de la izquierda («) asígnale el nombre de instancia izquierda_btn, al botón de la derecha (») ponle de nombre de instancia derecha_btn.

14. Este paso es importante, es momento de definir las coordenadas máximas en las que se moverá la tira de imágenes. Queremos que cuando nos pongamos encima del botón de la derecha, la tira de imágenes se mueva hacia la izquierda y que se pare hasta que podamos ver la última imagen. Lo mismo para el botón de la izquierda. Para encontrar las coordenadas basta con mover la tira de imágenes hasta que la última foto esté en la orilla derecha de la máscara (no olvides desbloquear la capa de Scroll para que puedas ver la máscara):

Figura 4: Límite derecho

En este caso le he puesto una transparencia (alpha) a la máscara para que puedas observar que la última imagen está pegada a la orilla derecha de la máscara. Aprieta Ctrl. + I (I de Info) para obtener información sobre la posición y tamaño de la tira de imágenes (observa, en la imagen de arriba, que está seleccionada la tira de imágenes). En el panel de Info se ve que el valor de X es -23.1 y de Y es 75.0 Fíjate bien que del lado izquierdo de estos valores hay una cuadrícula de nueve puntos que nos muestra la posición del elemento que tenemos seleccionado. Es importante, para obtener las coordenadas correctas, que si no está en negro el cuadrito de enmedio le des click para que se muestre en negro (como en la figura de arriba).

15. Para obtener la otra coordenada en X debemos hacer lo mismo que en el paso anterior pero ahora poniendo la primera imagen de la tira en la orilla izquierda de la máscara.

Figura 5: Límite izquierdo

16. Es momento de poner el código. Da click en el primer frame de la capa Actions y anota lo siguiente:

Actionscript:
  1. var velocidad:Number = 10;
  2.  
  3. derecha_btn.onRollOver = function() { // Queremos que cuando nos pongamos encima del botón la tira comience a moverse a la izquierda
  4.      _root.onEnterFrame = function() {
  5.           if(imagenes_mc._x > -23.9) { // Esta es la coordenada límite que encontramos en el paso 14
  6.                imagenes_mc._x -= velocidad; // Como se debe mover a la izquierda, el valor de la propiedad _x debe disminuir
  7.           }
  8.      }
  9. }
  10.  
  11. derecha_btn.onRollOut = function() {
  12.      delete _root.onEnterFrame; // Como ya nos hemos salido del botón debemos borrar la llamada a      onEnterFrame
  13. }
  14.  
  15. izquierda_btn.onRollOver = function() { // Queremos que cuando nos pongamos encima del botón la tira comience a moverse a la derecha
  16.      _root.onEnterFrame = function() {
  17.           if(imagenes_mc._x < 514.9) { // Esta es la coordenada límite que encontramos en el paso 15
  18.                imagenes_mc._x += velocidad; // Como se debe mover a la derecha, el valor de la propiedad _x debe aumentar
  19.           }
  20.      }
  21. }
  22.  
  23. izquierda_btn.onRollOut = function() {
  24.      delete _root.onEnterFrame; // Como ya nos hemos salido del botón debemos borrar la llamada a onEnterFrame
  25. }

La variable velocidad tiene el valor del número de pixeles que queremos que la tira se vaya moviendo cada momento. En este caso, el valor de velocidad es de 10, no olvides ajustarlo a tus necesidades.


Este archivo requiere Flash Player 8
Descargar Archivo ActionScript 2 Descargar Archivo ActionScript 3

Actualización 11 de febrero 2009
Scroll de texto con imagen

Para hacer un scroll de un texto el principio es el mismo, colocas el texto dentro de un MovieClip y arriba del MovieClip colocas una máscara para delimitar el área de texto que se va a mostrar. Por último, buscas las coordenadas límite inferior y superior (en este caso el scroll será vertical) para cambiar la propiedad _y del MovieClip. Pongo el código y el archivo en ActionScript 2.0 ya que es la versión del scroll que más veces han bajado los usuarios (740 descargas, mientras que el de ActionScript 3.0 tiene 420 descargas).

Actionscript:
  1. var velocidad:Number = 10;
  2.  
  3. arriba_btn.onRollOver = function() {
  4.     _root.onEnterFrame = function() {
  5.         if(texto_mc._y <29) {
  6.             texto_mc._y += velocidad;
  7.         }
  8.     }
  9. }
  10.  
  11. arriba_btn.onRollOut = function() {
  12.     delete _root.onEnterFrame;
  13. }
  14.  
  15. abajo_btn.onRollOver = function() {
  16.     _root.onEnterFrame = function() {
  17.         if(texto_mc._y> -221) {
  18.             texto_mc._y -= velocidad;
  19.         }
  20.     }
  21. }
  22.  
  23. abajo_btn.onRollOut = function() {
  24.     delete _root.onEnterFrame;
  25. }

Este archivo requiere Flash Player 8
Descargar Archivo ActionScript 2
Tags: , , ,

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios

Excelente ejemplo. muy bien explicado, muchas gracias !!

Hola Marco Antonio, que bueno que te gustó y te sirvió.
Gracias por tu comentario.

Saludos.

Excelente, el ejemplo muy claro y paso a paso, me sirvio de mucho. Gracias!!!

Ejemplo de mucha ayuda, te agradesco que compartas tus conocimientos y que mejor que de esta forma, gracias!!!!

Hola muchas gracias es un buen ejemplo no sabe la manera que me sirvio un abrazo

Buenisimo el ejemplo y la explicación...
te hago unapregunta... si en el lugar de los botones quisiera que las imagenes se trasladen automaticamente en un bucle infinito... donde deberia aplicar la velocidad dentro del codigo?

Muchas Gracias!

Hola Martín,

Si te entendí bien... para que se muevan automáticamente deberás poner el código del onEnterFrame en el primer frame de tu aplicación y no ligado a los botones que tenemos ahorita. Además, tendrías que copiar dos o tres imágenes del inicio y pegarlas al final; y hacer lo mismo con las del final (dos o tres imágenes del final copiarlas y pegarlas al inicio). Posteriormente deberás encontrar dos puntos similares para que cuando toques uno de esos puntos brinques al otro y así hacer como si fuera constante el movimiento (como un carrusel).

Saludos.

Ok...muchisimas gracias!!

saludos me gusto mucho este tutorial de galeria flash pero tengo una consulta si bien dices que para dar las coordenadas basta con mover la tira scaroll hacia la derecha o la izquierda segun sea el caso pues lo he hecho y no se ven completas las imagenes (claro que yo agregue unas cuantas mas) quisiera saber si me pueden ayudar muchas gracias Dios le bendiga

Hola José,

Hay que mover la tira de imágenes y copiar sus coordenadas (en este caso la coordenada X). Después hay que modificar las coordenadas que están en el código de los botones derecha e izquierda (-23.9 y 514.9).
También puedes probar cambiándole el número a estos valores hasta que logres ver todas las imágenes de tu tira.

Saludos.

este ejemplo es my bueno ya que te lleva paso a paso para los que andamos aventandono a hacer cosas en flash y no le entendemos bien al código espero sigas haciendo cosas como estas!!! saludos
lulaadi

Hola Carla:

Gracias por poner este tutorial a la mano de los que como yo, somos novatos en estas lindes del flash. He estado buscando tutoriales sobre este tema y sin duda este se lleva el Oscar a la explicación y claridad. Gracias de nuevo.
Ya para rematar me gustaria si a este scroll de imagenes se le puede añadir que cuando pinches en una imagen salga encima la foto en grande. Muchas gracias de antemano.

Hola Adrián,

Disculpa la tardanza.
Prácticamente tendrías que convertir cada una de las imágenes del scroll en MovieClips y ponerle la instrucción para cargar una imagen dentro de un MovieClip. Te dejo un ejemplo sencillo en está página y además te recomiendo que visites el tutorial de "Oscurecer página con ThickBox y LightWindow desde Flash".

Saludos.

Hola.. me llamo Paola y la verdad me gusto mucho tu ejemplo se entiende perfecto pero no se porque no me sirve mi pelicula... no se que pueda estar mal... no se mueven los botones... que podria ser?

Hola Paola,

Pueden ser dos cosas:
1. Que a tus botones les falte el código del enterFrame:

Actionscript:
  1. _root.onEnterFrame = function() {
  2.       if(imagenes_mc._x <514.9) {
  3.             imagenes_mc._x += velocidad;
  4.       }


2. Que las coordenadas que le pusiste estén incorrectas. Si este es el caso te recomiendo que quites temporalmente los if de cada botón y hagas un trace de las coordenadas dentro de los enterFrame. Corre tu película y coloca el mouse encima de los botones (las imágenes se moverán sin que exista límite) cuando creas que tus imágenes están en el límite anota la posición o coordenada en la que está (haz lo mismo para el otro lado) y ahora sí ponle los if a cada botón con las coordenadas que anotaste.

Actionscript:
  1. var velocidad:Number = 10;
  2. derecha_btn.onRollOver = function() {
  3.      _root.onEnterFrame = function() {
  4.           trace("_X derecha: " + imagenes_mc._x);
  5.           imagenes_mc._x -= velocidad;
  6.      }
  7. }
  8. derecha_btn.onRollOut = function() {
  9.      delete _root.onEnterFrame;
  10. }
  11. izquierda_btn.onRollOver = function() {
  12.      _root.onEnterFrame = function() {
  13.           trace("_X derecha: " + imagenes_mc._x);
  14.           imagenes_mc._x += velocidad;
  15.      }
  16. }
  17. izquierda_btn.onRollOut = function() {
  18.      delete _root.onEnterFrame;
  19. }

Saludos.

hola me gustaría saver si hay una forma que la imagen se muevan solas e indifinidamente ... y que cuando uno acerque el puntero(cursor) se dasplace al lado requerido...

Hola Simón,

Lo más fácil sería quitar el código de los botones y poner un onEnterFrame general. Verificar si el cursor se encuentra del lado izquierdo del MovieClip (de la mitad para la izquierda) o si está del lado derecho. Similar a lo siguiente:

Actionscript:
  1. var velocidad:Number = 10;
  2.  
  3. _root.onEnterFrame = function() {
  4.     if(this._xmouse> 247)
  5.         imagenes_mc._x -= velocidad;
  6.     else
  7.         imagenes_mc._x += velocidad;
  8. }

Importante: Como lo dije en un comentario anterior, para hacer que se muevan indefinidamente y sin pararse deberás:

"... copiar dos o tres imágenes del inicio y pegarlas al final; y hacer lo mismo con las del final (dos o tres imágenes del final copiarlas y pegarlas al inicio). Posteriormente deberás encontrar dos puntos similares para que cuando toques uno de esos puntos brinques al otro y así hacer como si fuera constante el movimiento (como un carrusel)"

Saludos.

excelente tutorial nada mas me gustaria saber como puedo hacer para hacer q estripe el botton y me salgan las fotos de 4 en cuatro

Hola me gusta mucho tu scroll de imagenes tengo una duda me gustaria saber si este scroll lo puedo aplicar para texto y saber como lo puedo hacer...

de antemano muchas gracias

Hola Rolando,

Claro que se puede aplicar, es igualito. De todas formas ya edité el post y le añadí un ejemplo de scroll con texto y su archivo para descargar.

Saludos.

Buenas, estoy como loco por que me funcione tu scroll, he seguido todos los pasos pero no andan las fotos, lo he calcado al tuyo. Cuando me pongo en lo alto de los botones no hace nada. A ver si me puedes dar alguna idea.
Gracias

Hola David,

Podría ser que te faltó meter las fotos dentro de un MovieClip y ponerle un nombre de instancia a ese MovieClip (en este caso su nombre de instancia debe ser imagenes_mc).

Saludos.

Muchas gracias efectivamente era el nombre de instancia, lo tenia puesto al MC. Gracias por tu comentario. Ahora voy ha intentar el que carga las imagenes en el contenedor.

Saludos.

Hola q tal, excelente tutorial es perfecto ahora mi duda es, si quiero hacer lo mismo pero sin los botones es decir tengo 2 imagenes y quiero q las imagenes se muevan en x osea horizontal cuando paso el mouse,... como se podria hacer???
desde ya muchas gracias!!!!!!!!!!

Hola parece que no sirvo para esto. Copie y pegue todos los codigos y cambie las coordenadas y no funcionan me dice una lista de errores de propiedades no definidas.
que es lo que hago mal

Hola popinga,

Pega los errores que te despliegan para tener más idea de lo que estás haciendo mal.

Saludos.

Hola Mariela,

¿Que se muevan tus imágenes cuando pasas el mouse encima de qué? Si quieres que se muevan cuando pasas el mouse encima de algo, el código es el mismo sólo que en lugar de poner el onRollOver a los botones, se lo pondrías a la imagen o a otra cosa.

Saludos.

Gracias por el tuto. Esta muy bien explicado.
Otras paginas obian los pasos, pero esta web no.
Saludos y sigan asi

Chau!!!

Hola que tal, antes que nada tengo que agradecerte por ser tan didactica y compartir tus conocimientos.
Mi problema surgio cuando despues de probar el ejemplo y me salio, lo implemente en mi pagina y para mi sorpresa dejo de funcionar. No da ningun error pero las imagenes permanecen estaticas al posicionarme sobre los botones.
Se q podrian ser muchas cosas pero me podrias guiar?
Desde ya muchas gracias.

Hola Nery,

Muchas gracias por tu comentario.
Exactamente esa es la finalidad, explicar paso por paso la actividad de cada tutorial, y como complemento (y por si la gente se perdió en algún punto) proporcionar los archivos FLA.
Es bueno saber que, a pesar de que la explicación del tutorial puede ser demasiado larga, a la gente le sirve y lo entiende con facilidad.

Saludos.

Hola Francisco,

Gracias por tu comentario.
Me suena a que tu problema está en las coordenadas límite que estás estableciendo, o bien que no metiste tus imágenes dentro de un MovieClip con nombre de instancia imagenes_mc.

Si continúas con el problema, te recomiendo subir tu archivo a algún servidor (Megaupload, SendIt, Rapidshare, etc.) para que pueda revisarlo.

Saludos.

bueno gracias carla, ya lo subi, puedo pasartelo a una casilla personal el link (te lo agradeceria ya que es una pagina web personal)

Hola Francisco,

Mándalo a xxx.

Saludos.

Gracias por subir este tutorial, ya iba a aventar la pc porque no encontraba como hacer algo parecido y mira llegue aqui y estoy sorprendido, la verdad, ya habia revisado muchas paginas y ninguna se le acerca a la tuya, hasta me alegro el dia y creo poder hacer el mio gracias a ti

Ahora que leo los comentarios, lei que alguien sugeria un que se movieran continuamente y sugeriste:
"... copiar dos o tres imágenes del inicio y pegarlas al final; y hacer lo mismo con las del final (dos o tres imágenes del final copiarlas y pegarlas al inicio). Posteriormente deberás encontrar dos puntos similares para que cuando toques uno de esos puntos brinques al otro y así hacer como si fuera constante el movimiento (como un carrusel)"

Pero si yo agrego mas de 50 imagenes (supongamos) aun asi solo copiando 2 al final funcionara? y como es eso de que yo encuentre 2 puntos similares?

Y gracias de nuevo

queria saber si lo habias recibido.
gracias

Recibido, Francisco. Cuando llegue a la oficina lo reviso.

Alex, también cuando llegue a la oficina contesto tu pregunta.

Saludos.

Acabo de probar, borre el codigo y puse en nuevo que le recomendaste a Simon copie las imagenes y no me funciono.

Alguna recomendacion?

Alex, las imágenes deberían moverse con ese código, y seguirse ya que no tenemos límites izquierda y derecha.
¿Por lo menos tus imágenes se movieron? ¿Al MovieClip que contiene las imágenes le pusiste nombre de instancia imagenes_mc?

Saludos.

Holaaaa Carla bueno hice lo q me dijiste y me quedo perfecto, mil gracias!!, ahora te hago otra cuestion,...
si yo te paso un link y te digo lo q quiero hacer vos me podrias guiar, pregunto xq no se si se pueden postear links,.. es mas o menos el ejemplo q diste aca pero con pequeñeces q no puedo descifrar...

bueno espero tu resp y mil gracias

excelente tutorial
un abrazo grande!!!!!!!!

Hola Francisco,

Considera el siguiente código para tu archivo (borra el código que tenías en el frame 30 del clip galería):

Actionscript:
  1. arriba_btn.onRollOver = function() {
  2.     _parent.onEnterFrame = function() {
  3.         if(imagenes_mc._y <1971.5) {
  4.             imagenes_mc._y += 10;
  5.         }
  6.     }
  7. }
  8.  
  9. arriba_btn.onRollOut = function() {
  10.     delete _parent.onEnterFrame;
  11. }
  12.  
  13. abajo_btn.onRollOver = function() {
  14.     _parent.onEnterFrame = function() {
  15.         if(imagenes_mc._y> -221) {
  16.             imagenes_mc._y -= 10;
  17.         }
  18.     }
  19. }
  20.  
  21. abajo_btn.onRollOut = function() {
  22.     delete _parent.onEnterFrame;   
  23. }

Saludos.

Hola Mariela,

Por favor explícame un poco más que es lo que quieres hacer o qué es lo que no te sale, para ver si puedo auxiliarte.

Saludos.

Hola Carla bueno mira te paso el link asi te das mejor una idea..http://www.controlzstudios.com/ en la parte de /branding hay logos q van pasando con el movimiento del mouse y al salir de la animacion flash vuelve el logo a como estaba en el principio,.. si me pudieras ayudar te lo agradeceria, yo hice como tu ejemplo y queda parecido,... pero si vos pudieras mirarlo, y decirme q habria q cambiaar.... igual sin ningun compromiso eh, ya con este tutorial mas q agradecida

Saludos

Hola Carla problema resuelto te doy muchas gracias excelentes tus tutoriales, notificame si puedo ayudarte de alguna manera.
Un abrazo grande

Hola Mariela,

No entendí lo que buscas, ¿cómo debería ser el comportamiento del movimiento de tus imágenes?

Saludos.

Gracias Carla por responder si mira si funciona el movimiento, pero crei que cuando terminaba se volvian a repetir las imagenes,ese es el problema porque no se repiten, cuando paso la ultima en lugar de regresar a la primera avanza y avanza creo infinitamente en blanco, se puede decir que se sigue de largo, o lo hice mal

Mira aqui subi el archivo

http://www.megaupload.com/?d=G4PDD8UE

Vamos dime que si se puede arreglar

Hola Alex,

Es por eso que te decía el encontrar puntos (coordenadas) similares. Por ejemplo... imaginemos que la máscara te permite ver seis imágenes, y que tu MovieClip tiene en total 10 imágenes. Deberás agregar 3 imágenes al inicio y tres imágenes al final (por lo tanto tu MovieClip tendrá el siguiente orden de acuerdo al número de foto: #8, #9, #10, #1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #1, #2, #3).
Las coordenadas en común podrían ser cuando en tu máscara se muestren las fotos #8, #9, #10, #1, #2, #3, #4, #5, #6, #7, [#8, #9, #10, #1, #2, #3] (la parte mostrada entre [] es lo que se ve por tu máscara; y de ahí pasarlo a la coordenada que haces que veas el MovieClip de la siguiente forma: [#8, #9, #10, #1, #2, #3], #4, #5, #6, #7, #8, #9, #10, #1, #2, #3. El ejemplo anterior es para cuando las imágenes se mueven hacia la derecha, tendrías que buscar las coordenadas también para la izquierda.
El código sería similar al que tenemos ahorita, nada más que en lugar de hacer que se detenga cuando el if se cumple, haremos que se vaya a la otra coordenada.

Saludos.

Acabo de descubrir el programa flash y la verdad pertenezco al grupo de novatos principiantes, espero me entiendas.

Bueno entoces, decidi hacerlo otra vez ahora con el codigo del principio, pero no sale bien, lo volvi a hacer otra vez para ver si me quedaba lo revise de arriba abajo, lo compare, algo de lo que no estoy seguro es del boton "Stage" cuando esta activado se pone en blanco ¿no? entonces esta bien (porque dices que no este activado)

A este le puse la mascara para que pudieran verse 6 imagenes, asi como ponias de ejemplo de respuesta a un cometario anterior que hice

Pero con el boton derecho solo llega hasta la foto 5
Y el izquierdo se sigue

Ya me quede atorado, lo repeti varias veces y no se que mas hacer para que me quede normal

Como te dije mi idea era hacer que se al terminar de presentarse las fotos se volvieran mostrar desde el principio, pero como no queda ni el normal pues no puedo avanzar asi

Aqui puedes verlo http://www.megaupload.com/?d=YPPDBKAC

Sospecho de las coordenadas pero eso es lo que mas estuve cuidando, de hecho miro tu pagina y lo hago paso por páso, no entiendo que este mal

Ok, Alex.

Dejame revisarlo y te aviso.

Saludos.

Hola!... como estas?.. esta muy bueno este tutorial, estuve probando miles de formas para hacer un scroll de este tipo, y no me salia de ninguna forma..

ahora quedo perfecto, el unico problema que surgio fue que cuando abro el .swf y paso x arriba del boton se van moviendo de izq a derecha las imagenes pero cuando llega al final no frena en la ultima imagen sino que sigue derecho y desaparece.. como si estuvieran mal las coordenadas o nose como ponerle el punto final..

muchas gracias!..

celes..!

el problema creo que radica en el hecho que tuve problemas con las coordenadas, para encontrarlas..

yo tengo flash CS3, nose si sera lo mismo que flash 8.0 pero cuando entro en info, en el detalle de la informacion me aparece a la izq de la misma no 9 cuadrados de posicion sino 4, por lo q supuse que el boton del centro que tendria que quedar negro era el cuarto, osea el segundo de la fila 2.. pero nose si esta bien, xq en realidad no se me ponia negro sino que si apreto sobre el mismo me tira dos opciones:

1- en la que me aparece en el primero de la fila 1 un + y despues los otros tres cuadrados,

2- en la que me aperece en el segundo de la fila dosun circulo y los demas cuadrados..

(sin pintarse de negro en ninguno de los casos).. nose como modificar eso, x ahi el problema este ahi, pero no encontre ninguna opcion para modificarlo..

Hola Celeste,

Disculpa pero no entendí nada. En este tutorial están los archivos FLA para las versiones Flash 8 (el primer botón de descarga) y otro realizado con Flash CS3 y AS3 (el segundo botón de descarga).
No entendí lo de cuando entras en el detalle de la información te aparecen 4 cuadrados y no 9; tampoco entendí lo del botón negro, ni lo de las filas ni los círculos.

Saludos.

mira yo llego hasta esta parte ...

Aprieta Ctrl. + I (I de Info) para obtener información sobre la posición y tamaño de la tira de imágenes (observa, en la imagen de arriba, que está seleccionada la tira de imágenes). En el panel de Info se ve que el valor de X es -23.1 y de Y es 75.0 Fíjate bien que del lado izquierdo de estos valores hay una cuadrícula de nueve puntos que nos muestra la posición del elemento que tenemos seleccionado. Es importante, para obtener las coordenadas correctas, que si no está en negro el cuadrito de enmedio le des click para que se muestre en negro (como en la figura de arriba).

a esto me refiero cuando hablo de los cuadrados.. a mi me aparece otra cosa, me aparece una cuadricula con cuatro puntos y no nueve..

y las descargas no me las dejo bajar.. nose xq

saludos!

Hola Alex,

En esta liga encuentras tu archivo:
http://www.megaupload.com/?d=IZSCSAG9
Saludos.

Hola Celeste,

Ahorita no tengo acceso a ningún Flash CS3 o CS4 (le di formato a mi computadora). Te recomiendo que bajes el archivo para AS3 y de ahí basarte y hacerle las modificaciones pertinentes.

Saludos.

Gracias Carla si funciona mas que bien, !!wauuuuuuuuuu¡¡
si va excelente, pero no crea te libras de mi voy a seguir de pregunton (tienes la culpa por cosas muy interesantes).
Bueno mientras esperaba me puse a leer mas de tus tutoriales (tienes muchos), y me encontre el que se utiliza para oscurecer, alli mencionas descargar un archivo css lo descargo, pero en mi pc se abre block de notas, ¿lo guardo con extencion ccs o se guarda asi como esta?
Y que hice mal para que no me funcionara el normal (el que se detiene cuando acaban la ultima)?

Bueno que tengas un buen fin de semana y gracias de nuevo

Hola Carla si miras en http://www.controlzstudios.com y vas en la parte de work ahi un link q dice /branding..... si miras ahi estan los ejemplos de logo q yo quisiera realizar,...
son 2 o mas imagenes q ocupan tod el espacio del documento por ejemplo si es de 540 x 340 las imagenes son de ese tamaño y lo q quiero realizar es que cuando uno pasa por sobre las imagenes dependiendo del movimiento del mouse corren para la derecha o la izquierda parecido al ejemplo q das aca pero este cuando salis de la animacion vuelve a como estaba la imagen antes de q pasaras el mouse por arriba, tiene diferencias q no puedo descifrar no se bien como explicarte pero si vas a esa pagina te das cuenta..-

gracias

Saludos

Carla
es verdad que el tutorial está de lo más claro y el ejemplo es de los mejores terminados que vi en la web.
Quisiera usar el scroll de imágenes (el primero) pero en vertical, debo reemplazar todas las x por y? Además, cómo hago para que cada botón llame a un swf, sólo asignándoselo con on release?
Perdón por la consulta, tal vez es un poco tonta, manejo el flash como diseñadora, pero en cuanto veo mucho código me mareo!
Desde ya gracias por tu tiempo.
Laura

Hola Alex,

Te lo abre en el block de notas para que puedas modificarlo, pero sí tiene que guardarse con extensión .css

Saludos.

Hola Mariela,

Yo veo tu flash bien, me gusta el comportamiento que hace, pero bueno supongo que lo que platicas tienen que ver con el evento onRollOut de las imágenes. Lo que debrías revisar es qué tienes en esa parte, yo supondría que sólo tienes que tener el código delete _root.onEnterFrame

Saludos.

Hola Laura,

Efectivamente tienes que cambiar imagenes_mc._x por imagenes_mc._y, además de buscar las nuevas coordenadas límite. Te recomiendo que bajes el archivo del "Scroll de texto con imagen", el cual utiliza un movimiento vertical.
Para que cada imagen llame a un SWF debes usar el evento en onRelease (también puedes ver el ejemplo del post de oscurecer-pagina-con-thickbox-y-lightwindow-desde-flash/, el cual utiliza un scroll de imágenes.

Saludos.

Felicitaciones por el tutorial. Muy fácil de por que está muy bien explicado.

Hola Carla
Para que se muevan las imágenes cuando pasas el mouse encima, sin necesidad de usar los botones, el onRollOver se lo tendría que poner a qué imágen? La primera y la última?
Saludos.

Hola Pilu,

Tendrías que ponérselo al MovieClip que contiene las imágenes, es decir a imagenes_mc; lo anterior conlleva a un problema si es que quieres que esas imágenes funcionen como botones, ya que dejarán de funcionar.
Si la idea es que funcionen como botones tendrás que usar otro método como el de verificar la posición del mouse en el onEnterFrame de root.

Saludos.

Hola Carla! tengo una duda, pude hacer el scroll y me funciona pero cuando quise hacer que cuando apretes una de las imagenes se abra esa misma pero en grande no hay caso no me funciona ... estuve mirando el ejemplo que le posteaste a Adrian pero no me funciona(si el tuyo pero el mio no)... :(

Hola Sole,

¿Qué es lo que no funciona en el tuyo?
Saludos.

no podia hacer aparecer la foto en grande.. pero ya lo logre.. ahora lo que no puedo hacer es ubicar en determinado lugar la foto en grande.. osea me aparece arriba de las chiquitas y me gustaria que aparezca en el costado ... tenes idea como puedo hacer??? saludos!

Hola Sole,

¿Podrías pegar tu código para ver dónde se están mostrando las fotos? Recuerda poner el código entre los tags [ as] y [ /as] (quitando el espacio en blanco que está después de los corchetes que abren).

Saludos.

aqui va .. espero puedas ayudarme! estoy tratando de hacer en dreamweaver una pag que a la izq pase el scroll y a la derecha muestre la foto en grande...
saludos

[as
import mx.transitions.Tween;
function alphaEffect(obj:MovieClip)
{
var tw = new Tween(obj, "_alpha", null, 0, 100, 7, false);
}

var velocidad:Number = 10;
var directorio:String = "";
cargando_mc._visible = false;

derecha_btn.onRollOver = function() {
_root.onEnterFrame = function() {
if(imagenes_mc._x > -23.9) {
imagenes_mc._x -= velocidad;
}
}
}

derecha_btn.onRollOut = function() {
delete _root.onEnterFrame;
}

izquierda_btn.onRollOver = function() {
_root.onEnterFrame = function() {
if(imagenes_mc._x 0){
var porcentaje:Number = cargado/total;
if (porcentaje == 1){
delete this.onEnterFrame;
cargando_mc._visible = false;
cargaCompleta();
}
}
}

function cargaCompleta(){
alphaEffect(container_mc);
}
/as]

Hola Sole,

No veo el código que le estás poniendo a cada imagen para que la muestre en grande. Por lo que dijiste de "una pag que a la izq pase el scroll y a la derecha muestre la foto en grande", supongo que tu scroll deberá ser vertical para tener el espacio de la foto en grande del lado derecho.
Para que tu scroll sea vertical deberás cambiar las coordenas y en lugar de tener imagenes_mc._x tendrías imagenes_mx._y. Recuerda cambiar la máscara para que también sea vertical.
Una vez que tengas el scroll vertical del lado izquierdo, crea un MovieClip vacío del lado derecho y colócalo en la parte donde quieres que se muestre la foto en grande. A ese MovieClip asígnale un nombre de instancia (Ej. loader_mc) y en cada foto deberás poner un código similar al siguiente:

Actionscript:
  1. on(release)
  2. {
  3.    loader_mc.loadMovie("nombre_imagen_grande.jpg");
  4. }

Saludos.

gracias Carlita =) You rlz !!! (L)

Un gusto, Emilio. Gracias por tu comentario =0)

Saludos.

ok aqui esta el codigo completo creo que al otro lo copie mal lo que no se es como correr el movieClip vacio...

Actionscript:
  1. import mx.transitions.Tween;
  2. function alphaEffect(obj:MovieClip)
  3. {
  4.     var tw = new Tween(obj, "_alpha", null, 0, 100, 7, false);
  5. }
  6.  
  7. var velocidad:Number = 10;
  8. var directorio:String = "";
  9. cargando_mc._visible = false;
  10.  
  11. derecha_btn.onRollOver = function() {
  12.     _root.onEnterFrame = function() {
  13.         if(imagenes_mc._x&gt; 500.9) {
  14.                 imagenes_mc._x -= velocidad;
  15.         }
  16.     }
  17. }
  18.  
  19. derecha_btn.onRollOut = function() {
  20.     delete _root.onEnterFrame;
  21. }
  22.  
  23. izquierda_btn.onRollOver = function() {
  24.     _root.onEnterFrame = function() {
  25.         if(imagenes_mc._x  0){
  26.         var porcentaje:Number = cargado/total;         
  27.         if (porcentaje == 1){
  28.             delete this.onEnterFrame;
  29.             cargando_mc._visible = false;
  30.             cargaCompleta();
  31.         }
  32.     }
  33. }
  34.  
  35. function cargaCompleta(){   
  36.     alphaEffect(container_mc);
  37. }

Actionscript:
  1. imagenes_mc.quilmes1_mc.onRelease = function() { cargaImagen("quilmes1g.jpg"); }
  2. imagenes_mc.quilmes2_mc.onRelease = function() { cargaImagen("quilmes2g.jpg"); }
  3. imagenes_mc.quilmes3_mc.onRelease = function() { cargaImagen("quilmes3g.jpg"); }
  4. imagenes_mc.quilmes4_mc.onRelease = function() { cargaImagen("quilmes4g.jpg"); }

no se porque no se me copia este cod..

Actionscript:
  1. function cargaImagen(nombre:String) {
  2.     container_mc.loader_mc.loadMovie(directorio + nombre);
  3.     container_mc.onEnterFrame = muestraPreloader;
  4. }
  5.  
  6. function muestraPreloader(){
  7.     var cargado:Number = container_mc.loader_mc.getBytesLoaded();
  8.     var total:Number = container_mc.loader_mc.getBytesTotal();
  9.    
  10.     cargando_mc._visible = true;
  11.    
  12.     if (total&gt; 0){
  13.         var porcentaje:Number = cargado/total;         
  14.         if (porcentaje == 1){
  15.             delete this.onEnterFrame;
  16.             cargando_mc._visible = false;
  17.             cargaCompleta();
  18.         }
  19.     }
  20. }

No puedo correr a la dereha el movieclip...

Creo que es más fácil si miro tu archivo ¿podrías subirlo a megaupload/rapidshare/sendit o algun servidor que tengas?

Saludos.

perdon que no conteste antes!! ya lo solucione! muchas gracias igual por dedicarme tiempo! beso

Hola, la verdad excelente el trabajo que has hecho con este tutorial, no es simplemente bajar el archivo y cambiarlo, está todo explicado claramente hasta para alguien tan básico como yo, jaja.

Tengo una duda con respecto a la versión con texto, mi problema es que tengo demasiada cantidad de texto y se ve que puedo ampliarlo hasta un límite, o sea, si yo en el código pongo como límite -1250 lo visualiza todo, pero si pongo por ejemplo -2500 sólo me visualiza hasta el -1250, me sigue desplazando hacia abajo pero vacío, como si no hubiese nada, y el texto me queda cortado a la altura antes mencionada.

Tiene algún límite de desplazamiento el programa o hay que modificarle algo más al código.

Saludos

Hola Agustín,

Gracias por tu comentario.
Tomando como base el archivo fuente que está en este tutorial (scroll-de-texto-e-imagenes-as2.fla), al aumentarle la cantidad de texto sólo tendrías que modificar el límite de 'y' establecido en el rollOver del botón abajo_btn.

Actionscript:
  1. abajo_btn.onRollOver = function() {
  2.     _root.onEnterFrame = function() {
  3.         if(texto_mc._y> -321) {
  4.             texto_mc._y -= velocidad;
  5.         }
  6.     }
  7. }

En lugar del -321 tendrías que modificarlo por 300 o 400 pixeles más. Por ejemplo el límite de -721.
Además, tendrías que agrandar el tamaño del fondo blanco para evitar que el texto agregado se muestre sin fondo.

Si le vas a cambiar las dimensiones al archivo de Flash, tendrías que modificar el área de la máscara (que es el área que delimita la cantidad de texto mostrada).

Espero que lo anterior te ayude; sino por favor sube el archivo a un servidor para revisar bien lo que está sucediendo.

Saludos.

Hola Carla, estuve intentando hacerlo en flash cs3 me resulta imposible hay algun cambio que realizar?

Hola Patricio,

El segundo de los botones de "Descargar archivo" que se encuentra antes de la "Actualización 11 de febrero 2009" está hecho en Flash CS3 con AS3.

Saludos.

hola de nuevo, pues no lo se sabes que lo hice con un texto pero no se ve el texto en todo lo que es el sector de la mascara y cuando quito la mascara y pongo la vista previa los textos aparecen incompletos :S me estoy volviendo loco...

Hola Patricio,

Revisa que la capa que contiene el texto esté debajo de la capa de la máscara pero que sí "pertenezca" a la máscara. Es decir, las capas que deben ser cubiertas por una máscara están más abajo que la capa de la máscara pero se muestran con una sangría o espacio para denotar que pertenecen a la máscara.
Si lo anterior no te resulta sería genial que pudieras subir tu archivo a algún servidor para revisarlo.

Hola Carla de nuevo primero que nada decirte que muchas gracias por tu dedicación, el archivo es este:

http://rapidshare.com/files/229623286/Scrolltext.zip.html

ya no se que hacer he buscado otros tutoriales para hacer lo mismo pero el unico bueno es el tuyo, el resto son con la barra predeterminada de flash que no se puede modificar y me queda muy antiestetico en la pagina, un saludo. gracias

Hola Patricio,

Ya revisé tu archivo y vi dos cosas:
1. El texto está definido como dinámico. Si no vas a jalar el texto de algún archivo o una base de datos te recomiendo que lo pongas estático. Si lo quieres dinámico tendrás que "incorporar los caracteres" haciendo click en el botón de "Incorporación de caracteres..." que está en el panel de propiedades (de no hacerlo no se muestra el texto cuando se ejecute el archivo).
2. El texto tiene de propiedad en Comportamiento "Línea única", deberás cambiarlo a "Multilínea" para que no te lo muestre todo en un solo renglón

Saludos.

Barbaro muchas gracias!

Hola a todos necesito saber como hacer un scrolling que se despliege automaticamente los logotipos y que se vean la preccarga de lo mismos alguien tiene algún scrrolling con logos resueltos porfavor comparta gracias

tengo este codigo para una galeria de va horizontal lo que necesito saber es q debo har para que me quede en forma vertical.
este es el codigo:

onClipEvent (load) {
movespeed = 5;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.RIGHT)) {
this._x -= movespeed;
if (this._x=97) {
setProperty("_root.scroll", _x, 97);
}
}
}

Hola Carla, la verdad que esta super genial este tutorial, solo una cosa... he intentado hacer que las imagenes se cargen y c vean en grande al momento de dar clic, pero no me sale, no c por ke... la unica diferencia, es ke en tu archivo descargable tu pusiste un simbolo de tipo movie, que se llama loader_mc como instancia, pero no lo encuentro por ningun lado, en donde lo metiste?? de hecho en el codigo haces referencia a el pero en donde se encuentra
??

pls ayudame carla
Gracias de antemano

Hola carla, soy yo de nuevo molestandote...
Ya encontre el loader_mc, se encontraba adentro de container.mc... ahora al momento de dar clic a una de las imagenes para que la cargue y la muestre en grande me sale el siguiente error:

Error al abrir la URl
y despues me dice la ubicacion de mi imagen undefined

a que se debe esto??

Carla Ayudame plss

Hola Jorge,

Ese error de undefined en la ruta de tu imagen seguramente se debe a que el URL lo especificaste en una variable o en un arreglo o de un XML, es decir, que del lugar donde está tomando el valor no está declarado y/o no tiene valor. Si la imagen no existiera te mostraría el error con la ruta de la imagen y no con undefined.
Espero haberme explicado... para probar pon las rutas de la imagen de forma estática, como en el código de mi ejemplo:

Actionscript:
  1. imagenes_mc.foto1_mc.onRelease = function() { cargaImagen("foto7s.jpg"); }
  2. imagenes_mc.foto2_mc.onRelease = function() { cargaImagen("foto2s.jpg"); }
  3. imagenes_mc.foto3_mc.onRelease = function() { cargaImagen("foto3s.jpg"); }
  4. imagenes_mc.foto4_mc.onRelease = function() { cargaImagen("foto4s.jpg"); }
  5. imagenes_mc.foto5_mc.onRelease = function() { cargaImagen("foto5s.jpg"); }
  6. imagenes_mc.foto6_mc.onRelease = function() { cargaImagen("foto6s.jpg"); }
  7. imagenes_mc.foto7_mc.onRelease = function() { cargaImagen("foto7s.jpg"); }
  8. imagenes_mc.foto8_mc.onRelease = function() { cargaImagen("foto2s.jpg"); }

Saludos.

Hola Carla de nuevo yo, jajajaj
oie ahora que lo cambie me sale esto.
Error al abrir la URL 'file:........//' <- - - - ruta
y no muestra la foto.

no se que estoy haciendo mal, o escribiendo mal.

Hola Jorge,

Eso quiere decir que no encuentra la imagen en la ruta que le especificaste, asegúrate que la imagen esté ahí.
También es posible que la ruta de la imagen esté bien pero el nombre o la extensión estén incorrectos. ¿Las imágenes están en la misma carpeta que el SWF? Si no están en la misma carpeta a lo mejor te estás equivocando en las rutas de las imágenes. Te recomiendo que si las imágenes no están en un servidor no le pongas rutas absolutas sino relativas. Ejemplo:

Actionscript:
  1. // Imagen en la misma carpeta que el SWF
  2. cargaImagen("mifoto.jpg");
  3. // Imagen en carpeta images dentro de la carpeta del SWF
  4. cargaImagen("images/mifoto.jpg");
  5. // Imagen afuera de la carpeta del SWF
  6. cargaImagen("../mifoto.jpg");

Saludos.

Muchas gracias carla!
Ya resolvi mi problema, eran las diagonales y las extensiones de las fotos.

Ahora, empezare a calarme con el scroll de texto e imagenes.
por cierto no tendras una pagina con el tutorial paso a paso, o tengo que guiarme directo del archivo.

Hola Jorge,

Hay que guiarse del archivo, pero cuando lo abras te darás cuenta que es absolutamente igual que el scroll, sólo cambian las coordenadas.

Saludos.

Muy buen tutorial!!! me has salvado!!! tengo una duda...
quiero poner dentro de ese fondo movible unas "secciones" y en la pagina "principal" (donde abre la pantalla) irán unos botones que llamarán a un swf externo, pero quiero que cuandi de click en el boton... la imagen se mueva a un determinado punto despues abra el swf, por ejemplo en esta pagina:

http://www.ciel.com.mx

Saludos y muchisimas gracias por el tutorial

Hola Carla, excelente tu tutorial, pero tengo una duda, ya hice el scroll vertical con las vistas previas de unos videos, pero quiero saber en que parte de la imagen pongo la accion, y que accion debo usar para llamar al fotorama que va a abrir mi galeria de videos.
Gracias!

Hola Kareen,

Adentro del MovieClip que contiene la tira de imágenes (imagenes_mc) selecciona cada imagen, conviértela en MovieClip y asígnale un nombre de instancia (Ej. imagen1_mc, imagen2_mc, etc.).
En tu comentario dices que qué acción debes usar para llamar al fotograma, en este caso deberás usar el gotoAndPlay(numero_frame). En el frame donde tenemos todo el código agrega las siguientes líneas (deberás modificar el número de frame que está entre paréntesis):

Actionscript:
  1. /* Código de las fotos */
  2. imagenes_mc.imagen1.onRelease = function() { gotoAndPlay(5); }
  3. imagenes_mc.imagen2.onRelease = function() { gotoAndPlay(6); }
  4. imagenes_mc.imagen3.onRelease = function() { gotoAndPlay(7); }
  5. imagenes_mc.imagen4.onRelease = function() { gotoAndPlay(8); }

Saludos.

Hola, muy util el tutorial, me encanta

Saludos =)

Gracias por tu mensaje =0), Vero.

Saludos.

Hola ya arme mi roll pero necesitaria que cuando le de click a alguna imagen se dirija a una pagina especifica.
como puedo asignarle un link a cada imagen???

muchas gracias

holaa..esta super bien explicado este tutorial,
pero como soy novato en flash 8,
no se como colocar el codigo,
le doy copiar al codigo, luego hago click en el primer frame de la capa accion y le doy pegar, ¿es asi?,
no creo por que no me funciona,
ayudenme con eso plis.
ChaooO!

Hola Daniel,

Además del código debes tener en tu archivo la tira de imágenes, la máscara, etc. Lo más fácil sería que bajaras el archivo (haciendo click en el primer botón de "Descargar archivo") y lo abrieras en Flash para que puedas ver los elementos que tiene.

Saludos.

Hola Roberto,

En el tercer comentario arriba del tuyo está la respuesta. En tu caso, a diferencia del caso de Kareen, en lugar de usar gotoAndPlay tendrías que usar getURL("pagina.html", "_self");

Saludos.

Hola, es excelente poder contar con este tipo de info y en especial tu cordial ayuda.
Queria consultarte mi problema, aplico el scroll horizontal y queda perfecto pero cuando exporto en pantalla sale todo estirado, no se como arreglarlo.
Gracias

Hola Fabiana,

Gracias por tu comentario.

¿Se ve estirado al abrir solamente el SWF o en una página?
Si lo estás viendo en HTML es posible que tu problema sea por la forma en que lo estés exportando. En la pestaña de Propiedades que está en la parte inferior en Flash, da click en Publish Settings o Configuración..., asegúrate que en la pleca HTML -> Escala esté la opción de Predeterminada (mostrar todo) o bien Sin Escala.

Saludos.

Hola Carla. Gracias por su tutorial. Los pasos fueron claros para mi, que apenas si acabo de instalar C_S_3. Tuve algunas dificultades, como que abrí un nuevo proyecto, pero escogí el que viene por defecto (ActionScript3: AS3)y el código no se correspondía. Por supuesto, abrí un AS2 y funcionó. Pude seguir sus indicaciones y reproduje el ejercicio. Gracias nuevamente.
Una pregunta repetida en los diferentes comentarios, es hacer que el MovieClip sea indefinido y automático o con sólo pasar el cursor, interesante opción. Pero la otra pregunta repetida es hacer que todo el MovieClip sea un enlace (link) a una página cualquiera. No he podido hacer esto. Uso el comando: " getURL("paginacualquiera.html", "_self"); " Aparentemente se forma el enlace, pues al pasar el cursor por el Flash se convierte en una "manito", en la barra de estado del navegador se muestra la dirección, pero no va allá. Hice una página con el sólo objeto flash y no funcionó. Usé una página completa que copio de la red e inserto el flash en una zona determinada de la página y tampoco. Qué debo hacer, qué estoy haciendo mal. El archivo que dejó en otra página para Adrián, tampoco lo he podido ver, pues lo bajo y C_S_3 reporta que el archivo no existe. De antemano le agradezco, que siempre esté muy bien.

Bueno, por una desatención, no estaba poniendo el código completo. Dije que usaba "getURL", falso, era precisamente lo que faltaba. Al incluirlo, quedó Ok. Gracias. Ahora intento que sea indefinido el movimiento pero sin botones a derecha o izquierda y asociar una URL a las imágenes individualmente. Veremos como me va. Gracias Carla, muy buenas todas sus indicaciones y su colaboración general.

Hola Hernando,

El archivo original de este tutorial está en formato Flash 8 AS 2.0 y Flash CS3 AS 3.0 (botón "Descargar archivo" izquierdo y botón "Descargar archivo" derecho, respectivamente).
Lamentablemente, por falta de tiempo, he tenido que dejar un poco el blog; pero espero que proximamente pueda poner un ejemplo donde el movimiento sea indefinido; creo que merecería la pena siendo que es una pregunta repetitiva en esta entrada. Por lo pronto puedo decirte que tienes que considerar el "evento" onEnterFrame para que se mueva indefinidamente y que podrías determinar la posición del mouse de acuerdo a la mitad de la tira para ver si se debe mover a la izquierda (_x--) o a la derecha (_x++).
Lo de asociar una URL para cada imagen lo puedes ver en el segundo ejemplo de esta página: http://www.codigometropoli.com/ejemplo-de-scroll-de-imagenes-en-flash/ sólo que el código está en AS 2.0. No sé si la forma en como le hayas puesto el enlace a todo el MovieClip interfiera con el URL de cada imagen.

Saludos.

Saludos.

Gracias Carla Macías por este tutorial, estoy haciendo una web y quería algo como esto, más alguna cosa más, que ya preguntaron otras personas y que distes soluciones.

hola Carla, muy bueno el tutorial, la galeria de imagenes la pude armar bien, pero no puedo hacer que al clickear la foto se amplie. Me podrias decir como se hace,
gracias!!!

Hola Carla, gracias por este genial tutorial, hace muuuuuuucho tiempo que andaba en busca de algo asi y bueno no lo habia en contrado, pero tengo una pequeña duda. ¿Como puedo hacer para que la galeria se vaya deteniendo foto por foto y que en vez de que corra con el mouse sobre los botones, lo haga al hacer click sobre ellos? lo he intentado pero no me a funcionado.
Te agradecere en el alma si me pudes ayudar ya que es algo que hace bastante tiempo he estado intentado hacer. Gracias y saludos!!!!

Excelente, muy claro, aprendí mucho. Gracias

Hola William,

Gracias por tu comentario.

Saludos.

Hola Florencia,

Perdona la tardanza.
En la parte de "Lista de Ejemplos", el segundo ejemplo de "Scroll de imágenes en Flash" (http://www.codigometropoli.com/ejemplo-de-scroll-de-imagenes-en-flash/) puede ayudarte para lo que estás buscando; ahí mismo está el código fuente del ejemplo.

Saludos.

Hola Nacho,

Gracias por tu comentario.

Saludos.

Me gustaria me envien los codigos de el scroolpane,

quiero colocar una tira de imagenes al pie de mi pagina o presentacion flas en cd

gracias

Excelente explicasion. Muchas gracias.

Calificacion _________10.0________

Es de lo mejor que he encontrado en red.

De nuevo muchas gracias.

Hola carala.
Muy bueno tu trabajo desde ya gracias, pero me gustaría saber como haces para que el escroll de imagenes sea ademas un menu para ver la fotos ampliadas,no entiendo eso de los niveles me puedes explicar por favor, tu hiciste algo así pero por mas que leo el codigo no lo entiendo, me puedes ayudar??? talvez explicandolo paso a paso si pudieras.

Muchas gracias

Muchas gracias, Paulo.
Te agradezco el que te hayas tomado la molestia de escribir.

Saludos.

Hola Enzo,

Tomando en cuenta el segundo archivo que está en la Lista de Ejemplos (http://www.codigometropoli.com/ejemplo-de-scroll-de-imagenes-en-flash/), aquí te va la explicación:
1. Tenemos una tira de imágenes dentro de un MovieClip de nombre de instancia "imagenes_mc". Debes hacer doble click a ese MovieClip para poder "abrirlo" y acceder a las imágenes que lo conforman.
2. Una vez que ya estás dentro del MovieClip, selecciona la primera imagen y presiona F8 para convertir la imagen en MovieClip. Al MovieClip que acabas de crear ponle como nombre de instancia "foto1_mc".
3. Repite el paso anterior hasta llegar a la última imagen (la cual en nuestro caso es foto8_mc).
4. Salte del MovieClip "imagenes_mc" y en la línea de tiempo principal crea un MovieClip vacío dentro del cual mostraremos las imágenes en grande: Presiona F8, selecciona la opción de MovieClip y ponle un nombre. Selecciona el MovieClip que acabas de crear y ponle "container_mc" como nombre de instancia. Dale doble click a este MovieClip y vuelve a crear otro ahora con nombre de instancia "loader_mc".
5. En la línea de tiempo principal Frame 1 Capa Actions deberás poner el código de cada uno de los MovieClips que acabamos de crear, los cuales funcionarán como botones.
Ejemplo:
imagenes_mc.foto1_mc.onRelease = function() { cargaImagen("foto7s.jpg"); }
En esta línea le estamos diciendo que al hacer click (onRelease) a la imagen 1 (foto1_mc) del MovieClip "imagenes_mc", se llamará la función cargaImagen, a la cual le estamos pasando como parámetro la imagen grande que va a mostar.
5. El código de la función cargaImagen es:
function cargaImagen(nombre:String) {
container_mc.loader_mc.loadMovie(directorio + nombre);
container_mc.onEnterFrame = muestraPreloader;
}
Dentro de esta función hacemos que en el MovieClip "loader_mc" que está dentro de "container_mc" se muestre la imagen cuyo URL pasamos como parámetro en la variable String.
La última línea de código hace que mientras se esté ejecutando o esté corriendo el MovieClip "container_mc", se llame la función muestraPreloader.

Enzo, espero que te haya servido esta explicación.

Saludos.

Muchas Gracias Carla.
De verdad te agradezco muchisimo el que te tomes el tiempo para responder nuestras preguntas, voy a intentarlo y te aviso, un abrazo y de nuevo muchas gracias.

Hola Carla ,llevo mucho tiempo intentando hacer un scroll de texto y con tu explicacion es con la única que me he logrado aclarar, muchas gracias.
Mi problema es que yo tengo un flash creado con diapositivas , y en una de las diapositivas cargo un swf donde está metido el scroll, cuando salgo de la diapositiva donde está el scroll y luego me vuelvo a meter, el texto se ha quedado en la posicion donde lo dejé.Es decir no vuelve al inicio.Como puedo hacer para que al meterme en la diapositiva donde está el scroll siempre se vea desde el inicio?
Gracias.

De nada, Enzo. Qué bueno que vuelves a visitar el blog después de tanta tardanza en contestar.

Saludos.

Hola Nuria,

Es muy fácil. Primero tendrías que ver cuál es la posición inicial del MovieClip el cual contiene el texto (la cual en este caso sería el valor de la propiedad _y del MovieClip cuyo nombre de instancia no recuerdo cuál es pero imagina que se llama texto_mc); no siempre el valor inical es cero, por lo que te recomiendo que hagas un trace para conocerlo:

Actionscript:
  1. /* En el frame de acciones coloca el siguiente código: */
  2. trace("Posición inicial: " + texto_mc._y);

Ejecuta tu aplicación desde Flash y copia el valor que te mostrará en el panel de salida. Después de lo anterior y suponiedo que el valor obtenido es de 514.9, sólo tendrás que poner el siguiente código en el frame de acciones:

Actionscript:
  1. function regresaInicial()
  2. {
  3.     texto_mc._y = 514.9;
  4. }
  5. regresaInicial();

Saludos.

Hola Carla, he hecho lo que me has dicho pero no me funciona , el texto no vuelve a la posicion inicial.
El codigo lo he puesto en el fotograma donde está el scroll, es así no?

Hola de nuevo Carla, se me había olvidado explicarte que si cambio la posicion inicial es decir si en el código escribo texto_mc._y=19 en lugar de poner texto_mc._y=418 (que es mi posicion inicial) el texto sí que aparece movido , lo que no hace es volver al inicio del scroll cuando yo paso de pantalla y luego vuelvo a la pantalla del scroll.
En fin no se si me explico muy bien.

Hola Nuria,

No entendí muy bien. Con el código que te puse debería llamar la función regresaInicial(); cada vez que se carga el frame donde está el scroll. ¿No tienes una forma de subir el archivo para que pueda revisarlo?

Saludos.

[...] hago esta transicion flash?, Miren, Es bastante simple. aca hay un manual muy bien explicado Scroll de imgenes en Flash | Cdigo Metrpoli espero que te sirva [...]

Muy bueno el tutorial

se agradece un monton

No se como agradecerle que haya realizado este tutorial tan bien explicado.Me ha salvado de muchos quebraderos de cabeza.Supersencillo de entender para los que somos novatos.
Mil gracias de todo corazón!

Hola de nuevo
no se como hacer que cuando pase el ratón por cada imagen del scroll me aparezca dicha imagen en grande arriba.He leido que se puede hacer oscureciendo la pantalla con un codigo que ha puesto anteriormente pero ¿hay alguna otra manera más directa¿
Es que tarda mucho en cargar cada imagen y me gustaría que fuera directamente.He probado a hacer de cada imagen un botón y en la instancia sobre poner la imagen pero al ir dentro de un movieclip no se ve luego.
A ver si pueden asesorarme un poco
Mil gracias!

perdon quise decir en el estado sobre del botón no la instancia.

Yo one more time
Pues he probado a hacer el scroll como lo tiene en el segundo ejemplo.. pero como no hay tutorial he intentado imitar los pasos de un fla al mio pero no hay manera..
estoy desesperada.. llevo horas intentándolo.
El scroll ya lo tengo hecho pero no se como hacer para que al pinchar en cada imagen se vea arriba en grande, sin usar el oscurecimiento de pantalla que relentiza la web un monton..
bueno a ver si me pueden asesorar
mil gracias!!

Hola Margarita,

No hay necesidad de utilizar el oscurecimiento de pantalla, lo único que tendrías que hacer es crear un MovieClip vacío en dónde mostrar o cargar la imagen.

Sigue los pasos que le he puesto a Enzo aproximadamente 15 comentarios arriba de éste. Lo único que tendrías que modificar es el onRelease por onRollOver.

Actionscript:
  1. imagenes_mc.foto1_mc.onRollOver = function() { cargaImagen("foto1grande.jpg"); }

Cualquier duda aquí ando.

Saludos.

muchas gracias, no había visto la explicación y mire que le he dado vueltas.
De todos modos me pierdo bastante.
Yo ya tengo hecho el scroll como el del primer ejemplo, se mueve bien pero no carga ninguna foto.
Ahora he empezado a seguir sus pasos de la explicación para Enzo.. y me estanco en:

"Salte del MovieClip "imagenes_mc" y en la línea de tiempo principal crea un MovieClip vacío dentro del cual mostraremos las imágenes en grande: Presiona F8, selecciona la opción de MovieClip y ponle un nombre"

Crear movieclip vacio.. ¿es dando a f8 no? pero donde debemos estar? en la escena principal? en que capa¿

Otra duda donde dice:
"5. En la línea de tiempo principal Frame 1 Capa Actions deberás poner el código de cada uno de los MovieClips que acabamos de crear, los cuales funcionarán como botones."

Ya tengo codigo ahi del ejercicio del scroll.. lo pongo a continuación de ese codigo?

Otra duda:
"5. El código de la función cargaImagen es:
function cargaImagen(nombre:String) {
container_mc.loader_mc.loadMovie(directorio + nombre);
container_mc.onEnterFrame = muestraPreloader;
}"

¿donde se pone ese código? a continuacion del codigo de cada movieclip de cada imagen?

Donde coloco las imágenes en grande que quiero que se vean cuando acciono cada pequeña del scroll?

Jo! siento tener que molestar tanto pero es que no me sale!!
snif
Mil gracias!!

estoy viendo con el ejemplo de usted descargado que el movieclip lo tiene en una capa llamada clipo.. probare asii
a ver que tal..

lo intento y lo intento y no hay manera..
ahora al cargar la pagina el preloaded de donde debe aparecer cada imagen en grande no deja de parpadear, supongo que le haria falta un stop en algun lado.. y al pinchar en la imagen que quiero que se agrande me sale este error
Error al abrir la URL 'file:///C|/Documents%20and%20Settings/Administrador.DESKTOP.000/Escritorio/WEB%20CRIADERO%20CANTILLANA/undefined1g.png'

espero sus respuestas, mil gracias de verdad!

Hola Margarita,

El undefined1g.png de seguro es porque estás cargando el nombre de la imagen en una variable que no está definida o no existe.
Si gustas puedes enviarme tu archivo para que lo revise, solo necesitaría que ya tuviera el MovieClip donde quieres que se muestre la imagen en grande en la posición que tu desees. También necesitaría que además del archivo FLA me enviaras una o dos imágenes de la grandes para poderlo probar.
El correo es: blog [en] codigometropoli [punto] com, sustituyendo el [en] por @ y el [punto] por . además de que todo va junto.

Saludos.

Jo Carla! Ahora me pongo a ello.. no se como agradecer..
muy amable!

Hola Carla,
He subido la pagina web donde he puesto el scroll para que lo puedas ver , la pagina es http://www.orts-trullenque.com, tienes que ir al link "estudio" y de ahí a "concursos y premios"
Gracias

Quiero agradecerle tambien por aquí su ayuda prestada de forma anónima.
Mil gracias!

Ya he conseguido que mi galería en scroll funcione!!
He utilizado mejor onRelease que creo que queda mejor :)
Ahora tengo otra dudita.. me queda un hueco muy antiestético donde van apareciendo las fotos en grande al pulsar, entonces he observado en otras webs que generalmente aparece la primera imagen ya cargada.La he puesto en una capa en mi archivo fla haciendo que coincida exactamente en el mismo sitio que aparecerán las otras cuando pulse pero queda feo, al pulsar cada una de las fotos se ve por una pequeña fracción de tiempo la que he colocado fija ¿como podría hacer?
como ejemplo la galería de esta web que ya se carga con la camiseta amarilla por defecto y al pulsar en las otras se ve bien y no se visualiza la primera por un momento.
http://www.peruart.ro/
Ojalá me aconseje, estoy molestando demasiado no?

Hola Margarita,

Te recomiendo que quites la capa que pusiste en tu archivo y que en el Frame 1 de la capa Actions pongas hasta abajo:

Actionscript:
  1. container_mc.loadMovie("1g.png");

Por cierto, en un rato te enviaré a tu correo un código de ActionScript.

Saludos.

uffff lo que es el desconocimiento!!! Un pequeño código y wallá!!
Realmente antes de molestar me gusta investigar, dar vueltas a un mismo asunto pero cuando me puede la desesperación !!
Estoy aprendiendo mucho , tengo que apuntar todos estos códigos para la próxima vez..
GRACIASSSSSSSSS

Hola Nuria,

Veo que tu archivo principal manda a llamar muchísimos SWFs; si no te incomoda ¿podrías enviarme en un zip todos los archivos para poder ver en dónde se carga el Scroll y así ver dónde debe ir el código para regresar el texto a su lugar?

El correo es: blog [en] codigometropoli [punto] com, sustituyendo el [en] por @ y el [punto] por . además de que todo va junto.

Saludos.

Hola Carla, queria saber si se le puede aumentar algo al codigo para que el contenido de mi scroll de "loops" sin parar. Estoy usando tu codigo para hacer una foto panoramica y no quiero que pare cuando termina la imagen. Esto es lo que estoy haciendo: http://www.victoriaregiahotel.com/360/mov.html
Mil gracias!

waaaa ya me salioo!!! =D muy buen tuto ehh! felicitaciones

hola carla...

estoy buscando una function en as2 para lo sig..
Tengo una serie de fotos que pertenecen a un mismo moviclip pero quiero que cueando se mueva la ruedita del mouse sobre la imagen ella se desplaze hacia arriba o abajo en dependencia del movimiento del scroll. este moviclip lo tengo dentro de una mask. que me visualiza una parte y quiero que mediante el scroll se mueva..

estaría muy agradecido si me ayudaras a descubrir cual función logra controlar la rueda del mouse en un movieclip.

saludos
Manuel..

hola! te agradezo por el dato del scroll de imagenes, lo hice y me salio, pero me pasa lo mismo que margarita cuando quiero hacer clic en cada mc del scroll la imagen no se granda...porque no entiendo dende colocar las imagens que se van a ver en grande. Que van dentro del archivo clipo que vos pusiste en el ejemplo??? con eso ya estaria contenta es que no encuentro la forma....puse el codigo que esta en tu ejemplo : imagenes_mc.foto1_mc.onRelease = function() { cargaImagen("cerveza4.jpg"); }; debajo pero me marca un error.....es este: Error opening URL "file:///C|/TRABAJOS/undefinedcerveza4.jpg" sabes que puede ser que este haciendo mal???? te gradeceria si me ayudas ya que necesito definirlo urgente y hace mucho que no me sale... GRACIAS!!! silvina

carla quizas necesites mi archivo fla si es asi, decime y te lo paso..a donde??? miles de gracias!

otra cosita la pagina la estoy haciendo en flash 8, si sirve de algo...para que me ayudes! es solo eso lo que me faltaria, pero supongo que no compredi la parte de tu tutorial al momento de maximizar la imagen sobre la que hago clic en alguna imagen chiquita del mc del scroll de imagenes horizontal.

ademas.....tambien me pasa lo mismo que margarita me queda el cargando (los circulitos)...me quedan titilando todo el tiempo...es como que no tomo la accion de cargar y mostrar la imagen correspondiente

Carla:

Primero que todo agradecerte infinitamente el tutorial, es súper completo y me ha servido mucho para hacer algo que antes no sabía cómo hacer. Como casi todos aquí también tengo que pedirte ayuda U.U
aunque me funciona muy bien lo que explicaste, estoy haciendo un catálogo y la idea es que al pinchar alguna imagen del scroll, se abra otra galería con botones. El problema es que al pinchar imágenes del scroll cambian de posición según dónde esté la imagen en el scroll, y por ejemplo, en el caso del segundo ejemplo que diste, la idea es que sea una galería aparte, no una galería encima de la anterior... aunque si no me funciona estoy casi resignada a hacerlo así :s o como salga, lo que pasa es que son muchísimas imágenes y las estoy trabajando de a una entonces si tuviera que cambiar el formato perdería mucho más tiempo. ¿Hay algún correo en el que pueda darte un link de mi archivo? Ojalá me puedas ayudar. Muchísimas gracias de nuevo.

Paloma.

Hola Paloma,

El correo es: blog [en] codigometropoli [punto] com, sustituyendo el [en] por @ y el [punto] por . además de que todo va junto.

Saludos.

Gracias Carla por la ayuda y ser tan explicita en la explicacion y el seguimiento! nos salvas con tu ayuda! miles de gracias! muchos saludos!
Silvina

Hola Silvina,

De nada, qué bueno que encontramos la solución al problema en tu archivo.

Saludos.

Hola Manuel,

Desconozco cómo detectar el movimiento de la rueda del ratón dentro del Flash.
Buscando en Internet, es posible que este enlace pueda ayudarte: http://bytes.com/topic/flash/answers/741914-mouse-wheel-zoom

Saludos.

Baarbaro, gracias

buenas aplicaciones y ejercicios gracias

Muchas gracias! Genial

gracias por este tema de scrool imagenes, es muy bueno,saludos

Hola Carla! Podrías resolver la duda de Mauricio sobre cómo hacer que la galeria avance foto por foto al ir haciendo clic sobre derecha_btn e izquierda_btn? Muchas gracias!

Realmente me parecio buenisimo tu tutorial... me sirvio muchisimo, te agradezco la buena onda y dedicacion... GRACIAS!!

hola, buenisimo tu tutorial, solo ke me kede trabada en el paso 16, pero el codigo pero me aparecen errores, ya cambie las coordenadas, perosigue apareciendome ke tengo un error !!
spero em puedas ayudar .. ya ke soy mas ke novata en esto del flash..
graciaS =)

Hola Carla, ya hice el scroll vertical de texto (tuve alguna duda que tú me resolviste) ahora me gustaría saber si es posible que al apretar el botón de arriba o el de abajo el texto se quedara en una posicion concreta (indicandole yo en que posicion se debe de quedar la _y ) es para evitar que al soltar el botón la línea de texto se pueda quedar partida.
Muchas gracias.

Hola María,

Perdona la tardanza. Para hacer que vaya foto por foto tendrías que:
1. Disminuir el tamaño de la máscara para que tenga el mismo tamaño de la imagen.
2. Anotar el ancho de la imagen (el ancho tendrá que ser el mismo para todas las imágenes). Supongamos: 98px de ancho + 2px de separación = 100px;
3. Cambiar los dos onRollOver por onPress.
4. Hacer uso de la clase Tween en lugar del onEnterFrame.

Te dejo el códio de dos opciones:

1. Permitir un sólo click en los botones:

Actionscript:
  1. var contadorClicks:Number = 2;
  2. var numImagenes:Number = 8;
  3.  
  4. derecha_btn.onRelease = function() {
  5.     if(contadorClicks <numImagenes)
  6.     {
  7.         contadorClicks++;
  8.         derecha_btn.enabled = false;
  9.         moverTira(imagenes_mc, '>');
  10.        
  11.         izquierda_btn.enabled = true;
  12.     }
  13.     else
  14.         derecha_btn.enabled = false;
  15. }
  16.  
  17. izquierda_btn.onRelease = function() {
  18.     if(contadorClicks> 1)
  19.     {
  20.         contadorClicks--;
  21.         izquierda_btn.enabled = false;
  22.         moverTira(imagenes_mc, '<');
  23.        
  24.         derecha_btn.enabled = true;
  25.     }
  26.     else
  27.         izquierda_btn.enabled = false;
  28. }
  29.  
  30. import mx.transitions.Tween;
  31. function moverTira(obj:MovieClip, sentido:String)
  32. {
  33.     if(sentido == ">")
  34.     {
  35.         var tw = new Tween(obj, "_x", null, obj._x, obj._x - 108, 7, false);
  36.         tw.onMotionFinished = function() { derecha_btn.enabled = true; };
  37.     }
  38.     else
  39.     {
  40.         var tw = new Tween(obj, "_x", null, obj._x, obj._x + 108, 7, false);
  41.         tw.onMotionFinished = function() { izquierda_btn.enabled = true; };
  42.     }
  43. }

2. Permitir varios clicks en los botones:

Actionscript:
  1. var contadorClicks:Number = 2;
  2. var numImagenes:Number = 7;
  3.  
  4. derecha_btn.onRelease = function() {
  5.     if(contadorClicks <= numImagenes)
  6.     {
  7.         contadorClicks++;
  8.         var posFinal = 730.9 - (108 * contadorClicks);
  9.         moverTira(imagenes_mc, posFinal);      
  10.     }
  11. }
  12.  
  13. izquierda_btn.onRelease = function() {
  14.     if(contadorClicks> 1)
  15.     {
  16.         contadorClicks--;
  17.         var posFinal = 730.9 - (108 * contadorClicks);
  18.         moverTira(imagenes_mc, posFinal);
  19.     }
  20. }
  21.  
  22. import mx.transitions.Tween;
  23. function moverTira(obj:MovieClip, posFinal:Number)
  24. {
  25.     var tw = new Tween(obj, "_x", null, obj._x, posFinal, 7, false);
  26. }

Saludos.

Hola mel,

Perdona la tardanza.
Necesito más datos para saber cuál es el problema ¿qué error te marca?

Saludos.

Hola Nuria,

Perdona la tardanza.
El código sería muy similar al que le puse a María dos comentarios arriba, sólo tendrías que cambiar la propiedad _x por _y.

Saludos.

Christhian, Diego, Ana, Guillermo y Verónica: Muchas gracias por sus comentarios. Saludos.

Esta bueno los ejemplos pero los descargue y no abren por que .. o en que flash estan hechos ...flas cs4 o flash 5 o podrian enviarmelos al correo gracias....

Hola elquin,

Hay dos botones de descarga, el primero (el de la izquierda) está hecho en Flash 8; el segundo (el de la derecha) está hecho en Flash CS3 con ActionScript 3.

Saludos.

No descarga ni uno de los dos archivos

aaah si, sorry, descargan en IE solamente

Hola Niko,

Para descargarlo en Firefox dale click con el botón derecho y luego "Guardar enlace como..."
Saludos.

Wow!, por fin encontre algo mejor que bien explicado..

Excelente Carla., Gracias por tener la amabilidad de compartir tus conocimientos...

:D

muy bueno el tutorial, funciona muy bien, me faltaria para que quede perfecto que antes de clikear en la primera foto no quede la pantalla en blancon, me gustaria que la primera foto sea fija y que se borre cuando clikeo en las demas. gracias.

@Rocío: Hola Rocío, muchas gracias por tu comentario =).

@Ana Lia: Hola Ana, supongo que te refieres al archivo donde se cargan imágenes (me parece que es el scroll-de-imagenes-as2-cargar-imagen.fla). Bueno, si es ese lo único que tendrías que hacer es pegar el código del primer botón hasta abajo del código que está en la Capa Actions Frame 1.

Actionscript:
  1. cargaImagen("foto7s.jpg");

Donde foto7s.jpg es la primera imagen a mostrar.

Saludos.

un fa lo que pasa es que necesito hacer la misma tira pero con 53 imagenes y tengo un error por que no me corre si no hasta la 5 imagen no se como cuadrar las cordenadas alguen me puede ayudar

gracias

como hago para meter 10 imagenes es cuando las meto no me corre las imagenes nuevas que agregue gracias

@andreita: En la explicación del tutorial viene lo que hay que hacer. Si le aumentas fotos del lado derecho tendrías que modificar el valor de la coordenada derecha (la que va en el código del botón izquierda_btn). Resumiendo, tendrías que aumentarle el valor de 514.9 e irle calculando hasta que se muestren tus 10 o tus 53 imágenes.

Actionscript:
  1. izquierda_btn.onRollOver = function() {
  2.      _root.onEnterFrame = function() {
  3.           if(imagenes_mc._x <514.9) { /* Este valor es el que debes aumentar */
  4.                imagenes_mc._x += velocidad;
  5.           }
  6.      }
  7. }

Saludos.

hola buenas noches
hay alguna forma de hacer que las imágenes se hagan más grandes al pasar por el centro de la mascara?

EXCELENTE TUTORIAL

muy bien explicado...

FELICITACIONES!

hola FELICITACIONES por el tutorial!! excelente tanto en el contenido como en la explicacion!!!
lo que a mi me gustaria agregarle es un link a cada imagen, se que se agrega asi
on(release){
getURL("nombre.html", "_self");
}
un link en flash pero no me ubico donde lo tengo que agregar en este script.
Te agradeceria que me ayudes.
Gracias y q continuen tus EXITOS

Hola Marina,

En mi comentario hacia Kareen (del 14 de junio) explico cómo hacerlo. Te copio el texto:

"Adentro del MovieClip que contiene la tira de imágenes (imagenes_mc) selecciona cada imagen, conviértela en MovieClip y asígnale un nombre de instancia (Ej. imagen1_mc, imagen2_mc, etc.).
En tu comentario dices que qué acción debes usar para llamar al fotograma, en este caso deberás usar el gotoAndPlay(numero_frame). En el frame donde tenemos todo el código agrega las siguientes líneas (deberás modificar el número de frame que está entre paréntesis):"

Actionscript:
  1. /* Código de las fotos */
  2. imagenes_mc.imagen1.onRelease = function() { gotoAndPlay(5); }
  3. imagenes_mc.imagen2.onRelease = function() { gotoAndPlay(6); }
  4. imagenes_mc.imagen3.onRelease = function() { gotoAndPlay(7); }
  5. imagenes_mc.imagen4.onRelease = function() { gotoAndPlay(8); }

Saludos.

Hola Carla!!! MUCHAS GRACIAS POR CONTESTARMEEEEE
AHORA MISMO PRUEBO Y TE CUENTO COMO ME HA SALIDO
GRACIAS
BESITOS Y Q DIOS TE BENDIGA

Hola Carla!!!
he seguido tu consejo y mirá me da este error, **Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 8: El bloque de declaración debe finalizar con '}'
imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");

**Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 7: El bloque de declaración debe finalizar con '}'
imagenes_mc.tres_mc.onRelease = function(){getURL( "gastronomica.html", "_self");

**Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 8: Error de sintaxis.
imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");

**Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 6: El bloque de declaración debe finalizar con '}'
imagenes_mc.siete_mc.onRelease = function(){getURL( "sanidad.html", "_self");

**Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 8: Error de sintaxis.
imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");

**Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 5: El bloque de declaración debe finalizar con '}'
imagenes_mc.seis_mc.onRelease = function(){getURL( "gastronomica.html", "_self");

**Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 8: Error de sintaxis.
imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");

**Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 4: El bloque de declaración debe finalizar con '}'
imagenes_mc.dos_mc.onRelease = function(){getURL( "sanidad.html", "_self");

**Error** Escena=Escena 1, capa=Scroll, fotograma=1:Línea 8: Error de sintaxis.
imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");

Total de errores de ActionScript: 9 Errores comunicados: 9

si puedes ayudarme te lo agradeceria
besitos y q Dios te Bendiga

Hola Marina,

Copiaste mal el código. Como ves, el error desplegado te dice que faltó la llave que cierra '}', por lo tanto te faltó el '}' en cada sentencia:

Actionscript:
  1. imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");}
  2. imagenes_mc.tres_mc.onRelease = function(){getURL( "gastronomica.html", "_self");}
  3. imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");}
  4. imagenes_mc.siete_mc.onRelease = function(){getURL( "sanidad.html", "_self");}
  5. imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");}
  6. imagenes_mc.seis_mc.onRelease = function(){getURL( "gastronomica.html", "_self");}
  7. imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");}
  8. imagenes_mc.dos_mc.onRelease = function(){getURL( "sanidad.html", "_self");}
  9. imagenes_mc.una_mc.onRelease = function(){getURL( "sanidad.html", "_self");}

Saludos.

oa Carla!!!
te cuento que los links ahora me funcionan barbaro!!!
pero no me funciona ni la mascara y el limite que les estoy poniendo a los botones no son los correctos y no me sale como los calculo!!! te puedo enviar el archivo completo a tu correo??????
Igual a cada minuto me gusta mas flashhhhhh y es gracias a vos Carlaaaaa

MUCHAS GRACIAS POR TU AYUDA Y QUE DIOS TE BENDIGAAAAA

oa recibi tu mail y sin querer lo borré, me lo reenvias por favor???

Hola! gracias por este tutorial, me sirvió a la perfección, muy bien explicado!
Muchas bendiciones y que Dios te siga dando ese don de servicio y de compartir lo que sabes!

Hola Evelin,

Muchas gracias por tu comentario.

Saludos.

Hola carla, queria primero agradecerte y felicitarte por todo el aporte comunitario que haces constantemente, y queria hacerte una consulta sobre el scroll ,para realizar un scroll sin necesidad de botones ni mascaras. Solo que se mueva segun el cursor sobre el moviec.
Resulta que con tu indicacion me salio bien pero faltaría sacarle la continuidad (y es por lo que estoy consultando), o sea: que cuando finalize el recorrido de imagenes con el cursor hacia la derecha, se detenga en la ultima y asi viceversa cuando scroleo para la izquierda. Se entiende ? Gracias

Hola en efectotu scroll sirve perfecto, sinembargo si yo quisiera que cada imagen fuera un boton para que me reacile una accion como lo hago, ya que converti mis imagenes en botones y le spuse las acciones pero no me funcionan, no se si tenga algo que ver que los botones esten dentro de el movie clip donde estan las imagenes.

gracias

yo hize lo mismo lasa imagenes las hice botones y me funciona perfecto, lo malo es ke cuando presiono una imagen me la muestra arriba del scroll en tamaño original pero cuando le doy derecha o izquierda al carrusel se mueve tambien la foto junto con el scroll como puedo pryectar esa imagen fuera del scroll para cuando lo mueva no afecte a la foto?. como puedo proyectarla fuera de imagenes_mc? gracias

Hola Ana María y Ricardo,

En la página de ejemplos hay un archivo donde cada imagen es un botón y al darle click muestra una imagen grande:
http://www.codigometropoli.com/ejemplo-de-scroll-de-imagenes-en-flash/

Ricardo: seguramente pusiste la foto dentro del MovieClip imagenes_mc, es por eso que la foto se mueve con todo y la tira. Crea un MovieClip afuera de imagenes_mc para que ahí muestres la foto.

Saludos.

Super Carla. Muy buen tutorial. Tengo un problema,haber si me puedo explicar. Tengo un clip de película en una interpolación, empieza en su tamaño normal, (interpolacion)se hace grande y se detiene aqui, vuelve a su tamaño normal. Para eso tengo mis tres fotogramas claves. Bueno, pues en el medio, donde se detiene y cambió de tamaño, le aplico un scroll a mi clip. El scroll funciona muy bien. El problema es que si muevo mi clip se pierde la interpolacion final, es decir no disminuye de tamaño de manera natural, simplemente salta de imagen grande a imagen normal. Y cuando no utilizo el scroll la interpolacion se produce. Es como si al mover de posicion mi clip en el fotograma intermedio se pierde la interpolación.Esto tiene solución? Me di a entender? gracias

ya trabaje con tu galeria de scroll que llama a una imagen y todo funciona bien pero necesito que la imagen que llama y la muestra en la pantalla tenga un link a otro fotograma del mismo archivo flash como le puedo hacer y gracias por la informacion y ademas me urge.

Hola Carla, he encontrado este tutorial que me ha parecido bastante facil pero al hacerlo ya me he perdido.., soy diseñador gráfico que he tenido que aprender flash a marchas forzadas por culpa de la maldita crisis y tengo un dilema con el scroll ya que no me funciona y además tengo varias dudas, te comento:
1. en principio he de poner unas 60 imagenes pero en las dimensiones de flash no me entran tantas, no hay espacio para ponerlas todas, la pantalla mide 1600x1200 y en ella se veran 5 imagenes solo.
2. Lo que quiero es que estas se muevan con la posicion del raton sin tener que usar botones, y que se pare el scroll si el raton no esta sobre el.
3. Quiero que cada imagen pequeña se abra en al lado en grande pero creo que esta parte no me dara problemas.
4. Todas las imagenes del scroll se ven en blanco y negro en el scroll pero a la hora de enseñarlas en grande se veran en color y la que se ha seleccionado en el scroll tambien se vera en color (esta parte no tengo ni idea...).

Se que es mucho preguntar y que la mayor parte de las preguntas vienen más arriba pero no me he enterado muy bien, como te he comentado llevo poco con el flash, si quieres te paso el archivo y los revisas y si no intenta darme unas aclaraciones para ver si soy capaz, de todas formas muchas gracias por tu tiempo, un saludo.

Hola, me llamo angela
Ando buscando como crear un scroll como el que muestras tu en as2, y que ademas lo pueda usar varias veces en el mismo swf, pero con diferente contenido, me podrias ayudar?
muchas gracias

Hola Iván,

No entiendo a qué te refieres con "le aplico un scroll a mi clip" y con "El problema es que si muevo mi clip" ¿Si mueves tu clip cómo? Además, sin código me he es imposible saber si tiene solución o no.

Saludos.

Hola Arturo,

La imagen que muestras seguramente está dentro de un MovieClip. Ponle un nombre de instancia a ese MovieClip y le das una acción:

Actionscript:
  1. image1_mc.onRelease = function() {
  2.    _parent.gotoAndPlay(10);
  3. }

Hola César,

Te respondo tus dudas:
1. Ese no es ningún problema, tus imágenes quedarán fuera del escenario de Flash, pero puedes crear una máscara como se muestra en el tutorial para sólo mostrar 5 imágenes.
2. El código para que fuuncione de acuerdo a la posición del ratón deberá ser similar a:

Actionscript:
  1. imagenes_mc.onRollOver = function() {   
  2.     _root.onEnterFrame = function() {
  3.         if(_root._xmouse>= 200) {
  4.             if(imagenes_mc._x> -23.9)
  5.                 imagenes_mc._x -= velocidad;
  6.         }
  7.         else {
  8.             if(imagenes_mc._x <514.9)
  9.                 imagenes_mc._x += velocidad;
  10.         }
  11.     }
  12. }

3. En la página de ejemplos hay un archivo donde cada imagen es un botón y al darle click muestra una imagen grande:
http://www.codigometropoli.com/ejemplo-de-scroll-de-imagenes-en-flash/
4. Puedes usar la clase ColorMatrixFilter para pintar las imágenes a escala de grises. Puedes crear tus dos matrices de color para aplicarlas cuando sean necesarias:

Actionscript:
  1. import flash.filters.ColorMatrixFilter;
  2.  
  3. var normal:Array = [ 1,0,0,0,0,
  4.           0,1,0,0,0,
  5.           0,0,1,0,0,
  6.           0,0,0,1,0 ];
  7. var gris:Array = [ 0.33,0.33,0.33,0,0,
  8.           0.33,0.33,0.33,0,0,
  9.           0.33,0.33,0.33,0,0,
  10.           0,0,0,1,0 ];      
  11. var colorNormal:ColorMatrixFilter = new ColorMatrixFilter(normal);
  12. var colorGris:ColorMatrixFilter = new ColorMatrixFilter(gris);

A tus imágenes en tamaño grande no debes hacerles nada porque ya las tienes en color y así las mostrarás, sólo debes aplicar el filtro a la imagen pequeñe a la que se le hizo click.

Saludos.

como normalmente dijo:
es de bien nacido
ser agradecido

muchisimas gracias por el aporte, me sera de mucha utilidad.
espero que no te canses y sigas asin.

muchas gracias

Hola Angela,

Siguiendo los pasos de este tutorial (los cuales están en AS2) puedes entender fácilmente como crear varios scrolls dentro de un SWF. En resumen, tendrías que insertar las imágenes de los MovieClips, seleccionas esas imágenes y creas cada MovieClip con distinto nombre y nombre de instancia. Creas las máscaras para cada MovieClip y los botones de anterior y siguiente y copias los códigos y modificas las coordenadas de acuerdo a tus necesidades.

Saludos.

Hola Angel,

Muchas gracias por tu mensaje.

Saludos.

Hola Carla mira tengo un problemilla resulta que he hecho la tira cuando la añado a mi pagina web y cuando la pruevo se me ve en explorer y no firefox sabes que puede ser?

por cierto debuty el tutorial yo que no tengo ni idea de flash lo he conseguido gracias.

que tal Carla!!!

al parecer me he dado una vuelta por la web y regreso donde ti, realice el scroll con imagenes en base a este tutorial, pero ahora quiero hacer de estas imagenes botones (miniaturas) para una galería fotografica, el punto es que encontre este documento .fla tuyo, http://www.codigometropoli.com/ejemplo-de-scroll-de-imagenes-en-flash/, y es exactamente lo que estaba buscando, pero no entiendo muy bien como lo hiciste, si me podrias ayudar explicando a mi y a otros cientos de aprendices que buscan en la web conseguir este resultado te agradecería infinitamente

Gracias

Hola Jorge,

Seguramente tiene que ver con la forma en que insertas el SWF en el HTML. Sin el código y sin una liga donde pueda ver el HTML no puedo saber la razón de que no funcione.

Saludos.

Hola Andrés,

Ya que tienes el scroll funcionando, lo que tienes que hacer para que las imágenes sean botones es:

1. Abrir el MovieClip imagenes_mc (es decir, la tira de imágenes) haciendo doble click sobre él.
2. Seleccionas la primera imagen y la conviertes en MovieClip (si es que no es MovieClip).
3. Le pones un nombre de instancia a ese MovieClip. Ejemplo: foto1_mc
4. Haces lo mismo del punto 2 y 3 con todas las imágenes, sólo le vas cambiando el nombre de instancia.
5. Colocas el código de acción de los botones.

Actionscript:
  1. imagenes_mc.foto1_mc.onRelease = function() { cargaImagen("foto7s.jpg"); }
  2. imagenes_mc.foto2_mc.onRelease = function() { cargaImagen("foto2s.jpg"); }
  3. imagenes_mc.foto3_mc.onRelease = function() { cargaImagen("foto3s.jpg"); }
  4. imagenes_mc.foto4_mc.onRelease = function() { cargaImagen("foto4s.jpg"); }
  5. imagenes_mc.foto5_mc.onRelease = function() { cargaImagen("foto5s.jpg"); }
  6. imagenes_mc.foto6_mc.onRelease = function() { cargaImagen("foto6s.jpg"); }
  7. imagenes_mc.foto7_mc.onRelease = function() { cargaImagen("foto7s.jpg"); }
  8. imagenes_mc.foto8_mc.onRelease = function() { cargaImagen("foto2s.jpg"); }
  9.  
  10. function cargaImagen(nombre:String) {
  11.     container_mc.loader_mc.loadMovie(directorio + nombre);
  12.     container_mc.onEnterFrame = muestraPreloader;
  13. }

En este código lo que hacemos es mandar a llamar la función cargaImagen, a la cual le pasamos como parámetro el nombre de la imagen a cargar. La función carga la imagen grande (foto1s.jpg, foto2s.jpg, etc.) dentro de un MovieClip cuyo nombre de instancia es loader_mc y que está dentro de otro MovieClip llamado container_mc.

Saludos.

Hola Carla;

Gracias por la explicación, ahora lo tengo más claro de como hacerlo. Lo único que no entiendo bien es donde van las imágenes grandes (foto1s.jpg, foto2.jpg, etc). Cuando ejecuto la película y pulso uno de los botones (movie clips), osea las imágenes miniatura flash me lanza un error que dice: Error opening URL 'file:///C|/Users/Andres/AppData/Local/Temp/undefinedfot1s.jpg

Creo que con esto me voy acercando a donde quiero llegar gracias a ti.

Te agradrezco desde ya, tus tutoriales se llevan el primer puesto de todas las decenas o centenas, ya perdi la cuenta, que he visto.

Saludos

Hola Andrés,

Gracias por tu comentario.
Las imágenes deben estar en el mismo directorio donde está el SWF. En este caso, por lo que veo, deben estar en la carpeta Temp.

Saludos.

Hola Carla,

Sabes no he conseguido hacerlo, tengo una preguntas, hay alguna diferencia relevante si he hecho mi proyecto basado en AS2 en vez de AS3? Tengo Flash CS3

Disculpa que jorobe tanto, te agradezco por brindar tu tiempo y conociento.

Saludos.

Hola Andrés,

No, no hay ninguna diferencia porque el código que te puse es para AS2. Para comprobar que eso no afecta podrías abrir el archivo de este tutorial en el CS3 y ejecutarlo.

Saludos.

hola carla, el tutorial esta buenísimo y lo use varias veces...pero no me sale hacerlo sin botones...que sea automatico...lei que varios preguntaron y con el código que dejaste pero no salio...

Andrés,

A la línea #43 quítalela palabra directorio y el signo de +, dejándolo así:

Actionscript:
  1. container_mc.loader_mc.loadMovie(nombre);

Saludos.

Hola soleastu,

¿Qué es lo que no te salió? ¿Qué problema o error te dio?

Saludos.

Carla,

Muchas gracias, ahora funciona muy bien. Una inquietud, quiza haya alguna forma de que las fotos salgan centradas dentro del Movie Clip loader_mc, lo que pasa es que algunas fotos son apaisadas (salen muy arriba)y otras verticales (muy a la izquierda).

Igualmente muchas gracias, me has hecho un favor gigante y felicitaciones otra vez por tu post

Es un buen ejemplo pero me gustaria saber como dejo las imagenes en carrusel. bien gracias.

hola carla...estuve leyendo mejor el tutorial y ya lo entendi... ahora solo me faltaría el codigo para pasar de una coordenada a otra...no lo se escribir...me lo podrias pasar?
Gracias!!!!

hola de nuevo...se me ocurrio algo mas facil...pero como no se mucho de codigo no se como hacerlo...sería mejor que las imágenes siempre corrieran hacia la izquierda (sin necesidad de seguir la dirección del mouse) y cuando llegue al final de la serie salte a la coordenada del principio...y asi...se puede? me mandarías el código? desde ya gracias!!! saludos.-

hola carla...otra vez yo...ya descubri como hacer que se muevan siempre para el mismo lado...ahora, lo que no me sale es hacer que cuando llega al final de la serie salte a la coordenada del principio...como hago? perdooon por tantos mensajes y otra vez mil gracias...

Hola Soleastu,

Como lo señalé en otros comentarios, tienes que colocar unas cuantas imágenes del final en el inicio y unas del inicio en el final para que puedas encontrar una coordenada en común que vuelva a colocar la tira al inicio.
Puedes bajar el archivo que modifiqué de Alex aquí:
http://www.megaupload.com/?d=IZSCSAG9

Saludos.

hola carla te agradezco todas tus aportaciones,utilice tu galeria donde llama a un fotograma y todo funciona bien pero ahora lo que necesito es que cada imagen de la galeria al pararte en ella me muestre un texto es decir que sea como un boton que tenga en over incrustada una imagen en una zona de a lado dela imagen de la galeria ojala me de a entender gracias.
saludos

heyyy muchas gracias!!!! ya salio perfecto el carrusel!!!

hola Carla gracias por tu apoyo, todo me ha funcionado bien pero ahora lo que necesito es como puedo al carrusel de imagenes hacer

hola Carla gracias por tus aportes , todo me ha funcioando bien, ahora lo que necesito es que en el carrusel al momento de pararme en alguna imagen me muestre otra como si fuera un boton y en over tuviera otra imagen esta imagen es a un lado la cual contiene un texto explicativo de la imagen, gracias

Hola Carla, al descargar un ejemplo me salen unos codigos y escritos raros, no sé a que se debe, por otro lado acabo
de hacer el scroll de imagenesy todo perfecto tu tutorial
es fantastico, pero me gustaria que al hacer click sobre
una foto se convierta en efecto lightwindow y no sé por donde
empezar, gracias anticipadas, y sigue con este metodo.
saludos

Hola Benet,

En el tutorial de Lightwindow desde Flash hay precisamente un archivo para descargar que utiliza un scroll y ligthwindow: http://www.codigometropoli.com/oscurecer-pagina-con-thickbox-y-lightwindow-desde-flash/
Si te salen caracteres raros es porque el navegador está intentando abrir el archivo ahí mismo, lo que debes hacer es click con el botón derecho del mouse sobre el botón de descarga y luego hacer click en "Guardar enlace como...".

Saludos.

Hola Carla
Gracias por tu respuesta, ya lo pude descargar.
Saludos

hola! muy bueno el tutorial pero tengo algunas dudas jejeje
he seguido al pie las instrucciones pero me marca una serie de errores, podrias explicarme el porque?
aqui te dejo los errores que me salen:
******
1119: Acceso a una propiedad onRollOver posiblemente no definida mediante una referencia con tipo estático flash.display:SimpleButton. ---> derecha_btn.onRollOver = function() { // Queremos que cuando nos pongamos encima del botón la tira comience a moverse a la izquierda
******
1119: Acceso a una propiedad onRollOut posiblemente no definida mediante una referencia con tipo estático flash.display:SimpleButton. ---> derecha_btn.onRollOut = function() {
******
1119: Acceso a una propiedad onRollOver posiblemente no definida mediante una referencia con tipo estático flash.display:SimpleButton.---> izquierda_btn.onRollOver = function() { // Queremos que cuando nos pongamos encima del botón la tira comience a moverse a la derecha
******
1119: Acceso a una propiedad onRollOut posiblemente no definida mediante una referencia con tipo estático flash.display:SimpleButton. ---> izquierda_btn.onRollOut = function() {
*******
1120: Acceso a una propiedad _root no definida. ---> _root.onEnterFrame = function() {
*******
1120: Acceso a una propiedad _root no definida. ---> delete _root.onEnterFrame; // Como ya nos hemos salido del botón debemos borrar la llamada a onEnterFrame
******
1120: Acceso a una propiedad _root no definida. ---> _root.onEnterFrame = function() {
******
1120: Acceso a una propiedad _root no definida. ---> delete _root.onEnterFrame; // Como ya nos hemos salido del botón debemos borrar la llamada a onEnterFrame

Gracias!

Hola Monk,

Sospecho que estás utilizando Flash CS3 o CS4 con AS3.
Si es así te recomiendo que bajes el segundo archivo (el del botón de la derecha).

Saludos.

hola me podrias ayudar explicandome como hago para que un boton al que tengo hecha una animación de movieclick en el over, al salir del over RETROCEDA DICHA ANIMACIÓN hasta el principio.

Gracias

Buenas tardes.
Ante todo felicitaciones y gracias por el tutorial. No sólo está bien explicado, sino que está completo y funciona. Normalmente uno se consigue cosas maravillosas pero nunca funcionan porque dejan de decir algo en la explicación.

Estoy haciendo una página web y mi cliente quiere una galería con el scroll de miniaturas siempre en movimiento.
Vi algunos comentarios pero, sinceramente, no capté muy bien que digamos la explicación. Copio 3 imágenes del final y las coloco al inicio y viceversa, perfecto, pero lo de los puntos similares de coordenadas, perdón, pero no lo entiendo bien. Podrías explicarme paso a paso qué es lo que se debe hacer allí? por favor y gracias por la ayuda que me puedas dar al respecto.

Hola Dunixe,

Gracias por tu comentario y perdona la tardanza.

Dejo una imagen para que puedas entenderlo mejor (Hacer click en la imagen para verla más grande):

Imagen Carrusel

En la imagen puedes ver tres estados de la tira. El primer estado muestra el estado inicial de la tira, además, marco con líneas punteadas verdes y rojas dos puntos que son comunes en la tira.
Imaginando que, al posicionarnos en el botón que hace que la tira se mueva a la derecha (flechas grises), llegará un punto que las imágenes del rectángulo verde queden a la orilla izquierda de la máscara (Estado 2 de la imagen), llegado a ese punto (coordenada) lo que tenemos que hacer es mover la tira al punto o coordenada del Estado 3, de tal forma que sigamos mostrando las imágenes que están a la izquierda de la imagen 8.
Esto es, a grandes rasgos, a lo que me refiero con "puntos similares de coordenadas". Para entenderlo mejor te recomiendo que bajes el archivo que le pasé a Alex: http://www.megaupload.com/?d=IZSCSAG9

Saludos.

Hola Carla, felicitaciones por tan buen tutorial, hasta ahora no tube problemas en nada, solo una consulta. Hay alguna manera de que las imagenes se carguen dentro del movieclip centradas????. Mi problemas es porque tengo varias imagenes con distintas dimensiones y formatos, unas apaisadas y otras veticales. Hay alguna forma de hacer dos movieclips, uno para las apaisadas y otro para las verticales.

Gracias por tu tutorial y por la respuesta

Muchísimas gracias, enseguida pruebo el archivo.
De verdad te felicito porque tus tutoriales son excelentes. Mucho éxito y, de nuevo, gracias por tu respuesta

Gracias, por el tutorial, es muy bueno... lo único que no no pude descargar los archivos de ejemplo, porque tiran error... :(
Saludos
Lele

Hola Lele,

Haz click con el botón derecho del mouse sobre el botón de descarga (imagen) y luego haz click en "Guardar enlace como...".

Saludos.

Hola Carla, quiza sepas algo sobre el problema que estoy teniendo. Cuando intento hacer una nueva galería, en otra escena con las mismas caracteristicas que la primera (exactas a las de tu tutorial) no se cargan las imagenes.

Si tienes alguna sugerencia estaria muy agreadecida.

Saludos.

Hola Belén,

¿No estarán mal las ligas de las imágenes?
¿Podrías poner el código de tus botones ,por fa?

Saludos.

Hola Carla,

A cuáles botones te refieres, a los mc minuaturas de las fotos o a los botones para ir de una escena a otra?

Otra pregunta. Cómo exporto u obtengo la imagen de actionscript como las que tu dejas en el tutorial? Como esas ventanas que en su título dicen "Texto Plano",

Así te paso el codigo de los botones tal y como están en el proyecto.

Gracias por tu ayuda.

Saludos.

EXCELENTE!!!!! GRACIASSSSSSSSSSS

hola Carla, muchas gracias por colocar los archivos fla, tu post se ve realmente profesional.Estoy comenzando recien a trabajar con flash y es dificil conseguir un post que valga la pena.

Saludos.

Hola Belén,

Primero que todo ¿a qué imáganes te refieres en tu primer post, cuando dices "No se cargan las galerías"?
Lo del código de Actionscript es un plugin del foro, pero me parece que los visitantes no pueden poner el código así (me parece).
Podemos intentarlo, pon tu código entre los tags [as ] y [/as ] (quitando el espacio que está antes de cada ]). También puedes probar poniendo tu código entre y (quitando el espacio que está antes de cada >).

Saludos.

Hola Carlina y Carlos,

Muchísimas gracias por sus comentarios =)

Saludos.

Buenas Tardes Carla:
Presento un problema en mi archivo y es que es una linea de tiempo, en dicha linea cuando le das click a una fecha el te hace un zoom y muestra la información de determinada fecha, como la información a veces es un poco grande trate de poner el código del scroll pero no me funciona, serías tan amable de indicarme que debo hacer ya es un poco urgente....
Muchas Gracias...
Saludos

hola carla por que no puedo Descargar Archivo ActionScript 2 ni el 3 cuando le doy click en descargar me abre una pagina con signos muy rraras asi
ÐÏࡱá����������������>��þÿ ��������������������������4�����þÿÿÿ�������|��y��
tambien me gustaria saber si esas imagenes se puden actualizar cada que yo quiera como todos los dias
o tambien si hay alguna forma de hacerlo solo con HTML vale adios suerte

Hola Santiago,

Debes hacer click con el botón derecho del mouse sobre el botón de descargar y luego click en "Guardar enlace como..." o "Save target as...".

Saludos.

Hola!!!! gracias por este sitio, esta solucionando mis problemas!!!! gracias por tu tiempo.
Queria pedirte si puedes explicar mas detallado el caso que explicas en el comentario del 20 de Noviembre de 2009, sobre ir avanzando de a una imagen al hacer click, no entiendo la diferencia entre "un click" y "varios "clicks" la idea es que si tengo 10 imagenes en la tira vaya mostrandome las 10 de a una a medida que voy apretando.
Lo otro es si puedes explicarme en que zonas debo poner "mis datos", porque yo copio todo el codigo y lo pego pero no se donde debo cambiar la info, se entiende?
perdon me cuesta mucho este tema!!!!
Mira antes de encontrar tu sitio hice esto:
http://blancomc.cl/smass/
tienes que entrar a obras, despues oficinas y despues Agencia 180

Ahi en cada boton (flecha) se va llamando a un swf distinto tanto para la derecha como para la izquierda, mi problema ademas de la cantidad de swf que tendria que hacer es que al navegar el usuario por primera vez se mueve lentisimo y pestañea todo lo que no me gusta.
Luego te encontre a ti y comenze a ver la solucion a mis problemas, cuando leo tu explicacion de mas arriba entiendo todo pero al leer tu respuesta a Maria me nublo, podrias agregar comentarios para entenderlo mejor??? te amaria por eso.
Perdon lo largo de mi pregunta pero esto me desespera un poco, daria oro por tenerte frente a mi!!!!
muchas gracias y saludos

hOla me encantO este titurial
pOr que esta super sencillO y
bien explicadO!
Lo que me a mi me surgiO fuerOn varias
dudas, pOr ejemplO a lOs bOtOnes le puse
el cOgidO, perO nO me jala nada.
_root.onEnterFrame = function() {

if(editorial_mc._y <266.1) {

editorial_mc._y += velocidad;

}
}
____________________________________________________________
entOnces me aparece el error
la declaración debe aparecer dentrO
del cOntrOladOr On _root.onEnterFrame = function() {
y nO se que me quiera decir?
Ayuda es para mi pOrtafOliO!!
Grax!

hOla me encanta este tutOrial
perO me quedarOn algunas dudas
yO lO estOy haciendO de fOrma vertical
y nO me funciOna ningún bOtOn y nO
se que pase. lO de las cOOrdenadas
tampOcO supe muy bien que pasO?
y nO puedO descargar el archivO para
la forma de textO e imagen.
GRaaacias me ayudarías aun mas!!!

muy buen tutorial te lo agradesco era lo que estaba buscando el unico problema es que no se pueden descargar pero no importa aun asi muchas gracias

hola una pregunta quiero hacer el scroll con imagenes, pero que al momento que le des click en la imagen te la mande en grande sobre la misma pantalla y te de la descripcion, por favor me urge, y muchas gracias

Hola Macarena,

Baja los archivos del tutorial para que puedas ver qué es lo que tienes que hacer.
Lo de "tus datos" está explicado a lo largo del tutorial, es por eso que el tutorial es tan extenso porque voy explicando cada paso.
Al final pongo todo el código por si alguien se perdió y, no sólo eso, sino pongo los enlaces para bajar los archivos.

Scroll en ActionScript 2: http://www.megaupload.com/?d=J4ZU1HV4
Scroll en ActionScript 3: http://www.megaupload.com/?d=36OL2U75
Scroll vertical con texto en ActionScript 2: http://www.megaupload.com/?d=41I29M5L

Saludos.

Hola LiliSs,

Dices que a los botones le pusiste el código, no sé por qué si a los botones no les tienes que poner ningún código salvo el getURL en caso de necesitarlo.
Si te refieres a la tira de imágenes, entonces estás mal porque el código que me pusiste debe ir en un frame de tu película y no en la tira de imágenes.

Saludos.

Hola MisS Lilia,

Subí los archivos a Megaupload para ver si así hay menos problema. Ya están cambiados los enlaces de los botones; aún así te lo pego aquí:

Scroll en ActionScript 2: http://www.megaupload.com/?d=J4ZU1HV4
Scroll en ActionScript 3: http://www.megaupload.com/?d=36OL2U75
Scroll vertical con texto en ActionScript 2: http://www.megaupload.com/?d=41I29M5L

Saludos.

Hola Osvaldo,

Te dejo los nuevos enlaces:

Scroll en ActionScript 2: http://www.megaupload.com/?d=J4ZU1HV4
Scroll en ActionScript 3: http://www.megaupload.com/?d=36OL2U75
Scroll vertical con texto en ActionScript 2: http://www.megaupload.com/?d=41I29M5L

Saludos.

Hola Valeria,

El texto del tutorial es demasiado explicativo (y por lo tanto extenso) para que puedan entenderlo y adaptarlo a sus necesidades, no puedo hacer un archivo para cada uno de acuerdo a las características que requieran. De todas formas en varios comentarios menciono cómo hacer lo que pides y señalo que en la página de ejemplo hay un archivo de descarga que muestra las imágenes en grande. El enlace es http://www.megaupload.com/?d=L1YVYH9M

Saludos.

Hola Carla Muy bueno el tuto muy claro. Ya lo hice pero me necesitaría que las imágenes desparezcan y aparezcan en alfa.cuando salen de la capa. Se entiende?
Hay alguna forma simple de hacerlo??
O alguna línea de código para hacerlo??
..desde ya muchas gracias!

MUCHISISISMAS GRACIAS POR TU AYUDA.

OYE UNA PREGUNTITA DESCARGUE EL ARCHIVO PERO NO ME VIENEN LAS ACCIONES ME GUSTARIA SABER QUE FUE LO QUE CONVERTISTE EN BOTONES, PLEASE PARA MANDAR A LA IMAGEN.

Hola Valeria,

Cada botón tiene un nombre de instancia y sus acciones están en la capa Actions Frame 1.

Actionscript:
  1. imagenes_mc.foto1_mc.onRelease = function() { cargaImagen("foto7s.jpg"); }
  2. imagenes_mc.foto2_mc.onRelease = function() { cargaImagen("foto2s.jpg"); }
  3. imagenes_mc.foto3_mc.onRelease = function() { cargaImagen("foto3s.jpg"); }
  4. imagenes_mc.foto4_mc.onRelease = function() { cargaImagen("foto4s.jpg"); }
  5. imagenes_mc.foto5_mc.onRelease = function() { cargaImagen("foto5s.jpg"); }
  6. imagenes_mc.foto6_mc.onRelease = function() { cargaImagen("foto6s.jpg"); }
  7. imagenes_mc.foto7_mc.onRelease = function() { cargaImagen("foto7s.jpg"); }
  8. imagenes_mc.foto8_mc.onRelease = function() { cargaImagen("foto2s.jpg"); }

Saludos.

Hola Carla! Antes que nada mil gracias por el tutorial, con tu ayuda pude hacer mi primer trabajo en flash! (que emoción). Super bien explicado!, gracias por tu paciencia de contestarnos a todos... Una preguntota... hay alguna forma de poder agregar un boton de zoom en el mismo movie clip, y que se pudiera hacer tanto horizontal como poner botones para poder moverme tambien en vertical? (osea poderme mover a los 4 lados) Mil gracias de antemano por tu ayuda!!!

Hola, muy bueno el tutoríal el scroll está hecho pero tengo problemas para que me salgan las imágenes. Me puedes decir que tengo que poner en
var directorio:String = "http://codigometropoli.com/wp-content/uploads/2008/08/fotos/";

He intentando darle una ruta a la carpeta de donde tengo las imágenes, pero me dice: Error al abrir la URL.

Donde hay que poner las fotos que se tienen que abrir??

Gracias.

Hola Carla ya he conseguido que funcione lo del Error, ahora tengo otra questión.
Sería posible que la primera foto estuviese cargada?, es decir que cuando se abra, se vea el scroll y la primera imagen, para que así no se quede un vacio.
Gracias.

Carla
Hola! me resulto todo ok estoy feliz!!!!!
te agradezco tu ayuda!!!!
Queria preguntarte una cosa que me pasa al subir el sitio, quizas tu me puedes ayudar,
En varios computadores se ve el sitio como yo quiero, pero cuando lo abro en FIREFOX en un pc al pinchar algun boton se me marca una linea blanca justo el los limites de mis medidas de la caja que arme en flash. Al pinchar fuera de la caja se deselecciona y se borra esa linea. Que sera?

este es el link:
http://www.blancomc.cl/smass
(el sitio no esta armado todavia, es una maqueta, solo esta hecho, obras, oficinas, Agencia 180)

Espero me puedas ayudar
gracias

Hola Carla, me encantó tu tutorial! Estaba como loca buscando un scroll de imágenes que me sirviera. El tuyo está muy clarito, para mi que no se nada de flash. Con suerte hago un par de animaciones :)
Te quería preguntar cómo lo hago en formato vertical, ya que le cambié todos los derecha por top y los izquierda por bottom y todas las "x" por "y" suponiendo que resultaría, pero nooooo, no pasó nada, seré yo señor? ya no se qué más tengo que cambiar, tengo todos los nombres de instacias bien y las coordenadas creo que también. Será referente al centro del MC? Dónde lo debería poner?
Espero no darte la lata, veo que ya te han preguntado al respecto.
Saludos!
Fernanda
PD: De qué país eres? Yo Soy de Santiago de Chile!

Carla! gracias de verdad, parece que el cansancio no me dejaba pensar anoche! Lo resolví! me resultó! eres mi ídola!
Ahora cambié la izquierda por top y la derecha por bottom y todo fluyó correctamete... Estoy Feliz!

Ahora, quería hacerte una pregunta más: Esta barra vertical que hice, avanza perfecto con los botones, quería saber si además de funcionar con los botones, al mismo tiempo, cuando yo me ponga con el mouse sobre las imagenes se muevan hacia arriba y abajo constantente?

Espero explicarme bien.
Saludos!
Fernanda

Carla yo por tercera vez, espero no molestar más!
Las imágenes corren perfecto, pero tengo un drama, ya que cada imagen es botón que abre una pagina y ahora no me quieren abrir!!!! Qué hago?

Saludos!
Fernanda

Muchas gracias, de verdad no hay tantas personas como tu que se tomen el tiempo para enseñar a otras. Muy buen tutorial ME SIRVIO MUCHO PARA LO QUE ESTOY REALIZANDO. :D

Carla, agregando más datos a mi nuevo problema, me aparece un mensaje de error en el flash (estoy usando flash CS4 y tomé tu ejemplo del AS3):

ADVERTENCIA: las acciones en instancias MovieClip o de botones no son compatibles con ActionScript 3.0. Se ignorarán todos los script en instancias de objetos.

Será por eso que los botones dentro de mi barra no funcionan? Estoy media mareada ya con el tema!

Saludos!
Fernanda

Efectivamente era el problema, tomé tu ejemplo de as2 y funcionaron los botones. (yo no estaba publicando en as2 antes y por eso no me resultaba) Estoy aprendiendo de a poco.

Si, sigo con la interrogante de si, podré hacer que la barra de imagenes esté en movimiento según la posición del mouse y además que funcionen los botones?

Gracias!!!
Espero no haberte mareado, estoy aprendiendo y a veces me desespero!
Fernanda

Hola Kel,

Para que la primera foto se muestre al inicio sólo debes llamar a la función cargaImagen; puedes ponerlo hasta abajo de tu código:

Actionscript:
  1. cargaImagen("foto7s.jpg");

Saludos.

Hola Regina,

¿Te refieres a un zoom de todo el MovieClip? Si es así yo creo que tendrían que ser dos MovieClips: la tira de imágenes y el MovieClip más grande, ya que si fuera uno solo se verían pixeleadas las fotos. Si quieres que le hagan click a toda la tira tendrías que poner:

Actionscript:
  1. imagenes_mc.onRelease = function() {
  2.    // Código para hacer el zoom
  3. }

Con respecto a moverla en las cuatro direcciones claro que podrías, sólo tendrías que hacer la máscara más grande y saber las coordenadas máximas en las cuatro direcciones. Haz una prueba cambiando las _x por _y para que veas que es prácticamente lo mismo.

Saludos.

Carla:
Mil gracias por la respuesta, la verdad es la primera vez que estoy abriendo el flash, como podría hacer los dos movie clips para poder hacer el zoom. Mira, lo que estoy tratando de hacer es una sola imagen (un mapa) ponerlo en grande pero que se pueda ver por partes (con los botones) y además que se pudiera dar uno o dos acercamientos (con el zoom), solo que no se en que parte debo de poner el codigo del zoom. De veras te agradezco muchisimo!

Hola de nuevo!
Gracias por contestar, el problema es que no entiendo lo que tengo que hacer... no estoy yo muy puesta en esto de la programación.
Puedes decirme como llamo a la función cargaImagen?? porque he intentado diferentes cosas pero como no lo sé pues nada...
Y tampoco entendí muy bien eso de "puedes ponerlo hasta abajo de tu código" que es que lo tengo que poner bajo del todo??

Gracias de nuevo!

Hola Carla! al final lo he conseguido, creo que leí el código como 3815719... de veces, para intentar razonarlo!!
y puse:
container_mc.onEnterFrame = function() { cargaImagen("1.jpg"); }

Y funcionó!!

Muchiiisiiimas gracias, por tus aportaciones, ayudan mucho!

Carla, gracias por el aporte.

Estoy atascado en un punto que no puedo superar, creo necesito tu ayuda. En la versión de texto+imágenes, me da un resultado no adecuado.

Cuando en el ejemplo que me bajé, le doy a "Control/Probar pelicula", aparece el avatar pero no el texto.

El caso es que hice mi propio documento con su texto e imágenes y mi sorpresa fue cuando vi que no aparecía el texto. Entonces baje el archivo de ejemplo y como ya te digo tampoco aparece el texto.

Debe ser que mi grado de NOVATO es supremo. Gracias por tu inestimable ayuda.

Saludos desde España.

como puedo hacer que una silueta de una imagen se vaya dibujando solo, se que por medio de msacaras pero no me queda el resultado pues conforme aparece la primer parte, la parte de atras va desapareciendo.

¡¡Muchas gracias!! Fue de gran ayuda tu tutorial sigue asi! Saludos desde Puebla!

Hola carla
Queria saber como se puede hacer esto mismo pero de forma vertical!
saludos y gracias

Muchas gracias, Alugah, por tu comentario. Saludos.

Hola Soledad,

Sólo es cuestión de cambiar las coordenadas.
Revisa el ejemplo que hice de foto + texto: http://www.megaupload.com/?d=41I29M5L

Saludos.

Hola!! Felicidades por este archivo, lo personalize y lo quise usar en un sitio, y funciona casi todo a la perfección, mi unico problema es que al acceder a la etiqueta donde se encuentra el scroll, todo de maravilla, pero al salir de esa etiqueta, el clip del scroll no desaparece, se ve en el resto de la pelicula, y no se como resolverlo, ojala y alguien me pueda a yudar con eso.

Hola Erick,

Me parece que con etiqueta te refieres a la máscara. Una máscara delimita la zona que quieres que se vea en tu aplicación. Cuando tienes una máscara en tu área de trabajo, ésta no te muestra lo que hay debajo ya que te está mostrando la zona que cubre; es por eso que cuando le das doble click puedes ver el scroll. Puedes ocultar la capa de la máscara haciendo click en el botón o punto que está debajo del ojo en la Línea de Tiempo o bien hacer click en la caja de color para mostrar esa capa como contorno o modificarle el alpha mientras trabajas.
Espero esa haya sido tu pregunta.

Saludos.

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)