Leccin

Flash

Introduccin y conceptos bsicos

En esta leccin podrs:

Disear animaciones, videos y sonidos creando recursos tipo multimedia.

Y sers competente en:

El diseo de pelculas o animaciones por computadora empleando parte del desarrollo de edicin bsica para la preparacin de un desarrollo web.

Introduccin
as nuevas tecnologas web forman parte esencial en la mayora de consultas L de informacin en Internet, sin embargo; si stas no estn diseadas de una forma que sean atractivas para los usuarios, el producto pierde su inters. Por ello,

es necesario que dichas tecnologas tengan elementos interactivos multimedia. Adobe Flash es un software que permite desarrollar aplicaciones interactivas tipo multimedia de gran calidad y que pueden incluirse en diseos web.

57

Desarrollo Flash
Es una tecnologa para disear animaciones grficas vectoriales independientes a cualquier navegador. El software Flash Professional CS6 es lder en la creacin de contenidos de animaciones sobre fotogramas interactivos tipo multimedia. Flash permite crear diseos que se pueden visualizar en computadoras, telfonos celulares, tabletas y televisores. Dicha tecnologa es distribuida por la suite de Adobe System; su uso es de tipo comercial al igual que Photoshop. Por lo que es necesario comprar una licencia para poder usarlo indefinidamente; no obstante, en la pgina oficial de Adobe System se puede descargar y probar totalmente gratis, por un periodo de 30 das.

6
Flash

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Puedes ingresar al siguiente enlace va Internet para descrgalo fcilmente. http://www.adobe.com/es/downloads/

Debers poner atencin en lo que se te pide; el producto estar a prueba hasta que decidas adquirir la licencia original o bien salga otro producto ms actualizado. La elaboracin de una animacin por computadora es todo un proceso de creatividad; por lo que nuestra imaginacin es un recurso primordial. Por otro lado, tener paciencia para dominar las herramientas para su elaboracin es fundamental; si bien no es una tarea difcil, el tiempo que nos llevara su estructura puede variar segn la complejidad del diseo y nuestra experiencia con la herramienta.

58

Para crear una animacin en Flash, te sugerimos que tomes en cuenta las siguientes recomendaciones: Planifica la actividad a desarrollar. Define previamente las imgenes que utilizars. Organiza todos los elementos que requerirs para la actividad. Analiza qu tipo de efectos especiales sern necesarios.

Animaciones
Una animacin es un proceso que se utiliza para crear una sensacin de movimiento a imgenes o dibujos y se considera un recurso de tipo multimedia. En otras palabras es el resultado de tomar una serie de imgenes individuales y agruparlas en una secuencia temporizada de forma que den la impresin de un movimiento continuo. Es una simulacin de movimiento producida mediante imgenes que se crearon una por una; al proyectarse sucesivamente estas imgenes (llamados cuadros) producen una ilusin de movimiento, pero el movimiento representado no existi en realidad. Se basa en una ilusin en la que intervienen la persistencia de la visin y el fenmeno phi. El fenmeno phi es una ilusin ptica de nuestro cerebro que nos hace percibir movimiento continuo en donde hay una sucesin de imgenes de forma consecutiva. Observa las siguientes figuras detenidamente.

6
Flash

Te das cuenta cmo nuestro cerebro percibe movimiento en donde no lo hay? Increble,verdad? Recuerda: - Una animacin es una sucesin de fotogramas. - Un fotograma representa el contenido de una pelcula en un instante de tiempo.

Una animacin pertenece al medio del cine y la televisin y guarda una estrecha relacin con todo tipo de artes visuales tales como el dibujo, pintura, fotografa y escultura.

Introduccin y conceptos bsicos

Secundaria 3

59

Acceso al programa Flash

Para comenzar a trabajar con Flash: Debers ejecutar el cono de acceso directo que estar depositado en el escritorio de Windows haciendo dos clics simultneos sobre l.

