Apuntes Cursillo de Flash

USO BÁSICO DE

FLASH MXE INTRODUCCIÓN A LA PROGRAMACIÓN EN

ACTIONSCRIPT

© Luis A. Gil-Guijarro Redondo

Curso Flash

Luis Gil-Guijarro Curso de Macromedia Flash - 1 -

NOTASCurso de Flash

Indice de materias1. Flash y su interfaz de trabajo . . . . . . . . . . . . . . . . . . . . . 12. Dibujo en Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53. Trabajo con color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104. Creación de animación . . . . . . . . . . . . . . . . . . . . . . . . . 135. Utilización de símbolos, instancias y elementosde bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176. Trabajo con texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207. Trabajo con clips de película y botones . . . . . . . . . . . . 228. Creación de interacciones simples con ActionScript . . 259. Adición de sonidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3110. Prueba y publicación de una película . . . . . . . . . . . . . . 3311. Creación de scripts con ActionScript . . . . . . . . . . . . . . 3512. Utilización de componentes . . . . . . . . . . . . . . . . . . . . . 50

1. Flash y su interfaz de trabajo

¿QUÉ ES MACROMEDIA FLASH?

Macromedia Flash es una aplicación con la que es posible crearpelículas que incluyan gráficos, texto, animación y aplicaciones parasitios Web. Aunque están compuestas principalmente por gráficosvectoriales, también pueden incluir video, gráficos de mapa de bits ysonidos importados. Las películas Flash pueden incorporar interactivi-dad para permitir la introducción de datos de los espectadores o actuarsobre la misma modificando reacciones en ella, y la creación depelículas no lineales que pueden interactuar con otras aplicacionesWeb. Es muy usado en la web para crear controles de navegación,logotipos animados, aunque pueden ser desarrollados sitios completosa base de tecnología Flash. Las películas Flash utilizan gráficosvectoriales compactos, para que se descarguen y se adapten rápida-mente al tamaño de la pantalla del usuario.

LA INTERFAZ DE FLASHC u a n d o

abrimos Flash senos muestra unaventana como lade la derecha enla que aparece-rán, en la partesuperior las ba-rras de menús yla principal deherramientas,en la barra de laizquierda la caja


NOTASde herramientas, en la zona central la línea de tiempo, la zona detrabajo, la ventana de propiedades y la de acciones, y a la derechaotras ventanas varias como el mezclador de colores, la biblioteca deelementos, etc.

El aspecto de esta interfaz es modificable, las distintas ventanaspueden ser contraídas y expandidas, cerradas o abiertas o cambiadasde ubicación en función de las necesidades de espacio para el diseñode la película. Las ventanas que disponen de un pequeño triángulo seexpanden o comprimen haciendo clic sobre el título, podemoscerrarlas haciendo clic derecho y eligiendo cerrar panel o podemosarrastrarlas haciendo clic sobre la zona punteada de su título -esimportante tener en cuenta esta zona para reintegrar la ventana en lazona específica-. Para abrir ventanas que no tenemos a la vistausaremos el menú Ventana, cuyas características principales veremosmás adelante.

CAJA DE HERRAMIENTAS E INSPECTOR DE PROPIEDA-DES

Las herramientas de la caja de herramientas permi-ten dibujar, pintar, seleccionar y modificar ilustraciones,así como cambiar la visualización del escenario. La cajade herramientas se divide en cuatro secciones:

La sección Herramientas contiene las herramien-tas de dibujo, pintura y selección.

La sección Ver contiene herramientas para ampliary reducir, así como para realizar recorridos de la ventanade la aplicación.

La sección Colores contiene modificadores de loscolores de trazo y relleno.

La sección Opciones muestra los modificadoresde la herramienta seleccionada, los cuales afectan a lasoperaciones de pintura o edición de dicha herramienta.

La herramientas son las siguientes:Selección, permite seleccionar los diferentes

objetos de nuestro espacio de trabajo.Subselección, sirve para editar los nodos de

las formas dibujadas

Lazo, se usa para hacer selecciones de loselementos que se encuentran en zonas específicas.

Línea, permite trazar líneas rectas.

Pluma, sirve para dibujar curvas Bezier y parahacer ciertas modificaciones de nodos.

Óvalo y Rectángulo, son las dos herra-mientas que nos permiten el trazados de estos

dos tipos de figuras. Para el dibujo de circunferencias y cuadrados semantendrá pulsada la tecla de mayúscula -no confundir con bloqueo


NOTAS

de mayúsculas-.Lápiz, para el trazado de líneas a mano alzada.

Pincel, se usa para realizar trazos gruesos. El color deltrazo será el seleccionado para relleno. Puede hacerse sensible

a la presión si usamos un lápiz óptico.Texto, sirve para introducir los diferentes tipos de cuadros

de texto.

Transformación libre, permite hacer transformacionesde forma y giros de los elementos seleccionados.

Transformación de relleno, nos permitirá modificar lascaracterísticas de los rellenos no sólidos

Bote de tinta, permite trazar contornos y cambiar el colorde tinta de los mismos.

Cubo de pintura, se usa para rellenar espacios de color ocambiar colores

Cuentagotas, sirve para seleccionar colores de tinta o derelleno para aplicarlos a otros elementos.

Borrador, herramienta de borrado de rellenos y contornosselectivos

Mano y zoom, son herramientas de visualización.Con la primera movemos el encuadre del espacio de

trabajo, con la segunda seleccionamos el área de visualizado.

Color de trazo y color de relleno, sirven paraseleccionar los colores correspondientes del objeto que seva a trazar o que se tiene seleccionado.

El inspector de propiedades muestra información y laconfiguración del elemento que está seleccionado en ese momento,que puede ser un documento, un texto, un símbolo, una forma, unmapa de bits, un video, un grupo, un fotograma o una herramienta.Cada uno de los elementos tiene su propia estructura de propiedadesde forma que el aspecto de esta ventana cambiará según el elementoseleccionado.

AYUDAS AL DIBUJOComo complementos para la división exacta de distintas áreas

de trabajo Flash dispone de reglas, cuadrículas y líneas guía. Todas


NOTASellas pueden ser activadas o desactivadas en el menú Ver. Tanto paracuadrículas como para líneas guías podemos usar la función de ajusteque facilita en muchos casos el posicionamiento o el ajuste de tamañodurante la fase de dibujo. También tanto a unas como a otras lespodemos dar una personalización de color y precisión en el ajuste, ya las cuadrículas, variar su distanciamiento, expresando esa distanciaen píxeles. Para variar la unidad lo haremos en el menú Modificar >Documento

Para crear líneas guías sólo tendremos que hacer clic sobre laregla correspondiente y hacer un arrastre hasta el lugar del papel quedeseemos. Una vez introducidas todas las líneas guía que deseemos,es conveniente bloquearlas para evitar así su modificación durante lafase de dibujo.

SOBRE LOS GRÁFICOS EN FLASH

Flash puede manejar imágenes importadas de mapas de bits peroes importante conocer que estas imágenes ocupan bastante másespacio que una similar en formato vectorial. Debido a que el finúltimo de la mayoría de las películas flash es el de poder descargarseen la web y que, por tanto, el tiempo de espera es un factor muyimportante a tener en cuenta, el volumen de los mapas de bits y sunúmero es un elemento a analizar antes de publicar una película. Debetenerse presente la posibilidad de vectorizar los mapas de bits cuandosea posible.


NOTAS2. DIBUJO EN FLASH

SELECCIONADO DE RELLENOS Y CONTORNOSCuando dibujamos una forma hay que saber que

contorno y relleno son gestionados por separado, así, sobreuna forma dibujada, al seleccionar el relleno vemos que sucontorno no queda seleccionado y viceversa. Para haceruna selección tanto del contorno como del relleno se hacedoble clic sobre el relleno.Ejercicio: dibujar una elipse y, con la herramienta flechaactivada, hacer un clic sobre el relleno; hacer doble clicsobre el relleno; hacer un clic sobre el contorno.

Por otro lado, los contornos que tienen vértices semanejan por separado los tramos entre vértices. Para seleccionar todoel contorno se debe hacer doble clic sobre el mismo.Ejercicio: dibujar un rectángulo y, con la herramienta flecha activada,hacer clic sobre el relleno; hacer doble clic sobre el relleno; hacer clicsobre varios lados del contorno; hacer doble clic sobre cualquier puntodel contorno

En tramos rectos, al hacer clic sobre un segmento, se selecciona-rá éste desde un vértice a otro o entre puntos de corte. Para hacerselecciones de más de un tramo haremos clic en los diversos tramosa seleccionar mientras mantenemos pulsada la tecla de mayúsculas.

INTERACCIÓN ENTRE FORMAS QUE SE SUPERPONENCuando sobre una forma trazamos una línea, el trazo de la nueva

línea pasa a dividirla forma, dando como resultado varias formas porseparado.

Ejercicio: dibujar una elipse y, posteriormente, unalínea que cruce la forma anterior. Hacer clic sobre cadauno de las mitades de relleno resultantes; hacer dobleclic sobre los mismos; hacer un clic sobre cada uno delos segmentos del contorno; hacer doble clic sobre unpunto cualquiera del contorno.

Cuando dibujamos formas y éstas se solapan seproduce una unión entre las formas, perdiéndose loscontornos que se tuviesen en origen.Ejercicio: dibujar dos rectángulos que se crucenformando una cruz; hacer clic sobre cada uno de los

nuevos rellenos generados; seleccionar los tramos de contorno que sequedan dividiendo los rellenos y eliminarlos pulsando la teclasuprimir; hacer ahora clic sobre el nuevo relleno generado.MODIFICACIÓN MANUAL DE LAS FORMAS DIBUJADAS

Las formas, una vez dibujadas, pueden recontornearse. Para ello,una vez dibujada la forma, con la herramienta flecha seleccionada,haremos clic sobre el contorno y sin soltar arrastramos el ratón hasta


NOTASconseguir el efecto deseado.Ejercicio: dibujar un óvalo y modificar su forma;dibujar un rectángulo y modificar la forma de cada unode sus lados.

Formas sin contorno: las formas que no tienencontorno se modifican igual que si lo tuviesen.

Podemos también arrastrar la línea de contorno presionando latecla control, lo que hará que se genere un nodo nuevo

PUNTOS DE ANCLAJE O NODOSLos puntos de anclaje se generan en todos los gráficos vectoria-

les y constituyen los puntos que sirven para delimitar cualquier forma.El número de nodos influye en el peso de todo fichero vectorial y, portanto, en el de las películas Flash.

Para ver los puntos de anclaje usamos la herramienta subselec-ción, que sólo actuará sobre contornos y sobre formas sin línea decontorno.Ejercicio: dibujar un rectángulo y una óvalo que no se superpongan;activar la herramienta subselección y seleccionar el contorno delrectángulo; observad que cuando seleccionamos un nodo, éste pasa acolor blanco; mover libremente el nodo seleccionado hasta obtenermodificaciones en la forma original. Hacer lo mismo con el óvalo.

En las dos figuras anteriores podemos observar queexisten dos tipos diferentes de nodos: nodos angulares,que se muestran como cuadrados, y nodos curvos, que semuestran como circunferencias. Los nodos angulares sonaquellos en los que confluyen dos rectas o una curva yuna recta; los nodos curvos son aquellos en los queconfluyen dos tramos curvos. La gran diferencia entre

unos y otros es que en los segundos, los nodos curvos, además delnodo propiamente dicho, aparecen a cada lado del mismo dos líneasterminadas en sendos puntos que definen las tangencias a ambos ladosdel nodo y que son completamente redefinibles.

Aparecerán como nodos angulares todos aquellos en los que unode los tramos de contorno en los que terminan sea una línea recta.

INSERCIÓN, BORRADO Y TRANSFORMACIÓN DE NODOSPara insertar un nuevo punto de anclaje en una forma dibujada

se usa la herramienta pluma; con ella seleccionaremos el contorno atransformar y haremos clic en el lugar donde queremos insertar elnodo. Sólo pueden ser insertados nodos sobre tramos curvos.

Para borrar un nodo, con la herramienta subselección activada,seleccionaremos dicho nodo y pulsamos la tecla suprimir.


NOTASPara transformar un nodo curvo en uno recto, con la herramientapluma activada, hacemos clic sobre el nodo correspondiente.

Para transformar un nodo recto en curvo, con la herramientasubselección activada, arrastraremos el punto con la tecla Altpresionada.

