DISEÑO MULTIMEDIA

Desarrollo de animación y multimedia con Flash

INFORMÁTICA
aprender haciendo
Carlos Zepeda Chehaibar

Centro de Investigación
 INFORMÁTICA aprender haciendo
DISEÑO MULTIMEDIA
Desarrollo de animación y multimedia con Flash

Autor
Carlos Zepeda Chehaibar

Coordinación editorial y revisión

Elsa Lesser Carrillo

Diseño editorial
María Goretti Fuentes García

Apoyo editorial
Coordinación de ilustración José Agustín Pedraza Nieto
Ramón Salas Gil
Corrección de estilo
Ilustración de portada Elsa Lesser Carrillo
Said Emmanuel Dokins Milián Lorena Lara Manzano

Ilustración de Interiores Coordinación de Módulos de Instrucción Digital

Ramón Salas Gil Sergio Jiménez Valenzuela
Said Emmanuel Dokins Milián
Desarrollo de Módulos de Instrucción Digital
Revisión de Recursos Digitales Alma Rodríguez de Jesús
Carlos Alberto León Rendón Dennise López Font
Vianick Markiel Oliveri Rivera Sergio Jiménez Valenzuela

Revisión de Recursos Digitales Apoyo en actividades

Vianick Markiel Oliveri Rivera Oscar Contreras Flores

DERECHOS RESERVADOS © 2007 MMVII por Grupo Educare S. A. de C. V.

Ésta es una obra protegida por las leyes internacionales de derechos de autor. Prohibida la reproducción total o parcial de esta obra y/o los recursos
que la acompañan, por cualquier medio, sin autorización escrita de Grupo Educare S. A. de C. V.
Grupo Educare, el logotipo de Grupo Educare, el logotipo del Programa de Informática Educativa, son propiedad de Grupo Educare S. A. de C. V.
El diseño editorial y contenidos gráficos son propiedad exclusiva de Grupo Educare S.A. de C.V.
Todos los nombres de empresas, productos, direcciones y nombres propios contenidos en esta obra, forman parte de ejemplos ficticios, a menos que se indique lo contrario. Las citas, imágenes y
videogramas utilizados en esta obra se utilizan únicamente con fines didácticos, y para la crítica e investigación científica o artística, por lo que el autor y Grupo Educare S. A. de C. V. no asumen
ninguna responsabilidad por el uso que se dé a esta información, ni infringen derecho de marca alguno, en conformidad al Artículo 148 de la Ley Federal del Derecho de Autor.

Microsoft Office, MS DOS, MS Windows, Word, PowerPoint, Excel, FrontPage y Access y sus logotipos son marcas comerciales de Microsoft Corporation. Microsoft y el logo de Microsoft Office son
marcas registradas de Microsoft Corporation en los Estados Unidos y/o en otros países. Microsoft no patrocina, endosa o aprueba esta obra. Flash, Illustrator, Fireworks, Freehand, Dreamweaver,
Photoshop y sus logotipos son marcas registradas de Adobe Inc. Adobe no patrocina o endosa esta obra.
 CONTENIDO

Diseño Multimedia
¿Qué es Flash? 1
Lámina de apoyo 01 Evolución de Flash (Historia) 3
Actividad 01 Evolución de Flash (Historia) 3

Entorno de trabajo 4
Escenario (Stage) 4
Línea de tiempo (Timeline) 4
Herramientas (Tools) 5
Propiedades (Properties) 5
Biblioteca de símbolos (Library) 5
Acciones (Actions) 5
Actividad 02 Reconociendo el entorno 6
MID 01 Entorno de trabajo de Flash 6
Cómo reorganizar los paneles 6

Dibujar y colorear vectores 7

MID 02 Herramientas de Flash 7
Actividad 03 Identificando herramientas 8
Cómo se comportan las formas en Flash 9
MID 03 Dibujando vectores 10
Actividad 04 Dibujando vectores 10

Texto (Text) 11
Texto con ancho fijo 11
Texto extensible 11
Texto Estático (Static Text) 12
Texto Dinámico (Dynamic Text) 12
Texto de Entrada (Input Text) 12
MID 04 Trabajando con texto 13
Actividad 05 Creando formas 13

Trabajo con la Línea de tiempo (Timeline) 13

MID 05 Línea de tiempo 15
Actividad 06 Repaso de la Línea de tiempo 15
Actividad 07 Animando con la Línea de tiempo 16

Sonido (Sound) 17
MID 06 Biblioteca de símbolos 17
Event 17
Stream 17
MID 07 Trabajando con sonido 18
 CONTENIDO

Actividad 08 Haciendo pruebas con sonido 18

Actividad 09 Conceptos clave 20

Símbolos, sus propiedades y líneas de tiempo 21

Tipos de símbolos 21
MID 08 Tipos de símbolo y sus líneas de tiempo 22
MID 09 Cómo crear un botón 22
MID 10 Cómo crear un MovieClip 22
Actividad 10 Tipos de símbolos 23
Instancias y propiedades 23
MID 11 Instancias y sus propiedades 24
Actividad 11 Creando instancias 24
Actividad 12 Creando botones para una tarjeta
interactiva 25

Máscaras (Mask) 27
MID 12 Máscaras 27
Actividad 13 Creando una máscara 28

Principios de Animación 29
Animación Cuadro por Cuadro (frame by frame) 29
Actividad 14 Animando Cuadro por Cuadro 29
MID 13 Animación cuadro por cuadro 29
Animación MotionTween 30
MID 14 MotionTween 30
Actividad 15 Animando con MotionTween 31
Animación ShapeTween 32
MID 15 ShapeTween 33
Actividad 16 Animando con ShapeTween 33
Actividad 17 Identificando tweens 34

Guías de movimiento (MotionGuide) 34

MID 16 Guías de movimiento 35
Actividad 18 Siguiendo guías 35

Filtros (Filters) 36
MID 17 Filtros 37
Actividad 19 Utilizando filtros 37
Actividad 20 Publicidad para Internet 37
 CONTENIDO

Introducción a ActionScript 39

ActionScript en Keyframes 40
MID 18 Acciones en Keyframes 42
Actividad 21 Agregando ActionScript a los Keyframes 42

ActionScript en botones 43
MID 19 ActionScript en botones 45
Actividad 22 Identificando acciones 45
Actividad 23 Programando un menú en Flash 47

ActionScript en MovieClips 49
MID 20 ActionScript en MovieClips 51
Actividad 24 Identificando eventos 51
Nombrar instancias 52
Actividad 25 Nombrando instancias 54
Sintaxis de punto 54
Operadores 55
Operadores de Asignación 55
Operadores Aritméticos 56
Operadores de Comparación 57
Actividad 26 Reconociendo operadores 57
Actividad 27 Modificando propiedades con ActionScript 58

Control de líneas de tiempo 60

Actividad 28 Controlando la bicicleta 63

Variables 65
Actividad 29 Declarando variables 65
Ámbitos de las variables 66

Estructuras Condicionales 67
MID 21 Condicional If y Else 67
Actividad 30 Escribiendo código con un condicional 68
Actividad 31 Efecto de máquina de escribir 69
Actividad 32 Máscaras dinámicas 71
Actividad 33 Simulación física de un rebote 72
Actividad 34 Mejorando el rebote 73

Publicación de proyectos de Flash 73

MID 22 Publicación de proyectos 75
Actividad 35 Recordando 75
 CONTENIDO

Proyecto de Integración 1
Simulación de movimientos realistas 78
Objetivo y plan de programación 78
Actividad 01 Programando los giros 79
Actividad 02 Generando el movimiento 81
Actividad 03 Controlando la velocidad máxima 82
Actividad 04 Mejorando la acción 84

Proyecto de Integración 2
Portafolio Web 86
Actividad 01 Creando botones del menú 86
Actividad 02 Creando programación
reutilizable (prototipos) 88
Actividad 03 Utilizando prototipos en el menú 90
Actividad 04 Creando ventanas para los contenidos
de cada tema 92
Actividad 05 Programando botón de cerrar 95
Actividad 06 Asignando contenido a contacto 96
Actividad 07 Asignando contenido a biografía 97
Actividad 08 Asignando contenido a portafolio 99
Actividad 09 Detallando el sitio final 102

Proyecto de Integración 3
El juego de la galería de tiro 103
Actividad 01 Creando un pato 104
Actividad 02 Preparando el escenario 107
Actividad 03 Moviendo la tira de patos 111
Actividad 04 El tendero 114
Actividad 05 Moviendo al tendero 117
Actividad 06 Llevando el puntaje 119
Actividad 07 La mirilla 122
Actividad 08 Limitando los tiros y cambiando de ronda 124
Actividad 09 Perdiendo el juego 128
 RECURSOS

Material Impreso
Este material forma parte de un conjunto de recursos que conforman el
Programa de Informática Educativa (PIE). Está organizado en bloques integrales
que incluyen todo lo necesario para aprender, practicar y evaluar habilidades
o competencias. Las explicaciones, imágenes, tablas, actividades, notas y tips,
apoyadas con las láminas y tutoriales, permiten integrar la experiencia de
aprendizaje desde múltiples perspectivas. Así, podemos afirmar que el PIE de
Grupo Educare es la mejor manera de aprender haciendo.

El CD
El CD que acompaña al material impreso contiene los Módulos de Instrucción
Digital (MID’s) que te ayudarán a comprender los conceptos y a poner en
práctica las habilidades adquiridas. Los MID’s incluyen una sección de
aprendizaje y una sección de refuerzo interactivo.
Adicionalmente encontrarás los archivos que se requieren para realizar las
actividades, algunos documentos y aplicaciones útiles.
No olvides que el CD es parte integral del programa, por lo que es muy
importante que lo conozcas y utilices en el curso.
Explicación Iconográfica

Actividad
Este icono nos indica un ejercicio que refuerza de manera
práctica e inmediata la parte teórica de este material.

MID. Módulo de Instrucción Digital

Es el material digital de los recursos del programa.
La representación en video de la parte teórica de este
volumen.

Nota
Las notas que verás dentro de tu texto, puntualizan la
teoría o los aspectos más importantes de un tema.

Lámina de apoyo
La lámina es un recurso del profesor, que sirve como
refuerzo dinámico e interactivo a un tema denso, que
complementa la teoría del material impreso.

TIP
Es una sugerencia que complementa un tema del
material impreso, dando un panorama más amplio al
alumno sobre cómo ejecutar una actividad de manera
más sencilla y práctica.
Propuesta
Didáctica
TIEMPO EN
TEMAS SUBTEMAS COMPETENCIA
SEMANAS

D ise ñ o M u ltim e d ia L á m in a d e a p o yo E vo lu ció n d e A p re n d e la h isto ria y la e vo lu ció n

1 Sem ana ¿ Q u é e s F la sh ? F la sh (H isto ria ) d e l Fla sh , d e sd e su s in icio s.

E sce n a rio (S ta ge )
L ín e a d e tie m p o (T im e lin e )
H e rra m ie n ta s (T o o ls)
1 Sem ana E n to rn o d e tra b a jo Id e n tifica e l e n to rn o d e tra b a jo
P ro p ie d a d e s (P ro p e rtie s)
B ib lio te ca d e sím b o lo s (Lib ra ry) p a ra u tiliza r Fla sh .
A ccio n e s (A ctio n s)
C ó m o reo rganiza r lo s p a n e le s

C ó m o se co m p o rta n la s fo rm a s A p lica la s h e rra m ie n ta s d e

2 Sem anas D ib u ja r y co lo re a r ve cto re s
e n F la sh tra b a jo d e Fla sh .

T e xto co n a n ch o fijo
T e xto e xte n sib le R e visa lo s tip o s d e te xto que se
1 Sem ana T e xto T e xto E stá tico e m p le a n a l tra b a ja r e n Fla sh
T e xto D in á m ico
T e xto d e E n tra d a

T ra b a jo co n la L ín e a d e R e p a sa la lin e a d e l tie m p o .
1 Sem ana L ín e a d e tie m p o C re a u n a a n im a ció n co n la lín e a
tie m p o
d e tie m p o .
B ib lio te ca d e sím b o lo s
C o n stru ye so n id o s d ife re n te s
S o n id o E ve n t
2 Sem anas a tra vés d e la b ib lio te ca d e
S tre a m
sím b o lo s, Eve n t y Stre a m .
T ra b a ja n d o co n so n id o

T ip o s d e sím b o lo s D ise ñ a d ife re n te s tip o s d e

S ím b o lo s, su s p ro p ie d a d e s y In sta n cia s y p ro p ie d a d e s sím b o lo s, in sta n cia s y b o to n e s
2 Sem anas lín e a s d e tie m p o in te ra ctiva s e n u n a ta rje ta in te ra ctiva .

M á sca ra s M á sca ra s D ise ñ a u n a m á sca ra co n la s h e rra m ie n ta s

1 Sem ana
d e Fla sh .
A n im a ció n C u a d ro p o r C u a d ro
A p lica a n im a cio n e s cu a d ro p o r
2 Sem anas A n im a ció n M o tio n T w e e n
P rin cip io s d e A n im a ció n cu a d ro , Mo tio n Tw e e n y Sh a p e
A n im a ció n S h a p e T w e e n
Tw e e n .

1 Sem ana G u ía s d e m o vim ie n to G u ía s d e m o vim ie n to U tiliza gu ía s d e m o vim ie n to .

M o d ifica filtro s d e n tro d e la

2 Sem anas F iltro s F iltro s p u b licid a d e n in te rn e t.

D e scrib e a m p lia m e n te la s
1 Sem ana a ccio n e s d e A ctio n S crip t y lo s
In tro d u cció n a A ctio n S crip t A ccio n e s e n K e yfra m e s
A ctio n S crip t e n K e yfra m e s K e yfra m e s. A gre ga A ctio n S crip t
a lo s K e yfra m e s

M e m o riza la s a ccio n e s d e
2 Sem anas A ctio n S crip t e n b o to n e s A ctio n S crip t e n b o to n e s A ctio n S crip t e n b o to n e s.

N o m b ra r in sta n cia s
S in ta xis d e p u n to N a rra a m p lia m e n te la s a ccio n e s
O p e ra d o re s d e A ctio n S crip t e n M o vie C lip s.
2 Sem anas A ctio n S crip t e n M o vie C lip s
O p e ra d o re s d e A sign a ció n
O p e ra d o re s A ritm é tico s
O p e ra d o re s d e C o m p a ra ció n

O rd e n a la s lin e a s d e l tie m p o e n
1 Sem ana C o n tro l d e lín e a s d e tie m p o C o n tro l d e lín e a s d e tie m p o
e l co n tro l d e u n a b icle ta .

1 Sem ana V a ria b le s Á m b ito s d e la s va ria b le s C o n stitu ye lo s á m b ito s d e la s

va ria b le s.
 ACTIVIDADES SUGERIDAS PARA EL ALUMNO
INDICADOR OBJETIVOS RECURSOS
(CONTENIDAS EN EL MATERIAL DE TRABAJO)

D e scrib e la h isto ria y la e vo lu ción d e l R e la cio n a e l sign ifica o d e C o m p u ta d o ra , m a te ria l d e a p o yo

Fla sh . d ise ñ o u ltim e d ia y Fla sh . A ctivid a d 0 1 E vo lu ció n d e F la sh d e l a lu m n o y cd d e l a lu m n o

C re a u n cu a d ro sin óp tico co n e l
e n to rn o d e tra b a jo (e sce n a rio , lín e a M e m o riza la s h e rra m ie n ta s d e l A ctivid a d 0 2 R e co n o cie n d o e l e n to rn o C o m p u ta d o ra , m a te ria l d e a p o yo
e n to rn o d e tra b a jo co n Fla sh . d e l a lu m n o y cd d e l a lu m n o
d e tie m p o , h e rra m ie n ta s,
p ro p ie d a d e s, b ib lio te ca d e sím b o lo s,
a ccio n e s, y p a n e le s)

U b ica la s fo rm a s e n la s que se C o m p u ta d o ra , m a te ria l d e a p o yo

D ib u ja y co lo re a ve cto re s u tiliza n d o A ctivid a d 0 3 Id e n tifica n d o h e rra m ie n ta s
u tiliza Fla sh e n e l m o m e n to d e d e l a lu m n o y cd d e l a lu m n o
la s h e rra m ie n ta s d e tra b a jo . A ctivid a d 0 4 D ib u ja n d o ve cto re s
d ib u ja r y co lo re a r ve cto re s.

C o n stru ye d ife re n te s form a s S e le ccio n a la s d ife re n te s

u tiliza n d o e l te xto co n a n ch o fijo , C o m p u ta d o ra , m a te ria l d e a p o yo
fo rm a s d e te xto que p u e d e n A ctivid a d 0 5 C re a n d o fo rm a s d e l a lu m n o y cd d e l a lu m n o
e xte n sib le , e stá tico , d in á m ico y d e a p lica rse co n Fla sh .
e n tra d a .

T ra b a ja co n la Lín e a d e l A ctivid a d 0 6 R e p a so d e la L ín e a d e tie m p o C o m p u ta d o ra , m a te ria l d e a p o yo

tie m p o . A ctivid a d 0 7 A n im a n d o co n la L ín e a d e tie m p o d e l a lu m n o y cd d e l a lu m n o

A ctivid a d 0 8 H a cie n d o p ru e b a s co n so n id o C o m p u ta d o ra , m a te ria l d e a p o yo

A p lica d ive rso s so n id o s. A ctivid a d 0 9 C o n ce p to s cla ve d e l a lu m n o y cd d e l a lu m n o

Id e n tifica lo s sím b o lo s, su s A ctivid a d 1 0 T ip o s d e sím b o lo s C o m p u ta d o ra , m a te ria l d e a p o yo

p ro p ie d a d e s y la s lín e a s d e A ctivid a d 1 1 C re a n d o in sta n cia s d e l a lu m n o y cd d e l a lu m n o
tie m p o . A ctivid a d 1 2 C re a n d o b o to n e s p a ra u n a ta rje ta in te ra ctiva

D ise ñ a u n a m á sca ra co n la s E je cu ta la cre a ció n d e u n a C o m p u ta d o ra , m a te ria l d e a p o yo

A ctivid a d 1 3 C re a n d o u n a m á sca ra d e l a lu m n o y cd d e l a lu m n o
h e rra m ie n ta s d e Fla sh . m á sca ra .
A ctivid a d 14 A n im a n d o C u a d ro p o r C u a d ro
U tiliza la s h e rra m ie n ta s b á sica s p a ra R e co n o ce y a p lica lo s C o m p u ta d o ra , m a te ria l d e a p o yo
A ctivid a d 15 A n im a n d o co n M o tio n T w e e n
cre a r un a a n im a ció n e n u n n u e vo p rin cip io s d e a n im a ció n . d e l a lu m n o y cd d e l a lu m n o
A ctivid a d 16 A n im a n d o co n S h a p e T w e e n
d o cu m e n to d e Fla sh .
A ctivid a d 17 Id e n tifica n d o Tw e e n s
C re a u n a n u e va a n im a ció n cu a d ro
p o r cu a d ro . C o m p u ta d o ra , m a te ria l d e a p o yo
C re a la s gu ía s d e m o vim ie n to . A ctivid a d 1 8 S igu ie n d o gu ía s d e l a lu m n o y cd d e l a lu m n o
D ise ñ a u n a a n im a ció n sigu ie n d o
gu ía s M o tio n T w e e n .
U tiliza lo s filtro s e n u n a n u e va
a n im a ció n d e Fla sh . C o n stru ye filtro s d e n tro d e la A ctivid a d 1 9 U tiliza n d o filtro s C o m p u ta d o ra , m a te ria l d e a p o yo
C re a va rio s b a n n e rs a p lica n d o p u b licid a d e n in te rn e t. A ctivid a d 2 0 P u b licid a d p a ra In te rn e t d e l a lu m n o y cd d e l a lu m n o
d im e n sio n e s y d o cu m e n to s
d ife re n te s.
E xp lica e l u so d e lo s Ke yfra m e s e n
Fla sh . R e co n o ce la s a ccio n e s que se C o m p u ta d o ra , m a te ria l d e a p o yo
genera n co n lo s Ke yfra m e s. d e l a lu m n o y cd d e l a lu m n o
A b re u n d o cu m e n to ya e xiste n te y
a p lica la s a ccio n e s d e lo s Ke yfra m e s.
E xp lica la fun ció n d e lo s b o to n e s que
Id e n tifica la s a ccio n e s d e A ctivid a d 2 2 Id e n tifica n d o a ccio n e s C o m p u ta d o ra , m a te ria l d e a p o yo
se u tiliza n e n A ctio n S crip t.
A ctio n S crip t e n b o to n e s. A ctivid a d 2 3 P ro gra m a n d o u n m e n ú e n F la sh d e l a lu m n o y cd d e l a lu m n o
P ro gra m a u n n u e vo m e n ú e n Fla sh .
E la b o ra u n cu a d ro sin ó p tico co n la s
h e rra m ie n ta s que se a p lica n e n
A ctio n S crip t d e n tro d e M o vie C lip s.
N o m b ra la s in sta n cia s a la s cu a le s
p e rte n e ce ca d a íco n o . A ctivid a d 24 Id e n tifica n d o e ve n to s
U tiliza la s a ccio n e s d e C o m p u ta d o ra , m a te ria l d e a p o yo
V isu a liza la s d ife re n cia s e n tre lo s A ctivid a d 25 N o m b ra n d o in sta n cia s
A ctio n S crip t e n M o vie C lip s. d e l a lu m n o y cd d e l a lu m n o
o p e ra d o re s (arítm e tico , d e A ctivid a d 26 R e co n o cie n d o o p e ra d o re s
a sign a ció n o d e co m p a ra ció n ). A ctivid a d 27 M o d ifica n d o p ro p ie d a d e s co n A ctio n S crip t
M o d ifica u n a p ro p ie d a d co n
A ctio n S crip t.

A p lica la s Lin e a s d e l tie m p o e n e l D istin gue e l co n tro l d e la s A ctivid a d 2 8 C o n tro la n d o la b icicle ta

C o m p u ta d o ra , m a te ria l d e a p o yo
co n tro l d e u n a b icle ta . Lin e a s d e tie m p o . d e l a lu m n o y cd d e l a lu m n o

M o d ifica la s va ria b le s d e n tro d e u n C o n stru ye n u e va s va ria b le s. A ctivid a d 2 9 D e cla ra n d o va ria b le s C o m p u ta d o ra , m a te ria l d e a p o yo

d ise ñ o d e Fla sh . d e l a lu m n o y cd d e l a lu m n o
 TIEMPO EN
TEMAS SUBTEMAS COMPETENCIA
SEMANAS

C o n d icio n a l If y E lse C o n o ce la s d ife re n cia s e n tre

3 Sem anas E stru ctu ra s C o n d icio n a le s
e stru ctu ra s co n d icio n a le s.

P u b lica ció n d e p ro ye cto s d e R e cu e rd a la s ca ra cte rística s

1 Sem ana P u b lica ció n d e p ro ye cto s p a ra la p u b lica ció n d e p ro ye cto s
F la sh
e n Fla sh .

S im u la ció n d e m o vim ie n to s R e a liza e l p ro ye cto d e

2 Sem anas P ro ye cto d e In te gra ció n sim u la ció n d e m o vim ie n to s
re a lista s
re a lista s.

P ro ye cto d e In te gra ció n P o rta fo lio W e b

C re a u n p o rta fo lio w e b .

4 Sem anas P ro ye cto d e In te gra ció n E l ju e g o d e la ga le ría d e tiro E la b o ra e l p ro ye cto "E l ju e g o d e

la ga le ria d e tiro "

Total 37 semanas
 INDICADOR OBJETIVOS ACTIVIDADES SUGERIDAS PARA EL ALUMNO RECURSOS
(CONTENIDAS EN EL MATERIAL DE TRABAJO)

In ve stiga la s ca ra cte rística s d e la s

e stru ctu ra s co n d icio n a le s.
A b re u n n u e vo d o cu m e n to d e Fla sh , y
cre a so b re e l e sce n a rio u n ca m p o d e A ctivid a d 3 0 E scrib ie n d o có d igo co n u n co n d icio n a l
te xto u tiliza n d o e l p a n e l d e A ctivid a d 3 1 E fe cto d e m á qu in a d e e scrib ir
R e la cio n a la s e stru ctu ra s d e
p ro p ie d a d e s. A ctivid a d 3 2 M á sca ra s d in á m ica s C o m p u ta d o ra , m a te ria l d e a p o yo
co n d icio n a l If y E lse e n u n a
C a m b ia la ve lo cid a d d e lo s A ctivid a d 3 3 S im u la ció n física d e u n re b o te d e l a lu m n o y cd d e l a lu m n o
n u e va a p lica ció n .
fo to gra m a s e n u n n u e vo d o cu m e n to A ctivid a d 3 4 M e jo ra n d o e l reb o te
d e Fla sh .
R e a liza ca m b io s e n e l m o vim ie n to d e
im a g e n e s d e n tro d e u n d o cu m e n to
ya e xiste n te .
A b re u n n u e vo d o cu m e n to e n Fla sh y
R e p a sa la a p lica ció n d e Fla sh y C o m p u ta d o ra , m a te ria l d e a p o yo
a p lica la s ca ra cte ristica s d e A ctivid a d 3 5 R e co rd a n d o
su s h e rra m ie n ta s. d e l a lu m n o y cd d e l a lu m n o
p u b lica ció n .
P ro gra m a lo s giro s. A ctivid a d 0 1 P ro gra m a n d o lo s giro s
G e n e ra e l m o vim ie n to . A p lica lo s co n o cim ie n to s A ctivid a d 0 2 G e n e ra n d o e l m o vim ie n to C o m p u ta d o ra , m a te ria l d e a p o yo
C o n tro la la ve lo cid a d m á xim a . a p re n d id o s e n Fla sh . A ctivid a d 0 3 C o n tro la n d o la ve lo cid a d m á xim a d e l a lu m n o y cd d e l a lu m n o
M e jo ra la a cció n fin a l. A ctivid a d 0 4 M e jo ra n d o la a cció n

C re a b o to n e s d e l m e n ú . A ctivid a d 0 1 C re a n d o b o to n e s d e l m e n ú
C o n stru ye p ro gra m a ció n re u tiliza b le . A ctivid a d 0 2 C re a n d o p ro gra m a ció n re u tiliza b le
U tiliza p ro to tip o s e n e l m e n ú . A ctivid a d 0 3 U tiliza n d o p ro to tip o s e n e l m e n ú
D ise ñ a ve n ta n a s p a ra lo s co n te n id o s A ctivid a d 0 4 C re a n d o ve n ta n a s p a ra lo s co n te n id o s d e C o m p u ta d o ra , m a te ria l d e a p o yo
A p lica lo s co n o cim ie n to s d e l a lu m n o y cd d e l a lu m n o
d e ca d a te m a . ca d a te m a
a p re n d id o s e n Fla sh .
P ro gra m a e l b o tó n d e ce rra r. A ctivid a d 0 5 P ro gra m a n d o b o tó n d e ce rra r
A sign a e l co n te n id o a co n ta cto , A ctivid a d 0 6 A sign a n d o co n te n id o a co n ta cto
b io gra fía y p o rta fo lio . A ctivid a d 0 7 A sign a n d o co n te n id o a b io gra fía
D e ta lla e l sitio fin a l. A ctivid a d 0 8 A sign a n d o co n te n id o a p o rta fo lio
A ctivid a d 0 9 D e ta lla n d o e l sitio fin a l
A ctivid a d 01 C re a n d o u n p a to
In te gra lo s p ro ce so s A ctivid a d 02 P re p a ra n d o e l e sce n a rio
in vo lu cra d o s e n la cre a ció n d e A ctivid a d 03 M o vie n d o la tira d e p a to s
C o m p u ta d o ra , m a te ria l d e a p o yo
D ise ñ a u n p a to . u n ju e g o (p la n e a ció n , d ise ñ o A ctivid a d 04 E l te n d e ro
d e l a lu m n o y cd d e l a lu m n o
P re p a ra e l e se n a rio . d e a rte , cre a ció n d e in te rfa z, A ctivid a d 05 M o vie n d o a l te n d e ro
p ro gra m a ció n y d e p u ra ció n ). A ctivid a d 06 L le va n d o e l p u n ta je
A ctivid a d 07 L a m irilla
A ctivid a d 08 L im ita n d o lo s tiro s y ca m b ia n d o d e ro n d a
A ctivid a d 09 P e rd ie n d o e l ju e g o
 Diseño Multimedia

