Flash8 tutoriales

Marcas comerciales
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder,
Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit,
Studio MX, UltraDev y WebHelp son marcas registradas o marcas comerciales de Macromedia, Inc. y pueden estar registradas en
Estados Unidos o en otras jurisdicciones, incluidas las internacionales. Otros nombres de productos, logotipos, diseños, títulos,
palabras o frases mencionados en esta publicación pueden ser marcas comerciales, marcas de servicio o nombres comerciales de
Macromedia, Inc. o de otras entidades y pueden estar registrados en ciertas jurisdicciones, incluidas las internacionales.
Información de terceros
Esta guía contiene vínculos a sitios Web de terceros que no están bajo el control de Macromedia y, por consiguiente, Macromedia
no se hace responsable del contenido de dichos sitios Web. El acceso a uno de los sitios Web de terceros mencionados en esta guía
será a cuenta y riesgo del usuario. Macromedia proporciona estos vínculos únicamente como ayuda y su inclusión no implica que
Macromedia se haga responsable del contenido de dichos sitios Web.
La tecnología de compresión y descompresión de voz tiene licencia de Nellymoser, Inc. (www.nellymoser.com).
La tecnología de compresión y descompresión de vídeo Sorenson™ Spark™ tiene licencia de
Sorenson Media, Inc.
Navegador Opera® Copyright © 1995-2002 Opera Software ASA y sus proveedores. Todos los derechos reservados.
Macromedia Flash 8 utiliza tecnología de vídeo de On2 TrueMotion. © 1992-2005 On2 Technologies, Inc. Todos los derechos
reservados. http://www.on2.com.
Visual SourceSafe es una marca registrada o un marca comercial de Microsoft Corporation en Estados Unidos y/u otros países.
Copyright © 2005 Macromedia, Inc. Todos los derechos reservados. No se permite la copia, fotocopia, reproducción,
traducción ni la conversión en formato electrónico o legible por equipos, ya sea de forma total o parcial de este manual, sin
la autorización previa por escrito de Macromedia, Inc. No obstante, el propietario o usuario autorizado de una copia
válida del software con la que se proporcionó este manual puede imprimir una copia del manual a partir de una versión
electrónica del mismo, con el solo fin de aprender a usar dicho software, siempre que no se imprima, reproduzca, revenda
o transmita ninguna parte de este manual para cualquier otro propósito, incluidos, sin limitación, fines comerciales, como
la venta de copias de esta documentación o el suministro de servicios de soporte pagados.
Agradecimientos
Dirección del proyecto: Sheila McGinn
Redacción: Jay Armstrong, Jen deHaan
Dirección de la edición: Rosana Francescato
Editor jefe: Lisa Stanziano
Edición: Evelyn Eldridge, Mark Nigara, Lisa Stanziano, Anne Szabla
Dirección de la producción: Patrice O’Neill, Kristin Conradi, Yuko Yagi
Producción y diseño multimedia: Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo Noda,
Paul Rangel, Arena Reed, Mario Reynoso
Reconocimiento especial a Jody Bleyle, Mary Burger, Lisa Friendly, Stephanie Gowin, Bonnie Loo, Mary Ann Walsh, Erick Vera,
Jorge G. Villanueva, responsables de las pruebas realizadas a la versión beta, y a la totalidad de los equipos de diseño y control de
calidad de Flash y Flash Player.
Primera edición: septiembre de 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103, EE. UU.

3
Contenido
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Capítulo 1: Tareas básicas: creación de un documento . . . . . . . . 13
Visita guiada de la interfaz de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Cambio del fondo y el tamaño del escenario . . . . . . . . . . . . . . . . . . . . . . 17
Cambio de la vista del escenario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Visualización del panel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Adición de gráficos al escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Adición de vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Visualización de las propiedades del objeto. . . . . . . . . . . . . . . . . . . . . . 20
Adición de comportamientos de control de vídeo. . . . . . . . . . . . . . . . . . 21
Utilización del explorador de películas para ver la estructura del
documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Comprobación del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Búsqueda de ayuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Capítulo 2: Tareas básicas: creación de un anuncio para
Internet - Parte 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Creación de un documento nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Cambio de propiedades del documento . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Importación de gráficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Presentación de las capas y la línea de tiempo . . . . . . . . . . . . . . . . . . . 38
Comprobación de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Internet - Parte 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Adición de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Creación de un símbolo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Adición de animación a una línea de tiempo . . . . . . . . . . . . . . . . . . . . . 54
Creación de un botón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Creación de acciones sencillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

4 Contenido
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Internet - Parte 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Análisis del público al que va destinado . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Comprobación de la configuración de publicación . . . . . . . . . . . . . . . . 75
Inserción de Flash en un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . . 77
Utilización de edición conjunta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Comprobación de Flash Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Capítulo 5: Tareas básicas: creación de contenido accesible de
Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Cómo conseguir que los lectores de pantalla puedan acceder al
documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Cómo proporcionar un título y una descripción del documento . . . . . 87
Cómo proporcionar un título y una descripción para instancias . . . . . 88
Especificación de que los lectores de pantalla omitan los
elementos del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Cambio de texto estático por texto dinámico para obtener
accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90
Control del orden de tabulación y del orden de lectura. . . . . . . . . . . . . 91
Comprobación del documento con lectores de pantalla . . . . . . . . . . . 94
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Capítulo 6: Tareas básicas: trabajo con capas . . . . . . . . . . . . . . .95
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Selección de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Cómo ocultar y mostrar capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Bloqueo de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Adición de una capa y asignación de nombre. . . . . . . . . . . . . . . . . . . . . 99
Cambio del orden de las capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Organización de capas en una carpeta. . . . . . . . . . . . . . . . . . . . . . . . . . 100
Adición de una capa de máscara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Adición de una capa de guías . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Eliminación de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Contenido 5
Capítulo 7: Tareas básicas: creación de una aplicación. . . . . . .105
Configuración del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Copia de campos de introducción de texto y de texto dinámico . . . .106
Asignación de nombres a los campos de texto . . . . . . . . . . . . . . . . . . .107
Adición de un componente Button y asignación de un nombre . . . .108
Declaración de variables y valores de los precios. . . . . . . . . . . . . . . . .109
Especificación de valores de campos de introducción de texto . . . . 110
Creación de una función . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Escritura de un controlador de eventos para el componente . . . . . . . 112
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Capítulo 8: Tareas básicas: utilización de herramientas de
diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Configuración del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Utilización de guías para alinear un objeto . . . . . . . . . . . . . . . . . . . . . . . 117
Cambio del tamaño del escenario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Cambio del tamaño de los objetos para ajustarlo al tamaño del
escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Especificación de las opciones de alineación de ajuste . . . . . . . . . . . 119
Alineación de un objeto utilizando las guías de alineación . . . . . . . . .120
Alineación de objetos utilizando el panel Alinear . . . . . . . . . . . . . . . . . 121
Ajuste de objetos entre sí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Alineación de objetos mediante el inspector de propiedades . . . . . .122
Alineación de objetos utilizando la cuadrícula y las teclas de
flecha. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Capítulo 9: Tareas básicas: creación de símbolos e
instancias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Creación de símbolos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Creación de un símbolo gráfico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Duplicación y modificación de una instancia de un símbolo. . . . . . . .128
Modificación de un símbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
Creación de un símbolo de clip de película. . . . . . . . . . . . . . . . . . . . . . .130
Asignación de un nombre de instancia al clip de película . . . . . . . . . . 131
Adición de un efecto al clip de película . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132

6 Contenido
Capítulo 10: Tareas básicas: adición de animación y
navegación a botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Creación de un botón a partir de objetos agrupados. . . . . . . . . . . . . . 135
Asignación de un nombre a una instancia de botón . . . . . . . . . . . . . . 135
Visualización del área activa activando botones . . . . . . . . . . . . . . . . . 136
Cambio del área activa de un botón . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Alineación de botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Creación de animación para un estado de botón . . . . . . . . . . . . . . . . . 139
Adición de una acción a un botón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Adición de navegación a un botón. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141
Comprobación del archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Capítulo 11: Tareas básicas: creación de una presentación
con pantallas (sólo Flash Professional) . . . . . . . . . . . . . . . . . . . . 143
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Visualización de la jerarquía de pantallas y las líneas de
tiempo de las pantallas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Visualización de las propiedades de pantalla . . . . . . . . . . . . . . . . . . . . 146
Adición de contenido a una diapositiva de presentación . . . . . . . . . . 147
Adición de comportamientos de navegación por pantallas a
los botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Adición de una diapositiva y asignación de nombre . . . . . . . . . . . . . . 149
Selección y desplazamiento de diapositivas. . . . . . . . . . . . . . . . . . . . . 150
Adición de contenido a una nueva diapositiva . . . . . . . . . . . . . . . . . . . 150
Adición de comportamientos de transición . . . . . . . . . . . . . . . . . . . . . . .151
Comprobación de la presentación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Capítulo 12: Creación de gráficos: cómo dibujar en Flash. . . . . 153
Selección de una herramienta de forma. . . . . . . . . . . . . . . . . . . . . . . . . 155
Selección de opciones para crear un polígono. . . . . . . . . . . . . . . . . . . 156
Cómo dibujar un polígono . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Rotación de la forma. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Utilización de la función de silueta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Transformación de la forma del dibujo . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Copia de trazos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Cómo dibujar con la herramienta Línea . . . . . . . . . . . . . . . . . . . . . . . . . 159
Selección y adición de otro color de relleno . . . . . . . . . . . . . . . . . . . . . 159
Agrupación de la forma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Contenido 7
Creación de un logotipo con la herramienta Pluma . . . . . . . . . . . . . . .160
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162
Capítulo 13: Creación de gráficos: creación de una
animación de línea de tiempo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Creación de una interpolación de movimiento. . . . . . . . . . . . . . . . . . . .165
Creación de una interpolación de forma . . . . . . . . . . . . . . . . . . . . . . . . .166
Cómo copiar y pegar fotogramas clave en una animación . . . . . . . . .168
Cambio de la velocidad de la animación . . . . . . . . . . . . . . . . . . . . . . . . .169
Comprobación del archivo SWF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Capítulo 14: Creación de gráficos: creación de
animaciones con suavizado (sólo en Flash Professional). . . . . . 173
Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Comprobación de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189
Capítulo 15: Creación de gráficos: aplicación de degradados. . 191
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193
Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195
Aplicación de un degradado lineal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195
Creación de un degradado radial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198
Creación de una transformación de degradado con una forma. . . . 200
Aplicación de toques finales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .201
Comprobación de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Capítulo 16: Creación de gráficos: aplicación de filtros
gráficos y mezclas (sólo en Flash Professional) . . . . . . . . . . . . 207
Revisión de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Aplicación de filtros y mezclas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Capítulo 17: Texto: adición de texto a un documento . . . . . . . . . 213
Creación de un bloque de texto de anchura ampliable . . . . . . . . . . . .215
Creación de un bloque de texto de anchura fija. . . . . . . . . . . . . . . . . . .216
Edición de texto y cambio de atributos de fuente . . . . . . . . . . . . . . . . . 217
Selección de las fuentes de dispositivo. . . . . . . . . . . . . . . . . . . . . . . . . .218
Adición de un campo de introducción de texto . . . . . . . . . . . . . . . . . . .218
Copia de un campo de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

8 Contenido
Asignación de nombres de instancia a campos de texto . . . . . . . . . 220
Creación de un campo de texto dinámico . . . . . . . . . . . . . . . . . . . . . . . 221
Especificación de opciones de formato . . . . . . . . . . . . . . . . . . . . . . . . .222
Visualización de código ActionScript del campo de texto
dinámico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222
Comprobación del archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223
Revisión ortográfica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224
Capítulo 18: ActionScript: utilización del modo de
asistente de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . .227
Apertura del documento inicial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229
Adición de un script a un botón mediante el modo de
asistente de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229
Adición de scripts de fotogramas a la línea de tiempo
mediante el modo de asistente de script . . . . . . . . . . . . . . . . . . . . . . . .233
Adición de un script de fotograma al clip de película Title . . . . . . . . .237
Comprobación de la aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239
Capítulo 19: ActionScript: creación de scripts . . . . . . . . . . . . . . 241
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . .242
Creación de una instancia de un símbolo. . . . . . . . . . . . . . . . . . . . . . . .243
Asignación de nombres a instancias de botón . . . . . . . . . . . . . . . . . . 244
Inicialización del documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Aplicación de la sintaxis de ActionScript . . . . . . . . . . . . . . . . . . . . . . . .246
Localización de la documentación de referencia de
ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247
Adición de comentarios a ActionScript . . . . . . . . . . . . . . . . . . . . . . . . .247
Creación de una función para un botón . . . . . . . . . . . . . . . . . . . . . . . . .248
Copia y modificación de una función de botón . . . . . . . . . . . . . . . . . . 249
Comprobación de la sintaxis y la aplicación . . . . . . . . . . . . . . . . . . . . 250
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Capítulo 20: ActionScript: adición de interactividad . . . . . . . . 253
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Asignación de nombres a instancias de botón . . . . . . . . . . . . . . . . . . .255
Adición de una escena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255
Desplazamiento entre escenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256
Control del documento con una acción stop() . . . . . . . . . . . . . . . . . . .256

Contenido 9
Vinculación de un botón a una escena . . . . . . . . . . . . . . . . . . . . . . . . . 257
Adición de navegación para volver a la escena 1. . . . . . . . . . . . . . . . . 257
Reproducción de un clip de película. . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Utilización de un comportamiento para reproducir un
archivo MP3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261
Comprobación del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Capítulo 21: ActionScript: creación de un formulario
con lógica condicional y envío de datos . . . . . . . . . . . . . . . . . . . 263
Configuración del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Adición de un campo de introducción de texto para
recopilar datos de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Adición de un botón de envío al formulario. . . . . . . . . . . . . . . . . . . . . . 266
Adición de un mensaje de error. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Adición de un mensaje de confirmación . . . . . . . . . . . . . . . . . . . . . . . . 267
Adición de una acción stop() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Adición de etiquetas de fotogramas para navegación . . . . . . . . . . . . 269
Adición de lógica condicional para el botón Enviar . . . . . . . . . . . . . . 270
Pasar datos de un archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Función para el botón Intentar de nuevo. . . . . . . . . . . . . . . . . . . . . . . . 272
Comprobación del archivo SWF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Capítulo 22: ActionScript: trabajo con objetos y clases . . . . . 275
Configuración del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Información sobre clases y tipos de objetos. . . . . . . . . . . . . . . . . . . . . 276
Creación de un objeto a partir de una clase . . . . . . . . . . . . . . . . . . . . . 277
Creación de una clase personalizada. . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Creación de dos objetos a partir de la clase Product . . . . . . . . . . . . . 283
Información sobre la ampliación de las clases existentes . . . . . . . . . 284
Ampliación de la clase MovieClip para crear una clase nueva . . . . . 285
Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Capítulo 23: Integración de datos: información general
(sólo en Flash Professional) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Capítulo 24: Integración de datos: utilización del servicio
Web Macromedia Tips (sólo en Flash Professional) . . . . . . . . . 289
Conexión a un servicio Web público . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Creación de una interfaz de usuario y vinculación de los
componentes con el servicio Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

10 Contenido
Capítulo 25: Integración de datos: utilización de XML para
una hoja Timesheet (sólo en Flash Professional) . . . . . . . . . . . 299
Creación de la interfaz de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Edición de los datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307
Capítulo 26: Integración de datos: utilización de XUpdate
para actualizar la hoja Timesheet (sólo en Flash Professional) 309
Actualización de la timesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

11
Introducción
En esta parte de la Ayuda de Flash se incluyen varios tutoriales detallados
diseñados para enseñarle los aspectos básicos del funcionamiento de Flash.
Macromedia recomienda que siga las lecciones utilizando los archivos de
muestra proporcionados. Las rutas correspondientes a los archivos de
muestra aparecen en cada lección.
Cuando complete estas lecciones prácticas, habrá aprendido a utilizar Flash
para añadir texto, gráficos y animaciones a las aplicaciones de Flash.
Asimismo, aprenderá lo fácil que resulta personalizar la aplicación de Flash
mediante ActionScript y comportamientos.
Las lecciones están pensadas tanto para usuarios sin experiencia como para
diseñadores y desarrolladores de nivel intermedio que desean ponerse al día
rápidamente.
Cada lección se centra en una función o un tema de diseño específicos de
Flash. Para completarlas, calcule entre 10 y 20 minutos en función de su
experiencia. En estas lecciones, aprenderá a crear documentos de Flash,
escribir código ActionScript, trabajar con vídeo y con comportamientos de
control de vídeo, así como añadir componentes de Flash.
NOTA
Este manual no pretende ser una referencia con información detallada
sobre todas las funciones de Macromedia Flash. Para obtener
información detallada sobre la utilización de Flash, desde la aplicación
Flash, seleccione Ayuda de Flash (Ayuda > Ayuda de Flash).

13
1
CAPÍTULO 1
Tareas básicas: creación
de un documento
En esta lección va a conocer las posibilidades de Macromedia Flash Basic 8
y Macromedia Flash Professional 8. Verá cómo, en cuestión de minutos, se
puede crear un diseño Web convincente donde se combinen
comportamientos de control de vídeo, texto, gráficos y multimedia.
Puede imprimir este tutorial descargando una versión PDF del mismo de la
página de documentación de Macromedia Flash que encontrará en
www.macromedia.com/go/fl_documentation_es.
En este tutorial, llevará a cabo las siguientes tareas:
Visita guiada de la interfaz de usuario . . . . . . . . . . . . . . . . . . . . . . . . 14
Selección de conjuntos de paneles y organización de paneles. . 15
Cambio del fondo y el tamaño del escenario . . . . . . . . . . . . . . . . . . .17
Cambio de la vista del escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Visualización del panel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Adición de gráficos al escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Adición de vídeo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Visualización de las propiedades del objeto . . . . . . . . . . . . . . . . . .20
Adición de comportamientos de control de vídeo . . . . . . . . . . . . . 21
Utilización del explorador de películas para ver la estructura del
documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Comprobación del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Búsqueda de ayuda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Antes de comenzar esta lección, es recomendable que lea la guía Primeros
pasos con Flash para obtener información sobre el espacio de trabajo de
Flash. Para acceder a esta guía, seleccione Ayuda > Primeros pasos con
Flash.

14 Tareas básicas: creación de un documento
Visita guiada de la interfaz de
usuario
En primer lugar, abra el archivo FLA inicial que va a utilizar para completar
esta lección. Cada lección incluye un archivo inicial y un archivo
terminado que muestra cómo debe aparecer el archivo FLA al finalizar las
lecciones.
1. Para abrir el archivo inicial, en Flash, seleccione Archivo > Abrir y
desplácese hasta el archivo:
■ En Windows, desplácese hasta unidad de inicioArchivos de
programaMacromediaFlash 8Samples and TutorialsTutorial
AssetsBasic TasksCreate a Document y haga doble clic en
document_start.fla.
■ En Macintosh, desplácese hasta Disco duro de Macintosh/
Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial
Assets/Basic Tasks/Create a Document y haga doble clic en
document_start.fla.
El documento se abre en el entorno de edición de Flash. El documento
ya incluye dos capas en la línea de tiempo. Para más información sobre
capas, seleccione Ayuda > Tutoriales de Flash > Conceptos básicos de
Flash > Trabajo con capas.
Una de las capas se denomina Guías y contiene elementos que le
ayudarán a colocar objetos correctamente en el escenario. La otra capa
se llama Contenido. Se trata de la capa en la que se colocan los objetos
que compondrán el documento.
2. Seleccione Archivo > Guardar como y guarde el documento con un
nombre nuevo, en la misma carpeta, para conservar el archivo inicial
original.
Mientras vaya completando esta lección, recuerde que debe guardar su
trabajo con frecuencia.
NOTA
La carpeta Create a Document contiene las versiones completas de los
archivos FLA del tutorial como referencia.

Visita guiada de la interfaz de usuario 15
Selección de conjuntos de paneles y
organización de paneles
El conjunto de paneles de espacio de trabajo Predeterminado organiza el
espacio de trabajo de forma que facilita el seguimiento de las lecciones.
Va a utilizar este diseño en todas las lecciones de Flash.
■ Seleccione Ventana > Conjuntos de paneles > Predeterminado.
Puede cambiar los paneles de posición y modificar su tamaño, como se
indica a continuación:
■ Para desacoplar un panel, haga clic en la esquina superior izquierda
del panel, en la barra de título, y arrastre el panel hasta otra
ubicación del espacio de trabajo.
Si el panel se ajusta a un borde, está acoplado en una ubicación
nueva (o está anclado en la misma ubicación, si lo ha movido hacia
atrás). En caso contrario, el panel no está acoplado.
■ Para cambiar el tamaño de un panel desacoplado, arrastre hacia
fuera el borde inferior derecho para agrandar el panel.
Utilización de herramientas para crear
contenido de Flash
En el área rectangular blanca del escenario debe organizar los objetos tal
como quiere que aparezcan en el archivo publicado.
El panel Herramientas, situado junto al escenario, ofrece diversos controles
que permiten crear texto e ilustraciones vectoriales. Para más información
sobre el panel Herramientas, seleccione Ayuda > Tutoriales de Flash >
Creación de gráficos: Cómo dibujar en Flash y Ayuda > Tutoriales de Flash
> Texto: Adición de texto a un documento.
1. Haga clic en la herramienta Lápiz del panel Herramientas. Haga clic en
el cuadro Color de trazo, en el área Colores del panel Herramientas y
seleccione cualquier color excepto el blanco.
2. Arrastre alrededor del escenario, sin soltar el ratón, para dibujar una
línea.
Ha creado contenido de Flash. Cuando el documento esté terminado,
será digno de admiración.
NOTA
Se pueden abrir varios documentos al mismo tiempo y utilizar las fichas de
documento, situadas encima del escenario, para navegar por ellas.

Cómo deshacer cambios
Flash puede deshacer una serie de cambios realizados en el documento.
Ahora va a deshacer la ilustración que acaba de crear.
1. Para ver la función Deshacer en acción, abra primero el panel Historial
(Ventana > Otros paneles > Historial).
La herramienta Lápiz aparece en el panel, puesto que la utilización de la
herramienta ha sido la última acción.
2. Siga uno de estos procedimientos:
■ Seleccione Edición > Deshacer Lápiz.
■ Presione las teclas Control+Z (Windows) o Comando+Z
(Macintosh).
Los garabatos desaparecen del escenario. En el panel Historial se
muestra ahora una herramienta Lápiz atenuada, que indica que se ha
ejecutado la acción de deshacer.
De forma predeterminada, Flash se define para deshacer 100 cambios
realizados por el usuario, en orden inverso de ejecución. El valor
predeterminado se puede cambiar en Preferencias. Para cambiar las
preferencias, consulte “Establecimiento de preferencias en Flash” en
Primeros pasos con Flash.
3. Para cerrar el panel Historial, haga clic en el menú emergente situado en
la esquina superior derecha del panel y seleccione Cerrar panel.
Visualización de la línea de tiempo
Justo encima del escenario se pueden ver la línea de tiempo y las capas.
Puede crear capas y asignarles nombres y, a continuación, añadir contenido
a los fotogramas de las capas para organizar cómo se reproduce el
contenido de Flash conforme la cabeza lectora se mueve por los
fotogramas.

Cambio del fondo y el tamaño del escenario 17
■ Mueva el puntero del ratón sobre el área que separa el escenario de la
línea de tiempo. Cuando aparezca un selector de cambio de tamaño,
arrástrelo ligeramente hacia arriba o hacia abajo para cambiar el tamaño
de la línea de tiempo según sea necesario.
La cabeza lectora (línea del indicador rojo) está en el fotograma 1 de la
línea de tiempo. Los fotogramas clave se detectan mediante círculos
pequeños en los fotogramas, que están rellenos, lo que indica que esos
fotogramas disponen de contenido. Se puede añadir un fotograma clave
a un documento si se desea que el contenido de Flash cambie de alguna
forma en ese fotograma.
Cambio del fondo y el tamaño del
escenario
El escenario proporciona una vista previa de cómo aparecerá el contenido
de Flash en su archivo publicado. Va a cambiar el tamaño del escenario
para acomodar la ilustración diseñada para un escenario más grande y, a
continuación, va a cambiar el color de fondo del escenario.
1. En el panel Herramientas, haga clic en la herramienta Selección.
2. En el escenario, haga clic en cualquier parte del espacio de trabajo gris
que rodea el escenario, o en el área de fondo del escenario, de forma que
no se seleccione ningún objeto.
El inspector de propiedades, debajo del escenario, muestra las
propiedades del documento si no se ha seleccionado ningún objeto.
3. Para cambiar el color de fondo del escenario, haga clic en el cuadro
Color de relleno y seleccione una sombra clara de gris, como el gris con
el valor hexadecimal #CCCCCC.
Selector de cambio de tamaño
Cabeza lectora
Fotograma clave

4. Para cambiar el tamaño del escenario, haga clic en Tamaño en el
inspector de propiedades. En el cuadro de diálogo Propiedades del
documento, introduzca 750 para la anchura del escenario y, a
continuación, haga clic en Aceptar.
El escenario pasa a tener una anchura de 750 píxeles.
Cambio de la vista del escenario
La vista del escenario se puede cambiar sin que afecte al tamaño real del
escenario del documento.
1. En el cuadro de texto Ver del escenario, sobre el lado derecho del
escenario, introduzca 500%. A continuación, presione Intro (Windows)
o Retorno (Macintosh).
La vista del escenario aumenta un 500%.
2. En el menú emergente Ver del escenario, al que se accede haciendo clic
en el control situado a la derecha del cuadro de texto, seleccione 100%
para ver el escenario en las dimensiones que correspondan al tamaño del
contenido de Flash publicado.
Visualización del panel
Biblioteca
El contenido de Flash que se importa o que es un símbolo se almacena en el
panel Biblioteca. Para más información sobre los símbolos y las instancias,
seleccione Ayuda > Tutoriales de Flash > Tareas básicas: Creación de
símbolos e instancias.
■ Para ver el panel Biblioteca, seleccione Ventana > Biblioteca.
Ya se han importado los elementos de biblioteca y se han creado los
símbolos de los objetos que va a utilizar en esta lección.
NOTA
Flash también contiene una biblioteca de botones que se pueden utilizar
en el documento. Para ver esta biblioteca al final de la lección, seleccione
Ventana > Bibliotecas comunes y seleccione la biblioteca Botones.

Adición de vídeo 19
Adición de gráficos al escenario
Para añadir elementos de biblioteca al documento, compruebe que está
añadiendo el objeto a la capa correcta y, a continuación, arrastre el
elemento desde el panel Biblioteca hasta el escenario.
1. En la línea de tiempo, haga clic en el nombre de la capa Contenido para
seleccionar esa capa. Con la herramienta Selección activada, arrastre el
clip de película Título, que contiene una imagen de mapa de bits y un
gráfico vectorial, del panel Biblioteca al escenario y alinéelo sobre la
barra gris situada en la parte superior del escenario que contiene la
palabra Título.
En Flash, se puede trabajar con imágenes de mapas de bits (describen
gráficos que utilizan píxeles) y también con ilustraciones vectoriales
(utilizan representación matemática para describir la ilustración). Para
más información, consulte “About vector and bitmap graphics” en el
apartado Utilización de Flash.
2. Con la capa Content todavía seleccionada, arrastre el símbolo de texto
del panel Biblioteca al escenario y alinéelo con el texto Trio ZX2004 que
se muestra como guía. Puede utilizar las teclas de flecha del teclado para
desplazar el texto hasta su posición.
El texto del título es de hecho un gráfico creado a partir de texto.
Adición de vídeo
El panel Biblioteca incluye un archivo de vídeo Flash (FLV) importado.
Añadirá el vídeo al documento y Flash añadirá los fotogramas necesarios
para reproducir el vídeo.
Para más información sobre la utilización de vídeo en Flash, consulte el
“Trabajo con vídeo” en Utilización de Flash.
1. Verifique que la capa Contenido siga seleccionada en la línea de tiempo.
Desde el panel Biblioteca, arrastre el vídeo ggb_movie_for_trio_new
hasta la guía de vídeo de color gris oscuro del escenario.
2. Aparece un cuadro de diálogo que indica que Flash añadirá 138
fotogramas a la línea de tiempo para el vídeo. Haga clic en Sí.
3. Arrastre la cabeza lectora por la línea de tiempo para ver el vídeo.

Visualización de las propiedades
del objeto
Después de añadir un objeto al escenario, se puede seleccionar para ver y
cambiar sus propiedades en el inspector de propiedades. El tipo de objeto
seleccionado determina las propiedades que aparecen. Por ejemplo, si se
selecciona un objeto de texto (no un gráfico de texto, ya que se utiliza en
esta lección), el inspector de propiedades muestra los valores de fuente,
tamaño de fuente y formato de párrafo que se pueden ver o cambiar. Si no
se selecciona ningún objeto, el inspector de propiedades muestra las
propiedades de todo el documento.
1. En el escenario, con la herramienta Selección activada, haga clic en el
gráfico Título.
El inspector de propiedades (Ventana > Propiedades > Propiedades)
muestra las especificaciones (altura, anchura y coordenadas del
escenario) del clip de película.
2. En el escenario, haga clic en el recuadro de delimitación del clip de
película del vídeo que ha arrastrado hasta el escenario y vea los atributos
en el inspector de propiedades.
3. En el cuadro de texto Nombre de instancia del inspector de propiedades,
introduzca video como nombre de la instancia.
NOTA
Una instancia representa la existencia de un símbolo en el escenario.
Puesto que ActionScript, el lenguaje de scripts de Flash, hace referencia a
menudo a nombres de instancias para realizar operaciones en ellas, es
aconsejable asignar nombres a las instancias creadas. Para más
información sobre cómo asignar nombres a las instancias, consulte el
tutorial: “ActionScript: creación de scripts” en la página 241.

Adición de comportamientos de control de vídeo 21
Adición de comportamientos de
control de vídeo
Los comportamientos permiten añadir funciones complejas al documento
con facilidad, sin necesidad de conocer ActionScript, el lenguaje de
creación de scripts de Flash. Ahora va a añadir comportamientos para
controlar el vídeo.
1. En la línea de tiempo, haga clic en el fotograma 1 de la capa Contenido
para seleccionarlo, si todavía no está seleccionado.
2. En el escenario, haga clic en la instancia Reproducir clip de película (que
se asemeja a un botón de reproducción) para seleccionarla. En el panel
Comportamientos (Ventana > Comportamientos), haga clic en Añadir
(+) y seleccione Vídeo incorporado > Reproducir. Para más
información sobre los símbolos y las instancias, seleccione Ayuda >
Tutoriales de Flash > Tareas básicas: Creación de símbolos e instancias.
3. En el cuadro de diálogo Reproducir vídeo, compruebe que Relativo está
seleccionado. Seleccione video, que es el nombre de instancia que ha
asignado al clip de vídeo, y haga clic en Aceptar.
4. En el escenario, haga clic en la instancia Pausar clip de película para
seleccionarla. En el panel Comportamientos, haga clic en Añadir (+) y
seleccione Vídeo incorporado > Pausar.
5. En el cuadro de diálogo Pausar vídeo, seleccione de nuevo el clip de
película video y haga clic en Aceptar.

6. En el escenario, haga clic en la instancia Rebobinar clip de película para
seleccionarla. En el panel Comportamientos, haga clic en Añadir (+) y
seleccione Vídeo incorporado > Rebobinar.
7. En el cuadro de diálogo Rebobinar vídeo, seleccione Vídeo.
8. En el cuadro de texto Especifique el número de fotogramas que debe
retroceder el vídeo:, introduzca 20.
El cuadro de texto Especifique el número de fotogramas que debe
retroceder el vídeo: indica cuántos fotogramas debe retroceder la cabeza
lectora cuando el usuario hace clic en el botón Rebobinar.
Utilización del explorador de
películas para ver la estructura
del documento
El explorador de películas ayuda a organizar, localizar y editar medios. La
estructura de árbol jerárquica proporciona información sobre la
organización y el flujo de un documento.
1. Seleccione Ventana > Explorador de películas.
Si es necesario, amplíe el explorador de películas para ver la estructura
de árbol dentro del panel.
Los botones de filtrado del explorador de películas muestran u ocultan
información.
2. Haga clic en el menú emergente de la barra de título del explorador de
películas y seleccione las opciones Mostrar elementos de película y
Mostrar definiciones de símbolo, si aún no están seleccionadas.
3. Configure los botones de filtro, en la parte superior del explorador de
películas, de modo que los únicos que estén seleccionados sean Mostrar
botones, clips de película y gráficos, Mostrar archivos de comando de
acción y Mostrar vídeo, sonidos y mapas de bits.
Si mueve el puntero del ratón sobre un botón, aparece una sugerencia
que muestra el nombre del botón.
Examine la lista para ver algunos elementos incluidos en el documento
y sus relaciones con otros elementos.
NOTA
Otros comportamientos de control de vídeo permiten avanzar
rápidamente, ocultar y mostrar un vídeo.

Búsqueda de ayuda 23
4. En el panel Explorador de películas, expanda Acciones para play a fin de
ver el código ActionScript que Flash ha creado al añadir el
comportamiento del control Reproducir vídeo.
5. Para cerrar el explorador de películas, haga clic en su cuadro de cierre.
Comprobación del documento
Al crear un documento, debe guardarlo y probarlo con frecuencia para
asegurarse de que el contenido de Flash se reproduce de la forma deseada.
Cuando pruebe el archivo SWF, haga clic en los botones de control de
vídeo para ver si el vídeo se detiene, se reproduce y se rebobina como se
esperaba.
1. Guarde el documento (Archivo > Guardar) y seleccione Control >
Probar película.
El contenido de Flash se reproduce en una ventana de archivo SWF.
Aunque .fla es la extensión de los documentos del entorno de edición,
.swf es la extensión del contenido de Flash probado, exportado
y publicado.
2. Cuando haya terminado de ver el contenido SWF, cierre la ventana del
archivo SWF para volver al entorno de edición.
Búsqueda de ayuda
Las lecciones proporcionan una introducción a Flash y sugieren formas de
utilizar las funciones para crear exactamente el tipo de documento deseado.
Para obtener información completa sobre una función, un procedimiento o
un proceso descrito en las lecciones, consulte la ficha Ayuda del panel
Ayuda (Ayuda > Flash Ayuda).

Resumen
¡Enhorabuena! Ha creado un documento de Flash que incluye gráficos, un
vídeo y comportamientos de control de vídeo. En unos minutos ha
aprendido a realizar las tareas siguientes:
■ Visita guiada de la interfaz de usuario
■ Cómo acoplar y desacoplar paneles
■ Cambio del fondo y el tamaño del escenario
■ Cambio de la vista del escenario
■ Visualización de la biblioteca del documento
■ Adición de gráficos al escenario
■ Adición de vídeo
■ Visualización de las propiedades del objeto
■ Adición de comportamientos de control de vídeo
■ Utilización del explorador de películas para ver la estructura del
documento
■ Comprobación del documento
■ Búsqueda de ayuda
Para más información sobre Flash, continúe con otra lección.

25
2
CAPÍTULO 2
Tareas básicas: creación de un
anuncio para Internet - Parte 1
Macromedia Flash Basic 8 o Macromedia Flash Professional 8 pueden
parecer programas muy difíciles de aprender. Uno de los motivos de esta
aparente complejidad reside en que se puede utilizar para muchas cosas
distintas, como la creación de animaciones de dibujos, reproductores de
medios y programas más sofisticados. Este tutorial está recomendado si es
la primera vez que utiliza Flash 8. En él se muestran varios aspectos
fundamentales del programa, así como el modo de empezar a aprender a
utilizarlos para crear un proyecto real. No necesita ningún conocimiento
previo sobre Flash ni animaciones para realizar este tutorial; de hecho,
descubrirá lo sencillo que es comenzar a utilizar Flash 8 para añadir
elementos a las páginas Web.
Ésta es la primera parte de un tutorial dividido en tres partes que muestra
cómo crear un sencillo anuncio animado para Internet en Flash y añadirlo a
una página Web con Macromedia Dreamweaver. En la primera parte,
aprenderá a crear un archivo y modificar sus parámetros, importar y añadir
gráficos en el escenario desde la biblioteca y crear capas. En la segunda y la
tercera parte, añadirá una animación y creará un botón para abrir una
ventana del navegador. Posteriormente, especificará la configuración de
publicación y añadirá el anuncio para Internet en una página Web.
“Tareas básicas: creación de un anuncio para Internet - Parte 1” en
la página 25: aprenderá a crear y estructurar la aplicación del anuncio para
Internet.
la página 45: aprenderá a añadir animaciones, crear un botón y escribir
scripts básicos.
la página 69: aprenderá a publicar el archivo SWF y a insertarlo en un sitio
Web de Dreamweaver.

26 Tareas básicas: creación de un anuncio para Internet - Parte 1
No se necesita ningún conocimiento previo para realizar estos tutoriales.
En la primera parte de este tutorial, llevará a cabo las siguientes tareas:
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . .26
Creación de un documento nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Cambio de propiedades del documento . . . . . . . . . . . . . . . . . . . . . . 31
Importación de gráficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Presentación de las capas y la línea de tiempo . . . . . . . . . . . . . . . .38
Comprobación de la aplicación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
El flujo de trabajo del tutorial incluye las siguientes tareas:
■ “Examen del archivo FLA finalizado” en la página 26 permite visualizar
el documento Flash finalizado.
■ “Creación de un documento nuevo” en la página 29 muestra cómo
crear un archivo FLA que utilizará para crear el anuncio para Internet
en las tres partes de este tutorial.
■ “Cambio de propiedades del documento” en la página 31 muestra
cómo cambiar las dimensiones del archivo SWF.
■ “Importación de gráficos” en la página 35 muestra cómo importar
activos en la biblioteca de documentos.
■ “Presentación de las capas y la línea de tiempo” en la página 38 muestra
cómo crear y manipular capas en la línea de tiempo principal.
■ “Comprobación de la aplicación” en la página 43 muestra cómo
exportar y comprobar el archivo SWF del documento, lo que le
permitirá comprobar cuánto ha progresado.
Examen del archivo FLA
finalizado
Mientras examina la versión finalizada de la aplicación que va a crear,
también deberá fijarse en el espacio de trabajo de Flash.
En esta sección, llevará a cabo las siguientes tareas:
■ “Apertura del documento de edición” en la página 175
■ “Revisión del archivo FLA finalizado” en la página 28
■ “Cierre del archivo FLA finalizado” en la página 29
En las secciones posteriores seguirá los pasos necesarios para crear su propia
aplicación comenzando desde un archivo FLA totalmente nuevo.

Examen del archivo FLA finalizado 27
Apertura del archivo FLA finalizado
Resulta útil analizar el documento de edición finalizado, que es un archivo
FLA, para ver cómo ha diseñado el autor la aplicación. Deberá examinar
qué tipos de scripts se utilizaron para añadir interactividad y saber qué es lo
que va a crear.
Los archivos de este tutorial se encuentran en la carpeta Samples and
Tutorials de la carpeta de instalación de Flash. Para un gran número de
usuarios, sobre todo del ámbito académico, esta carpeta es de sólo lectura.
Antes de realizar el tutorial, debe copiar toda la carpeta de tutorial
FlashBanner en la ubicación de escritura que elija.
En la mayoría de los ordenadores, la carpeta de tutorial Flash Banner se
encuentra en las siguientes ubicaciones:
■ En Windows: unidad de inicioArchivos de
AssetsBasic TasksFlashBanner.
■ En Macintosh: Disco duro de Macintosh/Applications/Macromedia
Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/
FlashBanner/.
Copie la carpeta FlashBanner en otra ubicación del disco duro a la que
tenga acceso. Dentro de esta carpeta encontrará tres directorios para cada
parte de este tutorial: Part1, Part2 y Part3. En la carpeta FlashBanner/
Part1, encontrará un archivo Flash llamado banner1_complete.fla. Haga
doble clic en él para abrirlo en Flash. Aparecerá el archivo de tutorial
finalizado en el entorno de edición de Flash.

Revisión del archivo FLA finalizado
En el archivo FLA finalizado, verá la estructura que conforma el archivo
SWF finalizado para la primera parte de este tutorial. La aplicación, un
anuncio para Internet de Flash para un sitio Web de gnomos, tiene el
siguiente aspecto tras finalizar la primera parte:
Anuncio para Internet finalizado tras concluir la primera parte.
Cuando haya terminado la tercera parte de este tutorial, añadirá gráficos,
animación e interactividad al anuncio. Posteriormente, lo insertará en un
sitio Web con Dreamweaver.

Creación de un documento nuevo 29
Cierre del archivo FLA finalizado
Para cerrar el documento, seleccione Archivo > Cerrar.
Si prefiere mantener el archivo finalizado abierto como referencia mientras
trabaja con el archivo del anuncio, cerciórese de no editar ni guardar los
cambios realizados.
Ahora ya puede empezar a crear su propio archivo de anuncio para Internet
en la siguiente sección, “Creación de un documento nuevo”.
Creación de un documento
nuevo
Puede crear todo tipo de elementos distintos para la Web o para CD-ROM
y dispositivos que utilizan Flash 8. En primer lugar, creará un archivo con
la herramienta de creación de Flash que se utiliza para crear archivos SWF.
Los archivos SWF son archivos que pueden colocarse en línea al insertarlos
en una página Web. El complemento de Macromedia Flash Player
mostrará el archivo SWF para que los visitantes del sitio Web puedan verlo
o interactuar con el contenido.
El archivo SWF puede contener vídeo, sonidos en MP3, animaciones,
imágenes, datos, etc. La ventaja de utilizar un archivo SWF y no otros
formatos reside en que el complemento de Flash Player está increíblemente
extendido. Comencemos con la creación de un anuncio para Internet.
1. Abra la aplicación de Flash.

De forma predeterminada, Flash muestra la página de inicio (véase la
imagen siguiente), que permite seleccionar documentos editados
recientemente, crear un nuevo documento Flash o un archivo
ActionScript, o bien crear un documento nuevo a partir de una
plantilla creada previamente. Si utiliza Flash Professional 8, podrá crear
incluso más tipos de archivos.
De forma predeterminada, Flash muestra la página de inicio al abrir la
aplicación. Esta imagen refleja las opciones disponibles en Flash
Professional 8.
2. Haga clic en Documento de Flash en la columna Crear nuevo de la
página de inicio para crear un documento vacío.
3. Seleccione Archivo > Guardar como en el menú principal.
NOTA
Si Flash no muestra la página de inicio (es posible que alguien haya
desactivado esta función si comparte el ordenador con otros usuarios),
puede seleccionar Archivo > Nuevo en el menú principal para crear un
documento nuevo. Asegúrese de que la ficha General esté activa,
seleccione Documento de Flash y haga clic en Aceptar.

Cambio de propiedades del documento 31
4. Déle al archivo el nombre banner.fla, busque o cree un nuevo directorio
para guardar el proyecto y, cuando haya terminado, haga clic en
Guardar.
Flash guarda los documentos editables como archivos FLA. Desde el
archivo FLA puede exportar (o compilar) archivos SWF para, después,
incorporarlos en una página HTML. Flash Player, herramienta
instalada en la mayoría de los ordenadores, reproduce los archivos SWF
exportados desde Flash.
Una vez guardado el archivo, continúe con el siguiente ejercicio, “Cambio
de propiedades del documento”.
Cambio de propiedades del
documento
En este momento tendrá delante un lienzo vacío rodeado de varios
controles (véase la imagen siguiente). El cuadrado grande de color blanco
recibe el nombre de escenario y en él se insertan los activos que quiera
mostrar en el archivo SWF, como imágenes, botones, texto o animaciones.
El escenario y los paneles suelen recibir el nombre de espacio de trabajo de
Flash o entorno de edición. El entorno de Flash está formado por el
escenario y distintos paneles, herramientas y la línea de tiempo situada en
la parte superior. Para más información sobre cada una de las secciones del
espacio de trabajo, consulte “Visita guiada de la interfaz de usuario” en
la página 14.
NOTA
Es recomendable guardar un nuevo documento cuando se empieza a
trabajar con él (y con mayor frecuencia una vez empezado) para no perder
el trabajo realizado.

Verá que, alrededor del escenario, hay varios paneles. El panel de la
izquierda se denomina panel Herramientas (véase la imagen siguiente).
Este panel contiene herramientas que puede utilizar para crear y modificar
documentos como, por ejemplo, herramientas para dibujar y realizar
selecciones.
Utilice el panel Herramientas para dibujar y realizar selecciones. En estos
tutoriales, utilizaremos la herramienta Selección (la flecha negra) para realizar
selecciones.
El panel situado en la parte inferior de la aplicación de Flash recibe el
nombre de Propiedades. (Seleccione Ventana > Propiedades > Propiedades
si no puede ver el panel.) Este panel recibe el nombre de inspector de
propiedades (véase la imagen siguiente). En el panel es posible cambiar
distintas propiedades de los elementos seleccionados en el documento (por
ejemplo, una imagen o un fotograma), o bien definir todas las propiedades
del archivo SWF (por ejemplo, la velocidad de fotogramas o las
dimensiones). Para más información sobre el modo de controlar la
velocidad de fotogramas de un documento, consulte “Cambio de la
velocidad de fotogramas por segundo” en la página 170.

Cambio de propiedades del documento 33
Si no ha seleccionado ningún objeto o fotograma, el inspector de
propiedades permite modificar las propiedades del propio documento.
1. Abra el inspector de propiedades (Ventana > Propiedades >
Propiedades) y haga clic en el botón situado junto al texto Tamaño para
abrir el cuadro de diálogo Propiedades del documento.
Haga clic en el botón del inspector de propiedades para abrir el cuadro de
diálogo Propiedades del documento. Una vez en el cuadro de diálogo podrá
cambiar el tamaño y el color del escenario.
El botón refleja las dimensiones actuales del archivo FLA (550 x 400
píxeles). De forma predeterminada, el tamaño del escenario de un
documento Flash nuevo tiene 550 píxeles de ancho por 400 píxeles de
alto. Al hacer clic en Tamaño, se abre un cuadro de diálogo en el que es
posible modificar algunas de la propiedades que afectan a todo el
documento (por ejemplo, las dimensiones del escenario, el color y la
velocidad de fotogramas del documento).
NOTA
Verifique que no hay ningún fotograma seleccionado. Haga clic en el
escenario si no logra ver el botón mencionado en el paso anterior.

2. Escriba 160 en el cuadro de texto de la anchura y 600 en el cuadro de
texto de la altura.
Mediante la introducción de nuevos valores en estos cuadros de texto,
lo que se consigue es cambiar el tamaño de las dimensiones del archivo
FLA. Es preciso utilizar estas dimensiones concretas, ya que vamos a
crear un anuncio para Internet y debemos utilizar un tamaño de
anuncio estándar. En este tutorial va a crear un “rascacielos ancho”.
Para obtener una lista de los tamaños normalizados de anuncios para
Internet, vaya a la página de la Agencia de publicidad interactiva de las
medidas IMU (Interactive Marketing Units) en www.iab.net/
standards/adunits.asp.
3. Para volver al entorno de edición, haga clic en Aceptar cuando haya
terminado de introducir las nuevas dimensiones.
Una vez de vuelta en el entorno de edición, observe cómo han
cambiado las dimensiones del documento. También puede cambiar el
color de fondo del documento actual y la velocidad de fotogramas
directamente en el inspector de propiedades, sin tener que acceder al
cuadro de diálogo Propiedades del documento. Encontrará toda la
información relativa a la velocidad de fotogramas en la segunda parte
de este tutorial, “Tareas básicas: creación de un anuncio para Internet -
Parte 2” en la página 45.
4. Seleccione Archivo > Guardar para guardar el documento antes de
continuar con la sección siguiente (“Importación de gráficos”).
NOTA
También puede crear anuncios para Internet a partir de una plantilla de
Macromedia seleccionando Archivo > Nuevo en el menú principal.
Seleccione la ficha Plantillas y, después, la categoría Publicidad.

Importación de gráficos 35
Importación de gráficos
Cuando se trabaja con Flash, a menudo se importan activos al documento.
Tal vez tenga un logotipo de empresa o un gráfico que el diseñador le ha
suministrado para el trabajo. Puede importar varios activos en Flash,
incluidos archivos de sonido, vídeo, imágenes de mapa de bits y otros
formatos de gráfico (como PNG, JPEG, AI o PSD).
Los gráficos importados se guardan en la biblioteca del documento. La
biblioteca almacena tanto los activos importados en el documento como
los símbolos creados con Flash. Un símbolo es un gráfico vectorial, un
botón, una fuente, un componente o un clip de película que se crea una vez
y se puede volver a utilizar varias veces.
De este modo, no es necesario que dibuje sus propios gráficos en Flash:
puede importar la imagen predibujada de un gnomo desde el archivo de
origen del tutorial. Antes de seguir, verifique que ha guardado los archivos
de origen de este tutorial tal como se describe en “Apertura del archivo FLA
finalizado” y que ha guardado las imágenes en el mismo directorio que el
archivo banner.fla.
1. Seleccione Archivo > Importar > Importar a biblioteca para importar
una imagen al documento actual.
Verá el cuadro de diálogo Importar (véase la imagen siguiente), desde el
cual puede desplazarse hasta el archivo que desea importar.
Desplácese hasta la carpeta del disco duro en la que se encuentra la imagen
que desea importar al documento de Flash.

2. Navegue hasta el directorio en el que guardó los archivos de origen del
tutorial y localice la imagen de mapa de bits guardada en el directorio
FlashBanner/Part1.
3. Seleccione la imagen gnome.png y haga clic en Abrir (Windows) o en
Importar (Macintosh).
La imagen se importará a la biblioteca del documento.
4. Seleccione Ventana > Biblioteca para abrir el panel Biblioteca.
Verá la imagen que acaba de importar, gnome.png, en la biblioteca del
documento.
5. Seleccione la imagen importada en la biblioteca y arrástrela hasta el
escenario.
No se preocupe ahora por el lugar exacto en que colocar la imagen en el
escenario: más adelante definiremos las coordenadas de la imagen. Al
arrastrar un objeto al escenario, se verá en el archivo SWF cuando éste
se reproduzca.
6. Haga clic en la herramienta Selección y seleccione la instancia del
escenario.
NOTA
Puede arrastrar los activos desde la biblioteca al escenario varias veces si
desea ver varias instancias de la ilustración. El archivo no aumenta de
tamaño por el hecho de que haya varias instancias en el escenario. El
archivo SWF sólo almacena la información del símbolo o del activo
original de la biblioteca y trata cada instancia como una copia.

Importación de gráficos 37
Si observa el inspector de propiedades, descubrirá que puede modificar
la anchura y la altura de la imagen, así como la posición X e Y en el
escenario. Cuando se selecciona un objeto en el escenario, es posible ver
y modificar las coordenadas actuales en el inspector de propiedades
(véase la imagen siguiente).
Las coordenadas X e Y coinciden con el punto de registro, que es la esquina
superior izquierda de este símbolo de clip de película.
7. Escriba 0 en el cuadro de texto X y 0 en el cuadro de texto Y.
Al introducir estos valores, las coordenadas X e Y se definen en 0, tal
como se muestra en la imagen siguiente.
Defina las coordenadas X e Y mediante el inspector de propiedades. Defina
los valores de X e Y en 0.

Al definir las nuevas coordenadas, la esquina superior izquierda de la
imagen se coloca en la esquina superior izquierda del escenario. Si lo
desea, puede arrastrar la imagen de mapa de bits por el escenario con
ayuda de la herramienta Selección, y no modificando las coordenadas
en el inspector de propiedades. Utilice el inspector de propiedades
cuando necesite definir una posición específica para un objeto, tal
como hemos hecho en el paso anterior.
continuar con la sección siguiente (“Presentación de las capas y la línea
de tiempo”).
Presentación de las capas y la
línea de tiempo
La línea de tiempo está situada encima del escenario, dentro del espacio de
trabajo de Flash. La línea de tiempo, que contiene capas y fotogramas, ayuda
a organizar los activos del documento y también controla el contenido del
documento a lo largo del tiempo.
Los documentos de Flash pueden reproducirse durante un periodo de
tiempo (tal como ocurre con las películas o los sonidos) que se mide en
fotogramas. Se podría decir que las capas son transparencias que se apilan
una encima de otra. Cada capa puede contener imágenes, texto o
animaciones que se muestran en el escenario. Obtendrá más información
sobre los fotogramas y la línea de tiempo en la segunda parte de este
tutorial, “Tareas básicas: creación de un anuncio para Internet - Parte 2” en
la página 45.
El archivo FLA con el que está trabajando tiene una capa (Capa 1) con el
contenido en un solo fotograma (Fotograma 1). Así se representa la forma
predeterminada de apertura de documentos de Flash.
NOTA
También puede importar archivos de sonido en los archivos FLA. Este
procedimiento no se trata en este tutorial, pero puede encontrar más
información en el Capítulo 12, “Trabajo con sonido”.

Presentación de las capas y la línea de tiempo 39
En este ejercicio, bloqueará y cambiará el nombre de Capa 1. A menudo
sentirá la necesidad de colocar objetos en una posición concreta del
escenario. Para ayudarle a mantener estos objetos en su sitio, Flash permite
el bloqueo de las capas para evitar la selección accidental de los elementos
de una capa y su posible desplazamiento.
■ “Creación de una capa nueva” en la página 40
■ “Importación a una capa” en la página 41
1. Seleccione Capa 1 en la línea de tiempo y haga clic en el punto situado
debajo del icono del candado, tal como se muestra en la imagen
siguiente.
Bloquee una capa para impedir su desplazamiento o eliminación
accidental del escenario. Con ello también se evita la adición involuntaria
de otros activos en la capa.
Con la única capa bloqueada, necesita añadir nuevas capas antes de
poder añadir cualquier otro objeto al escenario. No es posible añadir
nuevos objetos en una capa bloqueada.
2. Seleccione la herramienta Selección del panel Herramientas y haga
doble clic en el nombre Capa 1.
Al hacer doble clic en el nombre de una capa, se permite modificar su
nombre.
3. Escriba Fondo en el cuadro de texto del nombre de la capa para
cambiarle el nombre Ahora, guarde el archivo.
Cuando se empiezan a crear proyectos con varias capas, los nombres de
capa como Capa 1 o Capa 14 no resultan demasiado útiles para reflejar
el contenido de cada capa. Por ello, se recomienda utilizar nombres
descriptivos para las capas.

4. Seleccione Archivo > Guardar antes de continuar con el siguiente
ejercicio (“Creación de una capa nueva”).
Creación de una capa nueva
En prácticamente cualquier proyecto de Flash en el que se utilizan gráficos
y animaciones importadas, deberá crear como mínimo varias capas nuevas.
Es preciso separar ciertos elementos en sus propias capas, especialmente
cuando se empieza a animar objetos. También se pueden apilar gráficos
uno encima de otro e incluso crear un efecto de profundidad o de
solapamiento con varias capas.
1. Seleccione la capa background en la línea de tiempo y, a continuación,
haga clic en el botón Insertar capa para crear una capa vacía.
La nueva capa se creará encima de la capa fondo (véase la imagen
siguiente).
Haga clic en Insertar capa para insertar una capa nueva encima de la capa
seleccionada actualmente.
2. Haga doble clic en el nombre de la capa nueva para poder editar su
nombre.
3. Escriba animation para cambiar el nombre de la nueva capa.
Los gráficos del escenario se apilarán en función de las capas creadas en
la línea de tiempo. Por ejemplo, cualquier elemento que coloque sobre
la capa animation aparecerá encima de la imagen de la capa
background. En la segunda parte de este tutorial añadiremos una
animación a esta segunda capa.
NOTA
También es posible organizar las capas en carpetas de capas. Para más
información, consulte “Organización de capas en una carpeta” en
la página 100.

Presentación de las capas y la línea de tiempo 41
4. Seleccione Archivo > Guardar antes de continuar con el siguiente
ejercicio (“Importación a una capa”).
Importación a una capa
En un ejercicio previo, “Importación de gráficos”, importamos la imagen
gnome.png directamente en la biblioteca del documento. Posteriormente,
arrastramos la imagen hasta la capa seleccionada del escenario. También es
posible importar activos directamente en el escenario en vez de hacerlo en
la biblioteca. Primero, necesitará seleccionar el fotograma en el que desea
importar la imagen en la línea de tiempo. Posteriormente, podrá importar
la imagen a dicho fotograma, que se mostrará en el escenario. Utilice este
procedimiento para importar una imagen en el siguiente ejercicio.
1. Seleccione el fotograma 1 de la capa animation.
Deberá importar la imagen star.png en la capa Animación.
2. Seleccione Archivo > Importar > Importar a escenario.
Aparecerá el cuadro de diálogo Importar, donde se puede seleccionar
una imagen del disco duro. Busque la carpeta de los archivos de origen
de este tutorial en el disco duro.
3. Seleccione star.png en la carpeta de archivos de origen del tutorial y haga
clic en Abrir (Windows) o Importar (Macintosh).
La imagen se importará a la capa animation (véase la imagen siguiente)
y, después, aparecerá en el escenario.
La imagen se importa en el fotograma de la capa seleccionada en la línea de
tiempo. Obtendrá más información sobre la línea de tiempo y las capas en
la segunda parte de este tutorial, “Tareas básicas: creación de un anuncio
para Internet - Parte 2” en la página 45.
NOTA
Si necesita reorganizar las capas, puede utilizar la herramienta Selección
para seleccionar y arrastrar unas capas encima o debajo de otras en la
línea de tiempo.

4. Abra el panel Biblioteca (Ventana > Biblioteca).
La imagen que acaba de importar en el escenario aparece también como
un activo de la biblioteca. Incluso si se importa un activo directamente
en el escenario, Flash siempre lo almacena también en la biblioteca.
5. Haga clic en la herramienta Selección del panel Herramientas.
Desplace el archivo star.png en el escenario justo encima de la cabeza
del gnomo de la imagen, tal como se muestra en la imagen siguiente.
Desplace la imagen star.png justo encima de la cabeza del gnomo.
continuar con la sección “Comprobación de la aplicación”.

Comprobación de la aplicación 43
Comprobación de la aplicación
Para terminar, puede comprobar el documento con Flash. De este modo,
comprobaremos el archivo SWF en Flash Player. Por ejemplo, puede ver
qué aspecto tendrá el código en Flash Player, cómo se reproducirán las
animaciones de la línea de tiempo, comprobar la interactividad con el
usuario, etc. Este método es mucho más rápido que cargar el trabajo en un
servidor cada vez que quiera ver cómo se reproduce un archivo SWF.
1. Seleccione Control > Probar película desde el menú principal.
Se abrirá el entorno de comprobación y se reproducirá el documento en
Flash Player. Ahora puede ver la versión del archivo SWF compilado de
su archivo FLA. Utilizará el comando Probar película con frecuencia
para visualizar el progreso cuando trabaje con archivos FLA.
2. Haga clic en el botón de cierre de la ventana que contiene el archivo
SWF para volver al entorno de edición.
Localice en el disco duro la carpeta en la que guardó el archivo
banner.fla al principio de este tutorial en “Creación de un documento
nuevo”.
Cuando abra la carpeta, debería ver un archivo adicional llamado
banner.swf. Se trata de la versión compilada del archivo banner.fla.
Cuando quiera crear una versión finalizada del archivo para poder
cargarla, querrá llevar a cabo ajustes de publicación adicionales en Flash
antes de compilar el archivo SWF. Estudiaremos estos ajustes en la
tercera parte (“Tareas básicas: creación de un anuncio para Internet -
Parte 3” en la página 69) de este tutorial.
NOTA
Si desea comparar los resultados que ha obtenido con el aspecto del
archivo origen del tutorial, abra el archivo banner1_complete.fla situado en
la carpeta FlashBanner/Part1 que guardó en el disco duro en “Apertura
del documento de edición” en la página 175.

Resumen
Le felicitamos por haber finalizado el primer paso para crear un anuncio
para Internet en Flash. Hemos utilizado la herramienta de edición de Flash
para crear un documento nuevo, añadir activos y manipular el archivo con
ayuda de distintas herramientas.
En muy poco tiempo, ha aprendido a utilizar el espacio de trabajo de Flash
para lograr realizar las siguientes tareas:
■ Definir un archivo FLA.
■ Importar activos en el archivo FLA.
■ Organizar los activos en un archivo FLA.
■ Crear y modificar capas.
■ Comprobar un archivo SWF.
Ahora ya tiene más conocimientos para poder crear un archivo para
Internet en Flash y poder incorporarlo en una página HTML utilizando
Dreamweaver. En las dos partes siguientes de este tutorial, creará y
modificará símbolos, creará una animación, añadirá ActionScript sencillo
para un botón que abra una página Web y añadirá el anuncio en un sitio
Web.
Para continuar con la creación de esta aplicación, prosiga con la parte
siguiente de este tutorial: “Tareas básicas: creación de un anuncio para
Internet - Parte 2” en la página 45.

45
3
CAPÍTULO 3
Bienvenido a la segunda de las tres partes que forman de esta introducción
a Macromedia Flash Basic 8 o Macromedia Flash Professional 8. Ya ha
finalizado correctamente la primera parte del tutorial y ha aprendido a
crear, configurar e importar contenido en un archivo FLA. Si está leyendo
esta segunda parte, lo más seguro es que ya esté preparado para saber más
acerca de Flash. Y eso es bueno, ya que podrá crear símbolos, animaciones e
incluso escribir ActionScript sencillo para que el anuncio para Internet
pueda funcionar en la continuación de este tutorial. Tras finalizar esta
parte, añadirá el anuncio a un sitio Web con Dreamweaver (o, de manera
opcional, podrá cargar el anuncio en un sitio Web con ayuda de cualquier
otra herramienta).
Véase la introducción “Tareas básicas: creación de un anuncio para Internet
- Parte 1” en la página 25 para consultar la descripción de las partes 1, 2 y 3
de este tutorial.
Aunque no se necesita ningún conocimiento previo para realizar estos
tutoriales, debería realizar la primera parte (“Tareas básicas: creación de un
anuncio para Internet - Parte 1” en la página 25) de este tutorial para poder
empezar con la segunda parte.
En la segunda parte de este tutorial, llevará a cabo las siguientes tareas:
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . .46
Adición de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49
Creación de un símbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Adición de animación a una línea de tiempo . . . . . . . . . . . . . . . . . . 54
Creación de un botón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Creación de acciones sencillas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Comprobación de la aplicación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

el documento Flash finalizado de la segunda parte.
■ “Adición de texto” en la página 49 muestra cómo crear y aplicar
formato al texto en un archivo FLA.
■ “Creación de un símbolo” en la página 52 muestra cómo crear un
símbolo de clip de película al que poder añadir posteriormente una
animación.
■ “Adición de animación a una línea de tiempo” en la página 54 muestra
cómo crear una animación utilizando la línea de tiempo principal y las
interpolaciones de movimiento.
■ “Creación de un botón” en la página 61 muestra cómo crear un botón
para añadir interactividad al anuncio.
■ “Creación de acciones sencillas” en la página 64 muestra cómo escribir
ActionScript sencillo para que funcione el botón.
finalizado
■ “Cierre del archivo FLA finalizado” en la página 49

Apertura del archivo FLA finalizado
FlashBanner en la ubicación de escritura que elija. En la primera parte, lo
más probable es que ya haya copiado los archivos de origen de FlashBanner
en otra ubicación del disco duro.
FlashBanner/.
parte de este tutorial: Part1, Part2 y Part3. En la carpeta FlashBanner/
Part2, encontrará un archivo Flash llamado banner2_complete.fla. Haga
doble clic en él para abrirlo en Flash. Aparecerá el archivo de tutorial
finalizado en el entorno de edición de Flash.

En el archivo FLA finalizado, verá la estructura que conforma el archivo
SWF finalizado para la segunda parte de este tutorial. La aplicación, un
anuncio para Internet de Flash para un sitio Web de gnomos, tiene el
siguiente aspecto tras finalizar la segunda parte:
Anuncio para Internet finalizado de la segunda parte.

Adición de texto 49
Este archivo contiene una animación en un clip de película, incluye
también texto, un botón invisible y los activos que importó en la primera
parte del tutorial.
■ La instancia del clip de película contiene una instancia gráfica que se
animará.
■ Los campos de texto contienen texto estático y con estilos que se
mostrará en el escenario.
■ El botón invisible abarca todo el escenario y permite a los visitantes
hacer clic en el anuncio y abrir el contenido en un nuevo sitio Web.
■ Los activos gráficos incluyen una imagen de fondo de mapa de bits (el
gnomo) y el gráfico de estrella que animaremos en el siguiente ejercicio.
Cuando haya terminado la tercera parte de este tutorial, añadirá gráficos,
animación e interactividad al anuncio. Posteriormente, lo insertará en un
sitio Web con Dreamweaver.
trabaja con el archivo del anuncio, cerciórese de no editar ni guardar los
cambios realizados.
en la siguiente sección, “Adición de texto”.
Adición de texto
Ahora añadiremos algún texto adicional al anuncio como elemento
decorativo. Puede añadir varios tipos de texto en un archivo Flash: texto
estático, texto dinámico o texto de entrada. El texto estático resulta útil si
necesita añadir texto decorativo en el escenario o cualquier otro texto que
no requiera modificaciones y ni cargas desde una fuente externa. Utilice
texto dinámico si necesita cargar texto desde una archivo, una base de datos
o si necesita modificar el texto cuando el archivo SWF se reproduzca en
Flash Player. Utilice el texto de entrada cuando quiera que el usuario
escriba texto en un campo de texto. Puede utilizar ese texto y enviarlo a una
base de datos, hacer que manipule algún elemento del archivo SWF, etc.

Puede añadir cualquiera de estos tipos de texto utilizando la herramienta
Texto. En este ejercicio, añadiremos texto estático al escenario como
elemento decorativo. Para añadir texto estático, siga los pasos que se
indican a continuación:
Abra el archivo banner.fla que creó en la primera parte de este tutorial y
cámbiele el nombre a banner2.fla.
1. Seleccione Insertar > Línea de tiempo > Capa para insertar una capa
nueva. Haga doble clic en el nombre de la capa y escriba Texto para
cambiarle el nombre.
2. Seleccione la herramienta Texto en el panel Herramientas. El botón
tiene el aspecto de una letra A grande.
3. Haga clic en la parte superior del escenario y escriba el texto
Overworked? en el campo que aparecerá en el escenario.
4. Seleccione el campo de texto (aparecerá un cuadro limitador alrededor
del texto cuando lo seleccione).
Propiedades) y verifique que en el menú emergente Tipo de texto se
muestra Texto estático.
6. Cambie la fuente del texto según sus preferencias.
Para cambiar la fuente, utilice el menú emergente Fuente (situado
junto al icono de la letra A, tal como se indica en la imagen siguiente).
7. Seleccione la opción Texto de mapa de bits (sin suavizado) en el menú
emergente Método de representación de fuentes.
Las opciones de suavizado favorecen la representación nítida del texto
en las aplicaciones, pero el efecto no es bueno en textos de tamaño más
grande. Dado que va a crear texto de tamaño grande para el anuncio,
deberá utilizar texto de mapa de bits que se muestre claramente al crear
texto grande.
NOTA
Si no finalizó la primera parte de este tutorial o si ha perdido el archivo,
abra el archivo ZIP de los archivos de origen que se incluye con el tutorial.
Dentro de la carpeta de inicio, busque el archivo banner2.fla y utilícelo
para empezar este tutorial.

Adición de texto 51
8. Cambie el tamaño de la fuente a 20 puntos desde el menú emergente
Tamaño de fuente.
A continuación, deberá cambiar el tamaño de la fuente para que el
texto se ajuste en el escenario.
Cambie la configuración del texto en el inspector de propiedades.
Cuando haya terminado, el texto deberá tener un aspecto similar de
tamaño y posición al texto de la imagen siguiente.
Añada texto estático al anuncio. Seleccione la fuente que desee utilizar.
9. Seleccione de nuevo la herramienta Texto y escriba ¿Harto de cobrar
poco? debajo del texto que añadió anteriormente.
10. Seleccione el campo de texto, abra el inspector de propiedades y cambie
la fuente del texto para que coincida con la de los pasos anteriores.
11. Seleccione un tamaño de fuente para que el texto sea grande pero quepa
en el escenario.
12. Repita los pasos 9 al 11 para añadir la frase ¿Es un gnomo? debajo de las
dos líneas previas de texto. Cuando haya terminado, el anuncio debería
parecerse a la primera figura de este tutorial, que representa el archivo
finalizado de la segunda parte.
13. (Opcional) Abra el panel Alinear (Ventana > Alinear) para alinear el
texto en el centro del escenario. Seleccione un bloque de texto del
escenario, haga clic en la opción En escenario del panel Alinear y,
seguidamente, haga clic en Alinear horizontalmente con respecto al
centro. (Pase el puntero del ratón sobre los distintos botones del menú
para saber a qué corresponde cada uno.)

14. Seleccione Archivo > Guardar para guardar los avances antes de
continuar.
Una vez guardado el archivo, continúe con el siguiente ejercicio,
“Creación de un símbolo”.
Creación de un símbolo
Un símbolo es un objeto creado en Flash. Como ya descubrimos en la
primera parte, un símbolo puede ser un gráfico, un botón o un clip de
película y es posible reutilizarlo en el documento FLA actual y en otros
archivos FLA. Los símbolos creados se añaden automáticamente a la
biblioteca del documento (Ventana > Biblioteca), por lo que es posible
utilizarlo varias veces en un mismo documento.
Al añadir una animación, siempre debe animar los símbolos en Flash, no
animar gráficos en bruto (gráficos creados por usted) o activos en bruto
importados (por ejemplo, un archivo PNG). Por ejemplo, si dibuja un
círculo utilizando la herramienta Óvalo en Flash, debería convertir el
gráfico de círculo en un clip de película para poder animarlo. De esta forma
se reduce el tamaño del archivo SWF y se facilita la creación de la
animación en Flash.
En el siguiente ejercicio creará un símbolo de clip de película. En ejercicios
posteriores estudiaremos cómo animarlo.
1. En el archivo banner2.fla, seleccione la imagen star.png (importada en
la primera parte) y seleccione Modificar > Convertir en símbolo en el
menú principal.
Se abrirá el cuadro de diálogo Convertir en símbolo (véase la imagen
siguiente), donde es posible dar un nombre al símbolo y seleccionar qué
tipo de símbolo quiere que sea.
2. Escriba Únase a nosotros en el cuadro de texto Nombre (véase la imagen
siguiente).
Tras crear el símbolo, verá cómo aparece en el panel Biblioteca el
nombre que le ha dado. También verá un icono de clip de película
junto al nombre del símbolo.
NOTA
Si desea utilizar efectos avanzados de texto, puede crear texto en
FreeHand, guardar el archivo y, después, importarlo. Asimismo, si utiliza
Adobe Illustrator, puede exportar el texto como archivo PNG o SWF.
Después podrá importar el texto a Flash. También puede investigar las
opciones avanzadas sin suavizado de FlashType. Consulte el Capítulo 6,
“FlashType” para más información.

Creación de un símbolo 53
Recuerde que el nombre de un símbolo no coincide con el nombre de
su instancia, ya que se pueden tener varias instancias de un solo
símbolo en el escenario. Por ejemplo, puede definir un nombre de
instancia para el símbolo Únase a nosotros desde el inspector de
propiedades después de arrastrarlo al escenario desde el panel
Biblioteca. Si arrastra otra instancia del símbolo Únase a nosotros al
escenario, deberá asignarle un nombre de instancia distinto. El nombre
de instancia se utiliza en el ActionScript para hacer referencia y
manipular la instancia con el código. Existen algunas pautas de
nomenclatura que deben seguirse a la hora de asignar nombres de
instancia. (Este tema se trata en la sección “Creación de acciones
sencillas”).
Utilice el cuadro de diálogo Convertir en símbolo para convertir el
contenido seleccionado en un símbolo, nómbrelo y haga clic en Aceptar (tal
como se indica arriba) para añadirlo a la biblioteca del documento. Tal vez
aparezca otro cuadro de diálogo más pequeño sin vínculos avanzados ni
información de origen al convertir un símbolo.

3. Seleccione la opción Clip de película y haga clic en Aceptar.
Esto significa que ha convertido la imagen del gráfico en un símbolo de
clip de película. Los símbolos de clip de película tienen sus propias
líneas de tiempo. Esto significa que puede animar cada instancia de clip
de película en su propia línea de tiempo y en la línea de tiempo
principal del documento. Este comportamiento es exclusivo de las
instancias de clip de película.
continuar.
“Adición de animación a una línea de tiempo”. En este ejercicio
animaremos el clip de película.
Adición de animación a una línea
de tiempo
Ya ha utilizado la línea de tiempo en la primera parte de este tutorial
(“Tareas básicas: creación de un anuncio para Internet - Parte 1” en
la página 25) para insertar capas nuevas y añadirles contenido. En la
primera parte, añadimos activos a un fotograma de la línea de tiempo. Tal
vez se haya dado cuenta de que, después de añadir contenido a un
fotograma, aparece un círculo con relleno en el fotograma para indicar su
contenido. Siempre que exista contenido nuevo o modificado en un
fotograma, éste recibirá el nombre de fotograma clave y tendrá un punto
negro de relleno en el fotograma. Un fotograma clave es un fotograma en el
que es posible definir cambios en la animación, o un fotograma que cuenta
con contenido. Los fotogramas clave vacíos están representados con un
círculo hueco.
Ahora creará una animación en un documento Flash añadiendo contenido
a una línea de tiempo, por ejemplo la línea de tiempo principal, o a la línea
de tiempo de un clip de película. Cuando la cabeza lectora se desplaza a lo
largo de la línea de tiempo, se reproducen los fotogramas por separado. Si
esta reproducción se realiza en una secuencia rápida (como un bucle o una
sucesión de fotogramas en un rollo de película), se conseguirá el efecto de
una animación.

Adición de animación a una línea de tiempo 55
En la animación fotograma a fotograma, cada fotograma es clave. En la
animación interpolada, se definen fotogramas clave en puntos significativos
de la animación y Flash crea el contenido de los fotogramas intermedios.
Flash muestra los fotogramas interpolados en verde claro o azul claro con
una flecha entre los fotogramas clave. Puesto que los documentos de Flash
guardan las formas en cada fotograma clave, cree fotogramas clave sólo en
los puntos de la animación en los que se produzca alguna modificación.
1. Seleccione Modificar > Documento.
Se abrirá el cuadro de diálogo Propiedades del documento. Se trata del
cuadro de diálogo que utilizamos para cambiar las dimensiones del
anuncio en la primera parte de este tutorial. Ahora, lo que queremos es
cambiar la velocidad de fotogramas para el anuncio.
2. Cambie el número que aparece en el cuadro de texto Velocidad de
fotogramas a 18 y, después, haga clic en Aceptar para aplicar la nueva
configuración.
Cuanto mayor sea la velocidad de fotogramas, con más fluidez se
reproducirá la animación. Ahora lo hará más rápidamente que con los
12 fotogramas por segundo (fps) establecidos previamente. Al cambiar
la configuración de fps, la línea de tiempo principal y las líneas de
tiempo del clip de película se reproducirán a la misma velocidad.
NOTA
Al aumentar la velocidad de fotogramas, también se produce un pequeño
aumento de los requisitos del sistema (CPU) para representar los
fotogramas adicionales por segundo.

3. Haga doble clic en la instancia del símbolo Únase a nosotros del
escenario.
Al hacerlo, abrirá el símbolo en modo de edición de símbolos (véase la
imagen siguiente). En este modo, verá la línea de tiempo del símbolo
del clip de película. Ésta se ejecuta independientemente de la línea de
tiempo del archivo FLA principal (el que se podía ver antes de hacer
doble clic en el símbolo). Esto significa que puede crear animaciones
que se reproduzcan y se detengan independientemente del resto de las
animaciones de la línea de tiempo principal. Recuerde que un clip de
película se sigue reproduciendo a la velocidad de fotogramas del
documento (18 fps).
En el modo de edición de símbolos, el símbolo que está editando se muestra
con claridad, mientras que el resto de elementos del escenario aparecen
difuminados. Los cambios que realice en este modo afectarán a todas las
instancias del símbolo en el archivo FLA. Observe cómo la barra de edición
(encima de la línea de tiempo en esta imagen) cambia para mostrar lo que
se está editando y la relación existente con el escenario principal.

Al acceder a este modo, se puede editar el símbolo en sí, no sólo la
instancia que aparece en el escenario. Todos los cambios realizados en
esta línea de tiempo (que es la línea de tiempo del clip de película)
afectará a todas las instancias del símbolo que utilice en el archivo FLA.
Sabrá que está editando un símbolo si observa la barra de edición (véase
la parte superior de la imagen anterior). Utilice la barra de edición para
desplazarse por el documento. Es posible que la barra de edición se
muestra encima o debajo de la línea de tiempo en función de la
distribución del espacio de trabajo.
Escena 1 hace referencia a la línea de tiempo principal del archivo FLA.
Puede hacer clic en este botón de la barra de edición para regresar a la
línea de tiempo principal. Los nombres que aparecen después hacen
referencia al símbolo que está editando. Si el símbolo está anidado con
otros símbolos, es posible que la ruta contenga varios nombres. En la
imagen anterior, puede ver que está editando el símbolo Únase a
nosotros que se encuentra en la línea de tiempo principal (Escena 1).
4. Seleccione el archivo PNG que se encuentra dentro del clip de película
y presione F8 para convertirlo en otro símbolo.
5. En el cuadro de diálogo Convertir en símbolo, escriba el nombre CP
anidado en el cuadro de texto Nombre, seleccione Clip de película y
haga clic en Aceptar.
6. Seleccione el fotograma 15, elija Insertar > Línea de tiempo > Fotograma
clave.
Este comando inserta un nuevo fotograma clave, lo que significa que
puede modificar el contenido de dicho fotograma para crear una
animación. Actualmente, el contenido del fotograma 15 está duplicado
desde el contenido del fotograma 1. Cuando modifiquemos el
fotograma 15 en un paso posterior, las modificaciones no cambiarán el
contenido del fotograma 1.
7. Seleccione el fotograma 30 y presione F6 para insertar un nuevo
fotograma clave.
El fotograma clave duplica el contenido del fotograma 15. Esto
significa que el contenido de los tres fotogramas es el mismo.
NOTA
Presione F6 para insertar rápidamente un nuevo fotograma clave.

8. Seleccione la instancia del clip de película del fotograma 15 y abra el
inspector de propiedades (Ventana > Propiedades > Propiedades).
9. Seleccione Brillo en el menú emergente Color (véase la imagen
siguiente).
10. Cambie el valor del deslizador a 75% (véase la imagen siguiente).
Cambie el brillo de la instancia del clip de película.
El brillo cambia para la instancia del fotograma 15. Las instancias de los
fotogramas 1 y 30 permanecen sin cambios. Esto significa que ahora
puede añadir una interpolación de movimiento que anime el valor del
brillo entre los fotogramas 1 y 15 y, después, los fotogramas del 15 al
30. Tras reproducir el fotograma 30, la cabeza lectora volverá al
fotograma 1 y la animación se iniciará de nuevo.
NOTA
Verifique que ha seleccionado la instancia del fotograma 15, no sólo el
fotograma. Primero puede seleccionar el fotograma en la línea de tiempo
(o desplazar la cabeza lectora hasta el fotograma 12) y, después,
seleccionar la instancia del clip de película en el escenario para poder ver
el contexto correcto del inspector de propiedades, tal como se indica en la
imagen siguiente.
NOTA
También puede cambiar los valores de alfa o tinta utilizando el mismo
procedimiento. Las interpolaciones alfa consumen más recursos del
procesador que las interpolaciones relacionadas con el brillo o la tinta de
la animación. Siempre que sea posible, intente no utilizar procedimientos
que consuman muchos recursos del procesador.

11. Vuelva a seleccionar la instancia del escenario en el fotograma 15 y,
después, seleccione la herramienta Transformación libre en el panel
Herramientas. Seleccione el selector de la esquina inferior derecha y
arrástrelo hacia el centro de la imagen para reducir el tamaño (véase la
imagen siguiente).
Cambie el tamaño de la instancia con la herramienta Transformación
libre. Tal como se indica en la imagen, también es posible girar la imagen
con ayuda de la herramienta Transformación libre.
Puede crear distintos tipos de animaciones en un archivo FLA, como
interpolaciones de movimiento, interpolaciones de forma y
animaciones fotograma a fotograma. En este tutorial vamos a crear una
interpolación de movimiento. Una interpolación de movimiento es una
animación en la que se definen propiedades tales como la posición, el
tamaño y la rotación de una instancia en un instante específico, y
después estas propiedades se pueden cambiar en otro momento. En esta
animación vamos a cambiar el brillo y el tamaño de la instancia.

12. Seleccione un fotograma entre los fotogramas 1 y 15 y, después,
seleccione Movimiento en el menú emergente Animar del inspector de
propiedades.
El intervalo de los fotogramas cambiar de color y aparece una flecha
entre los fotogramas 1 y 15 (véase la imagen siguiente). Observe cómo
cambian las opciones del inspector de propiedades cuando selecciona
un fotograma y cuando selecciona una instancia de clip de película.
Cree una interpolación de movimiento entre los fotogramas 1 y 15 en la
línea de tiempo del clip de película.
13. Seleccione un fotograma entre los fotogramas 15 y 30 y, después,
seleccione Movimiento en el menú emergente Animar del inspector de
propiedades para crear una segunda animación.
14. Haga clic en la cabeza lectora y arrástrela por la línea de tiempo del clip
de película para probar (o arrastrar) la animación.
15. Seleccione Control > Probar película.
El entorno de comprobación se abrirá para que pueda ver la animación.
Observe cómo se repite una y otra vez, y cómo parece que se desvanece
y vuelve a aparecer gracias al cambio del brillo. De forma
predeterminada, la cabeza lectora regresa al fotograma 1 y vuelve a
reproducir la animación después de llevar al último fotograma de la
línea de tiempo. Esto significa que la animación se repite una y otra vez
a no ser que le indiquemos que se detenga. Aprenderemos cómo hacer
esto en el siguiente ejercicio llamado “Creación de acciones sencillas”.
NOTA
También puede hacer clic con el botón derecho del ratón (Windows) o
hacer clic con la tecla Opción presionada (Macintosh) en el fotograma y
seleccionar Crear interpolación de movimiento en el menú contextual.
NOTA
Un método más rápido para probar el archivo SWF es utilizar métodos
abreviados de teclado. Presione Control + Intro (Windows) o Comando +
Retorno (Macintosh) para probar el archivo

Creación de un botón 61
continuar.
“Creación de un botón”.
Creación de un botón
Para crear un anuncio es preciso permitir que el usuario haga clic en
cualquier lugar del área del anuncio para poder abrir una nueva ventana del
navegador. En Flash es muy fácil crear botones. El botón puede contener
un gráfico con gráficos de desplazamiento, sonidos e incluso sus propias
animaciones. Otra posibilidad es crear un botón invisible. Los botones
invisibles son útiles si desea crear “zonas activas” en el sitio Web o si quiere
que la zona en la que se puede hacer clic sea todo el anuncio sin alterar los
gráficos. En el siguiente ejercicio añadiremos un botón invisible sobre los
gráficos del anuncio.
1. Haga clic en Escena 1 en la barra de edición para verificar que se
encuentra en el escenario principal.
2. Seleccione Insertar > Línea de tiempo > Capa para crear una nueva capa.
Seguidamente, cámbiele el nombre y llámela Botón.
3. Seleccione la herramienta Rectángulo en el panel Herramientas (el
icono del botón es parecido a un cuadrado).
4. Vaya a la sección Colores del panel Herramientas (véase la imagen
siguiente) y haga clic en el icono de lápiz para seleccionar el control
Color de trazo.
NOTA
Para más información sobre la creación de botones visibles con gráficos y
efectos de desplazamiento, busque “creación de botones” en el panel
Ayuda de Flash (F1).

5. No seleccione ningún color, tal como se indica en la imagen siguiente.
Al hacerlo, se desactivará el contorno del rectángulo.
No seleccione ningún color en el control Color de trazo.
6. Arrastre el ratón diagonalmente a través del escenario para crear un
rectángulo.
El tamaño del rectángulo no es importante: ya lo cambiaremos más
adelante desde el inspector de propiedades.
7. Elija la herramienta Selección del panel Herramientas y haga clic en el
rectángulo del escenario para seleccionarlo.
Aparecerá un patrón de rejilla sobre el rectángulo cuando lo seleccione.
Propiedades).
9. Cambie el valor del cuadro de texto An. (anchura) a 160 y el del cuadro
de texto Al. (altura) a 600. A continuación, cable el cuadro de texto X e
Y a 0 (véase la imagen siguiente).
Cambie la anchura y la altura del rectángulo y, después, defina la
ubicación del rectángulo para cubrir el escenario.

Creación de un botón 63
10. Con el rectángulo aún seleccionado en el escenario, presione la tecla F8
para convertir el rectángulo en un símbolo.
11. En el cuadro de diálogo Convertir en símbolo, escriba Bot inv en el
cuadro de texto Nombre, seleccione Botón y haga clic en Aceptar.
12. Haga doble clic en el nuevo botón del escenario para acceder al modo de
edición de símbolos.
El rectángulo es ahora el primer fotograma Reposo del botón creado.
Éste es el estado Reposo del botón: lo que los usuarios verán cuando el
botón se encuentre en el escenario. Pero lo que queremos es que el
botón no sea visible en absoluto en el escenario. Por lo tanto,
deberemos mover el rectángulo al fotograma Zona activa, que es el área
activa del botón (la región activa en la que el usuario puede hacer clic
para activar las acciones del botón).
13. Haga clic en el fotograma clave del fotograma Reposo y mantenga
presionado el botón del ratón mientras lo arrastra (véase la imagen
siguiente).
Arrastre el fotograma clave del rectángulo desde el fotograma Reposo al
fotograma Zona activa de la línea de tiempo.
Ahora se podrá hacer clic en toda el área del anuncio, pero no hay
rastro visual alguno de la existencia del botón.
14. Haga clic en Escena 1 para volver a la línea de tiempo principal.
Ahora tenemos un rectángulo en el área del anuncio. Éste hace
referencia al área activa del botón invisible. Si esto le distrae, puede
ocultar la capa Botón en el entorno de edición.
15. (Opcional) En la línea de tiempo, haga clic en el punto que aparece
debajo del icono del ojo en la capa Botón para ocultar el contenido de
dicha capa.
continuar.
“Creación de acciones sencillas”.

Creación de acciones sencillas
Ahora necesita añadir ActionScript sencillo al anuncio para que el botón
invisible pueda abrir un sitio Web o enviar información relacionada con el
número de veces que se ha hecho clic en el botón.
Hay varios sitios distintos en los que es posible añadir ActionScript en un
documento de Flash. Puede seleccionar una instancia y añadir ActionScript
que se asocie directamente a ella. Para acceder al código, necesitará localizar
y seleccionar de nuevo la instancia. También puede añadir ActionScript a
un fotograma (o a varios) en la línea de tiempo. Es buena idea añadir todo
el código a un único fotograma de la línea de tiempo, ya que será mucho
más fácil de encontrar, actualizar y organizar mientras trabaja con el
archivo. No asocie ActionScript a instancias.
Observe cómo la interpolación de movimiento Únase a nosotros no deja de
repetirse cuando la prueba. De forma predeterminada, la cabeza lectora de
la línea de tiempo se desplaza una y otra vez si hay contenido en más de un
fotograma. Por ello, si tiene contenido en varios fotogramas de un clip de
película o en la línea de tiempo principal, el bucle se reproducirá
indefinidamente. Puede detener el bucle de la cabeza lectora añadiendo una
sola línea de ActionScript. Si añade el ActionScript siguiente a un
fotograma, la cabeza lectora se detendrá cuando llegue a dicho fotograma:
stop();
No es necesario que añada este ActionScript al anuncio. Sin embargo,
necesitará añadir este ActionScript a otros archivos FLA que cree más
adelante. La acción stop de detención se consigue con ActionScript que
necesita conocer al comenzar a trabajar con Flash para poder detener el
bucle de los archivos SWF cuando sea necesario.
NOTA
También puede conservar el ActionScript en archivos de clase externos
que se importen al archivo FLA con el que está trabajando. En ocasiones,
ésta es la mejor forma de organizar el ActionScript, especialmente
cuando se trabaja en proyectos grandes. Este tema va más allá de lo que
pretendemos tratar en este tutorial.

Creación de acciones sencillas 65
Antes de añadir el código, deberá asociar al botón con un nombre de
instancia único. El nombre de instancia permite dirigir el botón con código
ActionScript. Si no le da un nombre al botón, el código no podrá dirigirse
a él desde la línea de tiempo. El primer paso es asignarle al botón invisible
un nombre de instancia y, seguidamente, añadir el código que dirige este
botón mediante su nombre.
1. Seleccione el botón invisible en el escenario.
2. Abra el inspector de propiedades (Ventana > Propiedades) y localice el
cuadro de texto Nombre de instancia.
3. Escriba Bot_inv en el cuadro de texto Nombre de instancia.
4. Seleccione Insertar > Línea de tiempo > Capa para insertar una nueva
capa. Seguidamente, cámbiele el nombre y llámela Acciones.
5. Abra el panel Acciones (Ventana > Acciones ) y seleccione el fotograma
1 en la capa Acciones.
6. Escriba el siguiente ActionScript en el panel Script (el campo de texto
editable) del panel Acciones:
inv_btn.onRelease = function(){
getURL("http://gnome.deseloper.com", "_blank");
};
Observe cómo dirige la instancia Bot_inv en la primera línea de
código. El evento es el evento onRelease del código ActionScript, que
hace referencia a la acción en la que el usuario hace clic y, después,
suelta el ratón encima de la instancia Bot_inv. Ahora le diremos al
botón que abra una página Web concreta (http://
gnome.deseloper.com) en una nueva ventana (_blank) con el método
getURL(). Obviamente, la URL se puede cambiar por cualquier sitio
Web que desee que se abra al hacer clic en el anuncio. Si quiere que el
anuncio abra un sitio Web en la página actual, sustituya _blank por
_self.
NOTA
Un nombre de instancia no es lo mismo que un nombre de símbolo (lo que
se escribe en el cuadro de texto Nombre en el cuadro de diálogo Convertir
en símbolo). Los nombres de instancia no pueden contener espacios ni
caracteres especiales, pero sí guiones bajos. Asimismo, los nombres de
instancia distinguen entre mayúsculas y minúsculas.

Éste es un fragmento sencillo de código ActionScript que reacciona
ante la pulsación de un botón. Hay mucha más información disponible
para aprender el lenguaje ActionScript en la documentación de Flash 8.
Consulte el índice de la documentación para ubicar Aprendizaje de
ActionScript 2.0 en Flash.
continuar.
“Comprobación de la aplicación”.
Hemos conseguido crear un anuncio para Internet de Flash con gráficos y
animación, y también hemos logrado que reaccione ante la pulsación de un
botón. Ha finalizado su primer documento de Flash animado e interactivo.
Veámoslo ahora en acción en una ventana de navegador.
1. Vuelva al documento banner2 y seleccione Archivo > Vista previa de
publicación > HTML.
Se abrirá el navegador predeterminado de su equipo para mostrar el
anuncio. De forma predeterminada, el anuncio se muestra en la
esquina superior izquierda del documento HTML.
2. Haga clic en el anuncio para abrir la página Web. Se abrirá una nueva
ventana del navegador y se mostrará el sitio Web de los gnomos.
3. Cierre las ventanas del navegador y regrese al entorno de edición de
Flash.
Si está satisfecho con el documento, guarde los cambios y prepárese
para la tercera parte de este tutorial. Si lo desea, puede realizar cambios
en la animación o el texto, o bien cambiar el código.
NOTA
archivo origen del tutorial, abra el archivo banner2_complete.fla situado
en la carpeta FlashBanner/Part2 que guardó en el disco duro en
“Apertura del documento de edición” en la página 175.

Resumen 67
Resumen
Le felicitamos por haber finalizado el siguiente paso para crear un anuncio
para Internet en Flash. Hemos utilizado la herramienta de edición de Flash
para añadir texto, crear símbolos, realizar animaciones en la línea de tiempo
y añadir interactividad a la aplicación. En la segunda parte de este tutorial
ha aprendido a utilizar el espacio de trabajo de Flash para lograr realizar las
siguientes tareas:
■ Crear texto.
■ Crear símbolos.
■ Crear una animación.
■ Crear botones.
■ Escribir ActionScript.
Ahora tiene un anuncio que puede exportar y añadir en una página Web.
En la tercera parte de este tutorial publicaremos su trabajo y añadiremos el
archivo en un sitio Web de Dreamweaver.
Para continuar con la creación de esta aplicación, prosiga con la tercera
parte de este tutorial: “Tareas básicas: creación de un anuncio para Internet
- Parte 3” en la página 69.

69
4
CAPÍTULO 4
Ésta es la tercera parte de un tutorial dividido en tres partes que muestra
cómo crear un sencillo anuncio animado para Internet en Macromedia
Flash Basic 8 o Macromedia Flash Professional 8 y añadirlo a una página
Web con Macromedia Dreamweaver. En esta última parte, trataremos las
opciones de tamaño de los archivos, las normas de los anuncios para
Internet, el modo de definir la configuración de publicación, cómo añadir
el anuncio a una página Web de Dreamweaver y cómo incorporar la
detección de Macromedia Flash Player.
Debe tener Dreamweaver MX 2004 o Dreamweaver 8 instalado en el
equipo para poder realizar la mayoría de esta tercera parte del tutorial. Si no
utiliza Dreamweaver, puede realizar la primera parte de este artículo y
utilizar el HTML generado por Flash con un editor HTML diferente. Sin
embargo, no podrá aprovechar algunas de las ventajas de utilizar Flash y
Dreamweaver al mismo tiempo.
Véase la introducción “Tareas básicas: creación de un anuncio para Internet
- Parte 1” en la página 25 para consultar la descripción de las partes 1, 2 y 3
de este tutorial.
Aunque no se necesita ningún conocimiento previo para realizar estos
tutoriales, debería realizar la primera y la segunda parte de este tutorial para
poder empezar con la tercera parte.
En la tercera parte de este tutorial, llevará a cabo las siguientes tareas:
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Comprobación de la configuración de publicación. . . . . . . . . . . . . 75
Inserción de Flash en un sitio de Dreamweaver . . . . . . . . . . . . . . . 77
Utilización de edición conjunta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Comprobación de Flash Player. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Comprobación de la aplicación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

el documento Flash finalizado de la tercera parte.
■ “Comprobación de la configuración de publicación” en la página 75
muestra cómo comprobar y modificar la configuración de publicación
antes de compilar el anuncio finalizado.
■ “Inserción de Flash en un sitio de Dreamweaver” en la página 77
muestra cómo insertar una animación Flash en una página Web
utilizando Dreamweaver.
■ “Utilización de edición conjunta” en la página 79 muestra cómo volver
a la herramienta de edición de Flash desde Dreamweaver para realizar
modificaciones adicionales en el archivo FLA.
■ “Comprobación de Flash Player” en la página 81 muestra cómo añadir
un comportamiento de Dreamweaver que detecte si el visitante tiene
Flash Player instalado.
finalizado
■ “Cierre del proyecto finalizado” en la página 72

Apertura del proyecto finalizado
FlashBanner en la ubicación de escritura que elija. En la primera o en la
segunda parte, lo más probable es que ya haya copiado los archivos de
origen de FlashBanner en otra ubicación del disco duro.
FlashBanner/.
parte de este tutorial: Part1, Part2 y Part3. En la carpeta FlashBanner/Part3
encontrará un archivo HTML llamado gnome.html dentro de la carpeta
finished. Haga doble clic en el archivo para abrirlo en su navegador
predeterminado. Ahora podrá ver los archivos SWF y HTML finalizados
en la ventana del navegador.

Revisión del proyecto finalizado
En el proyecto finalizado, verá la estructura que conforma el proyecto
finalizado para la tercera parte de este tutorial. La aplicación, un anuncio
para Internet de Flash insertado en una página HTML para un sitio Web
de gnomos, tiene el siguiente aspecto tras finalizar la tercera parte:
Anuncio para Internet finalizado de la tercera parte
Cuando haya terminado la tercera parte de este tutorial, añadirá el anuncio
que creó con gráficos, animación e interactividad a un sitio Web utilizando
Dreamweaver.
Cierre del proyecto finalizado
Para cerrar el documento, haga clic en el botón de cierre de la ventana del
navegador, situado en la esquina superior derecha (Windows) o izquierda
(Macintosh) de la ventana.
Tal vez prefiera conservar el archivo finalizado abierto como referencia
mientras trabaja con el archivo del anuncio.
en la siguiente sección, “Análisis del público al que va destinado”.

Análisis del público al que va destinado 73
Análisis del público al que va
destinado
Al crear un sitio, normalmente se deben seguir ciertas pautas para enviar un
anuncio de Flash. En lo que respecta a este tutorial, seguir las pautas
publicitarias establecidas no supone mucho problema, ya que no estamos
enviando el anuncio a ninguna empresa con fines publicitarios. En esta
sección se estudian brevemente algunas consideraciones que deben tenerse
en cuenta al crear un anuncio en un proyecto de la vida real o en un
proyecto con gran distribución. Al crear un anuncio que posteriormente se
enviará a una empresa de publicidad, lo normal es verificar que el archivo
cumple los requisitos especificados de tamaño, dimensiones, versión de
Flash Player de destino y velocidad de fotogramas. A veces, es preciso tener
en cuenta otras reglas relacionadas con el tipo de medios que pueden
utilizarse, el código de botón del archivo FLA, etc.
Ha creado un anuncio y ha cambiado las dimensiones. Al hacerlo, en
realidad lo que ha conseguido es utilizar las dimensiones establecidas y
normalizadas para lo que la Agencia de la publicidad interactiva denomina
“rascacielos ancho”. El tamaño del archivo también es el normal para un
anuncio Flash de este tamaño. En un ejercicio posterior aprenderá a reducir
el tamaño del archivo. Para información sobre las dimensiones
normalizadas para publicidad (y muchas otra pautas de gran utilidad),
consulte la sección Standards y Guidelines (en inglés) de la IAB:
www.iab.net/standards/adunits.asp. No obstante, asegúrese de corroborar
las pautas de publicidad para el servicio, cliente o sitio Web concreto con el
que esté trabajando. Las pautas pueden incluir normas para el tamaño de
archivo, las dimensiones, el uso del sonido y el vídeo, y los botones.

La finalidad de este tutorial es que aprenda a crear contenido Flash,
exportarlo desde Flash y añadirlo a su propio sitio Web. Lo que debe
aprender de esto es la necesidad de tener en cuenta el público al que va
destinado el producto. Cada vez cree un sitio Flash, piense en la gente que
verá el contenido del mismo modo que lo hace cuando crea un sitio Web.
¿Abarca su público un amplio abanico de personas con muchos tipos de
ordenadores y reproductores de (o ninguno)? O bien, ¿está su público
formado principalmente por desarrolladores de Flash y empresas de nuevos
medios? En función del público, la versión de Flash Player será distinta. Por
ejemplo, si cree que un público muy diverso (normalmente un público con
conocimientos y capacidades informáticas muy distintos) visitará su sitio,
opte por una versión antigua de Flash Player, por ejemplo la versión 6. Si
cree que los visitantes serán sobre todo profesionales de creación Web, la
última versión (con un sistema de detección) será la elección correcta.
Definirá Flash Player y añadirá un sistema de detección de Flash Player con
Dreamweaver en las secciones siguientes.
NOTA
Si envía el anuncio a una empresa para que lo publique, normalmente
tienen requerimientos especiales sobre la adición del código del botón en
el archivo FLA. A menudo, prefieren que añada una variable concreta
(como clickTAG) en vez de una URL. Consulte el servicio de publicidad y
clientes o las pautas del sitio Web para añadir el código de botón
adecuado en el archivo FLA. Algunas empresas también limitan la
velocidad de fotogramas por segundo (fps) que se puede utilizar en el
archivo SWF. Cuando diseñe un anuncio, intente reducir al máximo la
velocidad fps. Recomendamos utilizar 18 fps o menos; lo idóneo es utilizar
12 fps.

Comprobación de la configuración de publicación 75
Comprobación de la
configuración de publicación
A menudo necesitará guardar anuncios en versiones anteriores de Flash
Player. Muchos sitios en los que pretenda publicar aceptarán sólo archivos
de Flash Player 6. Otra razón es que quiera crear un sitio Web con un
público muy heterogéneo, por lo que necesitará recurrir a reproductores
anteriores. El ActionScript sencillo que añadió al archivo se puede
reproducir en Flash Player 6. Por lo tanto, puede cambiar la configuración
del reproductor por la de Flash Player 6 en su sitio Web.
En secciones previas de este tutorial, hemos realizado cambios en el cuadro
de diálogo Propiedades del documento. Hemos definido las dimensiones y
la velocidad de fotogramas (fps) del archivo SWF. En esta última sección,
verificará que la configuración de Flash Player que desea obtener es la
correcta y que ha exportado los archivos que necesita. Muchos
desarrolladores de Flash realizan esta configuración al iniciar el archivo
FLA, ya que son conscientes de lo que necesitan obtener y ofrecer.
1. Abra el archivo banner2.fla de la segunda parte de este tutorial (“Tareas
básicas: creación de un anuncio para Internet - Parte 2”).
Si no tiene el archivo banner2.fla, abra banner3.fla en los archivos de
origen del tutorial (consulte “Apertura del proyecto finalizado” en
la página 71). Busque en la carpeta start.
2. Seleccione Archivo > Guardar como y cambie el nombre del archivo a
banner3.fla.
3. Seleccione Archivo > Configuración de publicación.
Se abrirá el cuadro de diálogo Configuración de publicación en el que
es posible cambiar muchos de los ajustes de publicación de los archivos.
4. Haga clic en la ficha Formatos y verifique que la casilla de verificación
Flash (.swf) esté activada.
5. Anule la selección de la opción HTML.
En este ejercicio no necesitará obtener ninguna página HTML.

6. Haga clic en la ficha Flash y seleccione Flash Player 6 en el menú
emergente Versión.
Al añadir anuncios de Flash en una página HTML, utilice Flash Player
6 o una versión anterior. Muchos desarrolladores de Flash siguen
utilizando Flash Player 5, aunque los sitios utilizan cada vez más Flash
Player 6, que permite añadir funcionalidades opcionales a los anuncios
de Flash.
7. Seleccione ActionScript 1.0 en el menú emergente Versión de
ActionScript.
Para este ejemplo hemos utilizado código de estilo ActionScript 1.0 (en
la segunda parte) y, aunque esta configuración no afecta a las prácticas
recomendadas, es bueno comprobar la versión que se selecciona. Puede
escribir ActionScript 2.0 y publicar en Flash Player 6 si lo desea.
8. En la sección Opciones, seleccione Comprimir película.
No es necesario que realice ninguna otra selección en la ficha Flash.
9. Cuando haya terminado, haga clic en Aceptar para aplicar los cambios
al documento.
10. Seleccione Archivo > Publicar cuando haya terminado de editar el
archivo FLA.
Con esta acción, se publica el archivo SWF en el directorio en el que lo
guardó.
11. Vaya al directorio en el que ha publicado el archivo SWF del anuncio.
Verifique el tamaño del documento (se llama banner3.swf).
Como ya hemos dicho anteriormente, el tamaño del archivo no
importa demasiado en nuestro caso, ya que no vamos a enviar el
anuncio a una empresa de publicidad. Si desea (o si necesita) reducir el
tamaño del archivo del anuncio, puede regresar al cuadro de diálogo
Configuración de publicación (Archivo > Configuración de
publicación) y hacer clic en la ficha Flash. Puede reducir la calidad de la
imagen de mapa de bits empleada para el fondo cambiando la calidad
JPEG a un valor más pequeño.
12. Desplace el deslizador hasta 60 y haga clic en Publicar.
Cuando vuelva a comprobar el tamaño del archivo SWF de nuevo,
comprobará que se ha reducido.

Inserción de Flash en un sitio de Dreamweaver 77
Hay otras formas de disminuir el tamaño de archivo de un archivo SWF. Si
necesita diseñar un archivo con un tamaño máximo de archivo, no olvide
publicar el trabajo regularmente e ir comprobando el tamaño en cada
momento. Las imágenes de mapa de bits, los sonidos y el vídeo son factores
que aumentan rápidamente el tamaño de un archivo SWF.
Si no tiene instalado Dreamweaver, este tutorial finaliza aquí. Si no tiene
Dreamweaver, puede volver al cuadro de diálogo Configuración de
publicación de este ejercicio y comprobar que selecciona la opción HTML
de la ficha Formatos. Cuando publique el documento, se exportará un
archivo HTML junto con el archivo SWF. Puede abrir este archivo, copiar
el código HTML y pegarlo en el sitio Web. Tenga en cuenta que este
archivo contiene algunas etiquetas adicionales que no necesitará si ya tiene
un sitio Web (por ejemplo las etiquetas head y body). Las etiquetas que
necesitará son tanto object como embed, que contienen la información
que los navegadores Internet Explorer y los basados en Mozilla necesitan
para mostrar el archivo SWF.
Si tiene instalado Dreamweaver, pase a la siguiente página. En los ejercicios
siguientes colocaremos y editaremos el anuncio en una página Web.
Inserción de Flash en un sitio de
Dreamweaver
Tal vez ya cuente con una página Web creada para un anuncio. Hemos
creado una página Web para utilizarla con este ejercicio y está preparada
para que insertemos el anuncio que hemos diseñado.
Verifique que puede acceder al directorio FlashBanner/Part3 (consulte
“Apertura del proyecto finalizado”) y localice la carpeta del sitio Web que
hay dentro del directorio. Dentro de la carpeta del sitio Web se encuentran
los documentos que necesitaremos editar en Dreamweaver. En el siguiente
ejercicio modificaremos la página Web gnome.html.
NOTA
Encontrará una versión finalizada del sitio Web en la carpeta finished del
directorio FlashBanner/Part3.

1. Abra la página llamada gnome.html en Dreamweaver MX 2004 o
Dreamweaver 8 (en este tutorial utilizaremos Dreamweaver 8).
Encontrará este documento en la carpeta del sitio Web de los archivo
de origen de este tutorial. Busque en la carpeta start (FlashBanner/
Part3/website/start).
2. Guarde una copia de gnome.html en el mismo directorio que el archivo
SWF que publicó en el ejercicio anterior (banner3.swf).
3. Guarde una copia de rightnav.css en el mismo directorio que el archivo
SWF que publicó en el ejercicio anterior.
Busque el archivo rightnav.css en la carpeta start. Este documento
añade estilos (como el color del texto o los márgenes) al archivo
gnome.html.
4. En Dreamweaver, compruebe que tiene activada la vista Dividir
(Ver > Código y diseño).
En la vista Dividir, podrá ver y editar el código con el que está
trabajando y también seleccionar fácilmente el archivo SWF en la vista
Diseño.
5. Seleccione el marcador de posición de la imagen grande (160 x 600)
situado a la derecha de la página Web (véase la imagen siguiente).
Es aquí donde queremos añadir el anuncio de Flash al sitio Web.
Seleccione el marcador de posición de la imagen grande situada a la derecha
de la página Web en Dreamweaver. Observe que las dimensiones coinciden
con las de su archivo de anuncio.

Utilización de edición conjunta 79
6. Presione la tecla Retroceso o Supr para eliminar la imagen. Deje el
puntero de selección de texto en esa posición del documento HTML.
7. Seleccione Insertar > Media > Flash.
Al hacerlo, se abrirá el cuadro de diálogo Seleccionar archivo, donde
puede seleccionar el archivo SWF del anuncio que ha creado.
8. Seleccione el archivo banner3.swf que debería estar en la misma carpeta
que su página Web (consulte el paso 2).
9. Haga clic en Aceptar.
El archivo SWF se insertará en la página Web. (Consulte el documento
gnome.html de la carpeta para ver el código que se ha añadido al
documento).
10. (Opcional) Puede seleccionar el archivo SWF y hacer clic en Reproducir
en el inspector de propiedades para ver la animación del anuncio.
11. Seleccione Archivo > Vista previa en el navegador > IExplore
(Windows), Netscape (Macintosh) o el navegador que prefiera para
obtener la vista previa del sitio que ahora contiene el anuncio SWF en
una ventana del navegador.
12. En Dreamweaver, seleccione Archivo > Guardar para guardar los
cambios antes de seguir con la sección “Utilización de edición
conjunta”.
Utilización de edición conjunta
Llegados a este punto, tal vez quiera hacer alguna modificación en el
anuncio de Flash. Supongamos que quiere cambiar la velocidad de
fotogramas o añadir algo de texto. Es muy sencillo regresar a Flash para
editar el documento desde Dreamweaver.
1. En gnome.html, seleccione el archivo SWF en la vista Diseño (donde se
muestra el aspecto de la página debajo del código HTML) y, después,
abra el inspector de propiedades (Ventana > Propiedades).
En el inspector de propiedades aparecerán los controles para el archivo
SWF.

2. Haga clic en Editar en el inspector de propiedades (véase la imagen
siguiente).
Seleccione el archivo SWF y haga clic en Editar en el inspector de
propiedades.
Flash abrirá el archivo FLA correspondiente en el entorno de edición de
Flash o abrirá una ventana para que localice el archivo FLA asociado.
3. Realice las modificaciones necesarias en Flash.
Tenga en cuenta que la edición desde Dreamweaver se muestra en el
entorno de edición para indicar que está editando un archivo desde el
entorno de Dreamweaver.
4. Haga clic en el botón Listo situado junto a Editar desde Dreamweaver
(véase la imagen siguiente).
Puede editar directamente el archivo FLA en Dreamweaver. Haga clic en
Listo cuando haya terminado.
Flash actualiza el archivo FLA, publica el archivo SWF, cierra Flash y
vuelve al documento de Dreamweaver. El documento se actualiza en
Dreamweaver.
NOTA
Para ver los cambios del archivo SWF en Dreamweaver, puede ver el sitio
en un navegador o seleccionar el archivo SWF en la vista Diseño y hacer
clic en Reproducir en el inspector de propiedades.

Comprobación de Flash Player 81
Comprobación de Flash Player
La mayoría de los usuarios que visiten su sitio Web contarán con el
complemento de Flash Player 6 o de una versión posterior instalado. Son
muy pocos los casos en los que los usuarios no tienen el complemento
instalado. Hay varias cosas que puede hacer si un usuario sin Flash Player
visita su sitio. Si tiene un sitio que utiliza Flash fundamentalmente por
motivos de funcionalidad, tal vez desee enviar al usuario una página
personal que enlace con el sitio de Macromedia, donde el usuario podrá
descargar el reproductor.
El comportamiento Comprobar plug-in de Dreamweaver permite
comprobar si los visitantes tienen el complemento de Flash Player
instalado. Cuando el comportamiento busca un complemento, puede
redirigir al visitante a distintas URL, en función del complemento que
tengan. Por ejemplo, si el visitante no tiene Flash Player, puede abrir una
página que enlace con el sitio Web de Macromedia para que descargue la
última versión.
1. En gnome.html, haga clic dentro de la etiqueta body (haga clic entre la
“y” y el paréntesis angular de cierre) y abra el panel Comportamientos
en Dreamweaver (Ventana > Comportamientos).
2. Haga clic en Añadir (+) y seleccione Comprobar plug-in en el menú
emergente de comportamientos.
3. Seleccione Flash en el menú emergente Plug-in.
4. Deje el cuadro de texto Si se encuentra, ir a URL vacío.
Este cuadro de texto controla las páginas que ven los visitantes con el
complemento especificado. Al dejar este cuadro de texto en blanco,
conseguimos que el usuario no abandone la página si ya tiene Flash
Player instalado.
5. Escriba una URL en el cuadro de texto De lo contrario, ir a URL.
Especifique una URL alternativa para los visitantes que no tengan el
complemento de Flash Player. Escriba noflash.html en el cuadro de
texto.
NOTA
Encontrará un documento llamado noflash.html en los archivos de origen
que se incluyen en los archivos de muestra proporcionados con este
tutorial; se encuentra dentro de la carpeta finished. Guarde este
documento en la misma carpeta que gnome.html o bien cree un nuevo
archivo en esta ubicación. Lo idóneo sería que crease una página Web
personalizada para los usuarios que no tengan Flash Player.

6. Seleccione la opción Ir siempre al primer URL si no es posible detectar.
Al hacerlo, la opción realmente significa “asumamos que el visitante
tiene el complemento a no ser que el navegador indique explícitamente
que el complemento no está presente”. Dado que hemos añadido un
anuncio alternativo para los visitantes que no tengan el complemento,
es recomendable activar esta opción para el ejercicio. En la imagen
siguiente se muestran las selecciones que ha realizado hasta ahora para
añadir la detección de Flash Player.
Realice estas selecciones para añadir la detección de Flash Player en
Dreamweaver mediante un comportamiento.
7. Haga clic en Aceptar. Al terminar, Dreamweaver añadirá el siguiente
código a la etiqueta <body>:
<body id="container" onLoad="MM_checkPlugin('Shockwave
Flash','','noflash.html',true);return
document.MM_returnValue">
8. Guarde los cambios en el documento antes de continuar con la sección
“Comprobación de la aplicación”.
También puede añadir la detección de Flash Player en el entorno de
edición de Flash si no utiliza Dreamweaver. Acceda al cuadro de diálogo
Configuración de publicación (Archivo > Configuración de publicación) y
verifique que HTML esté seleccionado en la ficha Formatos.
Seguidamente, seleccione la ficha HTML y active la opción Detectar
versión de Flash. Haga clic en Configuración (al lado de la casilla de
verificación). Aquí podrá establecer el destino, el contenido y las páginas
alternativas de este cuadro de diálogo.
NOTA
Encontrará los archivos finalizados en el directorio FlashBanner/Part3,
dentro de la carpeta finished.

Resumen 83
Hemos conseguido crear un anuncio para Internet de Flash con gráficos y
animación, y también hemos logrado que reaccione ante la pulsación de un
botón. Ha finalizado su primer documento de Flash animado e interactivo
y lo ha insertado en un sitio Web utilizando Dreamweaver. Veamos ahora el
anuncio en acción en una ventana de navegador.
1. Haga clic en el documento gnome.html que modificó en los ejercicios
anteriores para abrir la página Web que contiene el anuncio.
Se abrirá una nueva ventana del navegador y se mostrará el sitio Web de
los gnomos.
2. Haga clic en el anuncio para abrir la ventana del navegador desde la
página Web.
Resumen
Ya ha finalizado el primer sitio Flash y los ha insertado en una página Web
de Dreamweaver. Ha aprendido a crear un nuevo archivo, importar el
contenido, crear nuevos activos en Flash, añadir animaciones y
ActionScript sencillo y a publicar el trabajo en la Web. También ha
aprendido a utilizar Dreamweaver para insertar el archivo SWF en una
página Web existente, probablemente en una parecida a cualquiera de las
que haya creado anteriormente.
En la tercera parte de este tutorial ha aprendido a utilizar el espacio de
trabajo de Flash y Dreamweaver para lograr realizar las siguientes tareas:
■ Modificar la configuración de publicación de un archivo SWF.
■ Publicar un archivo SWF.
■ Insertar un archivo SWF en una página Web utilizando Dreamweaver.
■ Utilizar la edición conjunta para abrir, modificar y volver a publicar un
archivo FLA desde Dreamweaver.
■ Añadir un comportamiento de Dreamweaver para comprobar la
versión de Flash Player.
NOTA
archivo origen del tutorial, abra los archivos banner3_complete.fla y
gnome.html desde la carpeta finished del directorio FlashBanner/Part3
que guardó en el disco duro en “Apertura del documento de edición” en
la página 175.

Este paso introductorio para aprender Flash y añadir archivos SWF a una
página Web es importante cuando uno empieza a utilizar Flash. Ahora ya
tiene los conceptos básicos y ha entendido la filosofía y el flujo de trabajo
necesarios para crear contenido con Flash. Con el tiempo, tendrá más
conocimientos y sabrá crear contenido mucho más interactivo, divertido,
funcional e instructivo con Flash.

85
5
CAPÍTULO 5
Tareas básicas: creación de
contenido accesible de Flash
Conociendo unas cuantas técnicas de diseño y funciones de accesibilidad
de Macromedia Flash Basic 8 y Macromedia Flash Professional 8 podrá
crear contenido de Flash accesible para todos los usuarios, incluidos los
usuarios con alguna discapacidad.
En esta lección se hace una demostración de cómo crear un documento
accesible, diseñado para utilizarlo con lectores de pantalla (que leen el
contenido Web en voz alta para usuarios con deficiencias visuales) y otras
tecnologías de asistencia.
Cómo conseguir que los lectores de pantalla puedan acceder al
documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Cómo proporcionar un título y una descripción del documento . 87
Cómo proporcionar un título y una descripción para instancias . 88
Especificación de que los lectores de pantalla omitan los
elementos del documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Cambio de texto estático por texto dinámico para obtener
accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90
Control del orden de tabulación y del orden de lectura . . . . . . . . . 91
La lección ofrece una introducción a técnicas básicas para hacer que el
contenido de Flash sea accesible. Para obtener información detallada y
exhaustiva sobre la incorporación de funciones de accesibilidad en el
contenido de Flash, consulte “Creación de contenido accesible” en el
apartado Utilización de Flash.

86 Tareas básicas: creación de contenido accesible de Flash
Configuración del espacio de
trabajo
En primer lugar, abrirá el archivo de inicio de la lección y configurará el
espacio de trabajo para utilizar un diseño óptimo para leer las lecciones.
AssetsBasic TasksCreate Accessible Content y haga doble clic en
accessibility_start.fla.
Assets/Basic Tasks/Create Accessible Content y haga doble clic en
accessibility_start.fla
original.
3. Seleccione Ventana > Conjuntos de paneles > Predeterminado para
definir el espacio de trabajo para las lecciones.
Cómo conseguir que los lectores
de pantalla puedan acceder al
documento
Ahora debe especificar que el documento sea accesible para los lectores de
pantalla y proporcionar un nombre y una descripción del documento que
un lector de pantalla pueda leer en voz alta.
1. Sin seleccionar nada en el escenario, elija Ventana > Otros paneles >
Accesibilidad.
NOTA

Cómo proporcionar un título y una descripción del documento 87
2. En el panel Accesibilidad, verifique que se seleccionen las opciones
siguientes:
Permitir acceso a la película está seleccionado de forma
predeterminada y permite que Flash Player pase la información de
accesibilidad a un lector de pantalla.
Hacer que los objetos secundarios sean accesibles permite a Flash
Player pasar la información de accesibilidad anidada dentro de un clip
de película a un lector de pantalla. Si esta opción está seleccionada para
todo el documento, podrá aún ocultar los objetos secundarios de clips
de película específicos.
Etiquetado automático asocia el texto situado junto a otro objeto del
escenario, por ejemplo un campo de introducción de texto, como una
etiqueta o un título del elemento.
Cómo proporcionar un título y
una descripción del documento
En el panel Accesibilidad del documento, puede introducir un nombre y
una descripción para los documentos de los lectores de pantalla.
■ En el cuadro de texto Nombre, introduzca Trio ZX2004. En el cuadro
de texto Descripción, introduzca Sitio Web corporativo para Trio
ZX2004. Incluye 6 botones de navegación, texto de información
general y un coche animado.

Cómo proporcionar un título y
una descripción para instancias
Ahora que ha proporcionado información sobre todo el documento, puede
facilitar información sobre los objetos del escenario incluidos en el
documento.
1. Seleccione el logotipo de Trio Motor Company en la parte superior del
escenario. En el panel Accesibilidad, introduzca Trio Motor Company
en el cuadro de texto Nombre. No introduzca ningún dato en el cuadro
de texto Descripción.
No todas las instancias necesitan una descripción, la cual se lee con la
información de título. Si el nombre del título describe lo suficiente la
función del objeto, no tiene que incluir una descripción.
2. Con el panel Accesibilidad aún abierto, seleccione el botón Dealers en
el escenario.
La información del panel Accesibilidad cambia para reflejar las
opciones de accesibilidad del objeto seleccionado.
En el panel Accesibilidad del botón Dealers, no tiene que proporcionar
un nombre en el cuadro de texto Título, porque el botón incluye una
etiqueta de texto que el lector de pantalla leerá. Si no desea que el lector
de pantalla lea el texto del botón, puede deseleccionar Etiquetado
automático cuando configure la accesibilidad del documento.
3. En el cuadro de texto Descripción, introduzca Vínculos con una página
Web con información sobre proveedores de todo el país.
El resto de botones también incluyen texto, que el lector de pantalla leerá
en voz alta; por lo tanto, no tiene que proporcionar un título. Puesto que el
título de los botones es bastante autoexplicativo, no es necesario incluir
descripciones.

Especificación de que los lectores de pantalla omitan los elementos del documento 89
Especificación de que los
lectores de pantalla omitan los
elementos del documento
Los lectores de pantalla siguen un orden específico cuando leen contenido
Web. Sin embargo, cuando el contenido de la página Web cambia, la
mayor parte de los lectores de pantalla volverán a empezar a leer el
contenido Web desde el principio. Esta característica de los lectores de
pantalla puede ser problemática cuando el contenido de Flash contiene,
por ejemplo, animaciones, ya que el lector de pantalla puede empezar a leer
de nuevo cada vez que la animación cambia.
Afortunadamente, puede utilizar el panel Accesibilidad para anular la
selección de Hacer que el objeto sea accesible, a fin de que el lector de
pantalla no reciba información de accesibilidad sobre el objeto, o para
anular la selección de Hacer que los objetos secundarios sean accesibles, a
fin de que el lector de pantalla no reciba información de accesibilidad
anidada dentro de un clip de película. Ahora hará esto último de manera
que los usuarios sepan que la página Web contiene una animación, que no
hará que el lector de pantalla se actualice constantemente.
1. En el escenario, haga clic en el coche, que es la instancia de clip de
película safety_mc.
2. En el panel Accesibilidad, anule la selección de Hacer que los objetos
secundarios sean accesibles. En el cuadro de texto Nombre, introduzca
Animación de Trio ZX2004. En el cuadro de texto Descripción,
introduzca Animación que incluye tres vistas de Trio ZX2004.

Cambio de texto estático por
texto dinámico para obtener
accesibilidad
Los lectores de texto pueden acceder a texto estático. No obstante, no se
puede proporcionar texto estático con un nombre de instancia, lo que es
obligatorio para controlar el orden de tabulación y de lectura. Cambiará el
párrafo de texto de información general por texto dinámico y especificará
opciones de accesibilidad.
1. En el escenario, seleccione el texto que empieza por “The TRIO
ZX2004 provides the ultimate in efficiency ...”.
El panel Accesibilidad cambia para indicar que no se pueden aplicar
funciones de accesibilidad a esta selección.
2. En el inspector de propiedades, seleccione Texto dinámico en el menú
emergente Tipo de texto.
La configuración de accesibilidad aparece ahora en el panel
Accesibilidad.
3. En el cuadro de texto Nombre de instancia, escriba text9_txt.
NOTA
Para especificar un orden de tabulación y un orden de lectura, la siguiente
acción que realizará, debe proporcionar un nombre de instancia para
todas las instancias. El nombre de instancia debe ser exclusivo en el
documento.

Control del orden de tabulación y del orden de lectura 91
Control del orden de tabulación y
del orden de lectura
Puede crear un orden de tabulación que determine el orden en el que los
objetos reciben la selección cuando los usuarios presionan la tecla
Tabulador. También puede controlar el orden en el que un lector de
pantalla lee la información sobre el objeto (lo que se conoce como orden de
lectura). Puede crear tanto el orden de tabulación como el de lectura con la
propiedad tabIndex de ActionScript (en ActionScript, la propiedad
tabIndex es sinónimo de orden de lectura). Si tiene Flash Professional 8,
puede utilizar el panel Accesibilidad para especificar el orden de tabulación,
pero el índice de tabulación que asigne no controla de forma necesaria el
orden de lectura.
Para crear un orden de lectura, debe asignar un índice de tabulación para
cada instancia de ActionScript.
Si dispone de Flash Professional, la creación de un orden de tabulación es
tan sencilla como introducir un número en el cuadro de texto Índice de
fichas. A continuación, puede ver el orden de tabulación directamente en el
escenario.
Para crear un orden de tabulación en esta lección, utilice uno de los
procedimientos siguientes. Para crear un orden de lectura junto con un
orden de tabulación, siga el procedimiento para controlar el orden de
tabulación y el orden de lectura con ActionScript.
Si tiene Flash Professional 8, puede seguir este procedimiento para crear un
orden de tabulación con el panel Accesibilidad:
1. Con el panel Accesibilidad abierto, seleccione la instancia logo_mc en la
parte superior del escenario. En el panel Accesibilidad, introduzca 1 en
el cuadro de texto Índice de fichas.

2. Continúe seleccionando cada instancia en el escenario e introduzca un
número de orden de tabulación en el cuadro de texto Índice de fichas a
partir de la información de la tabla siguiente:
Nombre de la
instancia
Introduzca el número siguiente en el
cuadro de texto Índice de fichas
logo_mc 1
dealers_btn 2
orders_btn 3
research_btn 4
text4_txt (el texto por
encima del botón
Overview que indica
TRIO ZX2004)
5
overview_btn 6
powerplant_btn 7
news_btn 8
safety_mc 9
text8_txt 10
text9_txt 11
bevel_mc (la barra
situada a lo largo de
la parte inferior del
escenario)
12

Control del orden de tabulación y del orden de lectura 93
Si tiene Flash Professional 8, siga este procedimiento para ver un orden de
tabulación:
■ Seleccione Ver > Mostrar orden de tabulación.
El número de índice de tabulación que ha introducido aparece junto a
la instancia en el escenario.
Siga este procedimiento para controlar el orden de tabulación y el orden de
lectura con ActionScript:
1. En la línea de tiempo, seleccione el fotograma 1 de la capa Acciones.
2. En el panel Acciones (Ventana > Acciones), visualice el código
ActionScript que crea el índice de tabulación para cada instancia del
documento.
3. Si va a utilizar Flash Basic 8 o si está utilizando Flash Professional 8 y no
ha creado el índice de tabulación con el panel Accesibilidad, suprima /*
y */ en el script para eliminar el comentario del script:
this.logo_mc.tabIndex = 1;
this.dealers_btn.tabIndex = 2;
this.orders_btn.tabIndex = 3;
this.research_btn.tabIndex = 4;
this.text4_txt.tabIndex = 5;
this.overview_btn.tabIndex = 6;
this.powerplant_btn.tabIndex = 7;
this.news_btn.tabIndex = 8;
this.safety_mc.tabIndex = 9;
this.bevel_mc.tabIndex = 12;
NOTA
Un orden de tabulación creado con ActionScript, en lugar de con el panel
Accesibilidad, no aparece cuando se activa Mostrar orden de tabulación.

con lectores de pantalla
Ya conoce la importancia de comprobar con regularidad el documento de
Flash mientras lo crea para asegurarse de que funciona de la forma prevista.
Probar el documento frecuentemente es más importante aún cuando se
diseña un documento para que funcione con tecnologías de asistencia
como lectores de pantalla. Además de probar el orden de tabulación del
archivo SWF, también debe probar este orden en varios navegadores; con
algunos navegadores el usuario emplea el tabulador para acceder o salir del
contenido de Flash de diferentes formas. Para información sobre los
recursos de comprobación del documento con un lector de pantalla,
consulte “Prueba del contenido accesible” en Utilización de Flash.
Resumen
¡Enhorabuena! Ha aprendido a crear contenido accesible de Flash. En unos
minutos ha aprendido a realizar las tareas siguientes:
■ Especificación de que el documento sea accesible para los lectores de
pantalla
■ Cómo proporcionar un título y una descripción del documento
■ Cómo proporcionar un título y una descripción para instancias de
documentos
■ Especificación de que los lectores de pantalla omitan los elementos del
documento
■ Cambio de texto estático por texto dinámico para obtener accesibilidad
■ Control del orden en el que los usuarios navegan con la tecla Tabulador
■ Control del orden de lectura con ActionScript
Macromedia mantiene un sitio Web amplio dedicado a la accesibilidad.
Para más información sobre la accesibilidad con productos Macromedia,
visite el sitio Web de accesibilidad de Macromedia en
www.macromedia.com/macromedia/accessibility.

95
6
CAPÍTULO 6
Tareas básicas: trabajo
con capas
En Macromedia Flash Basic 8 y Macromedia Flash Professional 8, las capas
son como hojas de acetato transparentes apiladas unas sobre las otras. En
las áreas de una capa que no disponen de contenido, puede ver el contenido
de las capas que están por debajo. Las capas son útiles para organizar el
contenido del documento. Por ejemplo, puede mantener las ilustraciones
de fondo de una capa y los botones de navegación de otra capa. Además,
puede crear y editar objetos en una capa sin que ello afecte a objetos de otra
capa.
Selección de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Cómo ocultar y mostrar capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Bloqueo de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98
Adición de una capa y asignación de nombre . . . . . . . . . . . . . . . . .99
Cambio del orden de las capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99
Organización de capas en una carpeta. . . . . . . . . . . . . . . . . . . . . . 100
Adición de una capa de máscara . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Adición de una capa de guías . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Eliminación de una capa. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

96 Tareas básicas: trabajo con capas
trabajo
AssetsBasic TasksWork with Layers y haga doble clic en
layers_start.fla.
Assets/Basic Tasks/Work with Layers y haga doble clic en
layers_start.fla.
original.
4. En el menú emergente Ver del escenario, en la parte superior derecha de
la línea de tiempo, seleccione Mostrar fotogramas para ver el escenario y
el área de trabajo.
5. Si es necesario, arrastre el borde inferior de la línea de tiempo (Ventana
> Línea de tiempo) hacia abajo para ampliar la vista de la línea de
tiempo.
También puede utilizar la barra de desplazamiento para desplazarse por
las capas.
NOTA
La carpeta Work with Layers contiene las versiones completas de los

Selección de una capa 97
Selección de una capa
Debe colocar los objetos, añadir texto y gráficos y realizar tareas de edición
en la capa activa. Para activar una capa, seleccione la capa en la línea de
tiempo o seleccione un objeto del escenario en la capa. La capa activa
queda resaltada en la línea de tiempo y el icono en forma de lápiz indica
que se puede editar.
2. En el escenario, seleccione el coche rojo.
Un icono en forma de lápiz en la línea de tiempo indica que la capa del
coche rojo es ahora la capa activa.
3. Seleccione la capa Texto en la línea de tiempo.
Los bloques de texto situados encima y debajo del coche rojo están
seleccionados en el escenario, ya que los dos se encuentran en la capa
Texto.

Cómo ocultar y mostrar capas
Puede ocultar las capas para ver el contenido de otras capas. Al ocultar las
capas, tiene la opción de ocultar todas las capas del documento de forma
simultánea u ocultar las capas una por una.
1. Haga clic en el icono en forma de ojo situado por encima de las capas
para que aparezca una X de color rojo en la columna del ojo.
Todo el contenido desaparece del escenario.
2. Haga clic, una por una, en cada X de color rojo y compruebe cómo el
contenido de la capa vuelve a aparecer en el escenario.
Los controles situados a la derecha de cada nombre de capa permiten
mostrar u ocultar el contenido de una capa.
Bloqueo de una capa
Cuando haya colocado el contenido de la forma deseada en una capa,
podrá bloquear la capa para evitar que las personas que trabajen en el
documento realicen cambios por error en el contenido.
1. En la línea de tiempo, haga clic en el punto negro situado bajo la
columna de bloqueo, junto a la capa del logotipo.
Aparece un icono en forma de candado, que indica que la capa ahora
está bloqueada.
2. Con la herramienta Selección, intente arrastrar el logotipo que aparece
en la parte superior del escenario.
No puede arrastrar el logotipo porque la capa está bloqueada.
NOTA
Puede que tenga que utilizar la barra de desplazamiento para ver todas las
capas.
NOTA
Si arrastra por error algún elemento de una capa no bloqueada, presione
Control+Z (Windows) o Comando+Z (Macintosh) para deshacer el
cambio.

Cambio del orden de las capas 99
Adición de una capa y asignación
de nombre
Ahora añadirá una capa, le asignará un nombre y le añadirá un símbolo
gráfico.
1. En la línea de tiempo, haga clic en la capa del coche.
2. Haga clic en Insertar capa situado debajo de la línea de tiempo.
La nueva capa aparece sobre la capa del coche y se convierte en la capa
activa.
3. Haga doble clic en el nombre de la capa, escriba background como
nombre nuevo para la capa y presione Intro (Windows) o Retorno
(Macintosh).
Es muy aconsejable asignar siempre a cada capa un nombre con sentido
que indique el tipo de contenido de ésta.
4. En el panel Biblioteca (Ventana > Biblioteca), seleccione el símbolo
gráfico de fondo y arrástrelo al escenario.
Puesto que la capa background está encima del resto de capas excepto
de la capa de máscara, los objetos de esa capa aparecerán sobre los
objetos de las capas inferiores.
Cambio del orden de las capas
Evidentemente no desea que el fondo cubra el resto de objetos del
escenario. Normalmente la capa de fondo es la capa inferior en la línea de
tiempo. Vaya a la capa background que acaba de crear.
1. En la línea de tiempo, arrastre la capa background de la posición
superior a la posición inferior.
Todos los objetos del escenario aparecen ahora por encima del fondo.
2. Con la capa background aún seleccionada en el inspector de propiedades
introduzca 0 en el cuadro de texto X y 72 en el cuadro de texto Y.
Presione Intro (Windows) o Retorno (Macintosh) para colocar de forma
precisa la capa Fondo en el escenario.

Organización de capas en una
carpeta
Puede crear carpetas de capas para organizar las capas y reducir el desorden
de la línea de tiempo. La línea de tiempo contiene dos capas que contienen
objetos de navegación: una para los botones de navegación y otra para las
otras ilustraciones de navegación. Creará una carpeta de capas denominada
Navegación para estas dos capas.
1. En la línea de tiempo, seleccione la capa Botones.
2. Haga clic en Insertar carpeta de capas, que se encuentra debajo de los
nombres de las capas.
3. Haga doble clic en el nombre de la carpeta de capas y asigne a la carpeta
el nombre Navegación.
4. Arrastre las capas Barra de navegación y Botones a la carpeta
Navegación.
Las capas aparecen con sangría para indicar que están dentro de la
carpeta.
Puede hacer clic en la flecha de expansión para expandir y contraer la
carpeta y las capas incluidas.
NOTA
Si el inspector de propiedades muestra las propiedades del fotograma en
lugar de las del clip de película, haga clic en el clip de película Fondo en el
escenario.

Adición de una capa de máscara 101
Adición de una capa de máscara
La utilización de una capa de máscara proporciona un método sencillo para
mostrar de forma selectiva las partes de la capa o las capas que hay debajo
de ésta. Las máscaras exigen que una capa sea de máscara y las capas que
están por debajo de ésta sean las capas con máscara.
Utilizará la forma rectangular en el escenario para enmascarar parte del
gráfico y la animación de carretera a fin de que la animación se adapte
mejor al escenario.
1. En el escenario, con la herramienta Selección seleccionada, haga clic en
la forma rectangular situada debajo de la carretera.
2. Arrastre la forma recto y hacia arriba y alinee el borde izquierdo de la
forma con el borde izquierdo de la carretera.
3. Haga clic con el botón derecho del ratón (Windows) o con la tecla
Control presionada (Macintosh) en la capa de máscara de la línea de
tiempo y elija Máscara en el menú contextual.
La capa se convierte en una capa de máscara, lo cual se indica con un
icono en forma de diamante azul. La capa que se encuentra
inmediatamente por debajo queda vinculada a la capa de máscara. El
nombre de la capa de máscara aparece sangrado y su icono pasa a ser un
icono de capa de azul.
4. En la línea de tiempo, arrastre la capa de la carretera a la capa de máscara
y colóquela debajo de la capa del coche.
La capa de máscara y las capas que ésta enmascara quedan bloqueadas
de forma automática.
5. Para ver el efecto de la máscara, seleccione Control > Probar película.
6. Cuando acabe de ver el efecto de la máscara, cierre la ventana del archivo
SWF para volver al documento.

Adición de una capa de guías
Hasta ahora ha aprendido cosas sobre capas normales y capas de máscara.
El tercer tipo de capa son las capas de guías. Las capas de guías se utilizan
para mantener contenido que no se desea que aparezca en el archivo
publicado o exportado. Por ejemplo, en una capa de guías puede incluir
instrucciones para el resto de personas que trabajan en el documento. Al
leer las lecciones de Flash, notará que muchos de los archivos FLA de las
lecciones contienen marcadores de posición, que indican dónde debe
colocarse un objeto del escenario, en las capas de guías. Ahora creará una
capa de guías.
1. En la línea de tiempo, seleccione la capa Fondo y, a continuación, haga
clic en Insertar capa para crear una capa.
2. Asigne a la capa nueva el nombre Notas y presione Intro (Windows) o
Retorno (Macintosh).
Control presionada (Macintosh) en la capa Notas y seleccione Guía en
el menú contextual.
Un icono situado junto al nombre de la capa indica que la capa es una
capa de guías.
4. Con la capa Notas aún seleccionada, haga clic en la herramienta Texto
en la barra de herramientas. A continuación, en el área del escenario
situada sobre el coche y la carretera, introduzca Nota de producción:
Animación sin stop (); las acciones entran en reproducción indefinida
de forma predeterminada.
5. Guarde el documento y seleccione Control > Probar película.
El contenido que ha añadido a la capa de guías no aparece en la ventana
del archivo SWF.
6. Cuando haya visto el archivo SWF, cierre la ventana para volver al
documento.

Resumen 103
Eliminación de una capa
Puesto que realmente no necesita la capa de guías en el documento, la
eliminará.
■ En la línea de tiempo, con la capa Notas seleccionada, haga clic en el
botón Eliminar capa.
Resumen
¡Enhorabuena! Ha aprendido a trabajar con capas en Flash. En unos
■ Selección de una capa.
■ Cómo ocultar y mostrar capas.
■ Bloqueo de una capa.
■ Adición de una capa y asignación de nombre.
■ Cambio del orden de las capas.
■ Organización de capas en una carpeta.
■ Adición de una capa de máscara.
■ Adición de una capa de guías.
■ Eliminación de una capa.

105
7
CAPÍTULO 7
de una aplicación
La aplicación que va a crear en esta lección permite a los usuarios ver el
coste de seleccionar varios productos. Un botón de cálculo añade el coste
total.
Copia de campos de introducción de texto y de texto dinámico 106
Asignación de nombres a los campos de texto . . . . . . . . . . . . . . . 107
Adición de un componente Button y asignación de un nombre 108
Declaración de variables y valores de los precios. . . . . . . . . . . . . 109
Especificación de valores de campos de introducción de texto .110
Creación de una función. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Escritura de un controlador de eventos para el componente. . . .112
trabajo
AssetsBasic TasksCreate an Application y haga doble clic en
calculator_start.fla.

106 Tareas básicas: creación de una aplicación
Assets/Basic Tasks/Create an Application y haga doble clic en
calculator_start.fla.
original.
El formulario ya incluye un campo de introducción de texto en la
columna QTY y un campo de texto dinámico en la columna Price.
Va a copiar los campos de texto de las filas Shocks y Cover.
Copia de campos de
introducción de texto y de texto
dinámico
Utilizará campos de introducción de texto para crear un formulario.
1. Haga clic en el campo de introducción de texto en el que los usuarios
introducen la cantidad de reproductores de CD. Presione Alt y arrastre
la copia del campo hacia abajo hasta el área Shocks QTY.
2. Presione la tecla Alt y haga clic en el campo de introducción de texto que
acaba de arrastrar. A continuación, arrastre la nueva copia del campo
hasta el área Cover QTY.
NOTA
La carpeta Create an Application contiene las versiones completas de los
NOTA

Asignación de nombres a los campos de texto 107
3. Presione la tecla Alt y haga clic en el campo de texto dinámico del precio
de los reproductores de CD; a continuación, arrastre la copia del campo
hasta el área de precios Shocks.
4. Presione la tecla Alt y haga clic en el campo que acaba de arrastrar; a
continuación, arrastre la copia del campo hasta el área de precios Cover.
Asignación de nombres a los
campos de texto
Antes de poder especificar los valores de los campos de texto en
ActionScript, primero se debe proporcionar a cada campo de texto un
nombre de instancia en el inspector de propiedades. Al añadir “txt” al
nombre de instancia, el objeto se identifica como un objeto de texto.
1. Haga clic en el campo de introducción de texto superior de la columna
QTY. En el cuadro de texto Nombre de instancia del inspector de
propiedades (Ventana > Propiedades), escriba qty1_txt.
2. Siga el procedimiento anterior para asignar los nombres de los campos
de introducción de texto central e inferior qty2_txt y qty3_txt,
respectivamente.
3. Haga clic en el campo de texto dinámico superior de la columna Price.
En el cuadro de texto Nombre de instancia del inspector de propiedades,
escriba price1_txt.
4. Siga el procedimiento anterior para asignar los nombres de los campos
de introducción de texto central e inferior price2_txt y price3_txt,
respectivamente.

Adición de un componente
Button y asignación de un
nombre
Los componentes son clips de película que ofrecen una forma fácil de
añadir funcionalidad avanzada al documento sin necesidad de tener
conocimientos avanzados sobre ActionScript. Utilizará el componente
Button para crear un botón Calcular que calcule los precios totales. Puesto
que el componente que utiliza se basa en ActionScript 2.0, en primer lugar
debe configurar el cuadro de diálogo Configuración de publicación para
garantizar que el contenido de Flash se reproduzca de la forma esperada.
1. Seleccione Archivo > Configuración de publicación.
2. En la ficha Flash del cuadro de diálogo Configuración de publicación,
seleccione ActionScript 2.0 en el menú emergente Versión de
ActionScript, si no está seleccionado.
3. En la línea de tiempo, haga clic en la capa Componentes para
seleccionarla.
4. En el panel Componentes (Ventana > Componentes), arrastre el
componente Button hasta el escenario y colóquelo sobre la guía
Calculate.
5. En la ficha Parámetros del inspector de propiedades, con el componente
Button seleccionado, haga clic en el texto Button en la fila Label y
escriba Calcular. A continuación, presione Intro o Retorno.
El texto que se escribe en el cuadro de texto Label es el texto que
aparece en el componente.
6. En el cuadro de texto Nombre de instancia, escriba calcular para asignar
un nombre a la instancia del botón.

Declaración de variables y valores de los precios 109
Declaración de variables y
valores de los precios
Para que la aplicación multiplique la cantidad de piezas seleccionadas por el
precio de la pieza, es necesario definir una variable para cada pieza en
ActionScript. El valor de la variable es el coste de la pieza.
1. En la línea de tiempo, haga clic en el fotograma 1 de la capa Actions y
abra el panel Acciones (Ventana > Acciones).
2. En el panel Script, escriba lo siguiente:
//Declarar variables y valores de los precios de las
piezas de los coches.
Las dos barras inclinadas (//) indican que el texto que sigue es un
comentario. La práctica más recomendable es añadir siempre
comentarios que ofrezcan una explicación del código ActionScript.
3. Presione Intro (Windows) o Retorno (Macintosh) y escriba lo siguiente
para indicar el coste de cada pieza:
var priceCD = 320;
var priceShocks = 150;
var priceCover = 125;
NOTA
A lo largo de esta lección, es posible que desee desactivar las sugerencias
para el código, sugerencias que le solicitan la sintaxis correcta de
ActionScript. En tal caso, para desactivarlas, haga clic en el menú
emergente situado en la esquina superior derecha del panel Acciones.
Seleccione Preferencias y, a continuación, deseleccione Sugerencias
para el código en la ficha ActionScript.

Especificación de valores de
campos de introducción de texto
Debe especificar los valores de los campos de introducción de texto. Los
valores se utilizarán al crear el código ActionScript que multiplica los
valores de cantidad y coste.
1. En el panel Script, con el punto de inserción detrás del texto 125;,
presione Intro (Windows) o Retorno Macintosh) dos veces y escriba lo
siguiente:
//Establecer los valores iniciales de los campos de texto
de cantidad
2. Presione Intro o Retorno y escriba lo siguiente:
qty1_txt.text = 0;
qty1_txt es el nombre de instancia asignado al primer campo de
introducción de texto de la columna QTY. .text es una propiedad
que define el valor inicial del campo de texto, que se establece en 0.
3. Presione Intro o Retorno y escriba las dos líneas siguientes para
establecer el valor 0 en los otros dos campos QTY:
qty2_txt.text = 0;
qty3_txt.text = 0;
Cuando haya terminado, el código ActionScript será:
//Establecer los valores iniciales de los campos de texto
de cantidad
qty1_txt.text = 0;
qty2_txt.text = 0;
qty3_txt.text = 0;

Creación de una función 111
Creación de una función
Una función es un script que puede utilizarse repetidamente para realizar
una tarea específica. Puede pasar parámetros a una función y ésta puede
devolver un valor. En esta lección, cada vez que el usuario haga clic en el
botón Calcular, se ejecutará una función que multiplicará los datos de los
campos de introducción de texto y devolverá valores en los campos de texto
dinámico. Ahora va a escribir esa función.
1. En el panel Script, con el punto de inserción detrás del código
ActionScript qty3_txt.text = 0;, presione Intro (Windows) o
Retorno (Macintosh) dos veces y escriba el siguiente comentario:
//Calcular la cantidad por el precio
2. Presione Intro o Retorno y escriba lo siguiente para crear una función
que se ejecute cuando la cabeza lectora entre en el fotograma 1, donde
se adjunta el script:
this.onEnterFrame = function (){
3. Escriba el siguiente código ActionScript para especificar la forma en la
que la función debe multiplicar los valores de los campos de
introducción de texto para el reproductor de CD:
price1_txt.text = Number (qty1_txt.text)*Number
(priceCD);
price1_txt es el nombre de instancia que ha asignado al primer
campo de introducción de texto de la columna del precio en el
escenario.
.text define el texto que debe aparecer en el campo de texto, que es el
número de piezas multiplicado por el coste de la pieza: los 320 euros
que establece como valor para la variable priceCD.
4. Presione Intro o Retorno y escriba las dos líneas siguientes:
(priceShocks);
(priceCover);
};
La función debe tener el siguiente aspecto:
//Calcular la cantidad por el precio
this.onEnterFrame = function (){
(priceCD);

(priceShocks);
(priceCover);
};
Escritura de un controlador de
eventos para el componente
Para que el archivo SWF reaccione a eventos tales como hacer clic con el
botón del ratón, puede utilizar controladores de eventos: código
ActionScript asociado a un objeto y un evento determinados. Utilizará un
controlador de eventos on() para el componente Button que calcula el
precio total cuando el usuario hace clic en el botón.
Para más información sobre los controladores de eventos, consulte el
“Gestión de eventos” en Aprendizaje de ActionScript 2.0 en Flash.
1. En el escenario, haga clic en el componente Button y vaya al panel
Acciones.
La ficha situada en la parte inferior del panel Acciones, cuyo nombre es
Calcular, indica que está adjuntando el script directamente al objeto
seleccionado, no a un fotograma.
2. En el panel Script, escriba el comentario siguiente:
//Calcula el precio total.
3. Detrás del comentario, presione Intro (Windows) o Retorno
(Macintosh) y escriba lo siguiente para crear un controlador para el
componente PushButton que ha colocado en el escenario:
on(click) {
Acaba de escribir el inicio del controlador de eventos on(). La palabra
(click) especifica que el evento debe tener lugar cuando el usuario
hace clic en el botón Calcular.
Un componente Button tiene su propia línea de tiempo. En la jerarquía
de la línea de tiempo, el componente Timeline es un objeto secundario
de la línea de tiempo principal. Para señalar los elementos desde la línea
de tiempo del componente Button a la línea de tiempo principal de este
script, debe utilizar el código with (_parent).

4. Con el punto de inserción al final de la línea que acaba de escribir,
presione Intro o Retorno y escriba lo siguiente:
with(_parent){
5. Presione Intro o Retorno y escriba lo siguiente para completar el
controlador:
priceTotal_txt.text = Number (price1_txt.text) + Number
(price2_txt.text) + Number (price3_txt.text);
}
}
Cuando haya terminado, el script será:
on(click) {
with(_parent){
priceTotal_txt.text = Number (price1_txt.text) + Number
(price2_txt.text) + Number (price3_txt.text);
}
}
El controlador de eventos que ha escrito especifica que el texto del campo
priceTotal_txt debe ser la suma de los valores de los campos price1_txt,
price2_txt y price3_txt.
Va a probar la aplicación para asegurarse de que se ejecuta de la forma
deseada.
2. En la versión de prueba de la película que aparece en Flash Player,
escriba números en los campos QTY para ver lo que aparece en los
campos Price.
3. Haga clic en Calcular para ver el precio total de todas las piezas.

Resumen
¡Enhorabuena! Ha aprendido a crear una aplicación. En unos minutos ha
■ Copia de campos de introducción de texto y de texto dinámico.
■ Asignación de nombres de instancia a campos de texto.
■ Adición de un componente Button.
■ Declaración de variables y valores.
■ Especificación de valores de campos de texto.
■ Creación de una función.
■ Escritura de un controlador de eventos para el componente.
Para más información acerca de ActionScript, consulte los tutoriales de
ActionScript en Tutoriales de Flash.

115
8
CAPÍTULO 8
Tareas básicas: utilización de
herramientas de diseño
Macromedia Flash Basic 8 y Macromedia Flash Professional 8 ofrecen
diversos métodos para colocar objetos en el escenario. En este tutorial se
enseña a utilizar las herramientas de diseño de Flash para crear una interfaz
de usuario.
Utilización de guías para alinear un objeto . . . . . . . . . . . . . . . . . . .117
Cambio del tamaño del escenario . . . . . . . . . . . . . . . . . . . . . . . . . .118
Cambio del tamaño de los objetos para ajustarlo al tamaño del
escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
Especificación de las opciones de alineación de ajuste . . . . . . .119
Alineación de un objeto utilizando las guías de alineación . . . . 120
Alineación de objetos utilizando el panel Alinear . . . . . . . . . . . . .121
Ajuste de objetos entre sí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
Alineación de objetos mediante el inspector de propiedades . 122
Alineación de objetos utilizando la cuadrícula y las teclas de
flecha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Aunque en esta lección se utilizan herramientas específicas para tipos
concretos de objetos (guías de alineación para alinear texto, por ejemplo),
no existen reglas específicas para alinear un tipo concreto de objeto. En los
proyectos propios, utilice las herramientas que se adapten mejor a sus
necesidades.

116 Tareas básicas: utilización de herramientas de diseño
trabajo
AssetsBasic TasksUse Layout Tools y haga doble clic en
layout_tools_start.fla.
Assets/Basic Tasks/Use Layout Tools y haga doble clic en
layout_tools_start.fla.
original.
5. Haga clic en el área de trabajo, lejos de los objetos del escenario, para que
no se seleccionen objetos.
NOTA
La carpeta Use Layout Tools contiene las versiones completas de los

Utilización de guías para alinear un objeto 117
Utilización de guías para alinear
un objeto
Puede utilizar reglas y guías para alinear o colocar con precisión los objetos
en el documento. Añadir guías sirve como ayuda para centrar los bloques
de texto.
1. Seleccione Ver > Reglas.
Aparece una regla horizontal y una regla vertical encima del escenario y
a la izquierda.
2. Haga clic en la regla horizontal y arrástrela hasta llegar a la posición
horizontal del píxel 250.
3. Haga clic en la regla vertical y arrástrela hacia la izquierda hasta llegar a
la posición del píxel 375.
4. Para verificar si tiene activada la opción Ajustar a guías, seleccione Ver
> Ajuste > Ajustar a guías.
6. En el escenario, haga clic en la esquina superior izquierda del borde de
texto azul y arrástrela hacia la intersección de las dos guías.
Aparecerá un pequeño círculo en la esquina superior izquierda del
borde de texto cuando lo arrastre cerca de la esquina del borde. Este
círculo indica que se ha creado el ajuste.
7. Si desea eliminar las guías, seleccione Ver > Guías > Borrar guías.

Cambio del tamaño del escenario
El tamaño del escenario del documento es de 750 x 500 píxeles. Ahora
cambiará el tamaño del escenario por 640 x 480, un tamaño habitual que
acepta varios tamaños y resoluciones de pantalla.
1. Haga clic en una zona vacía del área de trabajo para anular la selección
del bloque de texto.
2. En el inspector de propiedades puede ver las propiedades de todo el
documento. Haga clic en Tamaño.
3. En el cuadro de diálogo Propiedades del documento, introduzca 640
para la anchura y 480 para la altura y, a continuación, haga clic en
Aceptar.
El tamaño del documento cambia, pero los objetos del escenario
conservan su tamaño.
Cambio del tamaño de los
objetos para ajustarlo al tamaño
del escenario
Al cambiar el tamaño del escenario, los elementos del escenario se han
colocado fuera del escenario y ocupan parte del área de trabajo. Puede
cambiar el tamaño de los elementos fácilmente para volverlos a ajustar al
tamaño del escenario.
1. En el escenario, haga clic en las montañas grises para seleccionarlas. Con
la tecla Mayús presionada, haga clic en la franja azul de la parte superior
del escenario para añadirla a la selección.
2. Abra el panel Alinear (Ventana > Alinear).
En el panel Alinear aparece una descripción de las opciones de
alineación.
3. En el panel Alinear, seleccione En escenario; entonces, en Coincidir
tamaño, seleccione Coincidir anchura. El tamaño del elemento
seleccionado cambia para ajustarse a la anchura del escenario.
4. En el mismo panel Alinear, haga clic en Alinear borde izquierdo.
El elemento se alinea con el borde izquierdo del escenario.
5. En la línea de tiempo, haga clic en la capa de bisel para seleccionarla.

Especificación de las opciones de alineación de ajuste 119
6. Desde el panel Biblioteca (Ventana > Biblioteca), arrastre el símbolo del
bisel a una zona en la parte inferior del escenario.
7. En el panel Alinear, verifique que En escenario sigue seleccionado y haga
clic en Coincidir anchura.
8. Haga clic en Alinear borde izquierdo y Alinear borde inferior.
El bisel se alinea con el borde inferior del escenario.
9. Cierre el panel Biblioteca y el panel Alinear.
Especificación de las opciones
de alineación de ajuste
El ajuste le permite colocar un objeto con precisión en el escenario,
haciendo que el objeto se fije a otros objetos y a herramientas de alineación.
Especificará opciones de alineación de ajuste para mostrar las guías
horizontal y vertical, que le ayudarán a colocar elementos en el escenario.
1. Seleccione Ver > Ajuste > Alineación de ajuste para activar esta opción,
si no está ya seleccionada.
2. Seleccione Ver > Ajuste > Editar alineación de ajuste.
3. En el cuadro de texto Borde de la película del cuadro de diálogo
Alineación de ajuste, introduzca 30 px (píxeles) para ajustar los objetos
a un borde del escenario de 30 píxeles.
4. Compruebe que los cuadros de texto de tolerancia de ajuste horizontal
y vertical contienen el valor 10.
La tolerancia de ajuste determina lo cerca que debe estar un objeto
respecto a otro objeto o herramienta de alienación para colocarse en su
sitio.
5. Haga clic en Aceptar.

Alineación de un objeto
utilizando las guías de alineación
Ahora que ha especificado las opciones de alineación de ajuste, utilizará las
opciones especificadas para ayudarle a colocar un objeto en el escenario.
2. En la línea de tiempo, seleccione la capa Auto.
3. Desde el panel Biblioteca (Ventana > Biblioteca), arrastre el icono del
coche y colóquelo en el escenario, en algún lugar de la zona gris junto al
texto.
4. Vuelva a arrastrar la instancia del coche para que aparezcan las guías de
alineación de ajuste. Acerque el coche al texto y muévalo hacia arriba y
hacia abajo, según convenga, hasta que aparezca la guía de centrado.
Esta guía indica que el coche está centrado en relación con el texto.
5. Manteniendo el coche centrado con el texto, (debe seguir viendo la guía
de centrado), arrastre el coche en línea recta hacia la izquierda del
escenario, hasta que la guía se ajuste al borde de 30 píxeles que ha creado
anteriormente.
Ha alineado el coche con el texto y con el borde de ajuste.

Ajuste de objetos entre sí 121
Alineación de objetos utilizando
el panel Alinear
Previamente, ha utilizado el panel Alinear para ajustar objetos al tamaño
del escenario. Ahora utilizará el panel Alinear para centrar objetos entre sí y
respecto al escenario.
1. Con la herramienta Selección, haga clic en el texto del escenario que dice
“Introducing the World 's First Hybrid 4WD”.
2. Pulse la tecla Mayús mientras hace clic en la segunda línea del texto del
título, “2004 Trio QZ”, para añadirlo a la selección.
3. En el panel Alinear (Ventana > Alinear), anule la selección de En
escenario y seleccione Alinear horizontalmente respecto al centro.
Ha centrado las dos filas respecto a sus ejes horizontales. A
continuación, agrupará el texto del título para centrar ambas líneas
respecto al escenario.
4. Con ambas líneas de texto seleccionadas, seleccione Modificar >
Agrupar.
5. En el panel Alinear, seleccione En escenario y, a continuación, vuelva a
seleccionar Alinear horizontalmente respecto al centro.
Con la opción En escenario seleccionada, los objetos se alinean respecto
al centro horizontal del escenario.
6. Cierre el panel Alinear.
Ajuste de objetos entre sí
Puede ajustar objetos del escenario respecto a otros objetos del escenario, de
modo que la alineación se establece entre sí. Utilizando la función Ajustar a
objetos, alineará una barra de navegación con la franja superior del
escenario.
1. Seleccione Ver > Ajuste. En el submenú, seleccione Ajustar a objetos si
no está seleccionado.
2. En la línea de tiempo, seleccione la capa Nav.

3. Desde el panel Biblioteca, arrastre el icono nav a una zona del escenario
por debajo de la franja azul y suéltelo.
4. Haga clic en la esquina superior izquierda del icono nav y arrástrelo, de
manera que aparezca el indicador circular de ajuste.
5. Con el indicador de ajuste visible, arrastre la esquina superior izquierda
de la barra de navegación y ajústela en su sitio en la esquina inferior
izquierda de la franja azul.
Alineación de objetos mediante
el inspector de propiedades
El inspector de propiedades le permite alinear objetos con precisión
respecto a los ejes x e y del escenario, desde el punto de registro del objeto
del escenario. El punto de registro es el punto con respecto del cual se
alinea o se hace girar un objeto. Utilizará el inspector de propiedades para
alinear el logotipo.
1. En la línea de tiempo, seleccione la capa superior.

Alineación de objetos utilizando la cuadrícula y las teclas de flecha 123
2. Desde el panel Biblioteca (Ventana > Biblioteca), arrastre el logotipo a
un área vacía del escenario.
3. En el inspector de propiedades, con el logotipo seleccionado, introduzca
20 en el cuadro de texto X y 8 en el cuadro de texto Y. Presione Intro
(Windows) o Retorno (Macintosh).
El logotipo se desplazará a la nueva ubicación según los valores x e y.
Alineación de objetos utilizando
la cuadrícula y las teclas de
flecha
Puede utilizar las cuadrícula como ayuda para colocar objetos en el
escenario.
1. Seleccione Ver > Cuadrícula > Mostrar cuadrícula.
La cuadrícula no aparece al probar o publicar el documento.
NOTA
Puede ver y modificar el punto de registro de un objeto desde el panel de
información (Ventana > Información). El cuadrado negro de la cuadrícula
representa el punto de registro. Para cambiarlo, haga clic en otro
cuadrado de la cuadrícula.
NOTA
Si desea ajustar objetos a las líneas de cuadrícula horizontal y vertical,
también debe seleccionar Ajustar a cuadrícula (Ver > Ajuste > Ajustar a
cuadrícula). En esta lección, no ajustará objetos a la cuadrícula.

2. En el escenario, seleccione el texto del título que previamente ha
agrupado.
3. Utilice la tecla Flecha arriba para desplazar el texto hasta que la primera
línea del texto del título esté en una línea de cuadrilla horizontal. No
olvide dejar espacio entre el texto del título y la barra de navegación.
Resumen
¡Enhorabuena! Ha aprendido a utilizar las herramientas de diseño para
crear una interfaz de usuario. En unos minutos ha aprendido a realizar las
tareas siguientes:
■ Ver las reglas del espacio de trabajo
■ Utilización de las guías para alinear objetos
■ Cambio del tamaño del escenario
■ Cambio del tamaño de los objetos para ajustarlo al tamaño del
escenario
■ Alinear un objeto utilizando las guías de alineación
■ Ajuste de objetos entre sí
■ Alineación de objetos mediante el inspector de propiedades
■ Utilización de la cuadrícula y las teclas de flecha para alinear objetos
Para más información sobre temas de diseño en Flash, continúe con otra
lección de la serie Tareas básicas.
NOTA También puede utilizar las teclas Flecha izquierda, Flecha abajo y Flecha
derecha para desplazar objetos del escenario en la dirección de la flecha.

125
9
CAPÍTULO 9
de símbolos e instancias
Un símbolo es un objeto reutilizable y una instancia es la aparición de un
símbolo en el escenario. El uso repetido de instancias no aumenta el
tamaño del archivo y es una buena estrategia para que el archivo del
documento mantenga un tamaño pequeño. Los símbolos también
simplifican la edición de un documento; cuando se edita un símbolo, todas
las instancias del símbolo se actualizan para reflejar los cambios. Otra
ventaja de los símbolos es que permiten crear interactividad sofisticada.
Creación de un símbolo gráfico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Duplicación y modificación de una instancia de un símbolo. . . . 128
Modificación de un símbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Creación de un símbolo de clip de película. . . . . . . . . . . . . . . . . . . 130
Asignación de un nombre de instancia al clip de película . . . . . . .131
Adición de un efecto al clip de película . . . . . . . . . . . . . . . . . . . . . . .131

126 Tareas básicas: creación de símbolos e instancias
trabajo
AssetsBasic TasksCreate Symbols and Instances y haga doble clic
en symbols_start.fla.
Assets/Basic Tasks/Create Symbols and Instances y haga doble clic
en symbols_start.fla.
El documento se abre en el entorno de edición de Flash.
original.
configurar el espacio de trabajo.
NOTA
La carpeta Create Symbols and Instances contiene las versiones
completas de los archivos FLA del tutorial como referencia.

Creación de un símbolo gráfico 127
Creación de símbolos
Cuando se crea un símbolo, se especifica uno de los comportamientos
siguientes:
■ Gráfico
■ Clip de película
■ Botón
En esta lección, trabajará con símbolos gráficos y de clips de película. Para
leer una lección sobre símbolos de botones, seleccione Ayuda > Tutoriales
de Flash > Tareas básicas: Adición de animación y navegación a botones.
Creación de un símbolo gráfico
Los símbolos gráficos son adecuados para la utilización repetida de
imágenes estáticas o para crear animaciones asociadas con la línea de
tiempo principal. A diferencia de lo que ocurre con los símbolos de clips de
película y de botones, a los símbolos gráficos no se les pueden asignar
nombres de instancia ni se puede hacer referencia a ellos en ActionScript.
En esta lección convertirá una ilustración vectorial del escenario en un
símbolo gráfico.
2. En el escenario, arrastre el puntero alrededor del coche para
seleccionarlo.
3. Seleccione Modificar > Convertir en símbolo.
4. En el cuadro de diálogo Convertir en símbolo, introduzca CarGraphic
como nombre y seleccione Gráfico como comportamiento.

5. La cuadrícula Registro utiliza un cuadrado negro pequeño para indicar
donde se encuentra el punto de registro dentro del cuadro de límite del
símbolo. Un punto de registro es el eje alrededor del cual gira el símbolo
y el punto con el que se alinea el símbolo. Haga clic en el cuadrado
superior izquierdo de la cuadrícula para seleccionar la ubicación del
punto de registro y haga clic en Aceptar.
6. El coche del escenario es ahora una instancia del símbolo CarGraphic.
El inspector de propiedades muestra las propiedades de la instancia del
símbolo gráfico.
7. Abra el panel Biblioteca (Ventana > Biblioteca) para ver el símbolo.
Encontrará el símbolo CarGraphic en el panel Biblioteca. Flash
almacena los símbolos en la biblioteca. Cada documento dispone de su
propia biblioteca y puede compartir bibliotecas entre distintos archivos
FLA.
Duplicación y modificación de
una instancia de un símbolo
Después de crear un símbolo, puede utilizar sus instancias varias veces en el
documento. Puede modificar las siguientes propiedades de una instancia
individual sin que ello afecte a otras instancias o al símbolo original: color,
escala, rotación, transparencia alfa, brillo, tinta, altura, anchura y
ubicación.
Si edita el símbolo más adelante, la instancia retiene sus propiedades
modificadas además de adquirir las acciones de edición del símbolo.
Ahora duplicará la instancia del coche y, a continuación, cambiará la tinta
del duplicado.

Modificación de un símbolo 129
1. En el escenario, seleccione el coche. Presione Alt y arrastre el coche hacia
arriba para crear otra instancia.
2. Con el duplicado seleccionado, seleccione Tinta en el menú emergente
Color en el inspector de propiedades.
3. En el área RVA, introduzca 0 en el menú emergente Color rojo, 0 en el
menú emergente Color verde y 255 en el menú emergente Color azul.
A continuación, presione Intro (Windows) o Retorno (Macintosh).
La instancia duplicada se vuelve azul y la instancia original permanece
sin cambios.
Modificación de un símbolo
Puede entrar en el modo de edición de símbolos haciendo doble clic en una
instancia de un símbolo. Los cambios que se realicen en el modo de edición
de símbolos afectan a todas las instancias del símbolo.
1. Realice una de las acciones siguientes para entrar en el modo de edición
de símbolos:
■ En el escenario, haga doble clic en una de las instancias del coche.
■ En el panel Biblioteca, haga doble clic en el símbolo CarGraphic.
Junto a la escena 1 hacia la parte superior del espacio de trabajo,
aparece el nombre del símbolo, lo que indica que está en el modo de
edición de símbolos del símbolo cuyo nombre se muestra.

2. En el panel Herramientas, seleccione la herramienta Transformación
libre y arrastre el puntero alrededor del coche inferior para seleccionar
todo el coche.
En el modo de edición de símbolos, el coche es un gráfico, dentro de
un símbolo, que puede manipular como hace con cualquier otro
gráfico vectorial.
3. Arrastre el selector central derecho de cambio de tamaño de la
herramienta Transformación libre ligeramente hacia la derecha para
expandir el símbolo.
4. Haga clic en la escena 1, sobre la línea de tiempo, para salir del modo de
Las dos instancias del símbolo reflejan la transformación.
Creación de un símbolo de clip
de película
Un clip de película es, en muchos aspectos, como un documento dentro de
otro documento. Este tipo de símbolos tiene una línea de tiempo propia
independiente de la línea de tiempo principal. Puede añadir clips de
película dentro de otros clips de película y botones para crear clips de
película anidados. También puede utilizar el inspector de propiedades para
asignar un nombre a una instancia de un clip de película y, a continuación,
hacer referencia al nombre de instancia en ActionScript.
Convertirá el neumático del escenario en un clip de película.
1. Con la herramienta Selección, haga clic en el neumático del escenario
para seleccionarlo y seleccione Modificar > Convertir en símbolo.
2. En el cuadro de diálogo Convertir en símbolo, introduzca MCWheel
como nombre y seleccione MovieClip como comportamiento.

Adición de un efecto al clip de película 131
3. En la cuadrícula Registro, seleccione esta vez el cuadrado central como
punto de registro, para que el centro de la película sea el eje alrededor
del cual gira el símbolo. Haga clic en Aceptar.
La imagen del escenario es ahora una instancia del símbolo MCWheel
en la biblioteca.
Asignación de un nombre de
instancia al clip de película
Para hacer referencia a una instancia en ActionScript, y como consejo
general, asigne siempre nombres de instancia a los símbolos de botones y
de clips de películas. No se puede asignar un nombre de instancia a un
símbolo gráfico.
■ En el inspector de propiedades, con la instancia MCWheel
seleccionada en el escenario, introduzca wheel_mc en el cuadro de
texto Nombre de instancia.
Adición de un efecto al clip de
película
Puede crear una animación dentro de una línea de tiempo de clip de
película, en el modo de edición de símbolos, que se reproduce de forma
independiente de la línea de tiempo principal. Añadirá un efecto al símbolo
MCWheel que hará que todas las instancias del símbolo giren.
1. Con la herramienta Selección, haga doble clic en la instancia wheel_mc
para entrar en el modo de edición de símbolos.
Control presionada (Macintosh) en el símbolo y seleccione Efectos de
línea de tiempo > Transformar/Transición > Transformar.
3. En el cuadro de diálogo Transformar, introduzca 60 en el cuadro de
texto de duración del efecto para especificar que el efecto afecta a 60
fotogramas de la línea de tiempo.
4. En el cuadro de texto donde se indica el giro, introduzca 1 y verifique
que el cuadro de texto Girar indica 360.

5. Haga clic en Actualizar vista previa para obtener una vista previa del
efecto y, a continuación, haga clic en Aceptar.
El efecto se extiende a 60 fotogramas de la línea de tiempo del clip de
película.
6. Haga clic en la escena 1 sobre la línea de tiempo para salir del modo de
7. Seleccione Control > Probar película para ver la animación.
Resumen
¡Enhorabuena! Ha aprendido a trabajar con símbolos e instancias. En unos
minutos ha realizado las tareas siguientes:
■ Creación de un símbolo gráfico.
■ Duplicación y modificación de una instancia.
■ Creación de un símbolo de clip de película.
■ Edición de un símbolo añadiendo un efecto.
Para obtener más información sobre Flash, lea otra de las lecciones de la
serie Tareas básicas.

133
10
CAPÍTULO 10
Tareas básicas: adición de
animación y navegación a botones
Un botón es un símbolo que contiene marcos especiales para estados
diferentes del botón, como cuando el usuario pasa el puntero del ratón
sobre el botón o cuando el usuario hace clic en el botón. Cuando se
selecciona el comportamiento del botón para un nuevo símbolo,
Macromedia Flash Basic 8 y Macromedia Flash Professional 8 crean la línea
de tiempo para los estados del botón. Puede añadir navegación a los
botones utilizando comportamientos o escribiendo ActionScript.
En este tutorial aprenderá a crear y modificar botones, además de añadir
animaciones a un botón.
Creación de un botón a partir de objetos agrupados . . . . . . . . . . 135
Asignación de un nombre a una instancia de botón. . . . . . . . . . . 135
Visualización del área activa activando botones. . . . . . . . . . . . . . 136
Cambio del área activa de un botón. . . . . . . . . . . . . . . . . . . . . . . . . 137
Alineación de botones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Creación de animación para un estado de botón . . . . . . . . . . . . . 139
Adición de una acción a un botón. . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Adición de navegación a un botón . . . . . . . . . . . . . . . . . . . . . . . . . . .141
Comprobación del archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Si no está familiarizado con los símbolos y las instancias, antes de empezar
esta lección seleccione Ayuda > Cómo > Conceptos básicos de Flash >
Crear símbolos e instancias para estudiar esa lección.

134 Tareas básicas: adición de animación y navegación a botones
trabajo
AssetsBasic TasksAdd Button Animation and Navigation y haga
doble clic en buttons_start.fla.
Assets/Basic Tasks/Add Button Animation and Navigation y haga
doble clic en buttons_start.fla.
original.
NOTA
La carpeta Add Button Animation and Navigation contiene las versiones
completas de los archivos FLA del tutorial como referencia.

Asignación de un nombre a una instancia de botón 135
Creación de un botón a partir de
objetos agrupados
Puede crear botones a partir de texto y gráficos, incluidos imágenes de
mapa de bits y objetos agrupados. En esta lección, convertirá un logotipo y
un texto en un botón.
1. En el panel Herramientas, haga clic en la herramienta Selección. En el
escenario, seleccione el texto y el logotipo agrupados, y seleccione
Modificar > Convertir en símbolo.
2. En el cuadro de diálogo Convertir en símbolo, asigne el nombre
BTNLogo al símbolo y seleccione Botón como comportamiento.
3. En la cuadrícula de registro, compruebe que el cuadrado de la esquina
superior izquierda está seleccionado como punto de registro, y haga clic
en Aceptar.
El punto de registro es el punto respecto al cual se alinea y gira el
símbolo.
Asignación de un nombre a una
instancia de botón
La práctica más aconsejable es asignar nombres a los símbolos en el
escenario. ActionScript utiliza el nombre de instancia para identificar el
objeto.
■ Con el botón recién creado seleccionado, abra el inspector de
propiedades (Ventana > Propiedades). En el cuadro de texto Nombre
de instancia, escriba logo_btn.

Visualización del área activa
activando botones
Si la función Habilitar botones simples está activada, puede ver los aspectos
más sencillos de los botones, como el área activa (el área donde puede hacer
clic) y los colores utilizados para los estados del botón. No se reproduce el
diseño más complejo de botones, como las animaciones.
1. Haga clic en una zona vacía del área de trabajo para garantizar que no
hay ningún objeto seleccionado.
2. Seleccione Control > Habilitar botones simples, y a continuación
desplace el puntero del ratón por distintas áreas del botón que ha creado.
Las únicas áreas del botón sobre las que puede hacer clic (señaladas
cuando el cursor se convierte en una mano) son el área de texto y el
logotipo. No se puede hacer clic en el espacio en blanco alrededor del
texto y del logotipo.
3. Vuelva a seleccionar Control > Habilitar botones simples para desactivar
la función, de manera que pueda editar el botón.
A continuación, redefinirá el área activa, para que el área del botón cubra el
área agrupada.

Cambio del área activa de un botón 137
Cambio del área activa de un
botón
Se puede especificar un área activa de un tamaño diferente del tamaño
estándar del área activa; para ello, debe añadir un fotograma clave al
fotograma de zona activa del símbolo del botón y dibujar una forma que
defina el área activa.
1. En el escenario, haga doble clic en el botón del logotipo que ha creado
para ver la línea de tiempo del botón. La línea de tiempo del botón
contiene los estados siguientes:
■ Flecha arriba
■ Sobre
■ Flecha abajo
■ Zona activa
2. Haga doble clic en el nombre de la capa 1 en la línea de tiempo y asigne
el nombre Área activa a la capa.
3. Seleccione el fotograma Zona activa (fotograma 4) de la capa Área activa
de la línea de tiempo de BTNLogo, y pulse F6 para añadir un fotograma
clave.
4. En el panel Herramientas, seleccione la herramienta Rectángulo. Los
colores de trazo y relleno del rectángulo no son importantes. En el
escenario, dibuje un rectángulo que cubra con la mayor precisión el
logotipo y el texto.
Ahora el rectángulo define el área del botón en la que se puede hacer
clic.
5. Haga clic en la escena 1, situada encima de la esquina superior izquierda
del escenario, para salir del modo de edición de símbolos.
6. Seleccione Control > Habilitar botones simples.
7. En el escenario, vuelva a colocar el puntero sobre el texto.
El área activa se adapta a la forma del rectángulo que ha dibujado.
8. Seleccione Control > Habilitar botones simples para anular la selección
de esta función.

Alineación de botones
Puede alinear botones respecto a los ejes horizontal y vertical mediante el
panel Alinear.
1. En la línea de tiempo, haga clic en la capa Contenido.
2. Haga clic en Insertar capa situado debajo de la línea de tiempo.
3. Haga doble clic en el nombre de la capa, escriba Botones animados
como nombre nuevo para la capa y presione Intro (Windows) o Retorno
(Macintosh).
4. En el panel Biblioteca (Ventana > Biblioteca), seleccione el botón 1 y
arrástrelo al borde inferior derecho del escenario. No es necesario
colocarlo en un lugar concreto.
5. En el campo Nombre de instancia del inspector de propiedades, asigne
el nombre de instancia links_btn al botón.
6. Arrastre el botón 2 y el botón 3 del panel Biblioteca, y colóquelos a la
izquierda del botón 1. Utilice aproximadamente el espaciado que se
indica en la siguiente ilustración:
7. Con la herramienta Selección, arrastre el puntero para seleccionar los
tres botones.
8. Abra el panel Alinear seleccionando Ventana > Alinear). Compruebe
que En escenario no está seleccionado, ya que no desea alinear los
objetos respecto al escenario.
9. En el panel Alinear, haga clic en Alinear verticalmente respecto al
centro, y a continuación haga clic en Distribuir horizontalmente
respecto al centro.
Los botones se alinean en el escenario.
10. Cierre el panel Alinear.

Creación de animación para un estado de botón 139
11. En el escenario, haga clic en un espacio vacío del área de trabajo para
asegurarse de que no hay ningún objeto seleccionado y, entonces,
seleccione el botón 2. En el cuadro de texto Nombre de instancia del
inspector de propiedades, introduzca contact_btn. Seleccione el botón
3 y asígnele el nombre sweepstakes_btn.
Creación de animación para un
estado de botón
Ahora creará una película dentro del estado Sobre del botón 1 y, a
continuación, creará una interpolación de forma en el clip de película. La
interpolación de forma crea un efecto que cambia el color de gris a rojo.
1. En el escenario, haga doble clic en el botón 1 para abrirlo en el modo de
2. En la línea de tiempo del botón 1, oculte todas las capas excepto la capa
Color. En la capa Color, seleccione el fotograma clave Sobre.
3. En el escenario, seleccione la forma de óvalo negro para el botón 1. Pulse
F8 para convertir el óvalo en símbolo.
4. En el cuadro de diálogo Convertir en símbolo, asigne al símbolo el
nombre Animación de botón. Seleccione Clip de película (no Botón)
como comportamiento, y haga clic en Aceptar.
5. En el escenario, haga doble clic en el símbolo de animación de botón
para pasar al modo de edición de símbolos.
6. Asigne el nombre Cambio de color a la capa 1. Seleccione el fotograma
15 y presione F6 para añadir otro fotograma clave.
7. Con la cabeza lectora en el fotograma 15, seleccione la forma del botón
en el escenario, y seleccione una sobra roja brillante en el menú
emergente Color de relleno del inspector de propiedades.
8. En la línea de tiempo, haga clic en un fotograma entre el 1 y el 15. En
el inspector de propiedades, seleccione Forma del menú emergente
Interpolación.
Arrastre la cabeza lectora desde el fotograma 1 al 15 para ver el cambio
de color.
NOTA
Puede ocultar las capas haciendo clic en el punto situado debajo de la
columna del ojo, junto al nombre de capa, para que aparezca una X roja.

Adición de una acción a un botón
Cuando el usuario haga clic en el botón y se reproduzca la animación
interpolada, haremos que la cabeza lectora se mueva al final de la línea de
tiempo de Animación de botón y se detenga. Utilizará ActionScript para
controlar el movimiento de la cabeza lectora en una línea de tiempo.
1. Agregue una nueva capa a la línea de tiempo Animación de botón y
asígnele el nombre Acciones.
2. En la capa Acciones, añada un fotograma clave en el fotograma 15
pulsando F6.
3. Abra el panel Acciones (Ventana > Acciones) y, si es necesario, amplíelo
para ver la caja de herramientas Acciones y el panel Script.
4. Con el fotograma 15 de la capa Acciones seleccionado, vaya a la
categoría Funciones globales > Control de la línea de tiempo de la caja
de herramientas Acciones y haga doble clic en stop.
La acción stop permite indicar que la cabeza lectora se detenga cuando
llegue al fotograma 15.
En la línea de tiempo de Animación de botón, el fotograma 15 de la
capa Acciones muestra una a pequeña, que indica que se ha adjuntado
una acción a ese fotograma.
5. Haga clic en la escena 1, situada encima del escenario, para salir del
modo de edición de símbolos y volver al documento principal.
6. Haga clic en el control del menú emergente situado en la esquina
superior derecha del panel Acciones, y seleccione Cerrar panel para
cerrar el panel.
7. Seleccione Control > Habilitar botones simples para poder probar el
botón animado.
8. En el escenario, desplace el puntero por encima del botón y haga clic en
el botón.
9. Seleccione Control > Habilitar botones simples para anular la selección
de esta función.

Adición de navegación a un botón 141
Adición de navegación a un
botón
Utilizando los comportamientos, puede añadir rápidamente navegación a
un botón sin tener conocimientos de ActionScript. Añadirá navegación
para que se abra una página Web cuando el usuario haga clic en un botón.
1. En el escenario, seleccione la instancia del botón 1.
2. En el panel Comportamientos (Ventana > Comportamientos), haga clic
en Añadir comportamiento y seleccione Web > Ir a página Web.
3. En el cuadro de diálogo Ir a URL, seleccione _blank en el menú
emergente Abrir en para abrir la URL en una nueva ventana del
navegador. En el cuadro de texto URL, acepte la opción
predeterminada, http://www.macromedia.com, o bien introduzca una
URL diferente. Haga clic en Aceptar.
4. Si lo desea, repita los pasos anteriores, seleccionando el botón 2 y
después el botón 3, para añadir también navegación a estos botones.
superior derecha del panel Comportamientos, y seleccione Cerrar panel
para cerrar el panel.

Comprobación del archivo SWF
Debe probar el documento para visualizar la animación de los botones y
ver si la navegación funciona de la forma prevista.
2. Mueva el puntero del ratón sobre la instancia de botón 1 para ver la
animación de color que ha creado.
3. Haga clic en el botón para ver si su navegador Web se abre en la URL
especificada.
4. Si ha añadido navegación a los otros dos botones, pruébelos también.
5. Cuando haya terminado de ver el archivo SWF, cierre el archivo SWF y
las ventanas del navegador.
Resumen
¡Enhorabuena! Ha aprendido a utilizar los botones. En unos minutos ha
■ Creación de un botón a partir de objetos agrupados.
■ Asignación de un nombre a una instancia de botón.
■ Visualización del área activa de un botón.
■ Cambio del área activa de un botón.
■ Alineación de botones.
■ Creación de animación para un estado de botón.
■ Adición de una acción a un botón.
■ Añadir navegación a un botón.

143
11
CAPÍTULO 11
Tareas básicas: creación de una
presentación con pantallas (sólo
Flash Professional)
Flash Professional 8 ofrece una nueva forma de crear presentaciones con
pantallas de diapositivas. Imagine que puede colocar elementos multimedia
en pantallas de diapositivas, añadir diapositivas anidadas que heredan
elementos multimedia de otras diapositivas y utilizar los controles
incorporados para navegar por las diapositivas en tiempo de ejecución: así
de sencillo es crear una presentación con pantallas de diapositivas.
Adición de contenido a una diapositiva de presentación . . . . . . 147
Adición de comportamientos de navegación por pantallas a los
botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Adición de una diapositiva y asignación de nombre. . . . . . . . . . . 149
Selección y desplazamiento de diapositivas . . . . . . . . . . . . . . . . . 150
Adición de contenido a una nueva diapositiva. . . . . . . . . . . . . . . . 150
Adición de comportamientos de transición . . . . . . . . . . . . . . . . . . .151

144 Tareas básicas: creación de una presentación con pantallas (sólo Flash Professional)
trabajo
AssetsBasic TasksPresentation with Screens y haga doble clic en
presentation_start.fla.
Assets/Basic Tasks/Presentation with Screens y haga doble clic en
presentation_start.fla.
original.
NOTA
La carpeta Presentation with Screens contiene las versiones completas
de los archivos FLA del tutorial como referencia.

Visualización de la jerarquía de pantallas y las líneas de tiempo de las pantallas 145
Visualización de la jerarquía de
pantallas y las líneas de tiempo
de las pantallas
Se añade contenido a las pantallas de forma muy parecida a como se añade
contenido al escenario, pero las pantallas son clips de película anidados,
que dependen de una jerarquía, líneas de tiempo anidadas y
elementos heredados. Todas las pantallas se encuentran en el primer
fotograma de la línea de tiempo raíz, que está oculta, y el contenido de
todas las pantallas se carga en el primer fotograma. Para más información
sobre las pantallas, consulte “Trabajo con pantallas (sólo para Flash
Professional)” en Utilización de Flash.
1. Si no se visualiza el panel Contorno de pantalla, seleccione Ventana >
Otros paneles > Pantallas.
El panel Contorno de pantalla muestra una vista en miniatura de cada
diapositiva de la presentación y la jerarquía de la presentación.
Cuando se selecciona una pantalla en el panel Contorno de pantalla, la
pantalla aparece en la ventana Documento. Cuando se seleccionan
varias pantallas, el contenido de la primera pantalla seleccionada
aparece en la ventana Documento.

2. En el panel Contorno de pantalla, seleccione la pantalla de presentación.
Todos los documentos de pantallas de diapositivas contienen una
pantalla de presentación, que se encuentra en el nivel superior de la
jerarquía de pantallas. Considere la diapositiva de presentación como
una diapositiva maestra: el contenido de la diapositiva de presentación
puede aparecer en todas las diapositivas del documento.
Las cuatro diapositivas que aparecen con sangría por debajo de la
diapositiva de presentación en el panel representan pantallas anidadas,
o secundarias, y la diapositiva de presentación es la diapositiva
principal.
3. Abra la línea de tiempo, si no está abierta (Ventana > Línea de tiempo).
Seleccione otra diapositiva en el panel Contorno de pantalla para ver la
línea de tiempo de la pantalla.
Cada pantalla tiene una línea de tiempo propia. No obstante, la línea
de tiempo principal de un documento con pantallas nunca se puede
visualizar.
Visualización de las propiedades
de pantalla
Puede ver varias propiedades de una diapositiva, en función de donde
seleccione la diapositiva.
1. En el panel Contorno de pantalla, seleccione la miniatura de la
presentación.
El inspector de propiedades permite cambiar el nombre de instancia,
que también es el nombre de la pantalla que aparece en el panel
Contorno de pantalla.
2. Seleccione la diapositiva de presentación real, no la miniatura.
El inspector de propiedades muestra ahora los mismos controles que se
suelen utilizar cuando se trabaja en el escenario y en las propiedades de
los documentos.
NOTA
La pantalla de presentación no se puede mover ni eliminar.

Adición de contenido a una diapositiva de presentación 147
Adición de contenido a una
diapositiva de presentación
Añadirá botones de navegación a la diapositiva de presentación para que los
botones aparezcan en cada diapositiva de la presentación.
diapositiva de presentación. En la línea de tiempo, seleccione el
fotograma 1 de la capa Navegación.
2. En el panel Biblioteca, arrastre el símbolo NextBtn a la pantalla, y
colóquelo dentro de la banda negra de la parte inferior de la pantalla.
3. En el inspector de propiedades, con el botón seleccionado, introduzca
280 en el cuadro de texto X y 165 en el cuadro de texto Y para colocar
el botón.
4. Introduzca forwardBtn en el cuadro de texto Nombre de instancia.
5. Arrastre PrevBtn a la diapositiva y con el inspector de propiedades
introduzca 245 en el cuadro de texto X y 165 en el cuadro de texto Y.
6. Introduzca backBtn en el cuadro de texto Nombre de instancia.
7. En el panel Contorno de pantalla, seleccione cada diapositiva anidada
para verificar que los botones aparecen ahora en todas las diapositivas.
NOTA
Las coordenadas que introduzca son relativas al punto de registro central
predeterminado de la diapositiva. Para más información sobre el punto de
registro de las pantallas, consulte “Especificación de la clase de
ActionScript y el punto de registro de una pantalla (sólo en Flash
Professional)” en el apartado Utilización de Flash.
NOTA
El contenido de una pantalla principal aparece ligeramente atenuado
cuando se visualiza en una pantalla anidada.

navegación por pantallas a los
botones
Al abrir una nueva presentación de diapositivas de Flash, el documento ya
incluye las funciones que permiten a los usuarios navegar entre las pantallas
de diapositivas con las teclas de flecha del teclado. También añadirá
comportamientos de navegación a los botones, lo que ofrece a los usuarios
una opción adicional para navegar entre diapositivas.
1. En la diapositiva de presentación, seleccione la instancia forwardBtn. En
el panel Comportamientos (Ventana > Comportamientos) haga clic en
Añadir (+) y, a continuación, seleccione Pantalla > Ir a la diapositiva
siguiente en el menú.
2. En la diapositiva de presentación, seleccione la instancia backBtn. En el
panel Comportamientos (Ventana > Comportamientos) haga clic en
Añadir (+) y, a continuación, seleccione Pantalla > Ir a la diapositiva
anterior en el menú.
3. Seleccione Control > Probar película y haga clic en los botones de la
ventana del archivo SWF que aparece. Cerciórese de que los botones
funcionan como está previsto. Cuando acabe de probar el documento,
cierre la ventana del archivo SWF.
NOTA
De forma predeterminada, las teclas de flecha del teclado permiten
navegar entre pantallas del mismo nivel, no entre pantallas anidadas.

Adición de una diapositiva y asignación de nombre 149
Adición de una diapositiva y
asignación de nombre
Puede añadir fácilmente diapositivas a la presentación con el menú
contextual del panel Contorno de pantalla.
1. En el panel Contorno de pantalla, seleccione la miniatura del título.
Haga clic con el botón derecho del ratón (Windows) o con la tecla
Control presionada (Macintosh) y seleccione Insertar pantalla en el
menú contextual.
Aparece una pantalla nueva en el panel Contorno de pantalla, en el
mismo nivel que la diapositiva de título. La nueva diapositiva hereda de
forma automática los elementos multimedia de la diapositiva de
presentación.
2. Haga doble clic en el nombre de la nueva diapositiva en el panel
Contorno de pantalla y asígnele el nombre funciones.

Selección y desplazamiento de
diapositivas
Puede copiar, cortar, pegar y arrastrar pantallas en el panel Contorno de
pantalla para cambiar su orden en la presentación. Seleccionará tres
pantallas, las cortará y las pegará de manera que queden anidadas como
pantallas secundarias de la diapositiva funciones.
1. En el panel Contorno de pantalla, seleccione la diapositiva de
rendimiento. Haga clic con la tecla Mayús presionada en las diapositivas
de seguridad y de gestión para añadirlas a la selección.
Control presionada (Macintosh) en las diapositivas seleccionadas y
seleccione Cortar en el menú contextual.
3. En el panel Contorno de pantalla, haga clic con el botón derecho del
ratón (Windows) o con la tecla Control presionada (Macintosh) en la
diapositiva funciones y seleccione Pegar pantalla anidada en el menú
contextual.
Las tres diapositivas aparecen ahora como diapositivas secundarias de la
diapositiva funciones.
Adición de contenido a una
nueva diapositiva
La diapositiva funciones, como diapositiva secundaria de la diapositiva de
presentación, hereda las propiedades de dicha diapositiva. Además, puesto
que la diapositiva funciones es la diapositiva de la que dependen las tres
diapositivas que ha copiado y pegado, el contenido que añada a dicha
diapositiva aparece en las tres diapositivas secundarias.
diapositiva funciones. En el panel Biblioteca, arrastre el símbolo del
contenido de la diapositiva funciones a cualquier ubicación de la
ventana Documento.
2. En el inspector de propiedades, asigne el nombre features_mc a la
instancia del contenido de la diapositiva funciones.
3. En el inspector de propiedades, introduzca -275 en el cuadro de texto X
y -130 en el cuadro de texto Y para colocar la instancia.

Adición de comportamientos de transición 151
transición
Aunque la presentación esté prácticamente acabada, añadirá
comportamientos de transición para que ésta resulte más interesante. En
concreto, añadirá comportamientos que hacen que el contenido se
desvanezca y salga de la ventana Documento.
1. En el panel Contorno de pantalla, seleccione la diapositiva funciones.
En el panel Comportamientos, haga clic en Añadir (+) y seleccione
Pantalla > Transición en el menú.
2. En el cuadro de diálogo Transiciones, seleccione la opción de
desvanecimiento en la lista de transiciones y visualice la vista previa
situada en la parte inferior izquierda del cuadro de diálogo. Verifique
que se ha seleccionado 2 segundos como duración y que Dentro está
seleccionado como dirección, y haga clic en Aceptar.
3. En el panel Comportamientos, haga clic en la opción de mostrar en la
columna Evento para abrir el menú emergente y seleccione revealChild.
La opción revealChild especifica que el comportamiento mostrará la
siguiente pantalla secundaria.
4. Para añadir el comportamiento de volar, verifique que la diapositiva
funciones aún está seleccionada. En el panel Comportamientos, haga
clic en Añadir (+) y seleccione Pantalla > Transición en el menú.
5. En el cuadro de diálogo Transiciones, seleccione la opción de volar en la
lista de transiciones y seleccione Fuera como dirección.
6. En el cuadro de texto Duración, introduzca .5 como duración de la
transición.

7. En el menú emergente de ubicación de inicio, seleccione la opción de
centro izquierda y observe la vista previa de la transición y, a
En el panel Comportamientos, revealChild aparece ahora dos veces.
Ahora con el comportamiento de volar, ocultará la pantalla secundaria.
8. En el panel Comportamientos, haga clic en el segundo evento de la lista,
que es el que acaba de añadir. En el menú emergente, seleccione
hideChild.
Comprobación de la
presentación
La presentación ya se ha completado y está preparada para que la pruebe.
2. Utilice los botones de navegación para avanzar y retroceder para
moverse por la presentación y observar las transiciones.
Resumen
¡Enhorabuena! Ha aprendido a crear una presentación de diapositivas con
pantallas. En unos minutos ha aprendido a realizar las tareas siguientes:
■ Adición de contenido a una diapositiva de presentación.
■ Adición de navegación por pantallas a los botones.
■ Adición de una diapositiva y asignación de nombre.
■ Selección y desplazamiento de diapositivas.
■ Adición de contenido a una nueva diapositiva.
■ Adición de comportamientos de transición a una diapositiva.
Para más información sobre la utilización de pantallas, consulte “Trabajo
con pantallas (sólo en Flash Professional)” en el apartado Utilización de
Flash.

153
12
CAPÍTULO 12
Creación de gráficos:
cómo dibujar en Flash
Cuando se dibuja en Flash, se crean ilustraciones vectoriales, que son
representaciones matemáticas de líneas, curvas, colores y posiciones. Una
ilustración vectorial no depende de la resolución; puede volver a adaptar su
escala a cualquier tamaño o visualizarla con cualquier resolución sin perder
la claridad. Además, las ilustraciones vectoriales se descargan con más
rapidez que las imágenes de mapa de bits equivalentes. En este tutorial
aprenderá a crear una ilustración vectorial de una tuerca y un logotipo.
Cómo dibujar un polígono . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Rotación de la forma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Utilización de la función de silueta . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Transformación de la forma del dibujo . . . . . . . . . . . . . . . . . . . . . . 158
Copia de trazos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Cómo dibujar con la herramienta Línea. . . . . . . . . . . . . . . . . . . . . . 159
Selección y adición de otro color de relleno . . . . . . . . . . . . . . . . . 159
Agrupación de la forma. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Creación de un logotipo con la herramienta Pluma . . . . . . . . . . . 160

154 Creación de gráficos: cómo dibujar en Flash
trabajo
AssetsCreating GraphicsDraw in Flash y haga doble clic en
drawing_start.fla.
■ En Macintosh, desplácese hasta Disco duro de Macintosh /
Assets/Creating Graphics/Draw in Flash y haga doble clic en
drawing_start.fla.
Flash se abre en el entorno de edición.
original.
mientras vaya completando esta lección, recuerde que debe guardar su
NOTA
La carpeta Draw in Flash contiene las versiones completas de los archivos
FLA del tutorial como referencia.

Selección de una herramienta de forma 155
Selección de una herramienta de
forma
Las herramientas de forma ofrecen un modo sencillo de crear figuras como
óvalos, rectángulos, polígonos y estrellas. Utilizará la herramienta PolyStar
para crear un polígono.
1. En la línea de tiempo, seleccione la capa Contenido.
2. En el panel Herramientas, seleccione la herramienta PolyStar. Puede
que tenga que hacer clic en el control inferior derecho de la herramienta
Rectángulo para ver un menú que muestre la herramienta PolyStar.
3. Haga clic en cualquier lugar del espacio de trabajo gris junto al escenario
para mostrar las propiedades de la forma que creará. En el inspector de
propiedades (Ventana > Propiedades), verifique que el negro esté
seleccionado como color de trazo, 1 píxel esté seleccionado como altura
de trazo y Sólido esté seleccionado como estilo de trazo.
El trazo es la línea que rodea la forma.
4. Haga clic en el control Color de relleno y seleccione el azul con un valor
hexadecimal #0000FF.
El color de relleno aparece dentro del trazo en una forma.

Selección de opciones para
crear un polígono
La herramienta PolyStar ofrece opciones que permiten especificar el
número de caras de un polígono; puede utilizar también opciones para que
la herramienta cree una estrella. Especificará que el polígono tiene seis
caras.
1. En el inspector de propiedades, con la herramienta PolyStar aún
seleccionada, haga clic en Opciones.
2. En el cuadro de diálogo Configuración de herramientas, verifique que
Polígono aparezca en el menú emergente Estilo e introduzca 6 en el
cuadro de texto Número de lados. Haga clic en Aceptar.
Cómo dibujar un polígono
Si presiona la tecla Mayús, podrá limitar la forma a lo largo de la línea
vertical u horizontal.
■ Presione Mayús y arrastre sobre el lado izquierdo del escenario (lejos de
los números de la capa de guías) para dibujar un hexágono, como se
muestra en la ilustración siguiente:

Utilización de la función de silueta 157
Rotación de la forma
Después de crear una forma, puede utilizar el panel Transformar para
especificar el número concreto de grados que se debe girar la forma.
escenario, haga doble clic dentro del hexágono para seleccionar el trazo
y el relleno.
Si hace clic una vez dentro de una forma, sólo se selecciona el relleno.
2. Seleccione Ventana > Transformar. En el cuadro de diálogo
Transformar, verifique que Girar está seleccionado e introduzca -15 en
el cuadro de texto Girar para girar la forma 15º hacia la derecha.
Presione Intro (Windows) o Retorno (Macintosh).
Utilización de la función de
silueta
Cuando se crea una forma encima de otra en la misma capa y ambas formas
no están agrupadas, la forma de encima “recorta” el área de la forma de
debajo. Creará un círculo dentro del hexágono y, a continuación, recortará
el círculo.
1. Seleccione Ver > Ajuste y elija Ajustar a objetos si no está seleccionado.
2. En el panel Herramientas, haga clic en la herramienta Óvalo. Mientras
presiona Mayús para limitar la forma, dibuje un círculo dentro del
hexágono (imagine que el hexágono es un reloj y empiece el círculo a las
10:00 y arrástrelo hasta las 4:00), como en la ilustración siguiente.
NOTA
Si se equivoca al dibujar el círculo, presione Control+Z (Windows) o
Comando+Z (Macintosh) para deshacer el círculo.

escenario, haga clic dentro del círculo y presione la tecla Retroceso o
Supr.
Transformación de la forma del
dibujo
Con la herramienta Transformación libre puede escalar, girar, comprimir,
expandir o sesgar líneas y formas. Utilizará la herramienta Transformación
libre para comprimir el dibujo.
libre. Haga doble clic en el hexágono en el escenario para seleccionar
tanto el trazo como el relleno.
2. Arrastre el selector central superior de la herramienta Transformación
libre para transformar el hexágono en la forma siguiente:
Copia de trazos
Puede seleccionar y copiar trazos, acciones que realizará ahora para crear el
borde inferior de la tuerca.
1. Con la herramienta Selección, haga clic en cualquier lugar del escenario
o del espacio de trabajo, lejos de un objeto para anular la selección de la
forma.
2. Presione Mayús y haga clic en las tres líneas de la forma del escenario que
conforman la parte inferior del hexágono para seleccionarlas, como se
muestra en la ilustración siguiente:

Selección y adición de otro color de relleno 159
3. Presione Mayús+Alt y arrastre el puntero hacia abajo ligeramente para
arrastrar una copia de las tres líneas, como en la ilustración siguiente:
Cómo dibujar con la herramienta
Línea
La herramienta Línea permite dibujar líneas rectas en cualquier dirección.
■ En el panel Herramientas, seleccione la herramienta Línea. En el
escenario, dibuje cuatro líneas verticales desde el hexágono hasta las
copias de los trazos que ha arrastrado hacia abajo, como se muestra en
la ilustración siguiente:
Selección y adición de otro color
de relleno
Puede utilizar la herramienta Cubo de Pintura para cambiar un color
existente y rellenar áreas vacías rodeadas por líneas. Utilizará la herramienta
Cubo de Pintura para añadir un color de relleno a las áreas vacías del
dibujo.
1. En el panel Herramientas, seleccione la herramienta Cubo de pintura.
En el área del mezclador de colores, haga clic en el control Color de
relleno y seleccione el azul con el valor hexadecimal #3366FF.
2. En el escenario, haga clic dentro de las líneas para añadir el color
seleccionado a las áreas vacías, tal como se indica en la ilustración
siguiente:

Agrupación de la forma
Puede manipular el trazo y rellenar una forma como entidades
independientes, como lo ha hecho antes, o puede agrupar el trazo con el
relleno para manipular la forma como un solo gráfico, cosa que hará a
continuación.
1. Con la herramienta Selección, arrastre el puntero alrededor de la forma
para seleccionar el trazo y el relleno. Seleccione Modificar > Agrupar.
2. Haga clic en el área de relleno y mueva la forma alrededor del lado
izquierdo del escenario, según desee, para colocarla.
Creación de un logotipo con la
herramienta Pluma
Con la herramienta Pluma puede dibujar segmentos de línea recta o curva
precisos. Haga clic para crear puntos en los segmentos de línea recta y
arrastre el puntero para crear puntos en segmentos de línea curva. Puede
ajustar los segmentos ajustando los puntos en la línea. Utilizará la
herramienta Pluma para crear el logotipo.
1. En el panel Herramientas, seleccione la herramienta Pluma.
2. Haga clic en el punto situado junto al número 1 y, a continuación, haga
clic en el punto situado junto al número 2 para crear un segmento de
línea recta.
3. Haga clic en el punto situado junto al número 3 y junto al número 4,
uno tras otro (como si estuviera completando un dibujo de puntos). De
este modo, creará los segmentos de línea recta que conforman el
logotipo.

Creación de un logotipo con la herramienta Pluma 161
4. Para cerrar la ruta, coloque la herramienta Pluma sobre el primer punto
de anclaje (el punto situado junto al número 1). Cuando está colocada
correctamente, aparece un círculo pequeño junto a la punta de la pluma.
Haga clic para cerrar la ruta. Una vez cerrada la ruta, se rellena con el
color de relleno seleccionado.
De manera predeterminada, los puntos curvos seleccionados se
muestran como círculos huecos, mientras que los puntos angulares
seleccionados se muestran como cuadrados huecos.
5. Con la herramienta Selección, mueva el puntero alrededor del logotipo
que ha creado.
Cuando mueve el puntero sobre un punto de esquina, en el que puede
arrastrar para crear varios ángulos, el puntero aparece de la manera
siguiente:
Cuando mueve el puntero sobre un segmento de línea curva (no tiene
puntos de curva en el logotipo), en el que puede arrastrar para crear
varias líneas curvas, el puntero aparece de la manera siguiente:

Resumen
¡Enhorabuena! Ha aprendido a utilizar algunas de las diversas herramientas
de dibujo de Flash. En unos minutos ha aprendido a realizar las tareas
siguientes:
■ Creación de un polígono.
■ Rotación de una forma.
■ Recorte de una forma dentro de otra forma.
■ Transformación de ilustraciones.
■ Copia de trazos.
■ Cómo dibujar líneas con la herramienta Línea.
■ Selección y adición de un color de relleno.
■ Agrupación de una forma.
■ Creación de un logotipo con la herramienta Pluma.
Para más información sobre la creación de ilustraciones en Flash, consulte
el Chapter 5, “Drawing” en Utilización de Flash.

163
13
CAPÍTULO 13
Creación de gráficos: creación de
una animación de línea de tiempo
Macromedia Flash Basic 8 y Macromedia Flash Professional 8
proporcionan herramientas potentes para crear animaciones. La animación
más sencilla en Flash se realiza con un proceso denominado interpolación.
Interpolar es una manera de decir “intercalar” y significa rellenar los
fotogramas que hay entre dos fotogramas clave de manera que un gráfico
que se muestra en el primer fotograma clave se convierta en el gráfico que
se muestra en el segundo fotograma clave.
Existen dos tipos de interpolaciones que se pueden crear en Flash:
interpolación de movimiento e interpolación de forma. La diferencia principal
entre las interpolaciones de movimiento y de forma es que la primera
funciona en objetos o símbolos agrupados y la segunda se utiliza con
objetos que no son símbolos y que no están agrupados.
Creación de una interpolación de movimiento . . . . . . . . . . . . . . . 165
Creación de una interpolación de forma . . . . . . . . . . . . . . . . . . . . . 166
Cómo copiar y pegar fotogramas clave en una animación . . . . . 168
Cambio de la velocidad de la animación . . . . . . . . . . . . . . . . . . . . . 169

164 Creación de gráficos: creación de una animación de línea de tiempo
trabajo
AssetsCreating GraphicsTimeline Animation y haga doble clic en
animation_start.fla.
ApplicationsMacromedia Flash 8/Samples and Tutorials/Tutorial
Assets/Creating Graphics/Timeline Animation y haga doble clic en
animation_start.fla.
original.
modificar el espacio de trabajo para las lecciones.
tiempo.
También puede utilizar la barra de desplazamiento para desplazarse por
las capas.
NOTA
La carpeta Timeline Animation contiene versiones completas de los
archivos FLA de lecciones como referencia.

Creación de una interpolación de movimiento 165
Creación de una interpolación de
movimiento
Las interpolaciones de movimiento se crean definiendo propiedades para
una instancia, un objeto agrupado o texto en un fotograma clave inicial y, a
continuación, cambiando las propiedades del objeto en el fotograma clave
posterior. Flash crea la animación que pasa de un fotograma clave al
siguiente en los fotogramas intermedios.
Para crear una interpolación de movimiento, utilizará una instancia de un
símbolo de neumático y hará que rebote.
1. En la línea de tiempo (Ventana > Línea de tiempo), haga doble clic en
el título de la capa 1 y escriba AnimNeumático. Presione Intro
(Windows) o Retorno (Macintosh) para asignar un nuevo nombre a la
capa.
2. Con la capa AnimNeumático aún seleccionada, arrastre el clip de
película Tire de la ventana Biblioteca (Ventana > Biblioteca) al escenario
y colóquelo sobre la sombra del neumático.
3. Utilice la herramienta Selección para volver a colocar el neumático, si es
necesario.
4. Con la herramienta Selección aún seleccionada, en la capa
AnimNeumático, seleccione el fotograma 30. A continuación, presione
F6 para insertar un fotograma clave.
5. Seleccione el fotograma 15 y presione F6 para añadir otro fotograma
clave.

6. Con la cabeza lectora aún en el fotograma 15, presione Mayús para
mover el neumático en línea recta y arrastre el neumático hacia arriba.
7. En la capa AnimNeumático, seleccione un fotograma entre los
fotogramas 2 y 14. En el inspector de propiedades, seleccione
Movimiento en el menú emergente Animar.
Aparece una flecha en la línea de tiempo entre los dos fotogramas clave.
8. Seleccione un fotograma entre los fotogramas 16 y 29. En el inspector
de propiedades, seleccione de nuevo Movimiento en el menú emergente
Animar.
9. Seleccione Archivo > Guardar para guardar los cambios.
forma
Con la interpolación de forma, se especifican atributos para una forma en
un fotograma clave y, a continuación, se modifica la forma o se dibuja otra
forma en un fotograma clave posterior. Como sucede con la interpolación
de movimiento, Flash crea la animación en los fotogramas que hay entre los
fotogramas clave.
Ahora configurará una interpolación para la sombra del neumático para
que, mientras el neumático rebota, la sombra se mueva y se desvanezca.
1. Haga clic en la capa AnimSombra para seleccionarla.
2. Seleccione el fotograma 30 y presione F6 para insertar un fotograma
clave; a continuación, seleccione fotograma 15 y presione F6 para
insertar un fotograma clave.

Creación de una interpolación de forma 167
3. Con la cabeza lectora en el fotograma 15, seleccione la herramienta
Selección. Arrastre la sombra del neumático ligeramente hacia arriba y
hacia la derecha.
4. Con el fotograma 15 aún seleccionado, seleccione la herramienta
Cuentagotas en el panel Herramientas y, a continuación, haga clic en el
objeto de sombra.
5. Si el mezclador de colores no está abierto, seleccione Ventana >
Mezclador de colores para abrirlo y, a continuación, cambie el valor Alfa
de 25% por 10%.
superior derecha del Mezclador de colores y seleccione Cerrar panel para
cerrar el panel.
7. Seleccione un fotograma entre los fotogramas 2 y 14 en la capa
AnimSombra. En el inspector de propiedades, seleccione Forma en el
menú emergente Interpolación.
8. En la capa AnimSombra, seleccione un fotograma entre los fotogramas
16 y 29. En el inspector de propiedades, seleccione de nuevo Forma en
el menú emergente Animar.

Cómo copiar y pegar fotogramas
clave en una animación
Para que el neumático tenga un aspecto real cuando rebota, debe
comprimirse ligeramente en cada rebote. Puede crear este efecto
transformando la forma del neumático en el fotograma 1 de la animación y
copiando ese fotograma en el fotograma 30.
1. Con la herramienta Selección, seleccione el fotograma 1 de la capa
AnimNeumático. A continuación, presione F6 para añadir un
fotograma clave.
Se añade un nuevo fotograma clave y la cabeza lectora se desplaza al
fotograma 2.
2. Seleccione de nuevo el fotograma 1 de la capa AnimNeumático.
libre.
El neumático está seleccionado y aparecen selectores de transformación
alrededor de éste.
4. Seleccione el punto central de transformación (el pequeño círculo
situado cerca del centro del clip de película) y arrástrelo a la parte
inferior del neumático.
El punto central se ajusta al selector de transformación inferior central.
5. En el escenario, arrastre hacia abajo el selector de transformación
superior central para comprimir ligeramente la forma del neumático.
Si es necesario, arrastre el neumático para alinearlo sobre la sombra.
Para ver el posicionamiento, arrastre la cabeza lectora sobre los
fotogramas 1 y 2.

Cambio de la velocidad de la animación 169
6. Guarde el archivo.
Control presionada (Macintosh) en el fotograma 1 de la capa
AnimNeumático y seleccione Copiar fotogramas en el menú contextual.
8. Seleccione el fotograma 29 de la capa AnimNeumático y, a
continuación, presione F6 para insertar un fotograma clave.
9. En el fotograma 30 de la capa AnimNeumático, haga clic con el botón
derecho del ratón (Windows) o con la tecla Control presionada
(Macintosh) y seleccione Pegar fotogramas en el menú contextual.
10. Seleccione Control > Probar película para ver la animación.
11. Cierre la ventana del archivo SWF para regresar al entorno de edición.
Cambio de la velocidad de la
animación
Es posible que al probar la animación haya percibido que el neumático
rebota bastante despacio. Puede cambiar la velocidad de una animación
cambiando el número de fotogramas que se reproducen por segundo y
estableciendo valores de suavizado positivos y negativos, que determinan la
velocidad de aceleración y desaceleración.
NOTA
Guarde siempre el documento antes de manipular interpolaciones, así
como de copiar, cortar y pegar fotogramas. Si comete un error, puede
volver al documento guardado.

Cambio de la velocidad de fotogramas por
segundo
La velocidad de fotogramas, que se mide en fotogramas por segundo (fps),
es la velocidad a la que se reproduce la animación. De
manera predeterminada, las animaciones de Flash se reproducen a una
velocidad de 12 fps, la velocidad ideal para las animaciones Web. En
ocasiones, sin embargo, es aconsejable cambiar la velocidad fps. Ahora
cambiará la velocidad por 36 fotogramas por segundo, que hará que el
neumático rebote más rápido.
1. Haga clic en el escenario lejos de los objetos.
2. En el inspector de propiedades, escriba 36 en el cuadro de texto
Velocidad de fotogramas.
La velocidad de fotogramas se aplica a todo el documento de Flash y no
sólo a una animación dentro del documento.
Cambio de la aceleración y la
desaceleración
De forma predeterminada, los fotogramas interpolados se reproducen a
una velocidad constante. Con el suavizado, puede crear una velocidad de
aceleración y desaceleración más real. Con valores positivos, la
interpolación empieza de forma rápida y se desacelera hacia el final de la
animación. Con valores negativos, la interpolación empieza de forma lenta
y se acelera hacia el final de la animación. Ahora añadirá valores de
suavizado positivos y negativos a la animación.
1. En la capa AnimNeumático, seleccione un fotograma entre los
fotogramas 2 y 14. A continuación, en el inspector de propiedades, en
el cuadro de texto Suavizar, escriba 100. Presione Intro (Windows) o
Retorno (Macintosh).
2. En la misma capa, seleccione un fotograma entre los fotogramas 16 y 29.
A continuación, en el cuadro de texto Suavizar, escriba -100. Presione
Intro o Retorno.
3. En la capa ShadowAnim, seleccione un fotograma entre los fotogramas
2 y 14. A continuación, en el cuadro de texto Suavizar, escriba 100.
Presione Intro o Retorno.

Resumen 171
4. En la misma capa, seleccione un fotograma entre los fotogramas 16 y 29.
A continuación, en el cuadro de texto Suavizar, escriba -100. Presione
Intro o Retorno.
Probará el documento para ver la animación y comprobar si funciona del
modo previsto.
2. Cuando acabe de ver la animación, cierre la ventana del archivo SWF.
Resumen
¡Enhorabuena! Ha aprendido a animar objetos en Flash. En unos minutos
ha aprendido a realizar las tareas siguientes:
■ Creación de una animación con la interpolación de movimiento.
■ Creación de una animación con la interpolación de forma.
■ Cómo copiar y pegar fotogramas clave en una animación.
■ Cambiar la velocidad de una animación.
También puede utilizar los efectos de la línea de tiempo para añadir de
forma rápida efectos de animación a texto, gráficos, imágenes y símbolos.
Para más información, consulte Capítulo 10, “Creación de movimiento” en
Utilización de Flash.

173
14
CAPÍTULO 14
Creación de gráficos: creación de
animaciones con suavizado (sólo
en Flash Professional)
En este tutorial se explica el proceso de utilización de las herramientas de
interpolación de Macromedia Flash Basic 8 y Macromedia Flash
Professional 8. La interpolación es el proceso de animación de un gráfico: se
definen los valores de inicio y fin de sus propiedades para que Flash calcule
los valores intermedios. El término interporlación procede de “intermedio”.
Un ejemplo sencillo de interpolación consiste en colocar un gráfico en la
parte superior del escenario, añadir varios fotogramas a la línea de tiempo y
desplazar el gráfico a la parte inferior del escenario en el último fotograma.
Si Flash introduce los valores de posición de los fotogramas intermedios, es
posible crear con facilidad una animación suave del gráfico desde la parte
superior hasta la parte inferior del escenario.
Flash Professional también permite ejercer un control preciso sobre el
cálculo de los valores de la propiedad interpolada para facilitar la creación
de animaciones más complejas. Si emplea la ventana Aceleración/
desaceleración personalizada, puede controlar la velocidad que se aplica a
los cambios de las propiedades al principio, en el transcurso y al final de las
animaciones. La correcta utilización de esta ventana puede dar lugar a
resultados de atractivo visual.
En este tutorial aprenderá el proceso de creación de animaciones
interpolando diferentes propiedades de un gráfico mediante los distintos
controles de interpolación del entorno de edición de Flash.
Después de examinar la animación terminada, comenzará abriendo un
documento de Flash de inicio y finalizará publicando el documento para
que se reproduzca en Internet. Calcule unos 20 minutos aproximadamente
para completar el tutorial.
Antes de realizar este tutorial, debe leer Capítulo 2, “Conceptos básicos de
Flash” en Primeros pasos con Flash.

174 Creación de gráficos: creación de animaciones con suavizado (sólo en Flash Professional)
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . 175
Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Creación de una interpolación de movimiento. . . . . . . . . . . . . . . . 177
Utilización de los controles de suavizado . . . . . . . . . . . . . . . . . . . . 180
Creación de una interpolación de movimiento con un valor alfa 187
Comprobación de la aplicación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
El flujo de trabajo del tutorial sobre interpolación incluye las siguientes
tareas:
■ “Examen del archivo FLA finalizado” en la página 175 permite
examinar el archivo de Flash finalizado. Durante el proceso, se
familiarizará con la generación de un ejemplo de animación y con lo
que creará en este tutorial.
■ “Apertura del documento inicial” en la página 177 permite iniciar el
tutorial con un archivo FLA que contiene algunos gráficos creados por
el usuario. Aplicará efectos de animación a estos gráficos.
■ “Creación de una interpolación de movimiento” en la página 177
muestra los pasos necesarios para aplicar una interpolación de
movimiento habitual.
■ “Utilización de los controles de suavizado” en la página 180 indica
cómo controlar con precisión los cálculos que Flash realiza del
movimiento de las animaciones.
■ “Creación de una interpolación de movimiento con un valor alfa” en
la página 187 muestra los pasos necesarios para animar valores de
transparencia alfa.

finalizado
A medida que examina la versión finalizada de la aplicación que va a crear,
aplicación.
Apertura del documento de edición
FLA, para ver cómo ha diseñado el autor la aplicación y comprender lo que
se va a crear.
Los archivos de este tutorial están situados en la carpeta Samples and
Tutorials de la carpeta de la aplicación Flash. Para un gran número de
Antes de realizar el tutorial, debe copiar la carpeta de tutorial Animation
Easing en la ubicación de escritura que elija.
En la mayoría de los ordenadores, la carpeta de tutorial Animation Easing
se encuentra en las siguientes ubicaciones:
AssetsCreating GraphicsAnimation Easing
■ En Macintosh: unidad de inicio/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/Creating Graphics/Animation
Easing
Copie la carpeta Animation Easing en otra ubicación del disco duro para la
que tenga acceso de escritura. En la carpeta Animation Easing encontrará
un archivo de Flash llamado tween_finished.fla. Haga doble clic en el
archivo para abrirlo con Flash. Aparecerá el archivo de tutorial finalizado
en el entorno de edición de Flash.

En el archivo FLA finalizado se mostrará un gráfico de una bola de billar
número ocho con una sombra debajo sobre un fondo verde. La ilustración
tiene el siguiente aspecto:
El archivo FLA finalizado
Existen dos interpolaciones en el documento:
■ Una interpolación de movimiento de la bola rebotando hacia abajo
hasta la superficie verde.
■ Una interpolación de movimiento de la sombra que aumenta y
disminuye en función de la proximidad de la bola.
Existen dos formas de ver la animación en acción.

Apertura del documento inicial 177
Visualización de la reproducción de la animación
en otra ventana como un archivo SWF
Para ver la reproducción de la animación en otra ventana como un archivo
SWF, seleccione Control > Probar película.
Visualización de la animación en el escenario en
el entorno de edición de Flash
Para ver la animación en el escenario en el entorno de edición de Flash,
arrastre la cabeza lectora roja a través de la línea de tiempo.
Cierre de la aplicación
trabaja con el archivo inicial, cerciórese de no editar ni guardar los cambios
realizados.
Apertura del documento inicial
Una vez que ha visto el archivo finalizado, es hora de crear un documento
de Flash propio. Para comenzar, abra un archivo inicial que contenga unos
gráficos sobre los que aplicar animaciones.
En la carpeta Animation Easing, abra el archivo llamado tween_start.fla.
Este archivo contiene algunos gráficos que se utilizarán para crear la
animación.
movimiento
Cada vez que se anima el gráfico de la bola ocho, es necesario insertar
suficientes fotogramas en la línea de tiempo mientras el archivo FLA se
reproduce desde el principio hasta el final. En esta sección añadirá
fotogramas a la línea de tiempo y, a continuación, creará una interpolación
de movimiento dentro de dichos fotogramas.

Adición de los fotogramas necesarios a la línea de
tiempo
Para añadir los fotogramas necesarios a la línea de tiempo:
1. En la línea de tiempo, arrastre el puntero para seleccionar todos los
fotogramas del 1 al 60 de las cuatro capas.
Selección de varios fotogramas en la línea de tiempo
2. Seleccione Insertar > Línea de tiempo > Fotograma. Deben aparecer los
fotogramas añadidos a las cuatro capas de la línea de tiempo.
Los fotogramas añadidos a la línea de tiempo
Creación de una interpolación de movimiento en
los nuevos fotogramas
Para crear una interpolación de movimiento en los nuevos fotogramas:
1. Seleccione el Fotograma 61 de la capa denominada Ball.
2. Seleccione Insertar > Línea de tiempo > Fotograma clave.
El fotograma clave añadido al Fotograma 61 de la línea de tiempo

3. En el escenario, presione Mayús y arrastre la bola hacia abajo hasta que
la parte inferior de la misma se encuentre en el centro del gráfico de
sombra.
La bola de billar número ocho correctamente situada sobre la sombra
Acaba de definir una nueva posición de la bola en el escenario en el
Fotograma 61. La bola ocupa una posición en los primeros 60
fotogramas y otra posición en el fotograma clave del Fotograma 61. Al
definir una interpolación de movimiento, Flash calculará las posiciones
de la bola en cada fotograma, es decir, entre la posición original de la
parte superior del escenario y su posición final en el centro de la
sombra.
4. En la línea de tiempo, haga clic en el nombre de capa Ball. De este modo
se seleccionan todos los fotogramas de dicha capa.

5. En el inspector de propiedades, seleccione Movimiento en el menú
Animar. Se aplica la interpolación de movimiento a los fotogramas
seleccionados.
El movimiento seleccionado en el menú Animar del inspector de
propiedades
6. En la línea de tiempo, arrastre la cabeza lectora del Fotograma 1 al
Fotograma 61. Verá la bola moverse hacia abajo en dirección al gráfico
de sombra.
7. Seleccione Archivo > Guardar como.
8. Asigne el nombre my_tween_start.fla al archivo y haga clic en Aceptar.
Utilización de los controles de suavizado
Con los controles de suavizado de Flash es posible controlar la velocidad de
inicio y detención de las animaciones. Se emplea el término suavizado
porque al crear una animación, como soltar la bola lentamente para
después acelerar su movimiento, se considera que se “acelera” el
movimiento. Cuando una animación se ralentiza al final, se dice que se
“desacelera” el movimiento. Flash también permite realizar el suavizado en
el transcurso de una interpolación con los controles de suavizado
personalizados.
NOTA
La velocidad del movimiento de la bola es constante a lo largo de la
animación. En la siguiente sección aprenderá a controlar la velocidad de
inicio y fin del movimiento de las animaciones.

Aceleración de la animación de la bola de billar
número ocho
1. En la línea de tiempo, seleccione toda la capa Ball haciendo clic en el
nombre de capa.
2. En el inspector de propiedades, arrastre el deslizador Aceleración hacia
abajo hasta obtener el valor -100.
Esto proporcionará la máxima cantidad de aceleración y, por lo tanto,
el movimiento de la bola se iniciará lentamente para después acelerar.
El deslizador Aceleración ajustado en -100
3. Arrastre la cabeza lectora a través la línea de tiempo y observe la
velocidad de animación.
Desaceleración de la animación de la bola de
billar número ocho
1. En la línea de tiempo, seleccione toda la capa Ball haciendo clic en el
nombre de capa.
arriba hasta obtener el valor 100.
Esto proporcionará la máxima cantidad de desaceleración y, por lo
tanto, el movimiento de la bola se iniciará rápidamente para después
desacelerar.
3. Arrastre la cabeza lectora a través la línea de tiempo y observe la
velocidad de animación.
4. En la línea de tiempo, seleccione toda la capa Ball.
abajo hasta obtener el valor 0.
Se eliminará el suavizado de la animación.

Flash también proporciona un control más preciso de cómo se produce el
suavizado y permite añadir aceleración en el transcurso de una
interpolación. En la siguiente sección aplicará valores de suavizado
personalizados a la animación, en lugar de utilizar el deslizador
Aceleración.
Adición de valores de suavizado personalizados a
la interpolación de la bola de billar número ocho
1. En la línea de tiempo, seleccione toda la capa Ball.
2. En el inspector de propiedades, haga clic en Editar situado junto al
deslizador Aceleración.
El botón Editar del inspector de propiedades
En el cuadro de diálogo Aceleración/desaceleración personalizada se
muestra un gráfico que representa el grado de movimiento en cada
momento. Los fotogramas se representan mediante el eje horizontal y el
porcentaje de cambio, mediante el eje vertical.
El cuadro de diálogo Aceleración/desaceleración personalizada

3. En el cuadro de diálogo Aceleración/desaceleración personalizada, haga
clic con la tecla Control presionada (Windows) o con la tecla Comando
presionada (Macintosh) en el punto de la línea diagonal que pasa por el
Fotograma 20 del eje horizontal y por el 32% aproximadamente del eje
vertical. Haga clic una sola vez. De este modo se añade un nuevo punto
de control a la línea.
Clic en la línea diagonal de aceleración/desaceleración
4. Arrastre la línea a la parte superior del gráfico (la línea 100%), pero
manténgala en el Fotograma 20 del eje horizontal. Ahora la línea es una
curva compleja.
Arrastre del punto de control a la parte superior del gráfico

5. Arrastre el selector de vértice izquierdo del nuevo punto de control a la
derecha hasta que toque el punto de control. Arrastre el selector de
vértice derecho a la izquierda hasta que toque el punto de control. De
este modo la curva pasa a través del punto de control con un sencillo
ángulo agudo.
El punto de control con los selectores de vértice arrastrados hasta el punto
6. Haga clic con la tecla Control presionada (Windows) o con la tecla
Comando presionada (Macintosh) en la parte plana de la curva de la
parte superior del gráfico, junto al Fotograma 32, y arrastre el nuevo
punto hacia abajo hasta el 76% aproximadamente del eje vertical.
Arrastre del punto en el Fotograma 32

7. Arrastre los selectores de vértice para que la línea que los conecta con el
punto de control sea horizontal y cada selector se encuentre a la misma
distancia del punto de control.
Arrastre de los selectores de vértice
Comando presionada (Macintosh) en la curva, en el Fotograma 44
aproximadamente, y arrástrela hacia arriba hasta la línea de 100%.
9. Arrastre los selectores de vértice del nuevo punto de control sobre el
punto de control.
Comando presionada (Macintosh) en la curva, en el Fotograma 52
aproximadamente, y arrástrela hacia abajo hasta el 95% del eje vertical.

11. Arrastre los selectores de vértice para que la línea que los conecta con el
punto de control sea horizontal y cada selector se encuentre a la misma
distancia del punto de control.
La curva de aceleración/desaceleración finalizada
Ha creado una curva de suavizado compleja que representa una bola de
billar número ocho rebotando, en lugar de una simple interpolación de
movimiento unidireccional. Puede utilizar el botón Reproducir del
cuadro de diálogo Aceleración/desaceleración personalizada para
obtener una vista previa de la animación en el escenario mientras
experimenta con la curva de interpolación.
12. En la esquina inferior izquierda del cuadro de diálogo Aceleración/
desaceleración personalizada, haga clic en Reproducir. Revise la vista
previa dinámica de la animación en el escenario.
13. Haga clic en Aceptar para cerrar el cuadro de diálogo.
14. Seleccione Archivo > Guardar para guardar el archivo FLA.

movimiento con un valor alfa
En esta sección creará una interpolación del valor alfa del gráfico de sombra
que aparece debajo de la bola ocho. Debido a que los cambios de la sombra
deben ajustarse a la velocidad y temporización de la bola rebotando,
utilizará la curva de suavizado creada en la sección anterior.
Creación de la interpolación del valor alfa para la
sombra
1. En la línea de tiempo, seleccione el Fotograma 61 de la capa Shadow.
2. Seleccione Insertar > Línea de tiempo > Fotograma clave.
3. Arrastre la cabeza lectora hasta el Fotograma 1.
4. Haga clic en la parte exterior del escenario para anular la selección de
todas las selecciones.
5. Haga clic en el clip de película de la sombra del escenario.
6. En el inspector de propiedades, seleccione Alfa en el menú Color.
7. Arrastre el deslizador Alfa hacia abajo hasta alcanzar el valor 25%. Ha
definido el valor alfa 25% en el Fotograma 1 y 100% en el Fotograma
61.
Configuración del valor alfa del clip de película de la sombra del escenario
en 25%

8. En la línea de tiempo, haga clic en la capa Ball para seleccionar los
fotogramas de esa capa.
9. En el inspector de propiedades, haga clic en Editar situado junto al
deslizador Aceleración.
10. En el cuadro de diálogo Aceleración/desaceleración personalizada,
presione Control-C (Windows) o Comando-C (Macintosh) para copiar
la curva de suavizado aplicada a la interpolación de la bola.
11. Haga clic en Cancelar para cerrar el cuadro de diálogo.
12. En la línea de tiempo, haga clic en la capa Shadow para seleccionar todos
los fotogramas de esa capa.
13. En el inspector de propiedades, seleccione Movimiento en el menú
Animar.
14. Haga clic en Editar situado junto al deslizador Aceleración.
15. En el cuadro de diálogo Aceleración/desaceleración personalizada,
presione Control+V (Windows) o Comando+V (Macintosh) para pegar
la curva de suavizado de la interpolación de la bola.
16. Haga clic en Reproducir en el cuadro de diálogo para obtener una vista
previa de la animación en el escenario.
Al aplicar la misma curva a la interpolación de sombra, la transparencia
de la sombra se anima de acuerdo con la proximidad de la bola. De esta
forma la sombra se oscurece a medida que la bola se acerca a la
superficie y se aclara a medida que la bola se aleja de la superficie.
17. Haga clic en Aceptar para cerrar el cuadro de diálogo.

En cualquier momento durante la edición, puede comprobar cómo se
reproduce la aplicación como un archivo SWF. Puesto que este tutorial no
contiene animación ni interactividad, el archivo tendrá el mismo aspecto
en el modo de prueba que en el modo de edición.
3. Cuando termine de ver la aplicación, cierre el archivo SWF haciendo
clic en el cuadro de cierre de la ventana de prueba.
Ha finalizado satisfactoriamente una animación compleja utilizando los
controles de suavizado personalizado de Flash. Si utiliza estos controles
mientras interpola las diferentes propiedades de objetos en el escenario,
puede crear una amplia gama de complejos movimientos e interesantes
efectos visuales.

191
15
CAPÍTULO 15
Creación de gráficos: aplicación
de degradados
En este tutorial conocerá el proceso de utilización de las herramientas de
degradado de Macromedia Flash Basic 8 y Macromedia Flash Professional
8. Con Flash es posible crear sencillos degradado de color y complejos
efectos de degradado. En este tutorial aprenderá aspectos de ambas tareas.
Un degradado es un área de un gráfico en la que un color se convierte en
otro color. Flash puede crear dos tipos principales de degradado: lineal y
radial. Los degradados lineales cambian el color a lo largo de un solo eje,
como el horizontal o el vertical. Un degradado radial cambia el color desde
un punto focal hacia fuera. Es posible ajustar la dirección del degradado,
sus colores, la ubicación del punto focal y muchas otras propiedades de
degradados.
En las siguientes ilustraciones se muestran los dos tipos de degradados:
Un degradado lineal de dos colores, de rojo a negro
Un degradado radial de dos colores, de rojo a negro
En este tutorial recorrerá los pasos necesarios para crear una ilustración
utilizando una selección de degradados.

192 Creación de gráficos: aplicación de degradados
Después de examinar la ilustración terminada, comenzará abriendo un
documento de Flash de inicio y finalizará publicando el documento para
que se reproduzca en Internet. Calcule unos 20 minutos aproximadamente
para completar el tutorial.
Antes de realizar este tutorial, debe leer Capítulo 2, “Conceptos básicos de
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . 193
Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Aplicación de un degradado lineal . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Creación de un degradado radial . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Aplicación de toques finales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Comprobación de la aplicación. . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
El tutorial de este capítulo sigue el orden de un flujo de trabajo habitual
para crear una aplicación de Flash. Es posible utilizar otros flujos de
trabajo.
examinar el documento de Flash finalizado.
tutorial con un archivo FLA que contiene algunos gráficos creados por
el usuario. Aplicará efectos de degradado a estos gráficos.
■ “Aplicación de un degradado lineal” en la página 195 muestra los pasos
necesarios para aplicar un degradado lineal con colores específicos.
■ “Creación de un degradado radial” en la página 198 muestra los pasos
necesarios para aplicar un degradado radial y realizar ajustes a su punto
focal.
■ “Aplicación de toques finales” en la página 201 muestra los pasos para
realizar una operación de transformación en un degradado. Una
operación de transformación es un cambio en el tamaño o la forma de
un objeto. También añadirá varios efectos de degradado más para
finalizar la ilustración.
publicar el documento Flash en un archivo SWF y visualizarlo en un
navegador web.

finalizado
A medida que examina la versión finalizada de la aplicación que va a crear,
aplicación.
FLA, para ver cómo ha diseñado el autor la ilustración y comprender lo que
se va a crear.
Tutorials de la carpeta de la aplicación Flash. Para un gran número de
Antes de realizar el tutorial, debe copiar toda la carpeta de tutorial de
degradado en la ubicación de escritura que elija.
En la mayoría de los ordenadores, la carpeta de tutorial Gradients se
AssetsCreating GraphicsGradients.
■ En Macintosh: unidad de inicio/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/Creating Graphics/Gradients.
Copie la carpeta Gradients en otra ubicación del disco duro para la que
tenga acceso de escritura. En la carpeta Gradients encontrará un archivo de
Flash llamado gradients_finished.fla. Haga doble clic en el archivo para
abrirlo con Flash. Aparecerá el archivo de tutorial finalizado en el entorno
de edición de Flash.

En el archivo FLA finalizado, verá los efectos combinados de una serie de
degradados. La ilustración tiene el siguiente aspecto:
Hay cinco degradados en la ilustración:
■ Un degradado de negro a verde en el fondo.
■ Un degradado de negro a verde y a negro en la parte inferior de la bola
de billar número ocho.
■ Otro degradado de blanco a negro en el resaltado de la parte superior
de la bola ocho.
■ Un degradado sutil en el círculo blanco que rodea el número “8”.
■ Un degradado radial en la sombra que hay debajo de la bola ocho.
realizados.

Aplicación de un degradado lineal 195
de Flash propio. Para comenzar, abra un archivo inicial que contenga unos
gráficos sobre los que aplicar degradados.
1. En Flash, seleccione Archivo > Abrir.
2. Desplácese hasta el siguiente directorio:
■ En Windows: disco duroArchivos de programaMacromediaFlash
8Samples and TutorialsTutorial AssetsCreating Graphics
■ En Macintosh: disco duro/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/Creating Graphics/
3. Abra el archivo gradients_start.fla.
Aplicación de un degradado
lineal
En esta sección añadirá un degradado lineal al fondo.
2. Seleccione el cuadro gris de la capa llamada Background.
3. Seleccione Ventana > Mezclador de colores para mostrar el panel
Mezclador de colores.
4. En el menú emergente Tipo del Mezclador de colores, seleccione Lineal.

5. Haga doble clic en la muestra de color de degradado derecha y seleccione
el color verde (#006600).
Selección de la muestra de color de degradado derecha del Mezclador de
colores
Selección del color verde #006600 en el Selector de color
6. Haga doble clic en la muestra de color de degradado izquierda y
seleccione el color negro (#000000).
7. Seleccione la herramienta Transformación de degradado del panel
Herramientas. Los controles de transformación de degradado aparecen
en el escenario alrededor del degradado.
La herramienta Transformación de degradado

Aplicación de un degradado lineal 197
8. Arrastre el selector Girar degradado para girar el degradado lineal en el
sentido de las agujas del reloj, como se muestra.
El selector Girar degradado
Rotación del degradado en el sentido de las agujas del reloj
9. Bloquee la capa Background en la línea de tiempo para impedir que se
realicen más cambios en esta capa.

Creación de un degradado radial
A continuación añadirá un degradado radial a la bola ocho negra.
1. Haga doble clic en el círculo negro en la capa llamada Ball. Se abre el
grupo que contiene la forma de la bola ocho.
2. Seleccione la forma del círculo negro. Aplicará un degradado a esta
forma. No seleccione el número “8” de la bola negra.
3. En el panel Mezclador de colores, seleccione Radial en el menú
emergente Tipo. Seleccione el modo Desbordamiento especular en el
menú emergente Desbordamiento.
Los valores correctos de tipo radial y desbordamiento especular
4. Haga doble clic en la muestra de color de degradado izquierda y
seleccione el color negro (#000000).
5. Haga doble clic en la muestra de color de degradado derecha y escriba
002200 en el cuadro de texto de color. Presione Intro.
6. Arrastre la muestra de color de degradado izquierda hacia la derecha tres
cuartos del recorrido aproximadamente como se indica en la siguiente
ilustración. De este modo, la parte verde del degradado sólo aparece en
el 25% exterior de la forma de bola.
Arrastre de una muestra de color de degradado

Creación de un degradado radial 199
7. Seleccione la herramienta Zoom del panel Herramientas y haga clic en
la forma del círculo para aumentarla.
Herramientas.
9. Gire el degradado radial 90º en el sentido de las agujas del reloj
arrastrando el selector Girar degradado.
Arrastre para girar el degradado 90º en el sentido de las agujas del reloj.
10. Seleccione el control Punto focal y arrástrelo junto a la parte superior del
círculo.
Arrastre del control Punto focal hacia la parte superior de la forma del
círculo
11. Seleccione el punto de control central y arrastre todo el degradado hacia
arriba una distancia corta como se muestra en la siguiente ilustración. El
degradado con desbordamiento especular se encuentra en la parte
inferior del círculo.
Arrastre del punto de control central hacia arriba

12. Seleccione la herramienta Selección del panel Herramientas.
13. Haga doble clic en la herramienta Zoom para devolver el área del
escenario a una vista del 100%.
14. Haga doble clic en el área del escenario para anular la selección del grupo
de la bola ocho.
Creación de una transformación
de degradado con una forma
En esta sección creará un degradado y, a continuación, utilizará la
herramienta Transformación libre para cambiar su forma.
1. Seleccione la capa Shadow en la línea de tiempo.
2. Seleccione la herramienta Óvalo del panel Herramientas.
3. Mantenga presionada Mayús y, a continuación, arrastre con la
herramienta Óvalo sobre el escenario para dibujar un círculo de 150
píxeles cuadrados aproximadamente. Esto debe corresponder
aproximadamente al mismo diámetro de la bola ocho.
4. En el menú emergente Tipo del Mezclador de colores, seleccione Radial.
5. Desplace la muestra de color de degradado izquierda hasta el extremo
izquierdo Debe tener una muestra en el extremo izquierdo y otra en el
extremo derecho.
6. Haga doble clic en la muestra izquierda y seleccione el color negro
(#000000) en el Selector de color.
7. Haga doble clic en la muestra derecha para mostrar el Selector de color.
8. Seleccione el color negro (#000000).
9. En el Selector de color, arrastre el deslizador Alfa hasta cero. Se crea un
degradado de negro a transparente de manera que el fondo verde se
muestra a través del borde del círculo que acaba de dibujar.
10. Seleccione la herramienta Transformación de degradado en el panel
Herramientas y arrastre el control Punto focal del degradado negro hasta
el centro del círculo.

Aplicación de toques finales 201
11. Seleccione la herramienta Transformación libre y adapte el círculo a lo
largo del eje y (vertical) arrastrando el selector superior central hacia
abajo como se muestra en la siguiente ilustración.
El degradado se transforma junto con la transformación de la forma.
12. Seleccione la herramienta Selección en el panel Herramientas.
13. Arrastre la forma de sombra situada debajo de la bola ocho con la
herramienta Selección.
14. Haga clic en la parte exterior del escenario para anular la selección de la
sombra.
Aplicación de toques finales
Para completar la ilustración, aplicará dos degradados lineales más: uno al
círculo blanco de la bola ocho y uno para resaltar la parte superior de la
bola.
Aplicación de un degradado al círculo
blanco de la bola ocho
Ahora deberá añadir un degradado al círculo blanco del gráfico de la bola
ocho.
2. Haga doble clic en el grupo de la bola ocho para editar el grupo.
3. Haga doble clic en el grupo del círculo blanco.
4. Seleccione la forma del círculo blanco.

5. En el panel Mezclador de colores, asigne un degradado lineal a la forma
del círculo blanco seleccionando Lineal en el menú Tipo.
6. Seleccione No repetir en el menú Desbordamiento.
7. Arrastre la muestra de color de degradado izquierda hasta el extremo
izquierdo y haga doble clic.
8. Seleccione el color blanco (#FFFFFF) en el Selector de color.
9. Ajuste el valor Alfa en 100% para la muestra de color blanco.
10. Arrastre la muestra de color de degradado derecha hasta el extremo
derecho y haga doble clic.
11. Seleccione el color negro (#000000) en el Selector de color.
12. Ajuste el valor Alfa en 100% para la muestra de color negro.
Los valores de degradado deben coincidir con los de la siguiente
ilustración:
El Mezclador de colores con los valores correctos para el degradado del
círculo blanco
Herramientas.

Aplicación de toques finales 203
14. Arrastre el selector Girar degradado 120º aproximadamente en el
sentido de las agujas del reloj.
El degradado girado 120º
15. Seleccione la herramienta Selección del panel Herramientas.
16. Haga doble clic dos veces en el escenario para salir del grupo del círculo
blanco y del grupo de la bola ocho.
Aplicación de un degradado lineal al
resalte
En esta sección aplicará un degradado lineal.
1. Haga clic en el icono X rojo de la capa Highlight para mostrar la forma
de dicha capa. La forma se muestra en la parte superior de la bola ocho.
2. Con la herramienta Selección, haga doble clic en la forma del resalte
para editar su grupo.
3. Seleccione la forma del resalte.
4. En el Mezclador de colores, seleccione Lineal en el menú Tipo.
5. Seleccione No repetir en el menú Desbordamiento.
6. Arrastre la muestra de color de degradado izquierda hasta el extremo
izquierdo y haga doble clic.
7. Seleccione el color blanco (#FFFFFF) en el Selector de color.
8. Ajuste el valor Alfa en 0% para la muestra izquierda.
9. Arrastre la muestra de color de degradado derecha hasta el extremo
derecho y haga doble clic.
10. Seleccione el color blanco en el Selector de color.

11. Ajuste el valor Alfa en 75% para la muestra derecha.
Los valores de degradado deben coincidir con los de la siguiente
ilustración:
El Mezclador de colores con los valores correctos para el degradado de la
forma de resalte
12. Con la forma del resalte todavía seleccionada, seleccione la herramienta
Transformación de degradado en el panel Herramientas.
13. Arrastre el control Girar degradado 90º en el sentido contrario a las
agujas del reloj.
14. Arrastre el control Escala de degradado hacia abajo hasta que toque la
parte superior de la forma del resalte.
El control Escala de degradado
Arrastre del control Escala de degradado hacia abajo para tocar la forma
del resalte

16. Haga doble clic dos veces fuera del escenario para anular la selección del
grupo del resalte.
La ilustración de Flash finalizada tiene el siguiente aspecto:
reproduce la aplicación como un archivo SWF. Puesto que este tutorial no
contiene animación ni interactividad, el archivo tendrá el mismo aspecto
en el modo de prueba que en el modo de edición.
3. Cuando termine de ver la aplicación, cierre el archivo SWF haciendo
clic en el cuadro de cierre de la ventana de prueba.
Ha aplicado correctamente una serie de degradados en Flash y ha creado
una atractiva ilustración de aspecto real. Mediante el uso de las
herramientas de degradado en Flash se puede crear una gama infinita de
gráficos y efectos de gran atractivo visual.

207
16
CAPÍTULO 16vv
Creación de gráficos: aplicación de
filtros gráficos y mezclas (sólo en
Flash Professional)
En este tutorial se explica el proceso de creación de atractivos efectos
gráficos mediante algunas de las funciones de creación de Macromedia
Flash Professional 8 (los filtros no están disponibles en Flash Basic).
Mediante el uso de los modos de filtros gráficos y mezclas disponibles en
Flash puede transformar objetos gráficos corrientes en contenido de mayor
atractivo visual.
Un filtro gráfico es un método que procesa los píxeles de un objeto gráfico
para producir un efecto específico. Por ejemplo, puede aplicar un filtro de
desenfoque a un objeto para que sus bordes parezcan más suaves, o también
puede aplicar un filtro de sombra a un objeto para aparezca con una
sombra detrás.
Un modo de mezcla es un método para que los colores de un objeto gráfico
interactúen con los colores de otros objetos gráficos situados debajo de éste.
Por ejemplo, si utiliza el modo de mezcla Aclarar, puede conseguir que
partes de un objeto aparezcan con distintos grados de aclarado del color
dependiendo de los colores de los objetos que hay debajo de éste.
Si todavía no lo ha hecho, Macromedia aconseja que antes de realizar este
tutorial lea Capítulo 2, “Conceptos básicos de Flash” en Primeros pasos con
Flash.
Revisión de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Aplicación de filtros y mezclas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

208 Creación de gráficos: aplicación de filtros gráficos y mezclas (sólo en Flash Professional)
Revisión de la tarea
En este tutorial, añadirá algunos gráficos al escenario y les aplicará filtros
para crear una imagen de aspecto realista de una tabla de billar con una
acusada profundidad de campo. Las bolas del fondo y las que aparecen en
primer plano tendrán un efecto desenfocado, tal como se vería a través de
una cámara.
Para ver el archivo FLA finalizado (Filters&Blends_finished.fla), desplácese
hasta una de las ubicaciones siguientes:
8Samples and TutorialsTutorial AssetsCreating GraphicsFilters and
Blends
■ En Macintosh: disco duro/Applications/Macromedia Flash 8/Samples
and Tutorials/Tutorial Assets/Creating Graphics/Filters and Blends

Aplicación de filtros y mezclas 209
Ahora que ya ha visto el documento que va a crear, es hora de empezar a
crear la versión de su propio documento. Lo primero que debe hacer es
abrir el documento inicial que contiene los objetos gráficos que utilizará
con las funciones de filtro y de mezcla de Flash.
2. Navegue hasta una de estas ubicaciones:
8Samples and TutorialsTutorial AssetsCreating GraphicsFilters
and Blends
■ En Macintosh: disco duro/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/Creating Graphics/Filters
and Blends
3. Seleccione el archivo llamado Filters&Blends_start.fla and click Open.
Aplicación de filtros y mezclas
En las secciones siguientes aplicará mezclas y filtros a los clips de película
9ball y CueBall del panel Biblioteca.
Aplicación de una mezcla al clip de
película 9ball
Lo primero que debe hacer en el archivo inicial es aplicar un efecto de
mezcla a una instancia del clip de película 9ball outlines para conseguir
que los colores se combinen con los del clip de película 9ball. Con ello se
logrará un aspecto realista de bola de billar negra y resplandeciente.
1. Abra el panel Biblioteca (Ventana > Biblioteca).
2. Arrastre el clip de película 9ball desde el panel Biblioteca hasta la
esquina inferior derecha del escenario.
Al hacerlo, se creará una nueva instancia del clip de película 9ball en el
escenario.
NOTA
Mientras vaya completando el tutorial no olvide guardar su trabajo con
frecuencia.

3. Haga doble clic en la nueva instancia 9ball para acceder al modo de
4. Arrastre el clip de película 9ball outlines desde el panel Biblioteca al
escenario de tal modo que solape perfectamente la instancia 9ball.
Puede utilizar las teclas de flecha para ajustar la colocación de la
instancia 9ball outlines.
5. Con la instancia 9ball outlines seleccionada, vaya al inspector de
propiedades y seleccione Multiplicar en el menú Mezcla.
6. Haga doble clic fuera del escenario para salir del modo de edición de
símbolos.
La instancia 9ball debería seguir seleccionada en el escenario.
7. Abra el panel Transformar (Ventana > Transformar).
8. En el panel Transformar, seleccione la casilla de verificación Restringir.
9. Haga doble clic en el cuadro de texto Anchura y escriba 140.
10. De este modo logrará que la instancia 9ball se muestre más grande que
la instancia 8ball en el escenario.
11. Vuelva a colocar la instancia 9ball de tal forma que se solape
ligeramente con el borde derecho de la instancia 8ball en el escenario.
Aplicación de un filtro
El siguiente paso es aplicar un filtro de desenfoque al clip de película 9ball
para que parezca desenfocado, ya que se encuentra en el fondo del
escenario.
1. Con la instancia 9ball seleccionada, haga clic en la ficha Filtros del
inspector de propiedades.
2. Ya en la ficha, haga clic en Añadir filtro (+) y seleccione Desenfocar en
el menú emergente Filtros.
3. Arrastre el deslizador de Desenfocar X hasta que el valor de Desenfocar
X y Desenfocar Y sea 19.
Estos valores están restringidos entre sí de forma predeterminada. Si no
lo están, haga clic en el icono del candado.
4. Haga clic en la ficha Propiedades del inspector de propiedades.

5. En el inspector de propiedades, introduzca los valores siguientes en los
cuadros de texto An., Al., X e Y.
An: 210
Al: 235
X: 315
Y: 155
instancia 9ball.
Aplicación de filtros y mezclas a la bola
blanca
El último paso consiste en utilizar un efecto de color y un filtro para que la
bola blanca parezca estar en el fondo del escenario.
1. Arrastre el clip de película CueBall desde el panel Biblioteca hasta la
esquina superior izquierda del escenario.
2. Sin dejar de seleccionar la instancia CueBall en el escenario, vaya al
panel Transformar e introduzca el valor 70 en los cuadros de texto
Anchura y Altura.
De este modo, la instancia CueBall parecerá más pequeña que la
instancia 8ball.
3. Todavía con la instancia CueBall seleccionada en el escenario, vaya al
inspector de propiedades y seleccione Brillo en el menú Color.
A la derecha del menú aparecerá un deslizador para ajustar la cantidad
de brillo.
4. Arrastre el deslizador de cantidad de brillo hasta el valor -48%.
5. Introduzca los valores siguientes en los cuadros de texto An., Al., X e Y.
An: 105
Al: 115
X: 95
Y: 105
6. Con la instancia CueBall seleccionada en el escenario, haga clic en la
ficha Filtros del inspector de propiedades.
7. Haga clic en Añadir filtro (+) y seleccione Desenfocar en el menú
emergente Filtros.

8. Arrastre el deslizador de Desenfocar X hasta que el valor de Desenfocar
X y Desenfocar Y sea 13.
Estos valores están restringidos entre sí de forma predeterminada. Si no
lo están, haga clic en el icono del candado.
instancia CueBall.
Ya ha terminado de aplicar efectos gráficos para obtener una sensación
realista de profundidad.
Para más información sobre la utilización de los filtros y las mezclas,
consulte el Capítulo 9, “Utilización de filtros y mezclas (sólo Flash
Professional)” en Utilización de Flash.

213
17
CAPÍTULO 17
Texto: adición de texto a
un documento
Macromedia Flash Basic 8 y Macromedia Flash Professional 8
proporcionan una variedad de funciones y opciones de texto. En esta
lección se presenta una introducción a los tres tipos primarios de texto que
se pueden añadir a un documento. Puede añadir texto estático para títulos,
etiquetas u otro contenido de texto que desee que aparezca en un
documento. También puede utilizar las opciones de introducción de texto
para permitir que los usuarios interactúen con la aplicación Flash, por
ejemplo para introducir su nombre u otra información en un formulario.
El tercer tipo de texto es el texto dinámico. Los campos de texto dinámico
sirven para mostrar texto que cambia según los criterios que especifica el
usuario. Por ejemplo, puede utilizar un campo de texto dinámico para
añadir valores almacenados en otros campos de texto, como la suma de dos
números. En este tutorial aprenderá a añadir texto y campos de texto a un
documento de Flash.
Después de leer esta lección, no olvide revisar las opciones de texto
adicionales que se describen en “Trabajo con texto” en el apartado
Utilización de Flash.
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . 214
Creación de un bloque de texto de anchura ampliable . . . . . . . . 215
Creación de un bloque de texto de anchura fija. . . . . . . . . . . . . . . 216
Edición de texto y cambio de atributos de fuente . . . . . . . . . . . . . 217
Selección de las fuentes de dispositivo . . . . . . . . . . . . . . . . . . . . . 218
Adición de un campo de introducción de texto . . . . . . . . . . . . . . . 218
Copia de un campo de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

214 Texto: adición de texto a un documento
Asignación de nombres de instancia a campos de texto . . . . . 220
Creación de un campo de texto dinámico. . . . . . . . . . . . . . . . . . . . 221
Especificación de opciones de formato . . . . . . . . . . . . . . . . . . . . 222
Visualización de código ActionScript del campo de texto dinámico
222
Comprobación del archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Revisión ortográfica. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
trabajo
AssetsTextAdd Text to a Document y haga doble clic en
text_start.fla.
Assets/Text/Add Text to a Document y haga doble clic en
text_start.fla.
nombre nuevo, en la misma carpeta, para conservar el archivo de inicio
original y el vínculo del archivo con los archivos dependientes.
modificar el espacio de trabajo para las lecciones.
NOTA
La carpeta Add Text to a Document contiene las versiones completas de
los archivos FLA del tutorial como referencia.

Creación de un bloque de texto de anchura ampliable 215
5. En el panel Herramientas, haga clic en la herramienta Selección. A
continuación, en la línea de tiempo, haga clic en la capa Texto estático
para seleccionar la capa en la que trabajará.
Creación de un bloque de texto
de anchura ampliable
Puede definir el tamaño de un bloque de texto o puede utilizar un bloque
de texto que se amplíe para que quepa el texto que escriba. Empezará esta
lección añadiendo texto a un documento.
1. Haga clic en un área vacía del espacio de trabajo para asegurarse de que
no esté seleccionado ningún fotograma de la línea de tiempo ni ningún
objeto del escenario.
2. En el panel Herramientas, seleccione la herramienta Texto.
3. En el inspector de propiedades de texto, establezca las opciones
siguientes:
■ En el menú emergente Tipo de texto, seleccione Texto estático,
si aún no está seleccionado.
■ En Fuente, seleccione Arial.
■ En Tamaño de fuente, introduzca 13.
■ Haga clic en el cuadro de color de texto y seleccione el gris con un
valor hexadecimal #666666.
■ Seleccione Alinear a la izquierda, si aún no está seleccionado.
4. En la línea de tiempo, seleccione la capa Texto estático.

5. Con la herramienta Texto aún seleccionada, haga clic en el escenario a
lo largo del borde izquierdo de la guía de texto 1 y escriba Trio ZX2004
Safety Features.
Al escribir con la herramienta Texto seleccionada, se crea un bloque de
texto de una línea que se amplía al escribir. Los bloques de texto
estático de una línea de anchura ampliable tienen un selector circular
en la esquina superior derecha.
6. Si es necesario, alinee el texto sobre la guía de texto 1 haciendo clic en la
herramienta Selección en el panel Herramientas y arrastrando el texto
que haya escrito hasta la guía.
Creación de un bloque de texto
de anchura fija
Además de crear una línea de texto que se amplíe al escribir, puede crear un
bloque de texto que tenga una anchura fija. El texto que se introduce en un
bloque de texto de anchura fija continua en la línea siguiente cuando llega
al borde del bloque.
Ahora creará un bloque de texto estático con dimensiones fijas.
1. Verifique que la capa Texto estático esté aún seleccionada en la línea de
tiempo y utilice la herramienta Selección para deseleccionar los objetos
del escenario o los fotogramas de línea de tiempo (haga clic en el espacio
de trabajo, donde no haya objetos).
3. En el inspector de propiedades, cambie el tamaño del texto por 10
puntos.
4. En el escenario, arrastre el puntero sobre el área de la guía de texto 2.
Los bloques de texto estático de una línea ampliables tienen un selector
circular en la esquina superior derecha y los bloques de texto estático de
anchura fija tienen un selector cuadrado.
NOTA
La guía de texto 1 se encuentra en una capa de guías, que no aparece en el
archivo SWF.

Edición de texto y cambio de atributos de fuente 217
5. Dentro del bloque de texto que ha creado, escriba Want to learn more?
6. Si es necesario, alinee el texto haciendo clic en la herramienta Selección
en el panel Herramientas y arrastrando el texto que ha escrito encima de
la guía de texto 2.
Edición de texto y cambio de
atributos de fuente
Cuando se selecciona texto, el inspector de propiedades muestra funciones
de formato de tipo estándar. Puede utilizar el inspector de propiedades para
cambiar las propiedades de fuente y de tamaño de un objeto de texto
seleccionado.
1. En el panel Herramientas, haga clic en la herramienta Selección. Haga
doble clic en el texto del escenario “Submit your contact information”
(Envíe la información de contacto).
2. Seleccione la letra S y, a continuación, escriba Please s, a fin de que el
texto indique ahora “Please submit your contact information” (Por
favor envíe la información de contacto).
3. En el panel Herramientas, haga clic en la herramienta Selección. Utilice
el inspector de propiedades para seleccionar el estilo negrita.
4. Haga clic en el control Color de relleno de caracteres y seleccione otro
color, por ejemplo otra sombra de gris.
NOTA
Puede arrastrar el selector cuadrado de un bloque de texto para cambiar
su anchura. Además, puede hacer doble clic en un selector cuadrado para
convertirlo en un selector ampliable redondo.

Selección de las fuentes de
dispositivo
Si se utiliza una fuente instalada en el sistema en un documento de Flash,
Flash incorpora la información de la fuente en el archivo SWF de Flash
para garantizar la correcta visualización de la fuente. Además de incorporar
fuentes, puede utilizar la opción de fuentes de dispositivo. Esta opción
busca en el equipo de la persona que visualiza el documento las fuentes que
más se parecen a la fuente de dispositivo especificada. Sólo puede utilizar
fuentes de dispositivo con texto estático.
Especificará que el texto seleccionado utiliza fuentes de dispositivo.
1. Con el texto “Please submit your contact information” aún seleccionado
en el escenario, seleccione _sans en el menú emergente Fuente.
2. En el inspector de propiedades, seleccione Utilizar fuentes del
dispositivo.
No notará ninguna diferencia en el texto si tiene instalada la fuente
Arial en el equipo.
Adición de un campo de
introducción de texto
Puede utilizar un campo de introducción de texto para que los usuarios
puedan interactuar con la aplicación Flash. Por ejemplo, los campos de
introducción de texto ofrecen un método sencillo para crear formularios.
En una lección posterior (seleccione Ayuda > Tutoriales de Flash >
ActionScript: Creación de un formulario de lógica condicional y envío de
datos), aprenderá a utilizar un campo de texto de entrada para enviar datos
de Flash al servidor. Ahora añadirá un campo de texto en el que los usuarios
introducirán su nombre.
1. En la línea de tiempo, seleccione la capa de introducción de texto.
2. Utilice la herramienta Selección para hacer clic en el espacio de trabajo,
donde no haya objetos del escenario.

Adición de un campo de introducción de texto 219
siguientes:
■ Seleccione Introducción de texto en el menú emergente Tipo de
texto.
■ Seleccione Arial en el menú emergente Fuente.
■ En el tamaño de fuente, introduzca 8.
■ Haga clic en el cuadro de color de texto y seleccione una sombra
azul oscuro.
■ Seleccione el botón Texto de alias.
El botón Texto de alias presenta el texto de manera que parece más
legible con tamaños pequeños. En el caso de la introducción de
texto, esta opción se admite si el usuario final dispone de
Macromedia Flash Player 7 o posterior.
■ Seleccione Línea única en el menú emergente Tipo de línea y
verifique que Mostrar borde alrededor del texto esté seleccionado.
Línea única muestra el texto como una línea. Mostrar borde
alrededor del texto indica los límites del campo de texto con un
borde visible.
5. En el escenario, arrastre el puntero a un área situada a la derecha del
texto First Name para crear un campo de introducción de texto.
6. Si es necesario, utilice la herramienta Selección para volver a colocar el
campo de introducción de texto.

Copia de un campo de texto
Una manera de duplicar con rapidez un objeto en el escenario es presionar
la tecla Alt mientras se arrastra el objeto. El objeto original permanece en su
lugar, al tiempo que se arrastra el duplicado. Presione Alt para crear dos
copias del campo de introducción de texto que ha creado.
1. En el escenario, con la herramienta Selección seleccionada, haga clic en
el campo de introducción de texto que ha creado y presione Alt. Arrastre
una copia del campo de texto a la derecha de Last Name.
2. Presione la tecla Alt y haga clic en el campo de introducción de texto que
acaba de arrastrar y, a continuación, arrastre la nueva copia del campo
hasta eMail Address.
Asignación de nombres de
instancia a campos de texto
Un campo de introducción de texto del escenario es una instancia del
objeto TextField de ActionScript, al cual puede aplicar propiedades y
métodos. Es aconsejable asignar un nombre a las instancias de campo de
texto para otros colaboradores del proyecto puedan hacer referencia a la
instancia en ActionScript.
1. Seleccione el campo de introducción de texto que ha colocado junto a
First Name. En el inspector de propiedades, introduzca firstName_txt
en el cuadro de texto Nombre de instancia.
Last Name. En el inspector de propiedades, introduzca lastName_txt en
el cuadro de texto Nombre de instancia.
eMail Address. En el inspector de propiedades, introduzca eMail_txt en
el cuadro de texto Nombre de instancia.
Para más información sobre el objeto TextField, consulte “Trabajo con
texto” en Utilización de ActionScript en Flash.

Creación de un campo de texto dinámico 221
Creación de un campo de texto
dinámico
El texto dinámico puede mostrar texto procedente de otras fuentes en
tiempo de ejecución. A continuación, creará un campo de texto dinámico
vinculado con un archivo de texto externo. El archivo de texto externo que
utilizará se denomina safetyFeatures.txt. Se encuentra en la misma carpeta
que el archivo FLA de la lección. El archivo FLA ya contiene ActionScript
para mostrar el texto cuando se prueba o se publica el documento.
1. En la línea de tiempo, seleccione la capa Texto dinámico. Utilice la
herramienta Selección para hacer clic en el espacio de trabajo y
deseleccionar los objetos que pudieran estar seleccionados.
2. Seleccione la herramienta Texto en el panel Herramientas.
siguientes:
■ Seleccione Texto dinámico en el menú emergente Tipo de texto.
■ En la opción de atributos de texto, establezca Verdana como tipo de
texto y el tamaño de fuente 6.
■ En Tipo de línea, seleccione Multilínea para garantizar que el texto
se ajuste correctamente.
oscura gris.
■ Seleccione Alinear a la izquierda como atributo de párrafo, si no
está seleccionado aún.
4. En el escenario, arrastre para crear un campo de texto en el área entre las
dos reglas horizontales.

asigne el nombre newFeatures_txt al campo de texto dinámico.
El código ActionScript de este documento carga un archivo de texto
interno, que se encuentra en la misma carpeta que este documento. El
código ActionScript está configurado para cargar el texto en un campo
denominado newFeatures_txt.
Especificación de opciones de
formato
El cuadro de diálogo Opciones de formato permite especificar la
configuración de márgenes y sangría del texto.
1. Con el campo de texto dinámico seleccionado aún en el escenario, haga
clic en Formato en el inspector de propiedades.
2. En el cuadro de texto Margen izquierdo, introduzca 5 y en el cuadro de
texto Margen derecho, introduzca 5. Haga clic en Aceptar.
El texto dinámico ahora tiene un margen izquierdo y un margen
derecho de 5 píxeles dentro del campo de texto.
Visualización de código
ActionScript del campo de texto
dinámico
Puede ver el código ActionScript que carga el texto del archivo de texto
externo en el campo de texto dinámico. Este script utiliza acciones
LoadVars para cargar el contenido de safetyfeatures.txt en el campo de
texto newFeatures.
2. Seleccione Ventana > Acciones o presione F9.
El código ActionScript que aparece es similar al siguiente:
// Carga texto como variable y lo asigna a
// un campo de texto dinámico
var features_lv:LoadVars = new LoadVars();
features_lv.onLoad = onText;
features_lv.load("safetyfeatures.txt");

Revisión ortográfica 223
function onText(success:Boolean) {
if (success) {
newFeatures_txt.text = features_lv.safetyfeatures;
} else {
newFeatures_txt.text = "unable to load text file.";
}
}
3. Cierre el panel Acciones.
Guarde y pruebe el documento para asegurarse de que el texto dinámico se
carga correctamente.
1. Seleccione Archivo > Guardar y, a continuación, seleccione Control >
Probar película.
En la ventana del archivo SWF, el texto del archivo de texto externo
debe aparecer en el campo de texto dinámico que ha creado. Si el texto
no aparece como esperaba, compruebe si ha introducido correctamente
el nombre de instancia: newFeatures_txt. Compruebe también si ha
guardado la copia del archivo de práctica en la misma carpeta que el
archivo text_start original.
2. Escriba los campos de introducción de texto.
3. Cuando haya acabado de probar el archivo, cierre la ventana del archivo
SWF.
Revisión ortográfica
Flash Basic 8 y Flash Professional 8 introducen nuevas funciones que
permiten revisar la ortografía en la mayor parte de las ubicaciones del
documento en las que aparece texto, incluidos los campos de texto, los
nombres de capa y las cadenas de ActionScript. Para revisar la ortografía,
configure primero las opciones de Configuración de ortografía y, a
continuación, ejecute el corrector ortográfico.
1. Seleccione Texto > Configuración de ortografía.
2. Verifique que Comprobar el contenido de los campos de texto esté
seleccionado y que se ha seleccionado el diccionario adecuado.
Seleccione cualquiera de las demás opciones, según desee. Haga clic en
Aceptar.

3. Seleccione Texto > Revisar ortografía y responda a los cuadros de
diálogo que muestre el corrector ortográfico. Cuando haya acabado de
comprobar la ortografía, guarde el documento.
Resumen
¡Enhorabuena! Ha aprendido los métodos básicos para añadir texto al
documento. En unos minutos ha aprendido a realizar las tareas siguientes:
■ Creación de un bloque de texto de anchura ampliable.
■ Creación de un bloque de texto de anchura fija.
■ Edición de texto y cambio de atributos de fuente.
■ Selección de fuentes de dispositivo.
■ Adición de un campo de introducción de texto.
■ Copia de un campo de texto.
■ Asignación de nombres de instancia a campos de texto.
■ Creación de un campo de texto dinámico.
■ Visualización de ActionScript que vincule el campo de texto y un
archivo de texto externo.
■ Configuración y revisión ortográfica.
Para más información sobre la amplia variedad de opciones disponibles al
añadir texto al documento, consulte el capítulo Capítulo 6, “Trabajo con
texto” en el apartado Utilización de Flash.
NOTA
Para comprobar la ortografía de archivos externos, utilice la función de
revisión ortográfica asociada con la aplicación que ha utilizado para crear
el archivo externo.

225
18
CAPÍTULO 18
ActionScript: utilización del
modo de asistente de script
En este tutorial se explica la utilización del modo de asistente de script en
Macromedia Flash Basic 8 y Macromedia Flash Professional 8.
El modo de asistente de script le solicita la introducción de los elementos
de un script, lo que le ayuda a añadir interactividad sencilla al archivo SWF
(una versión comprimida de archivos .fla de Flash con la extensión .swf) o
a la aplicación con mayor facilidad. El modo de asistente de script es
idóneo para usuarios que no tengan soltura escribiendo sus propios scripts
o que simplemente prefieran la facilidad de uso que ofrece esta
herramienta.
Al utilizarlo conjuntamente con el panel Acciones, el modo de asistente de
script le pide que seleccione opciones y que introduzca parámetros. Por
ejemplo, en lugar de escribir su propio script, puede seleccionar un
elemento del lenguaje de la caja de herramientas Acciones (o el comando
Añadir (+) de la barra de herramientas), arrastrarlo al panel Script y,
seguidamente, utilizar el modo de asistente de script para que le ayude a
completar el script.
En este tutorial se explica cómo utilizar el modo de asistente de script para
añadir interactividad a una aplicación Flash. Añadirá código ActionScript a
un objeto (un botón) y a los fotogramas de la línea de tiempo. En este
tutorial también se proporcionan algunas de las prácticas recomendadas a
la hora de añadir scripts a los documentos de Flash.
Después de ver la aplicación Flash finalizada, comenzará abriendo un
documento Flash inicial y terminará probando la interactividad que ha
añadido a una aplicación utilizando el modo de asistente de script. Calcule
unos 20 minutos aproximadamente para completar el tutorial.
Antes de realizar este tutorial, lea el Capítulo 2, “Conceptos básicos de

226 ActionScript: utilización del modo de asistente de script
Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . .227
Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Adición de un script a un botón mediante el modo de asistente de
script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Adición de scripts de fotogramas a la línea de tiempo mediante el
modo de asistente de script . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Adición de un script de fotograma al clip de película Title . . . . .237
El tutorial de este capítulo sigue el orden de un flujo de trabajo habitual
para crear una aplicación de Flash. Es posible utilizar otros flujos de
trabajo.
examinar el documento de Flash finalizado.
tutorial con un archivo FLA (un archigo Flash con extensión .fla) que
contiene los elementos con los que utilizará el modo de asistente de
script para añadir ActionScript.
■ “Adición de un script a un botón mediante el modo de asistente de
script” en la página 229 muestra cómo utilizar el modo de asistente de
script para añadir un script directamente a un objeto Button del
escenario.
■ “Adición de scripts de fotogramas a la línea de tiempo mediante el
modo de asistente de script” en la página 233 muestra cómo utilizar el
modo de asistente de script para insertar scripts en un fotograma de la
línea de tiempo que afecte a los botones del escenario. Para organizar
ActionScript dentro de las aplicaciones Flash, el mejor enfoque es
insertar el código en un fotograma de la línea de tiempo en vez de
hacerlo directamente en los objetos del escenario.
■ “Adición de un script de fotograma al clip de película Title” en
la página 237 muestra cómo insertar código en el último fotograma de
un clip de película.
publicar el documento Flash en un archivo SWF y visualizarlo en un
navegador web.

finalizado
aplicación.
FLA, para ver cómo ha diseñado el autor la aplicación. Deberá examinar
qué tipos de scripts se utilizaron para añadir interactividad y saber qué es lo
que va a crear.
Antes de realizar el tutorial, debe copiar la carpeta de tutorial Script Assist
en la ubicación de escritura que elija.
En la mayoría de los ordenadores, la carpeta de tutorial Script Assist se
AssetsActionScriptScript Assist.
Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Script
Assist.
Copie la carpeta Script Assist en otra ubicación del disco duro a la que
tenga acceso. En la carpeta Script Assist encontrará un archivo Flash
llamado scriptassist_complete.fla. Haga doble clic en el archivo para abrirlo
en Flash. Aparecerá el archivo de tutorial finalizado en el entorno de
edición de Flash.

En el archivo FLA finalizado podrá ver todos los objetos (botones, clips de
película y gráficos) que conforman la aplicación de muestra. La aplicación,
que representa un sitio Web con información empresarial basada en Flash,
tiene el aspecto siguiente:
Hay tres clips de película en la aplicación:
■ El clip de película Title, que muestra los títulos de las secciones del sitio
cuando el usuario hace clic en los enlaces de navegación
correspondientes (Home (Inicio), About (Acerca de), Products
(Productos), Contact (Contacto)).
■ Los clips de película Menu y Menu tween, que muestran los enlaces de
navegación principales (botones) y que, juntos, crean una animación
cuando se ejecuta la aplicación.
La aplicación tiene cuatro botones:
■ Los botones About, Products, Contact y Home facilitan la navegación
por la aplicación.
En este tutorial añadirá código ActionScript para habilitar el
funcionamiento de los botones para que dirigirse a distintas secciones del
sitio.
realizados.

Adición de un script a un botón mediante el modo de asistente de script 229
de Flash propio. Para empezar, abrirá un archivo inicial que contiene los
elementos a los que añadirá código ActionScript mediante el modo de
asistente de script.
Para abrir el documento inicial:
2. Desplácese hasta el siguiente directorio:
■ En Windows: disco duroProgram FilesMacromediaFlash
8Samples and TutorialsTutorial AssetsActionScriptScript Assist
Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Script
Assist.
3. Abra el archivo scriptassist_start.fla.
Adición de un script a un botón
mediante el modo de asistente
de script
En esta sección utilizará el modo de asistente de script para añadir un script
al botón Home (Inicio). Cuando se ejecute la aplicación de muestra y se
haga clic en el botón Home, aparecerá el título Home en el clip de película
Title.
2. En la línea de tiempo, seleccione la capa “menu and button”.
Si la capa está bloqueada, desbloquéela.
3. En la esquina superior derecha del escenario, seleccione el botón Home.
NOTA
En esta sección se muestra cómo añadir scripts directamente a objetos.
Aunque este enfoque puede resultar útil para añadir interactividad a las
aplicaciones Flash, deberá seguir las prácticas recomendadas de
codificación y añadir el código a la línea de tiempo y no a los distintos
objetos. Para más información, consulte “Adición de scripts de
fotogramas a la línea de tiempo mediante el modo de asistente de script”
en la página 233.

4. En el panel Acciones podrá ver el botón Asistente de script encima del
editor de ActionScript.
Haga clic en Asistente de script para acceder al modo de asistente de
script.
Si no hay ninguna función seleccionada, el panel del Asistente de script
permanece vacío.
Inicialmente, la sección Asistente de script del panel Acciones se
muestra vacía. El modo de asistente de script le pedirá que seleccione
opciones y defina parámetros para las funciones que ha añadido al
botón seleccionado. Los parámetros aparecen al añadir una función
ActionScript.
5. Para añadir una función al botón, haga clic en Añadir en la barra de
herramientas.
Al hacer clic en el botón Añadir, aparecerá una lista con todas las funciones
predefinidas de ActionScript.
NOTA
Tal vez note que, cuando el modo de asistente de script está activado, no
es posible editar código directamente en el editor de ActionScript, ya que
éste es de sólo lectura. Toda la interacción con el código del editor se lleva
a cabo a través del modo de asistente de script con una excepción
importante: puede resaltar las funciones en el editor de ActionScript y
eliminarlas.

Adición de un script a un botón mediante el modo de asistente de script 231
6. En la opción Control de clip de película, seleccione el controlador de
eventos on.
El modo de asistente de script le pedirá que defina los parámetros de las
funciones.
El evento release del controlador de eventos on aparece seleccionado
de forma predeterminada.
Utilizará el evento release para activar la acción del script cuando el
usuario haga clic en Home.
NOTA
Un método alternativo para añadir funciones de ActionScript consiste en
desplazarse para seleccionarlas en el cuadro de herramientas del panel
Acciones. El botón Añadir de la barra de herramientas del panel Acciones
y el cuadro de herramientas de este mismo panel incluyen las mismas
categorías de funciones y puede añadirlas desde cualquiera de las dos
ubicaciones.

7. Vuelva a hacer clic en Añadir y seleccione la función goto() en la
opción Funciones globales > Control de la línea de tiempo.
Adición de una función activada al producirse el evento
La función goto() se añade como la acción del controlador de eventos
on. En otras palabras, cuando se presiona el botón Home (el
controlador on) y se suelta (el evento release), se ejecuta la acción
goto().
Al hacer clic en el botón Home, el clip de película debería moverse y
detenerse en el fotograma Home de la línea de tiempo. Para conseguir
esto, utilice el modo de asistente de script para modificar los
parámetros predeterminados de la función goto().
8. En el panel Asistente de script, seleccione la opción Go To and Stop.
9. Defina el tipo para nombrar el fotograma en el menú emergente Tipo.
10. En el cuadro de texto Fotograma escriba home.
Modificación de los parámetros de funciones para finalizar el script

Adición de scripts de fotogramas a la línea de tiempo mediante el modo de asistente de script 233
Los cambios realizados con el modo de asistente de script se muestran en el
editor de ActionScript. Acaba de crear un script sin escribir código
manualmente en el editor de ActionScript.
Cuando pruebe la aplicación, al hacer clic en el botón Home, aparecerá el
título “Home” en el clip de película Title, lo que indicará que el fotograma
Home se muestra actualmente.
Al hacer clic en el botón Home aparecerá “Home” en el clip de película Title.
Puede repetir este proceso para los botones About, Products y Contacts.
Sin embargo, verá que para estos botones vamos a utilizar un método
alternativo y recomendado para la creación de scripts.
En cada caso, queremos mostrar los fotogramas correspondientes en la
línea de tiempo cuando se pulsa cada botón; por lo tanto, definiremos el
fotograma de la función gotoAndStop() en los fotogramas About,
Products y Contacts, tal como ha hecho para el botón Home.
Adición de scripts de fotogramas
a la línea de tiempo mediante el
modo de asistente de script
En vez de añadir scripts a objetos por separado y manipularlos
directamente al mismo tiempo aparece código en varios lugares del
documento Flash, puede insertar los scripts en un fotograma de la línea de
tiempo. En esta sección se muestra cómo añadir scripts en una línea de
tiempo.
1. En la línea de tiempo principal, seleccione el fotograma 1 de la capa
Actions.
2. En la barra de herramientas del panel Acciones, haga clic en Asistente de
script para visualizar la ventana del asistente.

3. En el cuadro de herramientas de acciones, seleccione Clases de
ActionScript 2.0 > Película > Button > Controladores de eventos y
localice el controlador on(release).
Haga doble clic en el controlador de eventos on(release) para
insertarlo en el editor de ActionScript.
Utilice el cuadro de herramientas de acciones para insertar funciones en el
script
Como podrá observar, el código insertado en una línea de tiempo se
comporta de forma distinta al insertado en los objetos. En el ejemplo
anterior, debía especificar el objeto de destino del controlador de
eventos on(release). Esto se debía a que no estaba añadiendo el script
directamente al objeto, sino que hacia referencia a él desde el código de
la línea de tiempo. Dicho método también utiliza explícitamente la
palabra clave function para declarar una función. En los pasos
siguientes descubrirá cómo utilizar el modo de asistente de script para
controlar las funciones.
4. Haga clic en el cuadro de texto Objeto.
En panel Acciones se activará el botón Insertar ruta de destino.

Adición de scripts de fotogramas a la línea de tiempo mediante el modo de asistente de script 235
5. Haga clic en el botón Insertar ruta de destino para acceder al cuadro de
diálogo Insertar ruta de destino.
Selección del objeto de destino desde el cuadro de diálogo Insertar ruta de
destino
6. Seleccione el botón About (about_btn) en el clip de película tween_mc.
7. Verifique que la opción Relativo esté seleccionada y haga clic en
Aceptar.
El objeto de destino (Menu tween) se ha añadido.
La ruta de acceso al objeto de destino se añade al controlador de eventos.

Ahora necesita añadir la función goto(), la acción que se produce cuando
se hace clic en el botón About.
1. Desde el cuadro de herramientas de acciones o mediante el botón
Añadir del panel Acciones, seleccone Funciones globales > Control de la
línea de tiempo e inserte la función goto.
2. En el panel Asistente de script, seleccione la opción Go To and Stop.
3. Defina el tipo para nombrar el fotograma en el menú emergente Tipo.
4. En el cuadro de texto Fotograma escriba about.
Script de línea de tiempo finalizado
Repita el mismo proceso para los botones Products y Contacts. En cada
caso, al hacer clic en los botones querrá ver los fotogramas correspondientes
en la línea de tiempo; por lo tanto, defina el destino del fotograma de la
función gotoAndStop() en los fotogramas de Products y Contacts tal
como hizo para el botón About.

Adición de un script de fotograma al clip de película Title 237
Adición de un script de
fotograma al clip de película Title
El último paso es añadir un script al último fotograma del clip de película
Title. Este script se utilizará para mostrar el texto “Home” en el clip de
película Title una vez finalizada su animación.
1. En el panel Biblioteca, seleccione el clip de película Title; aparecerá su
línea de tiempo.
Selección de la línea de tiempo del clip de película Title para añadir un
script al último fotograma
2. Con la capa Actions seleccionada, elija el último fotograma (14) de la
línea de tiempo.
3. En el panel Acciones, haga clic en Asistente de script para acceder al
modo de asistente de script.
4. Desde el cuadro de herramientas de acciones o mediante el botón
Añadir del panel Acciones, seleccone Funciones globales > Control de la
línea de tiempo e inserte la función stop().

5. A continuación, desde el cuadro de herramientas de acciones o mediante
el botón Añadir, seleccione Clases de ActionScript 2.0 > Película >
MovieClip > Métodos > gotoAndStop.
Modificación de los parámetros de funciones para finalizar el script
6. En el panel Asistente de script, seleccione la acción gotoAndStop en la
línea 2.
7. Haga clic en el cuadro de texto Objeto.
8. Haga clic en el botón Insertar una ruta de destino
9. En el cuadro de diálogo Insertar ruta de destino, elija el objeto _root y
10. En el cuadro de texto Fotograma escriba home.
11. Anule la selección de la casilla de verificación Expresión.
Ahora, cuando el clip de película Title llegue al último fotograma y la
animación haya finalizado, aparecerá “Home”. Éste es el paso inicial de
la aplicación después de cargarse y antes de que el usuario haga clic en
alguno de los botones.
12. Guarde el trabajo.
Todos los scripts necesarios para ejecutar la aplicación de muestra ya están
finalizados, por lo que ya puede comprobar la aplicación.

Resumen 239
reproduce la aplicación como un archivo SWF. Ahora que ya sabe añadir
scripts a la aplicación desde el modo de asistente de script, puede
comprobar la interactividad que ha añadido.
3. Haga clic en cualquiera de los botones (About, Products, Contact o
Home) para compobar que se cargan los fotogramas correspondientes y
que aparece el título adecuado en el clip de película Title.
4. Cuando termine de comprobar la aplicación, cierre el archivo SWF
cerrando la ventana de comprobación.
Ha conseguido añadir scripts a un botón y, al mismo tiempo, a la línea de
tiempo principal y a la del clip de película Title. Puede utilizar el modo de
asistente de script de muchas formas mientras trabaja con ActionScript en
los documentos Flash.
Resumen
Le felicitamos por haber empezado a utilizar el modo de asistente de script
para añadir scripts a objetos y a la línea de tiempo. En unos minutos ha
aprendido a realizar las tareas siguientes con el modo de asistente de script:
■ Acceder al modo de asistente de script desde el panel Acciones e insertar
funciones ActionScript predefinidas.
■ Añadir un script a un botón.
■ Añadir scripts de fotogramas a la línea de tiempo principal.
■ Añadir un script de fotograma al último fotograma de un clip de
película.
Para obtener más información sobre ActionScript, lea otra de las lecciones
de la serie básica de ActionScript.

241
19
CAPÍTULO 19
ActionScript: creación
de scripts
El lenguaje de ActionScript que forma parte de Macromedia Flash Basic 8
y Macromedia Flash Professional 8 ofrece a los diseñadores y
desarrolladores muchas ventajas. Con ActionScript se puede controlar la
reproducción del documento en respuesta a eventos, como tiempo
transcurrido y carga de datos; añadir interactividad a un documento en
respuesta a acciones de los usuarios, como un clic en un botón; utilizar
objetos incorporados, como un objeto de botón, con métodos, propiedades
y eventos asociados incorporados; crear clases y objetos personalizados, y
crear aplicaciones más compactas y eficientes que las que se podrían crear
utilizando herramientas de la interfaz de usuario. Todo ello con código que
se puede reutilizar.
ActionScript es un lenguaje de creación de scripts orientado a objetos que
ofrece control sobre cómo se reproduce el contenido de Flash. En las
próximas lecciones, obtendrá información sobre la evolución de
ActionScript a ActionScript 2.0, que comprende un conjunto de elementos
de lenguaje que facilitan el desarrollo de programas orientados a objetos.
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . 242
Creación de una instancia de un símbolo . . . . . . . . . . . . . . . . 243
Asignación de nombres a instancias de botón . . . . . . . . . . . 244
Inicialización del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Aplicación de la sintaxis de ActionScript . . . . . . . . . . . . . . . . 246
Localización de la documentación de referencia de
ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Adición de comentarios a ActionScript. . . . . . . . . . . . . . . . . . 247

242 ActionScript: creación de scripts
Creación de una función para un botón. . . . . . . . . . . . . . . . . . . . . 248
Copia y modificación de una función de botón . . . . . . . . . . . . . . 249
Comprobación de la sintaxis y la aplicación . . . . . . . . . . . . . . . . . 250
trabajo
AssetsActionScriptWrite Scripts y haga doble clic en
scripts_start.fla.
Assets/ActionScript/Write Scripts y haga doble clic en
scripts_start.fla.
original.
NOTA
La carpeta Write Scripts contiene las versiones completas de los archivos
FLA del tutorial como referencia.

Creación de una instancia de un símbolo 243
Creación de una instancia de un
símbolo
Va a arrastrar una instancia de un clip de película animado desde la
biblioteca hasta la ilustración Global Positioning System (sistema de
posicionamiento global) del escenario. A continuación, va a seguir la
práctica recomendada de siempre asignar nombres a las instancias: para
indicar sugerencias para el código y también porque en los scripts
generalmente se hace referencia a nombres de instancia en lugar de a
nombres de símbolo. Las sugerencias para código son consejos que indican
la sintaxis correcta de ActionScript.
Seleccione la capa de mapa de la línea de tiempo y haga clic en el icono
de candado que aparece junto a la capa de mapa para desbloquear dicha
capa.
2. Para colocar el clip de película con precisión, seleccione Ver > Ajuste.
Seleccione Alineación de ajuste y Ajustar a objetos si los comandos no
están seleccionados.
3. En el panel Biblioteca (Ventana > Biblioteca), arrastre map_skewed
hasta el área de fondo negro del escenario.
Puesto que las guías no aparecen la primera vez que arrastra un objeto
del panel Biblioteca, deberá soltar el objeto y arrastrarlo de nuevo.
4. Vuelva a arrastrar el clip de película map_skewed hasta el escenario para
que aparezcan las guías de alineación. Utilice las guías para alinear el clip
de película con los bordes superior e izquierdo de la pantalla GPS.
NOTA
Si comete un error de colocación, arrastre el clip de película de nuevo o
presione las teclas Control+Z (Windows) o Comando+Z (Macintosh) para
deshacer los cambios.

5. Con la instancia de map_skewed seleccionada en el escenario, escriba
screen_mc en el cuadro de texto Nombre de instancia del inspector de
propiedades (Ventana > Propiedades).
Flash está diseñado para presentar sugerencias para código cuando se
asigna un nombre a las instancias con el sufijo adecuado:
■ Al asignar un nombre a una instancia de clip de película,
proporcione siempre a la instancia el sufijo _mc; por
ejemplo, screen_mc.
■ Al asignar un nombre a un botón, utilice el sufijo _btn.
■ Al asignar un nombre a un texto, utilice el sufijo _txt.
Asignación de nombres a
instancias de botón
Con el sufijo apropiado para indicar sugerencias para el código,
proporcionará nombres de instancia a dos instancias de botón que ya están
en el escenario.
1. En la línea de tiempo, desbloquee la capa Buttons.
2. En el escenario, seleccione la instancia de play_button (el botón grande
de color verde).
escriba onButton_btn para asignar un nombre a la instancia.
4. En el escenario, seleccione la instancia de button_stop (el botón
pequeño de color rojo).
escriba offButton_btn para asignar un nombre a la instancia.
NOTA
Para más información sobre los sufijos de nombres de instancias
adicionales que indican sugerencias para el código, consulte “Activación
de las sugerencias para el código” en Aprendizaje de ActionScript 2.0 en
Flash.

Inicialización del documento 245
Inicialización del documento
Las aplicaciones tienen un estado inicial que especifica cómo aparece
primero el contenido para los usuarios. Las propiedades y las variables se
inicializan en el primer fotograma de un documento. Va a especificar que el
clip de película del mapa no debería estar visible cuando el archivo SWF se
reproduzca por primera vez.
1. Seleccione el fotograma 1 de la capa Acciones. Si el panel Acciones no
está abierto, seleccione Ventana > Acciones.
Acciones: el fotograma aparece en la parte superior del panel; esto
indica que ha seleccionado un fotograma en el que se aplica
ActionScript. Es una práctica aconsejable comprobar que se está
adjuntando ActionScript al fotograma u objeto deseado.
El panel Acciones incluye: el panel Script (área de introducción de
texto vacía) en el que se puede introducir texto directamente, la caja de
herramientas Acciones que permite seleccionar código ActionScript
para añadirlo al script y un navegador de scripts que funciona igual que
el explorador de películas.
2. En la parte superior del panel Acciones, haga clic en Insertar una ruta de
destino.
3. En el cuadro de diálogo Insertar ruta de destino, compruebe que esté
seleccionada la opción Relativo, que se refiere a ruta relativa. En el árbol
jerárquico del cuadro de diálogo, seleccione screen_mc. Haga clic en
Aceptar.
Una ruta de destino indica a ActionScript la ubicación de un objeto
dentro de la estructura global de un documento. Para más información
sobre las rutas, consulte “Utilización de rutas de destino absolutas y
relativas” en Utilización de Flash.
4. Haga clic en el panel Script, al final del texto screen_mc, y escriba un
punto (.).

5. Al escribir el punto, aparecen sugerencias para el código del clip de
película, puesto que ha utilizado el sufijo _mc al asignar el nombre de la
instancia. Haga doble clic en _visible de la lista de sugerencias para el
código y escriba lo siguiente:
= false;
Esta línea de código hace que el clip de película screen_mc no esté
visible en el escenario.
Durante todo el proceso de edición, no olvide guardar el documento con
frecuencia.
Aplicación de la sintaxis de
ActionScript
Todos los lenguajes, con independencia de si son lenguajes informáticos o
lenguajes “humanos” hablados y escritos, siguen reglas específicas que
fomentan la comunicación. Estas reglas se conocen como la sintaxis del
lenguaje.
Flash utiliza la sintaxis de puntos, que significa que el punto (.) sirve para
vincular partes de un script. Otros elementos de la sintaxis de ActionScript
son:
■ Un punto y coma (;) en una sentencia de ActionScript, al igual que un
punto en una sentencia normal, indica el final de una sentencia.
■ Los paréntesis () agrupan argumentos que se aplican a una sentencia de
ActionScript.
■ Las llaves {} agrupan sentencias de ActionScript relacionadas. Se
pueden utilizar llaves anidadas para crear una jerarquía de sentencias.
Más adelante en esta lección va a utilizar las funciones de Flash que
permiten probar la sintaxis.
NOTA
Si las sugerencias para el código no aparecen, indica que no están
seleccionadas como preferencia en el panel Acciones. Puede escribir
_visible directamente en el panel Script. Para cambiar las preferencias,
también puede hacer clic en el menú emergente situado en la esquina
superior derecha del panel Acciones. Desde el menú emergente,
seleccione Preferencias y, a continuación, seleccione Sugerencias para el
código en la ficha ActionScript.

Adición de comentarios a ActionScript 247
Localización de la
documentación de referencia de
ActionScript
Durante la edición, si desea obtener información adicional sobre el
elemento de ActionScript que ha especificado, seleccione la acción en el
panel de herramientas Acciones o en el panel Script y haga clic en
Referencia. El panel Ayuda muestra información sobre la acción
seleccionada.
1. En el panel Script del panel Acciones, haga doble clic en visible para
seleccionar el término.
2. En la parte superior del panel Acciones, haga clic en el icono Ayuda.
Aparece la entrada visible en el panel Ayuda.
Adición de comentarios a
ActionScript
En ActionScript, el texto precedido de dos barras (//) corresponde a
comentarios, que Macromedia Flash Player omite. El comentario suele
documentar las funciones del script para que otros desarrolladores puedan
comprenderlo, pero los comentarios también se pueden utilizar para
desactivar secciones del script al depurar. La práctica más aconsejable es
añadir siempre comentarios que expliquen los scripts.
■ En el panel Script del panel Acciones, sitúe el punto de inserción al
principio de la línea de código y escriba //Inicializar el
documento para ocultar el clip de película de la pantalla.
El texto del panel Script aparece de la forma siguiente:
NOTA
Una vez que haya completado el paso siguiente, cambiará de temas en el
panel Ayuda y dejará de estar en este tema de la lección. En el panel
Ayuda, haga clic en el icono Historial regresivo para volver a este tema.

//Inicializar el documento para ocultar el clip de
película de la pantalla
this.screen_mc._visible = false;
Creación de una función para un
botón
Un comando de ActionScript se denomina función. Una función es un
script que se puede crear una vez y utilizar repetidamente en un documento
para realizar una determinada tarea. Va a crear una función que hace que el
clip de película screen_mc aparezca (visible = true) cuando el usuario
suelte el botón del ratón.
1. En el panel Script del panel Acciones, haga clic después de la última
línea de código, presione Intro (Windows) o Retorno (Macintosh) dos
veces y escriba //función para mostrar animación
2. Presione Intro o Retorno y haga clic en Insertar una ruta de destino, en
la parte superior del panel Acciones. Seleccione onButton_btn en el
árbol jerárquico y haga clic en Aceptar.
3. En el panel Script, escriba un punto (.) y haga doble clic en onRelease
de la lista de sugerencias para el código que aparece.
4. En el panel Script, presione la barra espaciadora y escriba lo siguiente:
= function(){
La línea del código que acaba de completar debe tener el aspecto
siguiente:
this.onButton_btn.onRelease = function(){
Ya sabe cómo seleccionar objetos en el cuadro de diálogo Insertar ruta
de destino; ahora va a introducir los nombres de instancia directamente
en el panel Script.
5. Presione Intro o Retorno y escriba lo siguiente:
screen_mc._visible = true;
NOTA
Si el texto del comentario ocupa varias líneas, puede utilizar /* en lugar de
las dos barras diagonales del inicio del comentario y */ para indicar el final
del comentario.

Copia y modificación de una función de botón 249
6. Presione Intro o Retorno y escriba }; para especificar el final de la
sentencia.
La función debe tener el aspecto siguiente:
// función para mostrar la animación
};
Copia y modificación de una
función de botón
Ha creado una función que establece el valor true para la propiedad
visible de un clip de película cuando el usuario suelta el botón del ratón
tras hacer clic. Probablemente ahora ya sabe cómo crear otra función que
oculte el clip de película screen_mc: estableciendo el valor false para la
propiedad _visible del clip de película cuando el usuario hace clic en un
botón de desactivación. Ahora va a crear esa función.
1. En el panel Script, seleccione toda la función que acaba de escribir,
incluidos el comentario, las llaves y el punto y coma. Copie el texto de
la forma habitual, mediante Control+C (Windows) o Comando+C
(Macintosh).
2. En el panel Script, coloque el punto de inserción después de la última
línea de código. A continuación, presione Intro (Windows) o Retorno
(Macintosh) dos veces y pegue el texto como lo hace habitualmente: con
la combinación de teclas Control+V (Windows) o Comando+V
(Macintosh).
3. En la función copiada, cambie el texto onButton_btn por
offButton_btn.
Recuerde que anteriormente ha asignado el nombre de instancia
offButton_btn a una instancia.
4. En la función copiada, cambie la propiedad visible del clip de película
screen_mc de true a false.

5. En la función copiada, cambie el comentario detrás de las barras por
función para ocultar la animación.
El script completo debe tener el siguiente aspecto:
// Inicializar el documento para ocultar el clip de
película de la pantalla
this.screen_mc._visible = false;
// función para mostrar la animación
};
// función para ocultar la animación
this.offButton_btn.onRelease = function(){
screen_mc._visible = false;
};
Comprobación de la sintaxis y la
aplicación
Tal como se ha explicado anteriormente en esta lección, ActionScript
depende de que la sintaxis sea correcta para ejecutarse adecuadamente.
Flash ofrece diversas formas de revisar la sintaxis.
1. Para revisar la sintaxis, siga uno de estos procedimientos:
■ Haga clic en el menú emergente situado en la esquina superior
derecha de la barra de título del panel Acciones y elija Revisar
sintaxis.
■ Haga clic en Revisar sintaxis situado en la parte superior del panel
Acciones.
Si la sintaxis es correcta, aparecerá un mensaje que indica que el script
no contiene errores.
Si la sintaxis es incorrecta, aparecerá un mensaje que indica que el script
contiene errores; se abrirá el panel Salida y aparecerá información sobre
el error.
2. Haga clic en Aceptar para cerrar el mensaje de sintaxis.

Resumen 251
3. Después de comprobar que ActionScript no contiene errores de sintaxis,
guarde el documento y seleccione Control > Probar película.
Cuando aparece el archivo SWF, la animación no debe aparecer en la
pantalla Global Positioning System porque su propiedad visible
inicial se ha establecido en false. Si hace clic y suelta el botón superior
de color verde, llama a la función que establece el valor true para la
propiedad visible del clip de película. ¿Se reproduce ahora la
animación? Finalmente, haga clic en el botón de desactivación de color
rojo para ver si la propiedad visible de la animación vuelve a ser
false.
Puede probar el contenido SWF durante todo el proceso de edición
para confirmar que se reproduce de la forma deseada.
Resumen
¡Enhorabuena! Ha aprendido los conceptos básicos para escribir scripts con
ActionScript. En muy poco tiempo, ha aprendido a llevar a cabo las tareas
siguientes:
■ Asignación de nombres a instancias siguiendo prácticas recomendadas.
■ Inicialización de un documento.
■ Aplicación de la sintaxis de ActionScript.
■ Localización de la documentación de referencia de ActionScript.
■ Adición de comentarios a ActionScript.
■ Copia y modificación de una función.
■ Comprobación de la sintaxis y la aplicación.
Para más información sobre ActionScript, seleccione Ayuda > Tutoriales de
Flash > Tareas básicas: Creación de una aplicación.

253
20
CAPÍTULO 20
ActionScript: adición de
interactividad
Macromedia Flash Basic 8 y Macromedia Flash Professional 8 ofrecen
diversos métodos para que los usuarios participen interactivamente. Al
incorporar interactividad, el usuario no está limitado a reproducir cada
fotograma de la línea de tiempo de forma secuencial; sin embargo, la
reproducción secuencial proporciona mayores opciones de diseño y
desarrollo. En este tutorial aprenderá algunos métodos para implementar
interactividad en Flash.
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . 254
Asignación de nombres a instancias de botón . . . . . . . . . . . . . 255
Adición de una escena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Desplazamiento entre escenas. . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Control del documento con una acción stop(). . . . . . . . . . . . . . 256
Vinculación de un botón a una escena . . . . . . . . . . . . . . . . . . . . 257
Adición de navegación para volver a la escena 1 . . . . . . . . . . . 257
Reproducción de un clip de película . . . . . . . . . . . . . . . . . . . . . . 258
Utilización de un comportamiento para reproducir un archivo
MP3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Comprobación del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
NOTA
Si dispone de Flash Professional 8, puede utilizar pantallas para crear un
documento. Las pantallas proporcionan opciones de navegación
adicionales. Las pantallas de diapositivas, por ejemplo, ya incluyen
funciones de navegación que permiten a los usuarios desplazarse por las
pantallas mediante las teclas de flecha del teclado. Para más información
sobre las pantallas, seleccione Ayuda > Tutoriales de Flash > Tareas
básicas: Creación de una presentación con pantallas (sólo Flash
Professional).

254 ActionScript: adición de interactividad
trabajo
AssetsActionScriptAdd Interactivity y haga doble clic en
interactivity_start.fla.
Assets/ActionScript/Add Interactivity y haga doble clic en
interactivity_start.fla.
original.
NOTA
La carpeta Add Interactivity contiene las versiones completas de los

Adición de una escena 255
Asignación de nombres a
instancias de botón
Proporcionará nombres de instancia a los botones del escenario para poder
hacer referencia a los nombres de instancia en ActionScript.
1. En la parte inferior derecha del escenario, seleccione el botón situado a
la izquierda.
En el inspector de propiedades (Ventana > Propiedades >
Propiedades), escriba goScene_btn en el cuadro de texto Nombre de
instancia para asignar un nombre a la instancia del símbolo.
2. Seleccione el botón situado en el medio y con el inspector de
propiedades asigne el nombre de instancia attachMovie_btn al botón.
3. Seleccione el botón situado en el extremo derecho y con el inspector de
propiedades asigne el nombre de instancia playSound_btn al botón.
Adición de una escena
Puede utilizar escenas en Flash para organizar el documento en secciones
independientes que pueden constar de contenido exclusivo de otras
escenas. Creará y añadirá contenido a una nueva escena.
1. Seleccione Insertar > Escena.
Ya no puede ver la escena 1 y la escena 2 aparece ahora encima del
escenario. El escenario está vacío.
2. En el panel Biblioteca (Ventana > Biblioteca), arrastre el clip de película
de animación al escenario.
Con el clip de película seleccionado, utilice el inspector de propiedades
para asignar a la instancia una coordenada x 200 y una coordenada y
15. Presione Intro (Windows) o Retorno (Macintosh).
El clip de película se desplaza a las coordenadas designadas del
escenario.

3. Utilice el inspector de propiedades para asignar el nombre de instancia
animation_mc al clip de película de animación.
4. Asigne el nombre Animación a la capa 1.
Cree una capa y asígnele el nombre Botones. Arrastre una instancia del
símbolo BTNback al escenario y colóquelo a la derecha del clip de
película.
5. Utilice el inspector de propiedades para asignar el nombre de instancia
back_btn al botón.
Desplazamiento entre escenas
Puede desplazarse entre escenas en el entorno de edición seleccionando una
escena en el panel Escena.
1. Para abrir el panel Escena, seleccione Ventana > Otros paneles > Escena.
2. Seleccione la escena 1.
Control del documento con una
acción stop()
Cuando se prueba o se publica un documento de Flash que contiene más
de una escena, de manera predeterminada las escenas se reproducen de
forma lineal, en el orden en el que aparecen en el panel Escenas. Utilizará
una acción stop() para la escena 1 a fin de que la cabeza lectora de la línea
de tiempo se detenga en el fotograma 1 de la escena 1.
1. En la línea de tiempo principal de la escena 1, añada una capa nueva y
asígnele el nombre Acciones.
2. Haga clic en el fotograma 1 de la capa Acciones.
En el panel Script del panel Acciones (Ventana > Acciones), escriba el
comentario siguiente seguido del script que detiene la cabeza lectora en
el fotograma:
// Detiene la cabeza lectora en el Fotograma 1.
stop();

Adición de navegación para volver a la escena 1 257
Vinculación de un botón a una
escena
Ahora que la cabeza lectora se detiene en el fotograma 1, añadirá código de
ActionScript que dirigirá al usuario a la escena 2 después de liberar la
instancia goScene_btn.
■ Presione Intro (Windows) o Retorno (Macintosh) dos veces y escriba el
siguiente comentario. A continuación, escriba la función que dirige a
los usuarios a la escena 2 después de liberar la instancia goScene_btn:
// Este script dirige al usuario a la escena 2 cuando se
libera
// goScene_btn.
goScene_btn.onRelease = function (){
gotoAndStop("Scene 2", 1);
};
En el script que acaba de escribir, ha utilizado el método onRelease
para el objeto de botón. La función gotoAndStop() es una función de
control de la línea de tiempo que permite especificar el número de
escena y de fotograma. En este caso, ha especificado el fotograma 1.
Adición de navegación para
volver a la escena 1
La función que añadirá al botón en la escena 2, para devolver al usuario a la
escena 1, es similar a la función que ha escrito para dirigir el usuario a la
escena 2.
1. En el panel Escena, seleccione Escena 2.
Cree una capa y asígnele el nombre Acciones.
2. Seleccione el fotograma 1 de la capa Acciones.
En el panel Acciones, introduzca lo siguiente en el panel Script:
// la función dirige al usuario a la escena 1 cuando se
libera la instancia
// back_btn
back_btn.onRelease = function (){
};
Las únicas diferencias entre esta función y la función de la escena 1 son
el nombre del botón y el nombre de la escena.
3. En el panel Escena, seleccione Escena 1.

Reproducción de un clip de
película
Puede configurar el documento para reproducir un clip de película en
tiempo de ejecución. Con el método attachMovie() puede adjuntar una
instancia de un clip de película en el panel Biblioteca al escenario, aunque
no haya colocado una instancia en el escenario.
Con el método attachMovie(), debe exportar el símbolo de ActionScript
y asignarle un identificador de vinculación exclusivo, que es distinto del
nombre de la instancia.
1. En el panel Biblioteca, haga clic con el botón derecho del ratón en el
símbolo MCTrio y seleccione Vinculación en el menú contextual.
2. En el cuadro de diálogo Propiedades de vinculación, seleccione Exportar
para ActionScript.
3. En el cuadro de texto Identificador, verifique que MCTrio aparezca
como el nombre de la vinculación.
4. Verifique que Exportar en primer fotograma esté seleccionado y, a
Los clips de película que se exportan para usarlos con ActionScript se
cargan, de forma predeterminada, antes del primer fotograma del
archivo SWF que los contiene. Esto puede producir cierta demora en la
reproducción del primer fotograma. Cuando se asigna un identificador
de vinculación a un elemento, puede especificar que el clip de película
se cargue en el primer fotograma para evitar demoras de reproducción.
Uso del método attachMovie() para
reproducir un clip de película
Ahora utilizará el método attachMovie() para cargar el clip de película y
proporcionar un nombre de instancia al símbolo. Puesto que la instancia
del símbolo no existe en el escenario, creará el nombre de instancia
mediante programación.
1. En la línea de tiempo, seleccione el fotograma 1 de la capa Acciones para
la escena 1.

Reproducción de un clip de película 259
2. En el panel Script del panel Acciones, coloque el punto de inserción al
final de la última línea de código.
Presione Intro (Windows) o Retorno (Macintosh) y, a continuación,
escriba lo siguiente para añadir un comentario y crear una función:
// la función reproduce trio_mc cuando se libera la
instancia
// attachMovie_btn
attachMovie_btn.onRelease = function(){
A continuación, especificará las acciones que realiza la función:
reproduce el clip de película en la línea de tiempo raíz, que es la línea de
tiempo principal. En el script, hará referencia al clip de película
mediante el nombre del identificador de vinculación del cuadro de
diálogo Propiedades de vinculación (MCTrio).
Además, aunque no haya colocado una instancia del símbolo MCTrio
en el escenario, utilizará ActionScript para crear un nombre de
instancia para el símbolo. El nombre de instancia que especificará es
trio_mc.
3. Con el punto de inserción al final de la última línea del script, presione
Intro o Retorno. A continuación, escriba lo siguiente:
this._parent.attachMovie("MCTrio", "trio_mc", 1);
El número 1 del script que acaba de escribir hace referencia a la
profundidad de la capa en la que debe reproducirse el clip de película.
Cada instancia de clip de película tiene su propio eje z (profundidad)
que determina el orden de apilamiento de un clip de película dentro del
archivo SWF o del clip de película del que depende. Cuando se crea un
nuevo clip de película en tiempo de ejecución con el método
attachMovie(), siempre se especifica una profundidad para el nuevo
clip como un parámetro del método.
NOTA
Para más información sobre el método attachMovie(), consulte
attachMovie() en Referencia del lenguaje ActionScript 2.0. Además, es
posible utilizar la Referencia del lenguaje ActionScript 2.0 para obtener
información sobre ActionScript que le permita gestionar la profundidad;
getNextHighestDepth(), getDepth() y getInstanceAtDepth() son
métodos de la clase MovieClip. La clase DepthManager permite gestionar
las asignaciones de profundidad relativa de un clip de película.

Definición de las coordenadas de
escenario de clip de película
Además del eje z para el clip de película, debe especificar las coordenadas x
e y para colocar el clip de película dentro del área del escenario en tiempo
de ejecución.
■ Presione Intro (Windows) o Retorno (Macintosh) después de la última
línea del panel Script y escriba lo siguiente:
trio_mc._x = 275;
trio_mc._y = 200;
};
Descarga del clip de película
Después de que se reproduzca el clip de película, necesita un modo de
eliminar el clip de película del escenario cuando el usuario vaya a la escena
2. Puede modificar el script de goScene_btn para “descargar” el clip de
película.
A continuación, haga clic al final de la siguiente línea del script en el
panel Script, dentro de la función que dirige al usuario a la escena 2,
para colocar el punto de inserción:
2. Presione Intro (Windows) o Retorno (Macintosh) y escriba el script
siguiente, que descarga el clip de película cuando se ejecuta la función,
a fin de que el clip de película deje de reproducirse cuando el usuario
vaya a la escena 2:
unloadMovie("trio_mc");
La función completa de goScene_btn debe tener el aspecto siguiente:
libera
// goScene_btn.
goScene_btn.onRelease = function() {
};
El script completo debe tener el siguiente aspecto:
stop();

Utilización de un comportamiento para reproducir un archivo MP3 261
libera
// goScene_btn.
goScene_btn.onRelease = function (){
};
// Esta función reproduce trio_mc cuando se libera la
instancia
// attachMovie_btn.
attachMovie_btn.onRelease = function(){
this._parent.attachMovie("MCTrio", "trio_mc", 1);
trio_mc._x = 275;
trio_mc._y = 200;
Utilización de un
comportamiento para reproducir
un archivo MP3
Para añadir interactividad al documento con ActionScript, a menudo
puede servirse de comportamientos para que añadan ActionScript.
Utilizará un comportamiento de sonido para reproducir un archivo MP3
de la biblioteca.
1. En el panel Biblioteca, haga clic con el botón derecho (Windows) o haga
clic con la tecla Control presionada (Macintosh) en ping.mp3 y
seleccione Vinculación en el menú contextual.
2. En el cuadro de diálogo Propiedades de vinculación, seleccione Exportar
para ActionScript y verifique que Exportar en primer fotograma esté
seleccionado.
3. Verifique que ping.mp3 aparezca en el cuadro de texto Identificador y
4. En el escenario, seleccione la instancia playSound_btn.
5. En el panel Comportamientos (Ventana > Comportamientos), haga clic
en Añadir (+) y seleccione Sonido > Cargar sonido de biblioteca.
6. En el cuadro de texto de ID de vinculación, introduzca ping.mp3 y en
el cuadro de texto Nombre que aparece a continuación, introduzca
ping.
Haga clic en Aceptar.

Pruebe el documento para verificar que la interactividad funcione como se
esperaba.
2. En el archivo SWF, haga clic en el botón izquierdo para reproducir la
escena 2.
Cuando haya terminado de ver la escena 2, haga clic en Atrás.
3. Haga clic en el botón situado en el medio en la escena 1 para ver cómo
se reproduce el clip de película.
4. Haga clic en el botón situado a la derecha para reproducir el sonido
MP3.
5. Haga clic en el botón situado a la izquierda para verificar que el clip de
película se descargue.
Resumen
¡Enhorabuena! Ha aprendido a crear un documento interactivo. En unos
■ Creación de una escena.
■ Escritura de ActionScript para navegar entre escenas.
■ Escritura de ActionScript para reproducir un clip de película animado
en tiempo de ejecución.
■ Utilización de un comportamiento para reproducir un archivo MP3.
Para obtener más información sobre ActionScript, lea otra de las lecciones
de la serie básica de ActionScript.

263
21
CAPÍTULO 21
ActionScript: creación de un
formulario con lógica condicional y
envío de datos
Puede crear un formulario con lógica condicional que permita al archivo
SWF responder a la interacción del usuario y enviar los datos de formulario
del archivo SWF a una fuente externa. En este tutorial aprenderá a crear un
formulario sencillo.
Antes de leer esta lección, deberá familiarizarse con la escritura de
funciones y variables; para ello, seleccione Ayuda > Tutoriales de Flash >
Tareas básicas: Creación de una aplicación.
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . 264
Adición de un campo de introducción de texto para recopilar datos
de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Adición de un botón de envío al formulario . . . . . . . . . . . . . . . . . 266
Adición de un mensaje de error . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Adición de un mensaje de confirmación . . . . . . . . . . . . . . . . . . . . .267
Adición de una acción stop() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267
Adición de etiquetas de fotogramas para navegación. . . . . . . . 269
Adición de lógica condicional para el botón Enviar . . . . . . . . . . .270
Pasar datos de un archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Función para el botón Intentar de nuevo . . . . . . . . . . . . . . . . . . . .272
Comprobación del archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . .272

264 ActionScript: creación de un formulario con lógica condicional y envío de datos
trabajo
AssetsActionScriptCreate a Form y haga doble clic en
simpleForm_start.fla.
Assets/ActionScript/Create a Form y haga doble clic en
simpleForm_start.fla.
original.
tiempo.
NOTA
La carpeta Create a Form contiene las versiones completas de los

Adición de un campo de introducción de texto para recopilar datos de formulario 265
Adición de un campo de
introducción de texto para
recopilar datos de formulario
Empezará insertando un campo de texto en el documento en el que las
personas que visualicen el documento puedan introducir datos. También
asignará un nombre al campo de texto para que, más tarde, pueda hacer
referencia a éste cuando utilice ActionScript en la aplicación Flash.
3. En el inspector de propiedades, haga lo siguiente para establecer los
atributos de texto:
■ Seleccione Introducción de texto en el menú emergente Tipo de
texto.
■ Seleccione _sans en el menú emergente Fuente.
■ Introduzca 10 en el cuadro de texto Tamaño de fuente.
azul oscuro.
■ Verifique que Alinear a la izquierda esté seleccionado.
■ Verifique que Línea única esté seleccionada en el menú emergente
Tipo de línea.
4. En la línea de tiempo, seleccione el fotograma 1 de la capa de
introducción de texto.
5. En el escenario, arrastre la herramienta Texto para crear un campo de
introducción de texto a la derecha del texto http://.
6. Si es necesario, utilice la herramienta Selección para arrastrar el campo
de texto o utilice las teclas de flecha para ajustar la posición.
7. Con el campo de introducción de texto aún seleccionado, en el inspector
de propiedades, escriba url_txt en el cuadro de texto Nombre de
instancia.
Se referirá a ese nombre de instancia más adelante cuando añada
ActionScript.

Adición de un botón de envío al
formulario
El panel Biblioteca contiene un símbolo de botón Enviar que añadirá al
formulario.
1. En el panel Biblioteca (Ventana > Biblioteca), arrastre el botón Enviar
al escenario y colóquelo sobre la guía SubmitUR.
2. Arrastre el botón o utilice las teclas de flecha para ajustar la posición, si
es necesario.
3. En el inspector de propiedades, escriba submit_btn en el cuadro de
texto Nombre de instancia.
Adición de un mensaje de error
Añadirá un mensaje que se mostrará si el usuario hace clic en el botón
Enviar antes de introducir datos.
1. En la línea de tiempo, con la capa Branding seleccionada, haga clic en
Insertar capa y asigne a la capa el nombre Cuadros de diálogo.
2. Seleccione el fotograma 5 de la capa Cuadros de diálogo.
Control presionada (Macintosh) en la capa seleccionada y seleccione
Insertar fotograma clave vacío en el menú contextual.
3. En el panel Biblioteca, arrastre el clip de película de cuadro de
diálogo de error al centro del escenario.
4. En la línea de tiempo, seleccione el fotograma 5 de la capa Botones.

Adición de una acción stop() 267
5. Arrastre el símbolo del botón Intentar de nuevo del panel Biblioteca al
escenario y coloque el botón debajo del texto del mensaje de error.
6. Con el botón aún seleccionado, en el inspector de propiedades,
introduzca tryAgain_btn en el cuadro de texto Nombre de instancia.
Adición de un mensaje de
confirmación
A continuación, añadirá un mensaje que se mostrará cuando el usuario
envíe una entrada del campo de texto.
1. En la capa Cuadros de diálogo, seleccione el fotograma 10.
Control presionada (Macintosh) en el fotograma seleccionado y elija
Insertar fotograma clave vacío en el menú contextual.
2. En el panel Biblioteca, arrastre el clip de película de cuadro de
diálogo de confirmación al centro del escenario.
3. Cierre el panel Biblioteca.
Adición de una acción stop()
Cuando se carga una aplicación Flash en Flash Player, ésta se reproduce
indefinidamente de forma automática. ActionScript se utiliza para
controlar el movimiento de la cabeza lectora en una línea de tiempo.
Añadirá una acción stop() en el primer fotograma de la aplicación para
que el usuario pueda introducir información en el campo de texto.
1. En la línea de tiempo, con la capa Input Text seleccionada, añada una
capa y asígnele el nombre Acciones.

3. En el panel Acciones (Ventana > Acciones), verifique que el fotograma
1 esté seleccionado.
4. Haga clic en el panel Script del panel Acciones y escriba el comentario
siguiente:
// Detiene la cabeza lectora en el fotograma 1.
5. Escriba stop(); para añadir la acción de detención.

Adición de etiquetas de fotogramas para navegación 269
Adición de etiquetas de
fotogramas para navegación
Cuando el usuario presione el botón Enviar, Flash deberá mostrar el
mensaje de error o el mensaje de confirmación, en función de los datos que
se introduzcan en el campo de texto. Si se etiquetan los fotogramas, resulta
más sencillo hacer referencia a ellos en ActionScript. Ello le resultará de
utilidad para enviar la cabeza lectora a un fotograma específico.
A continuación, añadirá etiquetas de fotograma que le ayudarán a navegar
por la aplicación Flash.
1. Añada un fotograma clave (Insertar > Línea de tiempo >fotograma
clave) al fotograma 5 de la capa Acciones.
2. En el inspector de propiedades, escriba error en el cuadro de texto
Etiqueta de fotograma.
Presione Intro (Windows) o Retorno (Macintosh). En el fotograma 5
de la línea de tiempo aparecen la etiqueta y un indicador.
3. Añada un fotograma clave al fotograma 10 de la capa Acciones.
En el inspector de propiedades, escriba confirm en el cuadro de texto
Etiqueta de fotograma. Presione Intro o Retorno.

Adición de lógica condicional
para el botón Enviar
Con ActionScript, puede hacer que Flash compare la información y realice
acciones según criterios especificados. En este ejemplo, añadirá
ActionScript para que Flash realice una acción si el usuario no introduce
datos en el campo de texto y otra acción si el usuario los introduce.
En el panel Script, coloque el punto de inserción después del código
stop();. Presione Intro (Windows) o Retorno (Macintosh).
2. Escriba el comentario siguiente:
// Añade lógica condicional para el botón de envío
// que valida los datos introducidos por el usuario.
3. En el panel Acciones, haga clic en Insertar una ruta de destino situado
en la parte superior del panel.
4. En el cuadro de texto Insertar una ruta de destino, verifique que Relativo
esté seleccionado.
Haga clic en submit_btn en el árbol jerárquico y haga clic en Aceptar.
5. En el panel Script, escriba un punto (.) detrás de submit_btn y, a
continuación, escriba onRelease.
6. Con el punto de inserción después de onRelease, escriba = function
(){} en el panel Script.
7. Coloque el punto de inserción entre las llaves y presione Intro o
Retorno, y, a continuación, escriba if (url_txt.text == null ||
url_txt.text == ""){ en el panel Script.
Las líneas paralelas equivalen a la o lógica en ActionScript.
8. Con el punto de inserción aún dentro de las llaves, presione Intro o
Retorno.
9. Escriba gotoAndStop("error") en el panel Script.
10. Sitúe el punto de inserción detrás de las llaves y escriba else{ en el panel
Script.

Pasar datos de un archivo SWF 271
11. Escriba gotoAndStop("confirm") en el panel Script.
Presione Intro o Retorno y escriba }, a continuación, vuelva a
presionar Intro o Retorno y escriba };. El script debe tener el aspecto
siguiente:
stop();
// Añade lógica condicional para el botón de envío
// que valida los datos introducidos por el usuario.
this.submit_btn.onRelease = function(){
if (url_txt.text == null || url_txt.text ==””){
gotoAndStop("error");
} else {
gotoAndStop("confirm")
}
};
Pasar datos de un archivo SWF
Puede enviar datos de una aplicación Flash de varias maneras; por ejemplo,
en esta lección enviará datos a un servidor Web para cargar una página Web
en el navegador. Después de la sentencia else, añadirá ActionScript para
que Flash vaya al URL que la persona que visualice el documento
introduzca en el campo de introducción de texto.
1. En el panel Script, coloque el punto de inserción delante de la línea que
indica gotoAndStop("confirm").
2. En la caja de herramientas Acciones, seleccione Funciones globales >
Navegador/Red y haga doble clic en getURL.
3. Con el punto de inserción dentro de los paréntesis de getURL(), escriba
"http://"+url_txt.text para especificar los datos que deben pasarse
del archivo SWF.
No deje espacios en el código. El script debe tener un aspecto como el
siguiente:
stop();
this.submit_btn.onRelease = function(){
if (url_txt.text == null || url_txt.text ==””){
gotoAndStop("Error");
} else {
getUrl ("http://"+url_txt.text);
gotoAndStop("Confirm")
}
};

Función para el botón Intentar de
nuevo
Una función es un script que puede utilizarse repetidamente para realizar
una tarea específica. Puede pasar parámetros a una función y ésta puede
devolver un valor. En este ejemplo, cuando el usuario hace clic en el botón
Intentar de nuevo, se ejecuta una función que hace que la cabeza lectora
vuelva al fotograma 1.
Ahora va a escribir esa función. En este script, escribirá el número de
fotograma, porque no hemos etiquetado el fotograma 1.
2. En el panel Script, escriba el comentario siguiente:
// la función de botón vuelve a presentar el fotograma 1
al usuario.
3. Escriba tryAgain_btn.onRelease = function(){ y, a continuación,
presione Intro o Retorno.
4. Escriba gotoAndStop(1);, presione Intro o Retorno y escriba } para
completar el script.
Probará el documento introduciendo un URL y comprobando si funciona
del modo previsto.
2. Cuando aparezca el archivo SWF, haga clic en Enviar antes de escribir
algo en el campo de introducción de texto.
Aparece el mensaje de error.
3. Haga clic en Intentar de nuevo y, a continuación, escriba el URL de un
sitio Web válido en el campo de introducción de texto.
Haga clic en Enviar.
El navegador predeterminado abre la página Web.

Resumen 273
Resumen
¡Enhorabuena! Ha aprendido a escribir un script con lógica condicional y
envío de datos. En unos minutos ha aprendido a realizar las tareas
siguientes:
■ Añadir a un documento un campo de introducción de texto.
■ Creación de un símbolo de botón.
■ Adición de una acción stop().
■ Creación de un script que valide el formulario con lógica condicional.
■ Cómo pasar datos de un archivo SWF.

275
22
CAPÍTULO 22
ActionScript: trabajo
con objetos y clases
Las clases son proyectos de objetos en Macromedia Flash Basic 8 y
Macromedia Flash Professional 8. Todos los objetos de Flash tienen una
clase subyacente; por ejemplo, todos los clips de película tienen un método
denominado getURL() y getURL se define en la definición de clase de un
clip de película. Flash contiene muchas clases predefinidas, como la clase
MovieClip, la clase Array, la clase Color y la clase CheckBox. En este
tutorial aprenderá a crear y modificar clases.
Configuración del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . .276
Información sobre clases y tipos de objetos . . . . . . . . . . . . . . . . .276
Creación de un objeto a partir de una clase . . . . . . . . . . . . . . . . . .277
Creación de una clase personalizada . . . . . . . . . . . . . . . . . . . . . . .279
Creación de dos objetos a partir de la clase Product . . . . . . . . . 283
Información sobre la ampliación de las clases existentes . . . . . 284
Ampliación de la clase MovieClip para crear una clase nueva. 285
NOTA
Este tutorial va dirigido a desarrolladores de Flash que estén
familiarizados con los conceptos básicos de Flash y ActionScript.

276 ActionScript: trabajo con objetos y clases
trabajo
En primer lugar, verá los archivos acabados y configurará el espacio de
trabajo para utilizar un diseño óptimo para leer las lecciones.
1. Visualice los archivos acabados.
Esta lección no incluye los archivos de inicio. Puede encontrar los
archivos acabados handson1.fla, handson2.fla, handson3.fla,
Product.as y Drag.as, que son los archivos de ejemplo que creará en esta
lección:
AssetsActionScriptWork with Objects and Classes.
Assets/ActionScript/Work with Objects and Classes.
Información sobre clases y tipos
de objetos
Una clase, que se denomina también tipo de objeto, es como un proyecto.
Un objeto no existe hasta que no se genera, o se crea una instancia, a partir
de una definición de clase. Un objeto es la instancia de una clase.
Las propiedades son las características de un objeto. Por ejemplo, cuando se
alinean clips de película, se cambian las propiedades _x e _y del objeto
MovieClip. Una propiedad es una variable que se anexa a una clase. Una
propiedad puede ser pública, lo que significa que se puede acceder a ella
fuera de la clase, o privada, lo que significa que sólo se puede acceder a ella
dentro de la clase.
Por lo que se refiere a los objetos, un método es un comportamiento o un
procedimiento que puede actuar sobre éstos. Un hipotético método
throw() sobre una pelota conocería el tamaño y el peso de la pelota. El
método conoce el objeto y todas las propiedades que contiene y puede
trabajar en ese objeto.

Creación de un objeto a partir de una clase 277
Creación de un objeto a partir de
una clase
Creará una clase existente con herramientas visuales (la clase TextField) y
código (con la clase Date).
1. Abra un documento nuevo de Flash y cambie el nombre de la capa 1 por
Texto.
2. En la capa Texto, cree un campo de texto dinámico y asígnele el nombre
de instancia currentDate_txt.
3. Cree una capa Acciones.
Con el fotograma 1 de la capa Acciones seleccionado, abra el panel
Acciones.
4. Cree la instancia de un objeto o genérelo a partir de la clase Date y
denomínelo myDate:
var myDate:Date=new Date();
5. Cree una variable denominada currentMonth que sea igual al método
getMonth():
var currentMonth:Number = myDate.getMonth();
6. Determine el valor de currentMonth:
trace (currentMonth);
7. Guarde y compruebe el documento.
Deberá ver un número en el panel Salida que representa el mes.
El método getMonth() muestra el mes actual. El método getMonth()
está indexado a partir de cero, lo que significa que la numeración
empieza en cero en lugar de uno, por lo que el número que se muestra
es uno menos del que se podría prever.
8. Cierre el panel Salida y la ventana del archivo SWF.

Modificación del script
Modificará el script para compensar la indexación a partir de cero.
1. Añada +1 al valor cuando cree currentMonth y compruebe el
documento para asegurarse de que aparece el número de mes previsto.
Esa línea del script debe indicar lo siguiente:
var currentMonth:Number = myDate.getMonth()+1;
2. Incluya un comentario en la sentencia trace:
// trace (currentMonth);
3. Debajo de la sentencia trace, establezca la propiedad autoSize del
cuadro de texto en true:
currentDate_txt.autoSize = true;
4. Utilice la propiedad de texto del cuadro de texto para mostrar la fecha
actual con el formato Hoy es mm/dd/aaaa.
Utilice la variable currentMonth que ya ha creado, más los métodos
getDate() y getFullYear() del objeto Date:
currentDate_txt.text="Today is "+currentMonth+"/"+
myDate.getDate() + "/"+myDate.getFullYear();
5. Verifique que el script tenga este aspecto:
var myDate:Date=new Date();
var currentMonth:Number = myDate.getMonth()+1;
// trace (currentMonth);
currentDate_txt.autoSize = true;
currentDate_txt.text="Today is "+currentMonth+"/"+
myDate.getDate() + "/"+myDate.getFullYear();
La fecha actual debe aparecer en la ventana del archivo SWF.
NOTA
En la carpeta de archivos acabados encontrará un archivo acabado de
ejemplo, handson1.fla, del documento que acaba de crear. Para acceder a
la ruta, consulte “Configuración del espacio de trabajo” en la página 276.

Creación de una clase personalizada 279
Creación de una clase
personalizada
Aunque ActionScript incluye muchas clases de objetos, como la clase
MovieClip y la clase Color, en ocasiones tienen que crearse clases propias
para crear objetos basados en un conjunto concreto de propiedades o
métodos.
Para crear una clase que defina cada uno de los objetos nuevos, cree un
constructor para una clase de objeto personalizada y, a continuación, cree
instancias de objeto nuevas según la nueva clase, como en el ejemplo
siguiente:
function Product (id:Number, prodName:String, price:Number)
{
this.id = id;
this.prodName = prodName;
this.price = price;
}
Para definir correctamente una clase en ActionScript 2.0, todas las clases
deben especificarse dentro de la palabra clave class y todas las variables del
constructor deben declararse fuera de éste.
class Product
{
// declaraciones de variables
var id:Number
var prodName:String
var price:Number
// constructor
function Product (id:Number, prodName:String,
price:Number){
this.id = id;
this.price = price;
}
}
NOTA
El código ActionScript siguiente sólo es un ejemplo. No introduzca el
script en el archivo FLA de la lección.
NOTA

Para crear objetos a partir de esta clase, ahora puede utilizar el código
siguiente:
var cliplessPedal:Product=new Product(1, "Clipless Pedal",
11);
var monkeyBar:Product=new Product(2, "Monkey Bar", 10);
No obstante, en ActionScript 2.0, no se debe acceder de forma directa a las
variables que forman parte de una estructura de clase. Escriba métodos
dentro de la clase que accederá a estas variables de forma directa. Los
métodos distintos deberían obtener y establecer propiedades (conocidos
como métodos “getter” y “setter”). Debe indicar el tipo de datos tanto para
el valor de retorno de un método como para los parámetros que se pasan al
método cuando se realiza una llamada a éste.
Especificación del tipo de datos para los
valores de retorno de métodos
Debe indicar los tipos de datos de los valores que devuelven los métodos
después del nombre del método y la lista de parámetros, como en el
ejemplo siguiente:
public function getProductName() :String
{
return name;
}
Si no se devuelve ningún valor (por ejemplo, se está estableciendo una
propiedad), el tipo de datos es Void:
public function setProductName(productName:String) :Void
{
this.productName=productName;
}
NOTA
NOTA

Creación de una clase personalizada 281
Creación de una clase personalizada
Ahora creará una clase nueva Product con métodos getter y setter y creará
un objeto a partir de la clase Product.
1. Cree un archivo ActionScript seleccionando Archivo > Nuevo > Archivo
ActionScript (no Documento de Flash). Guarde el documento con el
nombre Product.as.
2. Cree un constructor para una clase Product creando una función
denominada Product que asuma los argumentos id, prodName y
description:
description:String)
{}
3. En la función constructora, establezca las propiedades de la clase
Product para que sean iguales a los métodos setter que creará:
setID(id);
setProdName(prodName);
setDescription(description);
4. Rodee la palabra clave class con la función constructora.
Declare cada variable que se utiliza en la clase:
class Product
{
var id:Number;
var prodName:String;
var description:String
description:String)
{
setID(id);
}
}

5. Defina los métodos getter y setter para cada propiedad de la clase, como
en el ejemplo siguiente.
Especifique Void como tipo de retorno de los métodos setter e indique
el tipo de datos devuelto para los métodos getter.
class Product
{
var id:Number;
var prodName:String;
var description:String
description:String) {
setID(id);
}
public function setID (id:Number) :Void
{
this.id = id;
}
public function setProdName (prodName:String) :Void
{
}
public function setDescription (description:String)
:Void
{
this.description = description;
}
public function getID () :Number {
return id;
}
public function getProdName () :String {
return prodName
}
public function getDescription () :String {
return description;
}
}
NOTA
En la carpeta de archivos acabados encontrará un ejemplo del archivo
acabado que ha creado, Product.as. Para acceder a la ruta, consulte
“Configuración del espacio de trabajo” en la página 276.

Creación de dos objetos a partir de la clase Product 283
Creación de dos objetos a partir
de la clase Product
Creará un archivo FLA nuevo y, a continuación, creará dos objetos a partir
de la clase Product.
1. Abra un nuevo documento de Flash y guárdelo en la misma ubicación
donde ha guardado Product.as.
2. En el documento nuevo, seleccione el fotograma 1 en la línea de tiempo.
3. En el panel Acciones, cree dos objetos a partir de la clase Product con los
datos que se muestran en la tabla siguiente (el código ActionScript que
creará aparece después de la tabla).
4. Verifique que haya creado los objetos de la manera siguiente:
var handleBars:Product = new Product (1, "ATB",
"Available in comfort and aero design");
var pedals:Product=new Product(0,"Clipless
Pedals","Excellent cleat engagement");
5. Rastree la propiedad de descripción de pedals:
trace (pedals.getDescription ());
Debe ver la descripción de los pedales en el panel Salida.
Nombre de la
instancia
Datos
pedals id 0
prodName Clipless Pedals
description Excellent cleat engagement
handleBars id 1
prodName ATB
description Available in comfort and aero
design
NOTA
ejemplo, handson2.fla, del documento que acaba de crear. Para acceder
a la ruta, consulte “Configuración del espacio de trabajo” en
la página 276.

Información sobre la ampliación
de las clases existentes
La palabra clave extends en ActionScript 2.0 permite utilizar todos los
métodos y las propiedades de una clase existente en una clase nueva. Por
ejemplo, si deseaba definir una clase denominada Drag que heredase todo
de la clase MovieClip, puede utilizar lo siguiente:
class Drag extends MovieClip
{}
La clase Drag hereda ahora todas las propiedades y los métodos de la clase
MovieClip existente y puede utilizar las propiedades y métodos de
MovieClip en cualquier lugar dentro de la definición de clase, como en el
ejemplo siguiente:
{
// constructor
function Drag ()
{
onPress=doDrag;
onRelease=doDrop;
}
private function doDrag():Void
{
this.startDrag();
}
private function doDrop():Void
{
this.stopDrag();
}
}
NOTA
NOTA
El cuadro de diálogo Convertir en símbolo ahora ofrece un campo de clase
en el que se pueden asociar objetos visuales (como un clip de película)
con cualquier clase que se defina en ActionScript 2.0.

Ampliación de la clase MovieClip para crear una clase nueva 285
Ampliación de la clase MovieClip
para crear una clase nueva
Creará una clase nueva ampliando la clase incorporada MovieClip.
1. Cree un documento de Flash nuevo y asígnele el nombre Shape.fla.
2. Con las herramientas de dibujo, dibuje una forma en el escenario.
Con toda la forma seleccionada, haga clic con el botón derecho del
ratón (Windows) o con la tecla Control presionada (Macintosh) en la
forma y seleccione Convertir en símbolo en el menú contextual.
3. En el cuadro de diálogo Convertir en símbolo, seleccione Clip de
Película como comportamiento y haga clic en Avanzado.
Seleccione Exportar para ActionScript.
4. En el cuadro de texto Nombre, introduzca myShape.
5. En el cuadro de texto Clase de AS 2.0, introduzca Drag.
Haga clic en Aceptar. El clip de película se asociará con la clase Drag
que creará.
6. Con el inspector de propiedades, asigne al clip de película un nombre de
instancia y guarde el archivo FLA.
7. Cree un archivo ActionScript seleccionando Archivo > Nuevo > Archivo
ActionScript (no Documento de Flash). Guarde el documento con el
nombre Drag.as en la misma ubicación donde ha guardado Shape.fla.
8. En el archivo de ActionScript que acaba de crear, cree una nueva clase y
un constructor denominado Drag:
{
function Drag ()
{
onPress=doDrag;
onRelease=doDrop;
}
}
NOTA
ejemplo, handson3.fla, del documento que acaba de crear. Para acceder
a la ruta, consulte “Configuración del espacio de trabajo” en
la página 276.

9. Defina métodos privados en la clase que utilicen los métodos de clip de
película existentes, startDrag() y stopDrag():
{
function Drag()
{
onPress=doDrag;
onRelease=doDrop;
}
private function doDrag():Void
{
this.startDrag();
}
private function doDrop():Void
{
this.stopDrag()
}
}
10. Guarde el archivo de ActionScript.
11. Pruebe el archivo Shape.fla.
Debe poder arrastrar el clip de película.
Resumen
¡Enhorabuena! Ha aprendido a trabajar con objetos y clases en
ActionScript 2.0. En unos minutos ha aprendido a realizar las tareas
siguientes:
■ Crear y utilizar objetos a partir de clases existentes.
■ Creación de una clase personalizada.
■ Crear una propiedad dentro de una clase personalizada.
■ Crear un método dentro de una clase personalizada.
■ Ampliar una clase existente y aprovechar las funciones de herencia.
NOTA
Encontrará un ejemplo del archivo de ActionScript que acaba de crear,
Drag.as, en la carpeta de archivos acabados. Para acceder a la ruta,
consulte “Configuración del espacio de trabajo” en la página 276.

287
23
CAPÍTULO 23
Integración de datos: información
general (sólo en Flash Professional)
En los siguientes tutoriales se describen varias formas de utilizar la
vinculación de datos y los componentes de datos en Macromedia Flash
Professional 8. Muchos tutoriales emplean servicios Web públicos, por lo
que es necesario disponer de conexión a Internet. Además, los tutoriales no
funcionarán en un navegador debido a las restricciones de libre
configuración, sino que lo harán en el entorno de edición de Flash o en
Flash Player.
■ Integración de datos: utilización del servicio Web Macromedia Tips
(sólo en Flash Professional)
■ Integración de datos: utilización de XML para una hoja Timesheet
■ Integración de datos: utilización de XUpdate para actualizar la hoja
Timesheet (sólo en Flash Professional)
Estos tutoriales son modelos de trabajo que muestran cómo se utilizan los
componentes de datos (XMLConnector, WebServices Connector,
RDMBSResolver y XUpdateResolver) con la vinculación de datos en Flash
Professional 8. No están diseñados como aplicaciones de producción.
Si experimenta algún problema descargando o descomprimiendo los
archivos, consulte TechNote 13686 en www.macromedia.com/support/
general/ts/documents/downfiles.htm.
NOTA
Para realizar los tutoriales de timesheet, es preciso descargar el archivo
data.xml.
NOTA
El uso de servicios Web públicos en estos tutoriales no implica que deban
utilizarse para aplicaciones reales. De hecho, Macromedia no recomienda
el uso de servicios Web públicos directamente desde ninguna aplicación
cliente. Para más información, consulte “Aplicaciones y servicios Web” en
el capítulo “Integración de datos” de Utilización de Flash (en Flash,
seleccione Ayuda > Utilización de Flash).

288 Integración de datos: información general (sólo en Flash Professional)

289
24
CAPÍTULO 24
Integración de datos: utilización del
servicio Web Macromedia Tips
En este tutorial utilizará el panel Servicios Web para conectarse a un
servicio Web que empleará para devolver una sugerencia aleatoria acerca del
software de Macromedia. A continuación, utilizará componentes para
configurar una interfaz de usuario sencilla.
Conexión a un servicio Web público . . . . . . . . . . . . . . . . . . . . . . . 290
Creación de una interfaz de usuario y vinculación de los
componentes con el servicio Web . . . . . . . . . . . . . . . . . . . . 292
En este tutorial se utiliza un servicio Web público y, por lo tanto, es preciso
disponer de conexión a Internet.
Si experimenta algún problema descargando o descomprimiendo los
archivos, consulte TechNote 13686 en www.macromedia.com/support/
general/ts/documents/downfiles.htm.
El archivo FLA finalizado de este tutorial se instala con Flash. En la
siguiente lista se proporcionan las rutas de acceso habituales a este
directorio.
NOTA
El uso de un servicio Web público en este tutorial no implica que deba
cliente. Para más información, consulte “Conectividad de datos y
seguridad en Flash Player” en el capítulo “Integración de datos” de
Utilización de Flash (en Flash, seleccione Ayuda > Utilización de Flash). En
un entorno de producción deben utilizarse servicios Web situados en su
propio servidor Web.

290 Integración de datos: utilización del servicio Web Macromedia Tips (sólo en Flash Professional)
AssetsData IntegrationTips
■ En Macintosh: desplácese hasta Disco duro de Macintosh/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data
Integration/Tips
Conexión a un servicio Web
público
Defina un servicio Web en Flash para conectarlo a un servicio Web
público.
1. Cree un nuevo documento de Flash utilizando Flash Professional 8.
Asegúrese de que su equipo está conectado a Internet.
2. Abra el panel Servicios Web (Ventana > Otros paneles > Servicios Web)
y haga clic en Definir servicios Web.
3. En el cuadro de diálogo Definir servicios Web que aparece, haga clic en
Añadir servicio Web (+) y, a continuación, haga clic en la línea resaltada
para editarla.
4. Introduzca la URL http://www.flash-mx.com/mm/tips/
tips.cfc?WSDL y haga clic en Aceptar.

Conexión a un servicio Web público 291
5. En el panel Servicios Web, revise los métodos, parámetros y resultados
del servicio Web Macromedia Tips.
El servicio Web incluye un método llamado getTipByProduct(). Este
método acepta un solo parámetro denominado product. El parámetro
es una cadena que indica al servicio Web el producto de Macromedia
para el que desea obtener una sugerencia. En el siguiente paso vinculará
este parámetro a una instancia de ComboBox de su aplicación.
6. Haga clic con el botón derecho del ratón en el método
getTipByProduct() y seleccione Añadir llamada de método en el
menú contextual.
En el escenario aparece una instancia del componente
WebServiceConnector.
7. En el inspector de propiedades, introduzca el nombre de instancia
tips_wsc.
El componente se configura ahora en el escenario. Es posible colocar el
componente en cualquier lugar dentro o fuera del escenario, ya que no
está visible al ejecutar la aplicación.

Creación de una interfaz de
usuario y vinculación de los
componentes con el servicio
Web
A continuación, se utilizan componentes para crear una sencilla interfaz de
usuario que puede emplearse para seleccionar un producto, hacer clic en un
botón y ver una sugerencia aleatoria sobre el producto. Esta aplicación se
crea vinculando los componentes de la interfaz de usuario del escenario a
los parámetros y los resultados del servicio Web Macromedia Tips.
1. En el panel Componentes, seleccione User Interface > ComboBox.
Arrastre un componente ComboBox al escenario. En el inspector de
propiedades, introduzca el nombre de instancia products_cb.
2. En el panel Componentes, seleccione User Interface > Button. Arrastre
un componente Button al escenario. En el inspector de propiedades,
introduzca el nombre de instancia submit_button y para la propiedad
label, escriba Get Tip, como se indica a continuación:
3. En el panel Componentes, seleccione Componentes User Interface >
TextArea. Arrastre el componente al escenario. En el inspector de
propiedades, introduzca el nombre de instancia tip_ta.
4. En el panel Componentes, seleccione Componentes User Interface >
Label y arrastre un componente Label al escenario. Colóquelo sobre el
componente ComboBox.

Creación de una interfaz de usuario y vinculación de los componentes con el servicio Web 293
5. En el inspector de propiedades, escriba products_lbl en el campo de
nombre de instancia y para la propiedad text, introduzca Select a
Product, como se indica a continuación:
En el inspector de propiedades se muestra el nombre de instancia
products_lbl y el texto “Select a Product”.
6. Arrastre otro componente Label sobre el componente TextArea tip_ta.
En el inspector de propiedades, introduzca el nombre de instancia
tip_lbl y en el campo text introduzca Tips.
Añada ahora una vinculación entre el componente
WebServiceConnector del servicio Web Macromedia Tip y el
componente ComboBox que permita al usuario elegir un producto y
devolver una sugerencia sobre el mismo.

7. Seleccione el componente WebServiceConnector en el escenario. Abra
el Inspector de componentes y seleccione la ficha Vinculaciones. Haga
clic en Añadir vinculación (+). En el cuadro de diálogo Añadir
vinculación, seleccione product:String (bajo params:Object) y haga
clic en Aceptar.

8. En el Inspector de componentes, haga doble clic en el valor vacío del
campo Bound To. En el cuadro de diálogo Vinculado a, seleccione
ComboBox, <products_cb> para la ruta del componente y
value:String para la ubicación del esquema. Haga clic en Aceptar.
Campo Bound To en el Inspector de componentes
Selección de la ruta del componente y la ubicación del esquema en el cuadro
de diálogo Vinculado a
A continuación, vinculará el parámetro results de
WebServiceConnector al componente TextArea del escenario.

9. En el Inspector de componentes, vuelva a hacer clic en Añadir
vinculación (+). En el cuadro de diálogo Añadir vinculación, seleccione
results:String y haga clic en Aceptar. En el Inspector de
componentes, haga doble clic en el valor vacío del campo Bound To, y
en el cuadro de diálogo Vinculado a, seleccione TextArea, <tip_ta>
como la ruta del componente y text:String como la ubicación del
esquema. Haga clic en Aceptar.
Finalmente, utilizará un componente Button y el método trigger()
para activar el servicio. El método trigger se utiliza para intentar
recuperar una sugerencia al hacer clic en el botón.
10. Abra el panel Acciones y añada el siguiente código ActionScript en el
fotograma 1 de la línea de tiempo:
submit_button.onRelease = function(){
tips_wsc.trigger();
};
11. Seguidamente, añada el siguiente código ActionScript detrás del código
del paso 10. El código utiliza la propiedad dataProvider para
configurar los elementos de la instancia ComboBox según el contenido
de la matriz.
products_cb.dataProvider = ["Flash", "Dreamweaver"];
NOTA
Si es necesario, puede utilizar el método setStyle para cambiar el color
del texto de la instancia Label por blanco utilizando
products_lbl.setStyle("color", 0xFFFFFF);

13. Compruebe la aplicación (Control > Probar película). Seleccione Flash
en la instancia ComboBox y haga clic en Get Tip. Los resultados deben
tener un aspecto similar a la imagen siguiente:
14. Seleccione Dreamweaver y vuelva a hacer clic en Get Tip para ver otra
sugerencia.

299
25
CAPÍTULO 25
Integración de datos: utilización de
XML para una hoja Timesheet
En este tutorial aprenderá a crear una aplicación para editar datos de
timesheet. Los datos de timesheet se guardan como XML en una base de
datos XML nativa. El componente XUpdateResolver es la mejor opción
para este tipo de aplicación, ya que genera sentencias XUpdate que pueden
enviarse al servidor para actualizar los datos.
Creación de la interfaz de usuario . . . . . . . . . . . . . . . . . . . . . . . . . 300
Edición de los datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307
disponer de conexión a Internet. Además, el tutorial no funcionará en un
navegador debido a las restricciones de libre configuración, sino que lo hará
en el entorno de edición de Flash o en Flash Player independiente.
NOTA
seguridad en Flash Player” en Utilización de Flash.

300 Integración de datos: utilización de XML para una hoja Timesheet (sólo en Flash Professional)
Para realizar este tutorial necesitará el archivo data.xml incluido en la
carpeta Tutorial Assets. Este archivo se encuentra en las ubicaciones
siguientes:
AssetsData IntegrationUsing XML for a Timesheetdata.xml
Assets/Data Integration/Using XML for a Timesheet/data.xml
Creación de la interfaz de usuario
Comenzará creando una interfaz de usuario que muestra la información del
archivo XML.
Adición de los componentes
XMLConnector y DataSet
En primer lugar, añadirá los componentes encargados de administrar los
datos.
1. Cree un nuevo documento de Flash utilizando Flash Professional 8.
Asegúrese de que su equipo está conectado a Internet.
2. En el panel Componentes, abra la categoría Data y arrastre un
componente XMLConnector al escenario. En el inspector de
propiedades, introduzca el nombre de instancia timeInfo_con.
3. En el Inspector de componentes o en el inspector de propiedades, haga
clic en la ficha Parámetros. Para el parámetro URL, introduzca data.xml
y para el parámetro Direction, seleccione Receive en el menú
emergente.
4. Desde el panel Componentes, arrastre un componente DataSet al
escenario. En el inspector de propiedades, introduzca el nombre de
instancia timeInfo_ds.
NOTA
Para ver una demostración, deberá acceder a los datos XML del disco
duro y mostrar la propiedad DeltaPacket en la pantalla. En un contexto
real, XUpdate se enviaría al servidor para procesarse.

Creación de la interfaz de usuario 301
5. En el escenario, seleccione el componente XMLConnector. En el
Inspector de componentes, haga clic en la ficha Esquema. Seleccione la
propiedad results:XML y, a continuación, haga clic en Importar un
esquema de un archivo XML de muestra, situado en la parte superior
derecha de la ficha Esquema.
6. Desplácese al lugar donde haya guardado el archivo data.xml y
seleccione el archivo.
En la ficha Esquema se muestra ahora la estructura de los datos del
archivo. El nodo row se asigna a una matriz ActionScript de objetos
anónimos porque se repite varias veces en el archivo XML. Cualquier
subnodo o atributo situado directamente bajo el nodo de fila (row) se
considera propiedad del objeto anónimo contenido en la matriz.
Para más información acerca del modo en que Flash convierte
documentos XML en una representación de esquema interna, consulte
“Integración de datos (sólo para Flash Professional)” en Utilización de
Flash.
NOTA
También puede seleccionar Importar esquema XML en el menú de la
barra de título Inspector de componentes.

7. Seleccione el campo Date schema. Su tipo se define en String. Esto se
debe a que la herramienta de edición de Flash no puede determinar que
se trata de un tipo de fecha basado en su valor. Es preciso proporcionar
a Flash información adicional para codificar este valor correctamente.
8. Seleccione el parámetro Data Type para el campo Date schema y
cámbielo a Date. De este modo se indica al componente DataBinding
que utilice este valor como fecha.
Para más información sobre la vinculación de datos y los tipos de datos,
consulte “Manejo de los tipos de datos en la vinculación de datos (sólo
para Flash Professional)” en Utilización de Flash.
NOTA
El componente XMLConnector guarda la información interna como
cadenas. Cuando se realiza una petición de los datos a través del
componente DataBinding, se puede definir cómo convertir los datos de
cadena en los tipos de código ActionScript correctos. Esto se realiza
seleccionando un elemento del panel Árbol de esquema y modificando su
configuración.

9. Seleccione el parámetro encoder del campo Date schema y cámbielo a
Date. Seleccione el parámetro encoder options y elija el valor “MM/
DD/YYYY”. De este modo se indica al componente DataBinding cómo
se representa el valor de cadena en el archivo XML. Con esta
información, el componente DataBinding puede tomar cualquier
cadena en este formato y convertirla correctamente en un objeto de
fecha ActionScript.
Para más información sobre la vinculación de datos y los codificadores,
consulte “Codificadores de esquema” en Utilización de Flash (en Flash,
seleccione Ayuda > Utilización de Flash).
10. Seleccione el campo de esquema @billable.
El tipo de datos del campo se definió automáticamente en Boolean
mediante la herramienta de edición, de modo que se buscan
determinados patrones para averiguar el tipo de un elemento XML. No
obstante, es necesario modificar las opciones del codificador para el
campo. Para los tipos de datos booleanos, las opciones del codificador
especifican cadenas que indican valores verdaderos y falsos.
11. Con el campo de esquema @billable todavía seleccionado, haga doble
clic en el campo Opciones de codificador.
12. En el cuadro de diálogo Codificador booleano que aparece, introduzca
true en el cuadro de texto para cadenas que sean verdaderas y false en el
cuadro de texto para cadenas que sean falsas.
13. Seleccione el campo de esquema @duration.
El tipo de datos del campo se definió automáticamente en Integer. Esto
se debe a que el campo XML de muestra sólo contenía valores de
números enteros para este atributo.

14. Seleccione el valor de Data Type para el campo de esquema @duration
y cámbielo por Number para que no esté limitado a valores enteros.
15. En el inspector de componentes, haga clic en la ficha Vinculaciones.
16. Haga clic en el botón Añadir vinculación.
17. En el cuadro de diálogo Añadir vinculación, seleccione el elemento row:
Array y haga clic en Aceptar.
18. En el Inspector de componentes, seleccione la propiedad Direction y
defínala en Out.
19. Haga doble clic en la propiedad Bound To.
20.En el cuadro de diálogo Vinculado a, haga clic en el componente Data
Set y, después, seleccione la ubicación de esquema dataProvider: Array
y haga clic en Aceptar.
El componente DataBinding copia cada objeto de la matriz de row en
un nuevo registro (objeto de transferencia) del componente DataSet.
Aplica los valores seleccionados a medida que se copian los datos, de
modo que el componente DataSet recibe los campos ActionScript
Date, Boolean y Number para los atributos @date, @billable y
@duration.
A continuación creará campos para el componente DataSet que
coincidan con los del componente XMLConnector.
21. En el escenario, seleccione el componente DataSet. En el Inspector de
componentes, haga clic en la ficha Esquema.
22.Haga clic en Añadir una propiedad de componente (+) e introduzca id
en Field Name e Integer en Data Type.

23.Mediante el mismo método, cree los siguientes campos nuevos:
■ Field Name = billable, Data Type = Boolean
■ Field Name = date, Data Type = Date
■ Field Name = duration, Data Type = Number
■ Field Name = rate, Data Type = Number
24.Seleccione el campo Date que acaba de crear. Seleccione el valor del
codificador y cámbielo por DateToNumber.
25.Con el campo Date todavía seleccionado, haga doble clic en el campo
Formatter del Inspector de componentes y seleccione Date en el menú
emergente.
26.Haga doble clic en el campo Formatter Options del Inspector de
componentes.
27.En el cuadro de diálogo Configuración de formateador de Date que se
muestra, introduzca MM-DD-YYYY en el cuadro de texto Formato.
NOTA
Los nombres de campo deben coincidir exactamente con los nombres de
las propiedades correspondientes del componente XMLConnector
(@date = date, @billable = billable, @duration = duration), incluido el
uso de mayúsculas y minúsculas.
NOTA
El componente DataSet necesita almacenar valores de fecha
internamente en su formato numérico para que puedan clasificarse
correctamente. El codificador DateToNumber convierte una fecha en un
número con independencia del valor definido. Convierte un número en
una fecha siembre que se accede al valor.

Adición de componentes DataGrid y
Button
A continuación, añadirá componentes para visualizar los datos.
1. En el panel Componentes, abra la categoría User Interface y arrastre un
componente DataGrid al escenario.
timeInfo_grd.
3. Sin salir del inspector de propiedades, defina An. en 360.
4. En el Inspector de componentes, haga clic en la ficha Vinculaciones.
6. En el cuadro de diálogo Añadir vinculación, seleccione el elemento
dataProvider: Array y haga clic en Aceptar.
7. En la ficha Vinculaciones, haga clic en la propiedad Bound To.
8. En el cuadro de diálogo Vinculado a, haga clic en el componente Data
Set y, después, seleccione la ubicación de esquema dataProvider: Array
9. En la ficha Vinculaciones, defina propiedad Direction en In.
10. Sin dejar de seleccionar Data Grid, vaya a la ficha Vinculaciones del
Inspector de componentes y haga clic en el botón Añadir vinculación.
11. En el cuadro de diálogo Añadir vinculación, seleccione el elemento
selectedIndex: Number y haga clic en Aceptar.
12. Haga doble clic en la propiedad Bound To.
Set y, después, seleccione la ubicación de esquema selectedIndex:
Number y haga clic en Aceptar.
14. Deje la propiedad Direction definida en In/Out.
15. Arrastre un componente Button hasta el escenario e introduzca
loadData_btn como nombre de instancia en el inspector de
propiedades.
16. En el Inspector de componentes, haga clic en la ficha Parámetros. En el
campo Label, escriba Load Data.
17. Con el botón todavía seleccionado en el escenario, abra el panel
Comportamientos (Ventana > Comportamientos).

Edición de los datos 307
18. Haga clic en Añadir comportamiento (+) y seleccione Datos > Activar
origen de datos. En el cuadro de diálogo Activar origen de datos,
seleccione el componente timeInfo_con y haga clic en Aceptar.
19. Guarde al archivo en la misma carpeta que el archivo data.xml.
20.Ejecute la aplicación y haga clic en Cargar datos.
Los datos XML se recuperan, convierten y cargan en el componente
DataSet. La vinculación entre DataSet y DataGrid permite copiar los
datos en la cuadrícula para visualizarlos.
Edición de los datos
Ahora modificará la aplicación para editar datos mediante el componente
DataGrid.
1. En el escenario, seleccione el componente DataGrid. A continuación,
haga clic en la ficha Parámetros del Inspector de componentes.
2. Defina la propiedad editable en true.
3. Ejecute la aplicación.
Ahora puede editar datos en la cuadrícula.

309
26
CAPÍTULO 26
Integración de datos: utilización de
XUpdate para actualizar la hoja
Timesheet (sólo en Flash Professional)
Requisito previo: “Integración de datos: utilización de XML para una hoja
Timesheet (sólo en Flash Professional)”
Este tutorial comienza donde termina el tutorial “Integración de datos:
utilización de XML para una hoja Timesheet (sólo en Flash Professional)”.
Ahora que el componente DataSet está gestionando los datos, realiza un
seguimiento de los cambios realizados en los datos de DeltaPacket. Es
preciso utilizar un componente resolver para devolver los cambios al
servidor de una forma optimizada. El componente XUpdateResolver es la
mejor opción para actualizar una fuente XML, ya que genera sentencias
XUpdate que pueden enviarse al servidor para actualizar los datos.
En este tutorial, llevará a cabo la siguiente tarea:
Actualización de la timesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
disponer de conexión a Internet. Además, el tutorial no funcionará en un
navegador debido a las restricciones de libre configuración, sino que lo hará
en el entorno de edición de Flash o en Flash Player.
NOTA
seguridad en Flash Player” en Utilización de Flash.

310 Integración de datos: utilización de XUpdate para actualizar la hoja Timesheet (sólo en Flash Professional)
Para realizar este tutorial necesitará el archivo data.xml incluido en la
carpeta Tutorial Assets. Este archivo se encuentra en las ubicaciones
siguientes:
AssetsData IntegrationUsing XML for a Timesheetdata.xml
Assets/Data Integration/Using XML for a Timesheet/data.xml
Actualización de la timesheet
Ahora establecerá las vinculaciones para permitir que la timesheet se
actualice.
1. Comience con el archivo creado en el tutorial “Integración de datos:
utilización de XML para una hoja Timesheet (sólo en Flash
Professional)”.
2. En el panel Componentes, abra la categoría Data y arrastre un
componente XUpdateResolver al escenario.
timeInfo_rs.
4. Haga clic en la ficha Esquema del Inspector de componentes y
seleccione la propiedad del componente deltaPacket del panel Árbol
de esquema.
5. Cambie el valor encoder del componente DeltaPacket por
DataSetDeltaToXUpdateDelta.
Este codificador convierte datos de DeltaPacket en sentencias XPath
que se suministran al componente XUpdateResolver, pero es preciso
proporcionarle información adicional para ello.
NOTA
Para ver una demostración, deberá acceder a los datos XML del disco
duro y mostrar la propiedad DeltaPacket en la pantalla. En un contexto
real, XUpdate se enviaría al servidor para procesarse.

Actualización de la timesheet 311
6. Haga doble clic en la propiedad encoder options. Cuando reciba
solicitud para introducir un valor de la propiedad rowNodeKey, escriba
datapacket/row[@id='?id'].
Esta propiedad identifica el nodo del archivo XML que se tratará como
registro en el juego de datos. También define la combinación de
elementos o atributos que personaliza el nodo de fila de forma
exclusiva, así como el campo de esquema del componente DataSet que
lo representará. Consulte “Actualizaciones enviadas a un origen de
datos externo” en Utilización de Flash (en Flash, seleccione Ayuda >
Utilización de Flash).
En el archivo XML de muestra, el atributo id del nodo datapacket/
row es el identificador exclusivo y se asignará al campo ID schema del
componente DataSet. Esto se define con el siguiente procedimiento:
datapacket/row[@id=’?id’]
7. En el Inspector de componentes, haga clic en la ficha Vinculaciones.
9. En el cuadro de diálogo Añadir vinculación, seleccione la propiedad
deltaPacket y haga clic en Aceptar.
10. En la ficha Vinculaciones del Inspector de componentes, haga doble clic
en la propiedad Bound To.
Set y, seguidamente, seleccione la ubicación de esquema deltaPacket
Esta vinculación copia el componente DeltaPacket en el componente
XUpdateResolver para que pueda manipularse antes de enviarse al
servidor.
12. Arrastre un componente TextArea hasta el escenario e introduzca
deltaText como nombre de instancia en el inspector de propiedades.
13. Sin salir del inspector de propiedades, defina An. en 360.
14. Seleccione el componente y en el Inspector de componentes, haga clic
en la ficha Vinculaciones.
NOTA
Los datos se copian después de llamar al método applyUpdates() del
componente DataSet.

312 Integración de datos: utilización de XUpdate para actualizar la hoja Timesheet (sólo en Flash Professional)
16. En el cuadro de diálogo Añadir vinculación, haga clic en el elemento
text: String y haga clic en Aceptar.
17. En la ficha Vinculaciones, haga doble clic en la propiedad Bound To.
18. En el cuadro de diálogo Vinculado a, haga clic en el componente
XUpdateResolver y, seguidamente, seleccione la ubicación de esquema
xupdatePacket y haga clic en Aceptar.
El paquete de actualización contiene la versión modificada del
DeltaPacket que se enviará al servidor.
19. En el panel Componentes, abra la categoría User Interface y arrastre un
componente Button al escenario.
20.En el inspector de propiedades, introduzca el nombre de instancia
btn_show. En el Inspector de componentes, haga clic en la ficha
Parámetros y cambie la etiqueta a Show Updates.
21. Con el botón seleccionado en el escenario, abra el panel Acciones (F9) e
introduzca el siguiente código:
on (click) {
_parent.timeInfo_ds.applyUpdates();
}
22.Compruebe la aplicación (Control > Probar película). Cargue los datos
y realice un cambio en uno o más campos de una serie de registros.
23.Haga clic en Show Updates. Revise el paquete XML del componente
TextArea.
24.Intente definir el parámetro includeDeltaPacketInfo del
componente XUpdateResolver en true utilizando el Inspector de
componentes.
SUGERENCIA
Es posible copiar los
datos XML en su
editor XML preferido
para leerlos con
mayor facilidad.
NOTA
Se añade información adicional al paquete de actualización. El servidor
puede utilizar esta información para identificar de forma exclusiva esta
operación de actualización. Gracias a esta información, el servidor puede
generar un paquete de resultados que los componentes XUpdateResolver
y DataSet pueden emplear para actualizar los datos cliente con cambios
desde el servidor.

Flash8 tutoriales

Más contenido relacionado

La actualidad más candente (10)

Similar a Flash8 tutoriales (20)

Flash8 tutoriales