Antologia Flash

1
Antologa
Material de consulta
Aplicaciones grficas II
Colegio la Salle de Veracruz

Seccin Bachillerato cuarto Semestre Nombre: ________________________________ Grupo: _____
Aplicaciones Grficas II- FLASH
No. de Lista: _____
Aplicaciones grficas con programas integrados II. Flash Objetivo General: Crear animaciones que combinen grficos, smbolos e imgenes,
mediante la aplicacin del programa flash, para la produccin de pelculas a nivel bsico. UNIDAD I: Elementos bsicos de Flash. OBJETIVO: Identificar los elementos bsicos de flash, mediante el anlisis de sus caractersticas y funciones. 1.1 Introduccin a Flash. Historia. Vectores y mapa de bits. 1.2 Entorno de trabajo. Escenario. Objetos de Flash. - Smbolos. Lnea del tiempo. Las Capas. Barra de mens. Barra de herramientas. Paneles. 1.3 Configuracin del rea de trabajo. Dimensiones. 1.4 Guardar y abrir pelculas.
UNIDAD II: Mis primeras animaciones. OBJETIVO: Crear animaciones sencillas mediante la aplicacin de los diferentes tipos de animacin. 2.1 Tipos de Fotogramas. 2.2 Animacin Fotograma a Fotograma. 2.3 Animacin Interpolada. 2.3.1 Interpolacin de movimiento. 2.3.2 Interpolacin de forma. UNIDAD III: El dibujo en Flash. OBJETIVO: Utilizar las herramientas de dibujo en base a sus propiedades y caractersticas. 3.1 Contornos y rellenos. 3.2 Dibujar lneas rectas. 3.3 Dibujar valos. 3.4 Dibujar rectngulos.
3 3.5 Herramienta lpiz y pluma. 3.6 Seleccin de objetos 3.7 Agrupar y desagrupar. 3.8 Interaccin entre objetos. 3.9 Alinear objetos. 3.10 Transformar objetos. UNIDAD IV: Texto. OBJETIVO: Aplicar la herramienta texto de acuerdo a sus atributos y caractersticas. 4.1 Trabajar con texto. 4.2 Propiedades de los textos. UNIDAD V: Capas. OBJETIVO: Aplicar las capas de acuerdo a sus propiedades para la creacin de animacin en las pelculas. 5.1 Introduccin. 5.2 Elementos de la ventana con las capas. 5.3 Distribuir objetos en capas. 5.4 Tipos de Capas. 5.5 Capas gua. 5.6 Capas Mscara. UNIDAD VI: Smbolos y Animacin interactiva. OBJETIVO: Aplicar los smbolos a travs de su biblioteca para generar una animacin ms interactiva. 6.1 Smbolos e Instancias. 6.2 Tipos de smbolos. - Grficos. - Botones. - Clips de pelcula. 6.3 Propiedades de los smbolos. 6.4 Crear smbolos. 6.5 Biblioteca de smbolos. 6.6 Los fotogramas. 6.7 Creacin de gifs animados. 6.8 Uso del papel Cebolla. UNIDAD VII: Acciones en Flash. OBJETIVO: Crear pelculas interactivas aplicando las acciones del lenguaje Action script. 7.1 Introduccin. 7.2 Panel de Acciones. 7.3 Aadir Acciones. 7.4 Action Script.
UNIDAD VIII: Publicacin de la pelcula. OBJETIVO: Generar la publicacin de la pelcula para visualizarla en la Web. 8.1 Publicar una pelcula.
UNIDAD I: Elementos bsicos de Flash.

OBJETIVO: Identificar los elementos bsicos de flash, mediante el anlisis de sus caractersticas y funciones. 1.1 Introduccin a Flash. Flash es una potente herramienta creada por Macromedia que ha superado las mejores expectativas de sus creadores, inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la web, as como para crear GIFs animados. Actualmente, es una estupenda aplicacin que permite crear espectaculares pginas Web de alto contenido interactivo, animaciones de todo tipo y hasta juegos. Los motivos que han convertido a Flash en el programa elegido por la mayora de los diseadores web profesionales y aficionados son varios. Veamos pues, porqu es interesante Flash. Las posibilidades de Flash son extraordinarias, cada nueva versin ha mejorado a la anterior, y el actual Flash no ha sido menos. Aunque su uso ms frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos ms. Son tantos, que todos los diseadores web deberan saber utilizar Flash. Flash ha conseguido hacer posible lo que ms haca falta en Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no esttico (en contraposicin a la mayora de las pginas, que estn realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fcil y rpido animaciones de todo tipo. El entorno de Flash es amigable, lo que facilita su aprendizaje. Vectores y mapa de bits Afortunadamente, Flash, aunque puede manejar los bitmaps, trabaja fundamentalmente con vectores. Los bitmaps son archivos grficos de gran tamao constituidos en base a pixeles (puntos de imagen) que forman parte de un conjunto que obliga a seleccionarlo todo a la vez, ya que, en principio lo que aparece en la imagen no son elementos individuales, sino un todo inseparable. Cada imagen consta de un nmero determinado de pixeles que determinan su resolucin, la cual es fija y no vara con el tamao, situacin que provocar distorsiones si se reduce. Aplicaciones Grficas II- FLASH
6 Historia del programa Smart Sketch__ (1993) Programa para realizar imgenes vectoriales. Future Splash Animator _ Flash 1.0 (1996) En 1997 los creadores vendieron los derechos a Macromedia que incorpor el plug-in de Shockwave. Macromedia Flash 2.0. En 1998_ Macromedia Flash 3. En 1999 _ Macromedia Flash 4. En 2000_ Macromedia Flash 5. En 2002_ Flash Mx. (V. 6) En 2004 _ Flash Mx 2004 (V. 7) En 2004 _ Flah Mx 2004 profesional En 2005 , Flash Basic 8 y Flash Profesional 8. En 2006, Flash Profesional 9 con actionscript. En 2007, Adobe Flash CS3 Profesional (V. 10). En 2008, AdobeFlah CS4 Profesional (V. 10). 1.2 Entorno de trabajo. La versin de Flash MX cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva. Adems, tiene la ventaja de que es similar a la de otros programas de Macromedia (Dreamweaver, Freehand, Director...), todo esto hace ms fcil aprender Flash y ms rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash MX por primera vez.
Elementos del entorno de trabajo Barra de Men
Tiene como propsito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseo web o grfico, aunque tiene algunas particularidades. Veamos los principales Submens a los que se puede acceder: Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la pelcula actual casi todo tipo de archivos (sonidos, vdeo, imgenes e incluso otras pelculas Flash), o la de Configuracin de Publicacin desde donde se pueden modificar las caractersticas de la publicacin. Tambin permite configurar la impresin de las pginas, imprimirlas... Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; tambin permite personalizar algunas de las opciones ms comunes del programa. Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se
8 puede seleccionar desde los submens Cuadrcula y Guas desde donde tambin se pueden configurar sus opciones. Insertar: Te permite insertar objetos en la pelcula, as como nuevos fotogramas, capas, acciones, escenas... Modificar: La opcin Transformar permite modificar los grficos existentes en la pelcula, y la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema se tratar ms adelante). El resto de opciones permite modificar caractersticas de los elementos de la animacin Suavizar, Optimizar o de la propia pelcula (Capa, Escena ...). Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en profundidad. Control: Desde aqu se modifican las propiedades de reproduccin de la pelcula. Reproducir, Rebobinar, Probar Pelcula .... Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las ventanas, incluye accesos director a TODOS los Paneles. Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Macromedia, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc. Lnea del tiempo La Lnea de Tiempo es el lugar donde se refleja lo que va a ir sucediendo a lo largo de la duracin de la pelcula. Se basa prcticamente en la misma filosofa de las pelculas de cine, es decir, una serie de fotogramas sucesivos, cada uno de los cuales contiene las imgenes que deben aparecer cuando se proyecta la pelcula. Consta de 2 partes. 1) Los Fotogramas (frames) que vienen delimitados por lneas verticales (formando rectngulos) 2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado cada fotograma, cunto dura o cundo aparecer en la pelcula. Adems, en la parte inferior hay herramientas para trabajar con Papel cebolla e informacin sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (12.0 en la imagen) y el Tiempo de pelcula transcurrido (0.0s en la imagen).
9 Capas El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicar un tema completo. An as, veamos a grandes rasgos qu son las capas. Una Capa se puede definir como una pelcula independiente de un nico nivel. Es decir, una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas). Los objetos que estn en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre s. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre s. Para ello, crearemos tantas capas como sea necesario. Paneles Los Paneles son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo lo que haga referencia a las acciones, ir en el Panel "Acciones"). Su misin es simplificar y facilitar el uso de los comandos. Todos ellos se estudiarn en profundidad a lo largo del curso. An as, vamos a nombrarlos y a resumir sus funciones. Panel Info: Muestra el tamao y las coordenadas de los objetos seleccionados, permitindonos modificarlas. Muy til para alineaciones exactas. Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Alineamiento: Coloca los objetos del modo que le indiquemos. Muy til. Panel Mezclador de Colores: Mediante este panel creamos los colores que ms nos gusten. Panel Muestras de Color: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas nuestras creaciones). Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades caractersticas y muchas utilidades (calendarios, scrolls etc...) Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda, el panel ms usado y ms importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamao de los caracteres, tipografa, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamao etc... Es fundamental, no debeis perderlo de vista nunca. Panel Escena: Modifica los atributos de las escenas que usemos.
10 Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra pelcula.
rea de trabajo El rea de trabajo consta de varias partes, veamos: La parte ms importante es el Escenario, sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botn derecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobre Propiedades del documento: Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1 px (pxeles) y el mximo de 2880 x 2880 px. Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado (tamao por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados) Color de Fondo: El color aqu seleccionado ser el color de fondo de toda la pelcula. Veloc. Fotogramas: O nmero de fotogramas por segundo que aparecern en la pelcula. 1.3 Configuracin del rea de trabajo. Cada vez que se crea un nuevo documento aparece una escena vaca lista para trabajar en ella. Lo que ubique y caractersticas se almacenar junto con la pelcula. La pelcula se almacenar con los parmetros y propiedades con los que aparece por defecto, as que si desea hacer algn cambio a los parmetros o propiedades debe realizarlo antes de iniciar la pelcula. Se puede cambiar el tamao de la pelcula (dimensiones), el color de fondo, la velocidad de fotogramas, etc. Puede realizarlo de las siguientes formas: a) Panel de propiedades. b) Men Modificar / documento. c) CTRL + J En cualquier caso, aparecer el recuadro
10
11 1.3 Guardar y abrir pelculas. .FLA .- Es el formato de archivo que se genera al momento de guardar una pelcula de Flash, este formato nos permitir ver cmo est hecha la pelcula o editarla para alguna modificacin. Nota: Guardar en Formato Flash 6. .SWF (Shock Wave File).- Este formato corresponde a la pelcula cuando es publicada y solo permite su visualizacin, estos archivos pueden ser ejecutados por flash player sin tener conexin a internet.
UNIDAD II: Mis primeras animaciones.

