23 Ejercicios Profesionales con

Adobe Flash

Henry Pineda

Acerca de la obra

ii

Interpolaciones de Movimiento - Mscaras

Interpolaciones de Forma
Ejercicio 1

Indice

Ejercicio 2

Ejercicio 12

2
5

Ejercicio 13
Ejercicio 14

Interpolaciones de Movimiento - Grficos

Ejercicio 3
Ejercicio 4
Ejercicio 5

Interpolaciones de Movimiento - Orquestacin

8
12
17

Ejercicio 15
Ejercicio 16
Ejercicio 17

Interpolaciones de Movimiento - Botones

Ejercicio 6
Ejercicio 7

Ejercicio 18

21
26

Ejercicio 9

Ejercicio 19

Ejercicio 11

74

ActionScript

30
33

Ejercicio 20
Ejercicio 21

Interpolaciones de Movimiento - Lneas gua

Ejercicio 10

58
62
65
69

Intro Flash

Interpolaciones de Movimiento - Clips de pelcula

Ejercicio 8

48
50
52

Ejercicio 22

38
42

Ejercicio 23

78
83
87
91

Introduccin
Animar en Flash, ver efectos especiales y presentaciones creativas muy depuradas, nos
hace pensar en lo complicado que puede ser el programar o cun difcil es animar en
Flash. Cmo lo hicieron? A qu gur se encomendaron? Estas preguntas surgen como
el pan de cada da.
A lo largo de este tiempo que lleva Flash en el mercado mundial, la experiencia recogida da a da. Nos hemos visto en la necesidad de presentar y lanzar al mercado adicto a
este tipo de animaciones un libro que aumentar y enriquecer esta experiencia.
Esta obra no pretende ser una Biblia en Flash sino ms bien una buena base para
aquellos adictos que echen sus ideas a andar.

A todos los diseadores grficos, multimedia y personas que aunque no siendo de

este grupo sientan una gran pasin por lo nuevo. Y aquellos bebs que recin dan sus
primeros pasos en Flash (sea Macromedia o sea Adobe).
Cmo usar este libro
Como una herramienta profesional de trabajo y de consulta diaria para resolver
problemas prcticos que siempre se presenta a la hora de trabajar en Flash.
Dedicatoria

Al creador de nuestras vidas al nico y soberano Dios. Romanos

11:36.

A todas aquellas personas que no nos conocen y que siempre nos piensan.

Qu va a encontrar en este libro

Agradecimientos
En la presente entrega va a encontrar ejercicios, prcticos sencillos de y de gran utilidad a la hora de crear un proyecto Multimedia o Web.

A toda mi familia y la familia que aun no conozco.

Los ejercicios descritos le guiarn paso a paso cmo mejorar y potencializar las herramientas de Adobe Flash, su manejo en la lnea de tiempo, cmo crear smbolos sean
estos: grficos, botones o clips de pelcula. As como programacin en ActionScript para
desarrollar un proyecto Multimedia o Web. Y claro est aumentar su potencial creativo.

Descargar los archivos de Internet

A quien va dirigido este libro?

Cmo adquirir sta obra

Este libro est dirigido a todas aquellas personas que sientan una atraccin especial
por lo diferente. De la idea esttica al movimiento, de lo puro a lo santo, de la realidad a
la irrealidad.

Los archivos estn disponibles en Internet y se los descarga de la siguiente direccin

electrnica www.henrypineda.com/libros/flash/index.htm

ii

A los telfs.: 09-602-4180 / 09-626-7790 / 09-345-0601 ventas@henrypineda.com

Orquestacin

El tema orquestacin no existe en Flash

y solo por motivos de esta obra la hemos
bautizado con ese nombre porque aqu
desarrollamos interpolaciones de Forma
y Movimiento, trabajando con diferentes
smbolos, lneas guas y mscaras. Esta
seccin es muy enriquecedora ya que es
la base de las animaciones Web.
Le invitamos a que revise la carpeta
ejemplos que est dentro de la carpeta
orquestacin.

Interpolaciones de Movimiento - Orquestacin

Ejercicio 15

Aspectos a tomarse en cuenta

Importando archivos

1. Abrir el archivo (Ctrl. + O / + O) ejercicio 15

base.fla que se encuentra en ejercicios > orquestacin.

1. (Ctrl. + R / + R). En la carpeta imgenes >

Ejercicio 15 > o005.jpg, o006.jpg, o007.jpg. Clic en
Importar.

2. Actualmente se encuentran creadas 7capas. Cada

capa nombrada de acuerdo al contenido que ir en cada
una de ellas. Figura 1.

2. Borrarlos del rea de trabajo. Activar la librera F11

Ctrl. + L. Cada vez que importamos archivos externos a
flash estos siempre se guardan en la librera.
Arrastrando fotos a la escena

El siguiente ejercicio es un trabajo compuesto por

clips de pelcula, grfico y mscaras y es sobre todo
mucho ms sencillo de lo que se puede esperar.
Aprender a trabajar con clips anidados (un clip
dentro de un clip). Uno de estos clip sufre una
interpolacin de un grfico que es la base de este
ejercicio. El resto usted mismo lo descubrir en las
siguientes lneas.
Antes de empezar con este ejercicio le recomiendo
que revise el archivo que se encuentra en la carpeta ejercicios / orquestacin / ejercicio 15.swf

