• Author / Uploaded
• Brandon Chicas

• Categories
• Informática
• Tecnología
• Software
• Redes sociales y digitales
• Tecnología digital

Citation preview

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

Said Emmanuel Dokins Milián

Ilustración de portada

Elsa Lesser Carrillo Lorena Lara Manzano

Ilustración de Interiores

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

Ramón Salas Gil

Ramón Salas Gil Said Emmanuel Dokins Milián Revisión de Recursos Digitales

Carlos Alberto León Rendón Vianick Markiel Oliveri Rivera Revisión de Recursos Digitales

Vianick Markiel Oliveri Rivera

Corrección de estilo

Sergio Jiménez Valenzuela

Desarrollo de Módulos de Instrucción Digital

Alma Rodríguez de Jesús Dennise López Font Sergio Jiménez Valenzuela Apoyo en actividades

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? Lámina de apoyo 01 Evolución de Flash (Historia) Actividad 01 Evolución de Flash (Historia)

1 3 3

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

4 4 4 5 5 5 5 6 6 6

Dibujar y colorear vectores MID 02 Herramientas de Flash Actividad 03 Identificando herramientas Cómo se comportan las formas en Flash MID 03 Dibujando vectores Actividad 04 Dibujando vectores

7 7 8 9 10 10

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

11 11 11 12 12 12 13 13

Trabajo con la Línea de tiempo (Timeline) MID 05 Línea de tiempo Actividad 06 Repaso de la Línea de tiempo Actividad 07 Animando con la Línea de tiempo

13 15 15 16

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

17 17 17 17 18

CONTENIDO

Actividad 08 Haciendo pruebas con sonido Actividad 09 Conceptos clave

18 20

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

21 21 22 22 22 23 23 24 24

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

27 27 28

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

29 29 29 29 30 30 31 32 33 33 34

Guías de movimiento (MotionGuide) MID 16 Guías de movimiento Actividad 18 Siguiendo guías Filtros (Filters) MID 17 Filtros Actividad 19 Utilizando filtros Actividad 20 Publicidad para Internet

34 35 35

25

36 37 37 37

CONTENIDO

Introducción a ActionScript

39

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

40 42 42

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

43 45 45 47

ActionScript en MovieClips MID 20 ActionScript en MovieClips Actividad 24 Identificando eventos Nombrar instancias Actividad 25 Nombrando instancias Sintaxis de punto Operadores Operadores de Asignación Operadores Aritméticos Operadores de Comparación Actividad 26 Reconociendo operadores Actividad 27 Modificando propiedades con ActionScript

49 51 51 52 54 54 55 55 56 57 57 58

Control de líneas de tiempo Actividad 28 Controlando la bicicleta

60 63

Variables Actividad 29 Declarando variables Ámbitos de las variables

65 65 66

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

67 67 68 69 71 72 73

Publicación de proyectos de Flash MID 22 Publicación de proyectos Actividad 35 Recordando

73 75 75



CONTENIDO

Proyecto de Integración 1 Simulación de movimientos realistas Objetivo y plan de programación Actividad 01 Programando los giros Actividad 02 Generando el movimiento Actividad 03 Controlando la velocidad máxima Actividad 04 Mejorando la acción Proyecto de Integración 2 Portafolio Web Actividad 01 Creando botones del menú Actividad 02 Creando programación reutilizable (prototipos) Actividad 03 Utilizando prototipos en el menú Actividad 04 Creando ventanas para los contenidos de cada tema Actividad 05 Programando botón de cerrar Actividad 06 Asignando contenido a contacto Actividad 07 Asignando contenido a biografía Actividad 08 Asignando contenido a portafolio Actividad 09 Detallando el sitio final Proyecto de Integración 3 El juego de la galería de tiro Actividad 01 Creando un pato Actividad 02 Preparando el escenario Actividad 03 Moviendo la tira de patos Actividad 04 El tendero Actividad 05 Moviendo al tendero Actividad 06 Llevando el puntaje Actividad 07 La mirilla Actividad 08 Limitando los tiros y cambiando de ronda Actividad 09 Perdiendo el juego

