martes, 25 de enero de 2011

Tutuorial de Flash 8

Hola somos Jonathan Piza y Edgar Barrios alumnos del CETis 41 creadores de este blog.

Este blog fue creado con la finalidad de servir de apoyo al utilizar flash 8, explica sus funciones basicas y como insertar y manipular archivos u objetos.
Hemos elegido este medio ya que consideramos a Blogger como una herramienta, facil entendible y sobretodo gratis.
El blog explica los siguientes temas, provenientes del segundo submodulo: Produccion de animaciones con elementos multimedia:
* Identificar los elementos de la ventana del programa de diseño.
* Manipular el dibujo utilizando herramientas de diseño.
* Aplicar animacion al dibujo.
* Manipular botones.
* Manipular sonido.
* Manipular video.
* Publicar pelicula.

Esperamos que este blog les sirva de apoyo.
Atte: Edgar Alonso Barrios Rios; Jonathan Piza Perez

Identificar los Elementos de la Ventana


Antes de empezar a utilizar Flash 8 deberemos aprender lo más elemental del programa, de qué se compone la ventana. Pero antes; si es la primera vez que abres Flash, seguramente habrás notado el mensaje que la aplicación muestra al abrirse; vete acostumbrando a ella porque aparecerá cada vez que inicies el programa. Es básicamente un menú que te da las principales opciones que necesitas antes de iniciar un proyecto. Por lo regular terminarás eligiendo "Documento de Flash", aunque debes entender que Flash permite crear muchas cosas más.
Aquí te presentamos un diagrama completo de la ventana en general, con las distintas partes señaladas con flechas; como puedes ver cada flecha tiene una letra; explicaremos cada parte debajo de la imágen con su respectiva letra:


















A)BARRA DE MENÚS.
se trata de una cinta de opciones con menús desplegables (de ahí su nombre) que te da opciones extra al trabajo que estés haciendo. Se trata de la barra más común en la mayoría de los programas (seguramente la has visto antes). Se compone de los menús: 
"Archivo": Que sirve para guardar el documento, hacer una copia, abrir otro archivo, hacer un documento nuevo, etc.
"Edición": Básicamente te da las opciones de Copiar, Cortar, Mover,Pegar etc.
"Ver": Que cambia la vista del documento
"Modificar": Te permite cambiar las propiedades de cualquier objeto sobre el área de trabajo.
"Texto": Evidentemente te permite modificar las propiedades del texto que insertes en la película.
"Comando": Te permite crear y modificar "comandos", sin embargo, éste es un tema avanzado y no lo veremos durante el curso.
"Control": Sirve básicamente al reproducir tu película; te da las opciones de reproducir, pausar, rebobinar, etc.
"Ventana": Te permite modificar las propiedades de la ventana en la que trabajas o ir a otra ventana de trabajo, de acuerdo con tus necesidades.
"Ayuda": Es para ésas ocasiones en las que el programa hace algo inesperado o que no entiendes; se trata de un simple apoyo por si te trabas.


B).BARRA DE HERRAMIENTAS.
Esta es la Barra que mas vas a utilizar en Flash 8, por lo tanto es la mas útil y la mas sencilla de utilizar.
Las herramientas del panel Herramientas permiten dibujar, pintar, seleccionar y modificar ilustraciones, así como cambiar la visualización del escenario.






<-La sección de herramientas contiene las herramientas de dibujo, pintura y selección.





<-La sección de visualización contiene herramientas para ampliar y reducir, así como para realizar recorridos    de la ventana de la aplicación.


<-La sección de colores contiene modificadores de los colores de trazo y relleno.



<-La sección de opciones muestra los modificadores de la herramienta actualmente seleccionada. Los modificadores afectan a las operaciones de pintura o edición de la herramienta.



C)LINEA DE TIEMPO
La línea de tiempo organiza y controla el contenido de un documento a través del tiempo en capas y fotogramas. Al igual que en una pelicula, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película puestas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora.

