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.Caracteristicas basicas de Flash MX 10. Para convertir un segmento curvo en recto, active la herramienta Fle- cha, seleccione el segmento que desea cambiar con un clic, y luego haga clic en el modificador para enderezar curvas, que encontraré en la parte inferior de la Caja de herramientas, junto con los demas mo- dificadores de la herramienta Flecha. Truco: Siha seleccionado un nodo, manteniendo presionada la teclaMa- yiis, éste se va a desplazar a mayor distancia al moverlo con las teclas de direccién. Herramienta Linea Obviamente, esta herramienta le serd uitil para trazar lineas rectas. La ven- taja frente a la pluma consiste en su previsualizacién, es decir, le muestra cémo quedaré la linea mientras la dibuja, aun antes de soltar el botén del ratén. Para dibujar lineas con esta herramienta siga los pasos que se indi- can a continuacién: © Seleccione el icon de la Caja de herramientas. También puede ac- tivar esta herramienta, presionando la tecla N. ¢ Haga clic en el escenario y, al arrastrar, podrd ver como se traza la linea mientras mueve el cursor. Al soltar el clic, fijard la linea. © Si desea ajustar el angulo de la linea a 45 grados, mantenga presiona- da la tecla Maydis mientras arrastra el cursor. Nota: Si dos lineas trazadas se cruzan, la interseccién cortard estas li- neas en cuatro segmentos que podrin ser modificados de forma independiente. Herramienta Lazo Otro modo de seleccionar es con esta herramienta, ya que permite seleccio- nar objetos, o parte de los mismos, dentro de dreas irregulares. Como se menciona en la herramienta Flecha, se pueden crear dreas de seleccién, donde todo lo que éstas abarcan , es automaticamente seleccionado. Con el Lazo, las 4reas pueden ser irregulares, como se aprecia en la figura 1.7. 3738 Capitulo 1 Figura 1.7. Areas de seleccién irregular con la herramienta Lazo Para crear un 4rea de seleccién con esta herramienta: 1. 2 Cree varias formas con la herramienta Rectdngulo, como lo hizo en el ejercicio anterior. Seleccione el icono [J de la Caja de herramientas. También puede ac- tivar esta herramienta presionando L, su tecla de método abreviado. . Dibuje una forma irregular, arrastrando el ratn sobre los objetos del escenario. Al soltarlo, verd que las porciones de los recténgulos, que se sittien dentro del 4rea dibujada con el lazo, quedan seleccionadas, tanto lineas como rellenos. Si mantiene la tecla Alt presionada mientras dibuja con el lazo, podré trazar poligonos de lineas rectas haciendo clic en diferentes partes del escenario. Podra ver los modificadores de la herramienta Lazo haciendo clic en el icono [fp], cuando en la seccién Opciones de la Caja de herramientas, apa- rezcan nuevos iconos. Utilizard la varita magica [KJ para seleccionar dreas de color, en un mapa de bits. Siga los pasos descritos a continuaci6n, para probar la varita magica: 1. Ejecute el comando Archivo>Importar. Seleccione algtin mapa de bits de su ordenador, ya sea un archivo jpg, bmp, dib, o gif, y presione el botén Abrir. . Ahora la imagen elegida est en el escenario. Con la herramienta Fle- cha, seleccione el mapa de bits con un clic. . Una vez seleccionado el mapa de bits, ejecute el comando Separar, del ment Modificar.Caracteristicas basicas de Flash MX 4. Ahora seleccione la herramienta Lazo [P} y elija la Varita magica que aparece debajo. 5. Sihace clic en la imagen, seleccionaré areas de color. Con la herramien- ta Propiedades de varita magica podrd cambiar la tolerancia de color y el suavizado de los bordes. Modo poligono [Jes otro de los modificadores para la herramienta Lazo. Con él puede crear dreas de seleccién irregular, pero con lineas rectas. Herramienta Pluma Con esta herramienta puede crear poligonos, lineas curvas y trazos contro- lados. Para activar la herramienta Pluma, puede elegir una de las siguien- tes opciones: © Haga clic en el icono [¥] de la Caja de herramientas. ¢ Presione la tecla de método abreviado P. Para dibujar lineas rectas, haga clic en distintos lugares del escenario. Para dibujar lfneas curvas, mantenga presionado el ratén cada vez que agre- gue un punto, y luego arrdstrelo para modificar la fuerza de pendiente pa- ra cada curva. Si selecciona cualquier objeto, con la pluma podré agregar © quitar puntos (nodos) al mismo, o bien convertir las curvas en ngulos, y viceversa. Herramienta Texto Para afiadir cualquier tipo de texto al escenario puede usar esta herramien- ta, que al trabajar le va a brindar muchas opciones. La mayor parte de las opciones de la herramienta Texto estén en el Inspector de propiedades. Al elegir la herramienta Texto, verd en el inspector las opciones que se aprecian en la figura 1.8. Para seleccionar la herramienta Texto elija una de las siguientes opciones: ¢ Haga clic en el icono le la Caja de herramientas. ¢ Presione la tecla de método abreviado T. A continuacién, para crear un campo de texto, haga clic en el escenario. Aparecerd un 4rea (a la que llamaremos Campo de Texto) donde podra escribir el texto que necesite. Como puede observar en la figura 1.8, el inspector de propiedades se ha adaptado para que pueda afiadir distintos tipos de texto, y modificar sus 3940 Capitulo 1 propiedades. Lo primero que encontrard entre estas propiedades, es la opcién Texto estdtico. Si despliega ese pequefio ment, encontraré que también puede elegir Texto dindmico e Introduccién de Texto. Es muy importante que use estas opciones correctamente, recordando qué signi- fican y para qué se utilizan. Notar4 ademas, al elegir alguna de ellas, que el Inspector de propiedades cambiar4 nuevamente sus opciones.El Texto estdtico se utiliza para crear titulos o pdrrafos como si fueran graficos, para animaciones o bien para un simple texto que no se podré modificar una vez publicada la pelicula. Las opciones disponibles para este tipo de texto son: — gra oe E ee ei eee] Figura 1.8. Propiedades de la herramienta Texto © Tipo de fuente, tamaio, color y estilo (negrita y cursiva). © Direccién del texto, ya sea horizontal, o vertical. Esta opcién no es muy conocida ni utilizada, pero es muy titil en casos especificos ya que alinea el texto verticalmente. Es el pequefio icono[&] que encontra- r4 junto a los iconos de negrita y cursiva. * Justificacién del texto. De elegir la opcin para escribir texto vertical, tal vez se sorprenda de encontrar la pequefia pero grata opcién de justificar el texto verticalmente. © Debajo del tipo de fuente, encontrard la opcidn para separar las letras entre si, por medio del Espaciado entre caracteres [i]. © Posicién del cardcter, le brinda la posibilidad de escribir caracteres en superindice o subindice. © El botén Formato contiene opciones de sangria, espacio interlineal y méargenes. © Si desea que el texto estatico pueda ser seleccionado por el usuario, una vez publicada la pelicula, presione el icono [iy ¢ La casilla Usar fuentes de dispositivo se utiliza con dos fines: el pri- mero es para visualizar mejor aquellos textos en tamafio pequefio. Al publicar un texto estatico, Flash genera un suavizado (al que Ilama- mos Antialias) para evitar la aspereza de los pixeles en los bordes. Sin embargo, esto dificulta la lectura cuando se emplean textos pequefios.Caracteristicas basicas de Flash MX Al usar fuentes de dispositivo, se elimina el suavizado, y de este modo puede resolverse el problema. El segundo motivo es que, cuando se publica un texto estdtico, Flash exporta la fuente que se haya emplea- do, para que los usuarios que no tengan la misma tipografia puedan verla (éste es el caso de las fuentes que no todos los ordenadores tie- nen incorporadas). Al exportar estas fuentes, se incrementa el peso de la pelicula publicada. Usar fuentes de dispositivo significa que Flash buscaré la fuente en el ordenador de quien vea la pelicula publicada, y por lo tanto no ser incorporada en la publicacién. Este método sdlo es itil si se utilizan tipografias como Arial, Verdana, Times y otras, que normalmente estén instaladas en cualquier ordenador. Nunca es recomendable usar este método si se emplean tipografias que no per- tenezcan al grupo anterior. De no encontrarlas en el usuario, Flash no podré mostrar el contenido del texto estdtico. * Laopcién Vinculo de URL es para afiadir hipervinculos en medio del texto estdtico, de modo que, al hacer clic en esa porcidn de texto, el navegador ejecute un enlace a otra pagina. Con esta herramienta po- demos llamar otras paginas html, o bien ejecutar funciones dentro de Flash. Si selecciona una porcién del texto que ha escrito, verd como este campo se activa para que pueda escribir el URL. A su vez, cuan- do el campo URL esté completo, puede decidir el Destino, es decir, si el hipervinculo se abrird en la misma o en otra ventana del navegador. La opcién Texto Dindmico permite que el contenido de la pelicula se ac- tualice o modifique dindmicamente una vez que la pelicula ha sido pu- blicada, ya sea por medio de programacién, o desde medios externos a Flash, como es el caso de XML, ficheros de texto, bases de datos, etc. Tam- bién puede usarlo para mostrar el contenido que resulte de cdlculos mate- miaticos, u otros textos que varien por medio de Actionscript. Como podra observar al crear un campo de texto dindmico, las opciones del Inspector de propiedades han cambiado y, ademas de las anteriormente enumera- das, encontraré las siguientes opciones: © Tipo de Linea es la opcién que le permite al texto ajustarse al campo que lo contiene. Linea tinica es para campos de texto pequefios, que no necesitan varias lineas. Multilinea hace que el texto se adapte auto- maticamente al ancho del campo que lo contiene, de manera que si el ancho de una frase supera al del campo de texto, se cortaré ocupando la siguiente linea, en orden descendente. Multilinea sin ajuste, le per- mite usar varias frases en un mismo campo de texto, pero si el ancho a4Capitulo 1 de la frase supera al del campo, esta no se cortard, de modo que per- manecerén ocultas todas las palabras sobrantes. * Generar texto como HTML[s] |e permite agregar etiquetas html como negrita, que al publicarse mostrarén el resultado correspon- diente. Esta opcién es muy util al usar texto y contenidos externos, como mencionamos anteriormente. Mas adelante estudiaremos las po- sibilidades que nos brinda un campo de texto dindmico con propieda- des HTML. ¢ La opcién Mostrar borde alrededor del texto [i] no es muy ventajosa estéticamente hablando, pero es util para crear rpidamente campos de texto para formularios, ya que dibuja un borde perfecto del mismo tamajio que el campo de texto. Las opciones restantes, como nombre de instancia, y variable, serdn estu- diadas en capitulos posteriores. Puede utilizar la opcién Introduccién de texto cuando desee que el usua- rio pueda ingresar datos, escribiendo él mismo los contenidos. Un ejemplo muy comtin son los campos de texto para formularios, donde el usuario introduce los datos, por medio del teclado. A diferencia de los anteriores, en las opciones de tipo de linea, donde puede elegir Multilinea o Linea tinica, se agrega la opcién Contrasefia. Otra opcidn es el maximo de ca- racteres permitidos, donde podré definir cudntos caracteres puede ingre- sar, como méximo, el usuario en dicho campo. Finalmente, nos queda el botén Cardcter..... Esta opcién aparece en el Inspector de propiedades, al elegir texto dindmico o campos de introduc- cién de texto. A diferencia del texto estdtico, en estos casos Flash no incor- pora, en la pelicula publicada. los contornos de caracteres. Si desea usar esta opcién en campos de texto dindmico o de entrada fuentes especiales, es recomendable y necesario que use esta opcién. Al elegir el botén Ca- rdcter... aparece una ventana como la que se aprecia en la figura 1.9. Por defecto, cada vez que crea un campo dindmico, se activa la opcién Ningzin cardcter. Con esta opcién no se incorpora ningtin cardcter de la fuente usada en dicho campo de texto, sino que Flash buscaré dicha in- formacién (esto es, los caracteres correspondientes a la tipografia en cues- tién) en el ordenador del usuario. Como se menciona anteriormente, no habré problemas si usa fuentes esténdar como Arial, Verdana, Times y otras que el usuario tenga. Todo lo contrario es la opcién Todos los caracteres, que incorpora el con- torno de toda la fuente, aunque no use todos los simbolos de la misma.Caracteristicas basicas de Flash MX De esta forma, el campo de texto estd preparado para que el usuario escriba cualquier tipo de contenidos, ya sean ntimeros o simbolos especiales. Figura 1.9. Opciones de caracteres Si esté usando una fuente propia o de disefio, y sabe qué caracteres nece- sita para el campo de texto, es mejor que use la opcién Sdlo, donde podra incorporar a la publicacién sdlo los caracteres que necesite, y de esta for- ma disminuir el peso de la pelicula a publicar. Si utiliza cualquier otra opcién de éstas, el campo de texto no mostrard los caracteres que no hayan sido indicados. Truco: Al crear campos para formularios donde no desee que el usuario pueda insertar ciertos caracteres, puede utilizar estas opciones de manera que el campo de texto no pueda contener los caracteres que no sean "permitidos”, sin necesidad de recurrir a un método desarrollado por programaci6n. Para cambiar el tamajio de un campo de texto arrastre el rectangulo pe- quefio de la esquina superior derecha. No siempre encontraré un rectén- gulo pequejio en esta posicidn. En la siguiente lista podrd ver todas las posibilidades y su significado. © Un rectdéngulo pequefio y vacio en la esquina superior derecha del campo de texto, muestra que estd usando un campo de texto estdtico horizontal. * Uncirculo vacio en la esquina inferior derecha, significa que el campo de texto estatico es vertical. 4344 Capitulo 1 © Uncirculo vacio en la esquina superior derecha, muestra que esté usan- do un campo de texto estdtico que se amplia automaticamente. * Cuando el recténgulo vacio aparece en la esquina inferior derecha, el campo de texto es dindmico. ¢ Si el recténgulo en la esquina inferior derecha es negro, el campo de texto tiene habilitada la propiedad de desplazamiento. Veremos esta opcién detalladamente en el capitulo 5. Herramienta Ovalo Ya puede adivinar lo que hace esta herramienta. Para activarla puede usar dos métodos: ¢ Haga clic en el icono [9] de la caja de herramientas. © Use la tecla de método abreviado O. Alarrastrar el raton con el bot6n izquierdo presionado, dibujard évalos, y si presiona la tecla Mayds al hacerlo, podra dibujar circulos perfectos. Si tiene problemas al dibujar, porque el cursor se adhiere a los objetos més préximos, seleccione la herramienta Flecha [Ry a continuacién desactive la opcién Ajustar a objetos [A]. Herramienta Rectangulo Para seleccionar la herramienta Rectdngulo use uno de estos métodos: ¢ Haga clic en el icono [Gj] de la caja de herramientas. © Use la tecla de método abreviado R. Al igual que la herramienta anterior, al arrastrar el raton dibujard rectdn- gulos, y si presiona la tecla Mayds al hacerlo, podra dibujar cuadrados perfectos. Esta herramienta presenta sélo un modificador. Observe el icono Radio de rectangulo redondeado [a] en la seccidn de opciones de la Caja de herramientas. Al hacer clic sobre este modificador, podrd elegir un radio de esquina entre 0 y 999, de manera que las esquinas, del rectangu- lo que dibuje, sean curvas y no vértices rectos. Herramienta Lapiz Use esta herramienta para dibujos a mano alzada. Puede seleccionarla haciendo clic en el icono [7] de la Caja de herramientas, o bien usando la tecla de método abreviado Y.Caracteristicas basicas de Flash MX Para dibujar simplemente arrastre el ratén con el botén izquierdo presio- nado. Si desea dibujar lineas rectas verticales u horizontales, mantenga presionada la tecla Mayus. En los modificadores de esta herramienta podra elegir entre: « Enderezar. Es el icono [5] y sirve para limpiar las imperfecciones del trazo, con una leve tendencia a convertirlos en lineas rectas. © Suavizar. Es el icono [5] y se utiliza para quitar imperfecciones del trazo, convirtiendo a su vez los angulos y rectas en curvas. ¢ Tinta. Simplemente se limita a quitar los errores del pulso, como en los casos anteriores, pero manteniendo los angulos y curvas como us- ted los dibuje. Nota: Si desea ajustar las opciones suavizar y enderezar, ejecute el co- mando Edicién>Preferencias... y luego elija la pestatia Edicion. Herramienta Pincel Como habrd notado, la herramienta Lapiz sélo genera lineas, pero no re- llenos. Si desea pintar trazos de relleno, puede hacerlo con la herramien- ta Pincel. Para activarla haga clic en el icono[#] de la Caja de herramientas, o bien use la tecla de método abreviado B. En los modificadores de esta herramienta podrd personalizar el tamafio y forma del pincel. También puede elegir el modo de pincel, entre las si- guientes opciones: ¢ Pintar normal. Le permite pintar sobre todos los rellenos y contornos de la capa. © Rellenos de pintura. Se utiliza para pintar en areas vacias, dejando intactas las lineas, pero afectando a los rellenos ya existentes. ¢ Pintar detrds. Puede utilizarla para no afectar al dibujo, y rellenar sdlo areas vacias. © Pintar seleccién. Una vez seleccionado el objeto que desea colorear, este modificador le permite pintar dentro del objeto seleccionado, sin salir de su contorno. © Pintar dentro. Similar al modificador anterior, se diferencia en que no necesita seleccionar previamente el objeto a pintar. 4546 Capitulo 1 Herramienta Transformaci6n Libre Es muy util para escalar, rotar, y distorsionar formas, Flash MX ha imple- mentado dos nuevos modificadores para esta herramienta: Distorsionar y Envoltura. Para activar la herramienta de Transformacién libre, haga clic en el icono de la Caja de herramientas, 0 use la tecla Q como método abreviado. En la seccién opciones de la Caja de herramientas podré encontrar los siguientes modificadores: ¢ Rotar y Sesgar. Al seleccionar el icono[5} podré rotar objetos y defor- marlos como un paralelogramo. En la versién MX se suma la posibili- dad de mover el centro de rotacién, con sélo arrastrarlo. Para rotar un objeto, arrastre uno de los puntos ubicados en los extremos del objeto seleccionado. Los puntos restantes se usan para sesgar vertical y hori- zontalmente. Sesgar un objeto es inclinarlo sobre uno de sus lados, de forma que si sesgamos un recténgulo, obtenemos un paralelogramo. ¢ Escalar y Estirar. Para activar este modificador, haga clic en el icono En las versiones anteriores, si rotaba un objeto, luego era imposi- ple escalar vertical y horizontalmente, ya que si bien el objeto habia rotado, los puntos de escalar seguian en la misma posicién, sin rotar. De esta forma, realmente lo que podfa hacer era aplastar diagonal- mente el dibujo rotado. Ahora, en la versién MX, Flash ha incorpora- do la ventaja que atin muchos programas de disefio no ofrecen. Cuando rote un objeto, verd que los puntos para escalar han rotado junto con el mismo, de modo que podré escalarlo sin distorsionarlo. ¢ Distorsionar. Para usar esta herramienta elija el icono [fj]. Este es uno de los nuevos modificadores que Flash MX ha incorporado. Con esta herramienta puede crear perspectivas, arrastrando los puntos selec- tores que rodean al objeto seleccionado. ¢ Envoltura. Esta herramienta es bien conocida por los que usan progra- mas de disefio. Permite distorsionar un objeto irregularmente. Trata al objeto seleccionado como una imagen contenida en un recténgulo, y permite distorsionar la envoltura de ese recténgulo como si fueran nodos, al igual que la herramienta de subseleccién. Es una herramienta nueva en la versién MX, y se activa con un clic en el icono Herramienta Bote de Tinta Esta herramienta se utiliza para modificar el color, grosor y estilo de las lineas, contorno de objetos, trazos de pluma o un simple segmento. EstaCaracteristicas basicas de Flash MX herramienta se combina con los paneles Mezclador de Colores y Mues- tras de Color que veremos mas adelante en este capitulo. Para cambiar el contorno de cualquier forma 0 trazo: ¢ Active la herramienta Bote de tinta con un clic en el icono [f@] de la Caja de herramientas, o presionando la tecla de método abreviado S. ¢ Enel Inspector de propiedades, cambie el color y el grosor del trazo. * Haga clic sobre el objeto o linea que desea cambiar. © Si desea personalizar el estilo de linea para que sea punteada o irregu- lar, presione el botdn Personalizado... del Inspector de propiedades. Herramienta Cubo de Pintura Con esta herramienta podré rellenar figuras vacias, o bien cambiar el re- lleno de dreas pintadas, A diferencia de otros programas de disefio, don- de las lineas y el relleno son propiedades de una figura, el concepto de dibujo vectorial en Flash es distinto. Cada trazo, y cada relleno es un ob- jeto en si mismo. Por ejemplo, si traza unos segmentos con la herramienta Linea [7], que se crucen entre si formando un poligono cerrado, podré re- llenar este espacio como si fuera un objeto. Para rellenar con la herramienta Bote de pintura, siga estos pasos: * Haga clic en el icono{@] de la Caja de herramientas, o presione la tecla de método abreviado K. © Acontinuacién, cambie el color de relleno en la seccién Colores de la caja de herramientas. ° Haga clic sobre cualquier relleno o sobre una zona vacia delimitada por trazos, como mencionaba el pdrrafo anterior. En la secci6n Opciones de la Caja de herramientas, podrd modificar el Tamaiio de Hueco: © Nocerrar saltos. Con este modificador seleccionado, s6lo podré relle- nar trazos que formen figuras completamente cerradas. Para activar- lo haga clic en el icono [@] que aparece al seleccionar la herramienta Bote de pintura. © Cerrar huecos pequeiios. Si dibujé un poligono con trazos sueltos, y al intentar rellenar, no funciona la herramienta, es probable que ha- yan quedado pequefios huecos entre linea y linea. En este caso nece- sita elegir esta opcidn antes de rellenar. Para activarla haga clic en el icono [e]. 4748 Capitulo 1 © Cerrar huecos medianos. Esta opcién es igual que la anterior, s6lo que con ésta podré rellenar trazos mas abiertos. Haga clic en el icono [w] para activarla. © Cerrar huecos grandes. Con esta opcidén puede rellenar trazos abier- tos. Si esta rellenando poligonos cerrados, es aconsejable no usar esta opcidn, ya que dejaria Areas sin rellenar en angulos y formas pequefias. El Bote de pintura se completa con el uso de dos paneles: el Mezclador de color y las Muestras de color. Para activar el panel Mezclador de color, ejecute el comando Ventana>Mezclador de Color, o presione las teclas de método abreviado Mayts-F9. Para activar el panel Muestras de color eje- cute el comando Ventana>Muestras de Color. El panel Mezclador de color se utiliza para generar todo tipo de colores que no se encuentran en la paleta normal de relleno. Al activar este pa- nel, podré verlo tal como se aprecia en la figura 1.10. Lo primero que va a encontrar en este panel es el icono de color de relleno [@]. Al hacer clic en él, aparece la misma paleta de colores que en la caja de herramientas. Esta paleta puede personalizarse, y desde el mezclador de colores podré afiadirle todo tipo de rellenos, para luego repetir facilmente un color 0 relleno preparado. Entre los estilos de relleno podra elegir sélido, lineal, radial y mapa de bits. Un relleno sélido es aquel que esté compuesto por un color plano, sin efectos. El estilo lineal le permitird personalizar mu- cho més el relleno, creando degradados con infinidad de colores y trans- parencias. Lo mismo sucede con el relleno radial, a diferencia de que, con este estilo, el degradado se muestra de una forma concéntrica, para po- der rellenar esferas, ruedas, aros, etc. EI relleno con mapa de bits se activa cuando importa cualquier mapa de bits al documento. Al hacerlo, automaticamente se afiade a la lista de re- lenos, para que pueda usarlo en cualquier figura o forma. Si desea afiadir cualquier relleno que ha creado a la paleta de colores, haga clic en el icono J de la esquina superior derecha del panel, y elija el comando Agregar muestra. El panel Muestras de Color es la misma paleta que veré al hacer clic en el color de relleno de la caja de herramien- tas, o en el inspector de propiedades. Nota: Como verd, hay muchas opciones y conceptos que no se explica- rdn, por los motivos mencionados en la introduccién del capitulo.Caracteristicas basicas de Flash MX 49 Figura 1.10. Panel Mezclador de color Herramienta Transformacién de relleno A diferencia de la herramienta Transformaci6n Libre, ésta sdlo escala, rota y distorsiona rellenos. La utilizard cada vez que quiera retocar un relleno degradado o un relleno de mapa de bits. Si tiene un recténgulo en el esce- nario con un relleno lineal, con esta herramienta puede escalar, estirar, rotar y sesgar el degradado, sin afectar a la forma del rectangulo que lo contiene. Para activar la herramienta Transformacién de relleno elija una de las si- guientes opciones: © Haga clic en el icono [fq] de la Caja de herramientas. * Use la tecla de método abreviado F. Al transformar un relleno lineal, sélo podré escalar y rotar el relleno. Al transformar un relleno radial, podra estirar, escalar y rotar la elipse ima- ginaria del degradado. Si desea retocar con esta herramienta un relleno de mapa de bits, podré escalar, estirar, sesgar y rotar el relleno. Al hacer- lo notard que el mapa de bits se transforma en un patrén de mosaicos, para completar el contorno de la figura que estd rellenando. Herramienta Cuentagotas Para ahorrar tiempo, si desea copiar el relleno 0 el estilo de trazo de otro objeto, el Cuentagotas es la herramienta apropiada para ello. Puede acti- varla al hacer clic sobre el icono[¥] de 1a Caja de herramientas. Sin embar- go, dada la utilidad de esta herramienta, es conveniente que aprenda a usar su tecla de método abreviado, I.50 Capitulo 1 Al hacer clic en el contorno de cualquier figura, se almacenarén su color, grosor y estilo, y se activard de forma automatica la herramienta Bote de tinta, para aplicar inmediatamente el contorno a otro objeto. De la misma manera sucede si al activar esta herramienta, hace clic en el relleno de alguna figura del escenario. Truco: Si coloca el Cuentagotas sobre un texto, podrd copiar todas las propiedades del mismo. Esto es util cuando tiene varios textos, con diferentes propiedades, y quiere repetir las caracteristicas de alguno de ellos, al insertar un nuevo texto. Herramienta Borrador Esta herramienta es realmente completa y util. Aunque no presenta nue- vas opciones en Flash Mx, el borrador puede personalizarse de muchas maneras, abarcando casi todas las posibilidades. Haga clic en el icono [3] de la Caja de herramientas, o presione la tecla E como método abreviado. Si hace doble clic sobre el icono[g] borrard todos los objetos del escenario. Al elegir el borrador apareceran varios modificadores en la seccién Op- ciones de la caja de herramientas: © Modo borrador (véase figura 1.11). Es una lista de opciones que le permitird borrar parcialmente los objetos. Puede elegir borrar slo las lineas, o s6lo rellenos, o borrar s6lo los rellenos seleccionados, borrar dentro o borrar todo. © Grifo. Muy ttil para borrar con un solo clic varios rellenos del mismo color. * Forma de borrador. Presenta una lista de opciones para que elija el tamaifio y la forma del borrador. Figura 1.11. Opciones en Modo borradorCaracteristicas basicas de Flash MX Herramientas Mano y Zoom Con ellas podré moverse cémodamente por el escenario. Para trabajar mejor es imprescindible que aprenda a usar las teclas de método abrevia- do que las activan. No sélo acelerard el proceso de trabajo, sino que podra concentrarse mas en el escenario, sin tener que buscar las herramientas. Para activar la herramienta Mano haga clic en el icono [fj] de la Caja de herramientas, o use la tecla de método abreviado H. Arrastrando el ra- tén, con el botén izquierdo presionado, podrd moverse répidamente por el escenario, sin necesidad de utilizar las barras de desplazamiento. Otro método atin més rdpido, de utilizar la herramienta Mano, es con la barra espaciadora. Mientras tenga presionada la barra espaciadora del teclado, la Mano se mantendr activada. Al soltar la tecla, volverd a la herramien- ta con que estaba trabajando anteriormente. Para activar la herramienta Zoom, haga clic en el icono [Q] de la Caja de herramientas, o acceda a ella presionando Z, su tecla de método abrevia- do. Al hacer doble clic sobre el icono [@] se mostrard el escenario en su tamaiio real, es decir al 100%. Cada vez que haga clic en el escenario au- mentaré el zoom al doble del actual, y si mantiene presionada la tecla Alt mientras hace clic, disminuiré en la misma proporcién. Si desea persona- lizar el nivel de zoom, escriba el porcentaje deseado en la esquina supe- rior derecha del escenario, como lo indica la figura 1.12. Figura 1.12. Personalizar el nivel de zoom Linea de tiempo Este es el momento de repasar los primeros conceptos acerca de la Linea de tiempo. Si bien puede ubicarla en cualquier parte de la pantalla, cuan- do inicia Flash MX por primera vez, la veré sobre el escenario. Si no ve la 51