INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V

Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE

Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

Introducción a Flash CS3

¿Qué es FLASH?

Flash CS3 es una potente herramienta desarrollada por Adobe que ha superado las mejores
expectativas de sus creadores.

Inicialmente Flash fue creado por Macromedia (Adobe) con el objeto de realizar
animaciones vistosas para la web, así como para crear GIFs animados.

Los motivos que han convertido a Flash CS3 en el programa elegido por la mayoría de los
diseñadores web profesionales y aficionados son varios.

Mi primera Animación Flash

Comenzando

Una de las características principales de Flash es su sencillez, esta sencillez en su utilización

permite crear animaciones de un modo efectivo y rápido.

Pongámonos en situación, supongamos que queremos crear una animación en la que una
pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo
de horas, pero nada más lejos de la realidad. Veamos cómo Flash nos lo pone fácil.

Realizando la Animación

En este apartado no pretendemos enseñar cómo crear una animación Flash (pues eso se verá
más adelante), el objetivo es que entendamos cómo crea Flash las animaciones y de que
modo nos facilita el trabajo

A primera vista, lo lógico parece ser dibujar la pelota en cada instante del movimiento, de
modo que cuantos más instantes dibujemos, más real parecerá el movimiento. Pues bien,
con Flash bastará con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante
 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

inicial (arriba del todo), en el segundo se dibujará la pelota en el momento de tocar el suelo
y en el tercero la pelota volverá a estar arriba (en realidad este tercer fotograma no hará falta
crearlo, pues bastará con copiar el primero). Por tanto, vemos que el trabajo más largo
(dibujar los objetos) ya está hecho.

Ahora, se determina el tiempo que durará cada movimiento (es decir, el tiempo que
transcurre entre los instantes en los que la pelota está arriba y abajo) y por último se le indica
a Flash que cree una animación de movimiento entre estos fotogramas. Fácil ¿verdad?

El Entorno de Trabajo (I)

La Interfaz de Flash CS3
Flash CS3 cuenta con un entorno o interfaz de trabajo renovada de lo más manejable e
intuitiva. Además, tiene la ventaja de que es similar a la de otros programas de Adobe
(Photoshop, Dreamweaver, Illustrator...), todo esto hace más fácil aprender Flash y más
rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS3 por
primera vez:

En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el
programa Flash. Flash recordará nuestras preferencias y abrirá el programa tal y como lo
dejamos la última vez que lo utilizamos.

Partes principales de la interfaz de Flash:

 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

La Barra de Menús

La Barra de Menús
tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a
la de cualquier otro programa de diseño web o gráfico, aunque tiene algunas
particularidades. Veamos los principales Submenús a los que se puede acceder:

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la

utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo,
imágenes e incluso otras películas Flash), o la de Configuración de Publicación desde donde
se pueden modificar las características de la publicación. También permite configurar la
impresión de las páginas.

Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos
como fotogramas; también permite personalizar algunas de las opciones más comunes del
programa.

Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas.
También incluye la posibilidad de crear una cuadrícula y unas guías. Esto se puede
seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden
configurar sus opciones.

Insertar: Te permite insertar objetos en la película, así como nuevos fotogramas, capas,
acciones, escenas...

Modificar: La opción Transformar permite modificar los gráficos existentes en la película,

y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales. El resto de
opciones permite modificar características de los elementos de la animación Suavizar,
Optimizar o de la propia película (Capa, Escena ...).

Texto: Sus contenidos afectan a la edición de texto. Más adelante se tratará en profundidad.

Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que

permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos
almacenado en nuestra animación, obtener otros nuevos de la página de Macromedia o
ejecutar los que ya tengamos.

Control: Desde aquí se modifican las propiedades de reproducción de la película.

Reproducir, Rebobinar, Probar Película....

Depurar: Aquí encontrarás las opciones de depuración de la película que te ayudaran a

encontrar errores de programación en ActionScrit, entre ellos se encuentran Entrar, Pasar,
Salir, Continuar...
 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas,
incluye accesos directos a TODOS los Paneles y también la posibilidad de crear tus propios
Espacios de Trabajo, guardalos, cargalos, etc.

Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Adobe, desde el manual
existente, hasta el diccionario de Action Script, pasando
por tutoriales, lecciones guiadas etc...

Ejercicio 1. Crear Guía de Dibujo. Cuadrícula

Objetivo.

Crear una cuadrícula que quedará visible al fondo del fotograma (posteriormente no saldrá
en la película) y que nos servirá como guía para poder dibujar objetos de forma exacta y
precisa.

Ejercicio paso a paso.

1 Pulsa en el menú Archivo.

2 Selecciona la opción Nuevo.

3 Aparecerá una nueva película. Si deseas crear la cuadrícula sobre una película ya
empezada, sáltate los 2 primeros pasos.

4 Selecciona la opción Cuadrícula del menú Ver.

5 Se desplegará un submenú como el de la figura.

6 Selecciona la opción Mostrar Cuadrícula para hacerlo visible.

7 Selecciona la opción Editar Cuadrícula para ajustar los parámetros de la cuadrícula a tu

gusto (tamaño, color de fondo...)

8 Selecciona la opción Ajustes → Ajustar a Cuadrícula del menú Ver para que los objetos
que crees se acomoden a las líneas de la cuadrícula, consiguiendo alinearlos de un modo
fácil.

LA LÍNEA DE TIEMPO

La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado.
Consta de 2 partes.
 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando
rectángulos)

2) Los Números de Fotograma que permiten saber

qué número tiene asignado cada fotograma,
cuánto dura o cuándo aparecerá en la película.

Además, en la parte inferior hay herramientas

para trabajar con Papel cebolla e información sobre el Número de Fotograma actual, la
Velocidad de los Fotogramas (12.0 en la imagen) y el Tiempo de película transcurrido (0.0s
en la imagen).

A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo.

Es decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de
tiempo uno detrás de otro, en el orden
que establece la misma Línea de
tiempo.

Para saber más acerca de la Línea de

Tiempo y de los distintos tipos de
fotogramas que existen visita nuestra
Página Avanzada.

LAS CAPAS

El concepto de Capa es fundamental

para manejar Flash de forma eficiente.
Dada la importancia de estas, se le
dedicará un tema completo. Aún así,
veamos a grandes rasgos qué son las
capas.

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). Las ventajas y desventajas de usar capas se verá en el Tema 8.

EL ESCENARIO

A continuación veremos las diferentes partes que conforman el Área de trabajo

empezaremos con la más importante: el Escenario.
 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

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:

Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de
busqueda rellenando los campos de Título y Descripción.

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.

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

Transformar en predeterminado: Este botón, propio de la nueva versión de Flash, permite

almacenar las propiedades del documento actual y aplicarlas a todos los documentos
nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrán
ser alteradas desde este panel cuando se desee.

Ejercicio 2. Cambiar Propiedades de la Película

Objetivo.

Practicar cómo se pueden cambiar algunos atributos fundamentales de las películas.

Ejercicio paso a paso.

1 Haz clic con el botón derecho sobre el fondo de la película.

2 Selecciona Propiedades del Documento.

3 En Unidades de Reglas selecciona Centimetros.

4 A continuación selecciona Dimensiones y escribe en las casillas Anchura 22.46 y en Altura

16.84.
 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

5 Pulsa en Aceptar y observa cómo cambia el tamaño. Estas medidas equivalen a las
estándar 640 x 480 px.

LAS VISTAS O ZOOMS

La Herramienta Lupa se emplea para acercar o alejar la vista de un objeto, permitiendo

abarcar más o menos zona del Entorno de Trabajo. Cada vez que hagamos clic en la Lupa
duplicaremos el porcentaje indicado en el Panel Zooms.

Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en el Menú Ver.
Son muy útiles y ayudan a acelerar el trabajo cuando se emplean
correctamente.

Los Paneles

Los Paneles son conjuntos de comandos agrupados según su función

(por ejemplo, todo lo que haga referencia a las acciones, irá en el Panel "Acciones"). Su
misión es simplificar y facilitar el uso de los comandos.

Estos paneles o ventanas se encuentran organizados en el lateral derecho del área de trabajo.
Pudiéndose expandir o minimizar con un clic de ratón.

Si no están visibles en el lateral derecho, puedes visualizarlos desplegando el menú Ventana

y haciendo clic sobre el nombre del panel que quieras mostrar.

Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy útil.

Panel Color: Mediante este panel creamos los colores que más nos gusten.

Panel Muestras: Nos permite seleccionar un color de modo rápido y gráfico. (Incluidas
nuestras creaciones).

Panel Información: Muestra el tamaño y las coordenadas de los objetos seleccionados,

permitiéndonos modificarlas. Muy útil para alineaciones exactas.

Panel Escena: Modifica los atributos de las escenas que usemos.

Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados.

 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra
película.

Panel Comportamientos: Permiten asignar a determinados objetos una serie de

características (comportamientos) que después podrán almacenarse para aplicarse a otros
objetos de forma rápida y eficaz.

Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para
ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con
propiedades características y muchas utilidades (calendarios, scrolls etc...)

Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras películas.

Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles

desde este panel.

Panel Propiedades: Sin duda, el panel más usado y más importante. Nos muestra las
propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo,
tamaño de los caracteres, tipografía, propiedades de los objetos (si hay interpolaciones
etc...), coordenadas, tamaño etc... Es fundamental, no debeis perderlo de vista nunca.

Panel Explorador de Películas: Nos permite acceder a todo el contenido de nuestra película
de forma fácil y rápida

Ejercicio 3. Abrir Paneles

Objetivo.

Abrir los Panel de Muestras y seleccionar una muestra de color.

Ejercicio paso a paso.

1 Pulsa en el menú Ventana.

2 Selecciona la opción Muestras, si ya tuviera una señal

junto al nombre del Panel, significa que ya está abierto.
Sino, haz clic sobre él.