OPTIMIZADO DE LAS FORMASPodemos reducir automáticamente el número de puntos de

anclaje de cualquiera de nuestras formas; esto reducirá el tamaño delos archivos finales, aunque puede afectar ligeramente a la figura.

Para optimizar una forma, tras seleccionarla pulsaremosModificar > Optimizar... En el menú que nos ofrece ajustaremos losparámetros dependiendo de la exactitud que deseemos.

AGRUPACIÓN DE ELEMENTOSEs posible hacer que al dibujar unas formas sobre otras, las de

abajo permanezcan inalteradas, así como también es posible quecontorno y relleno queden unidas para ser manipuladas conjuntamen-te. Para lo primero podemos usar dos técnicas: la agrupación y lascapas, para lo segundo se usa la técnica de agrupado o la de lossímbolos gráficos.

Para agrupar un conjunto de formas o cualquier otro elementode la zona de trabajo hay que seleccionar todas ellas y buscar laopción Agrupar del menú Modificar, o pulsar Ctrl+G. Para volver adesagrupar un conjunto de elementos agrupados elegiremos la opciónDesagrupar del menú Modificar o Ctrl+May+G. Ejercicio: dibujar varios elementos diferentes y agruparlos ydesagruparlos.

No obstante, para hacer modificaciones posteriores sobre unconjunto de formas agrupadas solamente tendremos que hacer dobleclic sobre él, pasando dicho grupo al modo de edición; al hacer estopodemos observar que el resto de los gráficos no incluidos en el grupo

pasan a verse más tenues yno es posible seleccionar-los, ello queda indicado enla barra de navegación

incluida en la parte superior de la zona de trabajo, donde podremosver que nos encontramos en la escena 1 dentro de un grupo -esta barraes muy útil cuando creamos elementos complejos, ya que en todomomento nos indica en qué nivel de edición nos encontramos-. Asímismo, hemos de tener presente que cualquier nuevo objeto quedibujemos dentro del modo de edición de un grupo, pasará a formarparte del mismo. Para cerrar la edición del grupo y volver al nivelbásico de trabajo pulsaremos sobre Escena 1 en la barra de navega-ción.


NOTASEjercicio: sobre las figuras del ejercicio anterior, hacer agrupaciones,editar los grupos y modificarlos, incluyendo figuras nuevas.

Los grupos pueden ser usados en diferentes niveles, incluyendogrupos dentro de otros.

USO DE CAPASOtra posibilidad de trabajo, bastante más interesante y útil que

la de las agrupaciones de elementos es el uso de capas. En la línea detiempo podemos ver quelos gráficos que estamosdibujando se incluyen den-tro de una Capa 1.

El uso de diferentescapas nos permite gestio-nar con facilidad los dife-rentes elementos que com-pongan nuestra película deFlash, pudiendo decidir

qué elementos deben ponerse sobre otros y cambiar este orden consuma facilidad. Para insertar una nueva capa pulsaremos sobre elbotón o seleccionando Insertar > Capas. Para mayor facilidad degestión, las capas pueden ser renombradas haciendo doble clic sobreel nombre y escribiendo el nuevo. Así mismo, podemos ver junto alnombre cuatro iconos que servirán para:

Indica cuál es la capa activa y con la que se está trabajando. Indica si se visualizan o no los elementos incluidos en la

capa. Indica si tenemos la capa bloqueada para su edición o no Indica si queremos ver las formas con su relleno o sólo sus

siluetas.

Las capas pueden ser agrupadas en carpetas, lo que permite unagestión más eficaz de películas con un elevado número de gráficos.Las capas pueden ser cambiadas de orden sin más que arrastrarlas allugar seleccionado. Para borrar una capa, tras seleccionarla pulsare-mos el botón Ejercicio: trazar varios elementos en diferentes capas y comprobar eluso y la gestión de las mismas.

EL PORTAPAPELESEn el uso del portapapeles en Flash debemos tener presentes las

siguientes consideraciones: cCuando pegamos un objeto desde el portapapeles, dicho objeto

aparecerá en el centro del área de trabajo, en la capa activa.Si queremos que el objeto aparezca situado en el mismo lugar desde


NOTASel que fue copiado se usará la opción Edición > Pegar in Situ oCtrl+May+V.

El uso del portapapeles con las películas se verá más adelante

Ejercicios: Dibuja las figuras que se presentan a continuación usandolas técnicas estudiadas en el tema


NOTAS3. Trabajo con color

La gestión básica del color en Flash se hace desdela ventana de herramientas en su cuadro de colores odesde la ventana de propiedades de la herramienta.

Cuando vamos a seleccionar un color se despliega una ventanacomo la de abajo, en ella se nos presenta una muestra del colorseleccionado, el valor hexadecimal de dicho color, precedido delsímbolo almohadilla, un botón de ausencia de color, una paleta decolores básica y, en la zona inferior, otra paleta con colores degrada-dos preestablecidos.

EL MEZCLADOR DE COLORESEl mezclador de colores es una ventana en la que podemos

seleccionar de forma personalizada tanto el color de relleno y decontorno, como el tipo de relleno.

Un apartado a tener en cuenta es la posibilidad de trabajar concolores transparentes, que permiten ver objetos situados debajo deotros. Esta opción se manipula con el valor alfa, representado por eltanto por ciento de opacidad: 100% opaco, 0% totalmente transparen-te.

En las ventanas de ajuste numérico podemos situar el valorexacto de cada color en la mezcla con números desde el 0 al 255. Estenúmero va apareciendo transformado a hexadecimal en el cuadro


NOTASinferior izquierdo -los dos primeros dígitos corresponden al valor delrojo, los dos centrales al del verde y los dos últimos al azul-.

Los diferentes tipos de relleno que podemos aplicar son: sólido-color uniforme-, degradado lineal -se produce un efecto de degradadoentre dos o más colores según la dirección de una línea recta-,degradado radial -también personalizable a varios colores- y de mapade bits -muy útil para aplicar tramados-

Al aplicar degradados apa-rece una barra con dos desliza-dores, cada uno de un color,mostrando cómo va a aparecer elefecto de degradado de uno aotro. Estos deslizadores puedenmoverse para hacer un efectomás o menos brusco. Tambiénpodemos introducir deslizadoresnuevos haciendo clic en el espa-cio entre los deslizadores que yatenemos; el color que tendrá de partida el nuevo será el que haya enesa posición en la barra de degradado. Podemos introducir tantosdeslizadores como necesitemos.

Para cambiar un color en un deslizador haremos clic en él paraseleccionarlo y ajustaremos su color con la paleta o mediante su valornumérico.

Para cambiar el color de un objeto ya dibujado, en el caso deque se quiera dar un degradado personalizado, seleccionaremos elobjeto y trabajaremos en la paleta de colores. En el caso de quequeramos hacer variaciones sobre unos colores ya definidos, yqueramos partir de esa mezcla, tendremos que actuar de la siguienteforma: seleccionamos el objeto a modificar, en la ventana de propie-dades desplegamos la paleta de colores de relleno, pulsamos la teclade escape, esto hará que en el mezclador de colores aparezca lamezcla de dicho objeto.


NOTAS

Edición de las características del degradadoLas características de degradados pueden ser cambiadas con la

herramienta de transformación de relleno . Si activamos estaherramienta y luego seleccionamos la figura con color degradadovemos que aparecen unos puntos:

El punto central sirvepara situar el centro del degra-dado.

El selector cuadradosirve para ajustar el ancho.

El selector de rotaciónse usa para ajustar el ángulo del degradado.

Los rellenos radiales y de mapas de bits tienen puntos de ediciónsimilares aunque con otras funciones.

Ejercicios: dibujar diferentes ejemplos de degradado y transparenciascomo los de las figuras de abajo


NOTAS4. Creación de una animación

ENTENDER LA LÍNEA DE TIEMPOUna película de Flash se organiza, como una película de

animaciones, en diferentes fotogramas que se reproducen a unadeterminada velocidad. Los diferentes elementos que componen unapelícula Flash son:

• Fotogramas: cada uno de los módulos en que se divide unapelícula; en la línea de tiempo aparecen numerados en suparte superior.

• Fotograma clave: son aquellos fotogramas en los que hayelementos dibujados y se usan para establecer un cambiográfico en la película.

• Cuando en la línea de tiempo de una capa aparece un grupode varios fotogramas que contienen un único fotograma clave,la imagen de este fotograma estará visible durante todo eltiempo de visionado de todos los fotograma que formen dichogrupo.

• Cuando trabajamos con varias capas y con diversos fotogra-mas claves hay que prestar atención a que estamos trabajandoen la capa que se desea -marcada en negro- y en el fotogramaadecuado -se detecta por el posicionamiento de la cabezalectora y aparece en la barra inferior de la línea de tiempo-.

CREACIÓN DE UNA INTERPOLACIÓN DE MOVIMIENTOCuando queremos mover imágenes fijas haciéndolas desplazar

por el escenario, Flash ofrece la posibilidad de hacer dos fotogramasclave, el primero con la posición inicial, el último con la posiciónfinal y dejar que sea flash el que desarrolle el movimiento de formaautomática haciendo una interpolación de movimiento. El desplaza-miento entre un lugar y otro se efectuará en línea recta.Ejemplo: Vamos a hacer una animación de 20 fotogramas en la queharemos que una bola se desplace en línea recta desde un extremo aotro de la pantalla.Método:

1. Dibujar a un lado del escenario una bola. 2. Sobre el fotograma 20 de la línea de tiempo hacer clic con el

botón derecho y seleccionar del menú alternativo Insertar


NOTASfotograma. Hemos creado una película sin movimiento de 20fotogramas.

3. Sobre cualquier fotograma de la película hacer clic con elbotón derecho y seleccionar Crear interpolación de movi-miento.

4. Sobre el último fotograma, el 20, hacer clic con el botónderecho y elegir Convertir en fotograma clave. Acabamos degenerar una película con movimiento pero al coincidir losfotogramas primero y último no se apreciará nada.

5. Con el último fotograma seleccionado moveremos la bolahacia el extremo opuesto.

¡Ya está lista la película! Para probarla pulsaremos sobre ProbarPelícula en el menú Control o pulsaremos la combinación Ctrl+Intro.

Ejercicio: hacer que la bola se desplace describiendo un cuadrado(necesitaremos poner un fotograma clave por cada esquina)

Podemos probar el movimiento de nuestra película fotogramaa fotograma sin tener que abandonar la pantalla de edición, para ellopulsamos la tecla punto para avanzar o la tecla coma para retroceder.

CREAR UNA INTERPOLACIÓN DE FORMAMediante este método podemos hacer que una forma se

convierta en otra de manera gradual con movimiento o sin él.Ejemplo: Vamos a hacer que la bola anterior se transforme en uncuadrado de otro color en una película de 20 fotogramas.Método:

1. Dibujar una bola en un extremo del escenario.2. Sobre el fotograma 20 hacer clic con el botón derecho sobre

Insertar fotograma clave vacío.3. En ese fotograma nuevo dibujar un cuadrado de color

diferente en el extremo opuesto al de la bola.4. Con cualquiera de los fotogramas, excepto el último clave,

seleccionado ir a la ventana de propiedades y en el cuadroAnimar, seleccionar Forma.

Ya tenemos la interpolación terminada. Probar la película.


NOTASUSO DEL PAPEL CEBOLLA

Cuando estamos editando una animación, Flash permite laposibilidad de ver el movimiento o latransición de formas de un número deter-minado de fotogramas activando el papelcebolla con el botón que se encuentra en laparte inferior de la línea de tiempo. Alactivar el papel cebolla con una animación,aparecen en la línea de tiempo unos marca-

dores que delimitan los fotogramas visibles,y veremos en nuestra área de trabajo laanimación como se muestra abajo, todos losfotogramas incluídos entre los marcadoresse muestran tenues excepto en el que seencuentre la cabeza lectora si es un fotogra-ma clave, que se muestras más intenso y eseditable.

La posición de los marcadores de papel cebolla es modificable,con lo que podremos ver toda el área de la animación que deseemos.Si activamos el botón de editar varios fotogramas podremos, además,trabajar con todos los fotogramas clave que se encuentren entre losmarcadores.

ANIMACIONES SEGÚN TRAYECTORIASCuando hacemos interpolaciones de movimiento, la translación

