Tutoriales Adobe Flash » Action Script

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

Botones Animados Para Menú Flash CS4 Parte 1

jmx — Wed, 16 Feb 2011 15:12:45 +0000

En el siguiente tutorial veras la explicación que te guiara paso a paso hasta que logres hacer un menú Flash CS4 ActionScript 3.0 con botones animados de dos estados (sobre y presionado). Este menú tiene la particularidad que no posee símbolos con la propiedad de botón. El menú está constituido por símbolos de tipo movie clip que con ayudad de código ActionScript se convierten en botones.

La animación que tienen los diferentes botones es muy fácil de hacer, solo tienes que hacer una animación de reducción de alfa 0 % a alfa 100 %, esta animación se insertara en cada uno de los botones flash. Manos a la obra. Good luck!.

Paso1

Comenzar por hacer el documento en el cual se va a trabajar Ctrl. + N. luego seleccionar la opción de tipo de ActionScript, en este caso será Flash File (ActionScript 3.0).

Paso 2

Colocar las diferentes propiedades al documento Ctrl. +J, en este caso serán dimensiones 470 * 35 píxeles de ancho y de alto respectivamente.

Usar el color #FFFFFF como fondo.

La velocidad de fotogramas que tendrá esta película son 30 fps.

Paso 3

Crear el primer símbolo Ctrl. +F8, colocarle por nombre a este símbolo texto noticias.

Seleccionar la opción Movie Clip, como tipo de símbolo.

Paso 4

En este símbolo simplemente escribir la palabra noticias, este será el primer botón.

Ubicado en el símbolo texto noticias seleccionar la herramienta de texto (T), después abrir el panel de PROPIEDADES seleccionar la opción de Texto Estático.

Colocar el texto en coordenadas X: 0.0 Y: 0.0. El tipo de fuente es Verdana tamaño de fuente 16 pt. Usar como color de texto el que más te guste.

Paso 5

Repetir los paso 3 y 4 para crear 2 símbolos más.

El segundo símbolo tendrá por nombre texto deportes y tendrá insertada la palabra deportes.

El tercer símbolo tendrá por nombre texto videos y tendrá insertada la palabra videos.

De esta forma hasta este punto tendrás en la BIBLIOTECA tres símbolos de tipo Movie Clip.

Poso 6

Crear un nuevo símbolo Ctrl. + F8 y colocarle por nombre fondo.

Seleccionar como opción de tipo de símbolo Movie Cilp.

Paso 7

Cuando te encuentres ubicado en el símbolo proceder a seleccionar la herramienta de rectángulo (R).

Dibujar un rectángulo con las siguientes propiedades, coordenadas X. 0.0 Y: 0.0, dimensiones 150.0 * 25.0 píxeles de ancho y de alto, usar como color de relleno #000066.

Paso 8

Insertar un nuevo símbolo Ctrl. +F8, colocarle como nombre fondo animado.

Seleccionar la opción Movie Clip.

Paso 9

Seleccionar la herramienta rectángulo (R) dibujar un rectángulo con las siguientes propiedades, coordenadas X: 0.0 Y: 0.0, dimensiones 150.0 * 15.0 píxeles de ancho y de alto, usar como color de relleno #006666.

Paso 10

Insertar un nuevo símbolo Ctrl. +F8, colocarle como nombre botón noticias.

Seleccionar la opción Movie Clip.

Visualizar Archivo SWF De Este Tutorial

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

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

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

Búsquedas:

Artículos relacionados:

Botones Animados Para Menú Flash CS4 Parte 1 | 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 Séptima Parte

jmx — Thu, 08 Jul 2010 17:18:37 +0000

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

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

Búsquedas:

Artículos relacionados:

Diseñar y Programar Galería En Adobe Flash Séptima 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 Tercera Parte

jmx — Mon, 28 Jun 2010 17:31:11 +0000

Tercera parte importar imágenes para la galería

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.

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.

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)

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.

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.

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

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.

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.

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

Búsquedas:

Artículos relacionados:

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

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

jmx — Sun, 27 Jun 2010 03:01:40 +0000

