Escuela Politcnica Nacional

Introduccin a la Multimedia Adobe Flash CS4

Ing. Adrin Zambrano
Sergio Chamorro David Guzmn Juan Regalado Hoover Ziga
Sep 2009 - Ene 2010

ESCUELA POLITCNICA NACIONAL FACULTAD DE INGENIERA ELCTRICA Y ELECTRNICA

INTRODUCCIN A LA MULTIMEDIA
ADOBE FLASH CS4
INTRODUCCION PRIMER PASO: ENTORNO DE TRABAJO

Cuando abrimos el programa, lo primero que encontramos es la pantalla en blanco, lo que llamamos comnmente "STAGE", el escenario, la pantalla donde vamos a realizar toda la animacin. Por arriba podemos observar, la lnea de tiempo que est compuesta por FRAMES (cuadros) y LAYERS (capas).

Automticamente, se nos abren varias ventanas, donde podemos tener al alcance de la mano todas las posibilidades y necesidades para nuestro diseo en flash. La lnea de tiempo nos sirve para darle el tiempo necesario a la animacin que vamos a disear; la sumatoria de frames equivale a los segundos que queremos que dure nuestra animacin. En forma predeterminada, el Flash viene seteado con una velocidad de 12 cuadros por segundo. En forma particular les digo que uno se gua por varios elementos para que sea eficiente una pelcula: si el objetivo es, por ejemplo, utilizarla en una pgina web, primero hay que determinar si ser larga o corta, y luego, que sea DIVERTIDA Y AGRADABLE para el observador, y no que ste diga: "Qu largo que est esto". Otro factor a tomar en cuenta es el peso de la pelcula: ms pesado, ms tarda en bajar. (Tenemos que tener en cuenta que estas pelculas bajan a la carpeta de temporales del explorador que estemos utilizando para poder ser vistas). En la parte izquierda de la ventana podemos observar (ver figura anterior) la paleta de herramientas que vamos a utilizar para lograr nuestra animacin. Aquellos que ya han utilizado algn programa grfico reconocern todas las herramientas, a aquellos que no, les pido que sin miedo comiencen a "jugar", a interiorizarse ms con estas herramientas, total, ante la duda, comienzan otro nuevo stage y listo. Al utilizar las herramientas Lpiz, Lnea, valo, Rectngulo o Pincel, para dibujar una lnea sobre otra lnea o forma pintada, las lneas que se solapan se dividen en segmentos, en los puntos de interseccin. Puede utilizar la herramienta Flecha para seleccionar, mover y remodelar cada segmento independientemente. Las lneas que se solapan creadas con la herramienta Pluma, no se dividen en segmentos en los puntos de interseccin,sino que permanecen intactas.

Un relleno; el relleno con una lnea que lo corta; los dos rellenos y tres segmentos de lnea creados por la segmentacin.

EL ESCENARIO DE FLASH

Circulo dibujado con la herramienta ovalo (Circle Atajo > O) en el fotograma 1 El escenario es aquel rea donde se dibuja, diagrama y crea todo el contenido de los fotogramas, y por lo tanto, de la pelcula. Este contenido se puede crear con las Herramientas que vienen en el panel de Herramientas (Tools) o importando algn archivo de Illustrator, algn video o imagen. La cuadricula, las guas y la regla sirven para que no metamos la pata y dibujemos el contenido (o acomodarlo) con precisin sin tener que batallar luego.

LA CUADRICULA
Para activarlo usamos este mtodo usando el men:

Men

Ver > Submen Cuadricula > Comando Mostrar Cuadricula

Se muestran entonces unas lneas cruzadas y paradas (OMFG) que despus podemos mover.

Para desactivar esos a veces odiosos cuadros sigue el mismo camino del men. El grid o cuadricula nos permitir ubicar en forma precisa los objetos que incluyamos en el escenario. Para editar la Cuadrcula o Grid nos vamos de viaje hacia:

Men Ver > Submen Cuadricula > Comando Editar

Cuadricula.

REGLAS O RULERS
Las reglas nos permiten medir el tamao de los objetos. Tambin nos permite arrastrar guas hacia el escenario, a continuacin el atajo a seguir para llegar a ello.

Men Ver > Comando Reglas.

