Manual Flash

Universidad Nacional Autónoma de México

Facultad de Ingeniería Secretaría General

Coordinación de Programas de Atención Diferenciada para Alumnos (COPADI)

Cursos Intersemestrales Extracurriculares (CIEC) Intersemestre 2006 – 2

FLASH MX Y DISEÑO DE PÁGINAS WEB

Ing. Gerardo Avilés Rosas [email protected]

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Introducción a Flash MX

1 INTRODUCCIÓN A FLASH MX 1.1 ¿QUÉ ES FLASH? Flash MX es una potente herramienta creada por Macromedia que ha superado las mejores expectativas de sus creadores. Inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la Web, así como para crear GIFs animados. Los motivos que han convertido a Flash MX en el programa elegido por la mayoría de los diseñadores Web profesionales y aficionados son varios. Veamos pues, porqué es interesante Flash MX.

1.2 ¿PORQUÉ USAR FLASH MX? Las posibilidades de Flash son extraordinarias, cada nueva versión ha mejorado a la anterior, y el actual Flash MX no ha sido menos. Aunque su uso más frecuente es el de crear animaciones sus usos son muchos más. Flash ha conseguido hacer posible lo que más se hacía falta en Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la Web como algo atractivo, no estático (en contraposición a la mayoría de las páginas, que están realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fácil y rápido animaciones de todo tipo. 1.3 DE FLASH 5 A FLASH MX Es normal incorporar novedades cada vez que se crea una nueva versión de un programa, así lo llevaba haciendo Macromedia con Flash desde que creó el primer Flash de la saga. Pero el salto de Flash 5 a Flash MX es, simplemente, ESPECTACULAR. Espectacular en cuanto a mejoras, gráficas y no gráficas, pero sobre todo, en cuanto a potencia. Veamos qué mejoras funcionales presenta Flash MX respecto a Flash 5:

9 Carga dinámica de imágenes JPEG y sonidos MP3: Sin duda, la principal novedad de Flash MX, esta posibilidad nos permitirá cargar dichos archivos sólo en el caso de ser necesarios, lo que se traduce en unas películas finales de menor tamaño y por tanto, más exportables y rápidas de descargar desde cualquier sitio.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Introducción a Flash MX

9 Nuevas Herramientas de Diseño Gráfico: Como la herramienta 9

9

9

9

9

9

9

“Transformación Libre” y el “Ajuste de Píxeles”, que nos permitirá dibujar y diseñar nuestras animaciones con mayor facilidad y libertad. Anclajes con Nombre: Mayor facilidad a la hora de crear enlaces a otras partes de nuestras películas y posibilidad de usar marcadores de páginas. Además se nos facilita la tarea de crear botones del tipo “Atrás” o “Adelante” Compatibilidad con Vídeo: Si eres de los que tienes webcam o cámara digital, y habías pensado en insertar vídeos que tu mismo has creado o importarlos de algún otro lugar, Flash MX ha pensado en ti. Flash MX permite insertar vídeos estándar que sean compatibles con QuickTime o Windows Media Player. Soporta los formatos MPEG, DV (Digital Video), MOV (QuickTime), AVI etc. Una gran colección de componentes preconstruidos: Flash MX pone a nuestra disposición componentes (símbolos inteligentes) para que los usemos de inmediato. Sus utilidades son muchas, podremos editar fácilmente un calendario, unos botones de entrada o salida, casillas de verificación, barras de desplazamiento. Diseño para casi cualquier medio: Como decíamos, Flash MX ha invertido en compatibilidad, sus películas FLASH podrán verse en cualquier plataforma que soporte Flash Player, esto es: Microsoft Windows, Apple Macintosh, Linux, Solaris, MicrosoftTV, Symbian EPOC, Pocket PC, y otras. Soporte para multilenguaje: Flash MX está a la venta en más de 10 idiomas, por supuesto también en español. Flash MX nos facilita el aprendizaje, pues la ayuda también viene en español y el uso del programa. Conocida interfaz de Usuario: Si bien al principio la apariencia gráfica de Flash MX desconcierta y podemos echar de menos Flash 5, con el uso le perderemos el miedo rápidamente y comenzaremos a notar sus mejoras. Cambian algunos paneles y muchas cosas cambian de sitio. Además, Flash MX Incorpora la opción "Esconder Paneles" (F4) que ya usaba Dreamweaver y nos permite maximizar el área de trabajo rápidamente. Por otra parte, su diseño general está influenciado por el diseño de Windows XP y se aprecia a simple vista. ActionScript, a la máxima potencia: El lenguaje de programación de Flash, el ActionScript, siempre ha sido muy útil, pero en Flash MX la utilidad se convierte en potencia. El ActionScript de Flash MX incorpora nuevos objetos, propiedades, funciones, en definitiva: elimina los límites de Flash 5 (incorpora compatibilidad con XML, mejor conectividad, mayor seguridad etc.). Por supuesto Flash MX es compatible hacia atrás (Con Flash 5, 4 etc.).

1.4 LAS ALTERNATIVAS FLASH MX. JAVASCRIPT

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Introducción a Flash MX

Desde hace mucho tiempo, el lenguaje HTML ha mostrado carencias importantísimas en todos los aspectos. El HTML crea páginas Web estáticas, páginas en las que todo el movimiento que podemos encontrar se debe a imágenes animadas (GIFS) o a vídeos insertados en ellas... Este lenguaje, revolucionario en su día, demostró pronto que era insuficiente en todos los campos. Pronto comenzaron a surgir alternativas. El Javascript nació con el objeto de crear acciones o programas cortos que se pudieran insertar en la Web para darle vida. El Javascript, no es un lenguaje de programación propiamente dicho, pues sólo crea "acciones" que se ejecutarán posteriormente en el navegador que visualice la página, jamás podremos crear un programa en Javascript, sólo complementos para la Web. Este lenguaje presenta varios inconvenientes, en primer lugar, su ejecución puede resultar peligrosa para la persona que accede a una Web, por lo que muchas personas optan por desactivar el "Javascript" de sus navegadores. Si nuestra página Web contiene mucho código Javascript, simplemente, no lo verán. En segundo lugar y como con casi todo, existen navegadores (cada vez menos, eso sí) que no lo soportan y sería inútil intentar ejecutar un código Javascript si el navegador no lo reconoce. Además, el Javascript no sirve para crear páginas Web, tan sólo las complementa, por lo que su uso general suele estar enfocado a pequeñas "ayudas" en la interactividad de la Web, como por ejemplo realizar comprobaciones en los formularios, efectos en la barra de estado). Debemos destacar además, que Flash puede trabajar conjuntamente con javascript y ejecutar códigos y funciones Javascript sin problemas, por lo que Javascript se convierte en una ayuda para todos los usuarios de Flash MX. 1.5 LAS ALTERNATIVAS A FLASH MX. CSS Aunque muchos no se hayan dado cuenta, HTML tiene una potencia muy limitada en el tratamiento de textos. De hecho, el principal problema del HTML a la hora de mostrar y distribuir textos por pantalla no suele ser su incapacidad para hacerlo (las posibilidades que permite suelen ser más que suficientes para cualquier usuario normal), sino que su problema es la falta de precisión. Así, resulta prácticamente imposible asegurar que el texto vaya a aparecer tal y como yo quiero en el navegador de otra persona, o por ejemplo, el HTML no permite crear justificados de textos o simplemente dejar un margen a la izquierda del documento. Para esto se crearon las Hojas de Estilo en Cascada (CSS en inglés). Su potencia es mucha, y cuentan con la ventaja de que se han convertido en un estándar (aunque siempre habrá alguien incapaz de visualizar un contenido que use una hoja de estilo). Además de permitir administrar los textos e imágenes como queramos por nuestra página Web, son una forma magnífica de simplificar el código de la página Web y de acelerar su creación, ya que como su nombre indica son "Hojas de Estilo", una vez creado el tratamiento que queremos dar a un tipo de texto (por ejemplo, a los títulos), todos los títulos que creemos y los identifiquemos como tales, tendrán ese tratamiento (color, tamaño de la letra, tipo de fuente). Gracias a las CSS hemos ganado en control sobre nuestras páginas Web, y tal vez en vistosidad y diseño, pero no sirven para crear animaciones.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Introducción a Flash MX

