Complemento Modulo de Flash

17
Practicas de Informática 6º Bachillerato Área 2 1 Tema:Flash para presentaciones -Introducción a Flash Práctica01 Flash es una herramienta de edición con la que los diseñadores y desarrolladores pueden crear presentaciones, aplicaciones y contenido, que permite la interacción del usuario. Los proyectos de Flash incluyen desde simples diseños hasta complejos sitios Web con animaciones, contenido de vídeo e interacciones complejas. Dado el pequeño tamaño de sus archivos, Flash resulta ideal para crear contenido que se distribuye a través de Internet. Para lograrlo, Flash utiliza en gran medida gráficos vectoriales. Este tipo de gráfico requiere mucha menos memoria y espacio de almacenamiento que las imágenes tradicionales de mapa de bits. En la red mundial de Internet hay miles de sitios con contenido creado en Flash, algunos de ellos simples, pero otros muy complejos. La página www.thefwa.com (The Favourite Website Awards), agrupa decenas de sitios reconocidos por su alta calidad. Existen diferentes versiones de flash, pero todas tienen la misma base Entorno de trabajo El entorno de trabajo de Flash se compone de seis paneles principales que pueden mostrarse, ocultarse o moverse según sea necesario. Todos los paneles se pueden mostrar u ocultar por medio del Menú Window.

Transcript of Complemento Modulo de Flash

Practicas de Informática 6º Bachillerato Área 2

1

Tema: Flash para presentaciones -Introducción a Flash

Práctica 01

Flash es una herramienta de edición con la que los diseñadores y desarrolladores pueden crear presentaciones, aplicaciones y contenido, que permite la interacción del

usuario. Los proyectos de Flash incluyen desde simples diseños hasta complejos sitios

Web con animaciones, contenido de vídeo e interacciones complejas.

Dado el pequeño tamaño de sus archivos, Flash resulta ideal para crear contenido

que se distribuye a través de Internet. Para lograrlo, Flash utiliza en gran medida

gráficos vectoriales. Este tipo de gráfico requiere mucha menos memoria y espacio de almacenamiento que las imágenes tradicionales de mapa de bits.

En la red mundial de Internet hay miles de sitios con contenido creado en Flash, algunos de ellos simples, pero otros muy complejos.

La página www.thefwa.com (The Favourite Website Awards), agrupa decenas de sitios

reconocidos por su alta calidad.

Existen diferentes versiones de flash, pero todas tienen la misma base

Entorno de trabajo

El entorno de trabajo de Flash se compone de seis paneles principales que pueden

mostrarse, ocultarse o moverse según sea necesario. Todos los paneles se pueden

mostrar u ocultar por medio del Menú Window.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

2

Ventana de Flash

Línea de tiempo (Timeline)

Se ubica en la parte superior de la pantalla. Muestra dos dimensiones de la película: el tiempo (horizontalmente a través de frames) y la profundidad (verticalmente en

Layers o Capas).

Los componentes principales de la línea de tiempo son los Layers, los frames y la cabeza lectora. Los Layers son capas apiladas unas sobre otras, cada una de las

cuales puede contener un gráfico diferente que aparece en el escenario.

Los Layers de un documento aparecen de forma vertical, a la izquierda de la línea de

tiempo. Todos los gráficos que se colocan en el escenario se ubican en algún Layer.

Los tipos de Layers que se pueden insertar en la línea de tiempo son: Layers, Guías, Guías para movimiento y Máscaras.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

3

Al igual que en un largometraje, los documentos de Flash dividen el tiempo en cuadros o frames. Los frames contenidos en cada Layer aparecen de forma horizontal,

a la derecha del nombre del Layer.

Los tipos de frames que se pueden insertar en un Layer son: Frame, Keyframe y Blank Keyframe.

La cabeza lectora indica el frame actual que se muestra en el escenario. Mientras se reproduce una película de Flash, la cabeza lectora se desplaza de izquierda a derecha

por la línea de tiempo.

El concepto de Capa es fundamental para manejar Flash de forma eficiente.

Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).

Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí.

Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de

modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de

fácil manejo (es conveniente colocar los sonidos en una capa independiente llamada

"Sonidos", por ejemplo).

Herramientas (Tools)

Las herramientas permiten dibujar, pintar, seleccionar y modificar objetos, así como cambiar la visualización del escenario.

