Practicas de Flash

Practicas de laboratorio de Flash Macromedia
1
Tabla de referencia
Guía de Movimiento.....................................................................................................3
El Efecto Mariposa.......................................................................................................4
Máscara e Insertar Imagen..........................................................................................6
BOTÓN CON COMPORTAMIENTO MOVIE CLIP........................................................9
SUB MENÚ FLASH.....................................................................................................16
CURSOR PROGRAMADO PARA PERSEGUIR AL PUNTERO WINDOWS..............24
Crear un Botón con Relieve......................................................................................28
Efecto Caida de Nieve en Paisaje con Flash............................................................30
Animación de nubes..................................................................................................33
Creación de un lightsaber (Sable de luz).................................................................39
Paso 1.- Dibujos preliminares.................................................................39
Paso 2.- Dibujo de la empuñadura....................................................................41
Paso 3.- Dibujo del laser....................................................................................43
Paso 4.- Creación de botones...........................................................................43
Programar una Marquesina en Fash Mx..................................................................45
Menú Sin Fin.............................................................................................................. 53
Menú despegable.......................................................................................................56
Objetos Arrastrables (Sliders) 03·2006..........................¡Error! Marcador no definido.
Efecto con Líneas.............................................................¡Error! Marcador no definido.
2
Guía de Movimiento
Lo primero que haremos es Crear un Nuevo Símbolo presionando Ctrl + F8
En este caso se le nombró gráfico y con un comportamiento del mismo nombre:

Gráfico.
Dibuja la forma que moverás a través de la guía. Aquí hemos dibujado un cuadro azul
sin borde con cordenadas X=0 y Y=0
Desde la biblioteca se arrastra Símbolo "Gráfico" hasta la escena.
Sobre la Capa 1 haz clic con el botón derecho del ratón y del menú emergente
selecciona Añadir Guía de movimiento, o vía Insertar >> Línea de tiempo >> Guía de
movimiento.
3
Selecciona el fotograma 1 de la capa "Guía: Capa 1" seleccionando alguna de las

herramientas lápiz, pincel, o línea sin unir nunca el principio y el final de la guía.
Ahora añade un fotograma clave (F6) en la Capa 1, frame 30 y el cuadro moverla

hasta la posición final.
Añade fotograma (F5) en la capa Guía: capa 1 en el fotograma 30.
Entre mayor sea el número de fotogramas totales la velocidad de movimiento de tu

forma será mas lenta y viceversa.
Selecciona el frame 1 de la capa 1 y la forma muevela hasta el punto inicial de la guía

de movimiento como se aprecia en la imagen, además en la barra de propiedades
Cambiar la opción de Animar a Movimiento.
Presiona Ctrl + Intro para visualizar la animación.

El Efecto Mariposa
Trabaja con flash en el movimiento de una mariposa.
El ejemplo SWF aquí presentado posee unas guías de movimiento. El ejercicio

tiene la complejidad de que primero se tienen que hacer las imágenes de la mariposa
para simular el vuelo, Descarga de internet una imagen de mariposa, para usarla en
la practicas, asegúrate de crear una carpeta de imágenes para tus practicas de flash.
1-. Hacer un documento (ctrl. + J) con las siguientes propiedades.

a)-. Las dimensiones del documento son 150 * 150 píxeles de ancho y alto.
b)-. Color de fondo #FFFFFF.
c)-. Colocar como velocidad de fotogramas 8 fps.
2-. Crear el único símbolo (ctrl. + F8) de que consta la película.

a)-. Nombrar al símbolo animación de mariposa.
b)-. Dar como Comportamiento Clip de película.
3-. Importar (ctrl. + R) la serie de imágenes. Aquí presento un pequeño truco,

nombrar a las imágenes con el mismo nombre y un número consecutivo. Luego
seleccionar solamente la primera imagen para importarla.
4-. Una vez que se acepta importar la primera imagen Flash MX preguntara que la
imagen forma parte de una secuencia de imágenes, luego aceptar importar la
secuencia de imágenes
5-. Al aceptar importar la secuencia de imágenes Flash MX automáticamente colocara

cada imagen en cada frame y en las mismas coordenadas X = 0.0 y Y = 0.0.
Nota si se importan las imágenes una por una se tendrá que insertar manualmente 5
cada uno de los frames vacíos (F7) y luego acomodar las imágenes una por una en
coordenadas X = 0.0 y Y = 0.0 que prefieres de forma manual o de forma
automática.
6-. Regresar a la Escena y arrastrar de la biblioteca el símbolo animación de

mariposa.
a)-. Colocar el símbolo en coordenadas X = 40.0 y Y = 40.0.
Con este paso queda concluido el súper tutorial mariposa voladora well done!!.
P.D. Presionar ctrl. + Enter para visualizar el trabajo final. Se agradecen en demasía
los comentarios emitidos a los tutoriales aquí presentados. La frase del tutorial es
Casarte es como ir a un restaurante con amigos. Pides lo que deseas y cuando 6
ves lo que el tu amigo tiene, te gustaría haber pedido eso.
Máscara e Insertar Imagen
Crea un Nuevo Documento Flash, luego importa la imagen que usaras de fondo.
Presiona Ctrl + R o:
Archvo > Importar > Importar a Escenario
Selecciona el archivo y dá clic en Abrir
Inserta una Nueva Capa haciendo clic sobre el icono con circulo rojo. Acomoda la
imagen donde desees que inicie la animación.
Selecciona la capa 2, Frame 1, e inserta el texto.
Sobre la capa 1 que es la imagen inserta un fotograma clave en el frame 30,

presionando F6 o:
Insertar > Línea de Tiempo > Fotograma Clave
Y mueve tu imagen a la segunda posición de la animación; en esta caso moví de
derecha a izquierda.
Selecciona cualquier frame entre el 1 y el 30 de la capa 1 y en la barra de Propiedades

haz clic en Animar > Movimiento.
Sobre la capa 2, en el frame 30 Inserta un fotograma presionando F5 o:

Insertar > Línea de Tiempo > Fotograma
Selecciona la capa 2 y haz clic sobre esta con el botón derecho del ratón. A
continuación aparecerá un menú de opciones, de donde selecciona Máscara y en
automático notarás el cambio y la aparición de la máscara.
Y Voila, tenemos una máscara animada.
BOTÓN CON COMPORTAMIENTO MOVIE CLIP
Comenzar por crear un documento de dimensiones 160 x 125 píxeles de ancho y alto
respectivamente, insertar un color de fondo negro. Esto puede resultar monótono para
algunos, pero también tomar en cuenta que hay personas que es la primera vez que
intentan hacer una animación en este fantástico y fabuloso programita denominado
flash.
En este botón involucrare un color de gradiente, para hacer un poco más llamativo el
efecto en la animación. Crear un símbolo nombrarlo gradiente y de comportamiento
clip de película, presionar ctrl. + F8 ó Insertar >> Nuevo símbolo para tal efecto.
10
En los siguientes dos pasos esta la explicación para hacer el gradiente el cual será
usado en al clip de película. Primero comenzar por hacer visible el panel llamado
Mezclador de colores, presionando shift + F9 ó Ventana >> Paneles de diseño >> Mezclador de
colores. Seleccionar en estilo de relleno la opción Lineal después de esto seleccionar el
color del lado izquierdo e insertar el numero de color el cual va hacer #072E2E.
El segundo paso para terminar de hacer el gradiente es seleccionar el color de lado