1.6 LAS ALTERNATIVAS A FLASH MX. DHTML Hemos visto como se solucionan los principales problemas que tiene HTML, pero aún falta por saber cómo se intenta eliminar esa "estaticidad" característica de las páginas HTML. La primera solución viene del propio HTML. Se llama DHTML (o HTML Dinámico) y como su nombre indica se creó para crear contenidos en movimiento en las páginas Web. Su funcionalidad llega hasta mover objetos por la Web, y sobre todo, se emplea para crear menús animados. En realidad el DHTML no es más que una combinación de HTML y Javascript (de ahí que lo hayamos dejado para el final), aunque es una buena solución para crear menús vistosos sin animaciones extraordinarias. ¿Su inconveniente? Hay demasiados navegadores que tiene problemas con él y su carga puede ser lenta o retardada...

1.7 EL ETERNO DEBATE Y ante todo esto ¿Qué nos ofrece Flash? Pues Flash es, con diferencia, la herramienta más potente del mercado para crear contenido multimedia para la Web pero presenta 2 inconvenientes importantes.

9 El primero es la compatibilidad con FLASH. Al igual que algunos navegadores no soportan javascript o no pueden ver contenidos DHTML (o incluso CSS), para poder ver FLASH se requiere un PLUGIN especial de la casa Macromedia. Un PLUGIN es un programita especial que permite a tu navegador identificar las películas FLASH y descargarlas y visualizarlas correctamente. Este PLUGIN es gratuito.

9 El segundo problema es el tamaño que ocupan las películas y su tiempo de descarga. Mientras que una página HTML puede ocupar unos 10 KB como media, una animación Flash ocupa mucho más. Evidentemente depende del contenido que tenga, pero suelen superar los 100 KB con facilidad, y si además incorpora sonidos es fácil que la cifra se dispare. Al ocupar más espacio, el tiempo que tarda en estar visible el contenido Flash es mayor y no todos los visitantes están dispuestos a esperar, simplemente, se irán a otra página. Por otra parte, las conexiones de banda ancha son cada vez más numerosas, lo que elimina el problema del tiempo de descarga, pero el día en el que todo el mundo se conecte a Internet a alta velocidad aún está lejos, así que el debate seguirá abierto mucho tiempo.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Introducción a Flash MX

Aquí hay algunas páginas interesantes hechas con FLASH MX

http://www.2advanced.com/flashindex.htm http://www.nrg.be/ http://www.ibericamedia.com/ Resumiendo, insertar o no contenido Flash en una página Web puede ser cuestionable (a día de hoy), aunque depende de muchas cosas, al igual que insertar DHTML, por ejemplo. Aún así, no hemos de olvidar que Flash tiene muchísimas aplicaciones más. Por ejemplo la creación de CDs interactivos (como los que incluyen las revistas de informática, por ejemplo), la creación de banners publicitarios o lo que más está de moda ahora: la creación de dibujos animados usando Flash MX. Además, Flash tiene uso industrial, pues se emplea para optimizar planos, crear diseños de interiores y trabajar con imágenes vectoriales en general.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

2 LA INTERFAZ DE FLASH MX Flash MX cuenta con un entorno o interfaz de trabajo de lo más manejable e intuitiva. Además, tiene la ventaja de que es similar a la de otros programas de Macromedia (Dreamweaver, Frenad o Director), todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash MX por primera vez:

Figura 1. Entorno de trabajo de Flash MX

En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el programa Flash. Flash recordará nuestras preferencias y abrirá el programa tal y como lo dejamos la última vez que lo utilizamos. 2.1 LA BARRA DE MENÚS Figura 2. Barra de Menú en Flash MX

La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseño Web o gráfico, aunque tiene algunas particularidades. Veamos los principales Submenús a los que se puede acceder:

9 Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

9 9

9 9

9 9 9 9

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. También permite configurar la impresión de las páginas, imprimirlas. Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar, tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa. Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas. También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones. Insertar: Te permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas. Modificar: La opción Transformar permite modificar los gráficos existentes en la película, y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales. El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena). Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad. Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir, Rebobinar, Probar Película. Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directo a TODOS los Paneles. Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Macromedia, desde el manual existente, hasta el diccionario de ActionScript, pasando por tutoriales, lecciones guiadas etc.

2.2 LA LÍNEA DE TIEMPO La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.

9 Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos) 9 Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película. Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (12.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen).

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

Figura 3 Línea de Tiempo

A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo. 2.2.1 LA LÍNEA DE TIEMPO. LOS FOTOGRAMAS 1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyframe inicial al final. Para representar esta animación aparece una flecha entre estos Keyframes. 2) Fotogramas de animación de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tenía en el Keyframe inicial a la del final. Para representar esta animación aparece una flecha entre estos Keyframes. 2.3 LAS CAPAS El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicará un tema completo. Aún así, veamos a grandes rasgos qué son las capas. Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas). Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los sonidos en una capa independiente llamada "Sonidos", por ejemplo).

Figura 4. Área de trabajo de las capas

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

2.4 EL ÁREA DE TRABAJO El Área de trabajo consta de numerosas partes, veámoslas: La parte más importante es el Escenario, sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento:

9 Dimensiones: Determinan el tamaño de la película. El tamaño 9 9 9 9

mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px. Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados) Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película. Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película. Unidades de Regla: Unidad que se empleará para medir las cantidades.

2.5 LAS VISTAS O ZOOMS La Herramienta Lupa se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar más o menos zona del Entorno de Trabajo. Cada vez que hagamos clic en la Lupa duplicaremos el porcentaje indicado en el Panel Zooms. Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en el Menú Ver. Son muy útiles y ayudan a acelerar el trabajo cuando se emplean correctamente.

2.6 LOS PANELES Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo, todo lo que haga referencia a las acciones, irá en el Panel "Acciones"). Su misión es simplificar y facilitar el uso de los comandos.

9 Panel Info: Muestra el tamaño y las coordenadas de los objetos

seleccionados, permitiéndonos modificarlas. Muy útil para alineaciones exactas. 9 Panel Transformar: Ensancha, encoge o gira los objetos seleccionados. 9 Panel Alineamiento: Coloca los objetos del modo que le indiquemos.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

9 Panel Mezclador de Colores: Mediante este panel creamos los 9 9

9 9

9 9

colores que más nos gusten. Panel Muestras de Color: Nos permite seleccionar un color de modo rápido y gráfico. (Incluidas nuestras creaciones). Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades características y muchas utilidades (calendarios, scrolls, etc.) Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamaño de los caracteres, tipografía, propiedades de los objetos (si hay interpolaciones etc.), coordenadas, tamaño etc. Panel Escena: Modifica los atributos de las escenas que usemos. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra película.

2.7 ESCENAS Una Escena no es más que una porción de la Línea de Tiempo, con todo lo que ésta incluya (capas y fotogramas). Su finalidad principal es la de ORGANIZAR la película, de modo que las partes de la película que no tengan relación entre sí no estén una a continuación de la otra (seguida en la línea de tiempo). De este modo, separando una película en 3 escenas, conseguimos tener 3 líneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que veremos y editaremos como si de 3 películas diferentes se tratara. No debemos olvidar que aunque en apariencia sean películas distintas, la Línea de Tiempo es la misma y que al acabar la primera escena se reproducirá la segunda y así sucesivamente. Las Escenas se pueden añadir, eliminar, editar... desde el Menú Escena al que se accede desde Ventanas --> Escena. 2.8 LA BARRA DE HERRAMIENTAS. HERRAMIENTAS BÁSICAS La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles son las más importantes y cómo se usan:

9 Herramienta Flecha:

Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos. Permite seleccionar los bordes de los objetos, los rellenos (con un sólo clic), los bordes (con doble clic), zonas a nuestra elección. Además, su uso adecuado puede ahorrarnos tiempo en el trabajo.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

9 Herramienta Línea:

Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar sin más que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.

9 Herramienta Texto:

Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán más adelante.

9 Herramienta Óvalo:

La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla.

9 Herramienta Rectángulo:

Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean.

9 Herramienta Lápiz:

Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.

9 Herramienta Brocha:

Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.

9 Herramienta Cubo de Pintura:

Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.

9 Herramienta Borrador:

Su funcionamiento es análogo a la Herramienta Brocha. Pero su función es la de eliminar todo aquello que "dibuje".

2.9 LA BARRA AVANZADAS

9 Herramienta Lazo:

DE

HERRAMIENTAS.

HERRAMIENTAS

Su función es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contraparte, la

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano). 9 Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imágenes: . Esto, es la Herramienta "Varita Mágica", tan popular en otros programas de dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que aparece es este:

permite hacer selecciones poligonales.

9 Herramienta Pluma:

Crea polígonos (y por tanto rectas, rectángulos) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.

9 Herramienta

Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

9 Herramienta Bote de Tinta:

Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.)

9 Herramienta Cuentagotas:

Su misión es "Capturar" colores para que posteriormente podamos utilizarlos.

2.10 LA BARRA DE HERRAMIENTAS. OPCIONES Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente. La forma de acceder a este Submenú consiste en hacer clic en la línea o en el objeto que has dibujado. Entonces aparecerá (o se iluminará si ya estaba presente) un submenú como este:

9 Ajustar a Objetos :

Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superponga, dando la sensación de estar "unidos".

9 Suavizar:

Convierte los trazos rectos en líneas menos rígidas.

9 Enderezar:

Realiza la labor inversa. Convierte los trazos redondeados en más rectilíneos.

9 Girar:

Permite girar un objeto.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

9 Escalar:

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

Modifica el tamaño de un objeto manteniendo las

proporciones. 2.11 EL PANEL MEZCLADOR DE COLORES El Panel Mezclador de Colores, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que más nos gusten. Para seleccionar un color determinado, bastará con hacer clic en las pestañas que se encuentran junto a los iconos de las Herramientas de Lápiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre la pestaña que está junto a la Herramienta Lápiz y si queremos modificar un relleno, haremos clic en la pestaña que está junto a la Herramienta Bote de Pintura.) Al hacerlo aparecerá un Panel con multitud de colores para que seleccionemos el que más nos gusta. También permite introducir el código del color según el estándar que establece el HTML. También se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la Herramienta Bote de Pintura). Se pueden crear diferentes tipos de Rellenos:

9 Sólido: Consiste en un relleno formado por un solo color. 9 Degradado Lineal: Es un tipo especial de relleno, de modo que un

color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro 9 Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular. 9 Mapa de Bits: Permite colocar como relleno alguna imagen existente en la película (O ajena a ella si antes se "importa") 2.12 EL PANEL MUESTRAS DE COLOR El Panel Muestras de Color sirve para poder ver de un modo rápido y claro los colores de que disponemos, tanto sólidos (un solo color) como degradados (lineales o radiales). Además, cuando creemos un color mediante el Panel Mezclador de Colores, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un menú desplegable en la parte superior derecha del Panel Mezclador de Colores). Una vez esté agregado el color, pasará a estar

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

disponible en nuestro conjunto de muestras y podremos acceder a él rápidamente cada vez que trabajemos con nuestra película. Cada película tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que teníamos la última vez que trabajamos con dicha película. 2.13 TRABAJANDO CON TEXTOS Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animación, y por tanto, también todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones gráficas, de modo que tratará cualquier texto como si de un objeto más se tratase, listo para ser animado a nuestro gusto. Esto nos permitirá posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto, texto estático o normal, texto dinámico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), también se puede crear texto que soporte formato HTML etc. 2.13.1 PROPIEDADES DE LOS TEXTOS Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir. El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra película, de modo que si seleccionamos un texto, podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto. Si tenemos experiencia usando Flash 5, notaremos que todas las propiedades que antes se encontraban en los Paneles Carácter y Párrafo, se encuentran agrupadas ahora en el Panel Propiedades.

Figura 5. Panel propiedades del Texto

Veamos a fondo el Panel Propiedades:

9 Fuente:

Desde aquí, al igual que en los editores de texto más comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste.

9 Altura:

Determina el espaciado entre los caracteres. Útil cuando la tipografía que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.

9 Ajuste automático entre caracteres:

Activar esta casilla provoca que la separación entre caracteres se realice de modo automático.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

9 Posición:

Nos permite convertir nuestro texto en subíndices o en superíndices (o dejarlo normal).

9 URL:

Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una dirección Web, nada más fácil que escribirla ahí. Flash la asociará al texto que estés escribiendo en ese momento.

9 Tipo de Línea:

Si el texto que vamos a incluir es dinámico (de lo contrario aparece sin activar), esta opción nos permite determinar cómo queremos que aparezcan las líneas (línea única, multilínea o multilínea sin ajuste).

9 Configuración:

Son las clásicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamaño.

9 Otras Propiedades:

Dado que Flash trata los textos como objetos, éstos también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografías son una parte muy importante y deben respetarse.

Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con párrafos (entre otras).

9 A la Izquierda:

Todas las líneas empezarán tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido).

9 Centrar:

Las líneas se distribuyen a la derecha y a la izquierda del punto medio del Párrafo.

9 A la derecha:

Todas las líneas empezarán tan a la derecha como sea posible (dentro del recuadro de texto que hayamos definido).

9 Justificado:

El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus límites.

El resto de opciones nos permiten determinar los márgenes (izquierdo y derecho), los sangrados de párrafo y el espacio interlineal. 2.13.2 TRABAJAR CON TEXTOS. TIPOS DE TEXTOS Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un tratamiento especial, según el tipo que sean. Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el Panel Propiedades sin más que haciendo clic sobre la pestaña "Tipo de texto":

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

2.13.2.1 TEXTO ESTÁTICO El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación. Es importante que no confundamos la palabra "estático" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animación". Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el texto puede estar animado (girar, cambiar de color) y sin embargo ser estático. Así, un recuadro de texto en el que pone "Aprende Flash MX" durante toda la película, es estático, aunque dicho texto cambie de posición, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es estático. Los textos estáticos sólo tienen 2 propiedades extras:

9 Usar Fuentes del Dispositivo: Esta opción permite que la película

Flash emplee las Fuentes que tenga instaladas el usuario que ve la película en su ordenador. Si dicho usuario dispone de las fuentes que hemos utilizado en la película, la verá exactamente como queremos que la vea, pero si no las tiene, Flash empleará la fuente que más se le parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendíamos, por lo que suele ser conveniente mantener esta opción sin seleccionar, aunque esto conlleve un mayor tamaño de la película final. 9 Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que aparezcan en la película (cortarlos, copiarlos) Actívala si lo crees conveniente. 2.13.2.2 TEXTO DINÁMICO El Texto Dinámico en contraposición al estático sí que puede cambiar su contenido (además de estar animado). Su uso es bastante más complejo que el del Texto Estático, ya que cada recuadro de texto Dinámico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programación, lo que nos saca del objetivo de este curso. Un uso común que suelen tener es el de representar los textos introducidos mediante Textos de Entrada. Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el número de líneas que van a tener, se puede introducir texto HTML, se puede añadir fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico. 2.13.2.3 TEXTO DE ENTRADA El Texto de Entrada tiene básicamente las mismas propiedades que el Texto Dinámico, junto con algunas propias de un tipo de texto orientado a la

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

introducción de datos por parte de usuario, como por ejemplo el número máximo de líneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseñas). Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de texto SIN contenido, ya que lo deberá introducir el usuario. Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinámico. 2.14 PANEL ALINEAMIENTO Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cómo colocarlos en el Escenario. Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposición el Panel Alineamiento. Este Panel lo podemos encontrar en el Menú Ventana -> Alinear. Así funciona:

Figura 6. Panel Alineamiento

El Panel Alineamiento permite colocar los objetos tal y cómo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapié en la opción En Escena. Esta opción nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario Si esta opción no está seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en función de ellos. Lo más habitual es seleccionar En Escena , para que los objetos se coloquen según los límites de la película, en el centro del fotograma etc. Conozcamos un poco mejor el Panel Alineamiento y sus posibilidades:

9 Alineamiento:

Sitúa los objetos en una determinada posición del fotograma (si está seleccionado En Escena). Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. Por ejemplo: Si quisiéramos situar un objeto en la esquina inferior izquierda, bastaría pulsar el primer y el sexto botón consecutivamente.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

9 Distribuir:

Sitúa los objetos en el escenario en función de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribución de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botón de la izquierda. Cada uno de los 2 cuadrados se situará en un extremo de la película (uno arriba y otro abajo).

9 Coincidir Tamaño:

Hace coincidir los tamaños de los objetos. Si está activo "En Escena" estirará los objetos hasta que coincidan con el ancho y el largo de la película. Si no está activo, la referencia será el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opción "En Escena" no está activada, al hacer clic en el primer botón de "Coincidir Tamaño", el cuadrado más estrecho pasará a tener la anchura del cuadrado más ancho. Si "En Escena" hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma.

9 Espacio:

Espacia los objetos de un modo uniforme.

2.15 PANEL INFO Además de controlar la posición de los objetos desde el Panel Alineamiento, también podemos hacerlo, de un modo más exacto (más matemático) desde otro panel, el Panel Info. A este Panel se puede acceder desde el Menú Ventana -> Info. Las posibilidades de este Panel son limitadas, pero si buscamos exactitud en las medidas o no nos fiamos de las distribuciones de objetos que crea Flash, debemos acudir a él.

Figura 7. Panel Info

9 Medidas del Objeto:

Aquí introduciremos un número que represente el tamaño de nuestro objeto en la medida seleccionada en las Propiedades del documento. An: hace referencia a la anchura y Al: a la altura.

9 Situación del objeto:

Desde aquí controlamos la posición del objeto en el escenario. La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical). Las medidas también van en función de las medidas elegidas para la película.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

9 Color Actual:

Indica el color actual en función de la cantidad de Rojo (R), Verde (V), Azul (A) y efecto Alfa (Alfa) que contenga. Este indicador puede ser engañoso, el motivo es que indica el color que tiene el objeto por el que en ese momento pasamos el cursor del ratón. Por tanto, podemos tener seleccionado un objeto (haciendo clic en él) y ver en el Panel Info su tamaño y su posición, pero al desplazar el ratón, el valor del color cambiará y ya no indicará el color del objeto seleccionado, sino el del objeto por el que pase el cursor. 9 Posición del Cursor: Indica la posición del cursor. Es útil por si queremos que suceda algo en la película al pasar el cursor justo por una posición determinada o para situar partes del objeto en lugares específicos. 2.16 LAS CAPAS Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y todos hemos visto cómo colocan una hoja semitransparente con dibujos sobre otras y la superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una misma hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar todos juntos? Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos; con INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus distintos fotogramas se reproducirán simultáneamente. Clarifiquemos esto con un ejemplo: Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portería de fútbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante están vacíos). Pues bien, esta película nos mostrará inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portería con el portero, para después (durante los fotogramas del 5 al 10) mostrar la portería sin portero. De este modo la portería es independiente del portero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

Figura 8. Ejemplo de uso de las capas

Otra razón para separar los objetos en capas, es que Flash nos obliga a colocar cada animación distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarán parte de la animación. Si queremos que un objeto NO forme parte de una animación, deberemos quitarlo de la capa en la que se produce dicha animación. Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningún inconveniente, pero si la portería estuviera en la misma capa que el portero, entonces AMBOS objetos se moverían hacia dicho lado, con lo que resultaría imposible que sólo se moviera el portero. La solución es separar los objetos en 2 capas, como ya hemos hecho. Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo, o bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos interese). 2.16.1 TRABAJAR CON CAPAS La vista estándar de una capa es la que muestra la imagen. Veamos para qué sirven los distintos botones y cómo usarlos.

9 Insertar Capas

: Como su nombre indica, sirve para Insertar capas en la escena actual. Inserta capas normales (en el siguiente punto se verán los distintos tipos de capas). 9 Añadir Capa Guía : Inserta una capa de tipo guía. Se tratan en profundidad el siguiente punto. 9 Borrar Capa : Borra la capa seleccionada. 9 Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

La Interfaz de Flash MX

9 Propiedades de Capa: Si hacemos doble clic en el icono

, podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna más de menor importancia.

2.16.2 CAPAS. OPCIONES AVANZADAS

9 Mostrar / Ocultar Capas

: Este botón permite ver u ocultar todas las capas de la película. Es muy útil cuando tenemos muchas capas y sólo queremos ver una de ellas ya que permite ocultar todas a la vez, para después mostrar sólo la actual. Para activar la vista de una capa en concreto (o para ocultarla) basta con hacer clic en la capa correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas" 9 Bloquear Capas : Bloquea la edición de todas las capas, de modo que no podremos modificarlas hasta desbloquearlas. Para bloquear o desbloquear una capa concreta, procederemos como en el punto anterior, clic en el punto o icono "Cerrojo" situados en la capa actual bajo el icono "Bloquear Capas". 9 Bloquear una capa es muy útil cuando tenemos varios objetos juntos y en capas distintas y queremos asegurarnos de que no modificamos "sin querer" alguno de ellos. Tras bloquear su capa podremos trabajar con la seguridad de no modificar dicho objeto, ni siquiera podremos seleccionarlo, de modo que editaremos con mayor facilidad el objeto que queramos. 9 Mostrar/Ocultar capas como contornos : Este botón nos muestra/oculta los contenidos de todas las capas como si sólo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fácil y podremos ver en qué capa está cada uno de ellos. También se puede activar o desactivar para cada capa de un modo similar a los anteriores botones.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Interpolaciones de Movimiento

3 LAS INTERPOLACIONES EN FLASH Las interpolaciones nos permiten crear rápidamente animaciones sin tener que recurrir al método de fotograma a fotograma.

3.1

INTERPOLACIONES DE MOVIMIENTO

Cuando deseamos crear animaciones en las que los objetos se puedan desplazar recorriendo determinados trazados en la escena o se desea que vaya rotando hacia un lado o hacia otro y, en definitiva, cualquier tipo de animación en la que el objeto no se convierte un objeto en otro sino que el objeto es sometido a todo tipo de acciones dinámicas de movimiento, se deberá de utilizar la interpolación de movimiento. Las animaciones por interpolación de movimiento constan de un fotograma inicial y uno final, de manera que todos los fotogramas intermedios son calculados por el programa y están destinados a la generación de movimientos en los objetos. Sus fotogramas intermedios no son fotogramas clave y aparecen coloreados en violeta y recorridos por una flecha negra en el sentido de la reproducción. No hay nada que impida insertar uno o varios fotogramas clave en el interior de este tipo de animaciones. Estos fotogramas clave aparecerán representados con le típico círculo negro en su interior. La interpolación de movimiento sólo es aplicable a los objetos agrupados o a los símbolos. En consecuencia, cualquier objeto dibujado en Flash deberá ser previamente agrupado para que se le pueda aplicar una interpolación de movimiento. En la interpolación de movimiento el objeto final no puede ser un objeto diferente al inicial, con lo cual, el objeto final deberá ser siempre el mismo objeto inicial al cual se le habrá podido aplicar modificaciones de color, transparencia, tamaño y rotación pero nunca cambios de forma.

√ Elaboración de Interpolaciones de Movimiento 1. Lo primero que hay que hacer definir las características gráficas del objeto inicial, como son tamaño, forma, color, transparencia o rotación. Todo esto lo haremos en el primer fotograma de nuestra película. 2. Una vez hecho la anterior vamos a la parte de la línea del tiempo y nos ubicamos en el primer fotograma de la animación y damos un clic derecho para abrir el menú contextual, y de ahí elegimos la opción Crear interpolación de movimiento, como se muestra en la figura:

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Interpolaciones de Movimiento

Figura 9. Creación de Interpolaciones de Movimiento

3. Ahora, vamos a definir el tamaño de nuestra animación, es decir, vamos a definir el número de fotogramas que necesitaremos para realizar la animación. Cabe mencionar que para esto no hay número mínimo o máximo, todo va a depender del tipo y necesidades de nuestra animación. Una vez hecho damos un clic en el fotograma que será el final de la animación y damos F6, de manera que nos aparezcan los fotogramas entre el inicial y final coloreados de violeta y con una flecha en el sentido de la reproducción.

Figura 10. Aspecto de una interpolación de movimiento

4. Lo que resta es definir las características del objeto animación; debemos recordar que el objeto final no diferente al inicial, puesto que no estamos cambiando la características dinámicas del objeto inicial, como son transparencia, rotación, etc.

al final de la debe ser otro forma, sino las color, tamaño,

5. Finalmente reproducimos lo que acabamos de hacer para ver los resultados deseados, con las teclas CTRL + ENTER Vamos a poder insertar tantos fotogramas clave como cambios vayamos a realizar a lo largo de toda la interpolación de movimiento, debemos recordar que los cambios sobre el objeto animado se hacen únicamente en los fotogramas clave. Para insertar los fotogramas clave en lugares específicos de la interpolación de movimiento vamos a mantener oprimida la tecla CTRL damos un clic en el lugar en donde vamos a poner el fotograma clave y tecleamos F6

Todos los objetos gráficos que se dibujen en la escena principal es recomendable que se inserten como símbolos

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

3.2