de los objetos se realiza según una línea recta entre las dos posicionesinicial y final. Hay posibilidad de que la trayectoria seguida se ajustea una línea cualquiera recta o no, o con tramos mixtos.Ejemplo: hacer la animación de una pelota botando en 30 fotogramas.Procedimiento:

1. Dibujar una bola en la capa 1 e insertar 30 fotogramas.2. Pulsar el botón para insertar una capa guía.3. En la capa guía creada dibujamos la trayectoria que le

queremos dar a la pelota (comenzamos con una línea quebra-da que después suavizamos convirtiendo los nodos rectos acurvos)

4. En la capa de la bola creamos una interpolación de movimien-to y convertimos el fotograma 25 en clave.

5. Trasladamos la bola del fotograma 25 al último punto de lalínea definida.

6. Convertimos el fotograma 30 en clave y desplazamos la bolapara hacer una efecto de que termina rodando.

7. Insertamos una capa, que ponemos debajo de la de la bola yponiendo cuidado de que no quede afectada por la capa guía,para insertar un fondo que dé realismo a la animación.

8. Podemos editar la línea guía que trazamos recta y hacer susnodos curvos para mejorar el efecto del movimiento.


NOTAS


NOTAS5. Utilización de símbolos, instancias y elemen-

tos de bibliotecas

LOS SÍMBOLOS Y SUS INSTANCIASLos símbolos son imágenes, botones y clips de película -

películas dentro de la película principal- que pueden utilizarse endiferentes partes de una película o en películas diferentes. Para crearun botón o un clip no tenemos más remedio que generar su símbolo,aunque no vayamos a reutilizarlo, pero con las imágenes estáticas noes necesario, como hasta ahora hemos ido creando sin mayorproblema. No obstante, si las imágenes estáticas van a aparecer demanera repetida en nuestra película, no ahorrará espacio de memoriaconvertirlas en símbolos. Cuando creamos un símbolo, éste sealmacena en la biblioteca (ver esta ventana pulsando F11 ó enVentana > Biblioteca)

Una vez que creamos un símbolo, en nuestra película usaremoslo que en Flash se de-nominan instancias,que no son más quecopias del símbolo. Lasinstancias pueden mo-dificarse en tamaño oforma global, perocualquier cambio quehagamos interno afec-tará a todas las instan-cias del mismo símbo-lo.Ejemplo: crear un sím-bolo de un gráfico está-tico de una estrella ycrear con ella una esce-

na nocturna.Procedimiento: Para crear una símbolo estático procederemos de lasiguiente forma:1. Realizar el dibujo de la estrella.2. Seleccionar el dibujo completo y pulsar en el menú Insertar >

Convertir en símbolo...3. En la ventana que se despliega (a la izquierda) poner el nombreEstrella para el símbolo, encomportamiento seleccionarGráfico y aceptar.4. Podemos comprobar ahora

en la ventana de propieda-des que el gráfico ha pasa-do a ser una instancia delsímbolo Estrella.

5. Pulsar F11 para ver la Bi-blioteca de nuestra pelícu-


NOTAS

la y arrastrar varias estrellas al escenario.6. Modificar el tamaño y la forma externa de las instancias.

CREAR SÍMBOLOS GRÁFICOS ANIMADOSAl editar un símbolo gráfico -haciendo doble clic sobre él-

vemos que aparece una línea de tiempo. Podemos generar en esa líneade tiempo una animación que afecte a nuestro símbolo con la premisade que esta línea de tiempo estará ligada a la línea de tiempo generalde la película.Ejemplo: Vamos a crear un brillo en las estrellas generando unaanimación del símbolo estrella en el que se cambie el color.Procedimiento: 1. Hacemos doble clic sobre cualquiera de la estrellas del escenario,

lo que hará que todo el dibujo pase a atenuarse y sólo se vea ensu color la estrella sobre la que hicimos el clic; también apareceráen el navegador , indicativo de queestamos editando el símbolo estrella, lo que afectará a todas lasinstancias de este símbolo.

2. En la línea de tiempo insertar un fotograma sobre el fotograma 4y convertir el 3 en clave.

3. Cambiar el color de la estrella en el fotograma clave 3 haciéndolomás claro.

4. Pulsar sobre escena 1 en la barra de navegación para cerrar laedición del símbolo Estrella.

Si probamos la película vemos que aparentemente no se hacambiado nada, no se observa el cambio de color que acabamos deprogramar. Ello es debido a que nuestra película sólo tiene unfotograma por lo que nunca se verán los fotogramas 2, 3 y 4 de lasinstancias de un símbolo gráfico.

5. Inserta un fotograma sobre el fotograma 4 de la línea de tiempoprincipal y prueba ahora la película.

Es posible individualizar el comportamiento de cada una de lasinstancias gráficas insertadas. Con la instancia a modificar selecciona-

d a ,v e -m o sen lav e n -t a n a

de propiedades que es posible hacer que sólo se reproduzca una vezsu bucle, que no se reproduzca o que se reproduzca constantemente,con lo que en nuestro ejemplo podríamos hacer estrellas que brillaseny otras que no. También podemos hacer modificaciones de color deforma individual que afecten al brillo, al color y a la transparencia, loque da un amplio abanico de posibilidades de personalización de lasinstancias de símbolos gráficos.


NOTASLA BIBLIOTECA

Como ya hemos visto, la biblioteca se muestra como unaventana con dos partes básicas: un listado con todos los símbolos

incluídos en ella y una ventana en la que semuestra el símbolo seleccionado. Junto alnombre aparece un icono para identificar el tipode símbolo: para gráficos, para botonesy para clips.

Haciendo clic derecho sobre los símbolospodemos modificar todas sus características yduplicarlos -interesante cuando se quieran otrossímbolos similares al primero pero no iguales-.Podemos incluso redefinir su comportamientoy hacer que un gráfico se comporte como unclip o como un botón

Cada una de las películas que se crean tiene su propia bibliotecade archivos comunes: gráficos, botones y clips. Cuando creamospelículas complejas con diversos elementos puede ser necesario unmayor orden en la biblioteca. Flash ofrece la posibilidad de agruparlos símbolos en carpetas. Para meter un símbolo en una carpeta sólotenemos que arrastrarlo sobre ella. Para abrir y cerrar una carpetaharemos doble clic sobre la misma.

Eliminación de símbolos: es importante tener en cuenta quecuando eliminamos un símbolo de la biblioteca, todas las instanciasdel mismo desaparecerán del escenario y que ésta es una operaciónque no puede ser revocada, una vez realizada no tenemos posibilidadde recuperar el elemento. Es importante estar bien seguro antes deproceder a borrar un símbolo de la biblioteca y, como medida deprecaución, es interesante guardar una copia del fichero antes deproceder al borrado para tener así posibilidad de recuperar lainformación.

BIBLIOTECAS COMUNESFlash dispone de un lugar donde podemos guardar elementos

que sirvan para ser usados en diferentes películas. La versión básicade Flash dispone ya de bibliotecas comunes de botones y sonidos.Para acceder a ellas buscaremos el menú Ventanas > Bibliotecascomunes > opción. Más adelante veremos cómo usar estos elementos.

Para crear nuestras propias bibliotecas comunes habremos decrear una película Flash con los símbolos que deseamos compartir, noes necesario que haya instancias en el escenario, sólo los símbolos enla biblioteca de la película. Una vez creados guardaremos dichapelícula en: c:\Archivos de programa\Macromedia\Flash MX\FirstRun\Libraries con el nombre que deseemos para la biblioteca común.

PROPUESTA: preparar un fichero con gráficos específicos de laasignatura propia para incluir en las bibliotecas comunes


NOTAS6. Trabajo con texto

TIPOS DE TEXTOHay tres formas diferentes de incluir texto en un fichero Flash:

• Texto estático: sirve para incluir información escrita que no tieneque ser modificada.

• Texto dinámico: es un tipo de texto que podemos modificar através de rutinas de programación en ActionScript en función delas interacciones del usuario.

• Entrada de texto: son cuadros de texto a través de los que elusuario puede introducir información para ser tratada por rutinasde ActionScript.

Más adelante, en el capítulo de ActionScript se verán algunosejemplos de tratamiento de los textos dinámicos y de introducción.Aquí sólo veremos cómo trabajar con los textos estáticos.

CUADROS DE TEXTO ESTÁTICOCuando seleccionamos la herramienta texto la ventana de

propiedades que aparece es la que se ve abajo. En ella podemoscambiar la fuente, tamaño, color, dirección del texto, tipo dejustificación, ajustar la distancia entre caracteres y entre líneas,permitir que el texto sea seleccionable o establecer un enlace a unadirección web.

Cuando escribimos texto estático en una determinada fuente, eltipo de las letras se exporta con el archivo, cosa que no ocurre con eltexto dinámico ni con el de entrada, con los que habrá que exportar lafuente como se verá en su momento.

Para crear un bloque de texto que muestre texto en una solalínea, se hará clic donde desee que empiece el texto y se procederá aescribirlo.

Para crear un bloque de texto con una anchura fija situaremosel puntero donde se desee que empiece el texto y arrastraremos elpuntero para señalar dicha anchura.

CONVERTIR TEXTO ESTÁTICO EN FORMASLa introducción de texto estático no presenta mayor dificultad,

pero hay un par de transformaciones que permitirán, cuando hagamosanimaciones, facilitar efectos gráficos sobre el texto.


NOTASEl efecto en cuestión es elde separar las letras que compo-nen el texto para convertirlo enprimer lugar en letras separadas.Para hacerlo buscaremos Modi-ficar > Separar o menú alterna-tivo y Separar. Cuando separa-mos un cuadro de texto conse-guimos que cada una de las le-tras sea un cuadro de texto inde-

pendiente, con las posibilidades de manipulación para realizaranimaciones con las mismas que ello conlleva.

Hay también un método de trabajo fácil con todas las letrasseparadas de un texto y es el de distribuir en capas dichas letras. Paradistribuir las letras ya separadas en capas tendremos que seleccionar-las todas y en el menú alternativo pulsar en Distribuir en capas. Ellohace que cada letra pase a una capa distinta y a cada capa le pone elnombre de la letra que contiene.

Para hacer transformaciones absolutamente libres con las letrasdel texto podemos pasar a convertirlas en formas, dejando las letrasde ser consideradas por el programa como texto y por tanto ya noeditable y transformable como tal. Para llevar a cabo esta transforma-ción tenemos que seleccionar las letras ya separadas y volverle aaplicar la función Separar.

Ejercicio: 1. Tratar de conseguir un tipo de texto similar al empleado en

el logo de la Junta de Andalucía (pág 9 de estos apuntes)2. Hacer algún tipo de animación con las letras y los grafismos

de la Junta de Andalucía, como parte de una página de entrada.


Notas7. Trabajo con clips de película y botones

CLIPS DE PELÍCULAUn clip de película es como una minipelícula: tiene su propia

línea de tiempo, independiente de la línea de tiempo principal, y suspropiedades. Los clips de película se almacenan en la biblioteca y decada símbolo de clip de película pueden introducirse en un documentotantas instancias como se necesiten. Para distinguir las diferentesinstancias de un mismo clip se le asignan nombres, incluso en algunasocasiones aunque sólo se use una instancia del clip habrá queasignarle un nombre para poder incluir rutinas que se refieran a él. Elnombre asignado a la instancia es totalmente independiente del quetenga el símbolo; no podemos referirnos a una instancia por elnombre del símbolo, aunque sólo haya una única instancia del mismoen la película. Las instancias de clip de película pueden anidarse unasdentro de otras para crear una jerarquía.

Ejemplo: vamos a hacer una película consistente en un coche que sedesplaza de un extremo a otro de la pantalla; el coche va a estarconstituido por un clip; las ruedas, que girarán, serán instancias deotro clip diferente que esté insertado en el clip coche.

Procedimiento:1. Abrir un documento Flash y dibujar la silueta de un coche con

sus ventanas (usar diferentes capas para no alterar por error lasformas ya definidas).

2. Convertir el gráfico en un clip de película3. Dibujar una rueda y ponerle algún detalle que

sirva para que se note la rotación, por ejemplotuercas. La tuerca, que se va a repetir variasveces, puede ser un símbolo gráfico que seinserte repetidas veces.

4. Convertir la rueda en un clip de película.5. Editar el clip de la carrocería haciendo doble clic sobre él e

insertar 2 instancias del clip rueda y cerrar la edición del clipcarrocería