Segunda Parte Programación De Botones Con ActionScript 2.0

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. Arrastrar de la biblioteca el símbolo botones, colocar el símbolo en coordenadas X = 150.0 y Y = 340.0.

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

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.

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.

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;

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

}

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

Búsquedas:

Artículos relacionados:

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

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

jmx — Sat, 26 Jun 2010 03:01:46 +0000

Primera Parte Programación De Botones Con ActionScript 2.0

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.

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

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.

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.

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;

}

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

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;

}

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

Búsquedas:

Artículos relacionados:

Diseñar y Programar Galería En Adobe Flash Segunda 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

Galería De Imágenes En Adobe Flash CS4

jmx — Mon, 18 Jan 2010 03:01:41 +0000

A continuación te mostrare un video tutorial que fue elaborado en adobe flash cs4. Este tutorial te enseñara como hacer una galería de imagen.

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

Búsquedas:

Artículos relacionados:

Galería De Imágenes En Adobe Flash CS4 | 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

Adobe Flash CS5

Jorge Oyhenard — Mon, 05 Oct 2009 20:35:38 +0000

Desde hace unos días están disponible en Adobe Labs, algunos avances del nuevo Adobe Flash CS5, que aun está en desarrollo pero que ya deja ver muchas novedades interesantes, sobre todo con respecto al desarrollo de Aplicaciones para Móviles y RIA (Rich Internet Applications).

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:

Adobe Flash CS5 is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Adobe Flash CS5 | 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

Programación De Fotogalería Con Flash Cs3 ActionScript 2.0 (1er parte)

jmx — Sun, 05 Jul 2009 23:00:25 +0000

Tutorial Adobe Flash CS3 Programación De Fotogalería. En esta ocasión tengo un sensacional tutorial que te ayudara a programar una galería con dos imágenes, sin embargo, puedes colocar cualquier cantidad de imágenes según sean tus necesidades. Basta con solo crear un símbolo de tipo Botón, y crear dos símbolos de tipo Clip de película (para este tutorial que quede aclarado), se pueden crear tantos símbolos de tipo Clip de película si se quieres insertar más de dos imágenes como en este caso. Este tutorial también te menciona como Importar imágenes al Panel De Biblioteca las cuales serán usadas posterior mente, es necesario tener dos imágenes iguales una pequeña 220 px * 160 px y una grande 220 px * 320 px. El ejemplo de archivo SWF que aquí se muestra tiene algunas variantes espero que sean de tu agrado las modificaciones que realice a este tutorial. Sin más preámbulos ¿COMENZAMOS? Good luck!

1)-. El primer paso a seguir es crear las propiedades del documento (ctrl. + J) sobre el cual se va a trabajar.

a)-. En este caso las dimensiones del documento son 440 * 320 píxeles de ancho y de alto respectivamente.

b)-. El color de fondo que se va a usar en este caso es #FFFFFF.

c)-. La velocidad de fotogramas que sugiero usar es de 12 fps.

2)-. Muy importante que antes de comenzar propiamente con el tutorial es necesario que tengas la imágenes ya editadas (yo use Photoshop CS3 para crear las imágenes). Como las imágenes no se van a usar en el momento si no cada una a su debido tiempo no vale la pena usar el comando (ctrl. + R) Importar a escenario.

a)-. Para importar una imagen al Panel de Biblioteca seguir la siguiente ruta Archivo>>Importar >>Importar a biblioteca tal y como se muestra en la imagen.

3)-. Navegar por medio de las carpetas hasta llegar en donde se encuentran las imágenes creadas con anterioridad.

a)-. Deben de haber dos imágenes iguales pero de distinto tamaño una que tenga dimensiones 220 px * 320 px y una más pequeña 220 px * 160 px.

b)-. Seleccionar todas las imágenes y posteriormente aceptar la acción.

4)-. Crear el primero de los símbolos (ctrl. + F8), colocarle el nombre de imag 01.

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

5)-. Una vez que estés ubicado en el símbolo, abrir el Panel de Biblioteca (ctrl. +L).

