Curso De Cs5 3m3r5z

, y debe de ser único. El icono asociado nos permite saber qué tipo de símbolo es de un vistazo rápido. Tipo de la instancia. Por defecto se nos muestra el tipo al que pertenecía el símbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la imagen es Botón). Símbolo de la Instancia seleccionada (Instancia de:). Esta opción nos muestra el símbolo raíz del que proviene la instancia que estamos modificando. Intercambiar: Esta opción merece especial atención, pues es muy útil y nos ahorrará mucho trabajo cuando sea necesaria emplearla. Su función consiste en cambiar el símbolo de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que la instancia tomará el aspecto del nuevo símbolo. Puede parecer simple, pero durante el desarrollo de un trabajo profesional rápidamente surge la necesidad de probar situaciones y los diseños gráficos definitivos no suelen estar disponibles hasta bien avanzado el proyecto. Gracias a esta opción podemos trabajar tranquilamente con un "boceto" y sustituirlo de un modo efectivo (el nuevo símbolo hereda las propiedades del antiguo símbolo, incluido el nombre de instancia, las acciones que le afectarán, efectos gráficos etc...) cuando llegue el momento. En la imagen se puede observar el Intercambiar Símbolo.

60

Este además, incorpora el botón Duplicar Símbolo cuya funcionalidad es la que nos podemos imaginar. Es muy útil cuando queremos hacer pruebas con un símbolo y no queremos perderlo. Lo duplicamos y trabajamos tranquilamente con la copia.

Unidad 8. Símbolos (IV) 8.7. Efectos sobre instancias

Para acceder a los efectos aplicables sobre una instancia determinada, debemos acudir nuevamente al Propiedades, desde aquí podremos acceder a todos los efectos que Flash nos proporciona. En el gráfico de la derecha se puede observar la pestaña Estilo: del Propiedades. Hay varios tipos de efectos. Si el símbolo se acaba de crear o si no tiene efecto asignado aparecerá en la pestaña Ninguno. En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.

61

A continuación mostraremos los tipos de efectos. Para ello partiremos de la siguiente imagen original:

Brillo. Se puede modificar su valor desde -100% al 100%, esto es, completamente oscuro (negro) y completamente brillante (blanco). Puedes mover la barra deslizante o introducir su valor directamente en la casilla.

Efecto Brillo del 50 % Tinta. Esta opción permite cambiar el color de la instancia, pero puesto que, como dijimos, no podemos modificar la instancia internamente, al variar el color en la pestaña Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul), se cambiará el color de toda la instancia como si la estuviéramos tiñendo o poniendo una capa imaginaria de un color determinado. El grosor o intensidad de esta "capa" la podemos modificar en porcentaje mediante la primera pestaña que aparece a la derecha.

62

Efecto Tinta del 50 % con el color verde (0 255 0) Alfa. Representa el grado de visibilidad o transparencia que se tendrá de la instancia en cuestión. También se puede modificar mediante valor directo o con la barra deslizante y es muy útil para animaciones de aparición y desaparición de objetos. Si aplicamos un efecto alpha sobre una instancia que está encima de otro objeto, el objeto que antes estaba tapado se podrá ver a través de la instancia.

Efecto Alfa del 65 % sobre el pez naranja Avanzado. Aquí podemos aplicar todos los efectos anteriores al mismo tiempo de manera más precisa, con la ventaja de que podemos ponerle un poco de cada uno, dando lugar a efectos de gran vistosidad.

63

Sobre el pez superior. Hemos aplicado un efecto Alfa del 65 % y hemos reducido al 45 % la cantidad de verde a la vez que hemos multiplicado la cantidad de azul por 111, obteniendo el tinte rosa translúcido que se observa. A medida que modifiquemos los efectos sobre las instancias, podremos ir viendo el resultado sobre el propio escenario. Es importante recalcar,, que en los efectos anteriores estamos modificando instancias de un símbolo, pero que el símbolo original sigue intacto.

Aquí puedes ver el modo de aplicar una transformación Alpha a una instancia.

Ejercicios del Tema 8. 8

Prueba evaluativa del Tema 8. 8

Unidad 9. Gráficos (I) 9.1. ¿Qué es un gráfico? Los Gráficos son símbolos que nos permiten representar objetos estáticos y animaciones sencillas. En caso de que utilicemos un símbolo gráfico para realizar una animación, debemos tener en cuenta que ésta estará ligada a la línea de tiempo de la película en la que se encuentre. Es decir, la animación se reproducirá siempre y cuando la película original también se esté

64

reproduciendo. Esto hace que, pese a tener su propia línea de tiempo, no puedan contener sonidos, controles ni otros símbolos gráficos. Así pues, normalmente malmente utilizaremos los gráficos para imágenes estáticas o para cuando nos convenga que una animación se reproduzca sólo cuando determinado frame de la línea de tiempo de la película esté en marcha, ya que para los casos que hemos comentado anteriormente en los que un gráfico no nos es útil, Flash nos ofrece otro tipo de símbolos como veremos en temas posteriores.

9.2. Tipos de gráficos Los gráficos pueden ser:

Gráfico estático a) Estáticos:: estos gráficos se mantienen sin cambios cuando pasa el tiempo. Estos gráficos son los típicos en los fondos y en los objetos que no desempeñan ninguna función especial. Su tamaño y por tanto, el tiempo de carga de este tipo de gráficos, aunque siempre dependerá penderá de la resolución, de sus dimensiones y de la forma en la que estén creados *, será en general reducido.

Animación b) Animaciones:: este tipo de gráfico varía su forma, posición u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animación se deben usar varios gráficos más además del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamaño de esta clase de gráficos, para las mismas dimensiones y forma de creación, será mucho mayor que uno estático. Por esto, aunque las animaciones dan a nuestra web un aspecto más bonito y espectacular tienen dos inconvenientes: 1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web puede llegar a tener un tamaño excesivamente grande grande.

65

2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones típicas de Flash, cuyo tamaño no es excesivo, el hecho de poner muchas animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y desviar su atención de lo que realmente importa, su contenido. (*) Los tipos de gráfico anteriores pueden ser, a su vez de dos tipos, según la forma en la que estén creados: Gráfico Vectorial o Mapa de Bits. Para saber más acerca de estos dos tipos de gráfico, échale un vistazo a nuestro tema básico

.

Unidad 9. Gráficos (II) 9.3. Creando un gráfico y comprobando sus propiedades Como explicar teóricamente las propiedades de un gráfico resulta un tanto confuso, vamos a ver de manera práctica lo que queremos explicar. Vamos a crear un gráfico en Flash y a comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello, abre una nueva película Flash (Archivo→ Nuevo, archivo ActionScript 3). Ahora tenemos que crear el objeto que queremos convertir en un símbolo Gráfico. Dibujemos, por ejemplo, un óvalo en cualquier lugar del área de trabajo con la herramienta Óvalo

de la barra de herramientas de dibujo y démosle un color de relleno que será lo que

después animemos (Selecciona el fondo del óvalo y dale el color azul mediante la herramienta Relleno de color.

).

Ya hemos creado nuestro objeto, vamos a convertirlo en un símbolo gráfico ¿lo recuerdas? Selecciona el objeto, haz clic derecho sobre el o haz clic en el menú modificar y selecciona Convertir en Símbolo, lo convertimos en un símbolo como ya habíamos visto y dándole el nombre GráficoAnimado y seleccionando el TipoGráfico:

66