6. Hacer una animación de 120 fotogramas en la que se vea eldesplazamiento del coche apareciendo por un extremo y saliendopor el otro.

7. Poner un fondo que dé realismo a la animación.

Podríamos meter en la película anterior varias instancias del clip


Notascoche sin más que arrastrar la instancia sobre el escenario. En todosellos observaríamos que las ruedas giran independientemente de queel coche se mueva o no.

8. Vamos también a poner nombre a las distintas instancias de loscoches: coche1, coche2 y coche3 (no se usarán espacios en losnombres de instancia)

9. Editaremos el clip coche y, dentro de él, pondremos nombre a lasinstancias de las ruedas: rueda_del y rueda_tras -estos nombrevan a afectar a todas las instancias de los coches ya que elnombre lo ponemos dentro de del clip coche-.

Poner nombre a las diferentes instancias no va a tener utilidaden este ejemplo, ya que las instancias no tienen por qué tenerlosiempre, pero los dejaremos puestos para poder incluir nuestrasprimeras rutinas de ActionScript en el siguiente tema.

BOTONESLos botones son símbolos que disponen de una línea de tiempo

especial. Cuando un gráfico cualquiera lo convertimos en símbolo debotón, al editarlo podemos ver una línea de tiempo similar a la deabajo.

Aparecen predefinidas cuatro posiciones de fotogramas:

A. Reposo: es el estado normal de un botón y el fotograma corres-pondiente será el que se muestre normalmente.

B. Sobre: será el fotograma que se muestre al pasar el ratón sobre elbotón.

C. Presionado: es el fotograma que se mostrará al presionar el ratón.


Notas

D. Zona activa: es un fotograma especial que no se muestra nunca,pero que sirve para definir la zona en la que debe activarse elratón si esta no coincide o no queremos que coincida con lasformas gráficas del botón; esto será de mucha utilidad cuando losbotones estén integrados por texto.

Lo normal será definir un fotograma clave para cada una de lasposiciones: un cambio de color entre la posición de reposo y la de

sobre y un cambio de tamaño entre la sobre y lapresionado, al tiempo de mover la posición eneste último, son las variaciones más habitualesen los botones.

Se pueden crear efectos muy realistas trabajando con diferentescapas, usando degradados y transparencias; como ejemplo puede versecómo están creados los diferentes botones que incluye Flash.

Ejercicio: vamos a incluir en el clip de los coches dos botonesdiferentes y creados por nosotros, que más tarde servirán para detenerel movimiento y reanudarlo.


Notas8. Creación de interacciones simples conActionScript

LENGUAJE ACTIONSCRIPTUna de las grandes posibilidades de Flash en la de poder

introducir programación en sus películas, lo que hace de ellasherramientas de absoluta interactividad y, por ello, ideales para lapresentación de contenidos didácticos. El lenguaje que integra Flashes el denominado ActionScript, y se trata de un lenguaje de progra-mación orientado a objetos bastante fácil y con muchas similitudescon JavaScript.

Las líneas de programación se incluyen desde la ventanaAcciones. Cuando se abre esta ventana por primera vez la veremoscomo en el gráfico de abajo.

En la barra superior, junto al nombre de la ventana, aparece eltipo de objeto al que se va a añadir el script, los objetos en los que sepueden introducir líneas de programación son los fotogramas clave,los clips de película y los botones. Bajo el título hay una ventanadesplegable, llamada menú de salto, en la que aparecen los elementossobre los que podemos escribir una rutina del fotograma activo. Abajoa la izquierda tenemos una ventana de herramientas de acciones en laque podemos ver todas las acciones de ActionScript que pueden serincluidas en nuestros programas. A la derecha, la ventana blanca es enla que se irá incluyendo el script.

Hay dos formas de trabajar: el modo normal y el experto. Enmodo Normal, los scripts se crean seleccionando elementos de la cajade herramientas Acciones. También puede seleccionar acciones en elmenú emergente del botón de adición (+). La caja de herramientasAcciones separa los elementos en categorías como Acciones,Propiedades y Objetos y también proporciona una categoría Índice quemuestra todos los elementos ordenados alfabéticamente. Al hacer clicen un elemento una vez, la descripción de éste aparece en la esquinasuperior derecha del panel. Al hacer doble clic en un elemento, éste


Notasaparece a la derecha del panel Script. En modo Normal se puedeagregar, eliminar o cambiar el orden de las sentencias del panel Script;también se pueden introducir parámetros para acciones en los cuadrosde texto situados sobre el panel Script. El panel Acciones tambiénpermite buscar y reemplazar texto, ver números de línea de script y"fijar" un script, es decir, mantener un script en el panel Script cuandose hace clic fuera del objeto o del fotograma. Puede utilizar el menúde salto para ir a cualquier script de cualquier objeto del fotogramaactivo.

PROGRAMAR ACCIONES PARA UN BOTÓNEn la programación orientada a objetos lo que hacemos es

disparar la ejecución de acciones cuando ocurre un evento. Loseventos más usuales de ratón son on(press) y on(release); el primerode ellos significa ‘cuando se presiona el botón...’ y el segundo‘cuando se suelta el botón...’. A continuación del evento introducire-mos la acción deseada.

Cuando programamos en modo normal no es necesario incluirlos eventos ya que, dependiendo del objeto que tengamos selecciona-do el editor elegirá el evento adecuado.Ejemplo: hacer un clip con un objeto que se mueve por el escenarioe incluir dos botones que permitan detener o poner en marcha lapelícula.Procedimiento: 1. Poner un objeto cualquiera en el escenario y crear una animación

con él.2. Incluir dos botones, uno rojo y otro verde.3. Programar el botón rojo para que detenga la película:

Con el botón seleccionado, desplegar las acciones de control depelícula en la ventana de herramientas de acciones y hacer dobleclic en stop. Vemos que automáticamente se ha introducido elevento on(release), si deseamos seleccionar otro basta buscarloy elegirlo del cuadro superior.

4. Programar el botón verde para continuar la reproducción:Proceder igual que con el botón rojo pero seleccionando la acciónplay.

5. Probar la película.

CONTROL DE LA REPRODUCCIÓN DE CLIP DE PELÍCULAEl mismo procedimiento lo podemos usar para controlar líneas

de tiempo de clips de película incluídos en la línea de tiempoprincipal. Para poder actuar sobre ellos es imprescindible que lasinstancias de esos clips tengan un nombre, como ya vimos en el temaanterior.Ejemplo: incluir en el clip anterior una rueda de colores que gire yhacer que se detenga o se ponga en marcha con el clip.Procedimiento:1. Dibujar una circunferencia y dividir la en sectores como en la

figura.


Notas2. Convertir el gráfico en un clip depelícula y ponerle el nombre ‘rueda’.

3. Editar el clip de película y construiruna animación en la que se vea girarla imagen.

4. Cerrar la edición del clip y visualizarque las animaciones se ejecutanbien.

5. Editar el script del botón rojo enmodo experto e incluir la línea: rue-da.stop();

6. Editar el script del botón verde en modo experto e incluir la línea:rueda.play();

7. Probar la película y comprobar que funciona correctamente.

CONTROL DE UN CLIP QUE SE ENCUENTRA DENTRO DEOTRO

Para efectuar acciones en clips anidados en otros emplearemosuna lógica de nomenclatura jerárquica de la forma: clip1.clip2.acción,así esta acción se ejecutará sobre un clip2 que se encuentra dentro delotro clip1.Ejemplo: En el ejemplo anterior poner otra rueda de colores que gireen sentido contrario y que se detenga y se ponga en marcha con dosbotones independientes.Procedimiento:1. Editar el clip de la rueda y dibujar en una nueva capa una rueda

más pequeña con colores diferentes.2. Convertirla en un nuevo clip y llamarlo ‘ruedita’.3. Insertar dos instancias de los botones rojo y verde y disminuirlos

de tamaño.4. En modo normal insertar las acciones de parada y marcha en los

botones.5. En modo experto incluir delante de las acciones rueda.ruedita,

debiendo quedar: rueda.ruedita.stop(); y rueda.ruedita.play();6. Probar que la película funciona correctamente.

Ejercicio: incluir en la película que hicimos en el tema anteriorbotones que permitan detener los coches del escenario así como lasruedas de los mismos. Aclaración: las distintas instancias de loscoches deben tener nombres diferentes, pero las ruedas siempre sellamarán de igual forma en los diferentes scripts, coche1.rueda_del,coche1.rueda_tras, coche2.rueda_del, coche2.rueda_tras.

OTROS EVENTOS DE RATÓNEl evento más normal para el ratón es on(release) -al liberar-,

pero hay otra serie de eventos que pueden resultar útiles en otrascircunstancias:1. on(press) -al presionar-, se activa cuando se presiona el ratón

sobre el botón.2. on(releaseOutside)-al liberar fuera-, se activa cuando se ha


Notaspresionado sobre el botón, pero se libera fuera del mismo.3. on(rollOver) -al situar sobre-, se activa cuando se pasa el ratón

sobre el botón.4. on(rollOut) -al salir-, se activa cuando tenemos el ratón sobre el

botón y salimos de él.5. on(dragOver) -al arrastrar sobre él-, se desencadena cuando

pulsamos el botón, sin soltar arrastramos afuera y volvemos aentrar.

6. on(dragOut) -al arrastrar afuera-, se activa cuando pulsamos ysalimos del botón.

7. on(keyPress “tecla”) -al pulsar la tecla-, se activa cuandopulsamos la tecla definida; este evento se puede compaginar conpulsaciones del ratón para manipular desde él o desde el tecladolas acciones.

Ejercicio: preparar una película en la que se vea el uso de losdistintos eventos de ratón.

CLIPS DE PELÍCULA COMO BOTONESA partir de la versión MX de Flash, los clips de película pueden

recibir los mismos eventos que los botones, además de los suyospropios. Ello nos permite aplicar efectos interesantes sobre los clips,que en las versiones anteriores había que hacer introduciendo botonesdentro de clips de película. Esta posibilidad permite realizar botonescon efectos sofisticados. Vamos a hacer un ejemplo de esto último.Ejemplo: diseñar un botón que muestre una animación en su estadode reposo, otra distinta en su estado ‘sobre’, y otra al pulsar.Procedimiento:

1. Hacer un gráfico para un botón similar al de la figura.2. Convertirlo en un clip de película, insertar un fotogra-

ma clave en el fotograma 3 y cambiar los colores delbotón.

3. Insertar dos fotogramas más y convertir el 5 en clave. Estos cincoprimeros fotogramas van constituir la película del estado dereposo de nuestro botón; tendremos que hacer que no pase lapelícula del fotograma 5. Para ello, con el fotograma 5 activadoentramos en la ventana de acciones e insertamos la acción goto,que veremos que se inserta como gotoAndPlay(1) -ir y reproducirel fotograma 1- lo que hará que este bucle se esté repitiendoconstantemente.

4. Insertar un nuevo fotograma clave en el fotograma 6,borrar el diseño del botón e incluir un dibujo parecido alde la figura. Insertamos otro fotograma clave en el 8 ycambiamos su tamaño.

5. De nuevo insertaremos un fotograma clave en el 10 y proce-deremos como con el fotograma 5 incluyendo un script conla acción goto, pero esta vez señalando al fotograma 6. Losfotogramas 6 al 10 constituirán la opción ‘sobre’ de nuestrobotón.

6. Ahora definiremos los fotogramas para la opción ‘presiona-do’. Generamos en el fotograma 11 un nuevo fotograma clave


Notasy vamos a crear en él una interpolación de forma hasta elfotograma 17 que contendrá el efecto final, por ejemplo unadecoloración mediante el uso de la opción alfa de color. Enese fotograma 17 incluiremos la acción de gotoAndPlaydirigida al fotograma 11.

Ya tenemos preparado el botón pero si publicamos la películaveríamos que sólo se ve la opción de reposo pues que en ningúnmomento hemos indicado que pase por otros fotogramas al mover elratón.7. Cerramos la edición del símbolo y con él seleccionado vamos a

introducir el siguiente script:

on (rollOver) {gotoAndPlay(6);

}

Cuando estoy sobre ir alfotograma 6

on (rollOut) {gotoAndPlay(1);

}

Cuando salgo ir al foto-grama 1

on (press) {gotoAndPlay(11);

}

Cuando presiono ir alfotograma11