Ing. Gerardo Avilés Rosas

Interpolaciones de Forma

INTERPOLACIONES DE FORMA

Este tipo de interpolación nos va a permitir crear animaciones en las que unos objetos se transforman gradualmente en otros, lo cual se denomina “morphing” en el lenguaje informático. De esto se deduce que los objetos inicial y final serán diferentes y el primero se convertirá en el segundo a lo largo de una serie de fotogramas. Este tipo de animación no será posible con la interpolación de movimiento, ya que en ésta solo contamos con el objeto que aparece en el primer fotograma y sólo vamos a poder moverlo, cambiarlo de tamaño, color, transparencia, rotarlo, etc., pero nunca convertirlo en otro diferente. La interpolación de forma sólo será posible a partir de objetos editables, es decir, que no estén agrupados ni sean símbolos. Es pues, indispensable trabajar con los objetos tal cual quedan tras dibujarlos con las herramientas del programa o tras separarlos y/o desagruparlos después de una importación. El hecho de que se puedan crear animaciones de interpolaciones de forma para cambiar precisamente de forma, no implica que no se pueda utilizar este tipo de interpolación para realizar animaciones de movimiento, ya que es perfectamente posible que un objeto llegue a convertirse en otro a lo largo de una trayectoria pero, eso sí, la trayectoria deberá ser siempre rectilínea. En cambio, en la interpolación de movimiento podemos hacer que un objeto siga una trayectoria de lo más complicado, con curvas y rectas a su gusto, pero no podemos convertirlo en otro objeto. Este tipo de animación consta de un fotograma clave inicial y otro final y está destinada a crear “morphings”, es decir, formas que se convierten en otras. Todos los fotogramas intermedios son calculados por el programa, aunque podrían denominarse fotogramas clave porque su contenido varía de uno a otro, no lo son en realidad y aparecen coloreados en verde y recorridos por una flecha negra en el sentido de la reproducción.

√ Elaboración de Interpolaciones de Forma Para crear una interpolación de forma se necesitan dos fotogramas clave que contengan respectivamente el objeto inicial y final. Los fotogramas intermedios que haya entre ambos fotogramas clave se rellenarán automáticamente cuando se establezca la interpolación de forma. 1. Lo primero que vamos a hacer es definir las características gráficas del objeto del cual vamos a partir, cabe mencionar que puede ser tanto un elemento gráfico como un texto. 2. Enseguida vamos a definir el tamaño de nuestra animación en fotogramas, como en el caso de las interpolaciones de movimiento no hay un tamaño máximo o mínimo todo dependerá de nuestras necesidades. Una vez determinado el tamaño de la animación damos un

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Interpolaciones de Forma

clic en dicho fotograma y tecleamos F6. Aún no hemos definido el tipo de animación, razón por la cual al llegar a éste punto vamos a notar que los fotogramas entre el inicial y final estarán en gris, indicando que se trata de fotogramas sin ningún tipo de animación.

Figura 11. Creación de una Interpolación de Forma

3. Nos posicionamos en el último de los fotogramas de la animación y vamos a definir las características del objeto final, dichos objetos no deben tener ninguna relación, deben de ser totalmente diferentes: por ejemplo, de un gráfico a un texto, de un texto a un gráfico de un gráfico a otro gráfico o de un texto a otro texto, etc.

Figura 12. Definición de objeto final de la interpolación

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Interpolaciones de Forma

4. Para terminar, seleccionamos los fotogramas en gris y en la parte inferior aparece un panel de propiedades. Cómo lo que hemos seleccionado son fotogramas, aparecerán entonces las propiedades de fotograma; aquí nos vamos a la parte que dice Animar y seccionamos FORMA, como se muestra en la figura:

Figura 13. Interpolación de Forma creada

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Las Acciones en Flash

4 LAS ACCIONES EN FLASH Hasta ahora hemos visto algunas de las formas que ofrece Flash para la creación de películas. Sin embargo, dichas animaciones se ejecutan de forma automática y secuencial. Flash permite añadir a las películas acciones que nos permitirán entre otras cosas, saltar automáticamente a otros fotogramas o escenas y utilizar el teclado o el ratón para ejecutar estas acciones y dotar de interactividad a la película. Flash proporciona una multitud de acciones predefinidas que se pondrán insertar fácilmente en la película a través de un panel específico (Panel de Acciones).

4.1

¿Qué son las acciones?

Son como una especie de órdenes que Flash ejecutará cuando el cabezal de reproducción llegue a ellas. Cada tipo de acción obligará al programa a realizar algo en concreto, por ejemplo ir de un fotograma a otro, pasar de una escena a otra, pasar de una película a otro, detectar si un fotograma se ha cargado, detener la reproducción de un clip, detener un sonido, etc. Todas estas acciones están escritas en un lenguaje de programación específico (ActionScript) y aparecen automáticamente en el Panel de Acciones en forma de scripts cuando son llamadas. Además Flash brinda a los programadores expertos la posibilidad de crear sus propios scripts de acciones independientemente de los que ya vienen predeterminados, lo cual confiere a Flash una potencia prácticamente ilimitada.

4.2

¿Dónde se ubican las acciones?

Las acciones se pueden colocar en los fotogramas clave y en los objetos, que pueden ser: botones o instancias de clips de película. ƒ

Las acciones ubicadas en fotogramas clave se ejecutarán cuando el cabezal de reproducción de la línea de tiempo pase por ellos.

ƒ

Las acciones ubicadas en botones, requerirán el concurso del usuario para que se ejecuten, es decir, se deberá pasar el cursor por encima o hacer clic en el botón para que pase algo.

ƒ

Las acciones ubicadas en los clips de película se ejecutarán cuando se cargue el clip o cuando se ejecute un fotograma determinado.

Es perfectamente válido añadir más de una acción a un fotograma u objeto. Cuando un fotograma contenga una o más acciones definidas, mostrará una pequeña <> en su interior.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Arranque o Parada de Películas

5 PROVOCAR ARRANQUE O PARADA DE LAS PELÍCULAS Las acciones más ocupadas frecuentemente son Play y Stop. Como se sabe, cuando se inicia la reproducción de una película, ésta pasa por todos los fotogramas hasta llegar al final, siempre y cuando no se diga lo contrario con alguna acción, como ya hemos visto. Básicamente y como su nombre lo indica, estas acciones están destinadas respectivamente a arrancar la reproducción de una película o detenerla. En los ejercicios elaborados hasta ahora, la reproducción de las animaciones siempre se produce de manera cíclica y no hay forma de pararla. Pues bien, mediante la acción Stop debidamente ubicada en el último fotograma clave de una animación, ésta se detendrá en cuanto alcance dicho fotograma. Otra de las utilidades de la acción Stop consiste en colocarla en el primer fotograma de una película. De este modo, la película no se reproducirá automáticamente y será necesario pulsar, por ejemplo, un botón para que se desencadene la reproducción. Todas las películas se reproducen automáticamente cuando se pulsa Ctrl + Intro. Ahora ya se sabe como pararlas y, en consecuencia, es necesario contar con alguna acción que permita arrancarlas de nuevo. De eso se encarga la acción Play, no tiene parámetros y se encuentra en el grupo de Acciones Básicas. No obstante, las acciones Play o Stop se utilizan normalmente para controlar los clips de película. ¾ Si se inserta la acción Play o Stop en un fotograma, se generarán respectivamente unas expresiones del tipo play(); o stop(); ¾ Si se inserta la acción Play o Stop en un botón, se generarán respectivamente unas expresiones del tipo: on (press){

on (press){

play();

stop();

}

}

¾ Si se inserta la acción Play o Stop en una instancia de clip de película, se generarán respectivamente unas expresiones del tipo onClipEvent(load){ play(); } onClipEvent(load){ stop(); }

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Carga o Descarga de Películas

6 CARGAR Y DESCARGAR PELÍCULAS ADICIONALES Internet es todavía lento y todo lo que contribuya a aumentar su velocidad siempre será bien recibido. En este sentido, resultaría ilógico tener que esperar mucho tiempo a que se cargue una página que contiene cuatro películas individuales si el usuario sólo va a ver dos de ellas, o una, o ninguna. Para solucionar eso, Flash ofrece las acciones Load Movie y Unload Movie. Estas acciones se pueden incorporar, por ejemplo, en el último fotograma clave para que al llegar a éste se produzca la carga automática de la siguiente película y así sucesivamente. Igualmente, se pueden asignar las acciones de carga y descarga de película a una serie de botones en la escena mediante los cuales el usuario podrá hacer aparecer o desaparecer las películas cuando quiera.