1. De la librera seleccionamos el archivo o007.jpg.

Arrastramos a la capa foto 1. En el Panel de Propiedades
digitamos su posicin. X, Y. Figura 3.

Fig. 1

2. En la escena de trabajo se encuentra creado un recuadro con gradiente de color gris oscuro a gris claro y
unas guas incorporadas que sern usadas ms adelante.
Figura 2.

Fig. 3.

Nota.- ocultemos esta capa dando clip en el ojo.

2. De la librera seleccionamos el archivo o005.jpg. Arrastramos a la capa foto fondo. En el Panel de Propiedades
digitamos su posicin. X = 150. Y = 56.4. Nota.- Esta
posicin es la misma que la descrita en la figura 3.
Aadiendo texto
1. Damos clic en la capa texto y digitalizamos: Puerta
de Alcal Madrid. En tipo de letra Verdana, 10 pts,
color gris oscuro, justificado a la derecha. Ubicarlo en
la parte inferior derecha (debajo de la foto). Nota.- Los
dems textos los digitalizaremos ms adelante. Figura 4.

Fig. 2

58

Fig. 10

Interpolacin del grfico

Fig. 4

1. En la capa 1, presionamos F6 en el fotograma 20. En

el rea gris entre estos dos fotogramas. En el Panel de
Propiedades Animar > Movimiento.

Creando la mscara
1. En la capa mscara 1 Damos clic en el fotograma 1.
Creamos un rectngulo y lo ubicamos en su posicin X,
Y. De acuerdo a la Figura 5. Nota.- Este recuadro puede
tener cualquier color sin borde.

Fig. 7

4. A este grfico lo convertimos en Clip de pelcula,

presionar F8. Figura 8.

2. Damos clic en el fotograma 1 de esta capa, rotamos y

escalamos este grfico de acuerdo a la Figura 11.

Fig. 8
Fig. 5

2. Con este rectngulo seleccionado, presionamos F8

para convertirlo en un grfico. Figura 6.

Fig. 6

3. En la barra de herramientas seleccionamos la Herramienta de Transformacin Libre

. Y arrastramos el
origen del grafico hacia el vrtice superior izquierdo.
Figura 7.

5. A este clip de pelcula lo convertimos de nuevo en

Clip de pelcula, presionar F8. Figura 9. Nota.- Ese paso
es necesario hacerlo para lograr el efecto que queremos.

Fig. 9

6. Seleccionamos la flecha negra

. Damos doble clic
en el primer clip de pelcula, damos doble clic de nuevo
sobre el segundo clip de pelcula. Figura 10. Seleccionemos el grfico.

59

Fig. 11

3. En los fotogramas 30 y 50, presionamos F6. En el

rea gris entre estos dos fotogramas. En el Panel de
Propiedades Animar > Movimiento. Figura 12. Clic en
el fotograma 50 en el Panel de Transformar (Ctrl. + T /
+ T), buscamos la opcin Girar = 90.
Nota.- Ahora nuestra interpolacin sube y baja o se abre
y cierra.

Interpolaciones de Movimiento - Orquestacin

Ejercicio 15

Interpolaciones de Movimiento - Orquestacin

Ejercicio 15

4. En esta capa presionamos F7 en el fotograma 51 y F5

en el fotograma 70. Nota.- Como se dar cuenta existe
una lnea entrecortada eso significa que la interpolacin
est inconclusa o debemos quitarla. Pues vamos a quitarla
presionando clic derecho del ratn en Pc ctrl. + Clic en
Mac > Quitar interpolacin. Figura 12.

Fig. 12

Trabajando en el primer clip de pelcula.

1. Damos clic en el clip de pelcula clip_mascara. Figura
13.

3. Damos clic en el fotograma 1 de la capa 1 (Ctrl. + C / + C). Clic en la capa 2 fotograma 1 (Ctrl. + V / + V).
El grfico duplicado ubicarlo en la posicin X = 75, Y = -200.
4. Para ubicar los dems clip de pelculas repetimos el paso 3 de esta seccin. Su posicin X, Y, digitarlos de acuerdo al
siguiente cuadro 1.
Capa
Posicin X
Posicin Y

1
2
3
4
5
6
7
8
9

-75
75
225
-75
75
225
-75
75
225

-200
-200
-200
-100
-100
-100
0
0
0

Nota.- Como se dar cuenta la base de este clip coincide con las guas que hemos dejado.
5. En todas las capas damos clic en el fotograma 70 en todas las capas. Figura 15.

Fig. 13

2. Vamos a crear 9 capas ms en este clip para ello damos clic en el icono de crear capas
. Figura 14

Fig. 15

Nota.-Todo este trabajo realizado es el corazn del ejercicio 15. Ahora vamos a trabajar en la escena para concluir nuestra
tarea.
6. Damos clic en Escena 1. Figura 16.
Fig. 14
Fig. 16

60

Ejercicio 15

Fig. 19

El toque final
Fig. 17

