Tutoriales Adobe Flash

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

HDR Photography with Photoshop CS5

jmx — Wed, 05 Jan 2011 17:50:42 +0000

In this tutorial we will learn how to use the new tools to handle HDR images in Photoshop CS5, which has improved significantly and there will be no need for external programs, with patience and some practice, you can create fabulous HDR images in Photoshop CS5.

Photoshop CS5 fixes several needs expressed by its users in the last editions, in the case of photographers one of those needs was the adequate management of HDR pictures (High Dynamic Range). In this tutorial we will explain the new HDR options of Photoshop CS5.

With Photoshop CS5 comes covered the desire of many photographers, who repeatedly complained of the poor options for proper management HDR images (High Dynamic Range), many saw the need to acquire external programs like Photomatrix, which has a greater power than earlier versions of photoshop.

In this new version CS5 we find gladly, new tools to handle HDR images has improved significantly and there will be no need for external programs, with patience and some practice, you can create fabulous HDR images in Photoshop CS5.

Better yet is that with Photoshop CS5 now is possible to create HDR images using just one image, is not necessary to have multiple images with multiple exposures to achieve that end.

Let’s remember that the original function of the HDR is adequately reproduce dark and bright areas of an image, but since a few years the HDR is not anymore the only way to achieve a good lighting, but has become an final purpose that the effect itself has become the ultimate goal of photo editing, which continually see pictures with HDR effects really exaggerated, and although for many of us seem inappropriate, for others it is just your final goal.

http://www.onlyphotoshop.com/tutorial/hdr-photography-with-photoshop-cs5/593/

HDR Photography with Photoshop CS5 is a post from: Tutoriales Adobe Flash

Búsquedas:

No hay artículos relacionados.

HDR Photography with Photoshop CS5 | 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 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 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

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

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

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