a)-. En este símbolo insertar la imagen de menor tamaño (220 * 160 píxeles).

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

6)-. Crear el segundo de los símbolos (ctrl. + F8), colocarle el nombre de imag 02.

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

7)-. En este símbolo insertar la segunda imagen de menor tamaño (220 * 160 píxeles).

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

8)-. En este paso solo tienes que crear un símbolo (ctrl. + F8), colocarle en nombre de botón invisible.

a)-. Seleccionar la opción de Tipo Botón.

9)-. En este símbolo de tipo Botón, tiene la propiedad de insertar una forma vectorial pero que esta no sea vista o que no se le tenga que reducir el color alfa (no insertar la forma vectorial en los frames de Reposo, Sobre o Presionado).

a)-. Seleccionar el frame que corresponde (Zona activa), en este frame insertar un fotograma clave vacío (F7).

b)-. Hacer uso de la herramienta rectángulo (R), dibujar esta forma vectorial con dimensiones de 220 * 160 píxeles de ancho y alto.

c)-. Colocar el rectángulo dibujado en coordenadas X: 0.0 Y: 0.0.

10)-. Regresar a la Escena, como en este trabajo se van a usar varias capas, hay que colocarle a cada una de las capa un nombre especifico, con el fin de saber endone quedan insertados cada uno de los símbolos.

a)-. Nombrar a la primera capa imag 01, hacer visible el panel de Biblioteca (ctrl. + L).

b)-. Arrastrar desde la biblioteca el símbolo (Clip de película) imag 01.

c)-. Escribir el espacio (Nombre de instancia) imag1, colocar este símbolo en coordenadas X: 0.0 Y: 0.0.

11)-. Insertar una segundas capa y sustituir el nombre a imag 02, desde el panel de biblioteca arrastrar el símbolo imag 02.

a)-. A este Clip de película colocarle el nombre de imag2.

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

Segunda Parte Del Tutorial

Visualizar Archivo SWF De Este Tutorial

Programación De Fotogalería Con Flash Cs3 ActionScript 2.0 (1er parte) is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Programación De Fotogalería Con Flash Cs3 ActionScript 2.0 (1er parte) | 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

Programar Un Cronometro Con Centésimas De Segundo En Flash CS3

jmx — Thu, 09 Apr 2009 16:02:49 +0000

Este tutorial es una continuación del tutorial nombrado Programar y diseñar un cronometro. A continuación relatare una pequeña reseña con el fin de modificar el cronometro Programar y diseñar un cronometro. A este nuevo cronometro le agregare dos modificaciones específicamente: la primera es agregar un nuevo botón el, cual tendrá la función de reiniciar el cronometro desde cero. La segunda modificación que te tendrá el cronometro a diferencia del anterior, este contara con un nuevo contador de centésimas de segundo. Sin más que mencionar ¿COMENZAMOS? Good Luck!

1)-. Como ya mencione anteriormente este tutorial parte del tutorial Programar y diseñar un cronometro. Así que partiré modificando el botón de pausa.

a)-. Ubicarte primero en el Símbolo llamado pausa seleccionar el primer fotograma y cambiar el color de relleno a #FF9900.

b)-. Hacer esto no tendrá mayor dificultad.

2)-. Insertar el nuevo símbolo de tipo botón de que consta el documento. Presionar (ctrl. + F8), colocar como nombre al símbolo (reiniciar).

a)-. Después de haberle colocado el nombre al símbolo, seleccionar la opción de Tipo Botón.

3)-. Ubicado en este nuevo símbolo, dibujar en la primera capa un rectángulo de dimensiones de 124.0 * 37.0 pixeles de ancho y alto, el Color de relleno es #660000

a)-. Colocar el rectángulo dibujado en coordenadas X = 0.0 Y = 0.0.

b)-. Insertar una segunda capa y en ella colocar un Texto estático con la leyenda (RESET).

Nota si tienes alguna duda sobre como hacer este botón consultar los pasos 2, 3, 4, y 5 del tutorial Programar y diseñar un cronometro