Ahora vamos a crear la animación del gráfico. Puesto que todavía no hemos visto a fondo las animaciones, la vamos a realizar de una forma que quizá no sería la más apropiada la mayoría de las veces, pero nos servirá muy bien para este ejemplo. Para ello selecciona nuestro gráfico y pulsa el botón derecho del ratón. Se desplegará un menú, en el que seleccionaremos la opciónEdición para modificar el gráfico y acceder a su línea de tiempo. Comprueba que estás en la línea de tiempos del gráfico (justo encima del escenario existe una secuencia que nos indica en qué nivel nos encontramos. En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Gráfico Animado" y, por tanto estamos dentro del gráfico (y la línea de tiempos que vemos es la del gráfico, y no la de la película principal)

Crearemos a continuación nuevos fotogramas clave seleccionando uno a uno los frames número 2, 3 y 4 y pulsando F6 cuando los seleccionemos. Pulsa sobre el frame 2 y cámbiale el color de fondo al óvalo como hicimos antes. Haz lo mismo en los dos siguientes frames. Tu línea de tiempos debería tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Película principal) y podremos ver nuestro gráfico "desde fuera". Ahora ya tenemos completo nuestro gráfico animado. ¿Qué crees que sucederá si reproducimos la película? Comprobémoslo pulsando Control + Intro, se visualizará la película. ¿Y bien? Nada. Nada en absoluto. El óvalo sigue tal cual. ¿Por qué? La respuesta está en las características de los gráficos que habíamos explicado: la línea de tiempos del gráfico va ligada a la de la película.

67

En este caso la línea de tiempos de la película tenía un solo frame, mientras que la del gráfico tenía 4, por tanto, no le hemos dado tiempo al gráfico a desarrollar su animación; sólo ha reproducido un frame, el primero. ¿Cómo podemos solucionarlo? Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de Flash, selecciona el fotograma 5 de la película principal y pulsa F6. Ahora tenemos 5 fotogramas en la película principal. Pulsa de nuevo Control + Intro. El resultado podría ser éste:

Guarda este archivo porque lo completaremos más adelante.

Unidad 9. Gráficos (III) 9.4. Introducir un Mapa de bits Los gráficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas que en tus películas hayan mapas de bits lo más seguro es que prefieras crearlos y hacerlos más espectaculares en otro programa más apropiado que Flash para el manejo de Bitmaps: Photoshop, Fireworks, GIMP, etc... Flash CS5 permite importar mapas de bits de otros programas, cuando han sido guardados en formatos gráficos GIF, JPG, TIFF y muchos más. También nos permite modificarlos en cierto modo. Podemos cambiarle el tamaño y convertirlo en un símbolo para aprovechar las opciones que nos ofrece Flash aunque, teniendo en cuenta qué es un bitmap, no podremos modificarlo "internamente" pero podremos usarlo como un símbolo más. Para importar un archivo de Mapa de Bits al escenario haz clic en el menú Archivo → Importar → Importar a escenario.

68

Se abrirá el cuadro de diálogo de Importar,, allí deberás seleccionar el formato de imagen que quieres importar seleccionándolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Selecciónalo haciendo clic sobre él y pulsa el botón Abrir. Abrir La imagen se incluirá en el escenario y estará lista para trabajar con ella.

Aquí tienes una muestra de cómo hacerlo.

9.5. Introducir un archivo vectorial Al igual que los mapas de bits, hay otros programas que trabajan con gráficos vectoriales como también hace Flash CS5. Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand o Illustrator, podemos hacerlo de manera muy sencilla. Simplemente accedemos al menú Archivo → Importar → Importar a escenario. escenario A continuación, seleccionamos el tipo de archivo correspondiente al gráfico vectorial que queramos importar. Por ejemplo AI de Illustrator.

69

Pulsamos Abrir, y ya tenemos nuestro archivo vectorial. Este archivo sí lo podremos modificar internamente ya que Flash es capaz de hacer gráficos de este tipo. Concretamente, Illustrator pertenece también a Adobe, igual que Flash, con lo que la compatibilidad en este caso es total. Si quieres saber más sobre compatibilidad de archivos en Flash visita este avanzado.

Unidad 9. Gráficos (IV) 9.6. Exportar un objeto Flash como mapa de bits La interfaz de dibujo de Flash, como hemos visto, resulta muy cómoda en determinadas ocasiones para realizar dibujos. Así podría interesarnos utilizar Flash CS5 para crear un dibujo y después utilizarlo en otros programas o para cualquier otro uso.

70

Esto es perfectamente posible con Flash, ya que nos permite exportar un objeto de flash como un bitmap.. Eso sí, debemos tener en cuenta, como vimos en el tema básico, que la mayoría de mapas de bits no permiten animaciones, por esto el objeto flash que exportemos no debería contener animación ya que ésta no se guardará. Para realizarlo seleccionamos el ob objeto jeto que vamos a exportar y accedemos al menú Archivo → Exportar → Exportar Imagen... Luego introducimos en el campo Nombre el nombre que queremos que tenga nuestro nuevo bitmap. Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y pulsamos Guardar. Ahora ya podemos usar nuestro objeto Flash como un bitmap. Para entender mejor cómo te aconsejamos realizar el Ejercicio Exportar un objeto como mapa de bits.

9.7. Publicar como un mapa de bits

Al Exportar como hemos visto en el punto anterior, podemos "sacar" una parte de nuestra película como un gráfico (un símbolo, un fotograma...). Pero si lo que tenemos ya es una película completa, y queremos generar una imagen a partir de ella, lo haremos publicándola.. Al publicar, generamos un archivo partiendo de la película creada. Lo habitual, y que veremos más adelante, es publicar la película como un archivo Flash (swf). ). Pero también podemos hacerlo como imágenes. Para ello, tenemos que acceder a la Configuración de publicación,, en el menú Archivo.

71

Se abrirá un diálogo, en el que lo primero que elegimos es el formato en que lo queremos publicar, y el nombre de archivo que se le dará. Por cada formato seleccionado, se añadirá una pestaña. Desde cada una, podemos cambiar las opciones de cada tipo de imagen.

72

Cuando lo tengamos, basta con pulsar el botón Publicar. En la misma carpeta donde está el archivo Flash (.fla) se crearan las imágenes.

Unidad 9. Gráficos (V) 9.8. Crear un GIF animado con Flash Como vimos en el tema básico hay tipos de archivo de mapa de bits que soportan animaciones, como los GIF. Pues bien, con Flash también podemos crear una animación y guardarla como un GIF animado. Los fotogramas de la película se convertirán en fotogramas del GIF. Para lograrlo, tenemos que publicar la película como GIF, lo cual configuramos desde la Configuración de publicación, en el menú Archivo. Entre los formatos disponibles, marcamos Imagen GIF.

Y configuramos algunos parámetros pulsando en su pestaña:

73

Entre las opciones concretas del GIF, hay dos que afectan a la animación: En Reproducción, podemos marcar Estática (por defecto) o Animación. Debemos de elegir esta última para que el gif sea animado. Si es gráfico es animado, podemos seleccionar cuántas veces se repite dicha animación. Entre Reproducir indefinidamente en bucle, o Repetir un número determinado de veces.

Otra opción muy interesante es Transparente, en la que decidimos cómo se exporta el escenario. Si como un color opaco o transparente. Abajo vemos el GIF Animado que resulta de exportar nuestro gráfico Flash.

74

Unidad 10. Clips de Película (I) 10.1. ¿Qué es un clip de película? Un Clip de Película,, simplemente Clip o MovieClipes es una película en sí misma, misma como cualquiera de las que podamos haber creado hasta el momento en este curso. Normalmente nos referimos a ellas como clips cuando las inclui incluimos mos en otra película, formando un símbolo. Por tanto, cualquier clip siempre podrá estar compuesto por otros clips insertados en él, que a su vez estén formados por otros, etc. Al igual que los otros tipos de símbolos de Flash, los clips de película tienen su propia línea de tiempo.. Sin embargo, y a diferencia de los Gráficos (como veremos a continuación), esta línea temporal no está ligada a la línea de tiempo del documento que lo contiene, de tal forma que su ejecución es independiente, y en un fotograma de la película principal se puede estar reproduciendo repetidamente un clip. Este tipo de símbolos puede contener cualquier otro tipo de símbolo: gráfico, clip o botón, así como cualquier objeto creado con Flash, ya que un clip es realmente una película. Otra de las ventajas de los Clips la encontramos cuando realizamos películas de gran complejidad y tamaño, en la que intervienen un número muy elevado de fotogramas, debido a que en la vista general del documento, nosotros sólo veremos un fotograma por clip, c el cual puede estar compuesto por muchos frames, lo que nos permitirá tener una mejor visión de cómo se desarrolla nuestra animación, y una línea de tiempo más clara y "limpia" Los Clips son una de las herramientas que dan mayor potencia a Flash CS5, permitiéndonos crear películas de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear múltiples movimientos independientes entre sí y crear conexiones entre los diferentes Clips de un documento.

