Introduccion A Flash CS#

Coordinacin
de
Informtica
Presentaciones
Profesionales en
Flash
Manual del
Participante
Presentaciones Profesionales en Flash
PRESENTACIN
El Instituto Mexicano del Seguro Social conjuntamente con el Sindicato
Nacional de Trabajadores del Seguro Social, comprometidos con la calidad
en la superacin actuali!acin del personal, impulsan la Capacitacin en
materia de In"orm#tica, $uman%stica, Promocional de programas
institucionales &ue se 'inculen a la solucin de los problemas en la
operacin, "a'oreciendo el otorgamiento de ser'icios de calidad(
En ese contexto la coordinacin de in"orm#tica del Centro Nacional de
Capacitacin Calidad comprometida con su modelo educati'o se propone
el desarrollo de materiales did#cticos para el apoo mejor
apro'ec)amiento de los participantes(
A continuacin se presenta el Material de Apoo *id#ctico del Participante
+Presentaciones Pro"esionales en ,las)-, el cual "ue desarrollado bajo
estrictas normas pedaggicas did#cticas esto con el "irme propsito de
cumplir su objeti'o, el apoo al participante(
IMSS | Mdulo I 2
Este material de apoo did#ctico para el participante est#
estructurado de la siguiente "orma para su mejor comprensin.
MDULO I INTERFAZ DE FLASH:
En este mdulo se 'er#n las partes /barras, paneles )erramientas0
&ue componen la 'entana de ,las)1, tambi2n se 'er# como crear guardar
cerrar documentos de ,las)(
MDULO II MANEJO DE LNEA DE TIEMPO Y CAPAS:
En este mdulo 'eremos &ue es la l%nea de tiempo como esta
compuesta como se maneja, de igual "orma 'eremos como de crean, se
eliminan utili!an las capas, 'eremos como introducir textos, dibujos
creados en ,las) como insertar im#genes(
MODULO III SMBOLOS:
En este mdulo 'eremos los di"erentes tipos de s%mbolos &ue se
emplean en ,las) como se utili!ar#n dentro de nuestra pel%cula,
distinguiremos las principales propiedades de cada uno de ellos(
MODULO IV ANIMACIONES:
En este mdulo aprenderemos a crear animaciones pro"esionales
para dar un mejor "ormato a nuestra presentacin( 3eremos animaciones
tales como al"a, brillo, tinta, trans"ormacin por "orma entre otras no
menos importantes e impactantes(
MODULO V INTRODUCCIN ACTION SCRIPT:
En este mdulo se 'er# el lenguaje de programacin de ,las) en
"orma b#sica, para &ue de esta manera usted pueda )acer un men4
interacti'o con el cual se pueda 'incular a las dem#s pantallas de nuestra
presentacin(
MODULO VI CREACIN DE PRESENTACIN CON MEN
INTERACTIVO:
En este mdulo se creara el men4 interacti'o se programar#n los
botones para &ue nos lle'en a otros lugares de nuestra presentacin(
IMSS | Mdulo I 3
Tabla de c!"e!#d
Mdulo I Explicacin de la interfaz ................................................................................... 8
1.1 Interfaz de Flash..............................................................................................................
9
1.1.1 arra de !"tulo#.......................................................................................................
1$
1.1.2 arra de Men%#...................................................................................................... 1$
1.1.3 &a'a de (erra)ientas# ............................................................................................
11
1.1.* +anel de capas#.......................................................................................................
1,
1.1.- +anel de +ropiedades# ............................................................................................
1,
1.1.. /ona de +aneles#....................................................................................................
1,
1.2 &onfi0uracin del 1ocu)ento .......................................................................................
1*
1.2.1 1i)ensiones...........................................................................................................
1*
1.2.2 &olor de fondo........................................................................................................
1*
1.2.3 2u)ero de foto0ra)as por se0undo ......................................................................
1-
1.2., 3nidades de )edida...............................................................................................
1-
1.3 &rear4 5uardar4 &errar4 +u6licar 7 8isualizar ..................................................................
1.
1.3.1 crear nue9os docu)entos......................................................................................
1.
1.3.2 5uardar 1ocu)ento ...............................................................................................
1.
1.3., &errar docu)ento ..................................................................................................
18
1.3.* +u6licar ..................................................................................................................
18
1.3.- 8isualizacin de la pel"cula.....................................................................................
19
Mdulo II Mane'o de :"nea de !ie)po 7 &apas.............................................................. 19
2.1 +resentacin con texto..................................................................................................
21
2.1.1 Explicacin de la :"nea de !ie)po...........................................................................
21
2.1.2 Insercin de foto0ra)as .........................................................................................
21
2.1.3 Insercin de capas ..................................................................................................
21
2.1., ca)6iar el no)6re a la capa ...................................................................................
22
2.1.* Insercin de texto ...................................................................................................
22
2.1.- +ropiedades de texto..............................................................................................
22
IMSS | Mdulo I ,
2.1.. E'ercicio 1 ...............................................................................................................
23
2.2 +resentacin con di6u'os en Flash .................................................................................
2*
2.2.1 1i6u'ar un &"rculo ...................................................................................................
2*
2.2.2 1i6u'ar cuadrado ....................................................................................................
2-
2.2.3 1i6u'ar una estrella ................................................................................................
2-
2.2., 1i6u'ar fi0uras sin contorno....................................................................................
2.
2.2.* +ropiedades de fi0uras ...........................................................................................
28
2.2.- 1i6u'ar l"neas.........................................................................................................
3$
2.2.. E'ercicio 2 ...............................................................................................................
32
2.3 +resentacin con I);0enes ...........................................................................................
33
2.3.1 I)portar i);0enes a la 6i6lioteca...........................................................................
33
2.3.2 Insertar la i)a0en en el escenario..........................................................................
3,
2.3.3 E'ercicio 3 ...............................................................................................................
3-
Mdulo III S")6olos ................................................................................................... 38
3.1 5r;ficos.........................................................................................................................
39
3.1.2 Insertar una i)a0en en un 0r;fico..........................................................................
39
3.2 &lip de +el"cula ..............................................................................................................
,$
3.2.1 insertar un s")6olo clip de pel"cula.........................................................................
,2
3.2.2 creacin de una ani)acin dentro de un clip de pel"cula ........................................
,2
3.3 otones.........................................................................................................................
,3
3.3.1 creacin de s")6olos de 6otn ...............................................................................
,,
3.3.2 insercin de sonido en un 6otn.............................................................................
,-
Mdulo I8 <ni)aciones .............................................................................................. ,.
,.1 <ni)aciones.................................................................................................................
,9
,.1.1 <ni)acin foto0ra)a por foto0ra)a...................................................................... ,9
,.1.2 <ni)acin por interpolacin de )o9i)iento .......................................................... *$
,.1.3 <ni)acin por for)a .............................................................................................
*1
,.1., <ni)acin por alfa................................................................................................. *3
,.1.* <ni)acin por 6rillo ...............................................................................................
**
,.1.- <ni)acin por tinta ................................................................................................
*8
,.1.. <ni)acin con capa 0u"a ........................................................................................
-$
IMSS | Mdulo I *
,.1.8 <ni)acin con );scara ..........................................................................................
-3
Mdulo 8 Introduccin a <ction Script ............................................................................. -.
*.1 &aracter"sticas 0enerales del <ction Script.....................................................................
-8
*.2 +anel <cciones ..............................................................................................................
-9
*.3 =peradores ...................................................................................................................
-9
*.3.1 =peradores <rit)>ticos..........................................................................................
.$
*.3.2 =peradores de <si0nacin ......................................................................................
.$
*.3.3 =peradores de &o)paracin ..................................................................................
.1
*.3., =tros =peradores ...................................................................................................
.2
*., 1etener ?Stop@..............................................................................................................
.3
*.* Ir a la si0uiente escena ..................................................................................................
.*
*.- 0oto<nd+a7AB ................................................................................................................
..
*.. 0oto<ndStop .................................................................................................................
.8
*.8 0et3C: ..........................................................................................................................
.9
Mdulo 8I &reacin de +resentacin con Men% Interacti9o .................................... 8$
-.1 +resentacin con Men% Interacti9o ...............................................................................
81
-.1.1 Introduccin ...........................................................................................................
81
-.1.2 Men% Interacti9o.................................................................................................... 8-
2otas finales .......................................................................................................................
9$
i6lio0raf"a.........................................................................................................................
91
IMSS | Mdulo I -
Presentaciones Pro"esionales en ,las)
Ob$e"#% &e!e'al:
Al concluir el curso el participante emplear# las )erramientas
b#sicas de ,las) 1 para reali!ar presentaciones de alto impacto en su
#mbito laboral personal(
D#'#(#d A:
Personal IMSS 5 SNTSS &ue tengan dentro de sus labores la creacin
de presentaciones a sea para campa6as publicitarias o bien
presentaciones ejecuti'as(
Pe')#l de I!('e*:
El participante deber# contar con los cursos +Introduccin al 7so
8peracin de las Microcomputadoras-, +9indo:s ;P-, adem#s de tener
conocimientos b#sicos de dise6o manejo de im#genes(
IMSS | Mdulo I .
M+d,l I E-.l#cac#+! de la #!"e')a/
Ob$e"#%:
Al "inali!ar el modulo I el participante reconocer# las partes &ue
componen la inter"a! de Macromedia ,las), de esta "orma el participante
aplicar# de "orma correcta estas )erramientas(
I!"'d,cc#+!:
En la actualidad las )erramientas &ue nos o"recen para )acer
presentaciones pro"esionales son 'ariadas 'amos desde el tradicional
Po:er Point de Microso"t )asta la )erramienta &ue en este manual se 'a a
utili!ar Macromedia ,las)(
Al igual &ue en todo el so"t:are ,las) cuenta con 'ersiones una de
las mas recientes es la 1, cabe mencionar &ue a)ora sali a la 'enta la
nue'a 'ersin ,las) CS<, la cual a es de la "amilia de adobe(
,las) es una potente )erramienta con la cual podemos crear
animaciones de alto impacto, a sea para la creacin de p#ginas 9eb o
bien para presentaciones tipo Po:er Point a)% no termina la cosa
podemos )acer los tan "amosos demo reals &ue utili!an los dise6adores
para campa6as publicitarias, lo 4nico &ue nos pondr# una barrera ser#
nuestra imaginacin(
Como se comentaba con anterioridad al ser ,las) una potente
)erramienta esta cuenta con su propio lenguaje de programacin Action
Script, lo cual nos permite )acer desarrollos potentes &ue sobrepasan las
simples animaciones uno de estos podr%a ser una sencilla calculadora
animada(
Sin m#s pre#mbulos entremos de lleno a la explicacin de la inter"a! de
Macromedia ,las) 1.
IMSS | Mdulo I 8
010 I!"e')a/ de Fla*2
Al iniciar ,las) se muestra la siguiente pantalla en la cual podremos
escoger el tipo de proecto &ue se 'a a desarrollar, para el
desen'ol'imiento de este manual utili!aremos la opcin *ocumento de
,las)(
7na 'e! &ue se )a escogido la opcin de documento de ,las) se muestra la
siguiente pantalla.
IMSS | Mdulo I 9
*etallemos la 'entana diciendo como est# compuesta(
01010 Ba''a de T3",l: en esta barra se nos muestra en primer lugar el
icono de aplicacin seguido del nombre del programa nombre del arc)i'o
por 4ltimo los botones de control, &ue nos sir'en para. minimi!ar,
restaurar cerrar la aplicacin(
01014 Ba''a de Me!5: tiene como propsito "acilitar el acceso a las
distintas utilidades del programa( Es similar a la de cual&uier otro
programa de dise6o :eb o gr#"ico, aun&ue tiene algunas particularidades(
3eamos los principales Submen4s a los &ue se puede acceder.
A'c2#%: Permite crear nue'os arc)i'os, abrirlos, guardarlos((( *estaca la
potencia de la utilidad Importar &ue inserta en la pel%cula actual casi todo
tipo de arc)i'os /sonidos, '%deo, im#genes e incluso otras pel%culas ,las)0,
o la de Con"iguracin de Publicacin desde donde se pueden modi"icar las
caracter%sticas de la publicacin( Tambi2n permite con"igurar la impresin
de las p#ginas, imprimirlas(((
Ed#c#+!: Es el cl#sico men4 &ue te permite Cortar, Copiar, Pegar((( tanto
objetos o dibujos como "otogramas= tambi2n permite personali!ar algunas
de las opciones m#s comunes del programa(
Ve': Adem#s de los t%picos >ooms, te permite mo'erte por los "otogramas
por las escenas( Tambi2n inclue la posibilidad de crear una cuadr%cula
unas gu%as( Esto se puede seleccionar desde los submen4s Cuadr%cula
?u%as desde donde tambi2n se pueden con"igurar sus opciones(
I!*e'"a': Te permite insertar objetos en la pel%cula, as% como nue'os
"otogramas, capas, acciones, escenas(((
Md#)#ca': @a opcin Trans"ormar permite modi"icar los gr#"icos existentes
en la pel%cula, la opcin Tra!ar Mapa de Aits con'ierte los gr#"icos en
IMSS | Mdulo I 1$
mapas 'ectoriales /este tema se tratar# m#s adelante0( El resto de opciones
permite modi"icar caracter%sticas de los elementos de la animacin
Sua'i!ar, 8ptimi!ar o de la propia pel%cula /Capa, Escena0(
Te-": Sus contenidos a"ectan a la edicin de texto( M#s adelante se
tratar# en pro"undidad(
C6a!d*: Permite administrar los Comandos /conjunto de sentencias
almacenadas &ue permiten emular lo &ue un usuario pueda introducir en
el entorno de edicin0 &ue )aamos almacenado en nuestra animacin,
obtener otros nue'os de la p#gina de Macromedia o ejecutar los &ue a
tengamos(
C!"'l: *esde a&u% se modi"ican las propiedades de reproduccin de la
pel%cula( Reproducir, Rebobinar, Probar Pel%cula(
Ve!"a!a: Este men4, adem#s de las opciones cl#sicas acerca de cmo
distribuir las 'entanas, inclue accesos directos a T8*8S los Paneles(
A7,da: *esde a&u% podemos acceder a toda la auda &ue nos o"rece
Macromedia, desde el manual existente, )asta el diccionario de Action
Script, pasando por tutoriales, lecciones guiadas etc(
01018 Ca$a de He''a6#e!"a*: *esde a&u% podr# seleccionar la )erramienta
&ue desee utili!ar(
Seleccin
@%nea
Pluma
8'alo
@#pi!
Trans"ormacin libre
Aote de pintura
Cuenta gotas
Sub seleccin
@a!o
Texto
Cuadro
Pincel
Trans"ormacin relleno
Cubo de pintura
Aorrador
IMSS | Mdulo I 11
IMSS | Mdulo I 12
Mano >oom
Color tra!o
Color relleno
Alanco Negro, Sin color
e Intercambiar
Ajustar a objetos
Suavizar Enderezar
01019 Pa!el L3!ea de T#e6.: En este panel podr# manipular los tiempos
de duracin de una animacin as% como el n4mero de "otograma en &ue
uno est# posicionado(
Lnea de tiempo
IMSS | Mdulo I 13
0101: Pa!el de ca.a*: En este panel podr#s tener control sobre el n4mero
de capas &ue 'an a contener los s%mbolos la misma escena(
Alo&uearB*esblo&uear Capas
MostrarB8cultar Contornos
Mostrar/Ocultar capas
Insertar
capa
Insertar Capa
Insertar
carpeta
capas
Eliminar
Capa
0101; Pa!el de P'.#edade*: Este panel ir# cambiando con respecto al
objeto &ue est2 seleccionado(
0101< Z!a de Pa!ele*: En esta !ona se muestran los paneles acti'os un
ejemplo de ello es la biblioteca o bien el panel de colores(
?u%a
IMSS | Mdulo I 1,
014 C!)#(,'ac#+! del Dc,6e!"
Podemos )acer la con"iguracin del documento en esta podemos
modi"icar las siguientes propiedades.
01410 D#6e!*#!e*
Clic en el men4 modi"icar
Clic en documento
Poner el alto anc)o
Clic en el botn aceptar
01414 Cl' de )!d
Clic en documento
Clic en color de "ondo
Clic en el color deseado
IMSS | Mdulo I 1*
01418 N,6e' de )"('a6a* .' *e(,!d
Clic en documento
Aumentar o disminuir el n4mero de
"otogramas
01419 U!#dade* de 6ed#da
Clic en documento
Cambiar las unidades de medida
2=!<# :as unidades de )edida por defecto son los pixeles4 7 la 9elocidad es de 12 fps
IMSS | Mdulo I 1-
018 C'ea'= &,a'da'= Ce''a'= P,bl#ca' 7 V#*,al#/a'
3eremos como crear nue'os documentos, como guardarlos, como
publicarlos como abrir documentos existentes, es necesario saber &ue a
los arc)i'os creados en ,las) se les 'a a llamar pel%culas(
01810 c'ea' !,e%* dc,6e!"*
Clic en men4 arc)i'o
Clic en nue'o
Seleccionar documento en "las)
01814 &,a'da' Dc,6e!"
Clic en el men4 arc)i'o
Clic en guardar como
Seleccionar el lugar destino
Teclear el nue'o nombre
IMSS | Mdulo I 1.
01819 Ce''a' dc,6e!"
Clic en cerrar
0181: P,bl#ca'
Cuando se publica un documento de ,las)
se crean tres arc)i'os el ("la el (s:" el ($TM@, el
primero de estos es el arc)i'o editable, el segundo
es el arc)i'o ejecutable el 4ltimo crea cdigo
$TM@ se muestra en el na'egador(
IMSS | Mdulo I 18
Clic en publicar
0181; V#*,al#/ac#+! de la .el3c,la
Para la 'isuali!acin de la pel%cula solo )a &ue aplicar la siguiente
combinacin de teclas autom#ticamente se mostrara la animacin en
una pantalla aparte(
Ctrl C enter
En esta pantalla se mostrar# la animacin(
M+d,l II Ma!e$ de L3!ea de T#e6. 7 Ca.a*
IMSS | Mdulo II 19 Man
e'o
Ob$e"#%:
Al "inali!ar el mdulo el participante operar# la l%nea de tiempo,
capas manejar# las )erramientas de texto, tra!os e im#genes(
I!"'d,cc#+!:
Cuando empe!amos a trabajar en "las) necesitamos conocer el
manejo de la l%nea de tiempo como est# compuesta esta /"rames0(
3eremos como introducir texto &ue este se mantenga durante un
determinado tiempo, para &ue posteriormente cambie al segundo texto
as% sucesi'amente, de esta "orma se crea una presentacin digamos plana
sin animaciones(
Es importante mencionar el uso de las capas el cual nos ser'ir# para
tener un maor orden dentro de nuestra pel%cula de esta "orma nos
"acilitar# las modi"icaciones en caso de ser necesarias(
Crearemos una capa por cada uno de los textos &ue 'amos a
introducir daremos algunos "ormatos como el tipo de "uente, el color, la
alineacin entre otros(
Es de suma importancia mencionar &ue la 'elocidad &ue tiene por
de"ecto ,las) es de DE "otogramas /"rames0 por segundo lo cual &uiere
decir &ue por cada DE "otogramas en los &ue est2 el texto, dibujo o imagen
transcurrir# un segundo, como se 'io en el mdulo anterior nosotros
podemos cambiar el n4mero de "otogramas(
IMSS | Mdulo II 2$ Man
e'o
T#. de F"('a6a F'6a de I!*e'c#+!
F"('a6a e! Bla!c ,F
F"('a6a cla%e ,G
A''a*"'a' F"('a6a ,H
410 P'e*e!"ac#+! c! "e-"
A continuacin 'eremos como crear una presentacin con texto las
propiedades del mismo, as% como el manejo de la l%nea de tiempo capas(
41010 E-.l#cac#+! de la L3!ea de T#e6.
Esta es la l%nea de tiempo del lado i!&uierdo 'emos el panel de
capas, en la l%nea de tiempo 'emos unos pe&ue6os recuadros los cuales se
llamas "otogramas son de suma importancia para determinar la duracin
de nuestra animacin(
41014 I!*e'c#+! de )"('a6a*
Cuando nosotros decidimos copiar, insertar un "otograma en blanco o bien
Fotograma en blanco: se utili!a cuando se necesita insertar un nue'o
texto imagen o dibujo en x "otograma(
Fotograma clave: se utili!a cuando se desea crear una animacin
Copiar o arrastrar fotogramas: se utili!a cuando se desea &ue solo se
un "otograma cla'e se reali!a lo siguiente.
muestre un "otograma no se 'aa a crear alguna animacin(
41018 I!*e'c#+! de ca.a*
Clic en el botn insertar capa
e'o
41019 ca6b#a' el !6b'e a la ca.a
*oble clic sobre la capa
Teclear el nue'o nombre
*ar enter
4101: I!*e'c#+! de "e-"
Colocados en la escena D
Seleccionar la )erramienta texto
Ir al documento dar clic sostenido dibujar una caja de texto
Introducir el texto deseado
4101; P'.#edade* de "e-"
Podemos cambiar las propiedades del texto al igual &ue en 9ord, su
color, su tipo, su tama6o, negritas, it#licas alineacin as% como el alto,
anc)o coordenadas, las cuales se 'en sobre un plano cartesiano ejes +;-
+I-, esto es su posicionamiento dentro de el documento(
Seleccionar el texto
Ir al panel de propiedades
Modi"icar las propiedades deseadas
e'o
4101< E$e'c#c# 0
Con auda del instructor reali!ar el siguiente ejercicio
>?,e 2ace'@
Crear un nue'o documento
Crear H capas, cambiarle el nombre a cada una de ellas por el &ue se le
indi&ue(
En la capa D dibujar un cuadro de texto &ue diga +bien'enidos- arrastrar el
"otograma para &ue se muestre durante tres segundos(
En la capa E ir al "otograma <F e insertar un "otograma en blanco, dibujar
un cuadro de texto &ue diga +al- &ue se muestre durante dos segundos(
En la capa < ir al "otograma GE insertar un "otograma en blanco, dibujar
una caja de texto &ue diga +Curso- )acer &ue se muestre durante tres
segundos(
En la capa J ir al "otograma KK, insertar un "otograma en blanco, dibujar
una caja de texto &ue diga +de- &ue se muestre durante dos segundos(
En la capa H ir al "otograma DEJ, insertar un "otograma en blanco, dibujar
una caja de texto &ue diga +Presentaciones Pro"esionales en ,las)- &ue
se muestre durante J segundos(
?uardar el documento con el nombre de. +ejercicioD-
Reproducir la pel%cula
e'o
IMSS | Mdulo II 2, Man
e'o
414 P'e*e!"ac#+! c! d#b,$* e! Fla*2
Al igual &ue en el punto anterior a&u% se 'a a trabajar una pe&ue6a
presentacin con dibujos creados en ,las), por lo tanto, a no es necesario
repetir la "orma en la cual se insertar#n los "otogramas las capas, por lo
tanto solo se 'er# como dibujar algunas de las "ormas b#sicas en "las)(
41410 D#b,$a' ,! C3'c,l
3eamos como dibujar un c%rculo en "las), cabe mencionar &ue
cuando nosotros seleccionamos la )erramienta de '
alo
autom#ticamente se acti'an dos propiedades &ue son el color
de
relleno el color de contorno( Realicemos los siguientes pasos.
Seleccionar la )erramienta de 'alo
*ibujar un 'alo en el lien!o
Tomemos en cuenta &ue al dibujar el c%rculo se crean dos "iguras a &ue
una de ellas es el contorno la otra es el relleno por lo tanto, cuando
tengamos &ue mo'er el 'alo )abr# &ue seleccionar las dos "iguras, a &ue
de lo contrario solo se mo'er# alguna de ellas(
IMSS | Mdulo II 2* Man
e'o
41414 D#b,$a' c,ad'ad
Al igual &ue al dibujar un c%rculo el cuadrado tiene las propiedades
de color de contorno color de relleno, por lo cual al ser dibujado se crean
dos "iguras una es el contorno la otra el relleno( 3eamos como dibujar
nuestro cuadrado(
Seleccionar la )erramienta rect#ngulo
*ibujar un rect#ngulo o un cuadrado en nuestro lien!o
41418 D#b,$a' ,!a e*"'ella
Para dibujar una estrella es un poco m#s elaborado pero nada del
otro mundo solo )a &ue decidir de cuantos picos se desea dibujar nuestra
estrella listo 'eamos como )acerlo.
Clic sostenido en la )erramienta rect#ngulo
Clic en pol%gono
Ir al panel de propiedades dar clic en opciones
IMSS | Mdulo II 2- Man
e'o
Seleccionar el estilo. estrella el n4mero de lados
Clic en el botn Aceptar(
*ibujar la estrella
41419 D#b,$a' )#(,'a* *#! c!"'!
Cuando &ueremos dibujar alguna "igura sin contorno solo basta con
desacti'ar el color de contorno seguir dibujando esto )ace &ue solo
&uede una "igura &ue es el color de relleno( 3eamos como )acerlo en
el
siguiente ejemplo= cabe mencionar &ue para cual&uier "igura ser# lo
mismo(
Seleccionar la )erramienta 'alo
Luitar el color de contorno &ue se
encuentra en la caja de )erramientas(
*ibujar la "igura
IMSS | Mdulo II 2. Man
e'o
4141: P'.#edade* de )#(,'a*
@as propiedades de las "iguras dibujadas en "las) son mu parecidas
las m#s comunes son el alto el anc)o, as% como las coordenadas de la
misma /x,0, sin dejar a un lado el color &ue se le pudiese asignar despu2s
de dibujada la "igura, el color de la misma puede ser slido o bien
degradado en "orma lineal o radial
Seleccionar la )erramienta 'alo
*ibujar un 'alo /sin contorno0
Ir al panel propiedades cambiar an alt /modi"icar las medidas0
Para poder modi"icar las coordenadas &ue nuestra "igura &uede
posicionada en donde deseamos podemos cambiar los 'alores en el eje de
las +x- en el eje de las +-= )agamos lo siguiente
Seleccionar la "igura /esto con la )erramienta seleccin0
Ir al panel propiedades modi"icar las coordenadas
e'o
3eamos como dibujar un c%rculo con color de "on do degradado en "orma
radial(
Seleccionar la )erramienta c%rculo
Luitar el color de contorno
Ir al panel color
Seleccionar el tipo radial
*e"inir la combinacin de colores
*ibujar el c%rculo
e'o
4141; D#b,$a' l3!ea*
Podemos dibujar l%neas rectas o bien cur'as, se tienen entre las
)erramientas una &ue se llama l#pi! la cual nos sir'e para )acer tra!os a
mano al!ada, 'eamos 'arios ejemplos de cmo dibujar l%neas(
IMSS | Mdulo II 3$ Man
e'o
Empecemos con una l%nea recta(
Seleccionar la )erramienta l%nea
Seleccionar el color grosor de la l%nea /panel propiedades0
*ibujar la l%nea en el lien!o
Sigamos con una l%nea cur'a
Seleccionar la )erramienta l%nea
Seleccionar el color grosor
*ibujar la l%nea
Colocar el puntero en el centro de la l%nea dar clic sostenido
arrastrar(
e'o
4141< E$e'c#c# 4
Con auda del instructor reali!ar el siguiente ejercicio
>?,e 2ace'@
Crear H capas nombrando a cada una de ellas de la siguiente "orma.
Capa D. C%rculo
Capa E. Cuadrado
Capa <. Estrella
Capa J. @%nea
Capa D. Cara
En la capa D dibujar un c%rculo sin contorno con un degradado radial, el
primer color 'a a ser blanco el segundo 'a a ser 'erde, )acer &ue dure <
segundos(
En la capa E insertar un "otograma en blanco en el "otograma <F dibujar
un cuadrado sin contorno color de relleno a!ul &ue sea slido )acer
&ue dure < segundos(
En la capa < insertar un "otograma en blanco en el "otograma FJ dibujar
una estrella de H picos sin contorno color de relleno degradado radial
donde. el primer color sea morado el segundo a!ul, )acer &ue se muestre
durante E segundos(
En la capa J insertar un "otograma en blanco en el "otograma KK dibujar
tres l%neas con un grosor de H ptos cada una )acer &ue se muestren
durante E segundos(
En la capa H insertar un "otograma en blanco en el "otograma DE< en esta
capa 'amos a dibujar 'aria "iguras la primera ser# un c%rculo grande de
an. DHE alt. DHE color amarillo, despu2s dibujar dos c%rculos &ue 'an a
ser los ojos sin contorno de color rojo de an. EF alt. EF posteriormente
dibujar una l%nea cur'earla para &ue sea la boca de J de color rojo
)acer &ue se 'ea durante < segundos(
?uardar el arc)i'o con el nombre ejercicioE
e'o
3isuali!ar la pel%cula(
418 P'e*e!"ac#+! c! I6A(e!e*
Para poder )acer una presentacin con im#genes es necesario
importar dic)as a "las), el lugar donde se 'an a guardar es en la
biblioteca, pero )a &ue mencionar &ue al importar una imagen a nuestra
biblioteca autom#ticamente la con'ierte en un mapa de bits( Moti'o por el
cual si nosotros deseamos animar la imagen ser# necesario crear un
s%mbolo gr#"ico arrastrar el mapa de bits dentro de 2l(
Como se mencion con anterioridad la imagen se guarda en la
biblioteca como mapa de bits sin importar el "ormato &ue esta tenga en un
principio( Mostraremos una imagen importada en la biblioteca(
*e esta "orma nosotros podremos utili!ar la imagen cuantas 'eces
sea necesario podremos 'isuali!ar tener un pleno control sobre las
im#genes importadas a nuestra biblioteca(
41810 I6.'"a' #6A(e!e* a la b#bl#"eca
Para importar una imagen a nuestra biblioteca solo )a &ue reali!ar
los siguientes pasos.
Posicionarse sobre importar
Clic en importar a la biblioteca
IMSS | Mdulo II 33
Mane'o
Auscar seleccionar la imagen
Clic en el botn abrir
I listo el resultado ser# el siguiente.
41814 I!*e'"a' la #6a(e! e! el e*ce!a'#
7na 'e! importada la imagen a la biblioteca lo siguiente ser#
utili!arla de &ue "orma )aremos esto. lo 4nico es lle'arla al escenario
listo se podr# utili!ar, para ello )aremos lo siguiente.
IMSS | Mdulo II 3, Man
e'o
Seleccionar la imagen de la biblioteca /clic sostenido0
Arrastrar al lien!o soltar
Esto nos insertar# la imagen con su tama6o original &uedar# de la
siguiente "orma.
Cabe mencionar &ue al igual &ue las "iguras dibujadas en "las) las
im#genes &ue se importan a la biblioteca tienen las propiedades de alto,
anc)o sus coordenadas, las cuales para ser modi"icadas )a &ue ir al
panel de propiedades darle los nue'os 'alores(
IMSS | Mdulo II 3* Man
e'o
Con esto terminamos de 'er el apartado para im#genes , a)ora bien
)agamos nuestro ejercicio para &ue re"orcemos nuestros conocimientos(
41818 E$e'c#c# 8
A)ora bien con lo reali!ado en los ejercicios anteriores usted ser#
capa! de reali!ar este pe&ue6o ejercicio, siga las instrucciones &ue se dan
a continuacin.
>?,e 2ace'@
Crear DD capas, cambiarle el nombre a cada una de ellas por.
CapaDMimaD, capaEMimaE as% sucesi'amente(
Importar a la biblioteca las im#genes &ue se encuentran en la carpeta bbs(
Posteriormente reali!ar los siguientes pasos.
En la capa D arrastrar la imagenD )acer &ue se muestre durante dos
segundos(
IMSS | Mdulo II 3- Man
e'o
En la capa E ir al "otograma EH e insertar un "otograma en blanco,
arrastrar la imagen E )acer &ue se muestre durante dos segundos(
Repetir los pasos )asta terminar en la capa DD(
?uardar el documento con el nombre de. +ejercicio <-
Reproducir la pel%cula
IMSS | Mdulo II 3. Man
e'o
M+d,l III S36bl*
Ob$e"#%:
Al "inali!ar el mdulo el participante distinguir# entre los di"erentes
tipos de s%mbolos &ue se pueden insertar en "las) la "orma de utili!ar los
mismos(
I!"'d,cc#+!:
En un principio sabremos la "orma de insercin delos s%mbolos los
cuales son.
?r#"ico
Clip de pel%cula
Aotones
Cuando nosotros &ueremos crear animaciones con im#genes lo
primero &ue )abr%a &ue )acer es con'ertirlo a un s%mbolo gr#"ico para &ue
posteriormente lo ingresemos a un clip de pel%cula(
Cabe mencionar &ue los botones pueden contener animaciones a
su 'e! sonidos deben de estar programados para &ue nos lle'en a un
lugar en espec%"ico(
Es mu importante el saber el "uncionamiento de cada uno de los
s%mbolos a &ue son parte medular en las animaciones &ue crearemos en
"las)(
@os tres tipos de s%mbolos al ser creados se &uedan guardados en
nuestra biblioteca lo &ue tendremos &ue )acer es arrastrarlos al
escenario cada 'e! &ue estos sean re&ueridos(
Cada s%mbolo posee una @%nea de tiempo un Escenario 4nicos,
completo con capas( Al crear un s%mbolo, debe elegir cmo se 'a a
comportar el s%mbolo, en "uncin cmo se utili!ar# en la pel%cula(
IMSS | Mdulo III 38
810 &'A)#c*
Cuando )ablamos de los s%mbolos gr#"icos es necesario identi"icar
primeramente su icono posteriormente saber &ue, un s%mbolo gr#"ico
'a ser un contenedor de una imagen importada a nuestra biblioteca, de
esta "orma usted podr# dar animacin a dic)a imagen(
7tilice s%mbolos gr#"icos para las im#genes est#ticas para crear
pie!as de animacin reutili!ables ligadas a la @%nea de tiempo de la
pel%cula principal( Estos s%mbolos est#n sincroni!ados con la @%nea de
tiempo de la pel%cula principal( @os controles sonidos interacti'os no
"uncionan en la secuencia de animacin de un s%mbolo gr#"ico(
81014 I!*e'"a' ,!a #6a(e! e! ,! ('A)#c
Como a se )ab%a 'isto con anterioridad, al importar una imagen a
la biblioteca esta se &ueda como mapa de bits= a)ora 'eamos como
insertar un mapa de bits dentro de un s%mbolo gr#"ico, realicemos los
siguientes pasos.
Importar la imagen a la biblioteca
Clic en el men4 insertar
Clic en nue'o s%mbolo
Seleccionar el tipo de s%mbolo /gr#"ico0
Ponerle el nombre al s%mbolo
Arrastrar el mapa de bits al escenario del s%mbolo
Ponerle coordenadas /N,N0
IMSS | Mdulo III 39
*e esta "orma nuestro s%mbolo gr#"ico est# listo para usarse cuando las
'eces &ue sea necesario(
2=!<# Es reco)enda6le anteponerle al no)6re del 0r;fico el prefi'o ?5C@ para Due de esta
for)a se pueda distin0uir )e'or Due se trata de un s")6olo 0r;fico4 claro ade);s de su
"cono.
814 Cl#. de Pel3c,la
7tilice s%mbolos de clip de pel%cula para crear pie!as de animacin
reutili!ables( @os clips de pel%culas tienen sus propias l%neas de tiempo de
'arios "otogramas &ue se reproducen de independientemente de la @%nea de
tiempo de la pel%cula principal= piense en ellos como en miniOpel%culas
dentro de una pel%cula principal &ue pueden contener controles, sonidos e
incluso otras instancias de clip de pel%cula interacti'os( Tambi2n pueden
IMSS | Mdulo III ,$
colocarse instancias de clip de pel%cula dentro de la @%nea de tiempo de un
s%mbolo de botn para crear botones animados, adem#s un clip de pel%cula
puede contener otros clips de pel%cula dentro de su l%nea de tiempo(
IMSS | Mdulo III ,1
Puede asignar par#metros de clip /'ariables con 'alores0 a un clip de
pel%cula para crear un clip PinteligenteP( Puede agregar acciones de clip
construir scripts para el clip inteligente para crear elementos de inter"a!,
como botones de radio, men4s desplegables o in"ormacin sobre
)erramientas, &ue respondan a los clics de ratn a otros e'entos(
Para e"ectos pr#cticos 'eamos una sencilla animacin dentro de un
s%mbolo clip de pel%cula, esta animacin ser# "otograma por "otograma(
Cabe mencionar &ue como se 'io al principio de este manual la 'elocidad
de reproduccin de una pel%cula en "las) es de DE"ps(
81410 #!*e'"a' ,! *36bl cl#. de .el3c,la
Clic en clip de pel%cula
Ponerle el nombre
81414 c'eac#+! de ,!a a!#6ac#+! de!"' de ,! cl#. de .el3c,la
7na 'e! &ue se )aa creado el s%mbolo clip de pel%cula se mostrara
en la barra de t%tulo el siguiente icono &ue nos indica &ue es un clip de
pel%cula &ue adem#s se esta posicionado dentro de el moti'o por el cual
empe!aremos a reali!ar nuestra animacin(
IMSS | Mdulo III ,2
En la capa D "otograma D dibujar un c%rculo sin contorno de color rojo
copiar el "otograma cla'e /,G0 )asta llegar al "otograma D<, posteriormente
colocarnos en el "otograma E dar suprimir, luego en el "otogramaJ, G, 1,
DN, DE, listo la animacin a esta creada= solo "alta regresar a la escena D
arrastrar el clip de pel%cula al escenario dar ctrl C enter(
818 B"!e*
7tilice s%mbolos de botn para crear botones interacti'os en la
pel%cula &ue respondan a los clics despla!amientos del ratn, o dem#s
acciones( *e"%nalos gr#"icos asociados con 'arios estados del botn , a
continuacin, asigne acciones a una instancia del botn(
@os botones son realmente clips de pel%cula interacti'os de cuatro
"otogramas( Cuando se selecciona el comportamiento del botn para un
s%mbolo, ,las) crea una @%nea de tiempo con cuatro "otogramas( @os tres
primeros "otogramas muestran los tres posibles estados del botn= el
cuarto "otograma de"ine el #rea acti'a del botn( @a @%nea de tiempo no se
reproduce realmente= simplemente reacciona a los mo'imientos acciones
del puntero saltando al "otograma correspondiente(
IMSS | Mdulo III ,3
Para &ue un botn sea interacti'o en una pel%cula, colo&ue una
instancia del s%mbolo del botn en el Escenario asigne acciones a la
instancia( @as acciones deben asignarse a la instancia del botn en la
pel%cula no a los "otogramas en la @%nea de tiempo del botn(
Cada "otograma de la @%nea de tiempo de un s%mbolo de botn tiene
una "uncin espec%"ica.
El primer "otograma es el estado Reposo, representa el botn
siempre &ue el puntero no est2 sobre 2l(
El segundo "otograma es el estado Sobre, representa el aspecto del
botn cuando el puntero se encuentra sobre el mismo(
El tercer "otograma es el estado Presionado, representa el aspecto del
botn cuando se )ace clic sobre el mismo(
El cuarto "otograma es el estado >ona acti'a, de"ine el #rea &ue
responder# al clic del ratn( Esta #rea es in'isible en la pel%cula(
@os botones son s%mbolos &ue 'an programados, los cuales nos
pueden lle'ar a alg4n determinado lugar como una direccin 7R@ o bien
alg4n lugar dentro de la escena o en su de"ecto a otra escena= para ello
necesitamos programarlos, en el mdulo de action script se 'er# la "orma
de )acerlo, por el momento nos dedicaremos a la creacin de los botones(
81810 c'eac#+! de *36bl* de b"+!
Para crear un botn realice los siguientes pasos.
Clic en botn
Ponerle el nombre
IMSS | Mdulo III ,,
7na 'e! creado el botn tendremos &ue )acer lo siguiente. )aremos
una capa "ondo otra capa texto, en la primera crearemos un recuadro de
un color en su primer estado /reposo0, en el estado sobre copiaremos el
"otograma cla'e le cambiaremos el color a dic)o recuadro, )aciendo lo
mismo en el estado presionado, posteriormente crearemos un texto en el
estado reposo en la capa llamada texto, copiaremos el "otograma cla'e en
los dem#s estados(
Esta es la "orma en la cual se 'isuali!a el s%mbolo botn antes de
crear las capas, "iguras texto( Ntese los tres estados &ue solo el
primer estado tiene un "otograma en blanco(
IMSS | Mdulo III ,*
A)ora 'eamos la "orma en la cual se 'era una 'e! &ue se )aa creado el
botn, ponga atencin en los "otogramas de los estados(
A)ora bien cabe mencionar &ue a un botn se le puede agregar sonido
animaciones 'eamos la "orma de )acerlo.
81814 #!*e'c#+! de *!#d e! ,! b"+!
Para esta accin utili!aremos el ejemplo anterior el del botn entrar
para a)orrar un poco de tiempo( 7na 'e! creado el botn )agamos lo
siguiente.
Abrir el s%mbolo botn dando doble clic sobre su icono en la
biblioteca(
Insertemos una nue'a capa, nombr2mosla como sonido
Importar el sonido a la biblioteca
En la capa sonido en el "otograma del estado sobre insertar un
"otograma en blanco
Arrastrar el sonido de la biblioteca a cual&uier parte de la escena
@isto 'eamos el resultado(
IMSS | Mdulo III ,-
M+d,l IV A!#6ac#!e*
Ob$e"#%:
Al "inali!ar el mdulo el participante crear# animaciones para dar un
mejor "ormato a su presentacin(
I!"'d,cc#+!:
Cuando )ablamos a cerca de las animaciones creadas en "las)
podemos poner como 4nico limitante nuestra propia creati'idad a &ue
estas animaciones se pueden combinar 'arias para crear una de alto
impacto(
Es necesario mencionar &ue estas animaciones no solamente se
pueden usar en una presentacin sino &ue tambi2n se crean animaciones
para las p#ginas 9eb, esto las )ace m#s atracti'as para sus 'isitantes(
$a 'arios tipos de animaciones en "las) unas de las m#s
importantes son las siguientes las estaremos desarrollando en este
manual(
Animacin "otograma por "otograma
Animacin con interpolacin de mo'imiento
Animacin por "orma
Animacin al"a
IMSS | Mdulo I8 ,.
Animacin brillo
Animacin tinta
Animacin con capa gu%a
Animacin con m#scara
IMSS | Mdulo I8 ,8
910 A!#6ac#!e*
A)ora bien 'eamos como crear cada una de las animaciones antes
mencionadas, esto se )ar# mediante pr#cticas sencillas para cada una al
"inali!ar el mdulo usted )ar# su propia animacin combinando dos o m#s
de las animaciones, eso depender# de nuestra creati'idad(
91010 A!#6ac#+! )"('a6a .' )"('a6a
En este apartado se 'er# como crear una animacin "otograma por
"otograma la cual ser# una estrella &ue dar# el e"ecto parpadeante es decir,
de destellos(
Crearemos un clip de pel%cula posteriormente seguiremos las
instrucciones abajo mencionadas(
En la capa D "otograma D dibujar una estrella sin contorno de color
a!ul degradado copiar el "otograma cla'e /,G0 )asta llegar al "otograma
D<, posteriormente colocarnos en el "otograma E dar suprimir, luego en
el "otogramaJ, G, 1, DN, DE, listo la animacin a esta creada= solo "alta
regresar a la escena D arrastrar el clip de pel%cula al escenario dar ctrl
C enter(
As% se 'er%a la l%nea de tiempo.
I as% se 'er%a la escena i en si capa uno en el primer "otograma.
IMSS | Mdulo I8 ,9
91014 A!#6ac#+! .' #!"e'.lac#+! de 6%#6#e!"
A)ora crearemos una animacin con interpolacin de mo'imiento, la
cual ser# una pelota &ue rebota contra el piso, pero cabe mencionar &ue
estos rebotes ser#n en "orma diagonal(
Cabe mencionar &ue cuando creamos una animacin con
interpolacin a sea de mo'imiento o de "orma se necesita de"inir los
estados &ue 'a a ocupar el objeto un ejemplo podr%a ser estado inicial
estado D estado E el estado n /3o, 3D, 3E, 3n, Q(3"0
Crear un s%mbolo clip de pel%cula, reali!ar lo siguiente.
En la capa D dibujar un c%rculo sin contorno de JD(N de di#metro
coordenadas /<N,<N0
Ir al "otograma DE copiar el "otograma el "otograma cla'e /,G0
Regresar al "otograma D dar clic derec)o sobre el clic en crear
interpolacin de mo'imiento(
@a l%nea de tiempo se 'era de la siguiente "orma.
IMSS | Mdulo I8 *$
A)ora ir al "otograma DE seleccionar el circulo dando clic sobre el con la
)erramienta de seleccin(
Cambiarle las coordenadas por /DHF,DFN0
Ir al "otograma EJ copiar el "otograma cla'e /,G0
Regresar al "otograma DE crear la interpolacin de mo'imiento
Ir al "otograma EJ
Seleccionar el c%rculo ponerle las coordenadas /EGG,<N0(
@a l%nea de tiempo &uedar# de la siguiente "orma notemos &ue en
el "otograma D es el 3o, el "otograma DE es el 3D el "otograma EJ ser%a el
4ltimo estado 3" con una traectoria de despla!amiento diagonal(
Repetir los pasos anteriores dependiendo del n4mero de rebotes &ue
desee uno &ue de la pelota, es necesario recordar el numero de "otogramas
por segundo esto para saber cuanto tiempo 'a a tardar en rebotar la pelota
en este ejemplo se tarda D segundo por rebote(
91018 A!#6ac#+! .' )'6a
Cuando creamos una animacin por "orma lo &ue 'amos a )acer es
&ue un texto o bien una imagen se trans"orme a otra, 'eamos un ejemplo
mu sencillo, solo ser# la trans"ormacin de un texto el cual se 'a a
mostrar por unos segundos posteriormente cambiara a otro de igual
"orma este se mostrar# por uno segundos( $agamos lo siguiente.
Crear un clip de pel%cula
Crear un texto &ue diga +Aien'enido al curso-
$acer &ue se muestre durante dos segundos /"otograma EJ ,G0
Ir al "otograma <G e insertar un "otograma en blanco /,F0
IMSS | Mdulo I8 *1
*ibujar un texto &ue diga +Presentaciones pro"esionales en "las)-
$acer &ue se muestre durante dos segundos
Regresar al "otograma EJ
Seleccionar el texto dando clic derec)o sobre 2l
Clic en separar
Nue'amente dar clic derec)o sobre el texto
Clic en separar
Ir al "otograma <G dar clic derec)o sobre el texto
Clic en separar
Nue'amente dar clic derec)o sobre el texto
Clic en separar
Regresar al "otograma EJ
Ir al panel de propiedades en el apartado de animacin seleccionar
la &ue dice "orma(
Regresar a la escena D arrastrar el clip de pel%cula(
3eamos como &ueda la l%nea de tiempo.
IMSS | Mdulo I8 *2
91019 A!#6ac#+! .' al)a
En este tipo de animaciones lo &ue se )ace es &ue una imagen, texto
o bien un dibujo creado en "las) apare!ca o desapare!ca, es decir &ue su
tonalidad 'aa disminuendo )asta &ue &uede en cero, lo cual 'a a dar el
e"ecto de desaparicin de nuestro objeto, 'eamos como crear esta sencilla
animacin(
Insertar un s%mbolo clip de pel%cula
Importar a la biblioteca la imagen
Crear un s%mbolo gra"ico arrastrar el mapa de bits con
coordenadas /N,N0(
Regresar al s%mbolo clip de pel%cula
Arrastrar el s%mbolo gra"ico dentro del clip de pel%cula con
coordenadas /N,N0(
Copiar el "otograma cla'e en el "otograma EJ
Regresar al "otograma D dar clic derec)o crear la interpolacin de
mo'imiento(
El "otograma D ser# mi estado inicial el cual permanecer# 'isuali!ado
al"a DNNR
Ir al "otograma EJ seleccionar la imagen
Ir al panel propiedades cambiar el color por al"a el porcentaje por
NR
IMSS | Mdulo I8 *3
Regresar a la escena D arrastrar el mcSal"a a la escena
*ar ctrl C enter
*e esta "orma &ueda nuestra l%nea de tiempo
IMSS | Mdulo I8 *,
9101: A!#6ac#+! .' b'#ll
@a animacin por brillo es &ue un objeto /imagen texto o bien una
"igura0 'alla cambiando de un color negro es decir una silueta )asta
&uedar en su color original posteriormente se le puede dar la animacin
de desaparecer igual con brillo, a &ue esto se manejo como el brillo de un
tele'isor el cual, si se pone en lo mas bajo se 'e de color negro si se pone
en lo m#s alto se 'e de color blanco( En este caso se utili!a la medida
porcentaje, si &ueremos &ue nuestro objeto se 'ea de color negro lo &ue
tenemos &ue )acer es poner el brillo )asta ODNNR por el contrario si
&ueremos &ue se 'ea traslucido lo tendremos &ue poner en DNNR(
Realicemos nuestra animacin.
Crear un s%mbolo clip de pel%cula
Con'ertir la imagen en gra"ico
Abrir el clip de pel%cula
Arrastrar el gra"ico con coordenadas /N,N0
Ir al "otograma EJ copiar "otograma cla'e
Ir al "otograma J1 copiar "otograma cla'e
Ir al "otograma D clic derec)o crear la interpolacin de mo'imiento
seleccionar la imagen(
Ir al panel de propiedades cambiar el color por brillo porcentaje O
DNNR
IMSS | Mdulo I8 **
Ir al "otograma EJ cambiar el porcentaje de brillo a NR
Ir al "otograma J1 cambiar el porcentaje de brillo a DNNR
3eamos como &ueda nuestra l%nea de tiempo
Ir a la escena D arrastrar el clip de pel%cula
*ar ctrl C enter
IMSS | Mdulo I8 *-
IMSS | Mdulo I8 *.
9101; A!#6ac#+! .' "#!"a
En la animacin por tinta lo &ue se )ace es &ue un objeto 'aa
cambiando de tonalidad es decir de color pero gradualmente sin &ue la
imagen original se muestre solo una silueta la "igura completa aparecer#
en el momento &ue o lo desee(
El e"ecto de Tinta, tiene un amplio marco de posibilidades de uso( Es
mu usado en textos en botones, por ejemplo )aciendo &ue cambien
progresi'amente de color al pasarles el ratn por encima o simplemente
e"ectos de cambio de color en presentaciones(
El tintar colores supone unos to&ues alegres mu 'istosos en las
presentaciones si se usan 'arios e"ectos, combinados adecuadamente,
dota de un ritmo r#pido a la animacin, como una explosin de color &ue
sorprenda al receptor de la pel%cula( Creemos enseguida nuestra
animacin.
Ir al "otograma EJ copiar el "otograma cla'e
Ir al "otograma J1 copiar el "otograma cla'e
Ir al "otograma D crear la interpolacin de mo'imiento
Seleccionar la imagen poner color tinta, escoger el color negro
IMSS | Mdulo I8 *8
IMSS | Mdulo I8 *9
Ir al "otograma EJ crear la interpolacin de mo'imiento
Seleccionar la imagen poner color tinta, escoger el color gris
Por 4ltimo ir al "otograma J1 seleccionar la imagen poner color
tinta escoger cual&uier color en el #rea de porcentaje poner NR(
Ir a la escena D arrastrar el clip de pel%cula
*ar ctrl C enter
9101< A!#6ac#+! c! ca.a (,3a
Recordemos &ue cuando creamos una animacin por interpolacin de
mo'imiento, este despla!amiento lo reali!a el objeto en "orma recta, si
&ueremos &ue siga una traectoria de despla!amiento creada por nosotros,
es necesario insertar una capa gu%a en la cual dibujaremos con la
)erramienta l#pi! una l%nea cur'a, para &ue de esta "orma el objeto se guie
cubra esta traectoria( 3eamos como reali!arla.
IMSS | Mdulo I8 -$
Importar la imagen a'ion a la biblioteca
Insertar una capa gu%a
*ibujar con la )erramienta l#pi! la traectoria de despla!amiento en
el "otograma D de la capa gu%a
Ir al "otograma J1 de la capa D copiar el "otograma cla'e
Ir al "otograma J1 de la capa gu%a copiar el "otograma /,H0
Regresar al "otograma D de la capa D crear la interpolacin de
mo'imiento
Agarrar el centro de la imagen colocarlo al inicio de la traectoria
en el "otograma D
Ir al "otograma J1 seleccionar el centro de la imagen )acer &ue
coincida con el "inal de la traectoria de despla!amiento(
*e esta "orma debe de &uedar nuestra l%nea de tiempo
IMSS | Mdulo I8 -1
IMSS | Mdulo I8 -2
9101B A!#6ac#+! c! 6A*ca'a
En la animacin con m#scara lo &ue se reali!a es. una interpolacin de
mo'imiento, la cual 'a a tener un espacio determinado por otro objeto
dibujado en "las) pasar# por este objeto 4nicamente mostrando la
animacin dentro del espacio delimitado( 3eamos como crear esta
animacin(
En esta animacin modi"icaremos el tama6o del documento a
1NN x GNN
Arrastrar el gra"ico con coordenadas /N,N0 en la capa D renombrarla
como "ondo
Crear dos capas m#s
A la capaE ponerle el nombre de l%nea dibujar una l%nea color
blanco de E< pts de grosor colocarla )asta arriba de la imagen
IMSS | Mdulo I8 -3
*ar clic derec)o sobre la capa < clic en m#scara
Luitar los candados de las capas para &ue se puedan modi"icar
Ir al "otograma D de la capa m#scara
Seleccionar la )erramienta pluma dibujar el contorno de la
imagen(
Ir al "otograma GN de la capa "ondo copiar el "otograma
Ir al "otograma <N de la capa l%nea copiar "otograma cla'e
Ir al "otograma GN de la capa l%nea copiar el "otograma cla'e
Ir al "otograma GN de la capa < copiar el "otograma
Regresar al "otograma D de la capa l%nea crear la interpolacin de
mo'imiento
IMSS | Mdulo I8 -,
Ir al "otograma <N de la capa l%nea crear otra interpolacin de
mo'imiento
IMSS | Mdulo I8 -*
En el "otograma <N capa l%nea seleccionar la l%nea colocarla en la
parte in"erior, donde nuestra imagen termina
Regresar a la escena D arrastrar el clip de pel%cula con
coordenadas /E<H,D10
*ar ctrl C enter
IMSS | Mdulo I8 --
M+d,l V I!"'d,cc#+! a Ac"#! Sc'#."
Ob$e"#%:
Al "inali!ar el mdulo el participante conocer# las acciones
"undamentales del lenguaje de programacin Action script E(N para "las)(
I!"'d,cc#+!:
El Action Script es el lenguaje de programacin &ue )a utili!ado
Macromedia ,las) desde sus comien!os, &ue por supuesto, emplea ,las)
1( A grandes rasgos, podemos decir &ue el Action Script nos permitir#
reali!ar con ,las) 1 todo lo &ue nos propongamos, a &ue nos da el control
absoluto de todo lo &ue rodea a una pel%cula ,las)( Absolutamente de
todo(
Sin embargo, slo 'amos a 'er una pe&ue6a introduccin a Action
Script &ue ser'ir# para sentar las bases &ue permitir#n empe!ar a trabajar
con Action Script( Ense6ar a programar con Action Script re&uerir%a otro
curso completo( Pro"undi!ar en el conocimiento de este lenguaje &ueda por
cuenta del lector( Recomendamos seguir la estupenda Auda incluida en
,las) 1(
Todo lo re"erente a este cap%tulo )ace re"erencia a la 'ersin E de
Action Script, 4ltima 'ersin de este lenguaje de programacin lan!ada por
Macromedia e incorporada en ,las) M; ENNJ(
IMSS | Mdulo 8 -.
:10 Ca'ac"e'3*"#ca* (e!e'ale* del Ac"#! Sc'#."
Como a )emos comentado, el Action Script es el lenguaje de
programacin propio de ,las), tal como el @ingo lo es de Macromedia
*irector, por ejemplo( El Action Script est# basado en la especi"icacin
ECMAOEGE, al igual &ue otros lenguajes como Ta'ascript(
El Action Script es, como su nombre indica, un lenguaje de script,
esto &uiere decir &ue no )ar# "alta crear un programa completo para
conseguir resultados, normalmente la aplicacin de "ragmentos de cdigo
Action Script a los objetos existentes en nuestras pel%culas nos permiten
alcan!ar nuestros objeti'os(
El Action Script es un lenguaje de programacin orientado a objetos,
tiene similitudes, por tanto, con lenguajes tales como los usados en el
Microso"t 3isual Aasic, en el Aorland *elp)i etc((( aun&ue,
e'identemente, no tiene la potencia de un lenguaje puramente orientado a
objetos deri'ado del C o del Pascal como los anteriores, cada 'ersin se
acerca m#s a un lenguaje de este tipo( As%, la 'ersin E(N estrenada en
,las) M; ENNJ es muc)o m#s potente muc)o m#s Porientada a objetosP
&ue su anterior 'ersin D(N
El Action Script presenta muc)%simos parecidos con el Ta'ascript= si
conoce Ta'ascript, la sintaxis el estilo de Action Script le resultar#n mu
"amiliares( @as di"erencias entre ambos lenguajes las puede encontrar en
la auda &ue acompa6a al ,las) 1(
En la maor parte de las ocasiones, no ser# necesario PprogramarP
realmente, ,las) 1 pone a nuestra disposicin una impresionante
coleccin de P"uncionesP /de momento entenderemos P"uncionesP como
Pcdigo Action Script &ue reali!a una "uncin determinadaP0 a
implementadas &ue reali!an lo &ue buscamos, bastar# con colocarlas en el
lugar adecuado(
IMSS | Mdulo 8 -8
:14 Pa!el Acc#!e*
En ,las) 1, el Panel Acciones sir'e para programar scripts con
Action Script( Esto es, &ue todo lo &ue introdu!camos en dic)o Panel se
'er# re"lejado despu2s en nuestra pel%cula( *ebemos tener claro desde un
principio &ue el Panel Acciones puede )acer re"erencia a ,otogramas u
objetos, de modo &ue el cdigo Action Script introducido a"ectar# tan slo
a a&uello a lo &ue re"erencia el Panel( Por ejemplo, en la imagen in"erior, se
puede distinguir &ue el Panel Acciones )ace re"erencia al ,otograma D de
la Capa D(
El Panel Acciones se di'ide en E partes, a la i!&uierda tenemos una
auda "acilitada por ,las) &ue nos da acceso de un modo r#pido mu
cmodo a todas las acciones, objetos, propiedades etc((( &ue ,las) tiene
prede"inidos( Estos elementos est#n di'ididos en carpetas, &ue contienen a
su 'e! m#s carpetas clasi"icando de un modo e"ica! todo lo &ue ,las) pone
a nuestra disposicin( Para insertarlos en nuestro script bastar# con un
doble clic sobre el elemento elegido(
:18 O.e'ad'e*
Entrando un poco m#s a "ondo en la sintaxis el manejo del Action
Script, 'amos a comen!ar )ablando de los operadores, por ser la parte
m#s elemental de una accin de Action Script / de muc)%simos otros
lenguajes de programacin0(
7n operador es un tipo de car#cter &ue reali!a una accin especial
dentro de una expresin de Action Script( 7na expresin no es m#s &ue un
conjunto de operadores, 'ariables constantes relacionados entre s% de un
cierto modo( ,las) 1 sacar# un resultado de toda expresin &ue encuentre
en nuestra pel%cula( Por ejemplo.
IMSS | Mdulo 8 -9
x M < = OOU Es una expresin cuo resultado ser# asignarle a la 'ariable V x V
el 'alor < /&ue es una constante0
M H C x = OOU Es una expresin cuo resultado ser# asignarle a la 'ariable
V V la suma de la constante H la 'ariable V x V &ue sabemos &ue 'ale <
/por&ue le )emos asignado este 'alor antes0( Por tanto, el resultado de esta
expresin es asignarle a V V el 'alor 1 /< C H0(
,las) nos permite usar multitud de operadores, 'amos a comentar
los m#s comunes( El lector puede acceder a los dem#s / a estos0 desde el
Panel Acciones en la carpeta 8peradores( 3amos a clasi"icar los operadores
tal cmo lo )ace ,las) 1(
:1810 O.e'ad'e* A'#"6C"#c*
C . Suma( Este operador sir'e, como es de esperar, para sumar E
'alores(
O . Resta( Reali!a la operacin esperada de restar E 'alores(
W . Multiplicacin( Reali!a el producto de E 'alores
B . *i'isin( Es la cl#sica operacin de di'idir( Al contrario &ue en
algunos lenguajes de programacin, este operador s% &ue reali!a la di'isin
completa /incluendo decimales0
R . 8perador Resto( Este operador, no mu conocido en matem#tica,
es un cl#sico de la programacin( *e'uel'e el resto entre E n4meros(
Ejemplo. J R < M D, J R E M N(
:1814 O.e'ad'e* de A*#(!ac#+!
M . Igual( Este es el operador m#s importante de esta categor%a sin
duda, uno de los m#s usados( Almacena el 'alor situado en la parte
derec)a de una expresin en la 'ariable situada en la parte i!&uierda( Ej. x
M E C <( Almacena en la 'ariable x el 'alor de /E C <0(
El resto de operadores de esta categor%a son en realidad "ormas de
reali!ar 'arias operaciones de una 'e!, describiremos uno a modo de
ejemplo, el resto "uncionan exactamente igual(
IMSS | Mdulo 8 .$
CM . M#sIgual( Este operador asigna a la expresin situada a la
i!&uierda del operador el 'alor resultante de sumar la expresin situada a
la parte derec)a con la expresin de la parte i!&uierda( Ejemplo.
/Suponemos &ue x M J e M <0 entonces, la expresin x CM pro'ocar%a &ue
x pasase a 'aler el resultado de sumar / < C J 0( Por tanto, la expresin x
CM es e&ui'alente a )acer. x M x C (
:1818 O.e'ad'e* de C6.a'ac#+!
MM . Probar Igualdad( Este operador sir'e para comprobar si E
expresiones son iguales( Si lo son, el 'alor de la expresin de comparacin
es VtrueV, &ue signi"ica V'erdaderoV( Por moti'os sem#nticos, decir &ue una
expresin es true es e&ui'alente a decir &ue 'ale D( Si no son iguales,
de'uel'e V"alseV /"also0 o el 'alor N(
Esta posibilidad de comprobar si una expresin es igual a otra, nos
ser# mu 4til para comprobar muc)as cosas durante nuestra pel%cula en
"uncin de ellas, )acer unas cosas u otras(
Pondremos un ejemplo, imaginemos &ue le pedimos a un usuario
&ue introdu!ca su edad en un campo de texto de nuestra pel%cula "las)( A
ese campo le llamamos PedadSusuarioP( @e )acemos pulsar un botn
PContinuarP en ese momento comprobamos su edad, si tiene EN a6os, le
decimos una cosa, de lo contrario, le decimos otra distinta( Aastar%a con
)acer algo as%.
i" / edadSusuario MM EN 0 X
darSmensajeSD= Y
else X darSmensajeSE= Y
A&u% lo &ue estamos diciendo es lo siguiente. PSi edadSusuario es
igual a EN, entonces damos el mensaje D, sino lo es, damos el mensaje E(
El signi"icado de Vi"V VelseV lo 'eremos m#s adelante, de modo &ue no
nos preocupemos por no entender per"ectamente el cdigo escrito arriba(
Tambi2n "altar%a, lgicamente, crear las "unciones PdarSmensajeSDP
PdarSmensajeSEP(
IMSS | Mdulo 8 .1
U . Maor &ue( *e'uel'e como resultado 'erdadero /D0 si la expresin
de la i!&uierda es maor &ue la de la derec)a( *e lo contrario, de'uel'e
"alse /N0(
Z . Menor &ue( *e'uel'e como resultado 'erdadero /D0 si la expresin
de la i!&uierda es menor &ue la de la derec)a( *e lo contrario, de'uel'e
"alse /N0(
UM . Maor o igual &ue( *e'uel'e como resultado 'erdadero /D0 si la
expresin de la i!&uierda es maor o igual &ue la de la derec)a( *e lo
contrario, de'uel'e "alse /N0(
ZM . Menor o igual &ue( *e'uel'e como resultado 'erdadero /D0 si la
expresin de la i!&uierda es menor o igual &ue la de la derec)a( *e lo
contrario, de'uel'e "alse /N0(
[M . Probar *esigualdad( *e'uel'e como resultado 'erdadero /D0 si la
expresin de la i!&uierda es di"erente a la de la derec)a( *e lo contrario,
de'uel'e "alse /N0( Ejemplo. < [M J pro'ocar%a &ue la expresin total 'aldr%a
D /true o 'erdadero0( Pues < es, e"ecti'amente, distinto de J(
:1819 O"'* O.e'ad'e*
/ 0 . Par2ntesis( Sir'en, como es de esperar, para agrupar t2rminos
dar pre"erencias en las operaciones /al igual &ue en las matem#ticas0(
Tambi2n se usa, como a 'imos, para pasar par#metros a "unciones o
acciones( /\stos deben ir entre par2ntesis0
P P . Comillas( En Action Script, todo lo &ue 'a entre comillas, pasa a
considerarse una cadena de caracteres, por lo &ue las "unciones acciones
&ue a"ectan exclusi'amente a las cadenas de caracteres pasan a a"ectar
tambi2n al elemento entre comillas( As% por ejemplo, mientras &ue x
representa una 'ariable con un 'alor determinado, si escribimos PxP,
estamos escribiendo en realidad el car#cter o la letra PxP( Por tanto,
podremos a6adirlo a una palabra, compararlo con otras letras, escribirlo
por pantalla etc(( pero a no ser# una 'ariable(
Aien a)ora &ue )emos dado una pe&ue6a introduccin acerca de lo
&ue es Action Script entremos de lleno al cdigo reali!ando ejemplos mu
sencillos(
IMSS | Mdulo 8 .2
:19 De"e!e' DS".E
Es necesario mencionar &ue al utili!ar la programacin en Action
Script podemos usarla dentro de una capa o bien en un objeto como ser%a
un botn( Cuando nosotros programamos o bien colocamos un stop en un
"otograma determinado de una capa lo &ue le indicamos a ,las) es &ue en
ese "otograma se detenga sin importar lo &ue exista mas adelante, es decir,
detiene la reproduccin de la pel%cula( Se puede usar en un "otograma,
cuando &ueramos detenernos en 2l /por&ue es un men4, por ejemplo0, en
un botn, /para &ue detenga la pel%cula0 etc(
Sintaxis.
Stop/0=
No tiene Par#metros
Ejemplo.
Para 'er este ejemplo necesitaremos abrir el arc)i'o +ejercicioSE-
Insertar una nue'a capa con el nombre acciones
Ir al "otograma DE< e insertar un "otograma en blanco
Acti'ar el panel acciones
Poner el stop, &ueda de la siguiente "orma en el panel acciones.
IMSS | Mdulo 8 .3
I este icono &ueda en el "otograma programado.
IMSS | Mdulo 8 .,
:1: I' a la *#(,#e!"e e*ce!a
Cuando &ueremos ir a la siguiente escena se necesita programar un
botn, la sintaxis ser# la siguiente
Sintaxis.
on /press0 X
nextScene/0=
Y
Ejemplo.
En este ejemplo programaremos un botn para &ue nos lle'e a la
siguiente escena, 'eamos como reali!arlo.
Insertar un s%mbolo clip de pel%cula
Creemos una animacin de una pelota &ue se despla!a de un lugar a
otro
Insertar una nue'a capa llamada acciones
Ir al 4ltimo "otograma de la capa acciones e insertar un "otograma en
blanco
Abrir el panel acciones poner un stop
Regresar al a escena D arrastrar el clip de pel%cula
Insertar una nue'a capa llamada botn
Crear un s%mbolo botn &ue tenga como texto +entrar-
Regresar a la escenaD en la capa botn arrastrar el s%mbolo botn
en la parte in"erior derec)a
Insertar una nue'a escena e insertar una
imagen
IMSS | Mdulo 8 .*
Regresar ala escenaD
Seleccionar el botn entrar al panel de acciones escribir lo
siguiente.
Insertar una capa con el nombre acciones abrir el panel de
acciones poner un stop
@a l%nea de tiempo de la escena D &ueda de la siguiente "orma.
I la l%nea de tiempo de la segunda escena &ueda de la siguiente
"orma.
*ar ctrl C enter
IMSS | Mdulo 8 .-
Presionar el botn 'er como nos en'%a a la segunda escena
:1; ("A!dPa7FG
Cuando decimos &ue deseamos ir a un "otograma en espec%"ico es
necesario programar un botn para &ue este nos lle'e a un determinado
lugar, esto nos 'a ser'ir para crear nuestro men4 interacti'o( Estas
acciones se emplean, como su nombre indica, para controlar el "lujo de
nuestra pel%cula, esto es, para indicar a ,las) en todo momento &u2
"otograma tiene &ue mostrar, cu#ndo tiene &ue parar, dnde seguir etc(((
3e#moslas lo entenderemos mejor.
gotoAndPla B goto. Esta accin ser#, probablemente la &ue m#s se
use durante la reali!acin de nuestras pel%culas( @a accin &ue reali!a
consiste en mo'er la cabe!a lectora al "otograma &ue le indi&uemos( @a
cabe!a lectora es lo &ue determina &u2 "otograma de nuestra pel%cula se
est# reproduciendo en cada momento( Si, por ejemplo, lo mo'emos del
"otograma D al EH, lo &ue 'eremos instant#neamente ser# el "otograma EH
la pel%cula continuar# reproduci2ndose a partir de a)%(
3eamos cual es la sintaxis.
S#!"a-#*:
gotoAndPla/"otograma0.
,otograma. N4mero o nombre del "otograma al &ue &ueremos en'iar
la cabe!a lectora(
E$e6.l:
gotoAndPla/EH0= OOU Esta accin lle'a la cabe!a lectora al "otograma EH de
la escena(
Creamos un nue'o documento
Creamos un nue'o s%mbolo clip de pel%cula
IMSS | Mdulo 8 ..
$acer la animacin de trans"ormacin por "orma de un texto poner
un stop
Crear un botn &ue diga "otograma EH
Ir a la escena D
En la capa D arrastrar el s%mbolo botn
Crear una nue'a capa
Abrir el panel acciones poner un stop
Ir al "otograma EH e insertar un "otograma en blanco
Arrastrar el clip de pel%cula
Regresar al "otograma D de la capa D seleccionar el botn
Abrir el panel acciones
Teclear el siguiente cdigo.
:1< ("A!dS".
Al igual &ue en el ejemplo anterior este se utili!a cuando deseamos i
a un "otograma en espec%"ico, pero en este pe&ue6o peda!o de cdigo le
estamos indicando &ue 'a&a a x "otograma &ue se detenga con esto nos
a)orramos el stop(
Sintaxis.
X
gotoAndStop/EH0=
Y
IMSS | Mdulo 8 .8
Ejemplo.
Con el ejemplo anterior )a &ue trabajar por tanto necesitamos
abrirlo, a)ora bien una 'e! abierto este 'eamos la l%nea de tiempo
notemos &ue en el "otogramaEH de la capa acciones tenemos un stop, bien
eliminemos esta capa(
I reprogramemos el botn
Ir a la capa D seleccionar el s%mbolo botn
Abrir el panel de acciones
I cambiar el cdigo por el siguiente.
on /press0 X
gotoAndStop/EH0=
Y
@isto con esto esta terminado nuestro ejemplo
?u#rdalo con otro nombre
*ar ctrl Center
:1B (e"URL
En esta ocasin lo &ue se 'a a 'er es como al programar un botn,
este nos 'a a lle'ar a una direccin 7R@ es decir, 'a a abrir el na'egador
de Internet Explorer en la p#gina &ue se le )aa indicado en nuestro
cdigo 'eamos a)ora la sintaxis(
Sintaxis.
X
get7R@/Pdireccin 7R@P, Pm2todoP0=
Y
IMSS | Mdulo 8 .9
Ejemplo.
Creamos un nue'o documento
Creamos un s%mbolo botn &ue diga CNCIC
Regresamos a la escena D arrastramos el botn
Abrimos el panel acciones
Tecleamos el siguiente cdigo.
on /press0 X
get7R@/P)ttp.BB:::(cncc(com(mxP,PSblan]P0=
Y
M+d,l VI C'eac#+! de P'e*e!"ac#+! c!
Me!5 I!"e'ac"#%
Ob$e"#%:
Al concluir el mdulo el participante ser# capa! de crear una
presentacin con un men4 interacti'o(
I!"'d,cc#+!:
En el #mbito laboral de nuestros d%as es de suma importancia estar
a la 'anguardia tecnolgica de a)% el moti'o de inno'ar )aciendo
presentaciones en ,las) 1 en lugar de utili!ar programas con'encionales(
Al crear una presentacin con un men4 interacti'o el ponente podr#
posicionarse en cual&uier parte de nuestra presentacin regresar al
men4 en el momento en el &ue 2l lo decida de una "orma sencilla
r#pida(
*espu2s de )aber pasado por los mdulos anteriores lo 4nico &ue
usted tendr# &ue )acer es aplicar lo aprendido para la creacin de su
presentacin pro"esional(
IMSS | Mdulo 8I 8$
;10 P'e*e!"ac#+! c! Me!5 I!"e'ac"#%
Con lo 'isto en los mdulos anteriores construiremos una
presentacin la cual 'a a constar de una introduccin en la escena uno
de un botn &ue nos lle'e a la siguiente escena, en la cual se creara el
men4 interacti'o los textos o bien animaciones &ue esta 'aa a tener(
Para poder desarrollar esta presentacin es necesario &ue usted cree
la introduccin esta 'a a estar a su libre eleccin, para este ejemplo se 'a a
apoar con el material &ue se le proporcione(
$a &ue tomar en cuenta &ue la introduccin debe de ser ligada al
tema &ue se 'a a estar desarrollando, es de suma importancia recalcar &ue
la introduccin debe ser apantallante para poder captar la atencin de
nuestro auditorio(
3eamos como )acerlo.
;1010 I!"'d,cc#+!
Crear la introduccin programar el botn para &ue nos lle'e a la
siguiente escena, siguiendo los pasos &ue se detallan a continuacin(
Crear un nue'o documento ponerle medidas de 1NN x GNN poner
el color de "ondo negro
Cambiar el nombre de la capa D por cuadD, dibujar un cuadrado de
1NN x GNN px color degradado lineal de 'erde a gris claro
coordenadas /N,N0
Ir al "otograma <N copiar el "otograma cla'e /,G0, regresar al
"otograma D, crear la interpolacin de mo'imiento, modi"icar el
tama6o del cuadrado por <E x <E px
Ir al "otograma JN copiar el "otograma cla'e /,G0, crear la
interpolacin de mo'imiento, en el "otograma JN dar un color al"a NR
Insertar una nue'a capa ponerle el nombre de texto
Ir al "otograma DH insertar un "otograma en blanco /,F0 e insertar un
texto &ue diga +*eportes Extremos- con un tipo de "uente C)iller
tama6o DNN de color blanco con coordenadas /E<N,DFD0
IMSS | Mdulo 8I 81
Ir al "otograma EN copiar el "otograma cla'e /,G0, regresar al
"otograma DH crear la interpolacin de mo'imiento poner color al"a
a NR
Ir al "otograma EN copiar los "otogramas )asta el "otograma EG,
seleccionar el "otograma ED suprimirlo, )acer lo mismo con los
"otogramas E< EH, ir al "otograma JN copiar el "otograma /,H0
Insertar una nue'a capa ponerle el nombre de cuadE
Ir al "otograma <H insertar un "otograma en blanco /,F0, dibujar un
rect#ngulo de 1NN x FN px con coordenadas /N,H<N0 con un color
degradado lineal de 'erde a gris claro, ir al "otograma JH copiar el
"otograma cla'e, regresar al "otograma <H crear la interpolacin de
mo'imiento
En el "otograma <H con la )erramienta trans"ormacin libre cambiar
el tama6o para &ue )aga el e"ecto de &ue aparece de i!&uierda a
derec)a esto recordando &ue se )ace con la tecla alt presionada
Insertar una nue'a capa ponerle el nombre cuad<
Ir al "otograma <H insertar un "otograma en blanco /,F0, dibujar un
rect#ngulo de 1NN x FN px con coordenadas /N,N0 color degradado
lineal de 'erde a gris claro, ir al "otograma copiar el "otograma
cla'e /,G0, regresar al "otograma <H crear la interpolacin de
mo'imiento
En el "otograma <H con la )erramienta trans"ormacin libre cambiar
el tama6o para &ue )aga el e"ecto de &ue aparece de derec)a a
i!&uierda
Insertar una nue'a capa ponerle el nombre mcSxterra, a&u%
tendremos &ue cambiar un po&uito la din#mica e insertar un
s%mbolo clip de pel%cula con el nombre +mcSxterra-, a)ora bien
trabajemos dentro de este s%mbolo(
Importar a la biblioteca la imagen +xterra(jpg-
Arrastrar la imagen a la capa Dcon coordenadas /N,N0
IMSS | Mdulo 8I 82
Insertar una nue'a capa con'ertirla en m#scara, desacti'ar el
blo&ueo de las capas, con la )erramienta pluma dibujar el contorno
de las letras
Insertar una nue'a capa llamarla l%nea, arrastrar esta capa por
debajo de la capa &ue es la m#scara, en la capa llamada l%nea
seleccionar la )erramienta de tra!ado de l%nea dibujar una en
"orma 'ertical de color blanco con un grosor de <J pts(
Ir al "otograma GN de la capa D copiar los "otogramas /,H0
Ir al "otograma GN de la capa mascara copiar los "otogramas /,H0
Ir al "otograma <N de la capa mascara copiar el "otograma cla'e
/,G0, a)ora ir al "otograma GN de esta capa copiar el "otograma
cla'e /,G0, regresar al "otograma D crear la interpolacin de
mo'imiento, poner un color al"a D1R cambiar las coordenadas por
/OG(H,KE(H0
Ir al "otograma <N poner un color al"a D1R coordenadas /<NN,KE(H0,
crear la interpolacin de mo'imiento en ese "otograma, ir al
"otograma GN poner un color al"a D1R coordenadas /OG(H, KE(H0
Regresar a la escena D seleccionar el "otograma JN de la capa
mcSxterra arrastrar el clip de pel%cula mcSxterra con coordenadas
/HNN,FN0, ir al "otograma JH copiar el "otograma cla'e /,G0 crear la
interpolacin de mo'imiento en el "otograma JN cambiar el color
al"a a NR el tama6o de <N x <N
Insertar una nue'a capa ponerle el nombre de imagen
Ir al "otograma JD e insertar un "otograma en blanco /,F0, importar a
la biblioteca la imagen +rapel(jpg-, arrastrar la imagen al lien!o con
coordenadas /DJ(N, DJJ(H0 con'ertirla en un s%mbolo gr#"ico
+grSrappel-, ir al "otograma HD copiar el "otograma cla'e /,G0,
regresar al "otograma JD, crear la interpolacin de mo'imiento, dar
color al"a NR cambiar el tama6o a <N x <N px(
Insertar una nue'a capa ponerle l nombre de mas] con'ertirla en
m#scara, desblo&uear las capas, ir al "otograma JD insertar un
IMSS | Mdulo 8I 83
"otograma en blanco /,F0 dibujar un c%rculo de <NN x <NN
coordenadas /DNN, DGJ0, ir al "otograma HD copiar el "otograma /,H0
Insertar una nue'a capa llamada m4sica
Importar a la biblioteca la cancin +I @o'e Roc] and Roll(mp<-,
arrastrar la m4sica en la capa m4sica
Ir al "otograma HD de la capa cuad< copiar el "otograma /,H0
Ir al "otograma HD de la capa cuadE copiar el "otograma /,H0
Insertar una nue'a capa &ue se llame botn
Insertar un nue'o s%mbolo botn +btnSentrar- poner el texto +Entrar-
con coordenadas /N,N0 copiar los "otogramas cla'e en los otros dos
estados del botn
Regresar a la escena D seleccionar el "otograma HD de la capa botn,
insertar un "otograma en blanco arrastrar el s%mbolo botn con
coordenadas /HHH,JEE0, seleccionar el s%mbolo abrir el panel
acciones poner el siguiente cdigo.
on /press0 X
nextScene/0=
stopAllSounds/0=
Y
Insertar una nue'a capa llamada acciones
Ir al "otograma HD, insertar un "otograma en blanco /,F0 mostrar el
panel acciones /,K0 poner un stop
@isto con esto est# terminada la introduccin, a)ora bien )a &ue
continuar con el siguiente paso &ue es la creacin de la presentacin con
su men4 interacti'o, pasemos al siguiente punto(
IMSS | Mdulo 8I 8,
IMSS | Mdulo 8I 8*
;1014 Me!5 I!"e'ac"#%
7na 'e! creada nuestra introduccin lo siguiente ser# crear una
segunda escena posteriormente nuestro men4 interacti'o el cual nos 'a
a posicionar mostrar un "otograma en espec%"ico, en el mdulo anterior
a 'imos como reali!arlo con el gotoAndStop esto ser# sumamente sencillo
si tenemos orden en nuestra segunda escena(
$agamos lo siguiente.
Insertar la escena numero E
Importar a la biblioteca las im#genes +"ondo- +men4- &ue se encuentran
en la carpeta +recursosSpresentacionesS"las)-(
Crear un nue'o s%mbolo clip de pel%cula con el nombre mcSanimagral, en
la capa D arrastrar la imagen "ondo con coordenadas /N,N0, con'ertirla en
s%mbolo gr#"ico grS"ondo, ir al "otograma <N copiar el "otograma cla'e /,G0
regresar al "otograma D, crear la interpolacin de mo'imiento cambiar el
color al"a NR(
Crear una nue'a capa &ue se llame men4, ir al "otograma EJ insertar un
"otograma en blanco /,F0, arrastrar la imagen +men4- con coordenadas
/N,N0, con'ertirla en un s%mbolo gr#"ico +grSmenu-, ir al "otograma <N
copiar el "otograma cla'e /,G0, regresar al "otograma EJ crear la
interpolacin de mo'imiento cambiar el color al"a NR(
A)ora crearemos los botones &ue se 'an a utili!ar en nuestra
presentacin, los cuales 'an a ser G se )ar# de la siguiente "orma.
Insertar un nue'o s%mbolo botn llamarlo +btnSintro-, crear una caja de
texto &ue diga +Introduccin-, con una tipo de "uente Arial D< pts color
rojo, ponerle las coordenadas /N,N0, copiar el "otograma cla'e a los dos
siguientes estados(
Insertar un nue'o s%mbolo botn llamarlo +btnSrappel-, crear una caja de
texto &ue diga +Rappel-, con una tipo de "uente Arial DH pts color rojo,
ponerle las coordenadas /N,N0, copiar el "otograma cla'e a los dos
siguientes estados(
Insertar un nue'o s%mbolo botn llamarlo +btnSalpinismo-, crear una caja
de texto &ue diga +Alpinismo-, con una tipo de "uente Arial DH pts color
IMSS | Mdulo 8I 8-
rojo, ponerle las coordenadas /N,N0, copiar el "otograma cla'e a los dos
siguientes estados(
Insertar un nue'o s%mbolo botn llamarlo +btnSparacaidismo-, crear una
caja de texto &ue diga +Paracaidismo-, con una tipo de "uente Arial D< pts
color rojo, ponerle las coordenadas /N,N0, copiar el "otograma cla'e a los
dos siguientes estados(
Insertar un nue'o s%mbolo botn llamarlo +btnSra"ting-, crear una caja de
texto &ue diga +Ra"ting-, con una tipo de "uente Arial DH pts color rojo,
siguientes estados(
Insertar un nue'o s%mbolo botn llamarlo +btnSsur"ing-, crear una caja de
texto &ue diga +Sur"ing-, con una tipo de "uente Arial DH pts color rojo,
siguientes estados(
7na 'e! creados los botones, regresar al mcSanimagral crear G capas
arriba de la capa men4 nombr#ndolas de la siguiente "orma.
Capa<Mintrobtn
CapaJMrappelbtn
CapaHMalpinismobtn
CapaGMparacaidismobtn
CapaFMra"tingbtn
Capa1Msur"ingbtn
En la capa introbtn ir al "otograma <N, insertar un "otograma en blanco
/,F0 arrastrar el s%mbolo btnSintro con coordenadas /DJ,<F0
En la capa rappelbtn ir al "otograma <D, insertar un "otograma en blanco
/,F0 arrastrar el s%mbolo btnSrappel con coordenadas /D<D(J,<F0
En la capa alpinismobtn ir al "otograma <E, insertar un "otograma en
blanco /,F0 arrastrar el s%mbolo btnSalpinismo con coordenadas /ED1(1,<F0
En la capa paracaidismobtn ir al "otograma <<, insertar un "otograma en
blanco /,F0 arrastrar el s%mbolo btnSparacidismo con coordenadas
/HNN(G,<F0
IMSS | Mdulo 8I 8.
En la capa ra"tingbtn ir al "otograma <J, insertar un "otograma en blanco
/,F0 arrastrar el s%mbolo btnSra"ting con coordenadas /GDF(1,<F0
En la capa sur"ingbtn ir al "otograma <H, insertar un "otograma en blanco
/,F0 arrastrar el s%mbolo btnSsur"ing con coordenadas /FDH(D,<F0
*espu2s de )aber colocado los botones con sus respecti'as coordenadas,
)abr# &ue crear los textos &ue se 'an a mostrar cuando uno de los botones
sea presionado, para ello )abr# &ue crear G s%mbolos clips de pel%cula,
para &ue de esta "orma se les pueda dar una pe&ue6a animacin,
posteriormente los lle'aremos al mcSanimagral, esto en una capa di"erente
para cada uno de ellos en distinto "otograma(
Crear G s%mbolos clips de pel%cula, &ue contendr#n el texto, una animacin
un stop( Abrir el documento textopres(doc regresara "las)(
Crearemos un s%mbolo clip de pel%cula con el nombre mcSintro, crear una
caja de texto copiar el texto introduccin locali!ado en el documento
abierto, regresar a "las) pegarlo en la caja de texto dar "ormato al
mismo, ir al "otograma EN, copiar el "otograma cla'e /,G0, regresar al
"otograma D crear la interpolacin de mo'imiento dar un color al"a NR,
crear una nue'a capa llamada acciones, ir al "otograma EN insertar un
"otograma en blanco /,F0, mostrar el panel acciones poner un stop(
Crearemos un s%mbolo clip de pel%cula con el nombre mcSrappel, crear una
caja de texto copiar el texto rappel locali!ado en el documento abierto,
regresar a "las) pegarlo en la caja de texto dar "ormato al mismo, ir al
"otograma EN, copiar el "otograma cla'e /,G0, regresar al "otograma D crear
la interpolacin de mo'imiento dar un color al"a NR, crear una nue'a
capa llamada acciones, ir al "otograma EN insertar un "otograma en blanco
/,F0, mostrar el panel acciones poner un stop(
A)ora bien )agamos lo mismo pero con los textos sobrantes en nuestro
documento, es decir )a &ue crear los clips de pel%cula con sus respecti'os
nombres textos, dando la misma animacin &ue a los anteriores(
7na 'e! terminado lo anterior regresemos al mcSanimagral e insertemos
una nue'a capa llamada acciones, ir al "otograma <H insertar un
"otograma en blanco /,F0, mostrar el panel de acciones poner un stop(
Crear una nue'a capa con el nombre intromc, ir al "otograma <G insertar
un "otograma en blanco /,F0 arrastrar el mcSintro con coordenadas
/<GN,DHE0(
IMSS | Mdulo 8I 88
Crear una nue'a capa con el nombre rappelmc, ir al "otograma <F insertar
un "otograma en blanco /,F0 arrastrar el mcSrappel con coordenadas
/<GN,DHE0(
Crear una nue'a capa con el nombre alpinismomc, ir al "otograma <1
insertar un "otograma en blanco /,F0 arrastrar el mcSalpinismo con
coordenadas /<GN,DHE0(
Crear una nue'a capa con el nombre paracaidismomc, ir al "otograma <K
insertar un "otograma en blanco /,F0 arrastrar el mcSparacaidismo con
Crear una nue'a capa con el nombre ra"tingmc, ir al "otograma JN insertar
un "otograma en blanco /,F0 arrastrar el mcSra"ting con coordenadas
/<GN,DHE0(
Crear una nue'a capa con el nombre sur"ingmc, ir al "otograma JD
insertar un "otograma en blanco /,F0 arrastrar el mcSsur"ing con
Ia creamos pusimos en su lugar los textos &ue se 'an a mostrar, "alta
programar los botones )acer &ue se muestren )asta el "otograma JD pero
tambi2n se debe de mostrar la imagen del men4 el "ondo= 'eamos como
programar los botones pero, recordemos &ue esto no es algo nue'o para
nosotros a &ue en cap%tulos anteriores se 'ieron 'arios ejemplos(
Ir a la capa intobtn, seleccionar el botn, mostrar el panel de acciones
poner el siguiente cdigo.
on /press0 X
gotoAndStop/<G0=
Y
Con esto &ueda programado nuestro primer botn el cual nos lle'ara al
"otograma <G &ue es donde esta la animacin del texto introduccin,
)agamos lo mismo con los dem#s botones pero, )a &ue poner suma
atencin en el numero de "otograma &ue &uiero &ue se muestre, es decir,
&ue este 'a a estar cambiando )asta llegar al "otograma JD(
Con esto damos por concluido la creacin de nuestra presentacin con su
men4 interacti'o, tambi2n es necesario mencionar &ue de esta misma
"orma se pueden crear paginas :eb en "las) a &ue lo 4nico &ue se esta
IMSS | Mdulo 8I 89
)aciendo realmente es &ue seJ muestre in"ormacin al dar clic en alg4n
botn(
N"a* )#!ale*
*eseamos &ue el presente material de apoo le )aa "acilitado el
aprendi!aje de los temas &ue componen cada mdulo de este e'ento &ue
le sea 4til para "uturas consultas(
@e "elicitamos por )aber concluido este curso de capacitacin, contin4e
practicando= recuerde &ue su )abilidad depender# del manejo cotidiano de
esta pa&ueter%a(
7na presentacin creada en ,las) nos brindar# un aspecto altamente
pro"esional competiti'o, adem#s le podremos dar animaciones
personali!adas a &ue en programas como Po:er Point solo )a
animaciones preestablecidas por dic)o programa(
7na presentacin Pro"esional en "las) captar# m#s "#cilmente la atencin
de los espectadores adem#s de mantenernos a la 'anguardia tecnolgica(
Para dar un mejor aspecto a nuestra presentacin )a &ue crear
primeramente una introduccin acerca del tema &ue se 'a a exponer
posteriormente crear su men4 interacti'o con animaciones discretas pero
impactantes(
IMSS | Mdulo 8I 9$
B#bl#('a)3a
3ogeleer, *a'id( ,las) 1( Editorial Anaa multimedia(
Mo)ler, Tames @( ,@AS$ 1( Imagen, Animacin e Interacti'idad( Editorial
Anaa Multimedia(
Pascual, ,( ?u%a de campo de Macromedia "las) 1(
Editorial RaOma
8bra @iteraria del Ce!"' Nac#!al de Ca.ac#"ac#+! 7 Cal#dad IMSS H SNTSS
Elaborado por.
Alejandro Flores Ocampo
IMSS | Mdulo 8I 91

Introduccion A Flash CS#

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introduccion A Flash CS#

Transféré par

Droits d'auteur :

Formats disponibles

Coordinacin

Vous aimerez peut-être aussi