8. Sobre la segunda capa mscara 1. Damos clic derecho del ratn en Pc. Ctrl. + Clic en Mac buscamos la
opcin mscara. Figura 18.

1. En la capa foto fondo y recuadro presionamos F7

en el fotograma 140.
2. En la primera capa mascara 1 y foto1, presionamos F5 en el fotograma 70.
3. Damos clic en el fotograma 1 de la capa mscara
1. Presionamos la tecla Alt y arrastramos su contenido
hasta el fotograma 71 de la segunda capa mscara 1.
Presionamos F5 en el fotograma 140.
4. En la capa foto2. Damos clic en el fotograma 71 y
presionamos F7. De la Librera arrastramos el archivo
o006.jpg. Su posicin X = 150, Y = 56.4, presionamos
F7 en el fotograma 140.

Fig. 21

6. Vamos a trabajar en la capa texto. Presionamos F6 en

el fotograma 51 y digitamos el texto Plaza de Espaa
Madrid.
7. Presionamos F6 en el fotograma 71 y digitamos el
texto banco Caja de Madrid Madrid.
8. Presionamos F6 en el fotograma 120 y digitamos el
texto banco Plaza de Espaa Madrid. Presionar F5 en
el fotograma 140.
9. Presionar Ctrl. + Enter / + Enter para ver los
cambios.

5. Nuestro trabajo debe quedar debe quedar de acuerdo

a las Figura 20 y Figura 21.
Fig. 18

9. Ocultamos las capas mscara 1 y en las otras quitamos los candados. Figura 19.
Fig. 20

61

Interpolaciones de Movimiento - Orquestacin

7. Sobre la primera capa mscara 1. Damos clic derecho del ratn en Pc. Ctrl. + Clic en Mac buscamos la
opcin mscara. Figura 17.

Ejercicio 16

Preparando el rea de trabajo

Interpolaciones de Movimiento - Orquestacin

1. Crear un archivo nuevo. En el men Archivo > Nuevo (Ctrl. + N / + N). Documento de Flash.

la Herramienta de Transformacin libre

(presionar
letra Q). Desde la esquina superior derecha y presionando las teclas Shift + Ctrl. En Pc. Shift + . En Mac.
Arrastramos hacia abajo. La imagen debe quedarnos
como a continuacin se muestra. Figura 2.

2. En Panel de Propiedades en la opcin Tamao

cambiar en dimensiones 750 pix. (Anchura) y 450 pix.
(Altura). Velocidad de fotogramas 25 fps.
Importando imgenes

Este ejercicio naci un da en el parque cerca de

mi casa cuando vi de repente la pileta expulsar
agua en una misma direccin (lneas gua). Las
gotas de agua fueron para m clips de pelcula
desenfocados que caan y armaban una fotografa.
Antes de empezar con este ejercicio le recomiendo
que revise el archivo que se encuentra en la carpeta ejercicios / orquestacin / ejercicio 16.swf

1. En el men Archivo > Importar > Importar a Escenario (Ctrl. + R / + R). Buscar la carpeta imgenes
> ejercicio 18 > antenas.jpg. Clic en Importar. Borrar el
archivo de la Escena. Nota.- Al importar una fotografa
a la escena de flash esta se incorpora directamente en la
librera (Ctrl. + L / + L F11).
2. Arrastramos el archivo antenas.jpg a la Escena 1 y la
ubicamos en la parte izquierda del rea de trabajo.

Fig. 2

2. Dar clic fuera de la forma para deseleccionarla.

Creacin de capas

Convirtiendo una fotografa en forma.

1. Creamos 9 capas ms

1. Con la fotografa seleccionada. En el men Modificar

> Separar (Ctrl. + B / + B). Dos veces. Fjese en el
Panel de Propiedades que la fotografa ha cambiado a
forma. Figura 1.

Activar y arrastra reglas

1. En el men Ver / Reglas Alt+ Shift + Ctrl. + R /

Alt+ Shift + + R.
2. De la regla vertical, arrastramos 2 guas horizontales y
2 verticales. Figura 3.

Fig. 1

Distorsionado la forma.
1. Damos clic en la fotografa (forma). Seleccionamos

62

Fig. 3

Ejercicio 16

1. Desde la esquina superior izquierda, con la herramienta de seleccin damos un clic y arrastramos
hacia la primera interseccin de las guas. Cuando esta
herramienta est encima de las guas, estas cambiarn a
un color lila. Figura 4.

4. Damos clic en la capa 1 desde la parte superior de

la fotografa, damos clic y arrastramos hacia la segunda
interseccin de las guas. Cuando esta herramienta est
encima de las guas, estas cambiarn a un color lila.
Figura 6.

Nota.- Ahora cada capa tiene un fragmento de la foto

convertida en un clip de pelcula. La realizacin de este
ejercicio se complementa abriendo el archivo ejercicio 16
base.fla por lo que debemos guardar y cerrar este archivo.
Trabajando en el ejercicio 16 base.fla
1. Abrir el archivo ejercicio 16 base.fla que se encuentra
en la carpeta ejercicios > orquestacin.
Aspectos a tomarse en cuenta. Un poco de investigacin
1. Actualmente se encuentran creadas 24 capas cada una
de ellas con su lnea gua respectiva.