derecho y escribir el número de color el cual será #2547BA. Si encuentran otra
combinación de colores háganlo saber a través de sus comentarios.
El siguiente paso es hacer un rectángulo de dimensiones 150 de ancho x 35 de alto y

colocarlo en coordenadas X=0 y Y=0. Si siguen los paso verán que el gradiente queda
de izquierda a derecha, es por eso que deberán rotarlo y ajustarlo a como se muestra
en la imagen. Si desean mayor información de cómo rotar y ajustar un gradiente
visitar el tutorial llamado dibujar_menu.
11
Crear un nuevo símbolo nombrarlo boton y con un comportamiento de clip de película,

para crear el símbolo es presionar ctrl. + F8 ó Insertar >> Nuevo símbolo.
Abrir el panel de acciones, luego seleccionar el fotograma de de capa 1 y en el panel

acciones de fotograma escribir stop();
Insertar un fotograma clave vacío en el frame # 2 presionando F7 ó Insertar >> Línea de

tiempo >> Fotograma clave vacío. En el fotograma insertado arrastrar desde la biblioteca el
clip de película de nombre gradiente si la biblioteca no esta visible resionar F11, ctrl. + L ó
Ventana >> Biblioteca, y colocarlo en coordenadas X=0 y Y=0
12
Insertar 2 fotogramas clave en los frames # 7 y # 12 presionando simplemente F6

Seleccionar la imagen del fotograma # 2 luego en la opción de Color seleccionar Alfa y

posterior a esto, en la opción de porcentaje escribir 0 %N, repetir la misma operación
pero ahora con la imagen del fotograma # 12.
Ahora etiquetar el fotograma # 2 con el nombre de Avanzar_1, una vez hecho lo

anterior proceder a animar con la opción de movimiento.
13
En este paso crear la animación para el fotograma # 7, primero seleccionar dicho

fotograma y luego etiquetarlo con el nombre de Avanzar_2 y la animación será de
movimiento.
Abrir el panel de acciones, seleccionar el fotograma # 7 y escribir stop();
14
Ahora seleccionar el fotograma # 12 y el panel de acciones escribir gotoAndPlay(1);

Insertar una segunda capa por debajo de la primera, y en el la capa 2 arrastrar

nuevamente desde la biblioteca el clip de película gradiente y colocarlo en coordenadas
X=0 y Y=0. En este paso tendrán que rotar el clip de película de modo que el gradiente
quede de forma invertida al gradiente original, esta operación se puede realizar de
forma manual con la ayuda de la herramienta de transformación libre esto es presionando
la letra Q, ó vía Modificar >> Transformar >> Voltear verticalmente.
15
Trasladarnos a la escena, y en esta arrastrar desde la biblioteca del clip de película

boton, colocarlo en coordenadas X=5.0 y Y=5.0
Este paso es de suma importancia ya que de este depende el éxito de la película,

seleccionar la imagen no el fotograma e insertar el siguiente código en el panel de
acciones 16
on (rollOver) {
gotoAndPlay ("Avanzar_1");
}
on (rollOut) {
gotoAndPlay ("Avanzar_2");
}
on (press) {
getURL("http://www.solophotoshop.com", _blank);
}
Repetir la operación anterior dos veces más, y para darle un toque de botón escribir
Botón_01, Botón_02 y Botón_03.
Y como verán sean creado un menú de botones con efecto, sin ser botones si no dos
clips de película.
17
SUB MENÚ FLASH
Este tutorial es amplio por lo que hemos reducido el número de pasos al mínimo. Te
recomendamos que antes de inciarlo, veas los tutoriales Botón Básico.
Creamos un Nuevo Documento de las dimensiones que sean adecuadas para tu Sub
Menú, en esta ocasión fueron de 80X100 px.
En este ejemplo hemos usado las cordenadas X=0, Y=0 como ya lo hemos explicado
en anteriores tutoriales.
Luego crea el botón que nos servirá de base para el sub menú. Inserta un Nuevo
Símbolo presionando la tecla Ctrl + F8
o vía Insertar >> Nuevo Símbolo
Nombrado automáticamente como Símbolo 1 con un Comportamiento de botón ;-P

A este símbolo le damos 2 estados, reposo y sobre, editamos luego el segundo estado
de nuestro boton cambiandole el color. Contrario al tutorial Botón Básico no
agregaremos el texto aún.
Luego de que agregamos nuestros dos estados del botón procedemos a colocar una
Zona Activa presionando F6 como se muestra en la imagen.
18
Ahora crea un Nuevo Símbolo que llamamos menú (o submenú) con un

comportamiento de Clip de Película. Este servirá para hacer la animacion del sub menú
que puede ser en cualquier dirección, en este caso será uno de caída vertical.
Abre la biblioteca presionando F11, luego arrastra el Símbolo 1a la capa 1, frame 1.

Toma la Herramienta de texto y escribe el nombre o título que desees, nosotros lo

nombramos "Mostrar submenu" como lo puedes ver en la imagen a la derecha.
19
En el frame 4 de la capa 1 inserta un Fotograma Clave presionando F6 o desde
Insertar >> Línea de Tiempo >> Fotograma Clave.
Agrega una Nueva Capa, la Capa 2 y colocala debajo de la capa 1. Entonces inserta un
fotograma clave en la capa 2, frame 2 y ahí arrastra el Símbolo 1.
Algunas veces, al no insertar adecuadamente el fotograma clave se pueden insertar

fotogramas extra que se eliminan seleccionando los frames no deseados y presionando
Shift + F5.
Agregale texto al primer botón del sub menú, en este caso es boton_01.
Agrega una tercer capa y acomódala debajo del resto como se ve en la imagen de la
derecha. Inserta un fotograma clave en el frame 3 de la capa 3 y agrega nuevamente
el símbolo 1 en el frame 3. Agrega el texto.
Repetimos el procedimiento pero en este caso en una Capa 4 y Frame 4, tal cual se ve
en la imagen.
20
Ahora que ya tenemos nuestros botones selecciona el frame 4 de las capas 3 y 2 e

insertamos un fotograma Clave Presionando F6.
Continúa con la segunda parte del tutorial
.
Agrega una Nueva Capa, Capa 5 y en el frame 1 agrega un Stop. Selecciona el frame y
abre la barra de Acciones, copia el código de la Imagen. Esto para detener la
animación del sub menú.
21
En la misma capa 5 Agrega un fotograma clave en el frame 4. Luego escríbele otro

Stop, que servirá para detener la animación una vez que sea desplegado el sub menú.
Crea un Nuevo Símbolo llamado Zona_Activa de comportamiento botón.

