Scroll Horizontal con Menú de Múltiples Opciones en Flash 8

7

Tutorial Flash 8 Animación de Scroll del Alfabeto (diccionario). Hello. el tutorial que propongo a continuación tiende muchas aplicaciones, esta es tan solo una. Es un solo botón pero esta enlazado a diferentes símbolos los cuales pueden contener una animación o una definición como a continuación se muestra. Y como la práctica hace al maestro ¿comenzamos?. :) Good luck:)!!.

1-. Comenzar por hacer un documento (ctrl. + J).
a)-. Las dimensiones son 250 * 310 píxeles de ancho y alto.
b)-. Usar como color de fondo #CCCCFF.
c)-. La velocidad de fotogramas en esta ocasión será de 20 fps.

2-. Crear el primer símbolo (ctrl. + F8).
a)-. Nombrarlo mc botón.
b)-. Seleccionar como Tipo Botón.

3-. Ubicado en el símbolo mc botón.
a)-. Crear un diseño de un botón “esférico”de dos estados (Reposo y Sobre).
b)-. Las dimensiones serán 30.0 * 30.0 píxeles.
c)-. Colocar cada uno de los estados del botón en coordenadas X = 0.0 y Y = 0.0.

4-. Crear un nuevo símbolo (ctrl. + F8).
a)-. Nombrarlo letra A.
b)-. Colocar como Tipo Gráfico.
Nota colocar tantos símbolos gráficos como definiciones quieras que tenga la película, explicare la colocación de dos de ellos solamente. Aunque al final el archivo swf contendrá 12 símbolos gráficos.

5-. Ubicado en el símbolo letra A.
a)-. Insertar campos de texto estáticos y realizar una serie de de definiciones en orden alfabética.
b)-. Colocar los textos en coordenadas X = 0.0 y Y = 0.0
Nota el ancho y alto no deberá de sobrepasar los 245.0 * 220.0 píxeles.

6-. Crear otro símbolo (ctrl. + F8)
a)-. Nombrarlo letra B.
b)-. Colocar como Tipo Gráfico.

7-. Colocado en el símbolo letra B.
a)-. Repetir el paso 5.
Nota repetir el paso cinco y seis tantas veces como definiciones tengas.

8-. Crear un nuevo símbolo (ctrl. + F8)
a)-. Colocar como nombre agrupación de letras.
b)-. Seleccionar en Tipo la opción Clip de película.

9-. Ubicado en el símbolo agrupación de letras. Proceder a colocar cada uno de los símbolos gráficos en este nuevo símbolo.
a)-. Primero arrastrar desde la biblioteca (F11), el símbolo letra A.
b)-. Colocar el símbolo en coordenadas X = 0.0 y Y = 0.0

10-. Arrastrar desde la biblioteca (F11) el símbolo letra B.
a)-. Colocar el símbolo en coordenadas X = 242.1 y Y = 0.0
Nota segur arrastrando cada uno se los símbolos que creaste.

11-. Regresar a la Escena y cambiar el nombre de la capa por el de texto.
a)-. Arrastrar desde la biblioteca (F11) el símbolo agrupación de letras.
b)-. Escribir como Nombre de instancia información.
c)-. Colocar el símbolo en coordenadas X = 5.0 y Y = 5.0.

12-. Seleccionar el símbolo (no el fotograma).
a)-. Abrir la barra de Acciones – clip de película, e insertar el siguiente código action script.
onClipEvent (load) {
_x = 5;
}
onClipEvent (enterFrame) {
_x += (x-_x)*0.1;
}

13-. Insertar una segunda capa y cambiar el nombre por el de botones.
a)-. Arrastrar desde la biblioteca (F11) el símbolo mc botón.
b)-. Escribir como Nombre de instancia letra_a.
c)-. Colocar el símbolo en coordenadas X = 10.0 y Y = 235.0.

14-. Insertar un campo de Texto estático y escribir la letra a.
a)-. Colocar la letra al centro del botón.

15-. Arrastrar nuevamente el símbolo mc botón en la capa botones.
a)-. Escribir como Nombre de instancia letra_b.
b)-. Colocar el símbolo en coordenadas X = 50.0 y Y = 235.0.

16-. Insertar un campo de Texto estático y escribir la letra b.
a)-. Colocar la letra al centro del botón.

17-. Por último insertar una tercera capa y nombrarla acciones.
a)-. Seleccionar el frame.
b)-. Abrir la barra de Acciones – fotograma e insertar el siguiente código action script.

letra_a.onPress = function() {
informacion.x = 6;
};
letra_b.onPress = function() {
informacion.x = -242;
};
letra_c.onPress = function() {
informacion.x = -491;
};
letra_d.onRelease = function() {
informacion.x = -741;
};
letra_e.onPress = function() {
informacion.x = -990;
};
letra_f.onRelease = function() {
informacion.x = -1240;
};
letra_g.onPress = function() {
informacion.x = -1490;
};
letra_h.onPress = function() {
informacion.x = -1740;
};
letra_i.onPress = function() {
informacion.x = -1990;
};
letra_j.onPress = function() {
informacion.x = -2240;
};
letra_k.onPress = function() {
informacion.x = -2490;
};
letra_l.onPress = function() {
informacion.x = -2740;
};

Con esta maniobra queda concluido el tutorial espero que esa de ayuda. Well done.

P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado. El código expuesto solamente soporta a doce botones, doce símbolo. Sise varia el tamaño de los texto se tendrán que modificar las coordenadas en el código informacion.x = nueva coordenada. :) Hasta muy pronto :) .

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.

7 comentarios para “Scroll Horizontal con Menú de Múltiples Opciones en Flash 8”

  1. la mosquita says:

    esta de poca…eres lo más exacto a la perfeccion, sigue asi.

  2. ek says:

    como insertarlo en un espacio mas grande sin que se desconfigure.

  3. pika says:

    quiero poner en una web para que dejen los comentarios y que se puedan ver…asi como estan aca…como hago?

  4. Silvana L says:

    holas!! me encanto esta buenisimo…ahora si lo quisieramos con imagenes como hago en vez de texto???? necesito un xml?

  5. CRISEDU says:

    que tal te felicito porla animaciones y mepreguntaba si laspodria utilizar en un tutorial que estoy realizando

  6. Gato says:

    Un genio total! Mil gracias!!!

Dejar un comentario