Galería de Imágenes Continuas

12

Hola recibe un cordial y afectuoso saludo. Complaciendo las necesidades de los  visitantes de este espacio Web, en esta ocasión tengo el tutorial nombrado imágenes continuas. El tutorial es muy fácil de realizar ya que solo consta de tres símbolos y en uno de estos enmascarar una animación y listo. Good luck! ¿Comenzamos?.

1-. Primero crear un documento (ctrl. + J) de dimensiones 140 * 158 píxeles de alto y ancho respectivamente.
a)-. Colocar como color de fondo #99CC99.
b)-. Escribir en velocidad de fotogramas 18 fps.

2-. El siguiente paso es importar una serie de imágenes a la biblioteca, cada una de las imágenes tendrá por medidas 60 * 138 píxeles de ancho y alto respectivamente la ruta para tal propósito se muestra en la siguiente imagen esto es Archivo >> Importar >> Importar a biblioteca.

3-. Crear el primer símbolo (ctrl. + F8).
a)-. Dar de nombre modelos y de comportamiento Gráfico.

4-. El símbolo servirá para arrastrar desde la biblioteca la serie de imágenes antes importadas.
a)-. Cada una de las imágenes colocarlas en las siguientes coordenadas.
b)-. chica_1 colocarla en coordenadas X = 0.0 y Y = 0.0.
c)-. chica_2 colocarla en coordenadas X = 60.0 y Y = 0.0.
d)-. chica_3 colocarla en coordenadas X = 120.0 y Y = 0.0.
e)-. chica_4 colocarla en coordenadas X = 180.0 y Y = 0.0.

5-. En este paso es en donde esta el truco para hacer parecer que la secuencia nunca tiene fin.
a)-. Insertar nuevamente las dos primeras imágenes (chica_1 y chica_2).
b)-. chica_1 colocarla en coordenadas X = 240.0 y Y = 0.0.
c)-. chica_2 colocarla en coordenadas X = 300.0 y Y = 0.0.

6-. Crear el siguiente símbolo (ctrl. + F8)
a)-. Colocar como nombre mover modelos y dar como comportamiento Clip de película.

7-. Arrastrar desde la biblioteca el símbolo modelos.
a)-. Colocarlo en coordenadas X = 0.0 y Y = 0.0.

8-. Seleccionar el frame # 50 y en el insertar un fotograma clave (F6).
a)-. Colocar esta segunda serie de imágenes en coordenadas X = – 235.0 y Y = 0.0.

9-. Este paso es solamente para relazar la animación de movimiento.
a)-. Seleccionar el primer fotograma.
b)-. En la barra de propiedades en la opción Animar seleccionar Movimiento.

10-. Crear el último símbolo (ctrl. + F8).
a)-. Nombrarlo enmascarar modelos y dar como comportamiento Clip de película.

11-. Arrastrar desde la biblioteca el símbolo mover modelos.
a)-. Colocar el símbolo en coordenadas X = 0.0 y Y = 0.0.

12-. Insertar una segunda capa y ocultar la Capa 1.
a)-. En esta capa dibujar un rectángulo sin borde y como color de relleno #FF0000
b)-. Las dimensiones son 120.0 * 138.0 píxeles de ancho y alto.
c)-. Colocar el rectángulo en coordenadas X = 0.0 y Y = 0.0.

13-. Seleccionar la Capa 2 y dar clic con el botón derecho del ratón y luego seleccionar la opción Máscara.

14-. Insertar una tercera capa y en ella dibujar un rectángulo.
a)-. Usar como color de borde #FFFDDE y Altura de trazo 4 no rellenar el rectángulo.
b)-. Las dimensiones del rectángulo son 120 * 138 píxeles de ancho y alto.
c)-. Colocar la figura en coordenadas X = 0.0 y Y = 0.0.

15-. Por último regresar a la Escena.
a)-. Arrastrar desde la biblioteca el símbolo enmascarar modelos.
b)-. Colocar el símbolo en coordenadas X = 10.0 y Y = 10.0.

Con esto se da por concluido el tutorial espero que haya sidote tu agrado, well done!.

P.D. Presionar ctrl. + enter para visualizar el resultado final. Hasta muy pronto y espero seguir contando con tus comentarios y sugerencias para aprender más. Si tienes tutoriales y deseas publicarlo en este espacio comunícate y con gusto se publicaran. Hasta  muy pronto.

Visualizar archivo swf de este tutorial

Descarga el archivo fla de este tutorial

Búsquedas:

Artículos relacionados:





12 comentarios para “Galería de Imágenes Continuas”

  1. Roberto Elenes says:

    Sencillamente fabuloso.

  2. DAnnilo says:

    Bien por este tuto, una pregunta, como se le puede hacer para que cuando pases el mouse sobre una de esas imagenes, se detenga el movimiento y si le clickeas se abra esa misma mas grande a un lado, como cuando haces un pase de diapositivas?

  3. Oscar Ortiz says:

    Hola muy buenas tardes, Escribo de la CD, de México es la primera vez que entro a su página y se ve muy interesante, espero pueda aprender mucha de ella ya que apenas estoy haciendo una web site, espero me sirva de mucho.. felicidades

  4. Oscar Ortiz says:

    Hola buenos días Estoy siguiendo los pasos para, la Galería de Imágenes Continuas.
    Pero en este paso no entendí, como seleccionar el Frame # 50 que Deva de hacer en ese paso, espero me pueda ayudar.
    8-. Seleccionar el frame # 50 y en el insertar un fotograma clave (F6).

    También le agradecería mucho me diera los pasos para hacer una galería de imágenes para mi página Web, en flash ya que soy nuevo en esto.y precisamente quiero una galeria de imágenes muy buena para mi web. agradezco su pronta respuesta.

  5. edgar torres says:

    oye tengo la misma duda que dannilo como le puedo hacer para que se detenga la animacion y poder darle click para agrandar la imagen en la misma animacion.

  6. Oshama bin-laden says:

    que asco de vida

  7. José Uribe says:

    Saludos, recién me incorporo, soy neófito, requiero ayuda.
    ¿Qué programa debo bajar a mi PC para elaborar una galería de imágenes continuas?
    Si pudieran proporcionarme el link de descarga, lo agradecería infinitamente.
    Muchísimas gracias. Atte.

  8. its me says:

    muy bueno,ay alguno donde sea igual pero al darle clik a una imagen se ponga en grande??? y porke ponen a pura tipina en bikini jajajaj

  9. Eve says:

    Gracias por compartir tus conocimientos, te felicito por tu excelente explicación. Seguí así

  10. hx says:

    hola como ago para crea una galeria de fotos donde me muestren en una parte las fotos chicas y la otra grande pero en la fotos chicas quiero que ses desplegable pa q no ocupe mucho espacio

  11. liz says:

    muy bueno el tutorial pero no me hizo ningun movimiento y lo hice igualito

Dejar un comentario

Página 1 de 11