Fig. 6

5. Sobre esta seleccin presionamos F8 para convertirla

en smbolo > Clip de pelcula. En el cambo nombre
digitamos clip2. En registro desde el centro. Figura 7.
Fig. 4

2. Por la complejidad de este ejercicio hemos adelantado

una buena parte del mismo. Debemos tomar en cuenta
que este tutorial se explica con ms detenimiento en
el ejercicio 3.fla (trabajo con grficos) y en el ejercicio
10.fla (lneas gua).
3. Demos clic en el fotograma 1 de la capa 3. Este es
un clip de pelcula que tiene un filtro de desenfocado.
Figura 8.

2. Sobre esta seleccin presionamos F8 para convertirla

en Smbolo > Clip de pelcula. En el campo nombre
digitamos clip1. En Registro desde el centro. Figura 5.
Fig. 7

Fig. 5

3. Sobre este smbolo, lo cortamos (Ctrl. + X / + X).

Clic en la capa 2, fotograma 1. En el men buscamos
la opcin Edicin / Pegar in Sutu (Shift + Ctrl. + V /
Shift + + V). La capa en mencin ahora tendr el grfico cortado. Nota.- A la capa 2 le ponemos un candado y
la ocultamos.

6. Sobre este smbolo, cortamos (Ctrl. + X / + X).

Clic en la capa 3, fotograma 1. En el men buscamos
la opcin Edicin / Pegar in Sutu (Shift + Ctrl. + V /
Shift + + V). La capa en mencin ahora tendr el clip
de pelcula cortado. Nota.- A la capa 3 le ponemos un
candado y la ocultamos.
7. Para las 7 capas restante repetimos los pasos 1 al 3.
Nota.- La ltima seccin de la fotografa que se encuentra
el la capa 1 fotograma 1, la convertimos en smbolo > clip
de pelcula.

63

Fig. 8

4. Con la Herramienta de Transformacin activa (Ctrl.

+ T / + T). Fijmonos con detenimiento sus valores.
Figura 9. Nota.- La base de la animacin en general
radica en esta herramienta y la forma como juguemos o
interactuemos con ella.

Interpolaciones de Movimiento - Orquestacin

Distribuir la imagen en varias capas

Interpolaciones de Movimiento - Orquestacin

Ejercicio 16

Interpolando cada capa.

El toque final

1. En la capa 3, en el rea gris de ambos fotogramas

(1 y 10). Buscamos en el Panel de Propiedades Animar
> Movimiento. Dentro de este mismo Panel digitamos
los siguientes valores. Figura 11.

Capa 3

2. Damos clic en el fotograma en el fotograma 74. Clic

en el Clip de pelcula y lo arrastramos hacia la derecha
fuera del la Escena.

Fig. 9

5. Cada uno de los primeros fotogramas de las dems

capas tienen estos valores cambiados de acuerdo a lo
que queramos transmitir como mensaje.
6. Demos clic en el fotograma 15 de la capa 3. Aqu se
encuentra un fragmento de la fotografa (forma) cortada. Aqu ya no tiene efecto alguno. Figura 10
Nota.- Fijarse muy bien donde se encuentra el eje de
rotacin este es otro aspecto importante para hacer cosas
locas.

Fig. 11

7. Las lneas guas estn dibujadas una a una de manera

diferente pero casi todas tienen la misma estructura.
Parten casi desde una misma base y se depositan en
los eje de rotacin de cada clip.
8. En cada capa se encuentra el rea gris entre los fotogramas respectivos. Esperando ser interpoladas. Pues
manos a la obra.

3. En el Panel de Propiedades buscamos la opcin Filtro

> Desenfocar. Figura 14.

2. En la capa 4 en su rea gris. Buscamos en el Panel

de Propiedades Animar > Movimiento. Dentro de este
mismo Panel digitamos los siguientes valores. Figura
12.
Fig. 14

Fig. 12

Fig. 10

1. Presionamos F6 en el fotograma 64 y 74. En el rea

gris de estos dos fotogramas. Animar > Movimiento.

3. Para las capas restantes repetimos los pasos 1 y 2 de

esta seccin. Tomando en cuenta la aceleracin y giro
para las capas impares dejar su configuracin como en
la Figura 11. Y para las capas pares su configuracin
como en la Figura 12.
4. Movamos la cabeza lectora para darnos cuenta como
va nuestro trabajo. Figura 13.

Fig. 13

64

4. Para las capas restantes repetimos los pasos 1, 2 y 3

de esta seccin de acuerdo al siguiente cuadro.
Capa
3
4
5
6
7
8
9
10
11
2
12
13

Fotogramas

Filtro

64 74
59 69
58 68
65 75
56 66
58 68
63 73
60 70
55 65
65 75
60 70
50 60

Desenfocar
Desenfocar
Desenfocar
Desenfocar
Desenfocar
Desenfocar
Desenfocar
Desenfocar
Desenfocar
Desenfocar
Desenfocar
Desenfocar

5. Presionar Ctrl. + Enter / + Enter

Aspectos a tomar en cuenta

Creando el efecto de agua

