Finalmente introducir una cuarta capa y sustituir el nombre por el de acciones. Esta capa será usada para introducir el código ActionScript, y de esta forma dar por concluido el tutorial. WELL DONE!

1. 1. Seleccionar el fotograma de esta nueva capa.
   2. Abrir el panel de Acciones – fotograma e insertar el siguiente código ActionScript.

_root.i = 1;

_root.galeria = 5;

Con el paso anterior queda concluida  la explicación de cómo hacer una galería con botones de desplazamiento tanto de avanzar como de retroceder. Así también la galería cuanta con botones para avanzar a voluntad a cualquiera de las imágenes de la galería.

Presionar ctrl. + Enter para visualizar la galería en plena acción.

Visualizar Archivo SWF De Este Tutorial

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

Parte 1 Programación De Botones

Importar Imágenes JPEG Tercera Parte

Animación de Imágenes (Color Alfa) Cuarta parte

Elaboración de la galería Quinta parte

Diseñar un Fondo para la Galería Sexta Parte

Diseñar y Programar Galería En Adobe Flash Séptima Parte is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Diseñar y Programar Galería En Adobe Flash Segunda Parte
• Diseñar y Programar Galería En Adobe Flash Quinta Parte
• Diseñar y Programar Galería En Adobe Flash Tercera Parte

Como se menciono al principio de la explicación la película swf cuando esta sea publicada aparecerá como color de fondo #FFFFFF, ya que tardara algunos segundos antes de que sea visualizada la galería. Sin embargo, se colocara una imagen como fondo el cual cubrirá el color #FFFFFF, con esto también se pretende dar un diseño vanguardista al trabajo.

1. 1. Crear el último de los símbolos (ctrl. + F8), en el cual estará incluido el fondo de la película.
   2. Nombrarlo imagen de fondo.
   3. Seleccionar en la opción Tipo la categoría de Clip de película.

1. Ubicado en el símbolo cambiar el nombre de la capa por el de imagen bg.
   1. Importar (ctrl. + R) la imagen que estará presente cono fondo.
   2. La imagen a importar deberá tener como dimensiones 600.0 * 400.0 píxeles de ancho y alto.
   3. Navegar hasta la carpeta que contenga dicha imagen, revisar los pasos 30, 31, 32 y 33.
   4. Una vez importada la imagen colocarla en coordenadas X = 0.0 y Y = 0.0.

1. Insertar una capa más y cambiar el nombre de la capa por el de filtro.
   1. La imagen que se importo pose demasiado brillo y como no se editarla con Adobe Photoshop.
   2. Dibujar un rectángulo en la capa filtro, modificando un poco las propiedades del color de relleno se lograra reducir el brillo de la imagen.
   3. El rectángulo tendrá como propiedades Color de trazo (color de borde) #000000.
   4. Altura de trazo (grosor de borde) 6.
   5. Estilo de trazo Sólido.
   6. Seleccionar como color de relleno #000000, pero en la opción del Alfa reducirá a 50%.
   7. Las dimensiones del rectángulo son 600.0 * 400.0 píxeles. Con estas dimensiones será cubierta en su totalidad la imagen importada.
   8. Colocar el rectángulo en coordenadas X = 0.0 y Y = 0.0.

1. Insertar una capa más y nombrarla marco. En esta capa es en donde aparecerán las imágenes de la galería.
   1. Dibujar un rectángulo sin borde y usar como color de relleno #000000.
   2. Las dimensiones del rectángulo son 495.0 * 308.0 píxeles de ancho y alto respectivamente.
   3. Colocar el rectángulo en coordenadas X = 52.5 y Y = 21.0.

1. Para concluir con el trabajo de la galería es necesario arrastrar la totalidad de los símbolos creados en la biblioteca hacia la Escena.
   1. Regresar hacia la Escena e insertar una segunda capa luego sustituir el nombre de estas por el de bg.
   2. La capa estará situada por debajo de la capa de botones de desplazamiento.
   3. Arrastrar desde la biblioteca (Ctrl. + L) el símbolo imagen de fondo.
   4. Colocar el símbolo en coordenadas X = 0.0 y Y = 0.0.

1. Insertar una tercera capa y cambiar el nombre por el de galería. En esta capa estará propiamente la galería.
   1. Arrastrar desde la biblioteca (Ctrl. + L) el símbolo en donde están situadas todas las imágenes animadas, o sea el símbolo imágenes animadas.
   2. Escribir en la casilla de Nombre instancia imagenes, la imagen describe esta acción.
   3. Colocar este símbolo en coordenadas X = 75.0 y Y = 35.0.

Solamente faltan un paso más para concluir con este trabajo de  la galería flash, aquí un ejemplo de cómo quedara la galería.

Visualizar Archivo SWF De Este Tutorial

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

Parte 1 Programación De Botones

Importar Imágenes JPEG Tercera Parte

Animación de Imágenes (Color Alfa) Cuarta parte

Elaboración de la galería Quinta parte

Colocar Código ActionScript en la Escena Séptima parte

Diseñar y Programar Galería En Adobe Flash Sexta Parte is a post from: Tutoriales Adobe Flash

Artículos relacionados:

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

A llegado el momento de hacer propiamente la galería, esto no tiene mayor dificultad si se sigue con atención los siguientes pasos (45, 46, 47 y 48).

1. 1. Crear un nuevo símbolo (ctrl. + F8), nombrarlo imágenes animadas.
   2. Seleccionar en la opción Tipo Clip de película.

1. Colocado en el símbolo imágenes animadas, proceder a arrastrar desde la biblioteca el símbolo imagen animada 01. Solamente se vera un recuadro azul esto es porque la imagen del primer fotograma de este símbolo esta reducido el Alfa al 0 %.
   1. Colocar el recuadro azul (imagen) en coordenadas X = 0.0 y Y =0.0.

1. Seleccionar el fotograma (no la imagen).
   1. Abrir la barra de Acciones – fotograma y escribir.

stop();

1. Insertar un fotograma clave vacío (F7) en el frame # 2.
   1. En este fotograma arrastrar desde la biblioteca (Ctrl. + L) el símbolo imagen animada 02.
   2. Colocar el símbolo en coordenadas X = 0.0 y Y = 0.0.