D)BIBLIOTECA
El panel Biblioteca es donde se guardan y organizan los símbolos creados en Flash, además de archivos importados tales como gráficos de imágenes de mapa de bits, archivos de sonido y clips de vídeo. En el panel Biblioteca puede organizar en carpetas los elementos de biblioteca, ver con qué frecuencia se utilizan en un documento y ordenarlos por tipo.


E)PROPIEDADES
La opcion de propiedades simplifica la creación de documentos facilitando el acceso a los atributos más utilizados del elemento seleccionado, ya sea en el escenario o en la línea de tiempo. Puede modificar los atributos del objeto o documento en el inspector de propiedades sin acceder a los menús o paneles.
La opcion propiedades muestra información y la configuración del elemento que está seleccionado, que puede ser un documento, un texto, un símbolo, una forma, un mapa de bits, un vídeo, un grupo, un fotograma o una herramienta. Cuando hay dos o más tipos de objetos seleccionados, la opcion de propiedades muestra el número total de objetos seleccionados.


F)AREA DE TRABAJO
El escenario es el área rectangular donde se coloca el contenido gráfico, que incluye, entre otros: gráficos vectoriales, cuadros de texto, botones, clips de vídeo o imágenes de mapa de bits importadas. El escenario del entorno de edición de Flash representa el espacio rectangular de Macromedia Flash Player o del navegador Web donde se muestra el documento de Flash durante la reproducción. Puede utilizar la función de acercar y alejar para ver el escenario cuando trabaja.






Manipular el Dibujo Utilizando Herramientas de Diseño

Antes de manipular el dibujo tenemos que saber que son y como utilizar las herramientas de  diseño:
Flash ofrece diversas herramientas de dibujo que permiten crear. Todas las herramientas son diferentes y proporcionan resultados estilísticos distintos.
Herramienta Pincel
La herramienta Pincel,  es probablemente la más facil y util de todas las herramientas, especialmente si se combina con una tableta sensible a la presión. Dibujar con la herramienta Pincel es lo mismo que dibujar con formas. Es la herramienta cuyo uso resulta más natural, ya que ofrece sensibilidad a la presión y a la inclinación.







La herramienta Pincel ofrece diversas subopciones que ayudan a dibujar determinados efectos :
Pintar Normal: Pinta sobre las líneas y rellenos de la misma capa.
Rellenos de Pintura: Pinta dentro de un color de relleno y fuera de una forma (en el escenario).
Pintar detrás: Pinta detrás de los rellenos y trazos existentes.
Pintar Selección: Le permite pintar dentro de un relleno seleccionado solamente.
Pintar Dentro: Le impide salirse de las líneas después de empezar a pintar dentro de un relleno.





Herramienta Lápiz
La herramienta Lápiz, es la herramienta perfecta si se desea lograr un grosor de línea homogéneo en toda la imagen y con el menor tamaño de archivo posible.








La herramienta Lápiz también ofrece diversos modos de calidad de línea:
Enderezar: Esta opción es estupenda cuando se desea dibujar líneas muy rectas a mano alzada. Aunque le tiemble el pulso, las líneas se "ajustarán" a la recta después de terminar de dibujar el trazo.
Suavizar: Si utiliza esta opción, las líneas se suavizan automáticamente conservando la forma básica que se desea crear.
Tinta: Esta opción deja sin modificar la calidad de la línea. Se trata de una opción magnífica para dibujos a mano alzada o de estilo libre.




Herramientas de formas
Las herramientas de formas (Circulo y Rectángulo) crean rellenos y trazos. Manteniendo presionada la tecla Mayús en combinación con la herramienta de forma, se crea un círculo o un cuadrado perfecto.








Puedes seleccionar el color de relleno y de trazo a través del inspector de propiedades . Al hacer clic en cualquiera de las muestras, se abre el panel de color, que  permite editar el trazo o la opción de color.

Herramienta Pluma
Para dibujar trazados precisos como líneas rectas o como curvas suaves, puedes utilizar la herramienta Pluma. Puedes crear segmentos de líneas rectas o curvas y ajustar el ángulo y la longitud de los segmentos rectos, así como la pendiente de los segmentos curvos.