LAS GUAS
Men Ver > Submen Guas > Comando Mostrar

Guas.

Las guas nos sirven para dar una mayor exactitud de ubicacin a nuestros objetos dentro del escenario. Haz click en alguna de las reglas (ya sea V o H) y arrastra hasta el escenario, veras que empiezan a sobresalir unas lneas de 1 pixel de ancho y de todo el tamao del escenario de color azul claro, claro este color puede cambiarse, te lo mostrar mas adelante.

Si quieres borrar las guas del escenario de una vez haz esto:

Men Ver > Submen Guas > Comando Borrar

Guas.

HERRAMIENTAS
Las herramientas de flash son como las de un mecnico y las de un diseador, tenemos desde cosas que nos permiten crear objetos, hasta los que nos permiten manipular objetos o comportamientos, si no la ves por defecto haz lo siguiente, ve a:

Men Ventana > Comando Herramientas.

Se activara una ventana que puedes meter en donde te plazca mejor y redimensionarla. Cada herramienta tiene opciones para ser modificada en cuanto a su uso.

DESCRIPCIN DE LAS HERRAMIENTAS + ATAJOS

Herramientas de Adobe Flash CS4 y su atajo de teclado.

El rea de herramientas como pueden ver se divide en 6 secciones, una es para seleccin, otra para creacin de objetos, otra para relleno y manipulacin, otra para zoom y movimiento, otra para cambiar los colores y la ultima para ajustar objetos o no. Para ser sincero con ustedes lectores, me da MUCHISIMA weba (sueo) explicar una por una las herramientas de flash en modo textual con imagenes, no es mucho el sueo que me da, es solo que este tutorial se esta tornando algo largo y las personas suelen aburrirse con mucho texto y nada de accin, es por eso que he decidido explicar las herramientas de atrs con un video algo largo y optimizado a velocidad rayo para tratar de hacerlo mas comprensible as como ligero y corto. Bueno esta bien, lo hare en modo textual pero muy brevemente: Herramienta de Seleccin: Sirve para seleccionar, mover y transformar vectores. Herramienta de Subseleccin: Nos permite seleccionar cosas que con la otra no podemos. Herramienta de Transformacin Libre: Activa controles en un elemento que sirve para redimensionar, rotar, cambiar de perspectiva y cambiar el centro de rotacin. Herramienta de Rotacin 3D: Flash CS4 Incorpora una funcin para vectores nueva que se trata de la posibilidad de aadir una rotacin con efecto 3D a objetos vectoriales. Herramienta Lazo: Con esta podemos seleccionar cosas definidas por nuestro trazo. Herramienta de Texto: Para escribir en el lienzo, una vez escrito un texto se puede modificar todo en el panel de Propiedades, de hecho el panel de propiedades se pueden cambiar muchas cosas. Herramienta Pluma: Podemos crear trazados guiados por nuestros puntos, al crear un punto tras otro se crean puntas de vector, y podemos torcerlas para hacerlas curvas, y cerrar el trazo. Herramienta valo: Si quieres crear un circulo esta es tu herramienta, presiona Shift mientras creas uno para que el circulo se haga perfecto y bien simtrico. Herramienta Lnea: Para crear lneas rectas y en el panel de propiedades su grosor y color. Pincel: SI tienes algunos pinceles guardados puedes usar esto para repartirlos en el lienzo. Lpiz: El padre del dibujo, no te conviene si usas mouse, es inteligente y se ajusta a las curvas y lneas rectas un poco mal trazadas, es recomendable usarla si tienes tablet. Herramienta de Decoracin: Tiene 3 preestablecidas, decoracin de adorno floral, decoracin cuadriculada y el pincel de simetra, ideal para hacer preloaders y relojes. Cubo de Pintura: Rellenar cosas es lo que hace. Herramienta Hueso: Una novedad en CS4, con esto es mas fcil animar articulaciones fcilmente con las llamadas poses, en el video se muestra su uso mas simple, claro hay mas complejos. Borrador: Borra trazados, y vectores con formas como cuadrado o circulo, ten cuidado con que borras, es tedioso usarlo, no es como en Photoshop. Cuentagotas: Toma el color al que des click y lo guarda para usarlo en tu prximo movimiento.