¿Qué es Flash?
Flash se originó como un simple programa de dibujo para computadora llamado
SuperPaint creado por John Gay, estudiante de ingeniería a quien le gustaba
diseñar y construir cosas. El programa funcionaba en las computadoras Apple
II, en una época en la que los gráficos eran algo novedoso y ni siquiera se
había inventado el concepto de “deshacer” (Undo).

La tecnología de SuperPaint fue desarrollada por varias compañías hasta crear

un programa que se llamó IntelliDraw. La característica única de IntelliDraw
era que, además de poder dibujar cosas, era posible agregar acciones a los
dibujos. Por ejemplo, por primera vez fue posible dibujar una gráfica que
cambiara mientras el usuario tecleaba diferentes números. IntelliDraw tuvo
poco éxito en el mercado, pero John Gay otra vez pensó que tenía que crear
un producto novedoso.
 En 1995, la compañía Future Wave se interesaba por crear programas de
animación, pero en ese entonces, la única forma de distribuir animación era
por medio de videos VHS o CD-ROM, por lo que el mercado para un software
que facilitara la animación era muy reducido.

Pero justo en la misma época, el Internet surgía como una novedosa y creciente
herramienta de comunicación. En teoría, era posible que Internet se volviera
lo suficientemente popular como para crecer y permitir transmitir gráficos e
incluso animaciones. Si esto ocurría, Future Wave tendría una oportunidad
para vender su programa de animación.

Con esta esperanza en mente comenzaron a trabajar en un programa que

permitiera dibujar, crear animación y usar un lenguaje de programación para
la Web. El programa se llamó Future Splash Animator y empezó a crecer poco
a poco.

En 1996, la compañía Macromedia compró el novedoso programa y lo rebautizó

con el nombre de Flash 1.0. Diez años más tarde, Macromedia ya había
lanzado al mercado 7 versiones de Flash, alcanzando a millones de usuarios
y convirtiéndose en la aplicación para la Web con mayor penetración en el
mundo.

En el 2006 la compañía Adobe, líder mundial en aplicaciones para diseño

gráfico, adquiere a Macromedia. La fusión de los expertos en diseño Web y
diseño gráfico, seguramente ofrecerá poderosas herramientas de software en
el futuro.

8
 Pero entonces… ¿Qué es Flash hoy en día?

Flash es una herramienta de edición con la que los diseñadores y desarrolladores

pueden crear presentaciones, aplicaciones y contenido, que permite la
interacción del usuario. Los proyectos de Flash incluyen desde simples diseños
hasta complejos sitios Web con animaciones, contenido de vídeo e interacciones
complejas.

Dado el pequeño tamaño de sus archivos, Flash resulta ideal para crear
contenido que se distribuye a través de Internet. Para lograrlo, Flash utiliza en
gran medida gráficos vectoriales. Este tipo de gráfico requiere mucha menos
memoria y espacio de almacenamiento que las imágenes tradicionales de
mapa de bits.

LFlash 01 Lámina de apoyo: Evolución de Flash (Historia)

Evolución de Flash (Historia)

01
Actividad
1. En la red mundial de Internet hay miles de sitios con contenido creado
en Flash, algunos de ellos simples, pero otros muy complejos. La página
[Link] (The Favourite Website Awards), agrupa decenas
de sitios reconocidos por su alta calidad. Visita este sitio y navega en
algunas páginas para que conozcas las posibilidades de Flash y te sirvan
de inspiración creativa.
2. Elige tres de los sitios visitados (los que más te hayan gustado) y llena
las siguientes formas:

Sitio 1: URL:

Análisis del Diseño:

Análisis del Contenido:

Análisis de la Interactividad:

Sitio 2: URL:

Análisis del Diseño:

Análisis del Contenido:

Análisis de la Interactividad:

Diseño Multimedia 9
 Sitio 3: URL:

Análisis del Diseño:

Análisis del Contenido:

Análisis de la Interactividad:

Entorno de trabajo
El entorno de trabajo de Flash se compone de seis paneles principales que
pueden mostrarse, ocultarse o moverse según sea necesario. Todos los paneles
se pueden mostrar u ocultar por medio del Menú Window.

Te recomiendo que mientras te familiarizas con el programa, utilices la

distribución predeterminada de los paneles en el área de trabajo. Para mostrar
la distribución predeterminada utiliza el Menú Window/Workspace Layout/
Default.

TIP
A los documentos de Flash se les llama películas debido a que tienen
elementos similares a los largometrajes. Por esta razón es más sencillo
comprender algunos conceptos si los relacionas con el séptimo arte.

Escenario (Stage)
Situado en la parte central del programa, es el área de trabajo rectangular
donde se coloca el contenido, ya sean gráficos vectoriales, cuadros de texto,
botones, movie clips, clips de video o imágenes de mapa de bits. Sólo el
contenido que esté dentro de este rectángulo será mostrado en la película
terminada. Puedes utilizar áreas fuera del rectángulo para situar objetos que
después entrarán a escena.

Línea de tiempo (Timeline)

Se ubica en la parte superior de la pantalla. Muestra dos dimensiones de la
película: el tiempo (horizontalmente a través de frames) y la profundidad
(verticalmente en Layers o Capas). Los componentes principales de la línea de
tiempo son los Layers, los frames y la cabeza lectora.
a. Los Layers son capas apiladas unas sobre otras, cada una de las cuales
puede contener un gráfico diferente que aparece en el escenario. Los
Layers de un documento aparecen de forma vertical, a la izquierda de
la línea de tiempo. Todos los gráficos que se colocan en el escenario se
ubican en algún Layer. Los tipos de Layers que se pueden insertar en la
línea de tiempo son: Layers, Guías, Guías para movimiento y Máscaras.

10
b. Al igual que en un largometraje, los documentos de Flash dividen el tiempo
en cuadros o frames. Los frames contenidos en cada Layer aparecen de
forma horizontal, a la derecha del nombre del Layer. Los tipos de frames que
se pueden insertar en un Layer son: Frame, Keyframe y Blank Keyframe.
c. La cabeza lectora indica el frame actual que se muestra en el escenario.
Mientras se reproduce una película de Flash, la cabeza lectora se desplaza
de izquierda a derecha por la línea de tiempo. Es posible hacer que la
cabeza lectora avance hacia atrás o se mueva a diferentes lugares, pero
para ello es necesario apoyarnos con algo de programación.

Herramientas (Tools)
Las herramientas permiten dibujar, pintar, seleccionar y modificar objetos, así
como cambiar la visualización del escenario.

Propiedades (Properties)
Desde este panel se pueden modificar los atributos más utilizados de cualquier
herramienta que esté activa o cualquier objeto que tengamos seleccionado en
el escenario. Por lo tanto, el aspecto de este panel variará dependiendo de lo
que se tenga seleccionado:
Si seleccionas una herramienta del panel Tools, sin que se haya
seleccionado ningún objeto en el escenario, el Panel de propiedades
muestra y permite modificar las características de esa herramienta, como
el grosor o color.
Si seleccionas un objeto en el escenario, el Panel de propiedades
muestra y permite modificar las propiedades de dicho objeto, como el
color, la posición y las dimensiones.
Si no hay ninguna herramienta ni objeto seleccionado, el Panel de
propiedades muestra las características del documento, como el color
de fondo, dimensiones y velocidad.

Para asegurarte de que no hay nada seleccionado, puedes tomar la herramienta

Selection Tool (flecha negra) y hacer un clic sobre un área vacía del
escenario.

Biblioteca de símbolos (Library)

En este panel se guardan y organizan los símbolos creados en Flash, además de
archivos importados tales como gráficos, imágenes de mapa de bits, archivos
de sonido y clips de video. En este panel puedes organizar los elementos
creando carpetas.

Acciones (Actions)
El panel Actions permite crear y editar código en ActionScript (el lenguaje de
programación de Flash) para hacer la película interactiva.

Diseño Multimedia 11
 Reconociendo el entorno

02
Actividad
Observa el MID 01 Entorno de trabajo y coloca los nombres del entorno de
trabajo de Flash en el lugar que corresponde en la imagen siguiente.

Línea de tiempo
Herramientas Escenario Biblioteca de símbolos

Acciones
Propiedades
Flash

Entorno de trabajo de Flash

01
Cómo reorganizar los paneles
Todos los paneles tienen tres áreas de control para manejarlos como mejor te
convenga. Analiza la función de cada una de estas áreas:

Arrastra desde los puntos a Haz clic en el nombre del panel

la izquierda del nombre, para para minimizarlo (colapsarlo) o
colocar el panel en otro lugar de desplegarlo normalmente.
la pantalla.

Utiliza el menú de control del panel para cerrarlo y acceder

a opciones relacionadas con la función de cada panel.

12
 La distribución de paneles se guarda cuando cierras el programa, de manera
que al iniciarlo de nuevo, aparece como lo dejaste la última vez. No olvides
que siempre puedes regresar a la distribución de paneles predeterminada,
utilizando el Menú Window/Workspace Layout/Default. En todas las
actividades de este texto, suponemos que estás trabajando con la distribución
predeterminada.

Dibujar y colorear vectores

Flash trabaja primordialmente con gráficos vectoriales. Un gráfico vectorial
se compone de trazos que tienen propiedades como color, tamaño, posición,
entre otros. Un gráfico vectorial puede ser rotado, escalado o deformado sin
perder sus propiedades ni disminuir su calidad.

Para crear gráficos vectoriales en Flash nos apoyamos del Panel de

herramientas, el cual está dividido en cuatro secciones:

Herramientas vectoriales. Se utilizan para dibujar, pintar, borrar,

modificar formas, agregar texto, seleccionar, etcétera.

Herramientas de vistas. Sirven para desplazarse por el área de

trabajo, para ampliar o reducir la vista de la misma.

Color de relleno y color de contorno. Al dibujar los gráficos

vectoriales en Flash, se trabaja con dos elementos: el relleno
y la línea.

Opciones. Muestra las variantes de la herramienta

seleccionada.

Ahora conozcamos las funciones básicas de cada herramienta.

Flash

02 Herramientas de Flash

Diseño Multimedia 13
 Identificando herramientas

03
Actividad
Observa detenidamente el MID 02 Herramientas de Flash y relaciona la imagen
con su función. Une con una línea el ícono con su descripción.

Gradient transform. Sirve para escalar, rotar y

distorsionar rellenos, sin afectar el gráfico que los
contiene.

Free transform. Sirve para escalar, distorsionar y rotar

gráficos.

Pencil. Permite dibujar líneas o contornos a mano

alzada.

Line. Permite crear líneas rectas.

Lasso. Permite seleccionar áreas irregulares a mano

alzada.

Subselection. Sirve para seleccionar los puntos que

dan forma a un gráfico vectorial.

PoliStar. Sirve para crear polígonos o estrellas.

Selection Tool. Sirve para seleccionar y manipular

objetos en el escenario.

Pen. Se usa para crear polígonos, curvas y trazos

controlados.

Text. Permite introducir textos.

Rectangle. Sirve para crear rectángulos o cuadrados.

Si se mantiene presionada la tecla <Shift> mientras
utilizamos esta herramienta, se crearán cuadrados
perfectos. Al mantener presionado el botón de la
herramienta Rectangle, aparece la opción para
seleccionar la herramienta PoliStar.

Brush. Se emplea para aplicar rellenos. Se puede

modificar su grosor y forma de trazo.

InkBottle. Se utiliza para modificar el color del contorno

de los gráficos.

PaintBucket. Se utiliza para rellenar gráficos o cambiar

su color de relleno.

14
 Oval. Sirve para crear óvalos o círculos. Si se mantiene
presionada la tecla <Shift> mientras utilizamos esta
herramienta se crearán círculos perfectos.

Eyedropper. Se utiliza para tomar una muestra del

color de relleno o contorno de un gráfico.

Eraser. Su función es eliminar gráficos.

Hand. Al seleccionar esta opción, podemos mover el

escenario arrastrando con el ratón.

Zoom. Su función es aumentar la visión del escenario

cada vez que hagamos clic con esta herramienta.

Stroke Color. Establece el color del contorno de

un gráfico o de una línea. Al presionar este botón se
despliega una paleta de colores disponibles.

Fill Color. Establece el color de relleno de un gráfico. Al

presionar este botón se despliega una paleta de colores
disponibles.

Cómo se comportan las formas en Flash

En objetos como óvalos o rectángulos, la orilla es independiente del relleno.
Si utilizas la herramienta Selection Tool para seleccionar un objeto, puedes
realizar estas acciones:
Un clic sobre el relleno seleccionará sólo el relleno. Podrías moverlo o
eliminarlo sin modificar el contorno.
Un clic sobre una línea del contorno, seleccionará un segmento de línea.
En el caso de un rectángulo, un clic selecciona sólo un lado, pero como
el contorno de un óvalo es un sólo segmento de línea continua, un clic
selecciona todo el contorno.
Un doble clic sobre el contorno lo selecciona todo.
Un doble clic sobre el relleno selecciona tanto el relleno como el
contorno.
Para seleccionar áreas mayores o sólo parte de algún objeto, utiliza la
herramienta Selection Tool y arrastra enmarcando los objetos o partes
a seleccionar.

Algunos objetos como las líneas creadas con las herramientas Line, Pen y
Pencil, sólo tienen contorno y no relleno. Otros objetos como los creados con
las herramientas Text y Brush, sólo tienen relleno y no contorno.

Para aplicar un color de relleno, selecciona la figura y utiliza el Panel

de propiedades. También puedes aplicar rellenos con la herramienta
PaintBucket, haciendo clic con dicha herramienta sobre cualquier figura, esté
o no seleccionada.

Similarmente los colores de contorno se aplican con la herramienta

InkBottle.

Diseño Multimedia 15
 Flash

Dibujando vectores
03
Dibujando vectores

04
Actividad
En esta actividad vas a dibujar y colorear vectores, además de conocer su
comportamiento en Flash.

1. Abre un documento nuevo de Flash utilizando el Menú File/New y

selecciona la opción Flash Document. Analiza la línea de tiempo. Todas
las películas nuevas de Flash tienen un Layer y un frame en blanco.
2. Selecciona la herramienta Rectangle y dibuja un cuadrado perfecto en el
centro del escenario.
3. Selecciona el cuadrado con la herramienta Selection Tool y cambia su
color de relleno desde el selector Fill Color.
4. Selecciona la herramienta Oval y dibuja un círculo a un lado del cuadrado,
dejando un espacio entre las dos figuras. Es importante que el tamaño del
círculo sea un poco más grande que el del cuadrado.
5. Selecciona el círculo con la herramienta Selection Tool y cambia su color
de relleno a uno diferente al del cuadrado.
6. Selecciona el círculo y duplícalo con el Menú Edit/Duplicate. Arrastra el
nuevo círculo al lado opuesto del cuadrado.
7. Acerca los dos círculos sobreponiéndolos al cuadrado.
8. Elimina los dos círculos. Observa cómo el cuadrado queda recortado.
9. Selecciona lo que quedó del cuadrado. Usa el Menú Edit/Copy para
copiar la selección al portapapeles. Luego usa el Menú Edit/Paste in
Place para pegar la copia en el lugar donde estaba el original. Por último
usa el Menú Modify/Transform/Rotate 90° CW y la nueva figura
formará una cruz con la figura anterior.

16
10. Prueba la película con Menú Control/Test Movie.
11. Guarda el archivo con Menú File/Save con el nombre [Link]
en la carpeta que tu profesor indique.

TIP
En Flash si se sobreponen dos gráficos de diferente color, se cortan. Si se
sobreponen dos gráficos del mismo color, se agrupan. Si no quieres que
unos gráficos afecten a otros, debes colocarlos en diferentes Layers o bien
convertirlos en símbolos como estudiaremos más adelante.

Texto (Text)
Para añadir texto a una película Flash, selecciona la herramienta Text y da clic
en el lugar donde lo quieres situar en el escenario. El texto puede introducirse
de dos modos:

Texto con ancho fijo

Está contenido en un espacio de ancho fijo que envuelve al texto. Si al escribir
se sobrepasa el espacio determinado, entonces el texto pasa a la siguiente
línea. Al introducir o editar texto de ancho fijo, un pequeño cuadrado aparece
en la esquina inferior derecha del área de edición.

Texto extensible
Está contenido en una línea que se expande mientras se escribe. Al introducir
o editar texto de ancho extensible, un pequeño círculo aparece en la esquina
inferior derecha del área de edición.

Diseño Multimedia 17
 Ya sea de ancho fijo o extensible, en el Panel de propiedades podemos
modificar los atributos de color, tamaño, tipo de fuente, alineación del texto
e interlineado. Además se pueden añadir hipervínculos (URL link) y podemos
decidir si el texto será seleccionable o no en la película publicada. Además
puedes seleccionar si será un texto estático, dinámico o de entrada.

Texto Estático (Static Text)

Estos textos funcionan como si fueran imágenes: son textos que no se
modificarán al publicar la película. Un texto estático se puede usar para títulos,
mensajes o etiquetas que no van a cambiar durante la reproducción de la
película.

Texto Dinámico (Dynamic Text)

El contenido de estos textos puede ser modificado durante la reproducción de
la película publicada, normalmente mediante programación. Mensajes como el
puntaje de un juego o la hora actual, son ejemplos de textos dinámicos.

Texto de Entrada (Input Text)

Este tipo de texto se utiliza para que el usuario de la película terminada pueda
introducir información, que puede ser manipulada mediante programación.

Cuando una película pide información al usuario como su nombre, correo

electrónico o comentarios, esta información se introduce por lo regular en un
texto de entrada.

Un texto seleccionado puede convertirse en caracteres separados utilizando

el Menú Modify/Break Apart o la combinación de teclas <Ctrl+B>. Si
se aplica por segunda vez este mismo comando, los caracteres separados
se convierten en gráficos vectoriales independientes, que ya no pueden ser
editados con la herramienta de texto.

18
Flash

04 Trabajando con texto

Creando formas

05
Actividad
Con el objetivo de que te familiarices con las herramientas de dibujo de Flash,
crearás los siguientes diseños, manteniendo siempre calidad en tu trabajo.
Incluye junto a cada uno un texto con su nombre.

1. Un teléfono móvil
2. Un automóvil
3. Una tortuga
4. La silueta de una persona

Trabajo con la Línea de tiempo (Timeline)

La línea de tiempo se utiliza para organizar las imágenes, gráficos, sonidos e
instrucciones de programación de una película. Imagina que una película Flash
es como una película de cine o una obra de teatro: diferentes actores, objetos,
gráficos y secuencias sonoras, pueden entrar o salir del escenario de acuerdo
a las instrucciones que determine el director para cada momento.

De forma similar, Flash organiza los gráficos, sonidos e instrucciones a lo largo

de la línea de tiempo en cuadros consecutivos llamados frames. De forma
predeterminada, Flash reproduce 12 frames cada segundo (frames per second
o fps), pero es posible definir una velocidad diferente, desde 0.01 hasta 120
fps.

Por otra parte, en una película de cine no todos los actores y objetos están
en el mismo plano: hay elementos de fondo mientras el resto se distribuyen
unos delante o detrás de otros. En Flash esta distribución se logra con capas o
Layers. Cada Layer es independiente, así que pueden modificarse los objetos
de un Layer sin que afecten a los objetos de otros Layers. Cada Layer dispone
de su propia secuencia de frames, aunque durante la reproducción todos
corren en sincronía.

Capas

Diseño Multimedia 19
 Cuando inicias un nuevo documento de Flash, éste tiene sólo un frame, en
un solo Layer. A partir de ahí es posible insertar tantos frames como sean
necesarios y organizar el contenido en tantos Layers como quieras.

Para insertar un nuevo Layer usa el Menú Insert/Timeline/Layer o bien,

el botón Insert Layer de la línea de tiempo.

Para eliminar un Layer, selecciónalo en la línea de tiempo y da clic en el botón

Delete Layer .

Cuando insertas nuevos frames, pueden ser de alguno de los siguientes

tipos:

Keyframe (Fotograma clave): Son frames con un contenido específico,

que se crean para insertar contenido nuevo en la película. Se identifican
por tener dentro un punto negro.

Para insertar un Keyframe en el lugar seleccionado de un Layer, usa el

Menú Insert/Timeline/Keyframe o utiliza la tecla <F6>. Para eliminar
un Keyframe seleccionado, usa el Menú Edit/Timeline/Clear Keyframe
o la combinación de teclas <Shift+F6>.

Frame (Fotograma normal): Son los frames que siguen a un Keyframe.

No representan contenido nuevo, ya que contienen exactamente lo mismo
que el Keyframe que les precede. Se utilizan para alargar la duración de
un contenido que permanece sin cambios durante cierto tiempo en la
película.

Para insertar un frame en el lugar seleccionado de un Layer, ve al Menú

Insert/Timeline/Frame o utiliza la tecla <F5>. Para eliminar un frame
utiliza la combinación de teclas <Shift+F5>.

Blank Keyframe (Fotograma clave vacío): Son Keyframes sin

contenido. Se identifican por tener un punto blanco.

Para insertar un Keyframe vacío ve al Menú Insert/Timeline/Blank

Keyframe o utiliza la tecla <F7>.

Para eliminar un Keyframe seleccionado, usa el Menú Edit/Timeline/

Clear Keyframe o la combinación de teclas <Shift+F7>.

Blank Keyframe

Keyframe

Frames normales

20
 TIP
Los Keyframes en Flash pueden identificarse no sólo por número sino
también por nombre. Para asignar un nombre a un Keyframe, selecciónalo
en la línea de tiempo y escribe una etiqueta en el cuadro “frame label”
que se encuentra en el extremo izquierdo del Panel de propiedades. Un
Keyframe con un nombre asignado se identifica con una pequeña bandera
roja en la línea de tiempo.

Flash

05 Línea de tiempo

Repaso de la Línea de tiempo

06
Actividad
Observa el MID Línea de Tiempo y coloca los nombres de cada parte en la
siguiente imagen.

Capa
Keyframe
Frame

Blank keyframe
Borrar capa
Insertar capa nueva

Diseño Multimedia 21
 Animando con la Línea de tiempo

07
Actividad
1. Abre el archivo Actividad07 de tu CD de trabajo o carpeta de actividades.
Este documento es la animación de un acróbata organizado en diferentes
Layers y frames. Analiza el documento y llena la siguiente tabla siguiendo
el mismo orden que tiene en la línea de tiempo:

Layer Nombre del Layer Descripción del contenido Keyframes en los cuadros:

4 Acróbata Contiene las imágenes del Cambia el contenido

acrobata en movimiento conforme avanza
3 Utilería Tiene las cosas que Un único frame
están sobre el escenario
2 Fondo Contiene las imágenes Un único frame
del fondo del escenario
1 Extra No contiene nada No tiene keyframe

a. ¿Por qué algunos Layers tienen un solo Keyframe, mientras otros

tienen varios?
Porque en esos layers el contenido no se modifica durante la animación.
Un nuevo Keyframe se usa para insertar contenido nuevo.

2. En la línea de tiempo, utiliza los botones para ocultar todos los Layers (da
clic sobre el primer punto a la derecha del nombre de cada Layer), excepto
el que contiene el fondo.
3. Utiliza las herramientas para colorear los elementos del fondo. Cuando
termines con el fondo, bloquea este Layer para que no pueda ser modificado
(da clic sobre el segundo punto a la derecha del nombre del Layer).
4. Muestra el Layer siguiente y utiliza las herramientas para darle color.
Bloquea el Layer cuando termines.
5. Colorea así todos los Layers. Observa que si en un Layer hay más de un
Keyframe, es necesario colorear cada uno, pues un Keyframe representa
contenido nuevo.
6. Prueba la película coloreada usando <Ctrl+Enter> y guarda tu trabajo
con el nombre Acrobata07 en la carpeta que indique tu profesor.

22
 Sonido (Sound)
Para hacer más atractiva una película o una animación, Flash permite incorporar
sonidos, que se importan en formatos comunes como Wav, Aiff y MP3, entre
otros, usando el Menú File/Import/Import to Library... Una vez importado,
un sonido queda como un elemento en la biblioteca de símbolos (ver MID 06
Biblioteca de símbolos) y puede usarse colocándolo en un frame o accediendo
a él por medio de programación.

Flash

06 Biblioteca de símbolos

El sonido en un frame puede ejecutarse básicamente en dos modos de sincronía

(Sync):

Event
El sonido se reproduce completo (de inicio a fin) en cuanto la reproducción de
la película llega al frame en el que se encuentra el sonido. Una vez iniciado,
un evento de sonido continúa hasta terminar independientemente de si la
reproducción de la película sigue, se detiene o salta a un lugar diferente, a
menos que sea silenciado mediante programación.

Stream
Sincroniza el sonido con la línea de tiempo. Si la reproducción de la película
se detiene, el sonido también se detiene y si la reproducción salta a un lugar
diferente, la secuencia del sonido también.

Cuando una película Flash se publica en Internet, un sonido del tipo Event
debe descargar completamente antes de que pueda ser reproducido. Un sonido
de tipo Stream puede comenzar a reproducirse conforme va descargando, de
modo que es más conveniente para uso en Web.

A un sonido se le pueden incluir los siguientes efectos directamente en el

Panel de propiedades:

1. Ninguno: el sonido no tiene ningún efecto y se reproduce tal como se

importó.
2. Left Channel: el sonido se reproduce solamente por el altavoz izquierdo.
3. Right Channel: el sonido se reproduce solamente por el altavoz derecho.
4. Fade left to right: el sonido comienza a escucharse por el altavoz izquierdo
y continúa por el derecho.

Diseño Multimedia 23
 5. Fade right to left: el sonido comienza a escucharse por el altavoz derecho
y continúa por el izquierdo.
6. Fade in: el sonido comienza a reproducirse con el volumen en 0 y aumenta
hasta llegar al nivel original con el que se importó.
7. Fade out: el sonido comienza a reproducirse tal como se importó y
disminuye el volumen hasta llegar al nivel 0.
8. Custom: puede modificarse la forma en que se escuchará en los
altavoces.

Flash

Trabajando con sonido

07
Haciendo pruebas con sonido

08
Actividad
1. Abre el documento de Flash Actividad08 que se encuentra en tu CD
de trabajo o carpeta de actividades. Este archivo tiene dos capas
etiquetadas como Layer 1 y Layer 2. Ambas capas tienen una longitud de
50 cuadros.
2. Selecciona el Menú File/Import/Import to Library… e importa los dos
archivos de sonido que se encuentran en la misma carpeta Actividad08.
Los sonidos se guardan automáticamente en la biblioteca cuando los
importas. Compruébalo.
3. En la línea de tiempo selecciona el primer Keyframe del Layer 1.
4. Después, en el Panel de propiedades, abre el menú colgante Sound,
que contiene todos los archivos de sonido de la biblioteca. Selecciona
el primer sonido (sound01). Con esto el sonido quedará asignado al
Keyframe.

24
5. Cambia el modo de sincronía de este sonido (Sync) a Stream. Observa
que la forma de onda del sonido se puede ver en la línea de tiempo.
6. Arrastra el puntero del ratón sobre la línea de tiempo. Debes hacer clic
y arrastrar sobre la escala que muestra los números de cuadros, en la
parte superior de la línea de tiempo. Mientras arrastras hacia atrás o hacia
adelante escucharás en sincronía el sonido asignado.
7. Prueba la película presionando Menú Control/Test Movie o la
combinación de teclas <Ctrl + Enter>.
Contesta:
a. ¿Con qué características se reproduce el sonido?
Se reproduce mientras se va cargando. Sin efectos y se repite.

