Unidad 10.

Clips de Pelcula (I)

10.1. Qu es un clip de pelcula?
Un Clip de Pelcula, simplemente Clip o MovieClip es una pelcula en s misma, como cualquiera de las
que podamos haber creado hasta el momento en este curso. Normalmente nos referimos a ellas como clips
cuando las inclumos en otra pelcula, formando un smbolo. Por tanto, cualquier clip siempre podr estar
comueto por otros clips insertados en l, que a su vez estn formados por otros, etc.
Al igual que los otros tipos de smbolos de Flash, los clips de pelcula tienen su propia lnea de tiempo. Sin
embargo, y a diferencia de los Grficos (como veremos a continuacin), esta lnea temporal no est ligada a la
lnea de tiempo del documento que lo contiene, de tal forma que su ejecucin es independiente, y en un
fotograma de la palcula principl se puede estar reproduciendo repetidamente un clip.
Este tipo de smbolos puede contener cualquier otro tipo de smbolo: grfico, clip o botn, as como cualquier
objeto creado con Flash, ya que un clip es realmente una pelcula.
Otra de las ventajas de los Clips la encontramos cuando realizamos pelculas de gran complejidad y tamao,
en la que intervienen un nmero muy elevado de fotogramas, debido a que en la vista general del documento,
nosotros slo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que nos
permitir tener una mejor visin de cmo se desarrolla nuestra animacin, y una lnea de tiempo ms clara y
"limpia"
Los Clips son una de las herramientas que dan mayor potencia a Flash CS4, permitindonos crear pelculas
de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear mltiples movimientos
independientes entre s y crear conexiones entre los diferentes Clips de un documento.
Todas aquellas cosas que no podamos hacer con un smbolo de tipo Grfico, lo podemos hacer con un Clip,
adems de poder realizar tambin todo aquello que nos permita dicho smbolo. Por esto, normalmente se
utilizan los clips para cualquier tipo de animacin debido a su gran flexibilidad, dejando los grficos slo para
imgenes estticas.
10.2. Comprobar las propiedades de un Clip
Como hicimos con los grficos, vamos a ver como la lnea de tiempo de un clip no est
ligada a la lnea de tiempo del documento que lo contiene y, a la vez, veremos la diferencia
entre los clips y los smbolos Grficos, que supone una de las razones de la mayor
utilizacin de los primeros en lo que se refiere a la creacin de animaciones.
Para ello abriremos una nueva pelcula Flash (Archivo Nuevo, Archivo de Flash (AS
3.0)). Despus importaremos una imagen cualquiera o bien crearemos una. La convertimos
en Smbolo (botn derecho, Convertir en smbolo...) y seleccionamos en Tipo "Clip de Pelcula"
Arrastramos al escenario (si no est ya all) nuestro clip de pelcula.
Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos pelculas,
cada una con su lnea de tiempos.
Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los smbolos de
tipo Grfico.
1

Observa la lnea de tiempo de la pelcula principal y comprueba que slo

tiene un fotograma.
Editemos el Clip que insertamos en el documento, haciendo doble clic sobre
l y examinemos su lnea de tiempos. Aparecer un nico
MovieClip. Podemos realizar algo similar a lo realizado con
los grficos. SI cresemos una animacin de movimiento,
como veremos ms adelante, nos quedara as:
Como vemos, la duracin del clip que hemos insertado es mucho mayor que la pelcula nueva que lo
contiene. Si el smbolo fuera un grfico ya hemos visto que al reproducir la pelcula no ocurrira nada, porque
slo se reproducira el primer fotograma de su lnea de tiempo. En cambio, al tratarse de un clip, comienza a
reproducirse al pasar por el primer fotograma, y como la liena de tiempo es independiente, sigue
reproducindose aunque la lnea de tiempo principal haya acabado.
Unidad 10. Clips de Pelcula (II)
10.3. Crear un nuevo Clip
Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones. Aunque no lo hayamos
comentado antes, se puede crear un smbolo Flash de la nada, igual que creamos un nuevo archivo, de forma
que se quede en la biblioteca y podamos editarlo cuando nos convenga. Esto puede ser interesante en los clips,
ya que a diferencia de los grficos, su finalidad suele ser el movimiento y, en animaciones complejas, en
ocasiones se les asignan acciones especiales en las cuales puede que no sea necesario crearlo en ese momento o
convenga dejar el clip vaco.
Por esto, es interesante aprender cmo crear un smbolo, en este caso un clip, de la nada para despus
modificarlo.
Para insertar un clip vaco haz clic en Insertar Nuevo smbolo y se abrir el cuadro de dilogo de Crear
un nuevo smbolo.
All debers darle un Nombre para identificarlo ms tarde en la Biblioteca y seleccionar la opcin Clip de
Pelcula en el desplegable Tipo.
A partir de este momento tendremos un nuevo clip (vaco) al cual podremos acceder desde nuestra Biblioteca
(men Ventana Biblioteca), si hacemos clic derecho sobre l y seleccionamos Edicin, podremos editarlo
y trabajar con l.
Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de pelcula y veremos
el potencial real de este tipo de smbolos.
10.4. Importar y Exportar Movie Clips de Biblioteca

