Tutoriales de Flash

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, diseos, ttulos, palabras o frases mencionados en esta publicacin 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.

Informacin de terceros

Esta gua contiene vnculos a sitios Web de terceros que no estn 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 gua ser a cuenta y riesgo del usuario. Macromedia proporciona estos vnculos nicamente como ayuda y su inclusin no implica que Macromedia se haga responsable del contenido de dichos sitios Web.

La tecnologa de compresin y descompresin de voz tiene licencia de Nellymoser, Inc. (www.nellymoser.com).

La tecnologa de compresin y descompresin de vdeo 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 tecnologa de vdeo 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 pases.

Copyright 2005 Macromedia, Inc. Todos los derechos reservados. No se permite la copia, fotocopia, reproduccin, traduccin ni la conversin en formato electrnico o legible por equipos, ya sea de forma total o parcial de este manual, sin la autorizacin previa por escrito de Macromedia, Inc. No obstante, el propietario o usuario autorizado de una copia vlida del software con la que se proporcion este manual puede imprimir una copia del manual a partir de una versin electrnica 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 propsito, incluidos, sin limitacin, fines comerciales, como la venta de copias de esta documentacin o el suministro de servicios de soporte pagados.

Agradecimientos

Direccin del proyecto: Sheila McGinn

Redaccin: Jay Armstrong, Jen deHaan

Direccin de la edicin: Rosana Francescato

Editor jefe: Lisa Stanziano

Edicin: Evelyn Eldridge, Mark Nigara, Lisa Stanziano, Anne Szabla

Direccin de la produccin: Patrice ONeill, Kristin Conradi, Yuko Yagi

Produccin y diseo 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 versin beta, y a la totalidad de los equipos de diseo y control de calidad de Flash y Flash Player.

Primera edicin: septiembre de 2005

Macromedia, Inc.601 Townsend St.San Francisco, CA 94103, EE. UU.

Internet - Parte 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Adicin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Creacin de un smbolo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Adicin de animacin a una lnea de tiempo . . . . . . . . . . . . . . . . . . . . . 54Creacin de un botn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Contenido

Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

Captulo 1: Tareas bsicas: creacin de un documento . . . . . . . . 13

Visita guiada de la interfaz de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Cambio del fondo y el tamao del escenario . . . . . . . . . . . . . . . . . . . . . . 17Cambio de la vista del escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Visualizacin del panel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Adicin de grficos al escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Adicin de vdeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Visualizacin de las propiedades del objeto. . . . . . . . . . . . . . . . . . . . . . 20Adicin de comportamientos de control de vdeo. . . . . . . . . . . . . . . . . . 21Utilizacin del explorador de pelculas para ver la estructura del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Comprobacin del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Bsqueda de ayuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Captulo 2: Tareas bsicas: creacin de un anuncio para Internet - Parte 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Creacin de un documento nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Cambio de propiedades del documento . . . . . . . . . . . . . . . . . . . . . . . . . . 31Importacin de grficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Presentacin de las capas y la lnea de tiempo . . . . . . . . . . . . . . . . . . . 38Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Captulo 3: Tareas bsicas: creacin de un anuncio para 3

Creacin de acciones sencillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Captulo 4: Tareas bsicas: creacin de un anuncio para Internet - Parte 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69

Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70Anlisis del pblico al que va destinado . . . . . . . . . . . . . . . . . . . . . . . . . . 73Comprobacin de la configuracin de publicacin . . . . . . . . . . . . . . . . 75Insercin de Flash en un sitio de Dreamweaver . . . . . . . . . . . . . . . . . . . 77Utilizacin de edicin conjunta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79Comprobacin de Flash Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Captulo 5: Tareas bsicas: creacin de contenido accesible de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85

Configuracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Cmo conseguir que los lectores de pantalla puedan acceder al documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Cmo proporcionar un ttulo y una descripcin del documento . . . . . 87Cmo proporcionar un ttulo y una descripcin para instancias . . . . . 88Especificacin de que los lectores de pantalla omitan los elementos del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89Cambio de texto esttico por texto dinmico para obtener accesibilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90Control del orden de tabulacin y del orden de lectura . . . . . . . . . . . . . 91Comprobacin del documento con lectores de pantalla . . . . . . . . . . . 94Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

Captulo 6: Tareas bsicas: trabajo con capas . . . . . . . . . . . . . . .95

Configuracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Seleccin de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97Cmo ocultar y mostrar capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Bloqueo de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Adicin de una capa y asignacin de nombre. . . . . . . . . . . . . . . . . . . . . 99Cambio del orden de las capas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99Organizacin de capas en una carpeta. . . . . . . . . . . . . . . . . . . . . . . . . . 100Adicin de una capa de mscara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101Adicin de una capa de guas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Eliminacin de una capa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1034 Contenido

Captulo 7: Tareas bsicas: creacin de una aplicacin. . . . . . . 105

Configuracin del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . .105Copia de campos de introduccin de texto y de texto dinmico . . . .106Asignacin de nombres a los campos de texto . . . . . . . . . . . . . . . . . . . 107Adicin de un componente Button y asignacin de un nombre . . . .108Declaracin de variables y valores de los precios . . . . . . . . . . . . . . . . .109Especificacin de valores de campos de introduccin de texto . . . . 110Creacin de una funcin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111Escritura de un controlador de eventos para el componente . . . . . . . 112Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Captulo 8: Tareas bsicas: utilizacin de herramientas de diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Configuracin del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . . 116Utilizacin de guas para alinear un objeto . . . . . . . . . . . . . . . . . . . . . . . 117Cambio del tamao del escenario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118Cambio del tamao de los objetos para ajustarlo al tamao del escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118Especificacin de las opciones de alineacin de ajuste . . . . . . . . . . . 119Alineacin de un objeto utilizando las guas de alineacin . . . . . . . . .120Alineacin de objetos utilizando el panel Alinear . . . . . . . . . . . . . . . . . 121Ajuste de objetos entre s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121Alineacin de objetos mediante el inspector de propiedades . . . . . .122Alineacin de objetos utilizando la cuadrcula y las teclas de flecha. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124

Captulo 9: Tareas bsicas: creacin de smbolos e instancias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Configuracin del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . . 126Creacin de smbolos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Creacin de un smbolo grfico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Duplicacin y modificacin de una instancia de un smbolo . . . . . . . .128Modificacin de un smbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129Creacin de un smbolo de clip de pelcula . . . . . . . . . . . . . . . . . . . . . . .130Asignacin de un nombre de instancia al clip de pelcula . . . . . . . . . . 131Adicin de un efecto al clip de pelcula . . . . . . . . . . . . . . . . . . . . . . . . . . 131Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Contenido 5

Captulo 10: Tareas bsicas: adicin de animacin y navegacin a botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Configuracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . 134Creacin de un botn a partir de objetos agrupados. . . . . . . . . . . . . . 135Asignacin de un nombre a una instancia de botn . . . . . . . . . . . . . . 135Visualizacin del rea activa activando botones . . . . . . . . . . . . . . . . . 136Cambio del rea activa de un botn . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Alineacin de botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138Creacin de animacin para un estado de botn . . . . . . . . . . . . . . . . . 139Adicin de una accin a un botn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140Adicin de navegacin a un botn. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141Comprobacin del archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Captulo 11: Tareas bsicas: creacin de una presentacin con pantallas (slo Flash Professional) . . . . . . . . . . . . . . . . . . . . 143

Configuracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Visualizacin de la jerarqua de pantallas y las lneas de tiempo de las pantallas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145Visualizacin de las propiedades de pantalla . . . . . . . . . . . . . . . . . . . . 146Adicin de contenido a una diapositiva de presentacin . . . . . . . . . . 147Adicin de comportamientos de navegacin por pantallas a los botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148Adicin de una diapositiva y asignacin de nombre . . . . . . . . . . . . . . 149Seleccin y desplazamiento de diapositivas . . . . . . . . . . . . . . . . . . . . . 150Adicin de contenido a una nueva diapositiva . . . . . . . . . . . . . . . . . . . 150Adicin de comportamientos de transicin . . . . . . . . . . . . . . . . . . . . . . .151Comprobacin de la presentacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Captulo 12: Creacin de grficos: cmo dibujar en Flash. . . . . 153

Seleccin de una herramienta de forma. . . . . . . . . . . . . . . . . . . . . . . . . 155Seleccin de opciones para crear un polgono . . . . . . . . . . . . . . . . . . . 156Cmo dibujar un polgono . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Rotacin de la forma. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Utilizacin de la funcin de silueta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Transformacin de la forma del dibujo . . . . . . . . . . . . . . . . . . . . . . . . . . 158Copia de trazos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Cmo dibujar con la herramienta Lnea . . . . . . . . . . . . . . . . . . . . . . . . . 159Seleccin y adicin de otro color de relleno . . . . . . . . . . . . . . . . . . . . . 159Agrupacin de la forma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1606 Contenido

Creacin de un logotipo con la herramienta Pluma . . . . . . . . . . . . . . .160Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Captulo 13: Creacin de grficos: creacin de una animacin de lnea de tiempo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Creacin de una interpolacin de movimiento. . . . . . . . . . . . . . . . . . . .165Creacin de una interpolacin de forma . . . . . . . . . . . . . . . . . . . . . . . . . 166Cmo copiar y pegar fotogramas clave en una animacin . . . . . . . . . 168Cambio de la velocidad de la animacin . . . . . . . . . . . . . . . . . . . . . . . . .169Comprobacin del archivo SWF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Captulo 14: Creacin de grficos: creacin de animaciones con suavizado (slo en Flash Professional). . . . . . 173

Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189

Captulo 15: Creacin de grficos: aplicacin de degradados. . 191

Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195Aplicacin de un degradado lineal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195Creacin de un degradado radial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198Creacin de una transformacin de degradado con una forma . . . . 200Aplicacin de toques finales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .201Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Captulo 16: Creacin de grficos: aplicacin de filtros grficos y mezclas (slo en Flash Professional) . . . . . . . . . . . . 207

Revisin de la tarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209Aplicacin de filtros y mezclas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Captulo 17: Texto: adicin de texto a un documento . . . . . . . . . 213

Configuracin del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . .214Creacin de un bloque de texto de anchura ampliable . . . . . . . . . . . .215Creacin de un bloque de texto de anchura fija. . . . . . . . . . . . . . . . . . .216Edicin de texto y cambio de atributos de fuente . . . . . . . . . . . . . . . . . 217Seleccin de las fuentes de dispositivo. . . . . . . . . . . . . . . . . . . . . . . . . .218Adicin de un campo de introduccin de texto . . . . . . . . . . . . . . . . . . .218Copia de un campo de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220Contenido 7

Asignacin de nombres de instancia a campos de texto . . . . . . . . . 220Creacin de un campo de texto dinmico . . . . . . . . . . . . . . . . . . . . . . . 221Especificacin de opciones de formato . . . . . . . . . . . . . . . . . . . . . . . . .222Visualizacin de cdigo ActionScript del campo de texto dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222Comprobacin del archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223Revisin ortogrfica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224

Captulo 18: ActionScript: utilizacin del modo de asistente de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Examen del archivo FLA finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227Apertura del documento inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229Adicin de un script a un botn mediante el modo de asistente de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229Adicin de scripts de fotogramas a la lnea de tiempo mediante el modo de asistente de script . . . . . . . . . . . . . . . . . . . . . . . .233Adicin de un script de fotograma al clip de pelcula Title . . . . . . . . . 237Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239

Captulo 19: ActionScript: creacin de scripts . . . . . . . . . . . . . . 241

Configuracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . .242Creacin de una instancia de un smbolo . . . . . . . . . . . . . . . . . . . . . . . .243Asignacin de nombres a instancias de botn . . . . . . . . . . . . . . . . . . 244Inicializacin del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Aplicacin de la sintaxis de ActionScript . . . . . . . . . . . . . . . . . . . . . . . .246Localizacin de la documentacin de referencia de ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247Adicin de comentarios a ActionScript . . . . . . . . . . . . . . . . . . . . . . . . .247Creacin de una funcin para un botn . . . . . . . . . . . . . . . . . . . . . . . . .248Copia y modificacin de una funcin de botn . . . . . . . . . . . . . . . . . . 249Comprobacin de la sintaxis y la aplicacin . . . . . . . . . . . . . . . . . . . . 250Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

Captulo 20: ActionScript: adicin de interactividad . . . . . . . . 253

Configuracin del espacio de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . 254Asignacin de nombres a instancias de botn . . . . . . . . . . . . . . . . . . .255Adicin de una escena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255Desplazamiento entre escenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256Control del documento con una accin stop() . . . . . . . . . . . . . . . . . . .2568 Contenido

Vinculacin de un botn a una escena . . . . . . . . . . . . . . . . . . . . . . . . . 257Adicin de navegacin para volver a la escena 1. . . . . . . . . . . . . . . . . 257Reproduccin de un clip de pelcula. . . . . . . . . . . . . . . . . . . . . . . . . . . . 258Utilizacin de un comportamiento para reproducir un archivo MP3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261Comprobacin del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

Captulo 21: ActionScript: creacin de un formulario con lgica condicional y envo de datos . . . . . . . . . . . . . . . . . . . 263

Configuracin del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . 264Adicin de un campo de introduccin de texto para recopilar datos de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265Adicin de un botn de envo al formulario. . . . . . . . . . . . . . . . . . . . . . 266Adicin de un mensaje de error. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266Adicin de un mensaje de confirmacin . . . . . . . . . . . . . . . . . . . . . . . . 267Adicin de una accin stop() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267Adicin de etiquetas de fotogramas para navegacin . . . . . . . . . . . . 269Adicin de lgica condicional para el botn Enviar . . . . . . . . . . . . . . 270Pasar datos de un archivo SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271Funcin para el botn Intentar de nuevo. . . . . . . . . . . . . . . . . . . . . . . . 272Comprobacin del archivo SWF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

Captulo 22: ActionScript: trabajo con objetos y clases . . . . . 275

Configuracin del espacio de trabajo. . . . . . . . . . . . . . . . . . . . . . . . . . . 276Informacin sobre clases y tipos de objetos. . . . . . . . . . . . . . . . . . . . . 276Creacin de un objeto a partir de una clase . . . . . . . . . . . . . . . . . . . . . 277Creacin de una clase personalizada. . . . . . . . . . . . . . . . . . . . . . . . . . . 279Creacin de dos objetos a partir de la clase Product . . . . . . . . . . . . . 283Informacin sobre la ampliacin de las clases existentes . . . . . . . . . 284Ampliacin de la clase MovieClip para crear una clase nueva . . . . . 285Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Captulo 23: Integracin de datos: informacin general (slo en Flash Professional) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Captulo 24: Integracin de datos: utilizacin del servicio Web Macromedia Tips (slo en Flash Professional) . . . . . . . . . 289