1. Abrir el archivos ejercicio 17 base.fla (Ctrl. + O / +

O). Que se encuentra en la carpeta ejercicios > orquestacin.

1. Sobre este clip seleccionado damos doble clic. (Editar

en contexto). Con el archivo seleccionado, presionamos
F8 para convertirlo en smbolo > Grfico. Figura 2.

2. En la lnea de tiempo principal se encuentran 3 capas

creadas, cada una nombrada de acuerdo a la informacin que contendr.

A veces flash nos sorprende con efectos inesperados como el que vamos a ensear a continuacin.
Para ello nos valdremos de una lnea gua. Tres
clips de pelcula una interpolacin de forma, una
de movimiento y el tiempo de ustedes en aprender.
Antes de empezar con este ejercicio le recomiendo
que revise el archivo que se encuentra en la carpeta ejercicios / orquestacin / ejercicio 17.swf

3. En la capa 2 (gradiente) se encuentra creada una

gradiente de color azul a transparente, con un candado
para asegurar su contenido.
Importando imgenes

Fig. 2

2. Dentro de este clip de pelcula creamos dos capas

ms . Figura 3.

1. En el men Archivo > Importar > Importar a Escenario (Ctrl. + R / + R). Buscar la carpeta imgenes
> ejercicio 17 > o017a.jpg. Clic en Importar. Borrar los
archivos de la escena. Nota.- Al importar una fotografa
a la escena de flash esta se incorpora directamente en la
librera (Ctrl. + L / + L F11).
Insertando una imagen
1. En la capa foto2, fotograma 1, de la librera (F11 o
Ctrl. + L), arrastramos el archivo o018b.jpg. La centramos en la escena con la Herramienta de Transformar
(Ctrl. + K / + K).

Fig. 3

3. Duplicamos el fotograma de la capa 1. Para ello

presionamos la tecla Alt en este fotograma y lo arrastramos hasta el fotograma 1 de la capa 2. En el Panel de
Transformacin digitamos su escala al 150%. Figura 4.

2. Damos clic en el fotograma 1 de la capa foto 1 y de

la librera arrastramos el archivo o017a.jpg.
3. Con este archivo seleccionado presionamos F8 para
convertir este archivo en clip de pelcula. Figura 1.

Fig. 4
Fig. 1

65

Interpolaciones de Movimiento - Orquestacin

Ejercicio 17

Interpolaciones de Movimiento - Orquestacin

Ejercicio 17

Nota.- Para facilitar nuestro trabajo aseguremos con un

candado las dos primeras capas.

Nota.- Este paso tedioso pero sencillo nos ayud a crear

un valo.

4. En la capa 3 fotograma 1 dibujamos un valo de

Alto = 60, Ancho = 10. Lo centramos en el clip con la
Herramienta de Alinear (Ctrl. + K / + K). Figura 5

7. Para crear los otros valos repetimos los pasos 4, 5 y

6 las dimensiones de los valos es de acuerdo al siguiente cuadro 1. Nota.- A partir de la creacin del segundo
valo debemos agruparlos para evitar molestias, en cada
valo cambiarle su color.
Ovalo

Fig. 5

5. Dibujamos otro valo de un color diferente al valo

anterior. Sus dimensiones Alto = 50, Ancho = 10. Lo
agrupamos (Ctrl. + G / + G). Lo centramos en el
clip con la Herramienta de Alinear (Ctrl. + K / + K).
Figura 6.

Ancho

1 pequeo 50
1 grande 60
2 pequeo 70
2 grande 80
3 pequeo 90
3 grande 100

Alto
10
20
30
40
50
60

Fig. 9

10. Nuestro trabajo debe quedar como se muestra a

continuacin Figura 10.

8. Los valos deben quedar como se muestran a continuacin. Figura 8.

Fig. 6

6. Desagrupamos a este valo (Shift + Ctrl. + G / Shift

+ + G). Damos clic fuera del valo, lo volvemos a
seleccionar y lo borramos con la tecla delete. Figura 7.

Fig. 10

Fig. 8

9. Sobre la capa 3 damos clic derecho del mouse en

Pc. Ctrl. + clic en Mac. Buscamos la opcin Mscara.
Figura 9.

Fig. 7

66

11. Quitamos el candado de la capa 2 y 3. En la capa 1

y 2, presionamos F5 en el fotograma 50.
12. En la capa 3 presionamos F6 en el fotograma 50.
Con la Paleta de Transformar activa (Ctrl. + T / + T).
Digitamos su escala de acuerdo a la Figura 11.

Ejercicio 17

1. En la librera ubicamos el clip 1. Damos clic derecho del mouse en Pc. Ctrl. + clic en Mac. Buscamos la
opcin > duplicar. Figura 14.

7. En la capa gradiente, en el fotograma 115, presionamos F5. En la capa foto1, en el fotograma 65,
presionamos F5.

Fig. 11

13. En el rea gris entre estos fotogramas, buscamos en

el Panel de Propiedades Animar > Forma. Nota.- Hemos
cumplido con xito los pasos necesarios para crear nuestro
efecto de agua. Felicitaciones!
14. Regresamos a la Escena 1. Figura 12.

Dibujando la letra
Fig. 14

2. En el cuadro de dialogo digitamos lo siguiente.