Como para todos los smbolos los Clips se almacenan en la biblioteca del documento cuando son creados.
Esto es muy importante en muchos casos ya que habitualmente los clips son muy reutilizables. Para importar
clips cula debemos abrir primero la biblioteca en la que est contenido.
Hemos visto en el tema de Smbolos, dos tipos de bibliotecas: las que estn asociadas a documentos u otras
pelculas y las que nos proporciona Flash CS4. Pues bien, no slo podemos utilizar smbolos del mismo
documento en el que estamos sino que podemos Importarlos de otros documentos de nuestro disco duro, lo
que, en el caso que nos ocupa, puede resultar de gran utilidad. Obviamente la exportacin mediante biblioteca
se hace automticamente ya que Flash deja los objetos creados en la biblioteca para que puedan ser
reutilizados.
Para importar un Clip de un archivo del disco duro debemos ir al men Archivo Importar Abrir
biblioteca externa..., seleccionar el Archivo Flash
(.fla) del que queremos importar sus smbolos de
biblioteca y pulsar Abrir.
Aparecer la biblioteca con la lista de los smbolos
correspondientes a los grficos, botones y clips del
documento en cuestin.
Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarn a su vez todos los
smbolos que contenga, incluidos los clips.
A continuacin mostramos un ejemplo en el que veremos cmo importar clips de esta forma adems de
comprobar las propiedades de los clips y sus lneas de tiempo independientes mediante la reproduccin
simultnea de dos pelculas, creando un efecto bastante vistoso utilizando "aparentemente" un slo frame.
Unidad 11. Botones (I)
11.1. Qu es un Botn?
Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de las pelculas Flash con
aquel que la est visualizando. Un botn, en Flash, es igual que cualquier botn de cualquier entorno
informtico, sea web o cualquier otro.
Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones.
Tambin es habitual ver cmo este tipo de elementos reaccionan cuando se les pasa el ratn por encima o
cuando estn pulsados.
Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a
la web, que es el caso que nos ocupa, debemos crear programas relativamente grandes. Esto es un
inconveniente ya que el uso de los botones es una prctica muy habitual en el diseo en Internet. Sin embargo,
en Flash no ocurre as. Su interfaz est diseada de manera especial para la creacin de botones, lo que nos
permite crear todos estos efectos de una manera muy sencilla.