78 78 79 81 82 84 86 86 88 90 92 95 96 97 99 102 103 104 107 111 114 117 119 122 124 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 SEMANAS

1 Sem ana

TEMAS D ise ñ o M u ltim e d ia ¿ Q u é e s F la sh ?

SUBTEMAS

COMPETENCIA

L á m in a d e a p o yo E vo lu ció n d e F la sh (H isto ria )

A p re n d e la h isto ria y la e vo lu ció n 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) 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) A ccio n e s (A ctio n s) C ó m o reo rganiza r lo s p a n e le s

Id e n tifica e l e n to rn o d e tra b a jo p a ra u tiliza r Fla sh .

1 Sem ana

E n to rn o d e tra b a jo

2 Sem anas

D ib u ja r y co lo re a r ve cto re s

C ó m o se co m p o rta n la s fo rm a s e n F la sh

A p lica la s h e rra m ie n ta s d e tra b a jo d e Fla sh .

1 Sem ana

T e xto

T e xto T e xto T e xto T e xto T e xto

R e visa lo s tip o s d e te xto que se e m p le a n a l tra b a ja r e n Fla sh

1 Sem ana

T ra b a jo co n la L ín e a d e tie m p o

L ín e a d e tie m p o

R e p a sa la lin e a d e l tie m p o . C re a u n a a n im a ció n co n la lín e a d e tie m p o .

2 Sem anas

S o n id o

B ib lio te ca d e sím b o lo s E ve n t S tre a m T ra b a ja n d o co n so n id o

C o n stru ye so n id o s d ife re n te s a tra vés d e la b ib lio te ca d e sím b o lo s, Eve n t y Stre a m .

2 Sem anas

S ím b o lo s, su s p ro p ie d a d e s y lín e a s d e tie m p o

T ip o s d e sím b o lo s In sta n cia s y p ro p ie d a d e s in te ra ctiva s

D ise ñ a d ife re n te s tip o s d e sím b o lo s, in sta n cia s y b o to n e s e n u n a ta rje ta in te ra ctiva .

1 Sem ana

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 d e Fla sh .

co n a n ch o fijo e xte n sib le E stá tico D in á m ico d e E n tra d a

A n im a ció n C u a d ro p o r C u a d ro A n im a ció n M o tio n T w e e n A n im a ció n S h a p e T w e e n

A p lica a n im a cio n e s cu a d ro p o r cu a d ro , Mo tio n Tw e e n y Sh a p e Tw e e n .

2 Sem anas

P rin cip io s d e A n im a ció 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 .

2 Sem anas

F iltro s

F iltro s

M o d ifica filtro s d e n tro d e la p u b licid a d e n in te rn e t.

In tro d u cció n a A ctio n S crip t A ctio n S crip t e n K e yfra m e s

A ccio n e s e n K e yfra m e s

D e scrib e a m p lia m e n te la s a ccio n e s d e A ctio n S crip t y lo 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

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

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

2 Sem anas

A ctio n S crip t e n M o vie C lip s

N o m b ra r in sta n cia s S in ta xis d e p u n to O p e ra d o re 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

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

O rd e n a la s lin e a s d e l tie m p o e n 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.

1 Sem ana

2 Sem anas

N a rra a m p lia m e n te la s a ccio n e s d e A ctio n S crip t e n M o vie C lip s.

INDICADOR

OBJETIVOS

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 Fla sh . d ise ñ o u ltim e d ia y Fla sh .

ACTIVIDADES SUGERIDAS PARA EL ALUMNO (CONTENIDAS EN EL MATERIAL DE TRABAJO) A ctivid a d 0 1 E vo lu ció n d e F la sh

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 e n to rn o d e tra b a jo co n Fla sh . 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)

RECURSOS C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

D ib u ja y co lo re a ve cto re s u tiliza n d o la s h e rra m ie n ta s d e tra b a jo .

U b ica la s fo rm a s e n la s que se 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 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 m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

C o n stru ye d ife re n te s form a s u tiliza n d o e l te xto co n a n ch o fijo , e xte n sib le , e stá tico , d in á m ico y d e e n tra d a .

