flash manual 8

ITSON

Lic. Victor Valenzuela

Instituto Tecnológico de Sonora

ITSON

Manual Objetos de Aprendizaje Flash

Objetos de Aprendizaje Flash

2 Lic. Victor Hugo Valenzuela Valencia

Objetivo:

Desarrollar material multimedia interactivo a través de software Flash a fin de mejorar

la presentación de elementos de un objeto.

Objeto de Aprendizaje

Una entidad informativa digital construida para la generación de conocimiento,

habilidades y actitudes que tiene sentido en función de las necesidades del sujeto y

que se corresponde con la realidad

Animaciones Flash

Flash es un software destinado a la creación de animaciones y diseños vistosos

para la web y gráficos interactivos.



¿Por qué utilizar flash?

Las posibilidades de este software son extraordinarias, ha ido mejorando versión a

versión, es recomendado para los diseñadores web y desarrolladores de contenido interactivo.

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 .

Flash es fácil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas

y horas creando lo que nos dicte nuestra imaginación I. El entorno de trabajo.

Es similar a la mayoría programas de diseño se pueden apreciar los menús, las herramientas,

el área de trabajo, la barra de propiedades y el área de paneles. Definamos uno por uno.

a) Línea del Tiempo y Capas: Es una regla que muestra los fotogramas de modo simplificado.

b) Fotogramas: Representan el contenido de la película en un instante de tiempo, es decir

en cada fotograma puede existir un objeto diferente.

*si quieres aprender más sobre fotogramas visita:

http://www.aulaclic.es/flash-cs5/a_2_3_1.htm

MENUS

H

E

R

R

A

M

I

E

N

T

A

S

ÁREA DE

TRABAJO

LÍNEA DEL TIEMPO

PROPIEDADES

PANEL

http://www.aulaclic.es/flash-cs5/a_2_3_1.htm



c) Área de trabajo: Es el escenario donde ubicaremos los elementos que conforman nuestra

película. Delimita el área que aparecerá en la publicación final.

d) Paneles: Son un conjunto de comandos agrupados según su acción, es decir son ordenes que

se le dan a objetos organizados por su función. Se agrupan del lado derecho y si no están

activos se encuentran en el menú -> Ventana.

e) Panel de propiedades y acciones

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 Transformar: Ensancha, encoge, gira ... los objetos seleccionados

Panel Librería: Enlista en orden alfabético todos los objetos que constituyen nuestra pelicula

Entre otros.

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

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



II. Fotogramas

*Crear una carpeta con su nombre + flash: Ej. Victor Valenzuela Flash

1. Abrir el programa y crear un nuevo documento en blanco

2. Guardar como animación por fotograma

3. Dibujar un stickman con el pincel en el área de trabajo

4. Podemos observar que ahora aparece un círculo negro en el número 1 de nuestra línea

del tiempo.

5. Dar clic en el fotograma 1 y presionar f6 para agregar un nuevo fotograma clave,

aparecerá otro punto y le hacemos alguna modificación al stickman



6. Seguimos agregando con f6 en el 2, 3, 4, 5 hasta el 10 y hacemos modificaciones en

cada fotograma.

7. Para ver el resultado presionamos CTRL ENTER

8. Guardar documento



III. Mi primera animación de movimiento.

*Crear una carpeta con su nombre + flash: Ej. Victor Valenzuela Flash

9. Abrir el programa y crear un nuevo documento en blanco

10. Guardamos el documento como: Primera animación

11. Utilizando la herramienta de óvalo dibujaremos y escogiendo un color en relleno un

círculo en la parte baja y centro de nuestra área de trabajo.

Quitar el color a

contorno



12. Convertir a símbolo dando clic derecho sobre la figura y Convert to symbol; este paso

es clave para realizar cualquier animación de movimiento.

13. Definimos nombre y tipo de símbolo OK

Podremos apreciar un recuadro azul y un punto blanco que se dibuja en nuestra figura.

14. En nuestra línea del tiempo dar clic en el fotograma 10

15. Presionamos F6 para crear un fotograma clave:

Ahora tenemos dos puntos.

Lo cual significa que existen

dos estancias en mi película y

el espacio entre estos se

torno en gris.



16. Mover el círculo hacia la parte superior de nuestra área de trabajo.

17. Al dar clic en el fotograma 1 podemos observar que el círculo sigue abajo y el 10 está

arriba.

18. Dar clic en el fotograma uno y en el panel propiedades modificar tween None por

tween motion

19. Podemos observar que cambio nuestra línea del tiempo en el espacio gris ahora hay