1. Para terminar de formar la galería con las 5 imágenes insertar uno a uno fotogramas clave vacíos (F7) en el frame # 3, y en este arrastrar desde la biblioteca el símbolo imagen animada 03.
   1. Insertar luego un fotograma clave vacío (F7) en el frame # 4, y en el colocar el símbolo de nombre imagen animada 04.
   2. Finalizar la galería insertando un fotograma clave vacío (F7) en el frame # 5, y arrastrar desde la biblioteca el símbolo imagen animada 05.
   3. Al finalizar la galería se tendrá un total de 5 fotogramas, en los cuales deberá de estar insertada cada una de las imágenes animadas.

Solamente faltan dos pasos más para concluir con este trabajo de  la galería flash, aquí un ejemplo de cómo quedara la galería.

Visualizar Archivo SWF De Este Tutorial

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

Parte 1 Programación De Botones

Importar Imágenes JPEG Tercera Parte

Animación de Imágenes (Color Alfa) Cuarta parte

Diseñar un Fondo para la Galería Sexta Parte

Colocar Código ActionScript en la Escena Séptima parte

Diseñar y Programar Galería En Adobe Flash Quinta Parte is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Diseñar y Programar Galería En Adobe Flash Cuarta Parte
• Menú para un Sitio Web con Secciones Animadas (tercera parte)
• Menú para un Sitio Web con Secciones Animadas (segunda parte)

Ahora se hará la animación de cada una de las imágenes, comenzar por crear un nuevo símbolo (Ctrl. + F8).

1. 1. Colocarle al símbolo en nombre de imagen animada 01.
   2. Seleccionar el la opción Tipo Clip de película.

1. Colocado en el símbolo proceder a arrastrar desde la biblioteca (Ctrl. + L) el símbolo jpeg 01.
   1. Colocar la imagen en coordenadas X = 0.0 y Y =0.0.

1. Seleccionar la imagen (no el fotograma).
   1. En la barra de Propiedades seleccionar Color Alfa y reducirlo a 0 %.

1. Insertar un fotograma clave (F6) en el frame 5.
   1. Seleccionar nuevamente la imagen (no el fotograma) del frame 5.
   2. En la barra de Propiedades seleccionar Color Ninguno. De esta forma se hará nuevamente visible la imagen.

1. Ahora seleccionar el fotograma 5 (no la imagen).
   1. Abrir la barra de Acciones – fotograma y escribir.

stop();

1. Seleccionar un fotograma entre el 1 y el 4, en este caso fue seleccionado el fotograma # 1.
   1. En la barra de propiedades seleccionar Animar >> Movimiento.
   2. Las opciones de Aceleración y Girar son las que aparecen de forma automática (o sea 0 y Auto).
   3. Crear 4 símbolos más de Tipo Clip de película, esto con el fin de hacer 4 animaciones más una por cada símbolo de Tipo Gráfico.
   4. Nombrar a cada uno de estos nuevos símbolos imagen animada 02, imagen animada 03, imagen animada 04 e imagen animada 05.
   5. Seguir los pasos 38, 39, 40, 41 y 42 para conseguir las animaciones correspondientes a cada uno de los símbolos de Tipo Clip de película.

1. Luego se obtendrán 5 símbolos de Tipo Clip de película, por cada símbolo de Tipo Gráfico.

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

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

Parte 1 Programación De Botones

Importar Imágenes JPEG Tercera Parte

Elaboración de la galería Quinta parte

Diseñar un Fondo para la Galería Sexta Parte

Colocar Código ActionScript en la Escena Séptima parte

Diseñar y Programar Galería En Adobe Flash Cuarta Parte is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Diseñar y Programar Galería En Adobe Flash Quinta Parte
• Menú para un Sitio Web con Secciones Animadas (segunda parte)
• Diseñar y Programar Galería En Adobe Flash Segunda Parte

El tutorial que te presento esta explicado de principio a fin pasando por todo lo que implica la creación de esta galería de imágenes. En este paso te mostrare como hacer la importación de imágenes que se presentaran en la galería, para este paso ya debes de tener previamente las imágenes editadas (jpg, gif, png) de dimensiones 450.0 * 280.0 píxeles de ancho y alto, en caso de no tener imágenes pongo a tu disposición las siguientes las imágenes descargar archivo de imágenes.

1. De este punto al punto número 33, aprenderás a importar imágenes a símbolos de tipo Gráfico.
   1. Comenzar por crear un nuevo símbolo (ctrl. + F8).
   2. Colocar como nombre jpeg 01.
   3. Seleccionar en la opción Tipo Gráfico.

1. Hay dos formas para importar imágenes un símbolo la primera es.
   1. Seguir esta ruta para importar una imagen al un símbolo Archivo >> Importar >> Importar a escenario …
   2. La segunda es más ruta es mucho más rápida basta con presionar (ctrl. + R)

1. Es necesario que cuentes con una carpeta la cual contenga 5 imágenes de cualquier tipo (jpeg, gif, png, etc.). Las imágenes deben de tener como dimensiones 450.0 * 280.0 píxeles de ancho y alto. Estas dimensiones son para que encajen a la perfección en el diseño de galería que aquí se propone.
   1. Navegar hasta donde se encentren situadas las imágenes.
   2. Seleccionar la primera de las imágenes y presionar aceptar.

1. Como las imágenes cuentan con el mismo nombre y  una secuencia lógica esto es 01, 02, 03, etc.
   1. Flash interpreta que se quiere importar todas las imágenes, pero en este caso solamente se trabajara con una sola imagen.
   2. Seleccionar la opción de No para que Flash solamente importe la imagen seleccionada.

1. Una vez colocada la imagen en el símbolo jpeg 01.
   1. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

1. Insertar un nuevo símbolo (Ctrl. + F8), en el cual será importada una segunda imagen.
   1. Colocar como nombre al símbolo jpeg 02.
   2. Seleccionar el la opción Tipo Gráfico.

1. Importar la segunda imagen (Ctrl. + R), siguiendo los pasos 30, 31 y 32.
   1. Colocar la imagen de este símbolo en coordenadas X = 0.0 y Y =0.0.
   2. Crear 3 símbolos más de Tipo Grafico, nombrar a cada uno de ellos jpeg 03, jpeg 04 y jpeg 05.
   3. En cada uno de los símbolos importar (Ctrl. + R) una imagen.

1. Luego se tendrá en la biblioteca (Ctrl. + L) 5 símbolos de Tipo Mapa de bits, los cuales corresponden a cada uno de los símbolos de Tipo Gráfico.

Descarga Archivo Imágenes JPEG De Este Tutorial

Diseñar Botones Primera Parte

Programación De Botones Segunda Parte

Animación de Imágenes (Color Alfa) Cuarta parte

Elaboración de la galería Quinta parte

Diseñar un Fondo para la Galería Sexta Parte