Biblioteca de símbolos (Library) En este panel se guardan y organizan los símbolos creados en Flash, además de

archivos importados tales como gráficos, imágenes de mapa de bits, archivos de

sonido y clips de video. En este panel puedes organizar los elementos creando carpetas.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

4

Área de Trabajo

La parte más importante es el Escenario, sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando.

El escenario tiene unas propiedades muy importantes, ya que coinciden con las

Propiedades del documento.

Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del

escenario en la que no haya ningún objeto y después sobre Propiedades del documento:

Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px

(píxeles) y el máximo de 2880 x 2880 px.

Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado

(tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como

Predeterminados)

Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.

Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la

película.

Unidades de Regla: Unidad que se empleará para medir las cantidades.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

5

La Barra de Herramientas. Herramientas Básicas.

Herramienta Selección (flecha): . Es la herramienta más usada de

todas. Su uso principal es para seleccionar objetos. permite seleccionar los

bordes de los objetos, los rellenos (con un sólo clic), los bordes (con doble clic)

Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y

se arrastra hasta donde queramos que llegue la línea recta. Una vez

creada la podemos modificar sin más que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a

la recta para curvarla.

Herramienta Texto: Crea un texto en el lugar en el que hagamos clic.

Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o

elipses de manera rápida y sencilla.

Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean.

Herramienta Lápiz: Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos,

modificando la forma de estas a nuestro gusto.

Herramienta Brocha: Su funcionalidad equivale a la del lápiz, pero su trazo es

mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.

Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite

aplicar rellenos si la zona no está delimitada por un borde.

Herramienta Borrador: Su funcionamiento es análogo a la Herramienta Brocha.

Pero su función es la de eliminar todo aquello que "dibuje".

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

6

Herramienta Lazo: Su función es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta

Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En

contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos

que hagamos la selección a mano).

Herramienta Pluma: Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo.

Herramienta Subseleccionador: Esta Herramienta complementa a la

Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.

Herramienta Bote de Tinta: Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho

borde

Herramienta Cuentagotas: Su misión es "Capturar" colores para que posteriormente podamos utilizarlos.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

7

Tema: Flash para presentaciones - Objetos

Práctica 02

A grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra película y sea visible, de modo que podamos trabajar con él, un objeto sería,

por ejemplo, cualquier imagen que creemos o importemos, un botón, un dibujo

creado por nosotros mismos etc...

Los objetos así considerados tienen 2 partes fundamentales:

El Borde: Consiste en una delgada línea que separa el objeto del exterior del escenario.

El Relleno: El relleno no es más que el propio objeto sin borde. Es, por tanto, la parte

interna del objeto.

Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto

que queramos modificar (mover, girar, cambiar de color...). Podremos observar que las partes de un objeto seleccionadas toman una apariencia con textura para indicar

que están seleccionadas.

Objeto SIN seleccionar

Objeto con el BORDE seleccionado

Objeto con el RELLENO seleccionado

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

8

Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposición el Panel Alinear. Este Panel lo podemos encontrar en el Menú Ventana →

Alinear.

Además de controlar la posición de los objetos desde el Panel Alineamiento, también podemos hacerlo, de un modo más exacto (más matemático) desde otro panel, el

Panel Información.

Si queremos ser mas preciso, podemos activar las reglas desde el menú ver -> Reglas

e incluso mostrar la cuadricula desde este mismo menú o la combinación de teclas

CTRL + ´

Grupos

Un Grupo no es más que un conjunto de objetos. Para ello, basta seleccionar los

objetos que queremos que formen parte de un grupo y después hacer clic en el Menú Modificar → Agrupar o con las teclas CTRL + G.

Para saber si varios objetos están agrupados, aparece un rectángulo azul alrededor de

ellos.

Para desagrupar se ocupan las teclas CTRL+MAY+G, o Menú Modificar →

Desagrupar.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

9

Actividades:

Realiza cualquiera de las 3 actividades que se encuentran en la carpeta: PRACTICARIO -> EJEMPLOS -> SESION 2

Guarda tu práctica como sesión 2 en tu memoria USB.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

10

Tema: Flash para presentaciones – Línea de tiempo

Práctica 03

Trabajo con la Línea de tiempo (Timeline) La línea de tiempo se utiliza para organizar las imágenes, gráficos, sonidos e