S e le ccio n a la s d ife re n te s fo rm a s d e te xto que p u e d e n a p lica rse co n Fla sh .

A ctivid a d 0 5 C re a n d o fo rm a s

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

T ra b a ja co n la Lín e a d e l tie m p o .

A ctivid a d 0 6 R e p a so d e la L ín e a d e 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

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

A p lica d ive rso s so n id o s.

A ctivid a d 0 8 H a cie n d o p ru e b a s co n so n id o A ctivid a d 0 9 C o n ce p to s cla ve

C o m p u ta d o ra , m a te ria l d e a p o yo 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 p ro p ie d a d e s y la s lín e a s d e tie m p o .

A ctivid a d 1 0 T ip o s d e sím b o lo s A ctivid a d 1 1 C re a n d o in sta n cia s 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

E je cu ta la cre a ció n d e u n a m á sca ra .

A ctivid a d 1 3 C re a n d o u n a m á sca ra

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

A ctivid a d A ctivid a d A ctivid a d A ctivid a d

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

D ise ñ a u n a m á sca ra co n la s h e rra m ie n ta s d e Fla sh .

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 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 o cu m e n to d e Fla sh . 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 . 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 re a va rio s b a n n e rs a p lica n d o d im e n sio n e s y d o cu m e n to s d ife re n te s.

14 15 16 17

A n im a n d o C u a d ro p o r C u a d ro A n im a n d o co n M o tio n T w e e n A n im a n d o co n S h a p e T w e e n Id e n tifica n d o Tw e e n s

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

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

C o n stru ye filtro s d e n tro d e la p u b licid a d e n in te rn e t.

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

A ctivid a d 1 9 U tiliza n d o filtro s A ctivid a d 2 0 P u b licid a d p a ra In te rn e t

E xp lica e l u so d e lo s Ke yfra m e s e n R e co n o ce la s a ccio n e s que se Fla sh . genera n co n lo s Ke yfra m e s. 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 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. 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 . V isu a liza la s d ife re n cia s e n tre lo s o p e ra d o re s (arítm e tico , d e a sign a ció n o d e co m p a ra ció n ). M o d ifica u n a p ro p ie d a d co n A ctio n S crip t.

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

A ctivid a d 2 2 Id e n tifica n d o a ccio 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

24 25 26 27

Id e n tifica n d o e ve n to s N o m b ra n d o in sta n cia s R e co n o cie n d o o p e ra d o re s M o d ifica n d o p ro p ie d a d e s co n A ctio n S crip t

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

U tiliza la s a ccio n e s d e A ctio n S crip t e n M o vie C lip s.

A ctivid a d A ctivid a d A ctivid a d A ctivid a d

A p lica la s Lin e a s d e l tie m p o e n e l co n tro l d e u n a b icle ta .

D istin gue e l co n tro l d e la s Lin e a s d e tie m p o .

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 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 d ise ñ o d e Fla sh .

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 e l a lu m n o y cd d e l a lu m n o

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

TIEMPO EN SEMANAS

TEMAS

SUBTEMAS

COMPETENCIA

3 Sem anas

E stru ctu ra s C o n d icio n a le s

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 e stru ctu ra s co n d icio n a le s.

1 Sem ana

P u b lica ció n d e p ro ye cto s d e F la sh

P u b lica ció n d e p ro ye cto s

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

2 Sem anas

P ro ye cto d e In te gra ció n

S im u la ció n d e m o vim ie n to s re a lista s

R e a liza e l p ro ye cto d e sim u la ció n d e m o vim ie n to s re a lista s.

P ro ye cto d e In te gra ció n

P o rta fo lio W e b

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

4 Sem anas

Total 37 semanas

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

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 "

INDICADOR

OBJETIVOS