Colocar Código ActionScript en la Escena Séptima parte

Diseñar y Programar Galería En Adobe Flash Tercera Parte is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Diseñar y Programar Galería En Adobe Flash Quinta Parte
• Diseñar y Programar Galería En Adobe Flash Séptima Parte
• Diseñar y Programar Galería En Adobe Flash Segunda Parte

Regresar a la Escena para terminar de conformar la totalidad de los botones que accionaran la galería, cambiarle el nombre a la capa por el de botones de desplazamiento.

1. 1. Arrastrar de la biblioteca el símbolo botones, colocar el símbolo en coordenadas X = 150.0 y Y = 340.0.

1. Insertar un campo de Texto dinámico que contenga el número 1.
   1. El tamaño de la fuente es 10, Tipo de fuente Arial y Color de fuente #FFFFFF.
   2. Colocar el campo de texto en coordenadas X = 270.0 y Y = 350.3.
   3. En la casilla de variable “Var:”escribir la leyenda current

1. Insertar un segundo campo de texto pero en esta ocasión deberá de ser Texto estático.
   1. Colocar el número 5 como texto, este será la totalidad de imágenes de la galería.
   2. Tipo de fuente Arial.
   3. Tamaño de fuente 10.
   4. Color de fuente #FFFFFF.
   5. El texto estará colocado en coordenadas X = 304.0 y Y = 350.3.

1. Arrastrar desde la biblioteca (Ctrl. + L) 5 veces el símbolo botón cuadro,
   1. El primer símbolo (botón cuadro) estará colocado en coordenadas X = 325.0 y Y = 348.0.
   2. El segundo colocarlo en coordenadas X = 350.0 y Y = 348.0.
   3. El tercero colocarlo en coordenadas X = 375.0 y Y = 348.0.
   4. El cuarto colocarlo en coordenadas X = 400.0 y Y = 348.0.
   5. Y el quinto símbolo colocarlo en coordenadas X = 425.0 y Y = 348.0.

1. En los dos siguientes pasos colocar el código ActionScript para cada uno de los botones. Con este código las imágenes serán visualizadas a voluntada.
   1. Seleccionar el primero de los cuadros (no seleccionar el fotograma).
   2. Abrir la barrara de Acciones – botón, luego escribir el siguiente código.