OBJETIVO: Crear animaciones sencillas mediante la aplicacin de los diferentes tipos de animacin. 2.1 Tipos de Fotogramas. Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por tanto, una animacin no es ms que una sucesin de fotogramas. Todo esto se puede controlar desde la Lnea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qu tipos de fotogramas hay y cules son sus rasgos.
Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris.El ltimo fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misin es prolongar la duracin de un fotograma clave o keyframe. Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifco, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la pelcula. Se identifican por tener un punto negro en el centro y cuando est vaco se le diferencia por una lnea negra vertical. Con F6, se crean. Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Lnea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la pelcula y Flash no los tendr en cuenta al publicar la pelcula. En la imagen, son fotogramas contenedor todos los fotogramas a partir del 12 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos. Fotogramas pausados Son aquellos que se encuentran entre dos fotogramas clave. Son aquellos que contienen algn objeto pero que no son fotogramas clave. Encontramos fotogramas intermedios en las interpolaciones de forma y de movimiento. Con F5 se crean.
11
12
Fotograma Vaco: Son fotogramas sin contenido, Su color es F blanco.En blanco.En la imagen, los fotogramas del 6 al 11 (incluidos) son fotogramas vacos. No debemos confundirlos con los fotogramas . contenedor, contenedor, pues estos ltimos vienen delimitados por lneas verticales grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser Keyframes. Con F7 se crean. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrar una imagen en blanco. (no dar por terminada la animacin). De modo que si queremos que un objeto aparezca en el fotograma 1 y despus otra vez en el fotograma 10. Los fotogramas del 2 al 9 debern ser fotogramas vacos ya que as el objeto "desaparecer" y volver a aparecer. Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel "Frame". Si la "Frame duracin del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas. Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una accin asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en amas principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la pelcula. En la imagen, la accin existente en el fotograma 1 afecta tambin al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y s las tiene el 5. Fotogramas de Animacin de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posicin del Keyframe inicial al final. Para representar esta animacin aparece una flecha entre estos Keyframes.
Seleccionar fotogramas Un fotograma seleccionado aparece siempre resaltado en color negro. Para seleccionar un fotograma clave o normal, simplemente haga clic sobre l. Para seleccionar a la vez varios fotogramas consecutivos de cualquier tipo arrastre el cursor del ratn sobre ellos. sobr Si despus de haber seleccionado el primer fotograma mantiene pulsada la tecla CTRL y va haciendo clic uno a uno sobre los siguientes fotogramas, stos se irn aadiendo a la seleccin. Para seleccionar a la vez todos los fotogramas de una animacin de cualquier animaci tipo, site el cursor sobre alguno de sus fotogramas intermedios (normales) y haga doble clic. Se seleccionarn todos los fotogramas de la animacin. Para seleccionar a la vez el mismo fotograma en varias capas, arrastre verticalmente hacia arriba o hacia abajo. Para seleccionar a la vez fotogramas consecutivos en varias capas arrastre para cubrir el rea de fotograma que desee incluir en la seleccin.
12
Aplicaciones Grficas II FLASH II-
13 Copiar y pegar fotogramas Tambin se pueden cortar, copiar y pegar como el resto de objetos de Windows. Sin embargo, en Flash estas operaciones con los fotogramas se realizan mediante el men Edicin o con el botn derecho del mouse. A la hora de pegar fotogramas debe tener en cuenta lo siguiente: Si sobre un fotograma existente pega un fotograma clave, ste sustituye el contenido del anterior. Si pega varios fotogramas consecutivos sobre un fotograma existente, ste queda sustituido por el primer fotograma pegado y el resto queda intercalado. Eliminar y borrar fotogramas A la hora de eliminar fotogramas se pueden actuar de dos maneras diferentes en funcin de los resultados que deseemos, veamos. Eliminar fotogramas implica que los fotogramas que se encuentren seleccionados desaparecern y todos aquellos que se encontrarn a su derecha, se desplazarn hacia la izquierda para ocupar el lugar de los fotogramas eliminados. Borrar fotogramas implica que los fotogramas que se encuentren seleccionados desaparecern quedando en su lugar fotogramas vacos, pero no se producir ningn desplazamiento de fotogramas. Mover Fotogramas Seleccionar el fotograma o fotogramas a mover. Arrastre con el ratn hasta situarlos donde desee. Mientras arrastre los fotogramas aparecern enmarcados y vea en todo momento en donde se encuentran. 2.2 Animacin Fotograma a Fotograma. Las pelculas de Flash se basan en el mismo sistema que las pelculas de cine, es decir, una serie de fotogramas que reproducidos uno tras otro proporcionan la sensacin de movimiento. El mtodo de crear animaciones fotograma a fotograma es el ms adecuado para realizar animaciones complejas del tipo de las que forman las pelculas de dibujos animados, en los que cada fotograma muestra un dibujo complejo ligeramente diferente al anterior. Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por tanto, una animacin no es ms que una sucesin de fotogramas. Todo esto se puede controlar
13
14 desde la Lnea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especfico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la pelcula. Se identifican por tener un punto negro en el centro y se crean presionando F6. El procedimiento para crear una animacin fotograma a fotograma es muy sencillo. 1. Se debe crear un fotograma clave y dibujar en su interior la posicin de partida del objeto a animar. 2. Hay que crear otro fotograma clave a continuacin del anterior, lo cual provocar que aparezca en l el mismo contenido del primero. 3. Debe modificar el contenido de este segundo fotograma, el cual, deber ser en la mayora de los casos, ligeramente diferente al anterior a no ser que desee obtener cambios bruscos de imagen. 4. Seguidamente hay que crear el tercer fotograma clave, el cual mostrar el contenido del segundo y que deber modificar tambin, y as sucesivamente, hasta que se haya terminado la animacin. Coloreado de los fotogramas Por defecto, el programa muestra los fotogramas coloreados de uno u otro modo segn el tipo de animacin que contengan. Los fotogramas que contienen grficos estticos aparecen coloreados en gris. Los fotogramas que contienen animaciones realizadas con interpolacin de forma aparecen coloreadas en verde con una flecha negra en su interior. Los fotogramas que contienen animaciones realizadas con interpolacin de movimiento aparecen coloreados en violeta con una flecha negra en su interior. Los fotogramas clave vacos aparecen con un punto hueco en su interior. Los fotogramas clave con contenido aparecen con un punto negro en su interior. 2.3 Animacin Interpolada. La creacin de animaciones fotograma a fotograma, resulta apropiada para la simulacin de cambios complejos entre el contenido de los fotogramas., sin embargo, los fotograma clave ocupan mucho espacio en el archivo. Flash ofrece otra forma de crear animacin menos laboriosa, se trata de la interpolacin. La interpolacin se basa en la filosofa de dnde quieres que inicie la animacin y dnde quieres que termine y flash crea automticamente los fotogramas intermedios. Es decir, nosotros le decimos al programa cules son los fotogramas inicial y final. Flash permite crear dos tipos de interpolacin: de movimiento y de forma.
14
15
2.3.1 Interpolacin de movimiento. Se aplica para crear una secuencia de animacin en la que un objeto recorre un trazado recto y cambia de color, transparencia, tamao, posicin, rotacin, etc. La interpolacin de movimiento slo es aplicable a los objetos agrupados o a los smbolos. De todos modos, si selecciona varios objetos a la vez y crea una interpolacin con ellos, los objetos pasarn a ser un objeto nico aunque no se haya agrupado. Procedimiento 1. Cree un nuevo documento en blanco. 2. Dibuje un objeto en el lado izquierdo de la escena. Esta ser la posicin en el primer fotograma. 3. Seleccione el primer fotograma, haciendo clic sobre l y pulse el botn derecho para que aparezca el men contextual. Seleccione la opcin Crear interpolacin de movimiento (Create motion tween). De momento no pasa nada. O TAMBIN, en el panel propiedades en tween, seleccione motion. 4. Seguidamente, seleccione el fotograma 30 haciendo clic sobre el y presione F6 para crear el ltimo fotograma clave. 5. Ahora con el fotograma 30 seleccionado, seleccione el objeto y muvalo a la posicin final de dicho objeto, que sera hasta la derecha de la escena. 6. Presione la tecla Intro. Nota: La interpolacin de movimiento slo es aplicable a los objetos agrupados o a los smbolos. 2.3.2 Interpolacin de forma. En principio, este tipo de interpolacin nos va a permitir crear animaciones en las que unos objetos se transforman gradualmente en otros, lo cual se denomina morphing en lenguaje informtico. De esto se deduce que el objeto inicial y final sern diferentes, ya que el primero se convertir en el segundo a lo largo de una serie de fotogramas. Este tipo de animacin no es posible con la interpolacin de movimiento. La interpolacin de forma slo ser posible a partir de objetos editables, es decir, que no estn agrupados, ni sean smbolos. Procedimiento
15
16 1. En un documento nuevo dibuje un crculo con la herramienta valo y sitelo en el centro de la escena. Elimine su contorno. 2. Seleccione el fotograma 40 y pulse F6 para crear un fotograma clave. 3. En el fotograma 40, seleccione el crculo y brrelo con la tecla SUPR. 4. Ahora active la herramienta Texto , haga clic en la escena para que aparezca el cursor del texto y escriba la palabra crculo. 5. Con la herramienta de texto haga doble clic sobre el texto recin escrito para seleccionarlo. 6. Desde el panel de propiedades, Cambie el tamao, color y tipo de fuente. 7. Seleccione el texto y posicinelo al centro de la escena. 8. Con el texto seleccionado, aplique dos veces la opcin Modify / Break Apart. 9. Seleccione el primer fotograma haciendo clic sobre l y aparecer el crculo. 10. En el panel propiedades aparece la casilla Tween (animar), despligala y elija Shape (forma). Automticamente los fotogramas del 1 al 40 aparecern de color verde con una flecha. OTRO PROCEDIMIENTO: 1. Dibuje el contenido del primer fotograma y seprelo. 2. En el panel propiedades elija interpolacin de forma, de momento no sucede nada. 3. Seleccione ahora el ltimo fotograma que desea ver en la interpolacin y pulse F6 para convertirlo en fotograma clave. Ver que aparece la flechita verde. 4. Edite el objeto que contiene el ltimo fotograma y listo. 5. Reproduzca la animacin. Dependiendo de la accin es el tipo de Interpolacin a aplicar.
TIPO DE ACCIN El objeto cambia de posicin en lnea recta El objeto cambia de posicin en lnea curva El objeto va cambiando su color El objeto va cambiando su tamao El objeto va cambiando su forma o se convierte en otro El objeto va girando El objeto recorre un trazado determinado El objeto realiza una transformacin sencilla El objeto va cambiando su velocidad FORMA MOVIMIENTO
16
17
UNIDAD III: El dibujo en Flash.