b. ¿Se escucha completo? ¿Por qué?

No, porque el sonido no ocupa todos los cuadros necesarios para su reproducción.

8. Selecciona el Keyframe 40 del Layer 2.

9. Mediante el Panel de propiedades, asigna a este frame el segundo

sonido importado (sound02) con el modo de sincronía Event.

Contesta las siguientes preguntas:

a. ¿Es posible escuchar el segundo sonido arrastrando el puntero del

ratón sobre los cuadros de la línea de tiempo?
No
b. Cuando ejecutas la película ¿qué sucede si el evento de sonido es más
largo que el rango de frames donde está asignado?
Se escucha el sonido completo aunque ocupe menos cuadros.

10. Modifica los efectos de sonido para que el primer sonido sólo se escuche
por el altavoz izquierdo y el segundo sonido sólo por el altavoz derecho.
11. Guarda el archivo con el nombre Sonido08 en la carpeta que indique tu
profesor.

Diseño Multimedia 25
 Conceptos clave

09
Actividad
Selecciona la respuesta que mejor corresponda a cada pregunta:

1. Para crear un gráfico vectorial en Flash se dibuja sobre:

a. la línea de tiempo
b. la biblioteca de símbolos
c. el escenario
d. el panel de propiedades
2. Para crear la secuencia de una película, los objetos se animan a lo largo
de:
a. la línea de tiempo
b. la biblioteca de símbolos
c. el escenario
d. el panel de propiedades
3. Los parámetros de los objetos se modifican en:
a. la línea de tiempo
b. la biblioteca de símbolos
c. el escenario
d. el panel de propiedades
4. Para extender el contenido de un cuadro sin cambios, debes insertar un:
a. Frame
b. Keyframe
c. Blank Keyframe
d. Symbol
5. Para crear nuevo contenido en un layer se requiere un:
a. Frame
b. Keyframe
c. Blank Keyframe
d. Symbol
6. Un sonido en Stream está sincronizado con la línea de tiempo.
a. Verdadero
b. Falso
7. Un sonido Event debe descargar completo para ser reproducido.
a. Verdadero
b. Falso

26
Símbolos, sus propiedades y líneas de tiempo
Un símbolo es un objeto que se guarda en la biblioteca con el objetivo de
usarlo más de una vez durante la película o asignarle código de programación.
La ventaja de utilizar símbolos es que pueden reutilizarse cuantas veces se
desee sin aumentar el peso final del archivo.

También se utilizan símbolos para crear animaciones, ya que todo símbolo

cuenta con su propia Línea de tiempo, independiente de la línea de la película,
con sus propios Layers y frames. Así, cada símbolo es como una película de
Flash completa, que está dentro de la película principal. Un símbolo puede
incluso contener más símbolos, cada uno con su propia línea de tiempo.

Un símbolo se puede crear de varias maneras:

a. Se puede crear un símbolo vacío para después crear su contenido. Utiliza

el Menú Insert/New Symbol o la combinación de teclas <Ctrl+F8>.
b. Se puede crear un símbolo a partir de cualquier objeto que se seleccione
en el escenario. Selecciona primero los elementos que se convertirán a
símbolo y utiliza el Menú Modify/Convert to Symbol o la tecla <F8>.
c. Se puede importar un archivo con el Menú File/Import/Import to
Library…

Tipos de símbolos
Al crear un símbolo por cualquier método, debes elegir el tipo de símbolo que
deseas crear. Los tres tipos posibles son:

Movie Clip Button Graphic

MovieClip. Se utiliza principalmente cuando el símbolo contiene animación.

Cuenta con una Línea de tiempo en la que podemos agregar los Layers y
los frames que necesitemos. El comportamiento de un MovieClip puede ser
programado con código escrito en el lenguaje ActionScript.

Button (Botón). Es un símbolo que reacciona al puntero del ratón como lo

haría un botón estándar de Windows. Se utiliza para agregar interactividad
en una película Flash. El comportamiento de un botón se programa con
ActionScript.

Un símbolo de tipo botón, cuenta con una línea de tiempo especial de cuatro
frames, en los que se definen los cuatro estados posibles de un botón: Up,
Over, Down y Hit.

Up. Este frame contiene la imagen, sonido y acciones del botón en su

estado normal o apagado.

Diseño Multimedia 27
 Over. Contiene la imagen, sonido y acciones del botón, que se despliegan
cuando el puntero del ratón está sobre él.

Down. Contiene la imagen, sonido y acciones del botón, que se despliegan

cuando se hace clic sobre él.

Hit. Contiene una imagen que delimita el área sensible del botón. Esta
imagen nunca se ve en el escenario.

Cualquiera de los cuatro frames puede o no tener contenido y por lo general

sólo se utilizan los frames Up y Over. La Línea de tiempo de un botón también
puede tener tantos Layers como se necesite.

Graphic. Es un símbolo estático que comúnmente sólo requiere un Layer y un

frame. No puede ser programado con ActionScript.

Flash

Tipos de símbolo y sus líneas de tiempo

08

Flash

Cómo crear un botón 09

Flash

Cómo crear un MovieClip

10
28
 Tipos de símbolos

10
Actividad
Flash identifica los diferentes tipos de símbolo con un ícono. Observa las
imágenes y escribe el nombre del tipo de símbolo que corresponda a cada
ícono.

Button (Botón)

Movie clip

Graphic

Instancias y propiedades
Para utilizar un símbolo en algún frame de la película, simplemente selecciona
el frame en cuestión y arrastra el símbolo desde la biblioteca hasta el escenario.
Esto crea una Instancia del símbolo, que es una imagen clon del símbolo
original. Puedes crear todas las instancias que quieras de un mismo símbolo,
modificar cada instancia cambiando sus dimensiones o propiedades o aplicar
diferente comportamiento a cada una mediante programación.

Cuando modificas cualquier instancia, el símbolo original no se ve afectado.

En el caso opuesto, si modificas el símbolo original, todas sus instancias son
afectadas.

Una vez en el escenario se pueden establecer los parámetros de una instancia

usando el Panel de propiedades.

Instance Name. Se utiliza para identificar la instancia de un símbolo. Es muy

recomendable asignar un nombre en cuanto se crea una instancia, ya que es
necesario para la programación:

X. Indica o asigna la posición horizontal en el escenario.

Y. Indica o asigna la posición vertical en el escenario.
W (Width). Muestra o determina el ancho de la instancia.
H (Height). Muestra o determina el alto de la instancia.
Rotate. Indica o asigna un ángulo de giro.
Skew. Indica o determina la deformación oblicua de la instancia.
Color. Permite asignar un aspecto especial como:
Brightness. Ajusta el color a más blanco o negro.
Tint. Pinta una instancia con un tono de la paleta de colores.
Alpha. Aplica un porcentaje de transparencia a una instancia.
Advanced. Ajusta con detalle los colores (Tint) y transparencia
(Alpha).

Diseño Multimedia 29
 Nombre asignado a la Nombre del símbolo
instancia original

Dimensiones Posición Apariencia

Flash

Instancias y sus propiedades

11
Creando instancias

11
Actividad
1. Abre el documento de Flash Actividad11 que se encuentra en tu CD de
trabajo o carpeta de actividades.
2. Si no está visible, muestra la biblioteca de símbolos con Menú Window/
Library o las teclas <Ctrl+L>. Observa que la biblioteca tiene dos
símbolos llamados bici y rueda.
3. Selecciona en la línea de tiempo el Frame 1 del Layer 2.
4. Arrastra el símbolo bici de la biblioteca al escenario para crear una
Instancia.
5. Crea dos Instancias del símbolo rueda en el escenario, acomodando cada
una en el lugar apropiado para formar la bicicleta.
6. De forma similar crea instancias para armar 4 bicicletas más distribuidas
en el escenario.

30
 7. Utiliza el Panel de propiedades o bien la herramienta Free Transform
Tool, para modificar el tamaño de las bicicletas, de manera que parezca
que unas están más cerca y otras más lejos en la escena.
8. Seleccionando directamente en el escenario cada una de las Instancias,
utiliza el Panel de propiedades para aplicar un color diferente a cada
bicicleta usando la opción Tint. Observa el símbolo original en la biblioteca.
¿Qué le ocurrió? ¿Por qué?
Nada. Porque estamos modificando la instancia, no el orígen de ella.

9. Por último haz esta prueba: En la biblioteca de símbolos da doble clic al

símbolo bici. Se abrirá la línea de tiempo del símbolo y el gráfico original.
Haz una pequeña modificación como agregar unas líneas decorativas o un
texto sobre alguno de los tubos de la bicicleta.
10. Regresa a la línea de tiempo principal haciendo clic sobre el botón
Scene 1 cerca de la esquina superior izquierda de la sub-ventana del
documento. Describe lo que ha ocurrido y por qué ocurrió:
Se agregó el cambio a todas las bicicletas, porque son instancias del símbolo
y si éste cambia, también en el escenario.

11. Guarda el archivo con el nombre Bici11 en la carpeta que indique tu

profesor.

Creando botones para una tarjeta interactiva

12
Actividad
1. Abre en Flash la película Actividad12 que se encuentra en tu CD de
trabajo o carpeta de actividades.
2. Para poder realizar la actividad, antes de continuar guarda el archivo en la
carpeta que indique tu profesor, con el nombre Tarjeta12.
3. Abre la biblioteca y revisa su contenido. Consérvala abierta.
4. En el escenario hay cuatro personajes en dos posiciones, en esta actividad
los llamaremos normal y feliz respectivamente. Obsérvalos.
5. Para poder trabajar mejor con los personajes, es conveniente convertirlos
en símbolos. Selecciona cada uno de forma independiente y conviértelo
en un símbolo gráfico. Al final debes tener ocho nuevos símbolos gráficos
en la biblioteca.
6. Una vez que los personajes están como símbolos, bórralos del escenario
para que quede vacío.

Diseño Multimedia 31
 7. Con el Menú Insert/New Symbol, crea un nuevo símbolo del tipo
Button y dale el nombre persona1. Verás la línea de tiempo del botón
que por ahora está vacía.
8. De la biblioteca de símbolos, arrastra al área de trabajo el primer personaje,
en su posición normal. Ubícalo en medio auxiliándote de la pequeña cruz
que aparece al centro. Dale color al personaje. Observa que el personaje
ha quedado en el frame Up de la línea de tiempo del botón.
9. Selecciona el frame Over de la línea de tiempo del botón e inserta un
Keyframe en blanco con el Menú Insert/Timeline/Blank Keyframe.
10. Arrastra al escenario el símbolo del primer personaje en su posición feliz.
Ubícalo en el área de trabajo, auxiliándote de la pequeña cruz que aparece
al centro. Dale color al personaje.
11. Haz clics alternadamente en el frame Up y en el frame Over, para que
preveas el comportamiento del botón y ajustes la posición de los personajes
si es necesario.
12. Regresa a la línea de tiempo principal, presionando el botón Scene 1, en
la parte superior de la línea de tiempo.
13. Ahora repite los pasos del 7 al 12 para crear un nuevo botón para cada
uno de los personajes restantes, utilizando su posición normal para el
frame Up y su posición feliz para el frame Over. Asígnale color a todos
los personajes.
14. Cuando termines de crear los cuatro nuevos botones, arma una tarjeta de
felicitación con las siguientes características:
a. Crea un fondo en un Layer independiente.
b. En otro Layer arrastra de la biblioteca algunos símbolos para mejorar
la escena.
c. En un tercer Layer encima de los anteriores, arrastra a la escena
los botones que has creado. No utilices los símbolos originales de
los personajes, sino los botones que los contienen para que tengan
interactividad.
d. Agrega en un Layer diferente un texto apropiado.
15. Prueba la película con el Menú Control/Test Movie. Pasa el puntero del
ratón sobre los botones para ver cómo se comportan.
16. De regreso a la película principal, realiza las siguientes mejoras:
a. En la línea de tiempo de cada botón, duplica el personaje feliz del
frame Over al frame Down, pero además agrega en el frame Down un
texto. Recuerda que al correr la película, el contenido del frame Down
se verá cuando se haga clic sobre el botón.

b. Aplica al frame Over y/o Down de cada botón un sonido del tipo
Event.
17. Prueba la película y guarda los cambios.

32
 Máscaras (Mask)
Las máscaras tradicionales que se usan en fiestas o carnavales son objetos
que cubren parcialmente la cara de quien las usa. Se puede ver a través de los
agujeros que tiene, mientras el resto queda oculto por la máscara misma.

En Flash, se puede crear una capa máscara que oculta lo que está en el Layer
que se encuentra debajo de ella. Los “agujeros” a través de los cuales se puede
ver, se dibujan en la capa máscara o se crean colocando símbolos vectoriales
en ella.

El Layer de máscara
Este Layer contiene contiene un círculo
la fotografía

Para convertir cualquier capa seleccionada en máscara, da clic con el botón

secundario del ratón sobre el nombre del Layer y selecciona del menú contextual
la opción Mask.

Flash

12 Máscaras

Diseño Multimedia 33
 Creando una máscara

13
Actividad
1. Abre un documento nuevo de Flash y selecciona el Frame 1 del Layer 1.
2. Importa una fotografía directamente al escenario usando Menú File/
Import/Import to Stage... Puedes importar alguna de las fotografías
de la carpeta de la Actividad13 de tu CD o carpeta de trabajo.
3. Inserta un nuevo Layer (Layer 2) asegurándote que queda encima del
existente.
4. Dibuja en el Layer 2 una figura simple como un círculo o una estrella,
usando las herramientas. El color no es importante.
5. Haz un clic con el botón secundario del ratón sobre el nombre del Layer 2 y
selecciona la opción Mask del menú contextual. Describe lo que ocurre:

a. Con la imagen en el Layer 1:

Queda igual, pero oculta detrás de la máscara.

b. Con la imagen en el Layer 2:

La figura se convierte en una máscara a través de la cual se ve lo que está
debajo.
c. Con las opciones de bloqueo de Layers:
Se bloquean para no poderlas [Link] se desbloquean es posible editar
el contenido.
Si quieres modificar la figura en la máscara, basta desbloquear el Layer
correspondiente. Una vez terminadas las modificaciones, vuelve a bloquear
el Layer para ver la máscara en acción.
6. Prueba la película y guarda el archivo con el nombre Mascara13 en la
carpeta de costumbre.

TIP
Un gráfico vectorial o un MovieClip puede enmascarar cualquier objeto en
el escenario, pero una imagen no puede funcionar como máscara, sólo
puede ser enmascarada.

34
 Principios de Animación
En Flash se pueden utilizar tres técnicas de animación a lo largo de la línea
de tiempo de cualquier Layer: Animación Cuadro por Cuadro, Animación
MotionTween y Animación ShapeTween.

Animación Cuadro por Cuadro (frame by frame)

En esta técnica de animación se utiliza un Keyframe para cada movimiento
o cambio, tal y como fue animado el acróbata que salta de la Actividad07.
La técnica también se conoce como animación tradicional, ya que cuadro por
cuadro era la única forma en que podían hacerse los dibujos animados antes
de las computadoras. Este tipo de animación funciona muy bien desde una
velocidad de 12 frames por segundo.

Para crear animación frame by frame coloca la imagen original en un Keyframe.

Inserta adelante de él un segundo Keyframe y haz alguna modificación a la
imagen. Inserta otro Keyframe y continúa la modificación. Continúa cuadro por
cuadro hasta terminar la animación.

Animando Cuadro por Cuadro

14
Actividad
1. En un nuevo documento de Flash utiliza las herramientas de dibujo para
crear una animación cuadro por cuadro de un deportista en acción, con
las siguientes características:
a. La película debe ejecutarse a 10 fps.
b. Debes utilizar al menos 30 Keyframes para lograr una animación de 3
segundos.
c. Debe mostrar al menos un personaje, pero puede incluir otros
elementos.

2. Conforme vas avanzando, puedes probar la ejecución presionando la tecla

<Enter>.
3. Guarda tu trabajo con el nombre Frame14 en la carpeta que indique tu
profesor.

Flash

13 Animación cuadro por cuadro

Diseño Multimedia 35
 Animación MotionTween
Esta técnica de animación usa solamente dos Keyframes: uno para la posición
inicial y otro para la posición final. Todos los pasos intermedios son calculados
automáticamente por Flash durante la ejecución de la película. Se utiliza
principalmente para mover símbolos.

a. Para crear un MotionTween debe existir una instancia de un símbolo

sobre el escenario. Esta instancia está en un Keyframe que llamaremos
Keyframe inicial.
b. Posteriormente en la línea de tiempo y en el mismo Layer, se inserta un
Keyframe final, que normalmente estará varios cuadros adelante del
Keyframe inicial (tan lejos como quieras que dure la animación). Recuerda
que al insertar un Keyframe, Flash duplica automáticamente el contenido
del Keyframe anterior, es decir, crea una nueva instancia del símbolo.
c. Modifica esta segunda instancia cambiando su posición, efecto de color,
tamaño o rotación. Con esto ya están definidos los Keyframes inicial y
final.
d. Para aplicar el MotionTween selecciona el Keyframe inicial y aplica la
opción Motion del menú colgante Tween del Panel de propiedades
del frame.

Este tipo de animación se ve más fluida y natural a una velocidad que va de 15

a 30 frames por segundo.

En la línea de tiempo, un MotionTween se identifica con un punto negro seguido

de una flecha que llega hasta el Keyframe final. El fondo es azul claro. Una
línea punteada indica que se ha definido un Tweening, pero falta el Keyframe
final.

Flash

MotionTween
14

36
 Animando con MotionTween

15
Actividad
1. En un nuevo documento de Flash, cambia la velocidad de reproducción
(frame rate) a 30 fps. Lo puedes hacer en el Panel de propiedades o
bien con el Menú Modify/Document…
2. Dibuja sobre el escenario un rectángulo de 120 px de ancho por 20 px
de alto. Para que las dimensiones sean exactas, puedes modificar las
propiedades W y H del rectángulo seleccionado usando el Panel de
propiedades.
3. Selecciona la figura y conviértela en un símbolo del tipo MovieClip. La
animación Motion Tween no funciona en objetos que no son símbolos.
Una vez convertido, tendrás el símbolo en la biblioteca y una instancia en
el escenario.
4. Centra horizontalmente el rectángulo en el escenario y pégalo al borde
superior.
5. Ahora selecciona en la línea de tiempo el Frame 30 del Layer 1 e inserta un
nuevo Keyframe con Menú Insert/Timeline/Keyframe o la tecla <F6>.
El rectángulo que queda en este Keyframe es una instancia diferente del
símbolo.
6. Similarmente inserta un nuevo Keyframe en el Cuadro 60 del Layer 1.
7. Selecciona el Frame 1 del Layer 1 y asígnale un Motion Tween. Lo puedes
hacer directamente en el Panel de propiedades o utilizando el botón
secundario del ratón y seleccionando del menú contextual el comando
Create MotionTween. Debes ver una flecha continua que va del
Keyframe 1 al Keyframe 30.
8. Asigna otro MotionTween entre el Keyframe 30 y el Keyframe 60.
9. Ahora selecciona la instancia del rectángulo en el Keyframe 30 y muévelo
al borde inferior del escenario.
10. Entinta esta instancia con otro color utilizando el Panel de
propiedades.
11. Prueba la película. También puedes arrastrar el puntero del ratón sobre la
escala de la línea de tiempo, para ver cada paso de la animación.
12. Selecciona el Keyframe 1 y prueba las opciones Ease y Rotate.
Contesta:

a. ¿Qué efecto tiene agregar un valor Ease positivo?

Se hace más lento hacia el final de movimiento.

b. ¿Qué efecto tiene agregar un valor Ease negativo?

Se hace más lento al principio del movimiento.

Diseño Multimedia 37
 c. ¿Qué puedes hacer si presionas el botón Edit a un lado del parámetro
Ease?
Editar manualmente una curva de aceleración.

d. ¿Para qué sirve la opción Rotate CW?

Gira la figura en sentido horario.

e. ¿Para qué sirve la opción Rotate CCW?

Gira la figura en sentido antihorario.

f. ¿Qué función tiene el parámetro times?

Establecer el número de veces que va a girar la figura.

13. Guarda el archivo con el nombre Motion15 en la carpeta de

costumbre.

Animación ShapeTween
Esta técnica de animación usa también sólo dos Keyframes: uno inicial y otro
final. Todos los pasos intermedios son calculados automáticamente por Flash
durante la ejecución de la película. La única diferencia es que el ShapeTween
funciona sólo con gráficos que no son símbolos y se utiliza principalmente para
deformar vectores.

a. Para crear un ShapeTween debe existir un gráfico sobre el escenario, que

no sea un símbolo, grupo ni objeto compuesto. Este gráfico está en un
Keyframe que llamaremos Keyframe inicial.
b. Posteriormente en la línea de tiempo y en el mismo Layer, se inserta un
Keyframe final, que normalmente estará varios cuadros adelante del
Keyframe inicial (tan lejos como quieras que dure la animación). Recuerda
que al insertar un Keyframe, Flash duplica automáticamente el contenido
del Keyframe anterior, es decir crea una copia del gráfico inicial.
c. Modifica este segundo gráfico cambiando su forma o color. Con esto ya
están definidos los Keyframes inicial y final.
d. Para aplicar el ShapeTween selecciona el Keyframe inicial y aplica la
opción Shape del menú colgante Tween del Panel de propiedades
del frame.

Este tipo de animación también se ve mejor a velocidades entre 15 y 30 frames

por segundo.

En la línea de tiempo, un ShapeTween se identifica con un punto negro

seguido de una flecha que llega hasta el Keyframe final. El fondo es verde

38
 claro. Una línea punteada indica que se ha definido un Tweening, pero falta el
Keyframe final.

Flash

15 ShapeTween

Animando con ShapeTween

16
Actividad
1. En un nuevo documento de Flash, cambia la velocidad de reproducción
(frame rate) a 30 fps. Selecciona el Cuadro 1 del Layer 1.
2. Escribe sobre el escenario una letra A mayúscula y cambia su ancho y alto
a 300 X 300 px. Centra perfectamente la letra en el escenario.
3. Como el ShapeTween no funciona con objetos compuestos, separa la letra
para convertirla en gráfico con el Menú Modify/Break Apart.
4. Inserta un Keyframe en el Cuadro 30 y otro en el Cuadro 60 del Layer 1.
5. Selecciona el Keyframe 30 y borra su contenido (una copia de la letra A).
Quedará vacío el espacio entre los frames 30 y 60.
6. Escribe sobre el escenario la letra B mayúscula. Céntrala perfectamente en
el escenario y agrégale un color diferente. Separa también esta letra en un
gráfico con el Menú Modify/Break Apart.
7. Selecciona el Frame 1 del Layer 1 y asígnale un ShapeTween directamente
en el Panel de propiedades. Debes ver una flecha continua que va del
Keyframe 1 al Keyframe 30.
8. Asigna otro ShapeTween entre el Keyframe 30 y el Keyframe 60.
9. Prueba la película. También puedes arrastrar el puntero del ratón sobre la
escala de la línea de tiempo para ver cada paso de la animación.
10. Selecciona el Keyframe 1 y prueba las opciones Blend. Contesta:

Diseño Multimedia 39
 a. ¿Para qué sirve el Blend Distributivo?
Va haciendo el cambio en toda la figura de forma pareja.

b. ¿Para qué sirve el Blend Angular?

Va haciendo el cambio como el recorrido de un ángulo.

11. Guarda el archivo con el nombre Shape16 en la carpeta de costumbre.

Identificando tweens

17
Actividad
Observa las dos líneas de tiempo y escribe sobre la línea cuál es MotionTween
y cuál ShapeTween.

Shape Tween
Motion Tween

Guías de movimiento (MotionGuide)

En un MotionTween, cuando un objeto se mueve de una posición inicial a
una final, normalmente lo hace en una trayectoria de línea recta. Si se agrega
una guía de movimiento se puede hacer que el movimiento siga una línea
dibujada en una capa especial llamada MotionGuide.

Para agregarle una guía de movimiento a un Layer seleccionado, utiliza Menú

Insert/Timeline/Motion Guide o bien da un clic secundario con el ratón
sobre el nombre del Layer y selecciona la opción Add Motion Guide. En
el nuevo Layer guía (Guide) se debe dibujar la trayectoria que se desea
seguir, utilizando las herramientas (normalmente el lápiz, la pluma o un pincel
delgado). Al exportar la película, la trayectoria dibujada será invisible.

40
Flash

16 Guías de movimiento

Siguiendo guías

18
Actividad
Para realizar esta actividad es preciso haber comprendido bien las técnicas
para crear animación Cuadro por Cuadro y animación con MotionTween.

1. Abre en Flash la película [Link] que se encuentra en tu CD de

trabajo o carpeta de actividades.
2. Localiza en la biblioteca de símbolos el MovieClip llamado Mariposa. Ábrelo
haciendo doble clic sobre él. Puedes verificar que estás viendo la línea de
tiempo del símbolo y no la línea de tiempo principal, comprobando los
botones de la esquina superior izquierda de la sub-ventana del documento.
Este MovieClip cuenta con tres Layers: en uno se encuentra
el cuerpo y en los otros dos las alas de la mariposa.
3. Para simular el movimiento de las alas de la mariposa usarás la técnica de
animación Cuadro por Cuadro. Localiza el Layer donde está una de las alas
e inserta un Keyframe en el cuadro 2.
4. Selecciona el ala en el cuadro 2 y aumenta un poco su tamaño. También
puedes girarla para simular el aleteo. Recuerda ir probando con la tecla
<Enter> hasta lograr el efecto más natural.
5. Haz lo mismo para animar el movimiento de la otra ala del insecto, con
una animación de sólo 2 cuadros.
6. Regresa a la línea de tiempo principal presionando el botón Scene 1.

7. Crea en el escenario una instancia del símbolo mariposa, que se encuentra

en la biblioteca de símbolos.
8. Prueba la película. Aunque la línea de tiempo principal tiene un solo cuadro,
el símbolo que contiene se reproduce continuamente.
9. En la línea de tiempo principal utiliza la técnica de animación con
MotionTween para que la mariposa se desplace en línea recta por el
escenario, desde la esquina inferior izquierda hasta la esquina superior
derecha. Utiliza al menos 50 cuadros para el movimiento.
10. Prueba la película y revisa que el MotionTween funciona correctamente.

Diseño Multimedia 41
 11. Ahora agrega al Layer actual una guía de movimiento usando el Menú
Insert/Timeline/Motion Guide.
12. En el nuevo Layer, utiliza la herramienta Lápiz para dibujar una trayectoria
con curvas que deberá seguir la mariposa. Puedes usar la opción de
suavizar (Smooth) en la parte inferior de la barra de herramientas, para
que la trayectoria sea más natural.
13. Selecciona la instancia de la mariposa en el Keyframe inicial del movimiento
y muévela al punto inicial de la trayectoria. Mientras la mueves se ve un
pequeño círculo llamado snap, que se debe anclar con la trayectoria.
14. De forma similar, selecciona la mariposa en el Keyframe final y muévela
hasta que el snap se ancle en el extremo final de la trayectoria.
15. Selecciona por último el Keyframe inicial y activa en el Panel de
propiedades la opción Orient to path.
16. Prueba la película y guarda el archivo con el nombre Trayectoria18 en
la carpeta de costumbre.

Filtros (Filters)
Los filtros permiten añadir atractivos efectos visuales a texto, botones y
MovieClips. Los filtros que suelen aplicarse con mayor frecuencia a los elementos
gráficos son las sombras (shadow), los desenfoques (blur) y los biseles
(bevel). Una característica exclusiva de las nuevas versiones de Flash es que
permite animar los filtros utilizando un MotionTween.

Los filtros sólo pueden aplicarse a objetos de texto, botones y MovieClips. No es

posible aplicar filtros a gráficos que no son instancias de símbolos. Para aplicar
un filtro a un objeto seleccionado en el escenario, utiliza el panel Filters que
se encuentra a la derecha de las propiedades y pulsa el botón (+) para ver los
filtros disponibles. Al seleccionar un filtro aparecerán algunas propiedades que
puedes ajustar de acuerdo a tus necesidades.