6
Flash

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Recuerda que si no estuviera el acceso directo en el escritorio, escribe el nombre Flash en el men inicio de Windows, apartado Buscar programas y archivos. Conforme se escribe el nombre, presentar en el men de forma automtica el programa y podrs ejecutarlo. Despus de ello se presentar la ventana del asistente de Flash.

60

Para comenzar un proyecto nuevo debers hacer clic en la ventana del asistente en Crear nuevo ActionScript 3.0 o si lo prefieres ejecuta del men Archivo la opcin Nuevo, debe estar seleccionada la opcin ActionScript 3.0, da clic en Aceptar.

6
Flash

La ventana de asistente de Flash nos apoya en algunas actividades iniciales de trabajo y siempre se presentar al inicio, sin embargo puedes hacer que ya no se presente haciendo un clic en Inmediatamente se presentar la ventana de trabajo de Flash.

Introduccin y conceptos bsicos

Secundaria 3

61

Descripcin de la ventana de trabajo de Flash

6
Flash

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Creacin de una animacin bsica

Comencemos a elaborar nuestra primera prctica en la que desarrollaremos una animacin donde un objeto fotograma tenga el efecto de una pelota en rebote. Como primer paso dibujaremos un crculo dentro del rea del Escenario. Para hacerlo, dividiremos la animacin en dos momentos. En la primera mitad de la animacin el crculo bajar desde su posicin inicial hasta la indicacin correspondiente; y en la segunda mitad, el crculo volver a subir poco a poco haciendo el efecto del rebote de una pelota. Vamos a empezar: En la barra de herramientas haz dos clics sobre el cono Herramienta rectngulo (R).

62

Ahora haz clic en la Herramienta valo (O).

Mueve el puntero del ratn al rea del Escenario.

6
Flash

Haz clic sobre el Escenario en la esquina superior izquierda y arrastra el ratn hasta tener un crculo como se muestra en la pantalla. Una vez definido el tamao, suelta el ratn.

Dirgete a la lnea del tiempo. Ah encontrars las diversas capas que formarn la animacin, recuerda que cada capa representa un elemento y estos se trabajan de manera independiente. Haz clic con el botn derecho encima del punto negro que se encuentra del lado derecho de la capa 1. En el men contextual que se despliega, da clic en la opcin Crear interpolacin de movimiento.

Introduccin y conceptos bsicos

Secundaria 3

63

Se desplegar una opcin llamada Convertir seleccin en smbolo para interpolacin. Haz clic en el botn Aceptar.

6
Flash

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Ahora vers un color azul sobre la lnea del tiempo que llega aproximadamente al nmero 25. Al mismo tiempo nuestro dibujo se habr sealado como se muestra en la pantalla:

Ahora, utilizaremos la lnea del tiempo para marcar las distintas posiciones que tendr el crculo. Para ello: Ubica el puntero del ratn al final de la cinta azul en la Lnea del tiempo y haz clic derecho.

64

En el men que se despliega, elige Insertar fotograma clave/Posicin.

6
Flash

Crearemos la primera mitad de la animacin, que como vimos al inicio, consistir en que la pelota baje desde su posicin inicial. Para ello: Coloca el ratn en la Lnea del tiempo a la mitad de la cinta azul y haz clic.

Haz clic sobre la Herramienta Seleccin (V).

Introduccin y conceptos bsicos

Secundaria 3

65

Haz clic sobre el crculo que has puesto en el escenario y sin soltarlo arrstralo de manera vertical hacia la parte baja del Escenario como se muestra en la imagen.

6
Flash

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Nota que aparecer una lnea verde indicando la trayectoria que seguir el objeto.

Ahora definiremos la segunda mitad de la animacin, que consiste en el regreso de la pelota:

En la segunda mitad de la Lnea del tiempo, slo haz clic en las posiciones que se te indican, una a una, como en los esquemas siguientes.

66

Parecer que en la Lnea del tiempo no pasa nada, pero si observas el Escenario, con cada clic que has dado, el crculo ha ido regresando a su posicin original, de manera que al final tu pantalla luce as:

6
Flash

Ahora vamos a ver cmo qued nuestra animacin. Para ello: Haz clic en el botn Reproducir que se localiza en la Barra de reproduccin ubicada en la parte inferior de la ventana principal de Flash.

Puedes volver a oprimir el botn Reproducir las veces que quieras para observarlo. Puedes aumentar o disminuir la velocidad de la animacin. Dicha velocidad se mide en cuadros por segundo o fps por sus siglas en ingls (frames per second). En nuestro caso, por default aparecen 24 fps, que es el formato ms utilizado. Para este ejercicio, vamos a disminuir los cuadros por segundo. Para hacerlo:

Introduccin y conceptos bsicos

Secundaria 3

67

Haz clic en Velocidad de fotogramas y cambia el nmero 24 por el nmero 10. Despus reproduce la animacin.

6
Flash

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Si deseas que tu animacin se repita constantemente, slo haz clic en el botn Reproducir Indefinidamente.

Los productos de Adobe System en el caso particular de Photoshop y Flash emplean los mismos conceptos en relacin a su terminologa como sus mtodos abreviados de operacin en la manipulacin de objetos e imgenes, por lo que se hace ms fcil su manejo.

Grabacin y apertura de archivos

No se olvide que debemos guardar nuestros trabajos para que, en otras ocasiones, podamos modificarlos si fuese necesario. La extensin que se genera de trabajo para identificar la procedencia del archivo en Flash es (.FLA), y como seguro ya te ests imaginando, existe la posibilidad de que se asigne un formato diferente si el usuario la necesitara. Para guardar el archivo: Haz clic en Archivo de la barra de men opcin Guardar Como.

68

Determina el lugar en que deseas grabar tu trabajo, te sugerimos que uses tu memoria USB en una carpeta definida anteriormente. Guarda el archivo con el nombre Prueba. La extensin que asignara ser (.FLA) de forma automtica. Haz clic en el botn Guardar.

6
Flash

Una vez que has guardado el archivo, observars que en la esquina superior derecha del rea de trabajo se coloc la pestaa Prueba. Las pestaas de trabajo son simplemente una forma de mantener varias Escenas abiertas simultneamente por medio de una cejilla que podemos organizar y cambiar fcilmente.

Una Escena es el desarrollo de fotogramas que crean una animacin.

Podrs cerrar la pestaa dando un clic en el tache que se presenta a la derecha o bien puedes dejarla junto con otra nueva tarea.

Introduccin y conceptos bsicos

Secundaria 3

69

Si deseas abrir el archivo para modificarlo existen diferentes formas:

Opcin 1: Haz clic en Archivo de la barra de men seguido de Abrir Recientes; elige alguno de los nombres que se presentan en la lista y de forma automtica abrir. Opcin 2: Otra forma para abrir los proyectos es dirigirte a Abrir archivo de la barra de men opcin Abrir, sin olvidarte que debers definir la ubicacin de tu archivo. Opcin 3: Si prefieres puedes ejecutar el archivo dando dos clics en el lugar donde ste se ubique; abrir de forma automtica ejecutando primero a Adobe Flash y despus visualizando el contenido del archivo. Slo debes asegurarte que Adobe Flash est instalado en tu equipo para que esta opcin funcione.

6
Flash

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Recuerda que, al igual que en Photoshop, en Flash puedes abrir o exportar archivos de imgenes (JPEG, GIF, BMP, etc.) para crear animaciones si lo requieres.

Adobe Flash utiliza un lenguaje llamado ActionScript. Se dice que este lenguaje est orientado a objetos, ya que permite ampliar las funciones del programa en sus paneles de diseo; creando animaciones o pelculas con gran contenido interactivo. Otra de las extensiones que genera Flash es (.SWF) y es utilizada generalmente para guardar archivos que se utilizarn en pginas web que sern visualizadas en un navegador a travs de Internet. Este tipo de archivos puede ejecutarse en la web y ser manipuladas por otro producto llamado Adobe Dreamweaver, especializado en el desarrollo de sitios web multimedia y que ms adelante estudiaremos.

