Tutoriales Adobe Flash » Animación

Botones Animados Para Menú Flash CS4 Parte 3

jmx — Fri, 25 Feb 2011 03:01:03 +0000

Tercera y última parte del tutorial.

Paso 26

Seguir los posos del 11 al 25, con el fin de hacer 2 botones más y así tener un menú de tres botones botón noticias, botón deportes y botón videos. Los pasos para cada uno de estos botones son exactamente los mismos que para el primer botón.

Paso 27

Una vez que tengas los tres botones, regresar a la Escena. Arrastrar desde la Biblioteca uno a uno los símbolos botón noticias, botón deportes y botón videos.

Paso 28

Seleccionar el botón de noticias, abrir el panel de Propiedades escribir como Nombre de instancia btn_noticias.

Colocar este botón en coordenadas X: 5.0 Y: 5.0.

Paso 29

Seleccionar el botón de deportes, abrir el panel de Propiedades escribir como Nombre de instancia btn_deportes.

Colocar este botón en coordenadas X: 160.0 Y: 5.0.

Paso 30

Seleccionar el botón de videos, abrir el panel de Propiedades escribir como Nombre de instancia btn_videos.

Colocar este botón en coordenadas X: 315.0 Y: 5.0.

Paso 31

Insertar una segunda capa en la Escena, seleccionar el fotograma de esta capa luego abrir el panel de ACCIONES – FOTOGRAMA y escribir el siguiente código ActionScript.

stage.frameRate=30;

var buttonsArray:Array=[btn_noticias,btn_deportes,btn_videos];