Conexin a un servicio Web pblico . . . . . . . . . . . . . . . . . . . . . . . . . . . 290Creacin de una interfaz de usuario y vinculacin de los componentes con el servicio Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292Contenido 9

Captulo 25: Integracin de datos: utilizacin de XML para una hoja Timesheet (slo en Flash Professional) . . . . . . . . . . . 299

Creacin de la interfaz de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300Edicin de los datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307

Captulo 26: Integracin de datos: utilizacin de XUpdate para actualizar la hoja Timesheet (slo en Flash Professional) 309

Actualizacin de la timesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31010 Contenido

NO

TAFlash, seleccione Ayuda de Flash (Ayuda > Ayuda de Flash).Introduccin

En esta parte de la Ayuda de Flash se incluyen varios tutoriales detallados diseados para ensearle los aspectos bsicos 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 leccin.

Cuando complete estas lecciones prcticas, habr aprendido a utilizar Flash para aadir texto, grficos y animaciones a las aplicaciones de Flash. Asimismo, aprender lo fcil que resulta personalizar la aplicacin de Flash mediante ActionScript y comportamientos.

Las lecciones estn pensadas tanto para usuarios sin experiencia como para diseadores y desarrolladores de nivel intermedio que desean ponerse al da rpidamente.

Cada leccin se centra en una funcin o un tema de diseo especficos de Flash. Para completarlas, calcule entre 10 y 20 minutos en funcin de su experiencia. En estas lecciones, aprender a crear documentos de Flash, escribir cdigo ActionScript, trabajar con vdeo y con comportamientos de control de vdeo, as como aadir componentes de Flash.

Este manual no pretende ser una referencia con informacin detallada sobre todas las funciones de Macromedia Flash. Para obtener informacin detallada sobre la utilizacin de Flash, desde la aplicacin 11

12 Introduccin

Bsqueda de ayuda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Antes de comenzar esta leccin, es recomendable que lea la gua Primeros pasos con Flash para obtener informacin sobre el espacio de trabajo de Flash. Para acceder a esta gua, seleccione Ayuda > Primeros pasos con Flash.1CAPTULO 1

Tareas bsicas: creacin de un documento

En esta leccin va a conocer las posibilidades de Macromedia Flash Basic 8 y Macromedia Flash Professional 8. Ver cmo, en cuestin de minutos, se puede crear un diseo Web convincente donde se combinen comportamientos de control de vdeo, texto, grficos y multimedia.

Puede imprimir este tutorial descargando una versin PDF del mismo de la pgina de documentacin 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

Seleccin de conjuntos de paneles y organizacin de paneles. . 15

Cambio del fondo y el tamao del escenario . . . . . . . . . . . . . . . . . . .17

Cambio de la vista del escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Visualizacin del panel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Adicin de grficos al escenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Adicin de vdeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Visualizacin de las propiedades del objeto . . . . . . . . . . . . . . . . . . 20

Adicin de comportamientos de control de vdeo . . . . . . . . . . . . . 21

Utilizacin del explorador de pelculas para ver la estructura del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Comprobacin del documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2313

Visita guiada de la interfaz de usuarioEn primer lugar, abra el archivo FLA inicial que va a utilizar para completar esta leccin. Cada leccin incluye un archivo inicial y un archivo terminado que muestra cmo debe aparecer el archivo FLA al finalizar las lecciones.

1. Para abrir el archivo inicial, en Flash, seleccione Archivo > Abrir y desplcese hasta el archivo:

En Windows, desplcese hasta unidad de inicio\Archivos de programa\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create a Document y haga doble clic en document_start.fla.

En Macintosh, desplcese 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 edicin de Flash. El documento ya incluye dos capas en la lnea de tiempo. Para ms informacin sobre capas, seleccione Ayuda > Tutoriales de Flash > Conceptos bsicos de Flash > Trabajo con capas. Una de las capas se denomina Guas y contiene elementos que le ayudarn 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 compondrn 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 leccin, recuerde que debe guardar su trabajo con frecuencia.

NO

TA

La carpeta Create a Document contiene las versiones completas de los archivos FLA del tutorial como referencia.14 Tareas bsicas: creacin de un documento

NO

TASeleccin de conjuntos de paneles y organizacin de panelesEl 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 diseo en todas las lecciones de Flash.

Seleccione Ventana > Conjuntos de paneles > Predeterminado.Puede cambiar los paneles de posicin y modificar su tamao, como se indica a continuacin: Para desacoplar un panel, haga clic en la esquina superior izquierda

del panel, en la barra de ttulo, y arrastre el panel hasta otra ubicacin del espacio de trabajo.Si el panel se ajusta a un borde, est acoplado en una ubicacin nueva (o est anclado en la misma ubicacin, si lo ha movido hacia atrs). En caso contrario, el panel no est acoplado.

Para cambiar el tamao de un panel desacoplado, arrastre hacia fuera el borde inferior derecho para agrandar el panel.

Utilizacin de herramientas para crear contenido de FlashEn 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 ms informacin sobre el panel Herramientas, seleccione Ayuda > Tutoriales de Flash > Creacin de grficos: Cmo dibujar en Flash y Ayuda > Tutoriales de Flash > Texto: Adicin de texto a un documento.

1. Haga clic en la herramienta Lpiz 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 ratn, para dibujar una lnea.

Ha creado contenido de Flash. Cuando el documento est terminado, ser digno de admiracin.

Se pueden abrir varios documentos al mismo tiempo y utilizar las fichas de documento, situadas encima del escenario, para navegar por ellas. Visita guiada de la interfaz de usuario 15

Cmo deshacer cambiosFlash puede deshacer una serie de cambios realizados en el documento. Ahora va a deshacer la ilustracin que acaba de crear.

1. Para ver la funcin Deshacer en accin, abra primero el panel Historial (Ventana > Otros paneles > Historial).

La herramienta Lpiz aparece en el panel, puesto que la utilizacin de la herramienta ha sido la ltima accin.

2. Siga uno de estos procedimientos:

Seleccione Edicin > Deshacer Lpiz. Presione las teclas Control+Z (Windows) o Comando+Z

(Macintosh).Los garabatos desaparecen del escenario. En el panel Historial se muestra ahora una herramienta Lpiz atenuada, que indica que se ha ejecutado la accin de deshacer.De forma predeterminada, Flash se define para deshacer 100 cambios realizados por el usuario, en orden inverso de ejecucin. 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.

Visualizacin de la lnea de tiempoJusto encima del escenario se pueden ver la lnea de tiempo y las capas. Puede crear capas y asignarles nombres y, a continuacin, aadir contenido a los fotogramas de las capas para organizar cmo se reproduce el contenido de Flash conforme la cabeza lectora se mueve por los fotogramas.16 Tareas bsicas: creacin de un documento

Mueva el puntero del ratn sobre el rea que separa el escenario de la

lnea de tiempo. Cuando aparezca un selector de cambio de tamao, arrstrelo ligeramente hacia arriba o hacia abajo para cambiar el tamao de la lnea de tiempo segn sea necesario.

La cabeza lectora (lnea del indicador rojo) est en el fotograma 1 de la lnea de tiempo. Los fotogramas clave se detectan mediante crculos pequeos en los fotogramas, que estn rellenos, lo que indica que esos fotogramas disponen de contenido. Se puede aadir 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 tamao del escenarioEl escenario proporciona una vista previa de cmo aparecer el contenido de Flash en su archivo publicado. Va a cambiar el tamao del escenario para acomodar la ilustracin diseada para un escenario ms grande y, a continuacin, va a cambiar el color de fondo del escenario.