75

Todas aquellas cosas que no podíamos hacer con un símbolo de tipo Gráfico, lo podemos hacer con un Clip, además de poder realizar también todo aquello que nos permitía dicho símbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de animación debido a su gran flexibilidad, dejando los gráficos sólo para imágenes estáticas.

10.2. Comprobar las propiedades de un Clip

Como hicimos con los gráficos, vamos a ver como la línea de tiempo de un clip no está ligada a la línea de tiempo del documento que lo contiene y, a la vez, veremos la diferencia entre los clips y los símbolos Gráficos, que supone una de las razones de la mayor utilización de los primeros en lo que se refiere a la creación de animaciones. Para ello abriremos una nueva película Flash (Archivo → Nuevo, archivo ActionScript 3). Después importaremos una imagen cualquiera o bien crearemos una. La convertimos en Símbolo (botón derecho, Convertir en símbolo...) y seleccionamos en Tipo "Clip de Película" Arrastramos al escenario (si no está ya allí) nuestro clip de película. Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos películas, cada una con su línea de tiempo. Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los símbolos de tipo Gráfico.

76

Observa la línea de tiempo de la película principal y comprueba que sólo tiene un fotograma.

Editemos el Clip que insertamos en el documento, haciendo doble clic sobre él y examinemos su línea de tiempos. Aparecerá un único MovieClip. Podemos realizar algo similar a lo realizado con los gráficos. Si creásemos una animación de movimiento, como veremos más adelante, podría quedarnos así:

Como vemos, la duración del clip que hemos insertado es mucho mayor que la película nueva que lo contiene. Si el símbolo fuera un gráfico ya hemos visto que al reproducir la película no ocurriría nada, porque sólo se reproduciría el primer fotograma de su línea de tiempo. En cambio, al tratarse de un clip, comienza a reproducirse al pasar por el primer fotograma, y como la liena de tiempo es independiente, sigue reproduciéndose aunque la línea de tiempo principal haya acabado.

Unidad 10. Clips de Película (II) 10.3. Crear un nuevo Clip Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones. Aunque no lo hayamos comentado antes, se puede crear un símbolo Flash de la nada, igual que creamos un nuevo archivo, de forma que se quede en la biblioteca y podamos editarlo cuando nos convenga. Esto puede ser interesante en los clips, ya que a diferencia de los gráficos, su finalidad suele ser el movimiento y, en animaciones complejas, en ocasiones se les asignan acciones especiales en las cuales puede que no sea necesario crearlo en ese momento o convenga dejar el clip vacío.

77

Por esto, es interesante aprender cómo crear un símbolo, en este caso un clip, de la nada para después modificarlo. Para insertar un clip vacío haz clic en Insertar → Nuevo símbolo y se abrirá el cuadro de diálogo de Crear un nuevo símbolo símbolo. Allí deberás darle un Nombre para identificarlo más tarde en la Biblioteca y seleccionar la opción Clip de Película en el desplegable Tipo. A partir de este momento tendremos un nuevo clip (vacío) (vacío) al cual podremos acceder desde nuestra Biblioteca (menú Ventana → Biblioteca), ), si hacemos clic derecho sobre él y seleccionamos Edición,, podremos editarlo y trabajar con él.

Observa cómo hacerlo Cuando estudiemos las animaciones haremos ejemplos de animaciones animaciones mediante clips de película y veremos el potencial real de este tipo de símbolos.

10.4. Importar y exportar MovieClips de la Biblioteca

Como para todos los símbolos los Clips se almacenan en la biblioteca del documento cuando son creados. Esto es muy importante en muchos casos ya que habitualmente los clips son muy reutilizables. Para importar clips de otra película debemos abrir primero la biblioteca en la que está contenido. Hemos visto en el tema de Símbolos,, tenemos dos tipos de bibliotecas: bibliotecas las que están asociadas a documentos u otras películas y las que nos proporciona Flash CS5. Pues bien, no sólo podemos utilizar símbolos del mismo documento en el que estamos sino que podemos importarlos de otros documentos de nuestro disco duro, lo que, en el caso que nos ocupa, puede resultar de gran utilidad. Obviamente la exportación mediante biblioteca se hace automáticamente ya que Flash deja los objetos creados en la biblioteca para que puedan ser reutilizados. Para importar un Clip de un archivo archivo del disco duro debemos ir al menú Archivo → Importar → Abrir biblioteca externa..., externa... seleccionar el Archivo Flash (.fla)) del que queremos importar sus símbolos de biblioteca y pulsar Abrir.

78

Aparecerá la biblioteca con la lista de los símbolos correspondientes a los gráficos, botones y clips del documento en cuestión. Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarán a su vez todos los símbolos que contenga, incluidos los clips.

Existe otra forma mucho más cómoda: si tenemos dos documentos abiertos, podemos arrastrar los elementos directamente de un escenario a otro.

Para ver cómo exportar e importar una película completa como un sólo movie clip y poder usar esto para el desarrollo en programas como Swish, revisa nuestro tema avanzado: Otros usos de los Movie Clips

.

Ejercicios del Tema 10.

Prueba evaluativa del Tema 10.

Unidad 11. Botones (I) 11.1. ¿Qué es un 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 las está visualizando. Un botón, en Flash, es igual que un botón de cualquier entorno informático, sea web o cualquier otro.

79

Son elementos que se prestan a que el los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver cómo este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando están pulsados. La interfaz de Flash está diseñada de manera especial para la creación de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla. Al igual que los otros símbolos de Flash CS5, los botones tienen su propia línea de tiempo. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón:

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. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante. Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad de estos símbolos, pero no es así. Ten en cuenta que podemos tener todas las capas que queramos. Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos pueden dotar a los botones de efectos asombrosos. Todo esto es lo referente a la apariencia del botón. Después, tenemos que programar lo que queremos que haga el botón, cómo queremos que afecte a la película. Y esto lo haremos con ActionScript.

Unidad 11. Botones (II) 80

11.2. Creación de un botón 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. Comenzamos creando el objeto que representará el aspecto por defecto de nuestro botón con las herramientas que nos ofrece Flash CS5. Recuerda que puedes usar varias capas. Seleccionaremos el objeto y accederemos al menú Insertar → Convertir en Símbolo, le daremos el TipoBotó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. 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 tiempo del botón (observa que tiene el aspecto que hemos mostrado anteriormente), 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.