on (release) {

_root.i = 1;

tellTarget (“_root.imagenes”) {

gotoAndStop(_root.i);

}

_root.current = _root.i;

1. Seleccionar ahora el segundo botón cuadro.
   1. Abrir la barrara de Acciones – botón, luego escribir el siguiente código.

on (release) {

_root.i = 2;

tellTarget (“_root.imagenes”) {

gotoAndStop(_root.i);

}

_root.current = _root.i;

}

1. 1. Seleccionar uno a uno los 3 restantes cuadros y colocar a cada uno de ellos su correspondiente código, de tal forma que. El tercer cuadro botón tendrá como código.

on (release) {

_root.i = 3;

tellTarget (“_root.imagenes”) {

gotoAndStop(_root.i);

}

_root.current = _root.i;

}

1. 1. El cuarto cuadro botón insertar el siguiente código.

on (release) {

_root.i = 4;

tellTarget (“_root.imagenes”) {

gotoAndStop(_root.i);

}

_root.current = _root.i;

}

1. 1. Y el quinto símbolo cuadro botón tendrá como código.

on (release) {

_root.i = 5;

tellTarget (“_root.imagenes”) {

gotoAndStop(_root.i);

}

_root.current = _root.i;

}

1. Después de haber insertado a cada uno de los botones el ActionSscript correspondiente, proceder a colocar un campo de Texto estático, el tipo de fuente  a usar será Arial, tamaño de la fuente 10 y color de fuente #FFFFFF.
   1. Escribir textos por separados para cada uno de los cuadros, así entonces en el primer cuadro colocar el número 1, en el segundo cuadro colocar el número 2, en el tercero el número 3, en el cuarto en número 4 y en el quinto cuadro el número 5.
   2. Colocar cada uno de los textos en las siguientes coordenadas.
   3. El primer texto estará colocado en coordenadas X = 329.9 y Y = 350.4.
   4. El segundo texto estará colocado en coordenadas X = 354.9 y Y = 350.4.
   5. El tercer texto estará colocado en coordenadas X = 379.9 y Y = 350.4.
   6. El cuarto texto estará colocado en coordenadas X = 404.9 y Y = 350.4.
   7. El quinto texto estará colocado en coordenadas X = 429.9 y Y = 350.4.

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

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

Parte 1 Programación De Botones

Importar Imágenes JPEG Tercera Parte

Animación de Imágenes (Color Alfa) Cuarta parte

Elaboración de la galería Quinta parte

Diseñar un Fondo para la Galería Sexta Parte

Colocar Código ActionScript en la Escena Séptima parte

Diseñar y Programar Galería En Adobe Flash Segunda Parte is a post from: Tutoriales Adobe Flash

Artículos relacionados:

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

En esta parte del tutorial te enseñare como aplicarle un poco de diseño a la barra que contendrá a los botones de desplazamiento. También aprenderás a colocar los diferentes códigos ActionScript 2.0 a cada uno de los diferentes botones, deberás de tener mucho cuidado de hacer bien este paso ya que de ello dependerá el buen funcionamiento de la galería.

1. Crear un símbolo más (ctrl. + F8).
   1. Nombrarlo botones.
   2. En la opción Tipo seleccionar Clip de película.

1. De aquí al paso # 28 se diseñara y se le aplicaran las acciones de código a cada uno de los botones.
   1. Comenzar por cambarle el nombre a la capa por el de bg, luego hacer visible el mezclador de colores (shift + F9).
   2. Colocar como color de borde #000000.
   3. Colocar como color de relleno también #000000 pero con el Alfa reducido al 50%.
   4. Una vez que han sido seleccionadas las propiedades, dibujar un rectángulo de dimensiones 300.0 * 36.0 píxeles.
   5. Colocar el rectángulo dibujado en coordenadas X = 0.0 y Y = 0.0.

1. Insertar una segunda capa y cambiarle el nombre por el de símbolos.
   1. Arrastrar desde la biblioteca (Ctrl. + L) el símbolo botón derecho.
   2. Colocarlo en coordenadas X = 13.0 y Y = 1.5.

1. Seleccionar el símbolo arrastrado y luego abrir la barra de Acciones – botón, e insertar el siguiente código.

on (release) {

if (_root.i>1) {

_root.i = _root.i-1;

tellTarget (“_root.imagenes”) {

gotoAndStop(_root.i);

}

}

_root.current = _root.i;

}

1. Ahora arrastrar desde la  biblioteca (Ctrl. + L) el símbolo botón izquierdo.
   1. Colocarlo en coordenadas X = 74.0 y Y = 1.5.

1. Seleccionar el símbolo arrastrado y abrir nuevamente la barra de Acciones – botón y escribir el siguiente código.

on (release) {

if (_root.i<_root.galeria) {

_root.i = _root.i+1;

tellTarget (“_root.imagenes”) {

gotoAndStop(_root.i);

}

} else {

stop();

}

_root.current = _root.i;

}

1. Continuando con el diseño de los botones, arrastra de la biblioteca el símbolo número de imagen.
   1. Y colocarlo en coordenadas X = 117.0 y Y = 8.0.

Visualizar Archivo SWF De Este Tutorial

Parte 2 Programación De Botones

Diseñar y Programar Galería En Adobe Flash Segunda Parte is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Diseñar y Programar Galería En Adobe Flash Segunda Parte
• Diseñar y Programar Galería En Adobe Flash Séptima Parte
• Efecto de Galería Zoom con Flash 8 (segunda parte)

No es necesario volver a diseñar el botón, como se copiaron los fotogramas en el paso # 6 solamente se selecciona el fotograma de la capa.

1. 1. Hacer clic con el botón derecho del ratón.
   2. En el menú emergente seleccionar la opción de Pegar fotogramas.

1. Una vez que son pegados los fotogramas, se pegaran tanto las formas como los nombres de las capas y coordenadas contenidas en los fotogramas.
   1. Solamente se tiene que cambiar la dirección del triangulo, ya que fue copiada a la derecha.
   2. Hacer visible el panel de Transformación (ctrl. + T).
   3. Seleccionar la casilla de Girar, y luego escribir en el espacio correspondiente 180.0º.
   4. Con esta acción la punta del triangulo quedara en dirección a la izquierda.
   5. Colocar la forma del triangulo en coordenadas X = 8.6 y Y = 6.5.
   6. De esta forma se obtienen los botones que desplazaran una a una las imágenes tanto a la derecha como a la izquierda.

1. Crear un nuevo símbolo (ctrl. + F8), el cual contendrá los diferentes números que corresponderán a caca una de las imágenes de la galería.
   1. Nombrar al nuevo símbolo botón cuadro y seleccionar como Tipo Botón.

1. Sobre este símbolo botón dibujar un cuadrito (R), sin contorno (borde) y usar como color de relleno #000000.
   1. Las dimensiones del cuadrito son 20.0 * 20.0 píxeles de ancho y alto respectivamente.
   2. Colocar el cuadro dibujado en coordenadas X = 0.0 y Y = 0.0.

1. Colocar un nuevo símbolo (ctrl. + F8), nombrarlo número de imagen.
   1. Seleccionar como Tipo la opción de Gráfico.

1. Este símbolo albergara un rectángulo en el cual se indicaran el numero de imagen que esta siendo observada ej: 1-5,  ó 3-5 o sea una imagen de cinco ó tres imágenes de cinco.
   1. Primero dibujar un rectángulo sin borde y colocar como color de relleno #000000.
   2. El rectángulo tiene como dimensiones 50.0 * 20.0 píxeles.
   3. Colocar la forma del rectángulo en coordenadas X = 0.0 y Y = 0.0.

1. Luego dibujar una línea (N), el color usado es #FFFFFF, altura de trazo es 1 y estilo de trazo es sólido.
   1. El ancho de la línea es de 5.0 píxeles.
   2. Colocar la forma de la línea en coordenadas X = 22.5 y Y = 10.0.

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Parte 1 Diseñar Botones

Programación De Botones Segunda Parte

Importar Imágenes JPEG Tercera Parte

Animación de Imágenes (Color Alfa) Cuarta parte

Elaboración de la galería Quinta parte

Diseñar un Fondo para la Galería Sexta Parte

Colocar Código ActionScript en la Escena Séptima parte

Diseñar y Programar Galería En Adobe Flash Primera Parte is a post from: Tutoriales Adobe Flash

Artículos relacionados:

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

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

Diseñar y Programar Galería En Adobe Flash Primera Parte is a post from: Tutoriales Adobe Flash

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

Lo primero que tienes que hacer es crear un nuevo documento Ctrl. + N, en la casilla de General seleccionar la opción Archivo Flash (ActionScript 3.0). Si por error seleccionas la opción Archivo Flash (ActionScript 2.0) la película no puncionara, ya que el código es solo compatible con ActionScript 3.0

Paso 2

Colocar las propiedades al documento Ctrl. J. las dimensiones son 430 * 700 píxeles de ancho y alto respectivamente.

Color de fondo #FFFFFF, Velocidad de fotogramas 12 fps.

Paso 3

Insertar el primero de dos símbolo Ctrl. + F8, al símbolo colocarle el nombre de barra preloader, luego seleccionar la opción Clip de película.

Paso 4

Cuando estés ubicado en el símbolo, seleccionar la herramienta rectángulo (R) después proceder a colocar las propiedades, anular la seleccionan de color de borde usar como color de relleno #000000.

Las dimensiones son 250.0 * 15.0 píxeles de ancho y de alto, una vez que este dibujado el rectángulo colocar esta figura en coordenadas X: 0.0 Y: 0.0.

Paso 5

Crear el segundo símbolo Ctrl. F8. A este símbolo colocarle el nombre de preloader. Seleccionar la opción de Clip de película.

Paso 6

En este símbolo estará diseñado el cargador flash, Como en este símbolo se insertaran varias capas es necesario colocar a cada una de ellas un nombre especifico a la primera capa colocarle el nombre de rectángulo. Seleccionar la herramienta de rectángulo (R).

Seleccionar las propiedades del rectángulo, comenzar por suprimir el color de borde usar como color de relleno #009999.

Paso 7

Insertar otra capa y colocarle el nombre de barra cargador. Abrir el panel de la Biblioteca Crtl. + L, arrastrar el símbolo clip de película (barra preloader).

Escribir como Nombre de instancia (loader_ac3), después colocar el símbolo en coordenadas X: 0.0 Y: 0.0.

Paso 8

Hacer clic con el botón derecho del ratón sobre la capa (barra cargador).

En el menú que aparece seleccionar la opción Máscara.

Paso 9

Seleccionar nuevamente la herramienta de rectángulo, luego insertar otra capa más y colocarle el nombre de (rectángulo borde), ocultar las dos capas anteriores tal y como se muestra en la imagen.

Como el nombre de la capa lo indica en esta capa se dibujara el borde del rectángulo, primero anular el color de relleno y seleccionar el color del borde #00FFFF. Las dimensiones son 250.0 * 15.0 píxeles de ancho y de alto, luego colocar la figura en coordenadas X: 0.0 Y: 0.0.

Paso 10

Insertar la última capa colocarle el nombre de texto, seleccionar la herramienta de texto e insertar un campo de Texto dinámico y escribirle como nombre de instancia (porcentaje).

Colocar este capo de texto un poco por debajo del rectángulo coordenadas X: 9.0 Y: 23.0

Paso 11

En este paso solamente insertar un campo de Texto estático y luego escribir la palabra (cargando).

Paso 12

Regresar a la Escena colocarle a la primera capa en nombre de mc preloader, desde la biblioteca arrastrar el símbolo (preloader), colocarle como Nombre de instancia (cargador). La posición de este símbolo en la Escena será en coordenadas X: 87.5 Y: 321.1.

Paso 13

Insertar una segunda capa y colocarle a esta el nombre de código ac3. Seleccionar el fotograma insertado de esta capa después abrir el panel de Acciones – fotograma F9 e insertar el siguiente código.

stop();

addEventListener(Event.ENTER_FRAME,loaderF);

function loaderF(e:Event):void {

var toLoad:Number = loaderInfo.bytesTotal;

var loaded:Number = loaderInfo.bytesLoaded;

var total:Number = loaded/toLoad;

if (loaded == toLoad) {

removeEventListener(Event.ENTER_FRAME,loaderF);

gotoAndStop(2);

} else {

cargador.loader_ac3.scaleX=total;

cargador.porcentaje.text=Math.floor(total*100)+”%”;

}

}

Paso 14

Insertar la última capa en esta se colocara el contenido que se quiera mostrar en la web. Insertar un fotograma clave F6 en la posición 2, después importar una imagen a la Escena Ctrl. + R navegar hasta en donde este la imagen e importarla.

Esta imagen deberá de tener las mismas dimensiones que la película 430.0 px * 700 px de ancho y de alto. Las coordenadas para esta imagen son X: 0.0 Y: 0.0.

Con este paso queda concluido el tutorial well Done!. Para visualizar el cardador presionar dos veces Ctrl. + enter. Hasta el proximo tutorial.

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Programar Cargador Flash Con Código Actionscript 3.0 is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• CARGADOR FLASH ANIMADO CON MÁSCARA
• Cargador en Flash MX
• Programación De Fotogalería Con Flash CS3 ActionScript 2.0 (2da parte)

Este scroll te pude sacar de muchos apuros si lo que quieres es mostrar una información en un espacio reducido en una página Web.

Click here to view the embedded video.

Crear Un ScrollBar En Flash CS3 is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Crear una Guía de Movimiento con Flash
• Crear un Sitio Web Completo en Flash en un solo Archivo (Segunda Parte)
• Crear un Sitio Web Completo en Flash en un solo Archivo (Primera Parte)

En apariencia las galerías con imágenes tienen mucho código ActionScript, aquí se te presenta como hacer este trabajo en unos cuantos minutos.

Sin embargo tienes que tener un poco de conocimientote en flash, intenta este trabajo y no pierdas el animo si no tienes éxito con el tutorial a la primera síguelo intentando.

Click here to view the embedded video.

Galería De Imágenes En Adobe Flash CS4 is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Galería de Imágenes con Botones en Flash
• Galería de Imágenes Continuas
• Curso Básico De Flash 8 (Animación Con Imágenes Importadas) Parte 19

Las herramientas que vas a usar en este tutorial son las de lápiz o pincel (la herramienta que más domines para el dibujo).

Una vez que tengas el personaje de caricatura solo insertar unos cuantos fotogramas y en cada uno de ellos usar la herramienta de suavizar o de enderezar.

Click here to view the embedded video.

Movimiento De Contornos En Personaje De Caricatura Con Flash CS3 is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Crear una Guía de Movimiento con Flash
• Movimiento a Boca y Ojos en Flash
• Animación Profesional En Adobe Flash CS3

Como ya te mencione al principio este tutorial parte de un trabajo ya realizado, aquí las partes del tutorial anterior.

Parte uno

Parte dos

1)-. Para hacer este nuevo tutorial, comenzar por crear un nuevo símbolo (ctrl. + F8).

