MANUAL DE FLASH CS6 Aprendiendo a utilizar Flash CS6
INSTITUTO TECNOLÓGICO DE PUEBLA Elaborado por: Hernández Hernández Beatriz Ramírez Hernández Viridiana
“Preguntas Frecuentes” Antes de comenzar a explicar el uso de Adobe Flash Profesional Cs6, hay que aclarar algunos de las preguntas que pueden surgir durante la explicación del manual, de flash.
¿Qué es Flash? Flash es un estudio de animación que trabaja sobre "fotogramas" y está destinado a la producción y entrega de contenido interactivo para diferentes audiencias alrededor del mundo sin importar la plataforma. Es actualmente desarrollado y comercializado por por Adobe Systems Incorporated y forma parte de la familia Adobe familia Adobe Creative Suite, su Suite, su distribución viene en diferentes presentaciones, que van desde su forma individual o como parte de un paquete, siendo estos: Adobe Creative Suite Design Premium, Adobe Creative Suite Web Premium y Web Standard, Adobe Creative Suite.
¿Para qué sirve Flash? Flash es el entorno de desarrollo y Flash Player es el reproductor utilizado para visualizar los archivos generados con Flash. En otras palabras, Adobe Flash crea y edita las animaciones o archivos multimedia y Adobe Flash Player las reproduce.
¿Qué archivos genera Flash? Los archivos de Adobe Flash, que tienen generalmente la la extensión de archivo SWF, archivo SWF, pueden aparecer en una página una página web para ser vistos en un navegador un navegador web, web, o pueden ser reproducidos independientemente por un reproductor Flash. Los archivos de Flash aparecen muy a menudo como animaciones como animaciones en en sitios web multimedia, y más recientemente en en Aplicaciones de Internet Ricas. Son Ricas. Son también ampliamente utilizados como anuncios como anuncios en la Web.
¿Qué es ActiónScript? Adobe ActionScript es el lenguaje de programación de la plataforma Adobe Flash. Originalmente desarrollado como una forma para que los desarrolladores programen de forma más interactiva. La programación con ActionScript permite mucha más eficiencia en las aplicaciones de la plataforma Flash para construir animaciones de todo tipo, desde simples a complejas, ricas en datos e interfaces interactivas.
“Organización de Flash Profes Profe ssional CS6” A continuacion podremos observar la ventana de inico de Adobe Flash Professional CS6:
Menus de Adobe Flash Professional CS6
Crear un nuevo documento Plantillas de Adobe Flash Professional CS6
Panel de propiedades
Ejemplos de Flash Linea de tiempo/ Editor de movimiento
La primera pantalla que se muestra solo es una breve descripcion global de los atributos de Adobe Professional Flash CS6. Posteriormente en los ejemplos realizados se explicaran con mas detalle la herramientas de Flash. Ahora Por ejempos si trabajamos en una archivo ActionScript 3.0, el cual es la version mas reciente que utiliza Adobe Flahs Professional CS6.
Primero iremos a la parte de “Crear Nuevo”, y presionaremos la opcion AtionScript 3.0 se nos
mostrara la siguiente ventana:
Escenario: Aquí es donde veremos lo que vamos a diseñar en Flash. Solo seremos capaces de ver, lo que se genera dentro de Escenario.
Esta parte es donde Veremos la línea de tiempo/Editor de movimiento, que es donde podremos apreciar que movimientos de los fotogramas El panel de propiedades, con la cual realizaremos y editaremos en flash.
“Panel Principal de Flash Professional CS6” En el panel principal, nos ofrece las sigientes opciones:
Como se va a publicar el archivo. Para que tipos de dispositivos se va a realizar. El tipo de programaicion que va a llevar asociada el archivo. La velociada a la que se reproducira. El tamaños del archivo. El color del Escenario (o area de trabajo).
“Panel de Herramientas de Flash Professional CS6” El panel principal, esta centrado entre el paneles, los cuales son el “Panel de Herramientas” y el “Panel de Tareas”:El panel de herramientas, es donde se encuetan todas la herramientas que se utilizan para diseñar, en el cual esta integrado por la siguientes herramientas:
Herramienta Selección (V)
Herramienta se Subselección (A)
Herramienta de Transformación Libre (Q)
Herramienta de Rotación 3D (W)
Herramienta Pluma (P)
Herramienta Texto (T)
Herramienta Línea (L)
Herramienta Lápiz (Y)
Herramienta Pincel (B)
Herramienta Deco (U)
Herramienta Hueso (M)
Herramienta Cubo de Pintura (K)
Herramienta de Cuentagotas (I)
Herramienta Borrador (E)
Herramienta Mano (H)
Herramienta Zoom (Z)
Color Trazo
Color Relleno
Intercambiar Colores
Ajustar Objetos
Suavizar
Enderezar
Herramienta Selección (V): esta herramienta nos permite seleccionar, el escenario que
vamos a trabajar. Herramienta se Subselección (A): esta herramienta nos permite subseleccionar, una parte
de lo que vamos a trabajar, por ejemplo, si seleccionamos la imagen de una flor, no necesariamente vamos a editar toda la flor, podemos editar solo el tallo de la flor, un petalo, etc. Herramienta de Transformación Libre (Q): esta herramienta nos permite tranformar, la imagen en la que estamos trabajando, tr abajando, para detallarla o modificarla. Herramienta de Rotación 3D (W): esta herramienta nos permite girar una imagen o figura, parra darle efecto. Herramienta Pluma (P): esta herramienta nos permite, utilizarla como si se tratara de una pluma. Herramienta Texto (T): esta herramienta nos permite insertar texto dentro de Escenario. Herramienta Línea (L): esta herramienta nos permite insertar una línea dentro de escenario. Herramienta Lápiz (Y): esta herramienta nos permite utilizar un lápiz, dentro de Escenario conde se encuentra trabajando. Herramienta Pincel (B): esta herramienta nos permite utilizar un lápiz dentro de Escenario donde se encuentra trabajando. Herramienta Deco (U): esta herramienta nos permite utilizar un lápiz tipo rociador, que inserta simbolos como si fuera una pintura en Spray, dentro de Escenario donde se encuentra trabajando. Herramienta Hueso (M): esta herramienta nos permite generar movimiento en ua imagen, por ejemplo si tenemos una imagen de una abeja, con la herramienta hueso, podemos darle movimiento a la imagen. Herramienta Cubo de Pintura (K): esta herramienta nos permite rellenar el interior de las pinturas, de un color seleccionado, de la paleta de colores. Herramienta de Cuentagotas (I): esta herramienta nos permite seleccionar un color,que queremos utilizar, para no buscarlo dentro de la paleta de colores. Herramienta Borrador (E): esta herramienta nos permite borrar, dentro de la imagen. Herramienta Mano (H): esta herramienta nos permite Seleccionar. Herramienta Zoom (Z): esta herramienta nos permite realizar un zoom, dentro de Escenario. Color Trazo: Nos permite definir el color de un trazo. tr azo. Color Relleno: nos permite rellenar, con un color, escogido de la paleta de colores. Intercambiar Colores: nos permite invertir colores. Ajustar Objetos: Nos permite ajusta los objetos que se crean en el Escenario. Suavizar: Permite suavizar lo que se seleccione. Enderezar: Endereza la imagen seleccionada.
“Panel de Tareas de Flash Professional CS6” Y por otra parte esta el panel de Tareas, en el cual se realizan la asociasiones con los elementos detro del Escenario, el panel de tareas, esta integrado por los siguientes elementos los cuales se muestran desglosados a continuación:
Color
Muestras
Transformación _____..
Alinear
…………………………Información
Fragmentos de código
Componentes
Configuración Predefinida de Movimiento
“Ejemplo en Adobe Flash Professional Professional CS6: Elaboración de un Banner”
Primero iremos a la parte de “Crear Nuevo”, y presionaremos la opcion AtionScript 3.0 se nos
mostrara la siguiente ventana:
Dibujaremos una imagen sencilla, para nuestro Banner, en este caso sera la imagen de un corazón:
Ahora, seleccionaremos la imagen que creamos, y la convertiremos en simbolo, podemos presionar la tecla “F8”, o ir a menu “Modificar” y presinar la opcion “Convertir en símbolo”
Nos mostrara la siguente ventana:
Donde en Nombre, escribiremos Corazón, y lo manejaremos con el Tipo “Clip de película”, y presionaremos presionaremos el botón “Aceptar”
Borraremos la imagen que insertamos.
Ahora seleccionaremos seleccionaremos “El pincel rociador”, el cual se encuentra dentro de la opcion de “Pincel”
Donde, utilizaremos el simbolo que hemos creado, anteriormente.
En la parte que dice Rociador, presionaremos el boton “Editar”, y utilizaremos “Corazón”
Ahora, seleccionaremos la casillas de verificacion:
Escala aleatoria Girar símbolo Rotación Aleatoria
Aplicaremos el roceador, sobre el Escenario:
Ahora bloquearemos esta capa, la cual cual se utilizara de fondo, al presinar presinar el candado, en en la Linea de tiempo, para que no sufra modificiones el fondo del Banner.
Añadiremos una nueva capa, para colocar un texto. Damos clic derecho, sobre la capa actual, y seleccionaremos seleccionaremos la opcion de “Insertar capa”
Selecionaremos la herramienta Texto, y escribiremos una palabra, en este ejemple escribiremos la palabra HOLA, para nuestro Banner. B anner.
Alinearemos el texto, con la opcion alinear, y marcamos la casilla de verificacíon “Alinear en escenario”
Ahora presegiremos con la animacion de las letras, para comenzar seleccionaremos el texto, e iremos a “Modificar” y presinaremos presinaremos “Separar”
Nos mostrara la letras separadas, como se muestra en la siguiente imagen:
Ahora, iremos a “Modificar”, y seleccionaremo seleccionaremo s “Linea de tiempo” y presionaremos “Distribuir en capas”
A continuacion las letras de manera automatica, no las mostrara por capas:
Ahora insertaremos fotogramas, de momento momento insertaremos 50 fotogramas, al señalar las capa de las letras y presionar clic.
Ahora selecionaremos algunos Fotogramas intermedios, presionaremos clic, y presionaremos la opcion “Crear interpolacion de movimiento”
Los fotogramas de inicio. Los aliniaremos desde el centro:
Para que se vea el movimiento de las letras. Ahora iremos a Control, y presionaremos Reproducir, y veremos nuestro Banner animado.
“Ejemplo en Adobe Flash Professional CS6: Importar un video” Primero abriremos Adobe Flash Profesional CS6, ahora iremos a la parte que dice Archivo
Iremos al menú Archivo, y presionaremos en Nuevo
Nos aparecerá la siguiente ventana, en la cual nos dará las siguientes opciones para la creación de diferentes tipos de Archivos. 1. Seleccionaremos Seleccionaremos la opción de archivo ActionScript 3.0 2. Presionaremos el botón aceptar.
Como resultado de lo anterior, nos aparecerá la siguiente pantalla, en la cual se muestra un escenario en blanco, cobre el cual trabajaremos el nuevo video.
Seleccionaremos Seleccionaremos el menú de archivo, y el submenú Importar y la opción de “Importar video”
Lo cual nos mostrara la siguiente ventana: En esta ventana es donde daremos la ruta donde se encuentra nuestro video. Presionaremos botón Examinar.
el
Nos aparecerá la siguiente ventana donde, especificaremos la ruta donde se encuentre nuestro video. Es importante recordar que Flash, utiliza videos con formato FLV.
Seleccionaremos el video IMG_1883, y presionaremos el botón Abrir.
Ahora, presionaremos boton de radio:
el
“Incorporar FLV en SWF y su
reproductor en la linea de tiempo”
Y presionaremos el Boton Siguiente.
Ahora escogeremos el Tipo de archivo.
Podemos escoger entre las tres opciones siguientes:
Video incorporado Clip de pelicula Gráfico
Seleccionaremos la opcion de Grafico.
Presionaremos el boton Siguiente:
Seleccionaremos la tres casillas de verificacion, y presionaremos el boton aceptar.
Presionaremos el boton Finalizar.
Por defecto el video se esta saliendo del Escenario, por consiguiente no se podra reproducir el video.
Para arreglar este detalle iremos al panel de propiedades, presionaremos el boton de “Editar propiedades del documento”
Observaremos que coincide como Predeterminado, pero modificaremos la opcion en los botones de radio, dandole la opcion e Conenido.
Al dar la opcion de contenido, las dimesiones se ajustaran de manera automatica. Presionaremos el boton de Aceptar.
El video se ajusto al tamaño del Escenario. Para poder reproducir el video iremos al menu “Control” y seleccionaremos seleccionaremos el submenu “Reproducir”
“Ejemplo en Adobe Flash Flash Professional CS6: Uso de la herramienta Hueso”” Hueso Hueso es una herramienta de Adobe Flash Professional CS6, con la cual se nos permite darle movimiento a una animación. Para este ejemplo, contamos con el dibujo de una tortuga, que esta dibujada dentro de flash. Presionaremos la combinación de teclas “Control+O”, seleccionaremos el archivo llamado tortugaCapas y para finalizar presionaremos el botón Abrir.
Aparecerá en el Escenario, la imagen de una tortuga.
Para continuar con la animación de la tortuga, convertiremos las capas en Símbolos.
Para esto seleccionaremos los fotogramas de la tortuga, tort uga, y los cortaremos.
La animación de la tortuga, to rtuga, la generaremos en un documento nuevo. Iremos al menú Insertar y el submenú nuevo símbolo (o la tecla F8)
Nombraremos al nuevo símbolo como “mover_tortuga”
Añadiremos dos capas nuevas, con el con la opcion que se encuentra en la parte inferior de la línea de tiempo.
Nos mostrara la dos nuevas capas.
Ahora crearemos dos cajas transparente, las cuales nos serviran como guia para cuando realicemos el movimiento sobre la tortuga.
1. Selecionamos la herramienta rectangulo, la cual se encuentra dentro de la herramienta rectangulo.
2. Ubicamos el rectangulo sobre el cuello y las patas de la tortuga.
3. Daremos doble clic sobre el rectangulo que hemos creado, para convertirla en un simbolo. Para esto, presionaremos la tecla F8 y nombraremos el simbolo como rectangulo.
4. Ahora copiaremos el simbolo que hemos creado, daremos doble clic sobre el rectangulo y seleccionaremos seleccionaremos la opcion copiar.
5. Ahora daremos clic derecho y seleccionaremos la opcion copiar ,el rectangulo esta vez lo ubicaremos ente las patas traseras y el rabo de la tortuga.
6. Como podemos observar en la imagen de la tortuga, el rectengulo sale de color negro, pero nosostros queremos que el rectangulo r ectangulo sea transparente, para ello seleccionaremos seleccionaremos el rectangulo, e iremos a efectos de color.
por defecto tiene ninguno, pero nosotros seleccionaremos alfa y lo dejaremos en el nivel cero.
Este paso lo repetiremos para el siguiente rectangulo. 7. Ahora seleccionaremos la herramienta hueso.
Con la cual vincularemos de la siuiente manera: La primera caja la vincularemos con el cuello y con ambas patas delanteras. La segunda pata la vincularemos con ambas patas traseras y el rabo de la tortuga.
8. Ahora organizaremos la imagen de la tortuga, ya que al general el esqueleto de la imagen, se han movido.
Para esto seleccionaremos la cabeza de la tortuga e iremos al menu “Modificar” , al submenu “organizar” y la opcion “Trael al frente”
9. Por ultimo copiaremos los fotogramas del esquelto para poder mover los movimientos de la tortuga, solo generaremos 10 fotogramas, aunque se pueden general más.
Ahora solo moveremos el esqueleto en cada cronograma, que se creara.
