introduccion a adobe flash cs5 2011

11
C.P.F. “Santa María de Jesús”  MANUAL DE ADOBE FLASH CS5 Profesor: Yhonny Mitac Julca “Promoviendo una Educación Humanista”  

Upload: piero-darizi

Post on 07-Apr-2018

227 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 1/11

C.P.F. “Santa María de Jesús” 

MANUAL DE ADOBE FLASH CS5

Profesor: Yhonny Mitac Julca

“Promoviendo una Educación Humanista” 

Page 2: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 2/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 2

¿QUÉ ES FLASH?

Flash Professional CS5 es una potente herramienta desarrollada por Adobe que ha superado las mejores

expectativas de sus creadores. Flash fue creado con el objeto de realizar animaciones y diseños vistosos

para la web, y gráficos interactivos.

Las posibilidades de Flash son extraordinarias, con cada nueva versión se han mejorado y simplificado las

herramientas, y cada vez es posible lograr mejores efectos con menos trabajo. Aunque su uso más

frecuente es el de crear animaciones sus usos son muchos más.

Durante mucho tiempo, Flash consiguió hacer posible lo que más se echa en falta en Internet: Dinamismo, y

con dinamismo no sólo nos referimos a las animaciones, sino que Flash permite crear aplicaciones

interactivas que permiten al usuario ver la web como algo atractivo, no estático. Con Flash podremos crear

de modo fácil y rápido desde animaciones simples para lograr algunos efectos visuales, hasta aplicaciones

complejas, como juegos .

EL ESPACIO DE TRABAJO DE FLASH

El espacio de trabajo predeterminado que “viene” con Flash es el Clásico. Probablemente al abrir el

programa te vas a encontrar con un panel de herramientas a tu izquierda, la línea de tiempo en la parte

superior, y finalmente a tu derecha el panel de propiedades. Y claro, en el centro el “lienzo” sobre el cual

vamos a trabajar.

Vamos al menú Ventana > Espacio de trabajo y seleccionemos la opción Nuevo espacio de trabajo. Va aaparecer una ventanita donde te pedirá un nombre para el espacio de trabajo. Escoge un nombre y click en

Aceptar. Ahora puedes cambiar tu espacio de trabajo como más te guste. En el menú Ventana puedes

elegir los paneles que quieras tener en el escenario, para luego organizarlos como tú quieras.

¿QUÉ ES ACTIONSCRIPT ?

ActionScript es el lenguaje de programación que ha utilizado Flash desde sus comienzos, y que por

supuesto, emplea Flash CS5. A grandes rasgos, podemos decir que el ActionScript nos permitirá realizar

con Flash CS5 todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a unapelícula Flash. Absolutamente de todo.

CARACTERISTICAS PRINCIPALES

• Como ya hemos comentado, el ActionScript es el lenguaje de programación propio de Flash. El ActionScript está basado en la

especificación ECMA-262, al igual que otros lenguajes como Javascript.

• ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que no hará falta crear un programa comple to para

conseguir resultados, normalmente la aplicación de fragmentos de código ActionScript a los objetos existentes en nuestras películas

nos permiten alcanzar nuestros objetivos.

Page 3: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 3/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 3

LAS HERRAMIENTAS Y SUS UTILIDADES

Herramienta de Selección (V)  úsala para seleccionar,

mover y deformar objetos (si mantienes presionado el

botón izquierdo del ratón y lo arrastras, puedes hacer

una selección rectangular)

Herramienta de Subselección (A)  úsala para

modificar objetos por sus nodos

Herramienta de Transformación Libre (Q)  úsala

para aumentar o disminuir el tamaño de objetos (para

aumentar o disminuir proporcionalmente, mantén

presionada la tecla Shift)

Herramienta de Transformación de Degradado (F)