OBJETIVO: Utilizar las herramientas de dibujo en base a sus propiedades y caractersticas. Evidentemente, no podemos comparar Flash con otros programas de dibujo vectorial como Corel Draw, Freehand o Illustrator, sin embargo con las herramientas que nos llustrator, proporciona el programa, se pueden realizar la mayora de los dibujos que nos realizar propongamos. A continuacin veremos cules son sus herramientas. La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cules son las ms importantes y cmo se usan:
BARRA DE HERRAMIENTAS BSICAS Herramienta Seleccin: . Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos. permite seleccionar los bordes de los objetos, los rellenos (con un slo clic), los bordes (con doble clic), zonas a nuestra eleccin... Adems, su uso adecuado puede ahorrarnos tiempo en el a trabajo. Herramienta Lnea: Permite crear lneas rectas de un modo rpido. Las lneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la lnea recta. Una vez creada la podemos modificar sin ms que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla. Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se vern en el tema siguiente. Herramienta valo: La herramienta valo permite trazar crculos o elipses de manera rpida y sencilla Herramienta Rectngulo: Su manejo es idntico al de la Herramienta valo, tan solo se diferencian en el tipo de objetos que crean. o Herramienta Lpiz: Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar lneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicar esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores ien que hay en la Barra de Herramientas. Herramienta Brocha: Su funcionalidad equivale a la del lpiz, pero su trazo es mucho ms grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no est delimitada por un borde. El color que aplicar esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.
17
18
Herramienta Borrador: Su funcionamiento es anlogo a la Herramienta Brocha. Pero su funcin es la de eliminar todo aquello que "dibuje". Herramienta Transformacin libre: Rota, inclina, escala o distorsiona un objeto BARRAS DE HERRAMIENTAS AVANZADAS Herramienta Lazo: Su funcin es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la , Herramienta Flecha slo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la seleccin a mano). Herramienta Pluma: Crea polgonos (y por tanto rectas, rectngulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vrtices de los polgonos, lo que nos ugares asegura una gran precisin. Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de prctica se acaba dominando.
Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imgenes: . Esto, es la Herramienta "Varita Mgica", tan popular en otros , programas de dibujo. Permite hacer selecciones segn los colores de los objetos. El tercer dibujo que aparece es este: permite hacer selecciones poligonales.
Herramienta Pluma: Crea polgonos (y por tanto rectas, rectngulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vrtices de los polgonos, lo que nos asegura una gran precisin. Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un po de prctica poco se acaba dominando.
Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vrtices que componen Pluma, los objetos creados con dicha herramienta.
Herramienta Bote de Tinta: Se emplea para cambiar rpidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas. ientas.)
18
19 3.1 Contornos y rellenos. En Flash el contorno se manipula como un objeto independiente del relleno. Flash permite dibujar de una sola vez valos y rectngulos con relleno y contorno, pero es posible configurar el programa para que dibuje directamente esas figuras sin relleno y/o contorno.
3.2 Dibujar lneas rectas. Durante el trazado de las lneas debe tener en cuenta los siguientes detalles: Para trazar rectas encadenadas, trace la lnea, deje de pulsar y sin mover el cursor del sitio, vuelva a arrastrar para crear otra lnea que comience en el final de la anterior y as sucesivamente. Si desea encadenar una recta al final de otra creada anteriormente, asegrese de que la opcin Ver/ Ajuste/ Ajustar a objetos est activada, acerque el cursor al final de la lnea anterior y, al comenzar a arrastrar, la nueva lnea se adosar al final de la anterior. Si durante el trazado mantiene la tecla Mayus pulsada, el trazado se limitar a lneas verticales, horizontales y a 45 grados. 3.3 Dibujar valos. Para dibujar valos seleccione esta herramienta, y arrastre para trazarlo. Si mantiene presionada la tecla Mayus durante el trazado, crear crculos perfectos. 3.4 Dibujar rectngulos. Para dibujar rectngulos seleccione esta herramienta y arrastre para trazarlo. Si mantiene presionada la tecla Mayus durante el trazado, crear cuadrados perfectos. Se pueden crear rectngulos redondeados. Para ello, una vez seleccionada la herramienta Rectngulo, busque el icono en la seccin opciones de la barra de herramientas.
19
20 3.5 Herramienta lpiz y pluma. Lpiz Para dibujar trazos mediante la herramienta lpiz, siga estos pasos. 1. Seleccione la herramienta lpiz en la barra lateral de herramientas. El cursor adoptar el aspecto de un lpiz. 2. Site el cursor en donde desee comenzar a dibujar y arrastre para crear el trazo. Cuando haya terminado suelte el botn del ratn. Los trazos se dibujarn con el color y tipo de lnea que estn configurados. Durante el trazado de las lneas a mano alzada debe tener en cuenta los siguientes detalles: Si mantiene presionada la tecla Mayus durante el trazado, crear lneas rectas horizontales o verticales. Si desea encadenar un trazo al final de otro creado anteriormente, asegrese de que la opcin Ver/Ajuste/Ajustar a objetos est activada, acerque el cursor al final de la lnea anterior y comience a dibujar el nuevo trazo; cuando termine la nueva lnea se unir al final de la anterior. Pluma En Flash disponemos de la herramienta pluma que nos permitir trazar rectas y curvas del tipo Bzier. Efectivamente, para el trazado de curvas con suavidad y mayor precisin se utiliza el mtodo Bzier, en el cual se especifican los puntos de comienzo y fin de la curva a la vez que se fijan unos puntos de control que establecen la direccin y forma de la curva. Mediante la herramienta sub-seleccin ser posible modificar cualquier trazado no deseado. Las curvas Bzier se trazan siempre igual; sin embargo, dependiendo de lo que haga con el ratn pueden observarse dos mtodos para realizar el trazado: arrastrando el ratn desde el punto inicial o bien desde el punto final de la curva. Durante el trazado de la curva Bzier se puede alternar indistintamente entre uno y otro mtodo. Trazado de curvas Bzier Para trazar curvas Bzier arrastrando al final de la curva siga estos pasos. 1. Seleccione la herramienta pluma. El cursor tomar la forma de una plumilla. 2. Site el cursor sobre el punto donde desea comenzar la curva, haga clic con el ratn y suelte. Aparecer un pequeo crculo. 3. Desplace ahora el cursor dos o tres centmetros en cualquier direccin para situarlo en el lugar donde quedar el punto final de la curva. 4. Mantenga pulsado el ratn y muvalo en varias direcciones. En ese momento comenzar a aparecer una curva a la vez que una lnea recta (lnea de control) que se puede rotar en cualquier ngulo y alargar todo lo que se quiera. 5. Una vez conseguido el aspecto de curva deseada, pulse la tecla Esc para desactivar la curva que acaba de dibujar.
20
21 3.6 Seleccin de objetos. Los objetos as considerados tienen 2 partes fundamentales: El Borde: Consiste en una delgada lnea que separa el objeto del exterior del escenario. Puede existir o no, segn nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color ser el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lpiz, Lnea o Pluma y si queremos que nuestro dibujo no tenga borde, bastar con seleccionar el borde y suprimirlo (ver siguiente punto). El Relleno: El relleno no es ms que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia tambin es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vi en el tema de Dibujar, y por tanto, parecer que dicho objeto no tiene relleno, aunque en realidad s que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales como la Brocha o el Cubo de Pintura
Seleccionar Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que queramos modificar (mover, girar, cambiar de color...). Podremos observar que las partes de un objeto seleccionadas toman una apariencia con textura para indicar que estn seleccionadas.
Objeto SIN seleccionar
Objeto con Objeto con el BORDE seleccionado seleccionado
el
RELLENO
Veamos cmo seleccionar las diferentes partes de un objeto: Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar. Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno. Seleccionar todos los bordes (o lneas) de un mismo color que estn en contacto: Hacer doble clic sobre una de las lneas que tenga el color que pretendamos seleccionar. Seleccionar un Smbolo, un texto, o un grupo: Clic en el Smbolo, en el texto o en el grupo. Estos
21
22
tipos de objetos mostrarn un borde de color azul (por defecto) al estar seleccionados. Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT mientras seleccionamos los objetos que queramos. Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Flecha. Haremos clic en una parte del escenario y arrastraremos el cursor hasta delimitar el rea que contenga los objetos que queremos seleccionar. Si esta rea corta algn objeto, slo quedar seleccionada la parte del objeto que est dentro del rea que hemos delimitado. Si quisiramos incluir dicho objeto, bastara con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar. Este modo de seleccionar objetos permite seleccionar muchos objetos rpidamente, adems de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas ... Adems de la Herramienta Flecha, tambin podemos usar la Herramienta Lazo, ms til an si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las reas seleccionadas no tienen porque ser rectngulares. Seleccionar a partir de la Lnea de Tiempo: Si seleccionamos un determinado fotograma en la lnea de tiempo, se seleccionan automticamente todos los objetos que estn en dicho fotograma. Esto es til para modificar de un modo rpido todos los elementos del fotograma. Seleccionar Todo: La forma ms natural de seleccionar todo, consiste en hacer clic en el men Editar -> Seleccionar Todo.
3.7 Agrupar y desagrupar. Un Grupo no es ms que un conjunto de objetos. Si bien no cualquier conjunto de objetos forman un grupo, ya que para crear un grupo, debemos indicarle a Flash que as lo queremos. Para ello, basta seleccionar los objetos que queremos que formen parte de un grupo y despus hacer clic en el Men Modificar -> Agrupar. Tras hacer esto observaremos que desaparecen las texturas que indicaban que los objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los dems. Adems, aparece el rectngulo azul (por defecto) que rodea al grupo, definindolo como tal.
Objetos desagrupados
Objeto agrupado
22
23 3.8 Interaccin entre objetos. Cuando quiera realizar objetos complejos, deber combinar estos elementos para obtener resultados ms elaborados, aunque en tal caso, deber comprender cmo interactan entre s los objetos de Flash cuando se encuentran en la misma capa o en capas diferentes. Un objeto dibujado sobre otro en la misma capa afecta directamente al objeto que queda por debajo de tal manera que, en funcin del tipo de objeto (lnea o forma) que se encuentre por encima o por debajo, el resultado ser uno u otro. Cuando una lnea pasa por encima de otra lnea Cuando una lnea pasa por encima de otra lnea, las lneas quedan segmentadas entre s, es decir, la lnea que est por debajo queda segmentada por efecto de la que se ha dibujado encima y viceversa. Los segmentos pueden ser seleccionados individualmente. Cuando un relleno pasa por encima de una lnea. En este caso, sucede casi lo mismo que en lo anterior. La lnea, al encontrarse por debajo queda segmentada por el trazo superior. Igualmente, cada segmento de la lnea puede seleccionarse por separado. La nica diferencia es que aqu el relleno no resulta segmentado por la lnea. Cuando una lnea pasa por encima de un relleno. En este caso el resultado es algo diferente. Cuando una lnea pasa por encima de un relleno, el relleno es segmentado en los puntos de cruce de la lnea, pero el relleno resulta tambin segmentado por la parte de lnea que lo atraviesa. 3.9 Alinear objetos. Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cmo colocarlos en el Escenario. Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposicin el Panel Alineamiento. Este Panel lo podemos encontrar en el Men Ventana -> Alinear. As funciona: El Panel Alineamiento permite colocar los objetos tal y cmo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapi en la opcin En Escena. Esta opcin nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario. Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual es seleccionar En Escena , para que los objetos se coloquen segn los lmites de la pelcula, en el centro del fotograma etc...
23
24 Conozcamos un poco mejor el Panel Alineamiento y sus posibilidades: Alineamiento: Sita los objetos en una determinada posicin del fotograma (si est seleccionado En Escena). Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. Por ejemplo: Si quisieramos situar un objeto en la esquina inferior izquierda, bastara pulsar el primer y el sexto botn consecutivamente. Distribuir: Sita los objetos en el escenario en funcin de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribucin de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botn de la izquierda. Cada uno de los 2 cuadrados se situar en un extremo de la pelcula (uno arriba y otro abajo). Coincidir Tamao: Hace coincidir los tamaos de los objetos. Si est activo "En Escena" estirar los objetos hasta que coincidan con el ancho y el largo de la pelcula. Si no est activo, la referencia ser el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opcin "En Escena" no est activada, al hacer clic en el primer botn de "Coincidir Tamao", el cuadrado ms estrecho pasar a tener la anchura del cuadrado ms ancho. Si "En Escena" hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma. Espacio: Espacia los objetos de un modo uniforme.
3.10 Transformar objetos. La transformacin de los objetos implica diferentes acciones que se deben de realizar, por ejemplo, tamao, rotacin, inclinacin, reflejo, etc. Rotacin de objetos Al rotar un objeto, ste gira sobre su punto de transformacin. El punto de transformacin se alinea con el punto de registro, que se establece de forma predeterminada en el centro del objeto; sin embargo, es posible mover el punto arrastrndolo. Puede rotar un objeto con el comando Rotar, arrastrndolo con la herramienta Transformacin libre o especificando un ngulo en el panel Transformar. Al rotar un objeto arrastrndolo, tambin lo puede sesgar y escalar. Al rotar un objeto con el panel Transformar, es posible escalarlo al mismo tiempo.
24
25 Herramienta transformacin libre. Esta herramienta nos permite realizar todo tipo de transformaciones en los objetos, grupos, instancias o bloques de texto libremente. Tambin se pueden realizar transformaciones individuales o combinar varias transformaciones, como el movimiento, la rotacin, la escala, la inclinacin y la distorsin. Cuando crea un objeto y lo selecciona con esta herramienta, aparece el objeto de la siguiente manera.
Distorsin de objetos La herramienta transformacin libre le permitir distorsionar objetos grficos. Para ello erramienta siga estos pasos. 1. Seleccione el objeto a distorsionar. 2. En la barra de herramientas seleccione transformacin libre opcin Modificar / Transformar / Distorsionar. 3. Seleccione alguno de los vrtices a distorsionar. y seleccione la
UNIDAD IV: Texto. OBJETIVO: Aplicar la herramienta texto de acuerdo a sus atributos y caractersticas.
4.1 Trabajar con texto. del cuadro de herramientas le permitir insertar y editar La herramienta Texto texto en la escena. En principio el texto introducido es tratado como un grupo y si desea tratarlo como si fueran formas independientes, se deber aplicar la opcin Modificar /Separar (break apart), como ya se vio. r vio Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animacin, y por tanto, tambin todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones grficas, de modo que tratar cualquier texto como si de un modo objeto ms se tratase, listo para ser animado a nuestro gusto. Esto nos permitir posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto, texto esttico o normal, texto te dinmico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), tambin se puede crear texto que soporte formato HTML etc. HTML,
25
26 4.2 Propiedades de los Textos. Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir. El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra pelcula, de modo que si seleccionamos un texto texto, podremos ver en l todo lo que nos hace falta conocer sobre nuestro texto. Si tenemos experiencia usando Flash 5, notaremos que todas las propiedades que antes se encontraban en los Paneles Carcter y Prrafo, se encuentran agrupadas ahora en el , Panel Propiedades.
Veamos a fondo el Panel Propiedades: Fuente: Desde aqu, al igual que en los editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que ms nos guste. Altura: Determina el espaciado entre los caracteres. til cuando la tipografa que empleamos muestra las letras muy juntas o para dar efectos concretos al texto. Ajuste automtico entre caracteres: Activar esta casilla provoca que la separacin entre caracteres se realice de modo automtico. Posicin: Nos permite convertir nuestro texto en subndices o en ertir superdices (o dejarlo normal). URL: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccin web, nada ms fcil que escribirla ah. Flash la asociar al texto que ests escribiendo en ese mome momento. Tipo de Lnea: Si el texto que vamos a incluir es dinmico (de lo contrario aparece sin activar), esta opcin nos permite determinar cmo queremos que aparezcan las lneas (lnea nica, multilnea o multilnea sin ajuste). Configuracin: Son las clsicas opciones que permiten convertir sicas el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamao.
26
27
Otras Propiedades: Dado que Flash trata los textos como objetos, stos tambin tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografas son una parte muy importante y deben respetarse.
Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con prrafos (entre otras). A la Izquierda: Todas las lneas empezarn tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido). Centrar: del Prrafo. Las lneas se distribuyen a la derecha y a la izquierda del punto medio
A la derecha: Todas las lneas empezarn tan a la derecha como sea posible (dentro del recuadro de texto que hayamos definido). Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus lmites. El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los sangrados de prrafo y el espacio interlineal. Tipos de Textos Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un tratamiento especial, segn el tipo que sean. Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el Panel Propiedades sin ms que haciendo clic sobre la pestaa "Tipo de texto": Texto Esttico El Texto Esttico se caracteriza por no presentar ningn cambio a lo largo de la animacin. Es importante que no confundamos la palabra "esttico" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo
27
28 largo de la animacin". Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser esttico. As, un recuadro de texto en el que pone "Aprende Flash MX" durante toda la pelcula, es esttico, aunque dicho texto cambie de posicin, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es esttico. Se insistir en este punto en los ejercicios de evaluacin. Los textos estticos slo tienen 2 propiedades extras: Usar Fuentes del Dispositivo: Esta opcin permite que la pelcula Flash emplee las Fuentes que tenga instaladas el usuario que ve la pelcula en su ordenador. Si dicho usuario dispone de las fuentes que hemos utilizado en la pelcula, la ver exactamente como queremos que la vea, pero si no las tiene, Flash emplear la fuente que ms se le parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendamos, por lo que suele ser conveniente mantener esta opcin sin seleccionar, aunque esto conlleve un mayor tamao de la pelcula final. Seleccionable: Con esta opcin activada el usuario podr seleccionar los textos que aparezcan en la pelcula (cortarlos, copiarlos...) Actvala si lo crees conveniente. Texto Dinmico El Texto Dinmico en contraposicin al esttico s que puede cambiar su contenido (adems de estar animado). Su uso es bastante ms complejo que el del Texto Esttico, ya que cada recuadro de texto Dinmico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programacin, lo que nos saca del objetivo de este curso. Un uso comn que suelen tener es el de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto). Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el nmero de lneas que van a tener, se puede introducir texto HTML, se puede aadir fcilmente un borde al texto o dar nombre a la variable que represente al texto Dinmico.
Texto de Entrada
28
29
El Texto de Entrada tiene bsicamente las mismas propiedades que el Texto Dinmico, junto con algunas propias de un tipo de texto orientado a la introduccin de datos por parte de usuario, como por ejemplo el nmero mximo de lneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseas). Evidentemente este tipo de texto se reflejar en nuestra pelcula como un recuadro de texto SIN contenido, ya que lo deber introducir el usuario. Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinmico.
Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imgenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra pgina web). An as, crear animaciones con textos, que sobrepasen a las que Flash incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo de muchsimas horas y mucha paciencia. Los resultados son increbles, pero puede resultar recomendable en estos casos usar algunos programas diseados con este objetivo. Entre otros destacan el Swish, el FlaX o el MiX-Fx, con ellos podrs crear efectos de texto asombrosos en pocos minutos, aunque no podrs gozar del entorno de Flash MX ni podrs emplear el resto de herramientas de que dispone Macromedia Flash MX.
UNIDAD V: Capas.
OBJETIVO: Aplicar las capas de acuerdo a sus propiedades para la creacin de animacin en las pelculas. 5.1 Introduccin. Todo el mundo ha visto alguna vez cmo trabajan los dibujantes de dibujos animados. Y todos hemos visto cmo colocan una hoja semitransparente con dibujos sobre otras y la superposicin de todas forman el dibujo final. Por qu no dibujan todo en una misma hoja? Por qu trabajan con varios niveles y con varios dibujos si van a acabar todos juntos? Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Lnea de Tiempos y por tanto, sus distintos fotogramas se reproducirn simultneamente. Una Capa se puede definir como una pelcula independiente de un nico nivel. Aplicaciones Grficas II- FLASH
29
30 La creacin de una pelcula de Flash con varias capas podra compararse a la proyeccin de varias pelculas de cine a la vez y sobre la misma pantalla. Agregando capas podremos gozar de las siguientes ventajas: Cada capa podr contener aquellos objetos que deseemos, con la ventaja de que los objetos de una capa no influirn sobre los de otra. De este modo, no tendr que preocuparse por agrupar los objetos para que no interaccionen entre s. Podremos activar la visualizacin de la capa o capas que deseemos con objeto de visualizar nicamente aquello que deseemos editar y evitar confusiones con otros elementos. Podremos organizar nuestro trabajo colocando en cada capa una animacin, grfico, sonido o elemento diferente. Podremos organizar las capas en carpetas. Podremos crear capas especiales de gua que le permitirn hacer que los objetos se muevan trazando un camino determinado. Podremos crear capas especiales de mscara que le permitirn mostrar y ocultar objetos selectivamente.
5.2 Elementos de la ventana con las capas. La siguiente imagen muestra un ejemplo de una pelcula con 4 capas, cada capa tiene un nombre y se identifican adems con un color diferente; as mismo, se sealan los diferentes elementos que puede tener una capa, los cuales a continuacin se describen.
30
31 Inserta Capa: Cuando se inicia Flash, aparecer una capa por defecto denominada : Capa 1, si desea aadir nuevas capas en la escena, haga alguna de estas cosas: En la parte inferior de la ventana de capa, haga clic en insertar Capa. capa Elija la opcin Insertar/ lnea del tiempo / Capa. Clic con el botn derecho sobre una capa y elija la opcin Insertar capa en el men contextual que aparecer. Seleccionar Capas: Para seleccionar una capa individualmente solo haga clic sobre la so capa, al mismo tiempo aparecer un icono de lpiz indicando que es la capa activa. Tambin puede seleccionar varias capas a la vez. El procedimiento puede variar: Para seleccionar capas consecutivas haga clic sobre la capa inferior del grupo de capas que desee seleccionar y manteniendo la tecla Mayus haga clic en la Mayus, capa superior que desee. stas y todas las capas intermedias quedarn seleccionadas a la vez. Tambin puede hacerlo al revs. Para seleccionar capas salteadas, haga clic sobre la capa que desee, mantenga salteadas, presionada la tecla Ctrl y haga clic en la siguiente capa.
Visualizacin: Se activa o desactiva la visualizacin de acuerdo a su necesidad. Para que se vea o no el contenido de una capa en pantalla. Esto permite que pueda capa desaparecer parte o todos los elementos de la pantalla para editar o trabajar en una capa determinada. Bloqueo: Si bloquea una capa, los objetos que contenga seguirn apareciendo en la escena pero no podrn ser seleccionados ni editados. Para bloquear una capa seleccionados nicamente haga clic sobre el smbolo de la columna correspondiente a la capa que desee bloquear. Para desbloquear una capa vuelve a hacer clic en el mismo lugar. Si hace clic con el botn derecho sobre el nombre de una capa, aparecer un el men contextual en el que si selecciona la opcin Bloquear otros podr bloquear todas las capas menos la capa sobre la que haya hecho clic. Eliminar Capa: Para eliminar una capa, haga clic en el icono : de la seccin de capas. El programa eliminar la capa y sus correspondientes fotogramas en la lnea del tiempo. Tambin puede hacerlo haciendo clic con el botn derecho sobre una capa y eligiendo Eliminar Capa. Si desea eliminar varias capas a la vez, seleccinelas segn . se se explic anteriormente.
Visualiza contornos: Ver una capa como contorno implica que todos los objetos que tenga aparecern mostrando nicamente su silueta. Eso puede resultar til para ver
31
32 objetos de capas inferiores que permanecen ocultos por objetos de capas superiores o ocultos bien, para trabajar ms cmodamente prescindiendo de los rellenos de los objetos. Insertar Capa Gua: Es un tipo de capa denominada especial que ms adelante se detallar. Insertar Carpeta para capas: Permite crear carpetas para agrupar y ordenar las capas. Esto facilitar el trabajo en la organizacin que se tenga con las capas. Para crear la carpeta de capas, haga clic en el icono de la ventana o Men Insertar / Lnea del tiempo / Carpeta de capas. Propiedades de Capa: Si hacemos doble clic en el icono , podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna ms de menor importancia. La siguiente ventana muestra las opciones de las propiedades de las capas.
OBSERVACIONES: El tamao del archivo no depende del nmero de capas que tenga definidas y puede crear tantas como desee. El programa representa cada capa en una lnea horizontal de la ventana de d tiempo. Al iniciar la reproduccin de la pelcula el cursor ir avanzando y reproducir a la vez todo lo que contengan las diferentes capas.
32
33 5.3 Distribuir objetos en capas. Flash permite distribuir automticamente en capas individuales objetos que se encuentran en una misma capa. 1. Seleccione los elementos de una capa que desea distribuir en capas individuales. 2. Ejecute la orden Modificar / Lnea del tiempo / Distribuir en capa y cada objeto capas se ubicar en una capa individual. Esta utilidad es especialmente prctica para crear animaciones de letras de texto. As, por ejemplo, si desea ubicar las letras de un texto en capas independientes siga estos pasos. 1. Escriba el texto en la escena. 2. Ahora seleccione la opcin Modificar / Separar y ver cmo cada letra pasa a ocupar una capa diferente cuyo nombre coincide con el de la letra correspondiente. 5.4 Tipos de Capas En trminos generales, Flash identifica 5 tipos diferentes de Capas: Normales, Gua, Capa Mscara, Guiadas, Enmascaradas. Capas Normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas... Capas Gua : Son capas especiales de contenido especfico. Se emplean en las animaciones de movimiento de objetos y su nico fin es marcar la trayectoria que debe seguir dicho objeto. Debido a que su misin es representar la trayectoria de un objeto ob animado, su contenido suele ser una lnea (recta, curva o con cualquier forma). Las capas Gua o de Gua se utilizan como referencia para facilitar la ubicacin de objetos en el escenario. As, por ejemplo, puede dibujar una forma irregular para usarla luego como gua para ubicar los elementos con mayor precisin. Flash no incluir las capas gua en la pelcula final, es decir, nada de lo que aparezca en la capa gua se ver en la pelcula de Flash. Capas Guiadas: (Guided Layers) : Cuando definimos una capa como capa gua, es imos necesario definir despus una capa guiada. Esto es, una capa que quedar afectada por la gua definida en la Capa gua. Capas Mscara : Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo emos
33
34 complejo (tampoco demasiado) por lo que sugiero checar el procedimiento para su creacin. Capas Enmascaradas : Estas capas funcionan conjuntamente con las Capas de tipo mscara. Al igual que las capas gua y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. 5.5 Capas Gua. El uso de Capas Gua est ntimamente ligado a la animacin por interpolacin, es decir, aquel tipo de animacin en el que se definen los fotogramas primero y ltimo y los fotogramas intermedios los calcula el programa. Efectivamente estamos creando interpolacin de movimiento, en lugar de que se desplace de manera recta, lo hace siguiendo un trayecto dibujado. De este modo podemos conseguir que los objetos se muevan y transformen siguiendo trayectorias predefinidas a nuestra voluntad. Procedimiento a seguir para crear capas gua. De manera general indicaremos el procedimiento para crear capas Gua. Crear el objeto y agruparlo. Crear la capa de gua de movimiento. Dibujar en la capa de gua de movimiento el trazado que se desea que siga el objeto. Crear los fotogramas clave para el final de la animacin en cada capa. Activar el encaje de objetos. Seleccionar el ltimo fotograma de la capa del objeto y arrastrar el objeto al punto final del trazado. Seleccionar el primer fotograma de la capa del objeto y arrastrar el objeto al punto inicial del trazado. Crear la interpolacin de movimiento. Reproducir la pelcula. Nota: En las prcticas se crear el procedimiento detallado para este tipo de capa. 5.6 Capas Mscara. Una capa de mscara tambin es un tipo especial de capa que permite mostrar y ocultar a voluntad elementos que se encuentren en capas ubicadas por detrs de la capa de mscara. As pues, una capa de mscara que contenga, por ejemplo , un crculo relleno, se convierte en una especie de agujero por lo que se va a ver lo que haya por debajo. Por este mismo motivo, todas las zonas de la capa de mscara que no tengan ninguna zona dibujada, ocultarn objetos que se encuentren en las capas subyacentes.
34
35 Procedimiento a seguir para crear capas mscara. Dibujar lo que se desee enmascarar en la capa normal por defecto de la escena. Crear una capa mscara. Dibujar en la capa de mscara el objeto que va a servir de mscara. Activar el efecto de mscara. Nota: En las prcticas se detallar el procedimiento anteriormente mencionado.
UNIDAD VI: Smbolos y animacin interactiva.

