Flash CS5

Mdulo XVI
Flash CS5
Mdulo XVI
Flash CS5
Crditos
Programa Suprate!
Presidente y Fundador
Ricardo Sagrera Bogle
Director General
Arturo X. Sagrera
Director Ejecutivo
Eduardo Cader
Equipo Institucional
Leyla Murcia de Guzmn
Ana Gloria Angel
Mercedes Segura
Programas Curriculares
Josu Fortis
Natali de Flores
Carlos Snchez
Diagramacin
CICOP, S.A. de C.V.
Primera edicin. Junio, 2012.
Esta publicacin es propiedad de la Fundacin Sagrera Palomo.
Queda prohibida la reproduccin parcial o total, directa
o indirecta, por cualquier medio del contenido del
presente Manual.
Para cualquier solicitud y asistencia relacionada con el Programa
Suprate! por favor contacte a Fundacin Sagrera Palomo.
Telfonos: (503) 2562-0290/2319-1319.
San Salvador, El Salvador.
CONTENIDO
CLASE 1: Entorno a Flash, Animacin
fotograma a fotograma
Qu es Flash cs5?
Ventana de inicio
Entorno de Flash
Fotograma
Animacin fotograma a fotograma
Ejercicio de aplicacin
Animacin fotograma a fotograma
con el efecto de luz
Papel cebolla, regla, guas y cuadrculas
Crucigrama
Tarea final
5
5
5
6
7
8
9
9
12
14
14
Clase 2: Interpolacin Clsica e

interpolacin de forma
Interpolacin Clsica
Interpolacin de Movimiento
Interpolacin de forma
Ejercicios de aplicacin
Tarea final
15
15
17
19
20
22
Clase 3: Lneas guas y Ejercicios de

INTERPOLACIONES
Lneas guas
Ejercicios guiados
Lgica de las matemticas
Tarea final
23
23
25
35
35
Clase 4: Mscaras y Smbolos

Mscaras
Smbolos
Crear un clip de pelcula
Animar un clip de pelcula
Juego de lgica matemticas
Tarea final
36
36
38
40
41
42
45
45
45
CONTENIDO
Clase 5: ActionScript bsico

ActionScript
Escenas
Tarea final
46
46
51
54
Clase 6: ActionScript
Variables y Condicionantes
Variables
Condicionantes
Sentencia if else
Tarea final
55
55
55
56
56
60
60
Clase 7: Continuacin de ActionScript

Propiedades de los clips de pelcula
Controlar las propiedades X y Y de un clip de pelcula
Utilizando condicionantes y propiedades X y Y
61
61
62
63
Clase 8: Creacin de CD interactivo

Navegacin entre archivos .swf
CD Interactivo
Tarea final
66
66
68
73
Clase 9: Trabajo final

Tarea final
Cuestionario
Crucigrama
74
74
74
75
Clase 10: Evaluacin Final

Entrega de trabajo grupal
Examen terico
Diferencias
76
76
76
76
Bibliografa
77
Mdulo XVI: Flash CS5
Clase 1
Entorno a Flash, Animacin

Fotograma a Fotograma
Indicador de logro: Utilizar tecnologa de creacin y manejo digital de animaciones para modificar o crear trabajos de arte que se usarn para el diseo web y grfico.
Qu es Flash CS5?
El software Adobe Flash Professional es un potente entorno de creacin de animaciones y
contenido interactivo y expresivo lder del sector. Disea experiencias interactivas envolventes
que se presenten de forma uniforme en ordenadores de sobremesa y mltiples dispositivos,
incluidos tablets, smartphones y televisores.
Actualiza a Flash Professional para combinar fcilmente varios smbolos y secuencias de animacin en una nica hoja de sprite optimizada para mejorar el flujo de trabajo, crear un contenido
ms atractivo usando extensiones nativas para acceder a las funciones especficas de los dispositivos y crear activos y animaciones que puedan usarse en HTML5.
Ventana de inicio
Fundacin Sagrera Palomo2012. Derechos reservados
Seleccionaremos ActionScript 3.0
Entorno de Flash
Conceptos bsicos
Escenario: Es el rea (que al inicio es blanco) donde insertamos diferentes objetos (imgenes
dibujos, texto, grficos, botones, videos, tanto creados en Flash o que son importados de otros
programas), que van a formar la imagen del programa, tanto esttica como animada.
rea de Trabajo: Est formado por el escenario y el rea que est alrededor, esta ltima no se
visualiza al ejecutar el programa, y es utilizada para ocultar algunos objetos.
Capas: en un escenario podemos tener objetos uno detrs del otro, o mostrar un efecto de
profundidad, este efecto est formado por Capas, cada capa es como un acetato transparente
que se coloca uno detrs del otro, adems de que cada objeto que hay en una capa es independiente de otra.
Lnea de Tiempo: La lnea de tiempo est formada por un conjunto de Fotogramas uno al lado del otro, se reproducen y visualizan en el escenario dependiendo del fotograma seleccionado, el cambio entre uno y otro fotograma es
el que genera la animacin.
Nos referiremos a la Barra de control de reproduccin = Barra de reproduccin.
Fotograma
Tenemos diferentes tipos de Fotogramas, estos son:
Fotograma en Blanco: Es el fotograma que an no se utiliza, al crear un nuevo
documento todos los fotogramas estn en blanco excepto el primero. Caractersticas: color gris y blanco.
Fotograma Clave Vaco: Es el fotograma preparado para introducir los objetos que
van a estar en el escenario, es vaco porque an no se agrega ningn objeto. Se incorpora presionando F7. Caracterstica: crculo blanco.
Fotograma Clave: Cuando al escenario se le integra un objeto, el fotograma rellena
el crculo que est dentro de l para indicar que contienen un objeto. Se incorpora
presionando F6. Caracterstica: crculo negro.
Nmero de Fotograma: En la parte superior de los fotogramas, se indican el nmero de fotograma (con el nmero mltiplo de 5), marcando sobre el fotograma en recuadro rojo y con
una lnea que atraviesa el fotograma, el que se est ejecutando o visualizando en el escenario.
Cuando varios fotogramas se repiten, se juntan estos en uno solo, y el ltimo fotograma se
marca con un recuadro en vez de crculo.
Animacin Fotograma a Fotograma

En este ejercicio, se tratar de recrear un movimiento de un objeto y lo haremos teniendo el
mismo principio de cmo se hacen las imgenes gifs en Fireworks, que se realizaron fotograma
a fotograma (de Estado a Estado) y daremos por sentado que algunas herramientas de diseo
se conocen ya que son similares entre los programas de Adobe.
Pasos:
1. En el escenario crearemos un rectngulo.
2. Si queremos cambiarle color, seleccionamos el rectngulo con la herramienta de seleccin y luego desplegamos en los paneles la paleta de color
o de muestras.
Nota: Si no aparece algn panel visible podemos buscarlos en la pestaa de men Ventana. As mismo en la pestaa Ver podemos encontrar las
opciones de Reglas, Cuadrcula y guas que son muy necesarias para el
diseo de objetos.
3. Luego en nos ubicamos en la lnea del tiempo en el fotograma 2 y presionamos la tecla F2. Y despus movemos
un poco el rectngulo.
4. Repetimos el paso 3 pero teniendo en cuenta ubicarnos un fotograma ms adelante. Al final tendremos algo
como esto:
5. Presionamos las teclas Control + Enter y veremos la animacin fotograma a fotograma.
6. Guardar el Archivo. Archivo > Guardar como, buscar la ubicacin
donde se guardar y ponerle el nombre de Ejericicio1. El formato con
el cual lo guarda Flash es .fla
Nota: Tu docente explicar ms de los tipos de formato que puedes guardar los archivos en Flash
y su uso.
1. Crear una animacin en la cual irn apareciendo las letras de tu apellido cumpliendo las
siguientes caractersticas.
2. Del fotograma 1 5 aparecer la primera letra de tu apellido.
3. Del fotograma 6 10 aparecer la segunda letra.
4. Del fotograma 11 15 la siguiente letra, y as sucesivamente hasta tener todo el apellido.
5. Al final guardars el archivo como Ejercicio2.
Nota: Tu docente explicar detalladamente cmo realizar este ejercicio para que t lo hagas
despus solo en Flash.
Animacin Fotograma a Fotograma con el Efecto de luz

El ejercicio tratar de realizar con un efecto de movimiento en un crculo (Bola) una animacin
tan solo con mover la luz de enfoque del objeto.
Pasos:
1. Dibujar en el Escenario un crculo que lo encontrars en la misma opcin
del rectngulo.
2. Le cambiaremos color, seleccionando el rectngulo con la herramienta de

seleccin y luego desplegamos el panel de muestras y le pondremos un
color de degradado:
10
3. En este momento jugaremos un poco con el punto de luz del objeto.Y tendremos que fijarnos muy bien que cada vez que seleccionemos el objeto en
el fotograma siguiente seleccionemos bien el punto de luz que deseamos
mover. Por el momento seleccione el objeto.
4. Seleccione la Herramienta Transformacin de degrado que generalmente se
encuentra junto con la Herramienta Transformacin libre, y luego mueva hacia
una esquina superior el punto de luz.
5. Luego presionamos la tecla F6. Hacemos clic en el crculo para asegurarnos