Haz clic sobre Zona Activa e inserta un fotograma clave (F6) y entonces dibuja un
rectángulo con cualquier medida. Por el momento no importa la dimensión.
Crea una Nueva Capa, Capa 6 e insertale un fotograma clave en el frame 2 y arrastra
el Símbolo Zona Activa desde la Biblioteca.
La zona activa debe ser al menos 10 px mayor arriba, abajo y a los costados que el
área que abarca el sub menú completo. Las dimensiones las manejas seleccionando la
zona activa y editando desde la barra de propiedades.
22
Asegúrate de que también las coordenandas sean 10 px mayores en cada lado.
Selecciona la zona Activa (capa azul de la imagen) y en la barra de acciones agrega el

código que vemos a la derecha.
Con este código en la Zona Activa nos aseguraremos de que al salir de cualquiera de
los botones el sub menú regrese a su posición inicial.
23
Selecciona el botón de origen y en la barra de Acciones inserta el código que ves en la

imagen.
Con esto al pasar el cursor sobre el botón se despliegue automaticamente el sub menú.
Regresa a escena y desde la biblioteca arrastra el clip Menú. 24
En la barra de Propiedades escribe el nombre de Submenu (usado en el código de la

imagen anterior como _root.Submenu.play...)
Presiona Ctrl + Enter para ver el resultado.

CURSOR PROGRAMADO PARA PERSEGUIR AL PUNTERO WINDOWS.
En el siguiente tutorial encontraras el código action script para programar una animación (cursor) la cual siga
(persiga, acose) al puntero de Windows hasta alcanzarlo. También encontraras en la explicación como hacer
una animación de movimiento para simular el movimiento de un ojo simpático. El tutorial en lo particular me
pareció muy divertido, disfrútalo ¿comenzamos? Good luck!!.
1-. Primero hacer un documento (Ctrl. + J) con las siguientes propiedades.
a)-. Las dimensiones para este tutorial en particular son 400 * 250 píxeles de ancho y alto.
b)-. Usar como color de fondo #999999.
c)-. Utilizar como velocidad de fotogramas 20 fps.
25
2-. Crear el único símbolo (Ctrl. + F8) del cual consta la película.
a)-. Colocar como nombre acosador.
b)-. Seleccionar en la opción Tipo Clip de película.
3-. Cambiar el nombre de la capa por el de bg, dibujar un fondo para el ojo.
a)-. Insertar un fotograma (F5) en el frame # 10.

b)-. El tamaño del fondo es de 270.0 * 175.0 píxeles de ancho y alto.
c)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0.
26
4-. Insertar una segunda capa y cambiarle el nombre por ojo movimiento.
a)-. Dibujar un óvalo (O) más pequeño de dimensiones 65.0 * 65.0 píxeles.
b)-. Colocar la forma dibujada en coordenadas X = -102.0 y Y = 0.0.
c)-. Insertar un fotograma clave (F6) en el frame # 10.

5-. Este paso es sumamente sencillo ya que solamente se insertara un fotograma clave (F6) en el frame # 5.
27
a)-. Después colocar la forma del fotograma 5 en coordenadas X = 102.5 y Y = 0.0.
6-. Seleccionar los fotogramas entere el 1 y el 9.
a)-. Abrir la barra de propiedades y seleccionar en la opción Animar Movimiento.

7-. Regresar a la Escena y arrastrar desde la biblioteca el símbolo acosado.
a)-. Reducir las dimensiones del símbolo a 20.0 * 13.0 píxeles.
Nota colocar el símbolo en cualquier parte de la Escena.

28
8-. Seleccionar el símbolo (no el fotograma).
a)-. Abrir la barra de Acciones – clip de película e insertar el siguiente código action script.
onClipEvent (load) {
_x = 0;
_y = 0;
velocidad = 20;
onClipEvent (enterFrame) {
posicionX = _root._xmouse;
posicionY = _root._ymouse;
_x += (posicionX - _x)/velocidad;
_y += (posicionY - _y)/velocidad;
Con este paso queda concluido el tutorial, espero que lo aplique a tus animaciones Web well done!!
29
P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado, diseña otra forma de acosador y publica en este
espacio tus archivos
Crear un Botón con Relieve
Ejercicio paso a paso.

1 Dibujamos un rectángulo en el área de trabajo.
2 Seleccionamos el fondo.
3 Cambiamos el color de fondo del rectángulo. Por ejemplo a gris.
4 Con la herramienta texto escribimos el texto que queramos en el interior del rectángulo.
Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de relieve.
5 Seleccionamos los bordes izquierda y superior.
6 Modificamos el color de dichos bordes. Le damos el color blanco.
7 Seleccionamos ahora el borde inferior y aplicamos un color gris oscuro.
Ya va tomando relieve, ahora vamos a crear los diferentes estados.
30
8 Seleccionamos el botón.
9 Activamos la opción de menú Insertar → Nuevo Símbolo...
10 Marcamos el comportamiento de botón y le damos un nombre. Pulsa Aceptar.
11 Hacemos doble clic sobre el botón para editarlo.
12 Mediante F6 creamos fotogramas clave en cada uno de los fotogramas correspondientes a los
estados del botón.
13 Seleccionamos el fotograma Presionado.
14 Modifiquemos ahora el borde inferior y el derecho del botón aplicándole el color blanco.
15 Finalmente seleccionemos los bordes superior e izquierdo y démosle el color negro.
Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como están puesto
que no deseamos que haga nada mientras no pulsemos el botón y el área de acción es la que
comprende nuestro rectángulo.
El resultado obtenido es el siguiente. Podemos pinchar sobre él y comprobar el efecto.

Efecto Caida de Nieve en Paisaje con Flash
El efecto de nieve que cae sobre un paisaje nevado es muy sencillo de realizar
disfrútalo. ¿Comenzamos?.
31
1.-Comenzar por crear el documento de 300 * 220 píxeles de ancho y alto
respectivamente.
a) Como color de fondo usar el #666666.
b) En la casilla de Velocidad de fotogramas escribir 120.
2.-El tutorial cuenta con un solo símbolo, el cual tiene un pequeño truco oculto que
sino lo pones el trabajo no servirá para nada.
a) Crear el símbolo (ctrl. + F8) dar como nombre copo de nieve.
b) Seleccionar Clip de película como comportamiento
c) (Truco) seleccionar la casilla de Avanzado para desplegar las opciones del
símbolo, al Seleccionar la casilla esta pasará de Avanzado a Básico.
d) Luego en la opción Identificador escribir la palabra flake.
e) En Vinculación seleccionar las opciones Exportar para ActionScript y Exportar
en primer fotograma.
3.-Una vez ubicados en el símbolo, dibujar la forma que va a representar al copo de

nieve (flake).
a) La forma no debe de tener borde y el color deberá de ser #FFFFFF.
b) colocar el dibujo en coordenadas X = 0.0 y Y = 0.0.
32
4.-Regresar a la Escena e importar (ctrl. + R) la imagen que ayudará a dar el efecto.

a) La imagen debe de tener las mismas dimensiones que el documento estas son 300
* 220 píxeles.
b) Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.
5.-Arrastrar desde la biblioteca el símbolo copo de nieve a la escena.