81

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 Hit) en la que simplemente podremos dejar la misma figura que la inicial (e (en n este caso sólo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentirá aludido" nuestro botón.

Aquí podemos ver una muestra de creación de un botón lo más simple posible Como resultado obtenemos el botón que continuación mostramos.

Éste es un botón muy básico, pero como veremos se pueden complicar mucho. Para empezar nos servirá con éste. Observa como cambian los estados de reposo (rojo pálido), sobre (rojo) y pulsado (azul). Si una vez creado el botón queremos observar sus distintos estados y todavía no hemos terminado la película entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo a través del menú Control → Habilitar botones simples.. Así podremos interactuar con el botón hasta que desactivemos esta opción.

Unidad 11. Botones (III) 11.3. Formas en los botones Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es ver botones rectangulares, gulares, cuadrados y circulares, cuya creación es inmediata como vimos en el punto anterior, también hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de páginas web. Entre estos están los creados mediante mediante formas poligonales, aquellos que están formados por texto únicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar más vistosidad ya que algunos resultan más expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez lez de creación de botones que sus herramientas de dibujo nos ofrece. Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo o los botones en forma de píldora. Puesto que existen muchas formas de conseguir estos

82

efectos, a continuación tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botón rectangular. Practica con el ejercicio paso a paso Crear un botón con relieve.

Unidad 11. Botones (IV) 11.4. Incluir un clip en un botón La inclusión de clips de película en los botones puede dotar a éstos de más vistosidad. Es habitual colocar un clip en el fotograma Sobre para indicar algún tipo de información extra o una animación para ir más allá de un cambio de color. También es común ver un clip de película actuando como un botón. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo. Veamos por ejemplo el botón siguiente:

Comprueba todos los estados del ratón. Por lo que nos dice el botón podemos intuir que empieza algo, pero quizá no tengamos claro qué. Ayudaría a la navegación que al ponernos sobre el cursor, el texto cambie para darnos información extra. Por ejemplo:

Lo único que hemos cambiado es que tenemos el texto como un movie clip, en cuando el cursor está encima, lo cambiamos por otro con la información.

O podemos usar los clips para animar elementos dle botón, como en el siguiente ejemplo:

83

Incluir un Clip en un botón es muy sencillo. Tomando este ejemplo, y partiendo de que tenemos los dos textos como clips en la biblioteca, sólo tendremos que: - Hacer doble clic sobre el botón para entrar en su modo de edición. - Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto. Ahora tenemos dos opciones: - Pulsa la tecla SUPRIMIR para eliminarlo. - Desde la Biblioteca (menú Ventana → Biblioteca)) arrastramos el clip con el nuevo texto, para crear una instancia. O la opción más práctica: - En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto de texto. - Por último, centramos el nuevo texto en el botón, si es necesario. Ya esta listo, ahora cuando pases el ratón sobre el botón el clip de película pelí empezará a reproducirse.

Por supuesto, en vez de cambiar el texto podemos añadir otros clips, que simulen movimientos, reflejos, etc.

En este video tutorial puedes ver cómo insertar un clip en un botón.

Unidad 11. Botones (V) 11.5. Bitmaps y botones Además de clips, los botones también pueden contener símbolos de tipo Gráfico. Puesto que, como ya hemos visto, todo lo que se puede hacer con un gráfico se puede hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, importa ya que están muy extendidos como forma de expresión gráfica a lo largo y ancho de la Red.

84

Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante hacer uso de ellos en la creación de botones, pero no es así. Básicamente podemos hacer dos cosas: 1) Incluir en cada uno de los fotogramas del botón un bitmap distinto, obteniendo un efecto como el que se consigue con lenguajes como javascript o CSS. 2) Aprovechar las propiedades de los Gráficos en Flash. Para esto, deberíamos importar primero el Bitmap y después convertirlo a símbolo botón. Posteriormente lo editaríamos y, después de insertar cada fotograma clave, convertiríamos su contenido a símbolo Gráfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos. He aquí una pequeña muestra en la que sólo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo hemos convertido en un botón gráfico aplicándole un efecto Alfa (Transparencia) al estado de reposo, lo que da la sensación de estar apagado (también podríamos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original para que al pasar sobre el botón de la sensación de encenderse. Finalmente le hemos aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.

Unidad 11. Botones (VI) 11.6. Acciones en los botones Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de Flash CS5 vamos a comentar dos de las más comunes. Nota: Al crear un archivo, habrás visto que podemos elegir distintas versiones de ActionScript (3.0 o 2.0). Esto se refiere al lenguaje de programación que podemos empelar en Flash y que lo convierte en una herramienta realmente potente. En las versiones 1 y 2, se podían agregar comportamientos directamente en las propiedades de los botones. Pero nosotros venimos empleando las versión 3.0 a lo largo del curso, por ser la más actual y

85

potente. Esta versión nos obliga a escribir el código ActionScript. Veremos cosas básicas, y entraremos un poco más en ActionScript a partir del tema 16. Comenzamos por crear o añadir nuestro botón, y asignarle un nombre de instancia. El nombre que le demos es muy importante, porque nos permitirá acceder a él desde el código. Aunque podemos escribir el código en la misma capa, recomendamos crear una capa exclusivamente para el código, por tenerlo todo mejor organizado. Ahora, abrimos en el Acciones (menú Ventana → Acciones). Se mostrará un área en blanco en la que podemos escribir:

Este , en el área blanca de la derecha, nos permite escribir o editar acciones directamente. De momento no profundizaremos en esto, y ta lo haremos en el tema correspondiente. También encontramos la ventana Fragmentos de código. Desde ella, podemos generar breves instrucciones de código para el símbolo seleccionado, lo que la mayoría de veces nos facilitará la tarea, ya que se trata de las opciones más repetidas.

86

Sin entrar en detalle de qué es cada palabra, pues esto ya lo veremos, este es el aspecto general del código asociado a un botón: ? 1miBoton.addEventListener(MouseEvent.CLICK, accionesMiBoton); 2 3functionaccionesMiBoton(event:MouseEvent):void 4{ 5

//acciones

6}

Donde miBoton será el nombre de la instancia del botón. A esta instancia, le indicamos que queremos que reaccione al clic del ratón (MouseEvent.CLICK), ejecutando las acciones llamadas accionesMiBoton (podemos darle el nombre que queremos). accionesMiBoton contiene las acciones a realizar, y podemos verlo a continuación. Solo habría que cambiar el texto //acciones por las acciones a realizar.

87

Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es único. También tenemos que dar un nombre único a accionesMiBoton para cada uno, a no ser que queramos que realicen la misma acción.

Ahora veamos algunas de las acciones más comunes. 1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet (o una película Flash), lo que nos servirá para irnos desplazando por webs que contengan más de una página, o permitir al descargarse archivos entre otras cosas. La forma más sencilla de hacerlo es seleccionar el botón que queramos usar (en el siguiente ejemplo, hemos llamado a la instancia btnVisitarAulaclic) y buscar la acción que queremos en el Fragmentos de código. En la carpeta Acciones hacemos doble clic sobre Hacer clic para ir a página Web. Se generará un código como el siguiente: ? /* Hacer clic para ir a página Web 1 Al hacer clic en la instancia del símbolo especificado, la dirección 2 URL se carga en una nueva ventana del navegador. 3 4 Instrucciones: 5 1. Reemplace http://www.adobe.com por la dirección URL que desee. 6

Conserve las comillas ("").

7 */ 8 9 btnVisitarAulaclic.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage); 10 11 functionfl_ClickToGoToWebPage(event:MouseEvent):void 12 { 13 navigateToURL(newURLRequest("http://www.adobe.com"), "_blank"); 14 }

88

Lo primero que encontramos en el código generado son comentarios. Este código, normalmente en gris claro, no se ejecuta como tal, y solo sirve para indicar cosas al . En este caso, nos da explicaciones de cómo usar el código generado. Lo único que hemos de hacer es reemplazar la url de ejemplo (www.adobe.com) por la de la página a la que queramos que nos envíe el botón. La instrucción en ActionScript que nos permite hacerlo es navigateToURL(new URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es" se refiere a la página que queremos abrir, y "_blank" indica que se abrirá en una página nueva.

Unidad 11. Botones (VII) 2)Controlar una película en curso. Si estamos reproduciendo una película Flash y queremos permitir que el la detenga, la ponga en marcha, avance, retroceda... Para ello podemos emplear las acciones: stop(); para detener. play(); para reproducir. gotoAndPlay(numeroFotograma); para ir a un fotograma determinado. Por ejemplo, podemos tener el botón btnPausar para parar la película y el botón btnContinuar para reproducir. Nos será más cómodo si usamos el Fragmentos de código para generar el evento Clic del botón (carpeta Controladores de eventos → evento MouseClick). En el código generado, reemplazamos el código personalizado por nuestras funciones: ? btnPausar.addEventListener(MouseEvent.CLICK, fl_PausarReproduccion); 1 functionfl_PausarReproduccion(event:MouseEvent):void 2 { 3 stop(); 4 } 5 6 btnContinuar.addEventListener(MouseEvent.CLICK, 7 fl_ContinuarReproduccion); 8 functionfl_ContinuarReproduccion(event:MouseEvent):void 9 { 10 play(); 11}