1. En el panel Herramientas, haga clic en la herramienta Seleccin.

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

El inspector de propiedades, debajo del escenario, muestra las propiedades del documento si no se ha seleccionado ningn 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 tamao

Cabeza lectora

Fotograma claveCambio del fondo y el tamao del escenario 17

4. Para cambiar el tamao del escenario, haga clic en Tamao en el

inspector de propiedades. En el cuadro de dilogo Propiedades del documento, introduzca 750 para la anchura del escenario y, a continuacin, haga clic en Aceptar.

El escenario pasa a tener una anchura de 750 pxeles.

Cambio de la vista del escenarioLa vista del escenario se puede cambiar sin que afecte al tamao real del escenario del documento.

1. En el cuadro de texto Ver del escenario, sobre el lado derecho del escenario, introduzca 500%. A continuacin, 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 tamao del contenido de Flash publicado.

Visualizacin del panel BibliotecaEl contenido de Flash que se importa o que es un smbolo se almacena en el panel Biblioteca. Para ms informacin sobre los smbolos y las instancias, seleccione Ayuda > Tutoriales de Flash > Tareas bsicas: Creacin de smbolos e instancias.

Para ver el panel Biblioteca, seleccione Ventana > Biblioteca.Ya se han importado los elementos de biblioteca y se han creado los smbolos de los objetos que va a utilizar en esta leccin.

NO

TA

Flash tambin contiene una biblioteca de botones que se pueden utilizar en el documento. Para ver esta biblioteca al final de la leccin, seleccione Ventana > Bibliotecas comunes y seleccione la biblioteca Botones.18 Tareas bsicas: creacin de un documento

Adicin de grficos al escenarioPara aadir elementos de biblioteca al documento, compruebe que est aadiendo el objeto a la capa correcta y, a continuacin, arrastre el elemento desde el panel Biblioteca hasta el escenario.

1. En la lnea de tiempo, haga clic en el nombre de la capa Contenido para seleccionar esa capa. Con la herramienta Seleccin activada, arrastre el clip de pelcula Ttulo, que contiene una imagen de mapa de bits y un grfico vectorial, del panel Biblioteca al escenario y alinelo sobre la barra gris situada en la parte superior del escenario que contiene la palabra Ttulo.

En Flash, se puede trabajar con imgenes de mapas de bits (describen grficos que utilizan pxeles) y tambin con ilustraciones vectoriales (utilizan representacin matemtica para describir la ilustracin). Para ms informacin, consulte About vector and bitmap graphics en el apartado Utilizacin de Flash.

2. Con la capa Content todava seleccionada, arrastre el smbolo de texto del panel Biblioteca al escenario y alinelo con el texto Trio ZX2004 que se muestra como gua. Puede utilizar las teclas de flecha del teclado para desplazar el texto hasta su posicin.

El texto del ttulo es de hecho un grfico creado a partir de texto.

Adicin de vdeoEl panel Biblioteca incluye un archivo de vdeo Flash (FLV) importado. Aadir el vdeo al documento y Flash aadir los fotogramas necesarios para reproducir el vdeo.

Para ms informacin sobre la utilizacin de vdeo en Flash, consulte el Trabajo con vdeo en Utilizacin de Flash.

1. Verifique que la capa Contenido siga seleccionada en la lnea de tiempo. Desde el panel Biblioteca, arrastre el vdeo ggb_movie_for_trio_new hasta la gua de vdeo de color gris oscuro del escenario.

2. Aparece un cuadro de dilogo que indica que Flash aadir 138 fotogramas a la lnea de tiempo para el vdeo. Haga clic en S.

3. Arrastre la cabeza lectora por la lnea de tiempo para ver el vdeo.Adicin de vdeo 19

Visualizacin de las propiedades del objetoDespus de aadir 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 grfico de texto, ya que se utiliza en esta leccin), el inspector de propiedades muestra los valores de fuente, tamao de fuente y formato de prrafo que se pueden ver o cambiar. Si no se selecciona ningn objeto, el inspector de propiedades muestra las propiedades de todo el documento.

1. En el escenario, con la herramienta Seleccin activada, haga clic en el grfico Ttulo.

El inspector de propiedades (Ventana > Propiedades > Propiedades) muestra las especificaciones (altura, anchura y coordenadas del escenario) del clip de pelcula.

2. En el escenario, haga clic en el recuadro de delimitacin del clip de pelcula del vdeo 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.

NO

TA

Una instancia representa la existencia de un smbolo 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 ms informacin sobre cmo asignar nombres a las instancias, consulte el tutorial: ActionScript: creacin de scripts en la pgina 241.20 Tareas bsicas: creacin de un documento

Adicin de comportamientos de control de vdeoLos comportamientos permiten aadir funciones complejas al documento con facilidad, sin necesidad de conocer ActionScript, el lenguaje de creacin de scripts de Flash. Ahora va a aadir comportamientos para controlar el vdeo.

1. En la lnea de tiempo, haga clic en el fotograma 1 de la capa Contenido para seleccionarlo, si todava no est seleccionado.

2. En el escenario, haga clic en la instancia Reproducir clip de pelcula (que se asemeja a un botn de reproduccin) para seleccionarla. En el panel Comportamientos (Ventana > Comportamientos), haga clic en Aadir (+) y seleccione Vdeo incorporado > Reproducir. Para ms informacin sobre los smbolos y las instancias, seleccione Ayuda > Tutoriales de Flash > Tareas bsicas: Creacin de smbolos e instancias.

3. En el cuadro de dilogo Reproducir vdeo, compruebe que Relativo est seleccionado. Seleccione video, que es el nombre de instancia que ha asignado al clip de vdeo, y haga clic en Aceptar.

4. En el escenario, haga clic en la instancia Pausar clip de pelcula para seleccionarla. En el panel Comportamientos, haga clic en Aadir (+) y seleccione Vdeo incorporado > Pausar.

5. En el cuadro de dilogo Pausar vdeo, seleccione de nuevo el clip de pelcula video y haga clic en Aceptar. Adicin de comportamientos de control de vdeo 21

6. En el escenario, haga clic en la instancia Rebobinar clip de pelcula para seleccionarla. En el panel Comportamientos, haga clic en Aadir (+) y seleccione Vdeo incorporado > Rebobinar.

7. En el cuadro de dilogo Rebobinar vdeo, seleccione Vdeo.

8. En el cuadro de texto Especifique el nmero de fotogramas que debe retroceder el vdeo:, introduzca 20.

El cuadro de texto Especifique el nmero de fotogramas que debe retroceder el vdeo: indica cuntos fotogramas debe retroceder la cabeza lectora cuando el usuario hace clic en el botn Rebobinar.

Utilizacin del explorador de pelculas para ver la estructura del documentoEl explorador de pelculas ayuda a organizar, localizar y editar medios. La estructura de rbol jerrquica proporciona informacin sobre la organizacin y el flujo de un documento.

1. Seleccione Ventana > Explorador de pelculas.

Si es necesario, ample el explorador de pelculas para ver la estructura de rbol dentro del panel.Los botones de filtrado del explorador de pelculas muestran u ocultan informacin.

2. Haga clic en el men emergente de la barra de ttulo del explorador de pelculas y seleccione las opciones Mostrar elementos de pelcula y Mostrar definiciones de smbolo, si an no estn seleccionadas.