ACTIVIDADES SUGERIDAS PARA EL ALUMNO (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 te xto u tiliza n d o e l p a n e l d e A ctivid a d 3 1 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 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 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 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 a p lica la s ca ra cte ristica s d e A ctivid a d 3 5 su s h e rra m ie n ta s. p u b lica ció n . P ro gra m a lo s giro s. A ctivid a d 0 1 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 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 M e jo ra la a cció n fin a l. A ctivid a d 0 4 C re a 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 . U tiliza 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 p lica lo s co n o cim ie n to s d e 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 sign a e l co n te n id o a co n ta cto , b io gra fía y p o rta fo lio . D e ta lla e l sitio fin a l.

D ise ñ a u n p a to . P re p a ra e l e se n a rio .

In te gra lo s p ro ce so s in vo lu cra d o s e n la cre a ció n d e u n ju e g o (p la n e a ció n , d ise ñ o d e a rte , cre a ció n d e in te rfa z, p ro gra m a ció n y d e p u ra ció n ).

E scrib ie n d o có d igo co n u n co n d icio n a l E fe cto d e m á qu in a d e e scrib ir M á sca ra s d in á m ica s S im u la ció n física d e u n re b o te M e jo ra n d o e l reb o te

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

R e co rd a n d o

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

P ro gra m a n d o lo s giro s G e n e ra n d o e l m o vim ie n to C o n tro la n d o la ve lo cid a d m á xim a M e jo ra n d o la a cció n

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n o

A ctivid a d 0 1 A ctivid a d 0 2 A ctivid a d 0 3 A ctivid a d 0 4 ca d a te m a A ctivid a d 0 5 A ctivid a d 0 6 A ctivid a d 0 7 A ctivid a d 0 8 A ctivid a d 0 9

P ro gra m a n d o b o tó n d e A sign a n d o co n te n id o a A sign a n d o co n te n id o a A sign a n d o co n te n id o a D e ta lla n d o e l sitio fin a l

A ctivid a d A ctivid a d A ctivid a d A ctivid a d A ctivid a d A ctivid a d A ctivid a d A ctivid a d A ctivid a d

C re a n d o u n p a to P re p a ra n d o e l e sce n a rio M o vie n d o la tira d e p a to s E l te n d e ro M o vie n d o a l te n d e ro L le va n d o e l p u n ta je L a m irilla L im ita n d o lo s tiro s y ca m b ia n d o d e ro n d a P e rd ie n d o e l ju e g o

01 02 03 04 05 06 07 08 09

RECURSOS

C re a n d o b o to n e s d e l m e n ú C re a n d o p ro gra m a ció n re u tiliza b le U tiliza n d o p ro to tip o s e n e l m e n ú 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 d e l a lu m n o y cd d e l a lu m n o

ce rra r co n ta cto b io gra fía p o rta fo lio

C o m p u ta d o ra , m a te ria l d e a p o yo d e l a lu m n o y cd d e l a lu m n 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 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 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.

10

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.

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 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.

Herramientas

Línea de tiempo Escenario

Propiedades

Biblioteca de símbolos

02 Actividad

Acciones Flash

01

Entorno de trabajo de Flash

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 la izquierda del nombre, para colocar el panel en otro lugar de la pantalla.

Haz clic en el nombre del panel para minimizarlo (colapsarlo) o desplegarlo normalmente.

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 seleccionada.

las

variantes

de

la

herramienta

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 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 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

03

Dibujando vectores

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 Actividad04.fla 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 . 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. 2. 3. 4.

Un teléfono móvil Un automóvil Una tortuga 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 . Para eliminar un Keyframe seleccionado, usa el Menú Edit/Timeline/Clear Keyframe

o la combinación de teclas .

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 . Para eliminar un frame utiliza la combinación de teclas . 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 . Para eliminar un Keyframe seleccionado, usa el Menú Edit/Timeline/ Clear Keyframe o la combinación de teclas . 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

3

Utilería

2

Fondo

1

Extra

a.

Contiene las imágenes del acrobata en movimiento Tiene las cosas que están sobre el escenario Contiene las imágenes del fondo del escenario No contiene nada

Cambia el contenido conforme avanza Un único frame Un único frame No tiene keyframe

¿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 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

07

Trabajando con sonido

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 . 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 .

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 .

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

28

10

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 instancia

Dimensiones

Nombre del símbolo original

Posición

Apariencia

Flash

11

Instancias y sus propiedades

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 . 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.

Este Layer contiene la fotografía

El Layer de máscara contiene un círculo

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 modificar.Cuando 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. 3.

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

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

36

14

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 . 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 propiedades.

con

otro

color

utilizando

el

Panel de

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 Actividad18.fla 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 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 .

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. b. c. d. e.

Full banner: 480 X 60 píxeles Leaderboard: 728 X 90 píxeles Skyscrapper: 120 X 600 píxeles Banner Botón: 120 X 60 píxeles 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) 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