89

Tal cual lo hemos puesto, afectaría a la película principal. Si lo que queremos parar o reproducir es un clip determinado, habría que escribirlo delante de la acción, separado por un punto. Por ejemplo miClip.stop();. miClip.stop();

Reconocemos que aunque ActionScript 3.0 es más potente que la versión 2.0, puede resultar mas liosa para s sin conocimientos previos. Si quieres ver cómo serían estos mismos ejemplos en ActionScript 2, te invitamos a echar un vistazo a esta página de nuestro curso de Flash CS3. En este videotutorial de introducción a ActionScript 3 puedes ver cómo empezar a poner código en un botón.

11.7. Incluir sonido en un botón Si nuestras páginas van a tener sonido, el sonido en los botones es una parte fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botón. Para ello, simplemente debemos editar nuestro botón y seleccionar el fotograma Presionado,, e insertar el sonido. Como vimos en el tema correspond correspondiente. iente. Es este caso, el tipo de sincronización más conveniente suele ser Evento. Por ejemplo podríamos importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en la biblioteca. El resultado podría ser algo así:

Ejercicios del Tema 11 11.

Prueba evaluativa del Tema 11. 11

Unidad 12. Animaciones de movimiento (I) 12.1. La animación en Flash

90

Flash es un programa básicamente orientado a la animación, de ahí la gran importancia de este tema. No obstante, para ir creando animaciones cada vez más complicadas se necesita, sobre todo, mucha práctica, aparte de conocer bien las herramientas. En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash. La unión de estas técnicas será la que nos permita crear las más variadas y vistosas animaciones. En el tema de la animación, Flash ofrece unas facilidades muy grandes, consiguiendo consigui efectos que normalmente requieren ciertos conocimientos y espacio de almacenamiento para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programación como JavaScript, de una manera muy sencilla, sin necesidad de excesivos conocimientos c y ocupando muy poco espacio en disco. Aunque Flash ofrece técnicas mejores, también se pueden crear animaciones a modo de GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las animaciones más básicas y conviene conocer conocerlas. las. Para ello conviene visitar nuestro tema básico:

Animaciones Fotograma a Fotograma. Fotograma

A continuación veremos distintos tipos de animaciones que el creador de películas Flash deberá tomar como guía uía inicial. Cabe destacar que podremos aplicar varias de estas animaciones colocándolas en distintas capas. Con esto es con lo que conseguiremos los efectos más espectaculares a la par que útiles. Desde el punto de vista del diseño general de una página web es muy importante tener claro un concepto: no se debe crear animaciones en páginas que no lo necesitan ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, el mensaje. Ya en la versión anterior de Flash se hicieron cambios importantes en el tema de animaciones. Lo que hasta entonces se llamaba interpolación de movimiento, pasa a llamarse interpolación clásica y la interpolación de movimiento actual es totalmente nueva, más potente y versátil.

12.2. Interpolación olación de movimiento Aquí puedes ver cómo realizar una interpolación de movimiento

91

Es la acción básica de las animaciones en Flash. Permite desplazar un símbolo Flash de un lugar a otro del escenario, siendo necesarios únicamente dos fotogramas, lo que optimiza mucho el rendimiento de la película. Es importante destacar que para que una Interpolación de movimiento se ejecute correctamente

aquellos

objetos

que

intervengan

deberán

haber

sido

previamenteconvertidos a símbolos. Los gráficos, clips de película, textos y botones son algunos de los símbolos que se pueden interpolar. También se debe tener cuidado al realizar una interpolación con dos símbolos que se encuentren en la misma capa, ya que el motor de animación los agrupará como uno sólo y el resultado no será el esperado. Por esto es conveniente asegurarse de dos cosas: 1. Separar en distintas capas los objetos fijos y los que estarán animados. 2. Poner también en distintas capas objetos que vayan a ser animados con direcciones o formas distintas. Pasemos pues al tema en cuestión. Una interpolación de movimiento, como hemos dicho, es el desplazamiento de un símbolo de un punto a otro del escenario. El hecho de que sólo se necesiten dos fotogramas es debido a que Flash, únicamente con la posición inicial y final, calcula una trayectoria en línea recta y la representa (veremos que también se pueden realizar movimientos no rectilíneos). Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolación de movimiento. Por defecto, se añadirán unos cuantos fotogramas, rellenos de un color azulado. Ahora vamos al fotograma final, o creamos uno clave de propiedad donde nos plazca. Y desplazamos el símbolo. Veremos que aparece una línea punteada, por defecto recta, que representa el trazado de la animación. Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo, en el que los fotogramas aparecen de color azul.

92

Esto indica que la animación cambiará la posición del símbolo del fotograma 1 hasta la posición del mismo símbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El número de fotogramas que se usen en la interpolación indicará las subetapas de que constará la animación. Cuantas más subetapas más sensación de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento. Podemos seleccionar cualquier fotograma y ver dónde se sitúa el clip en cada punto. De hecho, si en alguno de estos fotogramas lo cambiamos, se creará un fotograma clave de propiedad, mostrándose como un diamante en la línea de tiempo. La velocidad en el movimiento de las películas la podemos cambiar también modificando su parámetro en la línea de tiempo,

pero esto no cambiará lo que hemos

comentado anteriormente respecto al número de fotogramas. La velocidad está expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la línea de tiempo. A mayor valor más velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animación como queremos. El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y arrastrándolo, una vez seleccionada previamente la herramienta Selección .

93

En cualquier fotograma de la interpolación podemos cambiar la posición del símbolo (o cualquier otra propiedad), creando ahí un fotograma clave de propiedad, que se representa por un pequeño rombo en la línea de tiempo. La interpolación de movimiento permite modificar muchos parámetros del movimiento mediante el Editor de movimiento, que veremos a continuación. Para practicar con las interpolaciones, realiza el ejercicio paso a paso Crear interpolaciones de movimiento.

Unidad 12. Animaciones de movimiento (II) 12.3. El editor de movimiento Existe un que nos permite personalizar mucho más la animación, llamado Editor de movimiento. Para acceder a él basta tener seleccionada una interpolación de movimiento y hacer clic en la pestaña Editor de movimiento que aparece junto a la línea de tiempo. Como cualquier , también es accesible desde el menú Ventanas. Este nos permite controlar multitud de propiedades y efectos que afectan a una animación con total precisión, fotograma a fotograma. Este es el aspecto del :

94

Podemos ver, a la izquierda una columna con las propiedades que podemos modificar, divididas en Movimiento básico, Transformación, Efectos de Color, Filtros y Suavizados. Junto a estas propiedades, aparece una columna con los valores que toma esa propiedad en el momento seleccionado de la línea de tiempo. En la siguiente columna podemos establecer si el valor se aplica con aceleración o no. En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave. También los controles - y + que nos permiten añadir efectos. Y a la derecha del todo encontramos la gráfica. Podemos ver que cada propiedad tiene una gráfica específica, que indica los fotogramas en horizontal y los valores de la propiedad en vertical. Si hacemos clic sobre una propiedad, veremos que su gráfica se expande para editarla con facilidad. En la gráfica encontramos los fotogramas clave marcados como un cuadrado negro, o verde cuando está seleccionado. Estirando de ellos, o de la línea de la gráfica podemos alterar los valores.