a) Escribir como Nombre de instancia nieve.
b) Colocar el símbolo un poco fuera del escenario en coordenadas X = 1.0 y Y = 33
-5.0.
6.-Para terminar con el tutorial, seleccionar el fotograma.

a) Abrir la barra de Acciones – Fotograma.
b) Insertar el siguiente código.
amount = 300;
mWidth = Stage.width;
mHeight = Stage.height;
for (var i = 0; i<amount; i++) {

thisnieve = this.attachMovie("flake", "flake"+i, i);
with (thisnieve) {
_x = Math.random()*mWidth;
_y = Math.random()*mHeight;
_xscale = _yscale=_alpha=50+Math.random()*50;
}
thisnieve.yspeed = Math.random()*2.5+1;
thisnieve.onEnterFrame = function() {
this._y += this.yspeed;
if (this._y>=mHeight) {
this._y = -10;
this._x = -10+Math.random()*mWidth;
}
if (this._x>=mWidth || this._x<=0) {
this._y = -10;
this._x = -10+Math.random()*mWidth;
}
};
}
Y con esto queda concluido el ejercicio. NOTA: tener mucho cuidado en el paso dos.
34
P.D. Presionar ctrl. + enter para visualizar el trabajo

Animación de nubes
En la siguiente explicación aprenderás a convertir un Clip de película en un

Componente con el fin de hacer una animación de nubes, una vez creado el
componente le pondremos unas cuantas acciones. Con las acciones insertadas no
habrá la necesidad de realizar ningún tipo de animación ya sea de Forma o
Movimiento. Solamente se crearan dos símbolos esto es de los pasos básicos de
realizar en flash, sin embargo, tener mucho cuidado en los pasos 5 y 6 ya que desto
depende el éxito de la película. Y como la práctica hace al maestro ¿comenzamos?
Good luck!!.
1-. El primer paso es crear un documento (ctrl. + J), con las siguientes propiedades.
a)-. Dimensiones 300 * 250 píxeles de ancho y alto.
b)-. Utilizar como Color de fondo #33CCFF.
c)-. Para que la película tenga con un poco más de realismo usar en Velocidad de
fotogramas 20 fps.
35
2-. Crear el primero de dos símbolos (ctrl. + F8).

a)-. Nombrarlo nube.
b)-. Seleccionar como Tipo Clip de película.
3-. En este símbolo dibujar una forma la cual simule una nube. El Color de trazo
#000000 y Color de relleno #FFFFFF.
a)-. Tener cuidado de no hacer la forma de la nube muy grande esto con el fin de no
modificarla después.
b)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0.
36
4-. Crear el segundo símbolos (ctrl. + F8).
a)-. Nombrarlo nube componente.
b)-. Seleccionar como Tipo Clip de película.
5-. Abrir el panel de la Biblioteca (F11).

a)-. En la biblioteca hacer clic con el botón derecho del ratón sobre el símbolo nube
componente.
b)-. Seleccionar en el menú desplegado Definición de componente…
37
6-. Al aceptar el paso anterior se abrirá el siguiente panel Definición de

componente, agregar 3 Parámetros presionando el signo +.
a)-. Cambiar el Nombre de cada uno de los parámetros por vel, alfa y x_max.
b)-. Cambiar el Valor de los parámetros 10, 100 y -900. el panel tiene más
complementos pero por el momento solamente nos ocuparemos de estas dos variables
Nombre y Valor
7-. Una ves que se cambio el tipo Clip de película por del de Componente, tambien
cambiara el icono como lo podrás apreciar en la biblioteca.
a)-. Arrastrar desde la biblioteca el símbolo nube hasta el Componente o símbolo
nube componente.
b)-. Colocar el símbolo en coordenadas X = 0.0 y Y = 0.0.
c)-. Abrir la barra de Acciones – clip de película e insertar el siguiente código action
script.
onClipEvent (load) {
_alpha = _parent.alfa;
}
(_x>_parent.x_max) ? (_x -= _parent.vel) : (_x=0);
}
38
8-. Regresar a la Escena y arrastrar desde la biblioteca 2 veces el Componente nube

componente.
a)-. Colocarlos fuera de la Escena coordenadas X = 350.0 y Y = 40.0 (pare
superior derecha).
9-. Seleccionar alguno de los dos Componentes (símbolos) arrastrados a la Escena y 39

abrir el panel de Parámetros.
a)-. Modificar los valores de cada uno de los Parámetros 10, 50 y -750.
Nota si agregas varias veces el componente y modificas los parámetros
adecuadamente simularas que la transición de la animación puede resultar al
azar.
Con este paso queda concluido el ejercicio.

P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado. 40
Creación de un lightsaber (Sable de luz)
Paso 1.- Dibujos preliminares
Para este ejemplo hemos elejido dibujar el lightsaber que Anakin Skywalker utiliza en Star Wars -
Episodio III.
Puedes buscar otras imágenes o crear tu propia arma jedi aplicando los mismos conceptos que se
explicarán en este tutorial.
Abrimos un nuevo documento Flash con las siguientes características:

Fondo: negro, Dimensiones: 200 px (anchura) x 500 px (altura).
A la capa actual nombramos: "foto". Creamos 4 capas superiores con los nombres de: "rotulos",
"acciones", "botones" y "lightsaber".
En la capa "foto" importamos la foto del lightsaber. Archivo > Importar > Importar a escenario.
Para este ejemplo el dibujo será vertical, por lo que rotamos la foto 90º.
Seleccionamos la capa "lightsaber". Del panel de herramientas elegimos la Herramienta

Rectángulo (r). Dibujamos un rectángulo con borde negro. Activamos el panel Mezclador de
colores (shift+F9) donde elegimos que el estilo de relleno sea: "Lineal", asignamos una selección
de colores entre diferentes tonos de plomo y blanco como se muestra en la figura. Para aumentar
más punteros de tonalidades, simplemente se dan clicks en la barra de colores donde se desee
ingresar un tono más. El máximo número posible es de 8 diferentes tonos. Por defecto los tonos
estarán de forma vertical. 41
Si por algún motivo se necesita ajustar el relleno, lo seleccionamos con la herramienta de

transformación de relleno (f), aparecerá un contorno con 2 símbolos sobre una línea que demarca
el área del relleno, con el símbolo de un cuadrado, se acorta o aumenta el área del relleno y con
el símbolo de un círculo se rota el mismo.
Seleccionamos la herramienta de selección (v), acercamos el cursor al centro de la base del