function setButtons():void {

for (var i:int=0; i

buttonsArray[i].id=i;

buttonsArray[i].buttonMode=true;

buttonsArray[i].mouseChildren=false;

buttonsArray[i].mouseEnabled=true;

buttonsArray[i].addEventListener(MouseEvent.ROLL_OVER,playOver);

buttonsArray[i].addEventListener(MouseEvent.ROLL_OUT,playOut);

buttonsArray[i].addEventListener(MouseEvent.CLICK,doClick);

}

function playOver(event:MouseEvent):void {

event.currentTarget.gotoAndPlay(“over”);

}

function playOut(event:MouseEvent):void {

event.currentTarget.gotoAndPlay(“out”);

}

function doClick(event:MouseEvent):void {

var currentBtn:int=event.currentTarget.id;

setSelectedBtn(currentBtn);

}

function setSelectedBtn(id:int):void {

for (var i:int=0; i< buttonsArray.length; i++) {

if (id==i) {

buttonsArray[i].gotoAndStop(“down”);

buttonsArray[i].buttonMode=false;

buttonsArray[i].mouseEnabled=false;

buttonsArray[i].removeEventListener(MouseEvent.ROLL_OVER,playOver);

buttonsArray[i].removeEventListener(MouseEvent.ROLL_OUT,playOut);

buttonsArray[i].removeEventListener(MouseEvent.CLICK,doClick);

} else {

if (buttonsArray[i].currentLabel==”down”) {

buttonsArray[i].gotoAndPlay(“out”);

}

buttonsArray[i].buttonMode=true;

buttonsArray[i].mouseEnabled=true;

buttonsArray[i].addEventListener(MouseEvent.ROLL_OVER,playOver);

buttonsArray[i].addEventListener(MouseEvent.ROLL_OUT,playOut);

buttonsArray[i].addEventListener(MouseEvent.CLICK,doClick);

}

setButtons();

con este paso queda concluido el tutorial espero que no tengas ningún contratiempo para hacer este trabajo. Well done!

Presionar Ctrl. + enter y ver cómo funciona el menú. Si tienes alguna duda o sugerencia no dudes en dejar tu comentario este será atendido a la menor brevedad posible. Hasta la próxima.

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Diseñar y Programar Menú con Botones Tres Estados Primera Parte

Diseñar y Programar Menú con Botones Tres Estados Segunda Parte

Botones Animados Para Menú Flash CS4 Parte 3 is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Botones Animados Para Menú Flash CS4 Parte 3 | Tutoriales Adobe Flash

Botones Animados Para Menú Flash CS4 Parte 2

jmx — Sun, 20 Feb 2011 03:01:45 +0000

Parte dos del tutorial, con el paso anterior quedan construidos todos los símbolos necesarios para crear el primer botón que conformara el menú flash.

Paso 11

Para construir el primer botón solamente tienes que arrastrar uno a uno los símbolos creados con anterioridad hacia este nuevo símbolo. Este símbolo tendrá varias capas por esta razón es necesario identificar a cada una de las capas con un nombre especifico Cuando te encuentres ubicado en el símbolo botón noticias, Primero cambiarle el nombre a la primea capa bg.

Abrir el panel de Biblioteca Ctrl. + L, arrastrar el símbolo fondo. Colocarlo en coordenadas X: 0.0 Y: 0.0.

Paso 12

En este paso insertar otra capa y cambiare el nombre a bg animado.

Arrastrar desde la biblioteca Ctrl. + L el símbolo fondo animado. Colocar este símbolo justo al centro del símbolo anterior.

Paso 13

Como el nombre de la capa lo indica con este símbolo insertado tendrás que hacer una animación de disminución de color alfa.

Seleccionar el símbolo insertado luego abrir el panel de Propiedades. El símbolo tuvo que ser colocado en coordenadas X: 0.0 Y: 5.0, esto con el fin de que quede justo en el centro del símbolo bg.

Para seleccionar el estilo de color abrir COLOR EFFECT, después seleccionar Estilo luego la opción Alfa. Observar la imagen para que no tengas mayores complicaciones para segur este paso.

Paso 14

Este paso es muy fácil simplemente tienes que seleccionar el frame número 2 y luego insertar un fotograma clave F6.

Paso 15

Aumentar nuevamente al color alfa al símbolo. Insertar un fotograma clave F6 en la posición número 10.

En el panel de Propiedades seleccionar la opción COLOR EFFECT luego Estilo y después la opción None.

Paso 16

Crear la animación, seleccionar un fotograma clave entre el número 2 y el número 11.

Ahora hacer clic en la opción Insert >> Classic Tween. Con este paso se insertara la animación que aumentara gradualmente el color alfa de 0 % a 100%.

Paso 17

En estos pasos hacer la segunda parte de la animación.

Primero insertar dos fotogramas clave F6 uno en la posición número 11 y el otro en la posición número 12.

Paso 18

En este paso reducir nuevamente el color alfa a 0%. Insertar un fotograma clave F6 en la posición número 20.

En el panel de Propiedades seleccionar la opción COLOR EFFECT luego Estilo y después en la opción etilo reducir al color Alfa a 0%.

Paso 19

Crear la segunda animación, seleccionar un fotograma clave entre el número 12 y el número 19.

Ahora hacer clic en la opción Insert >> Classic Tween. Con este paso se insertara la animación que reducirá gradualmente el color alfa de 100 % a 0%.

Paso 20

Insertar un fotograma F5 en la posición número 20 en la capa bg.

Después insertar una tercera capa y cambiarle el nombre a texto.

Arrastrar desde la Biblioteca del símbolo texto noticias, colocar este símbolo justo al centro del rectángulo, tal y como se muestra en la imagen.

Paso 21

En los pasos siguientes te mostrare como insertar el código ActionScript que controlara los movimientos de la animación y del botón.

Insertar una cuarta capa y cambiarle el nombre a etiquetas.

Insertar un fotograma F6 en la posición número 2.

En el panel de propiedades escribir como nombre de etiqueta over, seleccionar como tipo de etiqueta Name.

Paso 22

Insertar un fotograma clave F6 en la posición número 11, en el panel de Propiedades escribir la palabra down como nombre de etiqueta.

Paso 23

Insertar un fotograma clave F6 más en la posición número 12, y escribir como nombre de etiqueta out.

Paso 24

Insertar la última capa y colocarle como nombre de actionscript, seleccionar el fotograma y luego abrir el panel de ACCIONES – FOTOGRAMA y escribir

stop();

Paso 25

Insertar un fotograma clave F6 en la posición número 10.

Seleccionar este fotograma y luego abrir el panel de ACCIONES – FOTOGRAMA y escribir.

stop();

Con este paso se obtendrá el primero de los botones de que está formado el menú.

Visualizar Archivo SWF De Este Tutorial

Diseñar y Programar Menú con Botones Tres Estados Primera Parte

Diseñar y Programar Menú con Botones Tres Estados Tercera Parte

Botones Animados Para Menú Flash CS4 Parte 2 is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Botones Animados Para Menú Flash CS4 Parte 2 | Tutoriales Adobe Flash

Animación Pulso de Corazón con Flash CS4 ActionScript 3.0

jmx — Thu, 23 Dec 2010 19:00:37 +0000

Hola aquí con un nuevo Tutorial Adobe Flash CS4. Programar Latido De Corazón Con Código Actionscript 3.0 En Flash CS4. En el siguiente tutorial aprenderás hacer una animación que simula los latidos de un corazón El Corazón Delator. Hacer esta animación no tiene nada de complicado, solo basta con hacer un símbolo de tipo Clip de película e insertar en él una imagen con formato tipo gif, jpg o png.

Antes de empezar a trabajar con Adobe Flash CS4 es necesario tener la imagen del corazón con las siguientes dimensiones 176.3 * 161.3 píxeles de ancho y de alto.

En este tutorial también te enseñare los pasos necesarios para que logres importar una imagen a un símbolo, el tutorial esta desarrollado en la versión de inglés de Adobe Flash CS4. La mejor forma de aprender es haciendo el tutorial ¿COMENZAMOS? Good Luck!

Paso 1

El primer paso es crear el documento flash en el cual se va a trabajar (Ctrl. + N).

Seleccionar la opción Flash File (ActionScript 3.0), luego aceptar las propiedades del documento.

Paso 2

Una vez que se tiene el documento, proceder a colocarle las propiedades (Ctrl. + J).

Las dimensiones son 550 * 400 píxeles de ancho y alto.

Usar como color de fondo #FFFFFF.

Disminuir la velocidad de fotogramas a 10 fps.

Paso 3

Crear el único símbolo que estará presente en la animación (Ctrl. + F8).

Nombrar a este símbolo heart, y seleccionar como tipo Movie Clip.

Presionar la casilla Advanced y de esta forma se desplegaran más propiedades del símbolo, ahora la casilla cambiara el nombre a Basic.

Seleccionar la opción Export for ActionScrippt.

En la opción Class: colocar el nombre de heart_red.

Estas serán las propiedades del símbolo Movie Clip.

Nota: Este paso es de suma importancia ya que esto depende que la animación tenga éxito.

Paso4

Colocado en el símbolo heart importar una imagen en forma de corazón de formato jpg, gif o png, si seseas puedes también poner en práctica tus habilidades como dibujante y dibujar un corazón.

Para importar una imagen seguir esta secuencia File >> Import >> Import to Stage… o simple mente (Ctrl. + R).

Paso 5

Navegar hasta la carpeta en donde este contenida la imagen.

Luego seleccionar la imagen y presionar Aceptar, con estos sesillos pasos tendrás la imagen insertada en el símbolo.

Paso 6

Abrir el panel de PROPERTIES (Ctrl. + F3). La imagen con la que se va a trabajar tendrá de dimensiones 176.3 * 161.3 píxeles de ancho y de alto.

Colocar la imagen en coordenadas X: 30.0 Y: 0.0.

Paso 7

Para concluir con el tutorial regresar a la Escena y luego abrir el panel de TIMELINE (línea de tiempo), seleccionar el frame y abrir el panel de ACTIONS – FRAME (acciones – fotograma). En este panel escribir el siguiente código ActionScript.

var angle:Number=0;

var heartpulsateScale:Number=2.5;

var range:Number=.15;

var speed:Number=1;

var heartpulsate:heart_red = new heart_red();

addChild(heartpulsate);

stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

function enterFrameHandler(event:Event):void {

heartpulsate.scaleX=heartpulsate.scaleY=heartpulsateScale+Math.sin(angle)*range;

angle+=speed;

}

Con este paso queda concluida la explicación de este tutorial, como te habrás dado cuenta no es necesario arrastrar ningún símbolo hacia la Escena. Well Done!.

Para ver como es que quera la animación presionar Ctrl. + Enter. Si tienes alguna duda o sugerencia solo hazla saber por medio de un comentario. Hasta el próximo tutorial.

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Animación Pulso de Corazón con Flash CS4 ActionScript 3.0 is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Animación Pulso de Corazón con Flash CS4 ActionScript 3.0 | Tutoriales Adobe Flash

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

jmx — Wed, 07 Jul 2010 18:58:14 +0000

Sexta parte diseñar un fondo para la galería

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. 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.

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.

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.

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.

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.

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

Búsquedas:

Artículos relacionados:

Diseñar y Programar Galería En Adobe Flash Sexta Parte | Tutoriales Adobe Flash

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

jmx — Tue, 06 Jul 2010 19:08:40 +0000

Elaboración de la galería Quinta 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. Crear un nuevo símbolo (ctrl. + F8), nombrarlo imágenes animadas.
2. Seleccionar en la opción Tipo Clip de película.

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.

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

stop();

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.

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

Búsquedas:

Artículos relacionados:

Diseñar y Programar Galería En Adobe Flash Quinta Parte | Tutoriales Adobe Flash

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

jmx — Mon, 05 Jul 2010 20:11:39 +0000

Cuarta parte animación de imágenes (Color Alfa)

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

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

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.

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

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.

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

stop();

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.

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

Búsquedas:

Artículos relacionados:

Diseñar y Programar Galería En Adobe Flash Cuarta Parte | Tutoriales Adobe Flash

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

jmx — Fri, 25 Jun 2010 03:01:17 +0000

Diseñar Botones Parte 2

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. Hacer clic con el botón derecho del ratón.
2. En el menú emergente seleccionar la opción de Pegar fotogramas.

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.

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.

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.

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

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.

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

Búsquedas:

Artículos relacionados:

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

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

jmx — Thu, 24 Jun 2010 03:01:33 +0000

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.

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).

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.

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.

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.

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.

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).

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

Búsquedas:

Artículos relacionados:

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

Programar Cargador Flash Con Código Actionscript 3.0

jmx — Wed, 02 Jun 2010 16:08:34 +0000

Tutorial Adobe Flash CS3. Programar Cargador Flash Con Código Actionscript 3.0 En Flash CS3. Con frecuencia es necesario programar y diseñar una animación que este visible antes de que sea cargado en su totalidad el contenido de una página web. En el siguiente tutorial aprenderás a programar una cargador con código ActioonScript 3.0, este tutorial lo puedes hacer en adobe flash CS3 y adobe flash cs4. Este cargador en lo particular solamente tiene la animación de una barra que aumenta de tamaño conforme se está cargando el contenido, el cargador también tiene un campo de texto dinámico que aumenta el porcentaje de 1% al 100% que es cuando el contenido está cargado en su totalidad. La mejor forma de aprender es haciendo el tutorial ¿COMENZAMOS? Good Luck!
Paso 1

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

Búsquedas:

Artículos relacionados:

Programar Cargador Flash Con Código Actionscript 3.0 | Tutoriales Adobe Flash

Crear Un ScrollBar En Flash CS3

jmx — Tue, 19 Jan 2010 03:01:32 +0000

Aquí te presento un video que te enseña como crear un ScrollBar en unos cuantos pasos. El tutorial esta hecho en adobe flash cs3, y las herramientas que debes de conocer son las básicas en otras palabras el trabajo es muy fácil de prender.

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

Búsquedas:

Artículos relacionados:

Crear Un ScrollBar En Flash CS3 | Tutoriales Adobe Flash

Movimiento De Contornos En Personaje De Caricatura Con Flash CS3

jmx — Sun, 17 Jan 2010 03:01:37 +0000

En este video tutorial flash cs3, aprenderás a elaborar una animación de un personaje de caricatura. El video tutorial también te muestra como dibujar en flash (este dibujo esta muy bien explicado y detallado).

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

Búsquedas:

Artículos relacionados:

Movimiento De Contornos En Personaje De Caricatura Con Flash CS3 | Tutoriales Adobe Flash

Efecto Llenar Un Vaso Con Agua Y Botones De Play Y Stop

jmx — Fri, 27 Nov 2009 19:31:33 +0000

Tutorial Adobe Flash CS3. Animación Llenar Con Aguan Un Vaso Con Botones De Cerrar Y Abrir El Grifo. En esta ocasión te expondré una tercera parte del tutorial animación llenar con agua un vaso, esta idea surgió de Karen González Madrid ella me autorizo a que hiciera y publicara este tutorial. Aquí explico como hacer un símbolo con la aplicación de botón y posteriormente colocarle unas cuantas líneas de código ActionScript 2.0 y de esta forma hacer que la animación se detenga e inicie a nuestra voluntad. En esta animación se simula que se esta llenando de agua un vaso. Para hacer este trabajo basta con aplicar animaciones de Tipo Forma, aplicar en una capa la opción de Máscara. Sin mas preámbulos y como la practica hace al maestro ¿COMENZAMOS? Good Luck!

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

Búsquedas:

Artículos relacionados:

Efecto Llenar Un Vaso Con Agua Y Botones De Play Y Stop | Tutoriales Adobe Flash

Movimiento De Un Balón D Futbol En Flash CS3

jmx — Mon, 26 Oct 2009 15:41:08 +0000

Tutorial Adobe Flash CS3. Crear Animación En Movimiento De Un balón De Futbol Con Una Máscara. Hola ya estoy de regreso con otro fantástico tutorial creado 100 % en Adobe Flash CS3, en la siguiente explicación te marcare los pasos a seguir para que logres hacer una animación de una pelota de futbol. Esta animación es simular que el balón este girando, como no se pueden hacer imágenes redondas y por lo tanto estas son cuadradas, cuando se hace una animación de girar en ves de girar un círculo gira un cuadrado. Por lo tanto es necesario aplicar una máscara en forma redonda y así se soluciona este pequeño inconveniente. Por otro lado aprenderás a importar imágenes al escenario, así mismo toda la animación será trabajada en la Escena para no complicar la explicación, para este trabajo no será necesario escribir una sola línea de código ActionScript. Y sin más preámbulos ¿Comenzamos? Good Luck

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

Búsquedas:

Artículos relacionados:

Movimiento De Un Balón D Futbol En Flash CS3 | Tutoriales Adobe Flash

Botón Efecto Degradado En Flash CS3

jmx — Thu, 15 Oct 2009 14:42:51 +0000

Tutorial Adobe Flash CS3. Crear Botón De Dos Posiciones Con Colores Degradados. Hola en el siguiente tutorial de Flash CS3 aprenderás a crear un botón de dos posiciones (Reposo y Sobre), este tutorial es de los más fáciles de hacer pero a la mismos tiempo crear botones son de mucha importancia ya que si ellos no se podrían enlazar las diferentes Web. Aquí aprenderás una técnica para aplicar un efecto con color de relleno degradado, también aprenderás como aplicar color (Alfa) y por último sabrás cual es la aplicación de la (Herramienta Transformación De Degradado). Cabe mencionar que este efecto no posee una sola línea de código ActionScript. Sin más preámbulos ¿COMENZAMOS? Good Luck!

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

Búsquedas:

Artículos relacionados:

Botón Efecto Degradado En Flash CS3 | Tutoriales Adobe Flash

Efecto De Animación El Túnel Del Tiemo Con Flash CS3 (parte 2)

jmx — Tue, 25 Aug 2009 06:00:27 +0000

Continuar con la segunda parte del tutorial, en esta segunda parte del tutorial se regresara a la escena del la película para proceder a introducir el símbolo creado con la animación.

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

Búsquedas:

Artículos relacionados:

Efecto De Animación El Túnel Del Tiemo Con Flash CS3 (parte 2) | Tutoriales Adobe Flash

Efecto De Animación El Túnel Del Tiemo Con Flash CS3 (parte 1)

jmx — Tue, 25 Aug 2009 01:00:04 +0000

Tutorial Adobe Flash CS3 Efecto De Animación El Túnel Del Tiempo. Hola te doy la bienvenida a otro de los sensacionales tutoriales que se presentan en esta Web jajaja. A continuación te presento un tutorial de lo mas básico se hay en la animación Adobe Flash CS3. Para hacer este tutorial solamente tienes que crear un símbolo de tipo Clip de película, posterior mente crear una animación con la aplicación de una Máscara. También aprenderás hacer suso de la herramienta (óvalo simple). Los pasos a seguir son descritos a continuación. En este trabajo quise hacer un efecto que logre hipnotizar. Este trabajo te puede servir para los banners o como un efecto para un botón, el tutorial solamente tiene una línea de AtionScript 2.0 (stop;). Sin más preámbulos ¿COMENZAMOS? Good luck!

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

Búsquedas:

Artículos relacionados:

Efecto De Animación El Túnel Del Tiemo Con Flash CS3 (parte 1) | Tutoriales Adobe Flash

Programación De Fotogalería Con Flash CS3 ActionScript 2.0 (2da parte)

jmx — Tue, 07 Jul 2009 00:32:21 +0000

12)-. Insertar otra capa y a esta colocarle el nombre de botones.

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