95

En la gráfica, vemos que los puntos suelen formar un vértice. Una opción muy interesante es poder transformarlos los en puntos suavizados (desde el menú contextual del fotograma), creando una curva Bézier, lo que formará transiciones más suaves entre los picos de valor. Esto no es aplicable a las propiedades X,Y, Z. A lo largo de los siguientes temas veremos cómo utilizarlo utilizarlo de forma concreta, ahora vamos a ver en un videotutorial, cómo podemos utilizar el editor de movimiento para realizar la animación del bote de la pelota del tema 2, utilizando una interpolación de movimiento, en lugar de una interpolación clásica ccomo se hizo en ese tema.

Aquí puedes ver cómo utilizar el editor de movimiento

Unidad 12. Animaciones de movimiento (III) 12.4. Interpolación clásica En versiones más viejas de Flash sólo había una interpolación de movimiento disponible, y se llamaba precisamente así, interpolación de movimiento, en la versión Flash CS4 esa interpolación de movimiento pasó a llamarse interpolación clásica. Una interpolación clásica, igual que una interpolación de movimiento, es el desplazamiento de un símbolo de uno a otro punto del escenario, muchos de los conceptos vistos en las interpolaciones de movimiento son los mismos para las interpolaciones clásicas. Por ejemplo, las animaciones también han de ser sobre símbolos y deben estar en una capa. Los Fotogramas Por Segundo gundo (fps) ( tienen el mismo significado. Para crear una interpolación clásica hay que hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolación clásica. Cuando realicemos la interpolación correctamente observaremos un aspecto como este en la línea de tiempo, con los fotogramas sobre fondo de color morado.

96

Vemos que la animación va desde el fotograma 1 hasta el fotograma 30. Aparece una flecha que no aparece en la interpolación de movimiento y el icono que hay a la der derecha del nombre de la capa es distinto. Por supuesto, al realizar una interpolación clásica el fotograma inicial y final deberán ser diferentes, en caso contrario no se creará ningún tipo de animación. Observa en las siguientes imágenes dónde está situada la pelota en el primer fotograma de la

animación

y

su

posición

final

en

el

último

fotograma:

Aquí puedes ver cómo realizar una interpolación clásica Si el objeto con el que queremos hacer la interpolación clásica no está convertido a símbolo nos encontraremos traremos con algo así...

... y la animación no funcionará.

97

También podemos realizar la interpolación de otra forma, sin convertir previamente el objeto a símbolo, ya que Flash lo convierte a símbolo automáticamente si no lo hacemos, dándole el nombre "Animar" más un número. Esto quizá no sea lo más conveniente en películas grandes, debido a lo que ya comentamos de la gran cantidad de símbolos que pueden aparecer y la confusión que crean muchos símbolos con nombres parecidos. Para crear una interpolación de este tipo, basta con tener un fotograma clave. Hacemos clic con el botón derecho sobre el fotograma en la línea de tiempo, y seleccionamos Crear Interpolación Clásica. Ahora, creamos un nuevo fotograma clave donde queremos que finalice la interpolación, y modificamos los símbolos en los fotogramas clave. Veremos que si seleccionamos uno intermedio, se muestran los símbolos en su transición al fotograma final. Podemos decidir cómo mostrar el símbolo en ese fotograma, por ejemplo moviéndolo. Al hacerlo automáticamente se crea un fotograma clave. Esto hace que el movimiento ya no sea recto, y pueda ser en zig-zag. Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias consecutivas más. Pero recuerda, que para la mayoría de casos, nos resultará más versátil la interpolación de movimiento.

Unidad 12. Animaciones de movimiento (IV) 12.5. Diferencias entre interpolación de movimiento e interpolación clásica En general las interpolaciones de movimiento son más fáciles de utilizar y más potentes, no obstante las interpolaciones clásicas tienen características que pueden hacerlas más interesantes para determinados s. Estas son algunas de las diferencias entre los dos tipos de interpolaciones: - Las interpolaciones de movimiento incluyen el trazado del movimiento, mientras que en una animación clásica no existe el trazado, a menos que lo creemos expresamente.

98

- Sólo se permiten realizar interpolaciones con símbolos, si aplicamos una interpolación de movimiento a un objeto que no es un símbolo, Flash lo convertirá en un clip de película, mientras que si se trata de una interpolación clásica lo convertirá en un símbolo gráfico. - En las interpolaciones clásicas cuando cambia una propiedad se crea un fotograma clave y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento sólo hay una instancia de objeto y al cambiar una propiedad se crea un fotograma clave de propiedad. - La interpolaciones de movimiento pueden trabajar con texto sin tener que convertirlo en símbolo, como ocurre en las clásicas. - En un grupo de interpolación de movimiento no está permitido usar scripts de fotograma, mientras que sí es posible en las clásicas. - Los grupos de interpolaciones de movimiento se pueden cambiar de tamaño en la línea de tiempo. Se tratan como un objeto único. Las interpolaciones clásicas están formadas por grupos

de

fotogramas

que

se

pueden

seleccionar de forma independiente. - Las interpolaciones de movimiento sólo pueden aplicar un efecto de color por interpolación, mientras que las clásicas pueden aplicar más de uno. - Los objetos 3D sólo pueden animarse en interpolaciones de movimiento, no en clásicas. - Sólo las interpolaciones de movimiento se pueden guardar como configuraciones predefinidas de movimiento.

12.6. Cambio de forma en una interpolación Acabamos de ver las interpolaciones de movimiento y las interpolaciones clásicas como un mecanismo para desplazar un símbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar una interpolación para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamaño. Esto es muy sencillo con Flash, basta con modificar la instancia del símbolo en el último fotograma de la interpolación de movimiento o de la interpolación clásica, pero esta vez cambiándole el tamaño. Podemos utilizar la herramienta Transformación libre para cambiar el tamaño.

99

Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de tamaño se producirá mientras el objeto se desplaza. desplaza. También podemos hacer el cambio de tamaño en varias fases o secuencias encadenadas como en las interpolaciones de movimiento comunes. Otra forma es emplear el Editor de movimiento. Veremos los cambios de tamaño en la sección de Transformación, separados en Escala X (ancho) y Escala Y (alto).

El ejemplo siguiente incorpora estas tres características de la interpolación:

y la línea e tiempo que nos queda es algo tan sencillo como esto:

Aquí puedes ver cómo simulamos el bote de una pelota empleando el Editor de movimiento

100

12.7. Animación de textos Es indudable que para comunicar algún mensaje, en la mayoría de las ocasiones, no basta con imágenes o iconos, y es aquí donde el texto cobra gran importancia. No obstante, se debe tener cuidado con la animación de los textos, ya que resulta bastante complicado leer un texto que se desplaza o cambia de tamaño. Por este motivo, un texto animado debería estar sólo en las presentaciones o bien formar parte de una animación corta y, lo que es más importante no debería estar reproduciéndose infinitamente. En las presentaciones, se utilizan multitud de efectos que veremos más adelante. Sin embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las opciones más utilizadas es separar las letras de los textos y animarlas independientemente Aquí tienes un ejemplo de una presentación sencilla mediante texto utilizando esta técnica.

Si no tienes claro cómo realizar una animación te recomendamos que realices el Ejercicio Animar texto por bloques.

Unidad 12. Animaciones de movimiento (V) 12.8. Animación de líneas Una buena animación no tiene que porqué estar compuesta sólo por textos o imágenes espectaculares. En ocasiones conviene darle a la película un aire más sencillo o añadir determinados efectos que la hagan vistosa sin necesidad de cargar mucho la película visualmente, y en cuanto a tamaño de archivo se refiere. Esto lo podemos conseguir simplemente animando líneas y haciendo que se muevan por el escenario. Esta técnica nos permite dar dinamismo a la animación o crear formas distintas a lo largo de su recorrido. Son especialmente útiles y vistosas en fondos oscuros y se suelen usar para formar rectángulos que se aprovechan para insertar imágenes.

101

Aquí podemos ver un ejemplo de este tipo de presentaciones:

Para crear esta animación deberás crear tantas capas como animaciones de líneas vayas a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de líneas de abajo a arriba, otra para el movimiento de arriba a abajo, otra para izquierda a derecha y finalmente una última para el movimiento de derecha d a izquierda. También crearemos una capa que situaremos en la posición superior donde colocaremos las imágenes que formarán el mensaje de bienvenida. El funcionamiento de la animación es claro, deberemos crear interpolaciones de movimiento para cada una de las capas de líneas que en su posición final emplazaremos en su lado contrario de la pantalla, por ejemplo, las líneas situadas en un principio en la parte inferior al final de la animación se encontrarán en la parte superior. Realizaremos esto con las 4 capas de líneas. En la capa Imágenes crearemos animaciones que harán aparecer las imágenes que forman el mensaje de bienvenida de forma secuencial, es decir, del fotograma 5 al 10 se mostrará una imagen, del 11 al 16 otra y la última la mostraremos d del el fotograma 17 al 22. De esta forma, habiendo creado los fotogramas claves en cada uno de los fotogramas de inicio (5, 11 y 17), arrastraremos desde la Biblioteca (menú Ventana → Biblioteca) Biblioteca las imágenes para colocarlas en su lugar en el fotograma. Estas imágenes se mostrarán únicamente durante el tiempo que dure el fotograma para desaparecer más tarde dando paso a la otra imagen. Consejo: Si quieres añadir un fondo deberás hacerlo en una nueva capa y colocar ésta debajo de todas las existentes.

Aquí mostramos la forma de crear una animación de este tipo.

102

Unidad 12. Animaciones de movimiento (VI) 12.9. Guía de movimiento clásica Anteriormente hemos visto como las interpolaciones de movimiento incluyen por defecto el trazado con la trayectoria d del el objeto, y que este trazado puede modificarse fácilmente, sin embargo las interpolaciones clásicas no lo incluyen. Si deseamos que el objeto siga una trayectoria no rectilínea en una interpolación clásica hemos de crear una capa guía de movimiento. Una guía uía es una capa especial que marca una trayectoria para los símbolos de la capa a la que afecta,, para que dichos símbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial, que nos permitirá crear un movimiento no forzosamente rectilíneo. Crear un movimiento mediante esta técnica es bastante sencillo. Partimos de una capa con una interpolación clásica: Sobre la capa en la línea de tiempo tiempo,, hacemos clic derecho y seleccionamos Añadir guía de movimiento clásica. Creamos el trazado de la guía en la nueva capa, por ejemplo dibujando con el Lápiz. Y para acabar, hacemos coincidir el fotograma final de la interpolación con el final del trazado de la guía. Es importante que el símbolo símbolo esté en o con la guía. No es necesario colocarlos al principio del trazado ya que Flash lo hace automáticamente. Vemos como la capa a la que se asocia la guía aparece debajo y sangrado a la derecha.

Aquí se puede ver cómo realizarlo. Podemos ver un efecto más vistoso que el que realizamos con la interpolación sencilla del principio del temaUnaopción que puede resultar muy interesante es Orientar según el trazado,, la cual encontramos en el de Propiedades.. Esta opción hará que el símbolo

103

vaya girando para seguir la línea del trazado, lo que en la animación anterior habría puesto el avión boca abajo al hacer el "loop". "

Tanto si el trazado es de una interpolación de movimiento, como si es de una interpolación clásica, podemos modificarlo de varias formas: - Seleccionando la herramienta Selección y haciendo clic sobre el trazado y arrastrándolo. - Seleccionando la herramienta Subselección y haciendo clic en el trazado, aparecerán los controladores de curva, moviéndolos modificaremos modificar el trazado. - Seleccionando la herramienta Transformación libre y haciendo clic en el trazado, aparecerán los controladores de transformación libre, moviéndolos modificaremos el trazado. Si se trata de un trazado de una interpolación de movimiento, adicionalmente adicionalmente disponemos de otros métodos para modificar el trazado: - Moviendo la posición del objeto en el escenario, esto hace que se cree automáticamente un fotograma clave de propiedad y se modifique el trazado. Esta es, quizás, la forma más fácil de modificar un trazado. - Utilizar el editor de movimiento para modificar los valores de X, Y, Z. Si estamos modificando el trazado de una interpolación clásica, debemos tener cierto cuidado con no producir discontinuidades en el trazado, ya que esto haría que la animación se detuviera en ese punto. En general es más fácil y flexible utilizar los trazados con las interpolaciones de movimiento que con las interpolaciones clásicas.

Muchos movimientos complicados pueden ser duplicados fácilmente sobre otros objetos utilizando ActionScript 3, puedes ver cómo realizarlo en este videotutorial:

104

Podéis poner a prueba vuestros conocimientos realizando:

Unidad 13. Animación por Forma (I) 13.1. Interpolación por forma Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash CS5 nos ofrece la técnica de la Interpolación por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto. Realizar una interpolación por forma, es muy semejante a crear una interpolación de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. Así como hacíamos en el tema anterior, sólo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el último la apariencia final que queremos que tenga. Esta vez, es importante destacar que para que una Interpolación por Forma funcione como es debido aquellos objetos que intervengan deberán ser objetos vectoriales (no símbolos Flash). Debemos tener también dos aspectos en cuenta: 1) Separar en distintas capas los objetos fijos y los que estarán animados. 2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformará todos los objetos vectoriales del primer fotograma en aquello que haya en el último fotograma de la interpolación. Si realizamos la interpolación por forma correctamente la línea de tiempo tendrá este aspecto:

105

Las consideraciones sobre la velocidad y el número de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar también a la interpolación por forma y a cualquier animación hecha con Flash. Si hay algún fallo en los parámetros necesarios para que la interpolación se ejecute bien, como por ejemplo, que uno de los los objetos en capa sea un símbolo, se mostrará algo así en la línea de tiempo:

Para crear la interpolación interpolación,, una vez tengamos los fotogramas de inicio y fin de la animación hacemos clic derecho en alguno de los fotogramas intermedios, y seleccionamos la opción del menú Crear interpolación de forma. forma Recuerda que podemos alterar el fotograma final todo lo que queramos.

Podemos observar cómo realizar una interpolación por forma pulsando aquí. A continuación podemos ver el ejemplo de interpolción de forma sencilla.

También podemos realizar interpolaciones de forma en varias fases de manera análoga a como lo hacíamos en el tema anterior. De esta forma podemos hacer que un determinado objeto de convierta en otro antes de adoptar su forma definitiva. En el siguiente ejemplo podemos ver el ejemplo anterior pero haciendo que se transforme previamente en un triángulo antes de pasar a ser cuadrado.

106

Lo hemos conseguido simplemente haciendo clic con el botón derecho sobre el fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Luego sólo tenemos que borrar el objeto que aparece en el escenario y dibujar el triángulo.

Unidad 13. Animación por Forma (II) 13.2. Transformar textos Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los cambios de forma sobre ellos. Añadimos así una posibilidad más para realizar logotipos o presentaciones vistosas y transmitir información de manera espectacular. Recordemos que para realizar una interpolación de forma es necesario que el objeto sea de tipo vectorial. Este no es el caso de los textos, que se basan en fuentes y son creados en función de los valores de la tabla ASCII y un tipo de letra asociado. Para solucionar este problema, deberemos transformar el texto previamente en un objeto vectorial, es decir, como si hubiéramos repasado con la herramienta lápiz el contorno de cada letra. ¿Posibilidades de esta técnica en textos? Muchísimas, aunque puede llevar a confusiones si no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes fotogramas de margen para que se note la transición. También es conveniente dar un tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la película, porque si no lo hacemos corremos el riesgo de que la animación parezca sólo un garabato revolviéndose.

Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos arriba. Podemos comprobar como simplemente cambiando el color del objeto final, se produce una transición también en el color. Observemos a su vez como cuando se forma cada letra, mantenemos su imagen el tiempo suficiente como habíamos indicado que era necesario. En este otro ejemplo se observa la transición de colores más claramente y, además, observamos transiciones de forma a texto.