Total

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 key.isdown 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 . 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.

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 . 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

Nota

Acción

Función

stop();

Detiene la película.

reproducción

de

play();

Continúa la reproducción de la película desde el cuadro donde se encuentra esta instrucción.

gotoAndStop();

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

gotoAndPlay();

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).

nextScene();

Avanza la reproducción de la película a la siguiente escena, siempre y cuando exista más de una escena definida.

prevScene();

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

trace();

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 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”).

getURL (“http://www.grupoeducare.com”);

Carga en el navegador de Internet la página que se especifique entrecomillada dentro de los paréntesis. Observa que es importante incluir el protocolo (en este caso http://) para que la página se cargue correctamente.

Diseño Multimedia

la

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

18

Acciones en Keyframes

Agregando ActionScript a los Keyframes 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 . 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.

48

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

21 Actividad

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

50

Ocurre cuando...

rollOver

Ocurre si el puntero del ratón pasa sobre el área sensible del botón (Hit).

press

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

release

Ocurre cuando se deja de presionar el botón después de haberlo presionado.

ReleaseOutside

Sucede cuando después de haber hecho clic sobre el botón y sin soltarlo, se mueve el puntero del ratón fuera del área sensible y entonces se deja de presionar.

rollOut

Sucede cuando después de estar dentro, el puntero del ratón abandona el área sensible del botón.

dragOut

Sucede cuando el puntero del ratón está sobre el botón y se presiona sobre el mismo. Con el botón pulsado se mueve el cursor fuera de la superficie del botón.

dragOver

Ocurre cuando el puntero del ratón está sobre el botón 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 “”)

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 on (rollOver) { stopAllSounds(); }

on (press) { getURL(“http://www.un.org”); }

Función

Cuando el puntero del ratón pasa sobre el botón, todos los sonidos que estén ejecutándose se detienen.

Cuando se presiona el botón, se abre la dirección especificada en una ventana nueva del explorador predeterminado.

on (release) { gotoAndStop(14); }

Cuando se suelta el botón se ejecuta el cuadro 14 de la línea de tiempo y se detiene ahí.

on (rollOut) { trace (“¿a dónde vas?”); }

Cuando el puntero del ratón deja de estar sobre el botón, aparece una ventana con el texto. ¿a dónde vas?

on (keyPress “”){ trace (“Derecha”); }

Cuando se presiona la flecha “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

Over

rollOver

Down

press

release

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 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 . 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:

54

on (release) {gotoAndPlay(11);}

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(); tiempo.

// Aquí

inicia

la

reproducción

de

la

línea

de

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 load

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

unload

Ocurre una sola vez cuando el MovieClip se descarga de la película.

enterFrame

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

mouseDown

Se dispara cuando se presiona el botón del ratón sobre cualquier lugar del escenario.

mouseUp

Ocurre cuando se pulsa el botón del ratón y posteriormente se suelta sobre cualquier lugar del escenario.

mouseMove

Este evento sucede si se mueve el puntero del ratón. 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.

data

56

Ocurre cuando …

Ocurre cuando termina de realizarse una acción

LoadVariables o una acción LoadMovie.

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) onClipEvent (mouseUp)

on (press) 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

inicio_btn

a.

avion

avion_mc

c.

siguiente

siguiente_btn

d.

adelante

adelante_btn

e.

letrero

letrero_txt

f.

dibujo

dibujo_mc

g.

texto

texto_txt

h.

animacion

animacion_mc

b.

inicio

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:

objeto.propiedad;

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. La asignación siempre es de derecha a izquierda.

pelota_mc._x = 13;

+=

Asigna a una variable el valor de esa misma variable más otro valor. Se usa para incrementar el valor de una variable.

pelota_mc._x += 1; Costo += unidad;

Diseño Multimedia

61

-=

Asigna a una variable el valor de esa misma menos otro valor. Se usa para decrementar el valor de una variable.

pelota_mc._x -= 1; Costo -= descuento;

*=

Asigna a una variable el valor de esa misma variable multiplicado por otro valor.

pelota_mc._height *= 3;

/=

Asigna a una variable el valor de esa misma variable dividido entre otro valor.

pelota_mc._height /= 3;

++

Incrementa en uno, el valor de una variable

pelota_mc._rotation ++;

--

Decrementa en uno el valor de una variable.

pelota_mc._rotation --;

Operadores Aritméticos Operador

62

Función

Ejemplos de uso

+

Sirve para sumar dos expresiones o conectar cadenas de texto.

Total = A + B;

-

Se emplea para restar valor o asignar signo negativo a un número.

Total = A – 7;

*

Multiplica dos numéricas.

Total = A*3;

/

Divide dos expresiones generando decimales.

Total = A/2;

%

Devuelve el residuo de la división de dos expresiones. Este operador se llama módulo.

Total = A%2

expresiones

Operadores de Comparación Función

Operador

Ejemplos de uso

Regresa un valor verdadero (True) si dos expresiones son iguales.

if (A==B){ play(); }

Regresa un valor verdadero (True) si dos expresiones son diferentes.

if (A!=B){ play(); }

>

Regresa un valor verdadero (True) si la expresión de la izquierda es mayor que la de la derecha.

if (A>B){ play(); }


=B){ play(); }

Stage.width) { 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=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

}