Herramienta Papel cebolla
La herramienta Papel cebolla está situada en la parte inferior del panel de línea de tiempo.


 




Flash ofrece dos tipos de papel cebolla:

Papel cebolla normal: El fotograma actual se muestra a todo color mientras los fotogramas anteriores y posteriores se atenúan progresivamente. Con esto se consigue dar la sensación de que hay una serie de dibujos creados en papel semitransparente apilados unos sobre otros.
Modo de contornos de papel cebolla: El fotograma actual se muestra a todo color, mientras que los fotogramas anteriores y posteriores se muestran como contornos. Esto es más fácil de ver cuando se trabaja con varios fotogramas clave situados antes y después del fotograma actual.


Aplicar Animacion al Dibujo

Para crear una animación en flash tienes que saber cuáles son las herramientas y como se utilizaran:

Una animación
puede hacer que un objeto se desplace a lo largo del escenario, aumente o disminuya de tamaño, gire, cambie de color, aparezca o desaparezca progresivamente, o cambie de forma. Los cambios pueden ocurrir por separado o combinados entre sí. Por ejemplo, puede hacer que un objeto gire a medida que aparece y se desplaza por el escenario.

Existen dos métodos para crear una secuencia de animación en Flash: la animación interpolada y la animación fotograma por fotograma.



En la interpolación de movimiento, se definen propiedades tales como la posición, el tamaño y la rotación de una instancia, un grupo o un bloque de texto en un instante específico, y después estas propiedades se pueden cambiar en otro momento. También se puede crear una interpolación de movimiento a lo largo de un trazado.



En la interpolación de formas, se dibuja una forma en un instante específico y después se modifica o se dibuja otra forma en otro instante. Flash interpola los valores o formas de los fotogramas intermedios para crear la animación.



La animación fotograma por fotograma cambia el contenido del escenario en cada fotograma y es ideal para las animaciones complejas en las que la imagen cambia en cada fotograma en lugar de moverse por el escenario. Este tipo incrementa el tamaño del archivo con mayor rapidez que la animación interpolada. En la animación fotograma por fotograma, Flash guarda los valores de los fotogramas completos

Representaciones en Línea de Tiempo
Las interpolaciones de movimiento se indican mediante un punto negro al principio del fotograma clave; los fotogramas interpolados intermedios tienen una flecha negra con un fondo azul claro.

Las interpolaciones de formas se indican con un punto negro en el fotograma clave inicial; los fotogramas intermedios tienen una flecha negra con un fondo verde claro.

Una línea discontinua indica que la interpolación se ha interrumpido o está incompleta, por ejemplo, cuando falta el fotograma clave final.

Aqui como quedaria una animacion:

Manipular Botones

Para manipular un boton, primero debemos saber que es:

Los botones de flash son objetos gráficos a los que podemos asignar diferentes estados (normal, sobre, presionado...) y que cuando los pulsemos (o pasemos por encima), se ejecuten determinadas acciones.

Para crear un botón podemos primero dibujarlo, por ejemplo en el estado de reposo, y después convertirlo en símbolo; para ello, una vez seleccionado, elegimos el menú: "Insertar-Convertir en símbolo". Debemos escribirle un nombre.



Si abrimos la biblioteca ("Ventana-Biblioteca"), veremos que ya aparece dentro:



Ahora debemos diseñar los diferentes estados del botón, editando el símbolo. Para ello, haremos doble clic en el icono del botón (en la biblioteca), o bien "botón derecho-Editar", apuntando al botón que aparece en la escena.
En la línea de tiempos veremos que estamos modificando el botón, no la escena:



Podemos apreciar que en vez de fotogramas normales, como cualquier animación de flash, disponemos de cuatro fotogramas "especiales":

Reposo: es donde colocaremos el botón con su aspecto nortmal, es decir, cuando no está siendo apuntado por el ratón.