Herramienta ZOOM: Para agrandar o reducir la escala del lienzo/escenario. Herramienta Mano: A veces podemos crear pelculas flash que llegan a superar el tamao que dejamos para visualizar el escenario debido a los paneles que hay alrededor, es mas fcil usar esta herramienta de exploracin que usar las barras de desplazamiento. Controles de Color: Con uno estableces el color del borde y con otro el color de relleno, si te fijas al querer seleccionar un color hasta en la esquina superior derecha veras un cuadrado blanco con una diagonal roja, eso es por si no quieres ningn color de relleno o trazado. El botn de intercambiar colores hace lo que es, intercambiar los colores y el de Blanco y Negro solo establece color blanco como relleno y negro como trazado. La lnea de tiempo La lnea de tiempo es el cuadro mgico, sin el seria solo un Paint defectuoso. Es un recuadro donde va cada segundo o instante de la animacin a travs del tiempo. A la derecha se encuentran los fotogramas y del lado izquierdo las capas (layers) de trabajo, se visualiza la construccin de la peli.

Tambin esta formada por la Cabeza lectora (no, no es una persona que lee la mente o que lee un libro), si no que es un indicador que se posiciona en un instante de la pelcula y muestra en el escenario lo que hay en ese instante, o sase lo que se vera en la pelcula en ese momento. Ms detalladamente, en el cuadro de capas se aprecian 3 opciones, una es el oj o, la cual muestra u oculta la capa (su contenido), luego esta el bloqueador candado, que evita que podamos manipular o mover el contenido de esa capa en el escenario, y por ultimo para mostrar todas las capas como contornos. Despus debajo de ese panel de capas se aprecian 3 iconos, el primero sirve para crear una nueva capa (recuerda que una capa es como si pusieras un papel transparente encima de otro y en ese papel pusieras lo que se te ocurra, si lo manchas de chocolate, lo que hay abajo no se vera, pero si dibujas un circulo ah, y debajo haba otro por otro lado, se vera, si los sobrepones y el circulo de la capa superior esta relleno de chocolate, no veras mas que el sobrante de la capa anterior)., con el segundo icono, al seleccionar un grupo de capas, las agrupa dentro de una carpeta para que no te rompas mucho el coco y te organices mejor. Y el final, para borrar capas.

CAPA MSCARA (MASK)

Estas capas se encargan de ocultar objetos, pero dentro de ellas se encuentran objetos que permiten ver que hay abajito de ellas. Las capas mscara se representan por un rectngulo con un valo transparente en el interior. Para crear una capa mscara, hay que seleccionar la capa o layer que ser una mscara, haz un click derecho y en el men contextual selecciona Mscara. Al momento de aplicar esta mscara, automticamente, tanto la mscara como el enmascarado quedarn bloqueados. Al quitar el efecto mscara dejarn de estar enmascarados, y por lo tanto quedaran desbloqueados.

FOTOGRAMAS (FRAMES)
Un fotograma viene siendo, en Flash, un instante o un momento de una pelcula SWF, es un equivalente a cuadro de un filme. Cuantos ms fotogramas existan en el la fiesta ms duracin tendr la pelcula flash. Nos es posible agregar, mover, eliminar, cortar, pegar y limpiar fotogramas. Al hacer un click derecho, sobre un fotograma Flash muestra un men contextual ilustrado a continuacin.

Fotograma Clave (Keyframe) Son usados cuando se quiere realizar un cambio en determinado punto de la pelcula. Son usados tambin cuando hay interpolacin de movimiento o interpolacin de forma (tweens). Cuando se inserta un fotograma clave, automticamente el contenido del fotograma anterior es trado a este nuevo punto de la pelcula. Etiquetas de los fotogramas Si eres un olvidadizo como yo y necesitas ponerle nombre hasta lo que no, entonces tendrs que usar esto, son identificadores que se les da a un fotograma en particular en la lnea del tiempo. Para introducir alguno solo haz un click en el fotograma al que quieres ponerle una etiqueta y luego en el fabuloso panel de propiedades ingresas el nombre que quieres, por ejemplo: Corte o Explosin.