rectángulo y manteniendo el mouse presionado curveamos el lado inferior como se muestra en la
imagen superior.
Tip.- Al aproximar la herramienta de selección (v) al borde de una figura, ya sea relleno o trazo,
el cursor cambia a una flecha negra con una curva debajo, si es un lado de la figura; o a una
flecha negra con un ángulo recto, si es una arista. En ambas situaciones se mantiene presionado
el botón principal del mouse para deformar la figura según se desee.
Seleccionamos el borde negro del dibujo y lo convertimos en relleno mediante: Modificar > Forma
> Convertir líneas en rellenos. Esto dará mejor calidad al dibujo cuando se disminuya su tamaño.
Convertimos la figura en símbolo (F8) tipo Clip de Película con el nombre de: "parte_metal". Este
será nuestro principal símbolo para dibujar la empuñadura del lightsaber, ya que lo reutilizaremos
en varias ocaciones con el fin de realizar un archivo liviano para internet y agilizar a la vez el
proceso de dibujo.
Tip.- La reutilización de símbolos en Flash repercute en un ahorro de los recursos del mismo; al
no crear nuevos símbolos y dibujos, el archivo termina pesando menos, siendo esto un factor de
importancia en toda publicación web.
Paso 2.- Dibujo de la empuñadura
Seleccionamos el símbolo "parte_metal" y lo copiamos repetidas veces.
Tip.- La manera más rápida de realizar copias de un símbolo es arrastrarlo con el mouse
mientras se presiona la tecla "ALT".
Con la ayuda de la herramienta de Transformación libre (q) modificamos las copias escalando,
rotando y sesgando, según sea necesario. En la última imagen se ha realizado una modificación de
42
color al símbolo, seleccionando en la barra de Propiedades: Color > Tinta: Negro al 72%.
Tip.- La organización de los símbolos en un mismo fotograma se realiza mediante: Modificar >
Organizar > Traer al frente, traer hacia adelante, enviar hacia atrás o enviar al fondo. La
manera más rápida de hacerlo es mediante los hotkeys: Ctrl + Shift +↑, Shift +↑, Shift +↓, Ctrl +
Shift +↓ respectivamente.
43
Pasamos a dibujar los los detalles que sobresalen en la parte superior de la empuñadura. Para
este fin, la reutilización del símbolo "parte_metal" es más que suficiente. Entonces realizamos
copias del mismo, las escalamos, rotamos y ordenamos.
Para realizar la placa dorada central, seleccionamos el símbolo "parte_metal", lo duplicamos

mediante: Modificar > Símbolo > Duplicar símbolo, o con el botón derecho del mouse. Ingresamos
a este nuevo símbolo y cambiamos el color plomo del relleno por un amarillo semejante a la
imagen, además dibujamos con la herramienta Rectángulo las ranuras de la placa.
Para el acabado central del metal, dibujamos 2 rectángulos a cada lado de la placa, de color
negro y con alfa = 30%, para su cuadriculado seleccionamos la herramienta Borrador (E), elegimos
una forma cuadrada y borramos alternadamente ambos rectángulos. Con todo esto la empuñadura
esta terminada, es recomendable seleccionar todos los elementos y guardarlos en un nuevo

símbolo.
Paso 3.- Dibujo del laser
Se dibuja un largo rectángulo de color: "3D6DFF", para el brillo realizamos Modificar > Forma >
Suavizar bordes de relleno, Distancia = 20 px, número de escenarios = 20, expandir.
Seleccionamos el rectángulo original y cambiamos su relleno a blanco. Convertimos el dibujo en
símbolo y lo posicionamos encima de la empuñadura. El resultado: un arma mortal de un Jedi.
44
Paso 4.- Creación de botones
Esta parte es opcional, lo que se hará simplemente es agregar interactividad para que el
lightsaber tenga un laser azul o rojo.
Nos ubicamos en el fotograma 19 y seleccionamos todas las capas a esa altura, click derecho del
mouse y elejimos insertar fotograma.
En la capa "lightsaber" insertamos un nuevo fotograma clave en la capa 10, seleccionamos el

símbolo del laser de este fotograma y en propiedades cambiamos su color en Tinta: Rojo 85% . Se
puede crear un nuevo símbolo que contenga un rectángulo rosado casi blanco, para ponerlo en el
centro del sable rojo y darle más brillo.
En la capa "rotulos" en el fotograma 1 y en el 10 insertamos fotogramas claves y los etiquetamos

como "fuerza" y "darkside" respectivamente.
En la capa "acciones" insertamos fotogramas claves en los fotogramas 8 y 18, abrimos el panel de
acciones (F9) y en ambos fotogramas insertamos el código:
45
stop();
En la capa "botones" creamos 2 botones de distinto color de la forma que uno quiera, más una
pregunta y el texto de las opciones para cada selección. Seleccionamos cada botón creado e
ingresamos las siguientes acciones:
Para el 1º botón:
on (release){
gotoAndPlay("fuerza");
}
Este lleva al sable laser azul. Y para el 2º botón:
on (release){
gotoAndPlay("darkside");
}
El resultado final es:

46
Que la fuerza te acompañe.
Programar una Marquesina en Fash Mx
El tutorial lleva algunas líneas de código Action Script
Hola que pasa de nuevo por tu mente. Yo por lo pronto realice el siguiente tutorial, el
cual es una marquesina es muy fácil y sencillo de realizar ya que solo posee dos
símbolos los cuales son un Clip se película y un Botón. El tutorial lleva algunas
líneas de código Action Script pero como soy demasiado generoso las proporcionaré
como siempre. ¿Comenzamos?.
1-. Comenzar por hacer un documento (ctrl. + J) de 260.0 * 100.0 píxeles.

a) Como color de fondo #A7B5CE.
b) La velocidad de fotograma en esta ocasión será 10 fps.
2-. Crear el primer símbolo (ctrl. + F8).

a) Nombrarlo cambiar texto.
b) Dar como comportamiento Botón.
47
3-. Ubicados en el símbolo hacer un botón de dos estados (Reposo y Sobre).

a) El diseño del botón tiene como dimensiones 115.0 * 25.0 píxeles.
a) Colocar el diseño del botón en coordenadas X = 0.0 y Y = 0.0.
4-. Hacer el segundo símbolo (ctrl. + F8).

a) Nombrarlo línea de texto.
b) Dar como comportamiento Clip de película.
5-. Ubicados en el símbolo cambiar el nombre de la capa por el de marco.

a) Dibujar un rectángulo, el color de la línea #000000 y como color de fondo
#7FE5FE.
b) Las dimensiones son 250.0 * 25.0 píxeles.
c) Colocar el dibujo en coordenadas X = 0.0 y Y = 0.0.
48
6-. Insertar una segunda capa, cambiar el nombre por texto.

a) Ocultar la capa marco.
b) Introducir un campo de texto dinámico, seleccionar en tipo de línea (Línea
única).
c) Las dimensiones tendrán que cubrir el total del rectángulo 245.9 * 24.1 píxeles.
d) Colocar el campo de texto en coordenadas X = 1.0 y Y = 0.0.
e) El tamaño de la fuente es 18.
f) Escribir en el espacio Var: (variable) marquesina.
g) Hasta este punto se termino en lo que corresponde al los símbolos
7-. Regresar a la escena cambiar el nombre de la capa por el de texto 1.

a) Arrastrar desde la biblioteca el símbolo línea de texto.
b) Escribir como Nombre de instancia bar_scroll.
c) Colocar el símbolo en coordenadas X = 5.0 y Y = 5.0.
49
8)-. Seleccionar el símbolo no el fotograma.

a) Abrir la barra Acciones – Clip de película.
b) Escribir el siguiente código Action Script.
_parent.Txt.Display();
}
9-. Insertar una segunda capa cambiar el nombre por el de texto 2.