Es posible añadir uno o varios filtros a un objeto, que se aplican en el mismo

orden en que son agregados.

42
Flash

17 Filtros

Utilizando filtros

19
Actividad
1. Abre en Flash la película Actividad19 que se encuentra en tu CD de
trabajo o en la carpeta de actividades.
2. Desde la biblioteca de símbolos arrastra el MovieClip Acróbata al
escenario.
3. Duplica 5 veces la instancia en el escenario, seleccionándola y usando el
Menú Edit/Duplicate o bien la combinación de teclas <Ctrl+D>.
4. Utiliza el Panel de filtros para aplicar un efecto diferente a cada una de
las instancias en el escenario.
5. Debajo de cada instancia, utiliza la herramienta de texto para escribir el
nombre del filtro aplicado y las propiedades o parámetros usados.
6. Prueba la película y guarda el archivo en la carpeta que indique tu
profesor.

Publicidad para Internet

20
Actividad
Actualmente el medio publicitario más utilizado en Internet es el banner, que
es un recuadro que aparece dentro del área de un sitio o página Web y
que contiene algún mensaje comercial. La mayoría de los banners aparecen
horizontalmente en la parte superior de las páginas, pero también los hay
verticales o cuadrados y pueden mostrarse en otras áreas.

Algunos tipos de banner y sus dimensiones son:

a. Full banner: 480 X 60 píxeles

b. Leaderboard: 728 X 90 píxeles
c. Skyscrapper: 120 X 600 píxeles
d. Banner Botón: 120 X 60 píxeles
e. Robapágina: 300 X 250 píxeles

Diseño Multimedia 43
 1. Elige 5 temas publicitarios distintos y anótalos aquí. Pueden referirse a
productos, eventos escolares, espectáculos, servicios u otros.

a.
b.
c.
d.
e.

2. Crea un banner para cada tema usando los cinco tipos y dimensiones
especificados antes. Utiliza un documento diferente para cada banner.
Todos deben cumplir con los siguientes requisitos mínimos:

a. Velocidad de la película de 30 fps.

b. Elementos que se muestran en diferentes momentos de la película.
c. Incluir MotionTween (además al menos uno de los banners debe seguir
una guía de movimiento).
d. Incluir texto.
e. Incluir uso de Filtros.
f. Al menos uno de los banners debe tener animación Cuadro por
Cuadro.

3. Prueba y guarda cada archivo con el nombre que consideres adecuado.

Evaluación del profesor: Puntaje (de 0 a 4 puntos) Total

Banner1 Banner2 Banner3 Banner4 Banner5

Concepto
Calidad del diseño
Uso adecuado de MotionTween
Uso adecuado de Filtros
Efectividad para transmitir el mensaje
Totales (máxima suma: 100 puntos)

44
Introducción a ActionScript
ActionScript es el lenguaje de programación de Flash. ActionScript permite
dotar a las aplicaciones realizadas en Flash de una mayor interactividad,
permite optimizar las animaciones, conectar con bases de datos y con todo
tipo de lenguajes.

Al programar en ActionScript debe respetarse la sintaxis, es decir, el código que

se escriba debe seguir siempre las reglas del lenguaje, como el uso adecuado
de las mayúsculas, minúsculas, espacios y signos de puntuación que requiera
cada caso.
 Por ejemplo, en ActionScript no es lo mismo escribir [Link] que Key.
isDown. En este ejemplo la primera instrucción no funcionará porque no
respeta la sintaxis del comando Key que debe ir con mayúscula. Por esta razón,
acostúmbrate a consultar la referencia de ActionScript que incluye Flash y
aprende a reconocer la ayuda visual del programa.

Las instrucciones o acciones en Flash se escriben en el panel Actions, que

se despliega usando el Menú Window/Actions o bien presionando la tecla
<F9>. En Flash las acciones pueden ir solamente en un Keyframe o en la
instancia de un símbolo, ya sea un MovieClip o un Botón.

En Flash las acciones pueden escribirse solamente en un Keyframe o en la

instancia de un símbolo, ya sea un MovieClip o un Botón. Nota

TIP
Es importante tener el hábito de consultar el Panel de ayuda de
ActionScript que se activa al presionar la tecla F1. Este panel te mostrará
siempre la sintaxis correcta y ejemplos de uso de todos los comandos.

ActionScript en Keyframes
Las instrucciones que escribas en un Keyframe se ejecutan en el momento en
que la reproducción de la película llega a dicho Keyframe. Es común escribir
instrucciones en un Keyframe cuando se quiere que algo ocurra siempre en
una parte específica de la película.

Para escribir acciones en un Keyframe, debes seleccionarlo y después presionar

la tecla <F9>. El Panel de Acciones se abre y se escribe la instrucción.
Una pequeña “a” en el Keyframe indica que tiene asignada una o más
instrucciones.

Éstas son las primeras acciones que estudiarás. Una de las primeras cosas que
hay que notar es que todas estas instrucciones deben terminar con el símbolo
de punto y coma (;).

46
 Acción Función

Detiene la reproducción de la
stop(); película.
Continúa la reproducción de la
play(); película desde el cuadro donde se
encuentra esta instrucción.

La reproducción salta al cuadro

indicado entre los paréntesis y
gotoAndStop(); detiene su reproducción ahí. Entre
los paréntesis se puede introducir un
número de cuadro o su nombre (si
se ha etiquetado).

La reproducción salta al fotograma

indicado entre los paréntesis y
gotoAndPlay(); continúa su reproducción desde
ahí. Entre los paréntesis se puede
introducir un número de cuadro o su
nombre (si se ha etiquetado).

Avanza la reproducción de la película

nextScene(); a la siguiente escena, siempre y
cuando exista más de una escena
definida.

Regresa la reproducción de la
prevScene(); película a la escena anterior, siempre
y cuando exista más de una escena
definida.

Se utiliza para mandar mensajes a

una ventana especial de salida. Esta
opción se utiliza durante la fase de
programación para realizar pruebas
trace(); o conocer resultados. Entre los
paréntesis se teclea lo que deseas
que se envíe a la ventana de salida
por ejemplo: trace(“éste es el
cuadro 45”).

Carga en el navegador de Internet

la página que se especifique
getURL entrecomillada dentro de los
(“[Link] paréntesis. Observa que es
importante incluir el protocolo (en
este caso [Link] para que la página
se cargue correctamente.

Diseño Multimedia 47
 TIP
Uno de los errores más comunes cuando se está aprendiendo ActionScript,
es escribir el código en el lugar incorrecto. Antes de escribir acciones,
siempre revisa que quedarán en el cuadro o símbolo que se quiere. En
el Panel de acciones siempre verás el nombre de la capa y número de
cuadro donde quedará el código o bien el nombre del símbolo.

Nombre de capa y
número de cuadro

Nombre de
instancia

Flash

Acciones en Keyframes
18
Agregando ActionScript a los Keyframes

21
Actividad
1. Abre un documento nuevo de Flash. Renombra la primera capa como
Capa acciones.
2. Inserta un Keyframe en los cuadros 1, 5, 15, 25 y 30.
3. Selecciona el Keyframe 1 y abre el Panel de acciones con Menú
Window/Actions o la tecla <F9>. Revisa que el panel indique “Capa
acciones: 1” para comprobar que escribirás código en la capa y cuadro
que se requiere.
4. Inserta el siguiente código dentro del Panel de acciones:
trace(“este es el frame 1”);
5. En la línea de tiempo selecciona el Keyframe 5 y utiliza el Panel de
acciones para introducir el siguiente código. Revisa que el panel muestre

48
 la capa y cuadro correctos.
trace(“este es el frame 5”);
6. Introduce un código similar para mostrar los mensajes cuando se llegue
a los cuadros 15 y 25. No olvides los paréntesis, las comillas y terminar
cada línea con punto y coma.
7. En el Keyframe 30 introduce el comando: stop();
8. Prueba la película y observa los resultados en la ventana Output.
9. Ahora cambia la instrucción del Keyframe 15 por ésta, respetando el uso
de mayúsculas y minúsculas:
gotoAndPlay(7);
10. Prueba la película, describe lo que ocurre y lo que ves en la ventana de
salida:
Después de llegar por primera vez al frame 15, la película se repite del
cuadro 7 al 15 solamente.

11. Guarda tu trabajo con el nombre ASframes21 en la carpeta de

costumbre.

TIP
Cuando escribes instrucciones en el Panel de acciones de Flash, las
palabras reservadas aparecen en azul. Esta es una forma rápida de
comprobar si estás utilizando la sintaxis correcta. Esta comprobación
rápida, sin embargo, no detecta si te falta algún paréntesis, parámetro o
punto y coma, debido a que éstos no aparecen en azul.

ActionScript en botones

Hemos visto que las acciones que se escriben en un Keyframe se ejecutan cuando
la reproducción de la película alcanza ese cuadro específico, pero ¿cuándo se
ejecutan las acciones que se escriben en un botón? Las instrucciones en un
botón se ejecutan cuando dicho botón detecta que ha ocurrido algo sobre él,
como pasarle el puntero del ratón por encima o hacerle un clic. A esto se le
llama eventos del botón.

Diseño Multimedia 49
 Siempre que se escribe código para un botón, debe hacerse dentro de un
código manejador de eventos (handler), con el fin de especificar cuál es el
evento que disparará las acciones. El manejador de eventos de un botón tiene
la siguiente estructura:

on (evento){
acciones a ejecutar cuando ocurra el evento
}

Esta estructura se podría leer como: “cuando suceda este evento, se ejecutarán
estas acciones”. Por ejemplo, si deseas que la reproducción de la película se
detenga al hacer clic en un botón, el código que debes escribir en dicho símbolo
es:

on (release){
stop();
}

Los principales eventos de un botón son:

Evento Ocurre cuando...

rollOver Ocurre si el puntero del ratón pasa sobre el área sensible

del botón (Hit).
Se dispara cuando se presiona el puntero del ratón
press
sobre el botón.

release Ocurre cuando se deja de presionar el botón después de

haberlo presionado.

Sucede cuando después de haber hecho clic sobre el

ReleaseOutside botón y sin soltarlo, se mueve el puntero del ratón fuera
del área sensible y entonces se deja de presionar.

Sucede cuando después de estar dentro, el puntero del

rollOut
ratón abandona el área sensible del botón.

Sucede cuando el puntero del ratón está sobre el botón

dragOut y se presiona sobre el mismo. Con el botón pulsado se
mueve el cursor fuera de la superficie del botón.
Ocurre cuando el puntero del ratón está sobre el botón
dragOver y se presiona sobre el mismo; con el botón pulsado
se mueve el cursor fuera de la superficie del botón y
posteriormente de nuevo se coloca sobre el botón.

keyPress Ocurre cuando se pulsa alguna tecla especificada entre

comillas. Por ejemplo: on (keyPress “<Left>”)

50
 TIP
En general los botones en Windows y en casi todas las aplicaciones,
ejecutan sus acciones cuando los sueltas y no cuando los presionas, por
eso un clic es la acción de presionar y luego soltar un botón. Utiliza
el evento release si deseas que un botón ejecute acciones cuando el
usuario haga un clic sobre él.
¡Pruébalo con cualquier programa!

Flash

19 ActionScript en botones

Identificando acciones

22
Actividad
1. Para cada uno de los siguientes bloques de código que se escribirán en
un botón, explica la función de acuerdo a la acción y evento. Debes ser
específico y utilizar un lenguaje técnico apropiado.

Si tienes dudas de la función de algún comando, búscala en la ayuda de

Flash.

Diseño Multimedia 51
 Código Función

on (rollOver) { Cuando el puntero del ratón

stopAllSounds(); pasa sobre el botón, todos los
} sonidos que estén ejecutándose
se detienen.

Cuando se presiona el botón, se

on (press) { abre la dirección especificada en
getURL(“[Link]
}
una ventana nueva del explorador
predeterminado.

on (release) { Cuando se suelta el botón se

gotoAndStop(14); ejecuta el cuadro 14 de la línea
} de tiempo y se detiene ahí.

on (rollOut) {
Cuando el puntero del ratón deja
trace (“¿a dónde vas?”); de estar sobre el botón, aparece
} una ventana con el texto.
¿a dónde vas?

on (keyPress “<Right>”){ Cuando se presiona la flecha

trace (“Derecha”); “derecha” del teclado, aparece un
} cuadro que dice “Derecha”.

52
 2. Sabemos que un botón tiene los estados Up, Over y Down (sin contar el
Hit o área sensible del botón). Si relacionas estos estados con los eventos
que puede detectar un botón ¿cuándo se muestra cada uno?

Estado Evento(s)

Up rollOut release

Over rollOver

Down press

Programando un menú en Flash

Actividad

23
1. Inicia un documento nuevo de Flash y crea tres Layers. Renombra los
Layers como acciones, objetos y botones, ordenados de arriba hacia
abajo.
2. En el Layer botones, crea un botón con forma de rectángulo. Edita el
símbolo para cambiar el color del botón en los diferentes estados como
sigue: Up de color verde oscuro, Over de color verde claro y Down de color
amarillo.
3. Regresa a la línea de tiempo principal y verifica que el botón creado se
encuentra en la biblioteca. Utiliza el símbolo para crear sobre el Layer
botones 5 instancias del botón. Coloca los 5 botones separados, pero
alienados en la parte superior de la película.
4. Utiliza el Panel de propiedades para nombrar cada instancia (Instance
Name). Etiqueta los botones como: b1_btn, b2_btn, b3_btn, b4_btn
y b5_btn, respectivamente.
5. Selecciona el cuadro 50 del Layer botones e inserta un frame <F5> para
extender la duración de la película.
6. Ahora en el Layer objetos, inserta un Keyframe en los cuadros 11, 21,
31 y 41. Extiende hasta el cuadro 50 la duración del último Keyframe,
insertando un frame en esa posición.
7. Utiliza la herramienta de texto para teclear un número 1 grande en el
Keyframe 1 del Layer objetos. De forma similar crea los textos 2, 3, 4 y 5,
en los Keyframes 11, 21, 31 y 41 respectivamente.
8. Para terminar la estructura, en el Layer acciones inserta un Keyframe en
los cuadros 10, 20, 30, 40 y 50.

Diseño Multimedia 53
 9. Selecciona el Keyframe 10 del Layer acciones y abre el Panel de
acciones con <F9>. Revisa que el panel muestra la etiqueta acciones:
10 e introduce la instrucción: gotoAndPlay(1);. Esta acción hará que la
película se repita una y otra vez desde el cuadro 1 hasta el cuadro 10.
10. En el Keyframe 20 del Layer acciones introduce el código:
gotoAndPlay(11). Esta acción hará que la película se repita una y otra
vez desde el cuadro 11 hasta el cuadro 20.
11. De forma similar introduce el código necesario en los Keyframes 30, 40
y 50 del Layer acciones, para que la película se repita en rangos de 10
cuadros.
12. Contesta las siguientes preguntas:
a. ¿Qué pasará si ejecutas la película en este momento?
Sólo se ejecuta del cuadro 1 al 10.

b. ¿Por qué no se ven los textos 2, 3, 4 y 5?

Porque al llegar al cuadro 10 se regresa al cuadro 1 y no deja que
avance más.

c. ¿Cómo podrías hacer que se vean?

Agregando instrucciones para ir a cada cuadro que se quiera.

13. Ahora hay que escribir acciones en los botones. Selecciona el primer botón
y abre el Panel de acciones. Revisa que el panel muestra la etiqueta
“b1_btn” e introduce el código:
on (release) {
gotoAndPlay(1);
}
Este código hará que la película salte al cuadro 1 siempre que se haga clic
sobre el primer botón.
14. En el segundo botón escribe el código:
on (release) {gotoAndPlay(11);}

54
 Este código hará que la película salte al cuadro 11 siempre que se haga
clic sobre el segundo botón.
15. De forma similar escribe el código necesario para que la película salte a
los cuadros 21, 31 y 41, cuando se haga clic en el tercero, cuarto y quinto
botón, respectivamente.
16. Prueba la película y contesta las siguientes preguntas:

a. ¿Cuál es la función de la película?

Crear un menú, que cuando se presione un botón ejecute una sección.

b. ¿Qué aplicación real podría tener la estructura que has creado?

Crear una página de internet.
Crear un menú para una presentación.

17. Guarda el archivo con el nombre ASbotones23 en la carpeta que

indique tu profesor.

TIP
En ActionScript, todo lo que se escriba después de una doble diagonal //
en la misma línea es un comentario, que sólo es útil al programador pero
es ignorado por el programa.
Por ejemplo:
play(); // Aquí inicia la reproducción de la línea de
tiempo.

ActionScript en MovieClips
Ya conoces que las instrucciones que escribes en un Keyframe se ejecutan
cuando la reproducción de la película llega a un cuadro específico en la línea de
tiempo. También sabes que las instrucciones en un botón se ejecutan cuando
ocurre un evento sobre el botón.

¿Sabes cuándo se ejecutan las instrucciones escritas en un MovieClip?

Diseño Multimedia 55
 Un MovieClip también es capaz de detectar eventos que ocurren en su entorno.
Puede mostrar todos los eventos que detecta un botón, pero además muchos
otros exclusivos de los MovieClips.

Estos nuevos eventos se escriben dentro de un manejador que tiene la siguiente

estructura:
onClipEvent (evento) {
acciones a ejecutar cuando ocurre el evento
}

Los principales eventos de un Movie Clip son:

Evento Ocurre cuando …

Ocurre una sola vez en el momento en que el MovieClip
load se carga en la película.

Ocurre una sola vez cuando el MovieClip se descarga de

unload la película.

Éste es un evento especial que ocurre en cada cuadro de

la reproducción, mientras el MovieClip exista en la película.
enterFrame Por ejemplo, si la película se reproduce a una velocidad
de 12 cuadros por segundo, el evento enterFrame ocurre
12 veces cada segundo.

Se dispara cuando se presiona el botón del ratón sobre

mouseDown
cualquier lugar del escenario.

Ocurre cuando se pulsa el botón del ratón y posteriormente

mouseUp
se suelta sobre cualquier lugar del escenario.

Este evento sucede si se mueve el puntero del ratón.

mouseMove Este evento ocurre tantas veces como cuadros sean
detectados, en los que la posición del ratón cambie con
respecto al cuadro anterior.

keyDown Sucede cuando se pulsa una tecla.

keyUp Sucede cuando se suelta una tecla que estaba pulsada.

Ocurre cuando termina de realizarse una acción

data
LoadVariables o una acción LoadMovie.

56
 TIP
Aunque para el programador inexperto parecen lo mismo, los eventos de
MovieClip mouseDown y mouseUp, son diferentes a los eventos de
botón press y release. La primera diferencia es que se deben escribir en
manejadores (handlers) diferentes.

onClipEvent (mouseDown) on (press)

onClipEvent (mouseUp) on (release)

La segunda diferencia es que los eventos mouseDown y mouseUp

detectan acciones del ratón en cualquier lugar del escenario, mientras
que los eventos press y release sólo ocurren cuando el ratón actúa
sobre el símbolo que contiene las instrucciones.

Por último, en un botón sólo pueden usarse los manejadores para los
eventos press y release, mientras que en un MovieClip pueden utilizarse
tanto handlers de botón como de MovieClip.

Flash

20 ActionScript en MovieClips

Identificando eventos

24
Actividad
Contesta las siguientes preguntas, indicando a qué evento nos referimos y si
se aplica en MovieClips, Botones o Keyframes.
1. Ocurre una sola vez en el momento en que el movie clip se carga en la
película. ¿A qué evento nos referimos y dónde se aplica?
Evento : load ()
Aplica : MovieClip

Diseño Multimedia 57
 2. Carga en el navegador de Internet la página que se especifique
entrecomillada dentro de los paréntesis. ¿A qué evento nos referimos y
dónde se aplica?
Evento : getURL()
Aplica : Botones
3. La reproducción salta al fotograma indicado entre los paréntesis y continúa
su reproducción desde ahí. Entre los paréntesis se puede introducir un
número de cuadro o su nombre (si se ha etiquetado). ¿A qué evento nos
referimos y dónde se aplica?
Evento : gotoAndPlay ()
Aplica : Botones, keyframes

4. Ocurre cuando se deja de presionar el símbolo después de haberlo

presionado. ¿A qué evento nos referimos y dónde se aplica?
Evento : release
Aplica : Botón

5. Sucede cuando, después de estar dentro, el puntero del ratón abandona el

área sensible del símbolo. ¿A qué evento nos referimos y dónde se aplica?

Evento : rollOut
Aplica : Botón

6. Ocurre cuando se pulsa el botón del ratón y posteriormente se suelta sobre

cualquier lugar del escenario. ¿A qué evento nos referimos y dónde se
aplica?
Evento : mouseUp
Aplica : MovieClip

Nombrar instancias
Cuando piensas agregar ActionScript para dar funcionalidad a los botones y
MovieClips de una película, es una buena práctica nombrar las instancias. Las
instancias en el escenario se nombran utilizando el Panel de propiedades
(Instance Name). Es muy importante que des a las instancias un nombre
que te permita identificarlas plenamente, ya que el nombre que des al objeto
es el que se usará en la programación.

En ActionScript se acostumbra agregar a todos los nombres de instancias de

botones la terminación _btn, por ejemplo: option1_btn o reproducir_btn.

58
 Similarmente, se acostumbra agregar a todos los nombres de instancias de
MovieClips la terminación _mc, como avion_mc o corredor_mc.

A las instancias de texto se les da la terminación _txt.

Si sigues esta convención al nombrar las instancias de tus objetos, podrás

además aprovechar la ayuda que Flash presenta al programador, ya que
reconoce las terminaciones y sugiere acciones relacionadas con botones,
MovieClips o textos, según corresponda.

Si sigues las convenciones

para nombrar instancias, Flash
muestra las propiedades y
métodos del tipo de objeto, en
cuanto escribes el punto.

A partir de esta sección, en explicaciones y actividades se usará la convención

para nombrar las instancias que se explicó en los párrafos anteriores. De esta
manera, podrás identificar fácilmente los nombres de instancias de cada tipo.

Es muy importante nombrar las instancias antes de escribir la primera

línea de código. Si ya hay código escrito y cambias el nombre de alguna
instancia, el código no se actualiza para reflejar los cambios y la aplicación
no funcionará.

Nota Al nombrar las instancias ten cuidado de no dejar espacios al final del
nombre, no usar símbolos internacionales (como acentos o ñ), ni signos
de puntuación.

Diseño Multimedia 59
 Nombrando instancias

25
Actividad
Nombra las instancias dependiendo la función que se indica con cada ícono.
Observa el ejemplo resuelto.

MovieClip Botón Texto

a. avion avion_mc
b. inicio inicio_btn

c. siguiente siguiente_btn d. adelante adelante_btn

e. letrero letrero_txt f. dibujo

dibujo_mc

g. texto texto_txt h. animacion

animacion_mc

Sintaxis de punto
Las propiedades son atributos que definen un objeto. En ActionScript las
propiedades se identifican porque siempre llevan un guión bajo, antes de su
nombre por ejemplo _x, _height, _alpha o _visible.

Cada propiedad determina alguna característica del objeto como su posición,

altura, transparencia o si está o no visible en el escenario. Es posible consultar
el valor de una propiedad o asignar a una propiedad un valor.

Para referirnos a la propiedad de un objeto, ActionScript utiliza una sintaxis

de punto que es común en muchos lenguajes de programación orientados a
objetos. Cuando se usa esta sintaxis, una línea de instrucción siempre comienza
con el nombre de un objeto seguido de un punto y de alguna propiedad de
dicho objeto:

[Link];

60
Por ejemplo, la propiedad _x de un MovieClip se refiere a la posición horizontal
del objeto en el escenario (coordenada x). Si tenemos un objeto llamado
pelota_mc, entonces podemos usar el siguiente comando para que el objeto
se ubique 50 píxeles a la derecha del extremo izquierdo del escenario:

pelota_mc._x = 50;

O bien, podemos usar esta instrucción para que el MovieClip se desplace 10

píxeles a la derecha de su posición actual:

pelota_mc._x = pelota_mc._x + 10;

O en su forma abreviada:

pelota_mc._x += 10;

La sintaxis de punto también se utiliza para expresar los métodos de un

objeto. Los métodos son cosas que puede realizar el objeto, como detener su
reproducción, avanzar un cuadro o permitir ser arrastrado por el ratón.

objeto.método;

Por ejemplo, si tenemos un MovieClip animado, llamado pelota_mc,

entonces podemos usar el siguiente comando para que el objeto detenga su
reproducción:

pelota_mc.stop();

Este tipo de instrucciones se pueden asignar a un Keyframe o al evento de un

objeto tal y como se hizo en la actividad anterior.

Operadores
Los operadores se utilizan para trabajar con los valores de las propiedades o las
variables y son una parte fundamental del lenguaje ActionScript. Flash permite
utilizar una gran variedad de operadores que se clasifican en tipos. En las
siguientes tablas se enlistan los principales operadores y su función. Casi todos
son muy comunes y se utilizan en diferentes lenguajes de computadora.

Operadores de Asignación

Operador Función Ejemplos de uso

Asigna el valor de una operación
o una expresión en una variable.
= pelota_mc._x = 13;
La asignación siempre es de
derecha a izquierda.
Asigna a una variable el valor
de esa misma variable más otro pelota_mc._x += 1;
+=
valor. Se usa para incrementar Costo += unidad;
el valor de una variable.

Diseño Multimedia 61
 Asigna a una variable el valor de
-= esa misma menos otro valor. Se pelota_mc._x -= 1;
usa para decrementar el valor Costo -= descuento;
de una variable.

Asigna a una variable el valor de

*= esa misma variable multiplicado pelota_mc._height *= 3;
por otro valor.

Asigna a una variable el valor

/= de esa misma variable dividido pelota_mc._height /= 3;
entre otro valor.

Incrementa en uno, el valor de pelota_mc._rotation ++;

++
una variable

Decrementa en uno el valor de

-- pelota_mc._rotation --;
una variable.

Operadores Aritméticos

Operador Función Ejemplos de uso

Sirve para sumar dos expresiones
+ Total = A + B;
o conectar cadenas de texto.
Se emplea para restar valor o
- asignar signo negativo a un Total = A – 7;
número.

Multiplica dos expresiones

* Total = A*3;
numéricas.

Divide dos expresiones

/ Total = A/2;
generando decimales.

Devuelve el residuo de la
% división de dos expresiones. Total = A%2
Este operador se llama módulo.

62
 Operadores de Comparación

Operador Función Ejemplos de uso

Regresa un valor verdadero if (A==B){

== (True) si dos expresiones son play();
iguales. }
Regresa un valor verdadero if (A!=B){
!=
(True) si dos expresiones son play();
diferentes. }

Regresa un valor verdadero

(True) si la expresión de la if (A>B){
> play();
izquierda es mayor que la de la
derecha. }

Regresa un valor verdadero

(True) si la expresión de la if (A<B){
< play();
izquierda es menor que la de la
derecha. }

Regresa un valor verdadero if (A>=B){

>= (True) si la expresión de la play();
izquierda es mayor o igual que }
la de la derecha.

Regresa un valor verdadero

if (A<=B){
(True) si la expresión de la
<= play();
izquierda es menor o igual que
}
la de la derecha.

Reconociendo operadores

26
Actividad
Menciona si es un operador aritmético, de asignación o de comparación. Escribe
su función en la línea.

a. !=

Tipo y función: Comparación. Regresa el valor de verdadero (TRUE) si las

dos expresiones son diferentes.

b. /=

Tipo y función: Asignación. Asigna a una variable el valor de esa misma

variable dividido entre otro valor.

Diseño Multimedia 63
 c. ++

Tipo y función: Asignación. Aumenta en uno el valor de esa variable.

d. %

Tipo y función: Aritmética. Devuelve el residuo de la división de dos

expresiones.

e. *

Tipo y función: Aritmética. Multiplica dos expresiones numéricas.

f. -=

Tipo y función: Asignación. Asigna a una variable el valor de esa misma

variable menos otro valor.

Modificando propiedades con ActionScript

Actividad

27
1. Abre en Flash la película [Link] que se encuentra en tu CD de
trabajo o carpeta de actividades.

2. Analiza los dos Layers del documento. En uno se encuentran botones

y etiquetas que hacen referencia a algunas de las propiedades de los
MovieClips. En el segundo Layer se encuentra una instancia del Movie
Clip llamado perro.

64
 3. Asigna a la instancia del perro el nombre dog_mc, utilizando el Panel de
propiedades. Recuerda que el nombre de instancia (y no el nombre del
símbolo) se utiliza para referirte a un objeto en programación.
4. Selecciona el botón con el signo de más (+) de la propiedad alpha, abre el
Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._alpha+=10
}
5. Selecciona el botón con el signo de más (+) etiquetado como rotate, abre
el Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._rotation+=10
}
6. Selecciona el botón con el signo de más (+) de la propiedad width, abre el
Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._width+=10
}
7. Selecciona el botón con el signo de más (+) de la propiedad height, abre
el Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._height+=10
}
8. Selecciona el botón con el signo de más (+) de la propiedad xscale, abre
el Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._xscale +=10
}
9. Selecciona el botón con el signo de más (+) de la propiedad yscale, abre
el Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._yscale +=10
}

