Barra de Herramientas
Anuncio
Guía del Alumno – Macromedia Flash PRIMERA CLASE Conceptos Generales Macromedia Flash 5.0, es un programa que nos permite añadir interactividad a nuestras páginas Web, hasta ahora sólo hemos visto como crear e insertar imágenes estáticas en formato GIF y JPEG, el elemento interactivo que nos falta para crear una página dinámica y que llame la atención de la persona que la va a visitar, lo aprenderemos a crear utilizando Flash 5.0. Para ingresar al Programa debemos hacer un clic en el Botón Inicio, luego Programas, Macromedia Flash 5 y por último Flash 5 (o simplemente haga doble clic en el acceso directo que se encuentra en el escritorio), se abrirá la ventana que vemos a continuación: Barra de Menú Línea de Tiempo Barra de Herramientas Principal Fotogramas Capas Barra de Herramientas Escenario Paneles Principales Antes de comenzar a crear animaciones o “Películas”, como se les llama en Flash, es importante que aprendamos como está organizado este programa. A fin de comprender mejor, podemos hacer una analogía con el cine, tomando como base dos dimensiones: una espacial (la pantalla o escenario) y otra temporal (la línea de tiempo en la que se van desarrollando los sucesos), y como sucede en la mayoría de los programas de diseño, Flash agrega una tercera dimensión, la utilización de Capas dentro de los cuales se pueden organizar el orden en que irán los contenidos, esto es primer plano, segundo plano, etc. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 1 Guía del Alumno – Macromedia Flash ; Escenario: ; ; ; ; ; ; es el área de trabajo donde se van colocando los elementos que se visualizarán en la pantalla. Línea de Tiempo: es donde se maneja el desarrollo temporal de la película. Fotogramas: al igual que en el cine, las animaciones de Flash se componen de fotogramas, donde cada fotograma es una imagen que al reproducirse una tras otra dan la sensación de movimiento. Símbolos: son los personajes que actúan en nuestra película , pueden ser imágenes, animaciones o botones. Capas: las capas se utilizan para separar los elementos y, de esta forma, mantenerlos organizados. Barra de Herramientas: es el lugar donde encontrarás las principales opciones para dibujar y modificar los elementos. Paneles: Flash 5 cuenta con una gran cantidad de paneles para trabajar con los diferentes elementos. Se visualizan y ocultan desde el menú Ventana / Paneles. Conozcamos la Barra de Herramientas: Como ya vimos en la definición, la Barra de Herramientas contiene todos los elementos necesarios para desarrollar y modificar el contenido gráfico de las películas. El contenido de la Barra está dividido en cuatro sectores: Herramientas de Dibujo, Texto, Pintura y Selección Selección de Visualización (Zoom y Mano Alzada) Los colores de borde y de relleno Las opciones propias de la herramienta seleccionada. La Barra de Herramientas puede ser movida dentro de la ventana de Flash, para ello presione le botón del mouse sobre sobre alguna parte de la superficie de la Barra, y sin soltarlo, muévala a otro sector dentro de la pantalla y suelte el botón. También podrá activar o desactivar la barra en el Menú Ventana / Herramientas Página 2 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash Dibujar Objetos utilizando la Barra de Herramientas Para comprender mejor las definiciones, practique las herramientas a medida que se van explicando. Líneas: En Flash hay tres formas principales de dibujar líneas: la Herramienta Línea, la Herramienta Lápiz y la herramienta Pluma, el usuario puede elegir cualquiera de ellas. Herramienta Línea: Para dibujar utilizando la herramienta línea, solo debe seleccionarla luego llevar el cursor al escenario pulsar el botón izquierdo del mouse y sin soltar darle la orientación a la línea, cuando haya alcanzado la extensión deseada, suelte el botón del mouse. Para dibujar líneas con ángulos de 45° y sus múltiplos, debe usar la herramientas línea a la vez que mantiene presionada la tecla Shift. A modo de ejercicio, dibuje varias líneas. Una opción muy útil es poder curvar una línea recta, para ello debe dibujar la línea, luego seleccione la herramienta flecha, lleve el cursor hacia el centro de la línea, cuando en el cursor aparezca la figura de una curva haga un clic sin soltar y arrastre para alguno de los costados, podrá notar que la línea recta se ha deformado creando una curva. Herramienta Lápiz: Para dibujar utilizando la herramienta lápiz, selecciónela, lleve el puntero al escenario, pulse el botón izquierdo del mouse y sin soltar, dibuje de la misma forma en que lo haría con un lápiz, cuando desee finalizar solo debe soltar el botón del mouse. Dentro de la propiedades de la herramientas Lápiz, y que aparecen en la barra de herramienta al momento de seleccionarla, tenemos tres opciones que sirven para cambiar la apariencia del dibujo. La primera opción es Enderezar, y convierte el dibujo en líneas curvas o rectas, por ejemplo si dibujamos un trazo que tenga apariencia redondeada, el programa automáticamente lo convierte en un círculo o un óvalo. Luego tenemos la opción Suavizar, que mantiene la esencia de la figura que dibujamos pero los trazos se vuelven mas redondeados y suaves, y por último tenemos la opción Tinta, es la que mas se parece al recorrido que haga con el mouse, ajusta algunos ángulos y da la apariencia de un trazo a mano alzada. Para dibujar líneas rectas perfectas, use la herramienta lápiz a la vez que presiona la tecla Shift sin soltar. Herramienta Pluma: Permite realizar dibujos con mayor precisión , utilizando nodos y curvas bezier (parecido a los dibujos ya realizados en Corel Draw). Seleccione la herramienta Pluma, lleve el cursor al escenario y haga un clic donde desee comenzar la figura, luego haga un clic en otro sector del escenario, podrá notar que entre los dos nodos se ha creado una línea recta. Si inserta varios nodos dentro del escenario y el último lo hace coincidir con el primero, se crea un objeto cerrado. De esta forma puede crear la base de cualquier figura y luego deformarla a través de los nodos o utilizando la herramienta flecha. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 3 Guía del Alumno – Macromedia Flash Herramientas Ovalo y Rectángulo: Estas nos permiten dibujar circunferencias, óvalos, cuadrados y rectángulos, se selecciona la herramienta que se desea ocupar y luego se dibuja en el escenario. Para dibujar círculos y cuadrados perfectos, debemos utilizar la herramienta respectiva mientras mantenemos presionada la tecla Shift sin soltar. Para asignar relleno a las figuras, se utiliza el Menú Opciones de esta herramienta, hay rellenos uniformes, degradados, etc., muy parecidos a los usados en Corel Draw. Herramienta Texto: El comportamiento de esta herramienta es muy parecida a la que utilizamos en Power Point o Corel Draw, basta seleccionarla y hacer un clic en el lugar del escenario en que deseamos insertar un texto y luego escribir. La diferencia la podemos encontrar en las propiedades, Menú Ventana / Paneles / Carácter. Herramienta Pincel: El pincel le permitirá crear diferentes efectos en sus trazos. Similar a una brocha, no posee líneas externas y cuenta con distintos tipos y anchos de trazo. Por otra parte, al dibujar con esta herramienta, tendrá la sensación de que es sensible a la presión ejercida sobre el mouse, similar al efecto que se produce al usar un verdadero pincel. Esta herramienta cuenta con un menú de opciones propio donde se pueden definir la forma del pincel, el ancho de este y la forma en que se va a pintar. Propiedades de una película de Flash Como ya vimos, el escenario es el sector donde se ubican todos los elementos gráficos de un archivo de Flash. Es decir todo lo que se visualizará en cada fotograma de la película deberá estar ubicado en el escenario. La organización de los elementos dentro del escenario se realiza en dos dimensiones x e y. Además, como veremos más adelante, Flash ofrece la posibilidad de usar capas o planos para disponer los diferentes elementos. Al comenzar a trabajar con una película de Flash es importante definir algunos patrones relacionados con el escenario, como el alto, el ancho y el color de fondo, entre otras acciones. Todas ellas se encuentran en Las Propiedades de la Película, para llegar allí debemos hacer un clic en el Menú Modificar y luego Película, aparecerá el siguiente cuadro de diálogo: Cantidad de fotogramas por segundo que mostrará la presentación Alto y ancho que tendrá la película Opciones predeterminadas que nos permiten ajustar el tamaño de la hoja a la sección imprimible de esta, o sólo al contenido de ella. En este cuadro es posible definir el color de fondo de la página Página 4 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Unidad de medida que se utilizará para dar las dimensiones (Ancho y Alto) Guía del Alumno – Macromedia Flash Una vez definidas las propiedades de la página, sólo debemos hacer un clic en el botón Aceptar para aplicar los cambios. Uso de reglas, guías y grilla: Para trabajar con mayor precisión en los dibujos y diseños, Flash nos proporciona una serie de reglas (horizontal y vertical), guías para colocar en cualquier parte del escenario y un grillado que le servirá como base para la estructuración de la película. Estos elementos pueden ocultarse o visualizarse cuando usted los desee y, por supuesto, no se ven en la proyección de la película, sino que son sólo herramientas para facilitar la tarea de dibujo y ordenamiento. Reglas: Las reglas se visualizan u ocultan seleccionando el Menú Ver, luego Reglas, un tilde indicará que la opción está activada. Guías Las guías son elementos que podrá colocar en cualquier parte del escenario y sirven como marcas para poder alinear elementos, colocar objetos en lugares precisos, etc. Para colocar una guía deberá hacer clic en la Regla (horizontal o vertical, según el tipo de guía que necesite) y, sin soltar el botón del mouse, desplazarlo hasta el lugar del escenario en el que desee colocarla. Desde el Submenú que se despliega de la opción Guías del Menú Ver podrá: ; Visualizar o no las guías (Mostrar guías) ; Bloquear las guías para evitar que sean movidas (Bloquear guías) ; Con la opción ajustar a guías seleccionada, al mover elementos, estos tenderán a posicionarse sobre las guías, a fin de trabajar con más precisión. Grilla: La grilla que muestra Flash se trata de una cuadrícula para calcular el tamaño entre los elementos y el área de trabajo. Para visualizar la grilla haga un clic en el Menú Ver, luego Cuadrícula y por último active la opción Mostrar Cuadrícula. Para que al mover o dibujar elementos, estos tiendan a ajustarse a la grilla como si ésta fuese un imán, marque la opción Ajustar a cuadrícula. También puede modificar todas las opciones relativas a la grilla, desde el cuadro de diálogo que se abre al seleccionar la opción Editar cuadrícula. Ya hemos conocido los elementos básicos para comenzar a crear una película en Flash, como son los componentes de la ventana del programa, las herramientas para configurar las dimensiones del escenario o película, las herramientas para crear elementos o dibujo y algunas herramientas opcionales que nos permiten crear un dibujo ordenado y dimensionado, como son las reglas, guías y cuadrículas o grilla. Si tiene alguna duda sobre lo que hemos estudiado hasta acá, es necesario que repase su guía y pida a su tutor que lo ayude a aclarar sus dudas, es importantísimo despejar todo tipo de dudas, ya que para crear una buena película en Flash muchas veces es necesario utilizar todas las herramientas de apoyo que nos ofrece este programa. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 5 Guía del Alumno – Macromedia Flash Crear dibujos en Flash Es importante saber y entender como este programa maneja la interrelación entre los componentes de un mismo dibujo o varios dibujos en el escenario. Cuando insertamos un dibujo, ya sea óvalo, rectángulo, etc., este se divide en trazo o borde y relleno, los cuales se pueden seleccionar en forma separada o ambos al mismo tiempo, para comprender mejor lo que estamos hablando haremos el siguiente ejercicio: ; Dibuje en la esquina superior izquierda del escenario, un rectángulo, asigne color ; ; ; ; ; de trazo rojo y color de relleno azul. Luego con la herramienta Flecha haga un clic en el borde de la figura, podrá notar que solo se ha seleccionado el contorno de esta. Sin soltar el botón del mouse arrastre hacia el centro del escenario y luego suelte el botón, verá como el contorno se desprende del resto de la figura. Vuelva el contorno a su lugar original utilizando la herramienta deshacer y cambie el color del trazo a amarillo. Luego con la herramienta Flecha haga un clic en el centro de la figura y arrastre hacia el centro del escenario verá como el relleno del rectángulo se separa del contorno Vuelva el relleno a su lugar de origen y cambie el color de relleno a verde. Para modificar el comportamiento de cualquier objeto, es decir, si queremos que contorno y relleno sean uno, tenemos dos opciones: ; Haga doble clic en el rectángulo que dibujo en su escenario, al hacer esto automáticamente se selecciona contorno y relleno y es posible moverlas de lugar al mismo tiempo, pero bastará que hagamos un clic en otro lugar del escenario para que se vuelva a separar. ; Otra forma es agrupar el objeto, operación conocida por nosotros ya que lo utilizamos en programas como Power Point y Corel Draw. Haga doble clic en el centro de la figura, luego vaya al menú Modificar y Agrupar, el objeto quedará encerrado en un rectángulo celeste lo que nos indica que este objeto es un grupo. Para modificar un objeto agrupado debemos editar dicho objeto, para ello haga doble clic sobre la figura, con esto podrá cambiar las propiedades del contorno y relleno. Al terminar de aplicar los cambios, debe hacer un clic en Escena 1 que se encuentra bajo la Línea de Tiempo. Página 6 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash Definir colores de relleno, trazo o contorno El ícono color de relleno, en el cuadro de herramientas, define el color que se le asignará a los objetos que se dibujen. Al hacer clic en este ícono aparece una paleta de colores para elegir el color deseado. El conjunto predeterminado de colores de Flash está compuesto de 216 colores, que son considerados “seguros para la Web”, ya que pueden ser interpretados con precisión por la mayoría de los navegadores de Internet, como son el Internet Explorer y Netscape, entre otros. Para asignar un color de relleno, debemos seleccionar un objeto, luego hacer un clic en la herramienta relleno y elegir el color que desea en la paleta de colores. Para modificar el color de trazo es necesario seguir los mismos pasos, seleccionamos el contorno y luego un color en el ícono Color de trazo. La forma en que Flash interrelaciona varios objeto dentro del escenario, es totalmente distinto a lo que hemos visto en otros programas como Power Point o Corel Draw, ya que al poner una figura sobre otra, la que haya sido dibujada en última instancia, tapará a la anterior. Veremos este ejemplo en la práctica: ; En un escenario vacío dibuje un círculo y un rectángulo tal como se indica en la ; ; ; ; Fig. 1. Luego haga doble clic sobre el círculo, para seleccionar contorno y relleno, y sitúelo sobre el rectángulo tal como indica la Fig. 2. Haga un clic en cualquier parte del escenario que se encuentre vacía y vuelva a hacer doble clic sobre el círculo y devuélvalo a su lugar de origen. Podrá notar que el resultado es el que se aprecia en la Fig. 3. Para evitar que esto suceda se pueden agrupar los objetos uno por uno, ya que al estar agrupados y superpuestos, el área de uno no afecta el área del otro. Vuelva a realizar el ejercicio anterior pero esta vez con objetos agrupados. Al usar objetos agrupados podrá comprobar que estos no interactúan entre sí, es decir, no se fusionan ni se reemplazan secciones al poner uno sobre otro, pero existe otra forma de evitar esto y es usar Capas. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 7 Guía del Alumno – Macromedia Flash ¿Qué son las Capas? Hasta ahora, sólo hemos realizado dibujos en un mismo plano. Sin embargo, ya hemos aprendido a agrupar objetos, lo que le servirá para comprender en parte el funcionamiento de las capas. Cómo acabamos de ver, los objetos al ser agrupados, comienzan a comportase como entidad separadas del resto de los elementos (no se mezclan con el resto y no pueden ser modificados con un simple clic). Así, los elementos agrupados se pueden ubicar detrás o delante del resto (Menú Modificar, Organizar), como si ocuparan distintos planos espaciales. Para comprender mejor la idea de las capas, imagine que cada capa que usted cree, es una hoja transparente. Si dibuja una montaña sobre alguna de estas capas, verá solo la imagen que ha creado. Ahora bien, si luego inserta una nueva capa (una nueva hoja transparente) y sobre ella dibuja una casa, el resultado será una casa con fondo montañoso, y así cada elemento que agreguemos en capas distintas, se superponen para crear un solo dibujo. Las capas las podemos visualizar en el costado izquierdo de la línea de tiempo, como se muestra en la figura. Nombre de la Capa Eliminar Capa Insertar Nueva Capa Ahora llevaremos a la práctica el ejemplo de la casa con fondo montañoso, realice los siguientes pasos: ; Abra Flash 5.0, si ya está abierto asegúrese que el escenario se encuentra vacío ; Cambie el nombre de Capa 1 a Casa, para ello haga doble clic sobre Capa 1, borre y escriba el nombre nuevo, presione Enter para terminar ; En el centro del escenario dibuje una casa a su gusto, si quiere puede utilizar ; ; ; ; ; líneas guías o la grilla para lograr un mejor dibujo. Haga un clic en el botón Insertar capa, cambie el nombre de esta por Montañas En esta nueva capa dibuje cerros y montañas. Luego inserte una nueva capa que debe llamarse Sol, y en ella dibuje un sol que aparece entre las montañas Inserte otra capa que debe llamarse Pájaro y en ella dibuje un ave. Guarde este trabajo en su carpeta con el nombre Amanecer. Como podrá ver, aunque cada uno de los componentes de este paisaje, lo creamos en capas distintas, tenemos como resultado un solo dibujo donde sus componentes se comportan en forma separada uno de otro, si quisiéramos modificar el color de las montañas, solo tendríamos que seleccionar la capa en donde se encuentran, luego seleccionar las montañas y modificar sus propiedades. Se puede dar el caso que alguna Página 8 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash capa tape a la otra, es decir, que un dibujo que nosotros queríamos que apareciera en primer plano, se encuentre en segundo plano. Esto se puede reparar, haciendo un clic sobre el nombre de la capa y sin soltar arrastrar a la posición deseada. Flash nos ofrece la posibilidad de ocultar el dibujo que se encuentra en una o varias capa, es decir no mostrarlo en el escenario, lo que nos permite trabajar en otra capa con mayor comodidad. También podemos bloquear una o más capa, lo que significa que no se le pueden realizar cambios hasta que sea desbloqueada. Y por último podemos visualizar sólo los contornos de los objetos creados en las capas. Todo esto lo podemos realizar desde el costado izquierdo de la línea de tiempo, donde aparece la siguiente barra Ocultar o mostrar capas Esta opción nos permite ver solamente los contornos de los dibujos que conforman las capas Bloquear una o mas capas En su trabajo Amanecer, pruebe las herramientas Ocultar, Bloquear y Ver sólo contorno, para que aprecie los efectos que producen en las capas. Biblioteca de Flash: La biblioteca es el lugar donde se van almacenando todos los símbolos que han sido creados para la película, un símbolo se crea automáticamente, por ejemplo, cuando insertamos una interpolación de movimiento o forma. El símbolo que se almacena en la biblioteca se puede reutilizar las veces que lo necesitemos sin necesidad de dibujarlo otra vez, para ello basta con seleccionar el símbolo en la Biblioteca y arrastrarlo al escenario. Es importante aclarar que existen dos bibliotecas, una es la que se crea al ir desarrollando una película de flash, y la otra es una biblioteca común donde podemos encontrar símbolos ya creados y que podemos usar en cualquier película de Flash. Para ingresar a la Biblioteca, haga clic en el Menú Ventana y luego seleccione Biblioteca. Si selecciona Bibliotecas comunes, encontrará varias categorías de símbolos disponibles. Por el momento no profundizaremos más aquí ya que es materia de un par de clases más adelante. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 9 Guía del Alumno – Macromedia Flash Cómo crear un símbolo: 1.- Abra Flash 5 y dibuje en el centro del escenario un círculo y un rectángulo. Luego usando la herramienta Flecha, seleccione ambas figuras. 2.- Haga clic en el Menú Insertar y luego en Convertir en símbolo, aparecerá el siguiente cuadro 3.- De el nombre Figura al símbolo 5.- Para terminar haga clic en Aceptar 4.- Active la opción Gráfico 6.- Haga clic en el Menú Ventana y seleccione Biblioteca, aparecerá una ventana que le muestra el contenido de la biblioteca, seleccione el símbolo Figura y arrástrelo al escenario, verá que se inserta un dibujo igual al que creamos al principio. Guarde el ejercicio con el nombre Símbolo y cierre el programa. SEGUNDA CLASE Animación de objetos en Flash: Una animación es una secuencia de imágenes que, al ser reproducidas una tras otra, crean la ilusión de movimiento. Flash utiliza el concepto de película para referirse a cualquier aplicación creada con el programa. Mediante una animación, podemos hacer que un objeto se desplace a través de la pantalla, cambie de tamaño, rote, se estire, etc. Para ello, podemos utilizar básicamente dos tipos de animaciones: la animación por fotogramas o por interpolación. Animación por Fotograma: Vamos a crear una primera animación sencilla para conocer la forma de trabajar de Flash. Una animación por fotogramas es la que nos permitirá crear movimiento fotograma a fotograma como si se tratara de una película de dibujos animados. Para crear un ejemplo sencillo de esto, realice los siguientes pasos: 1. En la esquina inferior izquierda del escenario cree un círculo de tamaño pequeño. Con esto acabamos de insertar un dibujo en el primer y único fotograma de nuestra animación. 2. Pulsa la tecla F6 para insertar un nuevo fotograma clave, donde automáticamente se copia el círculo que creamos en el fotograma 1. 3. Selecciona el círculo del fotograma 2 (trazo y relleno), y desplácelo aproximadamente 2 centímetros en diagonal hacia la esquina superior derecha. 4. Vuelva a presionar la tecla F6 y vuelva a desplazar el círculo otros dos centímetros en la misma dirección que el anterior. 5. Repita el mismo procedimiento hasta llegar al fotograma 10. 6. Presione la tecla Enter para que pueda apreciar el resultado de la animación por fotograma 7.- Guarde este trabajo con el nombre Animación 1 en su carpeta. Página 10 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash Es importante aclarar que la animación por fotograma resulta demasiado lenta y tediosa tomando en cuenta para crear una buena animación en Flash es necesario incorporar 100, 200 y más fotogramas. En estos casos se utiliza la Animación por Interpolación Animación por Interpolación Flash permite la animación inteligente a través de la interpolación de movimiento, es decir, nosotros definimos la posición inicial y final del objeto, y Flash calcula los movimientos intermedios. Vamos a hacer que una pelota caiga, de un bote en el suelo y se eleve de nuevo. Para ello, necesitamos tres posiciones especiales de la pelota: en el fotograma 1 la pelota está situada en su posición inicial. En el fotograma 30, la pelota estará en su posición final. El fotograma 15, mostrará el momento en que la pelota da el bote. Siga los pasos que se indican a continuación. 1. Inicie un nuevo dibujo desde Archivo - Nuevo y dibuje otro círculo igual que en el ejercicio anterior, en la esquina superior izquierda del escenario. 2. Sitúa el cabezal en el fotograma 30 y añade un fotograma clave con F6 3. Sitúa el cabezal en el fotograma 15 y añade otro fotograma clave con F6 4. Deberá desplazar el cabezal al fotograma 15 y mover la pelota a la parte inferior de la pantalla. Lo mismo con el fotograma 30 y moverla a su posición final. Observe en la siguiente figura las tres posiciones. Observe la apariencia de la línea de tiempo Fotograma 15 Fotograma 1 Fotograma 30 5. Si ahora reproduce la película (presionando la tecla Enter), observará que la pelota se desplaza de golpe en el punto exacto donde la hemos movido (fotogramas 15 y 30). Para crear la ilusión de movimiento con la interpolación, seleccione el fotograma 1 y luego presione las teclas CTRL+A luego seleccionar el Menú Insertar - Crear interpolación de movimiento. Tenga en cuenta que los fotogramas clave determinan un cambio importante en el movimiento o la posición de los objetos (fotogramas 15 y 30), por lo que les hemos dotado de la característica de clave. 6. Ahora reproduzca la película y observe la diferencia. Al insertar Interpolación de movimiento, el resultado es igual a como lo hicimos anteriormente cuadro a cuadro, pero la diferencia está en el tiempo que nos demoramos en crear esta animación 7. Guarde este trabajo con el nombre Animación por interpolación en su carpeta y cierre Flash 5.0. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 11 Guía del Alumno – Macromedia Flash Animación por interpolación usando varias capas: Ya aprendimos que las capas debemos utilizarlas para separar los objetos con el fin de que estos no interactúen entre sí. Cuando queremos crear una animación un poco más compleja que las que hemos hecho hasta el momento, es conveniente usar capas. Repetiremos el ejercicio del círculo que cae, rebota y se vuelve a elevar, pero esta vez no será una sino que 4 círculos los que rebotan en el escenario sin parar. Siga los pasos que se indican a continuación. 1.- Abra Flash 5.0 y ponga color de fondo negro al escenario, compruebe que la velocidad de reproducción sea de 12 fotogramas por segundo. 2.- En la Capa1, dibuje un circulo con color de relleno blanco en la esquina superior izquierda del escenario, luego inserte fotogramas claves en los número 10, 20 y 30. La posición del círculo en cada uno de los fotogramas es como se muestra a continuación: Posición del círculo en el fotograma 20 En el fotograma 1 y en el 30 el círculo debe estar en esta posición Esta debe ser la posición del círculo en el fotograma 10 3.- Inserte una nueva capa, en el fotograma 1 dibuje un círculo igual al anterior, pero esta vez en la esquina superior derecha del escenario, inserte fotogramas clave en los número 10, 20 y 30. La posición del círculo en cada uno de los fotogramas es como se muestra a continuación: Posición del círculo en el fotograma 20 En el fotograma 1 y en el 30 el círculo debe estar en esta posición Esta debe ser la posición del círculo en el fotograma 10 4.- Inserte una nueva capa, en el fotograma 1 dibuje un círculo igual al anterior, pero esta vez en la esquina inferior izquierda del escenario, inserte fotogramas clave en los número 10, 20 y 30. La posición del círculo en cada uno de los fotogramas es como se muestra a continuación: En el fotograma 1 y en el 30 el círculo debe estar en esta posición Esta debe ser la posición del círculo en el fotograma 10 Posición del círculo en el fotograma 20 Página 12 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash 5.- Inserte una nueva capa, en el fotograma 1 dibuje un círculo igual al anterior, pero esta vez en la esquina inferior derecha del escenario, inserte fotogramas clave en los número 10, 20 y 30. La posición del círculo en cada uno de los fotogramas es como se muestra a continuación: Esta debe ser la posición del círculo en el fotograma 10 Posición del círculo en el fotograma 20 En el fotograma 1 y en el 30 el círculo debe estar en esta posición 6.- Lo que termine de dibujar la última capa, haga un clic en el fotograma 1 (de cualquier capa) y luego presione CTRL.+A para seleccionar todos los fotogramas de la película, y agregue interpolación de movimiento (Insertar – Crear interpolación de movimiento). Haga un clic sobre el Menú Control y Reproducir sin fin. 7.- Presione la tecla Enter para ver el resultado final del ejercicio. La película se reproducirá una y otra vez ya que activamos la opción Reproducir sin fin. Guarde el ejercicio con el nombre Animación por interpolación 2 en su carpeta y cierre Flash 5.0. Aplicando Interpolación de Forma: Este efecto se utiliza cuando sea quiere pasar un objeto de una forma a otra, como que un círculo se convierta en cuadrado o viceversa, o que un objeto cambie de color y de forma al mismo tiempo. Veremos un ejercicio para comprender mejor, siga las instrucciones que se indican a continuación: 1.- Abra Flash 5.0 y en el centro del escenario, dibuje un círculo con color de relleno amarillo. 2.- Seleccione el fotograma 10 e inserte un fotograma clave (F6), borre el círculo que allí aparece y en su lugar dibuje un cuadrado con color de relleno rojo. 3.- Seleccione el fotograma 20 e inserte otro fotograma clave (F6), borre el cuadrado que allí aparece y en su lugar dibuje un triángulo con color de relleno verde. 4.- Seleccione el fotograma 1 y presione CTRL+A para seleccionar todos los fotogramas de la película, haga un clic en el Menú Ventana, luego Paneles y por último Fotograma, aparecerá el cuadro que se muestra a continuación, en él siga los pasos que se indican: 1.- Abra este cuadro combinado y seleccione la opción Forma 3.- Para terminar cierre la ventana 2.- Abra este cuadro combinado y seleccione la opción Angular. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 13 Guía del Alumno – Macromedia Flash 5.- Active la opción Repetir sin fin (Menú Control) y presione la tecla Enter para ver el resultado del ejercicio. Guarde el ejercicio con el nombre Animación por interpolación 3 en su carpeta y cierre el programa. Creación de efectos con textos: Como vimos en la primera clase para introducir un texto en una película de Flash, basta con seleccionar la herramienta Texto y luego hacer un clic en la parte del escenario en donde deseamos insertarlo, muy parecido a lo que hemos visto en otros programas, la diferencia la encontraremos al momento que querer cambiar las propiedades de un texto. Haremos un ejercicio simple para conocer mejor esta herramienta y luego entraremos de lleno a la parte de animación del texto, siga los pasos que se indican a continuación: 1.- Abra Flash 5.0, seleccione la herramienta Texto y haga un clic al centro del escenario, luego escriba “EJERCICIO DE TEXTO”, a continuación seleccione la frase completa, haga un clic en el Menú Ventana, Paneles, Carácter, aparecerá la siguiente ventana, en ella siga los pasos que se indican: 2.- Esta sección permite seleccionar el tipo de fuente que se va a utilizar, para este ejercicio seleccione la que lleva por nombre “Comic Sans Ms” 3.- Esta sección le permite indican el tamaño de la fuente, elija el tamaño 28 4.- Permite dar efecto de Negrita 5.- Permite dar efecto de Cursiva 6.- Permite seleccionar el color de la fuente, para este caso seleccione el color Azul 7.- Observe los cambios que se producen y guarde el ejercicio con el nombre Ejercicio de texto en su carpeta, luego cierre Flash 5.0. Animación de Textos en Flash: Los pasos para crear un texto animado son similares a los que utilizamos para animar objetos en los ejercicios anteriores. Primero realizaremos un ejercicio sencillo para familiarizarnos más con las herramientas de configuración y animación de texto. Siga los pasos que se indican a continuación: 1.- Abra Flash 5.0 y configure la película de la siguiente forma: - Velocidad de fotogramas por segundo 15 - Cambie la unidad de regla a centímetros - Dimensiones: Anchura 5 cms, Altura 2 cms. - Color de Fondo Azul 2.- Amplíe el escenario, luego seleccione la Herramienta Texto, y en el Panel Carácter, modifique las siguientes propiedades: Página 14 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash - Fuente Comic Sans Ms - Tamaño de Fuente 12 - Efecto Negrita - Color de Fuente Blanco 3.- Escriba en el centro del escenario la frase Texto de Prueba, luego inserte fotogramas clave (F6) en los fotogramas 10, 20 y 30. 4.- Haga clic en el fotograma 1 y presione CTRL+A para seleccionarlos todos e inserte Interpolación de Movimiento 5.- Seleccione el fotograma 10, luego sobre el texto haga un clic con el botón derecho, seleccione la opción Escalar y aumente el tamaño del texto de tal forma que cubra todo el escenario. 6.- Seleccione el fotograma 20, vuelva a hacer clic con el botón derecho sobre el texto y disminuya el tamaño de este hasta que apenas se pueda ver en el escenario. 7.- Active la opción Reproducir sin fin del Menú Control y pruebe la película para ver los cambios que se produjeron en él. 8.- Guarde el ejercicio con el nombre Animación de texto, en su carpeta y luego cierre el programa. NOTA: La finalidad de los ejercicios que veremos a continuación, es que el alumno conozca las herramientas que nos ofrece Flash 5.0 y con esto pueda crear sus propios efectos y animaciones. Es imposible ver todos los ejemplos que se pueden crear con este programa, ya que eso depende de la imaginación de cada usuario y de la necesidad que se desea cubrir. Por eso es importante aclarar cualquier duda que le pueda surgir durante el desarrollo de los ejercicios y consultarlo en forma inmediata con su profesor. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 15 Guía del Alumno – Macromedia Flash Ejercicios de practica: Ejercicio 1: Efecto Morfosis: 1.- Abra Flash 5.0 y configure la película con las siguientes características: - Anchura 5 cms, Altura 3 cms. - Color de fondo Amarillo. 2.- En el centro del escenario y en el fotograma 1, escriba la palabra ¡BIENVENIDO!, modifique las propiedades del texto a su gusto. 3.- Ahora seleccione el fotograma 30 y presione F6 para insertar un fotograma clave. Cambie el texto del fotograma 30 por ¡WELCOME!. 4.- Seleccione el fotograma 1 y presione las teclas CTL+B, luego haga lo mismo con el fotograma 30. Al realizar este paso los fotogramas se separan, note que el texto se vuelve punteado, esto indica que se encuentran separados. Y ahora cada letra funciona como un objeto independiente. 5.- Ahora seleccionaremos todos los fotogramas, para ello haga clic en el fotograma 1 y presione CTRL+A, Luego vaya al Menú Ventana, seleccione Paneles y por último Fotograma. 6.- Despliegue el cuadro Interpolación y seleccione la opción Forma. 7.- Cierre el Panel y active la opción Reproducir sin fin del Menú Control. 8.- Con el botón derecho del mouse haga un clic sobre el fotograma 1 y seleccione Copiar fotogramas, haga un clic con el botón derecho del mouse sobre el fotograma 60 y seleccione la opción Pegar fotogramas. 9.- Para finalizar reproduzca la película y observe el efecto de Morfosis, luego guarde el ejercicio con este mismo nombre en su carpeta. Nota: si desea que el efecto sea más rápido, sólo debe disminuir la cantidad de fotogramas entre un efecto y el otro Página 16 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash Ejercicio 2: Efecto Máscara: 1.- Abra Flash 5.0 y configure la película con las siguientes características: - Anchura 10 cms, Altura 3 cms. - Color de fondo Azul. 2.- En el centro del escenario y en el fotograma 1, escriba la palabra MASCARA, modifique las propiedades del texto para que quede de la siguiente forma: - Tipo de fuente Comic Sans Ms, Tamaño 50, Color Blanco. Si es necesario, centre el texto dentro del escenario. 3.- Cree una nueva capa con el nombre Efecto, y en ella dibuje un círculo en la parte superior izquierda del escenario, luego inserte fotograma claves en los fotogramas 5, 10, 15, 20 y 25 de la capa máscara. 4.- Modifique la posición del círculo de tal forma que quede como se indica en la siguiente figura: Fotograma N° 1 Fotograma N° 20 Fotograma N° 5 Fotograma N° 25 Fotograma N° 10 Fotograma N° 15 5.- Seleccione el fotograma 1 de la capa Efecto y presione CTRL+A para seleccionar todo, luego inserte Interpolación de Movimiento (Menú Insertar). 6.- Seleccione el fotograma 25 de la capa 1 e inserte un fotograma simple (F5). Y presione la tecla Enter para probar la película, verá la palabra de fondo y la animación del círculo sobre ella, es en este momento cuando estamos listos para agregar el efecto de Máscara, para ello detenga la película. 7.- Con el botón derecho del mouse haga un clic sobre el nombre de la capa Efecto y en el menú emergente seleccione la opción Máscara. Luego active la opción Reproducir sin fin y pruebe la película. 8.- Guarde el ejercicio en su carpeta con el nombre Efecto de Máscara y cierre el programa. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 17 Guía del Alumno – Macromedia Flash Ejercicio 3: Efecto Degradación: 1.- Abra Flash 5.0 y configure la película con las siguientes características: - Anchura 8 cms, Altura 3 cms. - Color de fondo Negro. 2.- Cambie el nombre de la Capa 1 por Texto, luego en el centro del escenario y en el fotograma 1, escriba la palabra DEGRADACION, modifique las propiedades del texto para que quede de la siguiente forma: - Tipo de fuente Impact, Tamaño 30, Color Amarillo. Si es necesario, centre el texto dentro del escenario. 3.- Inserte un fotograma clave (F6) en el fotograma 20 de la capa texto. Luego inserta 2 nuevas capas una con el nombre Degradación 1 y otra con el nombre Degradación 2. 4.- Con el botón derecho del mouse haga un clic sobre el fotograma 1 de la capa texto y seleccione la opción Copiar fotogramas. Luego seleccione el fotograma 1 de la capa Degradación 1 y pegue el fotograma anterior (Edición Pegar). Haga lo mismo en el fotograma 10 de esta misma capa y en los fotogramas 10 y 20 de la capa Degradación 2. 5.- Seleccione el fotograma 1 de cualquier capa y presione CTRL+A para seleccionarlos todos, luego inserte Interpolación de Movimiento. 6.- Seleccione el fotograma 10 de la capa Degradación 1 y utilizando la opción Escalar, alargue el texto sólo hacia los costados de tal forma que quede del ancho de todo el escenario. Si tiene problemas para seleccionar el fotograma en cuestión, oculte todas las capas y solo deje visible la capa con la que está trabajando. 7.- Sin dejar de seleccionar el fotograma 10, haga un clic sobre el Menú Ventana, Paneles, Efecto, despliegue el cuadro combinado que allí se encuentra y seleccione la opción Alfa. Se agregará un cuadro que indica 100%, baje este valor hasta llegar a 0%. 8.- Seleccione el fotograma 20 de la capa Degradación 2 y utilizando la opción Escalar, aumente sólo la altura del texto de tal forma que quede del alto de todo el escenario. Si tiene problemas para seleccionar el fotograma en cuestión, oculte todas las capas y solo deje visible la capa con la que está trabajando. 9.- Sin dejar de seleccionar el fotograma 20, haga un clic sobre el Menú Ventana, Paneles, Efecto, despliegue el cuadro combinado que allí se encuentra y seleccione la opción Alfa. Se agregará un cuadro que indica 100%, baje este valor hasta llegar a 0%. 10.- Asegúrese de que no hay capas ocultas y luego pruebe la película, para apreciar mejor el efecto, active la opción Reproducir sin fin del Menú Control. 11.- Guarde el ejercicio con el nombre Degradación en su carpeta y cierre el programa. Página 18 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash Ejercicio 4: Movimiento siguiendo una trayectoria: 1.- Abra Flash 5.0 y configure la película con las siguientes características: - Anchura 10 cms, Altura 5 cms. - Color de fondo Amarillo. 2.- Haga un clic en el Menú Insertar y seleccione Guía de Movimiento, aparecerá una nueva capa con el nombre Guía capa 1, en ella dibuje, utilizando la herramienta que mas le acomode, la trayectoria que realiza una pelota cuando cae desde un lugar alto y luego rebota varias veces hasta detenerse. 3.- Inserte una nueva capa, dele el nombre Pelota y en ella dibuje un círculo pequeño con color de relleno y trazo azul. Una vez que lo haya dibujado, asegúrese de que el centro del círculo coincide exactamente con el inicio del trayecto de la capa guía. 4.- Inserte fotograma clave en el fotograma 30 de ambas capas y desplace el círculo hasta hacerlo coincidir con el fin del trayecto de la capa guía. Luego inserte interpolación de movimiento en los fotogramas 1 y 30 de la capa Pelota y reproduzca la película, podrá notar que la pelota sigue la forma que tiene el objeto dibujado en la capa guía, para hacer más real el efecto, oculte la capa guía y vuelva a reproducir la película. 5.- Guarde el ejercicio en su carpeta con el nombre Rebote, luego cierre el programa. Ejercicio 5: Rotación de texto: 1.- Abra Flash 5 y configure la película con las siguientes características: - Anchura 5 cms, Altura 4 cms. - Color de fondo Negro. 2.- Escriba en el centro del escenario la palabra ROTACIÓN, con las siguientes características: - Tipo de fuente Times New Roman, tamaño 18, color de fuente Blanco. 3.- Inserte fotograma clave en los fotogramas 10, 20, 30 y 40, luego seleccione el fotograma 1, presione CTRL+B e inserte interpolación de movimiento. 4.- Modifique la posición y el tamaño del texto en cada uno de los fotogramas clave, de tal forma que quede como se muestra en la siguiente figura: Fot. 1 Fot. 10 Fot. 20 Fot. 30 Fot. 40 5.- Active la opción Reproducir sin fin y pruebe la película para ver el efecto de rotación. Luego guarde el ejercicio con el mismo nombre y cierre el programa. Ejercicio 6: Texto tembloroso: 1.- Abra Flash 5 y configure la película con las siguientes características: - Anchura 8 cms, Altura 3 cms. - Color de fondo Rojo. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 19 Guía del Alumno – Macromedia Flash 2.- Escriba en el centro del escenario la palabra TEMBLOR, con las siguientes características: - Tipo de fuente Comic Sans Ms, tamaño 34, color de fuente Amarillo. 3.- Inserte fotograma clave (F6) y desplace el texto un poco hacia la derecha, presione F6 nuevamente y desplace el texto un poco hacia la izquierda, repita este paso hasta llegar al fotograma 10. 4.- Active la opción Reproducir sin fin y pruebe la película, luego guarde el archivo con el nombre Temblor en su carpeta y cierre el programa. TERCERA CLASE Configuración de Publicación: Al momento de guardar un archivo de Flash, este por defecto se crea como archivo .fla, lo que nos permitirá poder ingresar a el en otro momento y poder modificarlo, pero una vez que la película se ha finalizado, puede ser necesario guardarla con otra extensión, para darle variados usos. La herramienta Configuración de Publicación, nos permite poder guardar la Película en distintos formatos, como archivo de imagen (GIF, JPG, PNG), como Página Web (HTML), como archivo auto ejecutable (SWF), entre otros, este proceso se llama Publicación. Para practicar esta herramienta, abra el archivo Degradación que se encuentra en su carpeta, luego haga un clic en el Menú Archivo y seleccione Configuración de Publicación, aparecerá el siguiente cuadro, donde veremos las opciones mas útiles: Este formato permite que la película se visualice en un reproductor Este formato crea una Página Web que incluye la película de Flash. Transforma la Película en un archivo de imagen en formato GIF Esta sección muestra los nombres con que se guardarán los distintos archivos. Si queremos personalizar los nombres, se debe desactivar la opción Usar nombres predeterminados, y asignar el deseado, pero es muy importante saber que solo se puede modificar el nombre, no así la extensión del archivo. Transforma la Película en un archivo de imagen en formato JPG. Página 20 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash Para desarrollar el ejercicio en forma correcta, desarrolle los siguientes pasos: 1.- En la ventana Configuración de Publicación, active las casillas Flash y HTML, si ya se encuentran activadas, siga adelante. 2.- Desactive la casilla Usar nombres predeterminados y cambie los nombres de los archivos por Práctica, la extensión no la modifique. 3.- Para finalizar haga un clic en Publicar y luego Aceptar. 4.- Minimice la ventana del programa, abra Mi PC luego Disco 3 ½ , podrá observar que hay tres archivos con el nombre Práctica. El que tiene el ícono de página web es el que creamos como HTML, ábralo y verá que esta página web contiene la película que creamos en Flash y que llamamos Degradación. El segundo archivo se identifica con el ícono de Flash Player o reproductor de flash, ábralo y aparecerá un reproductor que nos mostrará la película, debemos aclarar que el tamaño de este reproductor está dado por las dimensiones con que configuramos la película en flash, en este caso Anchura 8 cms y Altura 3 cms. 5.- Vuelva a repetir el ejercicio anterior, pero esta vez guarde la película como archivo GIF y JPG. Luego cierre el programa. Guardar una película como GIF animado: Un GIF animado es una archivo GIF único, pero que se compone interiormente de una secuencia de imágenes distintas que se presentan consecutivas creando imagen de movimiento. El sistema es similar al de los Dibujos Animados tradicionales. La ventaja del GIF animado es que se basa en una paleta de 256 colores como máximo, por lo que los archivos .GIF son de menor tamaño en Kb que los demás formatos. La desventaja es que las imágenes pierden un poco la nitidez si lo comparamos con un archivo JPG, por ejemplo. Abra el archivo Efecto de Máscara que se encuentra guardado en su carpeta y realice los siguientes pasos: 1.- Abra la herramienta Configuración de Publicación. 2.- Active la casilla GIF y luego seleccione la pestaña que lleva el mismo nombre (GIF) 3.- En la sección Reproducción seleccione Animada. 4.- Asegúrese que se encuentra activa la opción Repetir indefinidamente, el resto de las opciones déjelas como aparecen. 5.- Haga un clic en Publicar luego Aceptar. 6.- Cierre el programa y revise los nuevos archivos que se han creado en su carpeta. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 21 Guía del Alumno – Macromedia Flash Exportar una película de Flash: La opción Exportar Película, nos permite convertir un archivo de Flash en algún otro formato de archivo, como GIF animado, GIF estático, JPG, entre otros, como lo hicimos en Configuración de la publicación. Siga las siguientes indicaciones para practicar esta herramienta: 1.- Abra el archivo Morfosis que se encuentra en su carpeta. 2.- Haga un clic en el Menú Archivo y seleccione Exportar Película, 3.- Busque su carpeta 4.- Una vez ubicada la carpeta escriba en nombre de archivo “exportación” 5.- En guardar archivo como tipo selecciones la opción GIF animado 6.- Para terminar clic en aceptar 7.- Minimice el programa y abra el archivo recién creado y observe el resultado. 8.- Repita el ejercicio, pero esta vez guarde el archivo en formato GIF estático, luego como JPG y por último como SWF. 9.- Lo que termine, revise cada uno de los archivos que acaba de crear y luego cierre el programa. Los Botones: 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 un símbolo que permite crear un enlace con algún archivo o página web.. 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, por ejemplo, estos efectos son posibles ya que los botones en Flash poseen su propia línea de tiempo donde se indica de que forma va a reaccionar el Botón frente a cada estímulo del mouse. Pues bien, para aprender a dar los efectos interactivos que acabamos de mencionar desarrollaremos los siguientes ejercicios: Creando nuestros primeros Botones: 1.- Abra Flash 5 y cree el dibujo que se muestra a continuación: Color de relleno y trazo azul oscuro Tipo y tamaño de Fuente a elección, color Blanco 2.- Utilizando la herramienta flecha seleccione los dos objetos que componen el dibujo, luego haga un clic en el Menú Insertar luego Convertir en símbolo. En Nombre escriba Mi botón, en Comportamiento seleccione Botón y por último haga un clic en Aceptar. Página 22 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash 3.- Al realizar los pasos anteriores el dibujo quedará encerrado en un rectángulo azul, lo que nos indica que es un símbolo, para asegurarnos, vaya a la biblioteca y podrá ver que Mi botón se ha agregado a ella. 4.- Cierre la ventana de la biblioteca y haga doble clic sobre el dibujo, podrá notar que la línea de tiempo ha cambiado y ahora tiene la apariencia que se muestra a continuación: Aquí podemos ver los cuatro estados que posee un botón creado en Flash. Acá podemos ver el nombre del botón que se está editando Como vimos en la figura anterior, los estados que posee un botón son cuatro: - Reposo: aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él - Sobre: aspecto que tendrá el botón cuando situemos el mouse sobre él. - Presionado: aspecto que tendrá el botón cuando presionemos el mouse sobre él. Zona activa: aquí se indica el área real en que queremos que actúe nuestro botón, es decir, a que distancia tiene que estar el mouse del botón para que se active. 5.- El estado Reposo no será modificado, por lo tanto presione F6 para insertar un fotograma clave en el estado Sobre. Seleccione el óvalo y cambie el color de relleno y de trazo a rojo. 6.- Vuelva a presionar F6 para insertar fotograma clave en el estado Presionado, cambie el color de relleno y de trazo a amarillo y el color del texto a azul. 7.- Vuelva a presionar F6 para agregar fotograma clave en el estado Zona Activa, acá no realizamos cambios. Presione donde dice Escena 1 sobre la línea de tiempo. 8.- Haga un clic en el Menú Control y seleccione Probar película, pase el mouse sobre el botón que acaba de crear, luego haga un clic sobre el botón y observe la reacción. 9.- Guarde el ejercicio con el nombre Mi botón en su carpeta. 10.-Configure la publicación de la película de tal forma que quede como archivo .SWF y HTML. 11.- Para terminar cierre el programa y abra la página web Mi botón que se encuentra en su carpeta, pruebe el funcionamiento del botón y cierre la página. Agregar un Hipervínculo a un botón: Ya vimos que la tarea de crear un botón no es tan complicado como parece, lo que nos queda por hacer es agregar el elemento fundamental de todo botón, el hipervínculo, de tal forma que al hacer clic sobre el, nos permita abrir otro página web local o de internet. Para aprender este proceso utilizaremos el botón que creamos en el ejercicio anterior y le insertaremos un hipervínculo de tal forma que al hacer un clic sobre el, se abra la página Degradación que se encuentra en su carpeta, siga los pasos que se indican a continuación. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 23 Guía del Alumno – Macromedia Flash 1.- Abra el archivo Mi botón que se encuentra en su carpeta y seleccione el dibujo del botón. 2.- Haga un clic en el Menú Ventana y seleccione la opción Acciones, aparecerá el siguiente cuadro: 3.- Haga doble clic sobre Acciones básicas 6.- Para terminar cierre la 4.- Haga doble clic sobre la opción Get URL 5.- Escriba el nombre completo de la página que deseamos abrir, esto es Degradación.html 7.- Guarde los cambios y vuelva a publicar la película (Menú Archivo- Publicar), luego cierre el ejercicio y abra la página Mi botón de su carpeta y pruebe el nuevo funcionamiento del botón. Ejercicio Final: Creación de un Index: Todo sitio web debe tener una página inicial que es la primera que se verá cuando entremos a dicho sitio. Para que esta página sea reconocida como tal debe tener un nombre determinado, que puede ser index.htm o home.htm. Esta página inicial es la carta de presentación de todo sitio, debe estar llena de vida y de interactividad para que el visitante sienta interés por quedarse. Cada vez es más frecuente el uso de Flash para crear un Index, ya que como vimos, nos permite insertar una película, texto, imágenes y botones animados, los ingredientes ideales para crear una página dinámica y entretenida. Página 24 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash Utilizando las herramientas aprendidas durante el desarrollo de la guía crearemos un Index, para ello utilizaremos una secuencia de fotos, animación de textos y un botón creado en flash, que en teoría es el que nos dará el ingreso al sitio. Para realizar el ejercicio será necesario que formatee su carpeta ya que necesitaremos todo el espacio disponible. Luego abra la carpeta Mis documentos que se encuentra en el escritorio, dentro de ella encontrará otra carpeta llamada Ejercicio Final de Flash, copie dicha carpeta y péguela en su carpeta. En ella se encuentran las imágenes que utilizaremos en este ejercicio. La figura que se muestra a la derecha será la apariencia final de la página que vamos a crear, y para ver la animación que tendrá esta, pida a su profesor que le facilite la página de muestra. Luego siga los pasos que se indican a continuación: Tenga en cuenta que todas las capas de la película que vamos a crear deben tener una extensión de 70 fotogramas. 1.- Abra Flash 5, ingrese al cuadro propiedades de la película y cambie el color de fondo a salmón. 2.- Cambie el nombre de la capa 1 por Cuadro1 y cree una nueva capa que debe llamarse Cuadro2. Utilice líneas guías para definir el tamaño de cada uno de los cuadros. 3.- Seleccione el primer fotograma de la capa Cuadro 1 e inserte la primera imagen desde la carpeta que pegó en su carpeta. Luego inserte fotogramas clave en los fotogramas número 10, 20, 30, 40, 50, 60 y 70 de la misma capa, luego cambie la imagen en cada uno de ellos, por nuevas imágenes de la carpeta Ejercicio Final de Flash de su carpeta. 4.- Repita el paso 3 en la capa Cuadro 2, es decir inserte imágenes distintas en los fotogramas 1, 10, 20, 30, 40, 50, 60 y 70. 5.- Inserte una nueva capa y dele el nombre Marco, en ella cree el marco exterior que se aprecia en la película, utilice el Panel Trazo para cambiar el ancho del contorno a 10 y dar color azul. 6.- Inserte una nueva capa y dele el nombre Bolamarco, en ella dibuje un pequeño círculo blanco y de la animación de tal forma que se desplace por todo el contorno del marco y vuelva a su punto de partida como se aprecia en la película de muestra. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 25 Guía del Alumno – Macromedia Flash 7.- Para crear el efecto de degradación del título cree tres capas con los nombres Textodegradación, en ella debe ir el texto VERANO 2003 como se ve en el ejemplo, luego Degradación1 donde se debe crear el efecto de degradación horizontal y Degradación2 donde debe crearse el efecto de degradación vertical. 8.- Cree una nueva capa y dele el nombre Morfosis, en ella desarrolle el efecto entre las palabras SOL, ARENA y PLAYAS. 9.- Cree una capa temblor y en ella cree el efecto que se muestra con la frase A DISFRUTAR!!!. 10.-Cree una capa Botón y cree el botón con la apariencia que se muestra en la película de ejemplo. No asigne hipervínculo a este botón. 11.- Lo que termine, guarde su película con el nombre Ejercicio Final en su carpeta, y publique la película en formato SWF y HTML, luego pruebe el buen funcionamiento y solicite a su profesor la revisión del ejercicio. IMPORTACION DE SONIDOS A UNA ANIMACION Un muy buen atributo de Flash es la adición de sonidos a nuestras animaciones, los sonidos a utilizar serian de formato MP3 o WAV. Los sonidos son almacenados en la Biblioteca al igual que los símbolos y los Mapa de Bits. Si se trata de ocupar archivos demasiado extensos, es recomendable ocupar el formato MP3 para los sonidos, ya que el formato MP3 es un formato comprimido, y así se requiere de menos memoria. Abra el Archivo Dibujo Animado, y en la Escena 2 inserte una nueva capa llamada Sonido, en el Menú Archivo Haga Clic en Importar y luego seleccione la Carpeta Mis Documentos, Archivos De Flash, Y seleccione el Archivo Música. Ahora el sonido que usted importo se encuentra en la Biblioteca, despliegue la Biblioteca (Control L). Y seleccione Música en el panel de Nombres. Luego seleccione la capa Sonido y en la Biblioteca Arrastre Música hacia el escenario, ahora en la en la línea de tiempo en la capa sonido aparece una representación del Archivo de Sonido. Reproduzca la animación. Página 26 Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Guía del Alumno – Macromedia Flash PANEL SONIDO Selección Del Archivo de Sonido Sincronización de Tiempo Efectos De Sonido Se podrá dar cuentas que la animación termina y el sonido continua, para que esto no ocurra hay que detener el sonido en el ultimo Cuadro o donde usted desee. Para ello haga clic en Ventana Luego en Paneles y Sonido, aparecerá el Panel Sonido, haga clic en el ultimo cuadro de la capa Sonido, entonces se habilitaran las opciones del Panel, e inserte un Cuadro Clave. En el cuadro Combinado Sonido seleccione Música, en Sinc seleccione Detener, con esto el sonido se detendrá en el cuadro que hemos seleccionado, es decir el final de la animación. Seleccione el cuadro uno de la capa sonido y luego en el Panel Sonido seleccione un efecto. Pruebe La animación y vea su resultado. Cree un nuevo ejercicio y repita el proceso de Importación de Sonido. Ocupe el Archivo De Sonido que se llama, EJERCICIO. Departamento de Docencia - WORLDKEY Instituto Ltda.. http://www.wkc.cl Página 27