6.1

Para cargar una película

En el panel de acciones se selecciona la acción Load Movie en el grupo de Acciones Básicas. Si se trata de un fotograma, aparecerá: loadMovieNum(“”,0); Si se trata de un botón aparecerá: on (release) { loadMovieNum (“”,0) } En un clip de película aparecerá: onClipEvent (load){ loadMovieNum (“”,0); En cualquier caso, se selecciona la expresión loadMovieNum (“”,0); para que aparezcan los campos de parámetros en la parte inferior del panel. En el campo de URL se deberá especificar un URL absoluto o relativo para el archivo SWF que se desee cargar. En el campo Ubicación se dispone de dos opciones: Nivel y Destino. El nivel hace referencia al plano que ocupa la película. La película principal siempre está en el nivel 0 y cada nueva película que cargue irá un nivel por encima (tal como si fueran capas). Además, la película que esté cargada en el nivel 0 establece la velocidad y tamaño de los fotogramas y color de fondo para todas la demás películas cargadas. ¾ Así pues, si en el campo Ubicación se elige Nivel, en el campo de la derecha se deberá especificar en que nivel debe de cargarse la película. Si se elige el nivel 0 se sustituirá la película que se encuentre en dicho momento en ese nivel. Igualmente, cualquier película en otro nivel, será sustituida por otra película que se cargue en el mismo nivel. ¾ Si en Ubicación se elige la opción Destino, se podrá conseguir que la película que se va a cargar herede las propiedades de posición, rotación y escala del clip de película de destino, el cual debe de estar especificado con un nombre.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

6.2

Ing. Gerardo Avilés Rosas

Control de Clips

Para descargar una película

Descargar una película significa eliminarla de la reproducción. Para ello se utiliza la acción Unload Movie. Como único parámetro, se deberá especificar la ubicación donde se encuentra cargada (nivel o destino).

7 CONTROLAR CLIPS DE PELÍCULA Los clips de película poseen su propia línea de tiempo y se reproducen amparados en el entorno de otras películas. Efectivamente, cuando se ubica un clip de película en la escena principal ocupa únicamente un fotograma, y este clip sólo se reproduce cuando se activa la reproducción de la película principal que lo contiene. Según lo anterior, parece difícil poder controlar la reproducción de esos clips de película desde la película principal y viceversa. Sin embargo si se utiliza la acción Tell Target, se puede enviar cualquier a la línea de tiempo de una instancia en el escenario. El procedimiento para añadir acciones Tell Target a botones, fotogramas y clips de película es similar al que se ha estado viendo hasta ahora. Si se trata de un fotograma, se deberá hacer doble clic sobre él para abrir el panel de acciones. Si se trata de un botón o de un clip de película, se deberá hacer clic directamente sobre él con el botón derecho y elegir la opción Acciones del menú contextual. En cualquier caso, una vez en el panel de acciones, se deberá hacer doble clic sobre la acción Tell Target y ésta aparecerá en el recuadro de la derecha en el panel. Si la acción que se está insertando es en un fotograma, aparecerá una expresión del tipo: tellTarget(“”){ } Si se trata de un botón aparecerá una expresión del tipo: on(release){ tellTarget(“”){ } } Si se trata de un clip de película, aparecerá una expresión del tipo: onClipEvent(load){ tellTarget(“”){ } } En cualquier caso, se deberá seleccionar la línea tellTarget(“”){ y complementar el campo destino, que es el único disponible para esta acción. En este campo se deberá especificar el nombre de instancia que posee el clip a controlar. Dicho nombre no es el que tiene el clip en la biblioteca sino un nombre que hay que darle a la instancia de ese clip a través del panel Instancia. Finalmente, a continuación de la acción tellTarget habrá que insertar al tipo de acción que deseamos que se ejecute, por ejemplo, arrancar el clip, pararlo, avanzar un fotograma hacia delante, etc.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Los Botones

8 LOS BOTONES Un botón es un pequeño clip de película interactivo que contiene únicamente cuatro fotogramas. Cuando se entra en la pantalla de edición de botones, la línea de tiempo muestra cuatro fotogramas, denominados: Reposo, Sobre, Presionado y Zona Activa, tal y como se muestra en la figura siguiente:

Figura 14. Aspecto del panel de creación de botones

¾ El fotograma Reposo debe contener el aspecto gráfico del botón cuando no está pulsado ni tiene cursor del ratón encima. ¾ El fotograma Sobre debe contener el aspecto gráfico del botón cuando el cursor del ratón está encima de él. ¾ El fotograma Presionadodebe contener el aspecto gráfico del botón cuando se hace clic sobre él con el ratón. ¾ El fotograma Zona Activa es en donde se define la zona activa del botón, es decir, la zona que será sensible a los clics del ratón o al paso de éste por encima.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Acciones en Links

8.1 Acciones que se deben incorporar en un botón gráfico Una vez que hemos colocado una instancia del botón en la escena principal, lo que corresponde es añadir las acciones necesarias para activar una animación, ya sea por interpolación de forma o de movimiento. Lo primero que vamos a hacer es seleccionar el botón y en la parte inferior mostrar el panel acciones, como se muestra en la figura:

Figura 15. Botón gráfico

La primera de las acciones que vamos a programar es la que se refiere al arranque de la animación, para lo cual es necesario que programemos los eventos del ratón. Estando en el modo experto vamos a programar la acción que se refiere a los eventos programables del ratón, la acción On mouse event, como se trata de decidir en que momento debe de activarse la animación, vamos a programar el evento Presiona; una vez que escrito esto, vamos a programar la parte en que el usuario al dar clic va a arrancar la animación, para lo cual debemos de indicar desde que fotograma deseamos que se comience a reproducir. Si tomamos en cuenta que estamos ubicados en el primer fotograma de nuestra animación, lo lógico es que la reproducción comience a partir del segundo fotograma. La manera de indicarle al programa que la animación debe de iniciarse desde el segundo fotograma es mediante la acción Go to y ahí vamos a programar un gotoAndPlay y le vamos a indicar que ese goto lo dirija al fotograma 2. Una vez hecho esto, debemos de indicarle al programa, que debe de pasar una vez que se ha reproducido la animación. Vamos a utilizar un segundo evento del ratón para programar esta acción, pues debemos tener en cuenta que el usuario tiene el control sobre el mouse. En este caso vamos a programar un on mouse event y a diferencia del primer

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Acciones en Links

evento ahora vamos a programar la acción situar sobre objeto, pues debemos de recordar que la animación debe de terminarse aun cuando el usuario haya retirado el mouse de encima del botón y deberá regresar a su posición inicial cuando el usuario vuelva a posicionarse sobre el botón. Finalmente vamos a indicarle el regreso a la posición inicial después de regresar el ratón encima del botón, para lo cual vamos a utilizar nuevamente la acción goto pero a diferencia del anterior vamos a programar un gotoAndStop e indicarle que debe de regresar al fotograma 1 en cuanto el usuario se coloque encima del botón en la escena principal.

Figura 16. Acciones incorporadas a un botón gráfico

Con esto hemos terminado lo necesario para programar las acciones de arranque y paro de una animación.

8.2 Acciones que se deben de incorporar en un link de Flash Vamos a proceder de la misma manera que en el anterior, con la diferencia de que en lugar del goto, vamos a programar un getURL. Lo primero que vamos a hacer es programar en el evento on mouse event el evento presionar. Ahora, en lugar de programar la acción goto, vamos a insertar una nueva acción, la que se refiere a getURL. Como se puede observar la segunda línea muestra un expresión del tipo getURL(“”); que es la que nos permitirá especificar el nombre de una página Web en formato HTML o de una película Flash en formato SWF (Shockwave). Evidentemente si la acción no se inserta en un botón, línea no será la segunda sino que será la primera y la única. Existen 3 campos para rellenar.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Acciones en Links

En URL se deberá especificar la ruta absoluta cuando se trate de un archivo externo, como por ejemplo http://www.unam.mx o una ruta relativa cuando se trate de un archivo contenido en la misma carpeta. Una ruta absoluta hace referencia a la dirección completa de una página Web, con el nombre del servidor, el nombre del archivo, la ruta, etc. Una ruta relativa es una versión abreviada de la dirección completa que le permite describir la ubicación de un archivo en función de otro. Eso le permitirá, por ejemplo, probar la carga de una página Web en el ordenador sin necesidad de estar conectado a Internet. La casilla Expresión, le indica a Flash que lo que se ha introducido en este campo no es una ruta sino una expresión. Eso permitirá, por ejemplo, acceder a un archivo determinado en función de una variable. En el campo Ventana, se debe pulsar el menú desplegable para abrir una lista en donde se podrá visualizar el archivo llamado: o Con _self aparecerá una nueva ventana del navegador. o Con _blank aparecerá en una nueva ventana del navegador. o Con _parent aparecerá en el mismo entorno que el fotograma actual. o Con _top aparecerá en el entorno del fotograma de nivel superior en la ventana actual del navegador. El campo Variables se utiliza para enviar variables para la película cargada a la ubicación que aparece en el campo URL. Enviar con GET adjunta las variables al final del URL. Enviar con POST envía las variables en un encabezado separado para, de este modo, poder enviar cadenas de mayor longitud.

Figura 17. Acciones para un link en Intenet

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Capas Guía de Movimiento

9 CAPAS GUÍA DE MOVIMIENTO Un tipo de capas muy interesante son las capas guía de movimiento. Este tipo especial de capas se utiliza para dibujar una o varias líneas que se encargarán de marcar la trayectoria de una animación. De este modo, podemos trazar una línea recta o curva a mano alzada y luego haremos, por ejemplo, que un objeto se mueva siguiendo exactamente el camino trazado por esa línea. El uso de capas guía de movimiento también está íntimamente ligado a la animación por interpolación, es decir, aquel tipo de animación en el que se definen los fotogramas primero y último y los fotogramas intermedios los calcula el programa. Efectivamente, lo que se hace es crear una animación por interpolación de movimiento, y en lugar de que se desarrolle siguiendo una línea recta, se provoca que vaya siguiendo la forma de un trazo dibujado por nosotros. De este modo podemos conseguir que los objetos se muevan y transformen siguiendo trayectorias predefinidas a nuestra voluntad.

9.1 Procedimiento movimiento

para

elaborar

capas

guía

de

Para lograr que un objeto recorra un trazado especial previamente determinado necesitamos crear una capa especial que se denomina “capa guía” y que controlará los objetos de todas las capas que se encuentren asociadas a esta capa de guía. Viene a ser algo así como crear las vías para que luego el tren corra por encima de ellas. El procedimiento es el siguiente: 1. Crear una interpolación de movimiento que contenga el objeto al que queremos hacer seguir un camino determinado. No es necesario que en esta interpolación el objeto realice todavía ningún movimiento, es decir, basta con crear la interpolación con el número de fotogramas que se desee pero sin desplazar el objeto de su posición inicial. 2. Seguidamente hay que seleccionar la capa que contiene la interpolación y hacer clic en el icono que aparece en la parte inferior de la lista de capas de la escena, dicho icono es el que simula una hoja con un signo de más y una greca. Por encima de la capa actual aparecerá la capa guía y aquélla quedará vinculada a ésta.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Capas Guía de Movimiento

Figura 18. Creación de una capa guía

3. La capa de guías ha quedado seleccionada automáticamente y lista para que dibujemos en ella. Pues bien, seleccionamos la herramienta lápiz y trazamos en la pantalla el recorrido que se desea que luego siga el objeto de la interpolación.

Figura 19. Aspecto de la guía de movimiento

4. Bloqueamos la capa de guía para evitar editarla accidentalmente. 5. Una vez creada la capa guía, vamos a poner los objetos sobre ella, antes que nada hay que asegurarnos que la opción Ver/Ajustar a objetos este activada. 6. A continuación, vamos a seleccionar el primer fotograma de la animación en la capa vinculada, no en la de guía y arrastramos el objeto hasta que su eje de simetría encaje con el principio de la línea que se trazó con anterioridad

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Capas Guía de Movimiento

7. Ahora seleccionamos el último fotograma de la animación y arrastramos el objeto que contiene hasta que su eje de simetría encaje con el punto final de la capa guía.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Capas de máscara

10LAS CAPAS DE MÁSCARA Una capa de máscara es un tipo especial de capa que permite mostrar y ocultar a voluntad elementos que se encuentran en capas ubicadas por detrás de la capa de máscara. Así pues, una capa de máscara que contenga, por ejemplo un círculo relleno, se convierte en una especie de agujero por el que se va a ver lo que haya por debajo. Por este mismo motivo, todas las zonas de la capa de máscara que no tengan ninguna zona dibujada, ocultarán los objetos que se encuentren en las capas subyacentes. Estos agujeros que provocan en la capa de máscara todos los objetos que se dibujen en ella, pueden ser objetos estáticos pero también pueden ser objetos animados, cosa que permitirá crear interesantes efectos, al poder, por ejemplo, visualizar las cosas a través de un agujero que se mueve. Una capa de máscara sólo afecta a las capas que tenga vinculadas y no afecta en absoluto a las capas no vinculadas aunque éstas se encuentren por debajo de la capa de máscara. El procedimiento a seguir en este caso es el siguiente: 1. Dibujar lo que se desee en enmascarar en la capa normal por defecto de la escena.

Figura 20. Objeto inicial para la capa máscara

2. Crear la capa máscara, para bastará con agregar una nueva capa que se colocará por encima de la capa actual: 3. Dibujar en la capa máscara el objeto que va a agujerearla.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Capas de máscara

Figura 21. Objeto que va a enmascarar

4. Activar el efecto de máscara, para lo cual nos vamos a ubicar en la capa donde tenemos la máscara y vamos a dar un clic derecho sobre la misma para abrir el menú contextual y de ahí vamos a seleccionar el efecto máscara, como se muestra en la figura:

Figura 22. Propiedad máscara de las capas

5. Al aplicar el efecto, obtendremos lo siguiente:

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Figura 23. Aspecto final de la capa máscara

Ing. Gerardo Avilés Rosas

Capas de máscara

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Menús desplegables

11DISEÑO DE MENÚS DESPLEGABLES Lo primero que vamos a hacer es diseñar el botón de MENÚ y las opciones (botones) que desplegará dicho menú. Botón MENÚ, este botón sólo tendrá 2 cambios de aspecto gráfico, uno que corresponde a su apariencia en reposo y el que corresponde a su apariencia sobre (la apariencia del botón en el estado presionado será la misma que en sobre, porque se trata de un menú que se desplegará cuando nos posicionemos con el cursor sobre él, no cuando demos un clic sobre el).

Figura 24. Menús desplegables

Ahora vamos a definir la apariencia de los botones que serán desplegados por el menú principal, cada uno de ellos se va a programar como se han programado hasta ahora los botones y aquí sí vamos a definir la apariencia gráfica del botón en sus tres estados: reposo, sobre y presionado (aún no hemos definido la zona activa). NOTA: Una vez que hemos diseñado el primer botón vamos a seleccionarlo de la biblioteca y con un clic derecho vamos a utilizar la opción duplicar, pues recordemos que se trata de un menú desplegable en el que su “opciones” debe de ser muy parecidas entre sí y lo único que cambia es el texto que hay en cada uno; de esta manera, al duplicar, tendremos exactamente el primer botón diseñado y tan solo bastará con editar el texto que hay dentro de él.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Menús desplegables

Figura 25. Aspecto de las opciones del menú

Ahora vamos a colocar los elementos creados en un clip de película de tan sólo dos fotogramas, uno de ellos será el que contenga SÓLO AL MENÚ y el otro contendrá al MENÚ CON TODO Y SUS OPCIONES.

Figura 26. Menú con las opciones a desplegar

Vamos ahora a proceder a ubicar las acciones en los fotogramas y en los botones. Lo primero que vamos a hacer es colocar un acción STOP en el fotograma 1 del clip de película.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Menús desplegables

Figura 27. Acciones para el menú desplegable

Estando en el primer fotograma vamos a ubicar dos acciones básica en el botón MENÚ, todo ello para controlar la aparición o permanencia de los botones en pantalla. Lo que debe hacer el menú es que cuando el usuario coloque el cursor sobre el botón debe forzosamente desplegar las opciones que tiene contenidas, esto lo vamos a hacer al insertar un evento de ratón (on mouse event) con el evento situar sobre objeto (rollover), ahora lo que tiene que hacer es mandar al segundo fotograma, para lo cual vamos a insertar la acción goto pero vamos a modificar su TIPO y vamos a seleccionar siguiente fotograma (nextFrame()). Ahora bien, cuando el usuario retire el cursor del menú, lo que tiene que pasar es que regresemos al fotograma 1, pues nos hemos retirado del campo de acción del botón menú; para esto vamos a insertar nuevamente un evento de ratón (on mouse event) con el evento situar fuera de objeto (rollout), además agregaremos la acción gotoAndStop que regrese al fotograma 1.

Figura 28. Acciones (cont.)

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Menús desplegables

En el fotograma 2 vamos a insertar los acciones necesarias para controlar el funcionamiento de los botones del menú. Básicamente se van a insertar las mismas acciones que se insertaron en el botón MENÚ del fotograma 1, tal y como se hizo en el punto anterior, la explicación es la misma, sin embargo, vamos a insertar una nueva acción que nos permitirá abrir una ventana del navegador, dicha acción es getURL (la explicación del funcionamiento de esta acción se encuentra en el material de Acciones que se deben de incorporar a un link en Flash), de manera que las acciones a insertar son:

on (rollover) { gotoAndStop (2); } on (rollout) { gotoAndStop(1); } on (press) { getURL (“http://www.unam.mx”); }

Una vez hecho esto, vamos a asignar las mismas características a los botones siguientes, para lo cual vamos a seleccionar las acciones del primer botón y las vamos a copiar, después vamos a abrir las acciones del siguiente botón para pegar las acciones siguientes en donde solo vamos a cambiar la acción de getURL.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Figura 29. Aspecto final del diseño de menús

Ing. Gerardo Avilés Rosas

Menús desplegables

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

12

Ing. Gerardo Avilés Rosas

Publicación de Películas

PUBLICACIÓN DE PELÍCULAS

Uno de los objetivos de la publicación de la película es crear archivos necesarios para que ésta pueda visualizarse desde Internet. No obstante, a través de la orden Publicar, Flash también permite crear archivos con otros tipos de formatos. En total, Flash puede publicar los siguientes formatos: Flash (.swf), HTML (.html), GIF (.gif), JPEG (.jpg), PNG (.png), Proyector Windows (.exe), Proyector Macintosh (.hqx), Quicktime (.mov) y RealPlayer (.smil) La principal diferencia entre el Publicar una Película y Exportar una Película es que, en el primer caso es posible crear varios tipos de archivos de salida a la vez, mientras que en el segundo caso se crea un tipo de archivo cada vez, y además no está disponible el formato HTML para la WEB.

12.1 CONFIGURACIÓN DE LA PUBLICACIÓN Antes de publicar la película hay que seleccionar la opción Archivo/Configuración de la Publicación con objeto de elegir los formatos de salida que deseamos obtener. En la ventana que se abrirá disponemos por defecto de 3 pestañas. La pestaña Formatos es la que nos va a permitir elegir los tipos de formatos que deseamos que Flash publique de un solo golpe. Para cada formato que se active aparecerá su correspondiente pestaña de opciones para la publicación (excepto para los proyectores Windows y Macintosh). De momento sólo aparecen las pestañas Flash y HTML Cada formato de archivo se almacenará por defecto con el nombre de la película seguido de la extensión que le corresponda. Si se desea asignar nombres diferentes se debe desactivar la casilla Usar nombres predeterminados en la ventana de configuración de la publicación.

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Publicación de Películas

12.2 ACCIÓN DE PUBLICAR Una vez realizada la configuración de la publicación, para publicar la película se puede elegir la opción Archivo/Publicar, pulsar directamente F12 o pulsar el botón Publicar en la propia ventana de configuración que hemos visto.

12.3 PUBLICACIÓN PARA LA WEB Para publicar una película de Flash en Internet hacen falta dos archivos. El archivo reproductor de flash en formato .swf y un documento.html que actuará como soporte para poder visualizar el archivo .swf desde un navegador de Internet. PROCEDIMIENTO PARA HACER UNA PUBLICACIÓN COMPLETA EN WEB Lo primero que se recomienda es crear una carpeta nueva que es la que contendrá todo nuestro proyecto WEB, para que aquí coloquemos los archivos Flash que se vayan creando, los archivos HTML que son los que nos sirven de soporte para visualizar las animaciones Flash, los archivos de imágenes, los fondos, etc.



Proyecto

Figura 30. Aspecto de la carpeta de proyecto

Ahora bien, vamos a trabajar con archivo en Flash de ejemplo que se va a llamar Entrada, debemos de tener en cuenta que Flash guarda los archivos con extensión .fla, de manera que nuestro archivo de ejemplo estará almacenado en la carpeta de Proyecto como Entrada.fla. Una vez que se ha configurado la publicación y que hemos publicado, dependiendo del tipo de archivos que hayamos configurado para publicación, serán los nuevos archivos que se generen; en este caso y como vimos con anterioridad, para la publicación en WEB se requieren de sólo dos archivos, el archivo .swf y el archivo .html, de manera que serán solo esos los que se generen en la carpeta

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Publicación de Películas

Proyecto. Después de dar F12, en la carpeta de nuestro proyecto vamos a poder visualizar los siguientes archivos:

Entrada.html Entrada.fla Entrada.swf Figura 31. Contenido de la carpeta proyecto

¾ Entrada.fla, es el archivo que nos permite ver cómo está la película y modificarla, es similar a un archivo fuente.

Figura 32. Archivo .fla

¾ Entrada.swf, es el archivo que genera Flash cada vez que tecleamos CTRL + ENTER, corresponde a la película ya publicada y sólo permite su visualización pero no su edición, es una especie de archivo ejecutable.

Figura 33. archivo .swf

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Publicación de Películas

¾ Entrada.html, es el otro archivo de publicación, con formato HTML, que nos va a permitir incorporar el contenido Flash en una página creado por nosotros o en un editor HTML y adecuarla a nuestras necesidades.

Figura 34. Archivo .html

Como podemos notar, este último archivo ya nos está generando un contenido WEB, sin embargo no se cuenta aún con ningún formato para presentación, de manera que el siguiente paso es crear nuestra propia Página WEB, para lo cual vamos a elaborar un pequeño archivo en el bloc de notas que va a contener las características de nuestra primera página escrita en lenguaje HTML, todo esto también lo vamos a poder realizar en un editor de código HTML, pero la desventaja que tienen este tipo de editores es que generan mucho código “basura”, de manera que siempre vamos a crear nosotros la plantilla y posteriormente podremos llevarla a FrontPage (de Office) o a Dreamweaver (de Macromedia), ambos editores de código HTML, que nos ahorran mucho del trabajo de elaboración de una página WEB.

Etiqueta para ponerle un fondo a nuestra página WEB

Cuerpo de la página, va a contener todos los elementos de la página WEB que diseñamos

Figura 35. Plantilla HTML

Cabeceras de inicio

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Publicación de Películas

Cabe mencionar los archivos se van a guardar entre comillas: “proyecto1.html”, con su nombre y la extensión, en este caso .html El código anterior, lo vamos a poder ver ya en nuestra carpeta de la siguiente manera:

Figura 36. Contenido de la carpeta proyecto con los nuevos archivos HTML

Lo vamos a poder visualizar al dar doble clic sobre el archivo proyecto1.html, pero aún no contendrá nada, pues solo le hemos puesto titulo y le definimos el fondo (cabe mencionar que el archivo fondo está almacenado en la misma carpeta que el proyecto y que en la codificación se tiene una ruta absoluta para su ubicación).

Figura 37. Visualización de la plantilla HTML en el navegador

Vamos a incorporar la animación Flash que hemos publicado, para tener la presentación final en nuestra página WEB, para lo cual vamos a regresar a la carpeta Proyecto y seleccionamos la el archivo Entrada.html (archivo

Facultad de Ingeniería Coordinación de Programas de Atención Diferenciada para Alumnos

Ing. Gerardo Avilés Rosas

Publicación de Películas

que se generó en el proceso de publicación), seleccionado, vamos a dar un clic derecho, para abrir el menú contextual y ahí vamos a elegir la opción Abrir con/Bloc de Notas.

Figura 38. Abrir un archivo HTML con el bloc de notas

Desplegándose la siguiente pantalla de editor de Bloc de Notas:

Figura 39. Contenido del archivo HTML creado por Flash en la publicación

Des este código que nos sirve para terminar nuestra página WEB, vamos a ubicar el código que se encuentre entre las etiquetas