Las propiedade de xscale y yscale de un MovieClip, funcionan muy

semejantes a Height y Width. La diferencia es que las propiedades Height
Nota y Width no aceptan valores negativos, mientras que xscale y yscale sí los
aceptan.

Diseño Multimedia 65
 10. Selecciona el botón con el signo de más (+) de la propiedad x, abre el
Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._x +=10
}
11. Selecciona el botón con el signo de más (+) de la propiedad y, abre el
Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._y +=10
}
12. Selecciona el botón con el signo de más (+) de la propiedad visible, abre
el Panel de acciones y asígnale al botón el siguiente código:
on (release) {
dog_mc._visible =true
}
13. Prueba que todos los botones (+) cumplan con su función.
14. Ahora programa las funciones opuestas en cada uno de los botones
marcados con los signos de menos (-).
15. Cuando hayas probado que todos los botones funcionan, tanto para
incrementar, como para decrementar valores, guarda tu trabajo y contesta
las siguientes preguntas:
a. ¿De qué otra manera podrías haber escrito las instrucciones que
modifican las propiedades, sin usar el operador +=? Anota dos
ejemplos:
dog_mc._ y = [Link]._ y + 10 ;
dog_mc._ width = dog_mc._ width + 10 ;
Control de líneas de tiempo
Imagina que creas un MovieClip con la imagen de una bicicleta sin ruedas.
Puedes utilizar la línea de tiempo de este MovieClip para crear un MotionTween
que mueva la bicicleta de un extremo a otro del escenario. Para las ruedas
puedes crear un segundo MovieClip que represente una rueda girando y colocar
dos instancias del MovieClip de la rueda dentro del MovieClip de la bicicleta.

Utilizando instrucciones de ActionScript, sería posible iniciar o detener el giro

de las ruedas o el movimiento de la bicicleta, pero para lograrlo es necesario
comprender cómo funcionan las jerarquías de las líneas de tiempo.

Cuando colocas la instancia de un MovieClip dentro de la línea de tiempo de

otro MovieClip, a la instancia interior se le conoce como “hijo” (Child) y a la
que la contiene se le conoce como “padre” (Parent). En este esquema, la línea
de tiempo principal sería padre de todas las instancias que se coloquen sobre
el escenario y naturalmente, la línea de tiempo principal no tiene padre.

Las relaciones entre padres e hijos son jerárquicas. Para comprender esta
jerarquía, compárala con la del disco duro de tu computadora. El disco duro

66
tiene una raíz, a partir de la cual se pueden crear carpetas y dentro de esas
carpetas se pueden crear más carpetas, dando como resultado un esquema de
árbol. De la misma manera en una película Flash, la línea de tiempo principal
es la raíz y a partir de ella pueden existir MovieClips y dentro de éstos otros
MovieClips, cada uno con sus líneas de tiempo.

Las instancias y sus líneas de tiempo pueden enviarse mensajes entre sí,
por medio de ActionScript. La línea de tiempo que envía el mensaje (la que
contiene las instrucciones en ActionScript) se denomina Línea de tiempo
de control (controlling timeline). La línea de tiempo que recibe la acción
se denomina Línea de tiempo destino (target timeline). Cuando una
instrucción debe efectuar una acción sobre un objeto que no está en la misma
línea de tiempo, es necesario especificar la ruta destino (target path), que
puede ser absoluta o relativa.

Analiza el siguiente esquema. Imagina que en la línea de tiempo principal

(_root) se ha colocado una instancia del MovieClip bici_mc, que a su
vez contiene dos instancias de una rueda girando, llamadas rueda1_mc y
rueda2_mc. Cada MovieClip tiene su propia línea de tiempo que se reproduce
de forma independiente normalmente:

_root
bici_mc
rueda1_mc
rueda2_mc

Ahora imagina que desde un cuadro de la línea de tiempo principal, queremos

hacer que se detenga el giro de una rueda. La instrucción que hay que agregar
al cuadro es:

Controlling timeline Instrucción con la ruta adecuada

_root bici_mc.rueda1_mc.stop()

bici_mc

rueda1_mc

rueda2_mc

Diseño Multimedia 67
 Veamos ahora otro caso basado en el mismo esquema. Se requiere que al
hacer clic sobre la instancia bici_mc, se detenga la otra rueda. Ahora la acción
no la controla la línea de tiempo principal, sino se escribe dentro del objeto
bici_mc. La instrucción quedaría así:

Controlling timeline Instrucción con la ruta adecuada

_root

on (release){
bici_mc rueda2_mc.stop()
}

rueda1_mc

rueda2_mc

Opcionalmente obtendrías el mismo resultado usando la ruta absoluta

completa:

Controlling timeline Instrucción con la ruta adecuada

_root

on (release){
bici_mc _root.bici_mc.rueda2_mc.stop()
}

rueda1_mc

rueda2_mc

Considerando el mismo esquema jerárquico, imagina ahora que desde la línea

de tiempo de la rueda 1, deseas detener la reproducción de la rueda 2. Puedes
usar una ruta relativa:

Controlling timeline Instrucción con la ruta adecuada

_root

bici_mc

rueda1_mc _parent.rueda2_mc.stop()

rueda2_mc

68
 O bien una ruta absoluta:

Controlling timeline Instrucción con la ruta adecuada

_root

bici_mc

rueda1_mc _root.bici_mc.rueda2_mc.stop()

rueda2_mc

TIP
Utiliza estas palabras reservadas para armar tus rutas:
_parent: para referirte al objeto o línea de tiempo que contiene aquel en
que estás escribiendo el código.
_root: para referirte a la línea de tiempo principal de la película.
this: para referirte al mismo objeto en el que estás escribiendo el
código.

Controlando la bicicleta

28
Actividad
1. Abre en Flash el archivo [Link] que se encuentra en tu CD de trabajo
o carpeta de actividades. Prueba la película para ver el estatus actual. La
película contiene una instancia de la bicicleta que se mueve por medio de
un MotionTween en la línea de tiempo principal. Dentro del símbolo de
la bicicleta, hay dos instancias del símbolo de la rueda. Cada rueda a su
vez, gira sobre su propio eje por medio de otro MotionTween. Comprueba
cómo está la línea de tiempo principal, las líneas de tiempo de la bicicleta
y las ruedas.

Diseño Multimedia 69
 2. Nombra las instancias. Primero nombra la instancia de la bicicleta. Utiliza
un nombre que termine con _mc para facilitar la programación posterior.
Después nombra las instancias de cada rueda, dentro del símbolo de la
bicicleta.
3. Regresa a la línea de tiempo principal y asigna código de programación a
cada uno de los botones para realizar la acción que indican. En algunos
casos, será necesario utilizar rutas para poder pasar los comandos a los
objetos que están contenidos en otros.
4. Prueba la película y revisa que todo funcione correctamente. Después
contesta las siguientes preguntas:
a. ¿Qué instrucción se debe escribir en el Keyframe 1 de la línea de tiempo
de la rueda, para que se detenga la bicicleta? Escríbela y compruébalo
en tu película.
_root.stop();
b. ¿Qué instrucciones se deben escribir en la rueda 2 para que al hacer
un clic sobe ella se detenga la rueda 1? Escríbelas y compruébalo en
tu película.
on (release){
_parent.rueda1_mc.stop();
}

c. ¿Qué instrucciones se deben escribir en la bicicleta para que al colocar

el ratón sobe ella se detengan las dos ruedas y al quitar el ratón
continúen girando? Escríbelas y compruébalo en tu película.
on (rollOver){
rueda1_mc.stop();
rueda2_mc.stop();
}
on (rollOut){
rueda1_mc.play();
rueda2_mc.play();
}

70
 Variables
Una variable es un contenedor de información que se identifica con un nombre.
Puede contener cadenas de texto, números o valores booleanos (verdadero y
falso).

Los nombres de las variables deben seguir algunas reglas:

1. El nombre de una variable no puede empezar con un número. El nombre
tampoco puede contener espacios, signos de puntuación o símbolos
internacionales como @, ñ, ¿, #, entre otros.
2. El nombre de una variable no puede ser igual a una palabra reservada
de ActionScript. Por ejemplo, no puedes crear una variable que se llame
release, on o True. Cuando escribes código en el Panel de acciones, las
palabras reservadas de ActionScript aparecen en azul y los nombres de
variables (entre otras cosas) aparecen en negro.
3. El nombre de una variable debe ser único en su ámbito de acción
(explicaremos esto después de la siguiente actividad). Por ejemplo, en un
mismo MovieClip no puedes usar una variable que se llame velocidad para
guardar dos cosas diferentes.
Para poder utilizar una variable es importante “declararla”, anteponiendo la
palabra var al nombre de la variable, por ejemplo:
var total;
var puntos;
var ancho;
Una variable puede ser inicializada o no, que quiere decir, asignarle un valor al
momento de declararla, por ejemplo:
var costo = 50;
var puntos = 0;
var nombre = “Marie”;

Declarando variables

Actividad

29
1. Abre un documento nuevo de Flash.
2. Introduce el siguiente código en el cuadro 1 del Layer 1:
var total=100;
var texto=”esto es una cadena de texto”;
var estudio=true;
trace(total);
trace(texto);
trace(estudio);
total = total+10;
texto = texto + “ grande”;
estudio = not(estudio);
trace(total);
trace(texto);
trace(estudio);

Diseño Multimedia 71
 3. Prueba la película y si no se detecta ningún error, copia lo que muestra la
ventana de salida (Output).
100
esto es una cadena de texto
true
110
esto es una cadena de texto grande
false

4. Ahora sin utilizar Flash, escribe lo que aparecería en la ventana de salida

si se ejecutara el siguiente código:
var total=100;
var texto=”esto es una cadena de texto”;
var estudio=false;
trace(total);
trace(texto);
trace(estudio);
total = 10;
texto = texto + “ grande”;
estudio = not(not(estudio));
total = 10+total;
texto = “cadena”;
trace(total);
trace(texto);
trace(estudio);
100
esto es una cadena de texto
false
20
cadena
false

Ámbitos de las variables

En la actividad anterior declaraste algunas variables en un Keyframe de la línea
de tiempo. También es posible declarar variables en códigos que se encuentren
en MovieClips, botones o incluso en archivos de código externos. Sin embargo,
las variables tienen un ámbito de acción en el que son reconocidas después
de declararlas.

Variable Local. Está disponible sólo dentro del manejador (handler),

objeto o función en que se define. Por ejemplo, si declaras una variable dentro
del código asignado a un MovieClip, la variable no está disponible fuera de ese
MovieClip.

Variable de la Línea de tiempo. Está disponible en cualquier instrucción en

la línea de tiempo en que se define, ya sea la línea de tiempo principal, la línea
de tiempo de una escena o la línea de tiempo de un MovieClip.

72
 Variable Global. Es reconocida en todas las líneas de tiempo de la
película y en todos los objetos. Para que una variable sea global, debe
especificarse anteponiendo a su nombre la palabra reservada _global. Por
ejemplo, si en el frame 1 de la línea de tiempo principal defines la variable
var _global.puntos =0; puedes usarla en cualquier lugar de la película.

Estructuras Condicionales
Todos los lenguajes de programación tienen un condicional if que se utiliza
para la toma de decisiones. En ActionScript la sintaxis del condicional if es:
if (condición) {
acciones;
}
Esto equivale a decir: “Si la condición se cumple (si es verdadera), se ejecutan
todas las acciones que estén entre las llaves. Si la condición no se cumple (si
es falsa) las acciones son ignoradas.”

El condicional if puede tener además una cláusula else con la siguiente

sintaxis:
if (condición) {
acciones1;
}else{
acciones2;
}
El uso del else podría expresarse así: “Cuando la condición se cumple (si es
verdadera) se ejecutan las acciones1 y cuando la condición no se cumple (si es
falsa) se ejecutan las acciones2.”

Flash

21 Condicional If y Else

Diseño Multimedia 73
 Escribiendo código con un condicional

Actividad

30
1. Analiza con cuidado el siguiente código y contesta las siguientes preguntas.
Si tienes dudas puedes revisar los capítulos anteriores o consultar la ayuda
de Flash.
onClipEvent (load) {
var i = 0;
this._x = 0;
}

onClipEvent (enterFrame) {
this._x += i;
i += .01;
if (this._x>[Link]) {
this._x = 0;
}
}
Si estas instrucciones se escriben en un MovieClip:
a. ¿Cuándo ocurre el evento load?
Cuando se carga el MovieClip, es decir, cuando aparece por primera vez
en la película.
b. ¿Para qué sirve la instrucción var i = 0;?
Inicializa una variable llamada i en 0.

c. ¿Qué indica la palabra reservada this?

Que hacemos referencia al MovieClip en el que escribimos el código.

d. ¿Para qué sirve la instrucción this._x = 0;?

Hace que la posición horizontal de este MovieClip sea 0 (extremo
izquierdo).
e. ¿Cuándo ocurre el evento enterFrame?
En cada cuadro de la película, en este caso, 12 veces cada segundo.

74
 f. ¿Cuál es la finalidad de las dos líneas siguientes?
this._x += i;
i += .01;

Mover el clip un poco a la derecha, aumentando en 0.01 la cantidad que se

moverá el próximo frame.
g. ¿Qué efecto tiene esta estructura condicional?
if (this._x>[Link]) {
this._x = 0;
}
Si el clip llega al final del escenario (derecha) lo regresa al
extremo izquierdo.
2. Abre un nuevo documento de Flash y cambia su velocidad a 30 fps.
3. Dibuja un gráfico simple con forma de flecha que apunta hacia la derecha
de unos 30 píxeles por lado.
4. Convierte el gráfico a MovieClip y asígnale un nombre a la instancia.
5. Utiliza el Panel de acciones para introducir el código completo en el
MovieClip. Asegúrate que el código queda asignado a este símbolo.
6. Prueba la película y observa las instrucciones en acción.

Efecto de máquina de escribir

Actividad

31
1. Abre un nuevo documento en Flash. Cambia la velocidad de reproducción
a 30 fps.
2. Crea sobre el escenario un campo de texto y utiliza el Panel de
propiedades para que sea de tipo dinámico (Dynamic text). El campo
debe ser amplio, de lado a lado del escenario.
3. También en el Panel de propiedades puedes asignar una variable a
ese texto utilizando el parámetro Var. Asígnale al texto una variable que
se llame caja. Esto significa que el valor que tenga la variable caja, será
desplegado en el texto dinámico.

4. Convierte el campo de texto en MovieClip con cualquier nombre. Una

vez creado, usa el Panel de propiedades para asignarle a la instancia el
nombre: maquina_mc.

Diseño Multimedia 75
 5. Abre la línea de tiempo del MovieClip maquina_mc, haciendo doble clic
sobre él. Inserta 3 frames en el único Layer que hay.
6. Crea un nuevo Layer en la línea de tiempo del MovieClip. Convierte en
Keyframes los tres frames del nuevo Layer.
7. En la línea de tiempo del clip maquina_mc posiciónate en el Keyframe 1
del Layer 2 y abre el Panel de acciones. Declara una variable que se
llame t e inicialízala con valor de 0.
8. Enseguida declara una variable que se llame texto e inicialízala con
el valor “Cristóbal Colón viajó a América en 1492”. El texto debe ir
entrecomillado.
9. Introduce el siguiente código en el cuadro 2 del Layer 2.
if (t<[Link]){
caja=[Link](0,t);
t++;
}else{
caja=texto;
gotoAndStop(1);
}

10. Por último asigna al Keyframe 3 del Layer 2, la instrucción

gotoAndPlay(2);
11. Regresa a la línea de tiempo principal y prueba la película. Contesta las
siguientes preguntas:
a. ¿Qué hace este código?
Va desplegando una a una las letras de la cadena de texto, hasta llegar
a su longitud máxima.

b. Investiga cómo opera la función substring y qué parámetros

requiere.
Devuelve una cadena nueva desde el punto de inicio, hasta el punto final
de una cadena base. Parámetros: (punto inicio, punto final).

76
 Máscaras dinámicas

32
Actividad
1. Inicia un documento nuevo de Flash y cambia la velocidad de fotogramas
a 30 fps. Renombra el primer Layer como Fondo.
2. Importa al escenario la imagen Foto32 que se encuentra en tu CD de
trabajo o carpeta de actividades. Si lo deseas puedes importar cualquier
otra foto que cubra el área del escenario. Utiliza para ello el Menú File/
Import/Import to Stage...
3. Crea un nuevo Layer por encima del Layer Fondo y renómbralo como
Objetos.
4. Dibuja un círculo en el Layer Objetos y conviértelo a MovieClip.
5. Asigna al nuevo MovieClip el siguiente código:
onClipEvent (enterFrame) {
[Link]();
this._x = _root._xMouse;
this._y = _root._yMouse;
}
6. Utiliza el botón secundario del ratón sobre el nombre del Layer Objetos,
para convertirlo en máscara (Mask).
7. Prueba la película. El círculo debe seguir al ratón y comportarse como
máscara.
8. Guarda el archivo con el nombre MascaraDinamica32 en la carpeta de
costumbre.
9. Contesta las siguientes preguntas:

a. ¿Cuántas veces se ejecuta el código durante la reproducción de la

película?
Se repite indefinidamente en cada cuadro de reproducción.

b. ¿Para qué sirve el comando [Link]() ?

Para que no se vea el puntero del ratón.

c. ¿Para qué sirve la propiedad _xMouse?

Es el valor de la coordenada horizontal de la posición del ratón.

Diseño Multimedia 77
 Simulación física de un rebote

Actividad

33
1. Inicia un nuevo documento de Flash y cambia la velocidad de la película a
30 frames por segundo (fps).
2. Dibuja un círculo de 26 por 26 píxeles. Conviértelo a MovieClip y posiciónalo
en las coordenadas x=262; y= 0 en el escenario.
3. Nombra la instancia del MovieClip como pelota_mc, usando el Panel de
acciones.
4. Asigna el siguiente código al símbolo pelota_mc:
onClipEvent (load) {
fuerza =0.5;
velocidad = 0;
}
onClipEvent (enterFrame) {
velocidad += fuerza;
this._y += velocidad;
if (this._y>=400) {
this._y = 400;
velocidad *= -.8;
}
}
5. Prueba la película y guarda el trabajo como Rebote33 en la carpeta que
indique tu profesor.
6. Escribe en la línea debajo de cada instrucción la función que realiza:
onClipEvent (enterFrame) {
Especifica que todo el código dentro del bloque ocurrirá en cada frame.
velocidad += fuerza;
Aumenta el valor de la velocidad, es decir, velocidad = velocidad + fuerza.
this._y += velocidad;
Aumenta la posición vertical de la pelota dependiendo del valor de la velocidad.
if (this._y>=400) {
Verifica si la posición de la pelota no excede el límite vertical del escenario.
this._y = 400;
Establece la posición de la pelota en la parte inferior del escenario.
velocidad *= -.8;
Cambia el signo de la velocidad y la reduce al 80%.
}
}

78
 Mejorando el rebote

34
Actividad
Para realizar esta actividad es necesario haber realizado correctamente la
actividad anterior.

1. Abre el archivo terminado de la actividad anterior y guárdalo con el nombre

Rebote34 en la misma ubicación que el original.
2. Agrega el código necesario para que la pelota se mueva de izquierda a
derecha, a una velocidad fija, mientras va rebotando por el escenario.
Utiliza una variable para asignar la velocidad del movimiento horizontal.
Prueba la película.
3. Modifica el código para que cuando la pelota alcance el extremo derecho
del escenario, regrese moviéndose de derecha a izquierda. Necesitarás
un condicional que haga que la variable de la velocidad horizontal se
vuelva negativa cuando la pelota llegue a la coordenada límite. Prueba la
película.
4. Por último agrega el código necesario para que, cuando la pelota que va
de regreso alcance el extremo izquierdo del escenario, entonces rebote
nuevamente hacia la derecha.
5. Afina los valores de las variables y parámetros para que parezca que la
pelota rebota limpiamente dentro de un área rectangular.
6. Guarda los cambios.

Publicación de proyectos de Flash

Flash ofrece ocho formatos para la publicación de proyectos. Se pueden acceder
utilizando el Menú File/Publish Settings. Un proyecto puede ser publicado
en varios formatos con un sólo comando, eligiendo los formatos deseados
desde este cuadro de diálogo. Al seleccionar formatos de publicación, se crean
fichas con opciones relacionadas con cada tipo de formato.

Dependiendo del objetivo y destino final del proyecto, se pueden elegir

diferentes formas para publicar una película de Flash.

Diseño Multimedia 79
 Flash (.swf): Genera el swf estándar, que respeta todas las características
de la película. Para ver una película swf es necesario tener instalado el Flash
Player, que normalmente viene incluido con los navegadores de Internet como
el Internet Explorer. El Flash Player también se puede descargar de forma
gratuita desde el sitio de Adobe.

HTML (.html): Genera un archivo html que permite ligar la película swf para
visualizarla desde un navegador de Internet. Para ver la película en Internet
debes publicar tanto en swf como en html y subir o distribuir ambos archivos.

Windows Projector (.exe): Genera un archivo ejecutable (.exe) para

plataformas Windows. Un archivo ejecutable de una película de Flash puede
ejecutarse desde un CD o en modo local, sin necesidad del Flash Player.

Macintosh Projector (.hqx): Genera un archivo ejecutable (.hqx) para

plataformas Macintosh. Es un video que puede ser tratado por programas de
edición de video.

QuickTime (.mov): Genera un video en formato QuickTime. Sólo es una

secuencia lineal y se pierden todas las características de interactividad o
programación.

GIF (.gif): Genera una secuencia de imágenes (cuadro por cuadro) de lo

que se encuentra en el escenario. El formato Gif tiene un máximo de 256
colores y se usa sólo para crear pequeñas animaciones como las usadas en los
emoticons de los programas de chat.

80
 JPEG (.jpg): Genera una imagen única del frame de la película en el cual se
encuentre la cabeza lectora.

PNG (.png): Genera una imagen única del frame de la película en el cual se
encuentre la cabeza lectora. A diferencia del formato jpeg, éste puede contener
áreas transparentes.

Flash

22 Publicación de proyectos

Recordando

35
Actividad
En cada pregunta marca el inciso con la respuesta correcta.
1. Las acciones de ActionScript pueden escribirse en:
a. Frames, botones y MovieClips
b. Frames y botones
c. Frames
d. Frames y MovieClips
2. La instrucción on() es un manejador de eventos para:
a. Botones
b. MovieClips
c. Botones y MovieClips
d. Frames, botones y MovieClips
3. La instrucción onClipEvent() es un manejador de eventos para:
a. Sólo Botones
b. Sólo MovieClips
c. Botones y MovieClips
d. Frames, Botones y MovieClips
4. Para los siguientes eventos, anota en la línea si son manejados por el
handler on() o por el handler onClipEvent().
a. release on ()
b. KeyPress on ()
c. mouseMove onClipEvent ()
d. press on ()

Diseño Multimedia 81
 e. rollOver on ()
f. dragOut on ()
g. enterFrame onClipEvent ()
h. load onClipEvent ()
i. rollOut on ()
Explica lo mejor posible cada uno de los siguientes conceptos:

1. Handler o manejador de eventos

*El alumno debe usar sus palabras

2. Variable

3. Variable local

4. Variable de línea de tiempo

5. _root

6. _parent

82
NOTAS
 Proyecto de Integración 1
Simulación de movimientos realistas
La intención principal de todas las actividades anteriores es comprender el
funcionamiento de Flash: crear objetos y textos, utilizar vectores, trabajar con
sonido, crear símbolos, utilizar múltiples líneas de tiempo, hacer animación y
programar con ActionScript. La combinación de todas las técnicas anteriores,
más una buena dosis de práctica y creatividad, te permitirá crear sitios web
y aplicaciones de alto impacto. Lo más importante antes de iniciar cualquier
proyecto, es comprender muy bien lo que quieres lograr y tener un plan mental
o escrito de cómo lograrlo.

Este proyecto se divide en 4 actividades secuenciales:

1. Programando los giros

2. Generando el movimiento
3. Controlando la velocidad máxima
4. Mejorando la acción

Antes de iniciar con la primera actividad, revisa una muestra del proyecto
terminado abriendo el archivo nave [Link] que se encuentra en
la carpeta Nave de tu CD de trabajo o carpeta de actividades. Prueba el
movimiento con las teclas de las flechas.

Objetivo y plan de programación

El objetivo de este proyecto es lograr que una nave espacial en el escenario
llamada nave_mc, se desplace controlada por las flechas del teclado de la
siguiente manera:

Tecla de flecha Acción

EVALUACIÓN

Arriba La nave acelera

Abajo La nave desacelera
Derecha La nave gira a la derecha
Izquierda La nave gira a la izquierda

Inicialmente la nave no se mueve y puedes hacerla girar sobre su propio eje

con las flechas izquierda o derecha. Sólo al presionar las teclas arriba o abajo
se inicia el movimiento.

Utilizaremos el evento enterFrame para monitorear continuamente lo que

ocurre en el entorno de la instancia nave_mc. Recuerda que el evento
enterFrame ocurre cada cuadro de la película, mientras el MovieClip exista.
Por lo tanto, cualquier acción asignada al evento enterFrame de un MovieClip
se repetirá continuamente mientras el MovieClip esté en el escenario.

onClipEvent(enterFrame){
instrucciones
}

84
 EVALUACIÓN
También usaremos la instrucción [Link](), que permite detectar
cuando se presiona alguna tecla en particular. El código de la tecla que se
quiere detectar se pone entre los paréntesis.

if ([Link](65)) {
instrucciones
// en este ejemplo las instrucciones ocurren si se presiona
// la tecla “A”
// porque el código ASCII de la tecla “A” es 65.
}

Actividad 01. Programando los giros

Fecha entrega Comentarios y necesidades % de éxito

1. Abre de la carpeta Nave de tu CD de trabajo o carpeta de actividades

la película [Link] y guarda el archivo en la ubicación que indique tu
profesor con el nombre [Link]. El resultado final de esta actividad
será la base de la siguiente.
2. Arrastra al escenario una instancia del símbolo spaceship de la biblioteca
de símbolos. Selecciona la instancia y usa el Panel de propiedades
para darle el nombre nave_mc.
Nombre del
símbolo original
Nombre de la
instancia

3. Con la instancia seleccionada, asigna el siguiente código en el Panel de

acciones:
onClipEvent (load) {
velocidad = 0;
}
Estas instrucciones asignan a la variable velocidad el valor inicial de 0, en
el instante en que la nave espacial aparece en la línea de tiempo. Como la
variable se define dentro del código de nave_mc, entonces es una variable
local y sólo es reconocida dentro de este MovieClip.

Diseño Multimedia 85
 4. La propiedad _rotation de un MovieClip especifica su orientación en
