Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Autor
Carlos Zepeda Chehaibar
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
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
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
Sonido (Sound) 17
MID 06 Biblioteca de símbolos 17
Event 17
Stream 17
MID 07 Trabajando con sonido 18
CONTENIDO
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
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
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
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.
Recursos Digitales
Los recursos digitales que acompañan al material impreso, contienen videos que
te ayudarán a comprender los conceptos y a poner en práctica las habilidades
adquiridas. Adicionalmente encontrarás los archivos que se requieren para
realizar las actividades, algunos documentos y aplicaciones útiles. No olvides
que los recursos digitales son parte integral del programa, por lo que es muy
importante que los 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.
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
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
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
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 .
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)
Total 37 semanas
INDICADOR OBJETIVOS ACTIVIDADES SUGERIDAS PARA EL ALUMNO RECURSOS
(CONTENIDAS EN EL MATERIAL DE TRABAJO)
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).
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.
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.
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
www.thefwa.com (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 de la Interactividad:
Sitio 2: URL:
Análisis de la Interactividad:
9
Sitio 3: URL:
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.
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.
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.
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.
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
Flash
02 Herramientas de Flash
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.
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.
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.
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 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.
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.
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
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
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.
Blank Keyframe
Keyframe
Frames normales
Flash
05 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
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:
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.
Flash
06 Biblioteca de símbolos
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.
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
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.
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.
25
Conceptos clave
09
Actividad
Selecciona la respuesta que mejor corresponda a cada pregunta:
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:
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.
27
Over. Contiene la imagen, sonido y acciones del botón, que se despliegan
cuando el puntero del ratón está sobre él.
Hit. Contiene una imagen que delimita el área sensible del botón. Esta
imagen nunca se ve en el escenario.
Flash
Flash
Flash
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.
29
Nombre asignado a la Nombre del símbolo
instancia original
Flash
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.
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.
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.
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
Flash
12 Máscaras
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:
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.
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.
Flash
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.
Flash
MotionTween
14
36 Diseño Multimedia - Desarrollo de animación y multimeda con Flash
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:
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.
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.
Flash
15 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:
39
a. ¿Para qué sirve el Blend Distributivo?
Va haciendo el cambio en toda la figura de forma pareja.
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
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.
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.
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.
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.
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:
Concepto
Calidad del diseño
Uso adecuado de MotionTween
Uso adecuado de Filtros
Efectividad para transmitir el mensaje
Totales (máxima suma: 100 puntos)
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.
É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 (;).
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.
Regresa la reproducción de la
prevScene(); película a la escena anterior, siempre
y cuando exista más de una escena
definida.
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
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.
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();
}
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.
51
Código Función
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?
Estado Evento(s)
Up rollOut release
Over rollOver
Down press
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.
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.
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);}
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.
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.
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
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
Evento : rollOut
Aplica : Botón
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.
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.
59
Nombrando instancias
25
Actividad
Nombra las instancias dependiendo la función que se indica con cada ícono.
Observa el ejemplo resuelto.
a. avion avion_mc
b. inicio inicio_btn
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.
objeto.propiedad;
pelota_mc._x = 50;
O en su forma abreviada:
pelota_mc._x += 10;
objeto.método;
pelota_mc.stop();
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
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.
Operadores Aritméticos
Devuelve el residuo de la
% división de dos expresiones. Total = A%2
Este operador se llama módulo.
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. !=
b. /=
63
c. ++
d. %
e. *
f. -=
Actividad
27
1. Abre en Flash la película propiedades.fla que se encuentra en tu CD de
trabajo o carpeta de actividades.
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 = dog.mc._ 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.
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
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.
_root
bici_mc
rueda1_mc
rueda2_mc
_root bici_mc.rueda1_mc.stop()
bici_mc
rueda1_mc
rueda2_mc
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í:
_root
on (release){
bici_mc rueda2_mc.stop()
}
rueda1_mc
rueda2_mc
_root
on (release){
bici_mc _root.bici_mc.rueda2_mc.stop()
}
rueda1_mc
rueda2_mc
_root
bici_mc
rueda1_mc _parent.rueda2_mc.stop()
rueda2_mc
_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 bici11.fla 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.
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();
}
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);
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
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.”
Flash
21 Condicional If y Else
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>Stage.width) {
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.
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.
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<texto.length){
caja=texto.substring(0,t);
t++;
}else{
caja=texto;
gotoAndStop(1);
}
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) {
Mouse.hide();
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:
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%.
}
}
34
Actividad
Para realizar esta actividad es necesario haber realizado correctamente la
actividad anterior.
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.
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 ()
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:
2. Variable
3. Variable local
5. _root
6. _parent
Antes de iniciar con la primera actividad, revisa una muestra del proyecto
terminado abriendo el archivo nave solucion.swf 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.
onClipEvent(enterFrame){
instrucciones
}
if (Key.isDown(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.
}
Evaluación 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 (Key.isDown(Key.RIGHT)) {
this._rotation += 15;
}
}
// el código de la tecla flecha derecha es Key.RIGHT
Estas líneas deben estar dentro del handler del evento enterFrame justo
antes de la llave final.
Evaluación 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.
Evaluación 89
Actividad 04. Mejorando la acción
Evaluación 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.
Antes de iniciar con la primera actividad, revisa una muestra del sitio terminado
abriendo la página Web index.htm 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.
Evaluación 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 SitioWeb01.fla en la carpeta que
tu profesor indique. Utilizarás este archivo como base de la siguiente
actividad.
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.
Evaluación 95
Actividad 03. Utilizando prototipos en el menú
Evaluación 97
7. Prueba la película. Presiona el MovieClip que dice “Biografia” y verifica
que los objetos se muevan como muestra la imagen siguiente:
2 portafolio
30 salida1
40 contacto
80 salida2
120 salida3
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
Evaluación 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.
Evaluación 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
SitioWeb05.fla
Evaluación 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
System.useCodepage=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
carga.load(“biografia.txt”);
scroll1_btn
scroll2_btn
cuadro1_A cuadro1_B
cuadro2_A cuadro2_B
cuadro3_A cuadro3_B
cuadro4_A cuadro4_B
cuadro5_A cuadro5_B
cuadro6_A cuadro6_B
Evaluación 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.
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){
this.createEmptyMovieClip(“grande_mc”,100);
grande_mc.attachMovie(“cuadro1_B”, “G”,100,{_x:470, _y:280});
}
on (rollOut){
grande_mc.unloadMovie();
}
Evaluación 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 SitioWeb08.fla
Detalla el sitio final para darle una mejor imagen. Puedes incluir entre otras
cosas:
Recuerda que debes incluir los archivos externos (.as y .txt) y todos deben
estar en la misma ubicación.
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:
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
Evaluación 109
Actividad 01. Creando un pato
Evaluación 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.
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();.
Evaluación 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.
Evaluación 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.
Evaluación 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
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:
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 ShootOut03.fla y pasar a la siguiente actividad.
Evaluación
9. 119
Actividad 04. El tendero
Evaluación 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.
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.
Evaluación 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 Math.random() 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 Math.random()
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 Math.random()*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=Math.random()*40+20;
this._x=650;
}
}
Evaluación 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
press, ocurrirá sólo cuando hagas clic sobre el personaje. Las nuevas
líneas están en negritas:
on (press){
this.play();
_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.
Evaluación 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 ShootOut06.fla para pasar a la siguiente actividad.
Evaluación 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){
this.play();
}
Evaluación 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.
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
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:
Evaluación 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){
this.play();
_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 ShootOut08.fla.
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.
Evaluación 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 musicLoop.wav 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.
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:
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