33

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. b. c. d.

2.

La instrucción on() es un manejador de eventos para: a. b. c. d.

3.

Botones MovieClips Botones y MovieClips Frames, botones y MovieClips

La instrucción onClipEvent() es un manejador de eventos para: a. b. c. d.

4.

Frames, botones y MovieClips Frames y botones Frames Frames y MovieClips

Sólo Botones Sólo MovieClips Botones y MovieClips Frames, Botones y MovieClips

Para los siguientes eventos, anota en la línea si son manejados por el handler on() o por el handler onClipEvent(). a. release b. KeyPress c. mouseMove d. press

on () on () onClipEvent () on ()

Diseño Multimedia

81

on () on () onClipEvent () onClipEvent () on ()

e. rollOver f. dragOut g. enterFrame h. load i. rollOut

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. 2. 3. 4.

Programando los giros Generando el movimiento Controlando la velocidad máxima Mejorando la acción

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.

Objetivo y plan de programación

EVALUACIÓ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:

84

Tecla de flecha

Acció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 }

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.

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 nave.fla y guarda el archivo en la ubicación que indique tu profesor con el nombre nave01.fla. 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.

EVALUACIÓN

También usaremos la instrucción Key.isDown(), 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.

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 (Key.isDown(Key.RIGHT)) { this._rotation += 15; } } // el código de la tecla flecha derecha es Key.RIGHT

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.

EVALUACIÓN

5.

86

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 en negritas:

onClipEvent (enterFrame) { if (Key.isDown(Key.RIGHT)) { this._rotation += 15; } if (Key.isDown(Key.LEFT)) { this._rotation -= 15; } }

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

1.

Comentarios y necesidades

% de éxito

EVALUACIÓN

6.

Abre el archivo de la actividad anterior y guárdalo con el nombre Nave02.fla. 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 (Key.isDown(Key.UP)) { 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+= Math.sin(_rotation*(Math.PI/180))*velocidad; this._y+= Math.cos(_rotation*(Math.PI/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.

EVALUACIÓN

Actividad 03. Controlando la velocidad máxima

88

Fecha entrega

1.

Comentarios y necesidades

% de éxito

Abre el archivo de la actividad anterior y guarda una copia con el nombre Nave03.fla. 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



2.

// Éste es el código que mueve la nave if (velocidad>20){ velocidad =20; } this._x+= Math.sin(_rotation*(Math.PI/180))*velocidad; this._y+= Math.cos(_rotation*(Math.PI/180))*velocidad*-1;

Agrega también las líneas para que, si la velocidad baja de -20, quede fija en este valor:

if (velocidad