grados. Para girar la nave hacia la derecha podemos incrementar
su propiedad _rotation. Agrega al MovieClip el código que detecta
continuamente si se presionó la tecla de la flecha derecha para girar la
nave si así fue.
Analiza el código para comprenderlo.
onClipEvent (enterFrame) {
if ([Link]([Link])) {
this._rotation += 15;
}
}
// el código de la tecla flecha derecha es [Link]

Nota: Recuerda siempre revisar en el Panel de acciones que estás

escribiendo, el código para revisar que esté en el lugar correcto. En este
caso la instancia nave_mc.
5. Dentro del mismo handler del evento enterFrame (antes de la llave
final) asigna el código para verificar si la tecla presionada fue la flecha
izquierda y girar el MovieClip en esa dirección. El nuevo código se muestra
EVALUACIÓN

en negritas:
onClipEvent (enterFrame) {
if ([Link]([Link])) {
this._rotation += 15;
}
if ([Link]([Link])) {
this._rotation -= 15;
}
}

86
 EVALUACIÓN
6. Prueba la película. Si has escrito bien el código, la nave debe girar sobre
su propio eje en la dirección de la flecha que presiones en el teclado
(izquierda o derecha). Revisa que hayas logrado este primer objetivo
antes de continuar a la Actividad 02. Guarda los avances.

Actividad 02. Generando el movimiento

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo de la actividad anterior y guárdalo con el nombre

[Link]. Selecciona la instancia de nave_mc y abre el Panel de
acciones. Agrega dentro del mismo handler del evento enterFrame
las instrucciones necesarias para incrementar el valor de la variable
velocidad en 1, si la tecla presionada es la flecha arriba.
if ([Link]([Link])) {
velocidad+=1;
}

2. Dentro del mismo evento incluye el código para disminuir en 1 el valor de

la variable velocidad, si la tecla presionada es la flecha abajo.

3. Hasta ahora si el usuario presiona las flechas arriba o abajo, la variable

velocidad incrementa o disminuye su valor, pero falta relacionar el valor
de esta variable con la posición de la nave. A continuación hay dos líneas
de código que incrementan los valores de las propiedades _x y _y de la
nave, determinando su posición en función de la velocidad y su orientación
actual. Se usan funciones trigonométricas que no serán explicadas por no
ser objetivo de este curso. No te preocupes si no entiendes la función
matemática, sólo comprende que la posición _x y la posición _y del
MovieClip se calcula en cada momento de acuerdo a su orientación y
velocidad.
// Éste es el código que mueve la nave
this._x+= [Link](_rotation*([Link]/180))*velocidad;
this._y+= [Link](_rotation*([Link]/180))*velocidad*-1;

Estas líneas deben estar dentro del handler del evento enterFrame justo
antes de la llave final.

Diseño Multimedia 87
 4. Prueba la película. Si has escrito bien el código, la nave debe acelerar
cuando presionas la flecha arriba y desacelerar cuando presionas la
flecha abajo. Revisa que hayas logrado este segundo objetivo antes de
continuar. Guarda los avances.

Actividad 03. Controlando la velocidad máxima

Fecha entrega Comentarios y necesidades % de éxito

EVALUACIÓN

1. Abre el archivo de la actividad anterior y guarda una copia con el nombre

[Link]. El movimiento de la nave que hasta ahora has logrado tiene
algunos problemas. El primero es que no hay límite en la aceleración, por
lo tanto, cuando se acelera demasiado es muy fácil perder el control de
la nave.
Para limitar la velocidad de la nave basta agregar unas líneas antes de
cambiar su posición _x y _y. La velocidad máxima será 20, por lo tanto
podemos poner un condicional que iguale la velocidad a 20 si sobrepasa

88
 EVALUACIÓN
este valor. Las nuevas líneas se muestran en negritas:
// Éste es el código que mueve la nave
if (velocidad>20){
velocidad =20;
}
this._x+= [Link](_rotation*([Link]/180))*velocidad;
this._y+= [Link](_rotation*([Link]/180))*velocidad*-1;
2. Agrega también las líneas para que, si la velocidad baja de -20, quede
fija en este valor:
if (velocidad<-20){
velocidad =-20;
}
3. Para ver en todo momento la velocidad actual, en el escenario se ha
colocado ya un texto dinámico llamado monitor_txt. La propiedad
text de un texto dinámico determina el contenido que muestra. Dentro
del MovieClip nave_mc, debajo de los condicionales de velocidad que
acabas de agregar, incluye esta línea de código:
_root.monitor_txt.text=velocidad;

Como el texto monitor_txt no está dentro del MovieClip, es necesario

anteponerle la palabra _root para indicarle a Flash que debe buscar
este objeto en la línea de tiempo principal y no en la línea de tiempo del
MovieClip.

4. Prueba la película. Revisa que el valor de la velocidad aparece en todo

momento y que la velocidad máxima es 20 (tanto positiva como negativa).
No pases a la siguiente fase hasta cumplir este objetivo. Guarda los
avances.

Diseño Multimedia 89
 Actividad 04. Mejorando la acción

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo de la actividad anterior y guárdalo como [Link].

Por último vamos a mejorar la apariencia de la nave. Directamente en la
biblioteca de símbolos haz doble clic sobre el símbolo spaceship para
editarlo. La línea de tiempo de este símbolo tiene dos Layers con dos
Keyframes cada uno. En el frame 1 está la nave normal y en el frame 2
la nave con sus propulsores encendidos. Observa el contenido de cada
frame.
EVALUACIÓN

2. En la línea de tiempo de la nave, en el Keyframe 1 del Layer Acciones está

la instrucción stop(); para que MovieClip muestre sólo el primer cuadro y
se detenga. Antes de cerrar el MovieClip, agrega en el frame 2 el sonido
[Link] que ya está en la biblioteca de símbolos.

90
 EVALUACIÓN
3. Después de agregar el sonido, regresa a la línea de tiempo principal.
Selecciona el MovieClip nave_mc y en el Panel de acciones localiza
las instrucciones que revisan si se presionó la tecla arriba. Agrega esta
línea para que el MovieClip se reproduzca. La nueva línea se muestra en
negritas:
if ([Link]([Link])) {
velocidad+=1;
[Link]();
}

4. Prueba la película terminada. Al acelerar deben verse los propulsores

encendidos de la nave y escucharse el sonido asignado.
5. Guarda el proyecto terminado.

Diseño Multimedia 91
 Proyecto de Integración 2
Portafolio Web
Este proyecto de integración consiste en la creación de un sitio web tipo
portafolio virtual, con un estilo minimalista en tonos grises con toques en color
naranja.

En este proyecto aprenderás como Flash puede apoyarse de otras tecnologías

para el manejo de información como lo es XML; un lenguaje de etiquetas que
funciona como intermediario para el intercambio de datos con Flash.

Este proyecto se divide en varias actividades secuenciales:

1. Creando botones del menú

2. Creando programación reutilizable (prototipos)
3. Utilizando prototipos en el menú
4. Creando ventanas para los contenidos de cada tema
5. Programando el botón de cerrar
6. Asignando contenido a contacto
7. Asignando contenido a biografía
8. Asignando contenido a portafolio
9. Detallando el sitio final

Antes de iniciar con la primera actividad, revisa una muestra del sitio terminado
abriendo la página Web [Link] que se encuentra en la carpeta Sitio Web
de tu CD de trabajo o carpeta de actividades. Navega por todas las secciones
y piensa cómo se podría realizar este sitio con las técnicas que ya conoces.

Actividad 01. Creando botones del menú

EVALUACIÓN

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el documento [Link] que se encuentra en la carpeta Sitio

Web de tu CD de trabajo o carpeta de actividades.
2. Dibuja un rectángulo sin borde de 954 px de ancho por 18 de alto de
color gris oscuro. Utiliza el Panel de propiedades para obtener las
dimensiones exactas.

92
 EVALUACIÓN
3. Convierte ese rectángulo en MovieClip con su punto de registro en el
centro. Dale al MovieClip el nombre portafolio, ya que servirá como el
botón de esa zona del sitio Web.

Etiqueta la instancia (Instance Name) con el nombre portafolio_mc.

Recuerda que es muy importante nombrar las instancias si piensas usar
programación, como en este caso.
4. Accesa a la línea de tiempo de portafolio_mc y crea un nuevo Layer.
Abre la biblioteca de símbolos de Flash y arrastra el MovieClip llamado
fondo01 al escenario. Alinéalo al centro apoyándote del Menú Modify/
Align. Crea un nuevo Layer encima e inserta en él un texto estático que
diga “Portafolio” en color naranja, con la fuente Arial Black de 10 puntos.
Posiciona el texto en la coordenada -395.0, -8.0.
5. Regresa a la línea de tiempo principal. Ubica el MovieClip portafolio_mc
en las coordenadas 0,266.
6. Ahora vamos a duplicar el símbolo creado para facilitar la creación de otros
símbolos. Desde la biblioteca de símbolos da un clic con el botón secundario
del ratón sobre el símbolo portafolio y elige del menú emergente la opción
Duplicate. Dale al nuevo símbolo el nombre contacto y presiona OK.
7. Repite el paso anterior para obtener otra copia del símbolo que debes
nombrar biografia.
8. Ya que los símbolos se han creado y están disponibles en la biblioteca,
hay que modificarlos pues no nos interesa que sean idénticos. Primero
modifica en cada símbolo el texto. En vez de “Portafolio”, el símbolo
contacto debe tener el texto “Contacto”. El símbolo biografia debe
mostrar el texto “Biografía”.
9. Cambia también el color de fondo de los símbolos. El símbolo contacto
debe tener un fondo gris un poco más claro que el símbolo portafolio. El
símbolo biografia debe tener un color de fondo aún más claro.
10. Crea en el escenario una instancia del MovieClip contacto que se encuentra
en la biblioteca y colócalo en las coordenadas 0, 286. Dale a la instancia
el nombre contacto_mc.

Diseño Multimedia 93
 11. Crea en el escenario una instancia del MovieClip btn_biografia que se
encuentra en la biblioteca y colócalo en las coordenadas 0, 306. Dale a la
instancia el nombre biografia_mc.
12. Revisa con cuidado que tu trabajo cumpla con todos los requisitos
anteriores y guárdalo con el nombre [Link] en la carpeta que
tu profesor indique. Utilizarás este archivo como base de la siguiente
actividad.

Actividad 02. Creando programación reutilizable (prototipos)

Fecha entrega Comentarios y necesidades % de éxito

Cuando tenemos una situación que siempre se resuelve de la misma manera,

podemos utilizar prototipos para no tener que escribir código cada vez. Los
prototipos son fragmentos de programación reutilizable que se guardan en
un archivo externo a la película. Para que un prototipo pueda ser reutilizable
es necesario crear un documento de ActionScript y agregar el archivo a la
carpeta en donde se requiere.
EVALUACIÓN

En esta actividad se creará un prototipo para mover un MovieClip.

1. Abre un nuevo documento de ActionScript usando el Menú File/New

Document/ActionScript File.
2. Un archivo del tipo ActionScript File no puede contener gráficos. Se parece
mucho al Panel de acciones donde se introducen las instrucciones en
ActionScript.
Introduce el siguiente código:
[Link] = function(coor, vel) {
[Link] = function() {
this._x += (coor -this._x)/vel;
if ([Link](coor -this._x)<1) {
[Link] = null;
this._x = coor;
}
}
}

94
 EVALUACIÓN
¿Qué es este código? Veamos:

La palabras [Link] se utilizan para indicar que el código va a ser

un prototipo donde muevex es el nombre que le queremos dar al prototipo.

Después se inicia una función function que utiliza dos parámetros (coor,
vel). Usaremos coor para indicar la coordenada a la cual deseamos mover el
MovieClip. Usaremos vel para indicar la velocidad a la que queremos que se
mueva.

[Link] = function() { se utiliza para declarar que las siguientes

acciones se va a realizar una vez por cada frame que el MovieClip esté presente
en la película.

this._x += (coor -this._x)/vel; realiza un cálculo para incrementar la posición

X del MovieClip, dependiendo de los valores de coor y vel.

if ([Link](coor-this._x)<1) { es una condición que evalúa si el valor

de coor menos la coordenada X del MovieClip es menor que 1. La función
[Link] devuelve el valor absoluto de un número. Si esta condición se
cumple, se detiene la funcion [Link] y se asigna a la posición X
el valor de coor.

3. Ahora hay que escribir el código para la coordenada Y. Es el mismo

código, sólo con dos pequeños cambios: cambia el nombre “muevex” por
“muevey” en donde diga this._x has el cambio a this._y. El código debe
quedar así:
[Link] = function(coor, vel) {
[Link] = function() {
this._y += (coor -this._y)/vel;
if ([Link](coor -this._y)<1) {
[Link] = null;
this._y = coor;
}
}
}
4. Por último vuelve a copiar el código unas líneas más abajo y realiza estos
cambios: cambia el nombre “muevey” por el de “alfa”, siempre que diga
this._y cambia por this._alpha. El código debe quedar así:
[Link] = function(coor, vel) {
[Link] = function() {
this._alpha += (coor -this._alpha)/vel;
if ([Link](coor -this._alpha)<1) {
[Link] = null;
this._alpha = coor;
}
}
}
5. Guarda el archivo en la carpeta en donde estás trabajando con el nombre
[Link]

Diseño Multimedia 95
 Actividad 03. Utilizando prototipos en el menú

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo [Link] que creaste en la primera actividad de

este proyecto. Inserta un nuevo Layer y renómbralo como Acciones. En el
Keyframe 1 del Layer Acciones asigna el siguiente código:
#include “[Link]”
stop();
La palabra #include se utiliza para incluir un archivo externo (en este
caso el archivo de los prototipos), cuyo nombre debe incluir la extensión
“.as” e ir entrecomillado. Al hacer la inclusión, el código que contiene
dicho archivo estará disponible en la película.
2. Revisa que tus instancias en el escenario estén nombradas correctamente
como portafolio_mc, contacto_mc y biografia_mc (no uses
acentos).
3. Selecciona el MovieClip portafolio_mc, abre el Panel de acciones y
teclea el siguiente código:
EVALUACIÓN

on (release) {
[Link](12, 5);
_parent.contacto_mc.muevey(559,5)
_parent.biografia_mc.muevey(578,5)
}
Recuerda que en el archivo de prototipos creamos tres funciones llamadas
muevex, muevey y alfa. Cada función se programó para recibir dos valores,
la coordenada a la que se desea mover el objeto y la velocidad. En este
caso, se utiliza la función muevey para mover los MovieClips portafolio_
mc, contacto_mc y biografia_mc a diferentes coordenadas Y, todos
a una velocidad 5.

96
 EVALUACIÓN
4. Prueba la película. Haz clic sobre el MovieClip que dice “portafolio” y verifica
que los tres objetos se posicionen como se muestra en la imagen:

5. De regreso en la película asigna el siguiente código al Movie Clip

contacto_mc.
on (release) {
[Link](12, 5);
this._parent.biografia_mc.muevey(559, 5);
this._parent.portafolio_mc.muevey(578, 5);
}
Prueba la película y haz clic en el MovieClip que dice “Contacto”.
6. Ahora introduce el código necesario dentro del clip biografia_mc.
El objetivo es que al hacer clic sobre él, se mueva verticalmente a la
coordenada 12. El MovieClip “btn_portafolio” se moverá a la coordenada
559 y MovieClip “btn_contacto” a la coordenada 578.

Diseño Multimedia 97
 7. Prueba la película. Presiona el MovieClip que dice “Biografia” y verifica
que los objetos se muevan como muestra la imagen siguiente:

8. Guarda el archivo con el nombre [Link]. Será la base de la

siguiente actividad.

Actividad 04. Creando ventanas para los contenidos de cada tema

Fecha entrega Comentarios y necesidades % de éxito

EVALUACIÓN

1. Abre el archivo [Link] que creaste en la actividad anterior.

2. En la línea de tiempo, posiciónate en el cuadro 130 del Layer menu y
presiona F5 para extender su duración.
3. Encima del Layer menu, crea un nuevo Layer y renómbralo como
“etiquetas”.
4. Crea Keyframes en los cuadros 2, 30, 40, 80, 90 y 120 del Layer
etiquetas.

98
 EVALUACIÓN
5. Utiliza el Panel de propiedades para etiquetar (Frame label) los
Keyframes creados. Utiliza la siguiente tabla como referencia:

Número de Keyframe Etiqueta (Frame Label)

2 portafolio

30 salida1

40 contacto

80 salida2

90 biografia (no uses el acento)

120 salida3

Etiquetar los Keyframes es muy útil porque a partir de este momento

puedes utilizar la etiqueta en vez del número de cuadro en cualquier
instrucción. Por ejemplo, si quisiera ir al cuadro 30 puedo usar
indistintamente: gotoAndPlay(30); o bien gotoAndPlay(“salida1”);
6. Extiende la duración del Layer acciones hasta el cuadro 130. Inserta
Keyframes en los cuadros 2, 29, 30, 39, 40, 79, 80, 89, 90, 119 y 120).
Agrega un último Keyframe en el cuadro 130. Observa la figura:

7. Asigna la instrucción stop(); a cada uno de estos Keyframes: 29, 39, 79,
89, 119 y 130. Si te das cuenta, hay un stop justo un cuadro antes de
cada una de las etiquetas con el objetivo de detener la película antes de
que pase a otra sección.
8. Crea un nuevo Layer y cámbiale el nombre a ventanas. Arrastra el Layer
para que quede debajo del Layer menu.
9. En el Layer ventanas, dibuja un rectángulo con un relleno degradado de
gris oscuro a gris claro, de 552 px de ancho por 366 px de alto. Coloca
el rectángulo en las coordenadas 201, 112. Este rectángulo servirá para
desplegar la información de cada zona del sitio Web.
10. Convierte el nuevo rectángulo a MovieClip con su punto de registro en el
centro. Dale el nombre info.
11. En el Layer ventanas inserta Keyframes en los siguientes cuadros:
Para la información de portafolio: 19, 29 y 39
Para la información de contacto: 69, 79 y 89
Para la información de biografía: 109, 119 y 129

Diseño Multimedia 99
 Elimina el contenido del Layer ventanas que quede fuera de los tres
rangos anteriores. Observa la figura:

12. Para que sean un poco diferentes en cada sección, selecciona la instancia
que está en el Keyframe 79 del Layer ventanas y utiliza el Panel de
propiedades para aplicarle un efecto de Color tipo tinte, muy sutil al
5%. Elige algún color vivo. Haz lo mismo para aplicarle un Tinte de otro
color a la instancia que está en el Keyframe 119 del Layer ventanas.

13. Para que el cuadro de información aparezca y desaparezca sutilmente

cuando se entre a cada sección, crea un MotionTween entre los Keyframes
19 y 29, que haga que el cuadro se vea de transparente a opaco. Crea
otro MotionTween entre los Keyframes 29 y 39, que haga que el cuadro
se vea de opaco a transparente (necesitarás crear un nuevo Keyframe
final en el cuadro 29).
EVALUACIÓN

Repite el efecto para el rango 69 – 79 – 89 y para el rango 109 – 119

– 129.
14. Para terminar vamos a asignar a los botones del menú, las acciones
que harán que la película navegue de una etiqueta a otra. Empieza por
asignar el siguiente código al MovieClip portafolio_mc, dentro del
evento release.
_root.gotoAndPlay(“portafolio”);

100
 EVALUACIÓN
15. Asigna la instrucción de navegación necesaria a los MovieClips
contacto_mc y biografia_mc, para que lleven a los keyframes
correspondientes.
16. Prueba la película. Al hacer clic en cada uno de los botones, debes ver que
aparece suavemente el rectángulo de información. Puedes comprobar
que se trata del rectángulo correcto gracias al tinte de color diferente de
cada sección. Verifica que has logrado este objetivo y guarda el archivo
como [Link]

Actividad 05. Programando el botón de cerrar

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo [Link] que creaste en la actividad anterior. Crea

un nuevo Layer y dale el nombre “cerrar”. Colócalo por encima del Layer
ventanas. En el nuevo Layer inserta dos Keyframes a partir del cuadro
29, dos Keyframes a partir del cuadro 79 y dos Keyframes a partir del
cuadro 119.
2. Selecciona el cuadro 29 del Layer cerrar y arrastra desde la biblioteca el
símbolo “cerrar” al escenario. Colócalo en las coordenadas 733, 115.
3. Directamente en el escenario copia la instancia del símbolo cerrar al
portapapeles con <Ctrl+C>y pégala en los Keyframes 79 y 199 usando
<Shift+Ctrl+V>. Esta combinación de teclas para pegar, se usa para
que las copias queden exactamente en las mismas coordenadas que el
original.

4. Asigna las siguientes instrucciones a la instancia del símbolo “cerrar” que

se encuentra en el cuadro 29:
on (release) {
_parent.portafolio_mc.muevey(266,5);
_parent.contacto_mc.muevey(286,5);
_parent.biografia_mc.muevey(306,5);
_root.gotoAndPlay(“salida1”);
}

Diseño Multimedia 101

 Estas instrucciones harán que los botones del menú regresen al centro y que
la película vaya al rango de salida de la primera sección.
5. De forma similar asigna las instrucciones correspondientes a las instancias
del símbolo “cerrar” que se encuentran en los cuadros 79 y 199 del Layer
cerrar. Prácticamente lo único que cambia es la etiqueta del cuadro al
que tiene que saltar la película para mostrar la secuencia de salida de
cada sección.
6. Prueba la película y verifica que cuando presiones el botón de cerrar en
cualquier sección, los botones del menú se acomodan en el centro y la
ventana de información desaparece suavemente.
Verifica que has logrado este objetivo y guarda el archivo como
[Link]

Actividad 06. Asignando contenido a contacto

Fecha entrega Comentarios y necesidades % de éxito

EVALUACIÓN

1. Abre el archivo [Link] que creaste en la actividad anterior.

Crea un nuevo Layer que se llame “información” justo encima del Layer
ventanas. Inserta en el nuevo Layer Keyframes en los cuadros 79 y 80.
2. En el Keyframe 79 del Layer información, crea campos de texto estático
para introducir la información de contacto que desees como domicilio y
teléfonos, entre otros.
3. Para que un texto estático sirva de vínculo a una dirección de correo,
usa en el Panel de propiedades el parámetro URL link. Los correos se
introducen de la siguiente forma:
[Link] considerando que puedes escribir la dirección que
quieras.

102
 EVALUACIÓN
4. Prueba la película y revisa que aparece la información de contacto.
Verifica que has logrado este objetivo y guarda el archivo como
[Link]

Actividad 07. Asignando contenido a biografía

Fecha entrega Comentarios y necesidades % de éxito

1. En la carpeta Sitio Web de tu CD de trabajo o carpeta de actividades

se encuentra un archivo de texto llamado [Link]. Este archivo
contiene la historia de la vida de un famoso pintor y se le han agregado
algunas etiquetas html para darle formato. Copia el archivo a la carpeta
donde has estado trabajando con este proyecto. Es importante que quede
en la misma ubicación que tu archivo de Flash.
2. Abre el archivo [Link] que creaste en la actividad anterior. En
el Layer información, inserta Keyframes en los cuadros 90 y 119.
3. En el Keyframe 90 del Layer información, crea un campo de texto dinámico
con fuente Arial de 11 puntos en color blanco. El campo de texto debe
medir aproximadamente 285 X 300 píxeles y estar en las coordenadas
250,125. Asígnale el nombre de instancia biografia_txt, para poder
identificarlo en la programación posterior.

Diseño Multimedia 103

 4. En el Layer acciones, selecciona el cuadro 90 y abre el Panel de acciones
para asignarle el siguiente código. Hemos indicado con comentarios para
qué sirve cada una de las instrucciones:
//indica a Flash cómo mostrar acentos y símbolos internacionales
[Link]=true;
// indica que el campo de texto debe interpretar HTML
biografia_txt.html=true;
//crea un objeto llamado carga que servirá para cargar variables
carga = new LoadVars ();
//carga el contenido del archivo en el objeto carga
[Link](“[Link]”);

5. Ahora en el cuadro 119 del Layer acciones agrega este código:

//pone en el campo de texto lo que se cargó en el objeto carga
biografia_txt.htmlText=[Link];
stop();

Observa que la instrucción stop que ya se tenía, simplemente se recorrió

debajo de las nuevas instrucciones.
6. Prueba la película y entra a la sección de biografía. Si has realizado todo
correctamente, el contenido del archivo de texto externo debe aparecer
correctamente en el campo de texto. Revisa que has cumplido este
objetivo parcial antes de continuar.
7. Como el texto es más largo que lo que el campo puede contener, vamos
a agregar unos botones de desplazamiento. Selecciona el cuadro 119 del
Layer cerrar y arrastra desde la biblioteca al escenario el símbolo scroll.
Ubícalo en la coordenada 545,125.
Sin cambiar de cuadro, arrastra una segunda instancia del mismo símbolo
y colócala en la coordenada 545,145. Utiliza el comando Menú Modify/
Transform/Flip vertical, para que la flecha de este botón quede
apuntando en la dirección opuesta al otro.
EVALUACIÓN

scroll1_btn

scroll2_btn

Renombra estas dos nuevas instancias como scroll1_btn y scroll2_

btn, respectivamente.
8. Selecciona el botón scroll1_btn y abre su Panel de acciones. Asígnale
el siguiente código:
on (release) {
biografia_txt.scroll --;
}

104
 EVALUACIÓN
9. Recuerda que el doble signo menos indica que un valor decrementa en
una unidad. En este caso el método scroll del campo de texto, disminuirá
en uno cada vez que se haga clic sobre el botón.
Selecciona el botón scroll1_btn y abre su Panel de acciones. Asígnale
el siguiente código:
on (release) {
biografia_txt.scroll ++;
}
10. Recuerda que el doble signo más indica que un valor incrementa en una
unidad. En este caso el método scroll del campo de texto aumentará en
uno cada vez que se haga clic sobre el botón.
Prueba la película y verifica el funcionamiento de los botones de
desplazamiento de texto. Verifica que has logrado este objetivo y guarda
el archivo como [Link]

Actividad 08. Asignando contenido a portafolio

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo [Link] que creaste en la actividad anterior. Crea

Keyframes en los cuadros 29 y 30 del Layer información.
2. Importa a la biblioteca las 12 imágenes que se encuentran en la carpeta
Sitio Web de tu CD de trabajo o carpeta de actividades. Los nombres de
las imágenes son:

Versiones miniatura Versiones grandes

cuadro1_A cuadro1_B
cuadro2_A cuadro2_B
cuadro3_A cuadro3_B
cuadro4_A cuadro4_B

cuadro5_A cuadro5_B
cuadro6_A cuadro6_B

Diseño Multimedia 105

 3. Selecciona el cuadro 29 del Layer información y ve arrastrando de la
biblioteca las imágenes miniaturas para acomodarlas en el escenario.
Puedes facilitar el trabajo si ocultas el Layer menu temporalmente, pero
revisa que las imágenes queden en el Layer información.

Utiliza los comandos de alineación Menú Modify/Align para distribuir

y ordenar adecuadamente las miniaturas sobre el rectángulo gris como
se muestra:

4. Selecciona en el escenario la primera miniatura y utiliza la tecla <F8> para

convertirla en símbolo del tipo botón. Dale al botón el nombre cuadro1.
EVALUACIÓN

Repite el mismo procedimiento para convertir en botones todas las

miniaturas que están en el escenario.
5. El siguiente paso es convertir en MovieClips todas las imágenes grandes.
Hay varias formas de hacerlo, pero lo más sencillo es apoyándote del
escenario. Arrastra al escenario la primera imagen grande (cuadro1_B)
y utiliza la tecla <F8>. Dale al MovieClip el mismo nombre que tiene la
imagen, revisa que el punto de registro sea el centro y además marca la
casilla Export for ActionScript.

106
 EVALUACIÓN
Deja todas las demás opciones como aparecen.

Recuerda marcar
esta casilla