(surge al mantener presionado el botón de la

herramienta de Transformación Libre úsala para

modificar degradados.

Herramienta de rotación 3D (W) y herramienta de

Traslación 3D (G) (sólo compatibles con actionscript

3.0) úsalas para transformar objetos simulando 3D

Herramienta Lazo (L)  úsala para hacer selecciones a

mano alzada.

Herramienta Pluma (P)  úsala para dibujar líneas

rectas o curvas.

Herramienta Añadir punto de Ancla (+)  úsala para

añadir un punto de ancla en una línea (te permite

curvarla).

Herramienta Eliminar punto de Ancla (-)  úsala para

eliminar un punto de ancla en una línea curva.

Herramienta Convertir punto de Ancla (C)  te

permite modificar los puntos de ancla para así modificar

la curvatura de una línea.

Herramienta Texto (T)  úsala para introducir un texto.

Herramienta Línea (N)  úsala para dibujar una línea

recta (para dibujar una línea totalmente horizontal,

vertical o en diagonal, mantén presionada la tecla Shift)

Herramienta Rectángulo (R)  úsala para dibujar un

rectángulo (para dibujar un cuadrado perfecto mantén

presionada la tecla Shift).

Herramienta Óvalo (O) úsala para dibujar un óvalo

(para dibujar un círculo perfecto mantén presionada la

tecla Shift)

Herramienta Rectángulo Simple (R)  te permite

dibujar un rectángulo o cuadrado y curvar fácilmente sus

vértices.

Herramienta Óvalo Simple (O)  te permite dibujar un

óvalo o círculo y cortarlo fácilmente (para que quede

una especie de “pacman” o pizza )

Page 4: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 4/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 4

Herramienta PolyStar  úsala para dibujar polígonos

regulares o estrellas (modifica las propiedades en el

panel propiedades).

Herramienta Lápiz ( Y)  úsala para dibujar líneas a

mano alzada.

Herramienta Pincel (B)  úsala para dibujar líneas (que

funcionan como rellenos) a mano alzada.

Herramienta Rociador (B)  úsala para “rociar” formas

(que son símbolos en la biblioteca) sobre el escenario.

Herramienta Deco (U)  permite incorporar una

decoración en el escenario (puede interpolarse).

Herramienta Hueso (X) y herramienta Vinculación (Z)

(sólo compatibles con actionscript 3.0) permiten

simular el movimiento del esqueleto humano (es una

herramienta muy interesante para animar personajes y

darles cierto realismo).

Herramienta Cubo de pintura (K)  úsala para agregar

relleno a una forma cerrada compuesta por una línea, o

bien para cambiar el color de un relleno ya existente.

Herramienta Bote de tinta (S)  úsala para agregar

borde a un relleno, o bien para cambiar el color de un

borde ya existente.

Herramienta Cuentagotas (I)  úsala para seleccionar

un color y automáticamente pasar a la herramienta

Cubo de pintura.

Herramienta Borrador (E)  úsala para borrar rellenos

y/o bordes (al seleccionarlo aparecerán tres botones:

uno sirve para regular el grosor, otro para seleccionar

qué borrar, y una canillita para borrar un objeto entero.

Herramienta Mano (H)  úsala para deslizarte a lo largo

del escenario (también puede utilizarse manteniendo

presionada la barra espaciadora).

Herramienta Zoom (M)  es una lupa (manteniendo

presionado Alt “aleja”). Además de la lupa puedes

presionar Ctrl + “+” para “acercar” o Ctrl + “-“ para

“alejar”. 

Debajo de estas herramientas hay un “lapicito” que sirve

para seleccionar el color de borde, el alfa

(transparencia) o si prefieres que el objeto no tenga

borde. A su lado hay un cubo de pintura para

seleccionar el color de relleno, el alfa o si prefieres que

el objeto no tenga relleno.

Page 5: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 5/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 5

DEGRADADOS Y PANEL DE COLOR

Si no tienes este panel en el espacio de trabajo ábrelo en el menú Ventana.

Click en el botón de relleno y selecciona el pequeño rectángulo con el degradado de blanco a negro. Verás

que puedes modificar este degradado agregando puntos y colores, moviéndolos, cambiándolos de color o

eliminándolos (presionando Ctrl).

Una vez que te guste el resultado puedes modificar el degradado con la herramienta Transformación de

degradados (puedes girarlo, achicarlo, torcerlo, etc).

BIBLIOTECA

Si no tienes este panel en el espacio de trabajo ábrelo en el menú

Ventana. En la biblioteca se encuentran los símbolos y las

imágenes, videos, sonidos o lo que sea que importes para

incorporar al escenario.

Para importar un archivo a la biblioteca debes ir al menú Archivo >

Importar > Importar a biblioteca y seguido de ello seleccionas el

archivo. Para importar video debes elegir la opción Importar video.

Para insertar un nuevo símbolo (que puede ser un Clip de película,

Botón o Gráfico) ve al menú Insertar > Nuevo símbolo, o bien

presiona Ctrl+F8. Dale un nombre, selecciona el tipo de símbolo y

clickea Aceptar. Vas a “entrar” automáticamente al símbolo creado,

y ahora puedes modificar dicho símbolo. Una vez que hayas

terminado de modificar el símbolo a tu gusto, vuelve a la Escena

Page 6: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 6/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 6

principal y para incorporar el símbolo en el escenario ve a la biblioteca y arrástralo desde allí.

CLIP DE PELÍCULA / MOVIECLIP / “MC”

Puedes incorporar en él Interpolaciones de Movimiento (ya veremos más tarde qué son), otros símbolos o lo

que tú quieras.

BOTÓNTienes en él cuatro estados: Reposo, que es cuando no tiene “encima” al cursor; Sobre, que es cuando el

cursor está “encima” del botón; Presionado, que es cuando el usuario mantiene presionado el botón

izquierdo del ratón; por último la Zona Activa, que en realidad no se ve, allí puedes dibujar un rectángulo de

cualquier color para indicar qué partes del escenario pertenecen al botón.

PANEL DE PROPIEDADES

Si no tienes este panel en el espacio de trabajo ábrelo en el menú Ventana, o bien presionando Ctrl + F3.

Aquí puedes cambiar las propiedades de cualquier objeto, interpolación, símbolo, relleno, borde o lo que

sea. Puedes darles nombres de instancia a los símbolos, lo cual te va a servir de mucho cuando tengas que

programar con actionscript; puedes agregar filtros a los textos y clips de película (ya sean sombras,

desenfocados, iluminados, bisel, etc.); puedes cambiar las propiedades de color de los clips de película o

botones (alfa, tinta, brillo, etc.); puedes cambiar los tipos de letra, tamaños y colores de los textos; incluso

puedes agregar efectos a las interpolaciones de movimiento y forma.

CÓMO CAMBIAR LAS PROPIEDADES DEL DOCUMENTO 

En cualquier lugar vacío del escenario da click derecho + Propiedades del documento. Ahí puedes variar el

tamaño del “lienzo”, color de fondo, fps y unidad de regla. 

Page 7: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 7/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 7

CAPAS

Te permiten organizar los distintos “componentes” de tu película (fondo, textos, animaciones, o lo que

necesites).

LÍNEA DE TIEMPO

Page 8: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 8/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 8

INTERPOLACIONES

Se podría decir que llegamos a la parte más importante de esta guía. Acá se juntan todos los otros

conceptos para poder animar . Tenemos dos tipos diferentes de interpolación: Interpolación de movimiento e

interpolación de forma. Son bastante diferentes, la primera sirve para “mover” (como su nombre lo indica)

símbolos, sean botones, MC o gráficos, y la segunda sirve para cambiar color o forma de un objeto que no

es un símbolo. Vamos a ver cada una por separado.

INTERPOLACIÓN DE MOVIMIENTO

¿Qué es?

Una forma de animar objetos, los cuales deben ser Clips de película.

¿Qué varía del objeto?

Podemos variar el tamaño, posición en el escenario, color (mediante el panel de propiedades) o filtros.

¿Cómo se aplica?

Primero que nada seleccionamos el objeto que queremos animar, y presionamos F8 para convertirlo en un

Clip de Película. Seguido de eso insertamos un fotograma clave en el fotograma que queramos (click

derecho en el fotograma + “Insertar fotograma clave”). En este fotograma hacemos las variaciones que 

queramos hacerle al clip de película. Entre el fotograma 1 y el fotograma “x” donde se encuentren las

variaciones del clip, hacemos click derecho y seleccionamos la opción “Crear interpolación clásica” (más

tarde veremos la nueva interpolación de movimiento para flash CS4 y CS5). Y ya está, podemos ver el

resultado presionando Ctrl + Enter para probar la película. 

¿Qué pasa si yo quiero que pare la animación al terminar?

Para eso hace falta algo de actionscript básico. En una nueva capa, al final de la animación insertamos un

fotograma clave (F6), abrimos el panel de acciones (si no está en el espacio de trabajo lo abrimos el menú

ventana (o bien presionando F9), y escribimos esto:

Código : 

stop();

Con este sencillo código (compatible con actionscript 1.0, 2.0 y 3.0) ya logramos que la película se detenga.

Page 9: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 9/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 9

GUÍAS DE MOVIMIENTO

Si quieres que el clip siga un recorrido puedes utilizar las guías de movimiento.

Para aplicar una guía, debes de seguir los mismos pasos que los que sigues para aplicar una interpolación

de movimiento clásica. Luego de aplicar la interpolación, en una nueva capa dibuja con el lápiz, o con la

herramienta de línea, el recorrido que quieres que siga tu clip (debe ser una línea que tenga un extremo

“tocando” al clip en el fotograma 1 y el otro extremo “tocándolo” en el fotograma “x” donde termina la

interpolación). Selecciona la capa de la guía, da click derecho y selecciona la opción “Guía”. Corrobora que

la capa de abajo (interpolación) sea modificada por la capa de arriba, si no lo es, arrástrala hacia arriba.

Prueba la película con Ctrl + Enter.

NUEVA INTERPOLACIÓN DE MOVIMIENTO

Esta interpolación apareció con el Adobe Flash CS4 y ahora perdura en el CS5. No tiene muchas

diferencias con el anterior, pero la manera de aplicarla es distinta y las guías de movimiento se incluyen

automáticamente en la misma capa, y es más sencillo modificarlas.

Para aplicar la interpolación clásica hacía falta insertar un fotograma clave de inicio y un fotograma clave de

fin. Ahora nos ahorramos un paso, ya que sólo debemos insertar el fotograma clave de inicio, dar click

derecho al fotograma o al clip, seleccionar Crear Interpolación de Movimiento y Flash automáticamente

inserta más fotogramas. Para que el clip de película se “mueva”, o sea que tenga un cambio por el cual

quieres aplicarle una interpolación, debes de ir al último fotograma (o a cualquiera de los que abarque la

interpolación) y mover o cambiar las características del clip.

Qué pasa con las guías de movimiento. Ahora flash las incluye automáticamente en la misma capa, de un

color fluorescente, y es más sencillo manipularlas.

Abre un nuevo documento.

  Dibuja un cuadrado o un óvalo y conviértelo en símbolo con F8. Dale cualquier nombre y selecciona de

tipo clip de película.

  Dale clic derecho al clip recién creado y selecciona la opción Crear interpolación de movimiento

(automáticamente Flash insertará más fotogramas).

  Si quieres prolongar o achicar la interpolación, simplemente ve al último fotograma de la misma y verás

que aparece un cursor diferente para variar la duración.

  Ahora ve al último fotograma de la interpolación y mueve el clip de película hacia la derecha o hacia la

izquierda y aumenta su tamaño (presiona Q).

  Vas a ver que apareció una línea de puntos de un color fluorescente, esa es la guía de movimiento y

puedes manipularla fácilmente con el ratón.

  Pon un stop en el último fotograma de una nueva capa.

  Prueba la película con Ctrl+Enter

Page 10: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 10/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 10

Interpolación de forma

¿Qué es?Una forma de animar objetos, que no pueden ser símbolos, textos (para aplicarles una interpolación de

forma hay que separarlos con click derecho + separar) u objetos agrupados (deben ser separados al igual

que los textos).

¿Qué varía del objeto?

Puede variar el color, tamaño, posición y forma del objeto.

¿Cómo se aplica? 

Dibujamos o incorporamos el objeto en el escenario. Insertamos un fotograma clave en el fotograma que

queramos (click derecho en el fotograma + “Insertar fotograma clave”). En este fotograma hacemos las

variaciones que queramos hacerle al objeto. Entre el fotograma 1 y el fotograma “x” donde se encuentren

las variaciones del mismo, hacemos click derecho y seleccionamos la opción “Crear interpolación de forma.

Y ya está, podemos ver el resultado presionando Ctrl + Enter para probar la película.

¿Qué pasa si yo quiero que pare la animación al terminar? 

Utilizamos el código stop(); aprendido anteriormente.

Ejemplo de interpolaciones

Interpolaciones de movimiento (archivo .fla): http://www.megaupload.com/?d=U6IO2HX7 

Interpolaciones de forma (archivo .fla): http://www.megaupload.com/?d=3D3AA3VP 

Máscaras

Otra herramienta interesante del Flash son las máscaras. Las máscaras sirven para mostrar sólo una

determinada parte de lo que se encuentra en la capa inferior. Si yo en una capa dibujo un rectángulo, en la

capa “de abajo” tengo una foto, y a la capa del rectángulo la defino como máscara, de la foto se va a ver

sólo la parte que sea abarcada por el rectángulo. El rectángulo no se va a ver, sea del color que sea o tenga

el alfa que tenga, sólo se va a ver una parte de la foto. Para que entiendas bien pondré un ejemplo.

Supongamos que quieres hacer un sencillo efecto de lupa con una interpolación de movimiento. Tienes el

dibujo de la lupa animada (por ejemplo que va de un lado a otro) en una capa, en otra tienes una imagen o

un texto pequeño y en una última capa tienes la misma imagen o texto pero más grande. ¿Cómo se hace

para lograr el efecto de lupa?

Page 11: Introduccion a Adobe Flash Cs5 2011

8/4/2019 Introduccion a Adobe Flash Cs5 2011

http://slidepdf.com/reader/full/introduccion-a-adobe-flash-cs5-2011 11/11

C.P.F. “Santa María de Jesús”  “Promoviendo una Educación Humanista” 

Prof. Yhonny MItac Julca 11

Vamos a ver...

Para conseguir el efecto debes tener el dibujo de una lupa en una capa. Esta lupa la vas a animar para que

parezca que alguien la está moviendo de un lado a otro. En otra capa debes tener el círculo que funciona

como lupa, es decir la máscara. En otra capa vas a tener el dibujo grande, que será lo que se verá sólo al

pasar la lupa por encima. Y en una última capa vas a tener el dibujo pequeño. Es decir que la estructura es

la siguiente:

Dibuja la lupa en la capa del dibujo de la lupa, dibuja un círculo en la capa de la lupa, dibuja, por ejemplo,

una flor grande en la capa del dibujo grande y por último, una flor chica en la capa del dibujo pequeño (copiala flor grande, en la capa de la flor chica presiona Ctrl+Shift+V para pegarla en el mismo lugar y achícala

con la herramienta de transformación libre). Ahora aplícale una interpolación de movimiento a las dos

primeras capas (ten cuidado, la lupa y el dibujo de la lupa deben moverse al mismo tiempo, en la misma

dirección y del mismo modo).

Ahora, si pruebas película con Ctrl+Enter no vas a ver el efecto que esperamos, porque aún no aplicaste la

máscara. Para aplicarla, dale click derecho a la capa de la lupa y tilda la opción Máscara. Ahora sí, puedes

probar película .

Aquí está el archivo por si lo quieres bajar (formato .fla): http://www.megaupload.com/?d=ZBOHGCCQ 

Ahora ya sabes todo lo básico de Flash, ya estás en condiciones, por ejemplo, de hacer un banner sencillo.

El resto depende de ti, depende de que estudies Actionscript para poder programar.

Depende de que abras Adobe Flash y te pongas curios@ a ojear todas las herramientas que no describí

aquí porque me llevaría 200 páginas más . Hay tips interesantes como lo que ya te mencioné de

mantener presionado Shift para cuadrados o círculos perfectos, el “pegar in situ” o “pegar en el mismo lugar”

(Ctrl+Shift+V), entre otros.

Espero que esta guía te haya servido de ayuda . 

“Pueblo que escucha, pueblo que ora”