4)-. Al regresar a la Escena el botón de pausa cambiara de color automáticamente.

a)-. Hacer visible el panel de la Biblioteca (ctrl. + L), y arrastrar el símbolo de nombre (reiniciar).

b)-. Escribir el cuadro de Nombre de instancia (stop_btn).

c)-. Colocar este símbolo en coordenadas X = 275.0 Y = 160.0.

5)-. Seleccionar la capa (action script 1), abrir el panel de Acciones – fotograma. Sustituir el código ActionScript por este nuevo.

_root.timer_txt = “00:00:00:00″;

_root.play_btn.onPress = function()

{

if(!_root.timing)

{

if (_root.paused)

{

_root.startTime = getTimer() – _root.elapsedTime;

}

else

{

_root.startTime = getTimer();

}

_root.paused = false;

_root.timing = true;

}

_root.pause_btn.onPress = function()

{

if(_root.timing)

{

_root.timing = false;

_root.paused = true;

}

_root.stop_btn.onPress = function()

{

_root.timing = false;

_root.paused = false;

_root.timer_txt = “00:00:00:00″;

}

6)-. Seleccionar la capa (action script 2), cambiar el código ActionScript por este otro.

_root.onEnterFrame = function()

{

if (timing)

{

elapsedTime = getTimer()-startTime;

elapsedHours = Math.floor(elapsedTime/3600000);

remaining = elapsedTime-(elapsedHours*3600000);

elapsedM = Math.floor(remaining/60000);

remaining = remaining-(elapsedM*60000);

elapsedS = Math.floor(remaining/1000);

remaining = remaining-(elapsedS*1000);

elapsedH = Math.floor(remaining/10);

if (elapsedHours < 10)

{

hours = “0″+elapsedHours.toString();

}

else

{

hours = elapsedHours.toString();

}

if (elapsedM < 10)

{

minutes = “0″+elapsedM.toString();

}

else

{

minutes = elapsedM.toString();

}

if (elapsedS < 10)

{

seconds = “0″+elapsedS.toString();

}

else

{

seconds = elapsedS.toString();

}

if (elapsedH < 10)

{

hundredths = “0″+elapsedH.toString();

}

else

{

hundredths = elapsedH.toString();

}

_root.timer_txt = hours+”:”+minutes+”:”+seconds+”:”+hundredths;

}

};

Con este paso queda concluido el tutorial como te pudiste dar cuenta este trabajo es muy fácil de realizar ya que si tuviste éxito con el anterior cronometro Programar y diseñar un cronometro en este trabajo solamente hay que sustituir los códigos ActionScript.

7)-. Aquí una muestra de cómo es que el cronometro una vez que esta trabajando. Como fue mencionado al principio de la explicación este nuevo cronometro tiene tres botones Play. Stop y Reset, así como también cuenta con un nuevo elemento que es el de las centésimas de segundo. WELL DONE

P.D. Presionar ctrl. + Enter para ver como funciona el cronometro con el nuevo diseño. Si tienes alguna duda o comentario no dudes en escribirlo y de esta forma seguir juntos aprendiendo de mundo maravilloso de Flash CS3. Hasta el próximo tutorial:).

Descarga Archivo FLA CS3 De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Programar Un Cronometro Con Centésimas De Segundo En Flash CS3 is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Programar Un Cronometro Con Centésimas De Segundo En Flash CS3 | Tutoriales Adobe Flash

Programar Y Diseñar Un Cronometro En Adobe Flash CS3

jmx — Fri, 20 Mar 2009 02:43:45 +0000

Tutorial Adobe Flash CS3. Programar y diseñar un cronometro. En esta ocasión tengo para ti un tutorial en el cual veras como programar un reloj tipo cronometro. Aquí se involucran diferentes aspectos tales como: insertar símbolos de tipo botón, aplicación de la herramienta rectángulo, insertar campo de texto tipo dinámico y por último insertar unas cuantas líneas de código ActionScript 2. El diseño del cronómetro se muy básico de hacer, y sin más preámbulos J ¿COMENZAMOS? Good Luck!