Una vez creado el MovieClip, bórralo del escenario pues sólo nos interesa
tenerlo en la biblioteca de símbolos.
Convierte de la misma forma todas las imágenes grandes a MovieClips. No
olvides marcar en todas la opción Export for ActionScript que servirá
para poder llamarlas desde la biblioteca con programación.
6. Selecciona la primera miniatura en el escenario (que ahora es un botón)
y en el Panel de acciones asígnale el siguiente código:
on(rollOver){
[Link](“grande_mc”,100);
grande_mc.attachMovie(“cuadro1_B”, “G”,100,{_x:470, _y:280});
}

on (rollOut){
grande_mc.unloadMovie();
}

Este código hará que al pasar el ratón sobre la miniatura (rollOver),

la imagen grande se cargue en un nuevo MovieClip vacío llamado
grande_mc. El MovieClip grande_mc se crea con la instrucción
createEmptyMovieClip que lleva dos parámetros: el nombre que
queremos dar al nuevo Movie Clip y el nivel en que será creado. Al elegir
el nivel 100, nos aseguramos de que no interfiera con ningún objeto ya
existente en la película.
El método attachMovie sirve para adjuntar al MovieClip grande_mc,
un símbolo de la biblioteca, en este caso el MovieClip cuadro1_B. La
instrucción tiene varios parámetros: primero el nombre del símbolo que
queremos adjuntar, después un identificador cualquiera (en este caso
se usó simplemente la letra G), luego el nivel en que quedará el objeto
(nuevamente se eligió el nivel 100) y por último las coordenadas en que
se desea ubicar.
7. Prueba la película y entra a la sección de portafolio. Pasa el puntero del
ratón sobre la primera miniatura. Si has realizado todo correctamente
se mostrará la imagen grande del primer cuadro y desaparecerá cuando
el ratón abandona la miniatura. Revisa que has cumplido este objetivo
parcial antes de continuar.

Diseño Multimedia 107

 8. De forma similar, asigna el código a todas las demás miniaturas. En cada
caso simplemente debes sustituir el nombre del MovieClip a adjuntar
como “cuadro2_B”,”cuadro3_B”, etcétera. Todo lo demás se conserva
idéntico.
9. Prueba la película y verifica que todas las miniaturas muestran la versión
del cuadro en grande. Verifica que has logrado este objetivo y guarda el
archivo como [Link]

Actividad 09. Detallando el sitio final

Fecha entrega Comentarios y necesidades % de éxito

Detalla el sitio final para darle una mejor imagen. Puedes incluir entre otras
cosas:

Una imagen de fondo

Un título o mensaje para el sitio
EVALUACIÓN

Cambios en la paleta de colores

Música de fondo general o para cada sección
Efectos de animación para el portafolio (que los cuadros aparezcan
lentamente o con movimiento), usando las funciones muevex, muevey
y alfa.

Publica la película terminada para su distribución a través de Internet. Si es

posible, coloca los archivos necesarios en un servidor Web para que esté
disponible en cualquier navegador en la red.

Recuerda que debes incluir los archivos externos (.as y .txt) y todos deben
estar en la misma ubicación.

108
 EVALUACIÓN
Proyecto de Integración 3
El juego de la galería de tiro

La programación del juego de la galería de tiro te permitirá integrar todos

los conocimientos que has adquirido en el manejo de Flash. Aprenderás y
pondrás en práctica todos los procesos involucrados en la creación de un juego,
como la planeación, el diseño de arte, creación de interfaz, programación y
depuración.

Antes de iniciar con la primera actividad, es importante que comprendas

perfectamente los objetivos y reglas del juego. En la escena principal del
juego se ve una galería de tiro de feria, con patos de metal que cruzan la
pantalla. El encargado de la galería (el tendero) cruza por enfrente de los
patos a una velocidad aleatoria.

En forma simple, el objetivo es disparar municiones a todos los patos de metal

que se desplazan por el área de juego, sin pegarle al tendero. El movimiento
de la mirilla de tiro se hace con el ratón y el clic se usa para disparar.

Por cada pato que tires obtienes 1,000 puntos, pero si le das al tendero
pierdes 500 puntos. El juego avanza por rondas. En cada ronda tienes 5 tiros.
Para pasar a la siguiente ronda debes alcanzar un puntaje mínimo, múltiplo de
4000, como indica la siguiente tabla:

Para pasar a la ronda necesitas acumular:

1 4,000 puntos
2 8,000 puntos
3 12,000 puntos

4 16,000 puntos

5 20,000 puntos
6 24,000 puntos
etcétera etcétera

En cada ronda aumenta la velocidad de los patos, incrementando así la dificultad

del juego. El juego termina cuando no se alcanzan los puntos suficientes para
pasar de ronda.

Puedes ver el juego terminado [Link] en la carpeta ShootOut de tu

CD de trabajo o carpeta de actividades.

Diseño Multimedia 109

 Actividad 01. Creando un pato

Fecha entrega Comentarios y necesidades % de éxito

1. Abre en Flash la película [Link] que se encuentra en la carpeta

ShootOut de tu CD de trabajo o carpeta de actividades. Esta película
tiene un único layer y un solo cuadro con el diseño de fondo del juego.
Abre la biblioteca y comprueba que existen algunos símbolos, que serán
los que usarás en las actividades.
2. Como en este juego trabajaremos con muy pocos frames, será más
cómodo visualizar la línea de tiempo en su versión con cuadros grandes.
Elige la opción Large del menú de control que está en el extremo superior
derecho de la línea de tiempo.
EVALUACIÓN

3. Directamente en la esquina inferior izquierda de la biblioteca de símbolos,

presiona el botón New Symbol. Dale al nuevo símbolo el nombre pato y
define el comportamiento de MovieClip.

110
 EVALUACIÓN
4. Al presionar el botón OK entrarás al modo de edición del nuevo Movie
Clip. El Movie Clip tiene su propia línea de tiempo, que por ahora consta
de un solo layer con un solo frame vacío. Renombra el layer existente
como pato e inserta keyframes (Menú Insert/Timeline/Keyframe o
tecla <F6>) en los cuadros 1, 2 y 3 de este layer. Observa la figura:

línea de tiempo del

símbolo pato

5. De la biblioteca arrastra el símbolo de patoUp hacia el área de trabajo,

asegurándote que quede en el frame 1. Mueve la figura para que su base
quede alineada con la pequeña cruz que aparece al centro del área de
trabajo de Flash.
6. Para terminar de detallar la figura vamos a aplicar color al pico, la cabeza
y al pecho del pato. Selecciona la herramienta Brush (Brocha) y en la
parte inferior del Panel de herramientas, en la sección de opciones
de las herramientas, selecciona el modo Paint Inside. En este modo, la
brocha pinta únicamente dentro de las áreas en las que se aplica. Utiliza
un grosor y color apropiados y pinta las sombras como se muestra en
el ejemplo. Abre el símbolo y utiliza la herramienta Paint Bucket Tool
(Cubeta) y/o el Panel de propiedades para darle color al pato.

7. Cuando tu primera imagen esté bien detallada, selecciónala con la

herramienta de selección de Flash y cópiala al portapapeles. Después
selecciona en la línea de tiempo el keyframe 2 y pega la imagen utilizando
las teclas <Ctrl+Shift+V> o el Menú Edit/Paste in Place, para
asegurarte que la copia queda exactamente en la misma posición que el
original.

Diseño Multimedia 111

 8. Ahora tienes la misma imagen en los keyframes 1 y 2 del Movie Clip.
Usaremos el keyframe 2 para simular el instante en que un tiro le pega
al pato, por lo que sólo hay que agregar el efecto de golpe. Colorea
el símbolo de chispas utilizando colores amarillo y naranja y después
arrastra el símbolo sobre el pato como muestra la figura.

Keyframe 2 Keyframe 3
9. Ahora selecciona el keyframe 3 de la línea de tiempo del Movie Clip, que
usaremos para mostrar el pato caído (arrastra el símbolo de patoDown al
área de trabajo, asegúrate de alinear la figura a la base ayudándote de la
cruz del centro). Abre el símbolo patoDown y dale detalles de la misma
manera que hiciste con el pato en posición normal.
10. Selecciona el keyframe 2 en la línea de tiempo y utiliza el Panel de
propiedades para asignar el sonido a este frame.
EVALUACIÓN

11. Para que cuando tires el pato, permanezca un tiempo así antes de
levantarse de nuevo, selecciona el cuadro 6 en la línea de tiempo del
pato e inserta un frame con Menú Insert/Timeline/Frame o la tecla
<F5>. Prueba de nuevo el movimiento con la tecla <Enter>.
12. Ya casi está terminado el pato con su efecto de caída, pero si colocaras este
Movie Clip en la película tal y como está, verías que corre continuamente
dando el efecto de caerse y levantarse una y otra vez. Es necesario agregar
un poco de código. Inserta un nuevo layer y nómbralo Acciones. En el
nuevo layer inserta un keyframe en el cuadro 2. Selecciona el keyframe
1 del nuevo layer y abre el Panel de acciones para insertar la acción
stop();.

112
 EVALUACIÓN
13. Regresa a la línea de tiempo principal presionando el botón Scene1 en
la parte superior de la línea de tiempo. Comprueba que el Movie Clip
pato ha quedado en la biblioteca de símbolos. Es muy fácil probar el
funcionamiento del nuevo Movie Clip. Arrastra el pato de la biblioteca de
símbolos a cualquier lugar del escenario. Selecciona la instancia sobre
el escenario y abre el Panel de acciones para introducir el siguiente
código. Asegúrate que lo estás asignando al Movie Clip.
on (press){
[Link]();
}
Estas instrucciones indican que cuando se haga clic sobre el objeto, la
línea de tiempo propia del Movie Clip inicia su reproducción. Recuerda
que la palabra this se utiliza para hacer referencia al mismo objeto que
contiene las instrucciones.
14. Prueba la película con <Ctrl+Enter>. Si has realizado bien los pasos
de esta actividad, al hacer clic sobre el pato en el escenario, éste se cae
y después de un instante se levanta mientras se escucha el efecto de
golpe.

Si has logrado este objetivo, guarda los avances en tu carpeta personal,

con el nombre [Link]. Utilizarás esta película en la siguiente
actividad.

Actividad 02. Preparando el escenario

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo terminado de la actividad anterior. Elimina el pato que

colocaste en el escenario para probar esa actividad y asegúrate que sólo
queda el fondo sobre el escenario.
2. Selecciona el frame 4 en la línea de tiempo e inserta un frame con el Menú
Insert/Timeline/Frame. Esto simplemente alarga la duración del fondo
a 4 cuadros. Bloquea el layer Fondo para que ya no se modifique.

Diseño Multimedia 113

 3. Inserta un nuevo layer y nómbralo Patos. Inserta un tercer layer y nómbralo
Acciones. En el layer Acciones, inserta un keyframe en los cuadros 1, 2, 3
y 4. Utiliza el Panel de propiedades para etiquetar cada keyframe del
layer Acciones como se indica a continuación:
Keyframe 1: inicio
Keyframe 2: instrucciones
Keyframe 3: juego
Keyframe 4: pierdes
De ahora en adelante nos referiremos a cada keyframe por su nombre.
Por ejemplo, si se te pide seleccionar el frame pierdes del layer Acciones,
debes seleccionar el cuadro 4 de ese layer.

4. Selecciona el keyframe juego (cuadro 3) del layer Acciones y en su Panel

de acciones agrega la instrucción stop(); para detener en este punto la
reproducción de la película.
5. Selecciona el frame juego del layer Patos e inserta un keyframe con el
Menú Insert/Timeline/Keyframe o la tecla <F6>. Con este keyframe
seleccionado en la línea de tiempo, arrastra de la biblioteca al escenario
EVALUACIÓN

una instancia del símbolo pato.

6. Escala la imagen del pato y acomódala sobre el fondo en un extremo de
la línea que representa el primer carril. Selecciona la instancia y abre el
Panel de acciones para asignarle el código que reproduce su línea de
tiempo interna cuando se hace le da un clic. Revisa que aplicas el código
al objeto pato que está sobre el escenario.

114
 EVALUACIÓN
7. Después utiliza el Menú Edit/Duplicate para obtener 4 copias del pato.
Acomódalas sobre el fondo como se muestra en la figura, de modo que
ocupen todo el ancho de la escena. Trata de dejar 80 píxeles entre pato
y pato. Puedes mostrar las reglas con Menú View/Rulers para guiarte
mejor.

8. Selecciona los 5 patos en el escenario y alinea sus bases con el Menú

Modify/Align/Bottom. Aún con los patos seleccionados, utiliza el
Menú Modify/Align/Distribute Widths para que las figuras queden
igualmente espaciadas entre sí. En este punto puedes probar la película
y comprobar que los patos (por ahora estáticos) pueden tirarse haciendo
un clic sobre ellos. Comprueba este objetivo parcial antes de continuar.
9. Ahora, vamos a programar una ingeniosa forma de simular el movimiento
continuo de los patos sobre el carril. Antes de realizar cada paso analiza
y entiende lo que se va a hacer. Vas a crear un símbolo que contenga
el primer grupo de 5 patos y que se llamará simplemente patos. Para
ello, primero selecciona los 5 patos sobre el escenario y conviértelos a
Movie Clip con el Menú Modify/Convert to Symbol. Dale al símbolo el
nombre patos, como se muestra en la figura.

Ahora en el escenario hay una instancia del símbolo patos. Utiliza el

Panel de propiedades para darle a esta instancia el nombre patos_
mc. Recuerda que nombrar las instancias es muy importante, porque los
nombres se utilizan en la programación.
10. Después vas a crear otro Movie Clip con el nombre tiradepatos, que
contenga al Movie Clip patos_mc. Simplemente, selecciona la instancia
patos_mc que ya está en el escenario y utiliza de nuevo el Menú
Modify/Convert to Symbol, dando al nuevo símbolo el nombre
tiradepatos. Para evitar confusiones, selecciona la nueva instancia y dale,
en el Panel de propiedades, el nombre tiradepatos_mc.

Diseño Multimedia 115

 En este punto tendrás entonces 3 Movie Clips anidados: El Movie Clip
tiradepatos_mc, que contiene al Movie Clip patos_mc, que contiene 5
instancias del Movie Clip pato.
11. Te preguntarás para qué hemos creado el Movie Clip tiradepatos_mc,
que contiene al Movie Clip patos_mc. La razón es que usaremos código
para duplicar el Movie Clip interno dentro del Movie Clip que lo contiene.
De esta forma, tiradepatos_mc servirá como un contenedor, dentro del
cual existirá 2 veces patos_mc.

Selecciona la instancia tiradepatos_mc que está en el escenario. Abre el

Panel de acciones de esta instancia y asigna el siguiente código, revisando
-como siempre- que lo estás aplicando al objeto adecuado (tiradepatos_
mc):
onClipEvent (load) {
patos_mc.duplicateMovieClip(“patos2_mc”,100);
patos2_mc._x = patos_mc._x+patos_mc._width+80;
}
Analicemos este código. Como las instrucciones están dentro del handler
del evento load, se ejecutarán tan pronto como el objeto tiradepatos_mc
aparezca en el escenario. La primera instrucción indica que el objeto patos_
mc (que está dentro del objeto en que estás escribiendo el código) se debe
duplicar. La copia tendrá el nombre patos2_mc y tendrá un tamaño del
100% del original, es decir, el mismo tamaño.
La segunda instrucción indica que la coordenada X (posición en el eje
horizontal) del objeto patos2_mc (la copia), será igual a la coordenada X del
objeto patos_mc más el ancho de este objeto más 80 píxeles. Los 80 píxeles
EVALUACIÓN

se suman para que el último pato del primer grupo no quede pegado al primer
pato del segundo grupo.

12. Prueba la película con <Ctrl+Enter>. Ajusta el tamaño horizontal

de la ventana de modo que, si has nombrado bien las instancias y
escrito correctamente las instrucciones, debes ver que el Movie Clip
tiradepatos_mc contiene ahora 2 veces a patos_mc, es decir, verás
10 patos en el escenario. Como todos provienen del objeto original,
comprueba que puedes hacer clic sobre ellos para tirarlos.
13. Guarda la película probada en tu carpeta personal, con el nombre
[Link]. Esta película se requiere en la siguiente fase del
proyecto.

116
 EVALUACIÓN
Actividad 03. Moviendo la tira de patos

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo de la actividad anterior. En esta fase del proyecto de la

galería de tiro vamos a hacer que se mueva la tira de patos que creaste
en esa actividad. Selecciona el Movie Clip tiradepatos_mc que está en
el frame juego del layer Patos. No escribas código en este punto. Sólo
comprende lo que se va a realizar.
Recuerda que el Movie Clip tiradepatos_mc duplica dentro de sí mismo
al Movie Clip patos_mc, dando como resultado una tira de 10 patos
en el escenario. Ahora hay que mover horizontalmente por el escenario
al Movie Clip tiradepatos_mc, de derecha a izquierda. Cuando los
primeros 5 patos hayan salido de escena, colocaremos nuevamente a
tiradepatos_mc en su posición de partida:

2. Primero, necesitamos guardar la posición de partida en una variable que

llamaremos inicio. Dentro del handler del evento load de la instancia
tiradepatos_mc, agrega la siguiente instrucción. La nueva línea se
muestra en negritas.
onClipEvent (load) {
patos_mc.duplicateMovieClip(“patos2_mc”,100);
patos2_mc._x = patos_mc._x+patos_mc._width+80;
inicio=this._x;
}
3. Para que tiradepatos_mc se mueva continuamente, escribiremos el
código que cambia su posición X dentro del handler del evento enterFrame
de este objeto. En el Panel de acciones agrega el siguiente código. Las
nuevas instrucciones se muestran seleccionadas en la figura:

Diseño Multimedia 117

 Estas simples líneas indican que la posición X del Movie Clip donde se
escribe el código (por eso se usa la palabra this) disminuirá su valor en
10 unidades constantemente, moviéndose a la izquierda en consecuencia.
Quizás te preguntes por qué debería moverse la tira de patos si se colocó
un stop(); en el cuadro 3 de la línea de tiempo principal y la película está
detenida. La razón es que, aunque la película en efecto está detenida,
el Movie Clip tiradepatos_mc en el escenario se sigue reproduciendo
porque su propia línea de tiempo no está detenida. Por lo tanto, el Movie
Clip continúa disparando su evento enterFrame constantemente.
Si lo deseas, puedes probar la película en este punto y comprobar el
movimiento de la tira de patos. Hasta ahora, no hemos especificado
ningún límite, por lo que los patos seguirán moviéndose a la izquierda
hasta perderse.
4. Con el fin de controlar posteriormente la velocidad del movimiento de
la tira de patos, en vez de utilizar un valor fijo usaremos una variable
llamada velocidad. Inicialmente, la variable velocidad tendrá un
valor 10, pero más adelante se incrementará en el juego. Agrega en
el handler del evento load de tiradepatos_mc la instrucción para
EVALUACIÓN

inicializar la variable. Cambia también el valor de 10 en la instrucción del

desplazamiento, por la variable velocidad. Las nuevas instrucciones se
muestran en negritas:
onClipEvent (load) {
patos_mc.duplicateMovieClip(“patos2_mc”,100);
patos2_mc._x = patos_mc._x+patos_mc._width+80;
inicio=this._x;
velocidad=10;
}
onClipEvent (enterFrame) {
this._x-=velocidad;
}
5. Ahora, hay que agregar un condicional que verifique si la tira de patos se
ha desplazado el equivalente al ancho de un Movie Clip patos_mc, en
cuyo caso debe regresar a la posición inicial (al valor de la variable inicio
que se registró en el evento load). Observa la figura:

118
 EVALUACIÓN
Dentro del handler del evento enterFrame, después de la instrucción de
movimiento, agrega las siguientes líneas. Las nuevas instrucciones se
muestran en negritas:
onClipEvent (enterFrame) {
this._x-=velocidad;
if (this._x<= (inicio-patos_mc._width)){
this._x=inicio+80-velocidad;
}
}
Prueba la película. Si has escrito bien todo el código, verás un movimiento
continuo de los patos dentro del área de juego.
6. Regresa a la escena principal y selecciona la instancia tiradepatos_mc.
Duplícala con el Menú Edit/Duplicate. En el Panel de propiedades
dale a la copia el nombre tiradepatos2_mc. Es muy importante que
cambies el nombre de la instancia correctamente. Invierte la nueva tira de
patos con el Menú Modify/Transform/Flip Horizontal y acomódala
sobre el fondo en la posición correcta.

7. Para que la segunda tira de patos se mueva en la dirección opuesta, abre

su Panel de acciones y realiza los 3 cambios necesarios a las dos líneas
que se indican en negritas.
onClipEvent (enterFrame) {
this._x+=velocidad;
if (this._x>= (inicio+patos_mc._width)){
this._x=inicio+80-velocidad;
}
}

8. Prueba la película. Debes comprobar que las dos tiras de patos se mueven
de forma continua en direcciones opuestas y que el movimiento parece
sin fin. Si has logrado este objetivo puedes guardar el avance con el
nombre [Link] y pasar a la siguiente actividad.

9.

Diseño Multimedia 119

 Actividad 04. El tendero

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo de la actividad anterior. Hasta este punto, tienes los

blancos desplazándose por el escenario. Incluso puedes hacer clic sobre
cualquiera para ver como se caen. Antes de agregar instrucciones para
llevar un puntaje, vamos a crear al tendero que cruza constantemente
por la galería para dificultar el juego.
2. Directamente en la biblioteca de símbolos de Flash, en la esquina inferior
izquierda, presiona el botón New Symbol. Dale al nuevo símbolo el
nombre tendero y define el comportamiento de Movie Clip.

Al presionar el botón OK entrarás al modo de edición del nuevo Movie

EVALUACIÓN

Clip. El Movie Clip tiene su propia línea de tiempo, que por ahora consta de
un solo layer con un solo frame vacío. Renombra el layer existente como
tendero e inserta un keyframe (Menú Insert/Timeline/Keyframe) en
los cuadros 1 y 2 de este layer. Observa la figura:

3. Abre el símbolo del tendero1 de la biblioteca y utiliza la herramienta

Paint Bucket Tool (cubeta) y/o el Panel de propiedades para darle
color. Con la herramienta Brush (brocha), en su modo Paint Inside,
aplica sombras para detallar la figura. Haz lo mismo con el símbolo
tendero2.

120
 EVALUACIÓN
Una vez que tengas detalladas las
imágenes, selecciona de la biblioteca
el Movie Clip de tendero. Selecciona
el keyframe1 y arrastra el símbolo del
tendero1 al área de trabajo. Mueve la
figura para que quede alineada con la
pequeña cruz que aparece al centro
del área de trabajo.

4. Ahora selecciona el keyframe 2

de la línea de tiempo del Movie
Clip, que usaremos para mostrar
al tendero adolorido. Arrastra de
la biblioteca la silueta del tendero
en esta posición (tendero2) al
área de trabajo de Flash. Centra
la figura ayudándote de la cruz
guía.

5. Para alargar la duración del tendero en su segunda posición, selecciona

el cuadro 5 en la línea de tiempo e inserta un frame con Menú
Insert/Timeline/Frame. Prueba de nuevo el movimiento con la tecla
<Enter>.
6. Selecciona el keyframe 2 en la línea de tiempo y utiliza el Panel de
propiedades para asignar el sonido [Link] a este frame.
7. Ya casi está terminado el tendero con su efecto de dolor, pero si colocaras
este Movie Clip en la película tal y como está, correría continuamente su
propia línea de tiempo. Inserta un nuevo layer y nómbralo Acciones. En el
nuevo layer, inserta un keyframe en el cuadro 2. Selecciona el keyframe
1 del nuevo layer y abre el Panel de acciones para insertar la acción
stop();.

Diseño Multimedia 121

 8. Regresa a la línea de tiempo principal presionando el botón [Scene1]
en la parte superior de la línea de tiempo. Comprueba que el Movie Clip
tendero ha quedado en la biblioteca de símbolos. Es muy fácil probar
el funcionamiento del nuevo Movie Clip. Crea primero un nuevo layer
en la línea de tiempo principal y nómbralo Tendero. El layer Tendero
debe quedar arriba del layer Patos, ya que nuestro personaje pasará por
enfrente de los patos durante el juego.

En el frame juego (cuadro 3) del layer Tendero, inserta un keyframe. Con

este nuevo keyframe seleccionado, arrastra al tendero de la biblioteca de
símbolos a cualquier lugar del escenario. Selecciona la instancia sobre el
escenario y nómbrala tendero_mc. Luego abre el Panel de acciones
para introducir el siguiente código. Asegúrate que lo estás asignando al
MovieClip tendero_mc.
on (press){
[Link]();
}
9. Prueba la película con <Ctrl+Enter>. Si has realizado bien los pasos de
esta actividad, al hacer clic sobre el tendero en el escenario, éste se queja
y cambia de posición para regresar poco después a su estado original.
Si has logrado este objetivo, guarda los avances en tu carpeta personal,
EVALUACIÓN

con el nombre [Link]. Utilizarás esta película en la siguiente

actividad.

122
 EVALUACIÓN
Actividad 05. Moviendo al tendero

Fecha entrega Comentarios y necesidades % de éxito

1. Abre el archivo terminado de la actividad anterior. Ubica en la línea de

tiempo el frame juego del layer Tendero. Si es necesario, cambia el tamaño
del tendero en el escenario para que al pasar alcance a bloquear los patos
de arriba y los de abajo, sin que se vea desproporcionado. Alínealo con
el fondo para que parezca que pasa detrás del mostrador de la galería de
tiro, como se ve en esta figura:

2. Ahora hay que definir el movimiento de este Movie Clip. Antes que nada,
revisa en el Panel de propiedades que la instancia del tendero en el
escenario tiene el nombre tendero_mc. Nunca olvides la importancia
de nombrar las instancias de símbolos que haya en el escenario. Una vez
nombrada la instancia, hay que ubicarla en su punto de partida, fuera del
área de juego. Como el área de juego es de 640 píxeles, puedes usar el
Panel de propiedades para colocar al tendero en la coordenada X= 650
y así asegurarte que queda fuera.

Diseño Multimedia 123

 3. Antes de agregar el código de movimiento, trata de entender muy bien
