UNIVERSIDAD AUTÓNOMA DE TAMAULIPAS UNIDAD ACADÉMICA MULTIDISCIPLINARIA DE CIENCIAS, EDUCACIÓN Y HUMANIDADES
MULTIMEDIA 2
CATEDRÁTICO Mtro. Daniel Desiderio Borrego Gómez
Cd. Victoria, Tam. México, Agosto de 2011
UAMCEH Multimedia 2
Índice ÍNDICE................................................................................................................................................................. 2 1 INTRODUCCIÓN........................................................................................................................................... 5 Conceptos Básicos..................................................................................................................................................................5 Multimedia....................................................................................................................................................................5 ¿Qué es la animación gráfica en Internet?...................................................................................................................5 ¿Qué es un plug-in?......................................................................................................................................................5 El Formato .FLA.............................................................................................................................................................5 Archivo .SWF ................................................................................................................................................................6 Pixel ..............................................................................................................................................................................6 RVA ...............................................................................................................................................................................6 Color Hexadecimal........................................................................................................................................................7 Imagen Rasterizada.......................................................................................................................................................7 Imagen vectorial...........................................................................................................................................................7 Condiciones de Diseño ..........................................................................................................................................................8 Tipografías predeterminadas para texto .....................................................................................................................8 Tamaños de visualización de monitores.......................................................................................................................8 Flash Player.............................................................................................................................................................................9 ¿Cuál es la diferencia entre Flash Player y Shockwave Player? ............................................................................................9
2 ANTECEDENTES FLASH............................................................................................................................ 10 Adobe Flash..........................................................................................................................................................................10 Flash: Pasado, Presente y Futuro.........................................................................................................................................10 Un poco de historia. Ciclo de vida de Flash..........................................................................................................................10 ..............................................................................................................................................................................................11 Situación actual. Las RIA y los avances en usabilidad..........................................................................................................12 Proyección y Actualidad.......................................................................................................................................................12
3 CONOCIENDO FLASH................................................................................................................................. 13 Requisitos del sistema para la instalación de flash..............................................................................................................13 Microsoft Windows.....................................................................................................................................................13 Macintosh...................................................................................................................................................................13 Instalación y activación de Flash..........................................................................................................................................13 Utilización de la página de inicio..........................................................................................................................................14 Espacio de trabajo de Flash .................................................................................................................................................15 La Barra de Menús ....................................................................................................................................................16 Barra de Herramientas................................................................................................................................................17 Creación de un documento nuevo.......................................................................................................................................18 Apertura de un nuevo documento.............................................................................................................................18 Definición de las propiedades del documento.....................................................................................................................18 Utilización de la cuadrícula, las guías y las reglas.................................................................................................................20 Utilización de la cuadrícula.........................................................................................................................................21 Para mostrar u ocultar la cuadrícula de dibujo:.........................................................................................................21 Para establecer preferencias para la cuadrícula:........................................................................................................21 Utilización de las guías..........................................................................................................................................................21 Para mostrar u ocultar las guías de dibujo:................................................................................................................22 Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
2
UAMCEH Multimedia 2
Para activar o desactivar el ajuste a las guías:............................................................................................................22 Para mover una guía:..................................................................................................................................................22 Para bloquear las guías:..............................................................................................................................................22 Para establecer preferencias para las guías:..............................................................................................................22 Para quitar guías:........................................................................................................................................................23 Utilización de las reglas........................................................................................................................................................23 Para mostrar u ocultar las reglas:...............................................................................................................................23 Para especificar la unidad de medida de las reglas para un documento:..................................................................23 Utilización de la barra de herramientas...............................................................................................................................24 Herramienta Lazo: ......................................................................................................................................................25 Selección de objetos.............................................................................................................................................................26 Funcionamiento de los vectores..........................................................................................................................................29 Edición de contornos............................................................................................................................................................29 Mover un vértice..................................................................................................................................................................30 Curvar un segmento.............................................................................................................................................................30 Añadir un vértice..................................................................................................................................................................30 Suavizar y enderezar contornos...........................................................................................................................................30
4 UTILIZACIÓN DEL ESCENARIO............................................................................................................... 31 Aumento y reducción de la visualización.............................................................................................................................31 Desplazamiento de la vista del escenario............................................................................................................................32 Utilización de la línea de tiempo..........................................................................................................................................32 Representaciones de animaciones en la línea de tiempo....................................................................................................33 Velocidades de fotogramas..................................................................................................................................................35 Modificación del aspecto de la línea de tiempo..................................................................................................................35 Desplazamiento de la cabeza lectora...................................................................................................................................35 Cambio de la visualización de fotogramas en la línea de tiempo........................................................................................36 Para cambiar la visualización de los fotogramas en la línea de tiempo:..............................................................................36 Trabajo con fotogramas en la línea de tiempo....................................................................................................................37 Utilización de capas..............................................................................................................................................................38
5 CREACIÓN DE CAPAS................................................................................................................................ 39 Edición de capas...................................................................................................................................................................39 Utilización de los paneles y del inspector de propiedades..................................................................................................40 Acerca del inspector de propiedades.........................................................................................................................40 Panel Biblioteca....................................................................................................................................................................40 Panel Acciones......................................................................................................................................................................40 Utilización de los paneles.....................................................................................................................................................41 Para abrir un panel:....................................................................................................................................................41 Para cerrar un panel, siga uno de estos procedimientos:..........................................................................................41 Para utilizar el menú de opciones de un panel:..........................................................................................................41 Para cambiar el tamaño de un panel:.........................................................................................................................41 Para expandir o contraer un panel a su barra de título:............................................................................................42 Para cerrar todos los paneles:....................................................................................................................................42 Organización de los paneles.......................................................................................................................................42 Para mover un panel:..................................................................................................................................................42 Para añadir un panel a un grupo de paneles existente:.............................................................................................42 Para hacer flotar un panel:.........................................................................................................................................42 Para crear un grupo de paneles:.................................................................................................................................42 Visualización de la biblioteca para un documento...............................................................................................................42
6 SONIDO EN FLASH..................................................................................................................................... 43 Trabajar con Sonidos............................................................................................................................................................43 Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
3
UAMCEH Multimedia 2
Importar Sonidos .................................................................................................................................................................43 Propiedades de los Sonidos..................................................................................................................................................43 Insertar un Sonido................................................................................................................................................................45 Editar un Sonido...................................................................................................................................................................46
7 ACTIONSCRIPT........................................................................................................................................... 47 ¿Adonde van dirigidos los ActionScripts?............................................................................................................................47 ¿Cómo Usar ActionScript?....................................................................................................................................................48 ActionScript comunes en flash...................................................................................................................................48
8 INTEGRACIÓN CON DREAMWEAVER.................................................................................................. 49 ¿Que es Dreamweaver?.......................................................................................................................................................49 La barra de herramientas Insertar o panel de objetos ........................................................................................................49 Insertar Película Flash ..........................................................................................................................................................50 Quitar la película de Flash....................................................................................................................................................50
9 PUBLICACIÓN Y REALIZACIÓN DE UN AUTORUN............................................................................50 Prueba de la aplicación.........................................................................................................................................................50 Publicación y visualización de la aplicación..........................................................................................................................51 Publicación de la aplicación..................................................................................................................................................52 Visualización de la configuración de publicación.................................................................................................................52 Cambio en la configuración de publicación.........................................................................................................................52 Visualización de la aplicación publicada en un navegador..................................................................................................53 Creación de un Cd-Rom Auto Ejecutable (Autorun)............................................................................................................53
EJEMPLOS........................................................................................................................................................ 55 Interpolación Movimiento....................................................................................................................................................55
............................................................................................................................................................................ 56 Interpolación De Forma........................................................................................................................................................57 Mascara................................................................................................................................................................................59 Creación de Botón................................................................................................................................................................61
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
4
UAMCEH Multimedia 2
1 Introducción Conceptos Básicos Multimedia Es una combinación de formas de contenido, es un término que se aplica a cualquier objeto que usa simultáneamente diferentes formas de contenido informativo como texto, sonido, imágenes, animación y video para informar o entretener. ¿Qué es la animación gráfica en Internet? La animación gráfica en Internet está compuesta de todas aquellas imágenes en movimiento que observamos al desplegar una página web. Cuando estas imágenes son pequeñas y ocupan sólo parte de la zona de despliegue de las páginas web, se trata muy probablemente de GIFs animados (por sus siglas en Inglés Graphics Interchange Format), que no son otra cosa que una secuencia de imágenes que dan la apariencia de movimiento. El tiempo que toma descargar estas imágenes es desde luego mucho mayor al de una imagen sin movimiento. Cuando la animación gráfica es más sofisticada y llega a tener la dimensión del total de la zona de visualización de las páginas, creando un ambiente global de imágenes en movimiento y un menú de navegación gráfico, se trata entonces de una página web desarrollada con Flash. ActionScript Es el lenguaje de programación que utiliza Flash para hacer sus animaciones interactivas. ¿Qué es un plug-in? Es un pequeño programa que se instala como complemento del navegador, en una carpeta determinada, y sirve de enlace entre éste y una aplicación externa a la que representa. El navegador delega en el plug-in el manejo de los tipos de archivo que puede manejar. El Formato .FLA .fla es la extensión con la cual se puede trabajar en el programa Flash, es decir, es el código fuente de una animación.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
5
UAMCEH Multimedia 2
Archivo .SWF Archivo que genera flash y es el formato que corresponde a la animación ya terminada, que en general no puede ser modificada, sino que sólo puede ser desplegada. Pixel
Pixel (acrónimo del inglés picture element, "elemento de imagen") Por lo tanto, el píxel es el componente más pequeño de la imagen digital. Todo el conjunto de estos píxeles se encuentra en una tabla de dos dimensiones que constituye la imagen:
RVA RVA (Rojo, Verde y Azul) es un sistema que sirve para representar colores en un monitor u otro dispositivo de visualización. Combinados, los tres colores pueden usarse para crear cualquier color de espectro. Al modificar cualquier canal, el color cambia. Los canales individuales se ajustan de una intensidad del 0% hasta una intensidad del 100%. Estos niveles se representan numéricamente de 0 a 255. Y el 0 esta incluido, por lo que en realidad hay 256 niveles de rojo, 256 niveles de verde y 256 de azul. El numero total de colores posibles es de 16, 777,216 (256x256x256) o lo que se suele escribir 16 millones de colores. Un dispositivo debe estar configurado con 24 bits para que proporcione una descripción exacta de cada uno de los pixeles de los 16 millones de colores, si tiene menos bit el monitor aproximara el color, ofreciendo matices algo distintos de los que se preveía en un principio. RGB o en español RVA Utiliza los colores rojo, verde y azul se puede representar utilizando un cubo representando colores específicos.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
6
UAMCEH Multimedia 2
En todos estos casos el color puede indicarse de dos maneras decimal mediante los componentes RGB del mismo o en notación hexadecimal; para facilitar la tarea al futuro desarrollador web se proporciona una tabla con los colores.
Color Hexadecimal El color hexadecimal se basa en un sistema numérico de base 16 .Los diseñadores también pueden expresar los colores utilizando valores hexadecimales como los siguientes Color
Hexadecimal
Nombre
#FFFFFF
Blanco
#000000
Negro
#0000FF
Azul
#008000
Verde
#800000
Marrón
#800080
Morado
#808080
Gris
#FF0000
Rojo
#FF00FF
Rosa
#FFFF00
Amarillo
Imagen Rasterizada
Una imagen rasterizada, también llamada bitmap, imagen matricial o pixmap, es una estructura o fichero de datos que representa una rejilla rectangular de pixeles o puntos de color, denominada raster, que se puede visualizar en un monitor de computadora, papel u otro dispositivo de representación. Imagen vectorial Una imagen vectorial es una imagen digital formada por objetos geométricos independientes (segmentos, polígonos, arcos, etc.), cada uno de ellos definido por distintos atributos matemáticos de forma, de posición, de color, etc. Por ejemplo un círculo de color rojo quedaría definido por la posición de su centro, su radio, el grosor de línea y su color. Este formato de imagen es completamente distinto al formato de los gráficos rasterizados, también llamados imágenes matriciales, que están formados por pixeles. El interés principal de los gráficos vectoriales es poder ampliar el tamaño de una imagen a voluntad sin sufrir el efecto de escalado que sufren los gráficos rasterizados. Asimismo, permiten mover, estirar y retorcer imágenes de manera relativamente sencilla. Su uso también está muy extendido en la generación de imágenes en tres dimensiones tanto dinámicas como estáticas.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
7
UAMCEH Multimedia 2
Condiciones de Diseño Con respecto a cuestiones técnicas existen variables que van a condicionar nuestras decisiones de diseño: - Los distintos tamaños de visualización del monitor, y las distintas dimensiones de pantalla. - Los software que el navegante utiliza. - Los navegadores utilizan pantallas que pueden ser modificadas en tamaño y formato. - La posibilidad de personalizar las propiedades del navegador (fuentes, tamaño, colores de links, etc.). Es necesario recordar que existen una serie de fuentes que se utilizan de manera estándar en las páginas web. Tipografías predeterminadas para texto 1. Arial, 2. Helvetica 3. sans-serif 4. Times New Roman 5. Times 6. serif 7. Courier New 8. Courier 9. mono 10. Georgia 11. Verdana Tamaños de visualización de monitores Visualización de Monitores: Como seleccionar el tamaño del escenario La anchura y altura del escenario repercuten en la producción de la película, obviamente un escenario mas grande le da la oportunidad de añadir mas elementos. Estos elementos adicionales requieren de más poder de procesamiento y crean un archivo más grande para su descarga. La mayoría de los desarrolladores siguen usando 640x480 como tamaño máximo de escenario, en gran medida debido a que algunos siguen peleándose con monitores de 15 pulgadas y prefieren usar este tamaño de pantalla a fin de poder ver la totalidad del escenario. . 640 x 480 px área de trabajo real 620 x 302 . 800 x 600 px área de trabajo real 780 x 422 . 1024 x 768 px área de trabajo real 1004 x 590 . 1152 x 864 px área de trabajo real 620 x 318 . 1280 x 1024 px área de trabajo real 1260 x 846
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
8
UAMCEH Multimedia 2
Flash Player Macromedia Flash Player, es el que ejecuta las aplicaciones creadas en flash, se instala de forma predeterminada junto con Flash. Flash Player garantiza que todo el contenido SWF pueda visualizarse y esté disponible en las mismas condiciones en todas las plataformas, los navegadores y los dispositivos. Flash Player se distribuye gratuitamente a cualquier persona que desee utilizarlo.
¿Cuál es la diferencia entre Flash Player y Shockwave Player? Flash Player y Shockwave Player son reproductores web gratuitos de Adobe. Cada uno tiene una finalidad distinta: •
•
Flash Player muestra contenido creado con Flash, como interfaces de aplicaciones web, interfaces de usuario de sitios web de gran impacto, publicidad interactiva en línea, animación corta y larga. Shockwave Player muestra contenido creado con Director®, como juegos de alto rendimiento para varios usuarios, simulaciones interactivas en 3D de productos, entretenimiento en línea y aplicaciones de formación. Al usar extensiones, los desarrolladores pueden ampliar la capacidad de Shockwave Player para reproducir aplicaciones hechas a medida.
En la tabla siguiente se indican los requisitos del sistema y del navegador para Flash Player.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
9
UAMCEH Multimedia 2
2 Antecedentes Flash Adobe Flash Combina gráficos de vector de rápido despliegue con una interface "drag-and-drop", Flash se ha ganado la preferencia de muchos desarrolladores profesionales de Sitios Web, convirtiéndose indiscutiblemente en el software por excelencia para añadir animación interactiva a los sitios. El software, actualmente en su versión CS3, se ha convertido en un estándar en el Web, debido a su velocidad y a la forma tan suave y sencilla de presentar los gráficos. Flash le proporciona todo lo necesario para crear y publicar complejas aplicaciones de grandes prestaciones y contenido Web. Tanto si diseña gráficos con movimiento como si crea aplicaciones gestionadas por datos, Flash tiene las herramientas necesarias para producir excelentes resultados y ofrecer al usuario la posibilidad de utilizar los productos en distintas plataformas y dispositivos. Flash es una herramienta de edición con la que pueden crearse desde animaciones simples hasta complejas aplicaciones Web interactivas. Las aplicaciones de Flash pueden enriquecerse añadiendo imágenes, sonido. Cuando usa Flash, se esta trabajando con un archivo que, al guardarse, tiene la extensión .fla Una vez que está preparado para desarrollar su contenido de Flash, lo publica, creando un archivo con una extensión .swf que podemos ejecutarlo con el Flash Player, Flash: Pasado, Presente y Futuro. Pocas aplicaciones han dado tanto que hablar en los últimos años como Flash. El programa que comenzó como una simple herramienta destinada a la creación de gráficos y animaciones vectoriales para la web, ha sufrido numerosas e importantes transformaciones durante su ciclo de vida, hasta el punto de convertirse en una herramienta esencial para el diseño y desarrollo de sitios web, juegos, presentaciones y aplicaciones multimedia. De acuerdo a las estadísticas, Flash Player (el plug-in o conector que permite visualizar en el navegador el contenido creado con Flash) se encuentra instalado en más del 97% de los sistemas que gozan de una conexión a Internet, superando con creces a otras tecnologías. Un poco de historia. Ciclo de vida de Flash. A finales de 1996, Macromedia adquiere FutureSplash (una aplicación creada por una pequeña compañía de software llamada SmartSketch, que permitía la creación de Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
10
UAMCEH Multimedia 2
animaciones vectoriales y ya había sido utilizada en sitios de renombre alrededor de la World Wide Web) y la reedita bajo el nombre de Flash 1.0. Poco tiempo transcurre hasta la aparición de la segunda versión de Macromedia Flash, en 1997. A la capacidad para generar gráficos y animaciones vectoriales se le suma el soporte para sonido estéreo y una mejorada integración con imágenes en mapas de bits (bitmaps). Es en esta versión donde aparecen las primeras opciones de interactividad, permitiéndose un control (aunque limitado) de las animaciones a través de acciones simples que permitían desplazar la cabeza de lectura sobre la línea de tiempo. En versiones posteriores se multiplican y perfeccionan las opciones de interactividad, hasta la aparición de un lenguaje de scripts en Flash 4. Pero es recién en el año 2000, con la aparición de Flash 5, cuando se formaliza el nombre de ActionScript, un verdadero lenguaje de scripts. Como es de esperar, la inclusión de un lenguaje de scripts en Flash, produce una verdadera revolución en la comunidad de usuarios, permitiendo el desarrollo de sitios web y aplicaciones interactivas basadas en la tecnología Flash, y ampliando el campo de aplicación de la herramienta hasta niveles insospechados. En el año 2000, Flash Player comienza a distribuirse con los navegadores AOL, Netscape e Internet Explorer. En septiembre de 2001, una encuesta llevada a cabo por Media Metrix revela que siete de cada diez grandes sitios desarrollados en Estados Unidos incorporaban contenido de Flash. Un año después, Macromedia anuncia la salida de Flash MX y Flash Player 6, con fuertes novedades, tales como el soporte para video, componentes y opciones de accesibilidad, además de una mejora considerable en el lenguaje ActionScript. Flash MX 2004 (Flash Player 7) hace su aparición a finales de 2003, incorporando mejoras sustanciales, como el soporte para extensiones, la capacidad para la creación de contenido para dispositivos móviles y la aparición de ActionScript 2.0, con una sintaxis renovada y un soporte más fiel al modelo de programación orientada a objetos. La reciente aparición de Flash 8, a finales de 2005, supone un incremento en la expresividad de la aplicación, permitiendo la incorporación y el control en tiempo real de efectos sobre mapas de bits (como filtros y modos de fusión), y mejorando la representación del texto. Acciones impensadas hasta el momento, como generar imágenes en mapas de bits con código de ActionScript.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
11
UAMCEH Multimedia 2
Situación actual. Las RIA y los avances en usabilidad. Durante estos años, grandes avances y mejoras sustanciales han propiciado el uso de Flash para la creación de las llamadas RIA (Rich Internet Applications), aplicaciones online que presentan una funcionalidad similar a las de escritorio, y se basan en el intercambio de datos entre el servidor y la interfaz con el usuario. Desde la aparición de Flash hasta nuestros días, se ha notado una fuerte tendencia de abuso de recursos y saturación visual por parte de una amplia comunidad de usuarios, que ha logrado minar la imagen de la aplicación de cara al mundo profesional. La web se encuentra actualmente plagada de sitios realizados completamente en Flash, que en lugar de asegurar al usuario una experiencia de navegación agradable y un fácil acceso a la información, se concentran en desplegar animaciones y efectos visuales que en la mayoría de los casos suelen ser de dudosa o baja calidad. Actualmente, Flash permite el desarrollo de sitios dinámicos con acceso a lenguajes del lado del servidor y a bases de datos, además de una conexión eficiente con diferentes tecnologías y herramientas que complementan su funcionalidad. El soporte a extensiones permite ampliar considerablemente el rango de funciones básicas de la aplicación, de modo que los usuarios no se encuentran limitados a la funcionalidad básica incluida en las versiones oficiales. Hasta el día de hoy, el uso de Flash sigue asociado al ámbito de la web, razón por la cual se hace necesario aclarar que el campo de aplicación de esta herramienta no se limita únicamente al entorno online (más concretamente al diseño y desarrollo de sitios web), sino que trasciende a otras áreas tales como el desarrollo de presentaciones multimedia, aplicaciones interactivas y juegos. Proyección y Actualidad La adquisición de Macromedia por parte de Adobe (con la correspondiente absorción de Flash), trae consigo un inevitable cuestionamiento acerca de la orientación que se le dará al producto a partir de ahora. Muchos temen que el deseo de integrar Flash Player con la tecnología Reader (basada en el formato PDF, original de Adobe) repercuta en un aumento considerable del tamaño del plug-in, teniendo en cuenta que el tamaño actual de Adobe Reader supera los 20 megabytes. Por el contrario, hay quienes se muestran entusiastas con la fusión de ambas empresas, basando su optimismo en la premisa de que Flash se verá beneficiado por lo mejor de ambos. Por su parte, ActionScript promete para su versión 3.0, equipararse en potencia con lenguajes como Java y C#. Esta promesa, sumada a los avances técnicos que ya pueden observarse en la versión más reciente de la aplicación, augura que el universo de Flash seguirá expandiéndose indefinidamente durante los próximos años. Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
12
UAMCEH Multimedia 2
3 Conociendo Flash Requisitos del sistema para la instalación de flash A continuación se indican el hardware y software necesarios para ejecutar Flash Microsoft Windows Procesador Intel Pentium III a 600 MHz o equivalente Windows 98 SE, Windows 2000 o Windows XP 128 MB de RAM (se recomiendan 256 MB) 190 MB de espacio disponible en disco Macintosh Procesador PowerPC G3 a 500 MHz Mac OS X 10.2.6 128 MB de RAM (se recomiendan 256 MB) 130 MB de espacio disponible en disco
Instalación y activación de Flash La instalación de Flash es un proceso automatizado. Una vez finalizada la instalación, puede ejecutar el programa en el modo de prueba de Flash durante 30 días, o bien puede activar Flash debe activarse a través de Internet o por teléfono para poder utilizarlas y, para hacerlo, necesita el número de serie a menos que seleccione el modo de prueba. Nota: cuando se instala Macromedia Flash no se sobrescribe ninguna versión anterior de Flash. Para instalar Flash: 1 Antes de iniciar la instalación, cierre las versiones de Flash que se estén ejecutando. 2 Siga uno de estos procedimientos para iniciar el proceso de instalación: ■ (Windows) Si tiene un CD, insértelo en la unidad de CD. Se reproduce una película Flash que le indica las opciones de instalación del programa.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
13
UAMCEH Multimedia 2
Nota: también puede ejecutar el archivo Flash.exe para iniciar la película Flash, si es necesario. ■ (Macintosh) Si tiene un CD, insértelo en la unidad de CD y haga doble clic en el icono de instalación Utilización de la página de inicio La página de inicio proporciona acceso a las acciones utilizadas con más frecuencia tanto al iniciar una sesión como cuando la ventana de la aplicación no tiene ningún documento abierto. La página de inicio presenta las áreas siguientes: Abrir un elemento reciente permite ver los documentos más recientes. Abrir muestra el cuadro de diálogo Abrir archivo. Crear nuevo ofrece una lista de tipos de archivo que puede seleccionar, para abrir un nuevo archivo con rapidez. Crear a partir de plantilla muestra las plantillas utilizadas con más frecuencia para crear documentos nuevos y permite seleccionar una plantilla de la lista. Ampliar establece un enlace con el sitio Web de Macromedia Flash Exchange, desde donde puede descargar aplicaciones e información adicionales. La página de inicio también puede mostrar información de prueba sobre la conversión, avisos de actualización y otros mensajes de interés. Puede seleccionar si desea visualizar o no la página de inicio.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
14
UAMCEH Multimedia 2
Para ocultar esta página: • En la página de inicio, seleccione No volver a mostrar este mensaje. Para especificar que la página de inicio aparezca de nuevo, siga uno de estos procedimientos: • Seleccione Edición > Preferencias y haga clic en Mostrar página de inicio en la ficha General. Espacio de trabajo de Flash El espacio de trabajo de Macromedia Flash está compuesto por un escenario donde se coloca el contenido multimedia, una barra de herramientas principal con menús y comandos para controlar las funciones de la aplicación, los paneles y un inspector de propiedades para organizar y modificar los elementos multimedia, y una barra de herramientas para crear o modificar gráficos vectoriales.
Inspector de Propiedades
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
15
UAMCEH Multimedia 2
La Barra de Menús
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: Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película 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. 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. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos. 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 directos 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 Action Script, pasando por tutoriales, lecciones guiadas etc...
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
16
UAMCEH Multimedia 2
Barra de Herramientas
Las herramientas de la barra de herramientas permiten dibujar, pintar, seleccionar y modificar ilustraciones, así como cambiar la visualización del escenario. La barra de herramientas se divide en cuatro secciones: • La sección de herramientas contiene las herramientas de dibujo, pintura y selección. • La sección de visualización contiene herramientas para ampliar y reducir, así como para realizar recorridos de la ventana de la aplicación. • La sección de colores contiene modificadores de los colores de trazo y relleno. • La sección de opciones muestra los modificadores de la herramienta seleccionada, los cuales afectan a las operaciones de pintura o edición de dicha herramienta.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
17
UAMCEH Multimedia 2
Creación de un documento nuevo Apertura de un nuevo documento 1 Seleccione Archivo > Nuevo. 2 Seleccione Documento de Flash, lea la descripción del tipo de archivo que aparece y, a continuación, haga clic en Aceptar. 3 Seleccione Archivo > Guardar. 4 Asigne el nombre al archivo y guárdelo en el escritorio o en la ubicación que considere oportuna. Se asigna la extensión .fla al archivo. Definición de las propiedades del documento La configuración de las propiedades de un documento generalmente constituye el primer paso en el trabajo de edición. Puede utilizar el inspector de propiedades para especificar la configuración que afecta a toda la aplicación, como por ejemplo la velocidad de reproducción en fotogramas por segundo (fps), el tamaño del escenario y el color de fondo. 1 Si el inspector de propiedades no está abierto, seleccione Ventana > Propiedades.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
18
UAMCEH Multimedia 2
El inspector de propiedades permite ver y cambiar las especificaciones de los objetos seleccionados. Estas especificaciones dependen del tipo de objeto seleccionado. Si selecciona un objeto de texto, por ejemplo, el inspector de propiedades muestra la configuración para ver y modificar los atributos de texto. Puesto que acaba de abrir un documento nuevo, el inspector de propiedades muestra la configuración del documento. Nota: si el inspector de propiedades no se ha expandido totalmente, haga clic en el triángulo blanco situado en la esquina inferior derecha. 2 En el inspector de propiedades, verifique que 12 es el número del cuadro de texto Velocidad de fotogramas. La aplicación se reproducirá a 12 fotogramas por segundo, una velocidad óptima para reproducir animaciones en la Web. 3 El cuadro Color de fondo indica el color del escenario. Haga clic en la flecha abajo en el cuadro Color de fondo y, a continuación, mueva la herramienta Cuentagotas sobre las muestras de color para ver sus valores hexadecimales en el cuadro de texto Hexadecimal. 4 Busque y haga clic en la muestra de color con el valor hexadecimal deseado.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
19
UAMCEH Multimedia 2
Utilización de la cuadrícula, las guías y las reglas La mayoría de los programas de diseño grafico permiten a los usuarios aplicar guías para alinear objetos o medir distancias precisas entre los elementos. Las reglas pueden utilizarse para separar o alinear objetos específicos a distancias exactas en el escenario. Para ayudarle a alinear los elementos del escenario, flash también posee guías que se pueden extraer de las reglas Flash incluye reglas y guías que ayudan a dibujar y diseñar objetos de manera precisa. Puede colocar guías en un documento y ajustar objetos a las mismas o activar la cuadrícula y ajustar objetos en ésta. Nota: asimismo puede ajustar objetos a otros objetos o a píxeles, o alinear objetos utilizando determinados límites de tolerancia de ajuste. Véase “Ajuste” en el apartado Utilización de Flash de la Ayuda.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
20
UAMCEH Multimedia 2
Utilización de la cuadrícula Cuando aparece la cuadrícula en un documento, se muestra como un conjunto de líneas detrás de la ilustración en todas las escenas. Puede ajustar los objetos a la cuadrícula, así como modificar el tamaño de la cuadrícula y el color de las líneas que la componen. Para mostrar u ocultar la cuadrícula de dibujo: • Seleccione Ver > Cuadrícula > Mostrar cuadrícula. Para activar y desactivar el ajuste a las líneas de la cuadrícula: • Seleccione Ver > Ajuste > Ajustar a cuadrícula. Para establecer preferencias para la cuadrícula: 1 Seleccione Ver > Cuadrícula > Editar cuadrícula. 2 En Color, haga clic en el triángulo del cuadro de color y seleccione un color para las líneas de la cuadrícula en la paleta. El color predeterminado de las líneas de la cuadrícula es gris. 3 Seleccione o anule la selección de la opción Mostrar cuadrícula para mostrar u ocultar la cuadrícula. 4 Seleccione o anule la selección de Ajustar a cuadrícula para activar o desactivar el ajuste a las líneas de la cuadrícula. 5 Para el espaciado de la cuadrícula, introduzca valores en los cuadros de texto situados a la derecha de las flechas verticales y horizontales. 6 En Precisión de ajuste, seleccione una opción del menú desplegable. 7 Si desea guardar la configuración actual como predeterminada, haga clic en Guardar predeterminado. Utilización de las guías Si las reglas son visibles, puede arrastrar las guías horizontales y verticales de las reglas en el escenario. Puede mover, bloquear, ocultar y quitar las guías. También puede ajustar objetos a las guías y cambiar el color de las guías y la tolerancia al ajuste (a qué distancia máxima deben estar los objetos para ajustarlos a una guía). Las reglas que pueden arrastrarse aparecen únicamente en la línea de tiempo en la que se han creado. Puede quitar todas las guías del modo de edición actual: modo de edición de documentos o modo de edición de símbolos. Si quita las guías del modo de edición de documentos, desaparecen todas las guías del documento. Si quita las guías del modo de edición de símbolos, desaparecen todas las guías de todos los símbolos.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
21
UAMCEH Multimedia 2
Para mostrar u ocultar las guías de dibujo: • Seleccione Ver > Guías > Mostrar guías. Nota: si la cuadrícula está visible y la opción Ajustar a cuadrícula está activada, al crear guías, éstas se ajustarán a la cuadrícula. Para activar o desactivar el ajuste a las guías: • Seleccione Ver > Ajuste > Ajustar a guías. Nota: el ajuste a las guías tiene prioridad sobre el ajuste a la cuadrícula, en caso de que haya guías entre las líneas de la cuadrícula. Para mover una guía: • Utilice la herramienta Flecha para arrastrar la guía. Para quitar una guía: • Con las guías desbloqueadas, utilice la herramienta Flecha para arrastrar la guía a la regla horizontal o vertical. Para más información sobre cómo bloquear y desbloquear guías, consulte el procedimiento que se describe a continuación. Para bloquear las guías: • Seleccione Ver > Guías > Bloquear guías. Nota: también puede utilizar la opción Bloquear guías del cuadro de diálogo de preferencias de las guías. Consulte el procedimiento siguiente. Para establecer preferencias para las guías: 1 Seleccione Ver > Guías > Editar guías y siga uno de estos procedimientos: ■ En Color, haga clic en el triángulo del cuadro de color y seleccione un color para las líneas de la guía en la paleta. El color predeterminado de la guía es el verde. ■ Seleccione o anule la selección de la opción Mostrar guías para mostrar u ocultar las guías. ■ Seleccione o anule la selección de Ajustar a guías para activar o desactivar el ajuste a las guías. ■ Seleccione o anule la selección de Bloquear guías para bloquear y desbloquear las guías. ■ En Precisión de ajuste, seleccione una opción del menú desplegable. ■ Si desea quitar todas las guías, haga clic en Borrar todo. ■ Con la opción Borrar todo, se quitan todas las guías de la escena actual. Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
22
UAMCEH Multimedia 2
■ Si desea guardar la configuración actual como predeterminada, haga clic en Guardar predeterminado. 2 Haga clic en Aceptar. Para quitar guías: • Seleccione Ver > Guías > Borrar guías. Si está utilizando el modo Editar documento, desaparecerán todas las guías del documento. Si está utilizando el modo Editar símbolos, desaparecerán sólo las guías que se utilicen en los símbolos. Utilización de las reglas Si se muestran las reglas, éstas aparecen en la parte superior y a la izquierda del documento. Puede cambiar la unidad de medida que se utiliza en las reglas; la unidad predeterminada es píxeles. Al mover un elemento en el escenario con las reglas visibles, aparecerán unas líneas en las reglas indicando las dimensiones del elemento. Para mostrar u ocultar las reglas: • Seleccione Ver > Reglas. Para especificar la unidad de medida de las reglas para un documento: • Elija Modificar > Documento y seleccione una opción del menú emergente situado en la esquina superior derecha.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
23
UAMCEH Multimedia 2
Utilización de la barra de herramientas Las herramientas se pueden seleccionar haciendo clic en la barra de herramientas o mediante métodos de teclado abreviados. Para seleccionar una herramienta, siga uno de estos procedimientos: • Haga clic en la herramienta que desea utilizar. Según la herramienta que seleccione, puede que aparezca un conjunto de modificadores en el área de opciones situada en la parte inferior de la barra de herramientas. • Utilice el método abreviado del teclado para la herramienta. • Para seleccionar una herramienta situada en el menú emergente detrás de una herramienta visible, haga clic en el icono de la herramienta visible y seleccione otra herramienta del menú emergente. En la parte izquierda de la ventana podemos observar barra de herramientas que vamos a utilizar para lograr nuestra animación. Aquellos que ya han utilizado algún programa gráfico reconocerán todas las herramientas. 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:
Herramienta Selección (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, los bordes, zonas a nuestra elección... Además, su uso adecuado puede ahorrarnos tiempo en el trabajo.
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.
Herramienta Texto: Óvalo: sencilla.
Crea un texto en el lugar en el que hagamos clic. Herramienta
La herramienta Círculo permite trazar círculos o elipses de manera rápida y
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
24
UAMCEH Multimedia 2
Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta circulo, tan solo se diferencian en el tipo de objetos que crean.
Herramienta Lápiz: 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, en Colores en la Barra de Herramientas.
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.
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.
Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Brocha. Pero su función es la de eliminar todo aquello que "dibuje". Herramienta Lazo: Su función es complementaria a la de la Herramienta Flecha. 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.
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.
Herramienta Subseleccion: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
25
UAMCEH Multimedia 2
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.
Herramienta Cuentagotas: posteriormente podamos utilizarlos.
Su
misión
es
"Capturar"
colores
para
que
Selección de objetos Para llevar a cabo cualquier transformación de los objetos del escenario, primero debemos seleccionarlos. Antes de ver cómo editar y trabajar con los diferentes tipos de vectores primero aprenderemos a seleccionarlos. Las herramientas para seleccionar formas son la Flecha y el Lazo
.
Selección directa. La herramienta de selección Flecha permite seleccionar objetos. Seleccionar un relleno: presionamos sobre cualquier punto del relleno del objeto.
Seleccionar un tramo de contorno: los contornos son segmentos definidos por dos vértices. presionamos sobre cualquier punto del contorno o segmento para seleccionarlo.
Seleccionar todo el contorno: presionamos dos veces seguidas con la herramienta Flecha sobre cualquier punto del contorno.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
26
UAMCEH Multimedia 2
Seleccionar el contorno y el relleno: presionamos dos veces seguidas con la herramienta Flecha sobre cualquier punto del relleno.
Sumar selecciones: si necesitamos seleccionar más de un objeto del escenario, emplearemos cualquier modo de selección anterior y mantendremos pulsada la tecla SHIFT.
Otra manera de seleccionar el objeto es mediante la utilización de la misma herramienta Flecha para enmarcar un área alrededor de ellos. Selección por ventana. 1. Colocamos la herramienta Flecha fuera de los puntos u objetos a seleccionar. 2. Pulsamos el botón del ratón y arrastramos para definir el rectángulo que englobará todos los puntos deseados.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
27
UAMCEH Multimedia 2
3. Soltamos el botón del ratón y ya tendremos nuestros puntos seleccionados de una vez.
Al seleccionar por ventana o marco podemos incluir sólo una parte o área del objeto. De esta forma tenemos la posibilidad de "cortar" ese objeto por la selección. (Para mover una selección arrastrar con la herramienta Flecha).
A veces, según qué tipo de dibujo estemos realizando, nos será casi imposible enmarcar las áreas que deseemos seleccionar con un marco rectangular. Para ello disponemos de la herramienta Lazo. Selección por lazo. 1. Activamos la herramienta Lazo del panel Herramientas. 2. Colocamos la herramienta fuera de los puntos a seleccionar. 3. Pulsamos el botón del ratón y empezamos a "dibujar" el área con la que englobaremos los puntos deseados.
4. Soltamos el botón del ratón y ya tendremos nuestros puntos seleccionados.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
28
UAMCEH Multimedia 2
Funcionamiento de los vectores Los vectores presentan un funcionamiento muy característico. Cuando superponemos dos vectores de colores diferentes "se cortan unos a otros", es decir, la forma situada por encima corta la parte de la forma que se encuentra por debajo. Si ambas formas disponen del mismo color de relleno y contorno se fusionan originando un único vector o una nueva forma. Veamos dos ejemplos.
Superponemos dos objetos y al desplazar el rectángulo vemos que el círculo queda recortado por el área donde se superponían.
Al superponer dos vectores (en este caso dos rellenos del mismo color y sin contorno) se fusionan formando una nueva forma. Edición de contornos. Una vez dibujado un objeto, podemos modificar los objetos con la herramienta Flecha. El resultado será una nueva figura. 1.Activaremos la herramienta Flecha del panel Herramientas . 2.Situamos la herramienta sobre el contorno que queremos variar para curvarlo o sobre un vértice para desplazarlo.
Veamos cada una de las posibilidades.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
29
UAMCEH Multimedia 2
Mover un vértice. 1.Situamos la herramienta Flecha sobre el vértice que queramos modificar hasta que aparezca, junto con la herramienta, un símbolo a manera de esquina indica que nos encontramos sobre el vértice. 2.Arrastramos para desplazar el vértice preciso hasta la nueva posición.
. Nos
3.El resultado es una nueva forma. Curvar un segmento. 1.Situamos la herramienta Flecha sobre el segmento hasta que aparezca una pequeña curva junto con la herramienta 2.Arrastramos y curvamos el lado.
.
3.El resultado es una nueva forma. Añadir un vértice. 1.Activamos la herramienta Flecha del panel Herramientas. 2.Colocamos la Flecha en el punto del contorno en el que queremos añadir el nuevo vértice. 3.Pulsamos la tecla Alt y arrastramos.
4.El resultado es una nueva forma. Suavizar y enderezar contornos. Suavizar un contorno. (Botón suavizar de la barra de herramientas), cada vez que pulsamos, conseguimos que las curvas de un contorno sean más suaves (eliminación de
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
30
UAMCEH Multimedia 2
vértices).Enderezar contornos. (Botón enderezar de la barra de herramientas), cada vez que pulsamos, las curvas tienden a vectores rectos.
4 Utilización del escenario El escenario es el área rectangular donde se coloca el contenido gráfico, que incluye, entre otros: gráficos vectoriales, cuadros de texto, botones, clips de vídeo o imágenes de mapa de bits importadas. El escenario del entorno de edición de Flash representa el espacio rectangular de Macromedia Flash Player donde se muestra el documento de Flash durante la reproducción. Puede utilizar la función de acercar y alejar para ver el escenario cuando trabaja. Aumento y reducción de la visualización Para aumentar o reducir la visualización del escenario, siga uno de estos procedimientos: Para acercar un elemento determinado, seleccione la herramienta Zoom de la barra de herramientas y haga clic en el elemento. Para cambiar entre las funciones de acercar y alejar de la herramienta Zoom, utilice los modificadores Aumentar o Reducir (del área de opciones de la barra de herramientas cuando la herramienta Zoom está seleccionada), o haga clic con la tecla Alt presionada (Windows), o haga clic con la tecla Opción presionada (Macintosh).
Para acercar una zona concreta del dibujo, arrastre un recuadro de delimitación rectangular con la herramienta Zoom. Flash establece el grado de aumento/reducción de forma que el rectángulo especificado ocupe la ventana. Para acercar o alejar todo el escenario, seleccione Ver > Acercar o Ver > Alejar. Para acercar o alejar con un determinado porcentaje, elija Ver > Aumentar y reducir y seleccione un porcentaje del submenú, o bien seleccione un porcentaje del control de zoom situado en la esquina inferior izquierda de la ventana de la aplicación. Para cambiar la escala del escenario de modo que se ajuste completamente al espacio de una ventana determinada, seleccione Ver > Aumentar y reducir > Ajustar a ventana. Para mostrar el contenido del fotograma actual, seleccione Ver > Aumentar y reducir > Mostrar todo, o bien elija Mostrar todo en el control de zoom situado en la esquina superior derecha de la ventana de la aplicación. Si la escena está vacía, se muestra todo el escenario. Para mostrar todo el escenario, seleccione Ver > Aumentar y reducir > Mostrar fotograma, o elija Mostrar fotograma en el control de zoom situado en la esquina inferior izquierda de la ventana de la aplicación. Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
31
UAMCEH Multimedia 2
Para mostrar el área de trabajo que rodea al escenario, seleccione Ver > Área de trabajo. El área de trabajo se muestra en gris claro. Utilice el comando Área de trabajo para ver los elementos de una escena que están parcial o completamente fuera del escenario. Por ejemplo, para hacer que un pájaro entre volando en un fotograma, coloque inicialmente el pájaro fuera del escenario en el área de trabajo. Desplazamiento de la vista del escenario Al aumentar el tamaño de visualización del escenario, es posible que no se vea todo su contenido. La herramienta Mano permite desplazar el escenario para cambiar la visualización sin tener que cambiar el grado de aumento. Para mover la visualización del escenario: 1 En la barra de herramientas, seleccione la herramienta Mano. Para utilizar temporalmente otra herramienta diferente de la herramienta Mano, mantenga presionada la barra espaciadora y haga clic en la herramienta de la barra de herramientas. 2 Arrastre el escenario. Utilización de la línea de tiempo La línea de tiempo organiza y controla el contenido de un documento a través del tiempo en capas y fotogramas. Al igual que en un largometraje, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora. Las capas de un documento aparecen en una columna situada a la izquierda de la línea de tiempo. Los fotogramas contenidos en cada capa aparecen en una fila a la derecha del nombre de la capa. El encabezado de la línea de tiempo situado en la parte superior de la línea de tiempo indica los números de fotograma. La cabeza lectora indica el fotograma actual que se muestra en el escenario. La información de estado de la línea de tiempo situada en la parte inferior de la línea de tiempo indica el número del fotograma seleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual. Se puede cambiar el modo de mostrar los fotogramas en la línea de tiempo, así como mostrar miniaturas del contenido del fotograma en la línea de tiempo. La línea de tiempo muestra dónde hay animación en un documento, incluidas la animación fotograma por fotograma, la animación interpolada y los trazados de movimiento. Los controles de la sección de capas de la línea de tiempo permiten mostrar u ocultar y bloquear o desbloquear capas, así como mostrar el contenido de las capas como contornos. Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
32
UAMCEH Multimedia 2
Representaciones de animaciones en la línea de tiempo
Flash distingue la animación fotograma por fotograma de la interpolada en la línea de tiempo de la siguiente forma: Las interpolaciones de movimiento se indican con un punto negro en el fotograma clave inicial; los fotogramas interpolados intermedios tienen una flecha negra con un fondo azul claro.
Las interpolaciones de formas se indican con un punto negro en el fotograma clave inicial; los fotogramas intermedios tienen una flecha negra con un fondo verde claro.
Una línea discontinua indica que la interpolación se ha interrumpido o está incompleta, por ejemplo, cuando falta el fotograma clave final o que contienen un erro.
Un fotograma clave sencillo viene indicado por un punto negro. Los fotogramas en gris claro después de un fotograma clave sencillo tienen el mismo contenido sin ningún cambio y tienen una línea negra con un rectángulo vacío en el último fotograma del intervalo.
Una “a” pequeña indica que al fotograma se le asignó una acción de fotograma con el panel Acciones y que contiene ActionScript.
Una bandera roja indica que el fotograma contiene una etiqueta o un comentario.
Así representa Flash los sonidos insertados en Fotogramas
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
33
UAMCEH Multimedia 2
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
34
UAMCEH Multimedia 2
Velocidades de fotogramas La velocidad de fotogramas, es decir, la rapidez con que se reproduce la animación, se expresa en fotogramas por segundo. Si la velocidad de fotogramas es muy baja, la animación parece detenerse y volver a empezar y si es muy alta los detalles se ven borrosos. Elija una velocidad de 12 fotogramas por segundo (fps) para obtener un resultado óptimo en Internet. En general, la velocidad estándar de movimiento de la imagen es de 24 fps, pero en las películas QuickTime y AVI es habitualmente de 12 fps. La complejidad de la animación y la velocidad del sistema donde se reproduce afectan a la suavidad de la reproducción. Pruebe las animaciones en varios sistemas para determinar la velocidad de fotogramas óptima. Modificación del aspecto de la línea de tiempo De forma predeterminada, la línea de tiempo aparece en la parte superior de la ventana de la aplicación principal, encima del escenario. Para cambiar su posición, puede acoplarla tanto a la parte inferior como a uno de los dos lados de la ventana de la aplicación principal, así como mostrarla en su propia ventana. También es posible ocultarla. Puede cambiar el tamaño de la línea de tiempo para cambiar el número de capas y fotogramas visibles. Si hay más capas de las que es posible mostrar en la línea de tiempo, puede ver las capas adicionales mediante las barras de desplazamiento situadas a la derecha de la línea de tiempo. Desplazamiento de la cabeza lectora La cabeza lectora se mueve por la línea de tiempo para indicar el fotograma que se muestra en cada momento en el escenario. El encabezado de la línea de tiempo muestra los números de fotograma de la animación. Para que en el escenario aparezca un determinado fotograma, puede mover la cabeza lectora hasta ese fotograma en la línea de tiempo. Si está trabajando con tantos fotogramas que no es posible que todos aparezcan a la vez en la línea de tiempo, puede desplazar la cabeza lectora en la línea de tiempo para ubicar fácilmente el fotograma actual. Para ir a un fotograma: • Haga clic en la posición del fotograma en el encabezado de la línea de tiempo, o bien arrastre la cabeza lectora hasta la posición deseada.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
35
UAMCEH Multimedia 2
Cambio de la visualización de fotogramas en la línea de tiempo Puede cambiar el tamaño de los fotogramas en la línea de tiempo y mostrar secuencias de fotogramas con celdas coloreadas. También puede incluir vistas previas en miniatura del contenido de los fotogramas en la línea de tiempo. Estas miniaturas son muy útiles como vista global de la animación, pero ocupan mucho espacio de pantalla.
Para cambiar la visualización de los fotogramas en la línea de tiempo: 1 Haga clic en el botón de Visualización de fotogramas situado en la esquina superior derecha de la línea de tiempo para acceder al menú emergente de Visualización de fotogramas. 2 Seleccione entre las opciones siguientes: ■ Para cambiar el ancho de las celdas de los fotogramas, seleccione Diminuto, Pequeño, Normal, Medio o Grande. La opción Grande resulta útil para ver los detalles de las ondas sinusoidales de sonido. ■ Para disminuir la altura de las filas de las celdas de los fotogramas, seleccione Corto. ■ Para activar o desactivar el coloreado de las secuencias de fotogramas, seleccione Fotogramas coloreados.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
36
UAMCEH Multimedia 2
■ Para mostrar miniaturas del contenido de cada fotograma en un tamaño adaptado para los fotogramas de la línea de tiempo, seleccione Vista previa. Puede originar un cambio aparente del tamaño del contenido. ■ Para mostrar miniaturas para cada fotograma completo (incluido el espacio vacío), seleccione Vista previa en contexto. Esta opción es muy útil para ver cómo se mueven los elementos en sus fotogramas a lo largo de la animación, pero las vistas previas suelen ser más pequeñas que con la opción Vista previa. Trabajo con fotogramas en la línea de tiempo En la línea de tiempo, se trabaja con fotogramas y fotogramas clave, colocándolos en el orden en el que desea que aparezcan los objetos de los fotogramas. Puede cambiar la longitud de una animación interpolada arrastrando un fotograma clave en la línea de tiempo. Puede realizar las siguientes modificaciones tanto en los fotogramas como en los fotogramas clave: • Insertar, seleccionar, eliminar y mover fotogramas y fotogramas clave. • Arrastrar fotogramas y fotogramas clave a una nueva posición en la misma capa o en otra capa. • Copiar y pegar fotogramas y fotogramas clave. • Convertir fotogramas clave en fotogramas. • Arrastrar un elemento desde el panel Biblioteca hasta el escenario y añadir el elemento al fotograma clave actual. La línea de tiempo permite ver los fotogramas interpolados de una animación. Para más información sobre la edición de fotogramas interpolados, consulte “Edición de animaciones” en el apartado Utilización de Flash de la Ayuda. Para insertar fotogramas en la línea de tiempo, siga uno de estos procedimientos: • Para insertar un fotograma nuevo, seleccione Insertar > Línea de tiempo > Fotograma. • Para crear un fotograma clave nuevo, elija Insertar > Línea de tiempo > Fotograma clave, o haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en el fotograma donde desee colocar un fotograma clave y elija Insertar fotograma clave en el menú contextual. • Para crear un nuevo fotograma clave vacío, elija Insertar > Línea de tiempo > Fotograma clave vacío, o haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en el fotograma donde desee colocar el fotograma clave y elija Insertar fotograma clave vacío en el menú contextual.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
37
UAMCEH Multimedia 2
Para eliminar o modificar un fotograma o fotograma clave, siga uno de estos procedimientos: Para eliminar un fotograma, un fotograma clave o una secuencia de fotogramas, seleccione el fotograma, el fotograma clave o la secuencia y elija Edición > Línea de tiempo > Quitar fotogramas, o haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en el fotograma, el fotograma clave o la secuencia de fotogramas y seleccione Quitar fotogramas en el menú contextual. Para copiar y pegar un fotograma o una secuencia de fotogramas, seleccione el fotograma o secuencia y elija Edición > Línea de tiempo > Copiar fotogramas. Seleccione el fotograma o la secuencia que desea sustituir y seleccione Edición > Línea de tiempo > Pegar fotogramas. Para convertir un fotograma clave en un fotograma, seleccione el fotograma clave y elija Edición > Línea de tiempo > Borrar fotogramas, haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Macintosh) en el fotograma y seleccione Borrar fotograma clave en el menú contextual. El fotograma clave eliminado y todos los fotogramas hasta el fotograma clave siguiente se sustituirán con el contenido del fotograma que preceda al fotograma clave eliminado. Utilización de capas Las capas son como hojas de acetato transparente apiladas. Las capas ayudan a organizar las ilustraciones de los documentos. Los objetos de una capa pueden dibujarse y editarse sin que afecten a objetos de otras capas. Cuando una capa está vacía, las capas situadas debajo pueden verse a través de ésta. Para dibujar, pintar o modificar una capa o una carpeta, primero se debe seleccionar para activarla. Un icono con forma de lápiz junto a una capa o carpeta indica que la capa o carpeta está activa. Sólo puede haber una capa activa en cada momento (aunque se pueda seleccionar más de una capa a la vez). Inicialmente, un documento de Flash contiene una sola capa. Puede añadir más capas para organizar las ilustraciones, la animación y los demás elementos del documento. El número de capas que pueden crearse sólo está limitado por la memoria del equipo. Las capas no aumentan el tamaño del archivo SWF publicado. Puede ocultar, bloquear o reordenar capas. También puede organizar y administrar capas creando carpetas de capas y colocando las capas en ellas. Puede expandir o contraer las capas en la línea de tiempo sin que ello afecte a lo que se muestra en el escenario. Es aconsejable utilizar capas o carpetas distintas para archivos de sonido, acciones, etiquetas y comentarios de fotograma. De este modo encontrará estos elementos con mayor facilidad cuando tenga que editarlos. Además, las capas de guías pueden utilizarse para facilitar el dibujo y la edición, y las capas de máscara para facilitar la creación de efectos sofisticados. Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
38
UAMCEH Multimedia 2
5 Creación de capas Cuando se crea una capa o una carpeta nueva, ésta aparece encima de la capa seleccionada. La capa recién creada se convierte en la capa activa. Para crear una capa, siga uno de estos procedimientos: • Haga clic en el botón Insertar capa situado en la parte inferior de la línea de tiempo. • Seleccione Insertar > Línea de tiempo > Capa. • Haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en un nombre de capa de la línea de tiempo y elija Insertar capa en el menú contextual.
Edición de capas Puede copiar, eliminar capas, y cambiarles el nombre. También puede bloquear capas para que no puedan editarse. De forma predeterminada, las capas nuevas reciben el nombre según el orden en el que se han creado. Capa 1, Capa 2, etcétera. Puede cambiar el nombre de las capas para que reflejen mejor el contenido. Para seleccionar una capa, siga uno de estos procedimientos: • Haga clic en el nombre de una capa o carpeta en la línea de tiempo. • Haga clic en un fotograma en la línea de tiempo de la capa que desea seleccionar. • Seleccione un objeto en el escenario ubicado en la capa que desea seleccionar. • Para seleccionar dos o más capas, siga uno de estos procedimientos: • Para seleccionar capas contiguas, con la tecla SHIF presionada, haga clic en los nombres correspondientes en la línea de tiempo. Para cambiar el nombre de una capa, siga uno de estos procedimientos: • Haga doble clic en el nombre de una capa e introduzca un nombre nuevo. • Haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en el nombre de una capa o carpeta y elija Propiedades en el menú contextual. Escriba el nombre nuevo en el cuadro de texto Nombre y haga clic en Aceptar. • Seleccione la capa en la línea de tiempo y elija Modificar > Línea de tiempo > Propiedades de capa. En el cuadro de diálogo Propiedades de Capa, introduzca el nombre nuevo en el cuadro de texto Nombre y haga clic en Aceptar.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
39
UAMCEH Multimedia 2
Utilización de los paneles y del inspector de propiedades Flash permite personalizar de muchas maneras el espacio de trabajo. Mediante los paneles y el inspector de propiedades, puede ver, organizar y cambiar elementos y sus atributos. Puede cambiar el tamaño de los paneles, mostrarlos y ocultarlos. También puede agrupar paneles y guardar conjuntos de paneles personalizados para que la gestión del espacio de trabajo sea más fácil. El inspector de propiedades cambia para reflejar la herramienta o el elemento con el que trabaja, lo que permite acceder rápidamente a las funciones más utilizadas.
Acerca del inspector de propiedades El inspector de propiedades simplifica la creación de documentos facilitando el acceso a los atributos más utilizados del elemento seleccionado, ya sea en el escenario o en la línea de tiempo. Puede modificar los atributos del objeto o documento en el inspector de propiedades sin acceder a los menús o paneles que contienen estas funciones. El inspector de propiedades muestra información y la configuración del elemento que está seleccionado, que puede ser un documento, un texto, un símbolo, una forma, un mapa de bits, un vídeo, un grupo, un fotograma o una herramienta. Cuando hay dos o más tipos de objetos seleccionados, el inspector de propiedades muestra el número total de objetos seleccionados. Panel Biblioteca El panel Biblioteca es donde se guardan y organizan los símbolos creados en Flash, además de archivos importados tales como gráficos de imágenes de mapa de bits, archivos de sonido y clips de vídeo. En el panel Biblioteca puede organizar en carpetas los elementos de biblioteca, ver con qué frecuencia se utilizan en un documento y ordenarlos por tipo. Véase “Utilización de la biblioteca para administrar elementos multimedia” en el apartado Utilización de Flash de la Ayuda. Panel Acciones El panel Acciones permite crear y editar acciones para un objeto o fotograma. El panel Acciones se activa cuando se selecciona una instancia de un fotograma, botón o clip de película. El título del panel Acciones cambia a Acciones - Botón, Acciones - Clip de película o Acciones - Fotograma, según el elemento que esté seleccionado.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
40
UAMCEH Multimedia 2
Utilización de los paneles Los paneles de Flash facilitan la visualización, la organización y la modificación de los elementos de los documentos. Las opciones disponibles en los paneles controlan las características de los símbolos, las instancias, los colores, el texto, los fotogramas y otros elementos. Puede utilizar los paneles para personalizar la interfaz de Flash, manteniendo visibles los paneles necesarios para una determinada tarea y ocultando los demás. Los paneles permiten trabajar con objetos, colores, textos, instancias, fotogramas, escenas y documentos enteros. Por ejemplo, puede utilizar el mezclador de colores para crear colores y el panel Alinear para alinear los objetos con otros objetos o con el escenario. Para ver una lista completa de todos los paneles disponibles en Flash, consulte el menú Ventana. La mayoría de los paneles incluyen un menú emergente con opciones adicionales. El menú de opciones se indica mediante un control en la barra de título del panel. Si no aparece ningún control del menú de opciones, significa que el panel no tiene menú de opciones. De forma predeterminada, los paneles aparecen agrupados en la parte inferior y derecha del área de trabajo de Flash. Para abrir un panel: • Seleccione el panel deseado en el menú Ventana. Para cerrar un panel, siga uno de estos procedimientos: • Seleccione el panel deseado en el menú Ventana. • Haga clic con el botón derecho del ratón (Windows) o con la tecla Control presionada (Macintosh) en la barra de título del panel y seleccione Cerrar panel en el menú contextual.
Para utilizar el menú de opciones de un panel: 1 Haga clic en el control del extremo derecho de la barra de título del panel para ver el menú de opciones. 2 Haga clic en un elemento del menú. Para cambiar el tamaño de un panel: • Arrastre el borde del panel (Windows) o arrastre el cuadro de tamaño de la esquina inferior derecha del panel (Macintosh).
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
41
UAMCEH Multimedia 2
Para expandir o contraer un panel a su barra de título: • Haga clic en la flecha de contracción de la barra de título. Haga clic en la flecha de contracción de nuevo para expandir el panel hasta su tamaño anterior. Para cerrar todos los paneles: • Seleccione Ventana > Ocultar paneles. Organización de los paneles Puede modificar el orden en el que aparecen los paneles en los grupos de paneles. También puede crear nuevos grupos de paneles y acoplar paneles a grupos de paneles existentes. Si desea que un panel aparezca solo, apartado de otros grupos de paneles, puede hacer que el panel sea flotante. Esto resulta muy útil para los paneles a los que siempre desea tener acceso, por ejemplo el panel Ayuda o el panel Acciones. Para mover un panel: • Arrastre el panel por los puntos de sujeción (a la izquierda de la barra de título). Para añadir un panel a un grupo de paneles existente: • Arrastre el panel por los puntos de sujeción hasta otro panel. Para hacer flotar un panel: • Arrastre el panel por los puntos de sujeción y aléjelo de otros paneles. Para crear un grupo de paneles: • Arrastre el panel por los puntos de sujeción y aléjelo de otros grupos de paneles. Añada más paneles al grupo. Visualización de la biblioteca para un documento En el panel Biblioteca puede ver los elementos de biblioteca para el documento. 1 Si el panel Biblioteca no está abierto, seleccione Ventana > Biblioteca. 2 Visualice o desplácese por los elementos del panel Biblioteca. 3 Cuando los haya visualizado, contraiga el panel.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
42
UAMCEH Multimedia 2
6 Sonido en Flash Trabajar con Sonidos Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav, .aiff y .mp3) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra película. Importar Sonidos Para importar un sonido haz clic en el menú Archivo → Importar → Importar a biblioteca.
Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás seleccionar en Tipo de archivo Todos los formatos de sonido. Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu película. Selecciónalo haciendo clic sobre él y haz pulsa el botón Aceptar. El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca (menú Ventana → Biblioteca).
Propiedades de los Sonidos En Flash 8, al igual que en Flash 8 todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Aquí tenemos todo lo necesario para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado ningún sonido, nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlo para que esto cambie. Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en algún fotograma de nuestra película, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
43
UAMCEH Multimedia 2
Veamos
las partes que tiene este panel.
Sonido: En esta pestaña nos aparecerán las canciones que tenemos importadas, deberemos seleccionar la canción que pretendamos añadir a nuestra película (en el siguiente punto veremos cómo insertarlo). Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensación de que el sonido te envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Si deseamos añadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algún programa creado específicamente para este propósito antes de importarlo. En el punto Editar Sonidos se tratará en más profundidad estos efectos. Sinc: Esta opción nos permite determinar en qué momento comenzará a actuar nuestro sonido, estas son las opciones que tenemos: Evento: Sincroniza nuestro sonido con un evento determinado. Es la opción por defecto y provoca que el sonido se empiece a reproducir al pasar la película por el fotograma en el que está situado. También se puede sincronizar el sonido con botones y los demás tipos de símbolos. • Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si está seleccionado Inicio en vez de Evento y se reproduce otra vez el mismo sonido u otro distinto, lo hace "encima" del sonido actual. Puede ser un efecto muy atractivo, o puede provocar que se forme "ruido" en nuestra película. • Detener: Detiene el sonido seleccionado. • Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté asociado, por tanto, si la carga de la película es lenta y las imágenes no fluyen adecuadamente, el sonido se detendrá para sincronizarse con ellas. Este efecto puede dar la sensación de que la película se corta de un modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una reacción muy negativa en los que pueden estar viendo nuestra película). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una película. En esta situación, es muy recomendable que el sonido y las imágenes estén sincronizadas. Repetir: Determina el número de veces que se reproducirá el sonido según lo que escribas en la caja de texto de la derecha. También puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bluce hasta llegar al siguiente fotograma clave.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
44
UAMCEH Multimedia 2
Insertar un Sonido Ahora que ya sabemos importar un sonido, qué opciones podemos modificar y para qué sirve cada una. Veamos lo más importante, cómo insertarlos en nuestra película. Supongamos que queremos insertar un sonido en un fotograma determinado, de modo que cuando la película Flash llegue a este fotograma comience a reproducirse el sonido. Para que un sonido se reproduzca al llegar a un fotograma, deberemos seleccionar el fotograma en el que queremos que empiece a reproducirse el sonido. Una vez allí, abriremos el Panel Propiedades e importaremos el sonido que queramos del modo visto en el punto anterior. Otro modo mas rápido aun consistiría en seleccionar dicho sonido en la Biblioteca y arrastrarlo al fotograma en el que queramos que se empiece a reproducir el sonido (al fotograma, no a la línea de tiempo).
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
45
UAMCEH Multimedia 2
Editar un Sonido Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es limitada. Aún así, los efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animación que queramos realizar. Disponemos de estos efectos: Canal Izquierdo: El sonido tan sólo se escuchará por el altavoz izquierdo. Canal Derecho: El sonido tan sólo se escuchará por el altavoz derecho. Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el altavoz izquierdo para luego pasar al derecho. Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el altavoz derecho para luego pasar al izquierdo. Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente. Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente. Personalizado: Esta opción nos permite "editar" el sonido de un modo rápido y sencillo. Desde este editor podemos decidir qué volumen tendrá nuestro sonido y en qué altavoz. Podemos crear los efectos anteriores ajustándolos a nuestro gusto y podemos crear efectos más complejos a nuestra medida. Esta es la apariencia del Panel Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una línea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto. Las líneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen. En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen está al máximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldría a un Aumento Progresivo en el canal derecho). Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
46
UAMCEH Multimedia 2
7 ActionScript ¿Qué es ActionScript? Es el lenguaje de programación que utiliza flash. Todo lo que hay en la película que no este controlado por la línea de tiempo lo controlará ActionScript. ActionScript. Es un lenguaje orientado a objetos, lo cual significa que cada uno de los elementos de una película de flash que tenga una referencia o un nombre será considerado como entidad individual. Flash es una jerarquía de objetos, la película es en si misma, un objeto que contiene objetos, que a su vez, pueden contener otros objetos, y así sucesivamente. ActionScript es lo que convierte a Flash en algo más que una gran herramienta de animación. Cada línea de código ActionScript que escriba contendrá una o mas palabras clave, entre las que se incluye los comandos, las funciones, los nombres de propiedades y mas. ¿Adonde van dirigidos los ActionScripts?
Hay tres lugares donde puede encontrar ActionScript 1. Adjunto a un fotograma en la línea de tiempo
2. Adjunto a una instancia de símbolo de botón
3. Adjunto a una instancia de Clip de Película
El código ActionScript se escribe en el panel Acciones Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
47
UAMCEH Multimedia 2
¿Cómo Usar ActionScript? ActionScript es un lenguaje conducido por eventos, lo cual significa que los script se ejecutan como resultado de ciertas cosas que se producen durante el transcurso de una reproducción de una película, un evento es algo así como cuando la cabeza reproductora se desplaza de un fotograma a otro el cursor moviéndose o la pulsación de una tecla, cuando tienen lugar estos eventos los mensajes son enviados a la película y a sus objetos, y si los script están en los lugares apropiados, los mensajes son enviados a los scripts. ActionScript comunes en flash Para hacer una liga a una pagina web
on (release) { getUrl("http://www.google.com.mx","_blank") }
Para salir de la aplicación flash on (release) Player { getURL("FSCommand:quit", true); } Para iniciar en pantalla completa
fscommand("fullscreen", "true");
Para ir a determinado frame
on (release) { gotoAndStop(1); }
Para abrir un swf
on (release) { loadMovieNum("nombre.swf", 1); }
Para quitar un swf
on (release) { unloadMovieNum("nombre.swf", 1); }
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
48
UAMCEH Multimedia 2
8 Integración con Dreamweaver ¿Que es Dreamweaver? Dreamweaver es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. La barra de herramientas Insertar o panel de objetos La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc. Las películas Flash pueden insertarse en una página a través del menú Insertar, Media, opción Flash. También pueden insertarse pulsando sobre la opción pestaña Común del panel Insertar, botón Media.
Mtro. Daniel D. Borrego Gómez
Flash que aparece en la
e-mail linuxppp@hotmail.com
49
UAMCEH Multimedia 2
El inspector de propiedades de las películas Flash es prácticamente igual que el de los botones y el texto Flash.
Insertar Película Flash En la ventana de documento situar el putero y dar un clic en el lugar donde se desea insertar la película Flash Insertar la película de una de estas maneras: Insertar - Media - Flash - Buscar y seleccionar en «Buscar en:» el archivo de película Flash con extensión swf - Aceptar En la barra «Insertar» hacer clic en la ficha «Común» ó «Media» - Hacer clic en el icono «Flash» - Buscar y seleccionar el archivo de película Flash (swf) - Aceptar Arrastrar el icono «Flash» desde las fichas «Común» ó «Media» de la barra «Insertar» hasta el punto de inserción del documento - Buscar y seleccionar el archivo de película (swf) - Aceptar Para previsualizar la película Flash en la ventana de documento, hacer clic en el botón verde Reproducir del inspector de Propiedades. Para poner fin a la previsualización hacer clic en el botón rojo Detener Quitar la película de Flash Seleccionar la película Flash Pulsar la tecla Borrar
9 Publicación y realización de un autorun Prueba de la aplicación En cualquier momento durante la edición, puede probar cómo se reproduce la aplicación como archivo SWF. 1 Seleccione Archivo > Guardar para guardar la aplicación. 2 Guarde la aplicación y seleccione Control > Probar película. 3 Haga clic en el botón Información para ir al sitio Web que ha especificado en el comportamiento. 4 Visualice la animación para comprobar que se reproduce de la forma esperada. 5 Cuando termine de ver la aplicación, cierre el archivo SWF haciendo clic en su cuadro de cierre. Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
50
UAMCEH Multimedia 2
Publicación y visualización de la aplicación Para completar el documento, utilice el comando Publicar para crear una aplicación como archivo SWF compatible con Internet. Si utiliza el comando Publicar con las configuraciones predeterminadas, Flash preparará su archivo para Internet. Flash publica el archivo SWF y crea un archivo HTML con las etiquetas necesarias para visualizar el archivo SWF. Una vez definidas las opciones de configuración de publicación necesarias, podrá elegir todos los formatos seleccionados de forma inmediata si elige Archivo > Publicar. Puesto que Flash almacena la configuración de publicación con el documento, cada aplicación puede tener su propia configuración.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
51
UAMCEH Multimedia 2
Publicación de la aplicación Puede publicar el documento de Flash para que se reproduzca en un paso, seleccionando Archivo > Publicar. Antes de publicar, no obstante, compruebe los valores de configuración de publicación. Visualización de la configuración de publicación Si utiliza el cuadro de diálogo Configuración de publicación, puede modificar fácilmente el modo en el que se publicará el archivo. 1 Para ver la configuración de sus publicaciones, elija Archivo > Configuración de publicación Flash está configurado de forma predeterminada para crear un archivo HTML de apoyo que muestre la aplicación Flash. Cuando selecciona un formato que necesita configuraciones adicionales aparece una nueva ficha. 2 En la ficha Formatos, verifique que Flash (.swf) y HTML (.html) estén seleccionados. Haga clic en la ficha Flash. De forma predeterminada, la aplicación se publica para Flash Player. 3 Haga clic en la ficha HTML. De forma predeterminada, el proceso de publicación crea un documento HTML que inserta el archivo SWF en una ventana de navegador. La configuración de la ficha HTML del cuadro de diálogo Configuración de publicación determina el modo en el que la aplicación aparece en el navegador. 4 Si la opción Detectar versión de Flash está seleccionada, deselecciónela de modo que Flash no cree archivos para detectar la versión de Flash Player que tiene instalada el usuario. Cambio en la configuración de publicación De forma predeterminada, Flash da al archivo SWF el mismo nombre que el archivo FLA. Ahora cambiará el nombre predeterminado. 1 Haga clic en la ficha Formatos del cuadro de diálogo Configuración de publicación. En el cuadro de texto HTML (.html), seleccione el texto existente y escriba newAd.html. 2 Haga clic en Publicar. Cuando se cierre la ventana de estado Publicación, haga clic en Aceptar en el cuadro de diálogo Configuración de publicación. 3 Guarde el documento. La configuración de publicación se guarda con el documento, de modo que, la próxima vez que desee publicar con la misma configuración, puede seleccionar Archivo > Publicar. Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
52
UAMCEH Multimedia 2
Nota: también puede crear perfiles de publicación. Véase “Creación de perfiles de publicación” en el apartado Utilización de Flash de la Ayuda. Visualización de la aplicación publicada en un navegador En el navegador, puede ver el archivo HTML y la aplicación SWF que acaba de publicar. 1 Abra el navegador y, a continuación, abra el archivo HTML que ha creado, denominado newAd.html. De forma predeterminada, el archivo HTML se encuentra en la misma carpeta que el archivo FLA. Cuando se abre el archivo HTML, la aplicación SWF se reproduce en el navegador. 2 En el navegador, utilice un comando como Ver > Origen de la página o Ver > Código fuente para ver el código HTML. Creación de un Cd-Rom Auto Ejecutable (Autorun) Cuando deseamos crear un Cd ROM y queremos que este se auto ejecute al introducirlo en la unidad de CD / DVD tenemos que incluir un pequeño archivo en el Directorio del CD. El archivo en cuestión se llamaría AUTORUN.INF este pequeño archivo se crea con el bloc de notas.
El contenido que debemos introducir dentro del archivo es el siguiente:
[autorun] open=archivo.exe icon=archivo.ico
Donde pone “archivo.exe” se tiene que poner el nombre del archivo a ejecutar y donde pone “archivo.ico” ponemos el icono del CD-ROM que veremos al mostrar el contenido de “MiPC”.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
53
UAMCEH Multimedia 2
Puede que lo que quieras que se ejecute sea un archivo de una determinada aplicación, como por ejemplo un archivo html (o cualquier otro archivo que quieras), entonces tendrás que crear además un archivo BAT (por lotes) que haga que el archivo de la aplicación se pueda auto ejecutar. Los pasos serán primero crear el archivo bat con el bloc de notas, que por ejemplo lo llamamos auto.bat y estará constituido por las dos líneas siguientes: @explorer @exit
Indice.htm
Donde “Indice.htm” es el nombre del archivo que tengas (si es un archivo del Word sería por ejemplo :@explorer chistes.doc, se admite cualquier archivo de windows y siempre que el ordenador donde se use el CD tenga el programa que abre dicho archivo). Luego debes crear el archivo autorun.inf: [autorun] open=auto.bat icon=Dibujo.ico Ambos archivos irán en el directorio raíz, así como el archivo htm. Consejo: antes de grabar el CD pon el archivo “auto” y el archivo que quieras que se abra dentro de la misma carpeta de tu disco duro y ejecuta el archivo .bat para comprobar que abre la aplicación con el archivo elegido, si es así cuando grabes el CD y pongas los 3 archivos anteriores en el directorio raíz no fallará, si no se abre comprueba si tu archivo por lotes .bat realmente tiene extensión .bat y no es “auto.bat.txt” y su contenido es correcto.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
54
UAMCEH Multimedia 2
EJEMPLOS Interpolación Movimiento Abramos un nuevo documento y vamos a colocar en la capa el nombre movimiento, en el fotograma uno dibujaremos un círculo como vemos a continuación y lo trasformaremos a grafico.
En el fotograma 30, vamos a colocar un fotograma clave movemos el circulo hacia el otro extremo del escenario.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
55
UAMCEH Multimedia 2
Nos posicionamos en el fotograma uno y vamos a ver como las opciones del inspector de propiedades cambian.
Al seleccionar en animar movimiento la línea de tiempo toma la forma de interpolación de movimiento después nos vamos al menú ventana barra de herramientas y seleccionamos controlador una ves que se nos muestre el controlador presionaremos el botón de play y veremos la interpolación de Movimiento.
Se puede realizar interpolaciones de movimiento a texto e imagen siempre y cuando sean transformados a un símbolo gráfico.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
56
UAMCEH Multimedia 2
Interpolación De Forma Abramos un nuevo documento y vamos a colocar en la capa el nombre forma, en el fotograma uno dibujaremos un círculo como vemos a continuación:
En el fotograma 30, vamos a colocar un fotograma clave, y ahí vamos a dibujar un cuadrado. Luego borraremos el círculo que tenemos solo en el fotograma 30.
Nos posicionamos en el fotograma uno y vamos a ver como las opciones del inspector de propiedades cambian.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
57
UAMCEH Multimedia 2
Al seleccionar en animar forma la línea de tiempo toma la forma de interpolación de forma después nos vamos al menú ventana barra de herramientas y seleccionamos controlador una ves que se nos muestre el controlador presionaremos el botón de play y veremos la interpolación de forma.
Se puede realizar interpolaciones de forma en texto e imagen siempre y cuando las imágenes y texto estén en formato de vectores.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
58
UAMCEH Multimedia 2
Mascara
Tenemos un efecto que podemos lograr con las capas que es el enmascaramiento. Usaremos una capa de máscara para crear una mira, a través del cual es visible el contenido de la capa oculta. Para crear una capa de máscara, se coloca un círculo con una interpolación de movimiento sobre la capa. La capa de máscara muestra el área de las capas vinculadas y situadas por debajo de la forma rellena y oculta todas las demás. Las capas de máscara pueden contener una sola forma, instancia u objeto. Abramos un nuevo archivo a la cual le pondremos el nombre de máscara, vamos a colocar una capa más, quedándonos dos capas. A la de arriba de todo, le vamos a colocar el nombre de máscara y a la de abajo el nombre de enmascarado. Ahora en el de arriba colocaremos una bola con una interpolación de movimiento desde una punta a la otra del escenario.
En la capa inferior, haremos cualquier dibujo o palabras sueltas, cualquier cosa que obviamente estén por debajo de la ruta que tiene la bola.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
59
UAMCEH Multimedia 2
Una vez listo, nos posicionamos en la capa de arriba, máscara, y vamos a darle doble click al icono que tenemos al lado de la palabra máscara con forma de hoja ahí se nos va a abrir un menú en el cual seleccionaremos máscara, y haremos lo mismo con la capa de abajo y ahí seleccionaremos enmascarado.
Vayamos a control y probemos la escena. Si colocamos candado en las dos capas se verá el efecto en el escenario mismo.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
60
UAMCEH Multimedia 2
Creación de Botón Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las películas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que cualquier botón de cualquier entorno informático, sea web o cualquier otro. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se les está pulsando. Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él. Sobre. Aspecto del botón cuando situamos el puntero sobre él. Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado. Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo mapa de bit).
En la creación de un botón podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a símbolo de tipo botón y posteriormente veremos cómo completarlo internamente, lo que nos ayudará a entender mejor dicha estructura. Primeramente crearemos el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash. Seleccionaremos el objeto en este caso un rectángulo y accederemos al menú Insertar-> Convertir en Símbolo, le daremos el comportamiento Botón y asignaremos un nombre a nuestro nuevo símbolo.
De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente.
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
61
UAMCEH Multimedia 2
Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo clic con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Editar. Cuando tengamos delante la línea de tiempos del botón, seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.
Ahora ya podemos modificar el aspecto inicial del botón para cada posición del cursor y marcar el área de acción del botón (fotograma zona activa) en la que simplemente podremos dejar la misma figura que la inicial (en este caso sólo es importante la forma del objeto, no los colores u otras cosas).
Mtro. Daniel D. Borrego Gómez
e-mail linuxppp@hotmail.com
62