Figura 15.

Fig. 15
Fig. 12

13. Arrastramos este Clip de pelcula al fotograma 66 y

presionamos F5 en el fotograma 115
Distorsionando nuestro clip
1. Damos clic en el Clip de pelcula. En la Paleta de
Transformar digitamos su valor en escala y en la posicin X, Y de acuerdo a la Figura 13.

Fig. 16

3. Damos doble clic sobre el clip 2. En la lnea de tiempo, borramos

las capas 2 y 3.
4. Damos clic en el fotograma 2 de esta capa, presionamos Shift hasta el fotograma 50. Para borrar los fotogramas seleccionados, presionamos Shift + F5.

1. Seleccionemos la Herramienta del Rectngulo

.
Redondeamos su puntas con la opcin Establecer radio
de esquina
. En su men contextual digitamos la
cantidad 10. Clic en Aceptar. Figura 17.

Fig. 17

2. Dibujamos un cuadro de Ancho = 120, Alto = 120.

Su posicin X = 95, Y = 165.
3. Presionamos F8 para convertirlo en smbolo > Clip
de pelcula. Figura 18.

5. Regresemos a la Escena 1 y borramos el clip de pelcula de la capa foto1.

6. En este mismo fotograma arrastramos de la librera el
clip de pelcula clip2. Distorsionamos su contenido de
acuerdo a la Figura 16.

Fig. 13

67

Fig. 18

4. Damos doble clic sobre el Clip de pelcula. Creamos

una nueva capa . Y digitamos una letra. En nuestro
caso hemos elegido el tipo de letra Verdana, 90 pts.
Bold, color blanco.

Interpolaciones de Movimiento - Orquestacin

Duplicando el clip

Ejercicio 17

5. Con el texto seleccionado lo convertimos en una

forma presionando Ctrl. + B + B. Dos veces.

Interpolaciones de Movimiento - Orquestacin

3. Regresemos a la Escena 1.

3. Damos clic en el fotograma 1 de la capa letra y

arrastramos la letra desde su origen (centro) hasta el
extremo del valo. Figura 21.

Creando una lnea gua.

1. Sobre la capa letra creamos una lnea gua. Damos
clic en el fotograma 1 de a capa Gua: letra y dibujamos
un valo de acuerdo lo indica la Figura 19.

2. Cortamos una seccin del valo para ello lo seleccionamos y borramos con la tecla delete. Figura 20.

4. En este fotograma, escalamos su tamao al 20 %. Y

en el Panel de Propiedades buscamos la opcin Color >
Alpha = 0%
5. Damos cli en el fotograma 25 de esta misma capa y
arrastramos el clip de pelcula desde su centro hacia el
otro extremo del valo. Figura 22.

Fig. 20

Interpolando la lnea gua

1. En la capa Gua: Lnea presionamos F5 en el fotograma 25.
2. En la capa letra presionamos F6 en el fotograma
25. En el rea gris comprendida entre estos dos fotogramas en el Panel de Propiedades buscamos la opcin
Animar > Movimiento.

8. Presionamos F6 en el fotograma 90 lo arrastramos

levemente hacia la derecha y en el Panel de Propiedades
buscamos la opcin Color > Alpha = 0%
9. Presionar Ctrl. + Enter / + Enter.

Fig. 21

Fig. 19

7. En el fotograma 65 arrastramos el clip letra hacia

el extremo derecho de la Escena 1. En la posicin X =
557, Y = 165.6

Fig. 22

6. Presionamos F6 en el fotograma 40 y 65. En el Panel

de Propiedades buscamos la opcin Animar > Movimiento.

68

Ejercicio 18

Preparando el rea de trabajo

2. En Panel de Propiedades en la opcin Tamao

cambiar en dimensiones 750 pix. (Anchura) y 450 pix.
(Altura). Velocidad de fotogramas 25 fps.

El presente trabajo tiene una mezcla de clips de

pelcula, grficos, mscaras. Aprender que con
unos pasos sencillos se pueden hacer transiciones
corporativas.
Lo importante es entender cmo funciona una
mscara dentro de un clip y cmo es interpolada
sea grfico o una forma.
Este ejercicio se adapta muy bien a presentaciones corporativas que requieran un cierto aire de
seriedad y frescura.

Importando imgenes

Fig. 2

Insertando guas

1. En el men Archivo > Importar > Importar a Escenario (Ctrl. + R / + R). Buscar la carpeta imgenes
> ejercicio 18 > o018a.jpg, o018b.jpg, o018c.jpg...
o018g.jpg. Clic en Importar. Borrar los archivos de la
escena. Nota.- Al importar una fotografa a la escena de
flash esta se incorpora directamente en la librera (Ctrl. +
L / + L F11).

1. Para facilitar mejor nuestro trabajo creamos un

rectngulo de dimensiones Ancho = 200, Alto = 150.
Lo ubicamos en la esquina superior derecha de la foto.
Con las reglas activas (Alt+ Shift + Ctrl. + R / Alt+ Shift
+ + R). Arrastramos una gua horizontal y otra gua
vertical. Figura 3.

Creando capas
1. En el icono de crear capas , creamos 6 capas ms y
las nombramos de acuerdo a la Figura 1.