a)-. Colocarle como nombre al símbolo (botón estandar).

b)-. En la opción tipo seleccionar (Botón).

2)-. Ubicado en el símbolo (botón estandar), hacer un pequeño diseño de un botón de tres estados. En esta ocasión te mostrare como hacer un botón rectangular con bordes redondeados.

a)-. Hacer clic en el icono de la herramienta rectángulo.

b)-. Luego en el menú desplegado seleccionar la opción (Herramienta Rectángulo simple).

3)-. Seleccionada la herramienta. Proceder a colocarle las propiedades al rectángulo a dibujar.

a)-. El rectángulo debe de estar sin color de borde y colocar como color de relleno el color azul con efecto de relleno radial.

b)-. Las dimensiones del rectángulo son de 200.0 * 30.0 píxeles de ancho y de alto.

c)-. Colocar la forma vectorial dibujada en coordenadas X: 0.0 Y: 0.0.

d)-. Para terminar con las propiedades del rectángulo colocar el número 10 en la casilla de (Radio de la esquina del rectángulo).

4)-. Insertar en la posición sobre de la línea de tiempo un fotograma clave (F6).

a)-. A este rectángulo cambiarle el color de relleno por el color rojo con efecto radal.

b)-. Posteriormente colocar el número 0 en la casilla de (Radio de la esquina del rectángulo).

5)-. Insertar un tercer fotograma clave (F6) en la posición (Presionado).

a)-. Cambiar el color de relleno al rectángulo por el de verde con efecto radial.

b)-. Luego colocar nuevamente el número 10 en la casilla de (Radio de la esquina del rectángulo).

Con esto queda establecido un pequeño diseño de un botón de tres estados con bordes redondeados

6)-. Ahora comenzar a colocar las líneas de código ActionScript 2.0, primero regresar a la Escena en donde esta la animación, si no has hecho la animación aquí puedes (descargar el archivo fla) del trabajo anterior.

a)-. Colocado en la Escena seleccionar la capa de nombre (vaso), y hacer clic sobre el fotograma # 1.

b)-. Luego abrir el panel de (Acciones – fotograma) y escribir.