a) Ocultar la capa texto 1.
b) Dibujar un rectángulo de color de línea #000000 y color de relleno #7FE5FE.
c) Las dimensiones son 250.0 * 25.0 píxeles.
d) Colocar el rectángulo en coordenadas X = 5.0 y Y = 40.0.
50
10-. Sobre el rectángulo dibujado insertar un campo de texto Introducción de texto.

a) Seleccionar en tipo de línea (Línea única).
b) En el espacio Var: (variable) escribir texto.
c) El campo de texto tendrá que cubrir el espacio del rectángulo. Dimensiones 251.3 *
22.1 píxeles.
d) Colocar el campo de texto en coordenadas X = 3.6 y Y = 41.0.
11-. Introducir una tercera capa y cambiar el nombre por el de botón texto.
a) Ocultar la capa texto 2.
b) Arrastrar desde la biblioteca el símbolo cambiar texto.
c) colocar el símbolo en coordenadas X = 72.0 y Y = 70.0. 51
12-. Seleccionar el símbolo no el fotograma.

a) Abrir la barra de Acciones – Botón.
b) Escribir el siguiente código Action Script.
on (press) {
Txt.cambiar_texto(texto, true);
}
13-. Insertar una capa más cambiar el nombre por el de acciones 1.

a) Ocultar la capa botón texto.
b) Abrir la barra Acciones – Fotograma.
c) Insertar el siguiente código Action Script.
52
var Txt = new Scroll(bar_scroll, 25, 35);
Txt.cambiar_texto(" Espera no cambies de sintonía www.solophotoshop.com ");
14-. Y para terminar insertar la última capa y nombrarla acciones 2.

a) Insertar como código Actin Script en la barra de Acciones – Fotograma.
Scroll = function (mc, maxString, waitingFrame) {

this.mc = mc;
this.waitingFrame = waitingFrame;
this.maxString = maxString;
this.currentLetter = 1;
this.wait = 0;
};
Scroll.prototype.cambiar_texto = function(text, bReset) {
if (arguments[1] == null) {
bReset = true;
}
this.text = text;
if (bReset) {
}
};
Scroll.prototype.Display = function() {
if (this.currentLetter<=this.maxString) {
this.mc.marquesina = this.text.substr(0, this.currentLetter);
} else {
this.mc.marquesina = this.text.substr(this.currentLetter-this.maxString,
this.maxString);
}
if (this.currentLetter == this.text.length) {
if (this.wait
this.wait++;
} else { 53
this.wait = 0;
}
} else {
this.currentLetter++;
}
};
Con este paso queda concluido el ejercicio buena suerte.

P.D. Presionar ctrl. + enter para visualizar el resultado el trabajo realizado
Menú Sin Fin 54
Ahora vamos a ver un menú muchas veces visto pero pocas veces explicado. Se trata de un menú en el que,
dependiendo de la posicón del puntero, los botones se recorren hacia la izquierda o derecha y vuelven a
aparecer infinitamente. Esto es a lo que me refiero:
En este caso en particular, aparecen 6 botones, sin embargo vamos a desarrollar un código en el que no
importará la cantidad de botones, siempre y cuando sean más de 4, esto debido al espacio que tenemos para
mostrarlos.
Comenzaremos con una escena de 420 x 120 pixeles y un botón de 80 x 80 pixeles que se encuentra dentro de
un MovieClip. Dicho MovieClip tendrá que ser vinculado con la escena con el nombre mc_boton y contiene
un campo de texto dinámico llamado numero.
Pueden descargar el archivo preparado para este ejercicio:
Lo primero que tendremos que hacer será generar los duplicados del MovieClip mc_boton dentro de la escena.
Para ello definiremos algunas variables que nos servirán para asignar la cantidad de botones, el espacio entre
ellos, el ancho y por último obtendremos el ancho total del grupo de botones. Después de ello generaremos las
copias. El siguiente código deberá insertarse en el primer cuadro de la escena:
// Cantidad de botones
cantidad = 6;
// Ancho del botón
ancho = 80;
// Distancia entre botón y botón
espacio = ancho + 20;
// Ancho total de la serie de botones
limite = cantidad * espacio;
for(i=0; i<cantidad; i++) {

_root.attachMovie("mc_boton","mc_boton"+i,10+i);
ref = _root["mc_boton"+i];
// Posición Vertical (_y)
ref._y = 20;
// Posición Horizontal (_x) + margen (20px)
ref._x = ( espacio * i ) + 20;
// Asignamos el texto del boton
ref.numero.text = i+1;
}
Ahora les muestro a qué corresponden las variables ancho, espacio y limite:
55
Nos hace falta hacer que los botones se muevan dependiendo de la posición del mouse. El secreto de este
ejercicio es hacer que, cuando los botones comiencen a caminar hacia la derecha, entonces que el último botón
pase a la izquierda del primero. Y en caso de que los botones se recorran hacia la izquierda, en cuanto el botón
del extremo izquierdo salga de la escena, entonces hacerlo pasar a la derecha del grupo de botones.
Les muestro gráficamente lo que necesitamos lograr. Pasen el mouse sobre la imagen y analicen el
comportamiento de la posición de los botones:
La solución es sencilla:
1- Cuando el botón se encuentre a la izquierda de la coordenada

-ancho en x, entonces lo pasaremos a la derecha de los demás botones incrementando el valor de limite a la
posición horizontal del objeto ( _x += limite ).
2- Cuando el botón se encuentre a la derecha de la coordenada limite - ancho, entonces pasaremos al objeto a la
izquierda del grupo de botones restando el valor de límite a la posición horizontal del objeto ( _x -= limite ).
Vamos a agregar el código del primer cuadro de la escena para obtener la velocidad de desplazamiento
resultado de la posición del puntero:
cantidad = 6;
ancho = 80;
espacio = ancho + 20;
limite = cantidad * espacio;

_root.attachMovie("mc_boton","mc_boton"+i,10+i);
ref._y = 20;
ref.numero.text = i+1;
}
vel = 0;
onEnterFrame = function() {
vel = int(((_xmouse - 210)/-210) * 10);
}
Y ahora el código del MovieClip que contiene el botón, el cual lo agregaremos en el primer cuadro de la linea
de tiempo del MovieClip mc_boton. Este código es el que se encargará de alterar el orden de los botones:
56
onEnterFrame = function() {
// Ajustamos la posición del objeto
this._x += _root.vel;
// Si el objeto sobrepasa el límite derecho...
if ( this._x > _root.limite - _root.ancho ){
// ...pasamos el objeto a la izquierda
this._x -= _root.limite;
}
// Si sobrepasa la coordenada de la izquierda...
if( this._x < -_root.ancho ) {
// ...lo enviamos al extremo derecho
this._x += _root.limite;
}
}
El siguiente debe ser el resultado:
Un menú infinito.
Extra
He recibido muchos correos en los que me preguntan cómo hacer para que cada uno de los botones tenga su
propio aspecto o sus propias variables o acciones. He aquí la respuesta:
La manera más sencilla para hacer que cada uno de los botones sea diferente es generar cada uno de los
MovieClips necesarios dentro de nuestra librería y asignarles un nombre de vinculación (linkage) único y
consecutivo. Ejemplo: mc_boton0, mc_boton1, mc_boton2, etcétera.
Tendríamos que hacer un ligero ajuste al código original en la sección del for():
...

