Galeria Programada Con Efecto Scroll (Parte 2)

11-. Crear cada uno de los símbolos (ctrl. + F8) que albergaran a la galería de imágenes.

a)-. Nombrar a este símbolo modelo_1 y de 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 seccion_modelo01.

12-. Importar (ctrl. + R) en el símbolo creado, la primera de las imágenes pero con dimensiones de 320.0 * 320.0 píxeles de ancho y alto.

a)-. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

Espero que este paso no te ocasione mayores complicaciones, y si es así call 911 jajaja. Observar el paso # 10 para ver cual es la primera de las imágenes.

13-. Crear un segundo símbolo (ctrl. + F8).

a)-. Nombrar a este símbolo modelo_2 y de 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 seccion_modelo02.

14-. En este símbolo importar la segunda imagen que corresponde al paso # 10.

a)-. La imagen debe de tener de dimensiones de 320.0 * 320.0 píxeles de ancho y alto.

b)-. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

Nota repetir el paso 11 o 13 para crear 3 símbolos más, cada uno de estos símbolos colocar como nombre de Identificador seccion_modelo03, seccion_modelo04 y seccion_modelo05.

15-. Crear el ultimo de los símbolos (ctrl. + F8) que se usara en este tutorial.

a)-. Nombrarlo mc_acciones, en la opción Tipo seleccionar Clip de película.

16-. Colocado en el símbolo, proceder a cambiar el nombre de la capa por el de botón.

a)-. Arrastrar desde la biblioteca el símbolo botón.

b)-. Escribir como nombre de instancia bot_up.

c)-. Después colocar el símbolo en coordenadas X = 250.0 y Y = 0.0.

Nota para mantener un poco mas organizada la biblioteca insertar una carpeta nombrarla imágenes y en ella colocar la serie de imágenes importadas.

17-. Insertar una segunda capa y cambiarle el nombre por el de modelos minis.

a)-. Arrastrar desde la biblioteca el símbolo clip de película imágenes minis.

b)-. Colocar el símbolo en coordenadas X = 22.5 y Y = 52.5.

18-. Insertar una ultima capa y cambiarle el nombre a action scrip.

a)-. Seleccionar el fotograma de esta capa, abrir la barra de Acciones – fotograma e insertar el siguiente script.

menu = ["Modelo01", "Modelo02", "Modelo03", "Modelo04", "Modelo05"];

this.createEmptyMovieClip(”content”, 0.0);

this.attachMovie(”mc_bg”, “mascara”, 10);

mascara._y = content._y=180;

mascara._x = target=133;

content.setMask(mascara);

content._x = 0.0;

Velocidad_Scroll = 5;

xInicio = 5;

yInicio = 27;

bHeight = 111;

Intervalo_boton = 5;

countDown = menu.length;

Open_Menu = false;

theTime = 0;

Velocidad_boton = 2;

for (var i = 0; i<menu.length; i++) {

var seccion = content.attachMovie(”seccion_”+menu[i], “seccion_”+menu[i], i+100);

seccion._x = seccion._width*i;

var b = this.attachMovie(”menu”, “menu”+i, countDown);

countDown–;

b.stop();

b._x = xInicio ;

b._y = yInicio ;

b.Intervalo_boton = Intervalo_boton*i;

b.target = yInicio +(bHeight*i);

b.txt = menu[i];

b.pos = target+(i*-seccion._width);

b.onPress = function() {

target = this.pos;

Close_Menu();

this.gotoAndStop(1);

};

b.onRollOver = function() {

this.gotoAndStop(2);

};

b.onRollOut = function() {

this.gotoAndStop(1);

};

b._visible = false;

}

function Close_Menu() {

for (var i = 0; i<menu.length; i++) {

var b = this["menu"+i];

b._visible = false;

b._x = xInicio ;

b._y = yInicio ;

}

Open_Menu = false;

}

bot_up.onPress = function() {

if (!Open_Menu) {

theTime = getTimer();

Open_Menu = true;

for (var i = 0; i<menu.length; i++) {

_root.Mc_Escena["menu"+i]._visible = true;

}

} else {

Close_Menu();

}

};

function Sub_boton_scroll() {

if (Open_Menu) {

for (var i = 0; i<menu.length; i++) {

var b = this["menu"+i];

if ((theTime+b.Intervalo_boton)<getTimer()) {

b._x += (b.target-b._x)/Velocidad_boton;

}

}

}

}

this.onEnterFrame = function() {

content._x += (target-content._x)/Velocidad_Scroll;

Sub_boton_scroll();

};

19-. Por ultimo regresar a la Escena, arrastrar desde la biblioteca el símbolo mc_acciones.

a)-. Escribir como nombre de instancia Mc_Escena.

b)-. Colocar el símbolo en coordenadas X = 5.0 y Y = 4.0.

Con este paso se concluye el tutorial well done!!

P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado. Recordar que los nombres usados como identificadores de vinculación, las coordenadas colocadas para cada uno de los símbolos y el tamaño de las imágenes son especialmente para este tutorial. Si de seas hacer una galería que posee otras dimensiones para las imágenes no dudes en hacerlo saber con gusto se te proporcionará la accesoria. Hasta pronto

Primera Parte Segunda Parte

Visualizar el archivo swf de este tutorial

Descarga el archivo fla de este tutorial

 

Artículos relacionados:

1. Galería Programada Con Efecto Scroll (Parte 1)
2. GALERÍA FLASH PROGRAMADA
3. Efecto de Galería Zoom con Flash 8 (primera parte)
4. Efecto de Galería Zoom con Flash 8 (segunda parte)