Aceleracin y Desaceleracin No, no voy a explicarles que cuando la aceleracin (aceleracin=distancia/tiempo) es negativa es desaceleracin y cuando es negativa es des-aceleracin ni que la aceleracin es la razn entre distancia y tiempo. Bueno es algo parecido pero aplicado a Adobe Flash. Para que entiendas mejor esto te invito a que hagas lo siguiente para practicarlo: Crea una interpolacin de movimiento (en el fotograma 1, capa 1 insert un circulo en una esquina, luego en el fotograma 60 inserte un fotograma clave, luego hice un click derecho en el centro del fotograma grande que se creo y seleccione Crear Interpolacin de Movimiento, luego sin hacer nada mov el circulo a la esquina contraria y se ve como una serie de puntos, eso es una ruta. En el panel de propiedades hay una propiedad que dice aceleracin, puedes crear instancias de aceleracin con crear Fotogramas clave de posicin en la lnea de tiempo, y luego en el panel de propiedades, aumentar o disminuir la aceleracin, as quedara el efecto.

Smbolos Un smbolo puede ser un grfico, un botn o un clip de pelcula que se crea una vez y que se puede reutilizar en el transcurso de la pelcula o en otras pelculas. Estos smbolos se almacenan solitos en la Biblioteca y estarn disponibles para luego ser utilizadas. Los smbolos sirven para realizan

un sin fin (un putero) de tareas, ya que poseen distintos comportamientos, los cuales ayudan a construir pelculas interactivas y muy cool.
Hay tres tipos de smbolos: 1. Grficos: Son imgenes o vectores estticos que son metidos a la lnea de tiempo principal. No funcionan los controles interactivos ni los sonidos en este tipo de smbolo (leste bien?). 2. Botones: Permite la interactividad en las pelculas, donde se pueden agregar una serie de instrucciones o acciones que el usuario podr utilizar generando un evento. Est constituido por cuatro fotogramas (reposo, sobre, presionado y zona activa). 3. Clips de pelcula: Pueden contener otros clips de pelcula, botones o grficos, haciendo de esta manera objetos con mayor complejidad e interaccin superior. Los clips de pelcula tienen una lnea de tiempo independiente, el cual ser de gran ayuda para incluir en nuestras pelculas de lnea de tiempo principal.

Nota: Al seleccionar un objeto y presionando la tecla [F8] podremos convertir en forma rpida a smbolo. Para editar un smbolo se hace doble click sobre el smbolo que se desea modificar.

LA BIBLIOTECA (NO LIBROTECA)

Todos los smbolos, archivos de audio, fotos, sonidos, vectores, porno y componentes de Flash, se encuentran en la biblioteca. Flash tiene la particularidad de compartir smbolos y objetos utilizados en otros documentos para hacer mas dinmica y rpida la cosa. La biblioteca est formada por dos paneles. La parte de arriba es la vista previa del smbolo que seleccionamos. El segundo, es la lista de los smbolos o carpetas que contienen ms smbolos.

Men de la biblioteca 1. Nuevo Smbolo: Permite crear un nuevo smbolo vacio. 2. Nueva Carpeta: Las carpetas son usadas para administrar y organizar los smbolos y objetos que se encuentran dentro de la biblioteca. 3. Propiedades: Permite cambiar las propiedades de los smbolos. 4. Eliminar: Elimina uno o varios smbolos seleccionados.

BOTONES (MUY TIL)

Los botones son clips de pelcula pero interactivos y tienen solo cuatro fotogramas, los cuales sirven para activar eventos que deseamos ejecutar (comportamiento). Un botn es un smbolo, que en su lnea de tiempo tiene cuatro fotogramas, los cuales son los siguientes:

Reposo (Up): Cuando el puntero no est sobre l y solo lo miras.. Sobre (Hover): Cuando pasas el puntero sobre el botn. Presionado (Press): cuando se hace click con el ratn sobre el botn. Zona Activa (Hit): Define el rea que responder al click del ratn. Esta rea es invisible en la pelcula. Si no se especifica un fotograma Zona Activa Adobe Flash tomar la imagen para el estado Reposo como fotograma de Zona Activa.

Para crear un botn se utilizan las teclas CTRL + F8 Si se desea activar cualquier fotograma del botn, se debe insertar fotograma clave para cada opcin.

Como rayos crear un botn

Vamos al men Edicin > Anular seleccin (CTRL + Shift + A)

Para asegurarnos de no seleccionar nada en el escenario.

Luego vamos al men Insertar >Nuevo smbolo (CTRL + F8)

Ingresamos un nombre, por ejemplo Botn_1. Y en el comportamiento seleccionamos Botn.

Dibujamos el tipo de botn que deseamos, por ejemplo, un valo con degradado.

Damos click en el fotograma Sobre y cambiamos el color del degradado a un color fijo. Clickeamos en el fotograma Presionado, y cambiamos el relleno del ovalo. Para verificar, regresamos al escenario. Ahora este botn es un smbolo, se encuentra en la Biblioteca o Librera. Slo nos queda llevarlo al escenario arrastrando del la Biblioteca hacia el escenario. Para habilitar o deshabilitar botones simples en el mismo escenario presionamos CTRL+Alt+B o nos dirigimos hacia el men: Control >Habilitar Botones Simples. Para agregar Zona Activa, estando en el escenario damos click dos veces sobre el botn, el cual nos llevar hacia los fotogramas de estado del botn. Damos click sobre el fotograma Zona Activa, dibujamos un rectngulo al costado del valo. Al ejecutar, dirigirnos hacia el escenario. Presionamos CTRL+Alt+B Veremos que se activa tambin el botn sobre el rectngulo invisible.

MOVIE CLIPS (CLIPS DE PELCULA)

Se suele usar smbolos de Clip de Pelcula (Movie Clip) para crear piezas de animacin reutilizables. Los clips de pelcula tienen sus propias lneas de tiempo de varios fotogramas, independientes de la lnea de tiempo principal, como insertar una peli dentro de otra.. Primero Presionamos la tecla rpida F8 para Convertir a Smbolo y seleccionamos Movie Clip. Al seleccionar el Modo Avanzado (Advanced) se despliega la pantalla con las casillas de seleccin. Nos indica la casilla Export for ActionScript si requerimos exportar para ActionScript, exportar en el primer fotograma, etc. Registration: Ubicamos el nodo central de nuestro Movie Clip. Eso ha sido todo por esta vez, para finalmente guardar una pelcula flash en SWF y no en FLA, vas al men archivo y de ah vas a Exportar > Pelcula Flash. Este es la primera parte del articulo, la siguiente parte es una increble coleccin de tutoriales para empezar a aprender Flash.

Si te gust este tutorial, entonces ser de gran ayuda que compartieras esto en tu sitio web o blog, que lo bookmarkees en Del.Icio.Us o que te suscribas al RSS para recibir mas como estos. Sobre publicarlo en otro sitio, si lo haces, trata de subir las imagenes a tu servidor o imageshack (si es para foros u otros sitios), ya que cada que una imagen es cargada desde otro sitio me estn chupando ancho de banda, y me cuesta 9 dlares al mes, si se sobre pasa tendr problemas de conexin aqu y no quiero eso, prefiero que aparte cites la fuente, no quiero ver que despus digas que este tutorial es tuyo, como pas con el tutorial de la composicin rockera en photoshop, en el cual haba 2 foros (elcorillord.com y heybritney foros) donde en sus foros 2 personas distintas me copiaron mis tutoriales y los pusieron sin citar la fuente, eso me cae en la punta del pene Como nota final digo que dejes tu comentario y cualquier duda ac estoy para resolverla.

En este blog aprenders mas acerca de lo que es posible hacer mediante la herramienta adobe flash profesional :)