Búsquedas:

Artículos relacionados:

Programación De Fotogalería Con Flash CS3 ActionScript 2.0 (2da parte) | Tutoriales Adobe Flash

Animación Llenar Con Agua Un Vaso En Flash CS3 segunda parte

jmx — Sat, 06 Jun 2009 14:43:08 +0000

11-. En este paso se procederá a realizar la animación de la capa máscara. Seleccionar los fotogramas desde el número 22 hasta el fotograma número 47 de la capa máscara.

a). En el panel de Propiedades seleccionar la opción Animar: Forma. Este paso como te puedes dar cuenta es muy fácil de realizar

12-. En este paso solo se seleccionara la capa chorro agua, luego insertar un Fotograma clave F6 sobre el fotograma número 44.

13-. Para concluir las animaciones, ocultar la capa máscara.

a). Ubicarte una vez más en la capa chorro agua, seleccionar el fotograma número 49 y proceder a insertar un Fotograma clave F6.

b). Reducir el tamaño de la altura de el rectángulo insertado a 83.0 píxeles o vasta con que el rectángulo sea más pequeño que el borde del vaso.

c). Una vez que el rectángulo haya sido reducido de tamaño, moverlo hacia la parte de abajo, tal y como se muestra en la imagen.

14-. Seleccionar un fotograma entre el número 10 y el número 21 de la capa chorro agua.