Creacin de archivos swf interactivos para web

Como recordars Flash cuenta con la posibilidad de crear animaciones multimedia; adems de crear pelculas que puedan ser vistas en una pgina web. Para hacerlo es necesario desarrollar una animacin y posteriormente convertirla en pelcula para que pueda ser visualizada en cualquier navegador de Internet mediante Adobe Flash Player. Adobe Flash Player es un programa que permite reproducir archivos cuya extensin sea .SWF (Shockwave Flash), que comnmente se utilizan para visualizar grficos vectoriales y animaciones multimedia en la web. Dicho programa es gratuito. Puedes descargarlo en la misma pgina de Adobe, con l podrs visualizar la gran mayora de videos, pelculas y animaciones multimedia en tu navegador web. Desarrollemos un ejercicio donde iniciaremos con una animacin y concluiremos con el diseo de una pelcula que podr ser utilizada en cualquier pgina web. Inicia una nueva Escena de trabajo en Adobe Flash.

70

Ve al men Archivo y da clic en la opcin Importar/Importar a escenario y busca el archivo Carrito en la carpeta de Materiales de tu disco.

Recuerda que puedes arrastrar la imagen desde la ventana en que se encuentra hacia la ventana de la Escena de Adobe Flash.

6
Flash

Selecciona la Herramienta Transformacin Libre (Q).

Introduccin y conceptos bsicos

Secundaria 3

71

Modifiquemos el tamao del Carrito de manera proporcional.

6
Flash

Recuerda que los mtodos abreviados de las teclas que usaste en Photoshop se pueden aplicar en este caso. Tamao a escala o proporcionado [Shift] + [Alt].

Haz clic sobre el Carrito. Se pondr un marco alrededor de la imagen, con 8 nodos con los cuales podrs modificar la imagen.

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Utilizando los nodos, mueve y modifica el tamao a escala del carrito para que quede como se muestra en la imagen:

Utiliza lo que has aprendido hasta el momento para hacer que el carrito se desplace hacia la derecha. Como no es necesario que el carrito regrese, no debers dividir la cinta azul en dos.

Recuerda que puedes consultar las pginas anteriores.

Modifica la velocidad de la animacin a 10.

Tambin marca el botn para que se repita indefinidamente.

72

Notars que lo que se repite varias veces es solo un fragmento de la trayectoria del carrito. Esto puede corregirse modificando la Lnea del tiempo.

Observa que sobre la cinta azul apareci una cinta gris que es ms corta que la cinta azul, esta es la razn por la cual se repite solo un fragmento de la trayectoria. Haz clic sobre el extremo izquierdo de la lnea gris y arrstralo hasta el borde izquierdo. Haz lo mismo con el borde derecho.

6
Flash

Ejecuta la animacin.

Antes

Despus

Para detener la repeticin, solo haz clic en el botn de Pausar pulsa la tecla [Esc].

o bien

Archivos interactivos SWF

Como mencionamos los archivos cuya extensin sean (.SWF) (Shockwave Flash) comnmente se utilizan para visualizar grficos vectoriales y animaciones multimedia en la web. De acuerdo al ejercicio desarrollaremos nuestra pelcula. Antes de continuar, guarda la animacin del carrito en tu memoria USB; asgnale el nombre Animacin Carrito y la extensin (.FLA).

Introduccin y conceptos bsicos

Secundaria 3

73

Como siguiente paso haz clic en el men Archivo, selecciona la opcin Exportar/ Exportar pelcula.

6
Flash

Introduccin y conceptos bsicos

Procesos fundamentales

Secundaria 3

Asigna la ubicacin que tendr tu pelcula, escribe el nombre AnimacinCarrito y selecciona la extensin (.SWF)

De acuerdo a lo anterior se presentar una ventana por unos segundos denominada Exportando pelcula SWF.

