Diseñar y Programar Galería En Adobe Flash Primera Parte

Diseñar Botones Parte 1

Primero que nada gracias por visitar esta página web www.estiloflash.com, y te doy la más cordial de las bienvenidas. Talvez siempre has tenido la curiosidad de trabajar en una galería, esta es la ocasión para que lo hagas. Este trabajo se puede hacer tanto en flash mx (Flash Player 7, ActionScript 2.0) como en flash 8 (Flash Player 8, ActionScript 2.0).

En la siguiente explicación te detallare paso a paso para que aprendas a diseñar y programar una galería de con 5 imágenes, dicha galería cuenta con botones para que las imágenes sean desplazadas una a una ya sea de izquierda a derecha o de derecha a izquierda, la galería  también cuenta con botones que contienen los números 1, 2, 3, 4, y 5 estos con el fin de que las imágenes sean desplazadas en cualquier orden.

Si apenas empiezas a trabajar con el programa de flash aprenderás a trabajar con el panel de mezclador de colores, este panel te ayuda a dar diseño a los trabajos Web.

1. El primer paso que tienes que seguir después de haber abierto el programa de flash en cualquiera de las versiones antes descritas, y de haber creado un nuevo documento (Ctrl. + N).
   1. Crear las propiedades del documento (Ctrl. + J). las dimensiones del documento en esta ocasión serán 600 * 400 píxeles de ancho y alto respectivamente.
   2. Seleccionar como color de fondo #FFFFFF, este color de fondo solamente aparecerá si la galería es publicada en la Web. si tienes planeado publicar el trabajo, seleccionar como color de fondo uno que sea más de tu agrado.
   3. Colocar como velocidad de fotogramas  12 fps (Fotogramas Por Segundo).

1. Una vez que tengas definido el tamaño del documento, proceder a crear el primero de los símbolos (Ctrl. + F8).
   1. Colocar como nombre algo que lo defina para no tener confusión, este símbolo tendrá como nombre botón derecho.
   2. Seleccionar en la opción Tipo Botón.

1. En el símbolo botón diseñaras una forma que indique la dirección a la derecha. En este punto manejaras dos herramientas, una para colocar un degradado como relleno y la otra para transformar el degradado (si son tus primeros trabajos en flash estas herramientas te serán de mucha ayuda).
   1. Para colocar un poco de diseño al botón, primero hacer un circulo de dimensiones 33.0 * 33.0 píxeles de ancho y alto.
   2. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0.
   3. Con la ayuda del panel de Mezclador de colores (Shift + F9), seleccionar en la opción Tipo Lineal.
   4. Desplazar los cuadros que indican el color tal y como se muestra en la imagen los colores para cada uno de los cuadros son #000000 y #4C4C4C.
   5. * indica el nombre del símbolo en el cual se esta trabajando, ** cuando se trabaja con símbolos de botón es preferible trabajar en varias capas y colocar un nombre que describa a la capa, en este caso el colocar como nombre Bg, *** indica que la forma dibujada no contiene borde y que el color de relleno es un degradado de dos colores.

1. Una vez aplicado el relleno al círculo se pondrá de forma lineal. Seleccionar la Herramienta Transformación de relleno (F) para modificarlo.
   1. A la forma dibujada se le colocaran unas líneas, colocar el cursor sobre el círculo tal como se muestra en la imagen.
   2. Manteniendo presionado el botón del ratón girar el relleno asta la posición marcada en la imagen 2.
   3. Hacer clic en el centro de para desplazar el relleno hacia arriba, la imagen 3 describe lo anterior.

1. Insertar una segunda capa y cambiarle el nombre por el de forma.
   1. Dibujar triangulo que indique la punta hacia la derecha.
   2. La forma no contiene borde y el color de relleno es #FFFFFF.
   3. Las dimensiones del triangulo son 15.8 * 20.0 píxeles de ancho y alto respectivamente.
   4. Colocar la forma dibujada en coordenadas X = 8.6 y Y = 6.5. Estas coordenadas son el centro el círculo.
   5. Para dibujar la forma del triangulo te puedes ayudar con las siguientes herramientas. * herramienta de Línea (N), ** herramienta de Pluma (P), *** herramienta de Lápiz.

1. Una herramienta muy útil en flash que puedes utilizar para copiar formas dibujadas es la de copiar y pegar fotogramas. Así te aseguras que al pegar los fotogramas en otro símbolo quedaran en las mismas coordenadas y con el mismo diseño.
   1. Seleccionar los dos fotogramas del símbolo botón derecho.
   2. Hacer clic con el botón derecho del ratón, en el menú emergente seleccionar la opción Copiar fotogramas (Ctrl. + Alt. + C).

1. Crear un nuevo símbolo (Ctrl. + F8), en cual albergara al botón que indicara el desplazamiento hacia la izquierda.
   1. Nombrarlo botón izquierdo y seleccionar el la opción Tipo Botón.

Visualizar Archivo SWF De Este Tutorial

Parte 2 Diseñar Botones

Artículos relacionados:

• Diseñar y Programar Galería En Adobe Flash Primera Parte
• Tutorial Adobe Flash CS3 Cronometro Cinematográfico Primera Parte
• Diseñar y Programar Galería En Adobe Flash Sexta Parte
• Diseñar y Programar Galería En Adobe Flash Segunda Parte