Apuntes Flash 4.0 by Fernando Palma

Apuntes

1. Introducción a Flash CS5 En esta unidad didáctica se explican brevemente la finalidad, el funcionamiento, la historia y las posibilidades de Flash CS5.

1.1. ¿Qué es y cómo funciona Adobe Flash Professional CS5? Adobe Flash Professional CS5 es una aplicación informática diseñada para desarrollar contenidos multimedia e interactivos especialmente optimizados para su distribución a través de Internet. Información En el contexto de Flash es habitual encontrar el término RIA (Rich Internet Application o Aplicaciones de Internet Ricas), que hace referencia precisamente al tipo de aplicaciones que podemos crear usando Adobe Flash Professional CS5. Se denominan ricas porque enriquecen la "experiencia del usuario" ofreciéndole un funcionamiento más ágil, mejores posibilidades de interacción, y una perfecta integración de todo tipo de elementos multimedia (texto, sonido, imagen, animación, vídeo, 3D, ...). Actualmente Adobe Flash Professional se utiliza en casi todos los ámbitos del diseño, pero principalmente destaca en la creación de: •

Aplicaciones didácticas y videojuegos

•

Animaciones

•

Banners publicitarios para la web

•

Superposición de imágenes sobre vídeos

•

Inclusión de vídeos en páginas web

Y es de esperar que su popularidad crezca aún más si tenemos en cuenta algunas de las importantes novedades incluidas en las versiones CS4 y CS5: •

Posibilidad de animar objetos 2D en el espacio 3D (CS4).

•

Animaciones de cinemática inversa (CS4).

•

Movimientos complejos predefinidos que se aplican a cualquier objeto con un solo clic (CS4).

•

Creación de aplicaciones de escritorio AIR (Adobe Integrated Runtime) (CS4).

•

Se ha creado un nuevo formato llamado XFL que permite modificar los proyectos de Flash con un simple editor de textos (sin ejecutar Adobe Flash), pues este formato es una variante del XML (CS5).

•

Packager for iPhone: Apple suscitó una enorme polémica prohibiendo la utilización de contenidos desarrollados con Flash en sus plataformas iPhone, iPod Touch y iPad argumentando que estas aplicaciones tenían muchos "agujeros" de seguridad y que eran poco eficientes. Afortunadamente estas restricciones se han suavizado recientemente, y en CS5 disponemos de la aplicación Packager for iPhone, que es capaz de convertir nuestros proyectos de Flash en aplicaciones nativas para iOS (sistema operativo de los iPhone) y que cumplen todos los requisitos legales para comercializarse a través de la plataforma App Store de Apple (CS5). Información Antes de su versión CS3, Flash sólo servía para crear aplicaciones web, es decir, aplicaciones que se ejecutan incrustadas en una página web o como huéspedes dentro de una aplicación de escritorio, sin posibilidad de interactuar con el sistema operativo del ordenador local. Sin embargo, gracias a la tecnología AIR, que se ha asentado definitivamente en la versión CS4, ahora también podemos crear aplicaciones de escritorio capaces, por ejemplo, de hacer uso del sistema de archivos local. Un ejemplo 2

de aplicación web sería Google Maps; se trata de una aplicación multimedia e interactiva, pero cuyo alcance está limitado al servidor en el que está alojada. Por el contrario, un ejemplo de aplicación de escritorio podría ser Microsoft Word, que sí puede almacenar y leer archivos del ordenador local. Estrictamente, una aplicación web es aquélla a la que debe accederse a través de un navegador web, mientras que una aplicación de escritorio es aquélla capaz de ejecutarse por sí misma sin necesidad de integrarse dentro de un navegador web. Sin embargo, coloquial/popularmente la discriminación entre estos dos tipos de aplicaciones a veces se hace extensibles a otras características: •

También se llama aplicaciones web a aquéllas que se ejecutan en un servidor web y que muestran en nuestro ordenador sólo el resultado de su ejecución. En realidad se trata se aplicaciones compuestas por varias capas (generalmente 3, siendo la capa superior la interfaz de usuario que se ejecuta en nuestro ordenador, y la capa intermedia y la capa de datos se ejecutan en el servidor web). Por el contrario, las aplicaciones de escritorio se ejecutan íntegramente en nuestro ordenador.

•

También se califican como aplicaciones web a aquéllas que sólo pueden acceder a los archivos del servidor en el que se encuentran alojadas, mientras que las de escritorio pueden acceder a los archivos de nuestro ordenador local.

En lo referente a Flash, las aplicaciones que crearemos en este curso son estrictamente aplicaciones Web porque se ejecutan dentro de un navegador y, también lo son coloquialmente , porque sólo pueden acceder a los archivos alojados en su mismo servidor (aunque precisamente Flash CS4 ofrece la clase FileReference mediante la que podemos subir archivos de nuestro ordenador local al servidor web para así poder utilizarlos dentro de la aplicación). Por otro lado, las aplicaciones de Flash se ejecutan íntegramente en nuestro ordenador (se descargan del servidor pero utilizan para su ejecución únicamente el procesador/memoria de nuestro equipo) por lo que en sentido amplio también podrían ser aplicaciones de escritorio. El secreto del éxito de Flash debemos buscarlo en su propia concepción, pues desde sus orígenes apostó por el uso de gráficos vectoriales. Este tipo de gráficos es especialmente adecuado para representar imágenes con marcado carácter geométrico, y brilla especialmente a la hora de transmitir esas imágenes a través de canales de ancho de banda (capacidad o velocidad de transmisión) limitado, como Internet. Flash puso en manos de los diseñadores/desarrolladores la posibilidad de crear animaciones y aplicaciones interactivas e incrustarlas en un las hasta entonces "estáticas" páginas web. Debemos recordar que desde su invención en 1990 (por Tim Berners-Lee, del CERN), la World Wide Web había puesto el acento en la interrelación de documentos (hipervínculos) sin prestar demasiada atención a su aspecto o diseño. La mayoría de estos documentos únicamente contenían texto y, a lo sumo, imágenes estáticas, o pequeñas y "pesadas" animaciones basadas en gráficos de mapa de bits GIF. En diseño web es frecuente referirse al tamaño de almacenamiento que requieren las aplicaciones en términos de peso; una aplicación "pesada" requeriría mayor tiempo de transmisión que una aplicación "ligera". Además, las opciones de interacción para los usuarios básicamente se limitaban a hacer clic sobre hipervínculos o rellenar formularios, teniendo que esperar a que se cargase una nueva página para obtener una respuesta. Ante este panorama no es de extrañar que Flash provocase una gran revolución dentro del diseño web, pues por primera vez podíamos incluir atractivas animaciones y avanzadas funciones de interactividad (incluso videojuegos) dentro de nuestras páginas. Aunque la tecnología Java permite obtener resultados similares a los de Flash, es una herramienta más orientada a los programadores, que la sitúa fuera del alcance/interés de los diseñadores. Información La primera versión de Flash apareció en diciembre de 1996, pero en realidad fue un cambio de nombre para una aplicación que ya llevaba en el mercado desde algunos meses antes: FutureSplash. Curiosamente, esta aplicación saltó a la popularidad a mediados de 1996 cuando Microsoft y Disney la eligieron para mejorar la "experiencia de usuario" de algunos de sus sitios web. Esto hizo que la empresa Macromedia se fijase en ella y la adquiriese, renombrándola como Flash. Macromedia ha sabido 3

rentabilizar su adquisición convirtiendo a Flash en la mejor (casi única) posibilidad para crear aplicaciones ricas en la Web. Probablemente su éxito haya residido en saber adaptar Flash para utilizar los tipos de contenidos más espectaculares (incluso vídeo) y ofrecer un nivel de interactividad muy sofisticado, pero sin permitir que se convirtiese en una aplicación extraordinariamente compleja (más bien al contrario, la mayoría de los usuarios de Flash no dudan en definirla como una aplicación "amigable"). En el año 1995 Macromedia fue absorbida por el gigante del diseño Adobe Systems que, desde entonces, ha lanzado tres versiones de Flash: CS3, CS4 y CS5. En estas tres versiones se aprecia una notable "profesionalización" de la aplicación que la han alejado ligeramente del mundo de los aficionados, y un marcado interés por compatibilizar los contenidos desarrollados en Flash con todo tipo de dispositivos electrónicos, no sólo ordenadores y teléfonos móviles, sino también tabletas, neveras, ... Es frecuente que los usuarios que utilizan Flash por primera vez se sientan un poco desconcertados por su funcionamiento. En estos casos puede ayudar pensar en Adobe Flash Professional como si fuese una fábrica (disponible en versiones para Windows y Mac OS, pero cuyos productos finales son idénticos). A esta fábrica llegan desde el exterior unas materias primas, que son las imágenes, sonidos, vídeos, ..., que deberemos crear previamente con otras aplicaciones (Flash también incluye herramientas de dibujo, pero muy básicas) u obtener de otras fuentes (por ejemplo, bibliotecas de imágenes). En el interior de la fábrica, es decir, en el entorno de edición de Flash, se manipulan esas materias primas para crear un producto. Este producto se almacena en un archivo con la extensión FLA, y podemos abrirlo en el entorno de edición de Flash siempre que queramos para modificarlo. Una vez concluido el proceso de fabricación, preparamos este producto para su distribución al público, de modo que el resultado final puede ser utilizado pero no modificado; en cierta forma es como si lo colocásemos dentro de una carcasa que impidiese su modificación. Este proceso final se denomina publicación, y da como resultado un archivo SWF (ShockWave Flash). Los archivos SWF pueden incluirse en páginas web de forma similar a cómo se introducen imágenes y otros contenidos. Cuando el usuario final acceda a una de estas páginas web, el archivo SWF requerirá para su reproducción que esté instalado en el ordenador un complemento llamado Flash Player. Si no lo estuviera (o si su versión estuviera desactualizada), el propio navegador advertiría al usuario y le ofrecería las instrucciones para descargarlo automáticamente. En resumen, el producto final SWF es el que distribuiremos a los usuarios finales y se ejecuta con Flash Player, mientras que la matriz con la que hemos generado ese producto, el archivo FLA, nos lo guardamos por si fuera necesario introducir modificaciones en el futuro. En principio, un usuario que tenga acceso al archivo SWF no podrá invertir el proceso de fabricación para obtener el archivo FLA y modificarlo a su gusto o plagiarlo, de forma que nuestra propiedad intelectual está asegurada. Otra virtud de los archivos SWF es que pueden empezar a reproducirse aunque no hayan terminado de descargarse completamente en el ordenador del usuario, de modo que la descarga continúa en segundo plano mientras el usuario ya está disfrutando del producto; esta característica se denomina técnicamente streaming o transmisión de flujo continuo. Advertencia Existen aplicaciones (por ejemplo, Sothink SWF Decompiler) capaces de regenerar un archivo FLA a partir de un SWF, o incluso de extraer de un SWF imágenes o sonidos, aunque afortunadamente los resultados que producen no son aún perfectos. Flash Player es el entorno de ejecución de Flash, y se calcula que actualmente está instalado en el 99 por ciento de los ordenadores que tienen conexión a Internet. Existen versiones de Flash Player para Windows, Mac OS y Linux/UNIX, de modo que las aplicaciones que desarrollemos con Flash podrán reproducirse en todos estos sistemas operativos. Es importante destacar que una aplicación desarrollada con Flash (es decir, un archivo SWF), independientemente de que haya sido creado con la versión para Windows o para Mac del entorno de edición de Flash, podrá ser reproducido en ordenadores Windows, Mac OS o Linux, pues se reproduce dentro de Flash Player que se encarga de gestionar las particularidades de cada sistema operativo. En otras palabras, existen 2 versiones del entorno de edición de Flash (Windows y Mac OS) y 4 del entorno de ejecución (Windows, Macintosh, Linux y Solaris), e independientemente de qué versión del entorno de edición utilicemos para generar el producto final SWF, éste será reproducible por cualquiera de las 4 versiones del entorno de ejecución. Los usuarios finales de 4

nuestras aplicaciones SWF no necesitarán tener instalado en sus equipos el entorno de edición de Flash, pero sí el de reproducción (afortunadamente el entorno de reproducción de Flash, Flash Player, es gratuito). Esto explica por qué uno de los lemas de Flash es "Desarrollar sólo una vez y reproducir en cualquier lugar". Información También existe una versión de Flash Player específica para dispositivos móviles, denominada Flash Player Lite. Actualmente (versión 4) es compatible con dispositivos que utilicen el sistema operativo Symbian V3 (por ejemplo, la mayoría de los teléfonos móviles de marca Nokia recientes) o Android (como los teléfonos HTC). Las aplicaciones destinadas a estos dispositivos sólo pueden aprovechar algunas de las posibilidades de Flash (debido a su menor capacidad comparados con los ordenadores), por lo que requieren que desarrollemos archivos SWF específicos para ellos. Estos archivos también se crean con el entorno de edición de Flash (Flash Professional), pero no son 100 por cien compatibles con Flash Player o, si lo enfocamos al revés, los archivos SWF que desarrollemos para Flash Player (Windows, Mac OS, Linux y Solaris) no podrán reproducirse en Flash Player Lite. Dentro del entorno de edición de Flash encontraremos herramientas para componer los activos o materias primas (imágenes, sonidos, vídeos, ...), modificarlos, animarlos, e integrarlos en experiencias interactivas. El precio de la interactividad en Flash es aprender a utilizar un lenguaje de programación llamado ActionScript. La versión de ActionScript que se utiliza en Flash CS4 y CS5 es la 3, y se trata de un lenguaje de programación orientado a objetos y absolutamente compatible con el estándar ECMAScript v4, al que también están adheridos otros lenguajes como JavaScript. Para los usuarios sin conocimientos previos de programación, la línea de aprendizaje de ActionScript puede resultar un poco escarpada al principio porque deben adquirir conceptos generales propios de los entornos de programación en general; sin embargo, una vez superada esa fase, la utilización de ActionScript puede resultar más sencilla que la de otros lenguajes (al menos así lo asegura su inventor Gary Grossman en http://www.adobe.com/devnet/actionscript/articles/actionscript3_overview.html, pero ¿qué podría decir un padre de sus hijos?; bromas aparte, lo cierto es que resulta sencillo utilizar ActionScript para obtener resultados espectaculares con unos mínimos conocimientos de programación orientada a objetos, sin tener que profundizar en conceptos más arduos como la herencia, sobrecarga de funciones, ...). Otro aspecto destacable de Flash es su capacidad para incluir vídeos en la web. Los vídeos requieren un gran ancho de banda y sólo mediante la aplicación de algoritmos de compresión muy especializados es posible obtener resultados de calidad a través de Internet. Flash ha sabido elegir algoritmos (inicialmente Sorenson Spark, posteriormente On2 TrueMotion, y actualmente H.264) que le han proporcionado un dominio absoluto en este campo frente a otros competidores más tradicionales como RealMedia o Microsoft, incluso dando lugar a un formato de archivos de vídeo propio llamado FLV (FLash Video). La popularidad y eficiencia de este formato ha propiciado la aparición de servicios de vídeo en Internet tan afamados como YouTube. La clave del formato FLV es su capacidad para generar resultados de calidad con un consumo de recursos moderado. Por último y aunque no serán objeto de este curso, es interesante destacar otras dos posibilidades de Flash que le acercan aún más al mundo real traspasando las fronteras físicas del ordenador. La primera es que existen servidores especializados en aplicaciones Flash, como Flash Media Server o Red5 (éste último gratuito), que amplían aún más sus posibilidades permitiendo, por ejemplo, grabar en un archivo del servidor un vídeo capturado por la WebCam del usuario. Este tipo de servidores son muy utilizados en entornos de tele-formación avanzados, en los que los alumnos y el profesor pueden interactuar en tiempo real mediante imagen, sonido y texto.

Información Aún sin recurrir a un servidor especializado como Red5, las aplicaciones que desarrollemos con Flash podrán tener acceso a la WebCam y el micrófono del usuario final, pero los contenidos capturados por éstos sólo podrán utilizarse localmente en el propio ordenador del usuario, es decir, jamás podrán reenviarse al servidor en el que está alojada la aplicación Flash. En este enlace (http://www.boffswana.com/news/?p=392) puede ver un ejemplo de las posibilidades que abre esta tecnología; deberá imprimir en una hoja de papel la plantilla que le ofrecen y, al dirigir su cámara web hacia esa hoja de papel comprobará que en la pantalla del ordenador aparece un monstruo animado montado sobre la hoja, y que si arrastra la hoja de papel sobre su mesa el monstruo se desplazará sobre ella, como si realmente estuviese montado en la hoja de su mesa.

La segunda consiste en combinar Flash con dispositivos electrónicos externos que permitan interactuar ya no sólo con el teclado y el ratón, sino con todo tipo de sensores, como medidores de temperatura, acelerómetros, giróscopos, ... En este sentido existe una biblioteca llamada as3glue que permite establecer comunicación bidireccional entre las aplicaciones desarrolladas con Flash y la plataforma Arduino. Arduino es un proyecto de código libre que surgió de la necesidad de los artistas/diseñadores por explorar nuevas formas de interacción a través de medios electrónicos, particularmente robóticos.

1.2. La competencia de Flash A la vista de las numerosas e importantes virtudes enumeradas anteriormente no debería extrañar al lector la siguiente aseveración: no existe en la actualidad competencia para Flash; no encontraremos ningún otro producto con sus capacidades, aunque sí algunas opciones cuya futura evolución podría llegar a convertirlos en competidores: • •

•

SilverLight de Microsoft: Es un producto que pretende competir directamente con Flash, pero su inmadurez (la primera versión apareció en 2007) lo colocan actualmente muy por detrás. SVG (Scalable Vector Graphics) y SMIL (Synchronized Multimedia Integration Language): Se trata de dos estándares web (como también lo es XHTML, y por lo tanto de libre distribución) que permitirían combinar gráficos vectoriales en presentaciones multimedia interactivas. La combinación de estas dos tecnologías podría ser el final de los formatos propietarios como el que utiliza Flash, pero últimamente han perdido mucho del empuje con el que nacieron. De hecho, uno de los grandes valedores de SVG fue Adobe... hasta que adquirió Macromedia y se desvinculó parcialmente del proyecto. Una aplicación de software libre (gratuita) interesante que apuesta fuerte por SVG es InkScape, pero actualmente apenas empieza a ofrece algunas posibilidades muy básicas de animación. Processing: Es un proyecto de código libre (gratuito) basado en Java que permite crear animaciones interactivas a través de su sencillo e intuitivo lenguaje de programación (todo se hace escribiendo código; no dispone de una interfaz visual que permita colocar objetos ni animarlos). Esta aplicación goza de gran 6

•

reputación en entornos docentes. En la misma línea, aunque más complicadas, podemos citar aplicaciones como PureData, Objects, Vvvv... HTML5: Esta nueva versión de HTML ha fijado su principal objetivo en ofrecer la posibilidad de crear aplicaciones web sin la necesidad de recurrir a plug-ins propietarios, como Flash Player. En este sentido se están definiendo dentro de HTML5 elementos, como canvas, audio y video, que permiten mostrar elementos visuales con precisión, y utilizar sonidos/vídeos codificados con estándares libres (como Vorbis y Theora) y encapsulados en el formato también libre Ogg. Actualmente, algunos navegadores como FireFox tienen bastante avanzada la implementación de las nuevas características de HTML5, pero otros como Internet Explorer se resisten a implementar elementos como canvas que entran en competencia directa con otros de sus productos (como SilverLigth). Ante este nuevo escenario de "guerra entre navegadores" es previsible que Flash siga manteniendo su hegemonía, especialmente si tenemos en cuenta que los propios responsables de HTML5 han reconocido que no tendrán la especificación finalizada antes de 5 años.

2. Instalación de Flash y configuración de la interfaz En esta unidad didáctica aprenderemos a obtener, instalar y ejecutar la versión de evaluación gratuita de Flash CS4. También se describe la interfaz de usuario de Flash, destacando sus múltiples opciones de personalización.

2.1.

Instalación de Adobe Flash CS4 Professional

Adobe Flash CS4 Professional (en lo sucesivo, Flash CS4 o Flash 10) es un producto que se puede adquirir individualmente o formando parte de un conjunto de aplicaciones más amplio denominado Creative Suite 4 (CS4). En ambos casos deberemos optar entre la versión compatible con Windows o la versión compatible con Mac OS. Información Existen diversas ediciones de Adobe Creative Suite 4 que, en función del nicho comercial (diseño, desarrollo web, producción, ...) al que estén enfocadas, contienen unas aplicaciones u otras. Flash CS4 forma parte de todas ellas menos de una; no está incluido en Adobe Creative Suite Diseño Standard. El elevado precio de Flash CS4 (supera los 400 euros) no es excusa para aprender a utilizarlo, pues afortunadamente Adobe nos ofrece una versión de prueba sin limitaciones durante 30 días, que es la que utilizaremos en este curso. Si decidiésemos adquirir el producto tras este periodo de evaluación, podríamos actualizar nuestra versión de prueba a la versión comercial directamente a través de Internet, sin tener que volver a instalarlo. Lo único necesario para acceder a la versión de prueba es disponer de una dirección de correo electrónico, con la que crearemos nuestra cuenta de Adobe. Esta cuenta nos autoriza a realizar descargas del sitio web de Adobe, además de permitirnos acceder a ciertos privilegios, como recibir invitaciones para los interesantes seminarios que organiza Adobe. Antes de intentar instalar Flash CS4 es necesario comprobar que nuestro equipo cumple los requisitos mínimos que se indican en las siguientes secciones.

2.1.1. Requisitos mínimos para Windows • •

• • • • •

Procesador a 1 GHz o más rápido Microsoft® Windows® XP con Service Pack 2 (se recomienda Service Pack 3) o Windows VistaTM Home Premium, Business, Ultimate o Enterprise con Service Pack 1 (certificado para ediciones de 32 bits tanto de Windows XP como de Windows Vista) 1 GB de RAM 3,5 GB de espacio disponible en el disco duro (se necesita espacio libre adicional durante la instalación) Resolución de pantalla de 1.024 x 768 con tarjeta de vídeo de 16 bits (se recomienda utilizar una resolución de 1.280 x 800) Unidad de DVD-ROM Software QuickTime 7.1.2 necesario para funciones multimedia

2.1.2. Requisitos mínimos para Macintosh • • • •

• • •

Procesador PowerPC® G5 o Intel® multinúcleo a 1 GHz Mac OS X v10.4.11-10.5.4 1 GB 4 GB de espacio disponible en el disco duro (se necesita espacio libre adicional durante la instalación). No se puede instalar en volúmenes que distingan mayúsculas y minúsculas en los nombres de los archivos/carpetas Resolución de pantalla de 1.024 x 768 con tarjeta de vídeo de 16 bits (se recomienda utilizar una resolución de 1.280 x 800) Unidad de DVD-ROM Software QuickTime 7.1.2 necesario para funciones multimedia

2.2. Ejecución de Flash CS4 Tras instalar Flash CS4 encontraremos en el menú Inicio>Todos los programas de nuestro ordenador los siguientes programas: •

Adobe Bridge CS4: Es un explorador de archivos similar a Explorador de Windows, pero específicamente diseñado para gestionar archivos multimedia y permitir su integración en las aplicaciones de Adobe Suite CS4 de un modo rápido y sencillo. Básicamente podríamos clasificarlo como una herramienta para mejorar la productividad que demuestra todo su potencial en proyectos muy complejos, pero que no es tan práctica en trabajos de menor envergadura.

•

Adobe Device Central CS4: Las aplicaciones de Adobe Creative Suite CS4, incluido Flash CS4, son capaces de generar contenidos destinados a reproducirse en teléfonos móviles. Sin embargo, las diferencias técnicas entre los distintos fabricantes y modelos de teléfonos móviles pueden provocar que nuestras aplicaciones se ejecuten de forma distinta en cada uno de ellos. Adobe Device Central CS4 sirve para probar nuestras aplicaciones de forma virtual en multitud de teléfonos móviles, ofreciéndonos una visión bastante precisa de cómo funcionarán en ellos.

•

Adobe Drive CS4: Esta aplicación nos permite conectar con servidores de tipo Version Cue, bien a través de Internet, bien a través de una intranet, o bien instalados en nuestro propio equipo local. Los servidores Version Cue están protegidos por un nombre y una contraseña, y Adobe Drive CS4 sirve para iniciar una sesión en ellos. Al iniciar una sesión en un servidor Version Cue accederemos a su disco virtual. Un disco virtual es un espacio de alojamiento del servidor, es decir, una zona en la que podemos alojar archivos de Flash, pero que ofrece además ciertas opciones adicionales, como permitir el acceso simultáneo a los archivos por parte de varios desarrolladores, creación de versiones del mismo archivo según el estado de desarrollo (a modo de copia de seguridad), ... En definitiva Adobe Drive CS4 en combinación con Version Cue puede ayudar a varios desarrolladores a trabajar conjuntamente en un mismo proyecto, pero también puede ser útil a un desarrollador individual que desee tener acceso a sus proyectos desde cualquier ordenador con conexión a Internet (o de su intranet). El software de servidor Version Cue Server viene incluido en todas las ediciones de Adobe CS4, excepto en la Production Premium.

•

Adobe ExtendScript Toolkit CS4: Es habitual que en proyectos de cierta envergadura deban realizarse tareas repetitivas que resultan bastante tediosas, como conversión de imágenes, manipulación de clips de audio, ... Mediante Adobe ExtendScript Toolkit CS4 podemos escribir pequeños programas que se encarguen de estas tareas repetitivas. Obviamente, el esfuerzo de aprender un nuevo lenguaje de programación no compensa en desarrollos más básicos.

•

Adobe Extension Manager CS4: Esta aplicación nos permitirá instalar extensiones para las aplicaciones de Adobe que tengamos en nuestro equipo. Adobe pone a disposición de los programadores kits de desarrollo con los que se pueden crear nuevas funcionalidades. Algunas de estas funcionalidades son distribuidas gratuitamente por Adobe, mientras que otras requieren un abono. También existen cientos de extensiones desarrolladas por terceros, y que pueden descargarse a través de Adobe Extension Manager. 8

•

Adobe Flash CS4 Professional: Esta opción es la que realmente ejecuta Flash CS4, que es el programa en el que nos centraremos fundamentalmente a lo largo de este curso.

•

Adobe Flash CS4 Media Encoder: Para incluir vídeos y sonidos en nuestras aplicaciones desarrolladas con Flash, éstos deberán estar codificados con alguno de los formatos reconocidos por Flash, que están especialmente optimizados para mejorar la reproducción de vídeos dentro de Adobe Flash Player. Adobe Flash CS4 Media Encoder sirve para convertir otros formatos de vídeo y sonido (como AVI, MPEG, WMV, WMA, MP3, ...) a los formatos que Flash es capaz de reconocer.

•

Adobe Pixel Bender Toolkit: Pixel Bender es un lenguaje de programación similar a C pero especializado en la creación de efectos visuales, como sombras, biseles o ajustes de color. Mediante Adobe Pixel Bender Toolkit podríamos programar nuestros propios filtros y utilizarlos posteriormente en Flash. No obstante, el esfuerzo que requiere aprender este lenguaje de programación, lo coloca fuera de las prioridades de los usuarios que están iniciándose en el manejo de Flash.

Para ejecutar Flash CS4 seleccionaremos Inicio>Todos los programas>Adobe Flash CS4 Professional, que se iniciará mostrando un cuadro de diálogo similar al siguiente (salvo la primera vez que lo ejecutemos, en cuyo caso aparecerá otro cuadro de diálogo previo en el que deberemos aceptar las opciones de licencia).

Pulsaremos el botón Siguiente para indicar que queremos seguir utilizando la versión de prueba. Cuando concluya nuestro periodo de evaluación de 30 días ya no podremos volver a ejecutar Flash CS4 a menos que lo compremos. Quedará a la vista este otro cuadro de diálogo.

En la columna de la izquierda se muestran los últimos archivos en los que hemos trabajado, de modo que podemos abrirlos haciendo clic directamente sobre ellos. La columna central contiene las opciones para crear nuevos archivos de Flash; de esta columna nos interesarán fundamentalmente las dos opciones siguientes: •

Archivo de Flash (AS 3.0): Crea un archivo de animación configurado para utilizar ActionScript 3.0.

•

Archivo ActionScript: Crea un archivo de texto en el que podremos escribir nuestros guiones ActionScript para incluirlos desde cualquier archivo de animación u otros guiones. Información

Otra opción que merece ser destacada por representar una de las novedades más interesantes de Flash CS4 es Archivo de Flash (Adobe AIR). Tradicionalmente, las aplicaciones desarrolladas con Flash sólo podían reproducirse/ejecutarse mediante Flash Player (bien ejecutando Flash Player de forma independiente, o bien incrustándolo en una página web), es decir, se comportaban como documentos abiertos dentro de una aplicación principal (similar a cuando abrimos un archivo en un procesador de textos). Sin embargo, a partir de Flash CS4 disponemos de otra alternativa de reproducción/ejecución denominada Flash AIR. Flash AIR nos permite convertir nuestros desarrollos de Flash en aplicaciones independientes, que se ejecutan como cualquier otra aplicación que tengamos instalada en nuestro equipo (Microsoft Word, Adobe PhotoShop, ...), sin necesidad de aplicaciones intermedias como Flash Player. En otras palabras: con Flash CS4 podemos desarrollar aplicaciones de escritorio. Si esto no le ha hecho exclamar ¡Guauuu!, quizás sí lo haga saber que las aplicaciones AIR son independientes del hardware (como las aplicaciones Java), de modo que las aplicaciones que desarrollemos podrán utilizarse en cualquier ordenador o sistema operativo (compatible con Adobe AIR). En el momento de redactar este texto, Adobe AIR está disponible para Windows y Mac OS, y existe una versión beta (parcialmente desarrollada) para Linux. La columna de la derecha nos ofrece plantillas, que son archivos de Flash preconfigurados para crear rápidamente ciertos proyectos multimedia e interactivos, como cuestionarios de preguntas o presentaciones de fotografías. La funcionalidad de estas tres columnas también está disponible a través de los comandos Archivo>Abrir reciente (en el caso de la izquierda) y Archivo>Nuevo (para la central y la derecha), de modo que podríamos anular la visualización de este cuadro de diálogo activando la casilla No volver a mostrarlo, que se encuentra en su esquina inferior izquierda. No obstante, es aconsejable permitir que se muestre cada vez que ejecutemos Flash CS4, pues nos ofrece un modo rápido de acceder a las operaciones más frecuentes. Para continuar esta primera incursión en Flash CS4 haremos clic sobre la opción Archivo de Flash (AS 3.0) de la columna central. 10

2.2. La interfaz de Flash CS4 El aspecto inicial de la interfaz de Flash CS4 es el que muestra la siguiente figura, en la que además se han identificado sus elementos fundamentales: • •

•

La barra de menús: Nos ofrece los comandos necesarios para crear, gestionar, depurar y publicar nuestras películas. Las fichas/lengüetas de documentos: Flash CS4 permite tener abiertos varios proyectos a la vez, cada uno en una ficha diferente. En la lengüeta de cada ficha se muestra el nombre del archivo en el que estamos trabajando. Además, si junto al nombre del archivo aparece un asterisco querrá decir que hemos realizado cambios que aún no hemos guardado. El escenario: En esta zona compondremos y configuraremos el aspecto visual de cada uno de los fotogramas que componen nuestra película. Sirve para editar cada fotograma por separado. Estableciendo una analogía entre las películas de Flash y las películas tradicionales, el escenario de Flash sería el equivalente a un plató de grabación, con una zona de actuación, que es la única porción que verá nuestra audiencia, y un backstage a su alrededor que nos servirá para colocar y organizar los distintos contenidos que irán mostrándose en el escenario en cada fotograma. La línea de tiempo: En ella están representados todos los elementos visuales y no visuales (como sonidos, scripts, ...) que componen la película. Nos ofrece una visión general del desarrollo de la película a lo largo del tiempo. Siguiendo con nuestra analogía, la línea de tiempo sería el equivalente al guión de la película. El panel Herramientas: Nos ofrece las herramientas con las que compondremos el contenido de cada fotograma en el escenario. Contiene herramientas de selección, de dibujo, de pintura y de transformación. Se insiste sobre el hecho de que estas herramientas sólo son aplicables sobre el escenario.

El inspector de propiedades: Este panel sirve para consultar y configurar las propiedades del elemento del escenario, o de la casilla de la línea de tiempo, o de la herramienta del panel Herramientas, que tengamos seleccionado en un determinado instante. Por ejemplo, si seleccionamos una herramienta de dibujo, podremos establecer su color en el inspector de propiedades o panel Propiedades. El panel Biblioteca: Contiene un recopilatorio de todos los elementos (imágenes, animaciones, sonidos, vídeos, ...) que intervienen en la película, permitiéndonos colocarlos en cualquier fotograma simplemente arrastrándolos sobre el escenario. Siguiendo con nuestra analogía, sería como el reparto de la película, en el que están disponibles todos los actores.

Información La interfaz de Flash es tan compleja que conviene configurar una resolución de al menos 1024 x 768 píxeles para poder trabajar con comodidad. Si tiene su monitor configurado a una resolución menor, cámbiela ahora (por ejemplo, en Windows XP tendría que hacer clic con el botón derecho del ratón sobre cualquier zona vacía del escritorio de Windows, seleccionar la opción Propiedades, activar la ficha Configuración y elegir un valor mínimo de 1024 por 768 píxeles en la sección Resolución de pantalla).

2.3.1. Mostrar y ocultar los elementos de la interfaz El escenario es el único elemento de la interfaz que siempre debe estar visible; todos los demás se pueden mostrar u ocultar a través de los comandos disponibles en el menú Ventana. Por ejemplo, para ocultar o mostrar el panel Biblioteca tendríamos que ejecutar el comando Ventana>Biblioteca. Además, haciendo clic con el botón derecho del ratón sobre la lengüeta de los paneles accederemos a un menú contextual en el que se nos ofrece la posibilidad de cerrarlos (opción Cerrar).

Una función muy cómoda es la posibilidad de ocultar temporalmente todos los elementos de la interfaz excepto el escenario, de modo que éste ocupe todo el espacio disponible en pantalla. Para hacerlo recurriremos al comando Ventana>Ocultar paneles, o bien a su combinación de teclas equivalente, F4. Cuando queramos recuperar el estado inicial sólo tendremos que pulsar nuevamente la tecla F4, o bien ejecutar el comando Ventana>Mostrar paneles.

2.3.2. Agrupar, apilar, acoplar y contraer paneles La mayoría de los elementos que conforman la interfaz de Flash CS4 son paneles, que pueden presentarse de forma flotante sobre la interfaz o integrada en uno de los laterales del escenario. La mayor diferencia entre los flotantes y los integrado es que los primeros podemos desplazarlos libremente, mientras que los segundos están enclavados en uno de los flancos del escenario y, si los desplazamos convirtiéndolos en flotantes, el escenario se ampliará para ocupar el espacio dejado por ellos. Por otro lado, los paneles pueden agruparse, de modo que en su zona superior se muestra una barra gris oscura que podemos arrastrar con el ratón para desplazar a la vez todo el grupo de paneles. Dentro de los paneles agrupados podemos encontrarnos con paneles apilados, paneles acoplados, o una combinación de apilados y acoplados. Los paneles se apilados se superponen unos a otros, de modo que sólo uno de ellos queda visible, mientras que los demás se activarán cuando hagamos clic sobre sus lengüetas. Los paneles acoplados se colocan unos junto a otros o unos encima de otros, de modo que todos estén visibles a la vez.

El aspecto inicial que presenta Flash CS4 es completamente configurable, permitiéndonos colocar los paneles a nuestro gusto. Sólo debemos tener en cuenta estas normas básicas: •

Los paneles y grupos de paneles poseen diversas zonas de colocación, sobre las que podemos arrastrar otros paneles o grupos para acoplarlos o apilarlos con ellos. Estas zonas de colocación se dividen entre las de acoplamiento, que son la superior, la inferior, la izquierda y la derecha, y la de apilamiento, que es la zona de lengüetas. Las zonas de colocación se resaltan en color azul cuando arrastramos otros paneles/grupos sobre ellas.

•

En los cuatro laterales del escenario también existen zonas de colocación, que se resaltan con una línea azul y una banda gris cuando arrastramos otros elementos sobre ellas. Los paneles/grupos que arrastremos sobre estas zonas de colocación quedarán integrados, al igual que también quedarán integrados los que acoplemos/apilemos con otros paneles que ya estuvieran previamente integrados.

•

• •

•

Para mover un panel lo arrastraremos por su lengüeta; sin embargo, si lo que queremos mover es la pila completa a la pertenece un panel, lo arrastraremos por la zona gris oscura que hay a la derecha de las lengüetas. Para mover un conjunto de paneles acoplados, lo arrastraremos por la zona gris más oscura que hay sobre las lengüetas. Para trasladar un panel (o grupo de paneles) de un grupo a otro, lo arrastraremos hasta la zona de colocación de lengüetas del grupo de destino. El panel se insertará a la derecha de los anteriormente pertenecientes al grupo; no obstante, podremos hacer clic sobre su lengüeta nuevamente y arrastrarlo horizontalmente para reordenarlo dentro del grupo. Para apilar un panel (o grupo de paneles) con otro panel, lo arrastraremos hasta la zona de colocación le lengüetas del panel (o grupo) de destino. Para flotar un panel (o grupo de paneles) lo arrastraremos a cualquier punto que no coincida con ninguna zona de colocación; por ejemplo, podemos arrastrarlo hasta el interior del escenario. Los paneles flotantes también se denominan aislados. Los grupos de paneles (flotantes o integrados) se pueden contraer, de modo que sólo quede visible su título y un icono, o bien solamente el icono si reducimos aún más el ancho del panel una vez contraído. Al hacer clic sobre un panel contraído se mostrará el panel completo, que volverá a ocultarse automáticamente cuando hagamos clic en cualquier otro lugar. Para contraer paneles debemos hacer clic sobre el icono de doble flecha ( ) que hay en su zona superior. Haciendo clic nuevamente sobre este icono recuperamos el estado expandido del panel.

Truco Si no desea que los paneles contraídos se oculten automáticamente al hacer clic sobre cualquier otro lugar, haga clic con el botón derecho del ratón sobre su zona de colocación de lengüetas y, en el menú contextual que aparece, desactive la opción Contraer paneles de iconos automáticamente, para que desaparezca la marca de verificación que hay a su izquierda. •

Para cambiar el tamaño de los grupos de paneles podemos arrastrar cualquiera de sus bordes (como haríamos para cambiar el tamaño de cualquier ventana), o hacer clic sobre la zona gris oscura que hay a la derecha de las lengüetas para minimizarlos (haciendo clic nuevamente en esa zona se restauraría su tamaño original). Información 14

Los paneles contraídos y minimizados nos ayudan a ganar espacio para el escenario y la línea de tiempo, que es donde desarrollaremos la mayor parte del trabajo de edición.

2.3.3. Espacios de trabajo Flash denomina espacio de trabajo a una disposición concreta de los paneles. Podemos crear diferentes espacios de trabajo para cada una de las tareas de desarrollo (por ejemplo, uno para editar elementos en el escenario, otro para depurar nuestros guiones ActionScript, ...), guardarlos y recurrir a ellos siempre que los necesitemos. Flash nos ofrece a través del comando Ventana>Espacio de trabajo seis espacios de trabajo preestablecidos: •

Animador: Este espacio de trabajo da prioridad a los paneles relacionados con la colocación y configuración de los elementos del escenario.

•

Clásico: Es el espacio de trabajo predeterminado de las versiones anteriores de Flash, que estaba pensado para resoluciones 4:3 en lugar de para, las cada vez más habituales, resoluciones 16:9 de los monitores panorámicos actuales.

•

Depurar: Este espacio de trabajo está especialmente diseñado para probar nuestras películas, localizar fallos de programación y corregirlos.

•

Diseñador: Ofrece prácticamente los mismos paneles que el espacio Animador, pero dispuestos de un modo más cómodo para trabajar sobre el escenario.

•

Desarrollador: Ofrece los paneles que suelen utilizar los programadores de ActionScript.

•

Conceptos básicos: Es el espacio de trabajo predeterminado de Flash CS4 (el que se utiliza al iniciar por primera vez la aplicación). Posiblemente sea el más apropiado para quiénes están aprendiendo a utilizar Flash, pero es importante que cada uno diseñemos el espacio de trabajo en el que nos encontramos más cómodos.

Si no nos convence ninguna de estas opciones precofiguradas podemos colocar los paneles a nuestro gusto, guardar esa disposición como un espacio de trabajo más, y recurrir a él siempre que queramos. Los pasos a seguir serían éstos: 1. Colocamos los paneles a nuestro gusto. 2. Ejecutamos el comando Ventana>Espacio de trabajo>Nuevo espacio de trabajo. Aparecerá el siguiente cuadro de diálogo.

3. Escribimos un nombre para identificar nuestro espacio de trabajo y pulsamos el botón Aceptar. De este modo el espacio de trabajo quedará almacenado y se mostrará junto a todos los demás en la zona superior del menú Ventana>Espacio de trabajo. Podemos aplicar este procedimiento para crear tantos espacios de trabajo como deseemos. No obstante, si en algún momento necesitamos modificarlos ejecutaremos el comando Ventana>Espacio de trabajo>Administrar, que nos conducirá al cuadro de diálogo siguiente:

Este cuadro de diálogo nos ofrece botones para cambiar el nombre de nuestros espacios de trabajo o eliminarlos. Si alteramos la disposición de los paneles de un espacio de trabajo, Flash mantendrá esta modificación en todas nuestras sesiones de trabajo posteriores. Si quisiéramos recuperar el aspecto original del espacio de trabajo tendríamos que ejecutar el comando Ventana>Espacio de trabajo>Restaurar '[nombre del espacio de trabajo]'. Truco Si se fija en la zona derecha de la barra de menús (a la izquierda del cuadro de búsqueda de ayuda), comprobará que existe un menú que muestra el nombre del espacio de trabajo activo. Haciendo clic sobre la flecha que hay a su derecha se desplegarán las mismas opciones que nos ofrece Ventana>Espacio de trabajo. Recurrir a este menú es la forma más rápida de cambiar de espacio de trabajo.

2. La puesta en escena y el atrezzo 2.1. Propiedades del documento Al iniciar cualquier proyecto de Flash CS4, lo primero que deberemos hacer es configurar sus propiedades, no porque no se puedan modificar posteriormente, sino porque algunas de ellas (particularmente las referentes a las dimensiones del fotograma) condicionarán notablemente muchos aspectos del desarrollo ulterior. Estas propiedades se configuran a través del comando Modificar>Documento, que nos conduce al siguiente cuadro de diálogo.

En los campos de la sección Dimensiones indicaremos el tamaño de los fotogramas. Estos tamaños pueden expresarse en diversas unidades utilizando los siguientes sufijos. Unidad

Sufijo

Píxeles

Milímetros

Centímetros

Pulgadas

" (comilla doble; no dos comillas simples)

El tamaño aquí indicado es el real de los fotogramas, pero al incluir la película SWF en una página HTML podremos escalarla a un tamaño mayor o menor. Esto podría inducirnos a pensar que es indiferente el tamaño que elijamos aquí, pues siempre podremos modificarlo en el momento definitivo de incluir la película en un archivo HTML; sin embargo, no es así: al escalar las películas se aplican algoritmos de interpolación que reducen la calidad visual de los contenidos. Por este motivo es muy importante elegir cuidadosamente el tamaño de los fotogramas haciéndolo coincidir con el tamaño final al que se mostrará la película. Las dimensiones mínimas de una película son 1 x 1 píxel, y las máximas 2880 x 2880 píxeles. Si en lugar de configurar las dimensiones antes de componer la película, hubiésemos empezado componiendo todos los fotogramas sin preocuparnos del tamaño, podríamos ahora hacer clic sobre la opción Contenido para que Flash redujese/ampliase el tamaño de escenario al mínimo imprescindible para dar cabida a todos los contenidos. Si introducimos valores nuevos para el ancho/alto del documento, la ampliación/reducción se efectuará siempre desde la esquina superior izquierda del escenario. Si nuestra película contiene elementos que han sido sometidos a transformaciones 3D (este asunto se tratará con más detalle en la siguiente unidad didáctica) deberemos tomar una precaución adicional al cambiar las dimensiones del documento. Los efectos 3D que utiliza Flash CS4 están basados en una perspectiva cónica, que es la que produce resultados más similares al funcionamiento real del ojo humano. En este tipo de perspectiva, el observador ocupa una posición fija denominada vértice de la proyección y situada a cierta distancia del plano de proyección, de tal modo que el observador contempla el ancho de los fotogramas bajo un ángulo que Flash denomina "ángulo de perspectiva 3D". La sensación de profundidad se consigue al proyectar los objetos reales 17

sobre el plano de proyección utilizando como origen el vértice de proyección, de modo que los objetos más próximos se proyectan sobre el plano de proyección con mayor tamaño que los más alejados. Cuanto más aumentemos el ángulo de perspectiva (es decir, cuanto más se aproxime el observador al plano de proyección), más se acentuará el efecto de profundidad; en otras palabras, los objetos ubicados por detrás del plano de proyección parecerán alejarse más, mientras que los situados por delante parecerán acercarse. Por el contrario, cuanto más reduzcamos el ángulo de perspectiva 3D, menor será la sensación de profundidad, porque será como si el observador contemplase la escena desde un punto más alejado, reduciéndose las diferencias de tamaño aparente entre los objetos más lejanos y los más próximos. Obviamente, si cambiásemos el ancho de los fotogramas sin variar la posición del observador estaríamos variando el ángulo de perspectiva 3D y esto afectaría a la percepción de la escena; por ejemplo, si aumentásemos el ancho de los fotogramas ampliaríamos el ángulo de perspectiva y, consecuentemente, se acentuaría la sensación de profundidad. Para evitar estas distorsiones, Flash ofrece activada de forma predeterminada la casilla Ajustar ángulo de perspectiva 3D para conservar proyección actual del escenario, que recalcula el ángulo de perspectiva 3D basándose en el nuevo ancho del escenario para que la sensación de perspectiva anterior no se distorsione. Si desactivamos esta casilla, los objetos que tuvieran aplicadas transformaciones 3D cambiarían de aspecto.

Informacion Una novedad de Flash CS4 es la posibilidad de incrustar meta-información dentro de los archivos SWF. Esta incrustación se ajusta a un estándar denominado XMP y, eventualmente, podría ser consultada por los buscadores web para indexar nuestras películas. El comando para acceder a esta función es Archivo>Información de archivo.

Haciendo clic sobre la casilla que hay a la derecha de la opción Color de fondo se despliega una paleta en la que podemos elegir el color de fondo de los fotogramas. Observe que en la zona superior de esta paleta se indica el valor hexadecimal del color elegido; este valor puede serle de utilidad si desea hacer coincidir el color de fondo de una página web y el de una aplicación Flash que se muestra en su interior. Asimismo, puede escribir directamente el valor hexadecimal del color que desee utilizar para el fondo (por ejemplo, si el color que desea utilizar no se encuentra en la paleta). 18

En el campo Velocidad de fotogramas podemos escribir cualquier valor entre 0.01 y 120 fotogramas por segundo. Tenga en cuenta que la velocidad real de reproducción dependerá de la capacidad del ordenador en el que se ejecute la aplicación; por ejemplo, si se trata de un ordenador antiguo poco potente y hemos configurado una velocidad muy alta es posible que se salten fotogramas o que la reproducción no alcance la velocidad establecida. Generalmente es aconsejable utilizar valores entre 8 y 15 fps; no obstante, la calidad visual de algunas aplicaciones puede mejorar con velocidades mayores, entre 20 y 40 fps (algunos juegos de acción desarrollados con Flash utilizan la velocidad máxima: 120 fps). Por otro lado, los navegadores web (como Internet Explorer y Firefox) también imponen limitaciones a la velocidad máxima de las aplicaciones SWF (puede encontrar más información sobre este asunto en http://www.kaourantin.net/2006/05/frame-rates-in-flash-player.html). En el cuadro de lista Unidades de regla elegiremos qué unidades queremos utilizar en las reglas que Flash permite mostrar en los laterales del escenario (al final de esta unidad didáctica aprenderemos a utilizarlas). Por último, si pulsamos el botón Transformar en predeterminado, los valores que hayamos configurado en el cuadro de diálogo Propiedades del documento se convertirán en los predeterminados para todas las películas nuevas que creemos a partir de ese momento.

2.2. El escenario El escenario es el lugar en el que compondremos el contenido de cada fotograma de nuestra película por separado y constituye, a su vez, la parte visible de nuestra aplicación, es decir, lo que verán nuestros espectadores. En torno al escenario se encuentra el área de trabajo, en la que también podemos colocar elementos, bien de forma temporal durante la fase de edición a la espera de ubicarlos en su lugar definitivo, o bien como posición de paso de una animación. Por ejemplo, en la siguiente figura se muestran solapados los fotogramas de una animación en la que un automóvil cruza el escenario. Tanto en la posición inicial, como en la final, el automóvil se encuentra fuera del escenario (en el área de trabajo).

2.2.1. Visualización del escenario: Es importante conocer las posibilidades de visualización que nos ofrece el escenario, pues así podremos trabajar con mayor comodidad y ser más eficientes. En unidades didácticas anteriores ya se ha descrito un método encaminados maximizar el espacio disponible para el escenario: •

La tecla F4: Pulsando esta tecla podemos ocultar (y volver a mostrar) todos los paneles, de modo que el espacio recuperado es automáticamente ocupado por el escenario.

Aplicando este método lograremos que el escenario ocupe prácticamente toda la pantalla, pero aún así hay ocasiones en las que necesitaremos un mayor nivel de ampliación para trabajar con comodidad. En estos casos podemos recurrir al cuadro de lista que hay en la zona superior derecha del escenario para elegir uno de los valores de ampliación predeterminados, o alguna de las siguientes opciones: •

Ajustar a ventana: Amplía/reduce el nivel de ampliación del escenario para que aproveche al máximo el espacio disponible, ocultando incluso las barras de desplazamiento.

•

Mostrar fotograma: Tiene el mismo efecto que la opción anterior, pero mantiene visibles las barras de desplazamiento.

•

Mostrar todo: Amplía/reduce el nivel de ampliación aprovechando al máximo el espacio disponible para mostrar todos los contenidos del fotograma, tanto los que se encuentran dentro del escenario como los 19

que están fuera de él (sobre el área de trabajo), pudiendo quedar ocultas zonas del escenario en las que no haya contenidos. Para ampliar/reducir el nivel de ampliación de una zona concreta del fotograma contamos con la herramienta Zoom ( ) en el panel Herramientas. Tras activarla podremos hacer clic sobre cualquier posición del escenario para ampliar su visualización, o bien hacer clic mientras mantenemos pulsada la tecla Alt para reducirlo. También podemos hacer clic y, sin soltar el botón del ratón, arrastrarlo para delimitar una zona rectangular de ampliación en lugar de ampliar en torno a un punto (en este caso la tecla Alt no producirá el efecto de reducción). La zona delimitada ocupará todo el espacio disponible. Además de ampliar/reducir el escenario para visualizar mejor su contenido, también podemos desplazarlo. Esto nos resultará de gran utilidad cuando necesitemos trabajar con un nivel de ampliación tan elevado que impida mostrar todo el área de interés a la vez. En el lateral derecho e inferior del escenario contamos con barras de desplazamiento que nos permitirán desplazarlo. No obstante, posiblemente la forma más cómoda de desplazar el escenario sea recurrir a la herramienta Mano ( ); una vez activada esta herramienta en el panel Herramientas sólo tendremos que hacer clic sobre el escenario y, sin soltar el botón del ratón, arrastrarlo en el sentido en que queramos desplazarlo, como si realmente estuviésemos arrastrando una hoja de papel sobre nuestra mesa con la mano. Otro detalle a favor de esta herramienta es que podemos activarla temporalmente en cualquier momento simplemente manteniendo pulsada la tecla Barra espaciadora; por ejemplo, imaginemos que estamos utilizando otra herramienta y que necesitamos desplazar el escenario: no tendríamos que cambiar de herramienta en el panel Herramientas, sino simplemente mantener pulsada la tecla Barra espaciadora mientras hacemos clic sobre el escenario y arrastramos el ratón. Comprobaremos que al pulsar la tecla Barra espaciadora el puntero del ratón se convierte en una mano, indicando que está vigente la herramienta Mano. Al soltar la tecla Barra espaciadora volverá a estar vigente automáticamente la herramienta que estábamos utilizando inicialmente.

Truco Haciendo doble clic sobre la herramienta Zoom en el panel Herramientas podemos recuperar inmediatamente el nivel de ampliación 100 por cien. De forma similar, haciendo doble clic sobre la herramienta Mano centraremos inmediatamente el fotograma y obtendremos el mismo nivel de ampliación que si hubiésemos seleccionado la opción Mostrar fotograma en el cuadro de lista que hay en la esquina superior derecha del escenario.

2.3. Las formas o imágenes vectoriales En informática se utilizan fundamentalmente dos sistemas para almacenar imágenes: •

Mapa de bits: Este sistema consiste en superponer a la imagen una cuadrícula, de mayor o menor densidad según el nivel de calidad que se desee, y almacenar el color predominante en cada una de las casillas de esa cuadrícula. Estas casillas se denominan píxeles, y son la unidad mínima de información de color en las imágenes de mapa de bits (es decir, dentro de los confines de cada píxel el color es siempre el mismo).

•

Vectoriales: En este caso se almacenan los contornos (también llamados trazos o bordes) que componen la imagen y sus rellenos, aproximándolos mediante ecuaciones matemáticas.

Uno de los factores que más ha influido en el éxito de Flash es su habilidad para gestionar imágenes vectoriales, a las que nos referiremos genéricamente como formas. La primera virtud de las imágenes vectoriales es que pueden representarse a cualquier tamaño sin pérdida de calidad (gracias a su estructura matemática), a diferencia de lo que les ocurre a las imágenes de mapa de bits (cuya calidad está determinada por la densidad de la cuadrícula). Su segunda virtud es que permiten almacenar imágenes de naturaleza geométrica en muy poco espacio de memoria, y esto es vital en contenidos que se distribuyen a través de canales de ancho de banda limitado, como Internet. No obstante, debemos llamar la atención sobre el hecho de que esta segunda virtud está supeditada a que las imágenes tengan una naturaleza geométrica, pues de otro modo las aproximaciones matemáticas de sus contornos 20

y rellenos podrían llegar a ser tan complejas que requiriesen más espacio de almacenamiento que su equivalente en formato mapa de bits. Del párrafo anterior podría ya inferirse por qué se utilizan dos formatos para almacenar imágenes en informática, sin que ninguno de ellos se haya impuesto al otro: porque cada uno es apropiado para un tipo de imágenes. El formato vectorial es apropiado para imágenes con contornos bien definidos y de naturaleza geométrica, y con grandes zonas de un mismo color o cuyo colorido varíe de forma que pueda ser aproximada mediante funciones matemáticas (como en el caso de los degradados); por ejemplo, las ilustraciones que suelen utilizarse como logotipos. Cumplidas estas tres premisas, el formato vectorial ofrece la ventaja adicional de no mermar la calidad al ampliar la imagen. En la siguiente figura se muestra el resultado de ampliar una misma imagen almacenada de forma vectorial (izquierda) y como mapa de bits (derecha).

Por el contrario, los mapas de bits son ideales para imágenes con contornos poco definidos o muy irregulares, o cuyo colorido varíe arbitrariamente; por ejemplo, las fotografías. En la siguiente figura se muestra el resultado de almacenar una imagen con estas características de forma vectorial (izquierda) y como mapa de bits (derecha).

Flash CS4 puede utilizar tanto imágenes vectoriales como imágenes de mapa de bits, aunque está más orientado hacia el uso de las primeras. En el resto de esta unidad didáctica nos concentraremos en el estudio de las herramientas que nos ofrece Flash CS4 para crear/retocar imágenes vectoriales (formas), aunque también conviene tener presente que Flash CS4 puede importar directamente imágenes vectoriales creadas con otras aplicaciones, como Adobe Illustrator.

2.3.1. Naturaleza intrínseca de las formas Las formas están compuestas por trazados, y estos trazados poseen un trazo (o contorno) y, si son cerrados, un relleno. Los trazos se almacenan internamente como curvas de Bézier, que son una entidad matemática capaz de definir la forma de una línea a través de varios puntos por los que pasa (denominados nodos o puntos de ancla), la dirección de tangencia en cada uno de esos puntos de paso, y el nivel de contacto entre la línea y la dirección 21

de tangencia en cada uno de ellos. Se define el nivel de contacto entre una curva y una dirección como la similitud que existe entre ambas. Por ejemplo, en la siguiente figura se muestra a la izquierda un trazado, y a la derecha los puntos de ancla y las direcciones de tangencia que lo definen; en el punto de ancla marcado como B el contacto es mayor que en el marcado con la letra A.

Los puntos de ancla se clasifican en curvos y angulares. Los curvos son aquéllos en los que la dirección de tangencia no sufre discontinuidad; por el contrario, en los angulares se produce una discontinuidad en la dirección de tangencia. Por ejemplo, el punto señalado como A en la siguiente figura es curvo, mientras que el señalado como B es angular.

La fracción de trazo comprendida entre dos puntos de ancla se denomina segmento. Para que un segmento sea recto es imprescindible que la dirección de tangencia en los dos puntos de ancla que lo delimitan sea exactamente la misma (no solamente paralela).

Informacion Las curvas de Bézier deben su nombre al ingeniero y matemático francés Pierre Étienne Bézier, que desarrolló su carrera profesional en Renault. El relleno de los trazados puede ser un color específico, un degradado (lineal o radial) o un mosaico creado utilizando como tesela una imagen de mapa de bits. En resumen, las formas están compuestas por trazados y éstos, a su vez, por trazos y rellenos. Los trazos están definidos por sus puntos de ancla y las direcciones de tangencia en ellos. Dependiendo de que se produzca o no discontinuidad en la dirección de tangencia de los puntos de ancla, éstos se clasifican, respectivamente, en angulares o curvos.

2.3.2. Herramientas para dibujar formas Flash CS4 nos ofrece las siguientes herramientas de dibujo de formas en el panel Herramientas: •

Pluma ( ): Es la herramienta de dibujo más versátil, pues nos permite definir con total precisión los puntos de ancla y sus direcciones de tangencia.

•

Línea (

•

Rectángulo/Óvalo/PolyStar ( ): Esta herramienta es capaz de dibujar rápidamente rectángulos, rectángulos con los vértices redondeados, elipses, sectores de elipse, polígonos regulares y estrellas.

•

Lápiz ( ): Sirve para dibujar trazos a mano alzada como si utilizásemos un lápiz en el mundo real, por lo que su uso resulta más intuitivo que el de la herramienta Pluma, aunque también menos preciso, pues la posición exacta de los puntos de ancla y su dirección de tangencia está determinado en última instancia por Flash CS4.

•

Pincel ( reales.

•

Pincel rociador ( ): Ésta herramienta es una de las novedades de Flash CS4, y se comporta de forma similar a un aerosol, permitiéndonos cubrir zonas con partículas dispuestas al azar. Un aspecto interesante de esta herramienta es que permite utilizar como partícula cualquier gráfico disponible en la biblioteca; por ejemplo, podremos utilizar una estrella como partícula y crear fácilmente un cielo estrellado.

•

Deco ( ): También esta herramienta es una novedad de Flash CS4 y su finalidad es similar a la de la anterior: cubrir zonas. Sin embargo, esta herramienta utiliza para los rellenos patrones geométricos o matemáticos. La siguiente figura ayuda a ilustrar la diferencia entre la herramienta Pincel rociador (izquierda) y la herramienta Deco (derecha). Otra diferencia entre Pincel rociador y Deco es que la primera cubre cualquier zona sobre la que arrastremos el ratón, mientras que la segunda puede confinar su relleno al elemento sobre el que hagamos clic inicialmente, o bien a las zonas del escenario que no estén ya ocupadas.

): Sólo sirve para dibujar líneas rectas o poligonales rectas.

): Esta herramienta crea rellenos sin trazo. Pretende emular el funcionamiento de los pinceles

2.3.2.1. Los modos de dibujo de Flash CS4 Antes de dibujar una forma con cualquiera de estas herramientas (excepto las dos últimas, que no dibujan formas independientes sino agrupadas; los grupos se explicarán en la sección 4.3.2.14) podemos solicitar a Flash que la interprete de uno de estos dos modos mediante el icono Herramientas): •

(que se encuentra en la zona inferior del panel

Como un trazado fusionado con el resto de los que contiene la capa activa (el icono deberá estar desactivado

): Los trazados fusionados unen sus trazos/rellenos cuando se solapan y son del mismo 23

color, creando un trazo/relleno común. Si son de colores distintos, los trazos/rellenos mantienen su independencia, pero los dibujados después anulan las porciones que solapan de los que estaban ya dibujados en la capa activa. •

Como un objeto independiente dentro de la capa activa (el icono deberá estar activado ): En este caso la forma mantiene una independencia total respecto al resto de formas que pudiera contener la capa (tanto fundidas como independientes), sin fundir sus trazos/rellenos, ni anular las porciones que solapa, ni dejar que anulen las porciones en las que es solapada. Los objetos independientes siempre aparecen por encima de los fusionados, incluso aunque hayan sido dibujado después que ellos.

La elección de uno u otro modo de dibujo adquiere importancia cuando movemos las formas con la herramienta Selección ( ) del panel Herramientas. Por ejemplo, en la siguiente figura el fondo está compuesto por un rectángulo con un degradado azul y dos elipses verdes, dibujados todos ellos en el modo de fusión. La nube es una combinación de varias elipses también dibujadas en el modo de fusión. Sin embargo, el abeto está dibujado como un objeto independiente.

Si desplazásemos el abeto a la izquierda y la nube a la derecha, el resultado sería el que se muestra en la siguiente figura. La nube dejaría su hueco original en el fondo, pues estaba fusionada con él; pero el abeto no, porque era un objeto independiente.

La mayoría de los usuarios considera más cómodo utilizar el modo de objeto independiente que el modo de fusión, pues les impide incurrir en errores de solapamiento, aunque algunos prefieren el modo de fusión porque les permite manipular fácilmente el trazo y el relleno por separado. Más allá de opiniones personales, la elección de uno u otro modo dependerá de las circunstancias concretas de la labor a realizar, teniendo en cuenta que siempre podremos convertir una forma dibujada con el modo de fusión al modo de objeto independiente seleccionándola con la herramienta Selección ( ) y ejecutando el comando Modificar>Combinar objetos>Unión (aunque aún así dejará su hueco sobre las formas con las que estaba originalmente fusionada si la movemos), y convertir una forma 24

dibujada con el modo de objeto independiente al modo de fusión seleccionándola con la herramienta Selección ( ) y ejecutando el comando Modificar>Separar.

2.3.2.2. Color de trazo y color de relleno Antes de dibujar una forma podemos elegir su color de trazo y relleno, sin perjuicio de que posteriormente decidamos cambiarlo utilizando las herramientas Bote de tinta ( ) o Cubo de pintura ( ) del panel Herramientas. Para elegir el color de trazo haremos clic sobre la casilla que hay debajo del icono ( ) en la zona inferior del panel Herramientas, y para seleccionar el color de fondo haremos clic sobre la casilla que hay debajo del icono ( ). En ambos casos se desplegará un panel similar al que muestra la figura siguiente.

La mayor parte de este panel está ocupada por las muestras de la paleta predeterminada (que, por defecto, es la paleta de 216 colores seguros para la Web). Podemos hacer clic sobre cualquiera de estas muestras para seleccionarla, pero ¿y si el color que necesitamos no está en esta paleta? En este caso podemos optar entre escribir el valor hexadecimal del color en la casilla superior izquierda, o hacer clic sobre el icono ( selector de color de Windows.

) para acceder al

Una vez elegido el color, podemos asignarle un nivel de opacidad mediante el control Alfa, bien haciendo clic para escribir directamente el porcentaje, o bien haciendo clic y arrastrando el ratón hacia la derecha para aumentarlo o hacia la izquierda para disminuirlo. Por último, si pulsamos el icono ( ) estaremos indicando a Flash CS4 que no queremos utilizar color para el trazo/fondo. Aunque estéticamente es lo mismo no utilizar color que utilizar uno completamente transparente (con valor nulo de Alfa), internamente no lo es; si indicamos que no queremos color para el trazo/fondo, la forma carecerá de trazo/fondo, mientras que si lo hacemos totalmente transparente, aunque no lo veamos, sí tendrá trazo/fondo y podremos seleccionarlo. En la zona inferior del panel Herramientas disponemos de 2 iconos para configurar rápidamente ciertos colores de trazo y relleno: •

Blanco y negro (

•

Intercambiar colores ( configurados.

): Establece el negro como color de trazo y el blanco como color de fondo. ): Intercambia los colores de trazo y relleno que tengamos actualmente

Informacion Para expresar en hexadecimal un color se comienza con el signo # y, a continuación, se utilizan 2 caracteres para codificar el valor de cada una de las componentes roja, verde y azul (en este orden). Cada uno de esos 2 caracteres pueden ser los números del 0 al 9, o las letras de la A a la F (que corresponden a los valores decimales comprendidos entre 10 y 15), de modo que podemos codificar hasta 256 valores distintos para cada componente. Por ejemplo, el color #FFFF00 corresponde a un amarillo puro, pues es la combinación de rojo y verde puros (utilizando el método de color aditivo). Tras elegir el color de trazo y fondo podemos utilizar cualquiera de las herramientas de dibujo que se describen a continuación para dibujar la forma que nos interese. Pero ¿y si necesitásemos cambiar el color de una forma ya dibujada sobre el escenario? Como adelantamos al principio de esta sección, en este caso recurriremos a las

herramientas Bote de tinta ( ) y Cubo de pintura ( ). La primera sirve para cambiar colores de trazo, y la segunda para cambiar colores de fondo, pero ambas se usan siguiendo exactamente este mismo procedimiento: 1. Hacemos clic sobre las casillas que hay debajo de los iconos Color de trazo ( ) o Color de relleno ( ), en la zona inferior de la paleta Herramientas, para elegir el color que queremos asignar al trazo/relleno de la forma ya dibujada. 2. Activamos la herramienta Bote de tinta o Cubo de pintura haciendo clic sobre ella en el panel Herramientas. Estas dos herramientas están combinadas bajo el mismo icono, de modo que para acceder a la que esté oculta tendremos que hacer clic sobre el icono y mantener el botón del ratón pulsado unos instantes hasta que se despliegue el menú de herramientas. 3. Hacemos clic sobre la forma cuyo color de trazo/relleno deseamos cambiar. No es necesario hacer clic exactamente sobre el trazo para cambiar el color del trazo (que puede resultar complicado si el trazo es muy fino), sino que también obtendremos el mismo resultado haciendo clic sobre el relleno de la forma (obviamente, si tenemos activada la herramienta Color de trazo). Otra herramienta de color interesante es Cuentagotas ( ). Imaginemos que queremos seleccionar un color que ya está presente en el escenario pero que no recordamos exactamente qué posición ocupaba en la paleta (o cuál era su valor hexadecimal). ¿Cómo lo resolveríamos? 1. Activamos la herramienta Cuentagotas (

) haciendo clic sobre su icono en el panel Herramientas.

2. Hacemos clic sobre el color del escenario que queramos seleccionar. Si hemos hecho clic sobre un relleno, el color se elegirá como color de fondo y se activará automáticamente la herramienta Cubo de pintura para que podamos aplicárselo a otro relleno. Por el contrario, si hemos hecho clic sobre un trazo, el color se elegirá como color de trazo y se activará automáticamente la herramienta Bote de tinta para que podamos aplicárselo a otro trazo. Si mantenemos pulsada la tecla Mayús al hacer clic sobre un color con la herramienta Cuentagotas, ese color se elegirá simultáneamente como color de fondo y de trazo, y no se activará automáticamente ni la herramienta Cubo de pintura ni la herramienta Bote de tinta.

Informacion La herramienta Cuentagotas no sólo selecciona el color, sino también las demás propiedades del trazo/relleno sobre el que hagamos clic, como el grosor, el estilo (punteado, discontinuo, ...). De forma similar, las herramientas Cubo de pintura y Bote de tinta, no aplican sólo el color activo, sino también las demás propiedades de trazo/relleno predeterminadas. Muchas de estas propiedades se describirán en la sección siguiente.

2.3.2.3. La herramienta Pluma Como aún no tenemos demasiada experiencia en el manejo de las herramientas de Flash CS4, empezaremos realizando una aclaración general que es válida para todas ellas: fíjese en la pequeña flecha que hay en el extremo inferior derecho de la herramienta Pluma ( ). Si echamos la vista atrás a la unidad didáctica anterior, recordaremos que esta flecha indica que se trata de una herramienta múltiple, es decir, de un icono que engloba bajo sí varias herramientas, a las que podemos acceder haciendo clic sobre el icono y manteniendo el botón del ratón pulsado unos instantes hasta que se despliegue la lista de herramientas. En este caso las herramientas disponibles son: •

Pluma ( ): Sirve para dibujar nuevos trazos (trazados sin relleno) y modificar/añadir/eliminar puntos de ancla en los trazos ya dibujados.

•

Añadir punto de ancla (

•

Eliminar punto de ancla (

): Sirve para añadir nuevos puntos de ancla en trazos ya dibujados. ): Sirve para eliminar puntos de ancla de trazos ya dibujados. 26

•

Convertir punto de ancla (

): Sirve para convertir puntos de ancla curvos en angulares y viceversa.

El procedimiento básico para dibujar con la herramienta Pluma consiste en ir haciendo clic sobre los puntos que se deseen designar como puntos de ancla, pero realizando la siguiente distinción según queramos que sean puntos de ancla angulares o curvos: •

Puntos de ancla angulares: Simplemente haremos clic.

•

Puntos de ancla curvos: Haremos clic y, sin soltar el botón del ratón, lo arrastraremos para definir la información de tangencia del punto de ancla. La dirección de tangencia vendrá determinada por la posición del puntero, y su contacto será tanto mayor cuanto más alejemos el puntero de la posición sobre la que hicimos clic inicialmente.

Para finalizar el dibujo de un trazo podemos encontrarnos con estas tres situaciones: •

Si queremos que el trazo sea cerrado y tenemos activado el ajuste a objetos (consulte la sección 4.5.3.1), colocaremos el puntero sobre el punto de ancla inicial hasta que el puntero adquiera este aspecto ( ) y haremos clic. Si no tenemos activado el ajuste a objetos sólo se cerrará el trazo si hacemos clic exactamente sobre el centro del nodo.

•

Si queremos que el siguiente punto de ancla que indiquemos sea el último, lo definiremos haciendo doble clic. Esto obliga a que ese último punto de ancla sea angular.

•

Si no queremos continuar añadiendo puntos al trazo, simplemente seleccionaremos otra herramienta cualquiera. Así el último punto de ancla definido (angular o curvo) se convertirá en el extremo final del trazo.

En general, tras seleccionar cualquier herramienta y antes de empezar a utilizarla es conveniente configurar su funcionamiento a través de las opciones que nos ofrece el panel Propiedades. En el caso de la herramienta Pluma sus opciones son las siguientes:

•

Color del trazo: Sirve para seleccionar el color del trazo que vamos a dibujar.

•

Altura del trazo: Permite establecer el grosor del trazo que vamos a dibujar.

•

Extremo: En este cuadro de lista elegiremos cómo queremos que sean los extremos del trazo entre las opciones Ninguno, Redondeado y Cuadrado. La diferencia entre Ninguno y Cuadrado es que la primera concluye el trazo justo en la posición del punto de ancla, mientras que la segunda lo prolonga más allá del punto de ancla una longitud igual a la mitad del grosor del trazo.

•

Sugerencias: Si elegimos un estilo de trazo sólido, podemos solicitar a Flash CS4 que coloque los puntos de ancla en coordenadas enteras (no decimales) para evitar que el trazo se muestre difuminado. Esto es especialmente útil para mejorar el aspecto de los trazos de grosor muy fino.

•

Escala: Este parámetro afecta al comportamiento del grosor de los trazos cuando forman parte de animaciones en las que se producen cambios de escala. La opción Estándar aplica el cambio de escala sobre el grosor, mientras que la opción Ninguno, Horizontal y Vertical también varían el grosor del trazo, pero aplicándole sólo la componente de escalado horizontal o vertical, respectivamente. Por ejemplo, en la secuencia superior de la siguiente figura se muestra una animación en la que el rectángulo ha sido dibujado con la opción de escala Estándar; mientras que el de la secuencia inferior ha sido dibujado con la opción de escala Ninguno. no traslada el cambio de escala al grosor, de modo que éste permanece siempre constante. Las opciones

•

Estilo del trazo: Aquí podremos seleccionar uno de los estilos predeterminados, o bien pulsar el icono Editar estilo de trazo ( ) para definir un estilo diferente.

•

Unión y Angular: El cuadro de lista Unión nos permite establecer cómo queremos que sean las uniones de los segmentos rectos: angulares (ingletes), redondeadas o biseladas. Si seleccionamos la opción Inglete, podremos establecer una longitud máxima para la unión a través del valor del cuadro de texto Angular. Las unidades de este cuadro de texto están basadas en el grosor del trazo. Por ejemplo, el valor 3 indica que la longitud de la unión angular no podrá ser superior al triple del grosor del trazo; si lo superara se aplicaría automáticamente una unión biselada. En la zona superior de la siguiente figura se muestran los tres tipos de uniones y en la zona inferior se ha asignado el valor 2 a Angular para impedir que la unión angular sea más larga que el doble del grosor del trazo (observe que el extremo se ha biselado).

Si al dibujar un trazo lo cruzamos consigo mismo, Flash CS4 creará automáticamente un punto de ancla en la posición del cruce. Dentro de cada capa, todos los trazos fusionados, es decir, dibujados con el icono desactivado (bien con la herramienta Pluma activado, aunque pertenezcan a la misma capa, se consideran trazados diferentes. o bien con cualquier otra de las que describiremos a continuación), se consideran una misma forma, mientras que los trazos dibujados como objetos independientes, es decir, con el icono A continuación se resumen algunas otras posibilidades interesantes de la herramienta Pluma y sus herramientas anidadas: •

Si queremos extender un trazo que hemos dibujado anteriormente, bastará con que coloquemos el puntero sobre cualquiera de sus puntos extremos hasta que adquiera la forma , hagamos clic, y definamos el resto de los puntos de ancla como lo hacemos habitualmente.

•

Si estamos dibujando un trazo como objeto independiente (con el icono activado) y queremos unirlo con otro trazo (de su misma capa o no) también dibujado como objeto independiente, bastará con que acerquemos el puntero hasta cualquiera de sus puntos extremos y, cuando adquiera la forma , hagamos clic.

•

Si mantenemos pulsada la tecla Mayús mientras hacemos clic para definir un punto de ancla, Flash interpretará que queremos colocarlo alineado horizontal, vertical o diagonalmente con el punto de ancla anterior.

•

Para añadir un punto de ancla en un segmento intermedio de un trazo ya dibujado, activaremos la herramienta Añadir punto de ancla ( ) y haremos clic sobre la posición del trazo que nos interese. El punto de ancla insertado no alterará la forma original del trazo, pero sí nos proporcionará nuevos controladores de tangencia que podremos modificar con la herramienta Subselección, como se explica en la sección siguiente.

•

Para eliminar un punto de ancla de un trazo ya dibujado, activaremos la herramienta Eliminar punto de ancla ( ) y haremos clic sobre él. 28

Si queremos convertir un punto de ancla angular en curvo o viceversa, activaremos la herramienta Convertir punto de ancla ( ). A continuación, si hacemos clic sobre un punto de ancla se convertirá en angular, y si hacemos clic sobre él y, sin soltar el botón del ratón, lo arrastramos, se convertirá en un punto de ancla curvo y podremos definir su información de tangencia. 2.3.2.4. Las herramientas Subselección y Selección La herramienta Subselección ( ) sirve para cambiar la posición de los puntos de ancla, mover trazados (combinación de trazo y relleno) y modificar la información de tangencia en los puntos de ancla (de cualquier trazado, no sólo de los dibujados con la herramienta Pluma). El procedimiento para utilizar esta herramienta es el siguiente: 1. Activamos la herramienta Subselección (

) en el panel Herramientas.

2. Hacemos clic sobre el trazado que queramos modificar. Se mostrarán sus puntos de ancla. 3. Para mover el trazado completo, haremos clic sobre un punto intermedio de cualquiera de sus segmentos y, sin soltar el botón del ratón, lo arrastraremos a su nueva ubicación. 4. Para cambiar la posición de un punto de ancla, haremos clic sobre él y, sin soltar el botón del ratón, lo arrastraremos hasta su nueva ubicación. 5. Para modificar la información de tangencia en un punto de ancla haremos clic sobre él. Se mostrarán así sus controladores de tangencia y, a continuación, haremos clic sobre los extremos de estos controladores y, sin soltar el botón del ratón, los arrastraremos hasta obtener el resultado apropiado. Por defecto, los controladores de ambos lados se mueven a la vez, pero si mantenemos pulsada la tecla Alt se modificará sólo aquél que estemos arrastrando. Por ejemplo, en la siguiente figura se muestra lo sencillo que es hacer crecer la joroba de un dromedario arrastrando uno de los puntos de ancla con la herramienta Subselección.

La herramienta Selección ( ), además de servir para seleccionar cualquier objeto que tengamos sobre el escenario con la finalidad de modificar posteriormente sus propiedades o desplazarlo, tiene un comportamiento especial en el caso de los trazados según la apliquemos sobre un segmento o sobre un punto de ancla: •

Al acercar el puntero a un punto intermedio de un segmento comprobaremos que adquiere esta forma , y si hacemos clic sobre el segmento y mantenemos el botón del ratón pulsado mientras lo arrastramos, podremos cambiar su forma como si tirásemos de él (o lo empujásemos). Esta técnica de dibujo puede resultar muy intuitiva para algunos diseñadores, aunque conviene tener en cuenta que introduce nuevos puntos de ancla en el trazo.

•

Por el contrario, al acercar el puntero a un punto de ancla angular (punto de ancla en el que se produce una discontinuidad de la dirección de tangencia), el puntero adquirirá esta forma . En este caso, al hacer clic y arrastrar el ratón se desplazará el punto de ancla, exactamente igual que si lo arrastrásemos con la herramienta Subselección.

Por ejemplo, en la siguiente figura se ilustra la secuencia de pasos para convertir el dromedario anterior en un camello utilizando la herramienta Selección.

Truco Hay un detalle que puede ayudarnos a discernir cuándo es más conveniente utilizar la herramienta Subselección y cuándo la herramienta Selección: al activar la herramienta Subselección Flash nos muestra los puntos de ancla, indicándonos que nosotros somos los responsables de modificarlos; sin embargo, al utilizar la herramienta Selección no nos los muestra, pues en este caso es el propio programa el que se encargará de modificarlos intentando adaptarlos a los cambios de curvatura que imprimamos al trazo.

2.3.2.5. La herramienta Línea Esta herramienta sólo sirve para dibujar líneas rectas. Una vez activada, haremos clic sobre el punto del escenario en el que queramos iniciar la línea y, sin soltar el botón del ratón, lo arrastraremos hasta el punto final. Si queremos que la recta dibujada sea horizontal, vertical o que forme un ángulo de 45º con la horizontal, mantendremos pulsada la tecla Mayús hasta después de soltar el botón del ratón.

2.3.2.6. La herramienta Rectángulo/Óvalo/PolyStar Esta herramienta sirve para dibujar rectángulos, elipses (y sectores de elipses), polígonos y estrellas. Bajo ella se anidan las 5 herramientas siguientes (recuerde que puede acceder a las herramientas anidadas haciendo clic sobre el icono y manteniendo el botón del ratón pulsado unos instantes): •

Rectángulo (

•

Óvalo (

•

Rectángulo simple (

•

Óvalo simple (

•

PolyStar (

)

) )

)

¿Por qué hay dos herramientas para dibujar rectángulos y otras dos para dibujar óvalos? Las herramientas Rectángulo y Óvalo permiten dibujar formas fusionadas o independientes, configurando a priori ciertos parámetros como el radio de acuerdo de sus vértices o los ángulos inicial y final. Sin embargo, una vez dibujada la forma, ya no podremos modificar estos parámetros directamente, pues Flash CS4 sólo distinguirá sus puntos de ancla. Por el contrario, las herramientas Rectángulo simple y Óvalo simple sólo permiten dibujar objetos independientes, con los mismos parámetros de configuración que las herramientas Rectángulo y Óvalo, pero ofreciéndonos la posibilidad de modificarlos (los parámetros) incluso después de haber dibujado la forma, aunque no podremos acceder a sus puntos de ancla. En otras palabras, un rectángulo/elipse dibujado con la herramienta Rectángulo/Óvalo es interpretado por Flash CS4 como un trazado cualquiera, es decir, como un conjunto de puntos de ancla y sus respectivas direcciones de tangencia, pero un rectángulo/elipse dibujado con la herramienta Rectángulo simple/Óvalo simple no se degrada a ser un trazo cualquiera y mantiene el privilegio de ser modificado a través de los parámetros que le confieren el estatus de rectángulo/elipse. El procedimiento general para utilizar estas herramientas es el mismo: 1. Activar la herramienta en el panel Herramientas. 2. Configurar sus parámetros en el panel Propiedades. 3. Hacer clic sobre el escenario y, sin soltar el botón del ratón, arrastrarlo diagonalmente para definir el tamaño de la forma.

Los parámetros de configuración que ofrecen estas herramientas en el panel Propiedades son los mismos que en el caso de la herramienta Pluma (ya explicados anteriormente), acompañados de algunos otros específicos de cada tipo de forma y que se describen a continuación. Las herramientas Rectángulo/Rectángulo simple nos permiten configurar los radios de acuerdo de los vértices, bien de forma conjunta si mantenemos el icono de los eslabones unido, o bien de forma independiente si hacemos clic sobre este icono para desunirlos.

Los radios positivos sitúan el centro de curvatura del acuerdo dentro del rectángulo, mientras que los negativos lo sitúan en su exterior. También disponemos del botón Restablecer para recuperar la configuración predeterminada.

Truco Mientras arrastramos el ratón para dibujar un rectángulo, existen varias teclas que podemos pulsar para obtener resultados concretos. Por ejemplo, si mantenemos pulsada la tecla Mayús se creará un cuadrado perfecto, mientras que si usamos la tecla Alt, el punto sobre el que hayamos hecho clic inicialmente se considerará como centro del rectángulo en lugar de como vértice. También podemos utilizar las teclas Flecha arriba y Flecha abajo para modificar el radio de los acuerdos. Por último, si en lugar de hacer clic y arrastrar para dibujar el rectángulo, simplemente mantenemos pulsada la tecla Alt mientras hacemos clic, aparecerá un cuadro de diálogo en el podremos configurar con precisión el tamaño y el radio de los acuerdos. La herramienta Óvalo/Óvalo simple, gracias a sus parámetros, además de elipses también permite dibujar sectores de elipse, arcos elípticos y coronas (o sectores de coronas).

La elipse/sector/arco/corona se dibuja desde el radio configurado como Ángulo inicial hasta el configurado como Ángulo final. El origen de estos ángulos está fijado en la posición que ocuparía la marca de las 3 en un reloj y su sentido positivo es el de avance de las manecillas del reloj (sentido dextrógiro). En la siguiente figura se ilustran diversos resultados según el ángulo inicial sea menor o mayor que el final.

Si configuramos el parámetro Radio interior dibujaremos una corona en lugar de un sector. El valor de este parámetro establece el tamaño del agujero central como un porcentaje del tamaño total de la forma.

Al activar la casilla Cerrar trazado se incluirán en la forma los segmentos correspondiente a los radios necesarios para cerrar el sector o corona, pudiendo afectar al hecho de si la forma posee relleno o no.

Truco Mientras arrastramos el ratón para dibujar una elipse/arco/sector/corona, si mantenemos pulsada la tecla Mayús se creará una forma circular perfecta, mientras que si usamos la tecla Alt el punto sobre el que hayamos hecho clic inicialmente se considerará como centro de la forma en lugar de como extremo. Además, si en lugar de hacer clic y arrastrar para dibujar la elipse, simplemente mantenemos pulsada la tecla Alt mientras hacemos clic, aparecerá un cuadro de diálogo en el podremos configurar con precisión su tamaño. Tras dibujar un rectángulo o elipse simple, podemos hacer clic sobre él con la herramienta Selección para alterar sus parámetros en el panel Propiedades, pero también podemos arrastrar directamente los nodos asociados a estos parámetros. En el caso de los rectángulos simples aparece un nodo en cada esquina, que está asociado al radio del acuerdo en ese vértice. Arrastrando estos nodos modificaremos el radio del acuerdo. En el caso de las elipses aparecen tres nodos, aunque dos de ellos están inicialmente superpuestos. El nodo central controla el radio interior, y los dos nodos superpuestos controlan el ángulo inicial y final. La herramienta PolyStar sirve para dibujar polígonos regulares y estrellas. La única opción que nos ofrece en el panel Propiedades es el botón Opciones, que nos conduce al siguiente cuadro de diálogo.

En el cuadro de lista Estilo elegiremos si queremos crear un Polígono o una Estrella. El número de lados/puntas puede estar comprendido entre 3 y 32. La opción Tamaño de puntos de estrella controla la longitud de las 32

puntas relacionándola con el radio total de la estrella y su valor debe estar comprendido entre 0 y 1 (esta opción no tiene ningún efecto en el caso de los polígonos).

2.3.2.7. La herramienta Lápiz. La herramienta Lápiz ( ) es sin duda la más intuitiva de todas; basta con activarla en el panel Herramientas, hacer clic sobre el escenario y, sin soltar el botón del ratón, arrastrarlo como si estuviésemos utilizando un lápiz en el mundo real. Esta herramienta sólo crea trazos, sin relleno. No obstante, tampoco es ajena a las sofisticaciones que permite el mundo digital, y que en su caso se manifiestan a través de tres modos de funcionamiento que se seleccionan a través del icono Modo lápiz ( ) en la zona inferior del panel Herramientas: •

Modo enderezar ( ): Intenta reconocer figuras geométricas en los trazos que dibujamos; por ejemplo, si dibujamos un trazo parecido a una circunferencia, Flash CS4 lo convertirá automáticamente en una circunferencia perfecta.

•

Modo suavizar ( ): Atenúa las irregularidades que suelen introducirse al dibujar a pulso con el ratón.

•

Modo tinta ( ): No introduce ninguna modificación más allá de convertir el trazo en una curva de bézier, de modo que el resultado es bastante fiel a lo que hemos dibujado, aunque siempre conllevará un pequeño suavizado, pues de otro modo el número de puntos de ancla sería altísimo.

En la siguiente figura se muestra el resultado de aplicar estos tres modos al dibujar un trazo aproximadamente circular.

Truco Sea cual sea el modo de dibujo que elijamos para la herramienta Lápiz, siempre podremos obtener trazos perfectamente horizontales/verticales si mantenemos pulsada la tecla Mayús mientras arrastramos el ratón.

2.3.2.8. La herramienta Pincel La herramienta Pincel ( ) sirve para dibujar rellenos sin contorno, y consiguientemente no permite definir un grosor para el trazo. Esto provoca inicialmente cierta confusión, pues como usuarios pensamos que estamos dibujando trazos, pero no es así, estamos dibujando rellenos. Tras activar la herramienta podremos configurar tres aspectos de su funcionamiento mediante iconos que aparecen en la zona inferior del panel Herramientas: •

Modo pincel ( ): Por defecto (modo Pintar normal ) los rellenos creados con la herramienta Pincel se superpondrán a cualesquiera otros rellenos o trazos que pudiera contener la capa activa. No obstante, activando el modo Pintar rellenos ( ), la herramienta Pincel sólo pintará sobre los rellenos y las zonas vacías (sin 33

afectar a los trazos), y activando el modo Pintar detrás ( ) sólo pintará sobre las zonas vacías (respetando los trazos y rellenos que ya pudiera contener la capa). Si ya tenemos un relleno seleccionado en el escenario, podemos activar el modo Pintar selección ( ) para que la herramienta Pincel sólo afecte a ese relleno. Por último, si activamos el modo Pintar dentro ( ), la herramienta Pincel sólo afectará al relleno sobre el que se encuentre el puntero del ratón al hacer clic inicialmente. Tenga en cuenta que mientras arrastra el ratón para crear un relleno con la herramienta Pincel parecerá ignorarse el modo elegido, pero en cuanto suelte el botón del ratón se aplicará el modo automáticamente. •

Tamaño del pincel ( ): Aquí seleccionaremos el tamaño aparente del pincel (recuerde que la herramienta Pincel no dibuja trazos sino rellenos, y esto nos impide seleccionar un grosor de trazo). El grosor del pincel es relativo al nivel de ampliación que tengamos aplicado al escenario en el momento de utilizar la herramienta Pincel. Por ejemplo, un tamaño de pincel generará un relleno más grueso con un nivel de ampliación determinado, que ese mismo tamaño de pincel utilizado con un nivel de ampliación mayor. En otras palabras, el tamaño real del pincel es inversamente proporcional al nivel de ampliación aplicado al escenario en el momento de crearlo.

•

Forma del pincel ( ): A través de esta opción podemos elegir distintas puntas de pincel; las puntas diagonales son particularmente interesantes porque permiten obtener efectos caligráficos que emulan a los plumines de antaño. La única opción de configuración que nos ofrece la herramienta Lápiz en el panel Propiedades es Suavizado. Este parámetro tiene la misma finalidad que el modo de lápiz (enderezar, suavizar o tinta) descrito en la sección anterior, es decir, tratar de suavizar las imperfecciones producidas al dibujar a pulso. Cuanto mayor sea el valor de Suavizado que establezcamos, más atenuará Flash las irregularidades. Truco

Al igual que con la herramienta Lápiz, con la herramienta Pincel también obtendremos rellenos perfectamente horizontales/verticales si mantenemos pulsada la tecla Mayús mientras arrastramos el ratón.

2.3.2.9. La herramienta Pincel rociador La herramienta Pincel rociador ( ) se encuentra anidada junto a la herramienta Pincel y sirve para emular el efecto de un aerógrafo, con la ventaja respecto al mundo real de que además nos permite definir la forma de las motas que deposita sobre el escenario. Por defecto, estas motas son circulares, pero podemos asignarles la forma de cualquier símbolo disponible en la biblioteca (en la siguiente unidad didáctica aprenderemos que los símbolos son como los actores de nuestra película). Por ejemplo, si disponemos de un símbolo con forma de copo de nieve y lo elegimos como forma de la herramienta Pincel rociador podremos crear fácilmente una nevada como ésta.

En la siguiente figura se muestran las opciones de configuración de la herramienta Pincel rociador. Si mantenemos activada la casilla Forma predeterminada se utilizarán motas redondeadas, de las que la única opción que podremos definir es el color (a través de la casilla de color que hay a la derecha de esta casilla). Por el contrario, si pulsamos el botón Editar accederemos a un cuadro de diálogo en el que podremos elegir cualquier de los símbolos de la biblioteca como forma para las motas de la herramienta Pincel rociador. Una vez elegida la forma (predeterminada o cualquiera de los símbolos), podremos configurar el tamaño de las motas mediante las opciones de escala. La forma predeterminada sólo ofrece una opción de escala, pues es circular, mientras que los símbolos permiten configurar por separado su escalado horizontal y vertical. Las tres opciones siguientes sirven para lograr cierto grado de heterogeneidad entre las motas: •

Escala aleatoria: Introduce una componente de aleatoriedad en el tamaño de las motas.

•

Girar símbolo: Adapta la inclinación del símbolo a la dirección en la que arrastremos el ratón. Por ejemplo, si arrastramos el ratón horizontalmente de izquierda a derecha, cada mota estará compuesta por el símbolo en su orientación inicial, mientras que si lo arrastramos de arriba a abajo, cada mota estará compuesta por el símbolo girado 90 grados a la derecha respecto a su orientación original. Esta opción sólo está disponible si elegimos para las motas un símbolo concreto en lugar de la forma predeterminada.

•

Rotación aleatoria: Aplica un giro aleatorio a cada mota para lograr mayor heterogeneidad. Al igual que la anterior, esta opción sólo está disponible si elegimos para las motas un símbolo concreto en lugar de la forma predeterminada.

Por último, mediante las opciones Anchura y Altura de la sección Pincel podemos configurar el tamaño de dispersión de la herramienta Pincel rociador. Cuanto mayor sea el tamaño del pincel, mayor será también la zona a la que afecte el relleno, pero con una menor densidad de motas.

2.3.2.10. La herramienta Deco La herramienta Deco ( ) son en realidad tres herramientas en una. Dos de ellas sirven para crear mosaicos a partir de la repetición de un mismo símbolo, bien rectangulares (Relleno de cuadrícula) o bien circulares (Pincel de simetría), mientras que la tercera es una herramienta de dibujo procedural (Relleno de enredadera) capaz de generar bellas enredaderas utilizando como flores y hojas los símbolos que le indiquemos. Una vez activada la herramienta Deco deberemos elegir cuál de sus tres modos de funcionamiento deseamos utilizar mediante el cuadro de lista que aparece en la zona superior de la sección Efecto de dibujo del inspector de propiedades.

Informacion El dibujo procedural (del inglés procedural drawing) es una técnica que consiste en representar gráficamente la evolución de ciertas rutinas informáticas.

Truco El resultado de los tres métodos de funcionamiento de la herramienta Deco es siempre un grupo de formas. Si queremos modificar estos grupos tendremos que seguir las instrucciones que se ofrecen en la sección 4.3.2.14.

2.3.2.10.1. Relleno de enredadera Esta función de la herramienta Deco sirve para rellenar las zonas vacías del escenario o de otros elementos presentes sobre él con motivos florales. Si hacemos clic sobre el escenario con esta herramienta observaremos que se empieza a desarrollar la ilustración paso a paso; ésta es la principal característica de los algoritmos de dibujo procedural, en los que el resultado final depende de decisiones puntuales que se toman en cada iteración o paso. La enredadera parecerá crecer ante nuestros ojos desde el punto sobre el que hayamos hecho clic, eligiendo un camino u otro en base a las decisiones que tome su algoritmo. En la siguiente figura se muestra el resultado de aplicar este efecto al interior de un pentágono.

El algoritmo de la función Relleno de enredadera nos permite utilizar una hoja y flor predeterminados, o elegir cualquier símbolo de la biblioteca en su lugar. Para ello sólo tendremos que pulsar los correspondientes botones Editar de la sección Efecto de dibujo.

Dentro del inspector de propiedades, en la sección Opciones avanzadas, encontraremos controles para configurar el Ángulo de rama, la Escala de patrón y la Longitud de segmento. Una escala menor producirá 36

un follaje más denso. Para que puedan aparecer flores es necesario que los segmentos/ramas tengan una longitud mínima (utilizando la hoja y flor predeterminada con una escala del 100 por cien, la longitud de segmento para que empiecen a aparecer flores debe estar alrededor de 12). Otra posibilidad espectacular de Relleno de enredadera es su capacidad para generar automáticamente una animación con el crecimiento del dibujo; bastará con que activemos la casilla Animar patrón e indiquemos cuántas iteraciones del algoritmo queremos recoger en cada fotograma de la animación (Paso de fotograma). Cuanto mayor sea el paso de fotograma, menos suave será el crecimiento.

2.3.2.10.2. Relleno de cuadrícula Al igual que la anterior, esta función de la herramienta Deco también actúa como un relleno, es decir, sirve para cubrir las zonas vacías del escenario o del elemento sobre el que hagamos clic. En este caso, en lugar de usar un motivo floral, crea matrices o tablas en las que cada celda está ocupada por un mismo elemento, que puede ser la forma predeterminada (un cuadrado) o cualquier otro símbolo que elijamos mediante el botón Editar del inspector de propiedades.

Mediante los controles de la sección Opciones avanzadas podremos establecer el Espacio horizontal, el Espacio vertical y la Escala de patrón, es decir, la separación horizontal y vertical entre las celdas de la matriz y el tamaño relativo del contenido de cada celda. En la siguiente figura se ilustra un ejemplo de aplicación de esta función en el que se ha creado una escuadrilla de aeroplanos rellenando el interior de un triángulo.

2.3.2.10.3. Pincel de simetría A diferencia de los dos anteriores, este modo de funcionamiento de la herramienta Deco no respeta los límites del escenario ni del elemento sobre el que hagamos clic, es decir, no es estrictamente un relleno, sino una función que nos permite crear espectaculares ilustraciones en las que un mismo elemento/forma se repite respetando ciertas simetrías angulares, similares a las del juguete Spirograph. La utilización de Pincel de simetría es muy poco intuitiva, pues es el resultado de una abstracción matemática en la que intervienen complejas relaciones angulares, por lo que en lugar de intentar

comprender el efecto de cada una de estas relaciones, es más aconsejable experimentar libremente para descubrir qué resultados se pueden obtener. Una vez activada esta herramienta deberemos recurrir a la sección Efecto de dibujo del inspector de propiedades para indicar si queremos utilizar la forma predeterminada (un cuadrado) u otro símbolo (botón Editar) como tesela de repetición. A continuación, en la sección Opciones avanzadas elegiremos uno de los siguientes algoritmos: • Reflejar a través de línea

• Reflejar a través de punto

• Girar sobre punto

• Conversión de cuadrícula

La utilización de todos ellos es idéntica, pero los resultados muy diferentes: al seleccionar el algoritmo aparecerán en el centro del escenario los controles que deberemos arrastrar para configurar el efecto (cada algoritmo utiliza un conjunto de controles diferente). Cada vez que hagamos clic sobre el escenario se incluirá un nuevo mosaico/conjunto de repetición asociado a esos controles, pero no existe ningún modo de eliminar un mosaico ya insertado. Por último, al cambiar de herramienta, el efecto completo se convertirá en un grupo de

formas, desvinculado de los controles que nos permitieron crearlo; en otras palabras, ya no podremos volver a acceder a los controles de ese mosaico para modificar su configuración.

2.3.2.11. La herramienta Borrador La herramienta Borrador (

) se utiliza como una goma de borrar en la vida real, con la peculiaridad de

permitirnos elegir la forma de borrado a través del icono Forma del borrador ( ), que se encuentra en la zona inferior del panel Herramientas; basta con hacer clic sobre el escenario y, sin soltar el botón del ratón, arrastrarlo sobre las zonas que queramos eliminar. No obstante, sus posibilidades son mucho más amplias, pues ofrece varios modos de funcionamiento que nos permiten discriminar entre trazos y rellenos, y que se seleccionan a través de los iconos Modo borrador ( ) y Grifo ( ) que se encuentran en la zona inferior del panel Herramientas: •

Borrar normal (

•

Borrar rellenos (

•

Borrar líneas (

•

Borrar rellenos seleccionados (

•

Borrar dentro ( ): Sólo borra dentro del relleno sobre el que se encuentre el puntero cuando hagamos clic inicialmente.

•

Grifo ( ): Sirve para borrar trazos o rellenos completos; bastará con activar este icono y hacer clic sobre el trazo/relleno que queramos eliminar (sin arrastrar el ratón).

): Borra tanto rellenos como trazos. ): Sólo borra rellenos, respetando los trazos. ): Sólo borra trazos, respectando los rellenos. ): Sólo borra dentro del relleno que tengamos seleccionado.

Truco Haciendo doble clic sobre el icono Borrador en el panel Herramientas se borra inmediatamente todo el contenido del escenario.

2.3.2.12. Selección de formas Con la herramienta Selección ( ) podemos activar un trazo o relleno haciendo clic sobre él. Si hacemos doble clic sobre un trazo se seleccionarán todos los demás trazos unidos a él que sean de su mismo color. Por el contrario, si hacemos doble clic sobre un relleno se seleccionarán, además del propio relleno, todos los trazos que componen su contorno, independientemente de que sean del mismo color o no. Truco Si ya hemos realizado una selección y queremos ampliarla con nuevas formas, bastará con que mantengamos pulsada la tecla Mayús mientras seleccionamos los nuevos objetos (bien con la herramienta Selección o bien con la herramienta Lazo). Con la herramienta Lazo ( ) también podemos seleccionar formas total o parcialmente; bastará con que hagamos clic sobre el escenario y, sin soltar el botón del ratón, lo arrastremos definiendo un contorno que abarque o entre en contacto con las formas que queramos seleccionar. En el caso de los objetos de fusión, sólo se seleccionará la parte de ellos (rellenos y trazo) interna al contorno que definamos con la herramienta Lazo, mientras que en el caso de los objetos independientes se seleccionarán completamente aunque sólo sean parcialmente abarcados por este contorno (no obstante, este comportamiento se puede cambiar desactivando la casilla Edición> Preferencias> General> Herramientas Selección y Lazo por contacto). En la siguiente figura se ilustra un ejemplo de utilización de la herramienta Lazo sobre un rectángulo dibujado como objeto de fusión y un círculo dibujado como objeto independiente. Observamos que sólo se ha seleccionado parte del contorno y relleno del rectángulo (la zona que aparece punteada), mientras que el círculo se 39

ha seleccionado por completo (como indica el cuadrado que aparece a su alrededor).

2.3.2.13. Combinación de formas Las formas pueden someterse a operaciones de álgebra de Bool para obtener resultados complejos. Para aplicar estas operaciones previamente deberemos seleccionar todas las formas implicadas y, a continuación, seleccionar el comando apropiado del menú Modificar> Combinar objetos: •

Unión: Crea un objeto independiente con todas las formas (o fracciones de formas) que tengamos seleccionadas, de modo que a partir de ese momento podremos desplazarlas y transformarlas como si fueran una sola forma. Este comando también sirve para convertir formas de fusión en formas independientes.

•

Intersección: Crea un objeto independiente a partir de las zonas en las que se solapan todas las formas independientes seleccionadas (no es aplicable a formas de fusión). La forma resultante utiliza el color de trazo/relleno de la forma situada más arriba en la pila (el orden de apilamiento de los objetos dentro de la misma capa puede modificarse mediante las opciones del comando Modificar> Organizar).

•

Perforación: Utiliza el primer objeto de la pila (el situado más arriba) para perforar todos los demás que tengamos seleccionados, es decir, borra de los demás objetos las zonas que están solapadas por el primero, que también es eliminado. A diferencia de las dos opciones anteriores no combina los objetos originales en uno nuevo, sino que los mantiene como objetos independientes.

•

Recorte: Utiliza el primer objeto de la pila (el situado más arriba) para recortar todos los demás que tengamos seleccionados, es decir, borra de los demás objetos las zonas que no están solapadas por el primero, que también es eliminado. Al igual que la opción anterior no combina los objetos originales en uno nuevo, sino que los mantiene como objetos independientes.

En la siguiente figura se ilustra el funcionamiento de estas 4 opciones aplicadas sobre un pentágono y una estrella.

2.3.2.14. Agrupar y desagrupar Siempre que nos interese manipular (trasladar o transformar) varias formas como si fueran una sola podemos agruparlas seleccionándolas y ejecutando el comando Modificar>Agrupar. El hecho de que varias formas estén agrupadas no implica que tengamos que renunciar a poder modificarlas por separado; si hacemos doble clic sobre un grupo del escenario con la herramienta Selección accederemos a la ventana de edición de ese grupo en concreto, en la que podremos trabajar con cada forma por separado. Sabremos que estamos en la ventana de edición del grupo porque en la zona superior de la ventana de Flash, junto a Escena 1, aparecerá el rótulo Grupo, que nos indica que lo que se está mostrando actualmente es un grupo que pertenece a la escena 1 de nuestra película. Una vez concluyamos la edición de las formas por separado, para regresar a la película principal simplemente tendremos que hacer clic sobre Escena 1.

Si, por cualquier motivo, decidiésemos que ya no nos interesa que varias formas sigan conformando un grupo podremos desagruparlas seleccionando el grupo con la herramienta Selección y ejecutando el comando Modificar>Desagrupar.

2.4. Modificación de objetos El resto de esta unidad didáctica es aplicable a todo tipo de objetos que coloquemos en el escenario, no sólo a formas. En la unidad didáctica siguiente se describirán los demás tipos de objetos que admite Flash. En general, para modificar cualquier objeto, lo primero que deberemos hacer es seleccionarlo con la herramienta Selección ( ). Una vez seleccionado el objeto, podremos desplazarlo con la propia herramienta Selección simplemente haciendo clic sobre él y, sin soltar el botón del ratón, arrastrándolo hasta su nueva ubicación. Si mantenemos pulsada la tecla Alt durante esta operación, el objeto original se mantendrá en su posición inicial y se creará un duplicado suyo en la posición final. Manteniendo pulsada la tecla Mayús durante esta operación restringiremos el desplazamiento del objeto a las direcciones horizontal, vertical o diagonal a 45º. Pueden utilizarse simultáneamente las teclas Alt y Mayús. Truco También podemos mover cualquier objeto seleccionado utilizando las teclas del cursor o ubicarlo en unas coordenadas específicas mediante los cuadros de texto X e Y del panel Propiedades. Borrar un objeto del escenario es tan sencillo como seleccionarlo con la herramienta Selección y pulsar la tecla Supr. Truco El Portapapeles es una zona de memoria capaz de contener un único objeto (al copiar o cortar un objeto nuevo se sobrescribe el que contenía anteriormente), que es compartida por todos los programas (permitiendo, por ejemplo, trasladar una imagen de Photoshop a Flash), y que se borra al apagar el ordenador. Los comandos para utilizar el Portapapeles se encuentran en el menú Edición. El comando Copiar almacena en el Portapapeles un duplicado del objeto que tengamos seleccionado. El comando Cortar traslada el objeto seleccionado al Portapapeles, eliminándolo de su ubicación original. El comando Pegar en el centro crea un duplicado del contenido del Portapapeles en el centro de la zona del espacio de trabajo que tengamos visible en ese momento. El comando Pegar in situ crea un duplicado del contenido del Portapapeles en la misma posición del escenario de la que fue copiado/cortado originalmente.

2.4.1. Transformación de objetos Flash nos ofrece seis operaciones de transformación de objetos (estas operaciones no se realizan directamente sobre los objetos, sino sobre un contorno rectangular que contiene al objeto, y al que nos referiremos como contorno de transformación): •

rotación: Girar el objeto.

•

sesgado: Desplazar paralelamente dos lados opuestos del contorno de transformación introduciendo una inclinación en los otros dos, de modo que el rectángulo inicial de transformación se convierte en un romboide.

•

escalado: Cambiar el tamaño del objeto.

•

distorsión: Nos permite convertir el rectángulo de transformación inicial en un trapezoide, es decir, modificar a nuestro antojo los ángulos de los vértices y la longitud de los lados. Resulta muy útil para crear efectos de perspectiva.

•

envoltura: Cada lado del rectángulo de transformación se convierte en una curva de bézier con tre nodos que podemos modificar (posición e información de tangencia) como un trazo cualquiera. Puede utilizarse por ejemplo, para simular el movimiento de una bandera.

•

simetría: Consiste en convertir el objeto en su simétrico horizontal o vertical. Las formas son los únicos objetos que admiten estos seis tipos de transformación; los demás objetos sólo admiten algunos de ellos (generalmente la rotación, el sesgado, el escalado y la simetría, pero no la distorsión ni la envoltura). El método más directo para transformar un objeto es activar la herramienta Transformación libre ( ) y hacer clic sobre el objeto para mostrar su rectángulo de transformación. El rectángulo de transformación que aparece de este modo nos ofrece nodos de control en los vértices y en el centro de cada lado, además de un nodo central que se denomina punto de transformación y que se utiliza como origen para ciertas transformaciones (por ejemplo, como centro de giro). A continuación se describe cómo realizar las operaciones de transformación:

•

Escalado: Arrastrar cualquiera de los nodos del contorno de selección.

•

Rotación: Colocar el puntero ligeramente en el exterior de cualquiera de los nodos de esquina y, cuando adquiera la forma , hacer clic y arrastrar el ratón para definir el giro.

•

Sesgado: Colocar el puntero sobre cualquiera de los segmentos comprendidos entre los nodos del contorno y, cuando adquiera la forma , hacer clic y arrastrar el ratón para definir el sesgado.

•

Distorsión: Hacer clic sobre el icono los nodos del contorno.

•

Envoltura: Hacer clic sobre el icono en la zona inferior del panel Herramientas y modificar cualquiera de los nodos del contorno como si se tratase de un punto de anclaje de un trazo.

•

Simetría: Esta operación se realiza a través de los comandos Modificar>Transformar>Voltear horizontalmente o Modificar>Transformar>Voltear verticalmente.

en la zona inferior del panel Herramientas y arrastrar cualquiera de

Truco Las operaciones de escalado, rotación, sesgado y simetría se aplican respecto al punto de transformación. Puede arrastrara el punto de transformación para cambiar su posición. Además, mientras arrastra el ratón para realizar cualquiera de estas transformaciones, si mantiene pulsada la tecla Alt se utilizará como punto de referencia el vértice opuesto al que esté arrastrando en lugar del punto de transformación. Truco Si desea cambiar el tamaño de un objeto sin distorsionar su relación ancho/alto, arrastre cualquiera de los nodos de los vértices del contorno de transformación mientras mantiene pulsada la tecla Mayús. Para realizar escalados, rotaciones o sesgados con precisión, lo mejor es recurrir al panel Transformar (Ventana>Tranformar), pues en él podemos configurar numéricamente las transformaciones. Primero seleccionaremos el objeto que queremos transformar, luego especificaremos los valores numéricos de la transformación y, por último, pulsaremos la tecla Intro para aplicar la transformación.

2.5. Trabajar con precisión en el escenario Flash nos ofrece tres elementos de referencia para colocar y modificar los objetos en el escenario: las reglas, las guías y las cuadrículas. Por sí solos, estos elementos no tendrían más valor que el de meras referencias visuales, pero combinados con las opciones de ajuste se convierten en un recurso de elevada precisión.

2.5.1. Reglas y guías Mediante el comando Ver>Reglas podemos mostrar/ocultar reglas en la zona superior e izquierda del escenario. Estas reglas utilizan la unidad que hayamos configurado en el cuadro de diálogo Propiedades del documento (Modificar>Documento), y su origen se encuentra en el vértice superior izquierdo del escenario. El sentido positivo de la regla horizontal es hacia la derecha y, el de la vertical, hacia abajo. Cuando arrastre un objeto en el escenario podrá ver sobre cada una de las reglas dos marcas de referencia que indican la posición de sus extremos. Las guías son líneas horizontales o verticales de referencia que podemos colocar en cualquier posición del escenario. Estas líneas no se mostrarán en la película final; sólo sirven de referencia durante la fase de edición. Para colocar una guía hay que hacer clic sobre cualquiera de las reglas y, sin soltar el botón del ratón, arrastrarlo hacia el interior del escenario para definir su posición. Arrastrando desde la regla superior obtendremos guías horizontales, mientras que haciéndolo desde la regla izquierda obtendremos guías verticales. Podemos crear tantas guías como deseemos, y también podemos utilizar la herramienta Selección para arrastrar una guía colocada anteriormente modificando su posición. Truco El comando Ver>Guías>Bloquear guías evita que podamos mover las guías accidentalmente. El comando Ver>Guías>Mostrar guías sirve para ocultar la guías, pero las guías no se pierden (ejecutando nuevamente este mismo comando volverán a aparecer). Si en algún momento desea deshacerse de todas las guías que ha configurado, ejecute el comando Ver>Guías>Borrar guías. Por el contrario, si desea eliminar sólo una guía, active la herramienta Selección, haga clic sobre la guía y, sin soltar el botón del ratón, arrástrela sobre la regla desde la que fue creada originalmente (las guías horizontales deberán arrastrarse sobre la regla superior y, las verticales, sobre la regla izquierda). El color de las guías, así como otras opciones a las que nos referiremos en la sección posterior "4.5.3. Ajuste", puede modificarse mediante el comando Ver>Guías>Editar guías.

2.5.2. Cuadrícula La cuadrícula es un entramado de líneas horizontales y verticales equidistantes que se muestra sobre el escenario en la fase de edición como referencia visual pero que, al igual que las guías, no se mostrará en la película final.

La cuadrícula se muestra y oculta alternativamente ejecutando el comando Ver>Cuadrícula>Mostrar cuadrícula. El comando Ver>Cuadrícula>Editar cuadrícula permite establecer el color de las líneas de la cuadrícula y la separación entre ellas. Se llama la atención sobre el hecho de que la distancia vertical puede ser diferente de la horizontal.

2.5.3. Ajuste El ajuste es una función disponible en las guías y la cuadrícula que les permite comportarse como si estuvieran "imantadas", atrayendo hasta su posición el puntero del ratón cuando éste se acerca a ellas. Por ejemplo, si queremos alinear un objeto con una guía, bastará con que lo arrastremos hasta sus proximidades para que Flash lo coloque automáticamente con total precisión. Para activar (alternativamente, desactivar) esta función disponemos de los comandos Ver>Ajuste>Ajustar a cuadrícula/guías. La distancia a la que se activa esta atracción se configura mediante la opción Precisión de ajuste de los cuadros de diálogo de edición de las guías y la cuadrícula (Ver>Guías/Cuadrícula>Editar guías/cuadrícula). Al arrastrar un objeto con la herramienta Selección veremos que aparece una pequeña circunferencia en el punto por el que empezamos a arrastrarlo. Esta circunferencia es el indicador de ajuste, y su tamaño crece cuando el objeto está afectado por la función de ajuste de alguna guía o de la cuadrícula. Si empezamos a arrastrar un objeto por un punto próximo a su contorno, Flash interpretará que queremos arrastrarlo exactamente por el contorno. En la siguiente figura se muestra la diferencia de tamaño del indicador de ajuste cuando el objeto no está bajo la atracción de ningún elemento (izquierda) y cuando ha sido atraído por una guía vertical (derecha).

Advertencia La visibilidad y el ajuste de las guías y la cuadrícula son características independientes; por ejemplo, la función de ajuste a cuadrícula puede aplicarse aunque ésta esté oculta.

2.5.3.1. Ajuste a objetos Además de a la cuadrícula y las guías, la función de ajuste también puede aplicarse desde los propios objetos ya existentes en el escenario mediante el comando Ver>Ajuste>Ajustar a objetos. En la siguiente figura se muestra el resultado de ajustar una imagen a un trazo.

2.5.3.2. Alineación de ajuste Alineación de ajuste nos permite utilizar como referencia de ajuste los siguientes elementos: •

Margen alrededor del escenario

•

Margen alrededor de los objetos

•

El centro horizontal y/o vertical de los objetos

Esta función de ajuste es independiente de las descritas anteriormente y se diferencia de ellas principalmente en dos aspectos: •

El sistema que utiliza para indicar que se está produciendo el ajuste no es el indicador circular sino unas líneas discontinuas.

•

Independientemente de qué punto del objeto estemos arrastrando, Alineación de ajuste siempre busca alinear el borde o el punto central del objeto que estemos arrastrando.

Para activar (alternativamente, desactivar) la función Alineación de ajuste ejecutaremos el comando Ver>Ajuste>Alineación de ajuste. En la siguiente figura se está arrastrando el transbordador espacial y las líneas discontinuas de Alineación de ajuste indican que está alineado con el margen izquierdo del borde del 44

escenario (línea vertical) y con el centro vertical del astronauta (observe que la línea discontinua horizontal se extiende hasta el astronauta para indicar que es el elemento de referencia).

Para configurar el funcionamiento de la función Alineación de ajuste tenemos que ejecutar el comando Ver>Ajuste>Editar alineación de ajuste, que nos conducirá al siguiente cuadro de diálogo.

En la zona superior de este cuadro de diálogo disponemos de opciones para activar/desactivar las diferentes referencias de ajuste, pero las opciones que realmente afectan al comportamiento de Alineación de ajuste son las de la sección Configuración de alineación de ajuste en la zona inferior (si no están visibles, pulse el botón Avanzado). Mediante estas opciones configuraremos el margen alrededor del escenario y alrededor de los objetos, e indicaremos si queremos alinear también el centro del objeto arrastrado respecto al centro horizontal y/o vertical de otros objetos presentes en el escenario. Información Recuerde que Alineación de ajuste es otra posibilidad de ajuste más, independiente de todas las demás. Por ejemplo, no es necesario tener activado el ajuste a objetos para que funcione Alineación de ajuste.

2.5.3.3. Ajuste a píxeles Mediante el comando Ver>Ajuste>Ajustar a píxeles podemos indicar a Flash que queremos colocar los elementos que arrastremos en coordenadas enteras. Si activamos este ajuste y aumentamos la ampliación del escenario hasta el 400 por ciento o más podremos ver la cuadrícula de píxeles. Información Las funciones de ajuste no sólo se aplican al desplazar objetos, sino también cuando les aplicamos cualquier transformación (escalado, distorsión, sesgado, ...).

2.6. Nivel de apilamiento En la unidad didáctica anterior aprendimos que el escenario está compuesto por capas, y que los objetos pertenecientes a las capas superiores solapan a los que se encuentran en las capas inferiores. Sin embargo, dentro de una misma capa puede haber varios objetos. Dentro de la misma capa, los objetos insertados después solapan a los insertados anteriormente, pero esto puede modificarse mediante las opciones del comando Modificar>Organizar: •

Traer al frente: Coloca el objeto seleccionado en la posición más superficial del orden de apilamiento, solapando a todos los demás que pudiera haber en su misma capa.

•

Traer hacia adelante: Intercambia el orden de apilamiento del objeto seleccionado con el del que se encontraba inmediatamente encima de él, de modo que, en lugar de estar solapado por él, pasará a solaparlo.

•

Enviar al fondo: Coloca el objeto seleccionado en la posición más profunda del orden de apilamiento, quedando así solapado por todos los demás que pudiera haber en su misma capa.

•

Enviar hacia atrás: Intercambia el orden de apilamiento del objeto seleccionado con el del que se encontraba inmediatamente debajo de él, de modo que, en lugar de solaparlo, pasará a estar solapado por él. Información

Los trazados fusionados dibujados en una capa siempre ocupan el nivel más profundo del orden de apilamiento dentro de esa capa, y no se pueden trasladar a otros niveles.

2.7. Alineación El panel Alinear (Ventana>Alinear) es, sin duda, la mejor opción cuando necesitamos alinear varios objetos o distribuirlos equidistantemente, pero también es muy útil cuando necesitamos asignarles las mismas dimensiones.

Antes de utilizar este panel deberemos haber seleccionado el o los objetos que deseemos alinear. Dos técnicas muy cómodas para seleccionar varios objetos con la herramienta Selección son: • Hacer clic sobre cada uno de ellos mientras mantenemos pulsada la tecla Mayús. • Hacer clic y, sin soltar el botón del ratón, definir un contorno que abarque todos los objetos que deseemos

seleccionar. Si este contorno incluyese objetos que no nos interesa seleccionar, podríamos anular su selección manteniendo pulsada la tecla Mayús mientras hacemos clic sobre ellos.

Una vez seleccionados los objetos, lo primero que tendremos que decidir es si queremos alinearlos/distribuirlos/redimensionarlos respecto al escenario, o respecto a sí mismos. Si decidimos realizar la operación respecto al escenario deberemos asegurarnos de activar el icono En escena (situado a la derecha del panel). El resto de los iconos están distribuidos en las cuatro secciones siguientes: • Alinear: Estos iconos alinearán el borde o la línea media

(horizontal o vertical) de los objetos seleccionados con el borde o la línea media del escenario o, si hemos decidico no utilizar el escenario como referencia, del espacio que ocupaban originalmente todos los objetos seleccionados. En la siguiente figura se muestra el antes y el después de

alinear la línea media horizontal de varios objetos respecto al escenario y respecto a sí mismos. •

Distribuir: Estos iconos distribuyen equidistantemente los bordes o líneas medias (según el icono sobre el que hagamos clic). Si elegimos como referencia el escenario, Flash introducirá dentro del escenario todos los objetos seleccionados que pudieran encontrarse fuera de él, y a continuación aplicará la distribución.

•

Coincidir tamaño: Estos iconos igualan los tamaños de los objetos seleccionados con el ancho y/o alto del escenario si hubiésemos elegido como referencia el escenario, o con el ancho y/o alto del más grande de los objetos seleccionados si hubiésemos desactivado el icono En escena.

•

Espacio: Estos iconos separan equidistantemente los objetos a lo largo/ancho del escenario, o a la largo/ancho del espacio que ocupaban originalmente, según esté activado o no el icono En escena. Se llama la atención aquí sobre el hecho de que los iconos de la sección Espacio distribuyen el espacio de separación entre los objetos, mientras que los de la sección Distribuir distribuyen los bordes o líneas medias a lo largo del espacio disponible. En la siguiente figura se ilustra un ejemplo de la diferencia entre usar el icono

(izquierda) y

el icono (derecha) con el escenario como referencia. Observe que el icono de la sección Distribuir coloca los objetos aprovechando todo el ancho del escenario y separando equidistantemente sus líneas medias verticales, que no es lo mismo que separar equidistantemente los bordes de los objetos, que es precisamente lo que hace el icono de la sección Espacio.

3. Procedimiento general para desarrollar una película con Flash El único objetivo de esta unidad didáctica es servir como toma de contacto rápida con Flash CS4 a través de un ejemplo concreto; en otras palabras, más que explicar detalladamente cómo realizar cada operación y sus variantes, nos concentraremos en el proceso global. Lo importante en este caso es entender las distintas fases que implica el desarrollo de aplicaciones con Flash, y que son las siguientes: •

Planificación: Antes de lanzarse a utilizar Flash es conveniente planificar con lápiz y papel cómo va a ser nuestra aplicación. Esta fase previa de análisis nos ayudará a detectar los factores más delicados. No existe un método universal para realizar esta planificación; cada uno puede utilizar la técnica con la que se sienta más cómodo. No obstante, sí conviene prestar especial atención a la descripción de las animaciones y el funcionamiento de los elementos interactivos. También conviene definir desde el primer instante cómo se va a publicar/distribuir la aplicación; por ejemplo, no es lo mismo crear una aplicación para Internet que para DVD. Sin lugar a dudas ésta es la fase más importante, pues en ella se determina el aspecto visual, el funcionamiento y la usabilidad de la aplicación. Algunos desarrolladores se refieren a esta fase como elaboración del guión multimedia o storyboard.

Información En el desarrollo multimedia es habitual hacer uso del anglicismo usabilidad al referirse a la facilidad de uso para el usuario final de una aplicación. Obviamente, la facilidad de uso dependerá fundamentalmente de un cuidado desarrollo de la interfaz de usuario, es decir, de los elementos (botones, menús, sonidos, imágenes, ...) con los que tiene que interactuar el usuario para manejar la aplicación. •

•

Recopilación de los activos: Una vez realizada la planificación dispondremos de una idea bastante aproximada de qué elementos multimedia necesitaremos para desarrollar la aplicación: imágenes, sonidos, vídeos, ... Conviene disponer de estos elementos desde el principio para evitarnos tareas posteriores de sustitución, y para apreciar durante el propio desarrollo qué aspecto tendrá finalmente la aplicación. Disposición de los activos en los fotogramas: Es en esta fase dónde comienza realmente el trabajo con Flash. Colocaremos los distintos activos en sus fotogramas correspondientes ayudándonos del escenario y diseñaremos las animaciones ayudándonos de la línea de tiempo. Implementación de los elementos interactivos: Generalmente esta fase no se realiza al terminar la anterior, sino al mismo tiempo. Consiste en implementar las acciones interactivas del proyecto, tanto iniciadas por el usuario final de la aplicación como las intrínsecas a ella misma, como pulsaciones de botones, detección de colisiones, arrastramiento de unos elementos sobre otros, ... Esta fase requiere la utilización del lenguaje de programación ActionScript. Entre los objetivos de este curso no se incluye aprender a programar con ActionScript en profundidad, pero sí adquirir las nociones básicas para poder establecer las funciones de interactividad más frecuentes. Depuración: Alcanzado este punto habremos terminado la fase de edición, pero no debemos olvidar probar concienzudamente nuestra aplicación para asegurarnos de que todo funciona como debiera, introduciendo las modificaciones y correcciones que fueran necesarias. Si es posible, pediremos a otros que prueben nuestro trabajo para valorar puntos de vista diferentes sobre su usabilidad (para quién ha desarrollado una aplicación es evidente cómo funciona, pero quizás no lo sea tanto para otros). Obviamente no es necesario esperar hasta terminar completamente la fase de edición para empezar a depurar la aplicación; las pruebas deben ser frecuentes también durante las fases de disposición de los activos en los fotogramas e implementación de los elementos interactivos.

•

Publicación: Ahora ya sólo nos queda mostrar a todos nuestro trabajo, publicándolo en el formato (película interactiva, secuencia de imágenes, vídeo, aplicación de escritorio Adobe AIR, ...) y en el soporte (CD-ROM, Internet, intranet, ...) previsto.

3.1. Planificación Descripción general Nuestra aplicación contendrá un automóvil, un garaje y dos botones, uno para hacer que el automóvil entre en el garaje y otro para hacer que salga. Activos necesarios La imagen de un automóvil visto desde atrás que obtendremos de terceros, el garaje y su puerta que los dibujaremos directamente con Flash CS4, y los dos botones que los tomaremos de las bibliotecas comunes de Flash. Tamaño de la aplicación 200 píxeles de ancho por 300 píxeles de alto. Publicación y distribución La aplicación se distribuirá como una película interactiva apta para ser incluida en páginas web. Guión multimedia Fotograma 1 5-10 11-20 21-26 30-35 36-45 46-51

Descripción Esperar hasta que se pulse el botón para entrar y saltar entonces al fotograma 5. Desaparece el botón para entrar y se abre la puerta del garaje. El automóvil entra en el garaje. Se cierra la puerta del garaje, aparece el botón para salir, y esperar hasta que el usuario lo pulse para saltar entonces al fotograma 30. Desaparece el botón para salir y se abre la puerta del garaje. El automóvil sale del garaje. Se cierra la puerta del garaje y se salta al fotograma 1.

3.2. Recopilación de los activos El único activo externo a Flash necesario en nuestro ejemplo es la imagen del automóvil. Esta imagen podemos dibujarla personalmente, encargársela a un diseñador u obtenerla a través de los múltiples repositorios de imágenes gratuitas disponibles en la Web. En este caso encontrará la imagen como un recurso adjunto a esta sección.

3.3. Disposición de los activos en los fotogramas Seguiremos estos pasos para comenzar el trabajo con Flash CS4: 1. Iniciamos Flash ejecutando el comando Inicio>Todos los programas>Adobe Flash CS4 Professional. 2. Si aparece una ventana indicándonos el plazo que nos queda para seguir probando Flash, nos aseguraremos de que está seleccionada la opción Deseo continuar usando este producto como prueba y pulsaremos el botón Siguiente. 3. En la ventana de bienvenida hacemos clic sobre la opción Archivo de Flash (AS 3), que se encuentra en la columna central. Si no aparece esta ventana podemos obtener el mismo resultado seleccionando en la barra de menús Archivo>Nuevo>Archivo de Flash (AS 3).

3.3.1. Configurar el documento Antes de empezar a colocar los activos en los fotogramas y definir las animaciones debemos configurar el tamaño de la película siguiendo estos pasos: 1. Ejecutamos el comando Modificar>Documento. Aparecerá el cuadro de diálogo Propiedades del documento.

2. En los cuadros de texto de la sección Dimensiones, escribimos 200 px en (anchura) y 300 px en (altura). Nos fijamos en que el valor de Velocidad de fotogramas es 24 fotogramas por segundo; esta velocidad es la misma que se utiliza en el cine y produce animaciones muy suaves, pero requiere equipos relativamente potentes. Al elegir la velocidad debemos pensar en el perfil medio de la audiencia de nuestro trabajo. En nuestro caso supondremos que nuestra audiencia es muy heterogénea y estableceremos una velocidad más conservadora para que incluso los usuarios con equipos más anticuados puedan tener una experiencia positiva. Escribimos 12 en el cuadro de texto Velocidad de fotogramas, este valor suele ser una decisión de compromiso apropiada para la mayoría de las aplicaciones destinadas a la Web. 3. Por último, pulsamos el botón Aceptar. El escenario se adaptará a sus nuevas dimensiones.

3.3.2. Crear las capas El escenario de Flash está compuesto por capas que se superponen unas a otras y, a su vez, cada una de estas capas podría contener varios elementos que también se solaparían entre sí. No obstante, se considera una buena práctica no ubicar más de un elemento en cada capa, muy especialmente si se trata de elementos que van a intervenir en animaciones. Las capas se representan mediante filas en la línea de tiempo; el contenido de cada fila (capa) es solapado por las filas (capas) que hay encima de ella en la línea de tiempo. Consecuentemente, al crear las capas de nuestra aplicación deberemos considerar cuál va a ser su orden de apilamiento; por ejemplo, si la capa del automóvil estuviera por encima de la capa correspondiente a la puerta del garaje, el automóvil no quedaría oculto debajo de la puerta cuando ésta se cerrase. En nuestro caso la capa del garaje debe estar debajo de la del automóvil, para que el automóvil solape al garaje, y a su vez, la capa del automóvil debe estar debajo de la capa de la puerta, para que al cerrarse la puerta quede oculto el automóvil. Además de estas tres capas necesitaremos algunas más, cuya utilidad se explicará a su debido tiempo a lo largo de esta sección. Seguiremos estos pasos para crear las capas: 1. El documento que hemos creado ya contiene una capa llamada Capa 1. Hacemos doble clic sobre este nombre para seleccionarlo; escribimos garaje y pulsamos la tecla Intro para confirmar que queremos cambiarlo. 2. Hacemos clic sobre el icono Insertar capa ( ), que se encuentra en la esquina inferior izquierda de la línea de tiempo. Aparecerá una nueva capa (fila) en la línea de tiempo por encima de la que ya teníamos; al encontrarse por encima, el contenido de esta capa solapará al de la capa garaje. 3. Hacemos doble clic sobre el nombre de la nueva capa (Capa 2), escribimos automovil y pulsamos la tecla Intro para confirmar el cambio. 4. Repetimos los 2 pasos anteriores para crear las capas mascara, puerta, botones, acciones y etiquetas. El resultado debe ser similar al que muestra la figura siguiente.

3.3.3. Fotograma 1 Si nos fijamos en la línea de tiempo comprobaremos que Flash ya ha insertado un fotograma en cada capa (las celdas contorneadas en color negro y con una circunferencia en su interior). Se trata de fotogramas vacíos (como indica el hecho de que el interior de la circunferencia sea blanco), pues aún no hemos insertado ningún contenido en ellos. 51

Seguiremos estos pasos para insertar los contenidos/activos del fotograma 1 (el botón para entrar, el automóvil, el garaje y la puerta del garaje): 1. Empezaremos con el botón. El procedimiento es siempre el mismo: hacer clic sobre el fotograma de la línea de tiempo al que queremos asignar el contenido e insertar el contenido en el escenario. En el caso de los botones nos aprovecharemos de que Flash CS4 incluye algunos botones predefinidos, evitándonos tener que crearlos personalmente. Hacemos clic sobre el fotograma vacío correspondiente a la capa botones; el fotograma se resaltará en azul. 2. Ejecutamos el comando Ventana>Bibliotecas comunes>Botones para acceder al panel de botones predefinidos. En este panel, desplazamos la lista de carpetas de botones hacia abajo hasta que quede visible la opción classic buttons, y hacemos doble clic sobre el icono con forma de carpeta que hay a su izquierda (o bien un solo clic sobre el icono de flecha que hay aún más a la izquierda). Se desplegará la lista de subcarpetas que hay en su interior. Localizamos la subcarpeta Key Buttons y hacemos doble clic sobre el icono con forma de carpeta que hay a su izquierda. El resultado debe ser similar al que muestra la figura siguiente. 3. En el panel de botones comunes hacemos clic sobre el botón key - up y, sin soltar el botón del ratón, lo arrastramos hasta situarlo aproximadamente centrado en la zona inferior del escenario. No se preocupe si no le queda perfectamente centrado; ya lo corregiremos posteriormente. Observe que el botón también se ha insertado en la lista inferior del panel Biblioteca; al fin y al cabo se trata de un actor de nuestra película, y es razonable que se haya insertado en el reparto. Fíjese también en el primer fotograma de la capa botones; ya no es un fotograma vacío sino un fotograma con contenido, como indica el hecho de que la circunferencia de su interior se muestre rellena.

4. Aprovechando que aún tenemos visible el panel de botones comunes, hacemos clic sobre el botón key down y, sin soltar el botón del ratón, lo arrastramos hasta la lista inferior del panel Biblioteca. De este modo lo tendremos a nuestra disposición cuando lo necesitemos posteriormente, sin tener que volver a acceder al 52

panel de botones comunes. Cerramos el panel de botones comunes haciendo clic sobre el icono Cerrar que hay en su esquina superior derecha. 5. Es un buen momento para guardar nuestro trabajo; es importante guardar frecuentemente para evitar pérdidas desastrosas en caso de fallo del suministro eléctrico u otras eventualidades. Ejecutamos el comando Archivo>Guardar y, en el cuadro de diálogo que aparece, seleccionamos la carpeta en la que deseamos almacenar nuestra aplicación (recuerde el nombre de esta carpeta; posteriormente necesitaremos acceder a ella), le asignamos un nombre (por ejemplo, automovil) en el cuadro de texto Nombre y pulsamos el botón Guardar. Nuestro trabajo se guardará en un archivo con el nombre indicado y la extensión .fla. La extensión .fla designa a los archivos de edición, es decir, a los archivos que podemos modificar y a partir de los que se crean las películas que finalmente publicaremos (y que ya no son modificables). 6. Ahora vamos a insertar la imagen del automóvil. El procedimiento es idéntico al anterior: hacer clic sobre el fotograma de la línea de tiempo al que queremos asignar el contenido e insertar el contenido en el escenario. Hacemos clic sobre el fotograma vacío de la capa automovil para seleccionarlo. Ejecutamos el comando Archivo>Importar>Importar a escenario. En el cuadro de diálogo que aparece seleccionamos el archivo automovil.gif y pulsamos el botón Abrir (recuerde que este archivo está disponible como un recurso adjunto a esta sección). La imagen del automóvil se insertará en el escenario y también, cómo no, en el panel Biblioteca. En el escenario, hacemos clic sobre la imagen del automóvil y, sin soltar el botón del ratón, lo arrastramos hasta colocarlo aproximadamente centrado encima del botón. El resultado debe ser similar al que muestra la figura siguiente.

7. Ahora vamos a dibujar el garaje, que simplemente estará compuesto por dos rectángulos: uno grande de color amarillo, y otro de color negro (para simular el interior del garaje cuando se abra la puerta) y más pequeño alineado con el borde inferior del amarillo. Como en los dos casos anteriores, comenzamos haciendo clic sobre el fotograma vacío de la capa garaje para indicar dónde queremos insertar los nuevos contenidos. Seleccionamos la herramienta Rectángulo ( ) y, antes de empezar a dibujar sobre el escenario, configuraremos los colores del rectángulo. En el panel Propiedades (que en el espacio de trabajo Conceptos básicos se encuentra a la derecha del escenario (agrupado con el panel Biblioteca); si no fuera así, ejecute el comando Ventana>Espacio de trabajo>Conceptos básicos y, si siguiera sin aparecer en la 53

posición indicada, ejecute seguidamente el comando Ventana>Espacio de trabajo>Restaurar 'Conceptos básicos'), hacemos clic sobre la casilla de color que hay a la derecha del icono con forma de lápiz. Se desplegará un panel para que seleccionemos el color del contorno del rectángulo; hacemos clic sobre el icono ( ) en la esquina superior derecha para indicar que no queremos que nuestro rectángulo tenga contorno. Ahora, también dentro del panel Propiedades, hacemos clic sobre la casilla que hay a la derecha del icono con forma de bote de pintura y, en la paleta que se despliega, hacemos clic sobre cualquier tono amarillo para seleccionar el color de relleno del rectángulo que vamos a dibujar. Hasta ahora, todos los activos que hemos colocado se encontraban en capas diferentes, de modo que se mantienen independientes y podremos alinearlos individualmente. Sin embargo, de forma predeterminada, los objetos dibujados directamente con Flash dentro de una misma capa (como será el caso d los rectángulos amarillo y negro) se fusionan en uno solo, de modo que si el rectángulo negro no nos quedase perfectamente alineado dentro del amarillo no podríamos corregirlo. Para cambiar este comportamiento predeterminado logrando que cada objeto dibujado mantenga su independencia aunque comparta capa con otros, pulsamos el icono Dibujo de objeto ( ), si no estuviera previamente pulsado (este icono se encuentra en la zona inferior del panel Herramientas). En el escenario, hacemos clic cerca de la esquina superior izquierda y, sin soltar el botón del ratón, lo arrastramos diagonalmente hacia la derecha y hacia abajo hasta las proximidades del borde derecho, dibujando un rectángulo que ocupe aproximadamente un cuarto de la altura del escenario. El resultado debe ser similar al que muestra la figura siguiente

Advertencia ¿Qué hacer en caso de equivocación? Lo más sencillo es recurrir al comando Edición>Deshacer, que nos permite deshacer la última operación efectuada. Ejecutando reiteradamente este comando podremos ir deshaciendo una a una las últimas acciones que hemos realizado. A continuación dibujaremos el rectángulo negro que simulará el interior del garaje, pero previamente nos aseguraremos de que está activada la opción Ajustar a objetos de la herramienta Rectángulo, que nos ayudará a alinear el borde inferior de ambos rectángulos como se explicará a continuación. Esta opción está 54

activada cuando aparece pulsado el icono ( ) que hay en la zona inferior del panel Herramientas; si no estuviera pulsado, haga clic sobre él para pulsarlo. Una vez efectuada esta comprobación y como ya está seleccionado el fotograma de la capa garaje, seleccionaríamos (no lo haga) el color negro para el relleno del rectángulo mediante la casilla que hay a la derecha del icono con forma de cubo de pintura en el panel Propiedades. ¿Por qué le hemos pedido que no realice este paso? Fíjese en la zona superior del panel Propiedades, donde se indica que estamos viendo las propiedades del objeto de dibujo, es decir, del rectángulo amarillo que acabamos de dibujar. Elegir un color diferente en el estado actual del panel Propiedades hubiera significado aplicar ese color al rectángulo amarillo. Pulsamos la tecla Esc para anular la selección del rectángulo, comprobando en la zona superior del panel Propiedades que la configuración presentada corresponde a la herramienta y, ahora sí, seleccionamos el color negro para el relleno del rectángulo mediante la casilla que hay a la derecha del icono con forma de cubo de pintura Hacemos clic aproximadamente en el horizonte medio del rectángulo amarillo y a un cuarto de su lado izquierdo, y arrastramos el ratón diagonalmente hacia la derecha y hacia abajo hasta el borde inferior, comprobando que aparece un círculo cuando aproximamos el puntero al borde inferior; este círculo es la expresión visible de la opción Ajustar a objetos que hemos activado previamente y nos asegura que si soltamos el ratón en ese momento Flash entenderá que queríamos soltarlo exactamente sobre el borde del objeto, aún cuando el puntero del ratón no se encontrase exactamente sobre él. 9. Ahora que ya tenemos insertados casi todos los contenidos del fotograma 1 (nos falta la puerta), los centraremos horizontalmente. Ejecutamos primero el comando Edición>Seleccionar todo para seleccionar todos los elementos de todas las capas, y a continuación los comandos Modificar>Alinear>En escenario (sólo si no hubiera ya una marca de verificación a su izquierda) para indicar que deseamos realizar la alineación respecto a los límites del escenario en lugar de respecto a los límites del rectángulo mínimo que contendría a todos los objetos seleccionados, y Modificar>Alinear>Centrado horizontal para centrarlos horizontalmente. El resultado debe ser similar al que muestra la figura siguiente.

10. Por último crearemos la puerta, pero en lugar de dibujarla, duplicaremos el rectángulo negro y lo cambiaremos de color. Ejecutamos el comando Edición>Anular todas las selecciones (o directamente pulsamos la tecla Esc para anular la selección como ya hicimos anteriormente en el caso del rectángulo amarillo) y, a continuación, hacemos clic sobre la herramienta Selección ( ). Seleccionamos el rectángulo negro haciendo clic sobre él en el escenario y ejecutamos el comando Edición>Copiar para almacenar un duplicado suyo en el Portapapeles. Antes de pegar este duplicado, hacemos clic sobre el primer fotograma de la capa puerta para indicar dónde queremos ubicarlo y, a continuación, ejecutamos el comando Edición>Pegar in situ para colocar el duplicado exactamente en la misma posición que el original. El rectángulo que tenemos ahora seleccionado es el duplicado (como indica el contorno azul que hay a su alrededor), no el original, y vamos a cambiar su color. En la zona inferior del panel Herramientas (no del panel Propiedades, pues en este panel se está mostrando actualmente la configuración del fotograma, no la del rectángulo) hacemos clic sobre la casilla que hay debajo del icono con forma de cubo de pintura y, en la paleta que se despliega, seleccionamos un tono marrón. 11. Antes de continuar destacaremos un hecho que podría llamarnos la atención. Activamos el panel Biblioteca para comprobar que no se encuentra en él ninguno de los tres rectángulos. ¿Por qué no aparecen si también son activos de la película? Porque los activos dibujados directamente sobre el escenario con las herramientas de Flash se consideran atrezzo, es decir, elementos circunstanciales que aparecen en un fotograma y que probablemente no vuelvan a utilizarse en el resto la película.

3.3.4. Fotogramas 5 al 10 Ésta es la secuencia inicial de entrada del automóvil en el garaje y consistirá en desplazar la puerta hacia arriba. El procedimiento es el siguiente: 1. En la línea de tiempo, hacemos clic sobre el fotograma 5 de la capa botones y ejecutamos el comando Insertar>Línea de tiempo>Fotograma clave vacío. Hemos insertado un fotograma clave porque en este fotograma de esta capa va a aparecer (en realidad desaparecer) un elemento (el botón). Lo hemos insertado vacío precisamente para que no se muestre el botón. Los fotogramas clave son aquéllos en los que aparecen elementos nuevos en el escenario (o desaparecen elementos que estaban previamente en el escenario). 2. Por el contrario, las capas automovil y garaje no sufrirán ninguna variación durante esta secuencia, por lo que no necesitaremos fotogramas clave. Hacemos clic sobre el fotograma 10 de la capa automovil y ejecutamos el comando Insertar>Línea de tiempo>Fotograma. Repetimos esta misma operación con la capa garaje. 3. La animación que vamos a asignar a la puerta se denomina interpolación de movimiento y es una de las novedades más relevantes de Flash CS4. En este tipo de animaciones sólo tenemos que definir los estados inicial y final (denominados estados clave o fotogramas clave), y Flash se encarga de interpolar los intermedios. Hacemos clic con el botón derecho del ratón sobre el fotograma 1 de la capa puerta y, en el menú contextual que se despliega, seleccionamos la opción Crear interpolación de movimiento. Aparecerá un cuadro de diálogo indicándonos que estas interpolaciones no pueden aplicarse sobre elementos del atrezzo y ofreciéndonos la posibilidad de convertirlo en un símbolo. Pulsamos el botón Aceptar para realizar la conversión (de modo que se creará un nuevo activo en la biblioteca llamado Símbolo 1) y aplicar la interpolación que, de forma predeterminada, tendrá una duración de 1 segundo, es decir, de 12 fotogramas (recuerde que al iniciar esta actividad guiada configuramos 12 fps como velocidad de fotogramas). 4. No vamos a acortar la duración de la animación hasta el fotograma 10, pues en realidad necesitaremos ampliarla en las secuencias posteriores. Lo que sí vamos a hacer es definir los estados clave de los fotogramas 5 y 10 mediante el Editor de movimiento. Hacemos clic sobre la lengüeta del panel Editor de movimiento para visualizarlo (en el espacio de trabajo Conceptos básicos este panel está agrupado con la línea de tiempo). Inicialmente este panel sólo muestra un fotograma, lo que no resulta demasiado útil. 56

Hacemos clic sobre el valor 1 que hay a la derecha del icono ( ) en la zona inferior y, sin soltar el botón del ratón, lo arrastramos hacia la derecha hasta que aparezca el valor 12 (también podríamos haber hecho doble clic sobre el valor 1 y escribir directamente el 12). El aspecto del panel Editor de movimiento debe ser similar al que se muestra en la figura siguiente.

5. Observamos que la columna Gráfico contiene una representación visual de la variación de cada propiedad (eje de ordenadas) a lo largo de los fotogramas que dura la interpolación (eje de abscisas). Actualmente todos estos gráficos son líneas horizontales porque no hay ninguna variación de las propiedades. Nosotros queremos que la puerta ascienda, de modo que tendremos que actuar sobre la propiedad Y, aunque si desplazásemos el panel Editor de movimiento hacia abajo comprobaríamos que, además de la posición, pueden interpolarse muchas otras propiedades, como el color. En la columna Gráfico hacemos clic con el botón derecho del ratón sobre el fotograma 5 de la propiedad Y y, en el menú contextual que aparece, seleccionamos la opción Añadir fotograma clave (estos fotogramas se denominan más precisamente fotogramas clave de propiedad, pues especifican un valor concreto para una propiedad dentro de una animación, a diferencia de los fotogramas clave a secas, que indican la aparición/desaparición de un elemento en el escenario; no obstante, generalmente nos referiremos a ellos también como fotogramas clave, pues el contexto evita cualquier equívoco). A continuación repetimos esta misma operación con el fotograma 10. Observamos que los fotogramas clave de propiedad se representan mediante cuadrados, que son más grandes y de color verde cuando están seleccionados (como lo están actualmente el 5 y el 10), y menores y de color negro cuando no están seleccionados (como es el caso actualmente del fotograma 1). 6. El fotograma clave de propiedad 5 no requiere ninguna modificación, pues en él la puerta debe mantener el mismo estado bajado que tenía inicialmente. Por el contrario, en el fotograma 10 la puerta debe haber ascendido, es decir, su propiedad Y debe haber disminuido de valor (el origen de coordenadas del escenario de Flash está ubicado en su esquina superior izquierda, con sentido positivo del eje de abscisas hacia la derecha, y sentido positivo del eje de ordenadas hacia abajo). Si desplazásemos ahora el fotograma clave de propiedad 10 se desplazaría también el 5, pues ambos están actualmente seleccionados. Hacemos clic sobre cualquier lugar vacío del editor de movimiento para anular la selección de los fotogramas clave de propiedad 5 y 10, que se volverán de color negro y, a continuación, hacemos clic sobre el cuadrado negro del fotograma clave 10 en la propiedad Y y, sin soltar el botón del ratón, lo arrastramos verticalmente hacia abajo mientras observamos cómo se eleva la puerta en el escenario. Soltamos el botón del ratón cuando la puerta deje completamente al descubierto el rectángulo negro que representa el interior del garaje, como muestra la figura siguiente.

7. Probamos la película pulsando la tecla Intro. Si hemos realizado los pasos anteriores correctamente aparecerá el botón momentáneamente en el escenario y, a continuación, la puerta se desplazará hacia arriba (al final queda visible sólo la puerta porque recuerde que su capa es la única que tiene 12 fotogramas, mientras que las demás se extinguen antes). Podemos probar la película siempre que queramos pulsando la tecla Intro, y no olvidemos ir guardando nuestro trabajo frecuentemente mediante el comando Archivo>Guardar. 8. Nuestro siguiente paso será simular que la puerta se repliega por dentro del garaje en lugar de ascender por delante de su fachada. Para ello recurriremos a una capa de máscara. Las capas de máscara sirven para enmascarar el contenido de otra capa, determinando qué zonas de ella se visualizarán y cuáles se volverán completamente transparentes. El contenido de la capa de máscara es invisible en la película final; sólo sirve para enmascarar los contenidos de otras capas. En el caso de la puerta, si sólo permitimos que se visualice la región de esta capa que se encuentre sobre el rectángulo negro lograremos simular que la puerta se pliega dentro del garaje. En otras palabras, el contenido de la capa de máscara determina qué zonas serán visibles en la capa a la que enmascara. Consecuentemente tendremos que crear una capa cuyo contenido sea el rectángulo negro y configurarla como máscara de la capa puerta. Comenzamos activando la línea de tiempo y ejecutando el comando Control>Rebobinar para asegurarnos de que el cabezal de reproducción (el indicador vertical rojo de la línea de tiempo) se sitúa en el primer fotograma (el 1), con la puerta en su posición bajada. Como la puerta está bajada, nos impide ver el rectángulo negro que queremos copiar para convertirlo en máscara, pero lo resolvemos haciendo clic sobre la columna encabezada por un icono con forma de ojo ( ) de la capa puerta en la línea de tiempo; aparecerá una cruz roja indicando que esa capa está actualmente oculta en el entorno de edición (permítanos hacer hincapié sobre el matiz de que la capa está oculta en el entorno de edición, pero se mostrará en la película final). Nos cercioramos de que está activada la herramienta Selección ( ) en el panel Herramientas y hacemos clic sobre el rectángulo negro para seleccionarlo. Ejecutamos el comando Edición>Copiar, hacemos clic sobre el primer fotograma de la capa mascara, y ejecutamos el comando Edición>Pegar in situ. Como esta máscara no va a cambiar a lo largo de la secuencia, hacemos clic sobre el fotograma 10 de la capa mascara y ejecutamos el comando Insertar>Línea de tiempo>Fotograma, para insertar un fotograma normal (no clave). Flash CS4 exige que la capa que va actuar como máscara se encuentre sobre la enmascarada en la línea de tiempo, y sin embargo nosotros tenemos la capa mascara debajo de la capa puerta; lo resolvemos haciendo clic sobre el nombre de la capa máscara en la línea de tiempo y, sin soltar el botón del ratón, arrastrándola hacia arriba hasta que 58

aparezca una línea de inserción negra justo encima de la capa puerta (al soltar el botón del ratón la capa máscara se ubicará sobre la capa puerta).Ya sólo nos queda hacer clic con el botón derecho del ratón sobre el nombre de la capa máscara y, en el menú contextual que se despliega, seleccionar la opción Máscara. De este modo, la capa que hay debajo de ella (puerta) se convertirá en su enmascarada. Además, si se fija en la línea de tiempo, comprobará que junto a las capas puerta y mascara aparece un icono de candado ( ), indicando que esas capas están bloqueadas, es decir, que no podemos alterar su contenido a menos que las desbloqueemos. 9. Probamos nuevamente la película pulsando la tecla Intro. Ahora la puerta debe replegarse por dentro del garaje, como muestra la siguiente secuencia. No ocurre así ¿verdad? Recuerde que habíamos ocultado la capa puerta en el modo de edición. Al pulsar la tecla Intro estamos solicitando a Flash que pruebe la película con la configuración actual del modo de edición, pero si pulsamos Control+Intro Flash la probará en el entorno de ejecución, es decir, con el mismo aspecto/comportamiento que tendrá la película final. Pulsamos Control+Intro y verificamos que en el entorno de ejecución sí se muestra la puerta a pesar de que está oculta en el modo de edición. Cerramos la ventana de prueba y restauramos la visualización de la capa puerta haciendo clic sobre la cruz roja que hay en la columna encabezada por el icono con forma de ojo. Por último, probamos nuevamente la película en el entorno de edición pulsando la tecla Intro y verificamos que ahora sí se muestra la puerta correctamente.

3.3.5. Fotogramas 11 al 20 En esta secuencia introduciremos el automóvil dentro del garaje recurriendo a una animación por interpolación clásica, a diferencia de la interpolación de movimiento que utilizamos en la sección anterior, pero en este caso además de interpolar la posición tendremos que interpolar el tamaño (o escala) del automóvil, reduciéndolo para que dé la sensación de alejarse. Las animaciones por interpolación de movimiento son más versátiles que las clásicas, pero en ciertos escenarios especialmente sencillos puede resultar más sencillo crear una interpolación clásica. Seguimos estos pasos: 1. Como la capa botones no va a sufrir ninguna alteración en esta secuencia, hacemos clic sobre el fotograma 20 de esta capa y ejecutamos el comando Insertar>Línea de tiempo>Fotograma. Por el mismo motivo, repetimos esta misma operación con la capas puerta, mascara y garaje. 2. La capa automovil va a ser la protagonista de esta secuencia. Hacemos clic con el botón derecho del ratón sobre cualquiera de sus fotogramas en la línea de tiempo y, en el menú contextual que aparece, seleccionamos la opción Crear interpolación clásica. Se mostrará una línea punteada dentro de los fotogramas de esta capa para indicar que no se han definido los fotogramas clave de la animación. Si se fija en la biblioteca comprobará que se ha creado un elemento nuevo llamado Animar 1. Las imágenes de mapa de bits no pueden animarse directamente, sino que deben convertirse en un tipo de activo especial denominado gráfico, y por eso se ha creado Animar 1.

Información A lo largo de esta actividad guiada hemos comprobado que no todos los activos visuales reciben el mismo trato por parte de Flash ni admiten las mismas posibilidades. Los rectángulos que dibujamos directamente sobre el escenario para crear el garaje se consideran atrezzo, y ni siquiera se incluyen en la biblioteca. La imagen que importamos del automóvil sí se incorporó a la biblioteca, pero con el estatus de imagen de mapa de bits, que tampoco admite ningún tipo de animación. Al aplicar una interpolación clásica sobre el automóvil se ha creado automáticamente un elemento nuevo en la biblioteca de tipo gráfico (Animar 1), que admite opciones de animación básicas. Si hubiéramos intentado crear una interpolación de movimiento sobre el automóvil, habría aparecido el mismo cuadro de diálogo que ya vimos en la sección anterior solicitando nuestra autorización para convertirlo en un elemento de tipo clip de película. Los clips de película, junto con los gráficos y los botones, constituyen un estatus especial dentro de los elementos de la biblioteca y se denominan símbolos. Los símbolos (gráficos, clips de película y botones) admiten animaciones, pero no todos del mismo modo ni con el mismo nivel de sofisticación. 3. En la línea de tiempo, hacemos clic sobre el fotograma 20 de la capa automovil y pulsamos la tecla F5 (que es equivalente a ejecutar el comando Insertar>Línea de tiempo>Fotograma) para extender la longitud de la animación. 4. Las interpolaciones clásicas no pueden beneficiarse del editor de movimientos, sino que tendremos que crear los fotogramas clave de un modo menos sofisticado. Hacemos clic sobre el fotograma 20 de la capa automovil y pulsamos la tecla F6 (que es equivalente a ejecutar el comando Modificar>Línea de tiempo>Convertir en fotograma clave) para convertirlo en un fotograma clave. La línea discontinua se convertirá en continua para indicar que ahora sí está bien definida la animación. Observe que los fotogramas clave de las interpolaciones clásicas se representan mediante círculos, en lugar de los rombos que utilizan las interpolaciones de movimiento (como la de la capa puerta). 5. Necesitamos otro fotograma clave en el fotograma 11, pues la animación del automóvil no se iniciará hasta este fotograma. Hacemos clic sobre el fotograma 11 de la capa automovil y pulsamos la tecla F6. El aspecto de la línea de tiempo debe ser similar al que muestra la siguiente figura.

6. El fotograma clave 11 no requiere ninguna modificación; simplemente lo hemos introducido para indicar que el automóvil debe mantener su mismo estado inicial hasta ese fotograma. Sin embargo, el fotograma clave 20 debe mostrar el automóvil dentro del garaje, de modo que en él tendremos que reducir el tamaño de automóvil (para simular que se ha alejado) y elevar su posición en el escenario (reducir el valor de su propiedad Y). Hacemos clic sobre el fotograma clave 20 de la capa automovil para seleccionarlo, nos aseguramos de que está visible el panel Propiedades (que es dónde definiremos las propiedades del fotograma clave, en lugar de en el editor de movimiento como hicimos en la interpolación de la sección anterior), y hacemos clic con la herramienta Selección ( escenario. 60

) activada sobre la imagen del automóvil en el

7. En la sección Posición y tamaño del panel Propiedades nos aseguramos de que está visible el icono con forma de eslabones enlazados ( ) junto a las opciones W y H (si no fuera así, tendríamos que hacer clic sobre el icono con forma de eslabón roto para mostrarlo). Este icono indica que cualquier transformación de tamaño se aplicará respetando la relación de aspecto original, es decir, que el automóvil no se achatará ni se estilizará. Información W y H son las iniciales de los términos ingleses width y height, que significan ancho y alto, respectivamente. 8. Hacemos clic sobre el valor del campo W (ancho) y, sin soltar el botón del ratón, lo arrastramos hacia la izquierda reduciendo su valor hasta que el tamaño del automóvil sea lo suficientemente pequeño como para entrar por la puerta del garaje (observe que el valor del campo H se reduce en sincronía con el del campo W). 9. Para cambiar la posición del automóvil podríamos alterar el valor del campo Y de un modo similar a cómo hicimos con el campo W en el paso anterior, pero elegiremos un método alternativo para ilustrar las diversas posibilidades que ofrece Flash. Asegurándonos de que está activada la herramienta Selección ( ) y de que el cabezal de reproducción se encuentra en el fotograma 20, hacemos clic sobre la imagen del automóvil en el escenario y pulsamos repetidamente la tecla Flecha arriba hasta introducirlo dentro del garaje. 10. Probamos la película pulsando la tecla Intro. El automóvil debe introducirse en el garaje reduciendo paulatinamente su tamaño, como ilustra la secuencia siguiente.

3.3.6. Fotogramas 21 al 26 En esta secuencia cerraremos la puerta del garaje dejando el automóvil oculto en su interior y mostraremos el botón para salir. El procedimiento a seguir es: 1. Como la capa garaje no va a sufrir ninguna alteración en esta secuencia, hacemos clic sobre el fotograma 26 de esta capa y ejecutamos el comando Insertar>Línea de tiempo>Fotograma. Repetimos esta misma operación con la capa mascara y la capa automovil. En este último caso aparece una línea punteada en la línea de tiempo entre los fotogramas 20 y 26 para indicar que uno de los extremos de la animación no está definido. Como en realidad no queremos animar el automóvil en esta secuencia, hacemos clic con el botón derecho del ratón sobre cualquier fotograma entre el 20 y el 26 de la capa automovil y, en el menú contextual que se despliega, ejecutamos el comando Quitar interpolación. 2. Hacemos clic sobre el fotograma 26 de la capa botones y ejecutamos el comando Insertar>Línea de tiempo>Fotograma clave vacío. Arrastramos el botón key - down desde la lista inferior del panel Biblioteca hasta la zona inferior del escenario. 3. Para asegurarnos de que este botón ocupa exactamente la misma posición que el botón para entrar, copiaremos sus coordenadas. Ejecutamos el comando Control>Rebobinar para devolver el cabezal de reproducción al primer fotograma. Nos cercioramos de que está activada la herramienta Selección ( ) en el panel Herramientas y hacemos clic sobre el botón para entrar. Nos fijamos en el panel Propiedades y anotamos en un papel los valores de los campos X y Y, que son las coordenadas del botón respecto a la esquina superior izquierda del escenario (estos valores deberían ser 100.3 y 260.3, respectivamente). Ejecutamos el comando Control>Ir al final para colocar el cabezal de reproducción en el fotograma 26. Hacemos clic sobre el botón para salir e introducimos los valores anotados previamente en los campos correspondientes del panel Propiedades. 4. Para definir el estado inicial de la animación de la puerta, hacemos clic sobre el fotograma 21 de la capa puerta y ejecutamos el comando Insertar>Línea de tiempo>Fotograma clave (o pulsamos la tecla F6). 5. Para definir el estado final de esta animación podríamos recurrir al editor de movimiento, pero como ya tenemos un fotograma clave en el que la puerta está bajada (fotograma 5), lo que haremos será copiar las propiedades de ese fotograma sobre las del fotograma clave que crearemos en el fotograma 26. Hacemos clic sobre el fotograma 26 de la capa puerta y ejecutamos el comando Insertar>Línea de tiempo>Fotograma clave (o pulsamos la tecla F6). Manteniendo pulsada la tecla Control hacemos clic sobre el fotograma 5 de la capa puerta para seleccionar sólo ese fotograma en lugar de toda la animación. Hacemos clic con el botón derecho del ratón sobre el fotograma 5 seleccionado de la capa puerta y, en el menú contextual que aparece, seleccionamos la opción Copiar propiedades. Manteniendo pulsada la tecla Control hacemos clic sobre el fotograma clave 26 de la capa puerta. Hacemos clic con el botón derecho del ratón sobre el fotograma 26 seleccionado de la capa puerta y, en el menú contextual que aparece, seleccionamos la opción Pegar propiedades. 7. Probamos la película pulsando la tecla Intro para comprobar que la puerta efectivamente se cierra una vez que ha entrado el automóvil en el garaje.

3.3.7. Secuencia de salida Salvo porque el automóvil sale del garaje en lugar de entrar, la secuencia de salida es idéntica a la de entrada: primero se abre la puerta, luego se mantiene abierta mientras se desplaza el automóvil y, por último, se cierra. En esta sección vamos a aprovechar esta similitud para agilizar la creación de la escena: 1. Hacemos clic sobre el fotograma 5 de la capa botones y, sin soltar el botón del ratón, lo arrastramos diagonalmente hacia la derecha y hacia abajo hasta alcanzar el fotograma 26 de la capa garaje, como muestra la figura siguiente, de modo que queden seleccionados todos los fotogramas comprendidos entre ambos.

2. Ejecutamos el comando Edición>Línea de tiempo>Copiar fotogramas para copiar todas las secuencias de la animación en el Portapapeles de Windows. 3. Ahora vamos a indicar dónde deseamos pegar los fotogramas que hemos copiado. Hacemos clic sobre el fotograma 30 de la capa botones y, sin soltar el botón del ratón, lo arrastramos diagonalmente hacia la derecha y hacia abajo hasta el fotograma 51 de la capa garaje. Es fundamental que la región donde vamos a pegar los fotogramas tenga la misma extensión que la región que hemos copiado. 4. Ejecutamos el comando Edición>Línea de tiempo>Pegar fotogramas. El resultado debe ser similar al que muestra la siguiente figura.

5. Nuestro siguiente paso será invertir la animación del automóvil que hemos pegado, pero si nos fijamos en su último fotograma (el 51) comprobaremos que es un fotograma común (no clave), que al invertirse debería ocupar la posición 30, pero como una secuencia siempre debe empezar con un fotograma clave, no se invertiría. Para resolver este detalle hacemos clic sobre el fotograma 51 de la capa automovil y ejecutamos el comando Modificar>Línea de tiempo>Convertir en fotograma clave. 63

6. A continuación hacemos clic sobre el fotograma 30 de la capa automóvil y, sin soltar el botón del ratón, lo arrastramos hasta el fotograma 51 de esta misma capa. Después ejecutamos el comando Modificar>Línea de tiempo>Invertir fotogramas. 7. Probamos la película pulsando la tecla Intro para verificar la secuencia completa. Sólo queda por resolver un pequeño detalle en el fotograma 51 ¿se atreve a descubrirlo? 8. Efectivamente, en este fotograma no debe estar visible el botón para salir. Hacemos clic sobre el fotograma 51 de la capa botones y ejecutamos el comando Modificar>Línea de tiempo>Borrar fotograma clave.

3.3.8. Etiquetas de fotogramas Incluso en un proyecto sencillo como el de este ejemplo, puede llegar un momento en el que resulte complicado identificar las distintas secuencias en la línea de tiempo. Para resolverlo vamos a asignar etiquetas a ciertos fotogramas, que además de su labor informativa cumplirán otra misión en la fase de implementación de elementos interactivos. Los pasos a seguir son éstos: 1. Hacemos clic sobre el fotograma 1 de la capa etiquetas y, en el campo Nombre del panel Propiedades, escribimos inicio y pulsamos la tecla Intro. Aparecerá un banderín rojo dentro del fotograma 1 para evidenciar la presencia de la etiqueta. 2. Hacemos clic sobre el fotograma 5 de la capa etiquetas y ejecutamos el comando Insertar>Línea de tiempo>Fotograma clave vacío. Ahora quedará visible la etiqueta completa del fotograma 1, no sólo su banderín. En el campo Nombre del panel Propiedades, escribimos entrar y pulsamos la tecla Intro. 3. Hacemos clic sobre el fotograma 30 de la capa etiquetas, ejecutamos el comando Insertar>Línea de tiempo>Fotograma clave vacío, y, en el campo Nombre del panel Propiedades, escribimos salir y pulsamos la tecla Intro. El resultado debe ser similar al que muestra la figura siguiente.

3.4. Implementación de los elementos interactivos Los únicos elementos interactivos de nuestro proyecto son los botones para entrar y para salir, y su cometido es enviar el cabezal de reproducción a la animación de entrada y a la animación de salida, respectivamente. Para crear estas interacciones tendremos que recurrir al lenguaje de programación de Flash: ActionScript. Concretamente lo que haremos será detener el cabezal de reproducción en el fotograma 1 a la espera de que se pulse el botón para entrar. Cuando se pulse el botón para entrar enviaremos el cabezal de reproducción al fotograma 5 y permitiremos que se reproduzca la animación de entrada, deteniendo nuevamente la reproducción en el fotograma 26 a la espera de que se pulse el botón para salir. Cuando se pulse este botón enviaremos el cabezal de reproducción al fotograma 30, permitiremos que se reproduzca la animación de salida y, al final, devolveremos nuevamente el cabezal al fotograma 1, con lo que quedará cerrado el ciclo. Una duda razonable en este momento podría ser ¿cómo vamos a distinguir un botón del otro en el código? Lo haremos asignándoles nombres de instancia diferentes. Recuerde que esta sección es un ejemplo para lograr una toma de contacto rápida con Flash CS4; no se pretende que entienda al detalle los códigos que vamos a utilizar a continuación. Seguimos estos pasos: 1. Ejecutamos el comando Control>Rebobinar para colocar el cabezal de reproducción en el fotograma 1. 2. Nos cercioramos de que está activada la herramienta Selección ( clic en el escenario sobre el botón para entrar.

) en el panel Herramientas y hacemos

3. En el panel Propiedades, hacemos clic sobre el cuadro de texto que contiene el indicador , escribimos entrar_btn y pulsamos la tecla Intro. De este modo habremos asignado un nombre al botón para entrar. 4. Ahora hacemos clic sobre el fotograma 26 de cualquier capa de la línea de tiempo para trasladar el cabezal de reproducción a esa posición. 5. Hacemos clic sobre el botón para salir y, en el cuadro de texto con el indicador del panel Propiedades, escribimos salir_btn y pulsamos la tecla Inro, como muestra la figura siguiente.

6. Hacemos clic sobre el fotograma 1 de la capa acciones y ejecutamos el comando Ventana>Acciones para acceder al panel en el que escribiremos el código ActionScript de las interacciones.

7. Escribimos el código que se muestra en la figura siguiente. Mientras escribe el código es posible que se desplieguen cuadros de lista con sugerencias para evitarle teclear todos los caracteres; si lo desea puede hacer clic sobre las opciones apropiadas de estos cuadros de lista, o bien ignorarlos y simplemente seguir escribiendo.

8. La primera línea de este código solicita al cabezal de reproducción que se detenga; las líneas de la 2 a la 4 definen una operación llamada entrar que consiste en enviar el cabezal de reproducción al fotograma etiquetado como "entrar" y continuar la reproducción a partir de él (¿recuerda que anunciamos en la sección anterior que las etiquetas de fotograma tenían otra utilidad además de la meramente informativa?); la línea 5 indica que la operación entrar debe ejecutarse cuando se haga clic sobre el botón llamado entrar_btn. Fíjese en la pequeña letra "a" que se ha incluido en el fotograma 1 de la capa acciones; esta "a" indica que ese fotograma contiene una "a"cción ActionScript. 9. Hacemos clic sobre el fotograma 26 de la capa acciones y ejecutamos el comando Insertar>Línea de tiempo>Fotograma clave vacío. 10. En el panel Acciones escribimos el código que muestra la siguiente figura.

11. Ya sólo nos queda lograr que el cabezal de reproducción salte al fotograma 1 cuando termine la animación de salir. Hacemos clic sobre el fotograma 51 de la capa acciones y ejecutamos el comando Insertar>Línea de tiempo>Fotograma clave vacío. 11. En el panel Acciones escribimos el código que muestra la siguiente figura.

3.5. Depuración Aunque Flash CS4 ofrece herramientas de depuración muy completas, en este ejemplo nos conformaremos con reproducir la película y comprobar que funciona correctamente siguiendo estos pasos: 1. Ejecutamos el comando Control>Probar película. Se iniciará el reproductor de archivos Shockwave Flash (swf) mostrando nuestra aplicación. No hemos utilizado la opción Probar (equivalente a pulsar simplemente la tecla Intro) porque las acciones y los botones no se simulan al probar la película dentro del entorno de edición de Flash. 2. Hacemos clic sobre el botón para entrar. Debería abrirse la puerta del garaje, entrar el automóvil en el garaje, cerrarse la puerta y aparecer el botón para salir. 3. Hacemos clic sobre el botón para salir. Debería abrirse la puerta del garaje, salir el automóvil del garaje, cerrarse la puerta y aparecer el botón para entrar. Su película debería comportarse como la que se incluye en la versión online de esta sección. 4. Hacemos clic sobre el icono Cerrar de la esquina superior derecha de la ventana de prueba para cerrarla y regresar a la interfaz de edición de Flash CS4. 5. Si algo no funcionase como debiera, sería el momento de corregirlo y volver a probar la película repitiendo el procedimiento explicado en esta sección.

3.6. Publicación ¡Enhorabuena! Si ha alcanzado este punto está a punto de terminar su primera aplicación interactiva con Flash CS4. Seguiremos estos pasos para mostrar al mundo nuestros progresos: 1. Ejecutamos el comando Archivo>Configuración de publicación. Aparecerá el cuadro de diálogo que se muestra a continuación. En este cuadro de diálogo podemos elegir en qué formatos queremos publicar nuestra película.

2. Nos aseguramos de que sólo quede activada la casilla Flash (.swf) y pulsamos el botón Publicar (que se encuentra en la zona inferior). Aparecerá brevemente una ventana informándonos sobre el proceso de creación del archivo swf. Este archivo se creará en la misma carpeta en la que hayamos guardado el archivo .fla. swf (ShockWave Flash) es un formato de ejecución, no de edición; en otras palabras, para modificar nuestra película no podremos hacerlo en el archivo swf, sino que tendremos que modificar el archivo fla y volver a generar un nuevo swf repitiendo el procedimiento descrito en esta sección. 3. Pulsamos el botón Aceptar del cuadro de diálogo Configuración de publicación para cerrarlo. 4. Ahora vamos a publicar nuestro archivo swf en la Web para poder enseñárselo a todos nuestros amigos. Ejecutamos nuestro navegador web (por ejemplo, Internet Explorer o Firefox) y accedemos a la página http://www.megaswf.com/, como muestra la figura siguiente. Se trata de una página que nos permite alojar gratuitamente nuestros archivos swf en la Web.

5. Pulsamos el botón Seleccionar archivo/Examinar y, en el cuadro de diálogo que aparece, localizamos y seleccionamos nuestro archivo swf, cuyo nombre es automovil.swf, y pulsamos el botón Abrir. 6. A continuación escribimos el resultado de la operación que se nos proponga en el cuadro de texto Anti-Spam y pulsamos el botón Upload. 7. El archivo tardará unos segundos en subirse al servidor de megaSWF. Al finalizar aparecerá una página similar a la siguiente. El enlace Share link es el que nos permitirá acceder a nuestra aplicación interactiva; lo copiamos en un papel para poder enviárselo a nuestros amigos.

8. Antes de cerrar Flash ejecutando el comando Archivo>Salir, no olvide guardar nuevamente su proyecto.

4. Los actores

En esta unidad didáctica aprenderemos a utilizar la biblioteca y plantearemos las diferencias entre los distintos tipos de actores (símbolos) que admite Flash. También se exponen algunas técnicas que sólo son aplicables sobre instancias de clips de película (Escala en 9 divisiones y transformaciones 3D), así como ciertas herramientas que facilitan la utilización de mapas de bits dentro de películas desarrolladas con Flash. En la segunda parte del bloque se introduce lo esencial del lenguaje de programación ActionScript: tipos de datos, variables, operadores, bifurcaciones, bucles, funciones, programación orientada a objetos y algunas clases de gran interés.

4.1. Biblioteca, símbolos e instancias Cada proyecto que creemos en Flash dispondrá de una biblioteca propia. En esta biblioteca podremos almacenar elementos multimedia (imágenes, sonidos, vídeos, tipos de letra, ...) que deseemos utilizar en varios fotogramas. Cada elemento almacenado en la biblioteca se denomina símbolo, y cada una de sus utilizaciones en el escenario se denomina instancia. El uso de la biblioteca nos aporta fundamentalmente estas ventajas: •

No tendremos que crear (dibujar o importar) el mismo elemento en varios fotogramas, sino que podremos arrastrarlo directamente desde la biblioteca a todos los fotogramas en los que necesitemos incluirlo.

•

Aunque utilicemos varias veces en nuestra película un mismo elemento de la biblioteca, Flash sólo tiene que almacenarlo una vez, de modo que el tamaño de la aplicación será menor y, consecuentemente, se transmitirá más rápido (especialmente importante en aplicaciones que se distribuyen a través de Internet).

•

Cada instancia de un mismo símbolo puede tener propiedades diferentes, como tamaño o color.

•

Si modificamos el símbolo, los cambios se reflejaran automáticamente en todas las instancias. Información Los símbolos son, en cierto modo, moldes a partir de los que podemos crear tantas instancias como necesitemos, con la particularidad de que cada instancia puede tener propiedades distintas (color y tamaño) y comportamientos muy diferentes. Por ejemplo, partiendo del mismo símbolo de un pez podríamos crear varias instancias en el mismo fotograma para simular un banco de peces.

Truco Aunque no disponga de los gráficos definitivos de su aplicación puede empezar a trabajar con Flash utilizando un símbolo temporal y sustituyendo su contenido en la biblioteca por el símbolo definitivo cuando esté disponible. Todas las instancias que hubiera creado de ese símbolo se actualizarán automáticamente. Por otro lado, también podemos cambiar el símbolo asociado a una instancia concreta mediante el botón Intercambiar que nos ofrece el inspector de propiedades. Al igual que cada proyecto de Flash posee una línea de tiempo, los símbolos también tienen cada uno su propia línea de tiempo. Consecuentemente, un símbolo puede contener un solo fotograma o varios, es decir, una imagen estática o una animación. Por supuesto, cada símbolo puede contener también varias capas. En cierta forma, las instancias que creemos de los símbolos serán como películas embebidas dentro de la película principal. Por si esto fuera poco, un símbolo también puede contener otros símbolos. El panel Biblioteca se encuentra en la esquina superior derecha del espacio de trabajo predeterminado; no obstante, si no estuviera visible podríamos acceder a él ejecutando el comando Ventana>Biblioteca. 70

En la zona inferior del panel se muestran los símbolos que contiene la biblioteca (en este caso 2) y otros datos como su tipo (en las siguientes secciones de esta unidad didáctica se explicarán los distintos tipos de símbolos). En la zona superior del panel Biblioteca se previsualiza el símbolo que tengamos seleccionado en la lista de la zona inferior. Si ensanchamos el panel Biblioteca podremos ver también cuántas instancias (Número de usos) hemos creado de cada símbolo, y otros datos que podrían ser de interés.

Cuando un proyecto contiene muchos símbolos, puede resultar engorroso localizarlos en el listado de la biblioteca. En estos casos, o simplemente si nos gusta ser organizados en el trabajo, podemos recurrir a las carpetas. Cada carpeta, cuando está plegada, ocupa una sola línea en el listado del panel Biblioteca, pero pueden contener en su interior cualquier número de símbolos o subcarpetas. Para crear una carpeta basta con hacer clic sobre el icono (que se encuentra en la zona inferior izquierda de la biblioteca), escribir el nombre que queramos asignarle, y pulsar la tecla Intro para confirmarlo. Cuando queramos desplegar el contenido de una carpeta sólo tendremos que hacer doble clic sobre su icono (no sobre su nombre; haciendo doble clic sobre el nombre podrá cambiarlo), y podremos volver a plegarla haciendo doble clic nuevamente sobre él. 71

Alternativamente, en lugar de hacer doble clic sobre el icono de la carpeta, también podemos hacer simplemente clic sobre la flecha que hay a su izquierda para obtener el mismo resultado. Observe que el icono de la carpeta se abre cuando tenemos desplegado su contenido y que la flecha que hay a su izquierda gira para apuntar hacia abajo.

La forma más sencilla de organizar los símbolos y las carpetas de la biblioteca es arrastrándolos con el ratón en la zona inferior del panel. Por ejemplo, si hace clic sobre un símbolo y, sin soltar el botón del ratón, lo arrastra sobre una carpeta, quedará almacenado dentro de ella. Utilizando este mismo procedimiento puede almacenar una carpeta (y todo su contenido) dentro de otra. Para extraer un símbolo/carpeta de una carpeta bastará con que despliegue la carpeta (haciendo doble clic sobre su icono), haga clic sobre el símbolo/carpeta y, sin soltar el botón del ratón, lo arrastre hasta una zona vacía del listado de símbolos. Para eliminar cualquier símbolo o carpeta (incluido todo su contenido) de la biblioteca, haremos clic sobre el símbolo/carpeta en el listado de la zona inferior y, a continuación, pulsaremos el icono (que se encuentra próximo a la esquina inferior izquierda). Básicamente existen dos formas de crear símbolos: •

Dibujar una forma directamente sobre el escenario, seleccionarla y arrastrarla sobre el panel Biblioteca para convertirla en un símbolo (o hacer clic sobre ella con el botón derecho del ratón y seleccionar la opción Convertir en símbolo).

•

Hacer clic sobre el icono desde cero.

de la zona inferior del panel Biblioteca para iniciar la creación del símbolo

En ambos casos nos encontraremos con un cuadro de diálogo similar al siguiente, en el que deberemos indicar qué tipo de símbolo deseamos crear y asignarle un nombre. La única diferencia en este cuadro de diálogo entre los dos métodos es que el primero nos solicita además que indiquemos dónde queremos ubicar el punto de registro; para elegir la posición del punto de registro haremos clic sobre el elemento que nos interese de la matriz de 3x3 que aparece a la derecha. El punto de registro de un símbolo es la posición por la que se "engancharán" sus instancias al escenario; podemos imaginar que cada vez que creamos una instancia de un símbolo sobre el escenario la enganchásemos a él mediante una chincheta y que la posición de la instancia en la que clavamos la chincheta es en punto de registro del símbolo. Mediante el inspector de propiedades o ActionScript podemos cambiar las coordenadas del punto de registro para desplazar la instancia.

A continuación se describen los distintos tipos de símbolos (gráficos, clips de película y botones) y las diferencias que existen entre ellos.

4.1.1. Gráficos Los gráficos son el tipo de símbolo que menos espacio de almacenamiento requiere. Generalmente lo utilizaremos para fondos o imágenes estáticas que se repiten en diferentes momentos de la película principal o de otros símbolos. También podrían contener animaciones, pero con una limitación: se reproducirían siempre sincronizados con el cabezal de la línea de tiempo principal. Por ejemplo, si el cabezal de la línea de tiempo principal avanza, también lo hará el de la línea de tiempo de la instancia del gráfico, y si el primero salta 2 fotogramas hacia atrás, también lo hará el segundo. Para aclarar este concepto vamos a realizar un ejemplo muy sencillo: 1. Abrimos el archivo ud05_ejemplo01.fla (lo encontrará como un recurso adjunto a esta unidad didáctica). 2. Si no está visible el panel Biblioteca, lo mostraremos ejecutando el comando Ventana>Biblioteca. Comprobaremos que dentro de la biblioteca hay un único símbolo, llamado Grafico y que es de tipo gráfico. La clase del símbolo, además de por la columna Tipo del panel Biblioteca, también es identificable por el icono que hay a su izquierda (que en el caso de los símbolos de tipo gráfico es ). 3. Hacemos doble clic sobre el icono del símbolo Gráfico para acceder a su modo de edición, en el que podríamos modificar el símbolo. 4. Lo primero en lo que debemos fijarnos es que en la zona superior del panel del escenario, junto a Escena 1 aparece el nombre del símbolo (Gráfico). Esto quiere decir que la línea de tiempo que se está mostrando no es la de la película principal, sino la del símbolo, que en este caso está compuesta por una sola capa y 5 fotogramas clave (recuerde que los fotogramas clave son aquéllos en los que se produce algún cambio respecto al fotograma anterior o siguiente). 5. Si el cabezal de reproducción (la línea roja vertical) no se encuentra en el fotograma 1, ejecutamos el comando Control>Rebobinar. Observamos en el escenario que el primer fotograma contiene el número 1.

6. Utilizamos las teclas . y , para hacer avanzar y retroceder (respectivamente) el cabezal de reproducción, comprobando que cada fotograma contiene un número del 1 al 5. Consecuentemente, este símbolo es una animación que va mostrando consecutivamente los números del 1 al 5. 7. Regresamos a la línea de tiempo principal haciendo clic sobre Escena 1 (en la zona superior izquierda del escenario), comprobando que contiene una sola capa con un único fotograma clave vacío. Recuerde que los fotogramas clave se simbolizan con un círculo que es de color negro cuando poseen algún contenido, y de color blanco cuando están vacíos. 8. Para crear una instancia del símbolo Gráfico hacemos clic sobre su icono en el panel Biblioteca y, sin soltar el botón del ratón, lo arrastramos hasta cualquier posición del escenario. Comprobaremos que el fotograma clave vacío pasa a ser un fotograma clave con contenido (el círculo del interior del fotograma pasará de estar vacía a rellenarse de color negro). 9. ¿Qué ocurriría si probásemos la película? Que como la línea de tiempo principal sólo contiene un fotograma, el cabezal de reproducción nunca cambiará de posición y, como la línea de tiempo de los gráficos está sincronizada con la principal, sólo se mostraría el primer fotograma del símbolo, es decir, el número 1. Pulsamos la combinación Control+Intro para verificar que efectivamente es así. Al terminar, cerramos la ventana de prueba. 10. Ahora alargaremos el número de fotogramas de la línea de tiempo principal durante el que se muestra el contenido de su fotograma clave. Hacemos clic sobre el fotograma 5 y pulsamos la tecla F5 (o ejecutamos el comando Insertar>Línea de tiempo>Fotograma) para extender el contenido del primer fotograma a los cuatro siguientes. 11. ¿Qué ocurriría ahora si probásemos la película? Que el cabezal de reproducción de la línea de tiempo principal avanzaría uno por uno desde el fotograma 1 hasta el 5 regresando después al fotograma inicial para repetir indefinidamente este proceso, y como el de la instancia del símbolo está sincronizado con él, también avanzaría cuatro veces y retornaría al fotograma 1. Consecuentemente se mostraría la animación del 1 al 5. Antes de probar la película vamos a recudir su velocidad de reproducción para poner analizar su funcionamiento con más detalle. Ejecutamos el comando Modificar>Documento (recuerde la unidad didáctica anterior), escribimos 2 en el cuadro de texto Velocidad de fotogramas, y pulsamos el botón Aceptar. Probamos la película pulsando la combinación Control+Intro. Al terminar cerramos la ventana de prueba. 12. Ahora prolongaremos el fotograma clave de la línea de tiempo principal hasta el fotograma 10. Hacemos clic sobre el fotograma 10 y pulsamos la tecla F5 para extenderlo. El resultado debe ser similar al que muestra la siguiente figura. 13. ¿Qué espera que ocurra ahora al probar la película? El cabezal de la línea de tiempo principal avanzará nueve veces y, consecuentemente, también lo intentará el de la instancia del gráfico, pero éste sólo contiene cinco fotogramas. ¿Qué hará Flash al llegar al quinto? La respuesta dependerá de cómo configuremos el comportamiento del gráfico. Los gráficos pueden configurarse para que se reproduzcan indefinidamente (en este caso al alcanzar el último fotograma se saltaría nuevamente al primero y veríamos una y otra vez la animación del 1 al 5), para reproducirse una sola vez (en este caso veríamos la animación del 1 al 5 durante los 74

cinco primeros fotogramas, luego permanecería visible el 5 durante los cinco fotograma siguientes y, por último, se repetiría todo el proceso cuando el cabezal de la línea de tiempo principal retornase el fotograma 1), o para mostrar siempre el mismo fotograma independientemente del desplazamiento del cabezal de reproducción. Para configurar estos comportamientos recurriremos al panel Propiedades. Nos aseguramos de que está activada la herramienta Selección, hacemos clic sobre el número que esté visible en el escenario para seleccionar la instancia del símbolo Gráfico y nos fijamos en el panel Propiedades. Si no estuviera desplegada la sección Reproducción indefinida, tendremos que hacer clic sobre la flecha que hay a su izquierda para desplegarla. 14. En el cuadro de lista que hay en esta sección, seleccionamos la opción Reproducir indefinidamente y probamos la película. Tras ver el resultado cerramos la ventana de prueba. 15. Repetimos el paso anterior con las opciones Reproducir una vez y Fotograma único y, al terminar, dejamos activada la opción Reproducir indefinidamente. 16. No cerramos este proyecto; continuaremos usándolo en la siguiente sección. Truco El cuadro de texto Primero que hay debajo del cuadro de lista que define el comportamiento de la instancia del gráfico nos permite definir cuál es el primer fotograma de su línea de tiempo, es decir, el primero que se mostrará cuando el cabezal de reproducción llegue a la posición que ocupa la instancia del gráfico en la línea de tiempo principal. Por ejemplo, si escribimos 3 en este cuadro de texto, el primer fotograma en reproducirse será el 3 (aunque si la instancia está configurada para reproducirse indefinidamente, en las reproducciones posteriores a la primera sí se mostrarían los fotogramas 1 y 2). En resumen: •

• •

Crear una instancia de un símbolo es tan sencillo como hacer clic sobre su icono en el panel Biblioteca y, sin soltar el botón del ratón, arrastrarlo sobre cualquier posición del escenario. Si la línea de tiempo contuviera varias capas, previamente deberíamos hacer clic sobre el fotograma de la capa en la que deseamos incluirlo. Los símbolos de tipo gráfico pueden contener animaciones, pero éstas siempre se reproducirán en sincronía con la línea de tiempo principal. El comportamiento de las instancias de los símbolos de tipo gráfico puede modificarse para que se reproduzcan indefinidamente, que se reproduzcan una sola vez, o que muestren siempre el mismo fotograma. Por supuesto, cada instancia de un mismo símbolo puede tener su propio comportamiento; por ejemplo, dos instancias de un mismo símbolo pueden estar configuradas para reproducirse de forma diferente, una indefinidamente y la otra sólo una vez.

4.1.2. Clips de película Los símbolos de tipo clip de película poseen un cabezal de reproducción propio e independiente del de la línea de tiempo principal (salvo porque la velocidad de reproducción es la misma); en otras palabras, el cabezal de la línea de tiempo principal puede tener un comportamiento y los de las instancias de los clips de película comportarse de un modo completamente diferente, pero todos ellos se desplazarán a la misma velocidad. De forma predeterminada, el cabezal de una instancia de un clip de película avanzará desde el primer fotograma hasta el último, y después retornará al primero reproduciéndose una y otra vez. La única forma de modificar este comportamiento es mediante ActionScript. En general, los clips de película se utilizan para crear animaciones que no están sincronizadas con la línea de tiempo principal (es decir, que se reproducen siguiendo una pauta independiente), o cuya reproducción puede ser alterada por el usuario. Por ejemplo, imagine un automóvil que puede moverse hacia delante o hacia atrás en función de qué botón pulse el usuario; éste sería un caso típico de aplicación para un clip de película. 75

Los clips de película son, en definitiva, películas completas que se pueden incrustar dentro de la película principal (o incluso anidarse dentro de otros clips de película). La única vinculación entre la película principal y las instancias de clips de película es la velocidad de reproducción, que es la misma para todas y se fija mediante Modificar>Documento. Para aclarar este concepto continuaremos el ejemplo de la sección anterior: 1. Empezaremos duplicando el símbolo inicial de tipo gráfico para crear un nuevo símbolo pero, en este caso, de tipo clip de película. En el panel Biblioteca, hacemos clic con el botón derecho del ratón sobre el símbolo Gráfico y, en el menú contextual que aparece, seleccionamos la opción Duplicar. Aparecerá un cuadro de diálogo para que configuremos las propiedades del símbolo duplicado. 2. Escribimos Clip en el cuadro de texto Nombre, seleccionamos la opción Clip de película en el cuadro de lista Tipo, y pulsamos el botón Aceptar. El aspecto de la biblioteca debe ser similar al de la siguiente figura. Observe que los símbolos de tipo clip de película se identifican mediante el icono . Truco En el cuadro de diálogo que aparece al duplicar un símbolo, que es el mismo que se utiliza cuando creamos un símbolo nuevo, disponemos de la sección Carpeta, mediante la que podemos especificar en qué carpeta de la biblioteca queremos almacenar el símbolo y también crear carpetas nuevas.

3. Antes de crear una instancia de este nuevo símbolo insertamos una capa nueva haciendo clic sobre el icono (en la zona inferior izquierda de la línea de tiempo). La nueva capa (Capa 2) contendrá un fotograma clave vacío que se extiende a lo largo de diez fotogramas. 4. Hacemos clic sobre el primer fotograma de la Capa 2 para asegurarnos de que la instancia del símbolo se creará en ese fotograma. 76

5. En el panel Biblioteca hacemos clic sobre el icono del símbolo Clip y, sin soltar el botón del ratón, lo arrastramos hasta el escenario colocándolo en una posición que no interfiera con la instancia que ya tenemos del gráfico. Independientemente del tipo de símbolo, las instancias se crean siempre de este modo. 6. Probamos la película pulsando Control+Intro y observamos que, aparentemente, no existe ninguna diferencia entre la instancia del gráfico y la del clip de película. Cerramos la ventana de prueba. 7. Ahora vamos a reducir la longitud de la película a un solo fotograma. En la línea de tiempo, hacemos clic sobre el fotograma 2 de una de las capas y, sin soltar el botón del ratón, lo arrastramos hasta el fotograma 10 de la otra capa para seleccionarlos. A continuación ejecutamos el comando Edición>Línea de tiempo>Quitar fotogramas. Las dos capas quedarán reducidas a un solo fotograma. 8. ¿Qué ocurriría si probásemos la película? Que la instancia del gráfico mostraría siempre su primer fotograma, pues el cabezal de reproducción de la película principal nunca avanza, mientras que la instancia del clip de película mostraría la animación completa del 1 al 5 indefinidamente, pues su cabezal de reproducción es independiente del de la línea de tiempo principal. Probamos la película pulsando la combinación de teclas Control+Intro para verificar que efectivamente ocurre así. 9. Cerramos la ventana de prueba y, asegurándonos de que está activada la herramienta Selección, hacemos clic en el escenario sobre la instancia del clip de película. Si nos fijamos en el panel Propiedades comprobaremos que existen tres diferencias fundamentales respecto a la instancia del gráfico: que no podemos indicar cómo se reproducirá (ya hemos comentado anteriormente que la reproducción de las instancias de clips de película se controla mediante ActionScript), que incluye controles para configurar la visualización 3D (encontrará más información sobre este asunto posteriormente dentro de esta misma unidad didáctica), y que existe un cuadro de texto que nos permite asignar un nombre a cada instancia. Este nombre es el que nos servirá para referirnos a las instancias desde el código ActionScript, es decir, para indicar a qué instancia queremos aplicarle las instrucciones que programemos en ActionScript. 10. Mantenemos este proyecto abierto para seguir utilizándolo en la siguiente sección. En resumen: •

Los clips de película son películas autónomas con su propio cabezal de reproducción, independiente del de la línea de tiempo principal.

•

La reproducción de los clips de película sólo puede controlarse mediante ActionScript.

•

Cada instancia de un clip puede tener un nombre, que nos servirá para referirnos a él desde el código ActionScript.

4.1.3. Botones Los botones son un caso particular de los clips de película, caracterizados por: •

Sólo contienen 4 fotogramas (aunque no tienen limitado su número de capas). Estos fotogramas tienen nombres propios: Reposo, Sobre, Presionado y Zona activa.

•

El cabezal de reproducción no está vinculado al de la línea de tiempo principal (como es el caso de los gráficos) ni puede controlarse mediante ActionScript (como es el caso de los clips de película), sino que responde automáticamente a las operaciones del ratón. Si el puntero se encuentra fuera de la zona activa del botón, el cabezal se mantendrá en el fotograma Reposo; si el usuario coloca el puntero sobre la zona activa del botón, el cabezal pasará al fotograma Sobre; y si el usuario hace clic sobre la zona activa del botón, el cabezal se mantendrá en el fotograma Presionado mientras se 77

mantenga pulsado el botón del ratón. El contenido del fotograma Zona activa es quién determina cuál es la zona sensible del botón. Información Las instancias de los botones, al igual que las de los clips de película, pueden recibir un nombre. Este nombre nos permitirá controlar ciertos aspectos de la instancia mediante ActionScript, por ejemplo, si el botón está visible o no. Para aclarar el funcionamiento de los botones vamos a continuar el ejemplo de las secciones anteriores creando un botón y dos instancias suyas, que sirvan para detener y reanudar la reproducción de la instancia del clip de película que ya tenemos en el escenario. Seguiremos estos pasos: 1. Empezaremos eliminando del escenario la instancia del gráfico. Asegurándonos de que está activada la herramienta Selección, hacemos clic sobre la instancia del gráfico y pulsamos la tecla Supr. 2. Hacemos clic sobre el icono del panel Biblioteca para crear un símbolo nuevo y, en el cuadro de diálogo que aparece, escribimos Boton como nombre del símbolo, seleccionamos el tipo Botón, y pulsamos Aceptar. Aparecerá la línea de tiempo del botón para que definamos el contenido de sus cuatro fotogramas. Observe que el nombre de los fotogramas se indica en la zona superior de la línea de tiempo. 3. Hacemos clic sobre el fotograma Reposo de la capa 1 para asegurarnos de que se incluirá en él el rectángulo que vamos a dibujar a continuación sobre el escenario. Activamos la herramienta Rectángulo, nos aseguramos de que está seleccionado el icono Dibujo de objeto (para que el rectángulo sea un objeto independiente), elegimos el color de fondo y de trazo que prefiramos (mediante las casillas que hay debajo de los iconos y en el panel Herramientas), hacemos clic sobre el escenario y, sin soltar el botón del ratón, lo arrastramos diagonalmente para dibujar un rectángulo de unos 150 píxeles de ancho por 50 de alto (en la unidad didáctica anterior aprendimos a utilizar la reglas y las guías para dibujar con precisión). 4. Activamos la herramienta Selección, hacemos clic sobre el rectángulo que acabamos de dibujar para seleccionarlo y, mediante el panel Alinear (Ventana>Alinear), lo centramos en el escenario. 5. Ahora vamos a copiar este mismo rectángulo en los demás fotogramas de la línea de tiempo y, posteriormente, cambiaremos sus colores de fondo para diferenciar los distintos estados. Hacemos clic con el botón derecho del ratón sobre el fotograma Reposo de la capa 1 y, en el menú contextual que se despliega, seleccionamos la opción Copiar fotogramas. 6. Hacemos clic con el botón derecho del ratón sobre el fotograma Sobre de la capa 1 y, en el menú contextual que se despliega, seleccionamos la opción Pegar fotogramas. El rectángulo se insertará en el fotograma pero el cabezal de reproducción se mantendrá en el fotograma 1, de modo que el rectángulo que estamos viendo en el escenario es el del fotograma 1 y no el que acabamos de pegar. Colocamos el cabezal de reproducción en el fotograma 2 pulsando la tecla . (punto). Cambiamos el color de fondo del rectángulo utilizando la herramienta Cubo de pintura. 7. Repetimos el paso anterior con los fotogramas Presionado y Zona activa. En el caso del fotograma Zona activa, el color del rectángulo es indiferente. El contenido de este fotograma, independientemente de su color, se considera la parte sensible del botón. 8. Una vez definidos los cuatro fotogramas del botón, hacemos clic sobre Escena 1 (en la zona superior del escenario) para regresar a la línea de tiempo principal. 78

9. Hacemos clic sobre el fotograma 1 de la Capa 1 (el que anteriormente contenía la instancia del gráfico) para activarlo, de modo que la instancia del botón que vamos a crear a continuación se incluya en él. 10. En el panel Biblioteca hacemos clic sobre el icono del símbolo Boton y, sin soltar el botón del ratón, lo arrastramos hasta colocarlo debajo y a la izquierda de la instancia del clip de película. 11. Pulsamos la combinación Control+Intro para probar la película. En la ventana de prueba podemos verificar que el botón responde correctamente cambiando de color cuando colocamos el puntero sobre su zona activa (fotograma Sobre) y cuando hacemos clic sobre él (fotograma Presionado). Cerramos la ventana de prueba. 12. Repetimos el paso 10 para crear otra instancia del botón, pero en este caso situándola a la derecha de la anterior. El aspecto del escenario debe ser similar al que muestra la siguiente figura. 13. Nuestra intención es que el botón de la izquierda reproduzca la animación de la instancia del clip de película, y que el botón de la derecha sirva para detenerla. Estos comportamientos se programarán mediante ActionScript, pero antes necesitamos el medio para referirnos a las instancias del clip y de los botones, y ese medio serán los nombres de instancia que les asignaremos a continuación. Con la herramienta Selección activada hacemos clic en el escenario sobre la instancia del clip para seleccionarla y, en el panel Propiedades, dentro del cuadro de texto <Nombre de instancia> escribimos animacion. Repetimos esta misma operación con cada una de las instancias del botón para asignarles, respectivamente, los nombres izquierdo y derecho. 14. Aunque no es obligatorio, crearemos una capa nueva en la línea de tiempo (Capa 3) haciendo clic sobre el icono (que se encuentra en la zona inferior izquierda de la línea de tiempo) para insertar en ella el código ActionScript (es frecuente aislar el código en una capa diferente a los demás contenidos para poder gestionarlo más fácilmente). 15. Hacemos clic sobre el fotograma 1 de la capa que acabamos de crear para activarlo y ejecutamos el comando Ventana>Acciones para acceder al panel en el que escribiremos el código ActionScript. 16. En primer lugar definiremos las funciones encargadas de iniciar y detener la animación introduciendo el siguiente código. 17. Y, a continuación, asignaremos un "oyente" a cada instancia del botón para que, en caso de detectar un clic del ratón, ejecute la función correspondiente. Introducimos las dos líneas siguientes a continuación del código anterior.

izquierdo.addEventListener(MouseEvent.CLICK,reproducir); 79

derecho.addEventListener(MouseEvent.CLICK,detener); 18. Probamos la película pulsando la combinación Control+Intro y verificamos que efectivamente se detiene la animación al pulsar el botón derecho y que se reanuda al pulsar el izquierdo. Información Observe que Flash ha introducido una "a" en el fotograma de la línea de tiempo al que hemos asignado el código "a"ctionScript anterior. Esta "a" nos ayudará a localizar de un vistazo los fotogramas que contienen código. En resumen: •

Los botones son clips de película con sólo cuatro fotogramas y cuyo cabezal de reproducción responde automáticamente a las interacciones del ratón sobre el contenido de su fotograma "Zona activa".

•

La misión de los botones se define mediante código ActionScript.

4.1.4. Edición de símbolos En las secciones anteriores hemos aprendido a crear símbolos, pero ¿cómo modificarlos? Existen dos posibilidades para acceder al modo de edición de un símbolo y modificar su contenido: •

Hacer doble clic sobre una instancia del símbolo en el escenario para acceder a su modo de edición en contexto. Este modo de edición mantiene visible el resto de los contenidos del fotograma, aunque de forma atenuada (para indicarnos que no podemos modificarlos). Recuerde que al modificar un símbolo estaremos afectando a todas las instancias suyas que hayamos creado.

•

Hacer doble clic sobre el icono del símbolo en el panel Biblioteca para acceder a su modo de edición fuera de contexto. Este modo de edición sólo muestra el símbolo que estamos modificando.

Sea cuál sea el modo de edición que elijamos, en la zona superior izquierda del escenario aparecerá el nombre del símbolo a la derecha de Escena 1, para recordarnos que el escenario/línea de tiempo que estamos viendo no es el principal, sino el del símbolo. Al concluir la edición del símbolo deberemos hacer clic sobre Escena 1 para regresar al escenario principal. Si en lugar del contenido del símbolo quisiéramos cambiar su nombre o su tipo (por ejemplo, convertir un gráfico en un clip de película) tendríamos que acceder a su ventana de propiedades haciendo clic con el botón derecho del ratón sobre el símbolo en la biblioteca y seleccionando la opción Propiedades. La ventana de propiedades de los símbolos posee un modo básico y un modo avanzado (el que se muestra en la imagen anterior es el modo avanzado, al que se accede pulsando el botón Avanzado en la ventana del modo básico). Excepto Activar guía para escala en 9 divisiones (que se explica en la siguiente sección), el resto de las opciones del modo avanzado están relacionadas con la manipulación del símbolo (no de sus instancias) mediante ActionScript, y su uso excede los objetivos de este curso.

4.1.4.1. Escala en 9 divisiones La herramienta Transformación libre escala los clips de película de forma uniforme, es decir, ampliando/reduciendo todas sus zonas por igual. Sin embargo, en algunos casos puede interesarnos que el 80

borde de un clip de película se escale de forma diferente a su interior. Por ejemplo, imaginemos que tenemos un clip de película que contiene un marco para fotografías y que queremos utilizar como marco para dos fotografías que tienen tamaño diferente. Con el sistema de escalado normal, al escalar el marco para la fotografía mayor resultaría un marco de mayor grosor.

Sin embargo, con el escalado en 9 divisiones podríamos escalar el marco a cualquier tamaño sin que aumentase su grosor.

Al activar la casilla Activar guías para escala en 9 divisiones Flash introduce en el símbolo dos guías punteadas horizontales y otras dos verticales que lo dividen en 9 porciones. Las porciones de los vértices jamás se escalan, la porción interior se escala uniformemente, las porciones centrales de los lados superior e inferior sólo se escalan horizontalmente, y las porciones centrales de los lados izquierdo y derecho sólo se escalan verticalmente. Para modificar la posición de las guías tendremos que acceder al modo de edición del clip de película, activar la herramienta Selección y arrastrarlas con el ratón. Una vez activado el modo de escala en 9 divisiones, todas las instancias del clip de película estarán afectadas por él, y cualquier escalado que realicemos (mediante la herramienta Transformación libre, mediante el inspector de propiedades, o mediante el panel Transformar) en una instancia se realizará de acuerdo a las normas explicadas anteriormente. Advertencia El modo de escala en 9 divisiones sólo es aplicable a símbolos de tipo clip de película; no a botones ni tampoco a gráficos. Además, este método de escalado no funciona con ciertos elementos que podrían contener los clips de película, como mapas de bits. Básicamente, la escala en 9 divisiones sólo funciona con los contenidos de tipo forma (recuerde la unidad didáctica anterior) de los clips de película. 81

4.1.5. Color y mezcla de las instancias Ya hemos indicado anteriormente que cada instancia puede tener propiedades (básicamente, tamaño y color) distintas. El tamaño (o cualquier otra transformación) podemos modificarlo directamente sobre el escenario con la herramienta Transformación libre (que ya fue estudiada en la unidad didáctica anterior). Sin embargo, el color no puede cambiarse con las herramientas Bote de tinta o Cubo de pintura, pues estas herramientas sólo actúan sobre formas, y no son aplicables a las instancias de símbolos. Para cambiar el color de una instancia tendremos que recurrir a su panel Propiedades, en el que encontraremos las secciones Efecto de color y Mostrar. El cuadro de lista Estilo de la sección Efecto de color nos ofrece opciones para alterar el brillo, el tono (Tinta) o el nivel de opacidad (Alfa) de la instancia. Las opciones Brillo, Tinta y Alfa son excluyentes, es decir, si configuramos una de ellas perderemos la configuración de las demás. Por el contrario, la opción Avanzadas de este mismo cuadro de lista (véase la figura siguiente) nos permite modificar simultáneamente el brillo, el tono y la opacidad basándonos en los valores originales del símbolo. Los porcentajes (primera columna) se aplican a las componentes roja, verde, azul y opacidad (alfa) originales del símbolo, y se les suma/resta el desplazamiento de la segunda columna para calcular el nuevo color. Por ejemplo, si el símbolo original es rojo puro y queremos que una instancia suya sea verde pura tendremos que escribir 0% en el porcentaje de la componente Rojo para anularla, y 255 en la segunda columna de la componente Verde. Tenga en cuenta que para recuperar el aspecto inicial de una instancia tendrá que seleccionar la opción Ninguno en el cuadro de lista Estilo. El cuadro de lista Mezcla de la sección Mostrar nos sirve para indicar cómo queremos que se comporten los colores de la instancia cuando solapen a otros elementos del escenario. Por ejemplo, si asignamos a una instancia el modo de mezcla Aclarar, se mantendrá el color de sus zonas más claras pero las más oscuras serán sustituidas por el color de las instancias a las que solape cuando éstas sean más claras; en otras palabras, la instancia adquirirá los tonos que haya debajo de ella si éstos son más claros que los suyos. Los modos de mezcla pueden generar efectos espectaculares, pero su uso requiere mucha práctica y cierto dominio de la teoría del color.

4.1.6. Visualización y transformaciones 3D Una de las novedades más interesantes de Flash CS4 es su motor de visualización 3D (tridimensional). Tradicionalmente las películas de Flash han sido planas o 2D, es decir, toda la acción transcurría dentro del mismo plano. Por el contario, a partir de Flash CS4 podemos simular que los elementos que componen la película se desenvuelven en un espacio tridimensional gracias a la aplicación de técnicas de perspectiva; ésa es precisamente la función del novedoso motor de visualización 3D. Esto no quiere decir que podamos crear elementos con volumen o alabeados (de momento Flash sólo admite elementos planos), sino que podemos visualizarlos y transformarlos dentro de un espacio 3D. A continuación (sólo en la versión en línea de este documento) encontrará un ejemplo de aplicación de las posibilidades 3D de Flash CS4. 82

El escenario tradicional de Flash tiene su origen de coordenadas ubicado en la esquina superior izquierda, con el eje X extendiéndose horizontalmente y en sentido positivo hacia la derecha, y el eje vertical extendiéndose verticalmente y en sentido positivo hacia abajo. Sin embargo, a partir de ahora deberemos pensar también que existe un eje Z que se extiende perpendicular a la pantalla y cuyo sentido positivo es el que se aleja de nosotros. El efecto de visualización 3D de Flash está basado en una perspectiva cónica simplificada (perspectiva paralela, frontal o con un único punto de fuga), en la que se asume que el observador está ubicado en un punto desde el que se traza un haz de rayos que cubren todo el espacio y que se proyectan (es decir, que quedan registrados o que dejan su marca) sobre un plano de proyección. El plano de proyección es lo que nos muestra el motor de visualización 3D de Flash, de modo que tenemos la sensación de estar ocupando la posición del observador. Advertencia Los efectos 3D de Flash sólo son aplicables a instancias de símbolos de tipo clip de película; no funcionan sobre botones, ni gráficos, ni formas. Antes de aprender a modificar la orientación y posición de las instancias dentro del espacio tridimensional nos detendremos en las opciones de configuración del otro factor determinante en el resultado de la perspectiva: la posición del observador. Para establecer la posición del observador tendremos que configurar los dos parámetros siguientes en el inspector de propiedades tras hacer clic con la herramienta Selección sobre cualquier instancia de clip de película que tengamos en el escenario:

•

Ángulo de perspectiva ( ): Es el ángulo con el que se abarca todo el ancho del escenario desde la posición del observador y, consecuentemente, determina la distancia del observador al escenario. Cuanto menor sea este ángulo, más lejos se ubicará el observador del escenario y, lógicamente, menos acusadas serán las diferencias de tamaño que simulan el efecto de profundidad (existirá menos diferencia de tamaño entre los objetos más alejados y los más próximos). Por el contrario, cuanto mayor sea el ángulo de perspectiva, más cerca se ubicará el observador del escenario (plano de proyección) y, consecuentemente, más se acentuará el efecto de profundidad. Por ejemplo, en la siguiente figura hemos colocado 3 instancias de una misma casa sobre el escenario. Con el ángulo de perspectiva predeterminado de 55 grados (parte superior de la imagen) resulta evidente que la casa de la izquierda está más alejada que la del centro, y que la casa de la derecha está más próxima al 83

observador que la del centro. Por el contrario, si reducimos el ángulo a 10 grados (parte inferior de la imagen), el efecto de profundidad se atenúa.

¡ •

Posición del punto de desvanecimiento ( ): Los dos controles de esta sección determinan las coordenadas X e Y de la posición hacia la que tienden los objetos cuanto más alejados están del observador. La coordenada Y establece la posición de la línea de horizonte, es decir, la altura a la que se encuentran los ojos del observador, mientras que la coordenada X indica la posición en la que convergen las rectas paralelas de los objetos cuando no se encuentran en planos paralelos al de proyección. El punto de desvanecimiento también puede interpretarse como la proyección ortogonal de la posición del observador sobre el escenario. La posición predeterminada del punto de desvanecimiento es el centro del escenario, y podemos recuperarla en cualquier momento pulsando el botón Restablecer de la sección Posición y vista 3D del inspector de propiedades.

El motor de visualización 3D de Flash utiliza el valor de Ángulo de perspectiva para establecer la relación entre tamaño y profundidad, y el valor de Posición del punto de desvanecimiento para desplazar los objetos en función de su profundidad. Este sistema es muy poco exigente desde el punto de vista del cálculo, por lo que es ideal para simular efectos 3D en tiempo real. Por supuesto, existen sistemas más complejos, como los que utilizan las aplicaciones de diseño asistido por ordenador (CAD), pero que requieren una potencia de cálculo muy superior. Los valores de Ángulo de perspectiva y Posición del punto de desvanecimiento son únicos para cada película de Flash, es decir, se aplican por igual a todos los elementos que colocamos sobre el escenario. Al colocar una instancia de un clip de película sobre el escenario se ubicará siempre en el plano de proyección, es decir, en el plano que contiene al escenario y cuya coordenada z es nula. Posteriormente podremos desplazarla o rotarla sacándola de ese plano utilizando las herramientas Rotación 3D ( 84

) y Traslación 3D

( ), o los paneles Propiedades y Transformar. Los objetos que no son instancias de clips de película (botones, gráficos, formas, ...) siempre residen en el plano del escenario, pues no son compatibles con las herramientas 3D. Obviamente, cualquier objeto plano que repose sobre el escenario será "inmune" al motor de visualización 3D, es decir, no se verá afectado por lo valores de Ángulo de perspectiva ni Posición del punto de desvanecimiento. Flash CS4 nos ofrece dos herramientas para modificar la posición y orientación de las instancias de clips de película en el espacio tridimensional: Rotación 3D ( ) y Traslación 3D ( ). Ambas están anidadas bajo el mismo icono en el panel Herramientas. Estas dos herramientas poseen un modo de funcionamiento global y otro local. En el modo global las transformaciones se realizan respecto al triedro de referencia del escenario (eje de abscisas horizontal, eje de ordenadas vertical y eje Z perpendicular a la pantalla), mientras que en el modo local se utiliza como referencia el propio triedro de la instancia. Una instancia que no haya sido sometida a ninguna transformación 3D mantendrá su triedro de referencia paralelo al del escenario, pero en cuanto cambiemos su orientación también lo hará la de su triedro. El triedro de referencia de una instancia está sólidamente unido a ella, es decir, "padecerá" las mismas transformaciones a las que sea sometida la propia instancia. Por ejemplo, en la siguiente figura hemos partido de una instancia de una casa a la que hemos aplicado una rotación alrededor del eje Y de 45 grados. Esta primera rotación hubiera producido el mismo resultado en modo global o en modo local, pues inicialmente el triedro de cualquier instancia es paralelo al principal del escenario. No obstante, una vez efectuada esta primera rotación, el triedro de la casa ya no coincide con el del escenario, de modo que una rotación de 45 grados alrededor del eje X produce distinto resultado según se realice en modo global (arriba) o local (abajo). Para seleccionar el modo global o local de las transformaciones 3D tendremos que activar o desactivar, respectivamente, el icono Transformación global ( ) que aparece en la zona inferior del panel Herramientas cuando seleccionamos una de las dos herramientas de transformación 3D. Al activar la herramienta Traslación 3D y hacer clic sobre una instancia de clip de película en el escenario aparecerá el triedro respecto al que se efectuará la translación, que puede ser diferente según tengamos activado el modo global o local. El eje de ordenadas se representa en color rojo, el de abscisas en color verde, y el eje Z en color azul. Si el eje Z es perpendicular al escenario se representa mediante un punto negro. En la siguiente figura se muestra el triedro global (izquierda) de una instancia que ha sido sometida a transformaciones 3D y su triedro local (derecha). Para trasladar la instancia a lo largo de cualquiera de los ejes sólo tendremos que hacer clic sobre la punta de flecha del eje y, sin soltar el botón del ratón, arrastrarlo en la dirección del eje. En el caso del eje Z cuando es vertical al plano del escenario, es decir, cuando se representa mediante un punto negro, hay que tomar una precaución adicional: si hacemos clic justo sobre el perímetro del punto negro estaremos indicando a Flash que queremos desplazar el origen del triedro de referencia (que no tiene ningún interés en el caso que nos ocupa ahora de las traslaciones, pero que sí lo tendrá en el caso de las rotaciones que trataremos a continuación), mientras que si hacemos clic sobre su interior (cuando aparece una "z" junto al puntero) sí se interpretará como una traslación a lo largo del eje Z (en este caso deberemos arrastrar el ratón verticalmente para definir la distancia de la traslación). Alternativamente, en lugar de realizar la traslación mediante la herramienta 85

Traslación 3D, podemos definirla mediante los controles X, Y y Z de la sección Posición y vista 3D del inspector de propiedades (tenga en cuenta que estos controles no respetan el modo global o local que tengamos seleccionado, sino que siempre toman como referencia el sistema global). Para modificar la orientación tridimensional de una instancia de clip de película deberemos recurrir a la herramienta Rotación 3D. Al hacer clic sobre una instancia del escenario con esta herramienta activada también se mostrará su triedro de referencia, como en el caso anterior, pero no simbolizado mediante ejes, sino con arcos que indican la dirección de la rotación según cada uno de los ejes. Estos arcos son de color rojo para el eje X, de color verde para el eje Y, y de color azul para el eje Z. Además, encontraremos un arco exterior de color naranja que permite modificar simultáneamente la rotación según los ejes X e Y. Para realizar una rotación alrededor de cualquiera de los ejes sólo tenemos que hacer clic sobre su arco correspondiente y, sin soltar el botón del ratón, arrastrarlo siguiendo el contorno del arco para definir la magnitud del giro. A medida que arrastramos el ratón Flash nos mostrará la magnitud del giro mediante un sector de color gris, como se puede ver en la siguiente figura. Observe que al acercar el puntero a cualquiera de los arcos se muestra junto a él el nombre del eje correspondiente. También podemos arrastrar el punto central de los arcos (un círculo blanco con perímetro negro) para cambiar el origen del triedro de referencia, es decir, la posición del punto respecto al que se efectuarán las rotaciones. Cuando el plano de la instancia es paralelo al del escenario o cuando se utilizan el triedro de referencia global, los arcos de los ejes X e Y se representan mediante rectas porque son ortogonales al plano de la pantalla. En este caso, en contra de lo que podría indicarnos la lógica, para girar alrededor del eje X deberemos arrastrar el ratón horizontalmente, y para girar alrededor del eje Y deberemos arrastrarlo verticalmente. Alternativamente también podemos recurrir al panel Transformar para establecer con precisión el ángulo de rotación 3D y la posición del centro 3D escribiendo directamente sus valores. Tenga en cuenta que estos controles sí respetan el modo global o local que tengamos seleccionado. Las herramientas Traslación 3D y Rotación 3D también pueden aplicarse simultáneamente sobre varias instancias de clips de película, de modo que todas ellas se trasladen o roten a la vez. Para designar las instancias sobre las que queremos aplicar la operación, una vez activada la herramienta Traslación 3D o Rotación 3D, haremos clic sobre cada una de ellas mientras mantenemos pulsada la tecla Mayús. Por defecto, el triedro que se usará como referencia para las transformaciones será el de la última instancia que hayamos seleccionado, pero podemos hacer dos clics (no doble clic) sobre cualquiera de las instancias mientras mantenemos pulsada la tecla Mayús para cambiar a su triedro de referencia, o arrastrar directamente el centro de rotación para ubicarlo en cualquier posición (o indicar su posición con precisión mediante las opciones de la sección Centro 3D del panel Transformar). Como recursos adjuntos a los contenidos de esta unidad didáctica encontrará tres videos en los que se tratan los siguientes temas: •

Uso de las herramientas de transformación 3D

•

Funcionamiento del motor de visualización 3d de Flash CS4

•

Aplicación de transformaciones 3D sobre varias instancia a la vez

4.2. Mapas de bits Flash es una aplicación optimizada para utilizar gráficos vectoriales, pero eso no quiere decir que no podamos incluir en nuestros proyectos imágenes de mapa de bits. Aunque Flash no nos ofrece ninguna herramienta para crear este tipo de imágenes, sí nos permite importarlas. Por ejemplo, podemos crear una imagen BMP, GIF, PSD, 86

PNG, TIFF o JPEG con nuestro programa de edición favorito (GIMP, Photoshop, ...) e importarla en nuestra aplicación Flash. La importación puede realizarse a través de dos comandos del menú Archivo>Importar: •

Importar a escenario: Colocará la imagen importada en el escenario asignándosela al fotograma activo, y también la incluirá en la biblioteca por si decidimos reutilizarla en algún otro fotograma.

•

Importar a biblioteca: Inserta la imagen importada en la biblioteca dejándola a nuestra disposición para que creemos instancias suyas en los fotogramas que las necesitemos.

Las imágenes de mapa de bits se identifican en el panel Biblioteca mediante el icono sobre este icono accederemos a su cuadro de diálogo de propiedades.

, y haciendo doble clic

Advertencia Flash reconoce la información de transparencia de las imágenes GIF y PNG. Una imagen GIF puede contener un solo nivel de transparencia, es decir, sus píxeles son completamente transparentes o completamente opacos. Por el contrario, una imagen PNG puede contener hasta 256 niveles de transparencia, de modo que sus píxeles pueden ser parcialmente transparentes (translúcidos). La opción Permitir suavizado aplica un algoritmo de anti-aliasing a la imagen, logrando que su aspecto sea menos "dentado". Al compilar un proyecto para crear la película final en formato SWF Flash tiene que comprimir todas las imágenes de mapa de bits. Independientemente de cuál sea el formato original de las imágenes importadas, el cuadro de diálogo Propiedades de mapa de bits nos permite elegir (mediante el cuadro de lista Compresión) entre Foto y Sin pérdida. La opción Sin pérdida no degradará la calidad de la imagen, pero tampoco logrará ratios de compresión espectaculares. Por el contrario, la opción Foto generalmente consigue ratios de compresión mayores, pero a costa de degradar la calidad. Lo aconsejable es seleccionar un valor y otro, y pulsar el botón Probar que nos mostrará en la zona inferior del cuadro de diálogo cuánto ocuparía la imagen sin comprimir y cuánto ocupa con la opción de compresión elegida. En caso de que la imagen original se encontrase en formato JPEG, activando la opción Utilizar datos de JPEG importado lograremos que Flash respete el ratio de compresión de la imagen original, de modo que no se producirá ninguna degradación de calidad. Por el contrario, si la desactivamos, podremos elegir un grado de compresión específico mediante el control Personalizado. En caso de que la imagen original se encontrase en otro formato distinto a JPEG, si elegimos la compresión Foto podremos elegir entre activar la casilla Utilizar configuración de publicación, en cuyo caso se aplicará el valor de calidad genérico configurado mediante el comando Archivo>Configuración de publicación>Flash>Calidad JPEG, o desactivarla para especificar un nivel de calidad concreto para esa imagen. Al especificar un nivel concreto de compresión JPEG se habilita la casilla Habilitar desbloqueo, que en caso de que la activemos aplicará un filtro de difuminado a la imagen con el objetivo de disimular los "artefactos" propios del algoritmo JPEG cuando se utilizan ratios de compresión muy exagerados. El efecto más habitual de estos "artefactos" es inducir un aspecto cuadriculado en la imagen, como si estuviera compuesta por teselas de 8x8 píxeles. 87

4.2.1. Separación de instancias de mapas de bits El comando Modificar>Separar aplicado sobre una instancia de un mapa de bits, le conferirá ciertas propiedades de las formas; particularmente, la posibilidad de ser seleccionada parcialmente con la herramienta Lazo (de modo que podremos desplazar la zona seleccionada independientemente del resto de la imagen), y coloreada con las herramientas Bote de tinta y Cubo de pintura. No obstante, la instancia seguirá vinculada al símbolo de la biblioteca, de modo que si borrásemos el símbolo, la instancia también perdería su contenido. Este comando es especialmente útil cuando necesitamos cambiar algunos de los colores de una instancia de un mapa de bits. La herramienta Lazo dispone de dos opciones en la zona inferior del panel Herramientas que la convierten en un selector de zonas de color similar (esta herramienta se denomina tradicionalmente en los programas de diseño Varita mágica). Bastará con que hagamos clic sobre un píxel para que Flash seleccione automáticamente todos los píxeles del mapa de bits separado (no es aplicable a ningún otro tipo de forma) cuyo color sea similar al de aquél sobre el que hicimos clic y que sean adyacentes a él. Para utilizar esta opción primero haremos clic sobre el icono , que nos conducirá a un cuadro de diálogo en el que configuraremos el parecido que debe existir entre los colores para que se consideren similares (Umbral) y el nivel de suavizado que queremos aplicar en los contornos de la selección (Suavizado). Una vez hecho esto, pulsaremos el icono y simplemente haremos clic sobre un píxel del mapa de bits separado. Una vez seleccionada una región, podremos cambiar su color con la herramienta Cubo de pintura. Por ejemplo, en la siguiente figura hemos aprovechado la opción Varita mágica con un umbral del 50 por ciento para cambiar la raza del bebé. Como el ojo de la izquierda (el derecho del bebé) no estaba aislado del resto de la cara por un contorno cerrado, quedó inicialmente incluido en la selección de la Varita mágica, pero después de colorearlo de marrón, seleccionamos la zona del ojo que debería ser blanca con la herramienta Lazo (desactivando el icono Varita mágica) y lo rellenamos de blanco con la herramienta Cubo de pintura. Tenga en cuenta que al rellenar una zona de un mapa de bits separado con la herramienta Cubo de pintura estará creando una forma que reemplaza a la zona original del mapa de bits; esta forma es independiente del resto del mapa de bits separado y sólo puede ser modificada con las herramientas propias de las formas (por ejemplo, no admite las opciones de varita mágica, que sólo son válidas para mapas de bits separados).

4.2.2. Calcado de instancias de mapas de bits Flash también nos permite convertir las instancias de mapas de bits en verdaderas formas (recuerde que el comando Separar sólo les confiere algunas de sus posibilidades), como si las calcásemos utilizando las herramientas de dibujo. Estas formas ya no mantienen ningún vínculo de unión con el símbolo de la biblioteca, de modo que no perderían su contenido aunque éste fuese borrado. Esta posibilidad suele utilizarse para reducir el tamaño de almacenamiento del proyecto, pues generalmente las imágenes vectoriales ocupan menos que las de mapas de bits, y además Flash puede manejarlas con mayor agilidad. El procedimiento para convertir una instancia de mapa de bits en una forma es el siguiente: 1. Activamos la herramienta Selección y hacemos clic en el escenario sobre la instancia de mapa de bits que queremos convertir. 2. Ejecutamos el comando Modificar>Mapa de bits>Trazar mapa de bits, que nos conducirá al cuadro de diálogo que se muestra a continuación.

3. El calcado que realiza Flash consiste en localizar en el mapa de bits zonas de color similar y sustituirlas por un relleno de forma de un mismo color, de modo que el resultado final es un conjunto de formas con relleno y sin contorno. La similitud que debe existir entre los colores de los píxeles para que se consideren pertenecientes a la misma zona se configura mediante el cuadro de texto Umbral de color (que admite valores entre 0 y 500). Cuanto mayor sea el valor de Umbral de color más diferentes podrán ser los colores de los píxeles que se consideran pertenecientes a una misma zona. En otras palabras: cuanto mayor sea el valor de Umbral de color menos colores contendrá nuestro resultado final y más amplios serán los rellenos. Por el contrario, si utilizamos un valor pequeño de Umbral de color, Flash interpretará que queremos discriminar más colores, de modo que las zonas de relleno serán de menor tamaño. En la siguiente figura se ilustra la diferencia entre utilizar un valor de umbral pequeño (izquierda) y uno grande (derecha). 4. El control Área mínima determina el tamaño mínimo que debe tener una zona de relleno; por debajo de ese valor no se crearán rellenos diferentes. Si por el valor de Umbral de color Flash determina que ciertos píxeles adyacentes deberían conformar un relleno independiente, pero el número de esos píxeles no supera el valor de Área mínima, se integrarán en alguna de las formas ya existentes. Por ejemplo, en la siguiente figura se ha utilizado un valor pequeño de Área mínima a la izquierda que ha permitido que se creen formas de relleno diferenciadas para el brillo de la nariz y las motas del carrillo derecho del perro (el izquierdo de la imagen), mientras que a la derecha se ha configurado un Área mínima tan grande que ha impedido que se formen rellenos para estos elementos, que han quedado integrados en los rellenos adyacentes. 5. El valor que elijamos en el cuadro de lista Ajustar a curva determinará con qué precisión intentará Flash calcar los contornos existentes en la imagen. Si elegimos el valor Píxeles, Flash intentará que los contornos de los rellenos se parezcan lo más posible a los de la imagen original (esto generalmente supondrá la utilización de un mayor número de puntos de ancla). Por el contrario, si elegimos la opción Muy suave, Flash suavizará los contornos de los rellenos intentando disimular posibles irregularidades. Entre estos dos valores existen otras cuatro opciones que producen resultados más moderados. En la siguiente figura, en la que se ha usado el valor Muy suave a la izquierda y el valor Píxeles a la derecha, puede observarse que los trazos de la izquierda contienen menos irregularidades (son más suaves), mientras que los de la derecha son un calcado casi exacto de la imagen original. 6. Las opciones del cuadro de lista Umbral de esquina controlan directamente el número de nodos que se incluirán en los trazos. Si elegimos Pocas esquinas, como en el caso de la izquierda de la siguiente figura, los trazos contendrán pocos puntos de ancla, mientras que si 89

elegimos Muchas esquinas, como a la derecha, los trazos contendrán gran cantidad de nodos. Obviamente, esta opción y la anterior están íntimamente relacionadas, pues cuanto mayor es el número de nodos mejor se puede controlar la información de tangencia y, consecuentemente, mejor pueden adaptarse los contornos a los de la imagen original. 7. Una vez configurados todos los parámetros anteriores hacemos clic sobre el botón Vista previa para que Flash nos muestre el resultado antes de aplicarlo definitivamente (tenga en cuenta que los cálculos necesarios pueden requerir varios segundos en el caso de imágenes muy complejas). Si estamos conformes, pulsamos el botón Aceptar para confirmarlo y, si no, modificamos los parámetros y pulsamos nuevamente el botón Vista previa y así sucesivamente hasta que obtengamos el resultado que deseamos. El resultado de calcar la imagen será un conjunto (no agrupado) de formas con relleno y sin contorno, que podremos modificar con las herramientas que explicamos en la unidad didáctica anterior, o convertir en un símbolo haciendo clic con el botón derecho del ratón sobre cualquiera de ellas y seleccionando la opción Convertir en símbolo.

4.3. Introducción a ActionScript Adobe Flash Professional incluye un lenguaje de programación propio llamado ActionScript con el que tendremos que programar todas las experiencias interactivas de las aplicaciones que creemos. Por ejemplo, si queremos que ocurra "esto" cuando el usuario haga "aquello" tendremos que programarlo usando ActionScript. No obstante, las posibilidades de ActionScript van más allá, permitiendo realizar mediante programación cualquiera de las operaciones que habitualmente realizamos en el escenario o la línea de tiempo, como por ejemplo, crear animaciones, dibujar formas o crear instancias de símbolos. De hecho, podríamos crear aplicaciones completas sólo con programación, sin colocar ni un solo elemento manualmente en el escenario ni en la línea de tiempo. Advertencia Existen tres versiones de ActionScript: 1, 2 y 3. En este curso nos ceñiremos a la versión 3, que es la más actual (vigente desde Flash CS3), y que presenta notables diferencias respecto a las dos anteriores. ActionScript es un lenguaje de programación orientado a objetos y dirigido por eventos. ¿Qué quiere decir esto? Empecemos por el asunto de los eventos. Cualquier programa informático, independientemente de en qué leguaje esté escrito (sea ActionScript o cualquier otro), está compuesto por un listado de instrucciones que se van ejecutando secuencialmente una detrás de otra, existiendo instrucciones que permiten alterar este flujo secuencial de ejecución, bien mediante bucles que repiten varias veces un mismo conjunto de instrucciones, o bien mediante bifurcaciones que ejecutan un conjunto de instrucciones u otro en función del resultado de una operación. Pero ¿cómo se desencadena la ejecución de un programa; en otras palabras: quién es el responsable de que un programa empiece a ejecutarse? En ActionScript ese responsable será siempre un evento. Existen diversos tipos de eventos, pero básicamente podemos clasificarlos en dos categorías: •

Eventos provocados por el usuario: Son las acciones que realiza el usuario al interactuar con la aplicación, como hacer clic sobre un botón, pasar el puntero por encima de una instancia o escribir un texto.

•

Eventos internos: Son acciones intrínsecas al propio funcionamiento de Flash, como que el cabezal de reproducción avance de fotograma dentro de la línea de tiempo, o que haya terminado de descargarse toda la película (recuerde que las películas de Flash pueden empezar a reproducirse aunque no se hayan descargado completamente). Mediante ActionScript podemos desarrollar programas que "den respuesta" a estos eventos. Por ejemplo, podríamos crear un programa que reprodujese cierto sonido cuando el usuario hiciese clic sobre un botón. Una película de Flash generalmente no contiene un único programa ActionScript, sino varios, que se ejecutan en respuesta a eventos diferentes o que no se ejecutan en respuesta a ningún evento concreto sino que prestan apoyo a otros, pues los programas pueden comunicarse o "asistirse" entre sí. En el contexto de Flash cada programa se denomina script o guión. Por ejemplo, podemos tener un guión 90

programado para que se ejecute ante cierto evento y que entre sus acciones incluya la ejecución de parte del código perteneciente a otro guión diferente. En cuanto a la segunda parte de la definición, ActionScript es un lenguaje de programación orientado a objetos porque utiliza un método de estructurar el código en el que se separa la definición de las características y habilidades de los elementos que intervienen en la aplicación de su propio uso. Por ejemplo, si en nuestra aplicación interviene una nave espacial, sus características y habilidades (por ejemplo, su característica de velocidad o su habilidad de disparar) se definirán de forma genérica en un fragmento de código llamado clase, que no se utilizará directamente en el transcurso de la aplicación. La clase se utiliza como matriz o molde para crear los elementos que intervienen realmente en la aplicación, y que se denominan objetos. Cada objeto creado a partir de una clase dispone de las características y habilidades definidas en ella. En lenguaje informático las características definidas en una clase se denominan propiedades, y las habilidades se denominan métodos. En nuestro ejemplo de la nave espacial, usaríamos una clase para definir las propiedades y métodos generales de las naves, y luego crearíamos un objeto (o más de uno; uno para cada nave que necesitásemos) a partir de esa clase, que es el que intervendría directamente en la aplicación. La programación orientada a objetos aporta varias ventajas frente a la programación clásica (también llamada procedural): •

•

Facilita la reutilización del código: Imagine que en nuestra aplicación intervienen cinco naves espaciales enemigas y que tenemos que definir para cada una de ellas características y habilidades idénticas (o casi idénticas). Utilizando programación tradicional esto supondría escribir cinco bloques de código casi idénticos. Por el contrario, recurriendo a la programación orientada a objetos sólo tendríamos que definir las propiedades y métodos en una clase, y crear tantos objetos a partir de ella como fueran necesarios. En el momento de crear los objetos podríamos asignar valores diferentes a sus propiedades para que cada nave se comportase de un modo diferente. Obviamente, la reutilización del código conlleva la ventaja adicional de producir scripts más cortos que, a su vez, nos conduce a la segunda de las ventajas de la programación orientada a objetos. Facilita el mantenimiento de las aplicaciones: Imagine que después de terminar nuestra aplicación de naves espaciales, el jefe nos pide que añadamos una habilidad nueva a las naves, por ejemplo, saltar al hiperespacio. En programación tradicional tendríamos que ir localizando cada uno de los cinco bloques de código de las naves espaciales e introduciendo en ellos el nuevo código. Esta tarea, además de tedio, lleva asociado un alto riesgo de cometer errores. Por el contrario, en programación orientada a objetos bastaría con acceder a la clase e introducir una sola vez el nuevo código.

Si estas dos ventajas no acaban de predisponerle a favor de la programación orientada a objetos, imagine por un momento que en lugar de sólo cinco naves espaciales fueran cien. Además de las clases (o moldes) que creemos nosotros para programar la "lógica" concreta de nuestra aplicación, Flash incorpora multitud de clases predefinidas que son las responsables del funcionamiento de sus elementos intrínsecos. Por ejemplo, existe una clase llamada MovieClip que se utiliza como molde para todas las instancias de clips de película que creamos en el escenario y que ofrece propiedades como currentFrame, que indica en qué fotograma de la línea de tiempo del clip de película se encuentra su cabezal de reproducción, o métodos como stop(), que detiene el avance del cabezal de reproducción dentro de la línea de tiempo del clip de película (recuerde que los clips de película se caracterizan precisamente porque su cabezal de reproducción puede funcionar en asincronía con el de la película principal). Cada objeto que creemos a partir de una clase deberá tener un nombre, que nos permitirá acceder a sus propiedades y métodos. Esto es así tanto para los objetos que creemos mediante ActionScript, como para los que creemos directamente en el escenario. En este segundo caso, es decir, si creamos en el escenario una instancia de un símbolo de tipo clip de película arrastrándolo directamente desde la biblioteca, el panel Propiedades (como ya se mencionó anteriormente en este bloque) nos ofrecerá una casilla para indicar su nombre de instancia... éste es el nombre del objeto que nos permitirá acceder a sus propiedades y métodos mediante ActionScript. Si no indicamos un nombre de instancia nos resultará más complicado manipular ese elemento mediante ActionScript. 91

En ActionScript, para referirnos a las propiedades y métodos de los objetos tenemos que utilizar la "sintaxis de punto". Esta sintaxis consiste simplemente en separar el nombre del objeto del de la propiedad/método con un punto. Por ejemplo, imaginemos que tenemos una instancia llamada nave de una clase que posee una propiedad llamada combustible; para acceder a esa propiedad escribiríamos nave.combustible. Información En programación es frecuente referirse a la lógica de una aplicación como los algoritmos que son propios de esa aplicación en concreto (en contraposición a otros bloques de código que podrían ser más genéricos). Por ejemplo, en una aplicación de naves espaciales la lógica sería todo el código responsable de manejar las naves, disparar, detectar colisiones, ... pues son cuestiones propias de la aplicación en sí. Sin embargo, podría haber otros bloques de código más genéricos (o abstractos), por ejemplo, para reproducir sonidos o descargar archivos, que proveyesen servicios de más bajo nivel, y que podrían servir de apoyo tanto a la lógica de la aplicación de naves espaciales como a cualquier otro tipo de aplicación. Otra consideración que debemos tener en cuenta sobre la programación orientada a objetos es que se pueden crear clases basadas en otras clases; este concepto se denomina herencia, pues las clases subordinadas o subclases, heredan las propiedades y métodos de una clase base o superclase, y les añaden otros propios. Técnicamente suele indicarse este hecho con la expresión "esta clase extiende a aquella otra". Antes de pasar a la descripción en sí del lenguaje de programación ActionScript nos queda una cuestión por aclarar: ¿dónde y cómo se insertan los guiones en las aplicaciones de Flash? En ActionScript 3, a diferencia de versiones anteriores, los guiones sólo pueden insertarse en fotogramas de la línea de tiempo de la película principal o de la línea de tiempo de símbolos de tipo clip de película (no en la línea de tiempo de los botones, ni tampoco directamente sobre instancias, aunque sean de símbolos de tipo clip de película), o en archivos de texto externos que utilizan la extensión AS.

Advertencia Muchos programadores de versiones anteriores a la 3 de ActionScript estaban acostumbrados a colocar scripts en la línea de tiempo de los botones. Esto ya no es posible en ActionScript 3.

Información Si se detiene a pensarlo unos instantes, la relación que existe entre los objetos y las clases es muy similar a la que mantienen los símbolos y sus instancias.

Información ActionScript no es un lenguaje compilado sino interpretado, pues al generar el archivo SWF a partir del FLA, los guiones de ActionScript se convierten a un lenguaje intermedio llamado bytecode, pero que no es el lenguaje final que entiende y ejecuta el ordenador (lenguaje máquina). El responsable de crear el lenguaje máquina a partir del bytecode es Flash Player. Esta característica es precisamente una de las responsables de que un mismo archivo SWF pueda ejecutarse en ordenadores con sistemas operativos diferentes (Windows, Mac OS o Linux).

En este curso nos limitaremos a usar guiones insertados en las líneas de tiempo (excepto para la creación puntual de clases personalizadas), pues la utilización de archivos externos exige entender ciertos conceptos, como los paquetes y los espacios de nombres, que si bien no son excesivamente complejos, tampoco aportan ventajas adicionales a menos que se creen clases para reutilizarlas en múltiples proyectos diferentes. En general, a nivel profesional de grandes proyectos en los que intervienen simultáneamente muchos desarrolladores es aconsejable colocar el código en archivos externos porque facilita su gestión, pero en proyectos de menor tamaño, la utilización de archivos externos no aporta ventajas adicionales y sí complicaciones. Si necesitásemos crear una clase personalizada no tendríamos más remedio que escribir su código en un archivo de texto externo. Esta cuestión se explicará con más detalle casi al final de este bloque. Un detalle a tener en cuenta de los códigos que insertemos en fotogramas es que Flash los ejecuta antes de mostrar el contenido del propio fotograma.

4.3.1. El panel Acciones Aunque por las prácticas de los bloques anteriores ya tenemos cierta experiencia en la asignación de ActionScript a fotogramas, se resume a continuación el procedimiento general, destacando algunas posibilidades que no hemos utilizado hasta ahora: 1. Hacemos clic sobre el fotograma de la línea de tiempo a la que se desee asignar el script. Recuerde que sólo se pueden añadir scripts a la línea de tiempo principal o a la de instancias de símbolos de tipo clip de película. Truco Aunque podríamos asignar un guión ActionScript a cualquier fotograma de la línea de tiempo, se considera una "buena práctica de programación" crear una capa en la línea de tiempo exclusiva para fotogramas con guiones. De hecho, algunos programadores más exigentes se obligan a escribir código sólo en el primer fotograma de esa capa. Estas buenas prácticas facilitan la localización del código en caso de que sea necesario modificarlo/corregirlo. 2. Ejecutamos el comando Ventana>Acciones para acceder al panel en el que escribiremos el código ActionScript. Este panel está dividido horizontalmente en dos zonas. La zona derecha es dónde introduciremos el código. La zona izquierda, que se denomina Caja de herramientas de acciones, está a su vez dividida verticalmente en otras dos. La zona superior ofrece un listado de todas las sentencias y clases intrínsecas de Flash, de modo que podemos colocar el puntero sobre ellas para conocer su descripción, o hacer doble clic sobre ellas para insertarlas en la zona de código de la derecha. Observe que cada sección de esta zona está simbolizada por un icono con forma de libro; haciendo clic sobre este icono podemos desplegar/plegar la sección para mostrar/ocultar los elementos que la componen. La zona inferior izquierda se denomina Explorador de código, y nos ofrece un listado de todos los scripts que contiene nuestra aplicación, de modo que podemos acceder fácilmente a cualquiera de ellos con un simple clic. Por ejemplo, en la figura siguiente disponemos de dos script, uno en el fotograma 1 y otro en el fotograma 10, y podemos mostrarlos en la zona de código con sólo hacer clic sobre ellos en el Explorador de código. 93

3. En la parte superior de la zona derecha encontramos diversos iconos cuya misión iremos explicando a medida que los necesitemos. De momento sólo destacamos el icono Mostrar/ocultar caja de herramientas ), que sirve para plegar/desplegar la zona izquierda (recuperando o robando espacio a la zona derecha), y el botón Asistente de script. Al activar este botón ya no podremos escribir el código directamente, sino que tendremos que seleccionar con el ratón las instrucciones que queramos utilizar mediante el listado de la zona superior de la caja de herramientas o mediante el icono Añadir un nuevo elemento al script ( ). Al seleccionar una instrucción, se mostrará un formulario en la zona superior derecha para que podamos configurar sus parámetros (véase la figura siguiente). El modo Asistente de script está pensado para usuarios con muy poca experiencia en programación que quieren evitar a toda costa el riesgo de cometer errores de sintaxis, pero resulta muy engorroso y lento para usuarios más avanzados o para usuarios que necesitan escribir scripts largos. En este curso, por lo general, mantendremos desactivado el modo Asistente de scripts.

4. Una vez introducido el código en la zona de la derecha podremos hacer clic sobre el icono Revisar sintaxis ( ) para que Flash analice si el código que hemos escrito es correcto desde el punto de vista sintáctico (no podrá detectar fallos de lógica), es decir, para que detecte los posibles errores tipográficos que hemos cometido. En caso de que se detecte algún error aparecerá un cuadro de diálogo indicándolo y se activará el panel Errores de compilador (por defecto, este panel está apilado con los paneles Línea de tiempo y Editor de movimiento) con un listado de los fallos. Haciendo doble clic sobre cada unos de estos fallos accederemos al fragmento del código en el que han sido detectados.

5. Cuando finalicemos de escribir/depurar el código, podremos cerrar el panel Acciones; no es necesario que realicemos ninguna operación adicional para que el código quede asignado o guardado en el fotograma. Los fotogramas que contienen código se identifican en la línea de tiempo mediante una pequeña "a" ( ). 94

6. Para acceder al código de un fotograma podemos simplemente hacer clic sobre él para seleccionarlo y ejecutar el comando Ventana>Acciones, o bien, pulsar la tecla F9. Información Mientras escribimos código en el panel Acciones habrá ocasiones en las que aparezcan automáticamente cuadros de lista con opciones para completar la sentencia con un simple clic. Esta funcionalidad se denomina Consejos sobre código, y también puede activarse manualmente colocando el puntero en la posición donde deseamos recibir consejo y pulsando el icono Mostrar consejos sobre códigos ( ). Tenga en cuenta que Flash no siempre dispone de consejos que mostrarnos, por lo que en algunos casos es posible que al pulsar este icono no ocurra nada.

4.3.2. La sintaxis de ActionScript y su vocabulario En muchos aspectos, aprender un lenguaje de programación es como aprender un idioma: tenemos que aprender por un lado el vocabulario y por otro la sintaxis (afortunadamente podemos olvidarnos de la pronunciación). La sintaxis de ActionScript es muy simple, pero muy estricta... no hay lugar para errores. Por su parte, el vocabulario es igual de estricto que la gramática, pero además es muy amplio. Afortunadamente no es necesario conocer todo el vocabulario para empezar a programar. Dentro del vocabulario de ActionScript podemos encontrar: •

Instrucciones: Son las órdenes que le damos al ordenador. Por ejemplo, la instrucción for sirve para indicar a Flash que debe ejecutar un mismo bloque de instrucciones repetidamente hasta que se cumpla cierta condición.

•

Datos: Los ordenadores, igual que las personas "entienden" diferentes tipos de datos, como números, textos o fechas. No debe tomarse el término "entender" en su sentido estricto (obviamente los ordenadores, como todos sabemos, son de momento tontos y no entienden nada, se limitan a hacer lo que les mandamos), sino como la capacidad para manipular ese tipo de datos. Por ejemplo, un ordenador es capaz de sumar números, o de contar cuántas veces aparece la letra "r" en una palabra, o de contar los días comprendidos entre dos fechas, aunque realmente no entienda el significado de ninguno de estos datos. En la sentencia trace("Hola"), "Hola" es un dato.

•

Operadores: Los operadores permiten manipular los datos para obtener un resultado. Existen operadores específicos para cada tipo de datos. Por ejemplo, con los números podemos utilizar los operadores típicos +, -, * (multiplicar) y / (dividir).

•

Identificadores: Para poder utilizar los objetos en nuestros programas debemos conocer sus nombres o identificadores. Lo mismo ocurre con las propiedades y los métodos de estos objetos. Para acceder a los objetos, propiedades y métodos se utiliza la denominada "notación de punto" que consiste en separar los identificadores de los objetos, propiedades y métodos mediante puntos. Por ejemplo, si tenemos una clase que define una propiedad llamada carburante y creamos a partir de ella un objeto llamado coche, para acceder al dato que contiene la propiedad carburante deberemos escribir coche.carburante. Además, en ActionScript pueden definirse bloques de código que tienen asignado un nombre, pero que a diferencia de los objetos no están creados a partir de ninguna clase; estos bloques se denominan funciones y para ejecutarlos necesitaremos conocer su nombre o identificador. Por ejemplo, en la sentencia trace("Hola"), trace es el identificador de una función que contiene el código necesario para mostrar un dato (en este caso "Hola") en pantalla. Otro escenario de utilización de identificadores es el caso de las variables que, pese a ser en realidad objetos, por su importancia merecen un tratamiento aparte. Las variables son nombres que asignamos a una posición de memoria, de tal forma que a través de ese nombre/identificador podemos acceder al dato almacenado en esa posición de memoria. Por ejemplo, la sentencia miVariable=5+8 utiliza los datos 5 y 8, el operador + para sumarlos y obtener el resultado 13, y el operador = para asignar ese dato a una posición de memoria que hemos identificado mediante le nombre miVariable. En realidad, esta sentencia crea implícitamente un objeto de la clase Number con el nombre miVariable, por eso se indicaba anteriormente que las variables son un tipo particular de objetos. 95

Posteriormente, podríamos utilizar el nombre de la variable para hacer alusión al dato que contiene su posición de memoria; por ejemplo, trace(miVariable) mostraría en pantalla el valor 13. En resumen, podemos encontrar identificadores de clases, objetos, propiedades, métodos, funciones y variables. Hay dos aspectos fundamentales de la sintaxis de ActionScript que conviene conocer desde el principio: •

Distingue entre mayúsculas y minúsculas; esto quiere decir que hay que escribir las sentencias con una combinación de letras mayúsculas y minúsculas concreta para que Flash las entienda. Por ejemplo, si escribimos trace("Hola") Flash entenderá que le estamos ordenando que escriba el mensaje Hola, pero si escribimos Trace("Hola") con la "T" en mayúscula no sabrá qué queremos y se producirá un error.

•

Debemos indicar dónde termina cada sentencia con el signo de puntuación punto y coma (;).

Información En este texto nos referiremos con el término "sentencia" a cada una de las órdenes que contiene un script ActionScript. No hay que confundir sentencias con líneas de código a pesar de que en muchos casos coincidan, pues hay sentencias que pueden tener anidadas en su interior otras sentencias (como for) extendiéndose a lo largo de varias líneas; estos bloques de sentencias anidadas se escriben entre llaves {}. Por ejemplo, en el siguiente código no se ha escrito un ; al final de la segunda línea porque la sentencia for no termina hasta la última línea, que es dónde se ha colocado precisamente el punto y coma. En estos casos de instrucciones anidadas, el punto y coma final de la sentencia anfitrión puede no escribirse sin que sea considerado un fallo; es decir, podríamos habernos ahorrado el punto y coma que hay al final de la llave }. var i; for(i=1;i<3;i++){ trace("Iteración "+i); trace("Siguiente iteración "+(i+1)); };

4.3.3. Tipos de datos y variables Ya hemos comentado anteriormente que una variable es un nombre que asignamos a una posición de memoria para poder acceder cómodamente al dato que contiene o almacenar un dato en esa posición de memoria. Si nos imaginamos la memoria del ordenador como una cajonera enorme, crear una variable sería equivalente a localizar un cajón vacío y asignarle un nombre/identificador, pero con la precaución adicional de elegir un tamaño de cajón apropiado para el tipo de dato que vamos a almacenar en él. Para crear una variable se utiliza la instrucción var, que tiene la siguiente sintaxis: var nombre_de_la_variable:tipo_de_datos; El nombre_de_la_variable puede ser cualquiera que elijamos, con la única condición de que su primer carácter sea una letra, el signo subrayado (_) o el signo dólar ($). Obviamente, para evitar conflictos con otros elementos de ActionScript, el nombre de la variable tampoco puede coincidir con el de una instrucción, una clase o una función intrínseca (predefinida de ActionScript). En la medida de lo posible, es aconsejable utilizar siempre nombres de variable que nos den una idea de cuál es su contenido. Por ejemplo, si necesitamos una variable para almacenar el nivel de combustible de nuestra nave espacial, será mejor elegir como nombre nivelDeCombustible que miVariable. A riesgo de exasperar al lector, se aprovecha aquí nuevamente para recordar que ActionScript distingue entre mayúsculas y minúsculas, de modo que nivelDeCombustible y niveldecombustible serán considerados identificadores distintos. En cuanto a tipo_de_datos, puede ser cualquiera de los identificadores de las clases de tipos de datos de ActionScript (recuerde que las variables son en realidad objetos y, como tales, se crean a partir de una clase): •

int: Utiliza 32 bits y puede contener números enteros positivos o negativos, desde el -2.147.483.648 hasta el 2.147.483.647, es decir, desde -231 hasta 231-1. 96

•

uint: Utiliza 32 bits y sólo puede contener números positivos desde el 0 hasta el 4.294.967.295, es decir, hasta 232-1.

•

Number: Utiliza 64 bits y puede contener números enteros o decimales, desde el 1,79769313486231E308 hasta el 4,940656458412467E-324, o el dato NaN (Not a Number; no es un número), o el dato infinity o el dato -infinity. El dato NaN corresponde a cualquier operación matemática que no es lícita dentro del conjunto de los números reales, por ejemplo, la raíz cuadrada de un número negativo, o la división de cero entre cero, y también es el valor que se les asigna inicialmente a las variables de tipo Number. En una división en la que el divisor es cero pero el dividendo no, el resultado no es NaN, sino infinity si el numerador es positivo o -infinity si es negativo.

•

String: Sirve para almacenar caracteres y, a diferencia de los anteriores, no tiene un tamaño fijo, sino que utiliza 16 bits para almacenar cada carácter. También puede contener el dato null, que es el que se asigna a las variables de tipo String inicialmente. Para que ActionScript interprete una cadena de caracteres como un dato de tipo String (en lugar de como un identificador) debemos escribirla entre comillas dobles. Por ejemplo, "cadena de caracteres".

•

Boolean: Este tipo de dato requiere un bit y sólo reconoce los datos true y false. El valor inicial de una variable de tipo Boolean es false. Truco Es importante elegir correctamente el tipo de las variables numéricas, pues los tipos de datos int y uint se manejan internamente más rápido que el tipo de datos Number. Consecuentemente, deberemos elegir preferiblemente int o uint siempre que la variable no vaya a contener números decimales, pero tomando la precaución de que el rango de valores que vamos a utilizar esté dentro del rango de 32 bits que utilizan estos tipos. Si vamos a trabajar con números muy grandes, aunque sean enteros, no tendremos más remedio que recurrir al tipo Number.

Ya sabemos crear variables y elegir su tipo de datos, pero ¿cómo almacenamos un dato en una variable? y ¿cómo accedemos al dato almacenado en una variable? Para almacenar un dato en una variable utilizaremos el operador =, y para acceder al dato que contiene escribiremos directamente su nombre/identificador. Por ejemplo, intente predecir cuál será el resultado del siguiente script: var unNumero:Number; trace (unNumero); unNumero=1; trace (unNumero); Y, a continuación, seguiremos estos pasos para averiguar si hemos acertado: 1. Creamos un archivo de Flash nuevo de tipo Archivo de Flash (AS 3.0). No se confunda con el tipo Archivo ActionScript, que sirve para crear archivos de ActionScript externos (recuerde que en este curso sólo colocaremos guiones ActionScript en fotogramas de las líneas de tiempo). 2. En la línea de tiempo, hacemos clic con el botón derecho del ratón sobre el único fotograma que contiene y, en el menú contextual que se despliega, seleccionamos la opción Acciones. Aparecerá el panel Acciones. 3. Escribimos el código anterior en la zona derecha del panel Acciones. 4. Pulsamos la combinación de teclas Control+Intro para probar la película. Aparecerá la ventana de Flash Player en blanco, pues la película no tiene ningún contenido, pero por detrás, en el panel Salida (que está apilado junto al panel Línea de tiempo) podremos ver el resultado de las dos funciones trace.

5. Cerramos la ventana de Flash Player. Vamos a explicar las líneas del script anterior una a una: • var unNumero:Number; o Esta línea define una variable llamada unNumero y con capacidad para contener números enteros

o decimales.

• trace (unNumero); o Esta línea muestra en el panel Salida el dato que contiene la variable unNumero; observe que

utilizamos el propio nombre de la variable para acceder al dato que contiene. Como aún no hemos asignado ningún dato a unNumero, el panel salida muestra el valor NaN, que es el que se asigna inicialmente a todas las variables de tipo Number.

• unNumero=1; o Aquí utilizamos el operador = para asignar el dato 1 a unNumero. Observe que a la izquierda del

igual debemos indicar siempre a quién queremos asignar el dato, y a la derecha el dato que queremos asignar. No puede invertirse este orden.

• trace (unNumero); o Ahora el panel Salida indica que el dato que contiene unNumero es 1. Tenga en cuenta que al

asignar un dato a una variable, éste reemplaza a cualquier contenido previo.

En el desarrollo de una aplicación puede darse el caso de que necesitemos combinar en una misma operación variables de distinto tipo, aunque en principio esto no está permitido... Seguro que recuerda a su maestro diciéndole aquello de "no se pueden sumar peras con manzanas". En general ActionScript resuelve estas situaciones convirtiendo internamente los datos de unos tipos a otros en función del resultado que se espere de la operación; por ejemplo, analicemos el siguiente código adelantando que el operador + sirve tanto para sumar números como para concatenar cadenas de caracteres, que la función trace espera recibir como parámetro una cadena de caracteres (el parámetro de trace es el dato que queremos que muestre en el panel Salida, es decir, el dato que indicamos entre paréntesis), que las operaciones con la misma precedencia se realizan de izquierda a derecha, y que el orden de precedencia de las operaciones puede modificarse mediante la utilización de paréntesis (): var texto:String; var numero1:int; var numero2:int; texto="Mi edad es "; numero1=36; trace (texto+numero1); texto="dos"; trace (texto+numero1); numero2=2; trace(numero1+numero2); trace(texto+numero1+numero2); trace(numero1+numero2+ texto); trace(texto+(numero1+numero2)); 98

El primer trace convierte internamente el dato de la variable numero al tipo String (la variable sigue siendo de tipo Number), de modo que 36 pasa a ser "36" y puede combinarse con texto para dar lugar a la cadena de caracteres "Mi edad es 36". El segundo trace hace exactamente lo mismo, mostrando la cadena "dos36"; no espere que Flash "entienda" que "dos" es lo mismo que 2. El tercer trace suma los dos números, obteniendo el resultado 38, y convierte ese dato al tipo String "38" para poder mostrarlo mediante trace. En el cuarto trace, como las operaciones se realizan de izquierda a derecha, se concatena el texto "dos" con el valor 36, resultando "dos36", y a continuación se concatena el valor 2 resultando finalmente "dos362". En el quinto trace como los dos operandos iniciales son de tipo Number pueden sumarse resultando 38, que después se convierte en "38" para concatenarse con "dos" y resultar finalmente "38dos". Por último, en el sexto trace da precedencia a la operación incluida entre paréntesis, sumando 38, y después convierte este dato a "38" para poder concatenarlo con "dos" y resultar finalmente "dos38". A la vista de este ejemplo, enseguida puede asaltarnos el temor de que ActionScript realice alguna conversión interna de tipos de datos que no nos interese. Para evitarlo disponemos de una herramienta que se denomina casting de variables o forzado de tipos de datos, que consiste en indicar a Flash expresamente cómo queremos que se considere el dato almacenado en una variable independientemente de cuál sea su tipo. Para aplicar el forzado de tipos de datos sólo tenemos que colocar el dato entre paréntesis a continuación del identificador del tipo al que queramos forzarlo (sólo se fuerza el dato almacenado en la variable; la variable sigue manteniendo el tipo con el que fue declarada). En realidad, lo que estamos haciendo es utilizar las funciones intrínseca int(), uint(), Number(), String() y Boolean() de ActionScript (posteriormente encontrará más información sobre las funciones). Por ejemplo, analicemos el siguiente código: var texto:String; var numero1:int; var numero2:int; texto="Mi edad es "; numero1=36; numero2=2; trace(texto+numero1+numero2); trace(Number(texto)+numero1+numero2); trace(numero1+numero2); trace(String(numero1)+numero2); El primer trace produce el efecto que ya conocíamos del ejemplo anterior, es decir, muestra "Mi edad es 36". En el segundo trace obligamos a convertir el dato "Mi edad es " en un número mediante la función Number() y, obviamente, el resultado es NaN, pues ActionScript no sabe en qué número se puede convertir "Mi edad es ", de modo que el resultado termina siendo simplemente NaN, pues algo que no es un número, aunque pertenezca la tipo Number (recuerde que NaN es uno de los valores que reconoce el tipo Number), no puede sumarse con otros números. El tercer trace muestra el resultado esperado 38, pero en el cuarto trace al forzar que numero1 sea tratado como una cadena de caracteres (mediante la utilización de la función String()), el resultado termina siendo "362". Antes de abandonar el asunto de las variables nos quedaría por explicar una cuestión: ¿podemos referirnos a una variable desde cualquier script de una película? ¿o sólo son "visibles" dentro del script en el que han sido definidas? En nomenclatura informática se denomina alcance, ámbito o scope de una variable al fragmento de código dentro del que es utilizable. La respuesta a estas preguntas está ligada al concepto de función y clase, que explicaremos posteriormente, de modo que dejaremos este asunto pendiente hasta ese momento.

4.3.4. Comentarios de código. Mientras desarrollamos nuestros programas es aconsejable (casi obligatorio) introducir comentarios que expliquen su funcionamiento. Estos comentarios, además de sernos de utilidad a nosotros mismos para refrescar la memoria si tenemos que repasar un código que escribimos ya hace algún tiempo, resultarán casi imprescindibles si nuestros códigos tienen que ser utilizados por otros desarrolladores. Tenga en cuenta que en 99

programación existen muchas formas de obtener un mismo resultado, y que cada programador tiene un estilo y preferencias propias, que pueden resultar difíciles de comprender para otro programador. En ActionScript podemos crear comentarios de una sola línea o comentarios que ocupen varias líneas. Para crear un comentario de una sola línea sólo tenemos que escribir // y a continuación el comentario. La doble barra // es interpretada por ActionScript como una marca de que todo lo que hay a continuación en esa línea no forma parte de las sentencias que debe ejecutar, sino que es un simple comentario. Por ejemplo: var unNumero:Number; //Declaro la variable como un número Para crear un comentario que se extienda a lo largo de varias líneas tendremos que iniciarlo con la marca /* y terminarlo con la marca */. Por ejemplo: /* A continuación se declaran las variables del juego*/ var combustible:int; var municion:uint;

5.3.5. Operadores. Los operadores sirven para manipular uno o más datos obteniendo un resultado. Por ejemplo, el operador + sirve para sumar dos datos. Por supuesto, en lugar de usar datos directamente, los operadores también admiten como operandos variables. Por ejemplo: var suma:Number; var sumando:Number; sumando=1; suma=sumando+3; //El operador + aplicado a una variable y a un dato explícito trace (suma); A continuación estudiaremos los principales operadores de ActionScript dividiéndolos en varias categorías.

4.3.5.1. Operadores aritméticos Los principales operadores aritméticos son: +

Suma. Por ejemplo, 5+2 (el resultado es 7).

Resta y signo negativo. Por ejemplo, 5-2 (el resultado es 3), o -variable (el resultado es el dato almacenado en variable cambiado de signo).

Multiplicación. Por ejemplo, 5*2 (el resultado es 10).

División. Por ejemplo, 5/2 (el resultado es 2,5).

Módulo o resto de división entera. Por ejemplo, 5%2 (el resultado es 1).

Incremento unitario (sumar uno). Por ejemplo, 5++ (el resultado es 6).

Decremento unitario (restar uno). Por ejemplo, 5-- (el resultado es 4).

La precedencia de estos operadores es la misma a la que estamos acostumbrados del cálculo, es decir, primero se calculan los productos y cocientes, y después las sumas y restas. Por ejemplo, la expresión 5+2*3 da como resultado 11. No obstante, el orden de las operaciones puede modificarse mediante la utilización de paréntesis; por ejemplo, la operación (5+2)*3 da como resultado 21. A igualdad de precedencia (por ejemplo, si concatenamos varias sumas, las operaciones se realizan de izquierda a derecha. Los operadores incremento y decremento unitario, en combinación con el operador de asignación =, se comportan de distinta forma según se coloque delante del dato (en modo prefijo) o detrás de él (en modo sufijo). Si se utilizan en modo prefijo tienen precedencia sobre la asignación, mientras que si se usan en modo sufijo es el operador asignación = el que tiene precedencia sobre ellos. Por ejemplo, analicemos el siguiente código: 100

var resultado:int; var operando:int; operando=5; resultado=++operando; trace(resultado); resultado=operando++; trace(resultado); trace(operando); El primer trace mostrará el valor 6, porque en la línea anterior el operador ++ se ha usado en modo prefijo, por lo que tiene precedencia sobre la asignación, es decir, primero se incrementa el valor de operando en una unidad, que pasa de valer 5 a 6, y después se asigna ese valor a resultado. El segundo trace también mostrará el valor 6, porque en la línea anterior el operador ++ se ha usado en modo sufijo, es decir, con menor precedencia que la asignación. Consecuentemente, primero se asigna a resultado el valor de operando antes del incremento unitario, y después se realiza ese incremento. El tercer trace muestra el valor 7, demostrando efectivamente que se incrementó el valor de operando en una unidad después de asignarle su valor anterior a resultado. El operador + también puede utilizarse con datos de tipo String (cadenas de caracteres) para concatenarlos. Por ejemplo, "Flash" + "CS4" dará como resultado la cadena "FlashCS4". ¿Son éstas las únicas operaciones matemáticas que "sabe hacer" Flash? La respuesta es no; ActionScript dispone de una clase llamada Math, que estudiaremos posteriormente y que ofrece, entre otros, los siguientes métodos: sqrt(): Para calcular raíces cuadradas. pow(): Para elevar una base a un exponente. sin(), cos(), tan(), asin(), acos(), atan(): Para calcular las principales funciones trigonométricas (seno, coseno, tangente, arcoseno, arcocoseno y arcotangente). random(): Para generar números pseudoaleatorios. Igualmente, existe una clase llamada String que ofrece varios métodos para manipular cadenas de caracteres, y que también estudiaremos posteriormente.

4.3.5.2. Operadores de asignaciónAdemás del operador de asignación básico = que ya conocemos, ActionScript reconoce estos otros, que son el resultado de combinar la asignación con las cinco operaciones aritméticas básicas: +=

Suma y asignación.

Resta y asignación.

Producto y asignación.

División y asignación.

Módulo y asignación.

Todos estos operadores sirven para asignar datos a variables y su funcionamiento es muy similar; por ejemplo, el operador += suma el dato que indiquemos a su derecha al que tuviera originalmente la variable que indiquemos a su izquierda y almacena el resultado en esa misma variable. Otra forma de entender estos operadores es considerándolos una notación reducida para realizar una operación aritmética y una asignación. Por ejemplo, la expresión resultado+=5 sería la notación reducida de la expresión resultado=resultado+5. A continuación se muestra un ejemplo de aplicación de cada uno de estos operadores junto con un comentario del resultado que produce: var numero1:Number;

101

var resultado:Number; numero1=10; resultado=numero1; trace(resultado); //10 resultado+=numero1; //resultado=resultado+10 trace(resultado); //20 resultado-=numero1; //resultado=resultado-10 trace(resultado); //10 resultado*=numero1; //resultado=resultado*10 trace(resultado); //100 resultado/=numero1; //resultado=resultado/10 trace(resultado); //10 resultado%=numero1; //resultado=resultado%10 trace(resultado); //0

4.3.5.3. Operadores de comparación. Los operadores de comparación siempre dan como resultado un dato de tipo Boolean, es decir, true o false, verdadero o falso. Estos operadores se utilizan especialmente en las expresiones de control de flujo que estudiaremos posteriormente, como bucles y bifurcaciones, y el resultado que producen puede entenderse como la respuesta a las preguntas que se plantean a continuación: ==

¿Es el dato de la izquierda igual que el de la derecha?

¿Es diferente el dato de la izquierda del de la derecha?

¿Es menor el dato de la izquierda que el de la derecha?

¿Es menor o igual el dato de la izquierda que el de la derecha?

¿Es mayor el dato de la izquierda que el de la derecha?

¿Es mayor o igual el dato de la izquierda que el de la derecha?

Aunque solemos tener la tendencia a pensar que estos operadores sólo pueden utilizarse con números, lo cierto es que realmente son aplicables a todo tipo de datos, como cadenas de caracteres. En el caso concreto de las cadenas de caracteres realizan comparaciones de orden alfabético creciente; por ejemplo "a"<"b" da como resultado true porque la a va antes en el abecedario que la b, y "A"<"a" también da como resultado true pues las mayúsculas se consideran anteriores a las minúsculas ¿Por qué? Porque existe un convenio internacional llamado Unicode que asigna un número de orden a cada carácter. ActionScript se basa en este convenio para realizar las comparaciones y esto supone una importante limitación para muchos idiomas, como el castellano, pues algunos caracteres como la ñ, las letras con acento o con diéresis, tienen asignados códigos Unicode que no coinciden con el orden alfabético real de nuestro idioma. Por ejemplo, el código Unicode de la letra "ñ" es el 241 (00F1 en hexadecimal), mientras que los caracteres de la "a" a la "z" ocupan las posiciones de la 97 a la 122, de modo que la "ñ" se considera mayor o posterior en el abecedario a todas las demás letras minúsculas. En la sección posterior dedicada a la clase String se explican algunos métodos que permiten averiguar el código Unicode de un carácter. No obstante, en este artículo de Wikipedia http://en.wikipedia.org/wiki/List_of_Unicode_characters encontrará todos los códigos agrupados por bloques. Los caracteres del idioma castellano se encuentran distribuidos entre los bloques Basic Latin y Latin-1. Por ejemplo, la sentencia trace("ñ"<"z"); producirá el resultado false en ActionScript.

4.3.5.4. Operadores lógicos. Los operadores lógicos suelen utilizarse en combinación con los de comparación para construir expresiones más complejas y son los siguientes: 102

&& || !

Y lógico O lógico Negación lógica

Recuerde que dadas dos proposiciones A y B las reglas de la lógica establecen que: • • •

A && B sólo se resolverá como true si A y B son también true. En otras palabras: A && B es true si y sólo si lo son también A y B. A || B sólo se resolverá como false si A y B son también false. En otras palabras: A || B es false si y sólo si lo son también A y B. !A se resolverá con el valor opuesto al de A, es decir, si A es true !A será false, y si A es false !A será true.

Por ejemplo, la expresión 3<5 && "ñ">"a" se evaluaría como true. Tenga en cuenta que los operadores de paréntesis también pueden ayudarnos a establecer el orden en el que se realizan las comparaciones, no sólo las operaciones aritméticas. En ausencia de paréntesis, el operador de negación ! tiene precedencia sobre el operador && (Y) y éste, a su vez, tiene precedencia sobre el operador || (O).

4.3.6. Control del flujo de ejecución. Las instrucciones de un programa ActionScript se ejecutan ordenadamente una detrás de otras, pero existen técnicas para alterar este flujo predeterminado que básicamente pueden clasificarse en tres categorías: •

•

Bucles: Ejecutan un mismo bloque de sentencias varias veces hasta que cierta expresión se evalúa como true. Por ejemplo, en un juego de estilo Tetris existiría un bloque de sentencias que hiciese bajar la pieza a colocar fila por fila, y ese bloque se ejecutaría dentro de un bucle hasta que la expresión "se ha alcanzado la fila más baja o se ha topado con otra pieza colocada anteriormente" se evaluase como true. Bifurcaciones: Ejecutan distintos bloques de sentencias en función de cuál sea el valor de una expresión. Por ejemplo, en un juego de naves espaciales, si el jugador fuera derribado por los alienígenas se ejecutaría una bifurcación que, en función de cuál fuera el número de "vidas" restantes, terminaría el juego (Game Over), o iniciaría una nueva ronda reduciendo en una unidad el número de vidas. Funciones: Desplazan el flujo de ejecución a un bloque de código que se encuentra en otro lugar y, cuando este bloque finaliza, la ejecución continúa en la misma sentencia que inició el salto. Esta técnica suele utilizarse cuando un mismo bloque de sentencias debe aplicarse en repetidas ocasiones, pues así nos ahorramos tener que escribirlo varias veces y facilitamos el mantenimiento de la aplicación. Por ejemplo, en un juego de estilo Comecocos existiría una función que se encargase de mover los fantasmas a través del laberinto; de hecho, toda la lógica de este juego podría resumirse en un bucle con dos saltos a funciones en su interior: moverComeCocos y moverFantasmas. Como descubriremos posteriormente, las funciones están íntimamente relacionadas con los métodos de las clases.

4.3.6.1. Bucles. Los bucles son instrucciones que permiten ejecutar una misma sentencia o un conjunto de sentencias varias veces; cada una de estas ejecuciones se denomina iteración. Se utilizan con mucha frecuencia en Flash; por ejemplo, para hacer que una instancia cruce la pantalla de lado a lado, podemos programar un bucle que vaya actualizando su posición iteración a iteración. Desafortunadamente, este ejemplo tan evidente de cuál es el funcionamiento de un bucle no es aplicable en Flash, puesto que cuando Flash encuentra un bucle se "afana" en realizar sus iteraciones lo antes posible, dejando todo lo demás para después, incluso la actualización de la pantalla, de modo que lo único que veríamos sería la instancia en un extremo (antes de iniciar el bucle), y permanecería ahí quieta durante toda la ejecución del bucle, saltando instantáneamente al otro extremo con la finalización de las iteraciones. Pero dejemos de momento a un lado esta cuestión (que ya resolveremos en el bloque siguiente cuando aprendamos a controlar el cabezal de reproducción) y concentrémonos en los bucles en sí. ¿Quién controla cuántas iteraciones realiza un bucle? En los tres tipos de bucles que vamos a estudiar a continuación se 103

utiliza una expresión (generalmente de comparación) como medio de control; mientras el resultado de esa expresión sea true el bucle seguirá iterando, pero cuando se evalúe como false dejará de iterar y el flujo de ejecución continuará en la sentencia posterior al bucle. La elección de la expresión de control es fundamental, pues si la diseñamos incorrectamente podemos incurrir en uno de los fallos de programación más difíciles de detectar, denominado bucle infinito. Un bucle infinito es aquél en el que su expresión de control jamás se evalúa como false, de modo que sigue iterando indefinidamente. Flash asigna un tiempo máximo de ejecución (por defecto, 15 segundos) a cada script y, si se supera este límite, detiene la reproducción de la película. Si nos encontrásemos en el modo de edición, es decir si hubiésemos pulsado Control+Intro para probar la película desde Adobe Flash Professional, aparecería un mensaje de error en el panel Salida indicando que se ha superado el tiempo máximo de ejecución, que resulta muy útil para detectar posibles bucles infinitos (aunque este mensaje también puede ser una "falsa alarma", pues existen scripts perfectamente correctos que requieren más tiempo del asignado para ejecutarse; en estos casos podemos aumentar el tiempo máximo ejecutando el comando Archivo>Configuración de publicación, activando la ficha Flash e introduciendo el nuevo valor máximo en el cuadro de texto Límite de tiempo del script). Sin embargo, si nos encontrásemos en el modo de ejecución, es decir, reproduciendo la película SWF en Flash Player, el mensaje que aparecería sería similar al siguiente (algunos navegadores web no muestran este mensaje y simplemente detienen la ejecución sin dar ninguna explicación al usuario).

A continuación se describen las tres instrucciones básicas para crear bucles en Flash: for, while y do...while. La sintaxis de la instrucción for es la siguiente: for(expresion_iniciación;expresión_control;expresión_post_iteración){ ...bloque de sentencia a repetir... }; Donde expresión_iniciación es una expresión que se ejecuta una sola vez y antes de realizar la primera comprobación de si expresión_control es true o no. En caso de que sea true, se ejecutarán las sentencias del interior del bucle y, al terminar esa iteración, se ejecutará la expresión_post_iteración, volviendo nuevamente a evaluarse el valor de expresión_control y repitiendo este mismo ciclo una y otra vez hasta que expresión_control se evalúe como false. En resumen: •

expresión_iniciación se ejecuta una sola vez y antes de iniciar la primera iteración.

•

expresión_control se evalúa antes de cada iteración y debe ser true para que se lleve a cabo la iteración; en caso contrario, se da por terminado el bucle y la ejecución continúa en la sentencia siguiente.

•

expresión_post_iteración se ejecuta al terminar cada iteración, justo antes de evaluar expresión_control.

Por ejemplo: 104

var i:Number; for(i=1;i<10;i++){ trace(i); }; Este bucle asigna el valor 1 a i, después comprueba si i<10 y, como efectivamente 1 es menor que 10, ejecuta el bloque de sentencias interior al bucle, que en este caso es un simple trace que muestra en el panel Salida el valor de i, es decir, que muestra el valor 1. Al terminar esta primera iteración se ejecuta i++, pasando así i a adquirir el valor 2, y nuevamente se comprueba si i<10 que, como es cierto (2<10), provoca la ejecución de una segunda iteración, que muestra el valor 2 en el panel Salida. Al terminar esta segunda iteración se ejecuta nuevamente i++ de modo que i pasa a contener el valor 3 y se repite el mismo procedimiento una y otra vez: comprobar si i<10, ejecutar la sentencia trace, incrementar el valor de i mediante i++. ¿Cuándo termina este proceso? Imaginemos que hemos alcanzado ya el final de la novena iteración, de modo que i contiene el valor 9 y que, al ejecutarse i++ pasa a adquirir el valor 10; al comprobar si i<10 el resultado será false y, consecuentemente, se dará por terminado el bucle. El resultado del script anterior sería mostrar en el panel Salida los números del 1 al 9. A muchos usuarios nos ayuda traducir las instrucciones de código a lenguaje humano para entenderlas mejor; en el caso del bucle anterior podríamos traducir la instrucción que estamos dando al ordenador del siguiente modo: "Desde que i vale 1 y mientras sea menor que 10, muestra el valor de i en el panel Salida e incrementa el valor de i después de cada iteración". ¿Qué cree que ocurriría en el siguiente bucle? var i:Number; for(i=1;i<10;i++){ trace(i); i--; }; Efectivamente se trata de uno de esos "temibles" bucles infinitos, que en este caso simplemente muestra una y otra vez el valor 1 en el panel Salida, pues el efecto de incremento de i++ es anulado por la sentencia i-- que hay en el interior del bucle. Truco Es muy habitual que los bucles for se utilicen para "contar/realizar" un número concreto de iteraciones, como en los ejemplos anteriores, en los que hemos utilizado i++ para avanzar secuencialmente. Obviamente, en lugar de i++ podríamos utilizar i=i+2 para "contar" de dos en dos, o i-- para "contar" hacia atrás. Por ejemplo, el siguiente código mostraría la clásica cuenta atrás 3, 2, 1, 0: var i:Number; for(i=3;i>=0;i--){ trace(i); }; La sintaxis del bucle while es más sencilla que la anterior: while(expresión_de_control){ ...bloque de sentencia a repetir... }; Este tipo de bucles comienza evaluando expresión_de_control; si es true se realiza la primera iteración; al finalizar la iteración se repite nuevamente este mismo proceso una y otra vez hasta que expresión_de_control es false, momento en el que se abandona el bucle sin realizar más iteraciones. Por ejemplo, el siguiente código averigua la máxima potencia de 2 entre la que es divisible numero: var numero:Number; 105

var potencia:Number; potencia=0; numero=256; trace ("El número "+numero+" es divisible entre:"); while(numero%2==0){ potencia++; numero=numero/2; } trace ("2 elevado a "+potencia); En este caso, la traducción a lenguaje humano de la instrucción while podría ser: "mientras el resto de dividir numero entre 2 sea nulo, incrementa en una unidad el valor de potencia y almacena en numero el cociente de sí mismo dividido entre 2". Por último, la sintaxis del bucle do...while es casi idéntica a la del anterior: do{ ...bloque de sentencia a repetir... }while(expresion_de_control); Pero su funcionamiento es muy diferente; el bucle do...while comprueba la expresión de control después de cada iteración, no antes. Esto tiene una consecuencia inmediata: los bucles do...while siempre realizan al menos una iteración, mientras que los bucles for o while podrían no realizar ninguna. Por ejemplo, imagine que tenemos que preparar el mensaje final de un juego en el que se conceden 5 puntos por cada adversario derribado: var mensaje:String; var derribos:int; var puntuacion:uint; derribos=6; puntuacion=0; do{ mensaje="Ha obtenido "+puntuacion+" puntos."; puntuacion+=5; derribos--; }while(derribos>=0); trace(mensaje); La traducción genérica a lenguaje humano de un bucle do...while podría ser: "Haz lo siguiente y repítelo sólo si la expresión de control sigue siendo cierta". Imagine que en el código anterior hubiéramos definido la variable derribos con el tipo uint (enteros sólo positivos incluido el cero) ¿qué cree que hubiera ocurrido? Efectivamente, estaríamos ante un nuevo caso de bucle infinito pues, como derribos no puede adquirir valores negativos, la expresión derribos>=0 se evaluaría perpetuamente como true. Pero ¿qué hace Flash cuando derribos ya vale 0 y le pedimos mediante derribos-- que le reste otra unidad? Pues que sigue descendiendo dentro del rango de valores que admite el tipo uint y, como no hay ningún valor menor que cero, vuelve a empezar la cuenta atrás desde el valor máximo que admite uint (4.294.967.295), es decir, se resetea el contador.

4.3.6.2. Bifurcaciones. Las bifurcaciones son instrucciones que permiten elegir entre varios bloques de sentencias cuál o cuáles queremos ejecutar. ¿Cómo se elige el bloque que se va a ejecutar? Como en el caso de los bucles, a través de evaluar expresiones como ciertas (true) o falsas (false). Básicamente existen dos instrucciones de bifurcación en ActionScript: if y switch, aunque la primera puede presentarse con varios aspectos diferentes. 106

La sintaxis básica de una bifurcación if es la siguiente: if(expresion_de_control){ ...bloque de sentencias a ejecutar... } Que podríamos traducir del siguiente modo: "Si la expresión de control es cierta, ejecuta el bloque de sentencias que hay en el interior". ¿Y si no fuera cierta? No se ejecutaría el bloque de sentencias interior, y el flujo de ejecución del script continuaría en la sentencia posterior a la bifurcación if. Pero, ¿y si quisiera ejecutar un bloque cuando la expresión fuera cierta y otro diferente cuando fuera falsa? En este caso tendríamos que recurrir a otra de las variantes de la bifurcación if: if(expresion_de_control){ ...bloque de sentencias a ejecutar si la expresión es cierta... }else{ ...bloque de sentencias a ejecutar si la expresión es falsa... }; Que podría traducirse como: "Si la expresión es cierta ejecuta este primer bloque de sentencias y, en caso contrario (else), ejecuta este segundo". Pero, ¿y si quisiera utilizar una nueva bifurcación en caso de que la primera expresión de control se evaluara como falsa? En este caso recurriríamos a la tercera y última variante de la instrucción if, que es la siguiente: if(expresion_de_control_1){ ...bloque de sentencias a ejecutar si la expresión 1 es cierta... }else if(expresion_de_control_2){ ...bloque de sentencias a ejecutar si la expresión 1 es falsa y la 2 cierta... }; Podemos encadenar de este modo tantas estructuras else if como queramos, pero teniendo en cuenta que sólo se ejecutará el bloque de sentencias asociado a una de ellas, la primera que se evalúe como cierta; en otras palabras, en cuanto una expresión se evalúe como true se ejecutará su bloque de sentencias correspondiente y se ignorarán el resto de estructuras else if. También podemos incluir una estructura else al final de varios else if para proponer un bloque de instrucciones que se ejecute aunque todas las expresiones de control de los else if sean falsas. Por ejemplo: if (edad<11){ trace ("Categoría benjamín"); }else if(edad<13) { trace ("Categoría alevín"); }else if(edad<15) { trace ("Categoría juvenil"); }else { trace ("Categoría cadente"); }; Debe destacarse que el orden de las expresiones de control en las estructuras if...else if es fundamental, pues se ejecuta el bloque de la primera de ellas que se evalúa como true. Por ejemplo, ¿cuál sería el resultado del siguiente script (en contraposición al del ejemplo anterior) si la variable edad contuviese el valor 8? if(edad<15) { trace ("Categoría juvenil"); }else if(edad<13) { 107

trace ("Categoría alevín"); }else if (edad<11){ trace ("Categoría benjamín"); }else { trace ("Categoría cadente"); }; Efectivamente, se mostraría el mensaje "Categoría juvenil", cuando lo razonable sería que apareciese el mensaje "Categoría benjamín". Por supuesto, dentro del bloque de sentencias de una bifurcación puede haber otra bifurcación, como en el siguiente ejemplo: if (precio>100){ if(clientePreferente==true){ descuento=25; }else{ descuento=15; }; }else{ if(clientePreferente==true){ descuento=15; }else{ descuento=5; }; }; Intente responder a las siguientes preguntas en base al script anterior. •

¿Cuál sería el descuento para un cliente preferente por una compra inferior a 100 euros?

•

¿Cuál sería el descuento para un cliente no preferente por una compra superior a 100 euros? Efectivamente, la respuesta a ambas preguntas es 15. Advertencia En las expresiones de control de las bifurcaciones y bucles debemos tener especial cuidado en no confundir el operador de comparación == con el operador de asignación =. Por ejemplo, intente discernir cuál será el resultado del siguiente script. var cabello:String; cabello="negro"; if(cabello ="rojo"){ trace ("Pelirrojo"); }else if(cabello ="amarillo"){ trace ("Rubio"); }else if(cabello ="negro"){ trace ("Moreno"); }else{ trace ("Castaño"); } Este guión mostrará el texto "Pelirrojo" porque hemos usado = en lugar de ==. Cuando Flash evalúa la expresión cabello = "rojo" asigna el valor "rojo" a la variable cabello y, como esta asignación se realiza con éxito, devuelve el valor true, que es justo lo que estaba esperando la instrucción if para ejecutar el primer bloque de sentencias. No obstante, si revisásemos el panel Errores descubriríamos que Flash nos advierte 108

de este potencial error mediante un aviso (warning); los avisos, a diferencia de los errores, no detienen la ejecución de la película. Hasta ahora, todas las instrucciones de control que hemos estudiado (tanto bucles como bifurcaciones) basaban su funcionamiento en la evaluación de expresiones lógicas, es decir, cuyo valor es true o false. Sin embargo, la instrucción de bifurcación switch puede utilizar cualquier tipo de expresiones (numéricas, de cadena de texto y lógicas), discriminando no sólo entre dos valores, sino entre cuáles tantos como fuera necesario. La sintaxis de la instrucción switch es la siguiente (los elementos indicados entre corchetes [] son opcionales): switch(expresión_de_control){ case dato1: ...bloque de sentencias 1... case dato2: ...bloque de sentencias 2... ... [default:] [...bloque de sentencias predeterminado...] } La traducción de esta instrucción podría ser: "Atendiendo al valor de expresión_de_control, ejecuta el bloque de sentencias 1 y todos los siguientes en caso de que sea dato1, el bloque de sentencias 2 y todos los siguientes en caso de que sea dato2, ..., o el bloque de sentencias predeterminado (default) si su contenido no coincide con ninguno de los casos especificados anteriormente". Por ejemplo: switch (color){ case "rojo": trace("Pelirrojo"); case "amarillo": trace("Rubio"); case "blanco": trace("Cano"); case "negro": trace("Moreno"); case "marrón": trace("Castaño"); default: trace("Calvo"); }; Si color contuviera el dato "blanco" se mostrarían en el panel Salida las palabras Cano, Moreno, Castaño y Calvo. Sí, seguro que todos estamos pensando lo mismo, esto no parece tener mucho sentido... Puede tenerlo en algunos casos como se explicará posteriormente, pero si quisiéramos que el código anterior se comportase de un modo lógico deberíamos recurrir a la instrucción break. Esta instrucción sirve para abandonar un bucle antes de que se haga false su expresión de control (como se explica en la sección siguiente) y para que sólo se ejecute una de las opciones de una bifurcación de tipo switch. El código anterior, con el uso de break, pasaría a ser: switch (color){ case "rojo": trace("Pelirrojo"); break; case "amarillo": trace("Rubio"); 109

};

break; case "blanco": trace("Cano"); break; case "negro": trace("Moreno"); break; case "marrón": trace("Castaño"); break; default: trace("Calvo");

Un ejemplo en el que tendría sentido usar una bifurcación switch sin break podría ser el siguiente (o cualquier otro en el que los casos (case) sean acumulativos): //Equipamiento Citroen Xsara switch(modelo){ case "exclusive": trace("GPS"); case "premier": trace("ESP"); case "collection": trace("ABS"); default: trace("6 airbags"); }; Si lo deseamos, también podemos usar break en unos casos y en otros no (el uso del caso default también es opcional), como en el siguiente ejemplo que muestra el nombre de la comunidad autónoma a la que pertenece una provincia: switch(provincia){ case "Huesca": case "Zaragoza": case "Teruel": trace("Aragón"); break; case "Caceres": case "Badajoz": trace("Extremadura"); break; } 110

Por último, existe una tercera forma de bifurcación que no es una instrucción sino un operador, el operador condicional ?:. La sintaxis de este operador es la siguiente: expresión_de_control?valor_para_true:valor_para_false El operador ?: devuelve valor_para_true si expresión_de_control se evalúa como true o valor_para_false si se evalúa como false. Por ejemplo: var provincia:String; var comunidad_autonoma:String; provincia="Badajoz"; comunidad_autonoma=provincia=="Cáceres"||provincia=="Badajoz"?"Extremadura":"No pertenece a Extremadura"; trace(comunidad_autonoma); El efecto de este código será mostrar "Extremadura" en el panel Salida, pues la expresión de control provincia=="Cáceres"||provincia=="Badajoz" es true. Recuerde que || es el operador lógico "o". Intente deducir cuál será el resultado de este otro script: var provincia:String; provincia="Leon"; trace(provincia="Murcia"?"Es Murcia":"No es Murcia"); Muy bien, ya veo que no cayó en la trampa; efectivamente el resultado será "Es Murcia". ¿Cómo? ¿Qué si cayó en la trampa? Recuerde que el operador de asignación es = y que devuelve true siempre que la asignación no esté impedida por el tipo de datos de la variable, mientras que el operador de comparación de igualdad es ==. Disculpe que se insista en este asunto, pero es una de las fuentes de error más difíciles de localizar.

4.3.6.3. break y continue. Los bucles sirven para ejecutar un mismo conjunto de instrucciones varias veces, pero ¿y si quisiéramos realizar excepciones? Es decir, ¿y si quisiéramos que ese conjunto de instrucciones se ejecutase en unos casos sí y en otros no? Para implementar estas "excepciones" contamos con las instrucciones break y continue. break sirve para abandonar un bucle sin llegar a realizar todas sus iteraciones y continuar la ejecución en la instrucción siguiente al bucle. Por el contrario, continue abandona la iteración actual, ignorando las instrucciones que pudieran aún quedar por ejecutar, pero sin salir del bucle, es decir, continuando con la siguiente iteración. Por ejemplo, para saber si un número es primo podríamos crear un bucle que analizase el módulo de dividirlo entre todos los números comprendidos entre 2 y el inmediatamente anterior a sí mismo; en cuanto alguno de esos restos fuera nulo ya sabríamos que el número no es primo y, consecuentemente, no tendría sentido seguir realizando el resto de las iteraciones... podríamos abandonar el bucle con un break: var numero:uint; var i:uint; numero=513; for(i=2;i<numero;i++){ if (numero%i==0){ trace(numero+" no es primo porque es divisible entre "+i); break; } } Este programa sólo tendrá que realizar 2 iteraciones, pues 513 es divisible entre 3, de modo que nos estamos ahorrando un montón de tiempo perdido. 111

Otro ejemplo un poco más complejo: imaginemos que nos solicitan localizar todos los números primos comprendidos entre 2 y 100. Podríamos aprovechar básicamente el bucle anterior anidándolo dentro de otro bucle que fuera haciendo variar el valor de numero entre 2 y 100. El código podría ser el siguiente: var i:uint; var numero:uint; var esPrimo:Boolean; for (numero=2; numero<100; numero++) { esPrimo=true; for (i=2; i<numero; i++) { if (numero%i==0) { //No es primo esPrimo=false; break; } } if (esPrimo==true) { trace(numero); } } Observe que se ha recurrido a una variable (esPrimo) de tipo Boolean para conceder el "beneficio de la duda" a todos los números antes de empezar a comprobar si son divisibles, pero que en cuanto se encuentra un divisor exacto se les retira ese beneficio asignando false a la variable esPrimo. Para poner en práctica la instrucción continue, imagine que nos piden descomponer un número en factores primos. Podríamos hacerlo utilizando un bucle para ir probando si ese número es divisible entre los números del 2 en adelante. Si fuera divisible entre un número, ya sabríamos que ese número es un factor primo (sabemos que es primo porque vamos probando de números menores a mayores... pero esto no tiene mayor importancia para el ejemplo), pero no podríamos pasar aún al número siguiente, pues podría darse el caso de que fuese divisible varias veces entre ese mismo factor primo. ¿Cómo podríamos resolverlo? Analice el siguiente código: var numero:uint; var divisor:uint; var resultado:String; numero=396; divisor=2; resultado=396+"="; while(numero!=1){ if(numero%divisor==0){ resultado=resultado+divisor+"x"; numero=numero/divisor; continue; } divisor++; } trace(resultado); Observe que la presencia de continue impide que se ejecute la instrucción divisor++ si el resto de numero entre divisor es nulo. Recuerde que continue ignora el resto de las instrucciones de la iteración actual y salta directamente a la iteración siguiente. De este modo conseguimos re-probar con el mismo divisor por si fuera nuevamente divisible entre él. ¿No le gustó el ejemplo? ¿Demasiado complejo? Quizás tenga razón... me ofusqué con el fascinante mundo de los números primos. Aquí tiene un ejemplo más básico del funcionamiento de continue, que simplemente muestra qué números son pares entre el 1 y el 10: 112

var i:uint; for(i=1;i<=10;i++){ if (i%2!=0){ continue; } trace(i+" es par"); }

4.3.6.4. Funciones. Las funciones son uno de los recursos clásicos en programación para reutilizar un mismo bloque de código varias veces. Básicamente una función es un conjunto de instrucciones al que asignamos un nombre para poder ejecutarlo siempre que queramos con sólo escribir ese nombre (sin tener que reescribir todas las instrucciones que contiene la función). No obstante, las funciones ofrecen aún más de flexibilidad, pues nos permiten manipular su funcionamiento (valga la redundancia) a través de parámetros; en otras palabras: al ejecutar una función podemos pasarle uno o más parámetros que condicione/n su funcionamiento. Por ejemplo, podríamos crear una función llamada potencia que sirviese para elevar una base a una potencia entera, y que recibiese como parámetros el valor de esa base y ese exponente, de tal forma que la misma función nos serviría para calcular cualquier potencia entera con sólo pasarle distintos parámetros. Los parámetros se escriben entre paréntesis a continuación del nombre de la función, y separados por comas. Además de recibir datos a través de los parámetros, las funciones también pueden devolver un valor (el que nosotros queramos, pero uno sólo) a través de la instrucción return, que podríamos recoger en una variable o utilizar directamente en una expresión. A continuación de la instrucción return escribiremos el dato que queramos devolver. Tenga en cuenta que esta instrucción fuerza la salida de la función, ignorando las demás instrucciones que pudiera haber debajo de ella, por lo que es frecuente ubicarla al final de la función (no obstante, hay casos en los que interesa colocarla en posiciones intermedias, por ejemplo, utilizando varios return dentro de instrucciones if que determinen cuál de ellos se ejecutará realmente). Además de las funciones que podamos crear nosotros en un programa, ActionScript nos ofrece multitud de funciones predefinidas. Por ejemplo, trace es realmente una función, que recibe como parámetro el dato que queremos mostrar en el panel Salida. Si lo recuerda, también utilizamos anteriormente funciones intrínsecas (incorporadas en ActionScript) cuando explicamos el casting o forzado de tipos de datos. La sintaxis para crear una función es la siguiente: function nombre(...lista_de_parámetros_separados_por_comas...){ ...bloque_de_instrucciones... } Por ejemplo, la función potencia que mencionamos anteriormente podría tener el siguiente aspecto: function potencia(base,exponente){ var i:uint; var resultado:Number; resultado=1; for(i=1;i<=exponente;i++){ resultado=resultado*base; } return resultado; } Y podríamos ejecutarla desde cualquier parte del código y siempre que quisiésemos con sólo escribir su nombre y pasarle unos parámetros; por ejemplo: trace(potencia(2,3)); Mostraría en el panel Salida el valor 8 (dos elevado a tres). 113

Información Si posee experiencia previa en programación probablemente se esté preguntando si los parámetros que se envían a las funciones de ActionScript mediante variables se reciben en ellas por valor o por referencia. Que se reciban por valor significaría que cualquier manipulación que se realizase en ese parámetro dentro de la función jamás repercutiría en la variable original, pues la función utiliza internamente un duplicado de la variable que recibe como parámetro. Por el contrario, que se reciban por referencia significaría que cualquier manipulación que se realizase en ese parámetro dentro de la función sí se trasladaría a la variable original, pues lo que recibe la función no es el contenido de la variable, sino la dirección de memoria en la que está almacenada (su referencia) y actúa directamente sobre el contenido de esa posición de memoria. ¿Recuerda la analogía de la cajonera que utilizamos al explicar las variables? Pasar una variable por valor sería como proporcionar a la función su contenido, negándole la posibilidad de saber en qué cajón se encuentra realmente ese contenido. Por el contrario, pasar una variable por referencia sería como proporcionar a la función el nombre del cajón, para que ella misma extraiga su contenido y opere con él, guardando el resultado en ese mismo cajón. Por ejemplo, a la vista del siguiente código, si los parámetros se pasasen por valor, el resultado de la última línea sería 5, mientras que si se pasasen por referencia sería 4: function restar(operando){ operando--; } var miVariable:Number; miVariable=5; restar(miVariable); trace(miVariable); La respuesta exacta a esta pregunta es que los parámetros se pasan siempre por referencia; sin embargo, si prueba el código anterior comprobará que el resultado es 5 en lugar de 4. ¿Por qué? Porque precisamente los parámetros de tipo int, uint, Number, Boolean y String son una excepción a esta regla y se comportan como si se pasasen por valor. Ahora que ya sabemos qué es una función, cómo se crea y cómo se ejecuta, ha llegado el momento de aclarar un asunto que tenemos pendiente: el alcance de las variables.

4.3.7. Ámbito o alcance de las variables. El alcance o ámbito de una variable indica en qué fragmentos de código es reconocible, es decir, desde qué fragmentos de código podemos consultar y/o establecer su valor. Las variables de ActionScript pueden ser globales o locales. Las variables globales son reconocibles en el fragmento de código en el que son declaradas, en cualquier otro script de su misma línea de tiempo directamente, y en cualquier otro script de cualquier otra línea de tiempo indirectamente, es decir, son reconocibles dentro de cualquier script o función de nuestra aplicación: directamente si se trata de la misma línea de tiempo e indirectamente en caso contrario. Por el contrario, las variables locales sólo son reconocibles dentro de la función en la que son declaradas. Cualquier variable que declaremos fuera de una función (o de una clase, que como aprenderemos posteriormente, tienen muchas similitudes con las funciones) será considerada global y, consecuentemente, podrá ser consultada o modificada desde cualquier parte de los scripts que componen nuestra película, incluso en el interior de funciones. En el siguiente ejemplo (además de contestar a la intrigante pregunta de cuál es la única circunferencia en la que su perímetro coincide con su área) se declara la variable pi como global (fuera de cualquier función), por lo que puede utilizarse tanto dentro como fuera de las funciones: var pi:Number; pi=3.14; function perimetro(radio){ return (2*pi*radio); 114

} function area(radio){ return(pi*radio*radio); } trace(perimetro(2)); //Mostrará 12.56 trace(area(2));//Mostrará también 12.56 trace(pi);//Mostrará 3.14 Por el contrario, en este segundo ejemplo se produciría un error en la última línea al calcular el área porque pi ha sido definida localmente dentro de la función perimetro y, consecuentemente, su alcance está limitado a esa función: function perimetro(radio) { var pi:Number; pi=3.14; return (2*pi*radio); } trace(perimetro(3)); trace("Area = "+(pi*3*3)); ¿Qué ocurriría si definiésemos dentro de una función una variable que coincidiese en nombre con una variable global? Que dentro de la función se utilizaría la variable local, y fuera la global. Por ejemplo: var variable:String; variable="global"; function miFuncion(){ var variable:String; variable="local"; trace(variable); } miFuncion(); //Muestra local trace(variable);//Muestra global ¿Quiere esto decir que no podríamos acceder desde el interior de la función a la variable global que tiene el mismo nombre que la local? La respuesta es No, es decir, que sí podríamos acceder, recurriendo a la referencia this. this puede considerarse una variable intrínseca de ActionScript cuyo valor es distinto según el lugar en el que la utilicemos, puesto que este valor es una referencia a la línea de tiempo en la que se encuentra el script. Consecuentemente, usado en un script de la línea de tiempo principal this nos proporcionará una referencia a la línea de tiempo principal, mientras que utilizado en un script de la línea de tiempo de un símbolo nos proporcionará una referencia a la línea de tiempo de ese símbolo. Entonces, usando this dentro de una función dispondremos de una referencia a la línea de tiempo en la que se encuentra esa función, pero ¿cómo accedemos a las variables de esa línea de tiempo? Las líneas de tiempo son en realidad objetos, es decir, instancias de clases, de modo que para acceder a cualquiera de sus propiedades o variables utilizaremos la sintaxis de punto. Por ejemplo, this.variable utilizado dentro de una función nos permitiría utilizar la variable variable (disculpe la redundancia) de la línea de tiempo: var variable:String; variable="global"; function miFuncion(){ var variable:String; variable="local"; trace("Variable local: "+variable); trace("Variable global: "+this.variable); } miFuncion(); //Muestra la variable local y la global 115

Advertencia Lo que sí es imposible es acceder a las variables locales desde el exterior de su propio bloque de código, es decir, desde el exterior de la función en la que son declaradas. Aún nos queda por resolver otra cuestión sobre el ámbito de las variables (lo que viene a continuación es un tema bastante farragoso relacionado con la herencia de clases; conviene afrontarlo con buena presencia de ánimo, por lo que quizás quiera considerar la posibilidad de tomarse un breve descanso antes de seguir adelante): ¿recuerda que al principio de esta sección indicamos que las variables globales eran accesibles desde cualquier guión de la película, directamente si el guión residía en la misma línea de tiempo, e indirectamente si residía en la línea de tiempo de otra instancia de tipo clip de película? ¿Qué quiere decir indirectamente? Cada elemento que colocamos sobre el escenario es en realidad una instancia (es decir, un objeto) de una clase intrínseca de ActionScript; por ejemplo, una forma es un objeto de la clase Shape, una imagen de mapa de bits es un objeto de la clase Bitmap, una instancia de un símbolo de tipo clip de película es un objeto de la clase MovieClip, ... Precisamente son los objetos de la clase MovieClip los únicos que pueden contener variables creadas con ActionScript (ya explicamos que en ActionScript 3 sólo se pueden escribir guiones en las líneas de tiempo), pero también pueden contener otros objetos, de modo que son a la vez objetos visibles y objetos contenedores de otros objetos. Cuando desde la línea de tiempo principal o desde la de un clip de película queremos referirnos a una variable de otro clip de película anidado en ellos (es decir, de un descendiente), no hay ningún problema; basta con escribir con sintaxis de punto la ruta completa de identificadores de instancias hasta alcanzar el de la variable. Por ejemplo, supongamos que desde el escenario queremos acceder a la variable diametro definida en la línea de tiempo de un clip de película del que se ha creado una instancia llamada luna, dentro de otro símbolo del que a su vez se ha creado una instancia en el escenario llamada sistemaSolar. Para acceder a esa propiedad escribiríamos sistemaSolar.luna.diametro, o para ser aún más precisos, this.sistemaSolar.luna.diametro. El problema se presenta cuando queremos acceder a una variable de un ascendiente; en estos casos tendremos que recurrir a la propiedad parent, que devuelve una referencia al objeto contenedor del objeto actual, es decir, al objeto en el que está anidado el objeto desde el que queremos hacer uso de la variable. Aplicando esto a nuestro ejemplo, pareciera que si queremos acceder a la variable numeroDePlanetas de sistemaSolar desde luna tendríamos que escribir this.parent. numeroDePlanetas, pero esto no es del todo exacto, pues parent devuelve una referencia a un objeto contenedor, no a un clip de película, y los objetos contenedores no pueden contener variables (recuerde que los clips de película son a la vez objetos contenedores). En realidad el objeto contenedor es además un clip de película o, más exactamente, es una instancia de la clase MovieClip, que a su vez es una extensión de la clase DisplayObjectContainer (objeto contenedor), pero el problema es que la referencia que nos da parent es al DisplayObjectContainer y no al MovieClip. ¿Cómo resolverlo? ¿Recuerda la técnica del casting de variables o forzado de tipos de datos? Podemos utilizar la función MovieClip() para forzar que la referencia devuelta por parent sea al propio clip de película en lugar de al objeto contenedor; por ejemplo: MovieClip(this.parent).numeroDePlanetas. En cierta forma es como si parent sólo nos permitiese acceder a un subconjunto de las características del clip de película ascendiente, entre las que no se encuentran las variables de su línea de tiempo, por lo que tenemos que indicarle expresamente que nos interesa acceder a la línea de tiempo, es decir, al clip de película. Esto que en principio puede parecer una complicación sin sentido, tiene su explicación en el hecho de que no todos los objetos contenedores son de tipo clip de película, por lo que parent no puede asumir directamente que va a existir una línea de tiempo en el objeto ascendiente del objeto actual. Para aclarar de un modo práctico este asunto vamos a realizar un ejemplo. Siga estos pasos: 1. Abrimos el archivo ud05_ejemplo02.fla (lo encontrará como un recurso adjunto a esta unidad didáctica). 2. En primer lugar nos fijamos en la biblioteca para conocer nuestros actores (véase la figura siguiente), en la que veremos que hay dos símbolos de tipo mapa de bits que corresponden a imágenes de la Tierra y la Luna vistas desde sus polos norte (tierra.png y luna.png, respectivamente), otros dos de tipo clip de película con los nombre tierra y luna que son simples duplicados de los anteriores creados para que puedan intervenir en animaciones (algunos tipos de animación de Flash sólo son aplicables a clips de película), otros 116

dos también de tipo clip de película y llamados tierra_rotando y luna_rotando que contienen animaciones de la Tierra y la Luna rotando alrededor de sus ejes, y un último clip de película llamado tierra_luna en el que se han montado el movimiento de rotación de la Tierra, y el de traslación y rotación de la Luna.

3. Fijémonos ahora en la línea de tiempo, que contiene dos capas: acciones y Capa 1. En Capa 1 se ha ubicado una instancia de tierra_luna, que es la que se ve en el escenario. A esta instancia se le ha asignado el nombre tierra_luna (aunque no es necesario que el nombre de las instancias coincida con el de los símbolos de los que proceden). En la capa acciones el primer fotograma está vacío, y el segundo contiene un pequeño script con la instrucción gotoAndPlay(1); que simplemente reenvía el cabezal de reproducción al fotograma 1, de modo que la película se reinicia una y otra vez, reproduciéndose indefinidamente. 4. Pulsamos Control+Intro para probar la película: veremos cómo la Tierra rota sobre sí misma, y cómo la Luna además de rotar sobre sí misma lo hace también alrededor de la Tierra. Aunque suponga apartarse del tema, no me resisto a comentar cómo se aprecia claramente en la animación que la Luna siempre muestra la misma cara hacia la Tierra (de ahí lo de la "cara oculta de la Luna"), pues su periodo de rotación medio prácticamente coincide con su periodo de traslación medio alrededor de la Tierra (unos 27,3 días terrestres). Cerramos la ventana de prueba para regresar al entorno de edición de Flash. A continuación, sólo en la versión en línea de este documento, podrá ver la animación que contiene la película.

117

5. Ahora vamos a revisar la estructura de la instancia tierra_luna. En el escenario, hacemos doble clic sobre la instancia tierra_luna para acceder a su modo de edición. Observamos que en la zona superior izquierda del escenario, junto a Escena 1, aparece ahora tierra_luna (esto nos indica que la línea de tiempo que estamos viendo es la de la instancia tierra_luna, no la principal de la película). La línea de tiempo está compuesta por 3 capas, pero no es necesario entrar en más detalle para este ejemplo (en el bloque siguiente aprenderemos a crear este tipo de animaciones). 6. En el escenario hacemos clic sobre la Tierra y, en el panel Propiedades, vemos que se trata de una instancia del símbolo tierra_rotando a la que hemos asignado precisamente ese mismo nombre (tierra_rotando). 7. En el escenario hacemos clic sobre la Luna (tenga cuidado de no hacer clic sobre la circunferencia que sirve de guía al movimiento de traslación de la Luna) y, en el panel Propiedades, comprobamos que se trata de una instancia del símbolo luna_rotando a la que hemos asignado precisamente ese mismo nombre (luna_rotando). 8. En el escenario, hacemos doble clic sobre la instancia tierra_rotando para acceder a su modo de edición (observe que en la esquina superior izquierda del escenario se añade tierra_rotando al "camino de migas" que nos indica qué elemento estamos editando). Fijémonos en la línea de tiempo. La Capa 1 contiene un primer fotograma clave con la imagen estática de la Tierra y, a continuación, una animación de 24 fotogramas que representa la rotación de la Tierra (se ha asimilado que cada fotograma equivale a una hora). La capa acciones contiene en el fotograma 1 un script en el que se declara la variable global rotacionesTierra y se le asigna el valor 0, y en el fotograma 25 un script gotoandPlay(2); que simplemente incrementa el valor de rotacionesTierra y reinicia otra vez la animación de rotación (recuerde que para acceder al script de un fotograma sólo tiene que hacer clic sobre el fotograma en la línea de tiempo y ejecutar el comando Ventana>Acciones, o pulsar la tecla F9). En resumen, el símbolo tierra_rotando posee una variable llamada rotacionesTierra que se establece a cero en el primer fotograma y que se va incrementando en una unidad cada vez que se reproduce la animación completa. Información El hecho de que la capa acciones contenga un fotograma más que la capa 1 podría inclinarnos a pensar que se producirá un salto en la animación cada vez que se alcance el fotograma 26, pues en este fotograma ya no hay imagen de la Tierra. Sin embargo, recuerde que ya advertimos en este bloque que los scripts de fotograma se ejecutan antes de representar en pantalla el propio contenido del fotograma. Consecuentemente, como el script del fotograma 26 contiene una instrucción para saltar al fotograma 2, ese salto se producirá inmediatamente cuando el cabezal de reproducción llegue al fotograma 26, sin dejar opción a que se produzca vacío alguno en la animación. 9. Ahora vamos a analizar el símbolo luna_rotando, y para ello debemos regresar previamente al símbolo tierra_luna haciendo clic sobre tierra_luna en el "camino de migas" de la zona superior izquierda del escenario y, a continuación, hacer doble clic sobre la imagen de la luna en el escenario (nuevamente tenga precaución de no hacer doble clic sobre la circunferencia orbital). La línea de tiempo de este símbolo es casi idéntica a la del paso anterior, salvo porque la duración de la animación es 655 fotogramas en lugar de 24 (655 fotogramas son unos 29,7 días si tomamos cada fotograma como una hora). En el fotograma 1 de la capa acciones se define la variable rotacionesLuna, a la que se asigna inicialmente el valor 0, y en el fotograma 657 se utiliza otro script para incrementar el valor de rotacionesLuna y regresar al fotograma 2. 10. Una vez analizados los símbolos principales que intervienen en la película, hacemos clic sobre Escena 1 en el "camino de migas" de la zona superior izquierda del escenario para regresar al modo de edición de la línea de tiempo principal. Recapitulando (véase la figura siguiente), en la línea de tiempo principal tenemos una instancia llamada tierra_luna que contiene dos instancias llamadas tierra_rotando y luna_rotando y, a su vez, cada una de estas instancias contiene una variable (rotacionesTierra y rotacionesLuna, respectivamente) que contabilizan el número de rotaciones alrededor de sus ejes de cada uno de estos astros. 118

11. ¿Qué código tendríamos que escribir delante de gotoAndPlay(1); en el fotograma 2 de la capa acciones de la línea de tiempo principal para que se mostrase el número de rotaciones de cada astro? trace("Rotaciones Tierra: "+this.tierra_luna.tierra_rotando.rotacionesTierra); trace("Rotaciones Luna: "+this.tierra_luna.luna_rotando.rotacionesLuna); gotoAndPlay(1); 12. ¿Y si quisiéramos mostrar el número de rotaciones de cada astro desde el fotograma 26 de la capa acciones de la línea de tiempo de la instancia tierra_rotando? rotacionesTierra++; trace("Rotaciones Tierra: "+this.rotacionesTierra); trace("Rotaciones Luna: "+MovieClip(this.parent).luna_rotando.rotacionesLuna); gotoAndPlay(2); 13. ¿Y si quisiéramos mostrar el número de rotaciones de cada astro desde el fotograma 657 de la capa acciones de la línea de tiempo de la instancia luna_rotando? rotacionesLuna++; trace("Rotaciones Tierra: "+MovieClip(this.parent).tierra_rotando.rotacionesTierra); trace("Rotaciones Luna: "+this.rotacionesLuna); gotoAndPlay(2);

4.3.8. Clases, objetos, propiedades y métodos. Las clases son fragmentos de código que nos sirven como moldes para crear objetos a partir de ellos. Por ejemplo, de una clase llamada Fantasma podríamos crear varios objetos que actuasen como fantasmas en un juego estilo PacMan (comecocos), cada uno de ellos encargado de controlar el movimiento de una instancia de clip de película que contuviera la animación de un fantasma. Las clases pueden definir propiedades y o métodos, es decir, características y habilidades que adquirirán todos los objetos que creemos a partir de ellas. Por ejemplo, nuestra clase Fantasma podría tener una propiedad llamada instanciaFantasma que contuviese la referencia a la instancia de clip de película que debe controlar. También podría definir un método llamado actualizarPosicion() que se encargase de mover al fantasma. Definir una propiedad dentro del código de una clase es equivalente a declarar una variable; mientras que definir un método es equivalente a crear una función. 119

Para crear un objeto a partir de una clase deberemos declarar una variable que utilice como tipo de dato el nombre de la clase y que además recurra a la instrucción new para indicar a ActionScript que es una instancia de una clase concreta. Por ejemplo, para crear un objeto de la clase Fantasma utilizaríamos la siguiente sentencia: var miFantasma:Fantasma=new Fantasma(); Una vez creado el objeto, adquirirá todas las propiedades y métodos definidos en la clase, y podremos utilizar la sintaxis de punto para acceder a ellos. Por ejemplo, los siguientes identificadores nos permitirían acceder a la propiedad instanciaFantasma y al método actualizarPosicion(): miFantasma.instanciaFantasma miFantasma.actualizarPosicion() ActionScript incluye cientos de clases predefinidas (en las siguientes secciones estudiaremos alunas de ellas), pero también nos permite crear nuestras propias clases. A las primeras nos referiremos como clases intrínsecas, mientras que las segundas las calificaremos como clases personalizadas. ¿Cómo crear una clase personalizada? El código de las clases siempre debe escribirse en un archivo de texto externo que tenga la extensión .AS. El nombre de este archivo debe coincidir con el de la propia clase, y deberemos almacenarlo en la misma carpeta en la que se encuentre la película FLA que vaya a hacer uso de esa clase. Al publicar la película, el código de la clase se integrará en el propio archivo SWF, de modo que no será necesario que arrastremos el archivo AS a todas las ubicaciones en las que queramos utilizar el SWF. La sintaxis básica para crear una clase es la siguiente: package { public class nombre_de_la_clase{ public function nombre_de_la_clase(){ //Método constructor } ...otras propiedades... ...otros métodos... } ...otras clases... } El bloque package simplemente es un contenedor para que ActionScript entienda que dentro va a encontrar la definición de una clase. Este bloque tiene utilidades adicionales que permiten ubicar los archivos de clase en carpetas distintas a las que se encuentra el archivo FLA, pero no vamos a entrar en eso, pues sólo es de utilidad en proyectos en los que colaboran simultáneamente varios desarrolladores o en proyectos muy ambiciosos. Dentro del bloque package se crea un bloque class que indica el nombre de la clase. Por convenio, la inicial de los nombres de las clases suele escribirse en mayúscula. ¿Qué quiere decir public? Cada clase, propiedad y método que definamos puede ser básicamente de dos tipos: public o private (hay otros tipos, como internal, static, protected, ..., pero para los objetivos de este curso no es necesario entrar en más complejidades). Los public serán accesibles desde guiones externos al archivo AS en el que se encuentra el código de la clase, mientras que los private sólo serán accesibles desde el propio código del archivo AS. En cierta forma, es como una nueva vuelta de tuerca al asunto del alcance de las variables (globales y locales) que tratamos anteriormente. Obviamente, la clase deberá ser public (como se indica en la sintaxis) si pensamos crear objetos a partir de ella desde guiones escritos en los fotogramas del archivo FLA. Dentro de cada clase debe existir un método/función especial denominado método constructor, cuyo nombre debe coincidir exactamente con el de la clase (y, consecuentemente, con el del archivo AS). Cuando creamos un objeto de una clase con la instrucción new realmente estamos solicitando que se ejecute su método constructor. Como en el caso de la clase, la definición del método constructor deberá ser public para que podamos crear objetos de esa clase desde el archivo FLA. Además del método constructor, el bloque class puede contener otras definiciones de propiedades y clases. Recuerde que las propiedades son variables, de modo que se definirán con la instrucción var (acompañada de 120

public o private), y que los métodos son funciones, de modo que se definirán mediante bloques function (indicando también si deseamos que sean public o private). En el siguiente código se define una clase llamada Fantasma con una propiedad privada llamada _color y un método público llamado actualizarPosición (por convenio, el nombre de las propiedades privadas comienza con _). package{ public class Fantasma{ private var _color:String; public function actualizarPosicion(){ ... } public function Fantasma(){ ...método constructor... } } } Para poner en práctica todo lo explicado anteriormente vamos a realizar un ejemplo: 1. Abrimos el archivo ud05_ejemplo03.fla (lo encontrará como un recurso adjunto a esta unidad didáctica). Este archivo contiene en la biblioteca un símbolo llamado fantasma, que es una sencilla animación de un fantasma similar a los del juego PacMan, y en la línea de tiempo dos capas llamadas fantasma1 y acciones. Nuestro objetivo es crear sobre el escenario varias instancias del fantasma que se muevan a su libre albedrío. Para lograrlo crearemos una clase llamada Fantasma, cuyo código defina el movimiento de un fantasma genérico, y después crearemos objetos de esta clase y los vincularemos con las instancias del fantasma. 2. Creamos una instancia del fantasma en el fotograma 1 de la capa fantasma1 (recuerde que tenemos que hacer clic sobre el fotograma 1 de la capa fantasma1 en la línea de tiempo para activarlo y, a continuación, arrastrar el símbolo fantasma desde la biblioteca al escenario). No se preocupe por la posición del fantasma dentro del escenario. 3. Pulsamos la combinación Control+Intro simplemente para ver el efecto de la animación, y cerramos la ventana de prueba para regresar al entorno de edición de Flash. 4. Vamos a asignar un nombre de instancia al fantasma que tenemos sobre el escenario, pues ya hemos comentado varias veces que sin este nombre no podríamos controlarlo mediante ActionScript. Con la herramienta Selección activada hacemos clic sobre el fantasma en el escenario para asegurarnos de que está seleccionado y, en el panel Propiedades, escribimos fantasma1 en el cuadro de texto de la zona superior <Nombre de instancia>. 5. Vamos a reservarnos el fotograma 1 para inicializar la película y después nos limitaremos simplemente a crear un bucle de repetición entre los fotogramas 2 y 3. En la capa acciones hacemos clic sobre el fotograma 3 y pulsamos la tecla F6 para crear en él un fotograma clave. Accedemos al panel Acciones pulsando la tecla F9 y escribimos la instrucción gotoAndPlay(2);. 6. Ahora extenderemos la animación del fantasma hasta el fotograma 2. En la línea de tiempo hacemos clic sobre el fotograma 3 de la capa fantasma1 y pulsamos la tecla F5. El aspecto de la línea de tiempo debe ser similar al que muestra la figura siguiente:

121

7. Supongamos que disponemos de una clase llamada Fantasma capaz de gestionar todo lo relacionado con el movimiento de cada fantasma, y que esta clase sólo requiere que pasemos como parámetro a su método constructor la referencia de la instancia que debe controlar. En tal caso, escribimos el siguiente código en el fotograma 1 de la capa acciones para crear un objeto de la clase Fantasma, pasándole como parámetro el nombre de nuestra instancia del fantasma (fantasma1): var miFantasma1:Fantasma=new Fantasma(this.fantasma1); 8. Supongamos también que esa clase dispone de un método llamado actualizarPosicion() que "sabe" todo lo necesario para cambiar la posición del fantasma. Siendo así, en el fotograma 3 de la capa acciones sólo tendríamos que invocar ese método antes de devolver el cabezal de reproducción al fotograma 2. Accedemos al código del fotograma 3 y escribimos la siguiente instrucción delante de gotoAndPlay(2): miFantasma1.actualizarPosicion(); 9. Obviamente, si la clase Fantasma existiese ya habríamos acabado nuestro trabajo (esto pone de manifiesto el potencial de la programación orientada a objetos), pero como no es así tendremos que crearla. Recuerde que el código de las clases siempre debe almacenarse en archivos de texto externos con la extensión AS, y cuyo nombre coincida con el de la clase. En Flash, ejecutamos el comando Archivo>Nuevo y, en el cuadro de diálogo que aparece, seleccionamos la opción Archivo ActionScript y pulsamos Aceptar. Accedemos así a una ventana de edición similar al panel Acciones en la que escribimos el "esqueleto" de nuestra clase (observamos también que en la zona superior, debajo de la barra de menús, disponemos de una lengüeta para cada uno de los dos documentos que tenemos abiertos: la película Fla y el archivo ActionScript): package{ public class Fantasma{ public function Fantasma(instancia){ } } } 10. Nuestra clase Fantasma va a necesitar una propiedad (variable) para almacenar la referencia a la instancia que recibe el método constructor a través del parámetro instancia; como esta propiedad sólo será necesaria dentro de la clase la definiremos como private, y le asignaremos el nombre _instanciaFantasma, pero ¿de qué tipo ha de ser esta variable? Debe ser de tipo MovieClip, pues va a contener la referencia a una instancia de un símbolo de tipo clip de película, pero esto nos enfrenta a otra de las dificultades de utilizar archivos de código externos: a diferencia de los códigos escritos en la línea de tiempo, los scripts externos sólo tienen conocimiento de las clases más básicas de ActionScript, entre las que no se incluye la clase MovieClip. Consecuentemente, para poder declarar una variable de este tipo en un script externo tendremos que importar esa clase (flash.display.MovieClip) mediante la instrucción import. Para conseguir todo esto escribimos el código resaltado en negrita: package{ import flash.display.MovieClip; public class Fantasma{ 122

}

private var _instanciaFantasma=new MovieClip(); public function Fantasma(instancia){ this._instanciaFantasma=instancia; }

11. Para mover el fantasma la clase dispondrá del método actualizarPosicion(), que ha de ser público porque recuerde que lo invocamos desde el fotograma 3 de la línea de tiempo de la película. Este método se limitará a mantener la dirección de avance del fantasma hasta que éste alcance los límites del escenario y, en ese momento, elegirá otra dirección. La nueva posición del fantasma se calcula sumando a su posición actual (la posición de una instancia se almacena en sus propiedades x e y) un incremento (que posteriormente veremos que puede ser +1, -1 ó 0), por lo que necesitaremos dos propiedades privadas más para almacenar estos incrementos, que denominaremos _incrementoX e _incrementoY. Para conseguir todo esto escribimos el código resaltado en negrita: package{ import flash.display.MovieClip; public class Fantasma{ private var _instanciaFantasma=new MovieClip(); private var _incrementoX:int; private var _incrementoY:int; public function Fantasma(instancia){ this._instanciaFantasma=instancia; } public function actualizarPosicion(){ this._instanciaFantasma.x+=this._incrementoX; this._instanciaFantasma.y+=this._incrementoY; } } } 12. No obstante, el incremento sólo debería aplicarse en caso de que no implique que el fantasma alcance los límites del escenario. Si alcanzase los límites habría que elegir unos incrementos diferentes, labor que encomendaremos a un método privado que llamaremos _elegirIncrementos(). ¿Cómo saber si el fantasma ha llegado a los límites del escenario? Como el escenario mide 400x400 píxeles y el fantasma 60x90 píxeles y tiene el punto de registro en el centro, bastará con que nos aseguremos de que la propiedad x se mantiene en el intervalo (30,370), y la propiedad y en el intervalo (40,350). Para conseguir todo esto escribimos el código resaltado en negrita: package{ import flash.display.MovieClip; public class Fantasma{ private var _instanciaFantasma=new MovieClip(); private var _incrementoX:int; private var _incrementoY:int; public function Fantasma(instancia){ this._instanciaFantasma=instancia; } public function actualizarPosicion(){ if(this._instanciaFantasma.x+this._incrementoX<30 || this._instanciaFantasma.x+this._incrementoX>370 || this._instanciaFantasma.y+this._incrementoY<45 || this._instanciaFantasma.y+this._incrementoY>355){ 123

this._elegirIncrementos(); }else{ this._instanciaFantasma.x+=this._incrementoX; this._instanciaFantasma.y+=this._incrementoY; }

}

} private function _elegirIncrementos(){ }

13. ¿Qué debe hacer el método _elegirIncrementos()? Elegir al azar una dirección (horizontal, vertical o diagonal, bien ascendente o bien descendente), es decir, elegir al azar entre (+1, -1 ó 0) un valor para _incrementoX y otro para _incrementoY. Aunque sea adelantar acontecimientos (se explicará con detalle en la sección siguiente), para elegir números al azar en ActionScript disponemos del método random() de la clase Math, que nos devuelve un valor decimal pseudoaleatorio mayor o igual que 0 y menor que 1, es decir, comprendido en el intervalo [0,1). Nosotros necesitamos un número al azar entre 1 y 3 para elegir uno de los tres incrementos, por lo que multiplicaremos el valor aleatorio que nos devuelva random() por 3, le sumaremos una unidad y nos quedaremos sólo con su parte entera (no es lo mismo que redondear). Para extraer la parte entera de un número decimal positivo contamos con el método floor(), suelo, de la clase Math. ¿Se atreve a escribir el código de la función _elegirIncrementos()? Una posibilidad sencilla podría ser la que se muestra a continuación destacada en negrita (observe la precaución que se ha tomado para que no sean nulos ambos incrementos, pues en tal caso el fantasma se quedaría quieto; si el incremento según x es cero, el segundo número aleatorio sólo se elige entre 1 y 2 para que el incremento según y no pueda ser también nulo): ... private function _elegirIncrementos(){ var aleatorio:Number; aleatorio=Math.floor(Math.random()*3+1); switch (aleatorio) { case 1 : this._incrementoX=-1; break; case 2 : this._incrementoX=1; break; case 3 : this._incrementoX=0; break; } //Precaución para evitar que ambos incrementos sean nulos if (this._incrementoX==0) { aleatorio=Math.floor(Math.random()*2+1); } else { aleatorio=Math.floor(Math.random()*3+1); } switch (aleatorio) { case 1 : this._incrementoY=-1; break; case 2 : this._incrementoY=1; 124

break; case 3 : this._incrementoY=0; break; }

} ... 14. Ya sólo nos faltaría elegir unos valores iniciales de incrementos. Por ejemplo, podemos invocar al método _elegirIncrementos() desde el propio método constructor mediante la instrucción resaltada en negrita a continuación: ... public function Fantasma(instancia){ this._instanciaFantasma=instancia; this._elegirIncrementos(); } ... 15. Pero aún no hemos terminado... recuerde que el archivo de la clase debe tener el mismo nombre que ésta y estar almacenado en la misma carpeta que el archivo Fla. Ejecutamos el comando Archivo>Guardar como, si es necesario accedemos mediante el cuadro de diálogo que aparece a la carpeta en la que tenemos almacenado el archivo ud05_ejemplo03.fla, escribimos Fantasma.as (cuidado con el uso de mayúsculas/minúsculas; debe coincidir exactamente con el nombre de la clase) como nombre del archivo y pulsamos el botón Guardar. 16. En la zona superior de Flash, debajo de la barra de menús, hacemos clic sobre la lengüeta ud05_ejemplo03.fla para regresar a nuestra película principal y pulsamos la combinación Control+Intro para probarla. Si no hemos cometido ningún error, veremos que el fantasma se desplaza a su libre albedrío por el escenario. Cerramos la ventana de prueba para regresar al modo de edición de Flash. 17. ¿Y si quisiéramos incluir un segundo fantasma? Esto nos permitirá poner de manifiesto el potencial de la programación orientada a objetos. Hacemos clic sobre el fotograma 1 de la capa fantasma1 para seleccionarlo, y arrastramos otra instancia de fantasma desde la biblioteca al escenario. Para distinguirla de la anterior, accedemos al inspector de propiedades y cambiamos su color seleccionado la opción Tinta en el cuadro de lista Estilo de la sección Efecto de color y modificando los deslizadores Rojo, Verde y Azul. Por último, en la zona superior del panel Propiedades asignamos a esta instancia el nombre fantasma2. 18. Después tendremos que crear un nuevo objeto de la clase Fantasma para este segundo fantasma. En la línea de tiempo hacemos clic sobre el fotograma 1 de la capa acciones, accedemos al panel Acciones y añadimos el código resaltado en negrita a continuación: var miFantasma1:Fantasma=new Fantasma(this.fantasma1); var miFantasma2:Fantasma=new Fantasma(this.fantasma2); 19. Para finalizar, deberemos invocar el método actualizarPosicion() de este segundo fantasma. En la línea de tiempo hacemos clic sobre el fotograma 3 de la capa acciones, accedemos al panel Acciones y añadimos el código resaltado en negrita a continuación: miFantasma1.actualizarPosicion(); miFantasma2.actualizarPosicion(); 20. Probamos la película pulsando la combinación de teclas Control+Intro. Si todo es correcto debemos ver dos fantasmas moviéndose libremente por el escenario. A continuación, sólo en la versión en línea de este documento, se ha incluido un ejemplo con 4 fantasmas.

125

4.3.9. La clase Math. La clase intrínseca Math es nuestra llave de acceso a toda la potencia matemática de ActionScript, pero es una clase un poco especial, pues para acceder a sus propiedades y métodos no es necesario que creemos objetos suyos, sino que podremos utilizarlos directamente a través de la clase; las clases de este tipo se denominan técnicamente clases estáticas. En una clase no estática no podríamos acceder directamente a sus propiedades/métodos, sino que tendríamos que crear previamente un objeto mediante la instrucción new (como se explicó en la sección anterior). Por el contrario, para utilizar las propiedades/métodos de una clase estática no es necesario crear ningún objeto. Por ejemplo, para acceder al método random() de la clase Math ya comprobamos en la sección anterior que basta con escribir Math.random(). A continuación se resumen las principales propiedades y métodos de la clase Math (debe tener en cuenta que todos los métodos trigonométricos utilizan los ángulos expresados en radianes; 360 grados son 2 x pi radianes):

Propiedad E PI Método abs(valor) floor(valor)

Descripción Base de los logaritmos neperianos (apróx. 2.7182) Número pi (apróx. 3.1415) Descripción Devuelve el valor absoluto de valor, es decir, su valor desprovisto de signo. Devuelve el entero inmediatamente menor o igual que valor. Por ejemplo, Math.floor(3.5) devuelve 3, mientras que Math.floor(-3.5) devuelve -4. ceil(valor) Devuelve el entero inmediatamente mayor o igual que valor. Por ejemplo, Math.ceil(3.5) devuelve 4, mientras que Math.ceil(-3.5) devuelve -3. round(valor) Devuelve el entero más próximo (mayor o menor) a valor, y en caso de indeterminación (si el número está en el centro de dos enteros) se decanta por el mayor. Por ejemplo, Math.round(3.5) devuelve 4, mientra que Math.round(-3.5) devuelve 3. cos(valor) Calcula el coseno de valor, que debe estar expresado en radianes. sin(valor) Calcula el seno de valor, que debe estar expresado en radianes. tan(valor) Calcula la tangente de valor, que debe estar expresado en radianes. acos(valor) Calcula el arcocoseno en radianes de valor. asin(valor) Calcula el arcoseno en radianes de valor. atan(valor) Calcula el arcotangente en radianes de valor. exp(valor) Calcula el antilogaritmo neperiano de valor. log(valor) Calcula el logaritmo neperiano de valor. pow(base,exponente) Devuelve el resultado de elevar base a exponente. Téngase en cuenta que exponente puede ser un número no entero; por ejemplo Math.pow(8,1/3) devuelve 2 porque la raíz cúbica de 8 es 2. sqrt(valor) Calcula la raíz cuadrada de valor. random() Este método es el alma de cualquier juego que queramos desarrollar con Flash. Devuelve un número decimal pseudoaleatorio comprendido entre el 0 (incluido) y el 1 (no incluido).

Por ejemplo, imagine que nos solicitan escribir una función que reciba como parámetro el radio de una circunferencia y devuelva su perímetro: 126

4.3.10. La clase String. Hasta ahora, la única operación que sabemos realizar con cadenas de caracteres o variables de tipo String es concatenarlas mediante el operado +. Sin embargo, al definir una variable de tipo String, ésta adquiere todas las propiedades y métodos de la clase String, entre los que cabe destacar los siguientes: Propiedad length Método chartAt(posición) indexOf(aguja,inicio) slice(inicio,fin) split(delimitador) toLowerCase() toUpperCase()

Descripción Indica cuántos caracteres contiene la cadena. Descripción Devuelve el carácter que se encuentra en posición. Tenga en cuenta que el primer carácter de una cadena se considera que ocupa la posición 0. Devuelve la posición en la que aparece por primera vez la subcadena aguja a partir de la posición inicio de la cadena original. Si no se encuentra ninguna coincidencia devuelve el valor -1. Devuelve los caracteres comprendidos entre la posición inicio (incluida) y la posición fin (excluida). Devuelve un conjunto (véase la sección siguiente) considerando que la subcadena delimitador es el separador entre los distintos elementos. Devuelve la cadena con todos los caracteres en minúscula. Devuelve la cadena con todos los caracteres en mayúscula.

Por ejemplo, imagine que estamos desarrollando el juego del ahorcado en Flash y que nos solicitan que creemos una función que identifique en qué posiciones de la palabra incógnita (que se recibe a través del parámetro incognita) se encuentra el carácter propuesto por el usuario (que se recibe a través del parámetro propuesto), y que devuelva una cadena en la que esas posiciones aparezcan separadas por comas: function localizarCoincidencias(incognita,propuesto) { var buscarDesde:uint; buscarDesde=0; var respuesta:String; respuesta=""; while (incognita.indexOf(propuesto,buscarDesde)!=-1) { 127

respuesta+=incognita.indexOf(propuesto,buscarDesde)+","; buscarDesde=incognita.indexOf(propuesto,buscarDesde)+1;

} return respuesta;

} trace(localizarCoincidencias("calatayud","a"));

4.3.11. Matrices o conjuntos y la clase Array. Una matriz o conjunto es una colección de datos escritos entre corchetes y que no tienen por qué ser todos del mismo tipo. Por ejemplo: [53,"rojo",true] Lo interesante de estos conjuntos es que podemos almacenarlos en variables y acceder a cada uno de sus elementos individualmente. Para que una variable pueda contener un conjunto debemos declararla como una instancia de la clase Array. Una vez creada la variable de tipo Array podremos modificar/consultar cada uno de sus elementos escribiendo entre corchetes junto al nombre de la variable la posición del elemento que nos interese, teniendo en cuenta que al primer elemento de un conjunto le corresponde siempre la posición 0. La posición de los elementos dentro de un conjunto suele denominarse índice. Por ejemplo: var aragon:Array=new Array(); aragon[0]="Huesca"; aragon[1]="Zaragoza"; aragon[2]="Teruel"; trace(aragon); En lugar de utilizar una instrucción para definir el contenido de cada uno de los elementos de un conjunto, también podemos especificarlos en la propia instrucción de declaración del conjunto. Por ejemplo, el código anterior se reduciría a: var aragon:Array=new Array("Huesca","Zaragoza","Teruel"); trace(aragon); Otro detalle interesante de los conjuntos es que sus elementos pueden ser a su vez conjuntos, logrando así crear matrices multidimensionales. En este caso para acceder a un elemento concreto deberemos escribir entre corchetes la posición del subconjunto dentro del conjunto principal y, a continuación, la posición del elemento dentro del conjunto (contando siempre desde cero). Por ejemplo: var alumnos:Array=new Array(); var aula1:Array=new Array("Luis","Pedro","Gema"); var aula2:Array=new Array("Mario","Juan","Irene"); alumnos[0]=aula1; alumnos[1]=aula2; trace(alumnos[1][1]);//Mostrará Juan en el panel Salida La clase Array, además de permitirnos almacenar varios datos bajo un mismo nombre de variable, nos ofrece (entre otras/os) las siguientes propiedades y métodos de interés:

128

Propiedad length Método shift()

unshift(datos)

pop() push(datos) reverse() slice(inicio,fin)

splice(posición, cantidad_a_borrar, dato1,dato2,...)

indexOf(dato,posición)

join(separador)

Descripción Indica cuántos elementos contiene el conjunto. Por ejemplo, si length contiene el valor 3 querrá decir que el conjunto está compuesto por 3 elementos a los que podremos acceder mediante los índices 0, 1 y 2. Descripción Elimina el primer elemento de un conjunto y devuelve el dato que contenía. Tenga en cuenta que este método provocará un desplazamiento hacia la izquierda de los índices de los elementos que permanezcan en el conjunto al extraer el elemento inicial. Introduce los elementos datos (que deben escribirse separados por comas) al principio del conjunto y devuelve la longitud del nuevo conjunto ampliado. Obviamente, esta introducción de elementos provocará un desplazamiento de los índices de los elementos originales hacia la derecha. Elimina el último elemento de un conjunto y devuelve el dato que contenía. Introduce los elementos datos (que deben escribirse separados por comas) al final del conjunto y devuelve la longitud del nuevo conjunto ampliado. Invierte los elementos de un conjunto; es decir, el primero se convierte en el último, el segundo en el penúltimo, y así sucesivamente. Este método devuelve un conjunto nuevo compuesto por los elementos cuyos índices están comprendidos entre inicio (incluido) y fin (no incluido) del conjunto al que se aplica. El hecho de que sea un conjunto nuevo, adquirirá importancia posteriormente cuando tratemos el asunto de la duplicación de conjuntos. Este método no afecta de modo alguno al conjunto original. Este método sirve tanto para eliminar elementos de un conjunto como para añadirlos, sin que tenga que ser del principio o del final. El parámetro posición indica el índice a partir del que deseamos realizar la operación de borrado o añadido. Con cantidad_a_borrar expresaremos cuántos elementos queremos borrar a partir de posición (incluido). Para añadir elementos en lugar de borrarlos asignaremos el valor 0 a este segundo parámetro y escribiremos los datos separados por comas; en este caso los elementos se añadirán a partir de posición, es decir, con los índices posición, posición+1,... Si lo utilizamos para borrar, el método devuelve un conjunto con los elementos eliminados, pero si lo utilizamos para añadir no devuelve nada. Devuelve el índice del primer elemento del conjunto a partir de posición (incluida) cuyo valor coincide con dato. En otras palabras, este método sirve para localizar elementos dentro de un conjunto. Si no se encuentra ninguna coincidencia devuelve el valor -1. Sirve para convertir un conjunto en una cadena de caracteres, separando sus elementos con la cadena separador. Por ejemplo: var fecha:Array=new Array(1,"mayo",2010); trace (fecha.join(" de "));

Por ejemplo: var matriz:Array=new Array(0,1,2,3); matriz.shift(); trace(matriz); //1,2,3 matriz.unshift(4,5); trace(matriz); //4,5,1,2,3 matriz.pop(); trace(matriz); //4,5,1,2 matriz.push(6,7); trace(matriz); //4,5,1,2,6,7 matriz.reverse(); 129

trace(matriz); //7,6,2,1,5,4 trace(matriz.slice(2,4)); //2,1 matriz(splice(0,1)); trace(matriz); //6,2,1,5,4 matriz(splice(2,0,6,7)); trace(matriz); //6,2,6,7,1,5,4 trace(matriz.indexOf(6,1)); //2 trace (matriz.join(" - ")); // 6 - 2 - 6 - 7 - 1 - 5 - 4 Uno de los aspectos más "engañosos" de los conjuntos es que las variables de este tipo se asignan por referencia en lugar de por valor, es decir, no se asignan los datos sino la referencia a la posición de memoria en la que están almacenados esos datos. Esto puede provocar que modifiquemos inadvertidamente un conjunto mientras estamos trabajando con otro que "creíamos" diferente. Por ejemplo: var matriz1:Array=new Array(0,1,2); var matriz2:Array=new Array(); matriz2=matriz1; matriz2[0]=7; trace (matriz1); //7,1,2 La sentencia matriz2=matriz1; no copia en matriz2 los datos que contiene matriz1, sino que le asigna la misma posición de memoria. En cierta forma es como si matriz2 se convirtiese en un alias del mismo nombre de "cajón" en el que están almacenados los datos de matriz1. Consecuentemente, al alterar los valores de matriz2 (por ejemplo, con matriz2[0]=7;) estamos actuando realmente sobre los datos de matriz1. Este comportamiento nos resultará deseable en unos casos, pero inapropiado en otros. ¿Cómo podemos lograr que se copien los datos y no la referencia? Mediante el método slice(inicio,fin), que devuelve un conjunto diferente (es decir, una referencia a un "cajón" diferente) pero con el mismo contenido que el original, y que aplicado al ejemplo anterior resultaría: var matriz1:Array=new Array(0,1,2); var matriz2:Array=new Array(); matriz2=matriz1.slice(0,matriz1.length); matriz2[0]=7; trace (matriz1); //0,1,2 Especial precaución hay que tener con este asunto cuando se utilizan funciones que reciben conjuntos como parámetros o que devuelven un conjunto mediante return. Por ejemplo, ¿cuál cree que será el resultado de este código? function calificaciones2notas(calificaciones){ var i:uint; for(i=0;i<calificaciones.length;i++){ if (calificaciones[i]>9){ calificaciones[i]="Sobresaliente"; }else if (calificaciones[i]>7){ calificaciones[i]="Notable"; }else if (calificaciones[i]>6){ calificaciones[i]="Bien"; }else if (calificaciones[i]>5){ calificaciones[i]="Suficiente"; }else{ calificaciones[i]="Insuficiente"; } } return calificaciones; 130

} var calificacionesPedro:Array=new Array(9,6,3,7.5); var notasPedro:Array=new Array(); notasPedro=calificaciones2notas(calificacionesPedro); trace (calificacionesPedro); Efectivamente, habremos perdido las calificaciones numéricas porque la función ha sobrescrito esos valores con la notas (insuficiente, suficiente, ...), pues el conjunto calificaciones del interior de la función es realmente el mismo "cajón" que el conjunto calificacionesPedro, e incluso el mismo que el cajón notasPedro. ¿Cómo podríamos haberlo evitado? Recurriendo nuevamente al método slice() introduciendo el código resaltado en negrita a continuación para enviar un duplicado del conjunto en lugar de la referencia al propio conjunto calificacionesPedro: function calificaciones2notas(calificaciones){ var i:uint; for(i=0;i<calificaciones.length;i++){ if (calificaciones[i]>9){ calificaciones[i]="Sobresaliente"; }else if (calificaciones[i]>7){ calificaciones[i]="Notable"; }else if (calificaciones[i]>6){ calificaciones[i]="Bien"; }else if (calificaciones[i]>5){ calificaciones[i]="Suficiente"; }else{ calificaciones[i]="Insuficiente"; } } return calificaciones; } var calificacionesPedro:Array=new Array(9,6,3,7.5); var notasPedro:Array=new Array(); notasPedro=calificaciones2notas(calificacionesPedro.slice (0,calificacionesPedro.length)); trace (calificacionesPedro); Como demuestra el ejemplo anterior, los conjuntos y los bucles suelen ser "buenos compañeros de viaje", pues gracias a que los primeros tienen sus elementos indexados numéricamente es muy sencillo iterar sobre ellos recorriéndolos mediante bucles. Otro ejemplo de combinación de conjuntos y bucles podría ser el siguiente: imagine que estamos desarrollando un juego del estilo Buscaminas (en un tablero se han ocultado varias minas y el usuario tiene que ir haciendo clic sobre las casillas intentando evitar las minas, con la única ayuda de saber cuántas minas hay alrededor de cada casilla que va descubriendo) en Flash y que disponemos de una variable global de tipo array llamada tablero en la que cada elemento es, a su vez, un conjunto que representa las casillas de cada fila del tablero; los elementos de estos conjuntos contienen el valor true cuando la casilla correspondiente está ocupada por una mina, y el valor false en caso contrario; ¿cómo sería la función que calcula cuántas minas hay alrededor de la que el usuario ha descubierto (asumiendo que si ésta contuviera una mina habría sido detectada por otra parte del programa)? function calcularMinasAlrededor(fila,columna){ var minasAlrededor:uint; minasAlrededor=0; var i:int; var j:int; for(i=-1;i<=1;i++){ if(fila+i<0 || fila+i>tablero.length){ 131

continue; } for(j=-1;j<=1;j++){ if(columna+j<0 || columna+j>tablero[0].length){ continue; } if (tablero[fila+i][columna+j]==true){ minasAlrededor++; } }

}

} return minasAlrededor;

InformaciĂłn Por su frecuente utilidad, conviene recordar que igual que el mĂŠtodo join() de la clase Array permite convertir un conjunto en una cadena de caracteres, el mĂŠtodo split() de la clase String sirve justo para lo contrario, es decir, para convertir una cadena de caracteres en un conjunto.

132

5. El rodaje En esta unidad didáctica aprenderemos a manejar la línea de tiempo y a crear todos los tipos de animaciones que admite Flash: fotograma a fotograma, interpolación clásica, interpolación de forma, interpolación de movimiento, y cinemática inversa. También aprenderemos a crear capas de máscara.

5.1. La línea de tiempo Cuando ejecutamos una película desarrollada con Flash estamos viendo el resultado de mostrar sucesivamente el contenido de una serie de fotogramas. El contenido de cada fotograma se establece en el escenario, pero el orden de los fotogramas dentro de la película se configura en la línea de tiempo. De hecho, no podremos establecer el contenido de un fotograma en el escenario si previamente no hemos creado ese fotograma en la línea de tiempo. La línea de tiempo inicial de cualquier proyecto Flash está compuesta por una única capa y un solo fotograma dentro de ella (tiene un círculo en su interior); el resto de casillas que hay a su derecha son sólo posibles contenedores de fotogramas, pero no son fotogramas aún. En la zona superior de la línea de tiempo hay una escala numérica que asigna un número a cada fotograma, y de este modo nos permite identificarlos fácilmente. Además, en esta escala se encuentra el cabezal de reproducción, que es un rectángulo rojo con una línea vertical que nos indica qué fotograma es el que se está visualizando actualmente en el escenario. Podemos cambiar la posición del cabezal de reproducción haciendo clic sobre cualquier posición de la escala, e incluso podemos arrastrar el cabezal de reproducción por la escala para simular en el escenario el efecto de animación de los fotogramas por los que lo desplacemos.

Por ejemplo, cree un archivo nuevo de Flash, haga clic sobre la casilla 2 de la capa 1 (no es aún un fotograma, sino simplemente una potencial posición para un fotograma) y compruebe que el cabezal de reproducción permanece en el fotograma 1; se niega a avanzar a la posición 2 porque no existe aún ningún fotograma en esa posición. En cierta forma la línea de tiempo es como el carrete de una cámara fotográfica clásica: podemos seguir haciendo fotos mientras haya carrete, pero cuando se acaba el carrete ya no podemos seguir avanzando. Afortunadamente Flash nos permite añadir fácilmente fotogramas (sin tener que cambiar de carrete). ¿Cómo saber cuándo una casilla es un fotograma y cuándo no? A lo largo de esta unidad didáctica aprenderemos que existen varios tipos de fotogramas en Flash, pero básicamente podríamos clasificarlos en: • Fotogramas clave: Se representan en la línea de tiempo con un círculo, que puede ser blanco ( ) si aún

no hay contenido definido en ese fotograma, o negro ( ) si sí poseen algún tipo de contenido. Los fotogramas clave se utilizan cuando queremos establecer expresamente un cambio en el contenido de la película, es decir que aparezca un elemento nuevo o que desaparezca un elemento que estaba visible anteriormente. No obstante, existen otros tipos de fotogramas clave, denominados fotogramas clave de interpolación, que en lugar de indicar la aparición o desaparición de un elemento, marcan un cambio en el estado (posición, tamaño, color, rotación, ...) de un elemento que ya estaba visible. Las interpolaciones son un método de animación en el que el diseñador (nosotros) sólo tiene que definir una serie de estados clave en ciertos fotogramas y Flash se encarga de calcular las posiciones intermedias. Por ejemplo, en una secuencia interpolada de 20 fotogramas el diseñador podría dibujar un automóvil en la zona izquierda del escenario del fotograma 1 creando así un fotograma clave, crear otro fotograma clave en el número 20 y arrastrar el automóvil hasta el borde derecho del escenario, y Flash se encargaría de calcular las 133

posiciones del automóvil en los 18 fotogramas intermedios. Posteriormente aprenderemos que existen básicamente cuatro tipos de interpolaciones (clásicas, de movimiento, de forma y de cinemática inversa), en las que los fotogramas clave se representan mediante círculos

(en las clásicas y las de forma), o

mediante rombos (en las de movimiento y las de cinemática inversa). En el caso de las animaciones de cinemática inversa los fotogramas clave se denominan poses. • Fotogramas estáticos: Son fotogramas en los que se mantiene el contenido del último fotograma clave sin

ninguna variación. Se representan coloreando la casilla correspondiente de color gris ( ) en caso de que sea un fotograma intermedio de la secuencia, o bien mostrando en su interior un rectángulo ( ) si es el último de la secuencia, es decir, si a continuación de él hay un nuevo fotograma clave. Si añadimos contenido a un fotograma estático, ese contenido se asignará realmente al fotograma clave anterior, pues los fotogramas estáticos no pueden introducir ni hacer desaparecer contenidos del escenario. • Fotogramas interpolados: Son fotogramas cuyo contenido no ha sido definido expresamente por el

diseñador, sino que han sido calculados automáticamente por Flash basándose en los estados/contenidos de los fotogramas clave anterior y posterior. Se representan con distintos colores dependiendo de qué tipo de interpolación se trate (clásica, de movimiento, de forma o de cinemática inversa), y en el caso de las clásicas y las de forma incluyen además una flecha. En la siguiente figura se muestran ejemplos de los cuatro tipos fundamentales de interpolación (a la izquierda de cada una se indica el nombre de la interpolación correspondiente).

Otro detalle importante sobre la línea de tiempo es que el contenido de cada fotograma puede distribuirse en varias capas (como se ha hecho, por ejemplo, en la figura anterior). Las capas de la línea de tiempo son como láminas de acetato transparente que se superponen unas sobre otras para definir el contenido completo de cada fotograma. Las capas situadas más arriba en la línea de tiempo solapan a las situadas más abajo. Para crear una capa nueva simplemente hay que hacer clic sobre el icono Nueva capa ( ) de la esquina inferior completa de la línea de tiempo. Por defecto, la nueva capa se insertará justo encima de la capa que tengamos seleccionada en ese momento; no obstante, podemos hacer clic sobre su nombre en la zona izquierda de la línea de tiempo y, sin soltar el botón del ratón, arrastrarla verticalmente para cambiar su posición. Observe que mientras arrastra el ratón (véase la figura siguiente en la que se está arrastrando la capa De forma para colocarla encima de la capa De movimiento) aparece una línea negra con un círculo a su izquierda que indica en qué posición se insertaría la capa si soltásemos el botón del ratón en ese instante.

134

Cuando creamos una capa Flash le asigna un nombre predeterminado compuesto por el rótulo "Capa" seguido de un número de orden, pero podemos cambiarlo por otro más descriptivo haciendo doble clic sobre el nombre, escribiendo uno nuevo, y pulsando la tecla Intro para confirmarlo. En la zona izquierda de la línea de tiempo siempre aparece resaltada la capa que está activa con fondo azul y con el icono de un lápiz a la derecha de su nombre ( ); es importante fijarse en cuál es la capa activa antes de colocar un elemento nuevo en el escenario, pues ese elemento se asignará a esa capa. Para seleccionar una capa basta con hacer clic sobre su nombre o sobre cualquiera de sus fotogramas. Si lo deseamos también podemos seleccionar más de una capa haciendo clic sobre el nombre de cada una de ellas mientras mantenemos pulsada la tecla Control. ¿Por qué querríamos seleccionar varias capas? Básicamente sólo para eliminarlas haciendo clic sobre el icono Eliminar ( ) de la zona inferior de la línea de tiempo. Tenga en cuenta que al eliminar una capa estará borrando todos los contenidos definidos en ella (si la capa contiene instancias de símbolos, se borrarán esas instancias, pero no los símbolos de los que derivan, que pertenecen a la biblioteca). Aunque seleccionemos varias capas, sólo una de ellas mostrará el icono del lápiz a la derecha de su nombre; ésa es la capa a la que se asignarían los nuevos contenidos que pudiéramos introducir en el escenario. Advertencia Al seleccionar una capa haciendo clic sobre su nombre, se seleccionan también en el escenario todos los contenidos que pudiera tener esa capa definidos en el fotograma actual (el fotograma en el que se encuentre el cabezal de reproducción). Si pulsásemos la tecla Supr se borrarían todos esos contenidos. Información Una duda frecuente al empezar a trabajar con Flash es saber qué activos colocar en cada capa. Aunque Flash permite colocar varios activos en un mismo fotograma de una misma capa, por lo general es conveniente colocar cada elemento en una capa diferente por cuestiones de organización. Esta recomendación se convierte en obligación cuando se trata de instancias o elementos que pensemos animar/interpolar, pues algunos tipos de interpolación sólo admiten una instancia por capa. La única excepción a esta norma sería el caso de formas o instancias que no se van a animar, que podrían colocarse en un mismo fotograma de una misma capa sin que esto nos causase ningún problema. Es habitual que el número de capas en los proyectos de Flash sea grande, pero afortunadamente contamos con la posibilidad de agruparlas en carpetas. Haciendo clic sobre el icono Nueva carpeta ( ) en la zona inferior izquierda de la línea de tiempo se creará una carpeta nueva, cuyo nombre podremos cambiar como si se tratase de una capa (es decir, haciendo doble clic sobre el nombre y escribiendo uno nuevo). Inicialmente esta carpeta estará vacía; para asignarle capas tendremos que arrastrarlas dentro de ella; al arrastrar una capa como si la estuviésemos moviendo, al llegar a la posición inmediatamente inferior a una carpeta comprobaremos que el marcador de posición (la línea horizontal con un círculo en su izquierda) se desplaza hacia la derecha para indicar que la capa quedará anidada dentro de la carpeta. Para extraer una capa de una carpeta bastará con arrastrarla por encima de ella (comprobaremos que el marcador de posición aparece alineado nuevamente junto al borde izquierdo). Para contraer el contenido de una carpeta de modo que no ocupe espacio en la línea de tiempo haremos clic sobre el triángulo que hay a su izquierda (para desplegarlos simplemente tendremos que volver a hacer clic sobre este mismo triángulo). Pueden anidarse unas carpetas dentro de otras. Vamos a fijarnos ahora en las tres columnas que hay a la derecha de los nombres de las capas, una encabezada con el icono de un ojo ( ) y que denominaremos columna mostrar/ocultar, otra con el de un candado ( ) y que denominaremos columna bloquear, y otra con un cuadrado ( ) y que denominaremos columna contornos; estas columnas indican, respectivamente, si los contenidos de la capa están visibles, bloqueados o representados sólo por sus contornos. Cuando existen muchos elementos sobre el escenario es 135

posible que unos solapen a otros y nos impidan seleccionarlos. En estos casos podemos ocultar las capas que nos molesten haciendo clic sobre el punto de la columna de visualización, que pasará a convertirse en un aspa ( ). Los contenidos de las capas ocultas no sólo no se muestran, sino que tampoco se pueden seleccionar (ni siquiera ejecutando el comando Edición>Seleccionar todo, que selecciona todos los contenidos de todas las capas del fotograma en el que se encuentre el cabezal de reproducción). No obstante, tenga en cuenta que la ocultación de una capa sólo es válida en el modo de edición; al publicar la película se mostrará el contenido de todas las capas, incluso las que pudieran estar ocultas en el modo de edición (si no desea que una capa se muestre en la película publicada tendrá que eliminarla). Para volver a mostrar la capa bastaría con hacer clic sobre el icono del ojo, que pasaría nuevamente a convertirse en un punto. Imaginemos ahora que ya hemos terminado de trabajar en una capa y que queremos protegerla frente a modificaciones accidentales. En este caso haríamos clic sobre el punto de la columna bloquear, que pasaría a convertirse en un candado, indicando que el contenido de esa capa está bloqueado, es decir, que podemos verlo en el escenario pero que no podremos seleccionarlo ni modificarlo en modo alguno (ni siquiera ejecutando el comando Edición>Seleccionar todo). Para anular el bloqueo bastará con hacer clic sobre el icono del candado, de modo que volverá a convertirse en un punto. La columna contornos contiene inicialmente un cuadrado relleno para cada capa; el hecho de que este cuadrado esté relleno indica que los contenidos de las capas se están mostrando completos. Si hiciésemos clic sobre alguno de estos cuadrados desaparecería su relleno (se volvería de color gris) y, en el escenario, los contenidos de esa capa aparecerían representados exclusivamente por sus contornos. Esta opción puede ser útil cuando el escenario está saturado de elementos pero no queremos ocultarlos. Los contenidos de cada capa tienen asignados un color de contorno distinto. Para modificar este color podemos hacer clic con el botón derecho del ratón sobre el nombre de la capa, seleccionar el comando Propiedades y, en el cuadro de diálogo que aparece (véase la siguiente figura), hacer clic sobre la casilla Color de contorno para elegir otro color diferente. Observe que en este cuadro de diálogo también podemos configurar otros detalles, como el nombre y el estado de visibilidad o bloqueo de la capa.

Truco Si necesita ocultar todas las capas de un proyecto menos una, mantenga pulsada la tecla Alt mientras hace clic sobre el icono de la columna mostrar/ocultar correspondiente a esa capa. Para mostrar u ocultar todas las capas de un proyecto, haga clic directamente sobre el icono con forma de ojo del encabezado de la columna mostrar/ocultar. Este mismo truco es aplicable a las columnas bloquear y contornos. Tenga en cuenta también que todos estos iconos son aplicables también a carpetas de capas, de modo que afectan simultáneamente a todas las capas que contiene la carpeta.

136

¿Se ha fijado en la opción Altura de capa del cuadro de diálogo anterior? Una queja frecuente sobre la línea de tiempo de Flash es que las casillas son demasiado pequeñas, aunque también hay quién opina que son demasiado grandes. Afortunadamente en este caso existe la posibilidad de contentar ambas opiniones. La opción Altura de capa sirve para modificar el alto de las casillas haciéndolo dos o incluso tres veces superior al original, pero para modificar el ancho tendremos que desplegar el menú del panel Línea de tiempo haciendo clic sobre el icono de su esquina superior derecha. En este menú encontraremos opciones desde Diminuto hasta Grande para el ancho de las casillas. Las opciones Vista previa y Vista previa en contexto también pueden ser de interés en algunos casos, pues muestran en las propias casillas de la línea de tiempo el contenido de los fotogramas en miniatura (Vista previa aprovecha todo el espacio de las casillas para mostrar sólo los contenidos de esa capa, mientras que Vista previa en contexto muestra en cada casilla esos mismos contenidos pero a escala respecto al tamaño completo del escenario). En la siguiente figura está activado el modo Vista previa.

Para finalizar esta sección vamos a explicar la utilidad de algunos de los controles que aparecen en la zona inferior de la línea de tiempo. En películas muy largas puede ocurrir que hayamos desplazado la línea de tiempo con las barras de desplazamiento y que el fotograma activo no esté visible; en estos casos podremos volver a visualizar rápidamente el fotograma activo en la línea de tiempo haciendo clic sobre el icono Centrar fotograma ( ). A la derecha de este icono hay varios relacionados con una funcionalidad de Flash denominada Papel cebolla, y que abordaremos posteriormente en esta misma unidad didáctica. Pasados estos iconos encontraremos un número que nos indica la posición del cabezal de reproducción, es decir, el número del fotograma activo. Haciendo clic sobre este número podemos escribir un nuevo valor para activar cualquier otro fotograma, y haciendo clic y arrastrando el ratón horizontalmente lograremos que ese valor varíe como si fuera un regulador. A la derecha encontraremos la velocidad en fotogramas por segundo de la película, que también podremos modificar haciendo clic para escribir un nuevo valor, o haciendo clic y arrastrando el ratón. Tenga en cuenta que la velocidad es única para cada película (e idéntica para todas las instancias de gráficos o clips de película que pudiera contener), y recuerde que también se puede modificar mediante el cuadro de diálogo al que conduce el comando Modificar>Documento. Por último, a la derecha encontraremos un valor que depende del anterior: se trata del tiempo en segundos que debe transcurrir para alcanzar el fotograma activo desde el inicio de la película. Modificando este valor variaremos la posición del cabezal de reproducción.

5.1.1. Manejo de fotogramas en la línea de tiempo Para poder asignar contenidos a una casilla de una capa de la línea de tiempo, esa casilla debe ser un fotograma. Para crear un fotograma tendremos que hacer clic con el botón derecho del ratón sobre la casilla y seleccionar una de las tres siguientes opciones: •

Insertar fotograma: Creará un fotograma estático y, consecuentemente no podremos dibujar en él, sino que cualquier contenido que dibujemos en el escenario estando activo ese fotograma se activará al fotograma clave inmediatamente anterior de esa misma capa.

•

Insertar fotograma clave: Crea un fotograma clave con el mismo contenido que el fotograma clave inmediatamente anterior de esa misma capa, pero ambos fotogramas serán absolutamente 137

independientes. En otras palabras, podremos añadir/eliminar contenidos a uno u otro fotograma sin afectar al otro. En el caso de las animaciones de cinemática inversa este comando se denomina Insertar pose. En el caso de las interpolaciones de movimiento podremos indicar si el fotograma clave definirá una propiedad concreta de la animación (Posición, Escala, Sesgo, Rotación, Color, ...) o todas. •

Insertar fotograma clave en blanco: Crea un fotograma clave sin contenido, es decir, sin tener en cuenta el contenido que pudiera tener el fotograma clave inmediatamente anterior. Esta opción no está disponible para las interpolaciones de cinemática inversa, pues en este caso la animación está directamente vinculada al contenido y éste no puede variar (el aspecto del contenido sí puede variar, pero no el contenido en sí; por ejemplo, si la animación está aplicada a un rectángulo, no podemos sustituir a mitad de la secuencia ese rectángulo por una elipse) a lo largo de la secuencia de animación.

Advertencia Flash no admite que queden casillas vacías en la línea de tiempo entre dos fotogramas. Si creamos un fotograma en una posición dejando casillas vacías respecto a la última secuencia de fotogramas de esa capa, todas esas casillas intermedias se asignarán automáticamente a la secuencia de fotogramas inmediatamente anterior. Por ejemplo, si tenemos un fotograma clave en la casilla 1 y creamos un nuevo fotograma clave en el 10, los fotogramas del 2 al 9 se convertirán automáticamente en fotogramas estáticos asignados dependientes del fotograma clave 1.

Información Todas las opciones a las que accederemos desde la línea de tiempo haciendo clic con el botón derecho del ratón sobre los fotogramas están también disponibles a través de los comandos Insertar>Línea de tiempo, Editar>Línea de tiempo y Modificar>Línea de tiempo, pero convendrá conmigo en que es más cómodo localizarlas todas juntas en el menú contextual que intentar recordar en cuál de esos tres comandos se encuentra cada una de ellas.

Truco Hay tres teclas que los usuarios de Flash terminan grabando en su memoria a fuego: F5, F6 y F7. F5 sirve para insertar un fotograma estático. F6 sirve para insertar un fotograma clave cuyo contenido es idéntico al del fotograma clave inmediatamente anterior o, en el caso de interpolaciones, para convertir un fotograma interpolado en un fotograma clave que contenga el estado de la animación en esa posición. F7 sirve para insertar un fotograma clave en blanco. Una vez creados los fotogramas, puede darse el caso de que queramos borrarlos, copiarlos o moverlos, pero para poder realizar cualquiera de estas operaciones previamente tendremos que saber cómo se seleccionan los fotogramas. El sistema de selección de fotogramas de Flash puede tener dos comportamientos distintos, según tengamos activada o no la casilla Selección basada en el tamaño del cuadro de diálogo al que conduce el comando Edición>Preferencias>General (véase la figura siguiente).

138

Cuando esta casilla está activada, al hacer clic sobre un fotograma se seleccionan automáticamente todos los de la secuencia a la que pertenece. Si sólo queremos seleccionar un fotograma, tendremos que hacer clic sobre él mientras mantenemos pulsada la tecla Control. Por el contrario, cuando la opción Selección basada en el tamaño no está activada, el resultado variará dependiendo del tipo de interpolación que tenga aplicado el fotograma sobre el que hagamos clic; si no tiene interpolación, o posee interpolación clásica o de forma, sólo se seleccionará ese fotograma, pero si tiene interpolación de movimiento o de cinemática inversa se seleccionará toda la secuencia, exactamente igual que en si sí estuviera activada la casilla. En resumen, al hacer clic sobre un fotograma con interpolación de movimiento o de cinemática inversa se seleccionará toda la secuencia de fotogramas a la que pertenece; sin embargo, al hacer clic sobre un fotograma sin interpolación o con interpolación clásica o de forma se seleccionará sólo ese fotograma si tenemos desactivada la casilla Selección basada en el tamaño, o toda la secuencia a la que pertenece si la tenemos activada. En cualquier caso, independientemente del tipo de interpolación y del estado de la casilla Selección basada en el tamaño, la mejor forma de asegurarse de que sólo se va a seleccionar un fotograma es hacer clic sobre él mientras se mantiene pulsada la tecla Control. ¿Y si quisiéramos seleccionar más de un fotograma? Si los fotogramas son adyacentes, pertenecientes a la misma capa o no, la forma más fácil de seleccionarlos es hacer clic sobre el primero de ellos manteniendo pulsada la tecla Control y, después, sin soltar el botón del ratón, arrastrarlo para seleccionar todos los demás. Si tenemos seleccionado uno o más fotogramas y queremos añadir a la selección otro conjunto de fotogramas no adyacentes, podremos hacerlo si cumplimos dos premisas: mantener pulsada la tecla Mayús antes de hacer clic para iniciar la selección del segundo grupo e iniciar la selección del segundo conjunto en un fotograma sin interpolación, con interpolación clásica o de forma. Pese a la multitud de excepciones y particularidades del sistema de selección de fotogramas de Flash, en general podremos manejarnos cómodamente recordando exclusivamente estas dos normas: •

Para seleccionar un único fotograma haremos clic sobre él mientras mantenemos pulsada la tecla Control.

•

Para seleccionar varios fotogramas adyacentes haremos clic sobre el primero de ellos manteniendo pulsada la tecla Control y, a continuación, sin soltar el botón del ratón lo arrastraremos para seleccionar todos los demás.

A la hora de borrar fotogramas debemos distinguir entre borrar su contenido y borrar el fotograma en sí de la línea de tiempo. Si hacemos clic con el botón derecho del ratón sobre un fotograma seleccionado y ejecutamos el comando Borrar fotogramas se borrará su contenido y automáticamente se convertirá en un fotograma clave vacío. Por el contrario, si ejecutamos el comando Quitar fotogramas, el fotograma se eliminará de la línea de tiempo, de modo que los que se encontrasen a su derecha se desplazarían hacia la izquierda para ocupar su hueco (recuerde que Flash no admite que queden casillas vacías en la línea de tiempo). Si deseásemos eliminar un fotograma clave tendríamos que seleccionarlo y ejecutar el comando 139

Borrar fotograma clave de su menú contextual (al que se accede haciendo clic sobre él con el botón derecho del ratón). Truco Para borrar un fotograma estático o interpolado seleccionado sólo tenemos que pulsar la combinación de tecla Mayús+F5. Para mover un fotograma (o varios fotogramas) seleccionado simplemente haremos clic sobre él y, sin soltar el botón del ratón, lo arrastraremos hasta su nueva ubicación. Tenga en cuenta que el fotograma trasladado se convertirá en un fotograma clave en su ubicación final y que, si pertenecía a una interpolación de movimiento, la casilla que ocupaba originalmente será sustituida por un fotograma clave vacío (en los demás tipos de interpolación la casilla original adquirirá el estatus de fotograma interpolado). Si en lugar de mover el fotograma queremos copiarlo, realizaremos la misma operación pero manteniendo pulsada la tecla Alt. Truco El menú contextual de los fotogramas también nos ofrece comandos para trasladarlos recurriendo al portapapeles. Estos comandos son Cortar fotogramas, Copiar fotogramas y Pegar fotogramas.

Información En el menú contextual de los fotogramas (y también en los comandos Editar>Línea de tiempo y Modificar>Línea de tiempo), existen otras opciones de interés que pueden ser útiles en algunos casos. Por ejemplo, la opción Borrar fotograma clave convierte el fotograma clave seleccionado en un fotograma estático o interpolado. Por el contrario, Convertir en fotogramas clave convierte un fotograma estático o interpolado en un fotograma clave con el contenido de la secuencia en esa posición. También puede resultar muy útil la opción Convertir en fotogramas clave vacíos para convertir un fotograma estático o interpolado en un fotograma clave sin contenido, sobre el que podremos insertar el contenido que nos interese o pegar otros fotogramas. 5.2. Animaciones fotograma a fotograma La técnica de animación fotograma a fotograma es la más intuitiva, pues está basada directamente en el funcionamiento del cine, que nos es muy familiar: consiste en ir mostrando contenidos estáticos a suficiente velocidad como para que dé la impresión de que están en movimiento. ¿Cómo se implementa esto a Flash? Básicamente colocando fotogramas clave uno a continuación de otro. Por ejemplo, en la siguiente figura se ha creado una animación fotograma a fotograma colocando en cada fotograma clave una imagen ligeramente distinta de un caballo al galope. En la versión en línea de este documento se ha incluido también el resultado de la animación.

140

Básicamente existen dos tipos de animaciones fotograma a fotograma: las sustitutivas y las acumulativas. En las sustitutivas (por ejemplo, el caso anterior del caballo), el contenido de cada fotograma clave es absolutamente distinto del anterior. Por el contrario, en las acumulativas el contenido de cada fotograma clave incluye completa o parcialmente al del anterior como en el siguiente ejemplo. Nuevamente, en la versión en línea de este documento se ha incluido también el resultado de la animación.

141

Tenga en cuenta que los fotogramas clave no tienen por qué ser consecutivos; podemos insertar fotogramas estáticos entre ellos para lentificar la animación. Por ejemplo, en la siguiente figura se muestra la línea de tiempo de la animación fotograma a fotograma del caballo en la que el contenido de cada fotograma clave se mantiene en el escenario durante 3 fotogramas. ¿Cómo cree que se han insertado los dos fotogramas estáticos detrás de cada fotograma clave? Efectivamente, seleccionando cada fotograma clave y pulsando dos veces la tecla F5.

Obviamente, una de las dificultades para crear animaciones fotograma a fotograma es que al crear un fotograma clave no se ve en el escenario el contenido del anterior a modo de referencia (¿recuerda que el escenario sólo muestra el contenido del fotograma actual?). Afortunadamente esto tiene solución gracias a una interesantísima y utilísima función llamada papel cebolla que trataremos a continuación, pero que no sólo encuentra utilidad en las animaciones fotograma a fotograma.

5.3. La función papel cebolla La función papel cebolla nos permite mostrar en el escenario, junto con el contenido del fotograma actual, el de varios fotogramas por delante y/o por detrás de él. El contenido de los fotogramas adyacentes se muestra difuminado, tanto más, cuanto más alejados estén del fotograma activo. Otra característica muy útil de la función papel cebolla es que opcionalmente nos ofrece la posibilidad de modificar no sólo los contenidos del fotograma activo, sino también el de los demás que estemos mostrando en el escenario. Por ejemplo, en la siguiente figura se ha utilizado la función papel cebolla para mostrar en el escenario el contenido del fotograma activo, y el de otros tres por delante y por detrás de él.

Seguiremos estos pasos para utilizar la función papel cebolla: 1. En la zona inferior de la línea de tiempo, hacemos clic sobre el icono Papel cebolla ( ) o Contornos de papel cebolla ( ) según deseemos, respectivamente, que los contenidos de los fotogramas adyacentes se muestren completos o sólo como contornos. Aparecerán unos marcadores en la escala numérica de la zona superior de la línea de tiempo, como muestra la figura siguiente.

142

2. Por defecto, estos marcadores abarcan dos fotogramas por delante y por detrás del fotograma activo, y determinan qué otros fotogramas se mostrarán en el escenario. Si lo deseamos podemos arrastrar cualquiera de estos marcadores para mostrar más o menos fotogramas. 3. Si cambiamos de fotograma activo, los marcadores de papel cebolla también se trasladarán, manteniendo siempre el fotograma activo en el centro del intervalo de fotogramas mostrados en el escenario. No obstante, podemos fijar los marcadores de papel cebolla para que no se desplacen aunque cambiemos de fotograma activo haciendo clic sobre el icono Modificar marcadores de papel cebolla ( ), que también se encuentra en la zona inferior de la línea de tiempo, y seleccionando la opción Anclaje de papel cebolla en el menú contextual que se despliega. 4. Si queremos poder modificar el contenido de cualquiera de los fotogramas que estamos visualizando simultáneamente en el escenario tendremos que hacer clic sobre el icono Editar varios fotogramas ( ). Al hacerlo, todos los contenidos se mostrarán con igual intensidad (sin atenuar su brillo) para indicarnos que podemos modificarlos aunque no se encuentren en el fotograma activo. Esta característica resulta especialmente útil para alinear contenidos que se encuentran en fotogramas diferentes. 5. Para desactivar la función papel cebolla bastará con que volvamos a hacer clic sobre el icono Papel cebolla ( ) o Contornos de papel cebolla ( ), e igualmente, para desactivar la edición simultánea de todos los fotogramas abarcados por los marcadores de papel cebolla bastará con que pulsemos de nuevo el icono Editar varios fotogramas ( ).

5.4. Animaciones de interpolación clásica Al utilizar animaciones de interpolación, el diseñador (nosotros) sólo tiene que definir ciertos estados clave y el ordenador se encarga automáticamente de calcular todos los fotogramas intermedios. En los estudios de animación clásica también se trabaja así: los ilustradores de renombre creaban los fotogramas más importantes y los ilustradores de segunda línea se dedicaban a crear todos los fotogramas intermedios. Esta técnica de animación se denomina inbetweening. Por ejemplo, en la siguiente figura se ilustra cómo Flash ha interpolado el tamaño de una imagen entre dos fotogramas clave distintos.

En versiones anteriores a Flash CS4 sólo existía un tipo de animación de interpolación (además de las de forma, que generalmente no se llaman interpolaciones sino simplemente metamorfosis), pero en Flash CS4 143

se han incluido las interpolaciones de movimiento, y por eso las anteriores han pasado a denominarse animaciones de interpolación clásica. Las animaciones de interpolación clásica son muy sencillas de crear y en la mayoría de los casos igualmente válidas que las de interpolación de movimiento. No obstante, tienen algunas limitaciones que conviene conocer: •

No permiten crear animaciones 3D.

•

Al animar un texto con una interpolación clásica se pierde su estatus de texto y se convierte en un gráfico vulgar, de modo que ya no podremos modificarlo con la herramienta Texto para, por ejemplo, cambiar su tipo de letra.

•

Resulta más complicado cambiar la longitud de las animaciones que en el caso de las creadas mediante interpolación de movimiento.

El procedimiento general para crear una animación de interpolación clásica es el siguiente: 1. Cuando vayamos a aplicar una interpolación a un contenido es conveniente que lo hagamos en una capa nueva. Consecuentemente, lo primero que haremos será crear una capa nueva, cuyo primer fotograma ya será por defecto un fotograma clave. 2. A continuación colocamos en ese primer fotograma clave el contenido que queramos animar. Podemos dibujarlo directamente con las herramientas de forma, crear una instancia desde la biblioteca, o importarlo mediante el comando Archivo>Importar. 3. Para establecer la longitud de la secuencia de animación (posteriormente aprenderemos que esta longitud se puede modificar), hacemos clic sobre el último fotograma hasta el que queramos extenderla y pulsamos la tecla F5. Hasta ahora sólo hemos creado un fotograma clave y extendido su contenido a lo largo de varios fotogramas estáticos. 4. Hacemos clic con el botón derecho del ratón sobre cualquiera de los fotogramas intermedio y, en el menú contextual que aparece, seleccionamos la opción Crear interpolación clásica. Observaremos que aparece una línea discontinua en los fotogramas que anteriormente eran estáticos para indicar que ahora son interpolados pero que carecen de un estado final. Si el contenido de la capa era una forma o un texto, se convertirá automáticamente en un símbolo de tipo gráfico que se incluirá en la biblioteca (las animaciones de interpolación clásica sólo puede aplicarse sobre instancias, aunque realizan automáticamente la conversión desde otros tipos de contenidos). 5. Seleccionamos el fotograma final o cualquier fotograma intermedio en el que queramos definir un estado clave y, en el escenario, modificamos el estado del contenido. Podemos actuar sobre su posición (panel Propiedades o herramienta Selección), sobre su tamaño (panel Propiedades, panel Transformar o herramienta Transformación libre), sobre sus efectos de transformación (panel Transformar o herramienta Transformación libre), o sobre sus efectos de color (sección Efecto de color del panel Propiedades). Observaremos en la línea de tiempo que el fotograma pasa de ser interpolado a ser clave. 6. Si necesitásemos cambiar la duración de la secuencia podríamos insertar fotogramas interpolados nuevos entre cualesquiera dos fotogramas clave seleccionando cualquier fotograma intermedio y pulsando repetidamente la tecla F5. Por el contrario, si quisiéramos reducir la duración, podríamos eliminar fotogramas intermedios haciendo clic sobre ellos con el botón derecho del ratón y seleccionando la opción Quitar fotogramas. 7. Por último, Flash nos permite imprimir aceleración/deceleración al intervalo de fotogramas interpolados comprendido entre cada dos fotogramas clave. Por defecto, los cambios se realizan de forma uniforme entre cada dos fotogramas clave, pero con esta posibilidad podremos lograr que los cambios sean suaves al principio y rápidos al final (dentro o acelerado) o viceversa (fuera o desacelerado). Para aplicar esta función deberemos hacer clic sobre cualquier fotograma intermedio y, en el panel Propiedades, utilizar el control Aceleración (que admite valores entre -100 y +100. Este control sólo permite establecer un valor constante de aceleración, pero haciendo clic sobre icono Editar aceleración ( ) que hay a su derecha accederemos a un cuadro de diálogo (véase la figura siguiente) en el que podremos configurar la aceleración con total 144

precisión. En la zona superior de este cuadro de diálogo podemos optar entre utilizar una misma curva de aceleración para cada propiedad (posición, tamaño, rotación, color, ...) o configurar una curva independiente para cada una de ellas. Una vez tomada esta decisión, ya sólo tendremos que modificar la curva inferior como si se tratase de un trazado dibujado con la herramienta Pluma (por ejemplo, podemos hacer clic sobre la curva para crear nuevos puntos de ancla, arrastrarlos para cambiar su posición y mostrar su información de tangencia, o hacer clic sobre ellos mientras mantenemos pulsada la tecla Alt para eliminarlos). Durante la configuración de la curva podemos utilizar los botones de la esquina inferior izquierda para probar el efecto.

5.5. Animaciones de interpolación de forma o metamorfosis Las animaciones de interpolación de forma (también llamadas animaciones de metamorfosis) se utilizan fundamentalmente para convertir una forma vectorial en otra, aunque también pueden incluir cambios de tamaño, posición y color. Sólo se pueden aplicar sobre formas, aunque recordemos que el comando Modificar>Separar permite convertir otros tipos de contenidos (como imágenes de mapa de bits, textos o instancias) en formas. No obstante, los resultados de este tipo de animaciones pueden ser bastante raros cuando se utilizan formas muy complejas. El procedimiento general para crear una interpolación de forma es el siguiente: 1. Si es necesario creamos una capa nueva; como en el resto de interpolaciones, es conveniente que el contenido animado se encuentre en su propia capa. 2. Dibujamos sobre el escenario una forma utilizando cualquiera de las herramientas de dibujo de Flash (o bien separamos un texto, una instancia o un mapa de bits). 3. En la línea de tiempo, hacemos clic sobre el fotograma hasta el que queremos alargar la animación y pulsamos la tecla F7 para crear un fotograma clave vacío en él, o bien la tecla F6 si queremos copiar el mismo contenido del fotograma inicial y deformarlo utilizando, por ejemplo, la herramienta Subselección. Generalmente se obtienen mejores resultado deformando la forma original que dibujando una forma nueva. 4. Dibujamos o deformamos la forma del fotograma final en el escenario. 5. Hacemos clic con el botón derecho del ratón sobre cualquiera de los fotogramas intermedios entre los dos fotogramas clave de la línea de tiempo y, en el menú contextual que se despliega, seleccionamos la opción Crear interpolación de forma. Los fotogramas en la línea de tiempo se volverán de color verde claro y aparecerá una flecha entre el fotograma clave inicial y el final para indicar que existe una interpolación entre ellos. Con esta acción ya habríamos generado la interpolación y podríamos probar el resultado pulsando la combinación de teclas Control+Intro. Por ejemplo, en la siguiente figura se muestra la metamorfosis de un rectángulo en una elipse.

145

Es muy probable que el resultado no sea el esperado (especialmente si se trata de formas complejas o si existe un desplazamiento entre ellas)... tenga en cuenta que Flash se limita a convertir unos puntos de anclaje en otros y es bastante posible que su "opinión" sobre cómo deben relacionarse los puntos de anclaje de la forma inicial con los de la final no coincida con la nuestra. Afortunadamente en estos casos podemos recurrir a una herramienta denominada consejos de forma, que nos permitirá indicar a Flash cómo deseamos que realice la transformación. Los consejos de forma son etiquetas con una letra en su interior (de la a a la z) que nosotros podemos colocar en la forma original y en la final, de modo que la conversión se realizará entre los puntos identificados con la misma letra. Por ejemplo, el punto identificado con el consejo de forma "a" en la forma inicial se convertirá en el punto identificado con el consejo de forma "a" en la forma final. En otras palabras: los consejos de forma nos permiten relacionar puntos de la forma inicial con puntos de la forma final. El procedimiento general para configurar consejos de forma es el siguiente: 1. Seleccionamos en la línea de tiempo el fotograma clave inicial de la animación y ejecutamos el comando Modificar>Forma>Añadir consejo de forma. Aparecerá sobre el escenario un círculo rojo con una letra en su interior; ésa es la etiqueta inicial del consejo de forma. Su color es inicialmente rojo porque aún no hemos establecido la relación entre un punto original y uno final. 2. Arrastramos la etiqueta del consejo de forma para colocarla en el punto que nos interese. 3. En la línea de tiempo activamos el fotograma final de la interpolación y, en el escenario, veremos la etiqueta final del consejo de forma que creamos originalmente. 4. Hacemos clic sobre la etiqueta final y la arrastramos hasta el punto del contorno de la forma en el que deseemos que se convierta el punto que designamos en el paso 2. Si la forma es de fusión, la etiqueta se volverá de color verde para indicar que está correctamente asignada; y si volviésemos a activar el fotograma inicial comprobaríamos que en él la etiqueta se ha vuelto de color amarillo. Se usa el color amarillo para los fotogramas iniciales y el verde para los finales. 5. A continuación podríamos seguir creando tantos consejos de forma como deseásemos (hasta 26) repitiendo este mismo procedimiento desde el paso 1. Por ejemplo, en la siguiente figura se muestra el fotograma clave inicial y final de una metamorfosis en la que se han configurado consejos de forma y, a continuación, sólo en la versión el línea de este documento, se muestra el resultado sin utilizar consejos de forma (izquierda) y utilizándolos (derecha).

146

Truco Si en algún momento desea eliminar los consejos de forma para intentar colocarlos de nuevo, ejecute el comando Modificar>Forma>Quitar todos los consejos.

5.6. Animaciones de interpolación de movimiento Las animaciones de interpolación de movimiento son la gran novedad de Flash CS4; una propuesta para cambiar radicalmente el modo de crear animaciones, aunque para que este cambio sea menos abrupto para los usuarios de versiones anteriores se han mantenido también las interpolaciones clásicas. Las posibilidades de las interpolaciones de movimiento son muy similares a las de las clásicas, pero tienen naturalezas radicalmente distintas: las interpolaciones clásicas están vinculadas a la línea de tiempo, mientras que las de movimiento están vinculadas al contenido animado. ¿Qué quiere decir esto? En las interpolaciones clásicas los fotogramas clave se encuentran a distancias fijas entre sí en la línea de tiempo, y si queremos cambiar la duración de la animación tenemos que introducir o extraer fotogramas en cada tramo delimitado por dos fotogramas clave. Por el contrario, en las animaciones de interpolación de movimiento las distancias entre los fotogramas clave son relativas, de modo que si cambiamos la duración de la animación, automáticamente se reajustan las posiciones relativas de todos los fotogramas clave sin que tengamos que actuar sobre cada tramo comprendido entre dos fotogramas clave. Al crear una interpolación de movimiento se asigna automáticamente al contenido animado un trazo de trayectoria, sobre el que podemos actuar directamente con las herramientas Selección y Subselección para modificar su forma. La animación está definida por el contenido animado, su trayectoria, y los tiempos relativos que tarda en recorrerla, es decir, por lo que en mecánica se denomina "Ley horaria del movimiento", sin que exista ninguna limitación impuesta por la duración de la animación en la línea de tiempo. Posteriormente realizaremos un ejemplo para aclarar este asunto, pero antes destacaremos algunas de las diferencias intrínsecas de las animaciones de movimiento respecto a las clásicas: •

Son más eficientes que las interpolaciones clásicas porque requieren menos espacio de almacenamiento, de modo que el archivo SWF final ocupa menos. Consecuentemente, se recomienda su uso sobre el de las interpolaciones clásicas.

•

Sólo se pueden aplicar a instancias de símbolos de tipo clip de película (ni gráficos, ni formas, ni mapas de bits) y textos. Además, los textos no pierden su estatus al ser animados (a diferencia de lo que ocurre en las clásicas, en las que los textos se transforman en formas vulgares).

•

Permiten interpolar también las propiedades 3D (posición y rotación dentro del espacio tridimensional).

•

Sólo admiten un valor de aceleración para toda la secuencia, es decir, no podemos configurar aceleraciones distintas entre cada dos fotogramas clave, pero permiten (a diferencia de las clásicas) que esta aceleración sea distinta para cada una de las propiedades (posición, tamaño, rotación, ...) interpoladas. Además, como también admite que modifiquemos la curva de aceleración esto no supone ninguna limitación; de hecho, en este sentido aventajan a las clásicas porque se incluyen multitud de curvas de aceleración predefinidas, como muelle o rebote.

•

Como las animaciones clásicas, nos permiten configurar los fotogramas clave directamente en el escenario, pero también nos ofrecen un entorno más preciso en el que podemos configurar cada propiedad por separado mediante gráficas que indican su variación a lo largo de la trayectoria. Este entorno se denomina Editor de movimiento.

El procedimiento general para crear una interpolación de movimiento es prácticamente idéntico que el de una interpolación clásica: 1. Cuando vayamos a aplicar una interpolación a un contenido es conveniente que lo hagamos en una capa nueva. Consecuentemente, lo primero que haremos será crear una capa nueva, cuyo primer fotograma ya será por defecto un fotograma clave. 147

2. A continuación colocamos en ese primer fotograma clave el contenido que queramos animar. Podemos dibujarlo directamente con las herramientas de forma, crear una instancia desde la biblioteca, o importarlo mediante el comando Archivo>Importar, o crear un texto con la herramienta Texto. 3. Para establecer la longitud de la secuencia de animación (posteriormente aprenderemos que esta longitud se puede modificar sin modificar la distancia relativa entre los distintos fotogramas clave), hacemos clic sobre el último fotograma hasta el que queramos extenderla y pulsamos la tecla F5. Hasta ahora sólo hemos creado un fotograma clave y extendido su contenido a lo largo de varios fotogramas estáticos. 4. Hacemos clic con el botón derecho del ratón sobre cualquiera de los fotogramas intermedio y, en el menú contextual que aparece, seleccionamos la opción Crear interpolación de movimiento. Si el contenido que vamos a animar no es una instancia de un símbolo de tipo de clip de película o un texto aparecerá un cuadro de diálogo como el siguiente indicándonos que es necesario promocionarlo a este nivel. Pulsaremos el botón Aceptar y se creará un símbolo para ese contenido en la biblioteca, que será el que realmente utilicemos en la animación. Observaremos que los fotogramas de la línea de tiempo se vuelven de color azul claro y que aparece este icono ( ) a la izquierda del nombre de la capa. Estos dos elementos nos ayudarán a identificar las capas que contienen elementos animados por interpolación de movimiento.

5. Seleccionamos el fotograma final o cualquier fotograma intermedio en el que queramos definir un estado clave y, en el escenario, modificamos el estado del contenido. Podemos actuar sobre su posición (panel Propiedades o herramienta Selección), sobre su tamaño (panel Propiedades, panel Transformar o herramienta Transformación libre), sobre sus efectos de transformación (panel Transformar o herramienta Transformación libre), sobre sus efectos de color (sección Efecto de color del panel Propiedades), o sobre sus propiedades 3D (herramientas Traslación 3D, Rotación 3D, panel Propiedades y panel Transformar). Observaremos en la línea de tiempo que el fotograma pasa de ser interpolado a ser clave, pero que a diferencia de otros tipos de interpolaciones, sólo el fotograma clave inicial de la secuencia se representa con un círculo, mientras que los demás se representan mediante rombos. De hecho, los fotogramas clave de las animaciones de interpolación de movimiento se denominan más específicamente "fotogramas clave de propiedad". 6. Si hemos cambiado la posición comprobaremos que en el escenario aparece automáticamente la trayectoria del movimiento, como muestra la figura siguiente. Esta trayectoria tiene el mismo estatus que cualquier otro trazo de Flash y, por ejemplo, podemos modificarlo directamente con las herramientas Selección, Subselección y Transformación libre (aunque no con la herramienta Pluma, pero sí con sus herramientas anidadas Añadir punto de ancla y Convertir punto de ancla). Con la herramienta Selección podremos trasladar la trayectoria si hacemos clic sobre ella para seleccionarla y, a continuación, la arrastramos, o modificar la curvatura entre dos fotogramas clave haciendo clic sobre cualquier lugar vacío del escenario para asegurarnos de que no está seleccionada la trayectoria y, a continuación, colocando el puntero sobre ella y arrastrándola. Por el contrario, al hacer clic sobre el trazo con la herramienta Subselección se mostrarán sus nodos y podremos modificarlos (cambiar su posición o información de tangencia) como se explicó en el bloque 4. 148

7. Si necesitásemos cambiar la duración de la secuencia no haría falta insertar ni eliminar nuevos fotogramas (aunque podríamos hacerlo como ya se explicó en el caso de las interpolaciones clásicas con las teclas F5 y Mayús+F5, pero tomando la precaución de asegurarse de que sólo tenemos seleccionado un fotograma clave intermedio (recuerde, Control+clic) y no toda la secuencia), sino que directamente en la línea de tiempo podríamos hacer clic sobre el borde derecho del fotograma final de la secuencia (no sobre el propio fotograma clave final) y arrastrarlo para definir la nueva duración. Los fotogramas clave de toda la secuencia readaptarían su posición en la línea de tiempo para mantener sus mismas distancias relativas iniciales. 8. Por último, Flash nos permite imprimir aceleración/deceleración a la interpolación, bien de manera global sobre todas las propiedades mediante el control Aceleración del panel Propiedades, o bien individualmente sobre cada propiedad como se explicará posteriormente en la sección dedicada al Editor de movimiento (las aceleraciones se denominan suavizados en el entorno del Editor de movimiento). Por defecto, los cambios de las propiedades se realizan de forma uniforme entre cada dos fotogramas clave, pero con esta posibilidad podremos lograr que los cambios sean suaves/lentos al principio y rápidos al final (dentro o acelerado) o viceversa (fuera o desacelerado). Para aplicar esta función deberemos hacer clic sobre cualquier fotograma intermedio y, en el panel Propiedades, utilizar el control Aceleración (que admite valores entre -100 y +100. Tenga siempre en cuenta que la aceleración aplicada mediante el panel Propiedades a una interpolación de movimiento afecta a todas las propiedades interpoladas (tamaño, posición, color, ...) y a la secuencia completa de principio a fin. Truco Una ventaja interesante de las interpolaciones de movimiento es que nos permiten utilizar el Portapapeles para copiar las propiedades (posición, tamaño, sesgado, ...) de un fotograma clave y pegárselas (todas o sólo algunas) a otro. Si hacemos clic con el botón derecho del ratón en la línea de tiempo sobre un fotograma clave seleccionado (recuerde que para seleccionar un único fotograma de una secuencia tenemos que mantener pulsada la tecla Control mientras hacemos clic sobre él) se desplegará un menú contextual en el que podremos seleccionar la opción Copiar propiedades. Posteriormente, si hacemos clic con el botón derecho del ratón sobre cualquier otro fotograma seleccionado de la interpolación, podremos ejecutar el comando Pegado especial de propiedades para pegar en él las propiedades que deseemos del fotograma que copiamos anteriormente.

5.6.1. El Editor de movimiento Una vez creada la interpolación de movimiento podemos configurar sus fotogramas clave directamente en el escenario, o mediante el Editor de movimiento (la utilización de uno u otro método no es 149

excluyente; de hecho, puede ser cómodo realizar una primera aproximación en el escenario y posteriormente afinar con el Editor de movimiento). Para acceder al Editor de movimiento haremos clic en la línea de tiempo sobre cualquier fotograma de la interpolación de movimiento y, a continuación, haremos clic sobre la lengüeta Editor de movimiento (que en el espacio de trabajo Conceptos básicos está apilada con el panel Línea de tiempo, y si no fuera así podríamos acceder a él mediante el comando Ventana>Editor de movimiento). A continuación se muestra el aspecto del Editor de movimiento.

Lo primero que debemos destacar del Editor de movimiento es que está dispuesto en filas y columnas; cada fila permite configurar una propiedad distinta (posición, rotación, sesgado, ...). El nombre de la propiedad se indica en la primera columna, y en la columna de su derecha aparece un valor. Este valor es el que tiene esa propiedad en la posición en la que se encuentra el cabezal de reproducción dentro de la columna Gráfico; la columna Gráfico contiene una representación visual del cambio de la propiedad a lo largo de la interpolación, de modo que podemos ver de un simple vistazo cómo varía la propiedad de fotograma en fotograma. Observe que en la zona superior de la columna Gráfico existe una escala similar a la de la línea de tiempo en la que se muestra la numeración de los fotogramas y la posición actual del cabezal de reproducción. Es posible que en su caso la columna gráfico esté configurada para mostrar un único fotograma; esto puede modificarse mediante el control Fotogramas visibles ( ) que hay en la zona inferior izquierda del Editor de movimiento. Fíjese también en que existe una barra de desplazamiento en la zona inferior de la columna Gráfico que nos permitirá recorrer toda la interpolación independientemente del número de fotogramas que hayamos elegido visualizar. Si modificamos el valor de la segunda columna se creará automáticamente un fotograma clave en la posición en la que se encuentre el cabezal de reproducción, pero sólo para esa propiedad (excepto en el caso de las propiedades X, Y y Z, en las que al crear un fotogramas clave en una de ellas implica que se cree automáticamente otro en la otra). Los fotogramas clave se representan en la columna Gráfico mediante un cuadrado negro (aunque puede ser verde si el fotograma clave está seleccionado, como explicaremos posteriormente). Este cuadrado se sustituirá por un círculo si configuramos el fotograma como errante (encontrará más información sobre este asunto en la sección posterior 6.6.3). En nuestro recorrido por el Editor de movimiento vamos a saltarnos de momento la columna Aceleración (a la que dedicaremos por completo la sección 6.6.4) para llegar a la columna Fotograma clave. En esta columna encontraremos tres iconos que nos permitirán crear cómodamente un fotograma clave en la posición actual del cabezal de reproducción ( ) y recorrer los distintos fotogramas clave ya creados ( y ). Las propiedades están agrupadas en el Editor de movimiento en dos categorías principales, 150

Movimiento básico y Transformación, y otras secundarias, Efecto de color, Filtros y Suavizado. En la columna Fotogramas clave del rótulo de los grupos principales encontraremos el icono Restablecer valores ( ), que sirve para eliminar todos los fotogramas clave de ese grupo excepto el primero. La columna Gráfico nos permite modificar directamente el valor de la propiedad correspondiente en cada fotograma clave, pero como su alto predeterminado es muy pequeño, primero vamos a aprender a modificarlo. Cada fila del Editor de movimiento se muestra inicialmente contraída, pero si hacemos clic sobre cualquier zona vacía de las columnas situadas a la izquierda de Gráfico pasará a un modo expandido de mayor altura. La altura del modo expandido se configura mediante el control Tamaño de gráfico expandido ( ) de la zona inferior izquierda del Editor de movimiento. A la izquierda de este icono se encuentra Tamaño de gráfico ( ), que controla la altura de las filas en estado contraído. Tenga en cuenta que a la izquierda del Editor de movimiento existe una barra de desplazamiento vertical con la que podrá recorrer todas las filas. Por último, para pasar del modo expandido al contraído, bastará con que expandamos otra fila diferente o con que volvamos a hacer clic sobre cualquier zona vacía de las columnas situadas a la izquierda de Gráfico. Ahora que ya sabemos cómo visualizar los gráficos de propiedad con comodidad nos dedicaremos a modificarlos, para lo que podemos aplicar las siguientes tres técnicas básicas: •

Podemos arrastrar directamente cualquier fotograma clave para cambiar el valor de la propiedad en él (verticalmente) o su posición dentro de la duración de la interpolación (horizontalmente). En lugar de arrastrar los fotogramas clave también podemos arrastrar los segmentos ubicados entre ellos para cambiar simultáneamente la posición de los dos fotogramas clave de sus extremos. Los fotogramas seleccionados se muestran en color verde. Podemos seleccionar simultáneamente varios fotogramas clave manteniendo pulsada la tecla Mayús pulsada mientras hacemos clic sobre cada uno de ellos para, después, arrastrar cualquiera de ellos y conseguir que los demás también se desplacen.

•

La gráfica, al pasar por los fotogramas clave, puede hacerlo como si éstos fueran puntos de esquina o como si fueran puntos suaves. Para convertir un punto de esquina en uno suave o viceversa basta con hacer clic sobre el fotograma clave mientras se mantiene pulsada la tecla Alt.

Para eliminar un fotograma clave sólo tendremos que hacer clic sobre él con el botón derecho del ratón y seleccionar la opción Quitar fotograma clave en el menú contextual que se despliega.

Advertencia En los fotogramas suaves de las propiedades X, Y y Z no se muestran los controladores de tangencia, pues esta información puede indicarse directamente en el escenario de un modo más claro. Sin embargo, en los puntos suaves de las demás propiedades sí se muestran para que podamos modificarlos directamente en el Editor de movimiento. Advertencia Por defecto no se muestran las propiedades 3D de rotación según los ejes X e Y en el Editor de movimiento salvo si previamente hemos sometido al objeto animado a alguna transformación 3D en el escenario. Para que se muestren estas propiedades en cualquier caso, haga clic con el botón derecho del ratón sobre cualquier fotograma de la interpolación en la línea de tiempo, y seleccione la opción Interpolación 3D.

5.6.2. Trayectorias en las interpolaciones de movimiento

151

Como ya se comentó anteriormente, al crear una interpolación de movimiento en la que existe un cambio de posición entre fotogramas clave, se muestra automáticamente su trayectoria en el escenario, donde podemos modificarla con las herramientas Selección, Subselección, Transformación libre, Eliminar punto de ancla o Convertir punto de ancla. Si necesitamos añadir un punto de ancla en una posición, lo más cómodo es insertar en ella un fotograma clave pulsando la tecla F6 o directamente arrastrando el elemento animado en el escenario para cambiar su posición. También hemos visto que podemos modificar la trayectoria y otras propiedades en el Editor de movimiento, pero ¿y si quisiéramos asignar a un elemento un trazado de trayectoria concreto que ya hemos dibujado previamente? Recordará que las interpolaciones clásicas admitían el ajuste a capas de guía de movimiento, pero esto no es posible con las interpolaciones de movimiento. En este caso actuaremos del siguiente modo: 1. Seleccionamos el trazado. Debe ser un trazado abierto, es decir, con un punto inicial y un punto final. 2. En la línea de tiempo hacemos clic sobre cualquier fotograma de la interpolación de movimiento para seleccionar toda la secuencia. 3. Pulsamos la combinación de teclas Control+V para pegar la trayectoria sobre la interpolación, de modo que ésta "olvidará" instantáneamente su trayectoria anterior y pasará a utilizar la que hemos pegado. 4. Como en el caso de las interpolaciones clásicas, en el panel Propiedades contamos con la opción Orientar según trazado, que va girando el objeto animado a lo largo de la trayectoria. Debemos tener en cuenta que al activar esta opción cada fotograma de la interpolación se convertirá en un fotograma clave de propiedad para la rotación según el eje Z.

5.6.3. Fotogramas clave errantes Una cualidad muy útil exclusiva de las interpolaciones de movimiento es distribuir automáticamente los fotogramas clave de posición a lo largo de la trayectoria de modo que la velocidad a lo largo de toda ella sea constante. Al crear los fotogramas clave es muy difícil establecer una relación entre la longitud de la trayectoria recorrida entre cada dos fotogramas clave y el número de fotogramas interpolados que los separa en la línea de tiempo; consecuentemente, si en cada tramos de la animación no respectamos la misma relación parecerá que el objeto cambia instantáneamente de velocidad al pasar por los fotogramas clave. Para evitar esto podemos indicar a Flash que considere nuestros fotogramas clave como fotogramas errantes. Estos fotogramas no se muestran directamente en la línea de tiempo, aunque sí en el Editor de movimiento, en el que se representan mediante un círculo en lugar de un cuadrado. Al configurar los fotogramas clave como errantes, Flash los distribuirá a lo largo de la trayectoria de modo que ésta se recorra con velocidad constante. Si posteriormente cambiásemos la duración de la interpolación, Flash redistribuiría automáticamente los fotogramas clave errantes para nuevamente lograr que la velocidad sea constante. Para convertir los fotogramas clave en errantes sólo tenemos que hacer clic con el botón derecho del ratón sobre cualquier fotograma de la interpolación y, en el menú contextual que se despliega, seleccionar Ruta de movimiento>Cambiar fotogramas clave a errantes. Observe que en este mismo menú tenemos la opción Ruta de movimiento>Cambiar fotogramas clave a no errantes para volver a vincular los fotogramas clave a posiciones concretas (en lugar de errantes) de la línea de tiempo. En la siguiente figura se muestra el antes (izquierda) y el después (derecha) de convertir los fotogramas clave de una animación en errantes. Puede comprobarse que originalmente el tramo izquierdo se recorría más rápido que el derecho, pero después de convertir los fotogramas clave a errantes ambos se reproducen a igual velocidad.

152

5.6.4. Aceleraciones en el Editor de movimiento En la descripción general del Editor de movimiento pasamos por alto la columna Aceleración para poder entrar rápidamente en los detalles de las interpolaciones de movimiento sin distraer la atención en otras cuestiones, pero ahora ha llegado el momento de dedicarle el tiempo que se merece. Gracias al editor de movimiento nos resultará sencillísimo aplicar aceleraciones que responden a modelos físicos complejos de la vida real, como un rebote o el desplazamiento vibratorio de un muelle. En la columna Aceleración encontramos una casilla que nos permite indicar si queremos aplicar o no aceleración a cada propiedad, y junto a esta casilla disponemos de un cuadro de lista desplegable para seleccionar qué aceleración queremos utilizar. Por defecto, la única aceleración disponible es Simple (lento), que básicamente corresponde a una aceleración constante. No obstante, en la zona inferior del Editor de movimiento, si hacemos clic sobre el icono + de la sección Suavizados podremos añadir otras opciones de aceleración, como Detener y reproducir, Rebote, Muelle, Sinusoide, Aleatoria, ... Cada una de estas opciones que agreguemos se mostrará como una propiedad más en el Editor de movimiento, pero no podremos modificar su gráfica directamente, sino sólo a través del número que aparece en la columna Valor. Este número es similar a la aceleración general dentro o fuera que se aplica desde el panel Propiedades, y su efecto es trasladar toda la aceleración al principio si elegimos un valor alto (frena a medida que se avanza en la interpolación), o al final si elegimos un valor negativo bajo (acelera a medida que se avanza en la interpolación), pero manteniendo la forma general de la curva de aceleración. Podemos añadir varias veces el mismo tipo de aceleración para configurarlo con distintos valores. Todas las aceleraciones que añadamos mediante el icono + estarán disponibles en el cuadro de lista de la columna Aceleración de las demás propiedades (si hemos añadido varias aceleraciones del mismo tipo podremos distinguirlas por su número de orden, que aparece a su izquierda). La aceleración que elijamos en el cuadro de lista de la columna Aceleración también se representará en la columna Gráfico, pero con una línea discontinua de un color distinto al negro (las gráficas de aceleración no se pueden modificar). Disponer en el mismo gráfico de la línea de variación de la propiedad y de la línea de la aceleración de esa variación es muy útil para entender cómo se desarrollará el cambio de la propiedad. A continuación, sólo en la versión en línea de este documento se muestra una misma animación con distintos tipos de aceleración (onda amortiguada arriba y sin aceleración abajo).

153

Truco El sistema de aceleraciones de las interpolaciones de movimiento es tan flexible que incluso nos permite diseñar nuestras propias curvas de aceleración. El procedimiento general consiste en añadir una nueva aceleración de tipo Personalizado mediante el icono + de la sección Suavizado del Editor de movimiento, y modificar la gráfica que aparece en color rojo como si se tratase de la gráfica de cualquier otra propiedad (creando fotogramas clave, convirtiéndolos en angulares o curvos, modificando su información de tangencia, ...).

5.6.5. Configuraciones predefinidas de movimiento Otra novedad interesante de Flash CS4 es la posibilidad de copiar una animación de una interpolación y asignársela a otro objeto, o de utilizar alguna de las configuraciones predefinidas de movimiento incluidas en Flash. Si hemos creado una animación de interpolación de movimiento que creemos que puede sernos de utilidad con otros objetos podremos hacer clic con el botón derecho del ratón sobre cualquiera de sus fotogramas y ejecutar el comando Guardar como configuración predefinida de movimiento, que nos conducirá a un cuadro de diálogo en el que simplemente tendremos que indicar el nombre que queremos asignar a esa animación. Para aplicar una de las configuraciones predefinidas de movimiento a un objeto el procedimiento es el siguiente: 1. Crear el objeto que se desee animar en una capa independiente (recuerde que cada objeto animado debe estar en una capa distinta). 2. Asegurarse de que el objeto está seleccionado. 3. Ejecutar el comando Ventana>Configuración predefinida de movimiento, para acceder al panel que contiene todas las animaciones predefinidas. Este panel es similar a la biblioteca; en la zona inferior hay dos carpetas de movimientos, los predefinidos de Flash (Valores predefinidos predeterminados) y los que hayamos podido crear nosotros siguiendo el procedimiento descrito al principio de esta sección (Valores predefinidos personalizados). 4. Hacer clic sobre la flecha que hay a la izquierda de la carpeta que contenga el movimiento que queramos utilizar para desplegar su contenido. 5 Hacer clic sobre el nombre del movimiento; automáticamente se previsualizará en la zona superior del panel. 6. Pulsar el botón Aplicar para asignar el movimiento al objeto seleccionado en el paso 2. Automáticamente se creará la interpolación de movimiento sobre ese objeto y se le aplicará la animación seleccionada. Recuerde que puede modificar la duración de la animación arrastrando el borde derecho del último fotograma en la línea de tiempo, que puede desplazar la trayectoria haciendo clic sobre ella con la herramienta Selección para seleccionarla y volviendo a hacer clic sobre ella para arrastrarla a su nueva ubicación, y que puede cambiar el tamaño de la trayectoria con la herramienta Transformación libre.

5.7. Animaciones de cinemática inversa

154

Sin lugar a dudas éste es el tipo de animación más complejo que incluye Flash. La cinemática es una rama de la mecánica que persigue establecer cuál es la posición de un sistema (generalmente un punto o un sólido rígido) dentro de su trayectoria en cada instante. De esta ciencia se han derivado dos técnicas de animación que actúan sobre sistemas de puntos o sólidos rígidos: •

Cinemática directa: El usuario configura una transformación (giro, traslación, ...) y el ordenador calcula automáticamente la posición final del sistema tras aplicar esa transformación.

•

Cinemática inversa: El usuario configura una posición del sistema y el ordenador calcula automáticamente una transformación para poder alcanzar esa posición.

Existen dos tipos de animaciones de cinemática inversa en Flash: •

Aquéllas en las que intervienen varias instancias de símbolos, a las que nos referiremos como animaciones de cadena.

•

Aquéllas en las que interviene una única forma, a las que nos referiremos simplemente como animaciones de forma.

Ambas se crean y funcionan de forma idéntica, salvo porque en las de cadena se considera que cada instancia es una "pieza" del sistema, mientras que en las de forma se considera que cada nodo del contorno es una "pieza" del sistema. En cualquier caso tendremos que establecer qué relación existe entre estas piezas, y para ello crearemos huesos. Los huesos indican qué relación de dependencia existe entre las distintas piezas del sistema. Por ejemplo, si aplicásemos una animación de cadena a una serpiente compuesta por varios círculos, tendríamos que crear huesos que uniesen estos círculos entre sí. Los huesos tienen un origen (en la pieza de la que parten) y un destino (en la pieza a la que llegan), y se unen entre sí mediante articulaciones. El hueso cuyo origen es (que arranca desde) el destino de otro se considera dependiente de él. Cuando arrastremos un hueso se inducirá en la cadena de huesos de la que depende un movimiento proporcional, mientras que sus huesos dependientes se desplazarán como si estuvieran rígidamente unidos a él (no se producirán giros en las articulaciones). El conjunto de huesos de un sistema se denomina esqueleto o armadura, y puede ser lineal o ramificado. En un esqueleto lineal cada hueso tiene a lo sumo un hueso dependiente, mientras que en uno ramificado puede haber huesos de los que dependan más de uno. Por ejemplo, el esqueleto de una serpiente sería lineal, mientras que el de un pulpo sería ramificado. Flash nos permite establecer ligaduras o restricciones de modo que el ángulo de giro en las articulaciones no pueda exceder ciertos valores; aunque es menos intuitivo, Flash también admite que los huesos cambien de longitud, como si fuesen elásticos, y en este caso también permite establecer restricciones en cuanto a la dirección de la elongación y su magnitud. Cuando tengamos completamente configurado un esqueleto (disposición de los huesos y ligaduras entre ellos) podremos empezar a animarlo. En una animación de cinemática inversa simplemente tendremos que configurar poses o fotogramas clave en los que los huesos ocupan unas posiciones determinadas, y Flash se encargará de calcular todas las posiciones intermedias por interpolación. Lo más interesante de las animaciones de cinemática inversa es que permiten crear con relativa facilidad movimientos realistas (como el desplazamiento de una oruga) que serían muy tediosos de desarrollar con otras técnicas. A continuación, sólo en la versión en línea de este documento, encontrará un esqueleto de cinemática inversa cuyas piezas puede arrastrar para comprobar en tiempo real cómo son este tipo de animaciones (los huesos están dispuestos de izquierda a derecha, de modo que el hueso que llega al rectángulo situado más a la derecha es el último de la cadena, es decir, dependen de todos los anteriores y, consecuentemente, al arrastrarlo introducirá un movimiento proporcional en todos los anteriores).

155

5.7.1. Creación del esqueleto Para crear el esqueleto primero tendremos que tener sobre el escenario todas las instancias (si se trata de una animación de cadena) o la forma (si se trata de una animación de forma) que queramos vincular mediante él. Una vez cumplida esta premisa, el procedimiento general es el siguiente: 1. Activamos la herramienta Hueso (

) en el panel Herramientas.

2. Hacemos clic sobre el punto de la primera instancia o de la forma en el que queramos colocar el origen del primer hueso y, sin soltar el botón del ratón, lo arrastramos hasta el punto de la siguiente instancia o hasta la posición de la forma en la que deseemos ubicar su destino. Observaremos que el hueso se representa mediante una flecha, en la que la base ocupa el origen y el vértice opuesto el destino. Al definir el primer hueso se creará automáticamente una capa cuyo nombre comienza con Esqueleto y se trasladará a ella la instancia o forma. En el caso de las animaciones de cadena, los puntos que elijamos como origen y destino para cada hueso se convertirán también automáticamente en el centro de transformación de sus respectivas instancias (esto es lógico, pues los puntos de unión de los huesos son articulaciones, o centros de rotación). Si quisiéramos cambiar el origen o destino de un hueso después de dibujarlo, bastaría con activar la herramienta Transformación libre para cambiar la posición del centro de transformación de la instancia correspondiente. 3. Repetimos el paso anterior para crear tantos huesos como sean necesarios. Cada hueso debe partir del punto de destino de otro, aunque del punto de destino de un mismo hueso pueden partir varios (si se trata de un esqueleto ramificado). Las instancias que vayamos vinculando a huesos se irán trasladando a la capa Esqueleto. Por ejemplo, en la siguiente figura se muestra un esqueleto ramificado de una rana. Observe el círculo que hay en los huesos que parten del tronco; este círculo indica que es la pieza principal de este esqueleto (aquélla de la que dependen todas las demás).

156

4. Una vez colocados todos los huesos tendremos que definir sus ligaduras. Para ello activaremos la herramienta Selección y haremos clic sobre un hueso para seleccionarlo. A continuación recurriremos al panel Propiedades para configurar las ligaduras. En las secciones Unión: Rotación, Unión: Traslación X y Unión: Traslación Y contamos con una casilla para Habilitar cada uno de estos grados de libertad y con otra para Restringir su magnitud. Por ejemplo, si quisiéramos restringir un hueso para que sólo pudiera girar entre 0 y 45º respecto al hueso del que depende activaríamos las casillas Habilitar y Restringir de la sección Unión: Rotación, y escribiríamos los valores 0 y 45 en los controles Mín y Máx. Tenga en cuenta que las ligaduras siempre se aplican en el origen del hueso y respecto al hueso del que depende. 5. Repetimos el paso anterior con todos los huesos que sea preciso.

5.7.2. Creación de la animación Una vez configurado el esqueleto y todas sus restricciones podremos empezar a definir la animación. El procedimiento es muy similar a la creación de una animación de interpolación: tendremos que definir estados clave, que en este caso se denominan poses, y Flash se encargará de calcular los estados intermedios. Más concretamente, el procedimiento general es el siguiente: 1. En la línea de tiempo tendremos un único fotograma en la capa Esqueleto, y ese fotograma estará identificado por un rombo y, sobre él, el icono de una figura humana en ademán de caminar ( ). Estos elementos indican que se trata de un fotograma clave o pose. Haremos clic sobre el fotograma hasta el que queramos extender la animación y pulsaremos la tecla F5 para incluir fotogramas interpolados hasta esa posición. 2. Hacemos clic sobre alguno de los fotogramas interpolados en el que deseemos crear una pose para activarlo y, en el escenario, con la herramienta Selección, arrastramos las instancias o los huesos para crear la nueva pose. Si mantenemos pulsada la tecla Mayús mientras arrastramos el ratón conseguiremos que gire el hueso y todos sus huesos dependientes de forma rígida y sin inducir ninguna modificación en los huesos de los que depende. 3. Repetimos el paso anterior para crear tantas poses como estimemos necesario. 4. Hacemos clic sobre cualquier fotograma comprendido entre dos poses y, en el panel Propiedades, utilizamos los controles de la sección Aceleración para configurar el tipo y la intensidad de la curva de aceleración que deseamos aplicar en ese tramo de la animación. Por ejemplo, a continuación, sólo en la versión en línea de este documento, se muestra una animación con 4 poses en la que el tramo en el que la pierna avanza hacia la derecha tiene aplicado una aceleración de tipo Simple (más rápido) con intensidad 100.

157

Truco Para poder utilizar una animación de cinemática inversa en otros tipos de animaciones (por ejemplo, en una interpolación de movimiento) tendremos que convertirla en un símbolo haciendo clic sobre ella con el botón derecho del ratón en el escenario y seleccionando la opción Convertir en símbolo.

5.7.3. Vinculación de nodos en las animaciones de forma En las animaciones de forma, al crear un hueso quedan vinculados a él automáticamente los nodos del contorno de la forma que tiene más próximos. No obstante, podemos vincular cualquier nodo a cualquier hueso utilizando la herramienta Vinculación ( ), que está anidada junto con la herramienta Hueso. Tenga en cuenta que un hueso puede tener vinculados varios nodos, y que un mismo nodo puede estar vinculado a más de un hueso. Los nodos vinculados a un hueso estarán afectados por el movimiento de éste y, consecuentemente, el desplazamiento del hueso afectará a la forma del tramo del contorno controlado por esos nodos. Tras activar la herramienta Vinculación podemos actuar de dos modos diferentes: •

Si hacemos clic sobre un hueso, éste se resaltará en rojo y todos sus nodos vinculados en amarillo. Los nodos representados por un cuadrado sólo están vinculados a ese hueso, mientras que los representados por un triángulo están vinculados además a otros huesos. Si queremos vincular un nodo del contorno al hueso seleccionado sólo tendremos que hacer clic sobre él mientras mantenemos pulsada la tecla Mayús. Por el contrario, para desvincular un nodo de un hueso haremos clic sobre él mientras mantenemos pulsada la tecla Control.

•

Si hacemos clic sobre un nodo se resaltará en amarillo el o los huesos a los que está vinculado. Para vincular ese nodo a un hueso sólo tendremos que hacer clic sobre ese hueso mientras mantenemos pulsada la tecla Mayús. Por el contrario, para desvincular ese nodo de un hueso tendremos que hacer clic sobre el hueso mientras mantenemos pulsada la tecla Control.

En la siguiente figura se muestra un ejemplo de vinculación entre nodos y huesos.

158

5.8. Capas de máscara Flash nos permite ocultar parte de los contenidos de una capa mediante otra capa especial, denominada capa de máscara. Los contenidos de la capa de máscara no se mostrarán en la película final, pero actuarán como superficies transparentes para los de la capa a la que enmascara. Es decir, los contenidos de la capa enmascarada serán visibles sólo donde se solapen con contenidos de la capa de máscara. Para convertir una capa normal en una capa de máscara haremos clic sobre su nombre con el botón derecho del ratón y, en el menú contextual que se despliega, seleccionaremos la opción Máscara. Si existiera alguna capa debajo de la que hemos convertido en capa de máscara, automáticamente pasaría a estar enmascarada por ella. En la siguiente figura la capa 2 es una capa de máscara (fíjese en el icono que hay a la izquierda de su nombre) y la capa 1 está enmascarada por ella (observe que la capa 1 está sangrada respecto a la 2). Una misma capa de máscara puede enmascarar a varias capas; para añadir una capa al grupo afectado por una capa de máscara sólo tenemos que hacer clic sobre su nombre y arrastrarla hasta que el marcador de posición (la recta con un círculo en su extremo izquierdo) aparezca justo debajo de la capa de máscara y ligeramente sangrado hacia la derecha. Por el contrario para extraer una capa del efecto de una capa de máscara haremos clic sobre su nombre y arrastraremos el ratón hacia abajo hasta que el marcador de posición ya no aparezca sangrado. Para que el efecto de la máscara sea visible en el modo de edición es necesario que tanto la capa de máscara como la/s capa/s a la/s que enmascara estén bloqueadas; por este motivo se bloquea automáticamente la capa que convertimos en máscara y la que pudiera existir debajo de ella. Para poder modificar los contenidos de la capa de máscara o de la enmascarada tendremos que desbloquearlas haciendo clic sobre el icono de candado que aparece a la derecha de sus nombres. Posiblemente la característica más interesante de las capas de máscara es que podemos animar sus contenidos mediante interpolaciones fotograma a fotograma, de interpolación clásica, de interpolación de movimiento o de metamorfosis. Por ejemplo, a continuación, sólo en la versión en línea de este documento, se incluye el efecto de aplicar una interpolación clásica sobre un círculo en la capa de máscara para hacer crecer su tamaño hasta que abarca todo el escenario, logrando el efecto de que se muestre poco a poco la imagen que hay en la capa enmascarada.

159

160

6. Rótulos y textos Los textos, o para ser más precisos, los campos de texto, son otro de los tipos de actores que podemos hacer intervenir en nuestras películas (recuerde que los otros tipos de actores que ya conocemos son gráficos, botones y clips de película), aunque realmente no se insertan en la biblioteca (cada texto que creemos será directamente una instancia). Existen tres tipos de campos de texto: •

Campos de texto estáticos: No pueden considerarse realmente actores, sino más bien atrezzo, pues no admiten un nombre de instancia que permita manipularlos mediante ActionScript. Los campos de texto estáticos contienen un texto que no varía. Tres cualidades interesantes de estos campos que no están presentes en los otros dos es que permiten crear textos traslúcidos (configurando el valor alfa del color de fondo), textos con orientación vertical, y que admiten que cada carácter del texto posea unas propiedades diferentes (color, tipo de letra, ...).

•

Campos de texto dinámicos: Son campos cuyo contenido se puede modificar a lo largo del transcurso de la película mediante ActionScript. Basta con asignar un nombre de instancia al campo en el panel Propiedades (como lo haríamos con cualquier instancia de un clip de película) e indicar el contenido que queremos asignarle mediante la propiedad text. Por ejemplo, si el campo posee el nombre de instancia puntuacion, podríamos cambiar su contenido mediante la instrucción puntuacion.text="100";.

•

Campos de introducción de texto: Son campos en los que el usuario puede escribir texto. Al igual que en los dinámicos, para acceder a su contenido utilizaremos la propiedad text. Información Flash CS5 incluye un tipo nuevo de textos llamados TLF (Text Layout Framework), que es el que se utiliza por defecto. Este tipo ofrece muchas mejoras se visualización respecto al texto de CS4 (que ahora se denomina texto clásico), pero sobre todo destaca por la posibilidad de distribuir fácilmente un texto entre distintos cuadros de texto, como si fueran las columnas de un periódico, y por la capacidad para poder asumir transformaciones 3D sin tener que ser incluido dentro de otro No obstante, en este curso vamos a limitarnos a usar el texto clásico, pues los textos TLF también imponen ciertas limitaciones, como la de no poder ser utilizados como máscaras, pero sobre todo, la de requerir para su reproducción la versión más reciente de Flash Player y una biblioteca adicional, que podría impedir su correcta visualización a parte de nuestra audiencia.

A la hora de crear un campo de texto es deseable elegir el tipo apropiado; si un texto no va a cambiar en toda la película no tiene sentido que lo configuremos como un campo dinámico, pues consumiría más recursos que si lo configurásemos como lo que realmente es: un campo estático. Tradicionalmente, el uso de textos en Flash ha ido acompañado de dos problemas (ambos con solución afortunadamente): •

Legibilidad: Cuando se utilizan textos muy pequeños (por ejemplo, en aplicaciones para teléfonos móviles), en ocasiones resulta complicado leerlos porque Flash aplica técnicas de suavizado o antialiasing para representar los textos, especialmente los que no están colocados en coordenadas enteras (por ejemplo, cuando animamos un texto a lo largo de una trayectoria). Esto motivó que durante mucho tiempo tuvieran gran éxito, y que aún lo mantengan en cierto grado, las denominadas pixel fonts, que eran fuentes especialmente diseñadas para no ser afectadas por el anti-aliasing. En esta dirección http://www.fontsforflash.com/ puede ver varios ejemplos de este tipo de fuentes. Actualmente Flash nos permite elegir qué tipo de suavizado queremos aplicar, o incluso anularlo, de modo que este problema puede considerarse resuelto.

•

Fuentes: ¿Qué ocurre si creamos un texto con una fuente que no está disponible en el ordenador del usuario final? En principio, si se trata de un campo estático no habría ningún problema, pues en este caso se incrustarían automáticamente los trazos que componen los caracteres, de modo que se mostrarían correctamente aunque la fuente no estuviese instalada en el ordenador del usuario final. Pero en el caso 161

de un campo dinámico o de introducción de texto, esa fuente sería sustituida por otra similar, aunque Flash también nos ofrece la posibilidad en estos casos de incrustar la fuente (más concretamente los trazos que componen sus caracteres, también denominados glyphs) en el archivo SWF, de modo que el texto se representaría en cualquier ordenador exactamente igual que en el nuestro, aunque no estuviera disponible la fuente. El problema de incrustar glyphs es que requieren bastante espacio de almacenamiento (del orden de unos pocos kilobytes, pero esto puede ser mucho para algunas aplicaciones concretas, especialmente cuando el ancho de banda es limitado). Lo ideal sería utilizar las denominadas "fuentes de dispositivo" que son fuentes que comparten todos los sistemas operativos, y por lo tanto no requerirían incrustar ningún glyph, pero estas fuentes sólo son tres (Helvética/Arial/Sans Serif, Times/Serif y Courier/Typewriter), y esto puede limitar demasiado el diseño.

Información Serif es un término (tomado prestado del francés) que califica a diversas familias de fuentes, y que simplemente indica que sus trazos están "adornados", como en el caso de la popular Times New Roman. Por el contrario, el calificativo Sans Serif se aplica a las fuentes que carecen de esos adornos; por ejemplo, el texto que está leyendo actualmente está escrito en Verdana, que es una fuente sans serif. Las fuentes Courier/Typewriter también se denominan monoespaciadas, porque en ellas todos los caracteres requieren exactamente el mismo espacio (por ejemplo, una "m" ocupa lo mismo que una "i").

6.1. Crear campos de texto En cierta forma, cada campo de texto es como un pequeño documento de un procesador de textos, en el que disponemos de muchas de las opciones disponibles en este tipo de programas: modificar textos, cambiar tamaños de letra, usar el Portapapeles, seleccionar caracteres arrastrando el ratón sobre ellos, ... Debemos tener claro desde el principio que el contenido de un campo de texto puede modificarse en cualquier momento, pues los campos mantienen su estatus especial de "textos" sin degradarse a ser simples formas. El procedimiento general para crear un campo de texto en Flash es el siguiente: 1. Activar la herramienta Texto (

) en el panel Herramientas.

2. Acceder al panel Propiedades para configurar sus opciones (que se explicarán con más detalle en la siguiente sección); por ejemplo, para indicar si se trata de un campo estático, dinámico o de introducción de texto utilizaríamos el cuadro de lista que hay en la zona superior del panel Propiedades. Si está utilizando CS5, recuerde que en este curso no vamos a usar los texto TLF, por lo que deberá seleccionar la opción Texto clásico en la parte superior del panel Propiedades. 3. Hacer clic sobre el escenario en la posición en la que deseemos insertar el texto. Aparecerá un cursor de inserción, como si efectivamente nos encontrásemos en un editor de textos. 4. Escribir el texto. 5. Para dar por finalizada la introducción del texto podemos activar cualquier otra herramienta, hacer clic en cualquier lugar vacío del escenario o pulsar la tecla Esc. Si posteriormente quisiéramos cambiar el contenido del campo de texto, bastaría con volver a activar la herramienta Texto y hacer clic dentro del texto para que apareciese nuevamente el cursor de inserción.

6.1.1. Propiedades de los campos de texto En la siguiente figura se muestra el aspecto del panel Propiedades cuando tenemos seleccionado un campo de texto.

162

En la zona superior elegiremos el tipo de campo, estático, dinámico o de introducción de texto, y en estos dos últimos casos podremos indicar también un nombre de instancia para poder manejar ese campo mediante ActionScript. En la sección Posición y tamaño indicaremos la posición de la esquina superior izquierda del campo (mediante los campos X e Y) y su tamaño (mediante los campos W para el ancho y H para el alto). Tenga en cuenta que el tamaño configurado en esta sección es el del campo de texto en sí, no el del texto que alberga en su interior. El ancho y el alto tienen valores mínimos que no su pueden exceder y que dependen del tamaño del tipo de letra elegido. Truco Los campos de texto pueden ser de ancho fijo o de ancho variable. En los de ancho fijo el texto que escribamos se irá disponiendo en sucesivas líneas sin que ninguna de ellas supere el ancho del campo. Por el contrario, en los de ancho variable todo el texto se colocará en una misma línea (salvo que pulsemos la tecla Intro para provocar un salto de línea deliberado) y el ancho del campo crecerá para adaptarse. Al hacer clic sobre el escenario para crear un campo de texto estático, éste es por defecto de ancho variable (como indica el círculo que aparece en su esquina superior derecha), pero podemos arrastrar cualquiera de los manejadores que aparecen en sus esquinas para asignarle un ancho fijo (en este caso el círculo de su esquina superior derecha se sustituirá por un cuadrado). Si quisiéramos recuperar el carácter variable del ancho, bastaría con hacer doble clic sobre el cuadrado de la esquina superior derecha del campo. Por el contrario, al crear un campo dinámico o de introducción de texto, éste se crea automáticamente con un ancho fijo (como indica el cuadrado que, en este caso, aparece en la esquina inferior derecha, en lugar de en la superior derecha como en los estáticos). Para variar este ancho fijo podemos arrastrar cualquiera de los manejadores de las esquinas. Como en el caso de los estáticos, para convertirlo en un campo de ancho variable bastará con hacer doble clic sobre el cuadrado de la esquina inferior derecha. En el caso de los dinámicos y de introducción de texto, los campos de ancho fijo pueden ser además desplazables; esto quiere decir que el ancho del campo es fijo pero puede contener más cantidad de texto de la que es capaz de mostrar (puede quedar texto oculto por la izquierda del campo, o en su zona superior si está compuesto por varias líneas). Para convertir un campo de ancho fijo o variable en desplazable haremos doble clic sobre el cuadrado/círculo mientras mantenemos pulsada la tecla Mayús (el cuadrado/círculo se convertirá en un cuadrado negro). En la sección Carácter comenzaremos eligiendo una Familia o tipo de letra y un Estilo (Regular, Bold o negrita, Italic o cursiva). Los tipos de letra disponibles en el cuadro de lista Familia serán los que tengamos instalados en nuestro sistema operativo y que sean de tipo PostScript type 1 o TrueType. En la zona superior de este cuadro de lista encontraremos las tres fuentes de dispositivo: _sans, _serif y _typewriter. Recuerde que estas fuentes (o equivalentes) están disponibles en todos los sistemas operativos, de modo que nos garantizan que el texto se mostrará igual que nosotros los estamos viendo sin necesidad de tener que incrustar ningún glyph. En la medida de lo posible (y siempre que la estética lo permita) utilizaremos 163

los tipos de letra de dispositivo, aunque conviene tener presente que estos tipos de letra no admiten transparencia ni pueden disponerse verticalmente (de modo que perderíamos dos de las cualidades de los campos de texto estáticos). La opción Tamaño sirve para establecer el tamaño del tipo de letra en puntos (recuerde que los campos de texto estático permiten utilizar caracteres con distintos tamaños, mientras que en los dinámicos y de introducción de texto el tamaño es único para todo el campo). La opción Espaciado entre letras controla el kerning y/o tracking, es decir, el área en blanco total entre caracteres adyacentes (kerning), y el área en blanco entre los límites extremos, o las cajas, de los caracteres adyacentes (tracking). Por ejemplo, en la siguiente figura podemos ver el resultado de aplicar un espaciado apretado (arriba) y uno más suelto (abajo). En los campos estáticos podemos activar la casilla Ajuste automático para aprovechar la información de kerning y tracking que suelen incluir las propias fuentes, y con la que lograremos resultados más armoniosos, pues se tiene en cuenta que ciertos caracteres como la A y la V pueden solapar sus cajas sin llegar a pisarse. En la siguiente figura se ha mantenido el Ajuste automático arriba y se ha eliminado abajo. Mediante el control Color podremos establecer el color del campo, o de los caracteres que tengamos seleccionados si se trata de un campo estático. Recuerde que en los campos estáticos cada carácter puede tener propiedades (color, fuente, tamaño, ...) distintas, pero en los dinámicos y de introducción de texto no.

Advertencia Por defecto, los textos se crean con el color que tengamos seleccionado para el relleno de formas en el panel Herramientas. La opción Suavizado es la responsable de controlar el antialiasing que se aplica sobre los contornos de los caracteres. En la siguiente figura se aprecia la diferencia entre un carácter sin anti-aliasing (izquierda) y otro con anti-aliasing (derecha). Generalmente el suavizado es más útil en los textos pequeños (menos de 10 puntos) que en los grandes. Las opciones de Suavizado son: •

Utilizar fuentes del dispositivo: Esta opción utiliza las fuentes de dispositivo, independientemente de la fuente real que hayamos elegido para el campo. De este modo no es necesario incrustar ningún glyph en el archivo SWF, y la legibilidad está garantizada porque las fuentes de dispositivo son muy robustas y su sencillez permite que se vean bien en prácticamente cualquier tamaño.

•

Texto de mapa de bits [sin suavizado]: En este caso no se aplicará ningún suavizado, aunque sí se hará uso de los glyphs incrustados (de modo que el archivo SWF tendrá un mayor tamaño que si utilizásemos fuentes de dispositivo). Al incrustar un glyph, Flash puede optar entre almacenar los trazos vectoriales que lo componen, o la representación de mapa de bits del carácter. Generalmente es mejor almacenar los trazos vectoriales, pues ocupan menos espacio y se representan bien a cualquier tamaño. Sin embargo, en algunos casos concretos (como en el de las pixel fonts), puede resultar conveniente utilizar los mapas de bits, pues de este modo los caracteres se mostrarán exactamente como fueron diseñados (sin ninguna distorsión por anti-aliasing), y eso es precisamente lo que hace la opción Texto de mapa de bits [sin suavizado]. Tenga en cuenta que las pixel fonts suelen estar diseñadas para utilizarse con un único tamaño.

164

•

Suavizado para animación: Mejora la legibilidad de los textos cuando los animamos renunciando a la información de kerning y tracking de la fuente. Sólo utilizaremos esta opción con campos de textos que intervengan en animaciones. Este tipo de suavizado también requiere que se incrusten los contornos de los glyphs, de modo que aumenta el tamaño del archivo SWF final.

•

Suavizado para legibilidad: Ésta es la opción ideal para campos de texto estáticos. Al igual que el anterior, también requiere que se incrusten los contornos de los glyphs, de modo que aumenta el tamaño del archivo SWF final.

•

Suavizado personalizado: Esta opción nos conduce a un cuadro de diálogo en el que podemos configurar manualmente el grosor del contorno sobre el que se aplica el suavizado y la intensidad de ese suavizado. Salvo en casos excepcionales, no es necesario utilizar esta opción. Como las anteriores, también requiere que se incrusten los contornos de los glyphs, de modo que aumenta el tamaño del archivo SWF final.

Anteriormente hemos indicado que algunas opciones de suavizado requieren que se incrusten los contornos de los glyphs, pero ¿cómo se hace esto? En los campos estáticos los contornos se incrustan automáticamente (excepto si seleccionamos la opción de suavizado Utilizar fuentes del dispositivo), por lo que no tenemos que preocuparnos. En los campos dinámicos y de introducción de texto, es posible que aparezca el siguiente cuadro de diálogo cuando seleccionemos uno de los suavizados que requiere incrustación de glyphs.

En él pulsaríamos el botón Incorporar para acceder al cuadro de diálogo que se muestra a continuación. Si no apareciese el cuadro de diálogo anterior, siempre podríamos acceder directamente a este segundo pulsando el botón Incorporación de caracteres del panel Propiedades. En la zona superior de este cuadro de diálogo se nos ofrecen varios conjuntos predefinidos de caracteres para que elijamos los que queremos incorporar (para seleccionar más de un conjunto mantendremos pulsada la tecla Control mientras hacemos clic sobre cada uno de ellos). Tenga en cuenta que cuantos más glyphs incorpore, mayor será el tamaño del archivo SWF. Consecuentemente, es importante incrustar sólo los glyphs estrictamente necesarios; por ejemplo, si un campo de texto sólo va a contener números seleccionaremos el grupo Numerales. Un grupo que suele ser de utilidad en el caso del castellano es Latin I; este grupo habitualmente se lo sumaremos a Latin básico que contiene los caracteres más habituales (para seleccionar varios grupos sólo tenemos que mantener pulsada la tecla Control mientras hacemos clic sobre cada uno de ellos), pues añade los caracteres especiales de nuestro idioma (como letras con acentos, la u con diéresis y la ñ); los grupos Mayúsculas, Minúsculas y Latin Básico no incluyen estos caracteres particulares del castellano. Además de elegir un grupo predefinido, podemos aprovechar el campo Incluir 165

los siguientes caracteres para escribir directamente caracteres cuyos contornos deseemos incrustar. Una vez indicados los glyphs que queremos insertar, pulsaremos el botón Aceptar (aunque podremos regresar en cualquier momento posterior a este cuadro de diálogo para modificar nuestra decisión si fuera necesario). Advertencia Si en un campo de texto dinámico o de introducción de texto se utiliza un carácter cuyo glyph no ha sido incrustado mediante el cuadro de diálogo Incorporación de caracteres, ese carácter simplemente no se mostrará en la película final. Debemos ser extremadamente cuidadosos con este asunto; por ejemplo, si hemos incorporado sólo el grupo Mayúsculas para un campo de introducción de texto y el usuario final intenta escribir en minúsculas no podrá introducir ningún carácter.

Advertencia En Flash CS4 los caracteres incorporados se asignan a cada campo de texto, de modo que si tenemos dos campos de texto, aunque utilicen la misma fuente, deberemos incorporar los caracteres en ambos. Sin embargo, en Flash CS5 los caracteres se incorporan a nivel de película, de modo que están disponibles para todos los campos de texto. En la sección Carácter del cuadro de diálogo Propiedades también encontraremos los siguientes iconos: •

Seleccionable ( ): Si activamos este icono, el usuario final podrá arrastrar el ratón sobre los caracteres del campo para seleccionarlos y, por ejemplo, copiarlos al Portapapeles. Este icono no está disponible en los campos de introducción de texto pues, por naturaleza, estos campos deben ser forzosamente seleccionables.

•

Generar texto como HTML ( ): Si tenemos conocimientos de HTML este icono (no disponible para los campos estáticos) nos será de gran utilidad, pues nos permitirá utilizar elementos (etiquetas) HTML para configurar el formato del texto desde ActionScript a través de la propiedad htmlText de los campos de texto. No obstante, Flash sólo reconoce los siguientes elementos HTML: <a> (ancla o enlace), <b> (negrita), <font> (tipo de letra, tamaño y color), <img> (permite incorporar imágenes, sí imágenes, e incluso archivos SWF, sí ha leído bien, dentro del campo de texto), <i> (cursiva), <li> (elementos de lista con boliche; no numerados) y <p> (párrafo).

•

Mostrar borde alrededor del texto ( texto.

•

Alternar superíndice ( ) y Alternar subíndice ( ): Asigna a los caracteres seleccionados el formato de superíndice y subíndice, respectivamente. Este icono sólo está disponible para campos estáticos.

): Dibuja un borde de color negro alrededor del campo de

Información Flash también permite utilizar hojas de estilo en cascada CSS (Cascade Style Sheets) para aplicar formatos a los campos de texto, pero su uso se ha considerado que supera los objetivos de este curso.

166

En la sección Párrafo encontraremos los iconos habituales de cualquier editor de textos para establecer la alineación del texto ( ), su sangría ( ), su interlineado ( ) y sus márgenes ( y ), además de las siguientes opciones: •

Comportamiento: En este cuadro de lista podremos elegir cómo queremos que se produzcan los saltos de línea en los campos dinámicos y de introducción de texto. La opción Línea única coloca todo el texto en una sola línea ignorando cualquier pulsación de la tecla Intro (el campo se convierte automáticamente en desplazable). La opción Multilínea aplica saltos de línea automáticos, es decir, cuando se alcanza el ancho del campo se sigue introduciendo texto automáticamente en la línea siguiente (aunque no se haya pulsado la tecla Intro). La opción Multilínea sin ajuste sólo cambia de línea cuando se pulsa Intro. La opción Contraseña sustituye visualmente los caracteres del campo por asteriscos, pero la propiedad text contendrá siempre los caracteres reales.

•

Orientación: Esta opción sólo está disponible para los campos de texto estáticos y sirve para crear textos verticales, es decir, textos en los que los caracteres se escriben unos debajo de otros, en lugar de unos junto a otros. Podemos optar entre distribuir las líneas de izquierda a derecha, o de derecha a izquierda. Pulsando el icono Rotación ( grados.

) conseguiremos además que los caracteres se giren 90

Advertencia Si pensamos utilizar la propiedad htmlText para generar texto HTML en un campo deberemos tomar la precaución de configurar previamente el Comportamiento de ese campo con el valor Multilínea. De lo contrario, los elementos HTML serán ignorados. En la sección Opciones encontraremos los controles necesarios para crear hipervínculos en nuestros campos de texto, es decir, para redirigir al usuario a una página web cuando haga clic sobre el texto. En los campos de texto estáticos podemos asignar un vínculo distinto a cada conjunto de caracteres seleccionado, mientras que en los dinámicos el vínculo será único para todo el campo (en los campos de introducción de texto no tiene sentido la utilización de hipervínculos). Al escribir el destino del hipervínculo en el cuadro de texto Vínculo es esencial que no olvidemos incluir el indicativo de protocolo http:// (por ejemplo, http://www.google.es). En el cuadro de lista Destino podremos indicar si el destino del vínculo se mostrará en la misma ventana del navegador sustituyendo a nuestra película SWF (_self), si se abrirá en una ventana nueva (_blank), si se abrirá en el marco (frame) en el que se encuentra el archivo SWF sustituyéndolo (_parent), o si se abrirá en la misma ventana sustituyendo la página de marcos (frameset) completa (_top). En el caso de los campos de introducción de texto, la sección Opciones nos permite establecer una capacidad máxima de caracteres para el campo a través de la opción Caracteres máx (el valor 0 significa que no hay ninguna limitación).

6.2. Separación de textos En ciertos casos puede interesarnos descomponer un texto en sus caracteres individuales de modo que cada carácter se convierta en un campo de texto independiente (por ejemplo, para aplicar a cada uno de ellos una animación), o incluso renunciar al estatus especial de texto (por ejemplo, para poder aplicar una interpolación de forma). La respuesta a estas dos necesidades es el comando Modificar>Separar. Al ejecutar por primera vez este comando teniendo un campo de texto seleccionado, cada uno de sus caracteres se convertirá en un campo de texto independiente. Si ejecutamos una segunda vez el comando Modificar>Separar (o si lo ejecutamos por primera vez pero sobre un campo que contiene un único carácter), los caracteres perderán su estatus especial de texto y se convertirán en vulgares formas vectoriales que podremos modificar con las herramientas habituales (Pluma, Subselección, ...).

167

6.3. Filtros Aunque los filtros no son una cualidad exclusiva de los textos (de hecho, son aplicables a cualquier instancia de clip de película o botón), se ha decidido explicarlos aquí por su gran atractivo al aplicarlos a campos de texto estáticos. Un filtro es un efecto visual que podemos aplicar sobre un texto, una instancia de clip de película o un botón, como una sombra, un desenfoque o un bisel. Además, los filtros se pueden animar mediante interpolaciones de movimiento recurriendo al Editor de movimiento; por ejemplo, podríamos hacer que una sombra se desplazase simulando el cambio de posición del foco de iluminación. Para aprender a utilizar los filtros vamos a realizar un ejemplo práctico basado en uno de ellos, pero se recomienda al lector que pruebe y experimente por su cuenta para descubrir el aspecto de los demás filtros. Seguimos estos pasos: 1. Creamos un documento de Flash nuevo. 2. Activamos la herramienta Texto y, mediante el panel propiedades, indicamos que queremos crear un campo de texto estático y elegimos un tipo de letra, tamaño (preferiblemente grande) y color a nuestro gusto. 3. Hacemos clic sobre el escenario y escribimos nuestro nombre. 4. Si es necesario, activamos la herramienta Selección y arrastramos el nombre para colocarlo aproximadamente centrado en el escenario (recuerde que podemos centrarlo con precisión mediante el panel Alinear). 5. En la zona inferior izquierda de la sección Filtros del panel Propiedades (si no estuviera desplegada, haríamos clic sobre el triángulo que hay a su izquierda para mostrar su opciones), hacemos clic sobre el icono Añadir filtro. Se desplegará un menú con los filtros predefinidos incluidos en Flash. 6. Hacemos clic sobre la opción Desenfoque. Automáticamente nuestro nombre se verá afectado por un desenfoque gaussiano y se mostrarán los controles del filtro en el panel Propiedades, como muestra la siguiente figura.

7. Hacemos clic sobre el valor del control Desenfoque X y, sin soltar el botón del ratón, lo arrastramos hacia la derecha para incrementarlo, observando el aumento de intensidad del desenfoque en el escenario. Dejamos configurado el valor máximo (255), con el que el texto será ilegible. 8. El control Calidad está presente en todos los filtros y establece el rigor con el que Flash Player aplicará el filtro. Los filtros son una función muy intensiva desde el punto de vista del cálculo que requieren, y por este motivo la utilización de calidades altas o de varios filtros simultáneamente puede provocar saltos en la reproducción de la película. 168

9. Ahora vamos a aplicar un segundo filtro haciendo clic nuevamente sobre el icono Añadir filtro de la esquina inferior izquierda de la sección Filtros del panel Propiedades. En este caso seleccionamos la opción Sombra y comprobamos que su número de opciones en la sección Filtros es bastante superior a la del filtro Desenfoque. Vamos a modificar uno de estos controles aunque actualmente el efecto será prácticamente inapreciable por lo difuminado que está el texto; hacemos clic sobre el valor del control Distancia y escribimos 15. Truco Si en algún momento quisiéramos eliminar un filtro aplicado a un texto o instancia, bastaría con hacer clic sobre su nombre en la sección Filtros del panel Propiedades y pulsar el icono Eliminar filtro ( ). 10. Ahora vamos a animar estos dos filtros. Concretamente reduciremos el desenfoque hasta que el texto quede perfectamente enfocado (a lo largo de 30 fotogramas) y, a continuación, haremos rotar la sombra 360 grados (a lo largo de otros 30 fotogramas). Hacemos clic sobre el fotograma 60 de la línea de tiempo y pulsamos la tecla F5 para ampliar hasta él el único fotograma clave que contiene actualmente nuestra película. 11. Hacemos clic con el botón derecho del ratón sobre cualquier fotograma intermedio entre el 1 y el 60 y, en el menú contextual que se despliega, seleccionamos la opción Interpolación de movimiento. Los filtros sólo pueden animarse mediante interpolaciones de movimiento, y sus parámetros deben configurarse forzosamente a través del Editor de movimiento. 12. Accedemos al Editor de movimiento y, desplazándolo casi hasta el final, encontraremos la sección Filtros y, dentro de ella, las opciones de los filtros de desenfoque y sombra, como muestra la siguiente figura.

13. En la zona superior de la columna Gráfico del Editor de movimiento hacemos clic sobre el valor 30 para trasladar a esa posición el cabezal de reproducción (recuerde que la unidad didáctica 6 contiene información detallada sobre el manejo del Editor de movimiento). A continuación hacemos clic sobre el icono Añadir o quitar fotograma clave ( ) de la fila Desenfoque X para crear un fotograma clave de propiedad en el fotograma 30. Por último, hacemos clic sobre el valor que hay justo a la derecha de Desenfoque X del filtro Desenfoque (que debería ser 255; tenga cuidado porque el filtro Sombra también posee un control llamado Desenfoque X), escribimos 0 y pulsamos la tecla Intro para confirmarlo. Con esto habremos finalizado la fase de enfoque. 14. Ahora vamos a hacer que la sombra gire. Comenzamos haciendo clic sobre el icono Añadir o quitar fotograma clave ( ) de la fila Ángulo del filtro Sombra para crear también en él un fotograma clave de propiedad. A continuación, en la zona superior de la columna Gráfico del Editor de movimiento hacemos 169

clic sobre el valor 60 para trasladar a esa posición el cabezal de reproducción, y nuevamente hacemos clic sobre el icono Añadir o quitar fotograma clave ( ) de la fila Ángulo del filtro Sombra para crear en él un nuevo fotograma clave de propiedad. Por último, hacemos clic sobre el valor que hay a la izquierda de Ángulo (que debería ser 45), escribimos 360 y pulsamos la tecla Intro para confirmarlo. 15. Para finalizar el ejercicio duplicaremos la secuencia que hemos creado pero invirtiendo sus fotogramas clave, de modo que obtendremos una animación cíclica. Regresamos a la Línea de tiempo y como para invertir una secuencia es conveniente que el fotograma final sea un fotograma clave (no simplemente un fotograma clave de propiedad), hacemos clic sobre el fotograma 60 y pulsamos la tecla F6 para convertirlo en un fotograma clave. Después hacemos clic con el botón derecho del ratón sobre cualquier fotograma de la secuencia y, en el menú contextual que se despliega, seleccionamos la opción Copiar fotogramas. A continuación hacemos clic sobre el fotograma 61 con el botón derecho del ratón y, en el menú contextual que se despliega, seleccionamos la opción Pegar fotogramas para pegar la secuencia copiada detrás de la original. Por último, hacemos clic con el botón derecho del ratón sobre cualquier fotograma de la secuencia que acabamos de pegar y, en el menú contextual que se despliega, seleccionamos la opción Invertir fotogramas clave para invertir el orden de la secuencia. 16. Probamos la película pulsando la combinación de teclas Control+Intro para ver el resultado. A continuación, sólo en la versión en línea de este documento, se muestra la película final.

Información Adobe ha desarrollado un lenguaje de programación llamado Pixel Bender con el que podríamos diseñar nuestros propios filtros para Flash.

170

7. Doblaje y efectos especiales Flash es sin lugar a dudas la apuesta más segura (de hecho, casi la única) para cualquiera que desee difundir contenidos en formato de audio o vídeo a través de la Web. No en vano ha sido elegido por algunas de las empresas más representativas del sector audiovisual, como YouTube. No obstante, pese a las bondades de Flash en el manejo de este tipo de contenidos, nunca debemos perder de vista que los sonidos y los vídeos requieren por su propia naturaleza mucho espacio de almacenamiento, de modo que pueden suponer una gran carga para nuestras producciones (es decir, para nuestros archivos SWF), con la consiguiente lentitud en su transferencia a través de canales de ancho de banda limitado como Internet. La clave para hacer un uso apropiado de sonidos y vídeos es no abusar y aplicar correctamente los distintos codecs de compresión. Tanto los sonidos como los vídeos no suelen almacenarse "en bruto", sino comprimidos, y el método que se utiliza para comprimirlos se denomina codec. La mayoría de los codecs de compresión para audio y vídeo pertenecen a la categoría de codecs con pérdida, es decir, a los que degradan la calidad del contenido para reducir sus requisitos de almacenamiento. Por fortuna, en la actualidad los codecs con pérdida están muy evolucionados, logrando ratios de compresión importantes sin apenas degradar la calidad.

7.1. Sonido Básicamente existen dos formas de incorporar sonidos a una aplicación desarrollada con Flash: colocarlos en capas de la línea de tiempo (entiéndase línea de tiempo en sentido amplio, es decir, en la línea de tiempo principal, en la línea de tiempo de un símbolo de tipo clip de película, o en la línea de tiempo de un botón, aunque no en la de un gráfico) o incorporarlos mediante ActionScript. Para utilizar un sonido en la línea de tiempo previamente deberemos haberlo importado a la biblioteca. Por el contrario, mediante ActionScript podríamos utilizar tanto sonidos disponibles en la biblioteca como en archivos externos; por ejemplo, mediante ActionScript podríamos utilizar en la película un archivo MP3 aunque no estuviese importado en la biblioteca (pero ese archivo MP3 debería distribuirse junto con la película SWF). Dentro de Flash la reproducción de los sonidos puede sincronizarse de dos formas diferentes: en respuesta a eventos o en respuesta al movimiento del cabezal de reproducción. El primer caso se denomina sincronización de evento y, el segundo, sincronización de flujo.

7.1.1. Utilización de sonidos mediante la línea de tiempo Lo primero que necesitamos para poder utilizar un sonido en la línea de tiempo es importarlo mediante el comando Archivo>Importar>Importar a biblioteca. Flash es capaz de reconocer los formatos de archivos de audio más populares, como WAV, AIFF, MP3, AU y ASDN (éste es el formato de un editor de audio desarrollado por Adobe y llamado Soundbooth); pero no es compatible con el formato WMA. Una vez importado, podríamos hacer doble clic sobre su icono en la biblioteca para acceder a su cuadro de diálogo de propiedades, que será similar al que se muestra a continuación.

171

Información Al digitalizar un sonio para utilizarlo en informática en realidad lo que se hace es efectuar medidas sucesivas de su intensidad y almacenarlas. La velocidad a la que se realizan esas medidas se denomina frecuencia de muestreo, y el número de bits que se emplean para almacenar cada medida se denomina resolución de cuantificación. Obviamente, cuanto mayor sea la frecuencia de muestreo, mayor será la fidelidad de la digitalización respecto al sonido original. Igualmente ocurre con la resolución de cuantificación. Las frecuencias de muestreo típicas son 11.025 Hz, 22.050 Hz y 44.100 Hz. Las resoluciones de cuantificación más populares son 8 y 16 bits. Por otro lado, los sonidos digitales pueden ser monoaurales (o monocanales) o estereofónicos (utilizan dos canales (izquierdo y derecho), que se reproducen cada uno por un altavoz). Los sonidos estereofónicos ocupan más porque incluyen información de audio en dos canales. Generalmente en Flash se utilizan sonidos monoaurales porque prima la optimización de los requisitos de almacenamiento. Justo encima del cuadro de lista Compresión se nos indica cuál es la frecuencia, número de canales, resolución de cuantificación, duración y tamaño del sonido original, y con las opciones del cuadro de lista Compresión podremos especificar qué codec deseamos aplicar para comprimirlo. Al elegir cualquiera de estas opciones se mostrarán una serie de controles de configuración y, justo al final del cuadro de diálogo, el tamaño del sonido comprimido respecto al "bruto" expresado como un porcentaje. Las opciones de compresión disponibles son: •

Predeterminado: Aplicará el codec que tengamos configurado a través del comando Archivo>Configuración de publicación>Flash. Esta opción no muestra en la zona inferior el porcentaje de compresión, pues ésta no se lleva a cabo hasta que no generamos el archivo SWF.

•

ADPCM: El codec PCM (Pulse Code Modulation) pertenece a la categoría de codecs sin pérdida y es uno de los más antiguos que existe (por ejemplo, es el que se utiliza en las canciones grabadas en los discos CD de audio). El codec ADPCM (Adaptive PCM) es una evolución del anterior, pero que sí degrada la calidad, es decir, que pertenece a la categoría de codecs con pérdida. La compresión ADPCM se logra almacenando la diferencia entre una muestra de sonido y la siguiente (en lugar de almacenando cada muestra completa, como hace el codec PCM). Cuanto mayor sea el número de bits que se utilice para almacenar estas diferencias, menor será la degradación pero también menor será el ratio de compresión. Para configurar este codec Flash nos permite establecer la frecuencia de muestreo y el número de bits ADPCM. Este codec es ideal para sonidos muy cortos, del orden de 1 segundo.

•

MP3: Este codec ha supuesto una revolución para el mundo de la música, pues logra ratios de compresión espectaculares con muy poca degradación de calidad. Sus opciones de configuración son la Velocidad de bits y la Calidad. El codec MP3 comprime el audio en un flujo constante de datos, y el tamaño de ese flujo (su caudal) está controlado por la opción Velocidad de bits; cuando mayor sea este valor, menor será la degradación, pero menor será también el ratio de compresión. Respecto a la opción Calidad, su misión es elegir la "profundidad" del algoritmo empleado para la compresión; la elección de un valor u otro no se refleja en una diferencia de tamaño sustancial, pero sí en la sensación de degradación y en el tiempo que requiere la compresión. Generalmente elegiremos la opción Óptima, pues es la que proporciona más fidelidad y al fin y al cabo la compresión sólo hay que realizarla una vez al exportar la película, por lo que la diferencia de tiempo no importa demasiado. Si el sonido que hemos importado ya estaba en formato MP3, también se nos ofrece la posibilidad de activar la casilla Usar calidad de MP3 importado para utilizar directamente la misma configuración de compresión del sonido original (en este caso el sonido incorporado en nuestra película ocupará lo mismo que el archivo original, a pesar de que en la zona inferior del cuadro de diálogo se indique un ratio). El codec MP3 suele ser la opción ideal para todos los sonidos que duran más de un segundo.

172

•

Sin formato: Almacena el sonido "en bruto", es decir, sin comprimir. Esta opción sólo permite configurar la frecuencia de muestreo y debe utilizarse con mucha precaución, pues cada segundo de audio sin comprimir requiere aproximadamente entre 11 KB (a 11.025 Hz y 8 bits) y 90KB (a 44.100 Hz y 16 bits), que son cantidades relativamente altas para las conexiones típicas de Internet. Esta opción sólo se elegirá si realmente se requiere una fidelidad extrema.

•

Voz: Este codec aprovecha que la voz humana raramente supera los 3.000 Hz para proponer frecuencias de muestreo relativamente bajas (el teorema de Nyquist establece que para discretizar una señal se requiere al menos una frecuencia que sea el doble que la de la señal original), logrando ratios de compresión moderados. Sólo debe utilizarse con sonidos que contengan exclusivamente voz, pero aún así es posible que no proporcione mejores resultados que MP3. ¿Cómo saber si conviene utilizar este codec o MP3? Después de seleccionar cada uno de ellos pulse el botón Probar para escuchar su resultado y decida. Truco Los codecs ADPCM, Sin formato y Voz ofrecen la opción de preprocesado Convertir estéreo en mono. Generalmente activaremos esta casilla pues, como ya se comentó anteriormente, los sonidos monoaurales ocupan la mitad que los estereofónicos, pero en algunos casos (por ejemplo, si tenemos una conversación entre dos personas hablando cara a cara con las locuciones de cada una de ellas en canales diferentes (una en el izquierdo y otra en el derecho)) puede interesarnos mantener la información estereofónica para lograr cierta sensación espacial en la reproducción (que cuando habla la persona de la izquierda el sonido nos llegue por el altavoz izquierdo, y que cuando habla la de la derecha nos llegue por el altavoz derecho).

Advertencia Si no tiene experiencia previa en el manejo de audio digital, probablemente se esté preguntando qué ajustes son los ideales para cada codec. No existe una respuesta única, pues lo ideal es probar con varios, pero generalmente para aplicaciones Flash que se van a reproducir a través de Internet se obtienen resultados aceptables con 11.025 Hz y 16 bits en ADPCM, valores inferiores a 96 kbps en MP3, o 8.000 Hz en Voz. En el caso de MP3, si no elige una tasa superior o igual a 20 kbps, el sonido se convertirá automáticamente a monoaural (de modo que la información de los canales izquierdo y derecho se combinará en uno solo). Al importar un sonido a la biblioteca, la propia información del sonido queda incorporada al archivo FLA, de modo que si se modificase (o incluso borrase) el archivo de sonido original, no afectaría en absoluto a la versión almacenada en Flash. No obstante, en cualquier momento podemos reimportar la información de sonido desde el archivo original simplemente pulsando el botón Actualizar. Por ejemplo, al desarrollar proyectos con Flash es frecuente que las locuciones se graben casi al final; entretanto se utilizan archivos de audio que contienen grabaciones ficticias; una vez disponibles las locuciones definitivas, se utilizan para sobrescribir los archivos ficticios y simplemente hay que actualizar los símbolos de sonido mediante el botón Actualizar. Advertencia Hay que tener mucho cuidado cuando se sustituyen sonidos ficticios por reales, especialmente si se han sincronizado con el modo Flujo (posteriormente se explica con detalle qué es la sincronización de flujo), pues es posible que la duración de los sonidos no coincida exactamente y que esto invalide muchas horas de trabajo de sincronización.

173

Otra cuestión interesante es que un sonido importado a la biblioteca puede reutilizarse tantas veces como sea necesario en distintas fases de la película, como cualquier otro símbolo. De hecho, es aconsejable reutilizar los sonidos en la medida de lo posible (en lugar de utilizar sonidos diferentes) para mantener el tamaño final de la producción dentro de unos límites razonables. Truco Flash incluye una interesante colección de sonidos a la que podemos acceder mediante el comando Ventana>Bibliotecas comunes>Sonidos. Para hacer uso de uno de estos sonidos sólo tendremos que arrastrarlo desde la biblioteca común a la biblioteca de nuestra película (o directamente sobre el escenario teniendo activo el fotograma en el que queremos reproducirlo; esto hará que se incluya automáticamente en la biblioteca de nuestra película). Una vez configurado la compresión del sonido importado estamos en disposición de poder usarlo en nuestra película (en realidad, las propiedades de los sonidos pueden modificarse en cualquier momento, incluso después de utilizarlos en la línea de tiempo). El procedimiento general para utilizar un sonido en la línea de tiempo es el siguiente: 1. Creamos una capa nueva. Los sonidos pueden incorporarse a capas que ya contienen otros contenidos, pero no se considera una "buena praxis". 2. Creamos un fotograma clave (haciendo clic sobre el fotograma y pulsando la tecla F6) en la posición donde se desee que comience la reproducción del sonido. 3. En el panel Propiedades, dentro de la sección Sonido (véase la figura siguiente), desplegamos el cuadro de lista Nombre y seleccionamos el sonido que queremos reproducir a partir del fotograma clave creado en el paso anterior. Dentro del fotograma de la línea de tiempo aparecerá una línea, que en realidad es el sonograma (representación gráfica) del sonido que hemos elegido (cuando se trata de un sonido estéreo no se muestra cana canal por separado, sino el sonograma combinado de ambos). 4. Desplegamos el cuadro de lista Sinc y seleccionamos una de las opciones Evento, Inicio o Flujo. Evento e Inicio harán que el sonido se reproduzca por completo en cuanto el cabezal de reproducción llegue al fotograma clave (a menos que el cabezal de reproducción siga avanzando y llegue a otro fotograma clave en el que se haya seleccionado la opción Detener para este sonido, como se explica en el paso siguiente). La diferencia entre ellas es que si el cabezal de reproducción volviese a pasar por ese fotograma clave y aún no hubiese concluido la reproducción del sonido, Evento iniciaría una nueva reproducción solapada con la aún pendiente de terminar, mientras que Inicio no iniciaría una nueva reproducción del sonido. La opción Flujo sólo mantendrá la reproducción del sonido durante los fotogramas estáticos que creemos a continuación del fotograma clave. Pero ésta no es la principal diferencia entre Flujo y Evento/Inicio; la diferencia esencial es que con Flujo el sonido comienza a reproducirse aunque no se haya descargado completamente (los archivos SWF pueden empezar a reproducirse en el ordenador del usuario final aunque no se hayan terminado de descargar completamente), mientras que con Evento/Inicio el sonido no se reproducirá a menos que se haya descargado completamente, es decir, la película se detiene hasta que el sonido se ha descargado completamente y después lo reproduce. Además, los sonidos de flujo toman el control del cabezal de reproducción, de modo que si durante la reproducción se agota la cantidad de sonido descargado, la película se para, y si una animación es demasiado "pesada" y no puede representarse al ritmo de avance del sonido es posible que Flash se salte fotogramas para dar prioridad al sonido. En resumen, las opciones Evento/Inicio son ideales para sonidos que queramos reproducir de forma completa independientemente de qué camino siga el cabezal de reproducción, mientras que la opción Flujo sólo la 174

utilizaremos cuando queramos vincular la reproducción de un sonido al movimiento del cabezal de reproducción. Por ejemplo, para reproducir un efecto cuando el usuario pulse un botón lo lógico será utilizar sincronización de tipo Evento/Inicio, pero para que un sonido se sincronice con una animación (por ejemplo, para que una narración se sincronice con los movimientos de la boca de un personaje animado) lo mejor será utilizar la opción Flujo. Información Utilizando sincronización de flujo sabremos qué porción del sonido se estará reproduciendo en cada fotograma de la línea de animación; mientras que utilizando sincronización de evento sabremos que el sonido se reproducirá completamente independientemente de lo que haga el cabezal de reproducción. 5. En este paso determinaremos durante cuántos fotogramas se reproducirá el sonido, y el procedimiento es diferente para los sonidos de flujo y los de evento. Los sonidos de evento se reproducen completamente independientemente de lo que haga el cabezal de reproducción (incluso si éste se queda parado en un fotograma), pero también podemos terminarlos antes de su final creando un nuevo fotograma clave en la capa en la posición que nos interese y asignándole la sincronización Detener en el panel propiedades. Por el contrario, los sonidos de flujo se reproducen exclusivamente durante el fotograma clave y los fotogramas estáticos que le añadamos (recuerde que para extender un fotograma clave con fotogramas estáticos basta con hacer clic en la línea de tiempo sobre el fotograma de su capa hasta el que deseemos extenderlo y pulsar la tecla F5). 6. Por último, configuraremos cuántas repeticiones del sonido queremos reproducir mediante el cuadro de lista que hay debajo de Sinc. Podemos optar entre repetir el sonido indefinidamente o configurarlo para que se repita un número determinado de veces. Un sonido de evento con repetición indefinida seguirá reproduciéndose una y otra vez hasta que el cabezal entre en un fotograma clave configurado con sincronización de tipo Detener. Por el contrario, un sonido de flujo con repetición indefinida seguirá repitiéndose sólo mientras el cabezal de reproducción se encuentre dentro de los fotogramas estáticos creados en el paso anterior. Advertencia Una confusión habitual es considerar que los sonidos de flujo configurados con repetición indefinida son adecuados para crear bandas sonoras de fondo. Nada más alejado de la realidad. Cada repetición del sonido de flujo se almacena en el archivo SWF de forma independiente, de modo que el tamaño final del archivo puede ser muy grande. Por el contrario, los sonidos de evento se almacenan en el archivo SWF final una sola vez independientemente de cuántas veces se repitan. Si desea crear una banda sonora de fondo para su película, utilice un sonido de evento corto configurado con repetición indefinida.

7.1.1.1. Efectos de sonido Para lograr tamaños finales comedidos al utilizar sonido ya hemos comentado que es conveniente reutilizar (repetir) cada sonido al máximo, pero obviamente esto puede provocar hastío en el usuario final. Un modo de paliarlo es recurrir a los efectos de sonido de Flash, que son sencillos filtros de envolvente (es decir, filtros que modulan el volumen del sonido a lo largo de su reproducción) que nos permiten introducir variaciones en los sonidos de modo que no suenen tan repetitivos. Los efectos de sonido también pueden ser muy útiles en las animaciones, pues como se pueden configurar por separado para cada canal de los sonidos estereofónicos nos permiten lograr cierta sensación espacial de audio. Por ejemplo, si un automóvil cruza la pantalla de izquierda a derecha podemos hacer que inicialmente su sonido sólo suene por el canal izquierdo y que se vaya desvaneciendo poco a poco ese canal mientras va tomando fuerza el derecho. 175

Desplegando el cuadro de lista Efecto del panel Propiedades podremos elegir entre los siguientes efectos predeterminados: •

Canal izquierdo: Sólo reproduce la información de audio del canal izquierdo, y lo hace sólo por el altavoz izquierdo (no reproduce la información del canal izquierdo simultáneamente por ambos canales).

•

Canal derecho: Sólo reproduce la información de audio del canal derecho, y lo hace sólo por el altavoz derecho (no reproduce la información del canal izquierdo simultáneamente por ambos canales). Advertencia

Al reproducir un sonido monoaural, como sólo tiene un canal, la información de ese canal se reproduce idénticamente por ambos altavoces. •

Reducción progresiva a la derecha: Al principio el canal izquierdo suena a todo volumen y el derecho está silenciado, pero a medida que transcurre la reproducción el canal izquierdo va perdiendo intensidad y el derecho la va ganando, hasta que al final el canal derecho suena a todo volumen y el izquierdo está silenciado. En otras palabras, la intensidad del sonido pasa del altavoz izquierdo al derecho.

•

Reducción progresiva a la izquierda: Al principio el canal derecho suena a todo volumen y el izquierdo está silenciado, pero a medida que transcurre la reproducción el canal derecho va perdiendo intensidad y el izquierdo la va ganando, hasta que al final el canal izquierdo suena a todo volumen y el derecho está silenciado. En otras palabras, la intensidad del sonido pasa del altavoz derecho al izquierdo.

•

Aumento progresivo: Inicialmente el volumen es nulo y va aumentando poco a poco hasta alcanzar el nivel máximo. Se aplica por igual a ambos canales en el caso de los sonidos estereofónicos.

•

Desvanecimiento: Inicialmente el volumen es máximo y va reduciéndose poco a poco hasta anularse. Se aplica por igual a ambos canales en el caso de los sonidos estereofónicos.

Además de utilizar estos efectos predeterminados también podemos crear nuestras propias envolventes ) que hay a la derecha del cuadro de lista haciendo clic sobre el icono Editar envoltura de sonido ( Efecto (en el panel Propiedades). Este icono nos conducirá hasta el cuadro de diálogo que se muestra a continuación. En este cuadro de diálogo se muestra el sonograma de ambos canales (el izquierdo arriba y el derecho abajo) y, dentro de ellos, una línea que representa la envolvente. Si hemos mantenido seleccionada la opción Ninguno del cuadro de lista Efecto esta envolvente será inicialmente horizontal y estará ubicada en la zona superior (como muestra la imagen anterior), pero si teníamos seleccionado otro efecto se mostrará su correspondiente envolvente, que podrá servirnos de punto de partida para crear nuestra propia versión personalizada. Por ejemplo, en la siguiente figura se muestra la envolvente del efecto Reducción progresiva a la derecha. 176

En la zona inferior izquierda del cuadro de diálogo contamos con iconos para reproducir y detener el sonido con el efecto de la envolvente ya aplicado. Mientras que en la zona inferior derecha disponemos de iconos para reducir (

) y ampliar (

escala temporal ( ) y la de fotogramas ( útil para aplicar efectos a sonidos de flujo.

) la escala temporal de los sonogramas, y alternar entre la ). Utilizar la escala de fotogramas puede ser especialmente

La envolvente se representa como un trazo con puntos de control (los puntos de control están marcados con cuadrados). Podemos hacer clic sobre cualquiera de los puntos de control existentes y arrastrarlo verticalmente para cambiar su posición; cuanto más arriba situemos un punto de control, mayor será la intensidad del volumen en ese instante, mientras que si lo situamos justo encima del borde inferior (no de la línea horizontal central que marca la intensidad cero en el sonograma) estaremos anulando el volumen en ese instante. Para crear nuevos puntos de control sobre la línea de la envolvente basta con hacer clic sobre ella y, sin soltar el botón del ratón, arrastrarlo verticalmente. En cada envolvente podemos crear hasta 8 puntos de control. Otra función muy útil del cuadro de diálogo Editar envoltura es la posibilidad de "recortar" los sonidos. Es frecuente que los sonidos contengan pequeños silencios al principio y al final que pueden dificultar su sincronización, o que dispongamos de una grabación larga de la que queremos reproducir diferentes fragmentos en diferentes fotogramas; en estos casos podremos establecer el punto de inicio y fin de la instancia del sonido para eliminar los silencios o reproducir exactamente los fragmentos que nos interesen. Para establecer los puntos de inicio y fin tendremos que arrastrar los marcadores rectangulares ( ) que hay en la zona intermedia entre los sonogramas de ambos canales.

7.1.2. Utilización de sonidos mediante ActionScript Pueden plantearse situaciones en las que no sea posible ni/o aconsejable utilizar sonidos desde la línea de tiempo. Como ejemplo, imaginemos los siguientes escenarios: •

Una aplicación en la que el usuario final puede decidir entre utilizar locuciones con voz de mujer o de hombre (por ejemplo, una aplicación de guiado GPS). Utilizando la línea de tiempo prácticamente tendríamos que crear dos aplicaciones completas y cargar ambos sonidos, de modo que el tamaño del archivo SWF final sería considerable.

•

Un juego del estilo Space Invaders en el que al aniquilar cada nave enemiga se reproduce un sonido. Como las naves se han generado dinámicamente con ActionScript, no es posible asignarles un sonido en la línea de tiempo. 177

En ambos casos la solución pasa por utilizar los sonidos a través de ActionScript. Las posibilidades de audio de ActionScript son realmente amplias (incluso es capaz de analizar fragmentos de sonido por transformada rápida de Fourier, y esto nos abre las puertas a eliminar ruidos, realizar reconocimiento de voz, corregir entonaciones en aplicaciones de idioma, ...), pero en este curso nos limitaremos a aprender cómo reproducir sonidos procedentes de archivos externos a la aplicación, y sonidos ya presentes en la biblioteca de la aplicación.

7.1.2.1. Sonidos procedentes de archivos MP3 externos Si el sonido que queremos reproducir mediante ActionScript se encuentra en un archivo externo tendremos que cargar ese archivo mediante la clase URLRequest, pasar ese archivo a un objeto de la clase Sound para poder hacer uso de los métodos/eventos específicos de los sonidos, controlar que el archivo ha terminado de descargarse antes de intentar reproducirlo mediante el evento Event.COMPLETE de la clase Sound, y finalmente reproducirlo mediante el método Play() de la propia clase Sound. También podemos saber cuándo ha concluido la reproducción del sonido aprovechando el evento Event.SOUND_COMPLETE de la clase SoundChannel; en este caso tendremos que asignar el método play() del sonido a una variable de tipo SoundChannel. La clase SoundChannel dispone de un único método, llamado stop(), que nos permite detener la reproducción del sonido. Advertencia ActionScript sólo puede utilizar archivos de sonido externos que utilicen el formato MP3. Si intentamos reproducir un sonido antes de haberlo descargado completamente puede producirse un error. Por ejemplo, imagine que nos solicitan que desarrollemos una aplicación en la que el usuario pueda elegir entre escuchar una locución con voz de hombre o voz de mujer. En el fotograma 1 simplemente colocaríamos dos botones, uno para elegir voz de hombre y otro para elegir voz de mujer, y el código necesario para iniciar la descarga del archivo de locución solicitado por el usuario (masculina.mp3 o femenina.mp3) y saltar al fotograma 5. En los fotogramas del 5 al 10 crearíamos una animación que se reproduciría cíclicamente hasta que la locución correspondiente terminara de descargarse y, a continuación, saltase al fotograma 11, en el que se reproduciría la locución y se le asignaría un oyente que estuviese al tanto de su finalización para saltar al fotograma 15, en el que simplemente mostraríamos un mensaje de agradecimiento al usuario. Suponiendo que los botones tuviesen los nombres de instancia boton_hombre y boton_mujer, el código que tendríamos que colocar en el fotograma 1 sería el siguiente (el habitual para gestionar botones): stop(); var voz:String; boton_hombre.addEventListener(MouseEvent.CLICK,pulsadoHombre); boton_mujer.addEventListener(MouseEvent.CLICK,pulsadoMujer); function pulsadoHombre(evento:MouseEvent) { voz="masculina"; gotoAndPlay(5); } function pulsadoMujer(evento:MouseEvent) { voz="femenina"; gotoAndPlay(5); }

178

En el fotograma 5 colocaríamos el siguiente código para iniciar la descarga del sonido: var archivo:URLRequest = new URLRequest(voz+".mp3"); var locucion:Sound = new Sound(archivo); locucion.addEventListener(Event.COMPLETE, descargaTerminada); function descargaTerminada(event:Event){ gotoAndStop(11); } En el fotograma 10 colocaríamos la siguiente instrucción para devolver el cabezal de reproducción al fotograma 6 y mantener así en reproducción la animación de espera: gotoAndPlay(6); En el fotograma 11, al que nos conduciría el oyente descargaTerminada una vez finalizada la descarga, insertaríamos el siguiente código para reproducir el sonido y saltar al fotograma 15 cuando concluya su reproducción. Observe cómo se hace uso de la clase SoundChannel para poder detectar la finalización de la reproducción. var canal:SoundChannel = locucion.play(); canal.addEventListener(Event.SOUND_COMPLETE, reproduccionFinalizada); function reproduccionFinalizada(event:Event){ gotoAndStop(15); }

7.1.2.2. Sonidos ya disponibles en la biblioteca

Si el sonido que queremos reproducir ya ha sido importado a la biblioteca podremos prescindir de las precauciones explicadas en la sección anterior para comprobar si se ha descargado completamente. En este caso simplemente asignaremos un nombre de clase al símbolo de sonido que nos permita referirnos a él desde ActionScript, crearemos un objeto de esa clase y ejecutaremos directamente su método play() para reproducirlo, o bien se lo asignaremos a un objeto de la clase SoundChannel para poder detectar cuándo ha terminado de reproducirse utilizando el evento SOUND_COMPLETE exactamente igual que se explicó en la sección anterior. Por ejemplo, imagine que nos solicitan desarrollar una aplicación que reproduzca un sonido y que sólo muestre un botón. Cuando el usuario haga clic sobre ese botón, la reproducción del sonido debe detenerse, y cuando vuelva a hacer clic sobre él se iniciará de nuevo. Los pasos a seguir serían los siguientes: 1. Creamos un archivo de Flash nuevo. 2. Importamos el archivo de sonido a la biblioteca mediante el comando Archivo>Importar>Importar a biblioteca. 3. En el panel Biblioteca, hacemos doble clic sobre el icono del sonido que acabamos de importar para acceder a su cuadro de diálogo Propiedades. 4. Si esta visible el botón Avanzado en la esquina inferior derecha, lo pulsamos para desplegar las propiedades avanzadas del actor, como muestra la siguiente figura.

179

5. Activamos la casilla Exportar para ActionScript para que se habiliten los cuadros de texto de la zona inferior. En el cuadro de texto Clase, escribimos, por ejemplo, miSonido. El sonido de la biblioteca es ahora una clase, de la que puedo crear tantos objetos como desee mediante ActionScript. En el cuadro de texto Clase base debemos mantener el valor flash.media.Sound, pues de esta clase se heredan todos los métodos, propiedades y eventos del sonido. Pulsamos el botón Aceptar. Si aparece un mensaje de aviso sobre la ruta de la clase, simplemente lo ignoramos pulsando el botón Aceptar. 6. Colocamos un botón sobre el escenario (por ejemplo, podemos obtenerlo de la biblioteca común de botones: Ventana>Bibliotecas comunes>Botones) y, en el panel Propiedades, escribimos miBoton en el cuadro de texto <Nombre de instancia> (en la zona superior), para poder referirnos al botón desde ActionScript. 7. Creamos una nueva capa en la línea de tiempo llamada Acciones. 8. Hacemos clic sobre el fotograma de la capa Acciones que acabamos de crear y pulsamos la tecla F9 para acceder al panel Acciones, en el que introducimos el siguiente código: stop(); var sonidoDetenido:Boolean; sonidoDetenido=false; var sonido:miSonido=new miSonido(); var canal:SoundChannel=new SoundChannel(); canal=sonido.play(); miBoton.addEventListener(MouseEvent.CLICK,detener); function detener(event:MouseEvent) { if (sonidoDetenido==true) { canal=sonido.play(); sonidoDetenido=false; } else { canal.stop(); 180

}

sonidoDetenido=true;

} 9. Probamos la película para verificar que efectivamente el sonido se detiene y reinicia con cada pulsación del botón. ¿Y si quisiéramos que el sonido no se reiniciase, sino que continuase reproduciéndose desde el punto en el que lo detuvimos? En ese caso tendríamos que recurrir a la propiedad position de la clase SoundChannel, que contiene la posición que se está reproduciendo expresada en milisegundos, y así poder pasarle esa posición al método play(). Bastaría con introducir los elementos marcados en negrita en el siguiente listado. stop(); var posicion:Number; var sonidoDetenido:Boolean; sonidoDetenido=false; var sonido:miSonido=new miSonido(); var canal:SoundChannel=new SoundChannel(); canal=sonido.play(); miBoton.addEventListener(MouseEvent.CLICK,detener); function detener(event:MouseEvent) { if (sonidoDetenido==true) { canal=sonido.play(posicion); sonidoDetenido=false; } else { posicion=canal.position; canal.stop(); sonidoDetenido=true; } }

7.2. Vídeo

Cuando en el año 2002 Macromedia presentó en Flash 6 la posibilidad de reproducir vídeos, la comunidad de diseñadores Web exclamó al unísono: ¡Por fin! Los vídeos son secuencias de imágenes estáticas que se presentan una detrás de otra a suficiente velocidad como para que el cerebro humano las perciba como un movimiento fluido; en cierta forma, son parecidos a las animaciones fotograma a fotograma que hemos estudiado. Sin embargo, en un vídeo cada fotograma es una imagen de mapa de bits, y ya sabemos lo "pesados" (cuánto espacio de almacenamiento requieren) que son los mapas de bits. Por este motivo, reproducir vídeos a través de un canal de ancho limitado como Internet es una tarea formidable. Por supuesto sería imposible transferir estos vídeos imagen a imagen, pues se requeriría mucho tiempo de transferencia, y tampoco eran válidos los sistemas de compresión tradicionales (que estaban pensados fundamentalmente para reproducir vídeos desde discos CD, que tienen un ancho de banda muy superior al de Internet); había que desarrollar un sistema nuevo de compresión, y ese sistema se materializó en el codec Sorenson Spark. Desde entonces no han dejado de producirse mejoras en el campo de los codecs de compresión de vídeo para Internet, y la versión Flash CS4 apuesta fuerte fundamentalmente por estos dos: •

On2 VP6: Éste es el codec más flexible para Flash y el más utilizado (por ejemplo, es el que utilizan los vídeos con extensión FLV, como la mayoría de los que encontramos en YouTube). Además de ofrecer una calidad muy razonable, permite utilizar canales alfa, es decir, incluir transparencias en los vídeos, y también integrar en ellos puntos cue (los puntos cue son marcas que se introducen a lo largo de la duración del vídeo y que pueden ser detectadas mediante ActionScript para producir cierta tarea 181

cuando se alcanzan esas marcas; por ejemplo, para mostrar textos concretos relacionados con lo que se está mostrando en el vídeo). •

H.264: Este codec sigue la especificación MPEG-4 apartado 10, y es la opción elegida por los principales proveedores de contenidos para los vídeos de alta definición (por ejemplo, es uno de los codecs escogidos por la tecnología Blu-ray). Su calidad supera a la de On2 VP6, pero carece de su flexibilidad (no admite canales alfa ni puntos cue). La extensión de los vídeos codificados con este codec debe ser F4V para que Flash los reconozca. Advertencia Los vídeos generalmente no se encuentran en formato FLV ni F4V, sino que debemos convertirlos a estos formatos. Por ejemplo, la mayoría de los vídeos obtenidos con las videocámaras disponibles actualmente en el mercado utilizan los codecs AVI DV o MPEG-2. Para realizar esta conversión Flash viene acompañado de la aplicación Adobe Media Encoder, que es capaz de convertir estos formatos y muchos otros a los que sí reconoce Flash. Información Se ha considerado fuera de los objetivos de este curso explicar cómo crear canales alfa en vídeos y cómo incrustar en ellos puntos cue. No obstante, debe saber que para realizar cualquiera de estas dos tareas necesitará software adicional a Flash; por ejemplo, Adobe After Effects.

Para utilizar un vídeo en una de nuestras aplicaciones de Flash podemos incrustarlo en el archivo SWF o bien mantenerlo como un archivo independiente y simplemente cargarlo desde el archivo SWF. Incrustar el vídeo tiene numerosas desventajas; por citar algunas: el tamaño del archivo SWF crece notablemente y además no puede empezar a reproducirse hasta que se ha descargado completamente, es muy probable que el audio y la imagen vayan perdiendo la sincronización a lo largo de la reproducción, especialmente si la duración del vídeo es larga, si hubiese que introducir una modificación en el vídeo tendríamos que importarlo de nuevo, tendremos que configurar nuestra película para que tenga exactamente la misma velocidad de fotogramas que el vídeo, ... No obstante, para utilizar vídeos pequeños puede ser una buena opción, pues resulta más cómodo manejar un único archivo SWF que tener en cuenta un archivo SWF y todos los archivos de vídeo independiente. Por el contrario, los vídeos que se mantienen en archivos independientes al SWF nos ofrecen una cualidad muy valiosa: pueden descargarse de forma progresiva (esto quiere decir que el vídeo puede empezar a reproducirse aunque no se haya descargado completamente). Advertencia Si alojamos nuestros vídeos en un servidor HTTP normal, como Apache (que es uno de los más populares y, por ejemplo, el utilizado por EducaMadrid) podremos aprovechar la descarga progresiva de los vídeos. Pero Adobe ofrece un servidor especial, denominado Flash Media Server, que no sólo ofrece descarga progresiva, sino también emisión en tiempo real; en otras palabras, el usuario final puede ver el vídeo al mismo tiempo que está siendo grabado (en vivo y en directo). Existen tres métodos para incorporar vídeo a una aplicación de Flash: •

Reproducirlo a través del componente FLVPlayback: Un componente de Flash es una funcionalidad adicional a las que ofrece Flash en su núcleo, es decir, un añadido que puede haber sido desarrollado directamente por Adobe o por terceros. Los componentes son, en su esencia, símbolos de tipo clip de película dotados del código ActionScript necesario para realizar tareas especiales (como crear un cuadro de texto desplazable), y que nos ofrecen a nosotros (como diseñadores) ciertos parámetros de 182

configuración. En la versión comercial de Flash se incluyen dos tipos de componentes: los diseñados para crear formularios en aplicaciones de Flash y los relacionados con la reproducción de vídeo (como FLVPlayback). Utilizar el componente FLVPlayback es la forma más sencilla de mantener el vídeo fuera del archivo SWF (y, por consiguiente, de aprovechar las ventajas de la descarga progresiva), pero con una funcionalidad básica (reproducir, parar, rebobinar, ...). No es sencillo interactuar con el vídeo; por ejemplo, que al pulsar un botón el vídeo se desplace hasta una determinada posición. •

Incrustarlo en la línea de tiempo: Ya se ha advertido de los inconvenientes que tiene incrustar el vídeo en el archivo SWF (el principal es que tenemos que renunciar a la descarga progresiva), pero este método nos ofrece un poco más de flexibilidad que el anterior porque podemos aprovechar nuestros conocimientos de ActionScript sobre el control de Clips de película para interactuar con el vídeo (por ejemplo, para desplazarlo hasta una posición concreta).

•

Cargarlo y controlarlo mediante ActionScript: Éste es posiblemente el método más complejo (aunque no muy diferente al que ya hemos estudiado sobre el control de sonidos con ActionScript), pero también el único que nos ofrece una flexibilidad total sobre el control del vídeo. Información La descarga progresiva sólo puede aprovecharse reproduciendo el vídeo mediante el componente FLVPlayback o cargándolo mediante ActionScript.

7.2.1. El componente FLVPlayback Para entender el funcionamiento del componente FLVPlayback vamos a realizar un ejemplo que consistirá en ofrecer dos botones sobre el escenario para que el usuario pueda reproducir un vídeo relacionado con el principio de Arquímedes (arquimedes.flv) u otro relacionado con la teoría de la relatividad de Einstein (einstein.flv). Estos dos vídeos puede encontrarlos como recursos adjuntos a esta unidad didáctica. Al iniciar la película simplemente detendremos la reproducción en el fotograma y, según se pulse un botón u otro, enviaremos el cabezal de reproducción a los fotogramas 5 o 10, en los que se encontrarán respectivamente los componentes FLVPlayback para el vídeo de Arquímedes y Einstein. Seguiremos estos pasos: 1. Creamos un documento de Flash nuevo. 2. Los botones podríamos crearlos manualmente, pero en este caso los tomaremos prestados de las bibliotecas comunes. Ejecutamos el comando Paneles>Bibliotecas comunes>Botones. Desplegamos la categoría buttons rounded stripes haciendo clic sobre el triángulo que hay a su izquierda y, por ejemplo, arrastramos el botón (no el clip de película; puede distinguirlos por su icono) rounded stripes aqua hasta la zona inferior izquierda del escenario. Ya podemos cerrar el panel de la biblioteca común de botones porque no lo necesitaremos más. 3. Observaremos que en la biblioteca de nuestra película se han insertado el botón y el correspondiente clip de película (que simplemente se utiliza para el borde del botón). Vamos a comenzar modificando el texto del botón, y para ello tendremos que acceder a su modo de edición haciendo doble clic sobre el icono que hay a su izquierda (a la izquierda del botón, no del clip de película) en la biblioteca; al hacerlo comprobaremos que en el camino de migas se indica que estamos editando el clip rounded stripes aqua (que aparecerá a la derecha de Escena 1). En la línea de tiempo observamos que la capa text (que es precisamente la que contiene el texto) está bloqueada (aparece un icono de candado a la derecha de su nombre); mientras mantenemos pulsada la tecla Alt hacemos clic sobre el icono de candado de esta capa para desbloquearla y, a la vez, bloquear todas las demás. Hacemos clic sobre el fotograma Reposo (el primero) de la capa text para activarlo, seleccionamos la herramienta Texto y hacemos clic en el escenario sobre el texto Enter. Borramos ese texto (por ejemplo utilizando las teclas Retroceso o Supr) y escribimos en su lugar Arquímedes (no pulse Intro al final). A continuación, hacemos clic sobre el fotograma Presionado (el tercero) de la capa text y repetimos la misma operación para sustituir el texto Enter por 183

Arquímedes. Por último, en el camino de migas, hacemos clic sobre Escena 1 para regresar al modo de edición de la línea de tiempo principal. 4. En la biblioteca, hacemos doble clic sobre el nombre (no sobre el icono) del botón rounded stripes aqua, escribimos arquimedes y pulsamos Intro para cambiarlo. Ahora duplicaremos este botón para crear el correspondiente a Einstein. En la biblioteca hacemos clic con el botón derecho del ratón sobre el botón arquimedes y, en el menú contextual que se despliega, seleccionamos la opción Duplicar. Aparecerá un cuadro de diálogo en el que escribiremos einstein para asignar este nombre al botón duplicado y pulsaremos el botón Aceptar. 5. Repetimos el mismo paso explicado en el paso 3 para sustituir el texto Arquímedes del botón einstein por el texto Einstein. 6. Arrastramos el botón einstein desde la biblioteca hasta la zona inferior derecha del escenario. Si lo deseamos, podemos recurrir al panel Alinear (Control+K) para alinear ambos botones. 7. En el escenario, hacemos clic sobre el botón Arquímedes para seleccionarlo, activamos el panel Propiedades, y escribimos botonArquimedes en el cuadro de texto <Nombre de instancia>. Recuerde que este nombre será el que nos permita referirnos al botón mediante ActionScript. 8. Repetimos el mismo paso anterior con el botón Einstein para asignarle el nombre de instancia botonEinstein. 9. Ahora vamos a vincular los vídeos (recuerde que al utilizar el componente FLVPlayback no es necesario incrustar los vídeos, sino que se cargan desde el archivo externo de forma progresiva). Comenzamos creando una capa nueva haciendo clic sobre el icono Nueva capa de la zona inferior izquierda de la línea de tiempo. Hacemos doble clic sobre la capa que acabamos de crear y escribimos videos para cambiar su nombre. Hacemos clic sobre el fotograma 5 de la capa videos para activarlo, pulsamos la tecla F6 para convertirlo en un fotograma clave, y ejecutamos el comando Archivo>Importar>Importar vídeo, que nos conducirá al cuadro de diálogo que se muestra a continuación.

184

10. Pulsamos el botón Examinar para seleccionar el vídeo arquimedes.flv. 11. Mantenemos activada la opción Cargar vídeo externo con componente de reproducción, que es precisamente la responsable de que el vídeo se vaya a reproducir a través del componente FLVPlayback. 12. Pulsamos el botón Siguiente para acceder al siguiente paso del asistente de importación (si nuestro vídeo no se encontrase en formato FLV o F4V, este mismo asistente nos ofrecería la posibilidad de convertirlo mediante Adobe Media Encoder), en el que deberemos elegir un aspecto o skin para el componente. El skin contiene los botones de control del vídeo (reproducir, parar, ver a pantalla completa, ...). Desplegamos el cuadro de lista Aspecto y seleccionamos una de las opciones disponibles. El aspecto de la opción seleccionada se muestra en la zona superior. Básicamente existen dos categorías de skins, aquéllas cuyo nombre empieza por "SkinOver", que muestran los controles sobre el vídeo, y aquéllas cuyo nombre empieza por "SkinUnder", que muestran los controles debajo del vídeo. Por ejemplo, elegimos la opción SkinUnderPlayFullscreen. Observe que en este segundo paso del asistente también podríamos cambiar el Color del skin. 13. Pulsamos el botón Siguiente para acceder al último paso del asistente, en el que se nos advierte (y esto es muy importante) que al publicar nuestro proyecto SWF deberemos colocar en su misma carpeta el archivo SWF del aspecto que hemos elegido (volveremos sobre este asunto al final del ejercicio). Simplemente pulsamos el botón Finalizar. Flash importará el vídeo y lo mostrará centrado (el vídeo, no la combinación del vídeo más el skin) en el escenario. 14. Ahora hacemos clic sobre el fotograma 10 de la capa videos para activarlo, pulsamos F7 para convertirlo en un fotograma clave vacío, y ejecutamos el comando Archivo>Importar>Importar vídeo para repetir el mismo procedimiento anterior pero seleccionando en este caso el vídeo einstein.flv. 15. En este paso extenderemos la capa de los botones (la capa 1) hasta el fotograma 10. Hacemos clic sobre el fotograma 10 de la capa de los botones y pulsamos la tecla F5; el resultado debe ser similar al que muestra la siguiente figura (quizás necesite desplazar los botones si quedan solapados por el vídeo).

16. En realidad, para reproducir un vídeo mediante el componente FLVPlayback no es necesario escribir ni una sola línea de código ActionScript, pues el propio skin ofrece los botones para controlarlo. El código ActionScript que vamos a utilizar en este ejemplo es para gestionar la pulsación de los botones botonArquimedes y botonEinstein (no tiene ninguna relación con el control de los vídeos). Creamos una capa nueva en la línea de tiempo y le asignamos el nombre acciones. 185

17. Hacemos clic sobre el fotograma 1 de la capa acciones y pulsamos la tecla F9 para acceder al panel Acciones, en el que introducimos el siguiente código: stop(); botonArquimedes.addEventListener(MouseEvent.CLICK,principioArquimedes); botonEinstein.addEventListener(MouseEvent.CLICK,teoriaRelatividad); function principioArquimedes(event:MouseEvent){ gotoAndStop(5); } function teoriaRelatividad(event:MouseEvent){ gotoAndStop(10); } 18. ¿Recuerda que comentamos que los componentes ofrecen parámetros de control al diseñador? ¿No le extraña que los vídeos hayan empezado a reproducirse automáticamente? Hacemos clic sobre el fotograma 5 de la capa videos y, a continuación, en el escenario, hacemos clic sobre el vídeo. En el panel Propiedades se indica que es una instancia de FLVPlayback, y al lado encontramos este icono ( ). Al pulsarlo accederemos al panel Inspector de componentes (véase la figura siguiente), que nos ofrece los parámetros de configuración del componente. El parámetro responsable de que los vídeos se reproduzcan automáticamente es autoPlay, que contiene el valor true. Haciendo clic sobre ese true y, a continuación, sobre la flecha que aparece a su derecha podríamos sustituirlo por false, logrando así que el vídeo no se reprodujese automáticamente. Otros parámetros interesantes de FLVPlayback son preview que sirve para elegir el fotograma que se mostrará dentro del componente cuando el vídeo aún no ha empezado a reproducirse, y skinAutoHide que permite ocultar el skin (y sus botones) y mostrarlo automáticamente cuando el usuario coloque el puntero sobre el vídeo. Pruebe a configurar estos tres parámetros en ambos vídeos para que los vídeos no se reproduzcan automáticamente, muestren inicialmente un fotograma de previsualización y oculten automáticamente el skin. 19. Guardamos la película mediante el comando Archivo>Guardar recordando en qué carpeta lo hacemos. 20. Probamos la película pulsando la combinación Control+Intro para verificar que efectivamente se reproduce cada uno de los vídeos cuando pulsamos el botón correspondiente. Si hacemos clic sobre el botón del skin para ver el vídeo a pantalla completa no ocurrirá así; esto es normal porque ese botón sólo funciona cuando el vídeo se visualiza dentro de un navegador web (no en la versión independiente de Flash Player), pero hay otro detalle a tener en cuenta para que funcione. Cerramos la ventana de prueba. Al probar la película se habrá compilado el proyecto generando el archivo SWF. 21. Ejecutamos el comando Archivo>Configuración de publicación y, en el cuadro de diálogo que aparece, activamos la ficha HTML y seleccionamos la opción Sólo Flash - Permitir pantalla completa en el cuadro de lista Plantilla; esta opción es la necesaria para que funcione el botón "ver a pantalla completa" del skin. Pulsamos Aceptar para cerrar el cuadro de diálogo y, a continuación, ejecutamos el comando Archivo>Vista previa de la publicación>HTML para ver nuestra película centro de nuestro navegador web predeterminado y comprobar que ahora sí funciona el botón "ver a pantalla completa". 22. Accedemos a la carpeta en la que guardamos el archivo FLA mediante el explorador de archivos (Mi PC). En esta carpeta encontraremos el archivo FLA, el archivo SWF, y un tercer archivo con el que quizás no contásemos: SkinUnderPlayFullscreen.swf. Éste es el archivo responsable del skin, y cuando publiquemos el proyecto en un servidor web deberemos incluirlo en la misma carpeta que el archivo SWF y los archivos FLV. Aprovechamos también para comprobar que el tamaño del archivo SWF es realmente pequeño (menos de 100 kilobytes), gracias a que los vídeos no se han incrustado en él.

186

7.2.2. Incrustar vídeo en una línea de tiempo Para aprender a incrustar vídeos en la línea de tiempo realizaremos un ejemplo que consistirá en reproducir un vídeo en el que se pronuncian y deletrean en inglés los nombres de diversos animales (animaleseningles.flv); además, ofreceremos botones que permitan acceder directamente al fragmento correspondiente a cada animal, reproducir, detener y reiniciar el vídeo desde el principio. Seguiremos estos pasos: 1. Creamos una aplicación de Flash nueva y nos aseguramos (Modificar>Documento) de que sus dimensiones son 550 x 400 píxeles, y de que su velocidad de fotogramas por segundo es 12. 2. Ejecutamos el comando Archivo>Importar>Importar vídeo y, en el cuadro de diálogo que aparece pulsamos el botón Examinar para seleccionar el vídeo animaleseningles.flv. Para que el vídeo se incruste en la línea de tiempo activamos la opción Incorporar FLV en SWF y reproducir en la línea de tiempo, y pulsamos el botón Siguiente. 3. En el segundo paso del asistente ya no podemos elegir un skin como en el caso anterior, sino que se nos ofrecen opciones relacionadas con la incrustación (véase la figura siguiente). Por ejemplo, en el cuadro de diálogo Tipo de símbolo podríamos elegir incrustar el vídeo en un clip de película o en un gráfico en lugar de en la línea de tiempo principal. No obstante, mantenemos la configuración predeterminada que nos ofrece el cuadro de diálogo (la que se muestra en la siguiente figura), y pulsamos el botón Siguiente.

4. En el último paso del asistente simplemente pulsamos el botón Finalizar. El vídeo tardará unos instantes en cargarse y, finalmente, se mostrará centrado en el escenario. Si nos fijamos en la línea de tiempo comprobaremos que el vídeo ocupa 4063 fotogramas, y también comprobamos que el vídeo se ha insertado en la biblioteca. 5. Antes de continuar vamos a guardar nuestro proyectos (Flash puede volverse muy inestable al trabajar con líneas de tiempo tan largas, especialmente en equipos poco potentes). Ejecutamos el comando Archivo>Guardar para guardar nuestro proyecto FLA, por ejemplo, con el nombre animaleseningles.fla. No es necesario que lo guardemos en la misma carpeta en la que se encuentra el vídeo, pues en realidad éste ya está incrustado en el FLA y no necesita para nada el archivo externo FLV del vídeo. Aunque no se indique expresamente en los siguientes pasos, recuerde guardar su proyecto frecuentemente a lo largo de este ejemplo. 6. Probamos la película pulsando la combinación de tecla Control+Intro (la generación del SWF requerirá alrededor de un minuto). En seguida comprobaremos que el audio y la imagen empiezan a divergir, es decir, que pierden la sincronía (la imagen va retrasándose respecto al audio). Esto se debe a que la velocidad de fotogramas de nuestra película no coincide con la del vídeo. Cerramos la ventana de prueba. Ejecutamos el comando Modificar>Documento, configuramos la velocidad de fotogramas por segundo de nuestro proyecto a 24.99, y volvemos a pulsar Control+Intro para realizar una nueva prueba. En este caso 187

la reproducción está perfectamente sincronizada, pero ¿cómo sabemos cuál es la velocidad del vídeo? Existen multitud de aplicaciones gratuitas para averiguarlo; por citar algunas: Media Coder y la versión gratuita de Leawo FLV Converter. Cerramos la ventana de prueba. 7. Ahora vamos a crear una capa nueva en la que introduciremos etiquetas de fotograma para marcar el punto en el que comienza la locución correspondiente a cada animal. Creamos una capa nueva pulsando el icono Nueva capa de la zona inferior izquierda de la línea de tiempo, hacemos doble clic sobre el nombre de la capa que acabamos de crear, escribimos etiquetas y pulsamos Intro para cambiarlo. Hacemos clic sobre el fotograma 280 de la capa etiquetas, pulsamos F7 para convertirlo en un fotograma clave vacío y, en el cuadro de texto Nombre del panel Propiedades, escribimos vaca (preste atención al uso de mayúsculas, minúsculas y acentos). Hacemos clic sobre el fotograma 435 de la capa etiquetas, pulsamos F7 para convertirlo en un fotograma clave vacío y, en el cuadro de texto Nombre del panel Propiedades, escribimos bufalo. Repetimos este mismo procedimiento para cada uno de los animales utilizando como referencia la tabla siguiente (los números de fotograma se han obtenido simplemente desplazándose por la línea de tiempo, arrastrando el cabezal de reproducción con el ratón, para comprobar en qué punto se producía la transición de un animal a otro). EtiquetaFotograma Etiqueta

Fotograma

vaca

280

leon

2085

bufalo 435

tigre

2235

cabra

585

elefante

2385

liebre

735

oso

2535

perro

885

hipopotamo2685

gato

1035

canguro

2895

caballo 1185

rinoceronte 3045

cerdo

1335

zorro

3245

buey

1485

mono

3395

camello 1635

leopardo

3545

burro

1785

jirafa

3695

ciervo

1935

cebra

3845

8. Nuestro siguiente objetivo será crear los botones que permitan acceder directamente al fragmento correspondiente a cada animal. Obviamente, estos botones tendrán que estar identificados de algún modo para diferenciarse entre sí, por ejemplo con el nombre del animal. Si recuerda el ejercicio de la sección anterior en el que utilizamos dos botones (uno para Arquímedes y otro para Einstein), tuvimos que duplicar el símbolo de botón y modificar cada uno por separado. Con dos botones esto no es un gran esfuerzo, pero con veinticuatro que tendríamos que crear ahora no sólo es un esfuerzo considerable, sino también un método poco eficiente, pues terminaríamos teniendo en la biblioteca 24 botones casi idénticos. En este caso seguiremos una estrategia diferente; crearemos dos columnas de texto estático, una a cada lado del vídeo, con los nombres de 12 animales en cada una de ellas; después crearemos un botón con fondo semitransparente y lo duplicaremos 24 veces colocándolo sobre el nombre de cada animal. Comenzamos creando una capa nueva y asignándole el nombre texto. 9. Hacemos clic sobre el fotograma 1 de la capa texto que creamos en el paso anterior, activamos la herramienta Texto y la configuramos (mediante el panel Propiedades) para crear un texto estático, elegimos la fuente de dispositivo _Sans (de este modo ahorramos espacio de almacenamiento pues no es necesario incrustar los caracteres; recuerde que ya tenemos un vídeo de tamaño importante en la línea de 188

tiempo y esto nos obliga a ser austeros hasta el extremo para intentar no alargar más el tiempo de espera en la descarga) con un tamaño de 14 puntos y color negro, nos aseguramos de que está seleccionado el suavizado Utilizar fuente del dispositivo, y elegimos que el texto se centre. El aspecto del panel Propiedades debe ser similar al que se muestra a continuación.

10. En el escenario, hacemos clic en la zona superior del espacio en blanco que queda a la izquierda del vídeo y empezamos a escribir el nombre de los 12 primeros animales con todos los caracteres en mayúscula (para que todos tengan una altura similar y no tengamos que preocuparnos de que los trazos ascendentes/descendentes de algunas letras puedan quedar fuera del botón translúcido que después les superpondremos), y pulsando Intro después de cada uno de ellos para ubicarlos en líneas independientes. Sólo nos saltaremos un poco del orden para incorporar a esta columna los nombres que nos parezcan más largos, como "HIPOPOTAMO" y "RINOCERONTE" (posteriormente corregiremos esta licencia que nos permitirá conocer cuál es el ancho máximo que necesitamos para el botón). Comprobará que los textos quedan bastante apretados verticalmente; esto lo resolveremos cambiando el interlineado. Haga clic delante de la "V" de VACA y, sin soltar el botón del ratón, arrástrelo hasta colocar el puntero detrás de la "O" de ciervo para seleccionar todo el texto. En el panel propiedades, escriba 17 en el campo correspondiente a la opción Espacio interlineal ( ). El resultado debe ser similar al que muestra la siguiente figura (es probable que tenga que activar la herramienta Selección y arrastrar el texto para centrarlo correctamente). Antes de continuar, averiguamos a través del panel Propiedades cuál es el ancho y el alto de este campo de texto (unos 108 píxeles de ancho según indica la opción W, y unos 378 píxeles de alto según indica la opción H), pues nos servirán de referencia para crear el botón.

189

11. En este paso vamos a crear el botón. En la zona inferior izquierda del panel Biblioteca, hacemos clic sobre el icono Nuevo símbolo y, en el cuadro de diálogo que aparece, escribimos boton como nombre, elegimos que sea de tipo Botón y pulsamos el botón Aceptar, que nos conducirá al modo de edición del botón. Activamos la herramienta Rectángulo, elegimos no utilizar color de trazo, y configuramos un color de relleno translúcido (Alfa) al 50 por ciento (para que el texto sea visible a través del botón). Observe que el rectángulo se ha asignado en la línea de tiempo al fotograma del estado Reposo. Hacemos clic sobre el escenario y arrastramos el ratón para dibujar un rectángulo; no importa su tamaño, pues lo corregiremos posteriormente. Activamos la herramienta Selección y hacemos clic sobre el rectángulo que acabamos de dibujar para seleccionarlo. En el panel Propiedades (asegúrese de que el icono con forma de cadena que hay en la sección Posición y tamaño está roto para que Flash no intente mantener la relación de aspecto del botón inicial) escribimos 108 en la opción W y 28 (este valor se ha obtenido de dividir 378 píxeles de alto entre 12 botones y mermándolo un poco para que quede cierta separación entre los botones) en la opción H. Accedemos al panel Alinear (por ejemplo, pulsando la combinación de teclas Control+K) y alineamos el botón horizontal y verticalmente en el centro del punto de registro. En la línea de tiempo hacemos clic sobre el fotograma del estado Sobre y pulsamos F6 para copiar exactamente el contenido del fotograma anterior. A continuación, por ejemplo mediante la herramienta Cubo de pintura, cambiamos el color de relleno del rectángulo en el estado Sobre. Repetimos exactamente esta misma operación (pulsar F6 y cambiar el color del rectángulo) con los estado Presionado y Zona activa (en el caso de Zona Activa no es necesario cambiar el color pues realmente este estado no es visible, sino que indica cuál es la zona "sensible" del botón). Una vez finalizada la creación del botón, hacemos clic sobre Escena 1 en el camino de migas para regresar al modo de edición de la escena principal. 12. Bloqueamos la capa Texto haciendo clic sobre la casilla de la columna encabezada por un candado en la línea de tiempo para evitar modificarla inadvertidamente. 13. Creamos una capa nueva y le asignamos el nombre botones. 14. Arrastramos el símbolo boton desde la biblioteca al escenario colocándolo centrado sobre la palabra "VACA". Con el botón aún seleccionado pulsamos 11 veces la combinación de teclas Control+D para crear 11 duplicados suyos. Los duplicados irán colocándose ligeramente desplazados hacia la derecha y hacia abajo. Con la herramienta Selección activada, hacemos clic sobre el último duplicado y lo arrastramos hasta colocarlo centrado verticalmente sobre la palabra "CIERVO", pero dejándolo desplazado hacia la derecha respecto al botón original, como muestra la siguiente figura.

15. En la línea de tiempo, hacemos clic sobre el fotograma 1 de la capa botones para que se seleccione todo su contenido en el escenario, es decir, para que se seleccionen los 12 botones. En el panel Alinear desactivamos el icono En escena si fuera necesario y hacemos clic sobre los iconos Alinear borde izquierdo

190

( ) y Distribuir verticalmente respecto al centro ( izquierdo, como muestra la siguiente figura.

). ¡Voilà! Ya tenemos todos los botones del lado

16. A continuación, aprovechando que tenemos todos los botones aún seleccionados, pulsamos la combinación de teclas Control+D para duplicarlos, hacemos clic sobre cualquiera de los botones duplicados y, sin soltar el botón del ratón, lo arrastramos hasta colocar este segundo grupo de botones a la derecha del vídeo. Desbloqueamos la capa texto haciendo clic sobre su icono de candado en la línea de tiempo y bloqueamos la capa botones. Hacemos clic sobre el fotograma 1 de la capa texto para seleccionar el campo estático que contiene los nombres de los animales, pulsamos la combinación de teclas Control+D para duplicarlo, y arrastramos el campo duplicado hacia la derecha alineándolo con los botones que actualmente están vacíos. Activamos la herramienta Texto, hacemos clic delante de la "V" de "VACA" del campo duplicado y, sin soltar el botón del ratón, arrastramos el puntero hasta colocarlo detrás de la "O" de "CIERVO" de modo que todo el texto quede seleccionado. A continuación escribimos los nombres de los animales de la segunda columna (recuerde escribir todos los caracteres en mayúscula y pulsar Intro después de cada uno de ellos). Aprovechando que tenemos activa la herramienta Texto, hacemos clic sobre la columna de nombres de la izquierda y corregimos la licencia que introdujimos en el paso 10. El resultado debe ser similar al que muestra la figura siguiente.

17. Ahora vamos a asignar nombres de instancia a los botones. Comenzamos bloqueando nuevamente la capa texto y desbloqueando la capa botones. Activamos la herramienta Selección, hacemos clic sobre el primero de los botones de la columna de la izquierda y, en el panel Propiedades, escribimos vaca en el cuadro de texto <Nombre de instancia>. Observe que hemos utilizado para el nombre de la instancia exactamente el mismo texto que utilizamos para la etiqueta del fotograma en el que empezaba la secuencia de la vaca (recuerde que escribimos esas etiquetas con todos los caracteres en minúscula y sin acentos). Repetimos este mismo procedimiento para asignar el nombre de instancia correspondiente a 191

cada botón. Posteriormente comprobaremos que la "astucia" de hacer coincidir el nombre de las instancias de los botones con los de las etiquetas de los fotogramas nos permitirá crear una única función oyente para todos los botones en lugar de una para cada uno de ellos (como tuvimos que hacer, por ejemplo, en el caso de Arquímedes y Einstein). 18. Ya sólo nos faltan los botones para reproducir, detener y reiniciar el vídeo. Estos botones los tomaremos de la biblioteca común de botones. Ejecutamos el comando Ventana>Bibliotecas comunes>Botones y, en el panel de la biblioteca común de botones, desplegamos la colección playback rounded (está al final de la lista) haciendo clic sobre el triángulo que hay a su izquierda. Arrastramos los botones rounded green back, rounded green play y rounded green pause sobre el escenario, que se asignarán a la capa botones pues es la última en la que hemos estado trabajando. Asignamos a estos botones los nombres de instancia reiniciar, reproducir y detener, respectivamente, mediante el panel Propiedades. El resultado debe ser similar al que muestra la siguiente figura.

19. Por fin ha llegado el momento que todos estábamos esperando, el de crear la capa acciones en la que escribiremos el código ActionScript necesario para que nuestra aplicación funcione. Creamos una capa nueva y le asignamos el nombre acciones. Hacemos clic sobre el fotograma 1 de esta nueva capa y pulsamos la tecla F9 para acceder al panel Acciones, en el que introducimos el siguiente código (observe cómo la "astucia" a la que aludimos anteriormente nos ha permitido gestionar todos los botones de animales con un solo oyente gracias a que la clase MouseEvent (a la que pertenece la variable evento) posee la propiedad target, que devuelve una referencia al elemento (botón) que ha recibido ese evento, de modo que podemos acceder a su nombre instancia mediante la propiedad name): stop(); reiniciar.addEventListener(MouseEvent.CLICK,reiniciarVideo); function reiniciarVideo(evento:MouseEvent){ gotoAndPlay(2); } reproducir.addEventListener(MouseEvent.CLICK,reproducirVideo); function reproducirVideo(evento:MouseEvent){ play(); } detener.addEventListener(MouseEvent.CLICK,detenerVideo); function detenerVideo(evento:MouseEvent){ stop(); } vaca.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); bufalo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); cabra.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); liebre.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); 192

perro.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); gato.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); caballo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); cerdo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); buey.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); camello.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); burro.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); ciervo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); leon.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); tigre.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); elefante.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); oso.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); hipopotamo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); canguro.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); rinoceronte.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); zorro.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); mono.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); leopardo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); jirafa.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); cebra.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); function saltarAEtiqueta(evento:MouseEvent){ gotoAndPlay(evento.target.name); } 20. Probamos la película pulsando Control+Intro para verificar que todo funciona como debe (la compilación del proyecto requerirá aproximadamente un minuto debido al tamaño del vídeo). A continuación, sólo en la versión en línea de este documento, se ha incluido el resultado de este ejercicio.

7.2.3. Carga y gestión de vídeos mediante ActionScript La reproducción de vídeo mediante ActionScript es la opción más versátil de todas, pero a la vez la más compleja. Para reproducir un vídeo mediante ActionScript tendremos que hacer uso de tres clases: •

NetConnection: Esta clase sólo la utilizaremos para indicar si vamos a recibir el vídeo a través de un servidor HTTP normal (que es el caso que nos interesa), como Apache, en cuyo caso deberemos efectuar una llamada a su método connect con el valor null, o a través de un servidor especial de tipo

193

Flash Media Server (que recuerde que permiten transmitir vídeo de forma progresiva y además en tiempo real). •

NetStream: Esta clase es la que realmente accede al archivo de vídeo e "interpreta" los datos recibidos como pertenecientes a un vídeo, pero no es capaz de mostrarlos sobre el escenario. Esta clase es la que nos ofrece métodos para indicar qué vídeo queremos cargar (play), reproducirlo (resume), detenerlo (pause) o acceder a una posición concreta dentro de él (seek).

•

Video: Esta clase simplemente representa en el escenario las imágenes que recibe del objeto NetStream. En el siguiente código se ilustra el procedimiento completo de conexión, transmisión y visualización de un vídeo:

var conexion:NetConnection = new NetConnection(); conexion.connect(null); var transmision:NetStream = new NetStream(conexion); transmision.play("arquimedes.flv"); transmision.addEventListener(AsyncErrorEvent.ASYNC_ERROR, errorMetadatos); function errorMetadatos(event:AsyncErrorEvent):void{ //No hacemos nada } var visualizacion:Video = new Video(); visualizacion.attachNetStream(transmision); addChild(visualizacion); La parte más "oscura" de este código es el oyente errorMetadatos. Cuando se recibe un vídeo se genera espontáneamente un evento que indica que el vídeo viene acompañado de metadatos (datos que no corresponden a imagen ni audio, sino que describen el contenido del vídeo o indican algunas de sus propiedades (duración, formato, ...)). Este evento debe ser atendido, pues en caso contrario se genera un error, y eso es precisamente lo que hace el oyente errorMetadatos, lo atiende aunque no hace nada con él. Otro detalle de interés es que el objeto de tipo Video, una vez relacionado con el objeto NetStream mediante el método attachNetStream (es decir, una vez que le decimos al objeto de tipo Video qué vídeo es el que debe mostrar), debe añadirse a la lista de visualización mediante el método addChild. La lista de visualización es la colección de contenidos que están visibles en cada momento sobre el escenario. Información Cuando cargamos un vídeo mediante ActionScript su reproducción se inicia en cuanto se han recibido suficientes datos como para presumir que podrá realizarse su reproducción completa sin incurrir en pausas a la espera de la llegada de nuevos datos. A continuación vamos a modificar el ejemplo de la sección anterior para lograr lo mismo pero utilizando ActionScript, es decir, sin tener que incrustar el vídeo en el archivo SWF. Seguimos estos pasos: 1. Abrimos el archivo resultante del ejercicio anterior y lo guardamos con otro nombre diferente. 2. Borramos la Capa 1, que es la que contenía el vídeo incrustado, y la capa Etiquetas, pues ya no la necesitaremos (la clase NetStream nos permite acceder a posiciones concretas de un vídeo mediante el método seek() indicando su valor temporal en segundos). 3. Hacemos clic sobre el fotograma 1 de la capa acciones y pulsamos la tecla F9 si no está ya visible el panel Acciones para acceder al script que contiene. Introducimos el código siguiente (las diferencias respecto al código de la sección anterior se han resaltado en negrita). La principal diferencia es que hemos 194

utilizado un array para almacenar las posiciones en segundos de las secuencias correspondientes a cada animal (estas posiciones se han obtenido con un reproductor de archivos FLV; por ejemplo, Adobe Media Player). Es interesante destacar que este array no utiliza índices numéricos, sino textuales; este tipo de array se denomina asociativo. Puede observar que su construcción es exactamente igual a la de los arrays con índices numéricos que hemos venido utilizando habitualmente. var conexion:NetConnection=new NetConnection(); conexion.connect(null); var transmision:NetStream=new NetStream(conexion); transmision.play("animaleseningles.flv"); transmision.addEventListener(AsyncErrorEvent.ASYNC_ERROR,errorMetadatos); function errorMetadatos(event:AsyncErrorEvent):void { } var visualizacion:Video=new Video(); visualizacion.attachNetStream(transmision); visualizacion.x=115; visualizacion.y=80.5; addChild(visualizacion); var etiquetas:Array=new Array(); etiquetas["vaca"]=11; etiquetas["bufalo"]=17; etiquetas["cabra"]=23; etiquetas["liebre"]=29; etiquetas["perro"]=35; etiquetas["gato"]=41; etiquetas["caballo"]=47; etiquetas["cerdo"]=53; etiquetas["buey"]=59; etiquetas["camello"]=65; etiquetas["burro"]=71; etiquetas["ciervo"]=77; etiquetas["leon"]=83; etiquetas["tigre"]=89; etiquetas["elefante"]=95; etiquetas["oso"]=101; etiquetas["hipopotamo"]=107; etiquetas["canguro"]=115; etiquetas["rinoceronte"]=121; etiquetas["zorro"]=129; etiquetas["mono"]=135; etiquetas["leopardo"]=142; etiquetas["jirafa"]=147; etiquetas["cebra"]=153; stop(); reiniciar.addEventListener(MouseEvent.CLICK,reiniciarVideo); function reiniciarVideo(evento:MouseEvent) { transmision.seek(0); } reproducir.addEventListener(MouseEvent.CLICK,reproducirVideo); function reproducirVideo(evento:MouseEvent) { transmision.resume(); } 195

detener.addEventListener(MouseEvent.CLICK,detenerVideo); function detenerVideo(evento:MouseEvent) { transmision.pause(); } vaca.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); bufalo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); cabra.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); liebre.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); perro.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); gato.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); caballo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); cerdo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); buey.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); camello.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); burro.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); ciervo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); leon.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); tigre.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); elefante.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); oso.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); hipopotamo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); canguro.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); rinoceronte.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); zorro.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); mono.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); leopardo.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); jirafa.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); cebra.addEventListener(MouseEvent.CLICK,saltarAEtiqueta); function saltarAEtiqueta(evento:MouseEvent) { transmision.seek(etiquetas[evento.target.name]); } 4. Probamos la película pulsando Control+Intro para verificar que todo funciona correctamente. 5. Si nos fijamos en el tamaño del archivo SWF comprobaremos que es realmente pequeño, pero sin embargo el FLA es bastante grande porque aún tiene el vídeo incrustado en la biblioteca. Seleccionamos el actor del vídeo en la biblioteca y lo borramos haciendo clic sobre el icono Eliminar (que se encuentra en la zona inferior). Guardamos nuevamente el archivo FLA y comprobamos que ahora su tamaño es mucho menor. Advertencia Al publicar el archivo SWF debemos tener en cuenta que deberemos colocar en la misma carpeta el archivo FLV. Además, como ActionScript descarga el vídeo progresivamente, existe el riesgo de que el usuario haga clic sobre el botón de un animal cuya secuencia aún no se ha descargado; en tal caso, simplemente no ocurriría nada (el vídeo continuaría con su reproducción normal). La ventaja de descargar el vídeo progresivamente con ActionScript o FLVPlayback es que el usuario final puede empezar a verlo aunque no se haya descargado completamente.

196

8. El gran estreno 8.1. Probar una película Habitualmente hemos venido utilizando la combinación de teclas Control+Intro (equivalente al comando Control>Probar película), que nos permite previsualizar nuestros trabajos dentro de una ventana, pero sin prestar atención a las opciones adicionales que nos ofrece esa ventana. Si nos fijamos en su parte superior (véase la figura siguiente), descubriremos una barra de menús, y más concretamente nos centraremos en el menú Ver. Para exponer las posibilidades de este menú vamos a realizar un sencillo ejemplo basado en el resultado de la tarea no evaluable del bloque 8 "Reproducción de vídeo incrustado en la línea de tiempo". Si no realizó esta tarea, encontrará el archivo FLA correspondiente como recurso adjunto a este bloque y tendrá que descargarlo; en caso contrario podrá trabajar sobre su propia versión sin necesidad de descargar ningún archivo adicional. 1. Abrimos el archivo animaleseningles_final.fla dentro del entorno de edición de Flash. 2. Pulsamos la combinación de teclas Control+Intro para probar la película. La compilación requerirá cierto tiempo debido al tamaño del vídeo incrustado. Finalmente aparecerá la ventana que se muestra a continuación. 3. Ejecutamos el comando Ver>Visor de anchos de banda, que mostrará en la parte superior un gráfico de caudal o flujo de datos y otros datos de interés. Véase la figura siguiente. 4. En la zona de la izquierda, además de las características de la película (como su tamaño y velocidad de reproducción), encontraremos un dato muy interesante: Carga previa. Éste es el tiempo (o el número de fotogramas que podrían reproducirse en ese tiempo con la velocidad de fotograma configurada) que Flash estima que sería necesario para cargar suficiente información del archivo SWF y poderlo reproducir de principio a fin sin pausar. Pero ¿en qué se basa este cálculo? Se basa en la velocidad de descarga que tengamos configurada mediante el comando Ver>Configuración de descarga. Conviene realizar pruebas con los valores más precarios que esperemos encontrar entre nuestra audiencia; por ejemplo, aunque nosotros dispongamos de una maravillosa conexión ADSL, si sospechamos que ciertos miembros de nuestra audiencia siguen utilizando modems telefónicos, seleccionaremos las opciones 28.8K o 56K. Al variar este valor comprobaremos que se recalcula automáticamente el tiempo de Carga previa. 5. El gráfico de barras que se muestra a la derecha también está basado en el valor de Configuración de descarga. En este gráfico cada barra representa 197

un fotograma, pero existe una línea roja horizontal que marca el límite máximo que puede alcanzarse con la velocidad de descarga configurada actualmente. ¿Significa esto que si una barra supera esa línea roja ocasionará una pausa en la reproducción? No necesariamente. Para dar respuesta exacta a esta cuestión debemos tener en cuenta dos aspectos; por un lado el gráfico se realiza sin tener en cuenta las interacciones que podemos haber programado mediante ActionScript y que pueden suponer pausas en la ejecución (por ejemplo, esperar a que el usuario haga clic sobre un botón) pero no en la descargar (el navegador no descansa en su labor de descarga del SWF); y por otro lado el gráfico puede representar el caudal o flujo acumulado en cada fotograma o simplemente el tamaño de cada fotograma (la elección de un modo u otro se realiza, respectivamente, a través de las opciones Gráfico por flujo y Gráfico fotograma por fotograma del menú Ver). Si elegimos la representación de flujo y la reproducción de la película es continua (sin pausas de programación), en cuanto alguna barra supere la línea roja indicará una posible interrupción, pues en ese fotograma el caudal de datos que debería haberse descargado estaría por encima del que realmente se ha descargado; por el contrario, en la representación de tamaño de fotogramas no es posible predecir a priori dónde pueden generarse interrupciones, pues aunque un fotograma supere la línea roja es posible que los anteriores sean menores y el tiempo sobrante se haya aprovechado para descargar esos datos adicionales. En resumen, el modo de flujo nos sirve para detectar fotogramas potencialmente peligrosos desde el punto de vista de la continuidad de la reproducción, mientras que la vista de tamaño de fotograma nos permite identificar fotogramas con tamaños exagerados respecto a la media y actuar sobre ellos. En el gráfico de flujo se representa en color gris claro u oscuro, de forma alternativa, el aporte de cada fotograma al flujo y, si existe margen hasta la línea roja, se representa en gris oscuro o claro, respectivamente, el aprovechamiento del flujo para el fotograma siguiente (o siguientes). Obviamente, si la velocidad de descarga es muy alta es posible que el gráfico de flujo indique que la carga de todos los fotogramas concluirá en un margen de tiempo inferior al necesario para reproducirlos (de hecho, ésta sería la situación), de modo que las barras cesarán antes de alcanzar el último fotograma. Información Debemos tener en cuenta que el gráfico de flujo representa el flujo o caudal acumulado en cada fotograma, es decir, el volumen total de datos necesario para representar esos fotogramas dividido entre el número de fotogramas. Consecuentemente, en ocasiones podemos corregir fácilmente problemas de exceso de flujo reduciendo levemente la velocidad de fotogramas de nuestra película. 6. Por ejemplo, si seleccionamos Ver>Gráfico por flujo y, a continuación Ver>Configuración de descarga>56K, ¿qué conclusiones nos permitiría extraer el gráfico? Vemos que en numerosas ocasiones las barras superan la línea roja, y esto nos indica que habrá interrupciones en la reproducción; asimismo comprobamos que el gráfico de flujo se extiende hasta el último fotograma (de hecho, si comparamos los valores Duración y Carga previa de la izquierda comprobamos que la película tardaría casi cinco veces más en reproducirse, contando las interrupciones, que su propia duración; esto produciría una experiencia de usuario horrible). 7. Siendo optimistas, supongamos que asumimos que toda nuestra audiencia disfruta ya de conexiones ADSL y seleccionamos Ver>Configuración de descarga>DSL. ¿Qué nos indica ahora el gráfico de flujo? Nos indica que en la primera parte de la película, aproximadamente hasta el fotograma 130, tenemos picos de flujo por encima de lo que admite la velocidad ADSL, pero que una vez superado ese límite la carga pasaría a ser más rápida que la reproducción, y de hecho concluiría aproximadamente en el fotograma 3990. En este caso el valor Carga previa de la izquierda nos indica que con una precarga de 5.5 segundos la película podría reproducirse de principio a fin sin pausas. Pero, ¿qué es una precarga? Es mantener la película detenida en el primer fotograma mientras se descargan datos suficientes como para poder reproducirla posteriormente sin pausas. Aunque Flash Player es capaz por sí mismo de gestionar la precarga, los resultados suelen ser inconsistentes (principalmente por la dificultad de extrapolar datos puntuales de velocidad a periodos más largos), y requieren que seamos nosotros quiénes implementemos manualmente este sistema (como se explicará en las secciones siguientes). 8. Otra función muy interesante de esta ventana de prueba es permitirnos comprobar cómo será realmente la experiencia de usuario simulando su descarga con la velocidad configurada en Ver>Configuración de descarga; 198

para ello sólo tenemos que ejecutar el comando Ver>Simular descarga y verificar en la zona de la izquierda del gráfico el ritmo al que se descargan los fotogramas. Si realiza esta prueba, incluso aunque haya configurado una velocidad DSL, comprobará que al pulsar los botones la película no responde (está atrancada) porque aún no se han descargado los datos que conducen a cada uno de los animales. Este hecho nos hace caer en la cuenta de que dada la naturaleza de nuestra película (en la que el usuario puede acceder libremente a cualquier posición), no sería suficiente una precarga de unos 5 segundos, sino que tendríamos que precargar la película completa. 9. Por último, cerramos la ventana de prueba y, de vuelta en el entorno de edición de Flash, seleccionamos Archivo>Vista previa de publicación. Este menú nos ofrece opciones para probar la película en la ventana que hemos estudiado anteriormente (Flash), pero también en nuestro navegador web predeterminado (HTML). Esta opción puede ser muy interesante para comprobar el aspecto final de nuestro trabajo en el navegador web (tenga en cuenta que Flash genera automáticamente una página web HTML en la que se incrusta el archivo SWF, y que el aspecto de esta página está controlado por las opciones que establezcamos en Archivo>Configuración de la publicación; este comando se estudiará posteriormente en esta misma unidad didáctica).

8.2. Sistemas de precarga Existen básicamente dos formas de implementar un sistema de precarga: •

Incluirlo al principio de la propia película. Éste método es el más sencillo, pero también el menos flexible, pues nos obligará a desplazar todos los fotogramas en la línea de tiempo dejando espacio al principio (al menos un fotograma) para implementar el sistema de precarga, y si esto no lo hemos tenido en cuenta a priori podría interferir con nuestros guiones ActionScript (imagine por un momento lo que pasaría con un gotoAndPlay(1)). Además, obviamente, nos obliga a disponer del archivo FLA.

•

Usar una segunda película para cargar la que realmente nos interesa. En este caso aprovecharíamos la clase Loader para cargar una película dentro de otra. Este método tiene la ventaja de que nos permite cargar cualquier SWF (e incluso imágenes JPEG, GIF, ...) aunque no dispongamos del FLA original, pero el inconveniente de resultar un poco más complejo que el anterior.

8.2.1. Precarga dentro de la propia película En esta sección vamos a implementar el sistema de precarga dentro del propio archivo animaleseningles_final.fla utilizando las propiedades framesLoaded y totalFrames de la clase MovieClip (de la que es una instancia la línea de tiempo principal de todas las películas). Seguiremos estos pasos: 1. Abrimos en Flash el archivo animaleseningles_final.fla (recuerde que puede encontrarlo como recurso adjunto a esta unidad didáctica) y seguidamente ejecutamos el comando Archivo>Guardar como para guardarlo con otro nombre (por ejemplo, animaleseningles_precarga.fla) y preservar así el archivo original por si queremos utilizarlo posteriormente. 2. En este paso vamos a abrir hueco al principio de la línea de tiempo para implementar el sistema de precarga. Ejecutamos el comando Edición>Línea de tiempo>Seleccionar todos los fotogramas para seleccionar todos los fotogramas de la línea de tiempo. A continuación hacemos clic sobre cualquiera de los fotogramas seleccionados y, sin soltar el botón del ratón, lo arrastramos hacia la derecha hasta que el bloque se desplace dos fotogramas, quedando así dos fotogramas vacíos al principio de cada capa, como muestra la siguiente figura. 3. Como indicadores del estado de la precarga vamos a utilizar un cuadro de texto dinámico en el que iremos mostrando el porcentaje de la película cargado y un rectángulo cuyo tamaño irá creciendo proporcionalmente a ese porcentaje (a modo de barra de progreso). Comenzamos creando dos capas nuevas utilizando el icono Nueva capa de la esquina 199

inferior izquierda de la línea de tiempo, y a las que asignamos los nombres porcentaje y progreso (recuerde que para cambiar el nombre de una capa hay que hacer doble clic sobre él en la línea de tiempo). 4. Hacemos clic sobre el fotograma 1 de la capa porcentaje, activamos la herramienta Texto, configuramos el panel Propiedades para crear un campo de texto dinámico, con la fuente de dispositivo _sans, con un tamaño de 20 puntos, de color negro, centrado y con comportamiento de Línea única (el aspecto del panel Propiedades debe ser similar al que se muestra a continuación), hacemos clic sobre el escenario y arrastramos el ratón para definir el tamaño del campo de texto. Después escribimos100 % en su interior y, por último, en el panel Propiedades le asignamos el nombre de instancia porcentaje. 5. Ahora creamos un símbolo nuevo haciendo clic sobre el icono Nuevo símbolo de la zona inferior izquierda de la biblioteca, le asignamos el nombre rectangulo y lo configuramos con el tipo Clip de película. Flash nos conducirá automáticamente al modo de edición de este nuevo símbolo. Activamos la herramienta Rectángulo, elegimos no usar color de trazo y seleccionamos un tono rojo para el relleno, hacemos clic sobre el escenario y arrastramos el ratón para dibujar un rectángulo (el tamaño no importa porque lo modificaremos a continuación). 6. Activamos la herramienta Selección y hacemos clic sobre el rectángulo que acabamos de dibujar. A continuación, en el panel Propiedades, le asignamos un ancho de 200 píxeles (W) y un alto de 15 píxeles (H). Es importante que ubiquemos el punto de registro del rectángulo en su borde izquierdo, pues las operaciones de escala que programemos posteriormente mediante ActionScript utilizarán como origen el punto de registro; accedemos al panel Alinear pulsando la combinación de tecla Control+K y, asegurándonos de que está pulsado el icono En escena, hacemos clic sobre el icono Alinear borde izquierdo. 7. Regresamos al modo de edición de la línea de tiempo principal haciendo clic sobre Escena 1 en el camino de migas de la zona superior izquierda. 8. Activamos el fotograma 1 de la línea de tiempo, hacemos clic sobre el símbolo rectangulo en la biblioteca y, sin soltar el botón del ratón, lo arrastramos hasta el escenario para crear una instancia suya debajo del texto. Aprovechando que tenemos esta nueva instancia seleccionada, accedemos al panel Propiedades y le asignamos el nombre de instancia progreso. 9. Ahora vamos a dibujar un rectángulo negro que nos sirva de contorno para el rojo. Activamos la herramienta Rectángulo, la configuramos con un color de contorno negro y sin color de relleno, hacemos clic ligeramente por encima y a la izquierda del vértice superior izquierdo del rectángulo rojo y, sin soltar el botón del ratón, lo arrastramos diagonalmente hacia la derecha y hacia abajo hasta superar ligeramente el vértice inferior derecho del rectángulo rojo. El resultado debe ser similar al que muestra la siguiente figura. Por supuesto, si lo desea puede trabajar con mayor precisión asignando un tamaño exacto al rectángulo negro en el panel Propiedades y centrando todos los elementos mediante el panel Alinear. 10. Si nos fijamos en la línea de tiempo observaremos que los contenidos de las dos capas que hemos creado en este ejercicio se han extendido hasta el último fotograma de la película, pero esto no nos interesa, sino que deben extinguirse a partir del fotograma 2. Hacemos clic sobre el fotograma 3 de la capa

200

porcentaje y pulsamos la tecla F7 para convertirlo en un fotograma clave vacío. Repetimos la misma operación con la capa progreso. 11. Ya sólo nos queda escribir el código ActionScript que se encargue de gestionar toda la precarga. Hacemos clic sobre el fotograma 1 de la capa acciones, accedemos al panel Acciones (por ejemplo, pulsando la tecla F9), y escribimos el siguiente código, en el que lo único novedoso es que recurrimos a la propiedad width para establecer el ancho del rectángulo rojo (multiplicamos por 200 porque el ancho total del rectángulo rojo son 200 píxeles). var textoPorcentaje:String; textoPorcentaje=Math.round(framesLoaded/totalFrames*100)+" %"; porcentaje.text=textoPorcentaje; progreso.width=framesLoaded/totalFrames* 200; if(framesLoaded==totalFrames){ gotoAndStop(3); } 12. Ahora hacemos clic sobre el fotograma 2 de la capa acciones, pulsamos la tecla F6 para convertirlo en un fotograma clave y, en el panel Acciones, escribimos un sencillo gotoAndPlay(1);. De este modo la película entrará en un bucle entre los fotogramas 1 y 2 actualizando el texto del porcentaje y el ancho del rectángulo rojo hasta que se hayan cargado en memoria todos los fotogramas. 13. Para comprobar nuestro trabajo pulsamos la combinación Control+Intro y, en la ventana de prueba, ejecutamos el comando Ver>Simular descarga. Veremos cómo progresa la descarga (véase la figura siguiente) y, al finalizar, se mostrará el que originalmente era el fotograma 1 de la película pero que ahora ha pasado a ser el 3.

8.2.2. Precarga desde otra película En esta sección aprenderemos a importar una película SWF desde otra película diferente, y además mostraremos información relativa al progreso de carga. La clave para poder llevar a cabo esta tarea es la clase Loader, y más concretamente su método load(), que es capaz de cargar un archivo de película SWF (o un archivo de imagen JPEG, GIF o PNG). Esta clase debe recibir como parámetro el objeto URLRequest correspondiente al archivo que queremos cargar (recordará que también utilizamos un objeto URLRequest para cargar sonidos externos en la unidad didáctica anterior). Por sí sola, la clase Loader no es capaz de aportar información sobre el proceso de carga, pero indirectamente a través de su propiedad contentLoaderInfo obtendremos una referencia a su clase asociada loaderInfo, que no sólo es capaz de generar eventos cada vez que se reciben nuevos datos (ProgressEvent.PROGRESS) o cuando la carga ha finalizado (Event.COMPLETE), sino que también nos informa con precisión del progreso de la carga a través de las propiedades bytesLoaded y bytesTotal del evento ProgressEvent.PROGRESS. Una vez cargado el archivo no se mostrará directamente en el escenario, sino que tendremos que añadirlo a la "lista de visualización" mediante el método addChild() de la clase DisplayObjectContainer, a la que por defecto pertenecen todas las instancias de clip de película (incluida la línea de tiempo principal).

201

Para poner en práctica todos los conceptos anteriores realizaremos un ejercicio consistente en cargar la película animaleseningles_final.swf desde la película que crearemos a continuación mostrando el porcentaje de carga en un campo de texto. Seguimos estos pasos: 1. Creamos un archivo nuevo de Flash y lo guardamos con el nombre animaleseningles_precargaexterna.fla en la misma carpeta en la que se encuentre el archivo animaleseningles_final.swf (este archivo se ofrece como recurso adjunto a esta unidad didáctica). 2. Activamos la herramienta Texto, configuramos el panel Propiedades para crear un campo de texto dinámico, con la fuente de dispositivo _sans, con un tamaño de 20 puntos, de color negro, centrado y con comportamiento de Línea única, hacemos clic sobre el escenario y arrastramos el ratón para definir el tamaño del campo de texto. Después escribimos 0 % en su interior y, por último, en el panel Propiedades le asignamos el nombre de instancia porcentaje. Mediante el panel Alinear (Control+K) centramos este campo horizontalmente dentro del escenario y lo alineamos con su borde superior. El resultado debe ser similar al que muestra la siguiente figura. 3. Creamos una capa nueva a la que asignamos el nombre acciones. Activamos el fotograma 1 de esta nueva capa, accedemos al panel Acciones (F9) e introducimos el código siguiente: var archivo:URLRequest = new URLRequest("animaleseningles_final.swf"); var loader:Loader = new Loader() loader.load(archivo); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,actualizarPorcentaje); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,mostrarPelicula); function actualizarPorcentaje(evento:ProgressEvent){ var textoPorcentaje = Math.round(evento.bytesLoaded/evento.bytesTotal*100)+" %"; porcentaje.text=textoPorcentaje; } function mostrarPelicula(evento:Event){ addChild(loader); } 4. Probamos la película pulsando la combinación de teclas Control+Intro y observamos inmediatamente que el porcentaje sigue visible pese a que la película de los animales se ha cargado completamente (esto lo solucionaremos a continuación). Ejecutamos el comando Ver>Simular descarga para comprobar que efectivamente el porcentaje se va actualizando poco a poco, y que cuando alcanza el 100 por cien muestra la película de los animales sobre el escenario. 5. La "lista de visualización" es una jerarquía de todos los elementos visibles en el escenario; tanto los creados directamente sobre él en el modo de edición, como los creados o cargados indirectamente a través de ActionScript. Todo el atrezzo de cada capa y cada instancia que creemos sobre el escenario tiene asociado un número, denominado índice, que establece su "profundidad" o nivel de apilamiento dentro del escenario. El contenido más profundo (el atrezzo dibujado como formas de fusión de la capa inferior de la línea de tiempo o, en su defecto, la primera instancia que hayamos creado en esa capa) tiene asociado el índice 0, y los demás contenidos utilizan los índices positivos consecutivos (1, 2, 3, ...). En nuestro caso, como el único contenido es el campo de texto, éste ocupa el índice 0, y podremos eliminarlo de la lista de visualización recurriendo al método removeChildAt() con sólo introducir en la función mostrarPelícula() la línea que se destaca en negrita en el siguiente código:

}

function mostrarPelicula(evento:Event){ removeChildAt(0); addChild(loader);

202

6. Probamos nuevamente la película pulsando la combinación Control+Intro y verificamos que ahora sí desaparece el porcentaje una vez finalizada la carga. 7. El objetivo del ejercicio ya está cumplido, pero vamos a mejorar un poco el resultado creando una animación de precarga más atractiva. ¿Recuerda el camello que dibujamos en la unidad didáctica 3? Vamos a utilizarlo como máscara para un rectángulo que irá ascendiendo al ritmo que se carga del archivo, de modo que la forma del camello parecerá dibujarse desde abajo hacia arriba. Recupere aquél archivo y copie el relleno (sin el trazo) del camello (activando la herramienta Selección, haciendo clic sobre el relleno del camello, y pulsando la combinación Control+C). Si no dispone del archivo, puede importar a su biblioteca (Archivo>Importar>Importar a biblioteca) el recurso camello.wmf adjunto a esta unidad didáctica. 8. Creamos un símbolo nuevo de tipo clip de película y llamado camello. Flash nos conducirá automáticamente a su modo de edición. Pegamos el relleno del camello pulsando la combinación Control+V (o, alternativamente, arrastramos sobre el escenario una instancia de camello.wmf). Aprovechando que el camello está seleccionado utilizamos el panel Alinear para centrarlo horizontalmente en el escenario y alinear su borde inferior con el punto de registro (el punto de registro debe quedar centrado a los pies/las pezuñas del camello). 9. Creamos otro nuevo símbolo, también de tipo clip de película, pero en este caso llamado rectangulo. Flash nos conducirá a su modo de edición. Dibujamos sobre el escenario un rectángulo (no importa el tamaño, pues lo modificaremos posteriormente si fuera necesario) de relleno rojo sin contorno y lo alineamos de modo que el punto de registro quede en el centro de su borde superior. 10. Regresamos nuevamente al modo de edición del símbolo camello haciendo doble clic sobre su icono (no sobre su nombre) en el panel Biblioteca. Creamos una capa nueva, hacemos clic sobre el fotograma 1 de esa nueva capa, y arrastramos sobre el escenario una instancia del símbolo rectangulo, asignándole mediante el panel Propiedades el nombre de instancia rectangulo. 11. Si fuera necesario, activamos la herramienta Transformación libre y cambiamos el tamaño del rectángulo para que sea superior al del camello (tanto en anchura como en altura). 12. Mediante el panel Alinear colocamos el rectángulo centrado justo debajo del camello. El resultado debe ser similar al que muestra la siguiente figura. 13. Activamos la herramienta Selección y hacemos clic sobre el camello para averiguar mediante el panel Propiedades cuál es su altura (aproximadamente 175 en nuestro caso). Tenga en cuenta que necesitaremos conocer este valor para saber cuánto tenemos que elevar el rectángulo. 14. En la línea de tiempo hacemos clic con el botón derecho del ratón sobre la capa en la que se encuentra el camello (debería ser la inferior) y, en el menú contextual que aparece, ejecutamos el comando Máscara. A continuación hacemos clic sobre el nombre de la capa en la que se encuentra el rectángulo y, sin soltar el botón del ratón, la arrastramos hasta dejarla anidada/sangrada debajo de la capa de máscara. Mediante esta operación hemos indicado a Flash que queremos utilizar la figura del camello como máscara para el rectángulo. 15. Regresamos al modo de edición de la línea de tiempo principal haciendo clic sobre Escena 1 en el camino de migas. 16. Creamos una capa nueva, hacemos clic sobre el fotograma 1 de esta nueva capa, y arrastramos sobre el escenario una instancia del clip camello ubicándola debajo del porcentaje (no se sorprenda si la instancia aparenta estar vacía; tenga en cuenta que el camello y el rectángulo no se solapan en su estado actual). A continuación, mediante el panel Propiedades, asignamos a esta instancia el nombre camello.

203

17. Ya sólo nos queda modificar el código del fotograma 1 de la capa acciones. Hacemos clic sobre este fotograma y accedemos al panel Acciones, en el que introducimos el código que se ha resaltado en negrita a continuación (observe que en este caso hemos recurrido al método removeChild para indicar expresamente el nombre de la instancia que queremos eliminar en lugar de intentar adivinar qué índice le ha asignado Flash): var archivo:URLRequest = new URLRequest("animaleseningles_final.swf"); var loader:Loader = new Loader() loader.load(archivo); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,actualizarPorcentaje); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,mostrarPelicula); function actualizarPorcentaje(evento:ProgressEvent){ var textoPorcentaje =Math.round(evento.bytesLoaded/evento.bytesTotal*100)+" %"; porcentaje.text=textoPorcentaje; camello.rectangulo.y = - (175*evento.bytesLoaded/evento.bytesTotal); } function mostrarPelicula(evento:Event){ removeChildAt(0); removeChild(camello); addChild(loader); } 18. Accedemos a la ventana de prueba pulsando la combinación de teclas Control+Intro y verificamos el resultado de nuestro trabajo ejecutando el comando Ver>Simular descarga. Truco Es importante que las animaciones de precarga sean visualmente atractivas para mantener el "interés" de la audiencia. En este sentido pueden servirle de inspiración las que encontrará en estos sitios: http://www.prettyloaded.com/, http://preloadergallery.com/ o http://www.smashingmagazine.com/2008/03/13/showcaseof-creative-flash-preloaders/.

8.3. Publicación Al pulsar la combinación Control+Intro para probar nuestro trabajo, Flash simplemente genera el archivo SWF, pero mediante el comando Archivo>Publicar se generarán todos los archivos necesarios para publicar realmente nuestro trabajo, bien en una página web o bien en otro formato (como GIF animado o vídeo). Los archivos que genera el comando Publicar se establecen a través del comando Archivo>Configuración de la publicación, que nos conduce a un cuadro de diálogo similar al siguiente. Mediante las casillas de activación de la ficha Formatos indicaremos qué archivos deseamos que se generen al ejecutar el comando Archivo>Publicar. Para cada casilla que activemos (excepto las de los proyectores) se mostrará una ficha en la zona superior, que nos ofrece opciones de configuración propias de ese formato. Observamos que entre estos formatos no se encuentran ninguno de vídeo, pues la exportación de una película de Flash como vídeo se realiza a través del comando Archivo>Exportar>Exportar película, que nos permite elegir entre los formatos AVI y MOV (QuickTime).

204

Advertencia Tenga en cuenta que al publicar una película de Flash en cualquier formato que no sea SWF se anularán todas las funciones interactivas. Por ejemplo, si activamos la casilla Imagen GIF encontraremos opciones en la ficha GIF para indicar que el GIF sea animado o para que uno de sus colores se comporte como transparente. Información Los proyectores son archivos ejecutables que, además de la película, incluyen el reproductor Flash Player, por lo que son una opción muy apropiada para enviar nuestro trabajo a personas que no sabemos si disponen de Flash Player. En las siguientes secciones nos concentraremos en las opciones de los dos archivos que se utilizan fundamentalmente para publicar los trabajos de Flash: HTML y SWF.

8.3.1. Opciones de configuración HTML En la ficha HTML (véase la figura siguiente) encontraremos estas opciones de configuración: •

Plantilla: Nos permite elegir un formato de página web predeterminado. Fundamentalmente utilizaremos la plantilla Sólo Flash, pero ya aprendimos en la unidad didáctica anterior que si queremos mostrar un vídeo a pantalla completa con el componente FLVPlayback necesitaremos la plantilla Sólo Flash - Permitir pantalla completa.

•

Detectar versión de Flash: Al activar esta opción se configura una función JavaScript en la página que detecta la versión de Flash Player instalada en el navegador del usuario y, si es menor que la que hemos especificado, muestra un mensaje de aviso y ofrece el enlace para descargar la última versión. Utilizar esta opción es especialmente recomendable cuando nuestra aplicación utiliza funciones que sólo puede reproducir la última versión de Flash Player (como animaciones 3D), pues de otro modo el usuario verá la película de forma alterada.

•

Dimensiones: Nos permite asignar un tamaño a la película dentro de la página web, es decir, definir un bloque dentro del que se mostrará la película. La opción Porcentaje es especialmente interesante, pues si la configuramos al 100 % nos permitirá ocupar toda la ventana del navegador con la película Flash.

•

Reproducción: Establece si queremos que la película se reproduzca automáticamente (Pausa al comienzo), si deseamos permitir al usuario acceder a las opciones adicionales (Reproducir, Rebobinar, ...) del menú contextual de Flash Player (Mostrar menú), si la película debe reproducirse cíclicamente (Reproducir indefinidamente), y si las fuentes de los textos estáticos deben reemplazarse por fuentes de dispositivo (Fuente de dispositivo).

•

Calidad: En este cuadro de diálogo elegiremos con qué calidad deseamos que se muestre nuestro trabajo; los valores más bajos renuncian a algoritmos de visualización avanzados que mejoran el aspecto

205

de la película pero requieren tanto tiempo que pueden llegar a provocar pausas o saltos. En cualquier caso, el usuario final podrá decidir cambiar este valor a través del menú contextual de la película. •

Modo de ventana: Esta opción controla fundamentalmente si el fondo de nuestra aplicación Flash será transparente o no, y si admitirá que otros elementos de la página web se muestren sobre ella. Si fuera transparente podríamos ver el fondo de la página web a través de ella. Las opciones disponibles son Ventana que vuelve el fondo del SWF opaco y no permite que otros elementos de la página web se muestren sobre él, Opaco sin ventanas para que el fondo sea opaco pero admita la colocación de otros elementos de la página web sobre la película SWF, y Transparente sin ventanas para que el fondo sea transparente y se admita la colocación de otros elementos HTML sobre la película SWF. Para colocar otros elementos de la página sobre nuestra película SWF tendremos que recurrir a técnicas de DHTML (Dynamic HTML), que superan los objetivos de este curso.

•

Alineación HTML: Establece la alineación de la película dentro de la página web.

•

Escala: Las opciones de este cuadro de lista sólo se aplican si hemos elegido mostrar la película con un tamaño distinto al original (en cierta forma funcionan como las teclas del mando a distancia de nuestros televisores que sirven para indicar cómo queremos ver una película panorámica en nuestras pantallas 4:3, o viceversa). La opción Predeterminada (mostrar todo) muestra la aplicación completa dentro del tamaño especificado (aunque no tenga la mismas proporciones que el original de la película) y sin distorsionar su relación de aspecto; obviamente, esto puede provocar que aparezcan bordes vacíos en los laterales. La opción Sin bordes rellena todo el tamaño especificado manteniendo la relación de aspecto original de la película, aunque para ello tenga que recortar parcialmente el escenario. La opción Ajuste exacto aprovecha todo el espacio indicado sin recortar el escenario, aunque para ello tenga que distorsionar la relación de aspecto original de la película. Por último, la opción Sin escala no modifica el tamaño de la película original, pudiendo quedar ocultas partes del escenario si el tamaño especificado es menor que el del éste.

•

Alineación Flash: Estas opciones determinan cómo se alinea la película dentro del bloque que le hemos asignado en la página web.

Si accediésemos al código de la página HTML que genera Flash comprobaríamos que la sección responsable de mostrar realmente la película SWF es una combinación de los elementos object y embed con un aspecto similar al siguiente:

type="application/x-shockwave-flash"

Éste es precisamente el código que tendríamos que utilizar sin en lugar de conformarnos con la página generada por Flash quisiéramos integrar nuestra película en otra página web.

8. 3.2. Opciones de configuración Flash (SWF) Las opciones más interesantes que nos ofrece la ficha Flash (véase la figura siguiente) son éstas: Reproductor y Script: Mediante estos cuadros de lista indicaremos con qué versión de Flash Player y ActionScript deseamos que sea compatible nuestra película SWF. Idealmente nos interesaría que fuese compatible com las versiones más antiguas, pero esto no siempre es posible porque puede obligarnos a renunciar a algunas de las últimas novedades (como las animaciones 3D). •

Imágenes y sonidos: En esta sección configuraremos el codec de compresión que se aplicará a las imágenes/sonidos para los que no hayamos establecido una configuración concreta a través del panel Propiedades. Activando la casilla Suplantar configuración de sonido podríamos incluso ignorar las configuraciones particulares a favor de la general establecida en este cuadro de diálogo (esta opción puede resultar muy útil para reducir globalmente el tamaño de una aplicación).

•

Configuración de SWF: La casilla Comprimir película comprime el archivo SWF reduciendo su tamaño, de modo que tarda menos en descargarse. La casilla Incluir capas ocultas incluye en el archivo SWF final (y visualiza) las capas que pudiéramos tener ocultas; tenga en cuenta que esta casilla está activada por defecto. La casilla Incluir metadatos XMP nos permite asignar a nuestra película SWF información adicional, como el nombre del autor o palabras clave. Estos datos pueden ser indexados por los motores de búsqueda como Google.

•

Avanzado: La opción más interesante de este bloque es Proteger frente a importación que impediría que nuestra película SWF pudiera ser importada por terceros en sus propios archivos FLA a menos que conociesen la contraseña establecida en esta misma sección. Tenga en cuenta que esta opción no impide que nuestros SWF puedan ser cargados en tiempo de ejecución mediante la clase Loader (como se explicó anteriormente en esta misma unidad didáctica).

207