stop();

7)-. Ubicado en la misma capa (vaso), abrir el panel la Biblioteca (ctrl. + L).

a)-. Arrastrar desde la biblioteca el símbolo (botón estandar), hacia la Escena.

b)-. Colocar este símbolo en coordenadas X: 23.0 Y: 340.0.

8)-. En este paso seleccionar la forma vectorial no el fotograma.

a)-. Abrir el panel (Acciones- botón) y escribir.

on (release) {

play();

}

9)-. Arrastrar nuevamente desde la biblioteca (ctrl. + L) el símbolo (botón estandar).

a)-. Colocar el símbolo en coordenadas X: 330.0 Y: 340.0.

10)-. Seleccionar este nuevo símbolo no el fotograma.

a)-. En el panel de (Acciones – botón) escribir el código.

on (release) {

stop();

}

11)-. Para concluir con estas pequeñas modificaciones solo falta insertar dos textos en el rectángulo de la izquierda  escribir un (PLAY) y en el rectángulo de la derecha escribir (STOP).

Con este paso se da por concluido el trabajo. Well done!

Nota: si se llega a presentar un error en la animación es debido a que no tienes configurado la versión de ActionScript 2.0. Para solucionar este pequeño inconveniente.

a)-. Hacer visible el panel de (Configuración de publicación Ctrl. + J).

b)-. Luego dar clic en a casilla de (Versión de ActionScript).

c)-. Después simplemente seleccionar la opción de (ActionSctipt 2.0) y aceptar los cambios de la configuración.

P.D. presionar ctrl. + Enter para visualizar el trabajo. Como te puedes dar cuanta la animación no comienza avanzar hasta que das clic en el botón de PLAY y puedes parar la animación si das clic en el botón de STOP. Se agradecen de antemano los comentarios que en este tutorial se puedan exponer y así todos aprender. Gracias por visitar esta Web y hasta pronto

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Efecto Llenar Un Vaso Con Agua Y Botones De Play Y Stop is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Animación Llenar Con Agua Un Vaso En Flash CS3
• Animación Llenar Con Agua Un Vaso En Flash CS3 segunda parte
• Crear Botones Con Efecto De Color Degradado En Flash CS3

1)-. El primer paso es crear las propiedades para el documento en el cual se va a trabajar. En este caso las dimensiones son 225 px * 225 px de ancho y de alto.

a)-. Usar como color de fondo

b)-. Colocar como velocidad de fotogramas 45 fps.

2)-. Una ves colocadas y aceptadas las propiedades del documento, proceder a importar una imagen redonda (balón de futbol).

a)-. Para importar la imagen (ctrl. + R), segur la ruta hasta en donde tengas ubicada la imagen.

3)-. Este trabajo consta de dos capas a la primera de ellas se le colocara el nombre de (animación).

a)-. Una ves que se importo la imagen esta se colocara automáticamente, en el primer fotograma de esta capa.

b)-. La imagen tiene por medidas 200.0 píxeles * 200.0 píxeles de ancho y de alto.

c)-. Colocar la imagen en coordenadas X: 12.5 Y: 12.5.

d)-. Recuerda que toda la animación era llevada a cabo en la Escena.

4)-. Insertar un fotograma clave (F6)en la posición número 45.

a)-. De esta forma la imagen será colocada en las coordenadas X: 12.5 Y: 12.5.

5)-. En este paso crear la animación de movimiento, este paso es muy fácil de hacer.

a)-. Seleccionar un fotograma entere el 1 y el 44, yo opte por seleccionar el fotograma número 5.

b)-. En el panel de propiedades seleccionar la opción Animar: Movimiento.

c)-. Luego en la opción de Girar seleccionar Horario.

6)-. Seleccionar la herramienta de Óvalo (O). Luego insertar una segunda capa y colocarle como nombre máscara.

a)-. Dibujar un óvalo con las siguientes propiedades en esta ocasión prescindir del color de borde, usar como color de relleno #0000FF.

b)-. Las dimensiones son 200.0 píxeles * 200.0 píxeles de ancho y de alto respectivamente.

c)-. Colocar esta forma vectorial en coordenadas X: 12.5 Y: 12.5.

7)-. Hacer clic sobre la capa máscara con el botón derecho del ratón.

a)-. En el menú desplegado seleccionar la opción de Máscara.

8)-. En esta imagen te muestro como es que queda la línea de tiempo en las dos capas.

Con este paso queda concluido el tutorial. Como te puedes haber dado cuenta el trabajo es súper sencillo de practicar. Si tienes alguna duda o comentario no dudes en dejar tu comentario este será respondido a la brevedad posible. Well Done!

P.D. presionar ctrl. + enter y visualizar como trabaja la animación. Hasta pronto.
Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Movimiento De Un Balón D Futbol En Flash CS3 is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Movimiento De Contornos En Personaje De Caricatura Con Flash CS3
• Video Tutorial Flash Cs3 Transición De Movimiento Y Color
• Cielo En Movimiento Con Flash MX

1)-. El primer paso es colocar las propiedades del documento en al cual se va a trabajar. En esta ocasión se trabajara sobe un documento dimensiones 120 * 80 píxeles de ancho y alto.

a)-. Colocar como color de fondo para esta película #00FFFF.

b)-. La velocidad de fotogramas será de 12 fps.

2)-. Luego de crear las dimensiones, insertar el único símbolo (ctrl. + F8) de que consta la película.

a)-. Colocar como nombre a este símbolo (botón).

b)-. Seleccionar la opción de (Botón).

3)-. Una vez creado el símbolo botón, abrir el panel de (Color Shift + F9)

a)-. En este panel anular el color de borde, y seleccionar en la opción (Tipo Lineal), y luego seleccionar el color de relleno.

b)-. Los colores que se usaran en el color degradado son #FFFFFF en el lado izquierdo y #000000 en el lado derecho.

c)-. Cuando estén establecidos los colores para el degradado reducir el color alfa al 50%. Reducir el color alfa en los dos clores #FFFFFF y #000000.

4)-. Así con el paso anterior quedara establecido el color degradado lineal y cuando se dibuje alguna forma vectorial automáticamente será rellenada con este color.

a)-. Seleccionar la herramienta de rectángulo (R), dibujar esta forma vectorial con dimensiones de 100.0 * 25.0 píxeles de ancho y de alto.

b)-. Colocar este diseño en coordenadas X: 0.0 Y: 0.0.

5)-. Insertar un fotograma clave (F6) en la posición (Sobre).

a)-. Seleccionar la herramienta (Trasformación de degradado “F”).

