Aprende a Usar Adobe Flash como en el Kinder

Publicado en 20. Sep, 2009 por Luis Lopez Garay in Tutoriales

Este es un tutorial corto pero instructivo sobre las más básicas herramientas y conceptos para comenzar a seguir tutoriales de Flash, se te enseña a identificar las áreas y las posibilidades del programa, no es un tutorial largo pero aprenderás algo. Contiene un video sobre las herramientas y una explicación detallada de cada una de las cosas que el programa hace, se recomienda su lectura si quieres introducirte al mundo de Adobe Flash, es fácil de entender, anda éntrale .

Foto del inicio de Adobe Flash CS4 al iniciarse. Valga la redundancia.

For the English version of this tutorial, please contact me at luis@conceptopixel.com to provide you with the Word Document of this tutorial in full English. Cheers, Luis…

Introducción

Como anécdota personal puedo contarles que no hace mas de 1 año, cuando estaba en tercer semestre de preparatoria (ahora estoy en quinto semestre como a casi un tercio del camino) había tres materias muy buenas que no las podía creer, era como un sueño, estas materias eran: Generación de Animaciones Multimedia (Adobe Flash ya sea CS3 o CS4, incluso algunos tenían la MX del 2004); Generación de Gráficos con Software de Dibujo (Corel Draw X3 o X4) y Creación de Paginas Web (Dreamweaver CS3, CS4 o MX). Yo tenia ya una previa experiencia en mi exploración diseñíl, de Corel Draw no sabia nada pero de ese programa no hare un solo tutorial (lo juro) para este blog. Pues resulta que en la materia de flash aprendí mas de lo que sabia, tome muchos apuntes y gracias a esto me tienen aquí escribiendo este magno-manual. Me pareció interesante usar mis apuntes y aprendizajes con este blog al que le tomo mucho cariño por la gente que día a día necesita aprender mas y mas para convertirse en un futuro, los próximos creativos de su país.

Ya deja de contarnos cosas!, mejor pon el tutorial a continuación!

Bueno, aquí esta lo prometido, primero no puedes esperar tener una empresa solida sin saber como se llaman tus empleados ni que hace cada uno (aunque se rasque la panza todo el día ).

A lo que me refiero es que primero conozcas sus áreas y sus funciones:

Áreas de Flash y sus nombres, click para ver en full-screen

Atrás tienen una captura de pantalla de Adobe Flash CS4 y sus áreas mas características:

El escenario esta compuesto de varios elementos que componen una película.

El escenario o lienzo, es el área que representa el como se vera nuestra película antes de ser publicada. La línea de tiempo, que casi siempre esta arriba del lienzo, es el máximo control que puedes encontrar en flash, es como tener muchas imagenes de una animación segmentadas en pequeños trozos que representan una porción del tiempo de la película, ayuda a organizar nuestra animación y controlar lo que aparece segundo a segundo a través del tiempo. Los paneles de Flash, son aquellos cuadros con propiedades, controles y otras cosas que te ayudaran a manipular y controlar lo que este en tu película y lo que quieras que suceda en ella. El panel de propiedades (el cual esta en la esquina inferior derecha al cual se me olvido ponerle nombre, y antes llamado Inspector de Propiedades) es un panel donde podemos ver y cambiar las propiedades de nuestro documento, como el tamaño, versión de Action Script, el color del escenario, entre otras cosas.

El escenario de baile 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 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 mujeres símbolos:

1. 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?).
2. 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).
3. 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

1. Nuevo Símbolo: Permite crear un nuevo símbolo vacio.
2. Nueva Carpeta: Las carpetas son usadas para administrar y organizar los símbolos y objetos que se encuentran dentro de la biblioteca.
3. Propiedades: Permite cambiar las propiedades de los símbolos.
4. 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

Como nota final digo que dejes tu comentario y cualquier duda acá estoy para resolverla.

EDIT Miercoles 7 de Octubre del 2009:

Segunda parte añadida:

Enlace: Tutoriales de Flash para Practicar

Entradas Relacionadas:

1. 24 Tutoriales de Flash para Practicar con Donas y Café desde tu Casa
2. Como crear una Revista con Adobe InDesign
3. Aprender a usar Photoshop en 10 Minutos
4. Rumores y Datos oficiales de Adobe Suite CS5
5. 30 Tutoriales de Adobe Illustrator de este 2009