que esta seleccionado y luego movemos un poquito el punto de luz.
Clic en el crculo (Importante)
Mover el punto de luz un poquito
6. Repetimos el paso 5 hasta que el punto de luz est en la esquina

inferior.
7. Incluso haremos que el punto de luz quede en la parte de afuera

del crculo para que este quede completamente negro. Desde luego
seguiremos repitiendo el paso 5 hasta que el crculo quede completamente oscuro.
8. Agregamos otros 5 fotogramas estando color negro el crculo para

que de un efecto en la bola que gira completamente y permanece
un tiempo razonable en color oscuro.
9. Probamos con Control + Enter la animacin.
11
12
Papel cebolla, regla, guas y cuadrculas

Algunas de las herramientas ms tiles en cualquier programa de diseo grfico o web son las
mencionadas en este tema ya que hacen que nuestro trabajo sea ms sencillo.
Papel cebolla: sirve para visualizar de forma atenuada varios fotogramas en la escena,
adems del fotograma donde tenemos situada la cabeza lectora. En el panel de la lnea del
tiempo encontrar esta opcin
Cuadrcula: La cuadrcula aparece en un documento como un conjunto de lneas detrs de las
ilustraciones en todas las escenas. Encontrar la opcin en Ver > Cuadrculas > Mostrar cuadrculas.
Regla: Las reglas nos permiten medir el tamao de los objetos. Tambin nos permite arrastrar
guas hacia el escenario. Encontrar la opcin en Ver > Regla
Guas: Las guas nos sirven para dar una mayor exactitud de ubicacin a nuestros objetos en
el escenario. Hacer clic en alguna de las reglas y arrastrar hacia el escenario. Se ver las lneas
de guas de color celeste. Para sacar guas solo es de ubicarse en la regla y arrastrar hasta el
escenario el cursor y aparecen las guas.
Pasos:
1. Activaremos las opciones de Cuadrcula y regla.
2. Dibujaremos lo siguiente en el Escenario utilizando la herramienta de valo
y poniendo guas en los bordes del dibujo:
3. Crearemos un fotograma clave presionando F6 y activaremos el papel cebolla. Selecciona una pierna del objeto con la herramienta Transformacin
libre y vers que en el centro del objeto aparece un crculo color blanco
que representa el punto de rotacin del objeto. Lo arrastraremos con el
cursor hasta el extremo superior.
4. Ahora nos ubicamos en la esquina inferior y el cursor se pondr en forma

de rotacin y moveremos el objeto y veras cmo el papel cebolla muestra
el objeto del fotograma anterior como marca de agua:
13
14
5. Repetimos el proceso 3 y 4 para los brazos as:
6. Ahora volveremos a repetir los pasos 3 4 en 3 fotogramas ms as:
Nota: Tu docente explicar ms opciones de este ejercicio de ser necesario.
Crucigrama
Tomado de:
http://didacticaypsicopedagogia.blogspot.
com/2012/02/crucigramas.html
Tarea final
Examinar la tarea final de la clase 9. Si es posible empezar desde este momento a trabajarla y
crearla.
Clase 2
Interpolacin Clsica e
Interpolacin de Forma
Indicador de logro: Evalan y seleccionan herramientas digitales para realizar tareas especficas de interpolacin de movimiento y formas.
Interpolacin clsica
Una interpolacin clsica es una animacin creada mediante la especificacin de distintos valores para una propiedad de objeto en distintos fotogramas. Flash Pro calcula los valores de dicha
propiedad entre los dos fotogramas. En ingls, la interpolacin recibe el nombre de tween
que, a su vez, viene de las palabras in between (intermedio).
Pasos:
1. Dibujar en el escenario la siguiente figura en el extremo superior izquierdo.
2. Ahora crearemos en smbolo la figura. Y presionamos F8. Nos aparecer

el cuadro de convertir nuevo smbolo. Dejamos el nombre como est, en
tipo ponemos Grfico y el registro estar en el centro.
15
16
Nota: Puedes averiguar ms de los smbolos en el siguiente link:

http://help.adobe.com/es_ES/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7deea.html
3. Ubicarse en el fotograma 24 y presionar F6 para crear un fotograma clave.

Ahora mueva la figura hasta el otro extremo superior derecho.
4. Ahora haz clic donde est el fotograma 1. Presiona la tecla Mayus (Shift) y
luego haz clic en el fotograma 24. Esto har que se seleccionen todos los
fotogramas.
5. Clic en Insertar > Interpolacin clsica
6. El resultado ser el siguiente:
7. Probar con Control + Enter
8. Ahora ubicando ms fotogramas claves y moviendo el smbolo, hars que

se desplace por todo el escenario.
Interpolacin de movimiento
Flash Pro admite dos tipos distintos de interpolacin para crear movimiento. Las interpolaciones de movimiento, nuevas en Flash CS4 Professional, son potentes y fciles de crear. Las
interpolaciones de movimiento permiten un control mximo sobre la animacin interpolada.
Las interpolaciones clsicas, que incluyen todas las interpolaciones creadas en versiones de
anteriores de Flash Pro, son ms complejas de crear. Mientras que las interpolaciones de movimiento ofrecen mucho ms control de una interpolacin, las clsicas proporcionan determinadas capacidades especficas que algunos usuarios pueden requerir.
Pasos:
1. Dibujar el siguiente objeto y convertirlo en un smbolo tipo clip de pelcula
como lo vimos en el paso 2 del ejercicio anterior:
2. Ubicamos la figura en la esquina inferior derecha. Y luego haciendo clic en

el fotograma 1 nos vamos al men Insertar > Interpolacin de movimiento. La
lnea del tiempo quedar como la figura siguiente:
17
18
3. Ahora nos ubicamos en el fotograma 30 y presionamos la tecla F6. Nos ubicamos de nuevo en el fotograma 30 y movemos la figura al otro extremo de
la Escena.Vers que deja un rastro o lnea color verde.
4. Ya tenemos un punto de inicio y un punto final. Desde este momento

podemos agregar fotogramas claves entre la interpolacin y mover el objeto o seguir agregando ms fotogramas claves despus del 30. En nuestro
ejemplo pondremos fotogramas claves en el 10 y el 20 y en los fotogramas
10 y 30 haremos la figura ms grande:
Nota: Tu docente explicar ms opciones o caractersticas de este proceso de ser necesario.
En la interpolacin de forma, se dibuja una forma vectorial en un fotograma concreto de la lnea
de tiempo y se modifica o se dibuja otra forma en otro fotograma especfico. Seguidamente,
Flash Professional interpola las formas intermedias de los fotogramas intermedios y crea la
animacin de una forma cambiante.
Caractersticas de la de Interpolacin de forma:
Se puede cambiar color.
Cambiar objeto.
Cambio de rotacin variada.
Pasos:
1. Dibujar la siguiente imagen en la Escena. Ser un cuadro color azul.
2. Ahora insertaremos un fotograma clave en el fotograma 30.Y eliminaremos

el cuadro azul y dibujaremos un crculo color verde tratando de dejarlo en
el mismo lugar que el cuadro.
3. Seleccionamos todos los fotogramas como lo vimos en el paso 4 del ejercicio de interpolacin clsica.
19
20
4. Ahora hacemos clic en men Insertar >Interpolacin de forma.
Nota: Tu docente explicar ms opciones o caractersticas de este proceso de ser necesario.
Ejercicios de aplicacin
1. Utilizando la interpolacin clsica pondr 2 crculos en capas diferentes. La animacin tratar que un crculo golpee al otro y este salga impulsada. Parecido al golpe de una bola de
billar. Ej.
Paso 1
Paso 2
Paso 3
2. Crear tres figuras en diferentes capas (crculo, tringulo y cuadro). Cada una llegar al fotograma 40 y le pondr una interpolacin de movimiento que realice diferentes movimientos.
Y con una figura puede probar la configuracin predefinida de movimiento que se encuentra en el men ventana. Ej.
Nota: Antes de crear el tringulo ser necesario que no tengas ningn elemento seleccionado y
luego selecciones la herramienta de PolyStar , clic despus en las propiedades y ah en las opciones
de configuracion de herramienta.
21
22
3. Con la herramienta de texto poner tu apellido. Este se transformar cada letra en una
figura geomtrica con interpolacin de forma. Ejemplo:
Paso 1
Paso 2
Paso 3
Nota: Para poder trabajar con el texto de forma individual debes de seleccionarlo y presionar 2
veces Control + B. Entonces podras cambiar color a cada letra. Y si todava quieres hacer mejor la
animacin puedes poner cada letra en una capa diferente.
Tarea final
Continuar realizando la tarea final de la clase 9.
Clase 3
Lneas guas y Ejercicios de