3. Configure los botones de filtro, en la parte superior del explorador de pelculas, de modo que los nicos que estn seleccionados sean Mostrar botones, clips de pelcula y grficos, Mostrar archivos de comando de accin y Mostrar vdeo, sonidos y mapas de bits.

Si mueve el puntero del ratn sobre un botn, aparece una sugerencia que muestra el nombre del botn.Examine la lista para ver algunos elementos incluidos en el documento y sus relaciones con otros elementos.

NO

TA

Otros comportamientos de control de vdeo permiten avanzar rpidamente, ocultar y mostrar un vdeo.22 Tareas bsicas: creacin de un documento

4. En el panel Explorador de pelculas, expanda Acciones para play a fin de

ver el cdigo ActionScript que Flash ha creado al aadir el comportamiento del control Reproducir vdeo.

5. Para cerrar el explorador de pelculas, haga clic en su cuadro de cierre.

Comprobacin del documentoAl 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 vdeo para ver si el vdeo se detiene, se reproduce y se rebobina como se esperaba.

1. Guarde el documento (Archivo > Guardar) y seleccione Control > Probar pelcula.

El contenido de Flash se reproduce en una ventana de archivo SWF. Aunque .fla es la extensin de los documentos del entorno de edicin, .swf es la extensin 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 edicin.

Bsqueda de ayudaLas lecciones proporcionan una introduccin a Flash y sugieren formas de utilizar las funciones para crear exactamente el tipo de documento deseado. Para obtener informacin completa sobre una funcin, un procedimiento o un proceso descrito en las lecciones, consulte la ficha Ayuda del panel Ayuda (Ayuda > Flash Ayuda).Bsqueda de ayuda 23

ResumenEnhorabuena! Ha creado un documento de Flash que incluye grficos, un vdeo y comportamientos de control de vdeo. En unos minutos ha aprendido a realizar las tareas siguientes:

Visita guiada de la interfaz de usuario Cmo acoplar y desacoplar paneles Cambio del fondo y el tamao del escenario Cambio de la vista del escenario Visualizacin de la biblioteca del documento Adicin de grficos al escenario Adicin de vdeo Visualizacin de las propiedades del objeto Adicin de comportamientos de control de vdeo Utilizacin del explorador de pelculas para ver la estructura del

documento Comprobacin del documento Bsqueda de ayuda

Para ms informacin sobre Flash, contine con otra leccin.24 Tareas bsicas: creacin de un documento

Internet.

Tareas bsicas: creacin de un anuncio para Internet - Parte 2 en la pgina 45: aprender a aadir animaciones, crear un botn y escribir scripts bsicos.

Tareas bsicas: creacin de un anuncio para Internet - Parte 3 en la pgina 69: aprender a publicar el archivo SWF y a insertarlo en un sitio 2CAPTULO 2

Tareas bsicas: creacin de un anuncio para Internet - Parte 1

Macromedia Flash Basic 8 o Macromedia Flash Professional 8 pueden parecer programas muy difciles de aprender. Uno de los motivos de esta aparente complejidad reside en que se puede utilizar para muchas cosas distintas, como la creacin de animaciones de dibujos, reproductores de medios y programas ms 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 ningn conocimiento previo sobre Flash ni animaciones para realizar este tutorial; de hecho, descubrir lo sencillo que es comenzar a utilizar Flash 8 para aadir elementos a las pginas Web.

sta es la primera parte de un tutorial dividido en tres partes que muestra cmo crear un sencillo anuncio animado para Internet en Flash y aadirlo a una pgina Web con Macromedia Dreamweaver. En la primera parte, aprender a crear un archivo y modificar sus parmetros, importar y aadir grficos en el escenario desde la biblioteca y crear capas. En la segunda y la tercera parte, aadir una animacin y crear un botn para abrir una ventana del navegador. Posteriormente, especificar la configuracin de publicacin y aadir el anuncio para Internet en una pgina Web.

Tareas bsicas: creacin de un anuncio para Internet - Parte 1 en la pgina 25: aprender a crear y estructurar la aplicacin del anuncio para 25

Web de Dreamweaver.

No se necesita ningn 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

Creacin de un documento nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . .29

Cambio de propiedades del documento . . . . . . . . . . . . . . . . . . . . . . 31

Importacin de grficos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35

Presentacin de las capas y la lnea de tiempo . . . . . . . . . . . . . . . .38

Comprobacin de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43

El flujo de trabajo del tutorial incluye las siguientes tareas:

Examen del archivo FLA finalizado en la pgina 26 permite visualizar el documento Flash finalizado.

Creacin de un documento nuevo en la pgina 29 muestra cmo 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 pgina 31 muestra cmo cambiar las dimensiones del archivo SWF.

Importacin de grficos en la pgina 35 muestra cmo importar activos en la biblioteca de documentos.

Presentacin de las capas y la lnea de tiempo en la pgina 38 muestra cmo crear y manipular capas en la lnea de tiempo principal.

Comprobacin de la aplicacin en la pgina 43 muestra cmo exportar y comprobar el archivo SWF del documento, lo que le permitir comprobar cunto ha progresado.

Examen del archivo FLA finalizadoMientras examina la versin finalizada de la aplicacin que va a crear, tambin deber fijarse en el espacio de trabajo de Flash.

En esta seccin, llevar a cabo las siguientes tareas:

Apertura del documento de edicin en la pgina 175 Revisin del archivo FLA finalizado en la pgina 28 Cierre del archivo FLA finalizado en la pgina 29

En las secciones posteriores seguir los pasos necesarios para crear su propia aplicacin comenzando desde un archivo FLA totalmente nuevo.26 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

Apertura del archivo FLA finalizadoResulta til analizar el documento de edicin finalizado, que es un archivo FLA, para ver cmo ha diseado el autor la aplicacin. Deber examinar qu tipos de scripts se utilizaron para aadir 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 instalacin de Flash. Para un gran nmero de usuarios, sobre todo del mbito acadmico, esta carpeta es de slo lectura. Antes de realizar el tutorial, debe copiar toda la carpeta de tutorial FlashBanner en la ubicacin de escritura que elija.

En la mayora de los ordenadores, la carpeta de tutorial Flash Banner se encuentra en las siguientes ubicaciones:

En Windows: unidad de inicio\Archivos de programa\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\.

En Macintosh: Disco duro de Macintosh/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.

Copie la carpeta FlashBanner en otra ubicacin 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 edicin de Flash. Examen del archivo FLA finalizado 27

Revisin del archivo FLA finalizadoEn el archivo FLA finalizado, ver la estructura que conforma el archivo SWF finalizado para la primera parte de este tutorial. La aplicacin, 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, aadir grficos, animacin e interactividad al anuncio. Posteriormente, lo insertar en un sitio Web con Dreamweaver. 28 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

Cierre del archivo FLA finalizadoPara cerrar el documento, seleccione Archivo > Cerrar.

Si prefiere mantener el archivo finalizado abierto como referencia mientras trabaja con el archivo del anuncio, cercirese de no editar ni guardar los cambios realizados.

Ahora ya puede empezar a crear su propio archivo de anuncio para Internet en la siguiente seccin, Creacin de un documento nuevo.