instrucciones de programación de una película. Imagina que una película Flash es

como una película de cine o una obra de teatro: diferentes actores, objetos, gráficos y secuencias sonoras, pueden entrar o salir del escenario de acuerdo

a las instrucciones que determine el director para cada momento.

De forma similar, Flash organiza los gráficos, sonidos e instrucciones a lo largo de la

línea de tiempo en cuadros consecutivos llamados frames. De forma predeterminada,

Flash reproduce 12 frames cada segundo (frames per second o fps), pero es posible

definir una velocidad diferente, desde 0.01 hasta 120 fps.

Por otra parte, en una película de cine no todos los actores y objetos están en el

mismo plano: hay elementos de fondo mientras el resto se distribuyen unos delante o

detrás de otros. En Flash esta distribución se logra con capas o Layers. Cada capa es independiente, así que pueden modificarse los objetos de una capa sin que afecten a

los objetos de otras capas. Cada capa dispone de su propia secuencia de frames,

aunque durante la reproducción todos corren en sincronía.

Cuando inicias un nuevo documento de Flash, éste tiene sólo un frame, en un sola

capa.

A partir de ahí es posible insertar tantos frames como sean necesarios y organizar el

contenido en tantas capas como quieras.

Para insertar un nueva capa usa el icono .

Para eliminar una capa ocupa el icono.

Para ponerle nombre a la capa dale doble clic en el nombre predeterminado para

poder cambiarlo.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

11

Actividad:

Abre un nuevo documento de FLASH, inserta 4 capas en la línea de tiempo.

o La primera capa se llamara Circulo

o La segunda se llamara Triangulo o La tercera se llamara Cuadrado

o La cuarta se llamara Texto

Tipos de Frames

Cuando insertas nuevos frames o fotogramas , pueden ser de alguno de los siguientes

tipos:

Blank Keyframe (Fotograma clave vacío): Son Keyframes sin contenido. Se identifican

por tener un punto blanco.

Keyframe (Fotograma clave): Son frames con un contenido específico, que se crean para insertar contenido nuevo en la película. Se identifican por tener dentro un

punto negro.

Frame (Fotograma normal): Son los frames que siguen a un Keyframe. No

representan contenido nuevo, ya que contienen exactamente lo mismo que el Keyframe que les precede. Se utilizan para alargar la duración deun contenido que

permanece sin cambios durante cierto tiempo en la película y son de color gris.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

12

Actividad

Crea un keyframe en cada una de las 4 capas antes creadas.

Con las herramientas anteriores dibuja la figura correspondiente a cada capa

Alarga los fotogramas hasta el número 10 de cada capa.

Guarda tu práctica como sesión 3 en tu memoria USB.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

13

Tema: Símbolos

Práctica 04

Un símbolo es un objeto que se guarda en la biblioteca con el objetivo de usarlo más

de una vez durante la película o asignarle código de programación.

La ventaja de utilizar símbolos es que pueden reutilizarse cuantas veces se desee sin

aumentar el peso final del archivo.

También se utilizan símbolos para crear animaciones, ya que todo símbolo cuenta con

su propia Línea de tiempo, independiente de la línea de la película, con sus propios

Layers y frames.

Así, cada símbolo es como una película de Flash completa, que está dentro de la

película principal. Un símbolo puede incluso contener más símbolos, cada uno con su propia línea de tiempo.

La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación, como veremos más

adelante.

El procedimiento es el siguiente:

Seleccionamos el objeto que queramos convertir en símbolo. Abrimos el panel de Propiedades del Símbolo, accediendo al menú Insertar → Nuevo

Símbolo o simplemente pulsando Ctrl + F8 o F8.

Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen.

Introducimos el nombre del símbolo que vamos a crear.

Bastará con pulsar Aceptar para tener nuestro símbolo creado.

Al crear un símbolo, este automáticamente se va a la biblioteca de nuestra película.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

14

Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan:

Clip Botón Gráfico

MovieClip. Se utiliza principalmente cuando el símbolo contiene animación. Cuenta con una Línea de tiempo en la que podemos agregar los Layers y los frames que

necesitemos. El comportamiento de un MovieClip puede ser programado con código

escrito en el lenguaje ActionScript.