Sobre:
es el aspecto que tendrá cuando el ratón se pasa por encima, pero sin pulsar.

Presionado:
se trata del botón mientras estamos pulsando el ratón en él.

Zona activa:
aquí definimos la zona donde el botón responderá al ratón. Podemos crear un circular, pero que se active en una zona rectangular, por ejemplo. Es muy importante en los textos, puesto que si no se crear una zona activa, sólo se detecta el ratón cuando está encima del trazo del texto en sí, no en el espacio entre letras, ni en el medio de una letra "O", por ejemplo.

Para crear diferentes efectos en cada estado, podemos hacerlo de una forma fácil pero efectiva, partiendo del mismo dibujo, y cambiando sólo el tono de color, por ejemplo.
También podríamos trabajar con diferentes capas para crear otros objetos dentro de cada estado, por ejemplo, en "sobre" podemos crear el típico "letrero" de fondo amarillo, donde aparece una frase explicando el resultado de pulsar el botón, o una pequeña animación del mismo botón, por ejemplo, cambiando su tamaño, rotándolo, etc...
Debemos insertar un fotograma clave en la posición "Sobre".



Y listo.

Tambien podemos asignar una accion a dicho boton

Seleccionando el botón

Abrir el panel de Acciones ("Ventana-Acciones")

Pulsar el símbolo + del panel de acciones (o doble clic sobre la acción).


Elegir el tipo de evento que causará la acción (aparecen debajo).

Asi se crea y se manipula un boton en flash.

Manipular Sonidos

En ésta lección aprenderemos a insertar y manipular un poco los sonidos en flash 8. Antes de empezar, analicemos un poco un asunto importante: el formato del sonido. Prácticamente cualquier archivo de sonido es aceptado en flash sin problema, sin embargo, dependiendo de lo que quieras hacer, es el formato que te recomiendo. Si quieres un sonido de alta calidad con todos sus atributos, lo mejor es un archivo .wav, aunque este tipo de archivos es muy pesado. Si lo que quieres es algo simple y ligero, los .midi son los mejores, aunque son difíciles de conseguir. Algo más equilibrado y accesible son los .mp3, que son los que yo recomiendo.

Una vez que tengas el archivo que vas a utilizar, asegúrate de tener guardado el trabajo al que lo vas a insertar en la misma carpeta que el sonido que vas a utilizar; ésto para simplificarte las cosas:
Una vez hecho ésto, abre el archivo en el que estás trabajando. (Consejo: Todas las partes de tu animación que no se muevan o que te sirvan como fondo,apártalas en una capa especial de fondo; ésto te facilitará las cosas en todo el proceso de animación y ESPECIALMENTE al insertar sonido)s:
Para comenzar entra al menú "Archivo" y luego selecciona la opción "Importar a biblioteca" (te lo recomiendo más que escenario, porque te permite insertarlo manualmente).
Ésto abrirá una venta emergente que te muestra todos los archivos de sonido contenidos en la misma carpeta donde está guardado tu archivo (por ésto se guardan en la misma carpeta); aquí eliges el archivo que desees importar a la animación y le das "Abrir":
Hecho ésto el archivo ya está en tu biblioteca, la cual puedes ubicar en la parte derecha de tu pantalla dentro del programa, si no es así, tendrás que abrir la ventana acoplable de la biblioteca, ésto se hace dando clic al menú "Ventana" y luego clic al botón "Bliblioteca" o puedes dar Ctrl + L:
Después de haber hecho ésto deberías ser capaz de visualizar tu biblioteca del lado derecho con tu archivo de audio en él:
Lo que haces después es simple, sólo arrastra el archivo dentro de la biblioteca al escenario en el que estás trabajando; ojo, no intentes arrastrarlo a la línea de tiempo porque no te saldrá, sólo arrástralo al fondo del escenario:
Una vez hecho ésto, notarás que tu línea de tiempo ha cambiado, y que ahora tiene una serie de ondas abarcando una cierta cantidad de fotogramas; dependiendo de la duración del sonido es el número de fotogramas que abarca. No puedes modificar la duración del sonido una vez insertado:
Lo que sí puedes hacer es seleccionar los fotogramas que quieras de la secuencia de sonido, y luego pegarlos  donde desees dentro de la línea de tiempo, como yo lo hice aquí, repitiendo y duplicando la duración de mi sonido:
Por último, notarás que en la parte baja del programa hay una pequeña flecha hacia arriba; como ya has visto, a éso se le llama barra de propiedades; con el sonido seleccionado puedes desplegar ésta barra para más opciones:
Ésta barra te permite modificar propiedades como el efecto que quieres darle a tu sonido, si quieres que se repita, cuántas veces, y con qué acción quieres que se sincronice (o sea, cuando quieres que empiece a sonar).
Ésto es lo que básicamente debes saber para insertar y manipular sonidos.

