manual de flash cs6 v2
TRANSCRIPT
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 Adobe Systems Incorporated y
forma parte de la familia Adobe Creative 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 extensión de archivo SWF, pueden
aparecer en una página web para ser vistos en un navegador web, o pueden ser reproducidos
independientemente por un reproductor Flash. Los archivos de Flash aparecen muy a menudo
como animaciones en sitios web multimedia, y más recientemente en Aplicaciones de Internet
Ricas. Son también ampliamente utilizados 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 Professional 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:
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.
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.
“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, 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.
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 Alinear
Transformación _____.. …………………………Información
Fragmentos de código
Componentes
Configuración Predefinida de Movimiento
“Ejemplo en Adobe Flash 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 el botón “Aceptar”
Borraremos la imagen que insertamos.
Ahora 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 se utilizara de fondo, al presinar el candado, 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 la opcion de “Insertar capa”
Selecionaremos la herramienta Texto, y escribiremos una palabra, en este ejemple escribiremos la
palabra HOLA, para nuestro Banner.
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 “Separar”
Nos mostrara la letras separadas, como se muestra en la siguiente imagen:
Ahora, iremos a “Modificar”, y seleccionaremos “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 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 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 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 el
botón Examinar.
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 el
boton de radio:
“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 el submenu
“Reproducir”
“Ejemplo en Adobe Flash Professional CS6: Uso de la herramienta
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, y los cortaremos.
La animación de la tortuga, 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 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 sea transparente, para ello 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.