TUTORIALES FLASH

1.- DIBUJAR Y ANIMAR UN MENU WEB CON FLASH

Tutorial por Jmx de www.EstiloFlash.com

Hola amigos agradezco la preferencia por las visitas a este sitio en lo particular a la sección
flash. El siguiente tutorial muestra que también es posible diseñar en falsh. Y para demostrar
lo anterior explicare un tutorial el cual esta hecho en photoshop.

La explicación esta dividida en partes, también mostrare como hacer un color degradado.
Comenzamos con la explicación.

Iniciamos con la primera parte de la explicación en la cual solamente insertaremos símbolos

y en ellos dibujar los rectángulos que necesitaremos para el diseño del menú creando un
documento el cual ajuste perfectamente a las dimensiones de cuatro botones, en la barra de
propiedades hacer clic en Tamaño y en Dimensiones escribir 201 (ancho) x 193 (altura).

El siguiente paso es crear un nuevo símbolo, esto es presionando Ctrl.+F8 ó insertar >>
nuevo símbolo, llamarlo fondo_ 1 y de comportamiento Gráfico.

Ahora dibujar un simple rectángulo de tamaño 201 de ancho x 193 de alto y en

coordenadas X=0 y Y=0, dicho rectángulo deberá de ser sin borde y de color # 393939.
Tal como se muestra en la imagen.
Insertar otro símbolo la ruta ya la conocen Ctrl.+F8 ó insertar >> nuevo símbolo, llamarlo
fondo_2 y de comportamiento Gráfico.

En este símbolo dibujar otro rectángulo de dimensiones 181x173 y en coordenadas X=0

yY=0, al igual que el rectángulo anterior no debe de llevar borde el color es #000000.

Este es el último símbolo que crearemos ya saben presionar Ctrl.+F8 ó insertar >> nuevo
símbolo, nombrarlo boton y de comportamiento Gráfico. Hasta esta parte concluimos con
la primera parte del tutorial. Espero que no tengan problemas (no tienen por que tener
ningún tipo de problemas), y si los tienen llamar al 911.
Iniciamos con la segunda parte en la cual mostrar como hacer el degradado para los
botones. Primero hacer visible el panel de Mezclador de colores la ruta para esta acción es
presionar shift + F9 o vía Ventana >> Paneles de diseño >> Mezclador de colores.
Ahora seleccionar en Estilo de relleno Lineal

Al dar clic en Estilo de relleno Lineal nos presentara una imagen como esta, hacer clic en la
parte marcada con el # 2 y escribir en la posición indicada el número del color el cual es
#545454.

El siguiente paso es seleccionar nuevamente parte marcada con el # 2 y escribir el número

del color el cual es #171717. Y con esta operación concluimos el degradado.
Una vez concluido el degradado es fácil que se pierda esta combinación de colores, es por
eso que mostrare como guardarlo para que sea más fácil hacer futuros rellenos. Observar la
imagen no debe de haber mayor complicación.

La tercera parte de la explicación consta de cómo aplicar el degradado y como colocarlo en la

posición que decidamos.
En el símbolo llamado boton seleccionar las propiedades del rectángulo del cual tendrá un
borde de color #666666.

El color de relleno es el degradado, este lo aplicamos seleccionando el color de relleno y

luego el degradado que guardamos con anterioridad.
Y por ultimo seleccionar el tamaño del borde este es 0.5. Dibujamos el rectángulo de tamaño
178 x 40 y en coordenadas X=0 y Y=0

Como se pueden dar cuenta el degradado no queda en la posición correcta, sin embargo,
esto lo solucionamos seleccionando la Herramienta Transformación de relleno, hacer clic en
la posición #2 y sin soltarlo ponerlo en posición horizontal.

La siguiente imagen muestra como debe de quedar el degradado.

Para ajustar el degradado simplemente seleccionar la parte marcada y llevarla hasta la altura
del rectángulo.

Para concluir arrastramos los símbolos uno por uno hacia la escena, esto es primero el
fondo_1, y colocarlo en coordenadas X=0 y Y=0.

Luego arrastrar el fondo_2 y colocarlo en coordenadas X=10 y Y=10.

Y por último el boton, este colocarlo en posición X=11 y Y=11. El símbolo boton arrastrarlo
tres veces más y colocarlos en las siguientes coordenadas:
El primero en X=11 y Y=11
El segundo en X=11 y Y=54
El tercero en X=11 y Y=97
El cuarto en X=11 y Y=140