b)-. Seleccionar el círculo que aparece en la posición superior derecha del rectángulo.

6)-. Girar manualmente esta posición hasta que el círculo quede en la parte inferior izquierda del rectángulo. Así cuando se publicado el botón y se coloque el cursor sobe el cambiara la posición del degradado.

7)-. Regresar a la Escena, posteriormente hacer visible el panel de la Biblioteca (ctrl.+L).

a)-. Arrastrar el símbolo (botón) que esta en la biblioteca hacia la Escena.

b)-. Colocar este símbolo en coordenadas X: 10.0 Y: 10.0.

8)-. Arrastrar una vez más el símbolo botón desde la biblioteca.

a)-. Colocar este símbolo en coordenadas X: 10.0 Y: 45.0.

9)-. Por último agregar un texto estático a casa uno de los botones (Botón 01, Botón 02).

Con este paso queda finalizado el tutorial de hoy, como te podrás observar los pasos a seguir son muy fáciles de aprender. Well Done!

P.D. presionar ctrl. + enter y visualizar el trabajo realizado, si tienes alguna duda o sugerencia no dudes en dejar tu comentario y este será atendido a la menor brevedad posible. Hasta muy pronto.

Descarga Archivo FLA CS3 De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Botón Efecto Degradado En Flash CS3 is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Crear Botones Con Efecto De Color Degradado En Flash CS3
• Curso Básico De Flash 8 (Símbolos De Tipo Botón) Parte 17
• Botón Básico En Flash CS3

En la FOTB 2009! la gente de CS5.org presento el siguiente vídeo:

Aparte de RIA, y obviamente con el impulso de las ActionScript 3, tal como comentan en LadoGeek el desarrollo para móviles es prioridad, sobre todo el IPhone de Apple, e incluso los IPods.

Enlaces:

• CS5.org
• Adobe Labs Flash CS5
• Adobe Flash CS5 beta

Adobe Flash CS5 is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Galería De Imágenes En Adobe Flash CS4
• Tutorial Adobe Flash CS3 Cronometro Cinematográfico Segunda Parte
• Programar Y Diseñar Un Cronometro En Adobe Flash CS3

8)-. En la imagen que se muestra es como deben de quedar la dos capa una vez que se ha insertado la máscara.

9)-. Para hacer la animación de la capa (óvalo) basa con seleccionar un fotograma (entre el # 1 y el #  34).

a)-. Luego en el (Panel de Propiedades), en la opción (Animar)  seleccionar (Forma).

10)-. Regresar a la (Escena), y cambiarle el nombre a la capa por el de (animación 1).

a)-. Hacer visible el panel de (Biblioteca ctrl. + L), arrastrar desde este panel el símbolo (animación óvalo) asía la (Escena).

b)-. Colocar este símbolo en coordenadas X: 0.0 Y: 0.0.

11)-. Insertar un fotograma (F5) en la posición (# 35) de esta capa.

12)-. Insertar una nueva capa y cambiarle el nombre por el de (animación 2).

a)-. Insertar un fotograma clave vacío (F7) en la posición (# 10) de esta nueva capa.

b)-. Arrastrar nuevamente el símbolo desde la biblioteca, y colocarlo en el fotograma # 10.

c)-. Colocar este símbolo en coordenadas X: 0.0 Y: 0.0.

13)-. Insertar 3 capas más (animación 3, animación 4 y animación 5).

a)-. Repetir el  paso 11, solo que ahora los fotogramas clave vacíos estarán en las posiciones # 15, # 20 y # 25 respectivamente.

b)-. A continuación se te muestra la imagen de cómo queda la línea de tiempo un ves que se insertaron las cinco capas con su respectiva animación cada una de ellas.

14)-. Para finalizar con el tutorial solamente hay que insertar una capa más, cambiarle el nombre por el de (ActionScript).

a)-. Insertar un fotograma clave vacío (F7) en la posición (# 35) de esta capa.

b)-. Seleccionar el fotograma insertado, abrir el panel de (Acciones – fotograma).

c)-. Luego escribir esta línea de código ActionScript.

stop();

Con este paso doy por concluido el tutorial, espero que no tengas muchas complicaciones para hacer este trabajo. Como te puedes dar cuanta la animación que se aplica es muy fácil de hacer. Well done!

P.D. presionar ctrl. + Enter y ver como es que queda la película, yo realice una pequeña modificación a cada uno de los óvalos a ver que te párese. Si tienes alguna duda no dudes en hacérmelo saber a través de tus comentarios. Hasta pronto nos vemos en el próximo tutorialJ.

Primera Parte Del Tutorial

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Efecto De Animación El Túnel Del Tiemo Con Flash CS3 (parte 2) is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Efecto De Animación El Túnel Del Tiemo Con Flash CS3 (parte 1)
• Efecto de Cebolla (onion) para una Animación Flash
• Efecto de Menú Girando en 3d con Flash 8

Tutorial Adobe Flash CS3 Efecto De Animación El Túnel Del Tiempo

1)-. Comenzar por colocar las propiedades al nuestra película (ctrl. + J).

a)-. Las dimensiones de tamaño para este trabajo son de 300 px * 300 px de ancho y de alto respectivamente.

b)-. Usar como color de fondo #000000.

c)-. Alterar la velocidad de fotogramas a 25 fps.

2)-. Insertar el único símbolo (ctrl. + J) con el que cuenta esta película.

a)-. Nombrar a este símbolo (animación óvalo).

b)-. Seleccionar el la opción Tipo Clip de película.

3)-. Una ves que estes ubicado en el clip de película, cambiarle el nombre a la capa (rectángulo).

a)-. Posteriormente seleccionar la herramienta de Rectángulo.

b)-. Antes de dibujar la forma vectorial seleccionada, colocarle las propiedades, esta forma carece de (Color de trazo “borde”) colocar como color de relleno #FFFFFF.

c)-. Una ves que quedaron establecidas las propiedades dibujar la forma vectorial con medidas 300.0 px * 300.0 px de ancho y alto.

d)-. Colocar esta forma en coordenadas X: 0.0 Y: 0.0.

4)-. Insertar una segunda capa y cambiarle el nombre por el de (óvalo). Esta capa nos servirá posteriormente como una máscara con una animación de forma.

a)-. Seleccionar la herramienta de (Óvalo simple), co colocar le a esta forma vectorial borde, seleccionar como color de relleno el color #FFFFFF (yo use otro color de relleno pero solo para fines prácticos).