Sal por completo de Adobe Flash y busca el archivo Animacin Carrito.SWF que se debi generar de la pelcula correspondiente en el equipo.

74

El cono que se presentar de la pelcula que desarrollaste, ser de acuerdo al navegador de Internet que tengas instalado en tu equipo. Si no presentara ninguno y solo se viera un cono de una hoja con la esquina doblada, tendrs que seleccionar la aplicacin que desees que lo ejecute, en este caso ser Internet Explorer.

Ejecuta el archivo.

6
Flash

En caso de que aparezcan notificaciones en la ventana de Internet Explorer, debes confirmarlas. Recuerda que debes tener instalado Adobe Flash Player, pues es el programa que te permite reproducir archivos cuya extensin sean (.SWF). Finalmente, podrs observar la animacin que elaboraste.

Para saber si tienes el programa Adobe Flash Player instalado, slo ejecuta el archivo de tu animacin y Flash te notificar la ausencia del mismo invitndote a instalarlo; de lo contario slo se ejecutar la animacin sin mayor problema.

Introduccin y conceptos bsicos

Secundaria 3

75

Resumen Resumen
Flash es un software para el diseo de animaciones y videos multimedia, su uso es comercial y se debe de comprar una licencia para poder usarlo indefinidamente. Existe una versin de prueba que puedes utilizar por 30 das. Una animacin es un proceso para establecer movimiento a imgenes. Una animacin es un proceso continuo de fotogramas. La extensin que genera una aplicacin en Flash es (.FLA). Al igual que Photoshop se utilizan pestaas de trabajo o Escenas dentro de la ventana principal, dando espacio suficiente para mantener varios trabajos simultneos abiertos. En Flash existe un asistente de inicio para ayudar al usuario a determinar qu desea hacer. Las partes principales de la ventana de Flash son: Barra de men y herramientas, Paneles, rea de trabajo, Escenario, Lnea del tiempo, Capas. Por lo regular los productos Adobe System trabajan con metacomandos para ayudar al usuario a manipular imgenes y eficientar la operacin del programa. Flash utiliza un lenguaje llamado ActionScript para ampliar las funciones en los paneles de diseo para la creacin de animaciones y pelculas. La extensin (.SWF) tambin puede ser utilizada por Flash para la creacin de pelculas que se utilicen en Internet. Existe la posibilidad de crear otros tipos de archivo en el diseo de pelculas de animacin como son: (.GIF), (.MOV), (.AVI), (.JPEG) y (.PNG).

Tareas
Tomando el ejercicio anterior del Carrito, ahora debemos incluirle el fondo de una carretera. En la carpeta de Materiales de tu disco, localiza la imagen de fondo carretera.jpeg. Accede al programa de Flash y llama de nuevo tu animacin del carrito hecha anteriormente. Agrgale el fondo a dicha animacin. Al finalizar graba en tu memoria USB tu diseo con el nombre Carrito2.Fla as como tambin Carrito.SWF Muestra el resultado final a tu profesor.

76

Cuestionario
1.- Qu es Flash? 2.- Qu es una animacin? 3.- Es lo mismo una pelcula que una animacin? 4.- Define qu es un fotograma. 5.- Cmo se llama el lenguaje que ayuda a Flash a mejorar las animaciones y pelculas?

Prctica
Elaboremos una Pelcula de acuerdo a nuestras habilidades. Busca un paisaje en Internet que contenga un cielo con nubes. Copia el paisaje en tu memoria USB. Preferentemente tu imagen debe contar con una resolucin mnima de 450x300 pp aproximadamente. Ahora busca una fotografa, imagen o dibujo de un avin. Cpiala tambin a tu memoria. Ahora crea una animacin donde el Avioncito tenga movimiento como el carrito de la prctica anterior. Utiliza el fondo del cielo que buscaste al incio. Al terminar la animacin Exprtala como SWF. Haz un buen diseo, detllalo bien y gurdalo con extensin FLA. Al final ejecuta el archivo SWF.

77