Interpolaciones
Indicador de logro: Organizan, analizan, sintetizan y usan ticamente la informacin adquirida
a partir de una variedad de fuentes y medios y crean trabajos originales.
Lneas guas
Las lneas guas son una herramienta muy til cuando queremos crear una interpolacin de
movimiento que recorra un trayecto en particular.
Pasos:
1. Primero prepararemos la Escena. Guardaremos las siguientes imgenes en
nuestra PC y que las puedes encontrar en:
http://www.oyungemisi.com/oyun-oyna/es/pista-de-carreras-de_b.jpg
http://3.bp.blogspot.com/_ANGyIMcy_A8/TQHz24hBajI/
AAAAAAAAAHQ/LY5gSb7jtCw/s1600/mariokartyoshi.jpg
Pista
Yoshi
Nota: Las imgenes puedes trabajarlas en Fireworks para hacerlas PNG

con fondo transparente de ser necesario.
23
24
2. Estando en flash importamos las imgenes con Control + R. Haremos que la

pista quede en una capa y en otra quedar la figura de Yoshi. Quedar de la
siguiente manera:
3. Creamos fotogramas claves con F6 en el fotograma 60 en las 2 capas.
4. Ahora hacemos clic en la capa donde esta la figura de Yoshi. Clic derecho
y seleccionamos Aadir gua de movimiento y aparecer una capa llamada
Gua.
5. Hacer clic en el fotograma 1 de la capa gua. En esta capa dibujaremos la

trayectoria que tendr la imagen de Yoshi. La trayectoria la podemos hacer
con el lpiz o la pluma.
6. Ahora en la capa donde esta Yoshi, realizamos una interpolacin clsica.
7. Nos ubicamos en el fotograma 1 en la capa de Yoshi y ubicar la imagen desde el centro de ella en donde empieza la lnea gua y en el ltimo fotograma
(60) ponemos a Yoshi al final de la lnea gua.
Fotograma 1
Fotograma 60
8. Probamos la animacin y veremos cmo la figura sigue el trazo de la lnea

gua.
Nota: Si se desplaza muy rpido la figura en la animacin puedes bajar
el nmero de fotogramas por segundo (fps). Cualquier duda o consulta
puedes realizarla a tu docente.
Ejercicios guiados:
Interpolacin clsica
En este ejercicio practicaremos la interpolacin de movimientos. El ejercicio tiene como objetivo sincronizar los movimientos de una animacin con interpolaciones de movimientos.
Lo que necesitaremos crear: mesa, taco, bola blanca y bola de choque.
25
26
Cada objeto lo crear en una capa diferente y se recomienda poner candado a las capas que no
utiliza y ocupar lneas guas para hacer los dibujos.
1. Crear los objetos como aparece en la figura de arriba.

2. El taco tendr que hacer un movimiento hacia atrs por lo que haremos una Interpolacin.
Primero en la capa de taco nos iremos al fotograma nmero 20 y creamos fotograma clave
(F6). Lo tendremos que hacer en todas las capas para ver todos los objetos en el escenario
as.
3. Creamos la Interpolacin clsica al taco y en el ltimo fotograma del Taco (20), movemos
el taco hacia atrs (lo mejor es seleccionar el taco y moverlo con las cursoras).
4. Nos ubicamos en el fotograma nmero 32, agregamos un fotograma clave. Lo haremos en

todas las capas para ver todos los objetos. En la capa del taco haremos la interpolacin
clsica la cual simular que golpea a la bola blanca. Para eso en el ltimo fotograma del taco
este estar a la par de la bola blanca.
5. Nos iremos hasta el fotograma 45 que ser la distancia que recorrer la bola blanca hasta
la bola Fucsia. En el fotograma 45 de la Bola blanca estar a la par de la bola fucsia. La bola
blanca tendr por supuesto una interpolacin de movimiento para realizar este efecto.
6. Nos Iremos al fotograma nmero 55 y ah pondremos una interpolacin de movimiento

para la bola fucsia que tendr que salir para el lado del fondo de la mesa y recordar que la
bola blanca saldr hacia el lado derecho. Esos movimientos los haremos en los fotogramas
finales de cada capa de cada bola.
27
28
7. Para terminar la bola fucsia rebotara del fondo de la mesa y quedara en otro lugar. Nos
vamos al fotograma 65 y agregamos fotogramas claves a todas las capas.Y creamos la interpolacin y movemos la bola fucsia a donde queremos que esta quede al final.
Primero crearemos tres capas: fondo, montaa y sol.
1. En la paleta de color pondremos tonalidades de degradado lineal de un azul a celeste claro. Despus dibujamos un rectngulo que tape toda la escena para crear el fondo. Con la
herramienta de trasformacin de degradado giramos la forma del degradado para que nos
quede como se muestra en la figura.Y con esa misma opcin lo ajustamos a la escena.
2. Nos ubicamos en la capa del sol.Tomamos la herramienta del crculo y nos aseguramos que
no tenga ningn tipo de borde y el color de fondo ser de un amarillo intenso. Dibujamos
el crculo y cambiamos el tipo de color a Radial. El color principal ser el amarillo intenso
y el segundo color igual pero tendr un porcentaje de Alfa de 0%.
3. Con la herramienta transformacin de degradado ajustamos el color hasta donde lo deseamos.
29
30
4. Nos posicionamos en la capa de montaas. Empezamos a dibujar las montaas. Lo mejor

es hacerlo con la herramienta de Pluma y seleccionar un color verde oscuro y sin lneas
de borde. Recordar que al dibujar tendremos que cerrar el dibujo para que quede con
relleno.
5. A las montaas le pondremos colores de degradado lineal y le agregaremos colores verdes
claros. Recordemos que el dibujo debe estar cerrado para agregar los colores. Seleccionamos los colores y se lo aplicamos a las montaas con el cubo de pintura.
6. Nos ubicamos en el fotograma 50 de todas las capas y agregamos fotogramas claves.

7. En la capa del sol creamos una interpolacin clsica la cual har que el sol se mueva detrs
de las montaas.
8. En el ltimo fotograma de esa capa cambiamos los colores a otros azules ms oscuros. Y
para que aparezca lo podemos rellenar en ese fotograma con el cubo de pintura.
9. Ahora nos ubicamos en el fotograma nmero 50 de las montaas y creamos una interpolacin de Forma.
10. Finalmente en el ltimo fotograma de esa capa cambiamos los colores a otros verdes ms
oscuros.Y para que aparezca lo podemos rellenar en ese fotograma con el cubo de pintura
a las montaas.
Lneas guas
Ejemplo: realizaremos una animacin que simule el giro de la luna sobre la tierra.
1. Lo primero que hars es conseguirte las imgenes de internet de la tierra y la luna y puedes
editarla en Fireworks para que stas sean PNG y con transparencia. Cada imagen estar en
una capa diferente.
31
32
2. Agregamos una capa gua haciendo clic derecho en la capa del objeto que se mover (capa
luna) y luego seleccionamos Aadir gua de movimiento clsico.
3. En el fotograma 1 de la capa gua crearemos un crculo sin relleno y este indicar el trazo
que seguir el objeto.
4. Bloquearemos las capas de la tierra y la luna con el candado, seleccionamos la herramienta

borrador y borramos un pequeo trazo del crculo por donde esta la luna.
5. Desbloqueamos las capas. Ahora nos desplazamos hasta el fotograma 60 y en cada capa
ponemos fotogramas claves:
6. Ahora en el fotograma 1 donde esta la luna su centro lo pondrs donde inicia la lnea gua,
y el fotograma 60 el centro de la luna lo pondrs al final de la lnea gua.
Fotograma 1
Fotograma 60
7. Creamos una interpolacin clsica en la capa de la Luna:
8. Agregaremos otra capa que le pondremos tierra 2, arriba de todas las capas:
33
34
9. Presionamos la capa 1 llamado tierra y vers que esta se marca toda, entonces vamos a
Edicin > Copiar.
10. Ahora con la flecha reproductora de la lnea del tiempo empezamos a moverla hasta al
fotograma antes de pasar por la tierra y presionamos F7 en la capa tierra2.
11. Seguimos desplazando la flecha reproductora y la detenemos despus que haya pasado la
tierra y presionamos F7 en la capa tierra2.
Antes de la tierra
Despus de la tierra
12. Nos ubicamos en el fotograma vaco de la capa tierra2 que creamos antes de la tierra y
hacemos un pegado en situ, Edicin > Pegado en situ:
Nota: Cualquier duda o consulta puedes realizarla a tu docente para ampliar ms las caractersticas.
Lgica de las matemticas

Un vendedor ambulante se propuso vender una cesta de 115 naranjas a razn de 10 monedas
cada 5 naranjas. En el momento de la venta cambi de opinin e hizo un montn con las 58
naranjas ms gordas y otro con las 57 ms pequeas. Las gordas las vendi a 5 monedas cada 2
naranjas y las pequeas a 5 monedas cada 3 naranjas.
Era esto lo mismo que la intencin primera?
Solucin: No. En la segunda opcin gan diez monedas ms:

Primera opcin: 115 / 5 * 10 = 230 monedas
Segunda opcin: 58 * 5 / 2 + 57 * 5 / 3 = 240 monedas
Tarea final
35
36
Clase 4
Mscaras y Smbolos
Indicador de logro: Utilizar y aplicar mscaras y escenas en nuestros diseos para mejorar la
manipulacin de nuestros objetos en Flash.
Mscaras
Para obtener el efecto de foco y de transiciones, utilice una capa de mscara para crear un
agujero a travs del cual se puedan ver las capas situadas por debajo. Un elemento de mscara
puede ser una forma rellena, un bloque de texto, una instancia de un smbolo de grfico o un
clip de pelcula. Agrupe varias capas bajo una misma capa de mscara para crear efectos sofisticados.
Para crear efectos dinmicos, anime una capa de mscara. Para una forma rellena utilizada como
mscara, utilice interpolacin de formas; para un objeto de tipo, una instancia de grfico o un
clip de pelcula, utilice la interpolacin de movimiento. Si utiliza una instancia de clip de pelcula
como mscara, anime la mscara a lo largo de un trazado de movimiento.
Pasos:
Ejercicio en el cual podremos crear un efecto tipo banner en la pelcula.
1. Podramos modificar el escenario en las propiedades con 500 px ancho y
70 px de alto. Adems le pondremos un color de fondo.
2. Creamos dos capas la de arriba dir mscara1 y la de abajo dir texto1.
3. Digitamos un texto que quepa en la escena en la capa de abajo.
4. Ponemos un crculo con relleno en la capa de arriba a un lado.
5. Nos posicionamos en el fotograma 50 y creamos fotogramas claves para

las dos capas.
6. En la capa del crculo crearemos una interpolacin clsica para que el crculo
pase por todo el texto del banner.
7. Para terminar, a la capa de arriba (mscara1) hacemos clic derecho a esa capa
y seleccionamos la opcin Mscara. Probar la animacin.
Nota: Cualquier duda o consulta puedes realizarla a tu docente para

ampliar ms las caractersticas.
37
38
Dibujo de un televisor que mostrar un mensaje en la pantalla.
1. Primero dibujaremos la televisin. Ocupe la herramienta de rectngulo. Calcule el tamao
de televisin y puede ocupar el elemento de deforme para crear cierto efecto en la TV.
2. Copiamos el objeto y lo pegamos en otro lugar. Este nos servir para hacer la pantalla de la
TV. La hacemos ms pequea la pantalla con la herramienta de transformacin libre.
3. Ubicamos el objeto que servir de pantalla encima de la TV. Hacemos un clic en escenario
y luego doble clic en la pantalla y presionamos suprimir.
4. Creamos los detalles de la TV. Y se lo ubicamos en su posicin.
5. Le insertamos un color azul al espacio de la pantalla. Hacemos doble clic en la pantalla y la

copiamos.
6. Agregamos 3 capas y en la ltima capa pegamos la pantalla con pegar in situ y le cambiamos
color.
7. En la capa 2 ponemos el texto que queremos que aparezcan en pantalla (Podran ser imgenes importadas).
8. Nos vamos al fotograma 70 de todas las capas e insertamos fotogramas claves.
39
40
9. En la capa 2 creamos una interpolacin de movimiento que pasar el texto por la pantalla
del TV.
10. Y para terminar convertimos la capa 3 en mscara. Clic derecho en la capa y la opcin
Mscara.
11. Probar la animacin.
Smbolos
Cada uno de los elementos que constituyen una biblioteca son denominados smbolos. Como
hemos dicho, estos elementos podrn ser utilizados en nuestra animacin cuantas veces lo deseemos. No obstante, cada una de estas utilizaciones no es llamada smbolo, sino ocurrencia.
Por lo tanto, una ocurrencia es cada una de las ocasiones en las que un smbolo almacenado en
nuestra biblioteca es utilizado en nuestra animacin.
Como crear un smbolo

La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que es uno de los
primeros pasos para crear una animacin, como veremos ms adelante. El procedimiento es el
siguiente:
Seleccionamos el objeto que queramos convertir en smbolo. Abrimos el panel de Propiedades
de Smbolo, accediendo al men Insertar > Nuevo smbolo o simplemente pulsando F8.
Crear un clip de pelcula

Para crear un clip de pelcula realizaremos lo siguiente:
Pasos:
1. En el escenario dibuja haremos un crculo con la herramienta de elipse
as:
Puedes crear el crculo
con las caractersticas
que desees.
Observa cmo la biblioteca est vaca debido a que an no hemos
creado el smbolo.
2. Ahora para crear el clip de pelcula presiona la tecla F8. Esto reactivar el
siguiente cuadro:
Asigna un nombre, y
elige el tipo clip de pelcula luego presiona
un clic sobre el botn
aceptar.
3. Ahora ya tienes tu primer clip de pelcula la ventaja de estos es que se
agregan a la biblioteca y podemos agregarlos a nuestra animacin las veces
que los necesitemos.
En la biblioteca observars tu nuevo clip de

pelcula.
41
42
Animar un clip de pelcula

Una vez tienes un clip de pelcula en la biblioteca de flash si necesitas otro igual en tu animacin
slo debes arrastrarlo desde la biblioteca. Pero la ventaja de estos elementos es que podemos
animarlos y as podramos tener la misma animacin repetida las veces que queramos en el
mismo lienzo y nos ahorramos fotogramas de animacin. Si deseas modificar un clip de pelcula
es decir crear una animacin en l, realiza lo siguiente:
Pasos:
1. Presiona doble clic sobre el crculo que hemos creado en el escenario.
Notars que el programa ahora te muestra en la parte superior del lienzo
las siguientes opciones:
Primero te muestra en nombre
de la escena en que te encuentras. Luego demuestra el nombre
del clip pelcula al que le distes
doble clic, esto significa que ahora
te encuentras trabajando dentro
del clip de pelcula y lo que hagas
se aplicar a dicho clip.
Para salirte del clip solo debes
presionar clic en la opcin de la
Escena.
Ahora crearemos la animacin dentro del clip de pelcula:

2. Colcate en el fotograma 30 de la lnea de tiempo dentro del clip de pelcula y presiona la tecla F6 para agregar un fotograma clave.
En el fotograma 30 cambia el color del crculo y ahora aplica una interpolacin de forma.
3. Prueba tu pelcula y vers cmo el crculo de color ahora debe salir del clip
multimedia presionando clic sobre el nombre de la escena.
4. Para probar si todo ha salido bien arrastra varias veces el crculo desde la
biblioteca hasta el escenario.
Luego de arrastrar varios crculos

a tu escenario prueba tu pelcula
y podrs ver que la animacin se
repite varias veces sin necesidad
de repetir la animacin por cada
crculo.
5. Los clips de pelcula adems nos ayudan a utilizar menos fotogramas en
la escena en la que estamos trabajando como pudiste observar para este
ejemplo en la escena solamente utilizamos un fotograma. Como creamos
un clip de pelcula y la animacin la realizamos dentro del mismo clip eso
nos permite crear un archivo ms liviano, para nuestros sitios web.
Un clip de pelcula no solamente puede tener animacin por medio de interpolacin de forma, sino que tambin puedes aplicar animacin con interpolacin
de movimiento o animacin fotograma a fotograma.
Realizaremos un nuevo clip de pelcula utilizando animacin fotograma a fotograma as:
1. Crea un nuevo archivo y luego inserta una imagen de una mariposa dentro
del escenario.
Ahora presionaremos la tecla F8
para crear nuestro clip multimedia con la imagen que hemos insertado en nombre del clip ser:
mariposa1 Luego haz clic en el
botn Aceptar.
2. Ahora entraremos al clip de pelcula para esto basta con presionar doble
clic sobre la imagen.
43
44
3. Asegrate de haber ingresado al clip de pelcula visualizando si ahora en la

parte superior del escenario.
4. Ahora agrega un fotograma clave presionando
la tecla F6.
5. Con una herramienta de escalado cambia el
ancho de la imagen en el fotograma dos que
has insertado. Observa la imagen que se te
presenta a continuacin para que veas cmo
debes cambiar el ancho de la imagen:
Como puedes observar no hemos cambiado el alto de la imagen

solamente el ancho. Ahora debe salir del clip de pelcula hacia la
escena y prueba la animacin.
En caso de que la animacin es muy rpida podras quitar nicamente fotogramas a la velocidad de reproduccin de la pelcula.
Con la ayuda de tu docente crea un clip de pelcula para crear el movimiento que realiza un
ventilador.
Juego: Acertijo Matemtico