lo que se quiere hacer. El código se agregará en el siguiente paso. En
el momento en que el tendero aparezca en la línea de tiempo (aunque
esté fuera del área de juego), hay que inicializar una variable llamada
velocidad. Al inicio del juego la velocidad del tendero será 20, pero en
cada recorrido que haga cambiará aleatoriamente.
Usaremos el evento enterFrame para mover continuamente la instancia
y revisar si ya recorrió toda el área de juego. El ancho del tendero es
aproximadamente 200 píxeles, por lo que podemos estar seguros que
ha cruzado el extremo izquierdo del escenario si su coordenada X es
menor que -250 píxeles. También, en el caso de que el tendero haya
completado un recorrido, se recalculará la velocidad de forma aleatoria.
En Action Script, la instrucción [Link]() se utiliza para generar
un número aleatorio entre 0 y 1. Si quisieras obtener un número aleatorio
entre 0 y un valor máximo dado, basta multiplicar [Link]()
por ese valor máximo. En nuestro caso, usaremos la instrucción Math.
random()*40 para generar un número aleatorio entre 0 y 40. Pero para
que la velocidad del tendero nunca sea menor a 20, sumamos este valor
en [Link]()*40 +20 para generar un número aleatorio entre
20 y 60.
4. Si has comprendido el paso anterior, agrega a la instancia tendero_mc
el siguiente código:
onClipEvent (load) {
velocidad=20;
}
onClipEvent (enterFrame) {
this._x-=velocidad;
if (this._x< -250){
velocidad=[Link]()*40+20;
this._x=650;
}
EVALUACIÓN

5. Prueba la película. La instancia tendero_mc debe cruzar de derecha a

izquierda hasta abandonar el área de juego. Después debe reaparecer
por la derecha avanzando a una velocidad diferente. Si lo deseas, puedes
modificar los valores en el código para ajustar la velocidad mínima o

124
 EVALUACIÓN
máxima como te parezca mejor. Prueba también que puedes hacer clic
sobre el personaje y ver su reacción.
6. Revisa que hayas alcanzado los objetivos de esta fase. Detalla y
corrige cualquier problema antes de continuar. Guarda la película como
[Link] para seguir a la próxima fase.

Actividad 06. Llevando el puntaje

Fecha entrega Comentarios y necesidades % de éxito

1. Abre la película revisada en la actividad anterior. En este punto debes

tener una agradable interfaz de juego, con patos móviles y la figura del
tendero que pasa frente a ellos continuamente. Sin embargo, el juego
no es divertido si no tiene un reto. Lo primero que harás será llevar el
puntaje del juego. Para ello, hay que crear un texto dinámico al que
se le asigna el valor de una variable. Cada vez que le das a un pato, la
variable se incrementa en 1,000 puntos y cada vez que le das al tendero
la variable baja 500 puntos. Empecemos a trabajar.
2. Inserta un nuevo layer y nómbralo Estatus. Para mayor facilidad ubica
este layer justo encima del layer Fondo. En el nuevo layer, selecciona
el frame juego (cuadro 3) e inserta un keyframe. Utiliza la herramienta
de texto para crear 3 textos estáticos en el escenario, con las palabras
“Puntos:”, “Ronda:” y “Tiros:”, respectivamente. Ubica estos textos en el
borde del mostrador de la galería, como se muestra en la figura:

3. A un lado del texto “Puntos:” inserta un texto dinámico, que posteriormente

usaremos para desplegar la puntuación del juego. Para que el texto
sea dinámico, al crearlo selecciona Dynamic text en el Panel de
propiedades. Después dale a este texto el nombre puntos_txt. Es
importante nombrar el texto para usarlo en la programación. De manera
similar, crea junto al texto “Ronda:” otro texto dinámico que debes
nombrar ronda_txt. Observa las siguientes figuras:

Diseño Multimedia 125

 4. Ahora hay que asignar código. El puntaje se guardará en una variable
global que llamaremos score. Recuerda que una variable global puede
reconocerse desde cualquier objeto y cualquier línea de tiempo, lo que
permitirá referirnos a ella desde un frame, desde un pato o desde el
tendero. Selecciona el frame juego del layer Acciones y abre el Panel
de acciones para agregar la instrucción que inicializa la variable global
score en 0. Esta instrucción se ejecutará cuando la película llegue a
este cuadro, es decir, cuando inicie el juego. Además, agrega una acción
que asigne al texto dinámico puntos_txt el valor de la variable score.
El contenido de un texto dinámico se define por medio de su propiedad
text, por lo tanto, las nuevas líneas quedan así:
_global.score=0;
puntos_txt.text= _global.score;
stop();
Prueba en este punto la película y comprueba que en el texto puntos_
txt aparece el valor inicial de la variable score, es decir, un cero.
5. Selecciona la instancia tendero_mc y abre su Panel de acciones.
Dentro del handler del evento press, agrega una instrucción que baje
en 500 el valor de la variable score. Si pones la instrucción en el evento
EVALUACIÓN

press, ocurrirá sólo cuando hagas clic sobre el personaje. Las nuevas
líneas están en negritas:
on (press){
[Link]();
_global.score -=500;
_root.puntos_txt.text =_global.score;
}
Observa que además de disminuir la variable score, se incluyó la acción
que asigna su valor al texto dinámico puntos_txt. Nota que se antepuso
la palabra _root al nombre del texto dinámico. Esto es necesario porque
el código se está creando dentro de un objeto (tendero_mc) y el texto
dinámico no está en la línea de tiempo de ese objeto, sino en la línea de
tiempo principal. La palabra _root siempre hace referencia a la línea de
tiempo principal.
6. Prueba nuevamente la película y revisa que el puntaje que se muestra
en el texto dinámico baja 500 puntos cada vez que haces clic sobre el
tendero. No sigas adelante hasta haber logrado este objetivo parcial.

126
 EVALUACIÓN
7. Ahora hay que aplicar un código similar a los patos. Recuerda que en el
escenario hay un Movie Clip llamado tiradepatos_mc, dentro del cual
está el Movie Clip patos_mc y dentro del cual están 5 instancias del
símbolo pato. El código que incrementa el puntaje cuando haces clic en
los patos debe asignarse a cada instancia del símbolo pato.
Para ello, haz doble clic sobre tiradepatos_mc para abrir el símbolo
y ver dentro patos_mc. Haz luego doble clic sobre patos_mc y se
abrirá este símbolo con cada instancia del símbolo pato en su interior.
Revisa que estás en el nivel adecuado observando los botones de la parte
superior de la línea de tiempo. La línea de tiempo que ves es la del último
símbolo abierto.

8. Selecciona el primer pato y abre su Panel de acciones. Agrega el código

que hará que la variable global score aumente 1,000 puntos cuando se
haga clic sobre el objeto. Incluye también la línea que actualiza el valor
del texto dinámico. Las nuevas líneas aparecen en negritas.
on(press){
[Link]();
_global.score +=1000;
_root.puntos_txt.text =_global.score;
}

Diseño Multimedia 127

 De manera similar, antes de regresar a la línea de tiempo principal, asigna
el mismo código a los demás patos contenidos en patos_mc. Sólo
necesitarás aplicar el código a los 5 primeros patos, ya que los demás
son copias.
9. Regresa a la escena principal y prueba la película. Si todo es correcto
debes ver un incremento de 1,000 puntos en el texto dinámico, cada que
haces clic sobre un pato (cualquiera). Revisa de nuevo que pierdes 500
puntos por cada tiro al tendero. Una vez cumplidos estos objetivos, guarda
la película como [Link] para pasar a la siguiente actividad.

Actividad 07. La mirilla

Fecha entrega Comentarios y necesidades % de éxito

1. Abre la película terminada de la actividad anterior. En esta fase del

proyecto de la galería vas a sustituir el puntero estándar del ratón por la
mirilla de tiro. La mirilla será un Movie Clip sobre el escenario y sólo se
requerirán dos acciones. Primero, harás que la mirilla se pegue al puntero
del ratón, de manera que ésta se mueva a donde muevas aquél. Después
se oculta el puntero estándar del ratón para que sólo se vea la mirilla.
EVALUACIÓN

2. Crea un nuevo layer y nómbralo Mirilla. Es importante que el layer Mirilla

quede arriba de los layers de los patos y del tendero, para que la mira
siempre esté al frente. Selecciona el frame juego (cuadro 3) del layer
Mirilla e inserta un keyframe. Para mejor control, bloquea todos los layers
excepto el de la mirilla y deja seleccionado el keyframe juego de este
último layer.

128
 EVALUACIÓN
3. Arrastra de la biblioteca el símbolo de mira hacia cualquier lugar sobre el
escenario. Si lo consideras necesario, cambia el tamaño de la mirilla para
que mida aproximadamente dos tercios de la altura de los patos.

4. Convierte la mirilla a Movie Clip con el Menú Modify/Convert to Symbol

o la tecla <F8>. Dale al nuevo símbolo el nombre mirilla y asegúrate que
eliges el punto central de registro, para que el centro del símbolo sea el
centro de la mirilla. Esto es importante ya que este centro será el punto
de disparo.

5. Lo que tienes ahora en el escenario es una instancia del nuevo Movie

Clip creado. Selecciónala y usa el Panel de propiedades para darle el
nombre mirilla_mc.
Ahora selecciona la instancia mirilla_mc en el escenario y abre su Panel
de acciones. Asigna al handler del evento load, las dos instrucciones
que se explicaron en el paso 1 de esta actividad. La primera acción hace
que la mirilla se pegue al puntero del ratón, de modo que se muevan
juntos. La segunda acción oculta el puntero del ratón.
onClipEvent (load) {
[Link](true);
[Link]();
}
Prueba la película y comprueba que el puntero original del ratón está
oculto. Además el Movie Clip mirilla_mc debe moverse con el ratón.
Prueba disparar a los patos. Cuando hayas logrado este primer objetivo
continúa con el siguiente paso.
6. Ahora vamos a agregar un sonido de disparo a la línea de tiempo de
la mirilla. Directamente en la biblioteca, haz doble clic sobre el símbolo
mirilla para ver su línea de tiempo, que por ahora tiene un solo layer y un
solo frame. Inserta un keyframe en el cuadro 2 de su línea de tiempo.

Asigna al keyframe 2 de la línea del tiempo del símbolo, el sonido de

[Link].

Diseño Multimedia 129

 7. En la línea de tiempo del símbolo de la mirilla inserta un nuevo layer
y nómbralo Acciones. Asigna al primer cuadro de este layer la acción
stop(); para que la reproducción interna de la mirilla se detenga en el
cuadro 1 y no se escuche el sonido normalmente.
8. Después de asignar la acción regresa a la escena principal y selecciona
la mirilla en el escenario. Abre su Panel de acciones para agregar el
siguiente código:
onClipEvent(mouseDown){
[Link]();
}

¿Qué es lo que acabas de hacer?

Cuando se presiona el botón del ratón ocurre el evento mouseDown en el

Movie Clip mirilla_mc. La instrucción [Link](); indica que se reproduzca
la línea de tiempo propia de este objeto, que es donde agregaste el sonido.
Si en este momento pruebas la película, debes comprobar que se escucha el
sonido de disparo siempre que haces un clic, ya sea que le des o no a los patos
o al tendero. Antes de continuar asegúrate de cumplir este objetivo. Guarda
tu archivo como [Link].
EVALUACIÓN

Actividad 08. Limitando los tiros y cambiando de ronda

Fecha entrega Comentarios y necesidades % de éxito

1. Abre la película terminada de la actividad anterior. Para que el juego sea

interesante hay que agregar un reto más. Al inicio del juego se tendrán
solamente 5 tiros disponibles. Cada que se hace un disparo se descuenta

130
 EVALUACIÓN
un tiro. Después de 5 disparos, si el puntaje que está en la variable global
score es igual o superior a 4,000 puntos, entonces el juego cambia de
ronda y se tienen nuevamente 5 tiros disponibles.
2. El juego continúa sólo si en cada ronda se alcanza un puntaje mínimo
múltiplo de 4,000, es decir, 4,000 en la ronda uno, 8,000 en la ronda dos,
12,000 en la ronda tres, etcétera. Notarás que el puntaje mínimo de la
ronda actual es igual a 4,000 multiplicado por el número de ronda.
Lo primero que harás será definir una nueva variable global llamada
ronda, que servirá para saber en qué nivel se está jugando. Inicialmente
tendrá el valor de 0. Selecciona el frame juego del layer Acciones y agrega
la línea que inicializa la variable y la línea que asigna su valor al texto
dinámico ronda_txt. Las nuevas instrucciones se muestran en negritas:
_global.score=0;
puntos_txt.text= _global.score=0;
_global.ronda=0;
ronda_txt.text= _global.ronda;
stop();
3. Ahora, vamos a crear un nuevo Movie Clip que muestre gráficamente, a
un lado del texto estático “Tiros:”, los tiros disponibles en la ronda actual.
Selecciona el frame juego del layer Estatus. Arrastra de la biblioteca el
símbolo esfera y colócala en el área de trabajo. Ahora duplica 4 veces
la esfera que copiaste al escenario y acomoda las 5 esferas como se
muestra en la figura. Utiliza el Menú Modify/Align/Vertical Center
para alinear las esferas y distribúyelas uniformemente con el Menú
Modify/Align/Distribute Widths.

4. Teniendo seleccionadas las 5 esferas, conviértelas a Movie Clip con la tecla

<F8> o el Menú Modify/Convert to Symbol. Dale al nuevo símbolo el
nombre tiros. Ahora tienes en el escenario una instancia de este nuevo
símbolo. Usa el Panel de propiedades para nombrar la instancia como
tiros_mc.
5. Haz doble clic sobre el símbolo para entrar a su línea de tiempo, que
inicialmente tiene un solo layer con un frame. Inserta un keyframe en el
cuadro 2 de esta línea de tiempo. Ahora tienes el mismo contenido en
los keyframes 1 y 2 de la línea de tiempo del símbolo tiros. El keyframe
uno servirá para mostrar los 5 tiros disponibles. Déjalo como está. En
el keyframe 2 se verán 4 tiros disponibles. Selecciona el keyframe 2 y
elimina la última esfera.

Diseño Multimedia 131

 Inserta un keyframe en el cuadro 3 de la línea de tiempo y elimina una
esfera más para mostrar 3 tiros disponibles. Después inserta un keyframe
en el cuadro 4 y deja sólo 2 esferas.

Inserta keyframes en los cuadros 5 y 6 para dejar una y ninguna esfera,

respectivamente. Presiona la tecla <Enter> varias veces para simular
cómo irán bajando los tiros disponibles.

6. Ahora bien, si dejas el Movie Clip de los tiros tal y como está, verías que
corre continuamente y no sólo cuando se dispara. Lo primero que debes
hacer es detener la reproducción interna del Movie Clip. Agrega un layer
y nómbralo Acciones. En el cuadro 1 del nuevo layer asigna la instrucción
stop(); para que inicialmente sólo se muestre el primer cuadro del Movie
EVALUACIÓN

Clip (5 tiros disponibles).

7. Para terminar de definir este Movie Clip, falta asignar las instrucciones
que deben ocurrir cuando se agotan los tiros. Inserta un keyframe en
el cuadro 6 del layer Acciones de la línea de tiempo del símbolo tiros.
Selecciona este nuevo keyframe y abre el Panel de acciones para
asignar código.
Sabemos que al agotarse los tiros hay incrementar en 1 el número de
ronda y mostrar el nuevo valor en el texto dinámico ronda_txt. Esto se
logra agregando las siguientes líneas:
_global.ronda +=1;
_root.ronda_txt.text=_global.ronda;
Observa que se antepuso la palabra _root al nombre del texto dinámico,
porque éste se encuentra en la línea de tiempo principal y no en la línea
de tiempo del Movie Clip donde estás escribiendo el código. Cuando se
agoten los tiros también hay que revisar si la puntuación del juego es
igual o mayor a 4,000 multiplicado por el número de ronda actual. Si
se alcanzó el puntaje mínimo de la ronda (_global.score>=_global.
ronda*4000), entonces hay que hacer dos cosas:

132
 EVALUACIÓN
a. Regresar al cuadro 1 de la línea de tiempo de los tiros, para mostrar
las 5 esferas disponibles.
gotoAndStop(1);
b. Incrementar la velocidad de las dos tiras de patos en 5 unidades:
_root.tiradepatos_mc.velocidad +=5;
_root.tiradepatos2_mc.velocidad +=5;
Si no (else) se alcanza el puntaje mínimo de la ronda, entonces el juego
termina. También es necesario regresar al cuadro 1 de la secuencia para
que cuando se cargue de nuevo el juego se vean las balas. El mensaje de
fin de juego estará en la línea de tiempo principal (_root), en el frame
etiquetado como “pierdes”. El código completo se muestra en la figura.
Asegúrate que se asigna al frame 6 del layer de Acciones del símbolo
tiros, es decir, al cuadro que representa que los tiros disponibles se han
agotado.

8. Para terminar de definir el Movie Clip de los tiros, vamos a agregar un

sonido al cuadro 1 de la línea de tiempo. Como el sonido se escuchará
cada que la línea de tiempo regrese al cuadro 1 (5 tiros disponibles),
será un indicador de que se ha cambiado de ronda. Para hacer esto,
asigna al cuadro 1 de la línea de tiempo del Movie Clip el sonido
[Link].

Diseño Multimedia 133

 9. Revisa bien el código y regresa a la escena principal. Ahora sólo falta que
la línea de tiempo del Movie Clip tiros_mc avance un cuadro cada que
se haga un disparo. Selecciona la instancia mirilla_mc en el escenario
y abre su Panel de acciones. En el handler del evento MouseDown
agrega la siguiente acción, que hará que la línea de tiempo de tiros_mc
avance un cuadro. La nueva instrucción se muestra en negritas:
onClipEvent(mouseDown){
[Link]();
_root.tiros_mc.nextFrame();
}
10. Prueba la película. Trata de dispararle a 4 patos sin fallar y no pegarle
al tendero, para que alcances los 4,000 puntos mínimos necesarios para
cambiar de ronda. Comprueba que si cambias de ronda tienes de nuevo
5 tiros disponibles. La velocidad de las tiras de patos debe aumentar
al cambiar de ronda. El número de ronda debe mostrarse en el texto
dinámico ronda_txt. Por el momento, si pierdes el juego no te darás
cuenta. Sólo verás que los tiros no se recuperan y que no cambias de
ronda. Si ya has alcanzado todas estas metas, puedes pasar a la siguiente
actividad. Guarda la película como [Link].

Actividad 09. Perdiendo el juego

Fecha entrega Comentarios y necesidades % de éxito

EVALUACIÓN

1. Abre el archivo terminado de la actividad anterior. Ubica el frame pierdes

(cuadro 4) en la línea de tiempo, a donde la película pasa cuando se
agotan los tiros y no se alcanzó el puntaje mínimo de la ronda. En esta
actividad vamos a quitar los elementos que no deben estar en este cuadro
y agregar los mensajes del fin del juego.
2. Primero hay que volver a mostrar el puntero del ratón que está oculto.
Selecciona el frame pierdes del layer Acciones y abre su Panel de
acciones para asignar el siguiente código:
[Link]();
stop();

134
 EVALUACIÓN
3. Ahora hay que eliminar algunos objetos que no se requieren en este
cuadro. Selecciona el frame pierdes (cuadro 4) del layer Mirilla y elimina
el cuadro con Menú Edit/Timeline/Remove Frames o las teclas
<Shift+F5>.
4. De manera similar, elimina el último cuadro en los layers Tendero y Patos,
ya que no queremos que se vean al perder el juego.
5. Agrega un nuevo layer y nómbralo Mensajes. El nuevo layer debe quedar
encima del fondo. Inserta un keyframe en el cuadro pierdes del layer
Mensajes y agrega un texto estático que indique que se terminó el juego.
Dale un formato adecuado al texto.

6. Si en este momento pruebas el juego puedes comprobar lo que ocurre si

pierdes. El juego está ya terminado y sólo falta agregar algunos detalles
agradables. Inserta un keyframe en los cuadros inicio, instrucciones y
juego del layer Mensajes (cuadros 1, 2 y 3).

En el keyframe 1 del layer Mensajes agrega los textos para el título del
juego y un mensaje de bienvenida. En el keyframe 2 del layer Mensajes
agrega los textos de las intrucciones.
7. Agrega una instrucción stop(); en el frame inicio del layer Acciones.
Agrega otro stop(); en el frame instrucciones del mismo layer.
8. Sólo falta agregar los botones que están en la biblioteca de símbolos. Al
keyframe 1 del layer Mensajes arrastra los botones instrucciones_btn
y jugar_btn. Acomódalos en el escenario en la posición adecuada.

Selecciona el botón de instrucciones_btn y en su Panel de acciones

escribe el código:
on(release){
gotoAndPlay(“instrucciones”);
}
Similarmente, dentro del Panel de acciones del botón jugar_btn
introduce el código:
on(release){
gotoAndPlay(“juego”);
}

Diseño Multimedia 135

 9. En el frame instrucciones del layer Mensajes sólo coloca el botón
juego_btn. Puedes copiarlo del frame inicio para que no tengas que
escribir nuevamente el código y pegarlo con <Shit+Ctrl+V> para que
quede en la misma posición.
10. En el frame pierdes del layer Mensajes coloca los dos botones.
11. Asigna el sonido [Link] al primer cuadro del layer Fondo. Para
que el sonido funcione correctamente cambia su sincronía en el Panel de
propiedades a Start y activa la opción Loop.

12. Prueba el juego terminado. Revisa toda la funcionalidad. Comprueba que

los nuevos botones hacen lo que deben hacer. Guarda el juego terminado
como [Link]. Si lo deseas, puedes publicarlo como Windows
Projector (.exe) para ejecutarlo como programa independiente. También
puedes exportarlo como SWF y HTML para colocar el juego en un sitio
Web y jugarlo en línea.
EVALUACIÓN

136
EVALUACION No. A V A N C E P R O G R A M ÁT IC O D E C U R S O
TEMA GENERAL: DISEÑO MULTIMEDIA - FLASH
GRUPO:
PROFESOR:
PERIODO:
SEMANA 1 SEMANA 2 SEMANA 3 SEMANA 4 SEMANA 5
L M M J V S L M M J V S L M M J V S L M M J V S L M M J V S

TEMAS

S E S IO N ES
S E S IO N ES

T E Ó R IC AS
PRÁCTICAS
P royectado
D ise ñ o M u ltim e d ia
¿ Q u é e s F la s h ? C oncretado
N otas:
P royectado
E n to rn o d e tra b a jo C oncretado
N otas:
P royectado
D ib u ja r y co lo re a r ve cto re s C oncretado
N otas:
P royectado
D ib u ja r y co lo re a r ve cto re s C oncretado
N otas:
P royectado
Te xto C oncretado
N otas:

SEMANA 6 SEMANA 7 SEMANA 8 SEMANA 9 S E M A N A 10

L M M J V S L M M J V S L M M J V S L M M J V S L M M J V S

TEMAS

S E S IO N ES
S E S IO N ES

T E Ó R IC AS
PRÁCTICAS
P royectado
Tra b a jo con la L ín e a d e tie m p o C oncretado
N otas:
P royectado
S o n id o C oncretado
N otas:
P royectado
S o n id o C oncretado
N otas:
P royectado
S ím b o lo s, sus p ro p ie d a d e s y lín e a s d e tie m p o C oncretado
N otas:
P royectado
S ím b o lo s, sus p ro p ie d a d e s y lín e a s d e tie m p o C oncretado
N otas:
EVALUACION No. A V A N C E P R O G R A M ÁT IC O D E C U R S O
TEMA GENERAL: DISEÑO MULTIMEDIA - FLASH
GRUPO:
PROFESOR:
PERIODO:
S E M A N A 11 S E M A N A 12 S E M A N A 13 S E M A N A 14 S E M A N A 15
PRÁCTICAS

L M M J V S L M M J V S L M M J V S L M M J V S L M M J V S
S E S IO N ES
T E Ó R IC AS

S E S IO N ES

TEMAS
P royectado
M á scara s C oncretado
N otas:
P royectado
P rin cip io s d e A n im a c ió n C oncretado
N otas:
P royectado
P rin cip io s d e A n im a c ió n C oncretado
N otas:
P royectado
G u ía s d e m o vim ie n to C oncretado
N otas:
P royectado
F iltro s C oncretado
N otas:
S E M A N A 16 S E M A N A 17 S E M A N A 18 S E M A N A 19 S E M A N A 20
L M M J V S L M M J V S L M M J V S L M M J V S L M M J V S

PRÁCTICAS
S E S IO N ES
T E Ó R IC AS

S E S IO N ES
TEMAS
P royectado
F iltro s C oncretado
N otas:
P royectado
In troducció n a A ctio n S crip t
A ctio n S crip t e n K e yfra m e s C oncretado
N otas:
P royectado
A ctio n S crip t e n b o to n e s C oncretado
N otas:
P royectado
A ctio n S crip t e n b o to n e s C oncretado
N otas:
P royectado
A ctio n S crip t e n M o vie C lip s C oncretado
N otas:
EVALUACION No. A V A N C E P R O G R A M ÁT IC O D E C U R S O
TEMA GENERAL: DISEÑO MULTIMEDIA - FLASH
GRUPO:
PROFESOR:
PERIODO:
S E M A N A 21 S E M A N A 22 S E M A N A 23 S E M A N A 24 S E M A N A 25
L M M J V S L M M J V S L M M J V S L M M J V S L M M J V S

TEMAS

S E S IO N ES
S E S IO N ES

T E Ó R IC AS
PRÁCTICAS
P royectado
A ctio n S crip t e n M o vie C lip s C oncretado
N otas:
P royectado
C o n tro l d e lín e a s d e tie m p o C oncretado
N otas:
P royectado
V a ria b le s C oncretado
N otas:
P royectado
E stru ctu ra s C o n d icio n a le s C oncretado
N otas:
P royectado
E stru ctu ra s C o n d icio n a le s C oncretado
N otas:

S E M A N A 26 S E M A N A 27 S E M A N A 28 S E M A N A 29 S E M A N A 30
L M M J V S L M M J V S L M M J V S L M M J V S L M M J V S

TEMAS

S E S IO N ES
S E S IO N ES

T E Ó R IC AS
PRÁCTICAS
P royectado
E stru ctu ra s C o n d icio n a le s C oncretado
N otas:
P royectado
P u b lica c ió n d e p ro ye cto s d e F la s h C oncretado
N otas:

P ro ye cto d e In te g ra c ió n P royectado
S im u la ció n d e m o vim ie n to s re a lista s C oncretado
N otas:

P ro ye cto d e In te g ra c ió n P royectado
S im u la ció n d e m o vim ie n to s re a lista s C oncretado
N otas:

P ro ye cto d e In te g ra c ió n P royectado
P o rta fo lio W e b C oncretado
N otas:
EVALUACION No. A V A N C E P R O G R A M ÁT IC O D E C U R S O
TEMA GENERAL: DISEÑO MULTIMEDIA - FLASH
GRUPO:
PROFESOR:
PERIODO:
S E M A N A 31 S E M A N A 32 S E M A N A 33 S E M A N A 34 S E M A N A 35
PRÁCTICAS
S E S IO N ES
T E Ó R IC AS

S E S IO N ES

L M M J V S L M M J V S L M M J V S L M M J V S L M M J V S
TEMAS
P royectado
P ro ye cto d e In te g ra ció n
P o rta fo lio W e b C oncretado
N otas:
P royectado
P ro ye cto d e In te g ra ció n
P o rta fo lio W e b C oncretado
N otas:
P royectado
P ro ye cto d e In te g ra ció n
P o rta fo lio W e b C oncretado
N otas:
P royectado
P ro ye cto d e In te g ra ció n
E l ju e g o d e la g a le ría d e tiro C oncretado
N otas:
P royectado
P ro ye cto d e In te g ra ció n
E l ju e g o d e la g a le ría d e tiro C oncretado
N otas:
S E M A N A 36 S E M A N A 37 S E M A N A 38 S E M A N A 39 S E M A N A 40

PRÁCTICAS
L M M J V S L M M J V S L M M J V S L M M J V S L M M J V S
S E S IO N ES
T E Ó R IC AS

S E S IO N ES
TEMAS
P royectado
P ro ye cto d e In te g ra ció n
E l ju e g o d e la g a le ría d e tiro C oncretado
N otas:
P royectado
P ro ye cto d e In te g ra ció n
E l ju e g o d e la g a le ría d e tiro C oncretado
N otas:
P royectado
C oncretado
N otas:
P royectado
C oncretado
N otas:
P royectado
C oncretado
N otas:
P royectado T = Sesión Teórica.
T O T A LE S L o s re cuad ro s a b a jo d e fe chas d e b e rá n lle n a rse
C oncretado
con:
PA= Sesión Práctica en el Aula
P O R C E N T A JE D E P royectado 100% 100% PL= Sesión Práctica en Laboratorio
AVANCE C oncretado
N O M B R E Y F IR M A D E L P R O F E S O R
NOTAS
NOTAS
NOTAS
NOTAS
NOTAS
NOTAS
NOTAS
NOTAS
NOTAS
NOTAS
NOTAS
La serie de Informática Educativa Colores
Procesador de Textos
Certificación Internacional Word Azul

Hoja de Cálculo
Certificación Internacional Excel Verde

Presentaciones
Certificación Internacional PowerPoint Naranja

Diseño Digital
Producción de imagen digital con Photoshop Rojo

Diseño Multimedia
Desarrollo de animación y multimedia con Flash Morado

Diseño Vectorial
De la ilustración al diseño editorial con Illustrator Magenta

Diseño Web
Desarrollo de interfaces y contenido para Internet Negro

Office Avanzado
Certificación Master en Office Café

Programación
Fundamentos y prácticas de programación Amarillo

Publicaciones
Edición de impresos con Publisher Aqua

Video Digital
Producción y realización de video digital Blanco

[Link]