Para dejarlo más claro, un video:

Manipular Video

En ésta lección aprenderemos a insertar un vídeo en flash 8; ahora, éste proceso es extremadamente parecido al de sonido, así que discutamos formatos: Flash no debería tener problema con ningún archivo de vídeo, sin embargo, es más posible que responda mejor con un tipo de archivo llamado .flv, dado que es un archivo de vídeo en flash, es el mismo tipo de archivo que usan, por ejemplo, en youtube; si no los archivos .avi tampoco están mal, sin embargo, con otros tipos de archivos, tales como .mp4 u otros, no te aseguro nada.

Antes de empezar, asegúrate que tu vídeo esté guardado en la misma carpeta que el archivo en el que estás trabajando:
Una vez que te has asegurado de ello, ve al menú "Archivo" en tu barra de menús y elige la opción: "Importar a biblioteca":
Ésto abrirá una ventana emergente con todos los archivos de vídeo que están en la carpeta donde guardaste el archivo en el que estás trabajando, elije el video que necesites y da clic en "Abrir".
A diferencia de los sonidos, los vídeos abren un asistente especial al hacer ésto, que te guía durante el proceso de insertar un video, aunque puede ser algo confuso. La primera pantalla es la siguiente:
Básicamente te pide la localización del archivo ya sea en el equipo o en internet, como ya hiciste la parte de arriba, es probable que esté rellenado automáticamente con la dirección del archivo. Si ese es el caso sólo presiona siguiente; si no, da clic en "examinar" y busca tu archivo en el sistema. La casilla de abajo es para los videos que ya estén en un servidor web y de los que tengas un url directa, no te preocupes por eso, en éste caso no lo necesitaremos.
La siguiente pantalla es la siguiente:
Ésta pantalla se llama "implementación" y es quizá la más confusa, pero no te preocupes, vamos paso a paso, notarás que hay cuatro casillas de selección, o en ocasiones cinco, y todas ellas son útiles, analicémoslas para que elijas la que te convenga:
Descarga progresiva desde un servidor web: Si tu video está ya en internet en un servidor que tú uses (por ejemplo si tienes una página web), ésta sería tu mejor opción; la carga del video será parecida a la de youtube; es decir, progresivamente. Si no tienes nada en internet es mejor que a éste ni le muevas.
Flujo de Flash Video Streaming Service: Básicamente, carga progresivamente el video desde cualquier ubicación donde esté, ya sea en el equipo o en internet; como en éste caso el video está en tu sistema, no tardará nada en cargarlo dado que el video ya está en tu carpeta de trabajo. (Si no entiendes nada de lo que he explicado hasta ahora y lo que quieres es que tu video tenga buen color y sonido, te recomiendo ésta opción)
Flujo de Flash Comunication Server: En palabras simples, lo mismo que el anterior sólo que éste permite usar una conexión de área local(LAN) para cargar el archivo, si el archivo está en TU computadora, no tiene caso.
Incorporar video en SWF y reproducir en la línea de tiempo: Ésta opción incrusta tu video en la línea de tiempo y directo al archivo fla, lo que quiere decir que no necesitarás que el video esté en la misma carpeta que tu archivo para que se vea en la animación después de terminado este proceso. Aunque es la manera más cómoda, el sincronizar el sonido con el video siempre es un problema frustrante con ésta opción. Si tu video no tiene sonido, es la opción que te recomiendo.
La siguiente pantalla es la siguiente:
Ésta pantalla es más amigable, y sólo te da opciones para el reproductor que quieres que aparezca en tu animación, sólo elige el modelo  y color que más te agrade y da clic a "siguiente".
La última pantalla es la siguiente:
Es la información de la configuración de tu video, si tienes dudas léela, si no, simplemente da clic en "Finalizar"