una flecha.

20. Para ver el resultado de este proceso presionamos Ctrl+Enter para reproducir nuestra

animación, o F12 para ver como archivo HTML.

Esto nos indica que hay una

animación de movimiento bien

elaborada.

Lo podemos hacer con las

flechas del teclado o

directamente presionado

y arrastrando con el

mouse.



21. Guardamos nuestro archivo.

22. En nuestra carpeta encontraremos los archivos

a. .FLA que corresponde al archivo editable

b. .SWF que corresponde a la película

“si presionamos F12 tendremos 3 archivos”

23. Crear un nuevo movimiento

24. Dar clic en el fotograma 20

25. Agregar un fotograma clave presionando F6

26. Regresar la figura a la posición inicial.

Se despliega una nueva ventana y se

aprecia el movimiento de nuestra

figura. Existe desplazamiento entre

un punto y otro.



27. Dar clic en el fotograma 10 y modificar la propiedad de Tween None por Tween

Motion.

28. Ver la animación presionando CTRL+ENTER

29. Guardar archivo

IV. ANIMACIÓN DE FORMA

1. Crear un documento nuevo de flash

2. Guardarlo como “Forma”

3. Elegir la herramienta rectángulo, verificar que este desactivado el color de contorno y

elegir un color de relleno

En la animación de forma no es necesario convertir en símbolo.



4. Insertar un fotograma clave con F6 en el 10

5. Borrar el cuadrado y dibujar un círculo en la esquina contraria de un color diferente.

6. Dar clic en el fotograma 1 y en el panel de propiedades cambiar Tween None por

Tween Shape.

Como podemos observar se creó una flecha al igual que en animación de

movimiento, la diferencia es el color verde que indica que tipo de animación es.

7. Presionamos CTRL + ENTER para ver el resultado.

8. Agregar un nuevo cambio, insertar fotograma clave F6 en el 30 (para que se aprecie un

poco más lento el cambio)

9. Borramos el circulo y en la parte de abajo del área de trabajo escribimos un texto.

En esta ocasión utilice un texto azul, tamaño 90.



10. Este paso es clave en Animación de Forma, dar clic derecho sobre el texto y elegir

Break Apart (separar)

11. Repetimos, Clic derecho Break Apart.

12. Vamos al fotograma 10 y modificamos en propiedades Tween None por Tween

Shape.

13. Presionamos CTRL + ENTER para ver el resultado.

14. Agregar un último movimiento, insertamos fotograma clave en el 60 (para ver aun más

lento el cambio)

15. Borramos el todo el texto cuidar que no queden residuos y copiamos con CTRL + C el

cuadro del primer fotograma y lo pegamos con CTRL + SHIFT + V en el fotograma 60.



16. Dar clic en el fotograma 30 y modificamos las propiedades de Tween None por

Tween Shape.

17. Ver el resultado presionando CTRL + ENTER

18. Guardar el documento.



V. ANIMACIÓN Y GUIA DE MOVIMIENTO

1. Crear un archivo nuevo.

2. Guardar como guía de movimiento.

3. Insertar la imagen de un carro.

4. Convertir en símbolo clip de película

5. Crear fotograma clave F6 en el 60.

6. Ir al fotograma uno y cambiar la propiedad tween none por tween motion

7. Cambiar de nombre a esa capa por Carro

8. Agregar capa Guía de movimiento presionando en

9. Bloquear la capa carro.

10. Dar clic en el fotograma 1 de la capa Guide.

11. Dibujar con la herramienta pluma lo siguiente:

“cuidar que la silueta no se despegue en ningún momento”

12. Bloqueamos la capa guía y desbloqueamos capa carro.



13. En el fotograma 1 colocar nuestro símbolo en el inicio de la silueta “buscando

que el punto de registro que lleva en medio quede sobre la línea.

14. En el fotograma 60 colocarlo al final.

15. Presionamos CTRL + ENTER para ver el resultado de nuestra animación



VI. BOTONES 1. Crear archivo nuevo

2. Guardarlo como botones

3. Dibujar un circulo “sin contorno” en el área de trabajo

4. Convertir en Símbolo -> Botón

5. Dar doble click para entrar en el símbolo

6. Insertamos fotogramas clave F6 en Over y Down

7. Dar clic en el fotograma de Over y cambiar el color de nuestro circulo.

Podemos observar que enseguida de

Timeline se agrego después de Escena

el nombre Botón 1 eso nos quiere decir

que estamos dentro de ese símbolo.

Enseguida de Layer la línea del tiempo

cambio a solo cuatro estancias “up”