a). En el panel de Propiedades, seleccionar la opción Animar: Forma

15-. Ahora realizar la segunda parte de la animación del de la capa chorro agua, seleccionar un fotograma calve entre el número 44 y el 48.

a). En el panel de Propiedades, seleccionar la opción Animar: Forma. Con este paso quedan concluidas las animaciones.

16-. Insertar la cuarta y última capa de que consta este tutorial, cambiarle el nombre a la capa por el de ola de agua. Esta capa deberá de estar por debajo de las otras tres capas.

a). Seleccionar el fotograma número 22 de la capa ola de agua, en este fotograma insertar un a Fotograma clave F6.

b). Rellenar de color #99CCFF del vaso.

17-. Por último hacer clic con el botón derecho del ratón sobre la capa máscara.

a). En el menú emergente desplegado dar clic sobre la opción Máscara.

18-. En la siguiente imagen se muestra como es que quedan las diferentes capas una vez que ha sido aplicada la máscara sobre la capa indicada.

De esta forma queda con concluido el tutorial, te invito a que eches un vistazo al archivo swf publicado le realice unas pequeñas modificaciones para darle una apariencia diferente. Si haces alguna modificación adicional al tutorial y quieres que este se te publique solamente házmelo saber, y con gusto este será incluido en esta página Web. J Well done J