Objetivo: Crear smbolos e instancias que faciliten la elaboracin de grficos en flash y utilizarlos a travs de la biblioteca de smbolos para generar animaciones ms interactivas. 6.1 Smbolos e instancias. Existen dibujos (grficos) complejos que a lo largo de nuestro trabajo con Flash quisiramos guardarlos para poder utilizarlos en otras animaciones, as pues, lo ideal es ir almacenando de manera ordenada y correctamente clasificada, esto se hace a travs de crear smbolos y guardarlos en una biblioteca. As mismo, permitir utilizarlos repetidamente en una misma pelcula e incluso en diferentes pelculas. Smbolos: Son elementos que pueden utilizarse las veces que desee. Siempre se encuentran almacenados en las bibliotecas. Cualquier objeto dibujado directamente en Flash o importado puede convertirse en un smbolo con el objetivo de utilizarlo posteriormente. Incluso se podrn crear propias bibliotecas de smbolos a partir de bibliotecas de otras pelculas. Instancia: Una instancia es la representacin de un smbolo en la escena. Cada vez que tome o utilice un smbolo de la biblioteca y lo lleve a la escena, lo que en realidad estar llevando es una instancia de ese smbolo. Ventajas de utilizar smbolos: 1. Comodidad de tener todos los smbolos agrupados y clasificados en una biblioteca. 2. Con el uso de smbolos evita que el tamao de la pelcula sea grande para su carga en el internet, ya que si usa Copiar y pegar para crear copias de grficos, generar archivos (pelculas) con mayor capacidad de bytes. Recuerde que cuando usa smbolos, realmente usa instancias del smbolo e internamente el programa solo hace referencia al smbolo. 3. Otra gran ventaja es que si hace algn cambio en el smbolo, todas sus instancias reflejarn el cambio, lo cual permitir variar fcilmente el aspecto en la escena de todas las representaciones de un determinado smbolo.
35
36 6.2 Tipos de smbolos. Flash permite crear tres tipos de smbolos: Grficos, Botones y Clips de pelculas. En un principio, lo normal es pensar que un smbolo grfico ser aquel que provenga de un grfico, un smbolo de botn ser aquel que contenga un botn y un smbolo de clip ser el que contenga un clip de pelcula. Sin embargo, Flash nos permite, convertir un smbolo grfico en botn, convertir un smbolo grfico en clip o un smbolo de pelcula en grfico. Esto es porque Flash al momento de trabajar con smbolos no toma en cuenta su contenido, sino el comportamiento del mismo. Comportamiento de los smbolos: Smbolo grfico: Tienen una lnea de tiempo propia que va sincronizada con la lnea del tiempo principal. De este modo si creamos un smbolo grfico a partir de, por ejemplo, un grfico esttico que hayamos dibujado, el smbolo ocupar nicamente un fotograma. Si aadimos a la escena varios smbolos grficos estticos de un fotograma cada uno en una capa, al reproducir la pelcula, aparecern a la vez todos los objetos y permanecern en pantalla porque la pelcula empieza y termina en el primer fotograma. Smbolo botn: Es un tipo especial de smbolo que le permitir aadir interactividad a sus pelculas. Los botones pueden ser grficos estticos o dinmicos y pueden incorporar sonido, acciones, etc. Cuando se va a crear un nuevo botn Flash abre una pantalla especfica mostrando la lnea del tiempo botn. Cada botn tiene su propia lnea del tiempo independiente, la cual contiene nicamente cuatro fotogramas. El primero se denomina Reposo y contendr el aspecto del botn cuando no tenga encima el cursor del ratn. El segundo fotograma se denomina Sobre y contendr el aspecto del botn cuando tenga encima el cursor del ratn. El tercer fotograma se denomina Presionado y contendr el aspecto del botn cuando se haga clic sobre l con el cursor del ratn. Finalmente, el cuarto fotograma se denomina Zona activa y nos permitir definir el rea activa que deber considerarse para que el clic del cursor sea efectivo. En cualquier caso, cuando arrastremos un botn desde la biblioteca a la escena, nicamente ocupar un fotograma. Los botones tienen su propia lnea de tiempos. Esta es independiente pero, sin embargo, est formada nicamente por cuatro fotogramas, uno para cada estado posible del botn. Observe la imagen.
36
37
Smbolo clip de pelcula: Es aquel que contiene una animacin con ms de un fotograma pero con una lnea del tiempo independiente de la pelcula principal. Eso quiere decir que un smbolo de clip de pelcula siempre se reproducir de principio a fin y de forma independiente a la lnea del tiempo de la escena principal. As pues, si arrastramos un clip de pelcula desde la biblioteca a la escena, ocupar nicamente un fotograma pero ste contendr la totalidad de fotogramas del clip y la animacin no se detendr aunque se asigne una accin de Stop a la pelcula principal.
6.3 Propiedades de los smbolos. El panel de propiedades indica los siguientes elementos cuando se trabaja con smbolos.
6.4 Cmo crear smbolos. Hay varias formas para crear smbolos. Todo depende de si partimos de un grfico o de la nada, o incluso de otro smbolo. Si ha dibujado un grfico en Flash y desea guardarlo para posteriores usos, seleccinelo y haga lo siguiente: 1. Seleccione la opcin Modificar / Convertir en smbolo o pulse directamente F8. En cualquier caso se abrir una ventana en la que deber marcar la casilla Grfico y asignar un nombre para el nuevo smbolo. 2. Acepte y el nuevo smbolo se almacenar en la biblioteca mostrando el icono de a la izquierda de su nombre. El grfico original permanecer en la escena
37
38 pero ahora ya no ser el grfico en s sino una instancia o representacin del smbolo contenido en la biblioteca. Nota: Tambin puede crear un smbolo, seleccionando el objeto y haciendo clic con el botn derecho. Creacin de un Smbolo Botn En la creacin de un botn podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a smbolo de tipo botn y posteriormente veremos cmo completarlo internamente, lo que nos ayudar a entender mejor dicha estructura. Primeramente crearemos el objeto que representar el aspecto por defecto de nuestro botn con las herramientas que nos ofrece Flash MX. Seleccionaremos el objeto y accederemos al men Insertar-> Convertir en Smbolo, le daremos el comportamiento Botn y asignaremos un nombre a nuestro nuevo smbolo.
De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo completaremos internamente. Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y seleccionando la opcin Editar. Cuando tengamos delante la lnea de tiempos del botn (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los fotogramas (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.
38
39
Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y marcar el rea de accin del botn (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso slo 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 botn.
6.5 Biblioteca de smbolos. Como ya se ha visto a la biblioteca de smbolos van a parar todos los smbolos que se vayan creando. Sin embargo, la biblioteca permite almacenar otros tipos de elementos tales como imgenes bitmap importadas, sonidos, vdeos, etc. Todos estos elementos se pueden clasificar y organizar en carpetas para que puedan ser localizados fcilmente. Cada pelcula dispone de una biblioteca especfica en donde se almacenarn todos los elementos que integren esa pelcula. No obstante, es perfectamente posible importar elementos. Los smbolos contenidos en las bibliotecas estn identificados por su nombre y por un icono que representa el tipo de smbolo que representan: Clip Botn Grfico
Tipos de Bibliotecas Biblioteca de la pelcula Aqu es donde se almacenan todos los smbolos, bitmaps y sonidos correspondientes a la pelcula activa. Para abrirla pulse F11, CTRL + L o Window /Library. Bibliotecas prefijadas Tambin conocidas como bibliotecas comunes, vienen implementadas en Flash y contienen botones, clases y elementos interactivos que puede utilizar.
Elementos de la ventana de biblioteca
39
40
Utilizar elementos de la biblioteca de otra pelcula. Seleccione Archivo / Importar a la librera (File / Import to library). Propiedades.-Permite cambiar el comportamiento del smbolo seleccionado, su nombre o entrar a editarlo individualmente. Tambin puede entrar a la opcin Properties del men. 6.6 Los fotogramas. En Secciones anteriores se habl de los fotogramas y los tipos que existen, en este apartado, se mencionar un poco ms de la configuracin y manipulacin de los fotogramas para la creacin de Gifs animados. Cambiar el tamao de los fotogramas Por defecto los fotogramas aparecen en un tamao de visualizacin normal. En determinadas ocasiones desear aumentar su tamao para, por ejemplo, ver las etiquetas que les asignemos. Para cambiar la anchura de los fotogramas Haga clic en el icono que aparece en el borde superior derecho de la ventana de lnea del tiempo y se abrir un men en el que podr elegir los tamaos: Diminuto, Pequeo, Normal, Media y Grande. Se haba mencionado el color de los fotogramas, pero si hace clic en el icono en la parte superior derecha de la ventana de lnea de tiempo y desactiva la opcin Aplicaciones Grficas II- FLASH
40
41 Fotogramas coloreados del men que aparecer, todos esos colores desaparecern y quedar de este modo. Los fotogramas que contienen grficos estticos aparecern en color blanco. Los fotogramas que contienen animaciones realizadas con interpolacin de forma aparecern con una trama gris y con una flecha verde en su interior. Los fotogramas que contienen animaciones realizadas con interpolacin de movimiento aparecern con una trama gris y con una flecha roja en su interior. Los fotograma clave aparecern con un punto cuyo color ser azul si se trata de grficos estticos, verde si se trata de una interpolacin de forma o rojo si se trata de una interpolacin de movimiento.
Alargar la duracin de los fotogramas. La velocidad de reproduccin es nica para todas las capas de la pelcula. Sin embargo, es posible acelerar o disminuir la velocidad de cualquier parte de la animacin variando el nmero de fotogramas empleados para definir la accin. As pues, si se aaden unos cuantos fotogramas clave o intermedios en un lugar de la pelcula, la accin que en ese lugar se produjera se alargar y en consecuencia la accin durar ms. 6.7 Creacin de GIFS animados. Como seguramente sabrs, los gifs animados son pequeas imgenes en movimiento que aparecen en multitud de pginas Web y que les caracteriza en la mayora de los casos un aspecto simptico. Flash permite crear y editar ese tipo de archivos. Cmo crear o editar un GIF animado Los GIFS animados estn muy relacionados con las animaciones fotograma a fotograma porque presentan su misma estructura. De hecho, cuando importa un gif animado, aparece en la lnea del tiempo con el aspecto de una animacin fotograma a fotograma. Cuando importa un GIF animado (File / Import), podremos editar cada fotograma como nos plazca, ahora bien, tenga en cuenta que los GIFs animados son una sucesin de imgenes bitmap, lo cual significa que no est trabajando con imgenes vectoriales y en consecuencia no podr usar las herramientas de flash para editar, a no ser, claro est, que convierta la imagen bitmap a vectores (vectorizar).
41
42
Recuerde que para vectorizar (trazar) bitmaps se utiliza la opcin Modify / Trace Bitmap. de No obstante, dado que el tamao de los gifs animados es normalmente muy pequeo para que no tarden demasiado en bajar de la red, acostumbran a perder bastante detalle al vectorizarlos. Crear un Gif con Flash. a) Abrir el archivo en Flash. b) Hacer clic en File / Publish Settings c) En la pestaa Formats, haz clic en GIF image (.gif) Otro modo de poder editar bitmaps de los fotogramas de un Gif animado una vez vectorizados es mediante la herramienta Lazo 6.8 Uso del papel Cebolla. En general, Flash slo muestra un fotograma de la secuencia de animacin en el escenario. Para facilitar la ubicacin y edicin de la animacin fotograma a fotograma, puede ver varios fotogramas a la vez en el escenario. El fotograma situado bajo la cabeza lectora aparece de color normal, mientras que los fotogramas circundantes que aparecen atenuados; cada fotograma parece estar dibujado sobre hojas de papel traslcido (papel cebolla) colocadas una encima de otra. Los fotogramas atenuados no pueden editarse. El uso del papel Cebolla nos va a permitir ver simultneamente en la ver pantalla el contenido de varios fotogramas a la vez. Gracias a eso podremos saber de un vistazo la posicin relativa que ocupan en cada momento los objetos que contienen los fotogramas y podremos situarlos con mucha mayor precisin en la escena. Para poder ver el comportamiento del papel cebolla, se tiene que cargar una animacin animaci y hacer clic en los iconos de papel cebolla, debajo de la lnea del tiempo. y su modificador .
42
43
Para ver los fotogramas de papel cebolla como contornos, haga clic en el botn Contornos de papel cebolla. Para cambiar la posicin de los marcadores de papel cebolla, arrastre el puntero hasta la nueva ubicacin. En general, los marcadores se mueven de forma conjunta con el puntero del fotograma actual. Para poder editar todos los fotogramas situados entre los marcadores de papel cebolla, haga clic en el botn Editar varios fotogramas. En general, la opcin Papel cebolla slo permite editar el fotograma actual. Sin embargo, puede ver el contenido de cada fotograma situado entre los marcadores y editarlo aunque no se trate del fotograma actual.
UNIDAD VII: Acciones en Flash. OBJETIVO: Crear pelculas interactivas aplicando las acciones del lenguaje Action script.
7.1 Introduccin. Hasta ahora hemos visto cmo se crean las pelculas en Flash de forma automtica y secuencial, es decir, desde el principio hasta el final y sin posibilidad de hacer nada para impedirlo. Sin embargo, Flash permite aadir acciones que facilitarn, entre otras cosas, saltar a otros fotogramas o escenas, utilizar el teclado o el ratn para ejecutar estas acciones y dotar de interactividad a la pelcula. Qu son las acciones? Las acciones son una especie de rdenes que Flash ejecutar cuando el cabezal de reproduccin llegue a ellas. Cada tipo de accin obligar al programa a realizar algo en concreto, por ejemplo, ir de un fotograma a otro, pasar de una escena a otra, pasar de una pelcula a otra, detectar si un fotograma se ha cargado, detener la reproduccin de un clip, etc. Todas estas acciones estn escritas en un lenguaje de programacin especfico y aparecen automticamente en el panel de acciones en forma de scripts cuando son llamadas. Las acciones se pueden colocar en los fotogramas clave y en los objetos, que pueden ser: botones o instancias de clips de pelcula. Las acciones ubicadas en fotogramas clave se ejecutarn cuando el cabezal de la lnea de tiempo pase por ellas.
43
44 Las acciones ubicadas en botones, requerirn de la interactividad con el usuario para que las ejecuten, es decir, se deber pasar el cursor por encima o hacer clic en el botn para que pase algo. Las acciones ubicadas en clips de pelcula se ejecutarn cuando se cargue el clip o cuando se ejecute un fotograma determinado. Los fotogramas que contienen acciones muestran una pequea a en su interior.
7.2 Panel Acciones. El panel Acciones permite crear cdigo ActionScript en un documento de Flash (archivo FLA). Este panel consta de tres paneles, cada uno de los cuales le facilita la creacin y gestin de los scripts. El panel de Acciones, dispone de dos modos de trabajo: con asistente o sin asistente (escribir directamente las funciones). El modo de trabajo con asistente es el que aparece por dafecto y permite definir acciones de forma sencilla a base de seleccionarlas en el recuadro de acciones (caja de herramientas) y rellenando los campos de parmetros (argumentos) que solicitan las diferentes acciones. En este modo, los scripts que aparecen en el recuadro de la derecha no pueden editarse directamente. El modo de trabajo sin asistente permite, escribir y editar acciones directamente en el recuadro de la derecha, como si se escribieran scripts utilizando un procesador de textos. En este caso, no disponemos de campo de parmetros para rellenar ya que todos los parmetros debern ser introducidos por el usuario, pero si que aparecern en determinados momentos una sugerencia para el cdigo que luego se ver. La mecnica de funcionamiento del panel de acciones en modo normal, es sumamente sencilla: En primer lugar deber haber seleccionado un fotograma clave, un clip o un botn, ya que las acciones que definan solo pueden ser aplicadas a esos elementos.
44
45 Seguidamente, deber hacer clic en uno de los doce grupos o categoras de acciones para abrirlo y localizar la accin deseada. Si deja el cursor del ratn parado sobre una accin, aparecer un texto orientativo acerca de su cometido. Si lo desea, puede abrir todos los grupos, pero eso lo obligara a desplazarse por el recuadro mediante las barras de desplazamiento, ya que hay muchas acciones de todo tipo disponibles. Una vez localizada la accin deseada haga doble clic sobre ella y en el recuadro de la derecha aparecer automticamente la expresin script correspondiente a la accin solicitada. En la parte superior derecha de la ventana deber complementar los campos necesarios para que la operacin se ejecute correctamente. Dependiendo de los parmetros que vaya introduciendo en esos campos, la expresin script ir cambiando para reflejarlos. Al final de la edicin de la accin, el recuadro de la derecha mostrar una expresin determinada que ser la que el interprete de script ejecutar y dar como resultado la accin programada.
Caja de herramientas Acciones Se utiliza para examinar una lista de elementos del lenguaje ActionScript ordenados por categoras (funciones, clases, tipos, etc.) y luego insertarlos en el panel Script. Para insertar un elemento de script en el panel Script, haga doble clic en l o arrstrelo directamente al panel Script. Tambin puede aadir elementos del lenguaje a los scripts mediante el botn Aadir (+) de la barra de herramientas del panel Acciones.
45
46 Barras de herramientas del panel Acciones y la ventana Script Las barras de herramientas del panel Acciones y la ventana Script contienen vnculos a las funciones de ayuda para el cdigo que le ayudan a simplificar y agilizar la codificacin en ActionScript. Estas barras de herramientas son distintas en funcin de si utiliza el editor de ActionScript del panel Acciones o el panel Script. En la siguiente imagen se muestran las funciones incluidas en el editor de ActionScript. Las opciones marcadas slo estn disponibles en el panel Acciones. Navegador de scripts Muestra una lista jerrquica de elementos de Flash (clips de pelcula, fotogramas y botones) que contienen scripts. Utilice el navegador de scripts para desplazarse rpidamente por todos los scripts del documento de Flash. Si hace clic en un elemento del navegador de scripts, el script asociado con ese elemento aparecer en el panel Script y la cabeza lectora se desplazar a esa posicin en la lnea de tiempo. Si hace doble clic en un elemento del navegador de scripts, el script quedar fijado (bloqueado en su sitio Panel Script En este panel es donde se escribe el cdigo. El panel Script ofrece herramientas para crear scripts en un editor completo (denominado editor de ActionScript) que incluye aplicacin de formato y revisin de la sintaxis del cdigo, sugerencias o consejos sobre cdigos, colores para el cdigo y otras funciones que simplifican la creacin de scripts. Para ms informacin, consulte Utilizacin del panel Acciones y la ventana Script. En el modo normal la parte central del panel muestra una serie de iconos que forman las funciones de la barra de herramientas.
46
47 Aadir un nuevo elemento al script Muestra todos los elementos del lenguaje que tambin se encuentran en la caja de herramientas de ActionScript. Al elegir un elemento de la lista de categoras de elementos del lenguaje, ste se aade al script. Buscar Busca y reemplaza texto del cdigo ActionScript. Insertar una ruta de destino Slo panel Acciones. Le ayuda a la hora de establecer una ruta de destino absoluta o relativa para una accin del script. Revisar sintaxis Comprueba los errores de sintaxis existentes en el script actual. Los errores de sintaxis se muestran en el panel Salida. Formato automtico Aplica formato al script para lograr una sintaxis de cdigo correcta y mejorar la legibilidad. Puede establecer preferencias de aplicacin de formato automtico en el cuadro de dilogo Preferencias, disponible desde el men Edicin o desde el men emergente del panel Acciones. Mostrar consejos sobre cdigos Si ha desactivado los consejos automticos sobre cdigos, puede utilizar este comando con el fin de mostrar manualmente un consejo para la lnea de cdigo en la que est trabajando. Opciones de depuracin Establece y quita puntos de corte en el script, de forma que, al depurar el documento de Flash, pueda detener y luego avanzar lnea a lnea por el script. Las opciones de depuracin se encuentran ahora disponibles en la ventana Script, as como en el panel Acciones, pero slo para los archivos ActionScript. Esta opcin se desactiva para los archivos de comunicacin de ActionScript y Flash JavaScript Asistente de script Slo panel Acciones. El modo de asistente de script le solicita la introduccin de los elementos necesarios para crear scripts. Referencia Muestra un tema de ayuda de referencia para el elemento del lenguaje ActionScript seleccionado en el panel Script. Por ejemplo, si hace clic en una sentencia import y luego selecciona Referencia, aparece en el panel Ayuda el tema relativo a import. Men emergente Slo panel Acciones. Contiene los diversos comandos y preferencias que se aplican al panel Acciones o a la ventana Script. Por ejemplo, puede establecer los nmeros de lnea y el ajuste de texto en el editor de ActionScript, acceder a las preferencias de ActionScript e importar o exportar scripts. 7.3 Aadir Acciones.
47
48
Las acciones se aaden mediante el panel de Acciones, al cual se puede acceder mediante la opcin Ventana / Acciones o pulsando F9. Si crea pelculas muy elaboradas, con muchas capas y muchas acciones en cada capa, es posible que puedan asignarse sin querer acciones en distintas capas al mismo fotograma. Para evitar eso, es preferible crear una capa dedicada a colocar acciones. De este modo siempre sabr dnde estn las acciones en lnea del tiempo. Nota: Tenga en cuenta que las acciones solo se pueden incluir en los fotogramas clave.
7.4 Action Script. El ActionScript es el lenguaje de programacin que ha utilizado Macromedia Flash desde sus comienzos, y que por supuesto, emplea Flash MX. A grandes rasgos, podemos decir que el ActionScript nos permitir realizar con Flash MX todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una pelcula Flash. Absolutamente de todo. Sin embargo, en estos dos temas slo vamos a ver una pequea introduccin a ActionScript que servir para sentar las bases que permitirn empezar a trabajar con ActionScript. Ensear a programar con ActionScript requerira otro curso completo.Profundizar en el conocimiento de este lenguaje queda por cuenta del lector. Recomendamos seguir la estupenda Ayuda incluida en FlashMX.
Caractersticas generales del ActionScript Como ya hemos comentado, el ActionScript es el lenguaje de programacin propio de Flash. El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que no har falta crear un programa completo para conseguir resultados, normalmente la aplicacin de fragmentos de cdigo ActionScript a los objetos existentes en nuestras pelculas nos permiten alcanzar nuestros objetivos. El ActionScript es un lenguaje de programacin orientado a objetos, tiene similitudes, por tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi, etc., aunque, evidentemente no tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores. El ActionScript presenta muchsimos parecidos con el Javascript; si conoce Javascript, la sintaxis y el estilo de ActionScript le resultarn muy familiares. Las diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaa al Flash MX.
48
49 En la mayor parte de las ocasiones, no ser necesario "programar" realmente, Flash MX pone a nuestra disposicin una impresionante coleccin de "funciones" (de momento entenderemos "funciones" como "cdigo ActionScript que realiza una funcin determinada") ya implementadas que realizan lo que buscamos, bastar con colocarlas en el lugar adecuado.
Como ya se menciono, las Acciones son funciones o instrucciones predefinidas de ActionScript, es decir: Flash MX las crea, y nosotros slo tenemos que usarlas de la manera que se nos indica. No tenemos que definir las funciones ni nada por el estilo, ni siquiera necesitamos saber cmo estn hechas... Lo importante es que estn listas para usar, lo que facilita el uso de este lenguaje de programacin y sobre todo, haga muy rpido comenzar a programar. Al igual que en el caso anterior, explicaremos las Acciones ms importantes. Para una referencia ms completa, recomendamos mirar la ayuda del programa. Definiremos las acciones escribiendo su cabecera (nombre + parmetros con un nombre genrico) para despus explicar qu es cada parmetro. Acciones - Control de Pelcula
Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra pelcula, esto es, para indicar a Flash en todo momento qu fotograma tiene que mostrar, cundo tiene que parar, dnde seguir etc... Vemoslas y lo entenderemos mejor: gotoAndPlay / goto: Esta accin ser, probablemente la que ms useis durante la realizacin de vuestras pelculas. La accin que realiza consiste en mover la cabeza lectora al fotograma que le indiquemos. La cabeza lectora es lo que determina qu fotograma de nuestra pelcula se est reproduciendo en cada momento. Si, por ejemplo, lo movemos del fotograma 1 al 25, lo que veremos instantneamente ser el fotograma 25 y la pelcula continuar reproducindose a partir de ah.
Uso: gotoAndPlay(escena, fotograma): escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre comillas dobles. fotograma: Nmero o nombre del fotograma al que queremos enviar la cabeza lectora. Si es un nombre, debe ir entre comillas dobles, si es un nmero, NO. Ejemplo: gotoAndPlay("Escena2", 7); --> Esta accin lleva la cabeza lectora al fotograma 7 de la escena llamada "Escena2".
49
50
Play: Da comienzo a la reproduccin de la pelcula, generalmente porque algo la ha detenido. Uso: Play(); No tiene Parmetros.
Stop: Detiene la reproduccin de la pelcula. Se puede usar en un fotograma, cuando queramos detenernos en l (porque es un men, por ejemplo), en un botn, (para que detenga la pelcula) etc... Uso: Stop(); No tiene Parmetros.
Acciones - Navegador / Red
Estas acciones tiene diversas funciones, describimos las ms importantes: fscommand: Esta accin, es capaz de ejecutar ciertos comandos muy potentes. Lo ms cmodo es pasar a Modo Bsico (sino estbamos ya) e insertarla, nos aparecer una pestaa con los posibles comandos que admite: - fullscreen : Si se activa pone nuestra pelcula a pantalla completa. Muy til para presentaciones en CD-Rom, por ejemplo. - allowscale: Controla el redimensionamiento de los objetos insertados en la pelcula cuando el usuario estira los bordes de la misma (o de la pgina web en la que se encuentre) Queremos mantener las proporciones? Este comando nos permite controlarlo. - showmen: Si has visto el men que aparece al pulsar el botn derecho del ratn sobre una pelcula Flash, seguro que has pensado en hacerlo desaparecer ... puede que no interese que los usuarios puedan moverse a sus anchas por nuestra pelcula. Ejecutando esta sentencia del modo adecuado (false), podremos ocultarlo. - trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la reproduccin de nuestras pelculas.
Todas estas alternativas, comparten modo de uso, vemoslo: Uso:
50
51 fscommand("comando","true / false") comando: El comando a ejecutar (fullscreen, allowscale, etc...) true / false: Aqu debemos escribir true o false, segn queramos desactivar la opcin o activarla. Ejemplo: fscommand("fullscreen", "true"); -> Activa la pantalla completa.
getURL: Esta accin se emplea para abrir el navegador web y abrir la pgina web que deseemos. Uso: getURL(url , ventana , "variables") url: Direccin web a la que queremos acceder (se abrir una ventana). ventana: Parmetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana actual (_self) en otra nueva (_blank) etc...) variables: Parmetro OPCIONAL, puede haber varios. Si la pgina lo permite (es ASP, PHP etc...) podemos enviarle variables. Ejemplo: getURL("http://www.aulaclic.com", "_blank"); loadMovie / loadMovieNum: Esta accin permite cargar nuevas pelculas Flash o imgenes en nuestra pelcula de forma dinmica (la pelcula se cargar cuando se lo indiquemos, y no antes). Uso: loadMovieNum(url , nivel / destino, variables) url: Direccin absoluta donde est situada la pelcula SWF o la imagen JPEG nivel / destino: Nivel donde cargaremos la pelcula, teniendo en cuenta que el nivel bsico es el 0, luego va el 1 y as sucesivamente. Cada nivel superior se sita delante del anterior y toma el control. Si lo usamos como destino, aqu deberemos introducir el nombre del movieclip donde cargaremos la pelcula o el nombre del marco si estamos cargando un fichero SWF en una pgina HTML con marcos. variables: Parmetro OPCIONAL. Podemos enviar variables. Ejemplo: loadMovieNum("MiPeli2.swf", 0) --> Cargamos la pelcula "MiPeli2.swf" en el nivel principal. No enviamos variables. Cmo Saltar a Fotogramas o a Escenas
51
52 Flash reproduce secuencialmente los fotogramas, si existen escenas definidas, Flash va saltando de una a otra de forma ordenada cada vez que el cabezal de lectura llega al ltimo fotograma de cada escena.
UNIDAD VIII: Publicacin de la pelcula. OBJETIVO: Generar la publicacin de la pelcula para visualizarla en la Web.
8.1 Publicar una pelcula. Antes de aventurarnos a publicar nuestra pelcula para que otros la vean, sobretodo si la vamos a publicar en una pgina web, donde el tamao de descarga es de vital importancia, debemos tener en cuenta los siguientes aspectos:
CONSIDERACIONES EN EL DIBUJO: Aunque los degradados queden muy vistosos, tambin requieren ms memoria, por lo que debemos evitar su uso excesivo, en la medida de lo posible. La herramienta pincel gasta ms memoria que el resto de herramientas de dibujo, por lo que deberamos elegir estas ltimas en la medida de lo posible. Hemos visto que la animacin de lneas es bastante til. Sin embargo el uso de lneas que no sean las definidas por defecto y que usamos en el captulo que hemos comentado, har que el tamao de la descarga aumente. Por tanto evitemos las lneas discontinuas, de puntos. Dibujar las curvas con el menor nmero de nodos posible.
CONSIDERACIONES EN LA ORGANIZACIN: Agrupar los objetos que estn relacionados con el comando Modificar -> Agrupar. Si hemos creado un objeto que va a aparecer varias veces, deberamos convertirlo a smbolo, ya que como hemos visto, Flash lo colocar en la biblioteca y cada vez que quiera mostrarlo, har referencia a una nica posicin de memoria. Ya hemos comentado el mayor tamao de los mapas de bits, lo que hace que debamos minimizar el nmero de apariciones de stos en nuestra pelcula.
52
53 CONSIDERACIONES EN LOS TEXTOS: Hemos podido observar, cuando manejbamos textos, que cuando abrimos el men de tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter". Esto no es una casualidad. Estn colocadas ah para resaltar que estas fuentes ocupan un mnimo de memoria, por lo que se recomienda su uso.
CONSIDERACIONES EN LA ANIMACIN: Utilizar lo ms que podamos las interpolaciones de movimiento y las guas para reducir el nmero de fotogramas clave y el tamao de la pelcula. Evitar el uso de la interpolacin por forma para animaciones de cambio de color, cuando sea posible.
Para poder distribuir pelculas creadas en Flash que la gente pueda ver, son necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga instalado el Reproductor de Flash. Flash nos ofrece varias opciones y funcionalidades para la creacin de un archivo SWF. Estas opciones se pueden ver en el panel de Configuracin de Publicacin, al que podemos acceder mediante el men Archivo -> Configuracin de Publicacin (Pestaa Flash).
53
54 Veamos cules son estas opciones: Versin: Si queremos publicar nuestra pelcula para que sea vista con versiones anteriores de Flash, debemos seleccionar aqu la versin deseada. Orden de Carga: Aqu indicamos el orden en que queremos que se cargue el documento.
Si seleccionamos De abajo a arriba se cargar primero el contenido de la capa inferior (de la capa 1 hasta la ltima capa que tengamos en el documento). Por el contrario, si seleccionamos De arriba a abajo se cargar primero el contenido de la capa superior (de la ltima capa que tengamos en el documento hasta la capa 1). Este comando es importante debido a la propiedad de Flash de ir reproduciendo la pelcula conforme los objetos son cargados. As, en caso de que nos interese que aparezcan antes unos objetos que otros seleccionaremos uno o el otro. Generar Informe de tamao: Esta opcin la hemos usado en el apartado anterior. Si la activamos, se crear un archivo de texto con una relacin detallada del tamao del documento. Proteger Frente a Importacin: Activando est casilla conseguiremos que cuando otro usuario (o nosotros mismos) queramos importarla no podamos o tengamos que introducir una contrasea si se ha escogido alguna. Omitir acciones de Trace: Las acciones de traza se emplean para comprobar el correcto funcionamiento de la pelcula durante la creacin de esta (durante las pruebas). Tambin se consideran trazas los comentarios que insertemos en el cdigo Action Script. Si activamos esta seal, la pelcula creada no los incluir, ocupar menos tamao y ahorraremos tiempo innecesario. Es recomendable cuando se publique la pelcula de un modo definitivo. Depuracin Permitida: Permite que se pueda depurar el archivo SWF. Tambin exige la introduccin de una contrasea ya que se debe tener permiso del creador para Importar el archivo y depurarlo. Comprimir pelcula: Comprime la pelcula al mximo posible. Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos indicado una compresin concreta, aqu podremos determinar su grado de compresin, que determinar a su vez el espacio ocupado en memoria por este tipo de imgenes. A mayor compresin, menos espacio en memoria ocupar la imagen, pero tambin su calidad ser menor. Suplantar configuracin de sonido: Con esto se suplantarn los niveles de compresin seleccionados para cada archivo de sonido de nuestro documento.
54
55
PRCTICAS
Prctica 1 (Glosario) Con apoyo de tu antologa o algn buscador de internet, investiga los siguientes conceptos y escribe en tu libreta el siguiente Glosario. Bitmap. Imagen vectorial. Escenario. Grficos ( Flash). Botn ( Flash). Clip de pelcula. Smbolo (Flash). Fotogramas. Lnea del tiempo. Capas (Flash).
Prctica 2 (Objetos de Flash) Navega en diferentes pginas Web e Identifica los objetos con los que trabaja Flash (Grficos, botones, clips de pelcula), Cpialos y pgalos en un documento de Word y guarda el archivo con el nombre Prctica 2_Objetos. BOTN Ejemplo:
Prctica 3 (Configuracin del rea del trabajo) 1. Abre el programa Flash. 2. Clic en la opcin Modify / Document o CTRL + J. 3. Se abre el siguiente cuadro de dilogo
55
56
4. En la opcin Dimensions cambia a 300 px (width) x 250 px (height). 5. En Background color, cambia a cualquier otro color. 6. Click en Ok.
Prctica 4 (Animacin Fotograma a Fotograma) 1. Abre el programa Flash. 2. Configura el rea de trabajo a tu gusto. 3. Estando en el primer fotograma, selecciona la herramienta valo y arrastre para dibujar un crculo. Si mantiene presionada la tecla MAYUS mientras arrastra, crear un crculo perfecto. 4. Con la herramienta de seleccin , haga clic en el borde del crculo y brrelo con la teclas SUPR (tenga en cuenta el color de relleno). 5. Presione F6 para crear el segundo fotograma clave, que es donde se definir algn cambio en la animacin, ya sea de tamao o posicin. Por lo pronto seleccione el crculo y arrstrelo hacia la derecha o con la tecla de direccin avance 10 posiciones. 6. Haga clic en el tercer fotograma para seleccionarlo, pulse F6 para aadir otro fotograma clave y mueva el crculo otros diez pasos hacia la derecha.
56
57
7. Repita el paso anterior hasta llegar al fotograma 10. 8. Presione la tecla Intro y se reproducir la pelcula. 9. Guarde el archivo en su carpeta de Prcticas de su USB con el nombre de Prctica 4.
Prctica 5 (Pelota Rebotando) En esta prctica debes aplicar el anterior mtodo de Fotograma a Fotograma, para crear una animacin donde el crculo va arriba abajo (pelota rebotando). 1. Abra Flash y Cree un nuevo documento. 2. Dibuje el crculo, qutele el contorno y cambie el color de relleno. 3. Presione F6 y mueva el crculo hacia arriba 10 pasos. 4. Realice el anterior paso hasta crear el efecto de Pelota rebotando. Ver ejemplo. 5. Guarde el archivo con el nombre de Prctica 5.
Prctica 6 PARTE I (Interpolacin de Movimiento) 7. Cree un nuevo documento en blanco. 8. Dibuje un crculo en el lado izquierdo de la escena. Esta ser la posicin en el primer fotograma. 9. Seleccione el primer fotograma, haciendo clic sobre l y pulse el botn derecho para que aparezca el men contextual. Seleccione la opcin Crear interpolacin de movimiento (Create motion tween). De momento no pasa nada. 10. Seguidamente, seleccione el fotograma 30 haciendo clic sobre el y presione F6 para crear el ltimo fotograma clave. Inmediatamente todos los fotogramas intermedios quedarn sustituidos por una flecha.
57
58
11. Ahora con el fotograma 30 seleccionado, seleccione el crculo y muvalo a la posicin final del crculo, que sera hasta la derecha de la escena (tambin puede moverlo con las flechas). Jalar en algn 12. Presione la tecla Intro.
punto
PARTE II (Cambiar color y tamao) A continuacin haremos que el crculo cambie de color y de tamao. 13. Haga clic en el fotograma 10, eso har que se seleccione ese fotograma y aparezca el crculo con el tamao y posicin que le corresponde en ese fotograma. 14. Presione F6 para crear un fotograma clave, esto le permitir hacer algn cambio. La insercin del fotograma clave quedar evidente por la aparicin de la flecha dividida en dos. 15. Con el fotograma seleccionado, utilice la herramienta Transformacin libre (Free Transform) y cambie el tamao del crculo, jalando alguno de los puntos.
16. Tambin en el fotograma 10 puede cambiar el color, para eso, active el panel propiedades que se encuentra en la parte inferior y active la opcin color en Tinta (Tint) y escoja el color.
58
59
17. Presione Intro para observar el resultado. 18. Ahora en el fotograma 20, repita los pasos del 7 al 11. 19. Guarde su prctica con el nombre de Prctica 6 (Interpolacin de movimiento).
Prctica 7 (Interpolacin de forma) 1. En un documento nuevo dibuje un crculo con la herramienta valo y sitelo en el centro de la escena. Elimine su contorno. 2. Seleccione el fotograma 40 y pulse F6 para crear un fotograma clave. 3. En el fotograma 40, seleccione el crculo y brrelo con la tecla SUPR. 4. Ahora active la herramienta Texto , haga clic en la escena para que aparezca el cursor del texto y escriba la palabra crculo. 5. Con la herramienta de texto haga doble clic sobre el texto recin escrito para seleccionarlo. 6. Desde el panel de propiedades, Cambie el tamao, color y tipo de fuente. 7. Seleccione el texto y posicinelo al centro de la escena. 8. Con el texto seleccionado, aplique dos veces la opcin Modify / Break Apart. 9. Seleccione el primer fotograma haciendo clic sobre l y aparecer el crculo. 10. En el panel propiedades aparece la casilla Tween (animar), despligala y elija Shape (forma). Automticamente los fotogramas del 1 al 40 aparecern de color verde con una flecha.
11. Presione Intro para reproducir la pelcula y observe la interpolacin de forma.
59
60 PRCTICA 8: Interpolacin de Forma para un texto. 1. Cree un documento nuevo. 2. En la parte central de la escena escriba el texto Nuevo Flash con un tamao de 60 puntos y la letra que prefiera. 3. Ahora seleccione el fotograma nmero 30 y pulse F6 para crear el segundo fotograma clave. El texto escrito tambin aparecer en este nuevo fotograma. 4. Con el fotograma 30 seleccionado, active la herramienta de texto y arrastre sobre el texto escrito para seleccionarlo. Brrelo y escriba el texto fantstico en otro color y con otro tipo de letra, centre el texto. 5. Ahora seleccione el texto fantstico del fotograma 30 y elija dos veces la opcin modificar/ separar para convertir el texto en un objeto editable. Recuerde que la interpolacin de forma trabaja con objetos no agrupados. 6. Ahora seleccione el primer fotograma y del mismo modo separe dos veces el texto Nuevo flash para aplicar la interpolacin de forma. 7. Finalmente, seleccione el primer fotograma y en la casilla animar (tween) del panel propiedades, seleccione Forma. 8. Pulse CTRL + Intro o Intro.
Prctica 9 (Logotipo Lasalle) En esta prctica se aplica el procedimiento para crear interpolacin de forma donde transforme un logotipo de la Salle al texto De la salle. El logotipo, lo puedes bajar de internet, pero recuerda desagruparlo y separarlo (seleccionas el logotipo, Modify / break apart)
Wx t ftx
Prctica 10 (Juego Ping Pong) Crear la simulacin del juego ping pong, usando fotograma a fotograma. En el primer fotograma dibujar el escenario. A partir del segundo fotograma, hars los movimientos de la pelota y porteras. Ver ejemplo.
60
61
Prctica 11 (Animacin Mixta en una sola capa) Crear una animacin que tenga por objetivo Promocionar un valor humano (Amistad, honestidad, respeto, etc.), aplicar los 3 tipos de animacin, la duracin debe ser de por lo menos 10 segundos, debes combinar colores y tomar en cuenta los distintos procedimientos. Ejemplo.
Prctica Pelota rebotando (Capa gua) Creacin de la pelota. 1. Dibuje un crculo con contorno, con un grueso del no. 3 y sin relleno. Con la herramienta lpiz trace unas lneas verticales dentro del crculo para dividirlo en 3 partes (tambin puede usar una lnea y modificarla a curva). 2. Seleccione cada una de las secciones de la pelota y aplique el relleno con la herramienta .
61
62 3. Seleccione todo el dibujo y agrpelo con CTRL + G o Modify, Group.
Crear la interpolacin de movimiento 4. Haga clic con el botn derecho sobre el primer fotograma y la opcin Crear Interpolacin de movimiento (motion tween). 5. Seleccione el fotograma 40 y pulse F6 para convertirlo en fotograma clave. Con esto quedar completada la interpolacin aunque, de momento, no se ha definido ningn movimiento. Creacin del trayecto para la pelota (Capa Gua) 6. Haga clic en el icono y aparecer la capa gua por encima de la capa actual. 7. Mediante la herramienta lpiz y el modificador
Suavizar trace un camino, el cual deber seguir la pelota cuando aparezca en la escena, es decir, una serie de rebotes, cada uno de los cuales debe ser menor que el anterior hasta que ya no bote ms. No importa que el trazo rebase los lmites de la escena. Colocacin de la pelota en los lugares adecuados. 8. Revise que tenga activada la opcin Ver, Ajustar a objetos (View, Snap to objects). 9. Seleccione el primer fotograma de la capa de la pelota y con la herramienta seleccin arrastre la pelota hasta que su punto central se encaje con el principio de la lnea. 10. Seleccione el ltimo fotograma de la misma capa y arrastre igualmente la pelota hasta que su centro coincida con el final de la lnea trazada. 11. Reproduzca la pelcula con CTRL + Intro y ver el recorrido de la pelota en el camino trazado, simulando una serie de botes. Prctica Capa mscara El Procedimiento a seguir en este caso ser: Dibujar o escribir lo que se desea enmascarar en la capa normal. Crear una capa de mscara. Dibujar en la capa de mscara el objeto por el cual se va a observar la capa normal. Activar el efecto de mscara.
62
63
1. Con la herramienta Texto escriba la palabra FLASH MX, cambie el tipo de letra y el tamao de letra, por lo menos de 80 puntos. Seguidamente crearemos la capa de mscara. 2. Pulse en para crear una nueva capa normal que quedar automticamente por encima de la capa anterior. 3. Haga clic con el botn derecho sobre la nueva capa y en el men contextual seleccione la opcin Mscara (Mask). Automticamente, la nueva capa mostrar el smbolo identificativo de las capas mscara y la capa normal que tiene por debajo mostrar a su vez el smbolo indicativo de que se trata de una capa vinculada a la capa de mscara que tiene por e encima. En la capa mscara, se crear un dibujo, en este caso un crculo, que es por donde se observar la capa normal, desbloquee la capa y dibuje el crculo con un dimetro mayor que el texto. Los contornos son ignorados porque so tiene en solo cuenta los rellenos y no las lneas. Site el crculo al principio del texto, de tal forma que slo se ver las primeras letras. Finalmente revise que est activada la mscara y presione CTRL + Intro. Se observar nicamente las letras que se cubrieron con el crculo. Ahora en la capa de mscara, crea una interpolacin de movimiento hasta el fotograma 40, para que recorra la capa de mscara toda la palabra.
4.
5. 6. 7. 8.
9. En la capa texto presione en el fotograma 40 F5 para que el texto no desaparezca. 10. Presione CTRL + Intro para observar el resultado. sione
PRCTICA 12 (SMBOLOS SMBOLOS) . a) Dibujar 3 objetos y convertirlos en smbolos grficos. Para convertir en smbolo: a) Una vez dibujado, seleccione el objeto grfico y agrpelo. b) Presione F8 o seleccione Insert , Convert to symbol
63
64
En cualquier caso, aparecer el siguiente cuadro:
c) Escriba un nombre al smbolo. d) Seleccione Graphic. e) Haga clic en Ok. El smbolo grfico se almacenar en la biblioteca de smbolos, para ver la biblioteca presione F11. b) Con los 3 smbolos crea una animacin usando capas e interpolacin. Puedes aplicar Capas gua o capas de tipo mscara. c) Crear un smbolo botn. a) En nuevo documento, seleccione la opcin Insertar/ Nuevo smbolo. En la ventana que se abrir asigne un nombre para el botn y active la opcin botn. b) Acepte y la ventana de la escena se convertir en la ventana de edicin del botn. Como siempre, la parte superior de la ventana de la lnea del tiempo mostrar el nombre de la escena principal y adems, el nombre del botn que se est editando ahora. c) Observe como aparecen nicamente 4 fotogramas. Pues bien, los tres primeros se corresponden con los 3 estados posibles del botn (reposo, encima, pulsado). El ltimo fotograma permite definir el rea activa del botn. d) As pues, para definir un botn lo que hay que hacer es definir el aspecto que debe tener en cada uno de los casos citados. Esta operacin resulta similar a la que se vio cuando se hizo una pelcula fotograma a fotograma. e) Entre a la ventana de edicin de botones y dibuje un crculo con el tamao, aspecto y color que desees para la posicin de REPOSO (Up) del botn. Sitelo centrado con la pequea cruz que aparece en el centro de la pantalla. f) Ahora, seleccione el segundo fotograma haciendo clic sobre l y pulse F6 para crear un nuevo fotograma clave. El crculo del fotograma anterior, se repetir. g) Puede sustituir el dibujo o simplemente cambie el color. El cambio aparecer cuando pase el cursor del ratn SOBRE (Over) el botn. h) Seleccione el tercer fotograma y pulse F6 para crear un fotograma clave en esa posicin. Aqu se hace lo mismo, se debe definir el aspecto cuando haga clic 64 Aplicaciones Grficas II- FLASH
65 sobre el botn (PULSADO, Down). Puede modificar el crculo por otra cosa o simplemente cambie el color. i) Con la definicin de los 3 primeros fotogramas el botn ya funcionar. El cuarto fotograma est destinado a definir el rea til del botn, ya que puede interesarnos que slo una parte de la imagen del botn resulte activa. Por otra parte, habr que asignarle al botn la accin que queremos que se reproduzca cuando se haga clic sobre l. Eso se definir una vez colocado el botn en la escena principal, seleccionndolo y mediante la ventana de acciones de fotograma. (Se ver ms adelante) j) Presione o haga clic en Scene 1 (Escena 1), para volver a la escena. k) Ahora arrastre el botn de la biblioteca (F11) hasta la escena principal. Los smbolos botn aparecen precedidos por el cono . l) Presione Ctrl + Intro y observe como cambia el botn al pasar o hacer clic sobre l. m) Guarda el archivo con el nombre Botn 1 Nota: Otra forma de crearlo es primero dibujar el grfico para el botn, convertirlo en botn con F8 y luego entrar a la ventada de edicin EDIT/ Edit Symbols. d) Aplica el procedimiento anterior y Crea un Smbolo botn que se llame CARITAS, el cual presente las siguientes caractersticas, cuando termines guarda el archivo con el nombre Botn 2. Posicin del ratn REPOSO (Up)
Posicin del ratn SOBRE (Over)
Posicin del ratn PULSADO (Down)
65
66 PRCTICA 13 (BOTN ANIMADO) Ahora, vamos a darle animacin a las 3 posiciones del botn anterior. 1. Abre el archivo que contenga la prctica No. 4 (Botn 2). 2. Una vez abierto el archivo, si tienes el botn de la Carita en la escena principal, seleccinalo y con el botn derecho, elije EDIT ,para que se abra la ventana de Edicin y cambies el aspecto del botn como se observa en la imagen de abajo. NOTA: En caso de que no se encuentre en la escena principal, se debe abrir la biblioteca con F11. 3. Para dar ANIMACIN AL BOTN, seleccionas el botn en la posicin donde se le va a dar animacin, es decir, seleccionas el fotograma UP. Ver imagen,
4. Clic con el botn derecho y elije Convertir a Smbolo. 5. En el cuadro haz clic en la opcin Nombre, escribe CLIP REPOSO y en Comportamiento, elije Clip de pelcula. 6. Dar doble clic en el botn, para ir a la ventana de Edicin del Clip de pelcula o Clic derecho, EDIT. Aparecer la lnea del tiempo del CLIP de Pelcula como si estuvieras en la escena principal. Ver imagen:
66
67
8. Aqu se le aplican las animaciones al grfico, ya sea Fotograma a Fotograma o INTERPOLACIN. NOTA: Te sugiero apliques Fotograma a Fotograma.
PRCTICA 14 (GIFS) a) Importar un Gif animado de la Web y vectorizarlo para poder hacerle cambios a travs de Flash. b) Guardar el gif original y la copia que tu realices con el nombre de PRCTICA_6.
PRCTICA 15. Aplicando Animacin fotograma a fotograma, realiza un Gif animado con motivo ECOLGICO.
67
68 Proyecto 1: Creacin de un anuncio publicitario con Flash. Objetivo: Aplicar las tcnicas y herramientas de animacin vistas en clase para crear un anuncio publicitario de una empresa / producto, el cual sea llamativo para el usuario. Para su evaluacin, se tomarn en cuenta los siguientes puntos: 1. Que cumpla objetivo. 2. Creatividad. 3. Calidad en los smbolos grficos creados en flash. 4. Aplicacin de capas normales (usar ms de una). 5. Aplicacin de capa gua o capa mscara. con el 6. Aplicacin de animacin por interpolacin de movimiento o forma. 7. Excelente combinacin de colores y fuentes. 8. Tiempo mnimo de la pelcula de 20 segundos. 9. Entregarlo en tiempo y forma.
10. Presentar avances del trabajo en clase prctica en tu USB.
Nota: Cabe mencionar que el anuncio debe ser considerado con un enfoque positivo. Nota: Revisar prcticas del 2 periodo para capas g ua y capas mscara.
Referencias de pginas Web: http://www.adrformacion.com/cursos/flash8/leccion3/tutorial10.html http://www.creaformacion.com/images/libros/Flash_1.pdf http://www.aulaclic.es/flashMX/f_flash.htm http://www.estudiargratis.com.ar/webmaster/curso_flash.htm http://usuarios.multimania.es/paginadav/
68

Antologia Flash

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Antologia Flash

Uploaded by

Copyright:

Available Formats

1

Colegio la Salle de Veracruz

No. de Lista: _____

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

UNIDAD I: Elementos bsicos de Flash.

Aplicaciones Grficas II- FLASH

Elementos del entorno de trabajo Barra de Men

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

UNIDAD II: Mis primeras animaciones.

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

UNIDAD III: El dibujo en Flash.

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Objeto SIN seleccionar

Objeto con Objeto con el BORDE seleccionado seleccionado

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II- FLASH

UNIDAD VI: Smbolos y animacin interactiva.

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Elementos de la ventana de biblioteca

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II FLASH II-

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Acciones - Navegador / Red

Todas estas alternativas, comparten modo de uso, vemoslo: Uso:

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH

Aplicaciones Grficas II- FLASH