Solamente agregar los nombres a cada uno de los botones y listo. Principal, servicios,
nosotros y contacto. ¡¡¡¡¡Verdad que siiiiiiiiiiiiiiiiiiii hay semejanza!!!!!
Recordar que este es solamente el dibujo.

Si lo quieren hacer un botón de dos estados, dibujar el rectángulo en un símbolo de

comportamiento botón al cual llamaremos boton_ok.
Después insertar un segundo frame presionando F6. Ajustar el degradado en la segunda
posición como lo muestra la imagen y listo.

Ahora arrastrar el símbolo boton_ok en lugar del símbolo boton.

Espero que haya sido de interés este tutorial. Este espacio es de ustedes háganlo crecer con
sus sugerencias y comentarios.
P.D. ctrl. + enter para ver el resultado final.

Así queda el Menú Dibujado y Animado con flash:

RELOJ DIGITAL CON SEGUNDERO

Tutorial por Jmx de www.EstiloFlash.com

Hola estimados amigos y amigas, gracias por seguir visitando este espacio y por practicar los
tutoriales aquí expuestos. En el tutorial llamado reloj_digital, algunos de estudiosos
tuvieron algunas dificultades para hacerlo y otros realizaron preguntas. Por lo tanto tome la
decisión de hacer el siguiente tutorial con el cual espero que queden disipadas las dudas, el
tutorial será nombrado clock_digital. ¿Comenzamos?.

Iniciar creando un documento de dimensiones de 164*64 píxeles, el color de fondo no

importa ya que se colocara en la primer capas un rectángulo con un degradado.

Se me olvidaba decir que todo el proyecto se realizara en la escena sin ningún símbolo. En
fin, a la primera capa nombrarla bg_1, y en esta dibujar un rectángulo sin borde y el color
de relleno será un degradado lineal. Es necesario primero girar el degradado para después
ajustarlo al tamaño de la forma. El rectángulo debe de medir 164* 64 píxeles este colocarlo
en coordenadas X=0 y Y=0.
Ahora insertar una capa más nombrarla bg_2, ocultar la capa bg_1. Luego dibujar un
segundo rectángulo con el borde redondeado de 20, aplicar el mismo color de relleno pero
ahora girar el degradado en el sentido contrario al anterior. Este rectángulo deberá de medir
163.9*46 de ancho y alto respectivamente colocarlo en coordenadas X=0 y Y=10. Estos
rectángulos es solo para darle un poco de diseño al relojito.

Continuando con el diseño insertar otra capa y nombrarla margen ocultar la capa
bg_2, dibujar un segundo rectángulo sin relleno, que mida 135.1*28.7 píxeles colocarlo
en X=12 y Y=19. Los bordes de arriba y el de lado de la izquierda son de color #000000
y los borde de abajo y el de lado de la derecha son de color #CCCCCC.
Es tiempo de crear otra capa la cual llevara por nombre texto, ocultar la capa margen,
ahora insertar un campo de texto dinámico que lleve por nombre de instancia que_hora,
el tamaño de la letra por lo menos deberá de abarcar todo el marco ante dibujado.

Por ultimo insertar la última capa y llamarla acciones, ocultar la capa texto. Seleccionar el
fotograma de la capa acciones abrir el panel de acciones e insertar el siguiente código.
this.onEnterFrame = function() {
clock = new Date();
seg = clock.getSeconds();
min = clock.getMinutes();
hora = clock.getHours();
if (hora<10) {
hora = "0"+hora;
}
if (min<10) {
min = "0"+min;
}
if (seg<10) {
seg = "0"+seg;
}
que_hora.text = hora+":"+min+":"+seg;
};

Con este paso queda concluido el tutorial. Ahora ya cuentan con un reloj digital el cual posee
minutero 00 y segundero 00, esto es (24:00:00). Espero que hayan quedado resueltas sus
dudas con relación al tutorial reloj (anterior).

P.D. Presionar control enter para visualizar el resultado final.

Sigan apoyando esta sección de flash con sus comentarios son de gran ayuda para todos.
Hasta muy pronto.
PROGRAMAR UNA GALERÍA DE IMÁGENES FLASH