Mira este ejemplo generado en base a un action script que maneja librerias 3D para hacerlo muy llamativo.

QUE ES UN ACTION SCRIPT:

Bueno es el cdigo detrs de los proyectos Fash el que nos permite implementar clases llamar librerias y sobre todo tener el control sobre los objetos de nuestros proyectos. De que manera se realiza esto, por ejemplo al presionar un boton se genera un evento el que hacer con esto esta en el Action Script. Mi ejemplo al hacer click todo gira y queda en una posicin randmica. Bueno como se explicar mas adelante este es un inicio fcil en la dificil tarea de programacion. Es posible tener toda una presentacin simplemente dibujando y dando inicios de movimiento sin necesidad de un action script pero si quieres dar realmente una completa funcionalidad e interaccin con el espectador debemos saber action script, adobe ha simplificado mucho esto proporcionando cdigo seleccionable a nuestras necesidades.

Ahora este es un buen inicio este ejemplo es muy completo y ademas muy vistoso y til cabe decir que este es el resultado de un tutorial de la poderosa herramienta Five3D es el mas popular y vistoso de los motores 3D funciona sobre adobe CS3 y CS4

PRIMEROS PASOS

Vamos a hacer que un action escript se el que controle a nuestro archivo Flash el mismo que esta vacio. El action escript contiene todas las funciones y objetos visibles, es decir nada es grafico en este caso todo esta implementado a base de cdigo. Se puede apreciar las importaciones de librarias net.badimon las mismas que se obtienen descargando el pakcage de Five3D en su pagina oficial.