107

Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial dado que un objeto de texto no se considera como una forma. Para ello, y una na vez tengamos la animación creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolación aparece como incorrecta. Deberemos, entonces seleccionar el fotograma donde se encuentre el texto y seleccionarlo. Haremos clic en el menú Modificar → Separar para convertir el texto en un conjunto de puntos que creen una forma. Y la interpolación ya estará lista.

Consejo:: Cuando vayas a aplicar el comando Separar sobre una palabra completa observa que primero lo que hace es separar la palabra en letras individuales. Deberás ejecutar de nuevo el comando para que estas letras se separen y creen una forma.

Aquí mostramos cómo realizar una animación de este tipo.

Unidad idad 13. Animación por Forma (III) 13.3. Consejos de forma Como ocurría en el tema anterior, a veces no nos viene bien el tipo de acción que hace Flash por defecto. En las interpolaciones de movimiento lo solucionábamos mediante la guía de movimiento.

108

En el caso de la interpolación por forma, es posible que Flash realice la transformación de los objetos de una forma que no es la que esperábamos y que no nos conviene para llevar a cabo nuestro propósito. Pues bien, para estos casos Flash nos ofrece una her herramienta ramienta para solucionarlo: los consejos de forma. Los consejos de forma son marcas que indican a Flash qué puntos de la imagen inicial son los que deben corresponderse con otros tantos puntos en la figura final. Al indicar esto, estamos controlando las formas ormas intermedias que se generarán. Para añadir un consejo de forma a una interpolación nos situaremos en el fotograma inicial y pulsaremos Control + Shift + H (o bien ir al menú Modificar → Forma → Añadir Consejo de Forma).

Aparecerá un círculo de color con una letra dentro en el centro de la figura. Su color será rojo mientras no sea colocado en el contorno del objeto (los extremos, si es que no hay contorno), que es donde tiene efecto. Cuando están colocados sobre una curva (vector) que forma un contorno son amarillos para el objeto inicial y verdes para el final. Dicho círculo debemos colocarlo en un punto del contorno de la figura inicial. Automáticamente aparecerá un punto con la misma letra dentro en la figura final (este (es punto será el que se deba corresponder con el punto del objeto de origen) y deberemos colocarlo en el punto que deseemos del contorno. El primer consejo de forma está marcado con la letra "a". Si creamos más de uno serán marcados con las letras "b", "c "c", ", "d" ... hasta la z, que es el límite (26 como máximo). Visita el siguiente videotutorial para comprender mejor qué es un consejo o pista de forma y ver un ejemplo de la creación y usos de los consejos de forma.

109

Ahora realicemos el seguimiento de otro ejemplo, tenemos la siguiente animación (sin consejos de forma): Vamos a insertar un consejo de forma en el punto indicado en los gráficos situados un poco más abajo: Fijémonos en las posiciones inicial y final del Consejo de Forma y en el seguimiento del mismo, posteriormente comprobaremos que Flash realiza lo que le pedimos: Punto Inicial

Punto Final

Seguimiento Como vemos el punto que hemos marcado en el objeto inicial se acaba correspondiendo con con el punto que marcamos en el final, con lo que hemos conseguido forzar la transformación que nosotros queríamos. El resultado del ejemplo anterior es este. Para practicar estos conceptos realiza el Ejercicio Consejos de forma.

Unidad 14. Efectos sobre animaciones (I) 14.1. Introducción Si no te parecen suficientes las interpolaciones de forma y de movimiento, y quieres realizar animaciones más complejas, puedes combinar las interpolaciones de movimiento con los efectos y transformaciones que se pueden realizar sobre los símbolos que las componen y aplicar efectos sobre las mismas interpolaciones.

110

Una vez comprendidas todas las técnicas de este tema, estaremos en disposición de realizar todo tipo de animaciones en Flash. Sólo tendremos que poner un poco de imaginación porque, como hemos visto y veremos, el programa nos facilitará enormemente el trabajo. Con el de Propiedades podemos controlar los efectos y filtros, pero también podemos usar el Editor de movimiento para controlar gran parte de los efectos.

14.2. Efectos sobre la interpolación Para describir todos los efectos que podemos aplicar sobre una interpolación de movimiento previamente creada, sin necesidad de tocar ningún símbolo, nos centraremos en el Propiedades. Si seleccionamos un fotograma y un objeto perteneciente a una interpolación, y abrimos el Propiedades, desde el botón de la parte superior derecha, o bien desde el menú Ventana, Propiedades, encontraremos las distintas propiedades aplicables a ese objeto en ese fotograma. Las propiedades variarán según el tipo de interpolación, según puedes ver en las siguientes imágenes correspondientes a las propiedades de la interpolación de movimiento, interpolación guiada e interpolación de forma:

111

En las interpolaciones de movimiento podemos darle un nombre de etiqueta, nos ayudará a identificarla en la barra de tiempo. Aparecerá a lo largo de todos los fotogramas que la componen. Tamaño: La propiedad tamaño se representa por los valores AN (anchura) y AL (altura) y para modificarla basta colocar el cursor sobre el valor y aparecerá un deslizador que podemos mover a izquierda o derecha, también podemos hacer clic sobre el valor y teclear el nuevo valor.

Desde el Editor de movimiento también podemos modificar el tamaño de un objeto desde las propiedades Escala X (anchura) y Escala Y (altura) que tienen valores en tanto por ciento.

Por último, con el uso de la herramienta Transformación libre también podemos variar las dimensiones del objeto. Escala: En las interpolaciones guiadas, esta casilla, al activarla, permite un incremento/decremento progresivo del tamaño del objeto inicial cuando sus dimensiones son distintas a las del objeto que está en la posición final de la animación. Si la casilla está desactivada podríamos encontrarnos con una animación como la siguiente. En las interpolaciones de movimiento, esta opción está activada por defecto. Como vemos Flash hace el desplazamiento de posición, pero el cambio de tamaño se produce bruscamente en el último fotograma.

112

Aceleración: Esta barra deslizante nos permite determinar la aceleración del primer tramo de la animación. Podemos elegir valores entre -100 y 100. Si el valor de aceleración es negativo el símbolo se moverá despacio primero e irá acelerando de manera progresiva. Si

dicho valor es positivo provocará un efecto opuesto. Podemos por ejemplo dar la impresión de que un objeto, por ejemplo un coche, arranca, va cogiendo velocidad poco a poco (valor -100) y después va frenando y disminuyendo su velocidad hasta pararse. Como ésta, existen muchas otras aplicaciones. Para comprenderlo mejor recomendamos hacer el Ejercicio Acelerar movimiento.

113

Curso De Cs5 3m3r5z

Overview 26281t

More details 6y5l6z

Related Documents 3h463d

Curso De Cs5 3m3r5z

Curso De Flash Cs5. Aulaclic 4gw1c

Cs5 i3d6p

Interfaz De Dreamweaver Cs5 523f6u

Apuntes De Flash Cs5 62c4b

More Documents from "Alexanderson Vallejo" 3c1f24

Curso De Cs5 3m3r5z

Como Afecta El Entorno A Los Gerentes i6db

La Importancia De Los Medios De Transporte 4e2q2g

4p345f

Ejercicios Para Prueba Credito 3 (1) 195u70

Ocw Problemas Correas 282v6t