P.D. presionar ctrl. + Enter para visualizar el trabajo. 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 J

Aprenderás a utilizar las diferentes herramientas de dibujo óvalo rectángulo, línea, pluma. Aplicar capas de tipo máscara, animación de forma manipular línea de tiempo insertar fotogramas clave

Descarga Archivo FLA CS3 De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Animación Llenar Con Agua Un Vaso En Flash CS3 segunda parte is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Animación Llenar Con Agua Un Vaso En Flash CS3 segunda parte | Tutoriales Adobe Flash

Animación Llenar Con Agua Un Vaso En Flash CS3

jmx — Sat, 06 Jun 2009 14:33:32 +0000

Tutorial Adobe Flash CS3. Animación Llenar Con Agua Un Vaso. En esta ocasión te expondré un tutorial en el cual explico como hacer una animación, en esta animación se simula que se esta llenando de agua un vaso. Para hacer este trabajo basta con aplicar animaciones de Tipo Forma, aplicar en una capa la opción de Máscara. Para hacer más sencillo y fácil el tutorial todo el traba lo e realizad en la Escena con el fin de no tener que involucrar símbolos de Tipo Grafico y/o Clip de película. Esta animación No necesita una sola línea de Código ActionScript. Sin mas preámbulos y como la practica hace al maestro ¿COMENZAMOS? Good Luck!