Antes de empezar con este ejercicio le recomiendo

que revise el archivo que se encuentra en la carpeta ejercicios / orquestacin / ejercicio 18.swf

Fig. 3

2. Movemos el rectngulo hacia la derecha. Posicin X

= 275, arrastramos otra gua vertical. Figura 4.
Fig. 1

Insertando una imagen

1. De la librera (F11 o Ctrl. + L), arrastramos el
archivo o018b.jpg, en la capa foto2, fotograma 1. La
centramos en la escena con la Herramienta de Transformar (Ctrl. + K / + K). Figura 2.

69

Fig. 4

Interpolaciones de Movimiento - Orquestacin

1. Crear un archivo nuevo. En el men Archivo > Nuevo (Ctrl. + N / + N). Documento de Flash.

Interpolaciones de Movimiento - Orquestacin

Ejercicio 18

Nota.- ahora tenemos las gua en su sitio que es la base de

este ejercicio.

mos en flash. El eje de origen del grfico (Botn o Clip de

Pelcula) es crucial para animar nuestro trabajo.

Creando un clip contenedor

Creando capas

1. Arrastramos este rectngulo a su posicin inicial

(Figura3). Presionamos F8 para convertirlo en smbolo
> Clip de pelcula. Figura 5.

1. Crear 6 capas ms

2. Damos doble clic sobre el Clip de pelcula (Editar en

contexto). Sobre el rectngulo seleccionado presionamos
F8 de nuevo para convertirlo en > Grfico. Figura 6.

2. En cada capa ponemos el grfico_mscara. De acuerdo a la posicin X, Y descrita en el siguiente cuadro 1.

Capa

Fig. 5

Posicin X

capa 1
capa 2
capa 3
capa4
capa5
capa6

Posicin Y

0
200
400
0
200
400

0
0
0
150
150
150

Figura 8.

Capa 2
1. En la capa 2, damos clic en el fotograma 25,
presionamos F6. En el rea gris de estos fotogramas en
el Panel de Propiedades buscamos la opcin Animar >
Movimiento.

Capa 3

3. Seleccionamos la Herramienta de Transformacin

Libre . Arrastramos el origen del grfico hacia la
esquina superior derecha. Figura 7.
Fig. 8

Interpolacin de los grficos

Capa 1

Nota.- En este ejercicio y en cualquier tarea que realice-

Fig. 9

2. Damos clic en el fotograma 1 de esta capa. Y arrastramos el grfico hacia arriba. Posicin X = 200. Posicin
X = -150.

Fig. 6

Fig. 7

2. Damos clic en el fotograma 1 de esta capa. En el Panel de Transformacin rotamos su ubicacin de acuerdo
a la Figura 9.

1. La base de este ejercicio lo realizaremos en los prximos puntos. Damos clic en el fotograma 25 de la capa
1, presionamos F6. En el rea gris de estos fotogramas
en el Panel de Propiedades buscamos la opcin Animar
> Movimiento.

70

1. Cambiamos el eje de rotacin (Herramienta de transformacin libre

) y lo ubicamos en la parte inferior
derecha del grfico. Damos clic en el fotograma 25 de la
capa 3, presionamos F6. En el rea gris de estos fotogramas en el Panel de Propiedades buscamos la opcin
Animar > Movimiento.
2. Damos clic en el fotograma 1 de esta capa. En el Panel de Transformacin rotamos su ubicacin. Girar = 90
3. Nuestro trabajo debe quedarnos como muestra la
Figura 10.

fotograma 25 de, presionamos F6. En el rea gris de

estos fotogramas en el Panel de Propiedades buscamos
la opcin Animar > Movimiento.

2. Damos clic en el fotograma 100 de esta capa. Y

arrastramos el grfico hacia arriba. Posicin X = 200.
Posicin X = -150.

2. Damos clic en el fotograma 1 de esta capa. En el

Panel de Transformacin rotamos su ubicacin. Girar
= -90. El trabajo debe quedarnos como se muestra a
continuacin. Figura 11.

Capa 3

Fig. 10

2. Damos clic en el fotograma 100 de esta capa. En el

Panel de Transformacin rotamos su ubicacin. Girar
= 90

Capa 4
1. Cambiamos el eje de rotacin (Herramienta de
Transformacin Libre) y lo ubicamos en la parte inferior izquierda del grfico. En la capa 4, damos clic
en el fotograma 25, presionamos F6. En el rea gris de
estos fotogramas en el Panel de Propiedades buscamos
la opcin Animar > Movimiento.
2. Damos clic en el fotograma 1 de esta capa. En el
Panel de Transformacin rotamos su ubicacin. Girar
= -90
Capa 5

1. Presionamos F6 en los fotogramas 75 y 100. En el

rea gris de estos fotogramas en el Panel de Propiedades
buscamos la opcin Animar > Movimiento.

Capa 4
1. Presionamos F6 en los fotogramas 75 y 100. En el
rea gris de estos fotogramas en el Panel de Propiedades
buscamos la opcin Animar > Movimiento.
Fig. 11

Nota.- La primera parte de este ejercicio se encuentra realizada. En el siguiente apartado completamos la segunda
parte.