Una vez terminado éste proceso tu video estará insertado en el escenario; no lo podrás previsualizar en el momento, sólo podrás cambiar de tamaño y lugar el reproductor:
Si quieres echar un vistazo a tu video, puedes dar Ctrl + Enter (recuerda que al hacer ésto estás creando un archivo ejecutable o .swf al mismo tiempo):
Y así es como se inserta un video en flash 8.

Publicar Película

Si ya estás list@ para que el mundo vea tu creación, es tiempo de publicar tu trabajo. Tienes un sinfín de opciones para exportar el archivo en el que tanto trabajaste en otros formatos más ligero y visibles.
Siendo que el módulo en el que estamos tiene un enfoque a la web te mostraremos cómo publicar tu trabajo en una página web.
En primer lugar, debes decidir si lo que quieres es exportar el archivo a otro formato y luego insertarlo en tu página web, o si lo que quieres es publicarlo directamente a un formato HTML. Si lo que quieres es publicarlo directamente como HTML (esto por lo regular se hace cuando la pagina completa esta hecha en flash), el proceso es el siguiente:

Con nuestro archivo abierto, nos dirigimos al menú "Archivo" de la barra de menús, vamos a la pestaña "Vista previa de publicación" y elegimos HTML:
Ésto abrirá nuestro archivo directamente en el explorador de internet predeterminado en nuestro sistema, en mi caso Google Chrome, dándonos una vista previa de cómo se verá publicado en internet.
Si lo que quieres es exportar el archivo a otro formato para usarlo después, el proceso es el siguriente:

Una vez más, con el archivo abierto, abrimos el menú "Archivo", y nos dirigimos a la pestaña "Exportar", luego elegimos "Exportar Película":
Ésto abrirá un menú en el que podemos elegir de una lista de formatos disponibles, dependiendo de lo que sea tu trabajo, es el formato que te conviene. Por lo regular, lo mejor es elegir el formato .swf, dado que es un archivo ejecutable de tu trabajo (no se puede editar, sólo visualizar) y cualquier explorador con Flash Player lo soporta; ahora que si lo que quieres es una animación más ligera, puedes elegir el formato .gif, del que se componen la mayoría de la imágenes con movimiento (como los emoticones del messenger); aunque si tu trabajo tiene botones o es interactivo, no funcionará.
Al terminar, el archivo original (.fla) y el que exportaste deberían estar en la misma carpeta:


EXTRA:-----------------------------------------------------------------------------------------------------

Si estás haciendo una página en Dreamweaver y te gustaría insertar el archivo .swf que acabas de crear debes hacer lo siguiente:

Con tu archivo abierto, busca el botón rojo de Flash en la barra de menús común, despliega las opciones si lo necesitas:
En la ventana emergente, busca el archivo .swf que necesitas y da clic en abrir:
Recuerda que si el archivo no está en la misma carpeta que tu página, el programa te preguntará si quieres copiarlo a la carpeta raíz, en ése caso, acepta. Aparecerá otra ventana que te permite darle un título  y texto alterno al archivo, si deseas especifícalo, si no acepta. Debería aparecer un cuadro gris con las dimensiones de tu trabajo y una f estilizada en el centro:
Puedes cambiar su tamaño y lugar todo lo que quieras; cuando guardes los cambios y abras la página podrás visualizar tu archivo de flash en tu página.