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 comúnmente "STAGE", el escenario, la pantalla donde vamos a realizar toda la animación. Por arriba podemos observar, la línea de tiempo que está compuesta por FRAMES (cuadros) y LAYERS (capas).
Automáticamente, se nos abren varias ventanas, donde podemos tener al alcance de la mano todas las posibilidades y necesidades para nuestro diseño en flash.
La línea de tiempo nos sirve para darle el tiempo necesario a la animación que vamos a diseñar; la sumatoria de frames equivale a los segundos que queremos que dure nuestra animación. En forma predeterminada, el Flash viene seteado con una velocidad de 12 cuadros por segundo. En forma particular les digo que uno se guía por varios elementos para que sea eficiente una película: si el objetivo es, por ejemplo, utilizarla en una página 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 película: más pesado, más tarda en bajar. (Tenemos que tener en cuenta que estas películas 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 animación. Aquellos que ya han utilizado algún programa gráfico reconocerán todas las herramientas, a aquellos que no, les pido que sin miedo comiencen a "jugar", a interiorizarse más con estas herramientas, total, ante la duda, comienzan otro nuevo stage y listo.
Al utilizar las herramientas Lápiz, Línea, Óvalo, Rectángulo o Pincel, para dibujar una línea sobre otra línea o forma pintada, las líneas que se solapan se dividen en segmentos, en los puntos de intersección. Puede utilizar la herramienta Flecha para seleccionar, mover y remodelar cada segmento independientemente. Las líneas que se solapan creadas con la herramienta Pluma, no se dividen en segmentos en los puntos de intersección,sino que permanecen intactas.
Un relleno; el relleno con una línea que lo corta; los dos rellenos y tres segmentos de línea creados por la segmentación.
El escenario de Flash
El escenario es aquel área donde se dibuja, diagrama y crea todo el contenido de los fotogramas, y por lo tanto, de la película. Este contenido se puede crear con las Herramientas que vienen en el panel de Herramientas (Tools) o importando algún archivo de Illustrator, algún video o imagen.
La cuadricula, las guías y la regla sirven para que no metamos la pata y dibujemos el contenido (o acomodarlo) con precisión sin tener que batallar luego.
La cuadricula
Para activarlo usamos este método usando el menú:
“ Menú Ver > Submenú Cuadricula > Comando Mostrar Cuadricula “
Se muestran entonces unas líneas cruzadas y paradas (OMFG) que después 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 Cuadrícula o Grid nos vamos de viaje hacia:
Menú Ver > Submenú Cuadricula > Comando Editar Cuadricula.
Reglas o Rulers
Las reglas nos permiten medir el tamaño de los objetos. También nos permite arrastrar guías hacia el escenario, a continuación el atajo a seguir para llegar a ello.
Menú Ver > Comando Reglas.
Las guías
Menú Ver > Submenú Guías > Comando Mostrar Guías.
Las guías nos sirven para dar una mayor exactitud de ubicación 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 líneas de 1 pixel de ancho y de todo el tamaño del escenario de color azul claro, claro este color puede cambiarse, te lo mostraré mas adelante.
Si quieres borrar las guías del escenario de una vez haz esto:
Menú Ver > Submenú Guías > Comando Borrar Guías.
Herramientas
Las herramientas de flash son como las de un mecánico y las de un diseñador, 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.
Descripción 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 selección, otra para creación de objetos, otra para relleno y manipulación, 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 (sueño) explicar una por una las herramientas de flash en modo textual con imagenes, no es mucho el sueño que me da, es solo que este tutorial se esta tornando algo largo y las personas suelen aburrirse con mucho texto y nada de acción, es por eso que he decidido explicar las herramientas de atrás 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 Selección: Sirve para seleccionar, mover y transformar vectores.
Herramienta de Subselección: Nos permite seleccionar cosas que con la otra no podemos.
Herramienta de Transformación Libre: Activa controles en un elemento que sirve para redimensionar, rotar, cambiar de perspectiva y cambiar el centro de rotación.
Herramienta de Rotación 3D: Flash CS4 Incorpora una función para vectores nueva que se trata de la posibilidad de añadir una rotación 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 simétrico.
Herramienta Línea: Para crear líneas 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.
Lápiz: El padre del dibujo, no te conviene si usas mouse, es inteligente y se ajusta a las curvas y líneas rectas un poco mal trazadas, es recomendable usarla si tienes tablet.
Herramienta de Decoración: Tiene 3 preestablecidas, decoración de adorno floral, decoración cuadriculada y el pincel de simetría, 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 fácil animar articulaciones fácilmente 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 próximo movimiento.
Herramienta ZOOM: Para agrandar o reducir la escala del lienzo/escenario.
Herramienta Mano: A veces podemos crear películas flash que llegan a superar el tamaño que dejamos para visualizar el escenario debido a los paneles que hay alrededor, es mas fácil usar esta herramienta de exploración 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 ningún color de relleno o trazado. El botón 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 línea de tiempo
La línea de tiempo es el cuadro mágico, sin el seria solo un Paint defectuoso. Es un recuadro donde va cada segundo o instante de la animación a través del tiempo. A la derecha se encuentran los fotogramas y del lado izquierdo las capas (layers) de trabajo, se visualiza la construcción de la peli.
También 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 película y muestra en el escenario lo que hay en ese instante, o séase lo que se vera en la película en ese momento.
Más detalladamente, en el cuadro de capas se aprecian 3 opciones, una es el ojo, 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. Después 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 había 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 Máscara (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 máscara se representan por un
rectángulo con un óvalo transparente en el interior. Para crear una capa máscara, hay que
seleccionar la capa o layer que será una máscara, haz un click derecho y en el menú contextual selecciona “Máscara”. Al momento de aplicar esta máscara, automáticamente, tanto la máscara como el enmascarado quedarán bloqueados. Al quitar el efecto máscara dejarán de estar enmascarados, y por lo tanto quedaran desbloqueados.
Fotogramas (Frames)
Un fotograma viene siendo, en Flash, un instante o un momento de una película SWF, es un
equivalente a cuadro de un filme. Cuantos más fotogramas existan en el la fiesta más duración tendrá la película 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 continuación.
Fotograma Clave (Keyframe)
Son usados cuando se quiere realizar un cambio en determinado punto de la película. Son usados también cuando hay interpolación de movimiento o interpolación de forma (tweens). Cuando se inserta un fotograma clave, automáticamente el contenido del fotograma anterior es traído a este nuevo punto de la película.
Etiquetas de los fotogramas
Si eres un olvidadizo como yo y necesitas ponerle nombre hasta lo que no, entonces tendrás que usar esto, son identificadores que se les da a un fotograma en particular en la línea 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 Explosión.
Aceleración y Desaceleración
No, no voy a explicarles que cuando la aceleración (aceleración=distancia/tiempo) es negativa es desaceleración y cuando es negativa es des-aceleración ni que la aceleración es la razón 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 interpolación 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 Interpolación 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 aceleración, puedes crear instancias de aceleración con crear “Fotogramas clave de posición” en la línea de tiempo, y luego en el panel de propiedades, aumentar o disminuir la aceleración, así quedaría el efecto.
Símbolos
Un símbolo puede ser un gráfico, un botón o un clip de película que se crea una vez y que se puede reutilizar en el transcurso de la película o en otras películas. Estos símbolos se almacenan solitos en la “Biblioteca” y estarán disponibles para luego ser utilizadas. Los símbolos sirven para realizan un sin fin (un putero) de tareas, ya que poseen distintos comportamientos, los cuales ayudan a construir películas interactivas y muy cool.
Hay tres tipos de símbolos:
- Gráficos: Son imágenes o vectores estáticos que son metidos a la línea de tiempo principal. No funcionan los controles interactivos ni los sonidos en este tipo de símbolo (leíste bien?).
- Botones: Permite la interactividad en las películas, 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).
- Clips de película: Pueden contener otros clips de película, botones o gráficos, haciendo de esta manera objetos con mayor complejidad e interacción superior. Los clips de película tienen una línea de tiempo independiente, el cual será de gran ayuda para incluir en nuestras películas de línea de tiempo principal.
Nota: Al seleccionar un objeto y presionando la tecla [F8] podremos convertir en forma rápida a símbolo. Para editar un símbolo se hace doble click sobre el símbolo que se desea modificar.
La Biblioteca (No libroteca)
Todos los símbolos, archivos de audio, fotos, sonidos, vectores, porno y componentes de Flash, se encuentran en la biblioteca. Flash tiene la particularidad de compartir símbolos y objetos utilizados en otros documentos para hacer mas dinámica y rápida la cosa.
La biblioteca está formada por dos paneles. La parte de arriba es la vista previa del símbolo que seleccionamos. El segundo, es la lista de los símbolos o carpetas que contienen más símbolos.
Menú de la biblioteca
- Nuevo Símbolo: Permite crear un nuevo símbolo vacio.
- Nueva Carpeta: Las carpetas son usadas para administrar y organizar los símbolos y objetos que se encuentran dentro de la biblioteca.
- Propiedades: Permite cambiar las propiedades de los símbolos.
- Eliminar: Elimina uno o varios símbolos seleccionados.
Botones (Muy útil)
Los botones son clips de película pero interactivos y tienen solo cuatro fotogramas, los cuales sirven para activar eventos que deseamos ejecutar (comportamiento). Un botón es un símbolo, que en su línea 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 botón.
- Presionado (Press): cuando se hace click con el ratón sobre el botón.
- Zona Activa (Hit): Define el área que responderá al click del ratón. Esta área es invisible en la película. 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 botón se utilizan las teclas CTRL + F8
Si se desea activar cualquier fotograma del botón, se debe insertar fotograma clave para cada opción.
Como rayos crear un botón
- Vamos al menú Edición > Anular selección (CTRL + Shift + A)
· Para asegurarnos de no seleccionar nada en el escenario.
- Luego vamos al menú Insertar >Nuevo símbolo (CTRL + F8)
· Ingresamos un nombre, por ejemplo “Botón_1”. Y en el comportamiento seleccionamos Botón.
- Dibujamos el tipo de botón 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 botón es un símbolo, se encuentra en la Biblioteca o Librería.
- Sólo 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 botón, el cual nos llevará hacia los fotogramas de estado del botón.
- Damos click sobre el fotograma “Zona Activa”, dibujamos un rectángulo al costado del óvalo. Al ejecutar, dirigirnos hacia el escenario.
- Presionamos CTRL+Alt+B Veremos que se activa también el botón sobre el rectángulo invisible.
Movie Clips (Clips de Película)
Se suele usar símbolos de Clip de Película (Movie Clip) para crear piezas de animación reutilizables. Los clips de película tienen sus propias líneas de tiempo de varios fotogramas, independientes de la línea de tiempo principal, como insertar una peli dentro de otra..
Primero Presionamos la tecla rápida “F8” para Convertir a Símbolo y seleccionamos “Movie Clip”.
Al seleccionar el Modo Avanzado (Advanced) se despliega la pantalla con las casillas de selección. 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 película flash en SWF y no en FLA, vas al menú archivo y de ahí vas a Exportar > Película Flash. Este es la primera parte del articulo, la siguiente parte es una increíble colección 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 están chupando ancho de banda, y me cuesta 9 dólares al mes, si se sobre pasa tendré problemas de conexión aquí y no quiero eso, prefiero que aparte cites la fuente, no quiero ver que después digas que este tutorial es tuyo, como pasó con el tutorial de la composición rockera en photoshop, en el cual había 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