3 Ahora selecciona el color verde de dicho panel, observa

que al acercar el cursor, éste tomará la forma de la
herramienta cuentagotas (que servía para seleccionar un
color).

4 Todo lo que dibujemos de ahora en adelante, será de color verde (podemos usar este
mecanismo para cambiar el color de relleno o el color del trazo)

Ejercicio 4: Crear una Película a nuestro gusto

 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

Crea una película que tenga las siguientes propiedades:

1. Un tamaño de 300 x 100 px

Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento.

Pulsamos sobre la pestaña Unidades de Regla y seleccionamos Píxeles (px)

Introducimos las medidas pedidas (300 x 100) en Dimensiones.

2. Color de Escenario de fondo rojo

Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento

Pulsamos sobre la pestaña Color de fondo, el puntero se convertirá en un "cuentagotas".

Seleccionamos el color pedido.

3. Un Velocidad de los Fotogramas de 14 fps para reproducción de la película

1 Hacemos clic con el botón derecho y pulsamos sobre Propiedades del Documento.

2 En Veloc. Fotogramas escribe 14 fps.

El resultado debe ser un rectángulo rojo con las medidas propuestas.

Ejercicio 5: Estructurar una Película

1. Abre una nueva película

Abrimos una nueva Película desde el menú Archivo → Nuevo

Accedemos al Panel Escena desde Ventana → Otros Paneles → Escena

2 Crea 2 Escenas y llámalas E1 y E2

Creamos una nueva Escena pulsando sobre el signo

Les cambiamos los nombres haciendo doble clic en sus nombres actuales

3 Crea 2 capas en cada una.

Seleccionamos la Escena E1 en el Panel Escena

Creamos otra capa más, pulsando el signo .

Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres actuales (por
defecto Capa 1 y Capa 2)
 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

4 Llámalas E1_1, E1_2 y E2_1, E2_2

Seleccionamos la Escena E2 en el Panel Escena y repetimos los

pasos anteriores del 2 al 3.

El Panel Escena debería quedar así:

Y así las Capas:

Ejercicio 6: Creando Fotogramas

1 Crea en una película nueva 3 fotogramas clave

1 Abrimos una nueva película

2 Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe

3 Vamos al menú Insertar y seleccionamos Fotograma Clave

4 Hacemos clic sobre el fotograma 3 y seleccionamos Insertar → Línea de Tiempo →

Fotograma Clave

2 Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto

Ya tenemos los 3 Fotogramas Clave creados. Faltan los fotogramas normales

1 Seleccionamos el fotograma 1 y hacemos clic en el menú Insertar → Línea de Tiempo y

seleccionamos Fotograma.

2 Ahora el fotograma 2 será un fotograma normal y el 3 y el 4 serán Fotogramas Clave.

Seleccionamos el fotograma 3 y repetimos el proceso anterior.

3 Seleccionamos el fotograma 5 y lo volvemos a repetir. Esto será lo que obtengamos:

Fijémonos en que no están los puntos negros en los Fotogramas Clave ni

los cuadrados blancos en lo fotogramas normales.
 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

Esto se debe a que no hay nada dibujado en dichos fotogramas.

Al insertar algo en cada par de fotogramas e inmediatamente

obtendrás esto:

Ejercicio 7: Identificando Fotogramas

1 Dada la siguiente película

Identifica todos los tipos de fotogramas existentes y a

qué tipo pertenecen. ¿Recuerdas para qué sirve cada
uno?

1) Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros representan una

animación de Movimiento. (probablemente contendrán al mismo objeto pero cambiado de
lugar). El tercero es un Fotogramas Clave normal.

2) Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos) son

fotogramas normales. Simplemente determinan la duración de los Keyframes a los que
van asociados.

3) Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas Contenedor.

Existen y en la película se verán como fotogramas en blanco (o con el color de fondo que
hayamos seleccionado).

4) Los fotogramas del 16 en adelante son fotogramas vacíos y no se verán en la película.

Ejercicio 5: Reconocimiento de Paneles

1 Abre el Panel Color.

2 Abre el Panel Acciones.

3 Abre el Panel Alinear.

4 Cierra el Programa Flash CS3

5 Vuelve a abrirlo. ¿Qué notas?

 INSTITUCIÓN EDUCATIVA MEGACOLEGIO EL PROGRESO DE LA COMUNA V
Asignatura TECNOLOGÍA E INFORMÁTICA Periodo DOS GUIA DE APRENDIZAJE
Grado SEPTIMO TEMA: FALSH CS3
Docente Yohana Tapias Salamanca

Ejecución

1 Abrimos el Menú Ventana.

2 Hacemos clic en Color. Se abrirá el Panel correspondiente.

Repetimos los pasos del 1 al 2, pero abriendo el panel Alinear.

3 Cerramos el programa y lo volvemos a abrir.

4 Observamos que los Paneles siguen donde los dejamos. Flash CS3 adapta su entorno a
nuestras preferencias.