b)-. Escribirle como número de Radio Interior 90, seleccionar la casilla (Cerrar trazo).

c)-. Las dimensiones de este óvalo son 450.0 px * 450.0 px de ancho y de alto.

d)-. Colocar esta forma vectorial, en coordenadas X: -75.0 Y: -75.0.

5)-. A partir de este paso se dará comienzo con la (animación).

a)-. Comenzar por insertar un fotograma clave (F6) en la posición (# 35) de la capa (óvalo).

b)-. Reducir el símbolo (óvalo) a dimensiones de 1.0 px * 1.0 px de ancho y de alto, para hacer este procedimiento lo más recomendable es que vayas disminuyendo poco a poco el tamaño del óvalo y al mismo tiempo ir aumentando de tamaño la escena (zoom 2000 %).

c)-. Una ves que tienes reducido el símbolo colocar este en coordenadas X: 149.5 Y: 149.5, estas coordenadas es el centro de la escena.

6)-. Luego insertar un fotograma (F5) también en la posición (# 35), pero ahora en la capa (rectángulo).

7)-. Proceder a convertir la capa normal, en una capa de tipo (máscara).

a)-. Seleccionar la capa (óvalo), luego hacer clic con el botón derecho del ratón.

b)-. En el menú desplegado seleccionar la opción de Máscara.

Segunda Parte Del Tutorial

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Efecto De Animación El Túnel Del Tiemo Con Flash CS3 (parte 1) is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Efecto De Animación El Túnel Del Tiemo Con Flash CS3 (parte 2)
• Efecto de Cebolla (onion) para una Animación Flash
• Animación 3D de un Ovalo con Flash 8

a)-. Arrastrar desde el panel de biblioteca el símbolo botón invisible. Este botón tiene un aspecto de color azul cuando es insertado en la Escena.

b)-. Colocar este símbolo en coordenadas X: 0.0 Y: 0.0.

13)-. Seleccionar el símbolo insertado (no fotograma), abrir el panel Acciones – botón.

a)-. Escribir el siguiente código ActionScript.

on (rollOver) {

_root.mouse_over_imag1 = true;

}

on (rollOut) {

_root.mouse_over_imag1 = fstartlse;

}

on (press) {

gotoAndStop(2);

}

14)-. Sobre la misma capa botones, insertar una vez más el símbolo botón invisible.

a)-. Este nuevo botón colocarlo en coordenadas X: 0.0 Y: 160.0.

15)-. Seleccionar el botón insertado, abrir el panel de Acciones- botón.

a)-. Escribir el siguiente código ActionScript.

on (rollOver) {

_root.mouse_over_imag2 = true;

}

on (rollOut) {

_root.mouse_over_imag2 = fstartlse;

}

on (press){

gotoAndStop(3)

}

16)-. No te desesperes jaja, estas apunto de concluir con este sensacional tutorial. Insertar una capa nueva y colocarle como nombre imags full.

a)-. Seleccionar el fotograma que es insertado en esta capa, abrir el panel de Acciones- fotograma. Aquí escribir un línea de código ActionScript.

stop();

17)-. Si te mantienes ubicado en el frame # 1, solo tienes que presionar (F7) para insertar un fotograma cave vacío y al mismo tiempo en las capas anteriores se insertan  de forma automática fotogramas, así te ahorraras unos cuantos pasos.

18)-. Arrastrar desde el panel de biblioteca la imagen pic_01 de dimensiones 220.0 * 320.0 píxeles (recuerda que son dos imágenes iguales una pequeña y la otra de mayor tamaño). En este caso yo nombre a una de la s series de imágenes pic_01 tamaño grande, pic_1 tamaño menor, a la segunda serie de imágenes pic_02 tamaño grande, pic_2 tamaño menor.

a)-. Colocar la imagen en coordenadas X: 0.0 Y: 220.0.

19)-. Insertar un nuevo fotograma clave vacío (F7), en este fotograma colocar la segunda de las imágenes de tamaño grande pic_02.

a)-. Colocar estas segunda imagen en coordenadas X: 0.0 Y: 220.0.

20)-. Insertar la ultima de las capas colocarle como nombre a esta capa código.

a)-. Seleccionar el fotograma que es insertado en esta capa, abrir el panel de Acciones- fotograma. Aquí escribir el siguiente código ActionScript.

_root.imag1.onEnterFrame = function() {

if (mouse_over_imag1) {

_root.imag1.nextFrame();

} else {

_root.imag1.prevFrame();

}

};

_root.imag2.onEnterFrame = function() {

if (mouse_over_imag2) {

_root.imag2.nextFrame();

} else {

_root.imag2.prevFrame();

}

};

Con este paso se puede dar por concluido el tutorial puedes visualizar tu película ctrl. + enter, sin embargo, le e agregado una capa más y en esta capa inserte un rectángulo con el fin de rellenar un espacio que se miraba muy solo jaja.

21)-. Recuerda que esto es solo una sugerencia, insertar una sexta capa, seleccionar la herramienta de rectángulo (R).

a)-. Colocar como color de borde #000000 y tamaño de borde 2 tal y como se muestra en la imagen.

b)-. Usar como color de relleno #FF00FF reducido el color alfa al 10 %.

c)-. Las dimensiones del rectángulo son 220.0 * 320.0 pixeles de ancho y alto.

d)-. Colocar esta forma vectorial en coordenadas X: 220.0 Y: 0.0.

e)-. En lo particular me gusta hacer bordes redondeados en esta ocasión coloque un borde redondo de 10.

22)-. Como te puedes dar cuenta se agregan 3 fotogramas en automático, solo vasta con seleccionar el fotograma #2 y #3 presionar la secuencia de teclas shift + F5, de esta forma estarás eliminando los fotogramas que están de más.

23)-. En la siguiente imagen se visualiza como es que debe de quedar la línea de tiempo.

Ahora si queda concluido el tutorial. Well done!

P.D. presionar ctrl. + Enter y ver como es que queda la película con esta pequeña modificación. Espero que no tengas muchas complicaciones con los nombre s de las imágenes y si tienes alguna duda no dudes en hacérmelo saber através de tus comentarios. Hasta pronto nos vemos en el próximo tutorial

Primera Parte Del Tutorial

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Programación De Fotogalería Con Flash CS3 ActionScript 2.0 (2da parte) is a post from: Tutoriales Adobe Flash

Artículos relacionados:

• Programación De Fotogalería Con Flash Cs3 ActionScript 2.0 (1er parte)
• Programar Cargador Flash Con Código Actionscript 3.0
• Programación de Disparos para Juego Flash