Galeria Programada Con Efecto Scroll (Parte 2)

18

Tutorial Flash 8 Programación De Galería Con Scroll11-. 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:

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

18 comentarios para “Galeria Programada Con Efecto Scroll (Parte 2)”

  1. Silvana L says:

    hola me encanto el scrolll pero necesito hacer un scroll vertical…. y he intentado hacerlo y no me sale!!!!!!
    por favot me podrias decir q parte del codigo modificar para poder hacerlo vertical
    gracias te felicito

  2. guido bravo says:

    los tutoriales me parecen que tienen un nivel muy bueno, con sitios asi
    es como la web adquiere la importancia que merece.
    si es posible, estoy haciendo un tangram pero hasta el momento no he podido
    controlar la rotación de las figuras para cualquier angulo.

    Felicitaciones

  3. mentebrillante says:

    hola que es un scrol?

Dejar un comentario

Página 1 de 0