1-. Comenzar por colocar las diferentes Propiedades ctrl. + J (tamaño del documento, color de fondo y velocidad de fotogramas).

a). Las dimensiones para este documento serán 550 * 400 píxeles de ancho y alto respectivamente.

b). Colocar como color de fondo #FFFFFF, sin embargo, puedes usar cualquier otro color de fondo.

c). En la casilla que indica la Velocidad de fotogramas colocar el número 12 fps.

2-. Como la te fue mencionado al principio el total de la animación será realizada en la Escena del documento Flash CS3. Lo primero que tienes que hacer es cambiar el nombre a la capa (vaso), esto con el fin de saber en donde esta ubicado cada uno d los elementos que con forman la animación.

a). Proceder a dibujar el recipiente (vaso) que servirá como contendedor de la supuesta agua, en esta ocasión simule dibujar un vaso con las herramientas de óvalo y línea. Sin embargo, tú te puedes ayudar de las diferentes herramientas de dibujo (pluma, lápiz o pincel).

b). El vaso dibujado tiene como propiedades, color de trazo #000000 y altura de trazo 3 (grosor de línea)

c). Las dimensiones que coloque al dibujo son de 100.0 * 133.0 pixeles de ancho y de alto. Colocar el dibujo en el centro de la Escena.

3-. Seleccionar el Fotograma número70 y en el Insertar un fotograma F5, tal y como se muestra en la imagen.

4-. Insertar una nueva capa por debajo de la capa vaso y cambiarle el nombre por el de chorro agua. En esta capa estará insertada la animación del chorro de agua.

a). Insertar un Fotograma clave F6 en el fotograma número 10. En este fotograma dibujar un rectángulo con la Herramienta rectángulo.

b). Las propiedades de este rectángulo son: color de relleno #99CCFF y el rectángulo carece de trazo de línea, las dimensiones son 8.0 * 15.0 píxeles de ancho y alto.

c). Colocar el rectángulo en la parte superior de la Escena, pero quedando al centro del vaso.

5-. Seleccionar el fotograma 22 de la capa chorro agua y en el insertar un Fotograma clave F6.

a). Como puedes observar se inserto nuevamente el rectángulo, cambiar las dimensiones de alto a 280.0 píxeles de alto. O si tu recipiente posee otras dimensiones hacer que el rectángulo alcance el fondo del vaso, tal y como se muestra en la imagen.

6-. Insertar una nueva capa por de bajo de la capa chorro agua, colocar a esta nueva capa el nombre de máscara.