Button (Botón). Es un símbolo que reacciona al puntero del ratón como lo haría un botón estándar de Windows. Se utiliza para agregar interactividad en una película

Flash. El comportamiento de un botón se programa con ActionScript.

Un símbolo de tipo botón, cuenta con una línea de tiempo especial de cuatro frames, en los que se definen los cuatro estados posibles de un botón: Up, Over, Down y Hit.

Up. Este frame contiene la imagen, sonido y acciones del botón en su estado normal o apagado.

Over. Contiene la imagen, sonido y acciones del botón, que se despliegan cuando el puntero del ratón está sobre él.

Down. Contiene la imagen, sonido y acciones del botón, que se despliegan

cuando se hace clic sobre él.

Hit. Contiene una imagen que delimita el área sensible del botón. Esta imagen

nunca se ve en el escenario.

INSTANCIAS

Cuando creamos un símbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una película, éste se convierte en una instancia.

Una instancia es una imagen clon del símbolo original.

Puedes crear todas las instancias que quieras de un mismo símbolo, modificar cada

instancia cambiando sus dimensiones o propiedades o aplicar diferente

comportamiento a cada una mediante programación.

Cuando modificas cualquier instancia, el símbolo original no se ve afectado. En el caso

opuesto, si modificas el símbolo original, todas sus instancias son afectadas.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

15

Panel Propiedades de Instancia

Para acceder al panel de propiedades de instancia, debemos seleccionar en primer lugar la instancia que queramos modificar y posteriormente abrir el Panel

Propiedades.

Si seleccionamos un objeto Flash que no se trate de un símbolo, el Panel Propiedades

mostrará las propiedades del objeto en cuestión, pero no las características propias de

los símbolos (cambios de color, intercambios etc...)

Nombre de la instancia: Se utiliza para identificar la instancia de un símbolo. Es

muy recomendable asignar un nombre en cuanto se crea una instancia, ya que es

necesario para la programación: X. Indica o asigna la posición horizontal en el escenario.

Y. Indica o asigna la posición vertical en el escenario.

An: Muestra o determina el ancho de la instancia. Al: Muestra o determina el alto de la instancia

Para acceder a los efectos aplicables sobre una instancia determinada, debemos

acudir nuevamente al Panel Propiedades, desde aquí podremos acceder a todos los efectos que Flash nos proporciona.

Hay varios tipos de efectos. Si el símbolo se acaba de crear o si no tiene efecto asignado aparecerá en la pestaña Ninguno.

En el siguiente apartado comentamos los distintos efectos aplicables a una instancia.

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

16

Actividades

Realiza una película con las siguientes características:

Para cada objeto colócalo en una capa diferente, con sus respectivos nombres. Para las flores crea un símbolo y crea instancias de el.

Guárdalo como sesión 4 en tu USB

Practicas de Informática 6º Bachillerato Área 2

Co

legio

de

l Te

pe

yac P

ráct

ica

s D

igit

ale

s C

iclo

20

09

-20

10

E

lab

oró

: P

rof.

Césa

r C

ha

varr

ía

17

Tema: Principios de animación

Práctica 05

En Flash se pueden utilizar tres técnicas de animación a lo largo de la línea de tiempo

de cualquier Layer: Animación Cuadro por Cuadro, Animación MotionTween y Animación ShapeTween.

Animación Cuadro por Cuadro (frame by frame)

En esta técnica de animación se utiliza un Keyframe para cada movimiento o cambio, .

La técnica también se conoce como animación tradicional, ya que cuadro por cuadro

era la única forma en que podían hacerse los dibujos animados antes de las computadoras.

Este tipo de animación funciona muy bien desde una velocidad de 12 frames por segundo.

Para crear animación frame by frame coloca la imagen original en un Keyframe. Inserta

adelante de él un segundo Keyframe y haz alguna modificación a la imagen. Inserta otro Keyframe y continúa la modificación. Continúa cuadro por cuadro hasta terminar

la animación.

Actividades:

Realiza una película la cual tenga una elipse al centro de la misma, y esta debe de

cambiar de color mínimo 5 veces, ubicada en la misma posición.

La animación de debe hace frame por frame

Guárdala en tu USB como Sesión 5.

Puedes guiarte viendo el archivo en tu carpeta:

PRACTICARIO-> EJEMPLOS-> SESION5