Practicas de Informática 6º Bachillerato Área 2

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.

1
 Practicas de Informática 6º Bachillerato Área 2

Ventana de Flash
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

2
 Practicas de Informática 6º Bachillerato Área 2

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í.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

3
 Practicas de Informática 6º Bachillerato Área 2

Á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:
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

4
 Practicas de Informática 6º Bachillerato Área 2

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.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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".

5
 Practicas de Informática 6º Bachillerato Área 2

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.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

6
 Practicas de Informática 6º Bachillerato Área 2

Tema:Flash para presentaciones - Objetos

Práctica02

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.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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

7
 Practicas de Informática 6º Bachillerato Área 2

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.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

8
 Practicas de Informática 6º Bachillerato Área 2

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.

Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

9
 Practicas de Informática 6º Bachillerato Área 2

Tema:Flash para presentaciones – Línea de tiempo

Práctica03

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.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

10
 Practicas de Informática 6º Bachillerato Área 2

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.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

11
 Practicas de Informática 6º Bachillerato Área 2

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.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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

12
 Practicas de Informática 6º Bachillerato Área 2

Tema:Símbolos
Práctica04

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:
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

13
 Practicas de Informática 6º Bachillerato Área 2

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.
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

14
 Practicas de Informática 6º Bachillerato Área 2

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:
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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.

15
 Practicas de Informática 6º Bachillerato Área 2

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

Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

16
 Practicas de Informática 6º Bachillerato Área 2

Tema:Principios de animación
Práctica05

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:
Colegio del Tepeyac Prácticas Digitales Ciclo 2009-2010 Elaboró: Prof. César Chavarría

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

17