“over” “Down” y “hit”.



8. Hacemos lo mismo en el fotograma Down y cambiamos a un color distinto

9. Presionamos CTRL + ENTER para ver el resultado de nuestra animación

10. Volvemos a Escena, dando clic donde dice Scene 1

11. Podemos apreciar que volvimos al área normal de trabajo.



VIII. LA MANO

1. Buscar la imagen de una mano y guardarla en sus documentos

2. Abrir un documento nuevo de flash

3. Importarla al escenario CTRL R, nombrar esa capa mano.

4. Crear una nueva capa llamada botones

5. Bloquear la capa mano



6. Dibujar ovalos sobre las llemas de los dedos

7. Cada óvalo convertirlo en Botón presionando clic derecho sobre el Convert To

Symbol Button le asignamos el nombre del dedo, por ejemplo pulgar.

8. Entrar al primer símbolo pulgar haciendo doble clic sobre el

9. Observa que la imagen se ha vuelto traslúcida y que la línea del tiempo incluye

Up, Over y Down.



10. Da clic debajo de Hit y Presiona F6 para insertar fotograma clave en esa

instancia.

11. Da clic debajo de Up y borra el óvalo

12. Bloquea esa capa y nómbrala óvalo

13. Crea una nueva que se llame texto

14. Inserta fotograma clave F6 debajo de Over en la capa Texto y escribe la palabra

PULGAR.



15. Presiona CTRL ENTER para ver el resultado pasando tu mouse sobre el pulgar

16. Regresa a Escena y repite los pasos anteriores con Indice, Medio, Anual y Meñíque.

17. Puedes agregar el título Los nombres de los dedos al objeto de aprendizaje



IX. ACTION SCRIPT

1. Crear nuevo documento flash

2. Guardarlo con el nombre de Action Script (guión de acción)

3. Vamos a crear una animación básica de movimiento (como la primera

animación que hicimos).

a. Dibujamos un circulo

b. Convertimos en clip de película

c. Fotogramas clave en el 10 y el 20

d. En el 10 lo movemos hacia arriba

e. Tween motion al 1 y al 10

4. Cuando reproducimos la película el movimiento es constante, no se detiene.

Vamos a controlar el fin de nuestra película añadiendo una acción que le diga a

mi película “deténte”.

5. Dar clic en el fotograma 20

6. Buscar y desplegar el panel de Action que se encuentra sobre el de

Propiedades.

Si no se encuentra ahí el

panel, lo buscamos en el

menú:

Window-> Actions



7. Clic en Global functions y clic en Time line Control:

8. Elegiremos stop : dar doble clic sobre stop

9. Vemos el resultado presionando f12 o Ctrl + Enter

10. Ahora nuestra película se detiene en el fotograma 20.

11. Crear nueva capa “botones” y bloqueamos layer 1

12. En esta capa crearemos un botón con la figura de triangulo:

Dentro de esa lista

encontramos varios

controles que le dictan

instrucciones a mi

fotograma.

Podemos apreciar 2 cosas:

- La primera que se escribió enseguida

del panel la palabra stop() en color azul

- Que nuestro fotograma presenta una

letra “a” sobre él.



13. Convertimos la figura en símbolo botón “play”

14. Dando clic en la figura botón desplegamos en menú actions

15. Minimizamos dando clic en Time Line Control y Desplegamos Movie Clip

Control

16. Dar doble clic en “on”.

Con la herramienta polígono, modificamos las opciones del

panel de propiedades, especificamos 3 lados y dibujamos un

triangulo sin contorno



17. Elegimos press, si se nos quita el menú desplegado podemos escribirlo dentro

de los paréntesis.

18. Dar clic delante del primer corchete para que se posicione nuestro marcador de

texto en ese lugar.

19. Desplegamos Timeline Control y doble clic en Play

20. Reproducimos nuestra película, termina en el fotograma 20 y al dar clic en el

botón vuelve a comenzar.

Ahí damos

clic

Esa acción le dice a mí botón:

On (enciéndete)

Press (y que al presionarlo)

Play (Reproduzca mi película)

Sin ese orden no funcionaría la

action.



21. Ahora haremos el botón de Stop.

22. Dibujamos un cuadro sin contorno y lo convertimos en símbolo botón.

23. Dar clic en el botón stop y desplegar el panel de actions

24. Es acción le da las propiedades al botón de poder detener la película cuando

lo presionen.

25. Vemos el resultado presionando f12 o Ctrl+Enter.

26. Guardamos el documento.

Buscamos en Movie clip control: On, Elegimos la opción Press, y delante del primer