Esta rutina de programación se ha incluido en el clip de películay no en el fotograma de la línea de tiempo principal, es por lo que esescript afectará únicamente al clip.8. Probar el funcionamiento del script.

ETIQUETADO DE FOTOGRAMASEn scripts pequeños es fácil direccionar a un número de

fotograma determinado, incluso si modificamos la línea de tiempopodría resultar también fácil hacer las modificaciones de los scriptpara direccionar a fotogramas diferentes. No obstante existe unaposibilidad de no tener que tocar los script aunque modifiquemos lalínea de tiempo y consiste en poner etiquetas a los fotogramas clavey direccionar no a su número sino a esa etiqueta. Aunque cambiemosla línea de tiempo cualquier acción gotoAndPlay(‘nombre de fotogra-ma’) seguirá apuntando al mismo sitio.Ejemplo: vamos a hacer una animación escalonada en la que unobjeto se mueva un determinado trayecto y, en base a botonespodamos hacer que el desplazamiento sea mayor o menor. Variarluego la línea de tiempo para hacer el movimiento más o menosrápido.Procedimiento:1. Realizar una animación de un objeto desplazándose por el

escenario.2. Vamos a proceder a copiar la animación completa: en la línea de


Notastiempo seleccionamos todos los fotogramas y pulsaremos sobreEdición > Copiar fotogramas.

3. Pulsamos sobre el fotograma libre siguiente a la animación ypulsamos en Edición > Pegar fotogramas; volver a hacer estamisma operación para obtener tres copias de la misma animación.

4. En los fotogramas clavede inicio de cada una delas tres animaciones va-mos a poner una etiqueta alos mismos: uno, dos ytres.

5. En los fotogramas finales de cada animación vamos a incluir unscript gotoAndStop() pero en lugar de poner los número defotograma vamos a incluir su etiqueta correspondiente entreparéntesis.

6. Vamos a insertar o eliminar fotogramas para hacer que las treslíneas de tiempo tengan una duración ostensiblemente diferente.

7. Comprobar la película y ver que las líneas de programaciónsiguen funcionando a pesar de haber cambiado de lugar fotogra-mas claves referenciados.

Ejercicio: Modificar el clip de los coches para hacer que cada unotenga un movimiento independiente, y disponer un botón de marchay otro de paro para cada uno de los coches (tendremos que incluir elmovimiento en la propia línea de tiempo del clip coche. Si se van aescalar los tamaños tendremos que crear un clip por cada coche).


Notas9.Adición de sonidos

INCLUIR SONIDOS EN LOS BOTONESDentro de las bibliotecas comunes hay una dedicada a sonidos

pensados para botones o elementos similares. Podemos probar lossonidos seleccionándolos y pulsando elbotón play de la ventana en que nos mues-tra la onda.

La adición de uno de esos sonidos aun botón es muy simple, basta con arras-trar el sonido seleccionado sobre unfotograma clave del botón.Procedimiento:1. En una película crear un botón y

hacer doble clic sobre él para editar-lo. Crear una capa específica parasonidos

2. Seleccionar el fotograma ‘Presiona-do’ y tras elegir el sonido que desee-mos, arrastrarlo sobre la escena (nosobre la línea de tiempo). Veremosque en el fotograma correspondientede la línea de tiempo aparecerá lagráfica del sonido.

3. Podemos también poner otro sonidoen el fotograma ‘Sobre’, aunque noes normal usar sonidos al pasar sobrebotones.

Ejercicio: poner sonidos en los botones de la película de los coches.

INSERTAR FOTOGRAMAS EN LA PELÍCULAPodemos usar la misma técnica para arrastrar sonidos a un

fotograma clave pero debemos tener en cuenta los siguientes proble-mas:

• Los sonidos que han empezado a sonar seguirán haciéndolohasta que no terminen.

• Siempre que se inicie un sonido sin se termine otro, el sonidodel segundo se unirá al del primero.

• Si pasamos varias veces por el fotograma en el que se inicia unsonido sin que éste haya terminado, se empezará de nuevouniéndose este nuevo al que aún no ha terminado.

INSERCIÓN Y CONTROL DEL SONIDOLa inserción de sonidos y su control requiere el uso de scripts

algo avanzados pero que expondremos aquí como una receta.Ejercicio: Vamos a mostrar un escritorio y hacer que cuandoseñalemos sus objetos suene su nombre.Procedimiento:1. Comenzaremos importar los sonidos a usar a la biblioteca de


Notasnuestra película Archivo > Importar a biblioteca... y seleccionarficheros.

2. Cada uno de los sonidos importadoshay que vincularos para su exporta-ción. Seleccionar el sonido y pulsar elbotón derecho para acceder al menúque se muestra a la derecha y pulsarsobre Vinculación...

3. En el cuadro que se abre -mostradoabajo- marcar la casilla Exportar paraActionScript y en identificador ponerel nombre con el que nos vamos areferir a ese sonido, p.e. el nombre del archivo sin su extensión.

4. Crear una capa especial para la programación de sonidos en lalínea de tiempo principal. Vamos a insertar los siguientes scriptsen modo experto (tendremos que poner cuidado porque cualquiervariación, por insignificante que parezca, provocará errores ynuestro programa no funcionará en absoluto; hay que respetarmayúsculas y minúsculas):

• En el fotograma recién creado

sonido = new Sound();

• En cada uno de los objetos a los que queremos hacer quesuenen cuando hagamos clic sobre ellos:

on(release){_root.sonido.stop()_root.sonido.attachSound("nubes")_root.sonido.start();

}

En la segunda línea de este script aparece la palabra nubes porquehará que suene el sonido exportado con el nombre ‘nubes’. En cadagráfico asociaremos su dibujo con el sonido que le corresponde.


Notas10. Prueba y publicación de una película

PRUEBA DE UNA PELÍCULAConforme vamos generando la película es muy recomendable

ir comprobando que la misma funciona como tenemos previsto. Paraver su funcionamiento seleccionaremos Control > Probar película oCtrl+Intro.

Al probar la película de esta forma hay que tener en cuenta queel escenario que se muestra no es el escenario que se verá finalmenteen la película terminada; en esta última sólo veremos el cuadro con eltamaño del escenario, mientras que en la prueba vemos espacios quequedan fuera del escenario.

Cuando se cometen errores en la película, éstos son mostradosal publicar en una ventana denominada Salida. Siempre que estaventana se nos abra al publicar será para indicarnos que hay algúnproblema, identificando el mismo en su mensaje.

Es conveniente ir comprobando la película con mucha regulari-dad durante su creación para localizar más fácilmente los problemasque puedan surgir. Así mismo también es recomendable ir guardandola distintas versiones de la película con nombre nuevo con la opciónGuardar como... con nombres película01, pelicula02,... y así tenersiempre una versión recuperable hasta un punto y que funcionacorrectamente.

Comprobar una película fotograma a fotogramaDesde la misma pantalla de edición podemos ver los afectos de

las animaciones con las teclas ‘,’ y ‘.’; con la primera retrocedemos enla línea de tiempo, con la segunda avanzamos.

PUBLICACIÓN DE UNA PELÍCULACuando trabajamos con Flash se generan dos tipos diferentes de

archivos, uno con extensión .fla y otro con .swf. Los archivos conextensión .fla son archivos editables de Macromedia Flash; son losque se abren con nuestro programa de creación de películas flash.Pero el resultado final de la película, la que se terminará viendo, es unfichero con extensión swf, que es la película publicada.

El fichero swf se genera cada vez que hacemos una prueba dela película con el propio nombre del fichero y en la misma carpetadonde hemos guardado el .fla; en caso de que no hayamos guardadoaún una copia del archivo, éste se guardará con el nombre por defecto(Sin titulo-1,...) en la carpeta

C:\Archivos de programa\Macromedia\Flash MX

Flash ofrece varias posibilidades de publicación de la películaswf. Para configurar la publicación buscamos Archivo > Configura-ción de la publicación...


De forma predefinida la publicación se hace en dos formatos,formato swf de Flash y en HTML -formato de página web-. Enrealidad la publicación en HTML no genera ningún fichero especialde la película sino que compone una página HTML con los códigosnecesarios para incluir el fichero swf, que es la verdadera películaflash.

También podemos hacer una publicación GIF, JPEG y PNGpero se genera una imagen estática del primer fotograma en uno deestos formatos, que son mapas de bits -en formato GIF podemosexportar como gif animado-. Al publicar en este formato generamosun fichero ejecutable (.exe) que incorpora junto a la película, sureproductor.

Hay dos formatos de publicación llamados proyectores que sonmuy útiles para cuando queramos ver una película flash en cualquierordenador, independientemente de que tenga o no instalado elproyector de Macromedia Flash (plugin necesario para ver unapelícula en este formato).


Notas11. Creación de scripts con ActionScript

ELEMENTOS QUE PUEDEN CONTENER SCRIPTSCuando escribimos scripts en una película hemos de tener

presente que sólo podemos incluirlos en:• Fotogramas clave• Clips de película• Botones

No podemos introducir líneas de programación en ningún otro sitio.Además, la inclusión de scripts en los clips y botones llevan aparejadaque las acciones estén asociadas a un evento, por ejemplo: acción: iral fotograma 25, evento: al hacer clic sobre el objeto.

En el tema 8 hemos incluido scripts en los tres tipos de objetosreferenciados. Vamos a ver aquí nuevas acciones y nuevos eventos através de ejemplos.

ARRASTRAR Y SOLTAR OBJETOS DEL ESCENARIO

En este ejemplo aprenderemos a arrastrar objetos en de unescenario y a soltarlos en el lugar que le corresponde, acumulando enun contador el número de fallos que se cometan; puede servir para lacreación de ejercicios que pidan situar elementos en los lugaresprevistos.

ARRASTRAR Y SOLTARTenemos en un escenario las dos imágenes que vemos en la

figura y deseamos poder arrastrar la bombilla sobre el recuadroamarillo; al soltarla debe quedar donde la dejemos.

Primero hemos de tener en cuenta que los dos objetos de nuestroescenario deben ser dos clips de película -no es que tengan animacio-nes, sino que vamos a tener que incluir una programación que sólopueden recibir este tipo de objetos.

Acciones: startDrag() , stopDrag()

Con el objeto bombilla seleccionado vamos a insertar lasiguiente rutina:

on (press) {this.startDrag(false);}

Cuando presione, éste (objeto) co-menzar a arrastrar.


Notason (release) {this.stopDrag();}

Cuando suelte, éste (objeto) dejar dearrastrar

Escrito el script, probaremos la película y comprobaremos quepodemos dejar la bombilla en cualquier lugar del escenario, puede serdentro, fuera o en un lugar intermedio del cuadro receptor.

Hay un detalle en la primera acción no comentado y es que entrelos paréntesis del comienzo de arrastre incluimos false. Este palabraclave indica que podemos coger el objeto por cualquier lugar; sin enlugar de false escribimos true veremos que al hacer clic sobre labombilla, esta se moverá hasta situar el centro del objeto en laposición del ratón. Habrá otros ejercicios en que nos interese eseefecto pero aquí parece más interesante el programado.

DETECTAR COLISIONES ENTRE OBJETOSVamos a ver cómo detectar que la bombilla y el cuadrado se

tocan para hacer que, si esto ocurre, la bombilla se sitúe centrada enel cuadrado de forma automática al soltarla.

Propiedades: _x , _yAcciones: hitTest()Control de flujo: if(...){...}

Comenzaremos por poner nombre a las dos instancias: bombillay bombillaC, para la bombilla y el cuadro receptor respectivamente.

Las propiedades _x e _y de cualquier objeto dan las coordenadasdel mismo en el escenario (el origen de coordenadas de un escenariose sitúa en la esquina superior izquierda), así bombilla._x contiene elvalor de la coordenada según el eje horizontal del cuadro amarillo.Cuando lo escribamos más abajo veremos que a bombillaC se leantepone _root., esto lo explicaremos un poco más adelante y porseparado para no meter demasiados conceptos juntos. De momento loescribiremos así, sin más.

El control de flujo if(...){...} nos sirve para pedir al programaque compruebe si se cumple lo que está entre los paréntesis, y si estoocurre que ejecute todas las acciones que se encuentran entre lasllaves.

La acción objeto1.hitTest(objeto2) detecta si el objeto 1 y el 2entran en colisión.

Insertaremos a continuación, dentro del evento on(release) lassiguientes líneas:

if (this.hitTest(_root.bombillaC)) { si este objeto colisiona con el objetobombillaC hacer lo indicado entrellaves


Notasthis._x=_root.bombillaC._xthis._y=_root.bombillaC._y

Hace la propiedad _x y _y de esteobjeto iguales a las que tiene el obje-to bombillaC; resultado sitúa el cen-tro de la bombilla en el mismo lugarque el cuadro

} Aquí terminan las acciones a ejecutarsi se cumple la pregunta del controlde flujo

ALMACENAR INFORMACIÓN: VARIABLESUno de las necesidades más básicas durante la programación es

la de almacenar valores numéricos o de texto. Esta información puedeser necesario que esté de partida y que la demos en las propias líneaso bien podremos hacer que sea el propio programa el que la busquey almacene. El almacenamiento de información se hace en variables.Si en una línea de un script escribimos pi=3.1416 ó nombre=”Juan”estamos guardando información en variables de forma que cada vezque necesitemos usar el valor numérico 3.1416, en lugar de poner elnúmero pondremos en su lugar pi, o cada vez que queramos poner elnombre de Juan podremos escribir nombre.

Hay una gran diferencia entre ambas variables, la primera es unavariable numérica, la segunda es una variable alfanumérica -quepuede contener letras, números o signos pero si son números nopueden ser operados- y la gran diferencia es que los segundos sedeben dar entre comillas.

En el programa que nos ocupa vamos a hacer que sea el propioprograma en que se encargue de obtener y almacenar la información,se trata de variables obtenidas de forma dinámica.

Lo que pretendemos hacer es que si soltamos la bombilla en unlugar que no sea tocando el cuadro amarillo, en vez de que se quedeallí donde la soltamos regrese automáticamente al sitio que tenía enorigen. Para hacer esto debemos pedirle al programa que rescate lascoordenadas de la bombilla antes de hacer nada con ella y almaceneesos valores en dos variables.

Eventos: onClipEvent(load){...}VariablesControl de flujo: if(...){...}else{...} es el mismo que el visto peroincrementado con else{...}. En su conjunto funciona así si se cumplelos que hay entre paréntesis haz lo que se indica entre las llaves, si nose cumple haz lo que hay entre las segundas llaves.

La llamada a eventos onClipEvent es exclusiva para clips depelícula, y no pueden ser usadas en fotogramas clave ni en botones.Con esta llamada podemos invocar eventos que son exclusivos paraclips de película. En este caso invocamos el evento load -carga- paraque realice una serie de operaciones al cargarse dicho clip.


NotasEl control de flujo if(...){...}else{...}Copia las siguientes líneas en el script de la instancia bombilla

onClipEvent (load) { Cuando el clip se cargue

origenX = _x;origenY = _y;

Almacena la coordenada x en la va-riable origenX y la variable y en ori-genY

} fin de las acciones durante la carga

Incluye también las líneas siguientes después del cierre de lallave de la instrucción if:

else { si no se cumple

_x = origenX;_y = origenY;

ajusta la coordenada x al valor que seencuentre almacenado en la variableorigenX, y la coordenada y al queestá almacenado en origenY

} fin de acciones de la comparación

AJUSTE DE LA DETECCIÓN DE COLISIÓN ENTRE CLIPSNuestro clip parece funcionar bien pero tiene un pequeño

defecto. Este defecto consiste en que si dejamos prácticamente fuerala bombilla, aunque rozando ligeramente, o nos acercamos por una delas esquinas redondeadas, da la respuesta por buena y deberíamosobligar a dejar explícitamente dentro del cuadrado amarillo labombilla para que la respuesta fuese aceptada como buena.

Para darle esta funcionalidad vamos a proceder de la siguientemanera:1. Dentro del clip del cuadrado vamos a incluir un nuevo clip más

pequeño al que podemos dar color de relleno y de línea igual queal cuadrado para que ‘no se vea’.

2. A esa instancia del nuevo clip le daremos el nombre de diana (adonde tenemos que apuntar para acertar)

3. La acción if(this.hitTest(_root.bombillaD)) la sustituiremos porif(this.hitTest(_root.bombillaD.diana)), para que ahora comprue-be que la colisión se hace con el nuevo clip.

Una vez que probemos que todo va bien, vamos a incluir varioselementos para completar el test.

LOS ELEMENTOS QUE SE ARRASTRAN SIEMPRE ENCI-MA

Cuando incluimos varios objetos vemos que al arrastrar objetosque fueron incluidos antes en la película, éstos siempre aparecen pordebajo de los insertados más recientemente. Al poner objetos en unescenario, Flash los pone en un nivel 0 y por orden de altura depen-diendo de si se ha puesto antes o después. Nosotros podemos cambiarel nivel de los distintos objetos para hacer que pasen a estar en un


Notasprimer plano por encima del resto.

Acción: moviclip.swapDepths(nivel)

Con esta acción podemos cambiar una instancia al nivel quedeseemos

Vamos a incluir en cada clip las siguientes instrucciones:

1. this.swapDepths(1) debe incluirse en el evento on (press), paraque cuando pulsemos el ratón sobre él pase a estar por en el nivel1 por encima del resto de los clips y no quedar oculto.

2. this.swapDepths(0)debe incluirse en el evento on(release), paraque al soltar el botón del ratón vuelva al nivel 0.

INCLUSIÓN DE CONTADORESVamos, a continuación, a tratar de poner unos contadores que

permitan conocer el número de errores cometidos. Para hacerlotendremos que usar, junto a las variables, una de las opciones de textoque no vimos en su momento: los cuadros de texto dinámico.

Los cuadros de texto dinámico son objetos de texto que puedencambiar su contenido por la acción de un script y de las interaccionesde los usuarios. Hay dos formas diferentes de trabajar con cuadros detexto dinámicos: asociando éstos a una variable, que es la forma enque lo vamos a hacer nosotros aquí, y otra algo más compleja pero almismo tiempo mucho más versátil, que consiste en convertirlos en unobjeto similar a un clip dándoles un nombre y asociándoles bastantesacciones especiales para este tipo de objetos.

Para asociar un cuadro de texto dinámico a una variable, en laventana de propiedades, una vez especificado que el cuadro de textopasa a ser dinámico, aparecen nuevos cuadros. Uno de ellos, llamadoVar, sirve para incluir el nombre de la variable a la que asociamos elcuadro de texto. También podremos ajustar que el texto dinámicolleve un marco o no, que sea de línea única o de varias líneas -en estaopción hay que tener presente que sólo se verá el texto que quepa enel cuadro especificado-.

Vamos a incluir en el escenario de nuestro ejercicio un cuadrode texto dinámico asociado a la variable fallos, y escribiremos en elcuadro como número inicial 0.

Operadores: ++


NotasSe trata de un operador de incremento. Puesto detrás de unavariable hará que ésta se incremente en una unidad.

Incluimos en el script de cada uno de los objetos arrastrables, enla zona else del control de flujo la siguiente línea:

_root.fallos.++

FIJAR LOS ACIERTOSEl siguiente paso será ver cómo hacer que las respuestas

acertadas no sean movibles. Para hacerlo tendremos que modificar laprogramación de la acción on (press) que es donde se permite elarrastre; en caso de que cuando presiono el ratón no haya colisión delclip con el cuadro que le corresponde, se permitirá el arrastre.

Operador: ! -(negación)El operador ! niega la expresión que le sigue. Normalmente se

emplea en las preguntas (controles de flujo).

Vamos a incluir dentro de la acción on (press), un control deflujo if (...) {...} que incluya entre sus llaves las dos líneas deprogramación que ya incluye. La acción quedará como sigue:

if (!this.hitTest(_root.bombillaC)) { Si este clip NO colisiona con _root.bombillaC

this.startDrag(false);this.swapDepths(1);

Comienza el arrastre y se cambia denivel el clip

} termina el control de flujo

CONTADOR DE ACIERTOS COMO CONTROLADOR DEFIN

Vamos a incluir una variable de recuento de aciertos paracomprobar cuándo se ha terminado el ejercicio. Para ello incluiremosuna variable que se llame aciertos a la que daremos inicialmente elvalor 10 y que conforme vayamos acertando iremos decrementandoen una unidad hasta llegar a cero, momento en que daremos porfinalizada la actividad.

Símbolos: -- (decremento)Puesto tras una variable decrementa su valor en una unidad

Crearemos una capa especial para incluir en su fotograma clavescripts que afecten a toda la película -se podría incluir en cualquierade los fotogramas claves- y escribiremos una línea que sea:

aciertos = 10;Y crearemos un cuadro de texto dinámico asociado a la variableaciertos.

En los scripts de los objetos, dentro de la acción on (release) e


Notasincluido en la parte if del control de flujo la línea:_root.aciertos--

De esta forma, cada vez que se produce un acierto decrementa lavariable en uno y lo mostrará en el cuadro de texto dinámico.

VISIBILIDAD DE LOS CLIPS DE PELÍCULA Y RASTREOCONTINUO DE UNA PELÍCULA

Una vez que se ha acabado la resolución del ejercicio vamos ahacer que aparezca una información dando la enhorabuena por lafinalización y que aparezcan unos botones que permitan volver acomenzar la actividad si se desea.

Propiedad: _visibleEsta propiedad de los clips y de los botones permite hacerlos

visibles o invisibles. Puede tomar los valores 0 / 1 ó true / false, así lainstrucción: instancia._visible = false hará que la instancia desaparez-ca de la escena.

Vamos a crear un clip de película que contenga un cuadro detexto estático y alguna animación que felicite por haber acabado laactividad. A la instancia le pondremos el nombre enhorabuena. Conella seleccionada vamos a incluirle el script siguiente:

onClipEvent (load) { Cuando se cargue el clip

this._visible = false; hacer la propiedad de visibilidadfalsa

} fin de acciones para el evento

Incluiremos también un botón, que programaremos másadelante, y a cuya instancia le pondremos el nombre de boton_conti-nuar.

Evento: onClipEvent (enterFrame) {...}Este evento permite rastrear continuamente un clip; así podemos

efectuar acciones en función de los cambios que se produzcan enalgún elemento de nuestra película.

Incluiremos en el script anterior las siguientes líneas:if (_root.aciertos == 0) { si la variable aciertos vale 0 , notar

que el signo igual es doble

this._visible = true; poner en visible este clip

_root.boton_continuar._visible = true; poner en visible la instancia boton_continuar

} fin de acciones para el control deflujo

Con estas líneas de arriba, cuando completemos el test y la


Notasvariable aciertos se haga cero aparecerán el anuncio final y el botónque hará posible volver a comenzar.

Restablecimiento de las condiciones inicialesVamos, por último, a incluir la programación al botón que

restablece la actividad como al principio. Incluiremos el siguientescript:

on (release) { Cuando libere el botón

boton_continuar._visible = false;enhorabuena._visible = false;

hacer invisibles el botoncontinuar y el rótulo en-horabuena

aciertos = 10;fallos = 0;

ajustar las variables a losvalores iniciales

_root.bombilla._x = _root.bombilla.origenX;_root.bombilla._y = _root.bombilla.origenY;_root.bombillaS._x = _root.bombillaS.origenX;_root.bombillaS._y = _root.bombillaS.origenY;_root.interruptor._x = _root.interruptor.origenX;_root.interruptor._y = _root.interruptor.origenY;_root.interruptorS._x = _root.interruptorS.ori-genX;_root.interruptorS._y = _root.interruptorS.ori-genY;_root.motor._x = _root.motor.origenX;_root.motor._y = _root.motor.origenY;_root.motorS._x = _root.motorS.origenX;_root.motorS._y = _root.motorS.origenY;_root.pila._x = _root.pila.origenX;_root.pila._y = _root.pila.origenY;_root.pilaS._x = _root.pilas.origenX;_root.pilaS._y = _root.pilas.origenY;_root.pulsador._x = _root.pulsador.origenX;_root.pulsador._y = _root.pulsador.origenY;_root.pulsadorS._x = _root.pulsadorS.origenX;_root.pulsadorS._y = _root.pulsadorS.origenY;

poner cada uno de losclips en las posiciones deorigen y que se encuen-tran almacenados el lasvariables origenX y ori-genY

} fin de la acción de liberarbotón

LA RUTA DE LOS CLIPSCuando nos referimos a un clip para modificar alguna de sus

