PROGRAME Way ieee PROYECTOS CON FLASH MX Kati Romiciia NEN AN bea alManual Avanzado de Flash MX Kali Romiglia ANAYA MB MULTIMEDIA aTodos los nombres propios de programas, sistemas operativos, equipos hardware, etc. que aparecen en este libro son marcas registradas de sus respectivas compafifas u organizaciones. Reservados todos los derechos. El contenido de esta obra estd protegido por la ley, que esta- blece penas de prisién y/o multas, ademds de las correspondientes indemnizaciones por dafios y perjuicios, para quienes reprodujeren, plagiaren, distribuyeren 0 comunicasen ptibli- camente, en todo o en parte, una obra literaria, artistica 0 cientifica, 0 su transformacién, interpretacin o ejecucién artistica fijada en cualquier tipo de soporte 0 comunicada a través de cualquier medio, sin la preceptiva autorizacién. © EDICIONES ANAYA MULTIMEDIA (GRUPO ANAYA, S.A.), 2003 Juan Ignacio Luca de Tena, 15. 28027 Madrid Depésito legal: M. 15.173 - 2003 ISBN: 84-415-1522-0 Printed in Spain Imprime: Artes Gréficas Guemo, S.L. Febrero, 32. 28022 Madrid.Dedicado a mi Protector, ala chica de mi vida, ya mis padres.Agradecimientos Esta obra es fruto de muchas personas, pero principalmente gracias a ti, Gabita, por tu paciencia. Seria imposible para mi hacer esto sin tu com- pafifa y tus cuidados, sabes que eres mi motor e inspiracidn. Gracias a Eugenio, mi editor, siempre dispuesto a solucionar todos los problemas que surgen al emprender un proyecto como éste. Gracias a Raes- pada, Plaxtika, Leo Puppo, Microbians, Avatar, Santiago Ortiz, Kadazuro, Mityorn y tantos otros colegas que hacen de esta vocacién una comuni- dad generosa y mas agradable.Agradecimientos .... Introducci6n.... iA quién va dirigido este libro El contenido del libro... Convenios utilizados en este libro Acerca del CD incluido en este libro... Capitulo 1. Caracteristicas bdsicas de Flash MX .. Introduccién Conceptos iniciales Principales dreas de la interfaz de usuario Escenario...... 30 Inspector de propiedades 31 Caja de herramientas 32 Herramienta Flecha 33 Herramienta Subseleccién .. Herramienta Linea Herramienta Lazo Herramienta Plumaindice Linea de tiempo... Biblioteca y tipos de simbolos.. Paneles ..... Mentis Contextuales Importar ilustraciones e imagenes .. Vectores vs. Mapa de Bits..... Mapas de Bits para importar en Flash Herramienta Texto.. Herramienta Ovalo .... Herramienta Recténgul Herramienta Lépiz.. Herramienta Pincel .... Herramienta Transformaci6n Libre .. Herramienta Bote de Tinta .. Herramienta Cubo de Pintura Herramienta Transformacion de relleno Herramienta Cuentagotas Herramienta Borrado1 Herramientas Mano y Zoom .. Figura o forma Grupos de forma Simbolo grafico Simbolo Clip de Pelicula .. Simbolo botén... Panel Respuestas Panel Alineamiento Paneles Mezclador de color y Muestras de color Panel Info .. Panel Escena Panel Transformar Panel Acciones.... Panel Depurador... Explorador de peliculas Panel Referencia10 indice Capitulo 2. Bases de la programacién con Actionscript .... Qué es Actionscript Qué ventajas da Actionscript a una pelicula Cémo aprender a programar Actionscript Dimensiones de la programacién en Flas! Cémo y dénde aplicar Actionscript El panel de acciones Modo normal... Modo experto ... Accesos de teclado para afiadir elementos al cddigo .. Colores en el cédigo .. Preferencias del panel de acciones Aplicando Acciones..... Acciones en fotogramas Acciones en botones Eventos para un botén.. Acciones en un Clip de Pelicula Eventos para un Clip de Pelicula .. Acciones en archivos externos.... Acciones basicas para controlar la reproduccién Prdctica de controles de reproducci Controlando multiples lineas de tiempo Lineas de tiempo en niveles Carga de peliculas en niveles Descarga de niveles ... Control de peliculas en niveles.. Lineas de Tiempo dentro de una pelicula Posibles formas de controlar otras lineas de tiempo Notacién con puntos With... Controlando Propiedades de Clips con Actionscript. Actionscript para obtener resultados variables Actionscript para disminuir el tamajio de archivo . Actionscript para mejorar la calidad de reproduccién Motivos para animar usando la linea de tiempo .. Motivos para animar usando Actionscript .....Cémo controlar las propiedades de un Clip ... Propiedades disponibles para controlar y modificar un Clip Fjercicio Fjercicio Animaci6n bdsica con Actionscript Animaci6n avanzada con Actionscript.. Posicién relativa al cursor (_xmouse, _ymouse Desaceleracién (caso simple)..... Desaceleracién (posicién final relativa) Desaceleracién (probando otras propiedades, Ejemplo préctico 1: MouseTrail simple Ejemplo préctico 2: Menu desplegable Resumen . Capitulo 3. Variables y Matrices jAlguien puede explicarme qué es una variable’ Cémo mostrar una variable en un campo de tex! Tipos de variable .... Operaciones matemiéticas con variables numéricas Divisién (/ El objeto Math Numero al azar (random).. Raiz cuadrada (sqrt) ... Redondeo hacia abajo (floor) Redondeo hacia arriba (ceil) Ntimero mayor (max) Nuimero menor (min) Potencia (pow)... Manipulacién de cadenas de texto El objeto String . CharAt .. CharCodeAt FromCharCode IndexOf .. 1112 indice Substring ... ToLowerCase ToUpperCase {Qué es una matriz’ Cémo obtener los valores de una matriz Matrices multidimensionales Operaciones con matrices Array join Array.concat 212 Array.pop 212 Array.push .. 213 Array.reverse 214 Array shift 214 Array.slice 214 Array.sort 215 Array.sortOn 216 Array.splice.. 216 Array.toString.. 218 Array.unshift .. 218 Eliminar variables y matrices 219 Resumen .... Capitulo 4. Operadores, bucles y condicionales...... La importancia de las estructuras légicas El condicional If..... Operadores de comparacién Operador !== Operador Operador Operador <= Operador >= Condicional Switch .. Bucle While. Bucle do While Bucle for .. El bucle For InUso de "for in" con objetos .. Resumen ... Capitulo 5. Contenidos en ficheros externos... Ventajas al usar contenido externo .... El contenido en archivos TXT .... Multiples variables dentro de un archivo txt Precarga de ficheros externos.. Precarga mediante el evento Data. Precarga mediante condicionales Carga de Matrices desde un archivo externo . Unicode vs. ASCTL...... Para crear un fichero Unicode o ASCII Para Anular la utilizacién de Unicode en Flash Uso de imdgenes externas .... Carga de archivos SWF externo: Carga de archivos swf.. Sistemas de precarga para archivos SWF Precarga interna basica ...... Precarga simple condicional Precarga condicional con porcentaje Precarga con porcentaje y barra Precarga animada con porcentaje Carga de archivos JPG externos .... Preparacién de un JPG para realizar una precarga externa .. Precarga de archivos JPG externos Resumen ... Capitulo 6. Propiedades de texto con Actionscript... Introduccion... Insertar Campos de texto con Actionscript Eliminar un campo de texto con Actionscript Propiedades de un campo de texto ... Propiedades generales de un campo de texto. Texto (text)... Color del texto (textColor) Tipo de campo dindmico o de introduccién (type) Seleccionable (selectable) ... Visibilidad del borde (border) 1314 indice Color del borde (borderColor)... Visibilidad del fondo (background) Color del fondo (backgroundColor) .. Ocultar el texto como asteriscos (password) Multiples lineas de texto y ajuste automdtico (multiline y wordWrap) ..... Cédigo HTML dentro del campo (html y htmlText) Representar una variable (variable) Maximo de caracteres permitidos (max' Caracteres permitidos dentro del campo (restrict). embedFonts. Propiedades textFormat en un campo de texto Tipografia del campo de texto (font) Tamaiio de fuente (size Color del texto (textColor, Negrita (bold) Itdlica (Italic) Texto subrayado (underline) Hipervinculo (url) .. Ventana de destino (target) Alineacién del texto (align) Margen izquierdo (leftMargin 277 Margen derecho (rightMargin) 278 Sangria izquierda (indent)... 278 Espacio entre lineas (leading) 278 Vifietas (bullet) .. Tabulacién personalizada (tabStops) Tamaifio automético en un campo de texto Eventos de un campo de texto... Al cambiar el contenido (onChanged) Al desplazar el texto (onScroller) .... Al hacer o perder el foco en un campo (onSetFocus y onKillFocus)..... Controlar la tabulacién en campos de texto . Desplazamiento de texto (scroll) . . 284 Desplazamiento de texto basico .. 285 Desplazamiento bdsico continuo . 287 Desplazamiento mejorado continu: . 288 Hojas de estilo externas en Flash (FSS . 290 FSS en titulos y textos ... .291FSS en fondos y objetos Resumen ... Capitulo 7. Funciones predefinidas y personalizadas ........... 295 Introduccién. Qué es una funcién Funciones personalizadas Funciones predefinidas de Flash MX Cronémetro en milisegundos (getTimer Cronémetro basico .. Detectar la versién del plugin (getVersion| Funcién para convertir URL (escape y unescape Resumen ... Capitulo 8. Objetos predefinidos y personalizados Introduccién. Objetos predefinidos en Flash MX... Propiedades del sistema con el objeto System.capabilities Codificadores de Audio Capacidades de accesibil Reproduccién de audio Reproduccién de MP3 Idioma... Fabricante.. Sistema operativo Aspecto de pixeles Colores de pantalla Pixeles por pulgada Resolucién de pantalla .. Version de FlashPlayer .. Codificador de video Tarjeta de sonido Tarjeta de video Deteccién de fecha y hora con el obje Método constructor new() Métodos get... Obtener la fecha local con métodos get Obtener la fecha universal con métodos get Métodos set ... 1516 indice Método toString Reloj digital basico con el objeto Date Calendario con el objeto Date .... Propiedades del cursor con el objeto mouse .. Escuchando las acciones del ratén con addListener .. Ocultando y personalizando el cursor .. Controlar el teclado usando el objeto Key . Utilizacién de "enterFrame” para obtener eventos de teclado Utilizacién de "listener" para obtener eventos de teclado Constantes del objeto Key ... Utilizacién de botones para obtener eventos del teclado Controlando el escenario con el objeto Stage Tamaiio del escenario. Ocultar parte del menti con showMenu Escalar la pelicula al cambiar de tamajio el escenario Controlar la alineacién del contenido de una pelicul: Ejecutando acciones a partir de eventos del Escenario Objetos personalizados en Flash . Crear clases propias y utilizarlas. Resumen ... Capitulo 9. Componentes Introducci6n..... Utilizar componentes de terceros Instalar nuevos componentes Instalando archivos fla Instalando archivos mxp Crear componentes propios .. Planificacién de componentes. Desarrollo de un componente "Precarga’ Planteamiento del componente Precarga .. Fase 1. Creacién del clip base para el componente ... Fase 2. Creacién del componente "Precarga" a partir del Clip .... : Fase 3. Personalizando el panel de configuraciones del componente... Creando instaladores para nuestros componentes .. Resumen ... . 341 . 346indice Capitulo 10. Flash y JavaScript Introduccién Ejecutar JavaScript desde Flash .. Afiadir pagina a favoritos usando Flash y JavaScript Lanzar ventanas "popup" y "fullscreen" desde Flash Enviar pardmetros y ejecutar acciones en Flash desde JavaScript. Resumen... Capitulo 11. Flash con ASP, PHP 0 CGI... Introduccién.... La diferencia entre ASP, PHP y CGI.. Légica de la comunicacién entre Flash y lenguajes de servidor Preparando el ordenador para trabajar con ASP o PHP .. Enviando y recibiendo datos con el objeto LoadVars LoadVars con ficheros de texto.. LoadVars con lenguajes de servidor El archivo ASP .. El archivo PHP El archivo FLA.. Formularios que envian correo usando ASP o PHP Archivo ASP.. El archivo PHP El archivo FLA Administracién basica de contenidos, mediante ASP o PHP generando TXT .. 367 El archivo ASP 368 El archivo PHI 369 El archivo FLA 369 Resume! Capitulo 12. Flash con Bases de Datos Introducci6n..... 372, Qué es una base de datos. 373 Qué base de datos debe utilizar... 374 Programaci6n en Capas........ ‘Cémo se comunica Flash con una base de datos Leer una base de datos desde Flash utilizando ASP El archivo mdb. El archivo asp. 1718 Indice El archivo FLA Modificar una base de datos desde Flash Resumen... Capitulo 13. XML y XMLSocket Introduccién Qué es XML. Método abreviado, y contenido HTML en XML Por qué usar XML con Flash, y no TXT Cémo se comunica Flash con XML Cargar un documento XML .. Mostrar todo el contenido, literalmente Mostrar Parte del contenido, literalmente Movernos entre nodos ... Mostrar el primer nodo hijo Mostrar el tiltimo nodo Mostrar el siguiente nodo. Mostrar el nodo anterior... Comprobar integridad de datos XML Propiedades y métodos del objeto XML Propiedades y métodos de relacién XML.firstChild XML.lastChild XML.childNodes XML.parentNode XML-nextSibling .... XML .previousSibling, Rutas absolutas en xml . Propiedades y métodos de contenido XML.nodeName XML .nodeType XML.nodeValue XML.attributes. Utilizar los datos XML en Ia pelicula Flash El archivo fla ..... El c6digo en detalle Fjecutando la funcidn "mostrarLibro: Enviar datos en formato XML... Crear una estructura XML utilizando el objeto XMLXML.createElement XML.createTextNode XML.attributes.. 414 XML.cloneNode 415 XML.insertBefore 415 XML.appendChil 415 XML.removeNod« Crear una estructura Métodos y propiedades al enviar y recibir datos con XML 417 XML.send ...... 417 XML.sendAndLoad 418 Qué es XMLSocket Aplicaciones multiusuarios con XMLSocket Archivo de prueba para la conexi6n..... Métodos y eventos del objeto XMLSocke! Métodos del objeto XMLSocket XMLSocket.connect XMLSocket.close .. 424 XMLSocket.send .. 424 Eventos del objeto XMLSocket .. 424 XMLSocket.onClose ... 424 XMLSocket.onConnect. 425 XMLSocket.onXML 425 XMLSocket.onData Resumen .. Capitulo 14. Dibujary pintarcon Actionscript Introducci6n.... El objeto Color ... Utilizando el objeto Modificar el color utilizando variables Modificar el color utilizando paletas reales Comportamiento general de la pelicula Controles deslizantes Funci6n pintar Dibujar poligonos utilizando Actionscript . Dibujar lineas con Actionscript Crear un clip de pelicula vacio utilizando Actionscript Definir el estilo de linea y dibujar ... 1920 indice Dibujo bésico inicial... Dibujo basico con curvas .. Curvas interactivas .... Pizarra de dibujo y pintur. Elementos del escenario. Cédigo principal .... Controlar rellenos con Actionscript Control de rellenos simples Control de rellenos degradados .. Resumen... Capitulo 15. Accesibilidad con Flash MX... Introduccién ... Cémo navegan los discapacitados visuales Detectar al usuario no vidente o con problemas visuales Deteccién de lectores de pantalla Deteccidn de resoluciones Navegacion accesible ... Definiendo objetos accesibles en Flash Pelicula o escenario Texto estatico Texto dindmico Introduccién de texto para formularios Imégenes y figuras Graficos... Animaciones Clips de pelicula Botones accesibles .. Comprobar el funcionamiento de un proyecto accesibl Colaboracién con usuarios no videntes .. Resumen... Capitulo 16. Sonido en Flash... Introduccién ... Uso correcto del sonid Uso incorrecto del sonido Preparacién de sonidos ... Importar sonidos en Flash . Aplicar el sonido en animaciones y botones ..indice 24 Afiadir un sonido a un fotograma Ajiadir sonidos a un botén Editar un sonido aplicado . Cambiar o eliminar el sonido de un fotograma Insertar y manipular sonidos con Actionscript Insertar sonidos mediante Actionscript Paso 1: Importar el sonido a la Biblioteca Paso 2: Preparar las propiedades del sonido en la Biblioteca Paso 3: Afiadir el cédigo necesario para ejecutar el sonido Condicional de reproduccién.... Crear una instancia del objeto Sound... Asociar nuestra instancia al sonido que preparamos en la Biblioteca.. Comenzar la reproduccién Modificar el volumen con Actionscript . Control de volumen simple... Accién de botones para modificar el volumen Control de volumen deslizante ... Modificar el balance de un sonido con ActionScript Sonidos MP3 externos .... Cémo cargar y reproducir un archivo MP3 externo Tomar el tiempo de duracién y la posicién de reproduccién.. Mostrando un gréfico de reproduccién . Mostrando el tiempo de reproduccién en minutos Lectura de etiquetas IDS .. Resumen ........ Apéndice. Contenido del CD-ROM ..... Indice alfabético ....Introduccion24 Introducci6n Flash MX es més una tecnologia que una simple aplicacién. Ademés de brindarnos una de las mds avanzadas herramientas de produccién multi- media, nos proporciona la capacidad de complementarse con otras mu- chas aplicaciones y tecnologias que expanden sus posibilidades cubriendo todas las necesidades del desarrollo Web. En pocos ajios, gracias a este maravilloso descubrimiento, Internet ha dejado de ser un conjunto de simples paginas de hipertexto para convertirse en completas aplicacio- nes interactivas y dindmicas. Por otra parte, Flash ha revolucionado el mun- do del arte electrénico, brindando a los artistas la posibilidad de compartir sus obras en un medio mas accesible y cémodo. Como consecuencia de esto, el mundo del disefio Web ha crecido tanto que influye cada dia mas a otros sectores del disefio como la moda, la television y, por supuesto, el disefio grafico. Escribir acerca de la herramienta para el desarrollo Web més exitosa en los uiltimos afios es un privilegio tan grande como la responsabilidad que esto implica. Cada vez que voy a las librerias, 0 busco libros y tutoriales en la Web, me encuentro con una gran brecha entre libros avanzados y bdsicos. El principal motivo por el cual acepté desarrollar este manual es intentar crear un puente entre estos dos extremos, de modo que una per- sona, que recién comienza a usar este programa, pueda alcanzar un nivel avanzado sin necesidad de saber conceptos previos de programacién. Por otra parte, los manuales avanzados normalmente abarcan sélo temas abs- tractos, cuestiones de cédigo y ejemplos muy especificos. Es por ello que he intentado afiadir, entre Iineas, conclusiones y detalles que se obtienen s6lo al usar la herramienta en proyectos reales, para hacer de este ma- nual una obra de capacitacién para el trabajo diario, y no simplemente un libro de programacién. Este manual esta preparado tanto para quienes no conocen Flash, como para quienes tienen ya experiencia. Su estructura permite usarlo como li- bro donde consultar temas especificos, o bien para aprender, paso a paso, de los detalles mas simples a los mds complejos. Cada tema incluye ex- plicaciones simples, con ejemplos practicos y archivos de ejemplo donde podrd encontrar ejercicios y cédigos completamente documentados. Si bien Flash se va renovando constantemente y se van aftadiendo nue- vas posibilidades, este libro intenta abarcar las cuestiones que han sido evaluadas como prioritarias e imprescindibles para desarrollar proyec- tos avanzados. De modo que, a pesar de que este medio es tan cambian- te, aqui podré encontrar lecciones que le van a ser de utilidad hoy y en el futuro.Introducci6én éA quién va dirigido este libro? Este manual va dirigido principalmente a aquellos que buscan respues- tas simples a preguntas complejas. Tanto los principiantes como quienes tienen més experiencia en estos temas necesitan respuestas rdpidas y sim- ples para solucionar nuevas situaciones, descubrir nuevos detalles y tru- cos, o bien, recordar temas olvidados. Quienes recién comienzan podran comprender paulatinamente conceptos de programacién y métodos de trabajo, de manera que encontrarén en esta obra un curso completo de desarrollo Web con Flash MX. Quienes ya utilizan Flash podran utilizar esta obra como manual de consulta practico que incluye archivos de ejem- plos documentados listos para reutilizar. El contenido del libro Como manual avanzado de Flash MX, esta obra pretende abarcar temas importantes para poder desarrollar proyectos completos con Flash, de modo que se dard mayor relieve a los temas relacionados con la progra- macién y la combinacién de herramientas y recursos que a la explicacién de las herramientas bdsicas. Si bien no se necesitan conceptos previos de programacién, es una ventaja para el lector conocer de antemano las he- rramientas y aspectos generales de Flash. A pesar de ello, el primer capi- tulo ha sido dedicado por completo a un repaso extenso de los conceptos y herramientas principales de Flash, para que aquellos que no estén fa- miliarizados con esta version del programa o poseen un leve conocimiento de Flash, podrdn también completar sus conocimientos sobre los aspec- tos mds bdsicos antes de pasar al desarrollo de temas mas avanzados. Cada tema seré desglosado de manera que queden cubiertos la mayor cantidad de detalles posibles, acompafiados de archivos con ejemplos documentados. Ademés de las nociones técnicas, se incluirén conclusio- nes practicas obtenidas de experiencias relacionadas con cada caso. Convenios utilizados en este libro Asi como el contenido, la estructura del libro sigue una ldgica que permiti- r4 al lector ubicarse rapidamente en cada tema y encontrar los contenidos 25Introduccion y respuestas a sus preguntas, usando el sentido comtin. Cada capitulo se introduce con una explicacién donde se plantea la importancia del tema en un panorama general, mostrando ventajas, desventajas y usos practi- cos. A su vez, cada introduccién va seguida de una lista que resume los objetivos del capitulo, y finalmente el tema concluye con un resumen. Para facilitar la identificacién de comandos, mentis y accesos de teclado, cada uno de estos elementos son resaltados siguiendo una serie de carac- teristicas predefinidas. Los botones, herramientas, fichas y combinacio- nes de teclas aparecen en negrita, mientras que los nombres de comandos, cuadros de didlogo, mentis y submentis aparecen con un tipo de letra diferente para facilitar su identificacién. Algunos simbolos especiales también son incorporados para simplificar ciertas expresiones. Por ejemplo, cuando dos comandos deben ser selec- cionados consecutivamente, aparecen separados por el simbolo >, como es el caso del comando Archivo>Guardar. Otro ejemplo de simbolos es al escribir combinaciones de teclas, indican- do con el simbolo - que las teclas deben ser presionadas de forma simul- tdnea, del modo Control-G. Otras ayudas muy importantes son resaltadas con iconos, como apare- cen a continuacién: Advertenci Posibles problemas y fallos de los programas. También se utiliza cuando existen posibles diferencias entre lo que el libro indica y el programa. Truc Consejos, ideas 0 sugerencias que, procedentes en su mayoria de la practica, podrdn facilitarle el trabajo y que sirven para ahorrar tiempo o encontrar utilidades escondidas en las diferentes dreas del programa. Nota: Informaci6n adicional incluida en el texto que puede resultar de utilidad para aclarar detalles importantes.Introducci6n Acerca del CD incluido en este libro Este manual incluye un CD con los archivos correspondientes a cada tema tratado. Siempre que un ejercicio est4 compuesto por mas de un archivo, éstos son agrupados dentro de una carpeta. Cada archivo esta documentado de manera que el cédigo pueda comprenderse y comple- mentar lo que se explica en el ejercicio correspondiente. Dentro del CD encontraré también un documento con un indice temdtico de los archi- vos. Por otra parte, también dispondrd de una versién gratuita de 30 dias de Flash MX, junto a otras aplicaciones mencionadas en el libro, ademés de cuatro capitulos complementarios en formato PDF, tratando los siguientes temas: © Animacién y fisica: Cémo lograr movimientos que simulan anima- ciones reales utilizando Actionscript. Este capitulo incluye ademds ejemplos de cémo realizar videojuegos simples. © Desarrollo de sitios multilingiies: La construccién explicada paso a paso de cémo crear sitios completamente multilingiies, utilizando Flash y XML. © Controles de impresién: Aplicacién real de controles de impresién, con todos los trucos necesarios para poder controlar la calidad y proporciones al imprimir peliculas Flash. © StandAlone Player y aplicaciones: Cémo utilizar Flash para crear CD-ROM compatibles para PC y Mac, aplicaciones con Visual Ba- sic, y software complementario. Dentro de cada capitulo encontraré referencia a ejercicios que han sido afiadidos al CD, tal como en los ejemplos y ejercicios incluidos en el resto del libro. 27Capitulo 1 Caracteristicas basicas de Flash MX30 = Capitulo 1 Introducci6n Si conoce Flash en sus versiones anteriores, éste es un buen momento para comparar las diferencias y mejoras que presenta Flash MX en sus aspectos mas basicos. Si conoce Flash MX, tal vez encuentre algtin deta- Ile nuevo, 0 comience a recordar algunas de las funciones mds bdsicas. Si no conoce Flash, este capitulo no podrd sustituir las lecciones que le brinda el Manual avanzado de Flash MX. El objetivo de este capitulo es so- Jamente recordarle las caracteristicas basicas de Flash MX y mostrarle los principales aspectos de su interfaz. Conceptos iniciales Una pelicula Flash pasa por dos etapas principales: la edicidn y la publi- cacion. Los archivos donde usted dibujar4, disefiar4, crearé animaciones y programard serdn guardados con la extensién ".FLA". En cambio, los archivos que publicaré en la Web serdn los que contengan la extensién ".SWF". Para guardar un archivo editable, que luego podra abrir y reto- car, usar4 el comando Archivo>Guardar. Automaticamente Flash afiadi- 14, al nombre que elija, la extensién ".FLA". Para publicar un archivo SWF, deberd ejecutar el comando Archivo>Exportar pelicula. Si intenta abrir un archivo SWF para editarlo, vera que sdlo podra ver la animacién, pero no editarla. En este capitulo estudiaremos la edicién de un documento FLA, y analizaremos cémo publicar y generar un documento SWF. Principales areas de la interfaz de usuario Flash MX trae consigo un nuevo sistema para organizar las herramientas y distribuir el espacio de trabajo. La mayor parte de las herramientas es- tan contenidas en paneles que podrd ocultar, contraer y agrupar de di- versas formas. $i bien hay pocas herramientas nuevas, muchas han sido mejoradas y reestructuradas para un uso més intuitivo y veloz. Escenario En la mayor parte de los proyectos que desarrolle, el escenario cumple un papel muy importante. En él podré dibujar, pintar y manipular todasCaracteristicas basicas de Flash MX las figuras e imagenes. El tamafio del escenario es exactamente el mismo que tendré su pelicula al publicarla, asi como el color de fondo y otras propiedades, las cuales pueden ser modificadas. También puede cambiar la unidad de medicién empleada, si es que prefiere no usar pixeles. La figura 1.1 muestra el escenario en la interfaz de Flash MX. mm or a Figura 1.1. Escenario de Flash MX Inspector de propiedades En Flash MX el Inspector de propiedades ocupa un lugar imprescindible. En él encontraremos las opciones y propiedades mas importantes de cada herramienta y elemento, y la gran ventaja de un acceso rapido a muchas opciones, incluyendo las propiedades de Ja pelicula. Para ocultar o mostrar el inspector de propiedades: * Ejecute el comando Ventana>Propiedades. * Presione Control-F3, como teclas de método abreviado. Cada vez que selecciona un objeto o herramienta, el inspector de propie- dades cambia su aspecto para mostrarle las opciones adecuadas. Si en ese momento no tiene objetos seleccionados, verd el inspector de propie- dades como muestra la figura 1.2. En este caso, las opciones que muestra el inspector de propiedades perte- necen al escenario y al documento que se esté editando. En primer lugar 3132 Capitulo 1 le muestra el nombre del archivo que esté editando, luego las configura- ciones de tamajfio, donde puede hacer clic para cambiar la unidad de me- dicién, el ancho y el alto del escenario, el color de fondo del mismo, y la velocidad de reproduccién, medida en fotogramas por segundo. Abajo encontraré las opciones de publicacién, que veremos més adelante en este mismo capitulo. Figura 1.2. Propiedades del escenario y documento Otro caso es cuando se seleccionan objetos del escenario. Al seleccionar uno o més objetos, el inspector de propiedades le mostrard que tipo de objeto es, su posicién en el escenario, su tamajio en pixeles, y otras pro- piedades como relleno y trazo. Caja de herramientas En ella encontraré las herramientas de trabajo principales. Puede mante- nerla flotante (como lo muestra la figura 1.3) para moverla a su gusto, 0 bien acoplarla verticalmente en la parte izquierda o derecha de la aplica- cién, dependiendo de su comodidad, como puede ver en la figura 1.4. Tam- bién puede optar por no usarla, si conoce las teclas de método abreviado que corresponden a cada herramienta. Para ocultar o mostrar la caja de herramientas: * Seleccione el comando Ventana>Herramientas. ¢ Presione Control-F2, como teclas de método abreviado. Para pasar la caja de herramientas de modo flotante a modo acoplado y viceversa: * Haga doble clic en el titulo de la caja de herramientas. La Caja de herramientas se divide en cuatro secciones, como puede ver en la figura 1.5. En la parte superior, podrd observar dieciséis herramien- tas, que mencionaremos y explicaremos brevemente. Estas herramientas son las que usar para seleccionar, pintar, transformar o borrar objetos.Caracteristicas basicas de Flash MX Debajo de este primer grupo encontrard las herramientas de visualiza- cién, luego las herramientas basicas de color, y finalmente un grupo muy importante a tener en cuenta: las opciones, o modificadores de herramien- tas. A medida que expliquemos cada herramienta, iremos analizando los modificadores y opciones que mostraré la caja de herramientas. Recuer- de que, como hemos mencionado anteriormente, cada vez que se utiliza una herramienta, el inspector de propiedades también se modifica, para mostrar otras opciones. () att Figura 1.3. Caja de herramientas flotante Herramienta Flecha Esta herramienta es la que utilizard para seleccionar los objetos del esce- nario. Para activarla puede elegir una de las opciones que se describen a continuacién: © Seleccione el icono [R] de la caja de herramientas. ¢ Presione la tecla V, como método abreviado. 3334 = Capitulo 1 Antes de continuar con la siguiente herramienta, es necesario aclarar que hay varias formas de seleccionar objetos con la herramienta flecha. Si usted acaba de dibujar un recténgulo, por ejemplo, notard lo siguiente: Figura 1.4, Caja de herramientas acoplada ¢ Un clic en el centro del recténgulo, seleccionard sdlo el relleno del mismo. * Unclic sobre el contorno del rectangulo seleccionard sélo un lado del contorno o borde del rectangulo, dejando las demés lineas del mismo sin seleccionar. © Doble clic sobre el contorno del rectangulo, seleccionaré todas las li- neas del objeto. © Doble clic en el relleno del rectangulo, seleccionaré no solo el relleno, sino también todas las lineas de la figura. ¢ Arrastrando el cursor en diagonal, verd dibujarse un rectangulo de lineas punteadas. Al soltar el ratén, todos los objetos, o partes de fi- guras que queden dentro del area rectangular serdn seleccionadas. ¢ Al hacer clic sobre un objeto con la tecla Maytis presionada, puede afiadir o quitar elementos a un grupo de objetos seleccionados.Caracteristicas basicas de Flash MX 35 Figura 1.5. Secciones de la caja de herramientas ¢ Con la herramienta Flecha podrd deformar segmentos y trazos. Si apunta con el cursor sobre la esquina de una figura, y la arrastra, po- dr4 mover ese Angulo independientemente del resto del objeto. Si arras- tra el ratén desde el centro de un segmento, lo encorvara. Al seleccionar la herramienta Flecha, podré ver los modificadores en la seccién Opciones de la Caja de herramientas, como muestra la figura 1.6. Figura 1.6. Modificadores de la herramienta Flecha El primer modificador para esta herramienta es el Ajuste a objetos. Con esta opcién activada, los objetos se adhieren a los més cercanos, facilitan- do asi la alineacién de objetos al dibujar. Las opciones que estén debajo son para suavizar o enderezar segmentos del contorno de un objeto, des- pués de seleccionarlos.36 Capitulo 1 Herramienta Subseleccién Como su nombre indica, con esta herramienta puede ir ms alld de selec- cionar un simple trazo. Con ella seleccionaré los puntos que conforman a los poligonos, denominados comtinmente "nodos" o "puntos de anclaje". Estos nodos le permitiran retocar 4ngulos y segmentos especificos en un trazo, una vez dibujados. A pesar de su mejora, cabe aclarar que atin no puede reemplazar a editores de nodos tales como CorelDraw, Macrome- dia Freehand, o Adobe Illustrator. La mejor opcidn, en el momento de crear dibujos complejos, es utilizar programas como los recién menciona- dos, y luego importarlos en Flash, como lo mostraremos més adelante en este capitulo. Para activar la herramienta Subseleccién (o Editor de Nodos) puede ele- gir una de las siguientes opciones: © Haga clic en el icono [k] de la caja de herramientas. © Presione la tecla A, como método abreviado. A continuacién probaremos esta herramienta para modificar un dibujo: 1. Haga clic en la herramienta Rectdngulo [bj de la Caja de herramientas. 2. Arrastre el cursor en el escenario para dibujar un recténgulo. 3. Elija la herramienta Subseleccién [R] de la Caja de herramientas. 4 . Haga clic en el borde del rectangulo. A continuacién aparecen los no- dos, o puntos de anclaje, que en este caso se sittian en los vértices del recténgulo. 5. Para poder mover cualquiera de esos puntos siga una de las siguientes opciones: * Arrastre el nodo manteniendo presionado el botén del ratén. * Haga clic en el nodo elegido, y use las teclas de direccién. 6. Para seleccionar varios nodos simulténeamente, haga clic en los mis- mos, manteniendo presionada la tecla Mayis. 7. Para agregar un nuevo nodo haga clic en uno de los segmentos, usan- do la herramienta pluma [8}- 8. Para quitar un nodo, selecciénelo con la herramienta Subseleccién y luego presione la tecla Supr. 9. Para convertir un segmento recto en curva, debe utilizar la herramienta Flecha.