Problema: Letras iguales, igual valor. Letras distintas, distinto valor. Cada letra vale un
nmero de 0 a 9. La M tiene valor = 1, el resto no se
Solucin:
+
M
S
M
O
E
O
N
N
R
E
D
E
Y
9
+
1
M
5
1
0
O
6
0
6
N
7
8
5
E
5
2
Y
Tarea final
45
46
Clase 5
ActionScript bsico
Indicador de logro: Planifican y administran las actividades necesarias para desarrollar una
solucin a un problema o proceso.
ActionScript
ActionScript es el lenguaje de programacin para crear scripts en Flash. Los lenguajes de programacin se utilizan para comunicarse con el ordenador enviando y recibiendo informacin. A
travs de dichos lenguajes, el usuario podr decirle al ordenador lo que debe hacer, as como
preguntarle por cualquier informacin. Gracias a la programacin, el ordenador escucha, prueba o realiza las acciones requeridas por el usuario y da respuestas. Qu puede hacer ActionScript? Realmente no hay lmite para un lenguaje como ActionScript de Flash. Siguiendo con el
ejemplo anterior diremos lo siguiente.
El ejercicio tiene como objetivo crear unos botones, cambiar su apariencia en los estados del
botn y que estos puedan desplazarnos a otros fotogramas diferentes utilizando actionscript
bsico.
Pasos:
1. Trabajaremos con ActionScript 2.0. Crearemos un fondo al escenario de
otro color. Esta capa se llamar fondo.
2. Insertamos una capa llamada botones donde estaremos dibujando nada
ms los botones.
3. Seleccionamos la herramienta de
rectngulo, y hacemos que este tenga unas puntas redondeadas de 20.
Esto se hace haciendo doble clic al
rectngulo. Despus dibujamos en
rectngulo con un color.
4. Seleccionamos el rectngulo y presionamos la tecla F8. Por el momento le

dejaremos el nombre que aparece y solo nos fijamos que este la opcin
botn.
5. Hacemos doble clic al ahora botn para poder entrar a sus estados. En
Reposo nada ms agregaremos un texto que dir Play o Siguiente.
6. Hacemos clic en el estado Sobre e insertamos fotograma clave (F6) y le

cambiamos color al Botn. Hacemos lo mismo con el estado de Presionado. Para salirnos de los estados hacemos clic donde dice Escena 1.
7. Nos iremos al fotograma 12 e insertamos fotogramas claves a las dos capas.

8. Nos posicionamos en la capa 2 llamada botones fotograma 12. Crearemos
otro rectngulo con otro color y lo convertiremos en botn (F8). Y repetiremos los pasos del 4 al 6. El texto del botn hoy dir Atrs. Vers que
los botones (smbolos) estarn en la Biblioteca (para ver la biblioteca nos
iremos a Ventana > Biblioteca).
47
48
9. El botn que dice Play cambiarlo y que diga Siguiente en cada uno de sus
estados.
10. Para poder desplazarnos de un fotograma a otro, pondremos fotogramas

claves en las dos capas en los siguientes fotogramas 24, 36 y 48.
11. Nada ms que en el fotograma 48 quitaremos el botn de siguiente:
12. Ahora para que tenga ms sentido la animacin agregaremos otra capa
llamada fotos.
13. En el primer fotograma de la capa fotos pondremos una portada, que puede ser un rectngulo con texto explicando de que trata la animacin.
14. Se tendr que agregar fotogramas claves donde las otras capas tambin lo
tienen.
15. En cada uno de esos fotogramas claves tendrs que importar fotos diferentes (Importadas). Te quedar algo como las imgenes siguientes:
Nota: Las imgenes puedes encontrarlas en http://www.julianbeever.net/

que es un artista que trabaja pinturas 3D.
16. Si pruebas la animacin con control + Enter vers que la animacin se
reproduce sin parar. Por eso ahora crearemos otra capa llamada acciones.
En esta pondremos unos ActionScript (programacin) que tambin lo pondremos en los botones que creamos.
ActionScript
17. Crear una capa nueva que se llamara Acciones.
18. Para evitar que la animacin pase sin parar en la capa de Acciones en el
fotograma 1 pondremos un fotograma clave vaco (F7) y en el panel de
Acciones digitamos la sentencia: stop ();
49
50
19. Pondremos fotogramas clave vacos (F7) en la capa acciones en los fotogramas 12, 24, 36 y 48. En ellos pondremos la misma sentencia de stop ();
20. Esto har que cuando probemos nuestra animacin esta se detenga en
el fotograma que tienen la sentencia stop. Y pasar lo mismo cuando nos
desplacemos en los otros fotogramas.
21. Ahora programaremos los botones. Nos vamos a la capa botones en el
fotograma 1. Hacemos clic en el botn siguiente y activamos el panel de
acciones de ese botn y digitamos la siguiente sentencia: on (press) {gotoAndPlay (12);}
22. Nos vamos a los fotogramas claves de esta capa botones y sacamos las
acciones del botn y le digitamos siempre a cada uno el cdigo anterior: on
(press) {gotoAndPlay (24);} y as a cada uno (36 y 48). Haremos lo mismo
con el botn de atrs.
23. Probamos la animacin.
Nota: Con la ayuda de tu docente puedes probar la manera de insertar

estas sentencias con ActionScript 3.0. Lo que cambiar que aqu programars mediante fragmentos de cdigos que ya trae flash en su galera.
Escenas
Las escenas son elementos dentro de Adobe Flash que nos permiten crear varias animaciones en un solo archivo. Es decir que puedes crear una animacin en una escena luego agregar
otra escena y aplicar otra animacin, de esta manera al correr tu pelcula podrs ver ambas
animaciones primeros se desarrollar la que se encuentre en la escena nmero uno y luego la
animacin que se encuentra en la escena nmero dos.
Agregar escenas
Para un mejor control de las escenas dentro de un archivo de flash es mejor mantener activo
el panel de escenas ya que ste nos permite agregar escenas, quitar escenas, cambiar nombre a
las escenas y cambiar el orden de las escenas.
Para abrir el panel de escenas sigue los siguientes pasos:
1. Presiona un clic sobre el men ventana > ahora colcate sobre la opcin otros paneles > y
luego haz clic sobre la opcin escenas.
2. Esto activar el siguiente panel dentro de tu archivo:
En la imagen puedes ver que este panel ya muestra una escena. Si deseas agregar una nueva escena
slo debes presionar un clic sobre el botn con
el smbolo ms + que se encuentra en la parte
inferior del panel de escenas. Asimismo si deseas
eliminar una slo debes presionar clic sobre el
botn eliminar escena, para nombrar una escena
solamente tras doble clic sobre el nombre de la
escena y digitas el nuevo nombre.
3. Agrega una nueva escena a tu archivo y nmbralas de la siguiente manera.
51
52
4. Luego crea una animacin diferente por cada una de las escenas si das un clic sobre la escena estrella trabajas sobre la escena que has elegido, luego presione clic sobre la escena
sol podrs ver que se encuentra en blanco, ahora puedes crear otra animacin luego
prueba tu pelcula.
5. Podrs ver como se reproduce la escena estrella y luego la escena sol.
Cambiarlas de orden
Para cambiar el orden en que se reproducen las escenas basta con arrastrar en el panel de
escenas la escena que quieres que se muestre al principio o al final y cambiar la deposicin en
el panel de escenas as podrs verla en el orden en el que t la ubicas.
6. Cambia en el panel de escenas el orden de las escenas ubicando la escena sol sobre la
escena estrella.
7. Ahora reproduce tu pelcula y podrs ver el orden de las animaciones el cual ha sido modificado.
Controlar las escenas

En nuestro archivo tenemos varias escenas al correr y probar nuestra pelcula veramos una
tras otra y al terminar de reproducirse la ltima escena podramos ver que la animacin regresa
a la primera escena y se repite hasta llegar a la ltima nuevamente. Qu pasara si quisiramos
controlar las escenas para que se reproduzcan en el momento en que nosotros deseamos?
Para esto necesitamos agregar cdigo de Actionscript en nuestras escenas.
8. Iniciaremos agregando una escena ms a nuestro archivo la llamaremos men en este
momento el panel de escenas debera verse as:
En caso de que no aparezca la escena men al
principio del panel de escenas debers ponerla
en esa posicin para que sea la primera en reproducirse. Ahora reproduce tu archivo.
9. Como puedes ver siguen reproducindose una y luego la otra en la escena men. Ahora
realiza lo siguiente.
10. Para agregar los botones debes abrir la biblioteca de botones as:
Ventana > bibliotecas Comunes > clic en Botones
Busca la carpeta Classic Buttons y presiona clic en la sub-carpeta Arcade buttons. Luego coloca
los botones: Arcade button Orange y Arcade button yellow.
Crea un men para que al presionar un clic sobre un botn puedas
ir a una escena y al presionar clic
sobre el segundo botn puedas ir
a la siguiente escena.
Selecciona el fotograma uno de
una de las capas la escena men y
presiona F9 para que puedas ver el
panel de acciones.
11. Luego digita el siguiente cdigo:

Digitaremos nicamente la instruccin stop(); para qu al correr
nuestro archivo se detenga en el
primer fotograma de la escena
men.
Prueba el archivo para que puedas
ver que ahora que toda la animacin se detiene ahora en la primera escena.
12. Ahora selecciona el primer botn de la escena estrella presiona F9 nueve para abrir nuevamente el panel de acciones.
53
54
13. Digita el siguiente cdigo: on (release) {gotoAndPlay (Estrella,2); }

Esto nos permitir controlar la escena que al dar clic sobre el botn
pasemos a la escena con el nombre Estrella.
14. Al terminar la animacin de escena estrella podrs ver que nuevamente comienza a pasar
a otra escena para esto crearemos un retorno hacia el men desde la escena estrella colocarse en la escena estrella y presiona un clic sobre el ltimo fotograma que posea en sus
capas esta escena. Luego presiona F9 y visita el siguiente cdigo: gotoAndPlay (Menu,1);
Ahora podrs ver que al presionar un clic sobre el botn estrella.

Reproducirs la escena del mismo
nombre y al terminar dicha escena volvers automticamente al
men.
15. Coloca el cdigo en el segundo botn para que al presionarlo puedas ir a la escena sol.
Luego agrega otro cdigo en el ltimo fotograma de la escena sol que te permita regresar
a la escena men.
16. Realiza un ejemplo ms agregando otra escena y un nuevo botn con sus cdigos para que
al presionarlo puedas ver la nueva escena y luego retorne al men principal. Luego prueba
la animacin.
Tarea final
Clase 6
ActionScript
Indicador de logro: Usan mltiples procesos y diversas perspectivas para explorar soluciones
alternativas en la creacin de animaciones con ActionScript.
El Actionscript puede agregarse a:
Fotogramas
Movie clips
Botones
Clases.
Tal y como lo hemos aprendido debemos seleccionar el objeto al cual aplicaremos el cdigo de
Actionscript y luego presionar la tecla F9.
Variables y condicionantes
Variables:
Las variables son como cajas que utilizamos en un programa para asignarle un valor especfico
que utilizaremos a futuro. Ej.: Puedes crear una variable con el nombre: nmero1 y asignarle un
valor por ejemplo 5.
Para declarar las variables tambin debemos saber que hay diferentes tipos de variables:
Numricas: Estas almacenan nmeros pero nicamente permiten nmeros enteros.
Flotantes: Estas pueden almacenar nmeros que incluyan decimales.
Strings: estas permiten almacenar cadenas de caracteres.
Boleanas: Estas variables son de tipo lgicas. nicamente permitirn almacenar un valor
verdadero o uno falso.
55
56
Para declarar las variables debemos hacerlo as:

Var Sueldo:Number=1000;
Donde: Var es la instruccin que colocamos para declarar la variable, Sueldo es el nombre
que decidimos darle a la variable, Number se refiere al tipo de variable que utilizamos y por
ultimo le decimos que el valor de esta variable numrica ser: 1000
Otras variables podran ser:

Var Nombre:String=Josu Fortis;
Var Estado:bolean=True;
En el primer caso la variable lleva por ttulo: la palabra a nombre y es de tipo string por lo cual
podr almacenar cadenas de texto en este caso Josu Fortis.
En el segundo caso el ttulo la variable es Estado y es de tipo boleando por lo tanto slo podr
almacenar un valor o verdadero o falso. Esta es la forma en la que se declaran las variables en
Actionscript. Recuerda puedes declararla tanto en botones como en los fotogramas de una
pelcula que realices.
Condicionantes
Las condicionantes en s slo es una forma de realizar un proceso utilizando dos caminos del
programa tomar un camino si la condicin que se le proporciona es correcta y tomar el otro
camino si la condicin que se le proporciona es falsa.
Sentencia if else
Esta sentencia nos ayuda a realizar lo antes explicado en el concepto de las condicionantes
de manera ms sencilla ya que podemos utilizarla para elegir entre dos respuestas posibles o
varias respuestas segn la necesidad de nuestro programa. Crearemos un ejemplo utilizando la
sentencia if else
Pasos:
1. Para realizar este ejercicio crearemos un nuevo archivo de Actionscript
2.0 en flash. Luego realizaremos lo siguiente en el escenario. Primero insertaremos tres fotogramas clave en nuestra lnea de tiempo de la animacin.
57
58
2. Colcate en el fotograma nmero dos y agrega lo siguiente en el escenario:

Para este caso slo aplicaremos
una etiqueta de texto esttico
y digitaremos las palabras contrasea correcta.
3. Colcate en el fotograma nmero tres y crea lo siguiente en el escenario:
Aplicaremos otra etiqueta de

texto esttico para digitar contrasea incorrecta y crearemos
otro botn con el nombre retorno como lo ves en la imagen.
4. Ahora procederemos a crear nuestro cdigo de Actionscript. Presiono clic
sobre el primer fotograma y luego presiona la tecla F9 para abrir el panel
de acciones.
5. Una vez abierto el panel de acciones digita el siguiente cdigo:
stop();
var contraseacorrecta = Superate;
La sentencia Stop(); nos servir para detener la animacin a la hora de

ejecutar la y que no se cambie de un fotograma hacia otro.
Luego declararemos una variable con el nombre contrasea correcta y su
valor ser la palabra suprate observa cmo no hemos aplicado qu tipo
de variables ser pero al asignar la palabra suprate como valor de la variable automticamente ser de tipo String.
Colcate ahora sobre l botn aceptar luego presiona la tecla F9 y digita

el siguiente cdigo:
on (release) {
if (contrasea == contraseacorrecta) {

gotoAndStop (2);
} else {

gotoAndStop (3); }}
Con este cdigo explicamos lo siguiente a nuestro programa de Actionscript:

cuando el botn sea liberado despus de presionaron clic sobre l si la contrasea que es el cuadro donde escribimos, la contrasea es igual al contenido de
la variable contrasea correcta que escribimos en el cdigo del fotograma uno
entonces el programa ir al fotograma dos donde se encuentra la palabra contrasea correcta. Caso contrario si la contrasea es diferente al contenido de
la variable contrasea correcta entonces del programa nos llevar al fotograma
tres donde se encuentra la palabra contrasea incorrecta.
6. Ahora colocaste en el fotograma tres. Selecciona el botn retorno luego
presiona la tecla F9 y digitar el siguiente cdigo:
on (release) {gotoAndStop (1); }
Con este cdigo explicamos
que cuando presionemos un
clic sobre el botn retorno, el
programa debe regresar al fotograma nmero uno para volver
a intentar la contrasea.
Ahora prueba tu pelcula para comprobar si el programa funciona correctamente.
59
60
Nota: Los condicionales son:

AND (&&)
OR (||)
NOT (!)
Con la ayuda de tu docente trata de ponerle un usuario a tu login de tal manera que al
querer ingresar debas de poner un nombre de usuario y una contrasea.
Crea un programa que utilizando condicionantes nos permita digitar en un cuadro la edad
de una persona y si es menor de 18 aos nos enva un fotograma l mensaje: eres menor
de edad y si la edad que visitamos mayor o igual a 18 nos enve a otro fotograma con el
mensaje eres mayor de edad.
Tarea final
Clase 7
Continuacin de ActionScript
Indicador de logro: Usan mltiples procesos y diversas perspectivas para explorar soluciones
alternativas en la creacin de animaciones con ActionScript.
Propiedades de los clips de pelcula

Un clip de pelcula posee propiedades que muchas veces nos sern tiles a la hora de controlarlos por ejemplo el escenario de flash se puede decir que es como un plano cartesiano posee
tanto un eje X. Como un eje Y. Entonces un clip de pelcula puede encontrarse a determinada
altura en el escenario esa sera la posicin en Y que posee el clip de pelcula en el escenario.
Asimismo si el clip de pelcula se encuentra en una determinada posicin ya sea a la izquierda,
al centro del escenario o a la derecha esa sera su posicin en X. dentro del escenario.
En Actionscript estas propiedades se manejan de la siguiente manera:
_x
_y
Esta propiedad determina la posicin en X. que tenga el clip de pelcula

puede ser a la izquierda al centro o a la derecha del escenario.
Esta propiedad determina la posicin en Y. que tenga el clip de pelcula y
puede ser arriba al centro o abajo en el escenario.
61
62
Controlar las propiedades X y Y de un clip de pelcula

Realizaremos un ejercicio que no solamente nos permitir colocar en determinada posicin un
clip de pelcula sino que tambin nos permitir controlar con el teclado su movimiento.
Pasos:
1. Abre un archivo en blanco en Flash y crea un clima de pelcula llamado
carita as:
Debes dibujar la carita feliz, luego seleccionarla y presionar la
tecla F8 para crear un clip de
pelcula asegrate de asignarle
un nombre carita.
2. Una vez que creemos el clip de pelcula procederemos a aplicar el cdigo
para modificar sus propiedades X y Y.
3. Selecciona el clip de pelcula y presiona la tecla F9 para abrir el panel de
acciones luego digita el siguiente cdigo:
Asegrate que el cdigo quede

registrado dentro del clip pelcula sea ms sencillo pide ayuda
a tu docente para asegurarte
que lo haces correctamente.
4. El cdigo que hemos visitado realiza lo siguiente: estamos visitando que

cuando presionemos la tecla direccional derecha la propiedad X. ser igual
a X+4 como deseamos avanzar el smbolo es positivo en la siguiente lnea
de cdigo visitamos que al presionar la tecla direccional izquierda la propiedad X ser igual a la X-4 puesto que deseamos retroceder el smbolo
es negativa. De igual forma la propiedad Y en la tercera lnea es en negativo
el avance puesto que cuando bajamos es positivo.
5. Prueba tu pelcula y podrs ver que con las flechas direccionales puedes
cambiar la posicin de tu clip de pelcula.
Nota: El nmero 4 despus de las propiedades X. y Y. es solamente la
velocidad de avance que tendr el clip de pelcula al presionar la tecla
puesto que se asignamos un valor ms pequeo como el nmero 1 el
avance ser ms lento.
Utilizando condicionantes y propiedades X. y Y.