propiedades o realizar con él cualquier evento no sólo tendremos quesaber y nombrarlos a la hora de escribir el script; también hemos desaber la ruta para llegar a ellos. Esto último es especialmentenecesario cuando hacemos referencia a una instancia cualquiera desdeun script escrito en otra instancia diferente ya que no sólo tendremosque dar su nombre sino también su ruta de acceso.

Cuando situamos una instancia de un clip cualquiera en elescenario de una película de Flash, ésta se sitúa en la raíz de lapelícula (root en inglés); así que cuando nos queremos referir a unainstancia desde un script ubicado en otra tendremos que anteponer alnombre de la instancia el parámetro _root que indica que ese nombre


Notasestá en la raíz. Toda la estructura de referencias es similar a la queempleamos en la ubicación de archivos y carpetas de nuestro discodura, sólo que aquí, en lugar de emplear la letra C: para decir queestamos en el nivel más básico de almacenamiento, usamos _root.

El tipo de referencias descrito en los párrafos anteriores se llamareferencia absoluta. Existen otras formas de referencia: referenciarelativa y referencia dinámica. La referencia dinámica es la que ofrecemás posibilidades pero es algo compleja de entender y no vamos atratarla en este curso de introducción.

En la referencia relativa cuando tenemos que referir a un objetoque está en un nivel anterior antepondremos _parent.

FUNCIONES Y OBJETOS DE TEXTOEl final del ejemplo anterior supuso tener que introducir mucha

información en uno de los scripts. Ese problema lo podríamos habersolucionado usando unos nombre de instancias más coherentes con laprogramación aunque menos relacionados con el objeto que represen-taban; además de lo anterior hubiese sido necesario el uso defunciones. Vamos a ver el este ejemplo muy simple el uso de lasfunciones junto a una manipulación mucho más dinámica de loscuadros de texto.

CUADRO DE TEXTO CON NOMBRE DE INSTANCIAEn un escenario nuevo vamos a poner un cuadro de texto

dinámico y le vamos a poner como nombre de instancia miTexto y loharemos multilínea

A continuación, en el fotograma 1 de la línea de tiempo vamosa escribir las siguientes líneas de script:

miTexto.createTextField(); asocia un campo de texto a la varia-ble miTexto

miTexto.text="Prueba"; introduce el texto ‘Prueba’ en la va-riable miTexto

Probar la película y ver cómo en el cuadro de texto se muestra‘Prueba’. Esto no mejora en nada lo que ya sabíamos hacer y pareceque lo dificulta, pero vamos a seguir. Vamos a cambiar “Prueba” por“Hemos cambiado el contenido del cuadro de texto” y probamos denuevo la película.

Se puede ve que el texto es demasiado largo para el tamaño delcuadro creado a pesar de que activamos que nuestro cuadro de textotuviese multilínea; para que esta posibilidad funcione hemos de añadiruna instrucción que indique que el cuadro de texto creado debeadaptarse al contenido:


NotasmiTexto.autosize = true; Indica que el cuadro de texto miTex-to cambiará su tamaño para adecuar-se al contenido

Probar ahora y comprobar que en esta ocasión sí que aparece eltexto completo y en varias líneas. Con esta instrucción permitimosque el cuadro no se quede pequeño en el caso de que mandemos uncontenido mayor que el especificado en su creación. En el caso de queno hubiésemos habilitado la función multilínea, el cuadro se habríahecho mayor en anchura.

Hay muchas propiedades que podemos ahora ajustar medianteprogramación en este cuadro de texto: color del texto, de fondo,posición del cuadro y otras muchas en las que no vamos a entrarahora, pero sí que vamos a trabajar con las primeras.

Para ajustar el color del texto escribiremos:

miTexto.textColor = 0x000000; Ajusta el color al valor hexadecimal000000 (negro)

Vemos que el color hay que darlo en hexadecimal. Esto noreviste el mayor problema ya que este valor lo muestra el mezcladorde colores cuando elegimos un color.

Para ajustar la posición del cuadro de texto usaremos laspropiedades _x e _y que ya hemos venido usando para los clips depelícula

miTexto._x = valor;mitexto._y = valor;

Sitúa el cuadro de texto en la posi-ción marcada por los valores a losque hemos igualado las propiedades.

Para cambiar el color de fondo antes de ajustar el color hemosde habilitar esta opción, que por defecto no lo está:

miTexto.background = true; Habilita el fondo de miTexto

miTexto.backgroundColor = 0xAA00FF; Ajusta el color de fondo al valorhexadecimal AA00FF

Igual que con el fondo, para poner un borde con un colordeterminado hay que habilitar el borde:

miTexto.border = true; Habilita una línea de borde

miTexto.borderColor = 0xFF0000; Ajusta el color del borde al valor he-xadecimal FF0000

También podemos hacer uso de la propiedad _visible para hacer

aparecer o desaparecer el cuadro de texto.


NotasCon estas propiedades cambiables vamos a crear un clip depelícula con un círculo rojo de forma que al situar el ratón sobre él nosdé información sobre el círculo, sitúe el cuadro de texto en la posicióndel centro del cuadrado y ajuste el color de las letras al color rojo y elfondo a uno que contraste con el rojo.

Procedimiento:1. En un escenario nuevo crear un clip de película consistente en un

cuadrado azul y un cuadro de texto dinámico con nombre deinstancia miTexto.

2. En un fotograma clave de la línea de tiempo principal crearemosuna instancia de cuadro de texto con miTexto y habilitaremos elcolor de fondo y el borde.

3. Con el clip del cuadrado seleccionado -no editado- incluiremosel siguiente script:

on (rollOver) { Cuando esté sobre

_root.miTexto._visible = true;_root.miTexto.text = "cuadrado azul";_root.miTexto.backgroundColor = 0xFFFF00;_root.miTexto.textColor = 0x0000FF;

Ver cuadro miTexto, poner el texto“cuadro azul”, ajustar el fondo aamarillo y el color de letra a azul

} fin de acciones

on (rollOut) { Cuando salga

_root.miTexto._visible = false;_root.mitexto.text = "";

Ocultar el cuadro mi texto y vaciarsu contenido

} fin de acciones

Tras comprobar que el clip funciona correctamente, incluir otrasdos formas geométricas con distintos colores y convertirlas en clip depelícula.. Incluir a cada una de ellas un script similar al del cuadradopara que miTexto informe sobre el tipo de forma y su color.

Variante: podríamos haber usado botones en lugar de clips para lasfiguras, ya que los eventos programados son de botón. En caso de usaresta opción, no hubiese sido necesario incluir en los scripts el prefijo_root delante de miTexto ya que los botones están dentro de laspelículas y no forman parte de la jerarquía de éstas.

FUNCIONESCuando una misma rutina va a afectar a varios objetos, como es

el caso de los scripts que hemos escrito para cada uno de las figurasanteriores podemos usar las denominadas funciones, que no son másque rutinas que situamos en un lugar común y a las que llamamosdesde varios sitios.

Escribamos en la línea de tiempo principal el siguiente script:


Notasfunction ponerTexto() { Creamos una función que llamamos

ponerTexto. Los paréntesis son obli-gatorios en todas las funciones

miTexto.text=miTexto.text+" esto es nuevo"; Cuando se ejecute, hará el conteni-do igual a lo que había más el nuevotexto: “ esto es nuevo”

} fin de acciones para la función

Vamos a incluir en los scripts de los clips, dentro de la acciónon(rollOver) y como última línea la siguiente:

_root.ponerTexto() ejecutar las acciones de la funciónponerTexto() que está en la línea detiempo principal

Si comprobamos ahora las acciones veremos que además delrótulo con el tipo de gráfico y su color aparece el texto que añadimosen la función.

Visto cómo se ejecuta una función, vamos a reprogramarla parano tener que repetir las mismas rutinas en cada uno de los scripts;además tenemos la enorme ventaja de que si queremos cambiar algoen ese script, sólo lo tendremos que hacer una vez.

ENVIAR DATOS A UNA FUNCIÓNVamos a sustituir el script del evento on(rollOver) del cuadro

azul por el siguiente:

on (rollOver) {

_root.ponerTexto("cuadrado azul",0xFFFF00, 0x0000FF);

Ir a la función llevando los datos quehay entre paréntesis -cada dato dife-rente se separa por una coma-

}

El script de la función, que pusimos en la línea de tiempoprincipal, deba ser substituido por esto otro:

function ponerTexto(clip, fondo, texto) { Cuando se llame a la función, el pri-mer dato que venga con la llamada seasociará a la variable clip, el segundoa fondo y el tercero a texto

.miTexto._visible = true; Hacer miTexto visible

miTexto.text = clip; Insertar en mi texto el contenido de lavariable clip

miTexto.backgroundColor = fondo; Poner el color de fondo que indiquela variable fondo


NotasmiTexto.textColor = texto; Poner el texto en el color que indiquela variable texto

} fin de acciones de la función

Observad cómo hemos eliminado el prefijo _root de delante demiTexto; ello se debe a que tanto la instancia miTexto como lafunción se encuentran en la misma ubicación -misma línea de tiempo-,no es necesario indicarselo. Comprobar que funciona correctamentey cambiar los scripts del resto de las figuras siguiendo la mismaestructura que la empleada para el cuadrado azul.

COORDENADAS DEL RATÓNVamos a hacer ahora que el rótulo de miTexto aparezca junto

al ratón al posicionarnos sobre los clips.

Propiedades: _xmouse e _ymouse_xmouse e _ymouse son dos variable que contienen en todo

momento las coordenadas de la posición del ratón.

Aprovechando estas dos variables, vamos a incluir en la funcióndos líneas que posicionen el cuadro de texto junto al ratón cuandoseñalemos cualquiera de las figuras:

miTexto._x=_xmouse Posiciona la instancia miTexto en lamisma posición horizontal que elratón cuando entra en la figura.

miTexto._y=_ymouse Posiciona la instancia miTexto en lamisma posición vertical que el ratóncuando entra en la figura.

EJEMPLO 3º: CREACIÓN DE UNA BARRA DEDESPLAZAMIENTO

Utilizando lo aprendido hasta ahora y con algunas instruccionesnuevas vamos a diseñar una barra de desplazamiento horizontal queservirá para saber en qué momento de una película nos encontramosy para desplazarnos por ella de forma gráfica.

PASO 1: CREAR EL DESLIZADOREmpezaremos diseñando el que va a ser nuestro

deslizador. En el gráfico de la derecha se muestra unapropuesta. Este gráfico se convertirá en un clip de película.

PASO 2: SCRIPT DEL DESLIZADORVamos a utilizar una forma diferente de usar la

función stratDrag. Consiste en marcar las coordenadas delcuadro en las que puede moverse el objeto que queremosarrastrar e indicarselo a la función startDrag. Insertaremosel siguiente script en el clip que acabamos de dibujar:


NotasonClipEvent (load) { Al cargarse

arriba = _y;abajo = _y;

Definir las variables arriba abajoiguales la posición vertical del clip -lo que estamos marcando es que nodebe moverse verticalmente-

izquierda = _x; derecha = _x+200;

Definir la variable izquierda igual ala posición horizontal del clip, y laderecha iguala ese valor más 200 -indicamos que el clip podrá moversedesde donde se encuentra hasta 200puntos más a la derecha-

} Fin del evento al cargarse

on (press) { Al presionar

startDrag("", false, izquierda, arriba,derecha, abajo);

Comenzar a arrastar este objeto, sinajuste de centrado, entre las variablesizquierda, arriba, derecha y abajo

} Fin del evento al presionar

on (release) { Al liberar

stopDrag(); Parar el arrastre

} Fin del evento al liberar

PASO 3: PONER FONDO A LA BARRACrearemos un fondo que marque los límites de desplazamiento

del deslizador.

PASO 4: INCLUIR UN MARCADOR DE PORCENTAJEVamos a incluir un cuadro de texto que indique

porcentualmente cuál es el desplazamiento realizado. Para ello vamosa situar un cuadro de texto dinámico y le vamos a asociar la variableporcentaje.

Vamos a incluir en el script del deslizador las siguientes líneas:

onClipEvent (enterFrame) { Conforme se desarrolle el clip

_parent.porcentaje = Math .round ((_x-izquierda)/(derecha-izquierda) * 100 );

hacer la variable porcentaje, que estáen un nivel anterior -_parent-, igualal valor que resulte de la operaciónredondeada

} Fin del evento