Ahora bien que contiene este action script:

// importacion de librerias tiles badimon.five3D import net.badimon.five3D.display.DynamicText; import net.badimon.five3D.display.Scene; import net.badimon.five3D.display.Sprite; import net.badimon.five3D.typography.HelveticaBold; import net.badimon.five3D.utils.Drawing; class Application { function Application(clip:MovieClip) { // Se crea un escena y se la enlaza a la raiz. var scene:Scene = new Scene(clip); var root:Sprite = scene.getRoot(); // Se posiciona la raiz. root._x = 300; root._y = 200; // Se crea un sprite llamado "sign" en la raz var sign:Sprite = root.createSprite("sign", 0); Drawing.roundedPlace(sign, -150, -150, 300, 300, 20, 0x0066FF); // Se crea un sprite llamado "star" dentro del "sign", se la grafica y posiciona var star1:Sprite = sign.createSprite("star1", 0); //110 para su base y 180 para sus puntas 0 para orden y finalmente su color Drawing.star(star1, 20, 110, 180, 0, 0x006600); // se selecciona su posicion por medio de coordenadas star1._x = 110; star1._y = -80; // Esta funcion nos permite darle un angulo de giro respecto a su centro star1.onEnterFrame = function():Void { this._rotationz--;//puede ser tambin this._rotationz++

}; // Texto "Multimedia" dentro del "sign",se establece algunos parametros y se lo posiciona var hi:DynamicText = sign.createDynamicText("Multimedia", 1); hi._typography = HelveticaBold; hi._size = 30; hi._color = 0x000000; hi._text = "Multimedia!"; hi._x = 50; hi._y = -110; // Texto dinamico "sergio" en el "espacio", se selecciona alguna opciones y se lo ubica var sergio:DynamicText = sign.createDynamicText("sergio", 2); sergio._typography = HelveticaBold; sergio._size = 80; sergio._color = 0xFFFFFF; sergio._text = "Sergio"; sergio._x = -112; sergio._y = -34; //Se establece un ejes sign._rotationx = sign._rotationy = sign._rotationz = rango de numeros random para moverlo a cada click en los tres Math.random() * 100 - 50; Math.random() * 100 - 50; Math.random() * 100 - 50;

//Se la hace rotar a cada click sign.onPress = function():Void { this._rotationx = Math.random() * 100 - 50; this._rotationy = Math.random() * 100 - 50; this._rotationz = Math.random() * 100 - 50; }; } }

Al finalizar todo esto hemos creado objetos visibles mediante codigo los hemos puesto todo sobre un sing el mismo que rota a cada click.

FCILMENTE GRACIAS A FIVE3D.

Como puedes probarlo habre el movie y en la ficha Control probar pelicula Como exportarlo para ver tu trabajo terminado debes en Archivo,Exportar,Exportar pelcula y seleccionar otras opciones como la version de action script entre otras. de esta manera esta listo para aadirlo a tu pagina web, blogg o donde tu quieras.

Cabe decir que Five3D en una herramienta que facilita mucho este trabajo de animacion puedes ver muchos ejemplo en su pagina oficial y descargarte estas utiles librerias en http://five3d.mathieubadimon.com/

BIBLIOGRAFIA
http://www.conceptopixel.com/aprende-a-usar-adobe-flash-como-en-el-kinder http://www.webestilo.com/flash/flash00.phtml