Tutorial por Jmx de www.EstiloFlash.com

Hola estimadas amigas y amigos, con el fin de seguir contribuyendo en el aprendizaje o

simplemente con el reforzamiento de ideas. A continuación presento el tutorial que lleva por
nombre Galería de Imágenes, esta galería puede llevar las imágenes que desees, sin
embargo, en esta ocasión solamente se pondrán como ejemplo cuatro imágenes.

Comenzar por crear un documento de dimensiones 250*306 píxeles de ancho y alto

respectivamente y con un color de fondo gris (#CCCCCC).

Crear cuatro imágenes de tamaño 50*50 píxeles nombrarlas small_modelo_1,

small_modelo_2, small_modelo_3 y small_modelo_4, también crear las mismas imágenes
pero de tamaño 250*250 píxeles a estas nombrarlas Big_modelo_1, Big_modelo_2,
Big_modelo_3 y Big_modelo_4. Una vez creadas las ocho imágenes el siguiente paso es
importarlas a la biblioteca. Espero que manejen el programa Photoshop, es más practico
hacer las imágenes en este programa.
Este paso es relativamente sencillo, crear cuatro símbolos y nombrarlos boton_1, boton_2,
boton_3 y boton_4 respectivamente, darles de comportamiento botón. La ruta para este
propósito es presionar ctrl. + F8 ó Insertar >> Nuevo símbolo

Ahora en el símbolo boton_1 arrastrar desde la biblioteca la imagen de nombre

small_modelo_1. Hacer la misma operación pero ahora en el boton_2 insertar la imagen de
nombre small_modelo_2, en el boton_3 insertar la imagen small_modelo_3 y en el boton_4
insertar la imagen small_modelo_4. Colocar cada una de las imágenes en coordenadas X=0
y Y=0

Crear un nuevo símbolo nombrarlo galeria_modelos y darle como comportamiento clip de

película.

Una vez instalados en el símbolo galeria_modelos, en el fotograma 1 arrastrar desde la

biblioteca la imagen de nombre Big_modelo_1 colocarla en cordenadas X=0 y Y=0.
Insertar tres fotogramas claves vacíos más y en cada uno de ellos colocar la imagen
correspondiente. Esto es fotograma 1 Big_modelo_1, fotograma 2 Big_modelo_2,
fotograma 3 Big_modelo_3 y fotograma 4 Big_modelo_4

Insertar una segunda capa, seleccionar el fotograma 1 de esta capa y en la barra de

acciones escribir un stop();
Regresar a la escena, arrastrar desde la biblioteca el símbolo llamado galeria_modelos, y
escribir como Nombre de instancia galeria. Hacer visible el panel de Transformar
presionando ctrl. + T ó Ventana >> Paneles de diseño >> Transformar y con ayuda de
esta herramienta sesgar verticalmente 180º.

Crear una segunda capa y en esta arrastrar desde la biblioteca los botones y a cada uno
escribirle un nombre de instancia esto es:
Para el boton_1 el nombre de instancia es imag_1 y las coordenadas son X=10  Y=254
Para el boton_2 el nombre de instancia es imag_2 y las coordenadas son X=70  Y=254
Para el boton_3 el nombre de instancia es imag_3 y las coordenadas son X=130 Y=254
Para el boton_4 el nombre de instancia es imag_4 y las coordenadas son X=190 Y=254
La imagen solo muestra como fue arrastrado y nombrado el boton_1
Por ultimo crear una tercera capa nombrarla acciones seleccionar el fotograma de esta capa
y en la barra de acciones escribir el siguiente código:

function go(frame:Number) {
galeria.gotoAndStop(frame);
};

imag_1.onPress=function() {
go(1);
};

imag_2.onPress=function() {
go(2);
};

imag_3.onPress=function() {
go(3);
};

imag_4.onPress=function() {
go(4);
};

Con esto queda concluido este sensacional tutorial. Espero que les haya sido de ayuda y
sigan escribiendo sus comentarios acompañados de su e-mail para tener un contacto más
directo.

P.D. Presionar ctrl. + entar para visualizar la prelícuala y no olvidar dar clic a cada una de las
imágenes pequeñas. Hasta pronto.
Así queda:

Con esto damos por concluido el tutorial, para mayor información revisar los tutoriales que
tratan sobre cursores. Hasta muy pronto