Al igual que los otros smbolos de Flash CS4, los botones tienen su propia lnea de tiempo. Esta es
independiente pero, sin embargo, est formada nicamente por cuatro fotogramas, uno para cada estado
posible del botn.
Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est situado sobre l.
Sobre. Aspecto del botn cuando situamos el puntero sobre l.
Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos pulsado.
Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro botn. Esto es
importante sobre todo en botones compuestos slo por texto como veremos ms adelante.
Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de espectacularidad y
utilidad de estos smbolos, pero no es as.
Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de tipo Bitmap). La
unin de las posibilidades de todos los smbolos pueden dotar a los botones de efectos asombrosos.
Unidad 11. Botones (II)
11.2. Creacin de un Botn
En la creacin de un botn podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a
smbolo de tipo botn y posteriormente veremos cmo completarlo internamente, lo que nos ayudar a
entender mejor dicha estructura.
Comenzamos creando el objeto que representar el aspecto por
defecto de nuestro botn con las herramientas que nos ofrece Flash CS4.
Seleccionaremos el objeto y accederemos al men Insertar
Convertir en Smbolo, le daremos el Tipo Botn y asignaremos un
nombre a nuestro nuevo smbolo.
De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo
completaremos internamente.
Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos haciendo
clic con el botn derecho del ratn sobre nuestro nuevo botn y seleccionando la opcin Editar.
Cuando tengamos delante la lnea de tiempo del botn
(observa que tiene el aspecto que hemos mostrado
anteriormente), seleccionaremos cada uno de los frames (sobre,
reposo, presionado y zona activa) y pulsaremos F6 para crear
un fotograma clave en cada uno de ellos.
Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y marcar el rea de
accin del botn (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este
caso slo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de
dibujos de Flash una nueva figura, en cuya superficie "se sentir aludido" nuestro botn.
4

Este es un botn muy bsico, como veremos se pueden complicar mucho, pero para empezar nos servir con
este. Observa como cambian los estados de reposo (rojo plido), sobre (rojo) y pulsado (azul).
Si una vez creado el botn queremos observar sus distintos estados y todava no hemos terminado la pelcula
entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de
nuestra pelcula y seleccionando el botn creado. Para ver lo que comentbamos bastar con pulsar el icono
situado a la derecha de la vista previa del smbolo.
Unidad 11. Botones (III)
11.3. Formas en los Botones
Los botones son smbolos que pueden tener multitud de formas. Si bien lo ms habitual es ver botones
rectangulares, cuadrados y circulares, cuya creacin es inmediata como vimos en el punto anterior, tambin hay
otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de pginas
web.
Entre estos estn los creados mediante formas poligonales, aquellos que estn formados por texto
nicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar ms vistosidad ya que algunos
resultan ms expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creacin de botones
que sus herramientas de dibujo nos ofrece.
Hay varias formas de botn tambin muy extendidas, como el botn con relieve sencillo o los botones en
forma de pldora. Puesto que existen muchas formas de conseguir estos efectos, a continuacin tienes un
ejercicio paso a paso que muestra una forma de conseguir el relieve en un botn rectangular.

Unidad 11. Botones (IV)

11.4. Incluir un clip en un botn
La inclusin de clips de pelcula en los botones puede dotar a stos de ms vistosidad.
Es habitual colocar un clip en el fotograma Sobre para indicar algn tipo de informacin extra o una
animacin para ir ms all de un cambio de color.
Tambin es comn ver un clip de pelcula actuando como un botn. Esto caso se puede hacer por ejemplo
poniendo el clip en el fotograma Reposo.
Comprueba todos los estados del ratn. Por lo que nos dice el botn podemos intuir que empieza algo, pero
quiz no tengamos claro qu. Ayudara a la navegacin que al ponernos sobre el cursor, el texto cambie para
darnos informacin extra. Por ejemplo:

Lo nico que hemos cambiado es que tenemos el texto como un movie clip, en cuando el cursor est encima,
lo cambiamos por otro con la informacin.
5

Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, y partiendo de que tenemos los dos
textos como clips en la biblioteca, slo tendremos que:
- Hacer doble clic sobre el botn para entrar en su modo de edicin.
- Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto.
Ahora tenemos dos opciones:
- Pulsa la tecla SUPRIMIR para eliminarlo.
- Desde la Biblioteca (men Ventana Biblioteca) arrastramos el clip con el nuevo texto, para crear una
instancia.
O la opcin ms prctica:
- En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto de texto.
- Por ltimo, centramos el nuevo texto en el botn, si es necesario.
Ya esta listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a reproducirse.
Por supuesto, en vez de cambiar el texto podemos aadir otros clips, que simulen movimientos, reflejos, etc.
Unidad 11. Botones (V)

11.5. Bitmaps y botones

Adems de clips, los botones tambin pueden contener smbolos de tipo Grfico.
Puesto que, como ya hemos visto, todo lo que se puede hacer con un grfico se puede hacer con un clip,
vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que estn muy extendidos como forma
de expresin grfica a lo largo y ancho de la Red.
Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante
hacer uso de ellos en la creacin de botones, pero no es as.
Bsicamente podemos hacer dos cosas:
1) Incluir en cada uno de los fotogramas del botn un bitmap distinto, obteniendo un efecto como el que se
consigue con lenguajes como javascript (siempre considerando la mayor sencillez de Flash).
2) Aprovechar las propiedades de los Grficos en Flash. Para esto, deberamos importar primero el Bitmap y
despus convertirlo a smbolo botn. Posteriormente lo editaramos y, despus de insertar cada fotograma
clave, convertiramos su contenido a smbolo Grfico. Una vez hecho esto, variando los efectos de las
instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos.
He aqu una pequea muestra en la que slo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo
hemos convertido en un botn grfico aplicndole un efecto Alfa (Transparencia) al estado de reposo, lo que da
la sensacin de estar apagado (tambin podramos haber aplicado brillo). En el fotograma Sobre hemos dejado
el GIF original para que al pasar sobre el botn de la sensacin de encenderse. Finalmente le hemos aumentado
la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente.
Unidad 11. Botones (VI)
6