_root.attachMovie("mc_boton"+i,"mc_boton"+i,10+i);
ref._y = 20;
}
...
Podemos agregar código único a las acciones del botón de cada uno de ellos.
Nota: Al personalizar cada uno de los botones, ya no tiene sentido la línea ref.numero.text = i+1;, por lo que
la he eliminado del código.
57
Menú despegable
Por Roberto Gomez Bolaños
1. Primer Paso.
Veamos como funciona el menú, para eso te pido que clickes sobre el
cuadradito, verás en que consiste el primer paso, ya luego te explico como lo
hice, ahora es muy importante que investigues su funcionamiento, para que
comiences a formarte una idea de como funciona.
si prestaste atención, creo que estaremos de acuerdo si digo que el botón

tiene, acciones que serían más o menos así: " si me hacés un click muestro el
menú" y otra acción para cuando el menú esta visible que dice " si me haces
un click oculto el menú" sigamos..
2. Realizar el primer paso.

La primera parte consiste en un MC (movie clip) que posee en el primer frame (o
fotograma) un layer (o capa) con la acción:
stop ();
y en otro layer un botón, el cual contiene la acción:
on (release) { ......gotoAndStop(2);
}
¿y esta acción para que? y pues, en el segundo Frame del MC, colocás los botones que
mostrarán el menú.
Ahora creamos el segundo frame, justo como muestra la imagen superior, luego de colocar
los botones debes asignarle las acciones. La acción del botón que despliega el menu será:
on (release) { ......gotoAndStop(2);
}
58
para regresar el menú a su estado inicial.
Y al resto de los botones deberás colocarle las acciones que tu requieras...
Muy fácil no?
Ok, es muy simple? entonces intentemos complicarlo.
3. Segundo paso, el menú ahora tiene efecto!

La misma sugerencia que te hice en la primera pantalla, observa cada detalle
e intenta deducir como esta hecho.
Mi efecto no hará que nadie quede boquiabierto, ni tampoco pondrá a saltar del
entusiasmo, es solo a modo de ejemplo. - Pero... ¿y que tan complejo puede ser esto? -
Pues nada, es solo un poco de imaginación y motion tween, para quienes AS nos queda
grande aún. Veamos como lo hice.
4. Teoría del funcionamiento del menú

Para hacerlo mas simple, el menú consta de dos partes, como primera parte tenemos el
botón que mostrará y ocultará el menú, y segundo nos queda el efecto que muestra y oculta
los botones y los botones propiamente dichos. Todo esto claro, dentro de un MC.
Una forma util de organizarnos sería, ubicando todo en layers distintos, uno para las
acciones, pues necesitamos un "stop" en el primer fotograma, otro layer para el botón
principal. Y para los botones y la animación necesitaremos un layer para los botones otro
layer que transformaremos a "MASC" (máscara) y un paquete de chocolates,
...y procedemos a colocarlos de esta manera......

en la timeLine tendremos
y dentro del mc tendremos algo así....
59
Esto es lo que deberías tener en el primer fotograma, claro, sin las letras :P
Ahora, recuerda colocar el "Stop" en el primer fotograma, y cada cosa en su lugar...
Al botón principal, recuerda colocarle la acción:
on (release) {
......play();
}
en esta parte deberás colocar también la acción para cada botón del menú y también la
acción para que desaparezcan los botones si así lo deseas... [esta acción sería la misma que
para el botón principal, (la que está en el cuadro inferior)]
Recuerda tambien el rectangulo gris que dibuje en el layer MASC, es el área visible, (si
tienes dudas sobre MASCARAS, te recomiendo que veas el tutorial de máscaras antes de
seguir..
Ahora que tienes todo en el primer fotograma realicemos la animación de los botones.
Presta atención a esto...
En el layer botones, insertaremos un fotograma clave en el frame 20, al resto de las capas
también debes agregarle frames, así es que, en el frame 20 posiciónate en cada layer y
presiona F5 (insertar fotograma vacío).
Volvemos a "botones"
Selecciona todos los fotogramas y crea un motion tween (interpolación de movimiento) -
ya sé, que esto esta muy largo?, que a donde voy con esto? pues, ahora con el motion
tween creado, inserta un fotograma clave en el frame 10, selecciona el grupo de botones,
muévelos y colócalos dentro del área gris de la capa, que para mayor comodidad puedes
colocar en modo Contorno, (clikeando en el cuadradito de color que esta despues del ojito
y el candado)
aquí un ejemplo de como queda...
60
como verás, no solo hay un keyframe en "botones", sino que también hay otro
en el layer "acciones" y otro en el layer "botón"
En "acciones" debes colocar un "Stop" para detener la película y dejar que el
navegante seleccione alguna opción.. y al botón principal solo déjale la misma
acción de "play" que colocaste en el primer fotograma.
Y ya es hora de que pruebes tu propio menú desplegable....

Recuerda colocar una instancia de MC en el escenario y "Ctrl + Enter" para ver como
quedó!!!
Si tienes algun problemita, no te desesperes... antes de quemar nada, sería bueno que
revises desde el paso 4, comparando las imágenes, y verifica también las acciones en los
botones y los fotogramas...
De seguro no tienes problema alguno.
Ahora que verificaste lo fácil que puede ser crear un menú de seguro querrás agregarle
algunos otros truquillos.. como el de que aparezca con solo colocar el puntero sobre el
botón, o que desaparezca alejando el puntero..
5. Mejorando el menú
Bueno esto no es más que un simple truco con un botón invisible, ¿ha? si un botonito que
no tiene nada en ninguno de los tres primeros estados.. solo posee un cuadradito en el
ultimo estado "zona activa"
Esto lo usaremos de la siguiente forma, en el fotograma 10, donde colocaste el "stop"
colocaremos el botón invisible, y le colocaremos una acción que será, cuando el puntero
toque al botón esconder el menú.
Nno creas que esto es difícil, solo bastará con, crear 2 nuevos layers, ubicarlos al final, en
el último colocamos el botón, y en el anterior al último luego de convertirlo en máscara,
colocamos un gran rectángulo que usaremos de ventana,
aquí una imagen para que veas como sería...
61
por si te queda alguna duda, el rectángulo gris con una ventana al medio es el contenido de
"masc 2" y ese fondo celeste agua de pileta, es el botón invisible, que ha sido estirado para
abarcar el tamaño del rectangulo gris (masc 2)
En pocas palabras, lo que hicimos fue una máscara para que cuando el cursor toque el
botón invisible, desaparezca el menú...
Claro ahora hay que colocarle la acción al botón invisible...
on (rollOver) {
......play();
}
Atento que dice rollOver!

ahora podrías también cambiar la acción del botón principal en el primer
fotograma y colocar rollOver en vez de release,
Algo asi debería quedar el menú...
Por último, algunas sugerencias para los efectos...

- En vez de animar los botones, puedes animar la máscara
- Si quieres un mejor efecto puedes colocar cada botón del menu en un layer
distinto y animarlo independientemente.

Recuerda que al diseñar con flash creamos ilusiones... aprende a complacer al
navegante..
Que te sea útil, y cualquier pregunta, pues ya sabes.. puedes contactarme por
mp, icq o mail, por cualquier problema con el tuto o el ejemplo, y para mayor
comodidad, está el foro,
Hummm pero no olvides buscar, antes de preguntar!
Mucho hemos preguntado ya sobre este tema... Suerte!
Chespy.
Arrastrar y Soltar Elementos con el Ratón
Tutorial Flash
Tutorial por Jmx de FotoCreativo.net
ElQuique de ForoCreativo.net nos envía este tutorial Flash en el que muestra como
Arrastrar y Soltar elementos con el Ratón.
Bueno, debido a que existe una solucion mas sencilla hice una segunda version de este
minitutorial
62
1) Lo primero que hice fue crear un documento flash (con las propiedades por defecto)
2) Luego con CTRL F8, agregue un MovieClip que le llame mc_logoFC
3) Entre al MovieClip y pegue el logo de FC en una capa que le llame "logo" (jeje bien
pensado no?)
4) Regresamos a la seccion principal del documento "Scene 1" o "Escena 1" y le damos
nombre a la instancia del MovieClip. Este nombre de instancia sera necesario para
identificar cual es el objeto que queremos mover en la programacion del Action Script,
en este caso el nombre es "objetoFC"
63
64
5) Como se ve en la imagen he agregado una capa acciones y es en ella donde en el

frame 1 escribimos el codigo Action Script correspondiente, en este caso sera:
stop();
objetoFC .onMouseDown = function () {
this.startDrag();
}
objetoFC .onMouseUp = function () {
this.stopDrag();
}
nota: marque en otro color el nombre de instancia ya que es importante entender

donde se usa el mismo.

Practicas de Flash

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Practicas de Flash

Cargado por

Copyright:

Formatos disponibles

Practicas de laboratorio de Flash Macromedia

Lo primero que haremos es Crear un Nuevo Símbolo presionando Ctrl + F8

En este caso se le nombró gráfico y con un comportamiento del mismo nombre:

Desde la biblioteca se arrastra Símbolo "Gráfico" hasta la escena.

Selecciona el fotograma 1 de la capa "Guía: Capa 1" seleccionando alguna de las

Ahora añade un fotograma clave (F6) en la Capa 1, frame 30 y el cuadro moverla

Añade fotograma (F5) en la capa Guía: capa 1 en el fotograma 30.

Entre mayor sea el número de fotogramas totales la velocidad de movimiento de tu

Selecciona el frame 1 de la capa 1 y la forma muevela hasta el punto inicial de la guía

Presiona Ctrl + Intro para visualizar la animación.

Trabaja con flash en el movimiento de una mariposa.

El ejemplo SWF aquí presentado posee unas guías de movimiento. El ejercicio

1-. Hacer un documento (ctrl. + J) con las siguientes propiedades.

2-. Crear el único símbolo (ctrl. + F8) de que consta la película.

3-. Importar (ctrl. + R) la serie de imágenes. Aquí presento un pequeño truco,

5-. Al aceptar importar la secuencia de imágenes Flash MX automáticamente colocara

6-. Regresar a la Escena y arrastrar de la biblioteca el símbolo animación de

Máscara e Insertar Imagen

Selecciona la capa 2, Frame 1, e inserta el texto.

Sobre la capa 1 que es la imagen inserta un fotograma clave en el frame 30,

Selecciona cualquier frame entre el 1 y el 30 de la capa 1 y en la barra de Propiedades

Sobre la capa 2, en el frame 30 Inserta un fotograma presionando F5 o:

Y Voila, tenemos una máscara animada.

BOTÓN CON COMPORTAMIENTO MOVIE CLIP

El segundo paso para terminar de hacer el gradiente es seleccionar el color de lado

El siguiente paso es hacer un rectángulo de dimensiones 150 de ancho x 35 de alto y

Crear un nuevo símbolo nombrarlo boton y con un comportamiento de clip de película,

Abrir el panel de acciones, luego seleccionar el fotograma de de capa 1 y en el panel

Insertar un fotograma clave vacío en el frame # 2 presionando F7 ó Insertar >> Línea de

Insertar 2 fotogramas clave en los frames # 7 y # 12 presionando simplemente F6

Seleccionar la imagen del fotograma # 2 luego en la opción de Color seleccionar Alfa y

Ahora etiquetar el fotograma # 2 con el nombre de Avanzar_1, una vez hecho lo

En este paso crear la animación para el fotograma # 7, primero seleccionar dicho

Abrir el panel de acciones, seleccionar el fotograma # 7 y escribir stop();

Ahora seleccionar el fotograma # 12 y el panel de acciones escribir gotoAndPlay(1);

Insertar una segunda capa por debajo de la primera, y en el la capa 2 arrastrar

Trasladarnos a la escena, y en esta arrastrar desde la biblioteca del clip de película

Este paso es de suma importancia ya que de este depende el éxito de la película,

Nombrado automáticamente como Símbolo 1 con un Comportamiento de botón ;-P

Ahora crea un Nuevo Símbolo que llamamos menú (o submenú) con un

Abre la biblioteca presionando F11, luego arrastra el Símbolo 1a la capa 1, frame 1.

Toma la Herramienta de texto y escribe el nombre o título que desees, nosotros lo

Algunas veces, al no insertar adecuadamente el fotograma clave se pueden insertar

Ahora que ya tenemos nuestros botones selecciona el frame 4 de las capas 3 y 2 e

Continúa con la segunda parte del tutorial

En la misma capa 5 Agrega un fotograma clave en el frame 4. Luego escríbele otro

Crea un Nuevo Símbolo llamado Zona_Activa de comportamiento botón.

Selecciona la zona Activa (capa azul de la imagen) y en la barra de acciones agrega el

Selecciona el botón de origen y en la barra de Acciones inserta el código que ves en la

Regresa a escena y desde la biblioteca arrastra el clip Menú. 24

En la barra de Propiedades escribe el nombre de Submenu (usado en el código de la

Presiona Ctrl + Enter para ver el resultado.

CURSOR PROGRAMADO PARA PERSEGUIR AL PUNTERO WINDOWS.

1-. Primero hacer un documento (Ctrl. + J) con las siguientes propiedades.

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

c)-. Utilizar como velocidad de fotogramas 20 fps.

a)-. Colocar como nombre acosador.

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

a)-. Insertar un fotograma (F5) en el frame # 10.

b)-. El tamaño del fondo es de 270.0 * 175.0 píxeles de ancho y alto.

c)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0.

b)-. Colocar la forma dibujada en coordenadas X = -102.0 y Y = 0.0.

c)-. Insertar un fotograma clave (F6) en el frame # 10.

6-. Seleccionar los fotogramas entere el 1 y el 9.