2. Damos clic en el fotograma 100 de esta capa. En el

Panel de Transformacin rotamos su ubicacin. Girar
= 90.
Capa 5

Capa 1

1. En la capa 5, damos clic en el fotograma 25,

presionamos F6. En el rea gris de estos fotogramas en
el Panel de Propiedades buscamos la opcin Animar >
Movimiento.

1. Presionamos F6 en los fotogramas 75 y 100. En el

rea gris de estos fotogramas en el Panel de Propiedades
buscamos la opcin Animar > Movimiento.

2. Damos clic en el fotograma 1 de esta capa. Y arrastramos el grfico hacia arriba. Posicin X = 200. Posicin
X = -300.

2. Damos clic en el fotograma 100 de esta capa. En el

Panel de Transformacin rotamos su ubicacin. Girar
= 90.

Capa 6

Capa 2

1. Cambiamos el eje de rotacin (Herramienta de

Transformacin Libre) y lo ubicamos en vrtice inferior
derecha del grfico. En la capa 6, damos clic en el

1. Presionamos F6 en los fotogramas 75 y 100. En el

rea gris de estos fotogramas en el Panel de Propiedades
buscamos la opcin Animar > Movimiento.

71

1. Presionamos F6 en los fotogramas 75 y 100. En el

rea gris de estos fotogramas en el Panel de Propiedades
buscamos la opcin Animar > Movimiento.
2. Damos clic en el fotograma 100 de esta capa. Y
arrastramos el grfico hacia arriba. Posicin X = 200.
Posicin X = 300.
Capa 6
1. Presionamos F6 en los fotogramas 75 y 100. En el
rea gris de estos fotogramas en el Panel de Propiedades
buscamos la opcin Animar > Movimiento.

Interpolaciones de Movimiento - Orquestacin

Ejercicio 18

Ejercicio 18

Interpolaciones de Movimiento - Orquestacin

2. Damos clic en el fotograma 100 de esta capa. En el

Panel de Transformacin rotamos su ubicacin. Girar
= -90
3. Presionar la tecla Enter para ver los cambios.
4. Vamos a la Escena 1. Figura 12.

Arrastrando la foto1
1. De la librera arrastramos el archivos o018a.jpg a la
escena y la centramos. (Ctrl. + K / + K).
2. En esta misma capa, presionamos F5 en la capa 275.
Completando el trabajo final
1. En las capas mascara1 y foto2 damos clic y arrastramos dichos fotogramas hasta el fotograma 25.

Fig. 12

2. Presionamos F5 en el fotogramas 125 de ambas

capas.

Creando la mscara

3. En la capa foto3, presionamos F7 en el fotograma

100.

1. Damos clic sobre la capa mascara1. Con el botn

de la derecha en Pc. Ctrl. + clic en Mac, buscamos la
opcin Mscara. Figura 13.

4. De la librera arrastramos el archivos o018c.jpg a la

escena y la centramos. (Ctrl. + K / + K).

Fig. 14

Nota.- Ahora la capa foto4 est dentro de la capa

mscara2.
9. Dar clic en el fotograma 175 de la capa foto4. En
la librera arrastramos a la Escena 1 el archivo o018d.jpg
y la centramos. (Ctrl. + K / + K).

5. Presionamos F5 en el fotogramas 200.

10. En estas capas mscara2 y foto4 presionamos F5

en el fotograma 275

6. Presionamos F7 en el fotograma 175 en las capas

mascara2 y foto4.

11. Presionar Ctrl. + Enter / + Enter.

7. Damos clic en el fotograma 25 de la capa mscara1. Presionando la tecla Alt. Arrastramos el contenido
de este fotograma y lo soltamos en el fotograma 175 de
la capa mscara2.
8. Damos clic en la capa foto4 y la arrastramos por
debajo de la capa mscara2. Figura 14.
Fig. 13

2. Quitar los candados que se pusieron a la hora de

crear la mscara.

72

Ejercicio 19

Aadiendo cdigo de programacin al fotograma

1. En la capa accin en el fotograma 314 presionar F7. Activamos el Panel Acciones (F9 en Pc / Alt + F9 Mac). En
Funciones globales > Control de la lnea de tiempo > stop (doble clic). Figura 9.

Se abrir una ventana emergente llamada Ir y reproducir en fotograma o etiqueta. Llenar su informacin de
acuerdo a lo descrito en la Figura 11.

Fig. 11

Insertando un botn
1. En la capa botn, en el fotograma 314, presionamos F7. En el men. Ventana > Bibliotecas comunes > botones. Se
abrir una librera de botones, buscamos la opcin buttons bar. Arrastramos a la escena el botn bar blue, lo colocamos en la parte inferior derecha.
Aadiendo programacin al botn.
1. En la capa botn. Clic en botn que se encuentra en el fotograma 314. En el men buscar Ventana > Comportamientos. Clic en el icono mas
Aadir comportamiento, buscar la opcin Control del Clip de Pelcula > Ir y
reproducir en fotograma o etiqueta. Figura 10.

Fig. 10

77

3. Presionar Ctrl. + Enter / + Enter.

Intro Flash

Fig. 9