6. Continuaremos modificando nuestro archivo primero agregaremos un fotograma principal a nuestra pelcula y eliminaremos el clip de pelcula solamente en el fotograma 2. En este fotograma crearemos un texto esttico
de la siguiente manera:
Esto es nicamente lo que se

ver en el fotograma nmero
dos. La idea de la pelcula ser
que cuando el clip de pelcula
logre llegar a cierta posicin en
el escenario pase al segundo fotograma donde se mostrar este
mensaje.
7. Regresemos al fotograma nmero 1 para continuar con la pelcula.

8. Primero crearemos otro clip de pelcula al que llamaremos moneda, y
otro clip de pelcula ms al que llamaremos meta as:
Este es el clip de plicula que se

llamar moneda.
Este es el clip de plicula que se
llamar meta.
63
64
9. Ahora arrastraremos desde la biblioteca el clip de pelcula con el nombre

moneda hacia el escenario tres veces ms as:
Luego que arrastrar el clip de
pelcula selecciona el primero de
ellos y en el nombre de instancia
digita moneda1, luego selecciona
el segundo clip de pelcula y en
su instancia digita moneda2, lo
mismo ser para la moneda tres
y la moneda cuatro cada uno de
eloos su instancia serea moneda3
y moneda4
10. Tambin debes cambiar la instancia del clip de pelcula meta. Su instancia
se llamar de la misma manera es decir meta, y en la instancia del clip de
pelcula carita digital tambin el mismo nombre es decir carita. Esto es
importante para el cdigo que digitaremos a continuacin.
11. Selecciona el fotograma nmero uno y presiona la tecla F9 luego digita el
siguiente cdigo.
12. El cdigo puede explicarse la siguiente manera la primera instruccin nos

servir para detener la pelcula.
13. Luego declararemos dos variables una con el nombre monedas y su valor
igual a 0, y la otra con el nombre maxmonedas y su valor ser igual a 4.
14. Luego iniciaremos creando una funcin, esta funcin le dir al programa
que si el clip de pelcula llamado carita toca al clip de pelcula llamado meta
y la variable monedas es igual al valor de la variable maxmonedas entonces
se mostrar el fotograma nmero dos.
15. Luego continuaremos la funcin explicando que si el clip de pelcula llamado carita toca la moneda nmero uno entonces la variable monedas
aumentar un valor y el valor en X. del clip de pelcula moneda nmero
uno cambiar a -200 esto para que parezca que la moneda desaparece aunque en realidad lo que realizar es salirse del escenario. Lo mismo pasar
con las siguientes monedas cada vez que el clip de pelcula toque una de
ellas se aumentar el valor de la variable monedas y la moneda parecer
desaparecer.
16. Para finalizar agregaremos un texto dinmico en una de las esquinas del
escenario y en su propiedad variable digitaremos el nombre de la variable
monedas para que cuando el clip de pelcula carita toque una moneda
este texto dinmico cambiar su valor segn el nmero de monedas que el
clip de pelcula carita acumule.
Texto esttico que su propiedad

variable ser igual a: monedas. Es
decir que almacenar el valor de
la variable monedas que declaramos en el fotograma 1.
17. Prueba tu pelcula luego de visitar el cdigo y vers que has creado pequeo juego.
65
66
Clase 8
Creacin de CD interactivo
Indicador de logro: Interactan, colaboran y publican la informacin, empleando una variedad
de entornos digitales como los programas de animacin.
Navegacin entre archivos .swf

Antes de iniciar esta parte del manual pondremos en claro algunas caractersticas del player
de Flash. En primer lugar hay que recordar que todo se guardar en una misma carpeta sino
pueden estar en una carpeta que puede crearla y llamarla fscommand. Esto permitir una comunicacin estable con otros archivos y pelculas. Adems que proporciona 2 niveles: interno
y externo.
Pasos:
1. Crearemos una animacin sencilla en el primer archivo.
2. Creamos otra capa y en el primer fotograma dibujamos un objeto que lo
transformamos en botn.
3. Podramos agregar otra capa y en el ltimo fotograma clave vaco (F7 en el
ltimo fotograma) programamos la sentencia: stop();
4. Guardaremos este archivo en formato .fla le pondremos animacin1.

5. Programaremos ahorita el botn aunque no funcionar hasta que creemos los archivos .swf, lo que le pondremos al botn ser: on (press)
{LoadMovie(matrix2.swf,0);}
Nota: LoadMovie es la sentencia que carga una animacin matrix2.swf

es el archivo que cargar y 0 es el nivel del player.
Segunda animacin
6. Abrimos un archivo nuevo. Repetiremos los pasos 1 al 3. Y guardaremos
este archivo en formato .fla con el nombre animacin2.
7. Programaremos ahorita el botn aunque no funcionara hasta que creemos

los archivos .swf, lo que le pondremos al botn ser:
on (press) {LoadMovie(matrix1.swf,0);}
Nota: Ahora que ya tiene completos los archivos .fla, empezaremos a
Exportarlos a .swf solo tiene que recordar que estos archivos estarn en
una misma carpeta. La carpeta se puede llamar archivos_swf.
Exportar y configurar una publicacin

8. Al archivo animacin1.fla este se exportar como pelcula y se llamar
matrix1.swf. El player a ocupar ser el player 10 que es el ms estndar.
Los pasos para configurar la exportacin sern Archivo > Configuracin de
publicacin recordar que en el tipo de archivo ser SWF. Hars clic en la
carpeta donde buscars la ubicacin donde guardars el archivo y recurdale ponerle el nombre matrix1 y clic en Publicar. As como en la siguiente
imagen:
67
68
9. Al archivo animacin2.fla repetir el paso 8 este se exportar como pelcula

y se llamar matrix2.swf. El player a ocupar ser el player 10. Estos archivos
estarn en una misma carpeta.
10. Ahora abrimos la carpeta archivos_swf y probamos el archivo matrix1.swf
y probamos que funcione los botones. Si todo funciona normal es que lo
has hecho bien.
CD Interactivo
Primera Forma
Para comenzar este ejercicio diremos que nada ms se necesitan 3 archivos.
1. La pelcula .exe
2. El cono .ico
3. El archivo autorun.inf.
Pasos:
1. Empezaremos creando la pelcula.exe.
2. Podramos crear un men. En este caso crearemos una animacin sencilla.
En la primera capa crearemos la animacin.
3. Para hacerlo ms interesante crearemos una segunda capa llamada botones, dibujaremos un botn en el ltimo fotograma que servir para cerrar
la animacin cuando se ejecute.
4. Agregamos una capa ms llamada
acciones y en el ltimo fotograma agregamos un fotograma clave
vaco y ponemos la sentencia de
stop();
5. Ese botn lo programaremos as:

on (press) {fscommand(quit,true);}
Nota: Guardaremos por el momento este archivo como pelcula.fla y

tambin lo exportaremos como swf y lo llamaremos pelcula.swf esto en si
no es importante pero lo haremos pare tener un respaldo por si necesitamos seguir editndolo ms adelante.
Importante: todo esto guardarlo en una carpeta llamada CD.
6. Podemos crear el archivo .exe haciendo clic en Archivo > Configuracin de
la publicacin.
Crear imagen tipo .ico

7. Ahorra crearemos el cono que debe de ser .ico. Buscamos una imagen
para esta alusiva a flash y para la pelcula que en nuestro caso ser la siguiente:
69
70
8. Esta imagen la tendremos que transformar en .ico y para eso nos vamos
a la siguiente direccin: http://www.genfavicon.com/es/ sino funciona probar con http://tools.dynamicdrive.com/favicon/ (es parecido el proceso al
primer sitio).
9. En el paso 1 seleccionamos la imagen en examinar, buscamos la imagen en

nuestra PC, clic en abrir y despus en subir imagen. La imagen se mostrar
en la pgina.
10. En el paso 2 seleccionamos el tamao

del cono que generalmente es 32*32
y despus clic en Captura & Pre visualizacin. La imagen se mostrar en el
paso 3.
11. Damos clic donde dice Descargar Favicon, se mostrar unj mensaje que dice
descargar Favicon.ico, damos clic en Guardar, y mostramos la direccin donde tenemos nuestro archivo .exe (pelcula.exe) que sera la carpeta CD. Le
ponemos nombre al cono y clic en Guardar.
Crear archivo Autorun.inf