11.6. Acciones en los botones

Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de
Flash CS4 vamos a comentar dos de las ms comunes.
Nota: Al crear un archivo, habrs visto que podemos elegir distintas versiones de ActionScript (AS 3.0, AS
2.0...). Esto se refiere al lenguaje de programacin que podemos empelar en Flash y que lo convierte en una
herramienta realmente potente. En las versiones 1 y 2, se podan agregar comportamientos directamente en las
propiedades de los botones. Pero nosotros venimos empleando las versin 3.0 a lo largo del curso, por ser la
ms actual y potente. Esta versin nos obliga a escribir el cdigo ActionScript. Veremos cosas bsicas, y
entraremos un poco ms en ActionScript a partir del tema 16.
Comenzamos por crear o aadir nuestro botn, y asignarle un nombre de instancia. El nombre que le
demos es muy importante, porque nos permitir acceder a l desde el cdigo.
Aunque podemos escribir el cdigo en la misma capa, recomendamos crear una capa exclusivamente para el
cdigo, por tenero todo mejor organizado.
Ahora, abrimos en el panel Acciones (men Ventana Acciones). Se mostrar un rea en blanco en la que
podemos escribir:
Sin entrar en detalle de qu es cada palabra, pues
esto ya lo veremos, este es el cdigo que debemos de
escribir para asociar acciones a un botn:
miBoton.addEventListener('click',
accionesMiBoton);
function accionesMiBoton(event):void{
//Acciones
}
Donde miBoton ser el nombre de la instancia
del botn.
accionesMiBoton contiene las acciones a realizar. Observa que aparece en dos sitios. El nombre que le
hemos dado es el que queramos.
Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es nico. Tambin
tenemos que dar un nombre nico a accionesMiBoton para cada uno, si no todos realizaran las mismas
acciones.
Ahora, cambiamos donde pone //Acciones por lo que queramos que haga. Veamos las ms comunes:
1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de internet (o una pelcula
Flash), lo que nos servir para irnos desplazando por webs que contengan ms de una pgina, o permitir al
usuario descargarse archivos entre otras cosas.
La
instruccin
en
ActionScript
que
nos
permite
hacerlo
es
navigateToURL(new
URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es" se refiere a la pgina que
queremos abrir, y "_blank" indica que se abrir en una pgina nueva.
7

Por lo tanto, si tenemos un botn cuyo nombre de instancia es btnVisitarAulaclic que queremos que abra la
web http://www.aulaclic.es, escribiramos:
btnVisitarAulaclic.addEventListener('click', visitarAulaclic);
function visitarAulaclic(event):void{
navigateToURL(new URLRequest("http://www.aulaclic.es"), "_blank");
}
Unidad 11. Botones (VII)
2) Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y queremos permitir que
el usuario la detenga, la ponga en marcha, avance, retroceda ...
Para ello podemos emplear las acciones:
stop(); para detener.
play(); para reproducir.
gotoAndPlay(numeroFotograma); para ir a un fotograma determinado.
Por ejemplo, podemos tener el botn btnPausar para parar la pelcula y el botn btnContinuar para
reproducirla:
btnPausar.addEventListener('click', pausar);
function pausar(event):void{
stop();
}
btnContinuar.addEventListener('click', continuar);
function continuar(event):void{
play();
}
Tal cual lo hemos puesto, afectara a la pelcula principal. Si lo que queremos parar o reproducir es un clip
determinado, habra que escribirlo delante de la accin, separado por un punto. Por ejemplo miClip.stop();.
Reconocemos que aunque ActionScript 3.0 es ms potente que la versin 2.0, puede resultar mas liosa para
usuarios sin conocimientos previos. Si quieres ver cmo seran estos mismos ejemplos en ActionScript 2, te
invitamos a echar un vistazo a esta pgina de nuestro curso de Flash CS3.
11.7. Incluir sonido en un botn
Si nuestras pginas van a tener sonido, el sonido en los botones es una parte fundamental. Podemos hacer,
por ejemplo que se activen sonidos al pulsar un botn.
Para ello, simplemente debemos editar nuestro botn y seleccionar el fotograma Presionado, e insertar el
sonido. Como vimos en el tema correspondiente. Es este caso, el tipo de sincronizacin ms conveniente suele
ser Evento.
Por ejemplo podramos importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en la
biblioteca.
El resultado podra ser algo as: