Tutoriales Estilo Flash

Galería Programada Con Efecto Scroll (Parte 1)

Tutorial Flash 8, Galería De Modelo Con Efecto Scroll Programada Con Botones Especificaos. Este tutorial en particular tiene un sin fin de aplicaciones si lo sabes implementar adecuadamente en tu espacio Web, ya que puede funcionar como sitio completo Web, como galería de imágenes, o como un simple menú flash. En esta ocasión explicare como realizar una galería de imágenes la cual esta enlazada por medio de clips de películas Vinculados por medio de un nombre especifico. Los botones que enlazan a estos clips de película están programados específicamente para cada una de las imágenes de la galería. Es muy importante que coloque cada nombre que se menciona en cada uno de los símbolo, de otra forma el efecto explicado aquí no tendrá un resultado satisfactorio. ¿Comenzamos? Good luck !!.

1-. Comenzar por hacer el documento (ctrl. + J) el cual servirá para publicar la película.
a)-. Las dimensiones empleadas en esta ocasión son 550 * 520 píxeles de ancho y alto.
b)-. Color de fondo seleccionado es #B4B4B4.
c)-. La velocidad de fotogramas en este tutorial es de 30 fps.

2-. Crear el primero de los símbolos (ctrl. + F8) que será empleado en este tutorial.
a)-. Colocar como nombre botón.
b)-. Seleccionar en la opción Tipo Botón.

3-. Una vez que estés colocado en el símbolo botón, proceder a diseñar un botón de dos estados (Reposo y Sobre).
a)-. En esta ocasión las dimensiones del rectángulo del botón son 80.0 * 20.0 píxeles de ancho y alto.
b)-. Colocar el diseño del botón en coordenadas X = 0.0 y Y = 0.0.
Nota cuando realices un botón el cual tenga un texto que mostrar hacerlo en dos capas, ya que esto te facilitara la edición del mismo.

4-. Crear un nuevo símbolo (ctrl. + F8), es de suma importancia colocar un Identificador para que el efecto funcione apropiadamente.
a)-. Nombrar al símbolo sub menú, en la opción Tipo seleccionar Clip de película.
b)-. Presionar la casilla de Avanzado y de esta forma aparecerá un menú emergente de Vinculación.
c)-. Seleccionar el la opción Vinculación las casillas Exportar para ActionScrip y Exportar en primer fotograma.
d)-. Por ultimo colocar el nombre del Identificador en esta ocasión es menú.

5-. Ubicado en el símbolo, primero cambiar el nombre de la capa por el de cuadro. Este símbolo servirá como su nombre lo dice como un botón de sub menú.
a)-. Hacer en dos fotogramas un diseño de un botón. Cada uno de los fotogramas servirá como cada uno de los estados de un símbolo botón (Reposo y Sobre).
b)-. Las dimensiones de este seudo botón son 79.0 * 17.0 píxeles de ancho y alto.
c)-. Colocar el diseño de cada fotograma en coordenadas X = 0.0 y Y = 0.0.

6-. Insertar una segunda capa y nombrarla texto.
a)-. Agregar un campo de Texto dinámico, este campo de texto tiene que abarcar todo el espacio del diseño del rectángulo, las diemciones sugeridas para este caso en particular son 79.0 * 17.0 píxeles de ancho y alto.
b)-. Colocar el campo de texto al centro del rectángulo o sea en coordenadas X = 0.0 y Y = 0.0.
c)-. En la barra de Propiedades escribir en el espacio de Variable Var:txt.

7-. Crear otro símbolo más (ctrl. + F8), nombrarlo máscara.
a)-. Seccionar en la opción Tipo Clip de película.
b)-. Presionar la casilla de Avanzado y de esta forma aparecerá un menú el emergente.
c)-. Seleccionar el la opción Vinculación las casillas Exportar para ActionScrip y Exportar en primer fotograma.
d)-. Por ultimo colocar el nombre del Identificador en esta ocasión es mc_bg.

8-. En este símbolo solamente se dibujara un Rectángulo (R), sin borde y colocar como color de relleno el que más te guste #000000.
a)-. Las dimensiones del rectángulo son 320.0 * 320.0 píxeles de ancho y alto.
b)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0.

9-. Crear un símbolo más (ctrl. + F8).
a)-. Nombrarlo imágenes minis.
b)-. En la opción Tipo seleccionar la casilla Clip de película.

10-. Importar (ctrl. +R) en este símbolo una serie de imágenes (5 imágenes). Para crear estas imágenes ayudarte del Photoshop.
a)-. Cada una de las imágenes tienen como dimensiones 100.0 * 100.0 píxeles de ancho y alto.
b)-. Colocar la primera imagen en coordenadas X = 0.0 y Y = 0.0, la segunda imagen en coordenadas X = 110.0 y Y = 0.0, la tercera imagen en coordenadas X = 220.0 y Y = 0.0, la cuarta imagen en coordenadas X =330.0 y Y = 0.0 y la quinta imagen en coordenadas X = 440.0 y Y = 0.0. Como te puedes dar cuanta cada una de las imágenes esta separada por 10 píxeles entere un y otra.

Primera Parte Segunda Parte

Artículos relacionados

• Galeria Programada Con Efecto Scroll (Parte 2)

Comentarios

Qué opinas sobre este artículo ?, dejanos tu opinión . Tienes algo que agregar ? hazlo ahora.