12. Ahora tenemos nuestro archivo .exe y nuestro archivo .ico (en nuestro
ejemplo es pelcula.exe y icono1.ico). Solo nos falta crear nuestro archivo
Autorun.inf. Este archivo lo crearemos en el Block de notas. Agregaremos
estas sentencias:
[autorun]
open=pelcula.exe
icon=icono1.ico
13. En la segunda lnea hay que remplazar la cadena pelicula.exe por el nombre de nuestro ejecutable flash. En la tercera lnea remplazamos icono.ico
por el nombre del cono que queramos usar, de lo contrario removemos
completamente esta lnea. Se debe tener cuidado de que la extensin del
archivo autorun sea .inf y no otra. Al final quedar as:
71
72
14. Ahora ya tenemos nuestro .exe, .ico y autorun.inf, ya solo falta quemar
estos tres archivos nada ms en la raz de CD. Estos archivos no pueden
estar quemados adentro de una carpeta en el CD sino que en su raz. Los
quemamos y a probarlo.
Nota: Ser bueno que lo probars en un Cd regrabable la primera vez.
Segunda forma
Lo haremos con la funcin llamada fscommand y al comando exec de esta misma. El diagrama
del proceso es el siguiente:
Pasos:
1. Crearemos la siguiente animacin:
Nota: En este ejemplo abriremos un archivo .EXE y un archivo de PowerPoint .ppsx por medio de un archivo .bat (como lo muestra el diagrama)
estos deben estar adentro de una carpeta llamada fscommand.
2. A cada botn respectivamente les vamos a poner su nombre de instancia
BTexe y BTpps. Seleccionas el botn y buscas en las propiedades el
siguiente cuadro:
3. Ahora nos colocamos en el primer fotograma de nuestra lnea de tiempo,

o en el fotograma donde se encuentren nuestros botones, para colocar el
cdigo respectivo. Ya estando ah, abrimos el panel de acciones e introducimos este cdigo:
4. Guardamos nuestra pelcula principal con formato .exe y lo haremos desde

Archivo > Configuracin de publicacin (como el paso 6 del ejercicio anterior)
y el nombre ser Principal.exe
5. Crearemos ahora una animacin que ser .exe, tendr el nombre de intro.
exe y estar guardada dentro de la carpeta fscommand.
6. Haremos una presentacin en PowerPoint. La guardamos como presentacin.ppsx en la carpeta fscommand
7. Ahora crearemos nuestro archivo .bat para que abra la presentacin de
PowerPoint. Abrimos el Bloc de notas y escribiremos este cdigo dentro
de el: start presentacion.ppsx
8. Guardaremos el archivo dentro de la carpeta fscommand con el nombre
presentacion.bat que es el mismo que pusimos en el cdigo.
9. Todos los archivos estarn dentro de nuestra carpeta fscommand se debe
ver as:
10. Ahora ya todo debe funcionar correctamente, hemos terminado nuestro

cometido. Ya puedes abrir la pelcula principal y ejecutar cualquiera de los
dos archivos.
Tarea final
73
74
Clase 9
Trabajo final
Indicador de logro: Utilizar, evaluar y aplicar los conocimientos adquiridos para disear un
trabajo original, ocupndolas las herramientas tecnolgicas y las TICs.
Tarea final
Realizar un CD interactivo en el cual tendr que realizar lo siguiente:
1. Una animacin principal que ser el archivo con el cual iniciar.
2. Tendr una animacin que pedir la contrasea.
3. Despus pasar a una animacin que ser un men que tendr 4 botones.
4. El primer botn me llevar a una animacin en flash que dure un minuto.
5. El segundo botn ir hacia un visor de imgenes.
6. El tercer botn abrir un ejercicio del manual.
7. Y el cuarto botn tendr una animacin que haya encontrado en internet.
Esta clase se apartar para poder terminar la tarea final o afinar detalles de ella. Tambin se
aclararn dudas si acaso las hay con el docente. No olvidar estudiar el cuestionario que esta
a continuacin para la clase final donde se realizar el examen terico y se entregar la tarea
final de parte de los estudiantes.
Cuestionario
1. Qu es Flash?
2. Qu son los Fotogramas?
3. Qu en el papel cebolla?
4. Qu es la interpolacin clsica?
5. Qu es la interpolacin de movimiento?
6. Qu es la interpolacin de forma?
7. Para qu nos ayuda las lneas guas?
8. Qu son las mscaras?
9. Qu son los smbolos?

10. Qu es el ActionScript?
11. Qu son las Escenas?
12. Qu son las variables?
13. Qu son los condicionantes?
14. Para qu nos ayuda la sentencia if -else?
15. Cules son los 3 archivos se necesitan para hacer un cd interactivo?
Crucigrama
75
76
Clase 10
Evaluacin Final
Indicador de logro: Renen y analizan datos para identificar soluciones y/o tomar decisiones
informadas para entregar trabajos finales y contestar evaluaciones conceptuales.
Entrega de trabajo grupal

Se har entrega el da de esta clase el trabajo final. Recordar no pasarse de la fecha indicada y
presentar trabajos originales.
Examen terico
Su docente les har entrega de una evaluacin terico para contestarlo en la hora de la clase
que ser tomado del cuestionario de la clase 9.
Diferencias
Encuentra las 6 diferencias:
Bibliografa
(Definicin de Flash)
http://www.adobe.com/es/products/flash.html
(Definicin de Entono de Flash)
http://www.ced.umich.mx/pdfs/MANUAL%20DE%20FLASH%20BASICO%20COMPLETO.pdf
(Definicin de Fotogramas)
http://www.ced.umich.mx/pdfs/MANUAL%20DE%20FLASH%20BASICO%20COMPLETO.pdf
(Definicin Interpolacin clsica)
http://helpx.adobe.com/es/flash/using/motion-tween-animation.html
(Definicin Interpolacin de movimiento)
http://helpx.adobe.com/es/flash/using/motion-tween-animation.html
(Definicin Interpolacin de Formas)
http://help.adobe.com/es_ES/flash/cs/using/WS58E1E1A4-9296-4b75-AB74-D9D545892556.
html
(Definicin Mascaras)
http://help.adobe.com/es_ES/flash/cs/using/WS9388626D-B940-43f3-87BB-7C3159F5EDE4.
html
(Definicin de Smbolo)
http://viktor.jp/Manual_Practicas_flash.pdf
(Definicin de ActionScript)
http://es.scribd.com/doc/35665759/Manual-Flash
77
78
Referencias
http://www.tutoriales-flash.com/tutoriales-principiante.php
http://www.cristalab.com/tutoriales/0-flash-basico/
http://www.tallerwebmaster.com/tutorial/firma-a-mano-alzada-con-mascara-con-adobeflash/121/
http://www.redribera.es/formacion/tutoriales/viewfile.html?file=flashEffsMask1.xml
http://www.cristalab.com/tutoriales/manejo-de-condicionales-multiples-en-actionscript-3c50698l/
79
80

Flash CS5

Cargado por

Información del documento

Título original

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

Flash CS5

Cargado por

Copyright:

Formatos disponibles

Mdulo XVI

Clase 2: Interpolacin Clsica e

Clase 3: Lneas guas y Ejercicios de

Clase 4: Mscaras y Smbolos

Clase 5: ActionScript bsico

Clase 7: Continuacin de ActionScript

Clase 8: Creacin de CD interactivo

Clase 9: Trabajo final

Clase 10: Evaluacin Final

Mdulo XVI: Flash CS5

Entorno a Flash, Animacin

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

Seleccionaremos ActionScript 3.0

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

Animacin Fotograma a Fotograma

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

Animacin Fotograma a Fotograma con el Efecto de luz

2. Le cambiaremos color, seleccionando el rectngulo con la herramienta de

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

5. Luego presionamos la tecla F6. Hacemos clic en el crculo para asegurarnos

Mover el punto de luz un poquito

6. Repetimos el paso 5 hasta que el punto de luz est en la esquina

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

7. Incluso haremos que el punto de luz quede en la parte de afuera

8. Agregamos otros 5 fotogramas estando color negro el crculo para

9. Probamos con Control + Enter la animacin.

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

Papel cebolla, regla, guas y cuadrculas

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

4. Ahora nos ubicamos en la esquina inferior y el cursor se pondr en forma

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

5. Repetimos el proceso 3 y 4 para los brazos as:

6. Ahora volveremos a repetir los pasos 3 4 en 3 fotogramas ms as:

Nota: Tu docente explicar ms opciones de este ejercicio de ser necesario.

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

2. Ahora crearemos en smbolo la figura. Y presionamos F8. Nos aparecer

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

Nota: Puedes averiguar ms de los smbolos en el siguiente link:

3. Ubicarse en el fotograma 24 y presionar F6 para crear un fotograma clave.

5. Clic en Insertar > Interpolacin clsica

6. El resultado ser el siguiente:

7. Probar con Control + Enter

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

8. Ahora ubicando ms fotogramas claves y moviendo el smbolo, hars que

2. Ubicamos la figura en la esquina inferior derecha. Y luego haciendo clic en

Fundacin Sagrera Palomo2012. Derechos reservados

Mdulo XVI: Flash CS5

4. Ya tenemos un punto de inicio y un punto final. Desde este momento

Nota: Tu docente explicar ms opciones o caractersticas de este proceso de ser necesario.

Fundacin Sagrera Palomo2012. Derechos reservados