1)-. El primer paso es hacer el documento sobre el cual se va a trabajar, en esta ocasión aremos un documento (ctrl. + J) de dimensiones 400 px * 222 px de ancho y alto respectivamente.

a)-. El color de fondo a usares sobre el documento es #CCCCCC.

b)-. La velocidad de fotogramas no será variada y se quedara con el valor que viene preestablecida la cual es de 12 fps.

2)-. Insertar el primero de los dos símbolos de tipo botón de que consta el documento. Presionar (ctrl. + F8), colocar como nombre al símbolo (pausa).

a)-. Después de haberle colocado el nombre al símbolo, seleccionar la opción de Tipo Botón.

3)-. Ubicado en el símbolo (pausa), seleccionar la herramienta (rectángulo).

a)-. Las propiedades del rectángulo son: Color de trazo #000000, la Altura de trazo es de 2 y Color de relleno #660000.

b)-. Una vez que tienes las propiedades del rectángulo, dibujar este con dimensiones de 124.0 * 37.0 pixeles de ancho y alto.

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

Nota: si tienes un poco de experiencia puedes colocar un borde redondeado tal y como se mira en la imagen, esta parte del borde no la explico para no hacer el tutorial muy tedioso. Sin embargo, puedes encontrar una explicación de cómo hacer un borde redondeado en este link http://www.artecreativo.net/ef/curso-basico-de-flash-8-simbolos-de-tipo-boton-parte-17/399/

4)-. Insertar un fotograma clave (F6) en el siguiente fotograma. Seleccionar el color de relleno y cambiarlo por uno nuevo en este caso (#EDEDED).

a)-. Al insertar el fotograma clave te auguras de que el rectángulo dibujado en el paso anterior quede de las mismas dimensiones y en las mismas coordenadas.

5)-. Para terminar con el diseño de este botón, insertar una nueva capa.

a)-. Seleccionar la herramienta de texto y luego seleccionar la opción de Texto estático.

b)-. Las opciones de tipo de fuente y tamaño de fuente te las dejo a tu elecciónJ.

c)-. Después de haber elegido la fuente y tamaño de fuente, escribir la palabra (PAUSA).

6)-. Crear el segundo símbolo (ctrl. + F8), a este símbolo colocarle como nombre (play).

a)-. Seleccionar la opción de Tipo Botón.

7)-. Seguir los pasos 3, 4 y 5, con el fin de hacer el mismo diseño de botón.

a)-. Este rectángulo únicamente tendrá una variación, en el primer Color de relleno (#003300). Y el texto cambiara de (PAUSA a START).

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

a)-. Arrastrar desde la biblioteca el símbolo (play).

b)-. Escribir el cuadro de Nombre de instancia (play_btn).

c)-. Colocar este símbolo en coordenadas X = 30.0 Y = 160.0.

9)-. Ahora arrastrar desde la Biblioteca el símbolo (pausa).

a)-. Escribir el cuadro de Nombre de instancia (pause_btn).

b)-. Colocar este símbolo en coordenadas X = 245.0 Y = 160.0.

10)-. Seleccionar la herramienta de texto, en la opción de Tipo de texto seleccionar (Texto dinámico).

a)-. Este campo de texto es en donde se mirara propiamente el reloj de tipo cronometro, así que nuevamente dejo a tu elección el Tipo y Tamaño de FuenteJ.

b)-. Es de suma importancia que en la opción de Var: escribas la palabra (contador_txt) tal y como se muestra en imagen.

c)-. Colocar este campo de texto en coordenadas X = 56.0 Y = 40.0, si es que elegiste el Tamaño de texto 52.

Nota: no es necesario que escribas el texto 00: 00: 00, sin embargo, el escribir la palabra 00: 00: 00 no le afecta en nada al cronometro.

11)-. Para finalizar el tutorial simplemente falta agregar el código ActionScript 2. Insertar una nueva capa y cambiarle el nombre a (action script 1), seleccionar el fotograma de esta capa.

a)-. Abrir el panel de Acciones – fotograma e insertar el siguiente código:

_root.contador_txt = “00:00:00″;

_root.play_btn.onPress = function()

{

if(!_root.timing)

{

if (_root.paused)

{

_root.startTime = getTimer() – _root.elapsedTime;

}

else

{

_root.startTime = getTimer();

}

_root.paused = false;

_root.timing = true;

}

_root.pause_btn.onPress = function()

{

if(_root.timing)

{

_root.timing = false;

_root.paused = true;

}

12)-. Insertar una tercera capa y cambiarle el nombre por el de (action script 2), seleccionar el fotograma de esta capa e insertar el siguiente código:

_root.onEnterFrame = function() {

if (timing) {

elapsedTime = getTimer()-startTime;

elapsedHours = Math.floor(elapsedTime/3600000);

remaining = elapsedTime-(elapsedHours*3600000);

elapsedM = Math.floor(remaining/60000);

remaining = remaining-(elapsedM*60000);

elapsedS = Math.floor(remaining/1000);

remaining = remaining-(elapsedS*1000);

elapsedH = Math.floor(remaining/10);

if (elapsedHours<10) {

hours = “0″+elapsedHours.toString();

} else {

hours = elapsedHours.toString();

}

if (elapsedM<10) {

minutes = “0″+elapsedM.toString();

} else {

minutes = elapsedM.toString();

}

if (elapsedS<10) {

seconds = “0″+elapsedS.toString();

} else {

seconds = elapsedS.toString();

}

if (elapsedH<10) {

_root.contador_txt = hours+”:”+minutes+”:”+seconds;

}

};

Hasta este punto el cronometro esta listo para ser visto en todo su esplendor, solo tienes que presionar (ctrl. + Enter) y listo, el crono comenzara un conteo de 0 segundos y al llegar a sesenta segundo comenzara el conteo de los minutos. Sitienes alguna duda o comentario no dudes en escribirlo. Well done!!

No me dejo muy convencido como quedo el diseño del cronometro así que le añadí tres pasos mas para darle un poquito de diseño (que quede bien claro solo es un poquito de diseño) jajajajajajaja.

13)-. Insertar una cuarta capa y cambiarle el nombre por el de (detalles crono).

a)-. Seleccionar la herramienta rectángulo, luego dar las propiedades al rectángulo que va hacer dibujado: el Color de trazo es #000000 y la Altura de trazo es 2, colocar como Color de relleno #0000CC.

b)-. Las dimensiones del rectángulo son: 400.0 * 22.0 pixeles de ancho y alto.

c)-. Una vez dibujado el rectángulo colocarlo en coordenadas X = 0.0 Y = 0.0.

14)-. Seguir el paso anterior para volver a dibujar el mismo rectángulo (o simplemente copiar el rectángulo anterior y pegarlo).

a)-. Este nuevo rectángulo colocarlo en coordenadas X = 0.0 Y = 200.0.

15)-. Dibujar un nuevo rectángulo (herramienta de Rectángulo Simple) pero ahora colocarle un borde redondeado de 20 en cada una de las esquinas.

a)-. Este rectángulo solamente tiene Color de borde #000000 no tiene Color de relleno.

b)-. Las dimensiones del rectángulo son 345.0 * 80.0 pixeles de ancho y alto.

c)-. Colocar esta forma en coordenadas X = 26.0 Y = 40.0.

Finalmente te muestro como queda el diseño del cronometro ya con los nuevos detalles, te advertí que solo le daría un poquitín de diseño jajajajaja

P.D. Presionar nueva mente ctrl. + Enter para ver como funciona el crono con el nuevo diseño:). Espero tus comentarios y de esta forma seguir juntos aprendiendo de mundo maravilloso de Flash CS3. Hasta el próximo tutorial:).

Descargar El Archivo FLA CS3

Visualizar El Archivo SWF De Este Tutorial

Programar Y Diseñar Un Cronometro En Adobe Flash CS3 is a post from: Tutoriales Adobe Flash

Búsquedas:

Artículos relacionados:

Programar Y Diseñar Un Cronometro En Adobe Flash CS3 | Tutoriales Adobe Flash