Creacin de un documento nuevoPuede 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 creacin de Flash que se utiliza para crear archivos SWF. Los archivos SWF son archivos que pueden colocarse en lnea al insertarlos en una pgina 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 vdeo, sonidos en MP3, animaciones, imgenes, datos, etc. La ventaja de utilizar un archivo SWF y no otros formatos reside en que el complemento de Flash Player est increblemente extendido. Comencemos con la creacin de un anuncio para Internet.

1. Abra la aplicacin de Flash.Creacin de un documento nuevo 29

De forma predeterminada, Flash muestra la pgina de inicio (vase 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 ms tipos de archivos.

De forma predeterminada, Flash muestra la pgina de inicio al abrir la aplicacin. Esta imagen refleja las opciones disponibles en Flash Professional 8.

2. Haga clic en Documento de Flash en la columna Crear nuevo de la pgina de inicio para crear un documento vaco.

3. Seleccione Archivo > Guardar como en el men principal.

NO

TA

Si Flash no muestra la pgina de inicio (es posible que alguien haya desactivado esta funcin si comparte el ordenador con otros usuarios), puede seleccionar Archivo > Nuevo en el men principal para crear un documento nuevo. Asegrese de que la ficha General est activa, seleccione Documento de Flash y haga clic en Aceptar.30 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

4. Dle al archivo el nombre banner.fla, busque o cree un nuevo directorio

NO

TApara 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, despus, incorporarlos en una pgina HTML. Flash Player, herramienta instalada en la mayora de los ordenadores, reproduce los archivos SWF exportados desde Flash.

Una vez guardado el archivo, contine con el siguiente ejercicio, Cambio de propiedades del documento.

Cambio de propiedades del documentoEn este momento tendr delante un lienzo vaco rodeado de varios controles (vase 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 imgenes, botones, texto o animaciones. El escenario y los paneles suelen recibir el nombre de espacio de trabajo de Flash o entorno de edicin. El entorno de Flash est formado por el escenario y distintos paneles, herramientas y la lnea de tiempo situada en la parte superior. Para ms informacin sobre cada una de las secciones del espacio de trabajo, consulte Visita guiada de la interfaz de usuario en la pgina 14.

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.Cambio de propiedades del documento 31

Ver que, alrededor del escenario, hay varios paneles. El panel de la

izquierda se denomina panel Herramientas (vase 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 Seleccin (la flecha negra) para realizar selecciones.

El panel situado en la parte inferior de la aplicacin 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 (vase 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 ms informacin sobre el modo de controlar la velocidad de fotogramas de un documento, consulte Cambio de la velocidad de fotogramas por segundo en la pgina 170.32 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

Si no ha seleccionado ningn objeto o fotograma, el inspector de

NO

TApropiedades permite modificar las propiedades del propio documento.

1. Abra el inspector de propiedades (Ventana > Propiedades > Propiedades) y haga clic en el botn situado junto al texto Tamao para abrir el cuadro de dilogo Propiedades del documento.

Haga clic en el botn del inspector de propiedades para abrir el cuadro de dilogo Propiedades del documento. Una vez en el cuadro de dilogo podr cambiar el tamao y el color del escenario.

El botn refleja las dimensiones actuales del archivo FLA (550 x 400 pxeles). De forma predeterminada, el tamao del escenario de un documento Flash nuevo tiene 550 pxeles de ancho por 400 pxeles de alto. Al hacer clic en Tamao, se abre un cuadro de dilogo 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).

Verifique que no hay ningn fotograma seleccionado. Haga clic en el escenario si no logra ver el botn mencionado en el paso anterior.Cambio de propiedades del documento 33

2. Escriba 160 en el cuadro de texto de la anchura y 600 en el cuadro de

texto de la altura.

Mediante la introduccin de nuevos valores en estos cuadros de texto, lo que se consigue es cambiar el tamao 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 tamao de anuncio estndar. En este tutorial va a crear un rascacielos ancho. Para obtener una lista de los tamaos normalizados de anuncios para Internet, vaya a la pgina 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 edicin, haga clic en Aceptar cuando haya terminado de introducir las nuevas dimensiones.

Una vez de vuelta en el entorno de edicin, observe cmo han cambiado las dimensiones del documento. Tambin 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 dilogo Propiedades del documento. Encontrar toda la informacin relativa a la velocidad de fotogramas en la segunda parte de este tutorial, Tareas bsicas: creacin de un anuncio para Internet - Parte 2 en la pgina 45.

4. Seleccione Archivo > Guardar para guardar el documento antes de continuar con la seccin siguiente (Importacin de grficos).

NO

TA

Tambin puede crear anuncios para Internet a partir de una plantilla de Macromedia seleccionando Archivo > Nuevo en el men principal. Seleccione la ficha Plantillas y, despus, la categora Publicidad.34 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

Importacin de grficosCuando se trabaja con Flash, a menudo se importan activos al documento. Tal vez tenga un logotipo de empresa o un grfico que el diseador le ha suministrado para el trabajo. Puede importar varios activos en Flash, incluidos archivos de sonido, vdeo, imgenes de mapa de bits y otros formatos de grfico (como PNG, JPEG, AI o PSD).

Los grficos importados se guardan en la biblioteca del documento. La biblioteca almacena tanto los activos importados en el documento como los smbolos creados con Flash. Un smbolo es un grfico vectorial, un botn, una fuente, un componente o un clip de pelcula que se crea una vez y se puede volver a utilizar varias veces.

De este modo, no es necesario que dibuje sus propios grficos 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 imgenes 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 dilogo Importar (vase la imagen siguiente), desde el cual puede desplazarse hasta el archivo que desea importar.

Desplcese hasta la carpeta del disco duro en la que se encuentra la imagen que desea importar al documento de Flash.Importacin de grficos 35

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 arrstrela hasta el escenario.

No se preocupe ahora por el lugar exacto en que colocar la imagen en el escenario: ms 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 Seleccin y seleccione la instancia del escenario.

NO

TA

Puede arrastrar los activos desde la biblioteca al escenario varias veces si desea ver varias instancias de la ilustracin. El archivo no aumenta de tamao por el hecho de que haya varias instancias en el escenario. El archivo SWF slo almacena la informacin del smbolo o del activo original de la biblioteca y trata cada instancia como una copia.36 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

Si observa el inspector de propiedades, descubrir que puede modificar

la anchura y la altura de la imagen, as como la posicin 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 (vase la imagen siguiente).

Las coordenadas X e Y coinciden con el punto de registro, que es la esquina superior izquierda de este smbolo de clip de pelcula.

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.Importacin de grficos 37

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 Seleccin, y no modificando las coordenadas en el inspector de propiedades. Utilice el inspector de propiedades cuando necesite definir una posicin especfica para un objeto, tal como hemos hecho en el paso anterior.

8. Seleccione Archivo > Guardar para guardar el documento antes de continuar con la seccin siguiente (Presentacin de las capas y la lnea de tiempo).

Presentacin de las capas y la lnea de tiempoLa lnea de tiempo est situada encima del escenario, dentro del espacio de trabajo de Flash. La lnea de tiempo, que contiene capas y fotogramas, ayuda a organizar los activos del documento y tambin 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 pelculas o los sonidos) que se mide en fotogramas. Se podra decir que las capas son transparencias que se apilan una encima de otra. Cada capa puede contener imgenes, texto o animaciones que se muestran en el escenario. Obtendr ms informacin sobre los fotogramas y la lnea de tiempo en la segunda parte de este tutorial, Tareas bsicas: creacin de un anuncio para Internet - Parte 2 en la pgina 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.

NO

TA

Tambin puede importar archivos de sonido en los archivos FLA. Este procedimiento no se trata en este tutorial, pero puede encontrar ms informacin en el Captulo 12, Trabajo con sonido.38 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

En este ejercicio, bloquear y cambiar el nombre de Capa 1. A menudo

sentir la necesidad de colocar objetos en una posicin concreta del escenario. Para ayudarle a mantener estos objetos en su sitio, Flash permite el bloqueo de las capas para evitar la seleccin accidental de los elementos de una capa y su posible desplazamiento.

En esta seccin, llevar a cabo las siguientes tareas:

Creacin de una capa nueva en la pgina 40 Importacin a una capa en la pgina 411. Seleccione Capa 1 en la lnea 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 eliminacin accidental del escenario. Con ello tambin se evita la adicin involuntaria de otros activos en la capa.

Con la nica capa bloqueada, necesita aadir nuevas capas antes de poder aadir cualquier otro objeto al escenario. No es posible aadir nuevos objetos en una capa bloqueada.

2. Seleccione la herramienta Seleccin 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.Presentacin de las capas y la lnea de tiempo 39

4. Seleccione Archivo > Guardar antes de continuar con el siguiente

ejercicio (Creacin de una capa nueva).

Creacin de una capa nuevaEn prcticamente cualquier proyecto de Flash en el que se utilizan grficos y animaciones importadas, deber crear como mnimo varias capas nuevas. Es preciso separar ciertos elementos en sus propias capas, especialmente cuando se empieza a animar objetos. Tambin se pueden apilar grficos uno encima de otro e incluso crear un efecto de profundidad o de solapamiento con varias capas.

1. Seleccione la capa background en la lnea de tiempo y, a continuacin, haga clic en el botn Insertar capa para crear una capa vaca.

La nueva capa se crear encima de la capa fondo (vase 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 grficos del escenario se apilarn en funcin de las capas creadas en la lnea 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 aadiremos una animacin a esta segunda capa.

NO

TA

Tambin es posible organizar las capas en carpetas de capas. Para ms informacin, consulte Organizacin de capas en una carpeta en la pgina 100.40 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

4. Seleccione Archivo > Guardar antes de continuar con el siguiente

NO

TAejercicio (Importacin a una capa).

Importacin a una capaEn un ejercicio previo, Importacin de grficos, importamos la imagen gnome.png directamente en la biblioteca del documento. Posteriormente, arrastramos la imagen hasta la capa seleccionada del escenario. Tambin 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 lnea 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 Animacin. 2. Seleccione Archivo > Importar > Importar a escenario.

Aparecer el cuadro de dilogo 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 (vase la imagen siguiente) y, despus, aparecer en el escenario.

La imagen se importa en el fotograma de la capa seleccionada en la lnea de tiempo. Obtendr ms informacin sobre la lnea de tiempo y las capas en la segunda parte de este tutorial, Tareas bsicas: creacin de un anuncio para Internet - Parte 2 en la pgina 45.

Si necesita reorganizar las capas, puede utilizar la herramienta Seleccin para seleccionar y arrastrar unas capas encima o debajo de otras en la lnea de tiempo.Presentacin de las capas y la lnea de tiempo 41

4. Abra el panel Biblioteca (Ventana > Biblioteca).La imagen que acaba de importar en el escenario aparece tambin como un activo de la biblioteca. Incluso si se importa un activo directamente en el escenario, Flash siempre lo almacena tambin en la biblioteca.

5. Haga clic en la herramienta Seleccin 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.

6. Seleccione Archivo > Guardar para guardar el documento antes de continuar con la seccin Comprobacin de la aplicacin. 42 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

NO

TAComprobacin de la aplicacinPara 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 cdigo en Flash Player, cmo se reproducirn las animaciones de la lnea de tiempo, comprobar la interactividad con el usuario, etc. Este mtodo es mucho ms rpido que cargar el trabajo en un servidor cada vez que quiera ver cmo se reproduce un archivo SWF.

1. Seleccione Control > Probar pelcula desde el men principal.

Se abrir el entorno de comprobacin y se reproducir el documento en Flash Player. Ahora puede ver la versin del archivo SWF compilado de su archivo FLA. Utilizar el comando Probar pelcula con frecuencia para visualizar el progreso cuando trabaje con archivos FLA.

2. Haga clic en el botn de cierre de la ventana que contiene el archivo SWF para volver al entorno de edicin.

Localice en el disco duro la carpeta en la que guard el archivo banner.fla al principio de este tutorial en Creacin de un documento nuevo. Cuando abra la carpeta, debera ver un archivo adicional llamado banner.swf. Se trata de la versin compilada del archivo banner.fla. Cuando quiera crear una versin finalizada del archivo para poder cargarla, querr llevar a cabo ajustes de publicacin adicionales en Flash antes de compilar el archivo SWF. Estudiaremos estos ajustes en la tercera parte (Tareas bsicas: creacin de un anuncio para Internet - Parte 3 en la pgina 69) de este tutorial.

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 edicin en la pgina 175.Comprobacin de la aplicacin 43

ResumenLe felicitamos por haber finalizado el primer paso para crear un anuncio para Internet en Flash. Hemos utilizado la herramienta de edicin de Flash para crear un documento nuevo, aadir 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 ms conocimientos para poder crear un archivo para Internet en Flash y poder incorporarlo en una pgina HTML utilizando Dreamweaver. En las dos partes siguientes de este tutorial, crear y modificar smbolos, crear una animacin, aadir ActionScript sencillo para un botn que abra una pgina Web y aadir el anuncio en un sitio Web.

Para continuar con la creacin de esta aplicacin, prosiga con la parte siguiente de este tutorial: Tareas bsicas: creacin de un anuncio para Internet - Parte 2 en la pgina 45.44 Tareas bsicas: creacin de un anuncio para Internet - Parte 1

Adicin de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Creacin de un smbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Adicin de animacin a una lnea de tiempo . . . . . . . . . . . . . . . . . . 54

Creacin de un botn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Creacin de acciones sencillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Comprobacin de la aplicacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663CAPTULO 3

Tareas bsicas: creacin de un anuncio para Internet - Parte 2

Bienvenido a la segunda de las tres partes que forman de esta introduccin 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 ms seguro es que ya est preparado para saber ms acerca de Flash. Y eso es bueno, ya que podr crear smbolos, animaciones e incluso escribir ActionScript sencillo para que el anuncio para Internet pueda funcionar en la continuacin de este tutorial. Tras finalizar esta parte, aadir 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).

Vase la introduccin Tareas bsicas: creacin de un anuncio para Internet - Parte 1 en la pgina 25 para consultar la descripcin de las partes 1, 2 y 3 de este tutorial.

Aunque no se necesita ningn conocimiento previo para realizar estos tutoriales, debera realizar la primera parte (Tareas bsicas: creacin de un anuncio para Internet - Parte 1 en la pgina 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 . . . . . . . . . . . . . . . . . . . . . . . . . . 4645

El flujo de trabajo del tutorial incluye las siguientes tareas: Examen del archivo FLA finalizado en la pgina 46 permite visualizar el documento Flash finalizado de la segunda parte.

Adicin de texto en la pgina 49 muestra cmo crear y aplicar formato al texto en un archivo FLA.

Creacin de un smbolo en la pgina 52 muestra cmo crear un smbolo de clip de pelcula al que poder aadir posteriormente una animacin.

Adicin de animacin a una lnea de tiempo en la pgina 54 muestra cmo crear una animacin utilizando la lnea de tiempo principal y las interpolaciones de movimiento.

Creacin de un botn en la pgina 61 muestra cmo crear un botn para aadir interactividad al anuncio.

Creacin de acciones sencillas en la pgina 64 muestra cmo escribir ActionScript sencillo para que funcione el botn.

Comprobacin de la aplicacin en la pgina 66 muestra cmo exportar y comprobar el archivo SWF del documento, lo que le permitir comprobar cunto ha progresado.

Examen del archivo FLA finalizadoMientras examina la versin finalizada de la aplicacin que va a crear, tambin deber fijarse en el espacio de trabajo de Flash.

En esta seccin, llevar a cabo las siguientes tareas:

Apertura del documento de edicin en la pgina 175 Revisin del archivo FLA finalizado en la pgina 48 Cierre del archivo FLA finalizado en la pgina 49

En las secciones posteriores seguir los pasos necesarios para crear su propia aplicacin comenzando desde un archivo FLA totalmente nuevo.46 Tareas bsicas: creacin de un anuncio para Internet - Parte 2

Apertura del archivo FLA finalizadoLos archivos de este tutorial se encuentran en la carpeta Samples and Tutorials de la carpeta de instalacin de Flash. Para un gran nmero de usuarios, sobre todo del mbito acadmico, esta carpeta es de slo lectura. Antes de realizar el tutorial, debe copiar toda la carpeta de tutorial FlashBanner en la ubicacin de escritura que elija. En la primera parte, lo ms probable es que ya haya copiado los archivos de origen de FlashBanner en otra ubicacin del disco duro.

En la mayora de los ordenadores, la carpeta de tutorial Flash Banner se encuentra en las siguientes ubicaciones:

En Windows: unidad de inicio\Archivos de programa\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\.

En Macintosh: Disco duro de Macintosh/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.

Copie la carpeta FlashBanner en otra ubicacin 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/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 edicin de Flash. Examen del archivo FLA finalizado 47

Revisin del archivo FLA finalizadoEn el archivo FLA finalizado, ver la estructura que conforma el archivo SWF finalizado para la segunda parte de este tutorial. La aplicacin, 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.48 Tareas bsicas: creacin de un anuncio para Internet - Parte 2

Este archivo contiene una animacin en un clip de pelcula, incluye

tambin texto, un botn invisible y los activos que import en la primera parte del tutorial.

La instancia del clip de pelcula contiene una instancia grfica que se animar.

Los campos de texto contienen texto esttico y con estilos que se mostrar en el escenario.

El botn 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 grficos incluyen una imagen de fondo de mapa de bits (el gnomo) y el grfico de estrella que animaremos en el siguiente ejercicio.

Cuando haya terminado la tercera parte de este tutorial, aadir grficos, animacin e interactividad al anuncio. Posteriormente, lo insertar en un sitio Web con Dreamweaver.

Cierre del archivo FLA finalizadoPara cerrar el documento, seleccione Archivo > Cerrar.

Si prefiere mantener el archivo finalizado abierto como referencia mientras trabaja con el archivo del anuncio, cercirese de no editar ni guardar los cambios realizados.

Ahora ya puede empezar a crear su propio archivo de anuncio para Internet en la siguiente seccin, Adicin de texto.

Adicin de textoAhora aadiremos algn texto adicional al anuncio como elemento decorativo. Puede aadir varios tipos de texto en un archivo Flash: texto esttico, texto dinmico o texto de entrada. El texto esttico resulta til si necesita aadir texto decorativo en el escenario o cualquier otro texto que no requiera modificaciones y ni cargas desde una fuente externa. Utilice texto dinmico 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 algn elemento del archivo SWF, etc. Adicin de texto 49

Puede aadir cualquiera de estos tipos de texto utilizando la herramienta

Texto. En este ejercicio, aadiremos texto esttico al escenario como elemento decorativo. Para aadir texto esttico, siga los pasos que se indican a continuacin:

Abra el archivo banner.fla que cre en la primera parte de este tutorial y cmbiele el nombre a banner2.fla.

1. Seleccione Insertar > Lnea 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 botn 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).

5. Abra el inspector de propiedades (Ventana > Propiedades > Propiedades) y verifique que en el men emergente Tipo de texto se muestra Texto esttico.

6. Cambie la fuente del texto segn 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 opcin Texto de mapa de bits (sin suavizado) en el men emergente Mtodo de representacin de fuentes.

Las opciones de suavizado favorecen la representacin ntida del texto en las aplicaciones, pero el efecto no es bueno en textos de tamao ms grande. Dado que va a crear texto de tamao grande para el anuncio, deber utilizar texto de mapa de bits que se muestre claramente al crear texto grande.

NO

TA

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 utilcelo para empezar este tutorial.50 Tareas bsicas: creacin de un anuncio para Internet - Parte 2

8. Cambie el tamao de la fuente a 20 puntos desde el men emergente Tamao de fuente.

A continuacin, deber cambiar el tamao de la fuente para que el texto se ajuste en el escenario.

Cambie la configuracin del texto en el inspector de propiedades.

Cuando haya terminado, el texto deber tener un aspecto similar de tamao y posicin al texto de la imagen siguiente.

Aada texto esttico 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 aadi 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 tamao de fuente para que el texto sea grande pero quepa en el escenario.

12. Repita los pasos 9 al 11 para aadir la frase Es un gnomo? debajo de las dos lneas previas de texto. Cuando haya terminado, el anuncio debera 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 opcin En escenario del panel Alinear y, seguidamente, haga clic en Alinear horizontalmente con respecto al centro. (Pase el puntero del ratn sobre los distintos botones del men para saber a qu corresponde cada uno.) Adicin de texto 51

14. Seleccione Archivo > Guardar para guardar los avances antes de continuar.

Una vez guardado el archivo, contine con el siguiente ejercicio, Creacin de un smbolo.

Creacin de un smboloUn smbolo es un objeto creado en Flash. Como ya descubrimos en la primera parte, un smbolo puede ser un grfico, un botn o un clip de pelcula y es posible reutilizarlo en el documento FLA actual y en otros archivos FLA. Los smbolos creados se aaden automticamente a la biblioteca del documento (Ventana > Biblioteca), por lo que es posible utilizarlo varias veces en un mismo documento.

Al aadir una animacin, siempre debe animar los smbolos en Flash, no animar grficos en bruto (grficos creados por usted) o activos en bruto importados (por ejemplo, un archivo PNG). Por ejemplo, si dibuja un crculo utilizando la herramienta valo en Flash, debera convertir el grfico de crculo en un clip de pelcula para poder animarlo. De esta forma se reduce el tamao del archivo SWF y se facilita la creacin de la animacin en Flash.

En el siguiente ejercicio crear un smbolo de clip de pelcula. En ejercicios posteriores estudiaremos cmo animarlo.

1. En el archivo banner2.fla, seleccione la imagen star.png (importada en la primera parte) y seleccione Modificar > Convertir en smbolo en el men principal.

Se abrir el cuadro de dilogo Convertir en smbolo (vase la imagen siguiente), donde es posible dar un nombre al smbolo y seleccionar qu tipo de smbolo quiere que sea.

2. Escriba nase a nosotros en el cuadro de texto Nombre (vase la imagen siguiente).

Tras crear el smbolo, ver cmo aparece en el panel Biblioteca el nombre que le ha dado. Tambin ver un icono de clip de pelcula junto al nombre del smbolo.

NO

TA

Si desea utilizar