a). Seleccionar el fotograma número 22 y en el insertar un Fotograma clave F6. Con la ayuda de la herramienta rectángulo dibujar un rectángulo que cubra la totalidad del vaso tanto a lo ancho como a lo alto.

b). El color de relleno de este rectángulo es #99CCFF, este rectángulo también carece de color de línea.

c). Colocar el rectángulo dibujado en la parte inferior del vaso, justo en donde empieza el dibujo del vaso tal y como se muestra en la imagen.

7-. Insertar un Fotograma clave F6 sobre el fotograma número 27.

a). Subir unos 10 o 20 pixeles el rectángulo de este fotograma, luego hacer una pequeña deformación en la parte superior del rectángulo.

8-. Insertar otro Fotograma clave F6 en el fotograma número 35.

a). Mover nuevamente hacia arriba de 10 a 15 píxeles el rectángulo, y modificar un poco la parte superior del rectángulo.

9-. Insertar un fotograma clave F6 en el fotograma número 45 de la capa máscara, y modificar nuevamente la parte superior del rectángulo.

10-. Insertar el último fotograma clave F6 en el fotograma número 48, y adaptar la parte superior de este rectángulo a la forma que pose el borde del vaso.

Segunda Parte

Descarga Archivo FLA CS3 De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Animación Llenar Con Agua Un Vaso En Flash CS3 is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Animación Llenar Con Agua Un Vaso En Flash CS3 | Tutoriales Adobe Flash

Preloader De Porcentaje En Adobe Flash CS3

jmx — Tue, 21 Apr 2009 16:24:44 +0000

Tutorial Adobe Flash CS3 Preloader De Porcentaje (Bytes Totales Y Bytes Cargados). Hola que tal fanático del mundo Flash CS3, a continuación tengo para ti una explicación con la cual aprenderás a programar una barra de cargador con Código ActionScript 3. El diseño del cargador en esta ocasión no le di mucha importancia jajajajaja, sin embargo, se te dan las suficientes herramientas como para que diseñes el PRELOADER a la medida de tus necesidades. Lo importante en este tutoriales el código ACTIONSCRIPT 3, dicho código apenas rebasa las 10 líneas. El tutorial aunque se puede visualizare como complicado este es muy fácil de seguir, te ago una atenta invitación para que pongas en practica este trabajo y así te convencerás que fácil es jajaja. Sin más preámbulos ¿COMENZAMOS? J Good Luck J

1.- Comenzar por colocar las propiedades al documento ctrl. + J, las dimensiones del documento son 450 * 300 píxeles de ancho y alto.

a.- Establecer como color de fondo

b.- Colocar como velocidad de fotogramas 12 fps.

2.- Este cargador solamente consta de 2 símbolos de tipo Clip de prelícuala, crear el primer símbolo ctrl. + F8, colocarle como nombre barra preloader.

a.- Seleccionar en la opción Tipo Clip de película.

b.- En este símbolo se dibujara un rectángulo que servirá como barra de carga, a medida que el rectángulo se valla llenando de color esto indicara que se van cargando más Bytes del contenido a visualizarse.

3.- Una vez ubicado en el símbolo barra preloader seleccionar la herramienta de Rectángulo.

a.- Anular la casilla de Borde (no colocarle borde al rectángulo), Seleccionar algún color de relleno en esta ocasión yo coloque como color de relleno #0000FF.

b.- Las dimensiones del Rectángulo son 200.0 * 20 píxeles de ancho y alto respectivamente.

c.- Colocar el Rectángulo dibujado en coordenadas X=0.0 Y=0.0.

Nota: Selecciona el color que mas te guste para que le des un mejor diseño a esta barra de cargador

4.- Crear el segundo símbolo ctrl. + F8, colocarle como nombre preloader.

a.- Seleccionar en la opción Tipo Clip de película.

Nota: En este símbolo se crearan 3 Camps De Texto que servirán para que sean vistos el porcentaje de carga, los Bytes que se están cargando y el tercer campo de texto hace un calculo del total de Bytes. En este símbolo será creado propiamente el cargador

5.- Cuando te encuentres ubicado en el símbolo cambiarle el nombre a la capa por el de barra cargador, esto es por que el símbolo pose tres capas y es necesario identificar en donde esta ubicado cada uno de los elementos.

a.- Hacer visible el Panel de la Biblioteca ctrl. + L, arrastrar desde la biblioteca el símbolo barra preloader.

b.- Colocar a este Clip de película un Nombre de instancia cargador_mc.

c.- Las medidas del símbolo no son afectadas 200.0 * 20.0 píxeles, colocar el símbolo en coordenadas X=0.0 Y=0.0.

Nota: muy importante colocar cada Nombre de instancia tal y como este marcado si no lo haces así tendrás problemas con el funcionamiento del cargador.