corchete, elegimos stop de la sección Timeline Control



X. PROYECTO FINAL LOAD MOVIE

En esta sección iniciaremos el proyecto final.

1. Tema

a) Elige un tema que vaya acorde con “Las partes de algo” por ejemplo: los estados de

México, Las partes del cuerpo humano, la célula animal, partes de una computadora,

etc. Cuida que no se repita tu tema.

b) El ejemplo se manejará con las partes del cuerpo humano

c) Busca una imagen que muestre las partes de las que quieres transmitir información.

d) Identifica al menos 5 partes y recaba la información necesaria que dé a conocer la

descripción de esa parte (se utilizará más adelante).

2. Audio

e) Dirígete a vozme.com donde generaremos los audios

f) Cambia a Español, escribe la palabra y presiona en generar MP3

g) Presiona Clic derecho sobre Descarga MP3 y elige guardar Enlace

h) Guárdalo en una carpeta específica para el proyecto.



a. Convertir Audio de MP3 a WAV

a) Descarga el programa TOTAL VIDEO CONVERTER de www.guaymax.com/tvcp.exe

b) Ábrelo

c) Presiona New Task -> Import Files

d) Selecciona tu archivo

e) Elige CDWAV -> MSwav

http://www.guaymax.com/tvcp.exe



f) Cambia la carpeta destino, asegúrate que no se mezcle con los MP3 asignando una

carpeta específica

g) Convert Now

h) Repite los pasos con todos los audios más adelante los utilizaremos.

3. Flash

i) En un documento nuevo de flash cambia las propiedades del tamaño del lienzo a

800X600

Aquí se cambia destino



j) Guarda el documento con el nombre del tema: cuerpo

k) Importa la imagen al escenario

l) Acomódala de la siguiente manera, utiliza las Reglas (RULERS) Menu –View – Rulers

para apoyarte.

m) Añade el título de lo que se tratará tu objeto y nombre de autor (en pequeño

centrado)

n) Nombra a esa capa imagen e inserta un fotograma F5 de acuerdo al número de partes

que vayas a considerar más 1 que es la portada, en el ejemplo se identifican 7 partes

entonces más 1, presionaré F5 en el fotograma 8.

o) Añade la acción stop al primer fotograma (Actions – Timeline Control – doble clic a

Stop)



p) Bloquea esa capa y crea una nueva que se llame texto

q) En el primer fotograma escribe las instrucciones.

r) Presiona F6 en el fotograma 2 para crear un fotograma clave y cambia la información

de instrucciones por la primer parte del objeto.



s) Haz lo mismo con el fotograma 3, 4, 5, etc. Cambiando la información para cada parte

del objeto.



3.1 añadir el audio.

a. Presiona File- Import- To libarary para importar tus archivos WAV a la biblioteca

b. Selecciona los archivos de la carpeta todos al mismo tiempo y abrir



c. Observa tu librería, al lado derecho y tendrás los audios además de la imagen. Si no se

encuentra activa la librería dirígete a Widow - Library

d. Clic en el fotograma 2 y arrastra el audio correspondiente a la información hacia el

área de trabajo.

e. Repite los pasos con el fotograma 3, 4, 5, etc. Asignando el audio correspondiente.



f. Una vez añadidos todos los audios observarás una pequeña línea sobre el fotograma;

significa que ahí hay una pista de sonido.

g. Bloqueamos esa capa y agregamos una nueva que se llame botones.

3.2 Botones

1. Vamos a dibujar o encerrar en una figura la primera parte del cuerpo, similar a lo

que hicimos con la mano.

2. La convertimos en botón, clic derecho Convert to Symbol – Buton. Le asignamos el

nombre correspondiente.



3. Nos metemos al botón dando clic sobre él. Recordemos que cambiará nuestra

línea del tiempo:

4. Fotograma clave en HIT (f6)

5. Clic en up y borramos la figura.

6. Al igual que en la mano creamos una nueva capa que se llame texto, bloqueamos

la capa 1 y creamos un fotograma clave F6 en OVER y escribimos el nombre de la

parte.



7. Volvemos a Escena

8. Clic en el botón

9. Abrimos panel de acción y asignamos la acción on (press) {gotoAndStop(2);

}

Actions -> Movie Clip Control -> on -> Press

Nos posicionamos delante del corchete y elegimos Movie Clip Controls -> Go To and

Stop () -> Dentro del paréntesis escribimos “2”

El código significa que le damos la acción al botón: Cuando te presionen ve al fotograma 2, que

es donde está la información de la parte del cuerpo.