La operación iguala la variable porcentaje a lo siguiente:Math.round(...) Redondea un número decimal al entero más

próximo.(this._x-min)/(max-min)*100 convierte la posición x de nuestro

clip en un número entre 0 y 100, tomando como límites las variables


Notasmin y max.

PASO 5: CONVERTIR TODOS LOS OBJETOS EN UN SÓLOCLIP

A continuación seleccionaremos todos los objetos que hemosdiseñado y convertiremos todos ellos en un único clip, lo quepermitirá introducir la barra deslizadora en cualquier película.. Vamosa ponerle nombre de instancia, por ejemplo deslizador, para poder leerel valor de la variable porcentaje desde otros clips de película

LIGAR LA BARRA A DIFERENTES ACCIONES

ROTAR OBJETOSDibujamos un cuadrado con alguna marca como referencia y lo

convertiremos a clip de película. A continuación le insertaremos elsiguiente script:

onClipEvent (mouseMove) { Cuando se mueva el ratón

_rotation =_root.deslizador.porcentaje*360/100;

Rotar este clip el ángulo indicado enla operación siguiente.

} Fin del evento

La operación _root.deslizador.porcentaje*360/100; convierte unnumero entre 0 y 100 en otro entre 0 y 360, que es como hay queindicarle la rotación de un clip, en grados sexagesimales.

MOVER UN OBJETO O UNA ANIMACIÓNCreamos un clip de película con una animación por

interpolación de un objeto. En el primer fotograma de esta animaciónvamos a incluir una instrucción stop() para que la película no sereproduzca automáticamente.

Cerramos la edición del clip y vamos a escribir el siguientescript asociado a nuestra instancia:

onClipEvent (mouseMove) { cuando mueva el ratón

gotoAndStop(Math.ceil(_root.deslizador.porcentaje*_totalframes/100));

Ir y parar en fotograma que resulte dela operación entre paréntesis.

} Fin de evento

La operación es la siguiente:

_root.deslizador.porcentaje*_totalframes/100

toma el valor de la variable de porcentaje de nuestro clip deslizador,multiplica este valor por el número total de fotogramas de nuestro clipy lo divide por 100, en definitiva convierte un número entre 0 y 100en otro entre 0 y el número de fotogramas del clip de película.


NotasLa instrucción Math.ceil() lo que hace es convertir el númerodecimal que resulta de la operación anterior en un número enteroredondeado hacia el más alto.

BARRA QUE SE RELLENA EN FUNCIÓN DE LAREPRODUCCIÓN DE UNA PELÍCULA

Vamos a utilizar la barra de deslizamiento creada para construirotra sin deslizador pero que se va rellenando conforme se reproduceuna película. Partiremos del clip de la barra deslizadora anterior.

En una película nueva vamos a pegar la barra deslizadora de losejemplos anteriores. Editamos la barra y eliminamos el deslizador,dejando sólo la barra y el cuadro de texto dinámico, al que vamos acambiar la variable asociada por la variable fotograma -no tieneimportancia cambiar el nombre, pero de esta manera hacemos másintuitivo el funcionamiento-.

Estando aún en el modo de edición de la barra, dibujamos uncuadrado que entre en elrectángulo de la propiabarra, haciendo de rellenode la misma, elegir uncolor que contrate bien.C o n v e r t i r e m o s e s erectángulo en un clip peroen l a ven t ana deconversión, en la eleccióndel punto de registro -marcado en el gráfico de laizquierda-, elegiremos elpunto central de laizquierda. El sentido esque vamos a hacer crecer

este cuadrado hacia la derecha y si dejamos el registro central, creceráhacia ambos lados.

Vamos a insertar el siguiente script en este último clip:

onClipEvent (load) { Cuando se cargue

_width = 0; Hacer el ancho del clip igual a 0

} Fin de acciones durante le carga

onClipEvent (enterFrame) { Conforme se vaya reproduciendo

_width =214*_root._currentframe/_root._totalframes;

Hacer el ancho del clip igual alresultado de la operación


_parent.fotograma =_root._currentframe;

Hacer la variable fotograma igual alvalor del fotograma que se reproduceen ese momento de la línea de tiempoprincipal

} Fin del evento

La operación

_width = 214*_root._currentframe/_root._totalframes;

iguala el ancho del clip a un valor que está entre o y el ancho de labarra deslizadora dependiendo del fotograma que se reproduzca en esemomento. El ancho de la barra es de 214; este valor tendrá que sermodificado en función del ancho de la propia barra.

Como se muestra en la imagen de abajo, hemos incluidotambién una serie de botones que permitirán controlar completamentela reproducción de una película.

Los scripts de cada botón son:

Ir al primer fotograma:on (release) { Al liberar

gotoAndStop(1) Ir y detenerse en el fotograma 1

} Fin de acciones

Retroceder un fotogramaon (release) { Al liberar

if (_currentframe>1) { Si el fotograma actual es mayor que 1

gotoAndStop(prevFrame()); Ir y detenerse en el fotogramaanterior al actual

} Fin de acciones si se cumple lacomparación

else { Si no se cumple la comparación

gotoAndStop(_totalframes); Ir y detenerse en el último fotograma

} Fin del control de flujo


Notas} Fin del evento al liberar

Pararon (release) { Al liberar

stop(); Parar la proyección

} Fin del evento

Reproducir una vezon (release) { Al liberar

play(); Reproducir la película

continuar = 0; Hacer la variable continuar igual a 0

} Fin del evento

Se ha introducido una variable -reproducir- para distinguir entrereproducir una vez y reproducir en continuo. Esta variable se controlaen el último fotograma clave de la animación; allí introduciremos elsiguiente script:

if (continuar == 0) { Si la variable continuar es igual a 0

stop(); detener la proyección

} fin de acciones

Al estar este script en el último fotograma de nuestra película sise encuentra con que la variable continuar es igual a 0, ésta no sereproducirá en forma de bucle, que es lo que todas las películas hacenpor defecto.

Reproducir en continuoon (release) Al liberar

play(); Reproducir la película

continuar = 1; Hacer la variable continuar igual a 1

} Fin del evento

Avanzar un fotogramaon (release) { Al liberar

stop(); Detener la proyección

if (_currentframe<_totalframes) { Si el total de fotogramas es menorque el fotograma actual

gotoAndStop(nextFrame()); Ir y detenerse en el siguientefotograma del actual

} Fin de acciones si se cumple lacomparación

else { Si no se cumple la comparación

gotoAndStop(1); Ir y detenerse en el fotograma 1


Notas} Fin del control de flujo

} Fin del evento al liberar

Ir al último fotogramaon (release) { Al liberar

gotoAndStop(_totalframes) Ir y detenerse en el último fotograma

} Fin del evento

Recopilación de lo visto de ActionScript

Eventos de botones:on(press){...}on(release){...}on(rollOver){...}on(rollOut){...}

Eventos de clips de película:onClipEvent(load){...}onClipEvent(EnterFrame){...}onClipEvent(mouseMove){...}

Acciones:stratDrag()stopDrag()hitTest()swapDepths()

Acciones de control de película:gotoAndStop(...)gotoAndPlay(...)nextFrame()prevFrame()

Control de flujo:if(...){...}else{...}

Propiedades:_x_y_visible_xmouse_ymouse_rotation_width_currentframe_totalframes


Operadores:+ (suma)++ (incremento)-- (decremento)* (producto)/ (división)! (negación)= (igualar)== (comparar una igualdad< (menor que)> (mayor que)<= (menor que o igual)>= (mayor que o igual)

Operaciones con el objeto Math:Math.roundMath.floorMath.ceil

MétodosNombreDeInstancia.createTextField()

Propiedades del objeto TextField:NombreDeInstancia.textNombreDeInstancia.backgroundNombreDeInstancia.backgroundColorNombreDeInstancia.colorNombreDeInstancia.borderNombreDeInstancia.borderColorNombreDeInstancia._xNombreDeInstancia._yNombreDeInstancia._visible


Notas12. Utilización de componentes

QUÉ SON LOS COMPONENTESLos componentes son elementos clásicos de los formularios

HTML: casilla de verificación (CheckBox), cuadro combinado(ComboBox), cuadros de lista(ListBox),, botones de opción(RadioBut ton) ,botones decomando (PushButton) barra dedesplazamiento (ScrollBar) ypaneles de ventana con barras dedesplazamiento (ScrollPane).

Los componentes vienenintegrados en flash como clips depelícula complejos, que puedenser arrastrados a un escenariodesde la ventana componentes:

Ventana > Componentes. Cuando insertamos uno de los componentesen nuestra película, se incluirán en la biblioteca de la misma todos loscomponentes que integran el clip.

Cuando insertamos un componente en una escena, en la ventanade propiedades aparecerá una pestaña para ajustar los parámetros delcomponente. Estos parámetros cambian de un componente a otro.Vamos a ver cómo funcionan los cuatro primeros.

ADICIÓN DE UNA CASILLA DE VERIFICACIÓN - CheckBoxEl CheckBox permite agregar casillas de verificación en una

película Flash. Sus parámetros son:Label (etiqueta): es el nombre que aparecerá junto

a la casilla de verificación-Initial Value (valor inicial): es el valor que tomará al inicio; puedeser false (no marcada) o true (marcada).Label Placement (localización de la etiqueta): ubicación de laetiqueta; puede estar a la derecha o a la izquierda.Change Handler: no vamos a ver esta función.

Para leer el componente la instancia debe tener un nombre; parasaber si está en true o false obtendremos el dato mediante elprocedimiento nombre.getValue().


ADICIÓN DE UNA LISTA DESPLEGABLE -ComboBoxPermite agregar una lista desplegable de

selección única. Sus parámetros son:

Editable: permite definir la lista comoestática o editable. Sólo veremos un ejemplode la estática, en la que el usuario puede elegiruno de los elementos de la lista.Labels: son las cadenas de texto que se van avisualizar en la lista; para introducir susvalores pulsaremos sobre la lupa que aparece

cuando seleccionamos el parámetro,veremos una ventana como la de laizquierda; al pulsar + incluimos unelemento, con - lo eliminamos y conlas flechas lo podemos cambiar deubicación en la lista.Data: es una lista de valoresasociados a los elementos de la lista.Si definimos los data, la funcióngetValue() llevará el dato asociado;en caso de no haberlo definido,getValue() llevará la cadena de laetiqueta seleccionada.

Row Count: indica el número de elementos de la lista que se veránal mismo tiempo.

ADICIÓN DE UNA LISTA DE SELECCIÓN - listBoxPermite agregar cuadros de lista de selección única o múltiple.

La selección múltiple implica el manejo de arrayso matrices, que es un tipo de variable algo máscomplejas de manejar y que no vamos a ver. Parala selección sencilla, este componente tiene uncomportamiento similar al de un comboBox o listadesplegable. Su manipulación es similar y el

cuadro de elementos visibles no es modificable de manera sencilla;hay que modificarlo mediante el método setRowCount(número).


ADICIÓN DE UN GRUPO DE BOTONES DE OPCIÓN -radioButton

Permite agregar de manera fácil un grupo de botones de opción.Los parámetros de estos botones son los siguientes:

Label: es la etiqueta que aparecerá junto al botón, y será el dato quetomará si no se ha especificado en el parámetro Data.Initial State: aquí podremos hacer que aparezca marcado inicialmente(true) o no (false).Group Name: es el nombre por el que se asocia a un mismo grupo debotones y es la etiqueta a través de la que se recogerá la opciónelegida del grupo -nombreDelGrupo.getValue()-.Data: será el valor asociado al botón en caso de que deseemos que seadiferente a la etiqueta.Label Placement: sirve para ajustar la ubicación de la etiqueta.

EJEMPLO Preparar una interfaz como la mostrada abajo con dosgrupos de botones de opción, dos casillas de verificación, una listadesplegable con los meses del año y una lista de selección única convarios deportes. Se compondrán diversos fotogramas clave, uno porcada deporte, al que se le pondrá como etiqueta el nombre del deporte;se compondrá un cuadro de texto dinámico con nombre de instancia.Al pulsar el botón rojo se compondrá una frase con los distintos datosseleccionados y se irá al fotograma con la etiqueta del deporte elegido.Se pondrá un segundo botón visible en todos los fotograma menos enel primero, que sirva para regresar al fotograma 1.

Apuntes Cursillo de Flash

Documents

Transcript of Apuntes Cursillo de Flash