6.- Insertar la segunda capa y cambiarle el nombre por el de borde.

a.- Seleccionar la herramienta de Rectángulo las propiedades Rectángulo son: color de trazo #000000, Tamaño de trazo 2 y tipo de Trazo Sólido. El Rectángulo no tiene color de relleno.

b.- Las medidas del rectángulo son 200.0 * 20.0 píxeles de ancho y alto, colocar este rectángulo coordenadas X=0.0 Y=0.0.

7.- Crear una nueva capa y cambiarle el nombre a esta por el de texto.

a.- Seleccionar la herramienta de Texto, hacer un campo de texto suficiente mente grande. Ya que en este campo de texto se cal calcularan los Bytes que se estarán cargando a medida que la barra se este rellenando de color.

b.- Seleccionar en la opción el Tipo de texto Texto dinámico.

c.- Colocarle como Nombre de instancia bytes_cargados_txt

d.- Dejo a tu elección el tipo, color y tamaño de fuente.

e.- Colocar el campo de texto un poco abajo del rectángulo.

Nota: puedes hacer varios tamaños de campos de textos y estarlos probando hasta ajustarlos a la medida requerida.

8.- Insertar otro nuevo campo de texto de tipo Texto dinámico, en este campo de texto se colocara el total de Bytes de que consta la película.

a.- colocarle a este nuevo campo de texto como Nombre de instancia bytes_totales_txt.

b.- colocar este campo de texto a un lado del anterior.

9.- Insertar un tercer campo de texto de tipo Texto dinámico, aquí estará colocado un contador de porcentaje que se ira incrementando de 1%, 2%, 3%…100%, hasta que sea completada la carda total del contenido de la película.

a.- Este campo de texto tendrá como Nombre de instancia porcentaje_txt.

b.- Este campo de texto colocarlo arriba del rectángulo.

Hasta este punto se puede decir que el preloader esta concluido, pues la barra del cargador así como también los tres diferentes campos de textos ya posen los nombres de instancia que serán escritos en el código ActionScript final. Unos cuantos pasos más y estará concluido el tutorial.

10.- Regresar a la Escena y cambiarle el nombre a la capa por el de contenido.

a.- Insertar un fotograma clave vacío presiona F7.

b.- En este paso Importar una imagen ctrl. + R la cual servirá como contenido.

c.- Navegar através de tus carpetas hasta donde tengas ubicada la imagen, seleccionar la imagen y luego simplemente Abrir.

Nota: la imagen deberá de tener como dimensiones 450.0 * 300.0 píxeles de ancho y de alto.

11.- Una vez que se halla insertado la imagen esta quedara posesionada en el fotograma número 2 de la capa contenido.

a.- Como la imagen pose las mismas dimensiones que el documento 450.0 * 300.0 pixeles, solo colocar esta imagen en coordenadas X=0.0 Y=0.0.

12.- Insertar una segunda capa y cambiarle el nombre por el de cargador.

a.- Hacer visible el Panel de Biblioteca ctrl. + L y arrastrar desde esta el símbolo preloader.

b.- Escribirle a este símbolo como Nombre de instancia preloader_mc, tratar de que el símbolo preloader quede centrado en relación a la Escena.

Nota: seguramente se insertaron dos fotogramas en la capa cargador, seleccionar el fotograma número dos y luego presionar la Shift + F5 con esta acción será borrado el fotograma que esta de más.

13.- Por último y para finalizar el tutorial del cargador solamente, insertar una campa más colocarle como nombre código AC.

a.- Abrir el Panel Acciones – fotograma 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 {

preloader_mc.cargador_mc.scaleX=total;

preloader_mc.porcentaje_txt.text=Math.floor(total*100)+”%”;

preloader_mc.bytes_cargados_txt.text=loaded+” bytes cargados”;

preloader_mc.bytes_totales_txt.text=toLoad+” bytes totales”;

}

Nota: en esta capa también se son insertados dos fotogramas, seleccionar el fotograma que esta en la posición número 2, presionar Shift + F5 con esta acción será borrado el fotograma que esta de más.

Con esta acción se da por concluido el tutorial, como puedes ver no es muy complicado de hacer este trabajo J WELL DONEJ.

Aquí te presento una imagen del cargador cuando esta trabajando en todo su esplendor.

P.D. Para poder visualizar el cardador es necesario presionar dos veces ctrl. + enter.

Si tienes alguna duda o sugerencia no dudes en dejar tu comentario. Hasta el próximo tutorial J

Descarga Archivo FLA De Este Tutorial

Visualizar Archivo SWF De Este Tutoria

Preloader De Porcentaje En Adobe Flash CS3 is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Preloader De Porcentaje En Adobe Flash CS3 | Tutoriales Adobe Flash