10. Repetir el procedimiento con cada parte: figura, botón, texto, action.



XI. EVALUACIÓN

1. Descarga y Abrir el documento “evaluación” de:

www.guaymax.com/EVALUACION.fla (así con mayúsculas)

Nota: Hay que cambiar el tamaño de este documento a 800x600 ya que mide

550x400

Esta es una evaluación de 10 reactivos.

2. Contamos con 4 capas:

3. Aplicar la herramienta de ocultar las capas dando clic en el ojo, dejando visible la capa

fondo, modificarlo de acuerdo a nuestro tema:

En esta capa se encuentrar las

imágenes que constituyen las

imágenes y título de la

evaluación.

http://www.guaymax.com/EVALUACION.fla



4. Bloquear capa fondo, dejar visible y desbloquear capa “preguntas y respuestas”

5. Bloqueamos la capa preguntas, desbloqueamos y dejar visible la capa botones.

6. Dar clic sobre el botón que esta encima de la respuesta 1 y desplegar el panel de

acción.

En esta capa se encuentran las preguntas

y las respuestas desordenadas, son

totalmente modificables.

En cada fotograma (del 1 al 10)

encontraremos una pregunta diferente.

Y en el 11 encontramos el texto Evaluar

Resultado.

En esta capa se encuentran los botones

transparentes, solo se aprecia que esta

activa la sección HIT (recordemos el

ejercicio de la mano).

Cada respuesta tiene un botón encima en

todos los fotogramas.

La acción le dice al botón,

cuando te realcen ve y detén el

fotograma 2. Eso quiere decir

que nos pasará a la pregunta

dos.



7. Si verificamos el botón que esta sobre la respuesta b repite la misma acción:

8. La diferencia está en la respuesta C donde aparece “aciertos++2;” que es la que

programa nuestra evaluación y le dice que agregue un acierto.

9. Entonces el texto que queremos que sea nuestra respuesta correcta debe llevar el

botón cuya acción incluya la línea “aciertos++;”



10. En el fotograma 11 donde se encuentra evaluar resultado la acción del botón nos

indica ir al fotograma siguiente:

11. En el fotograma 12 que es donde aparecerá nuestro resultado se encuentra el texto y

varias cajas vacías:



12. La primera caja que se encuentra enseguida de Respuestas Correctas

13. La segunda caja representa el porcentaje de aciertos y se le asigna nombre de variable

para efectos de programación.

Representa el

número de

aciertos

Se le asigna el nombre de

“aciertos” en variable, con el

objetivo de utilizarse en la

programación de las acciones.

Es texto tipo

dinámico ya que

lleva incluida un

función que la

vincula con las

acciones



14. En evaluación aparece una caja más grande que es donde saldrá un mensaje de

acuerdo al resultado que obtuvimos, que también va ligado con las acciones.

15. Bloqueamos la capa botones y desbloqueamos la capa acciones.

16. Dar clic en el fotograma 1, y desplegar el menú de acciones para ver la programación

de ese fotograma.

La línea 1 nos dice que la película iniciará detenida

en el fotograma 1.

Y también nos indica que empezaremos con cero

aciertos

Si en lugar de cero hubiese uno, al final nuestra

evaluación arrojaría un resultado que lleva un

punto extra.

Cabe señalar que acierto se refiere a la primera

caja del fotograma 12.



17. Dar clic en el fotograma 11.

ACTIVIDAD: Cambiar preguntas, respuestas y botones. Guardar en su carpeta con el otro

archivo (cuerpo) con el nombre de evaluación.

XII. AÑADIR EVALUACIÓN A OBJETO

1. Insertar un nuevo botón en la capa botones del archivo cuerpo

2. Dibuja un rectángulo

3. Escribe sobre el evaluación

4. Convierte tanto rectángulo como texto en botón

5. Asígnale el siguiente código de acción en actions

on (press) {loadMovie("evaluacion.swf",1);

}

La primera línea de acción nos dice que

en la caja de porcentaje que se

encuentra en el fotograma 12 aparezca

el resultado de aciertos dividido entre

diez, multiplicado por 100 reflejado en

porcentaje.

Las siguientes líneas nos dan una

condición si los aciertos son iguales a 0

que aparezca en la caja de Texto la

siguiente frase.

Las frases pueden ser modificadas al

gusto. Siempre y cuando respeten las

comillas y el formato del action script.



Para contribuir con la sociedad de la información puedes subir tus archivos SWF como los

creados en este taller a:

http://www.shareswf.com

Te registras y Upload.

http://www.shareswf.com/

flash manual 8

Documents