Ejemplos Flash - Puzzle (Arrastrar y Soltar)

Ejemplos Flash - Puzzle (Arrastrar y Soltar)
Aquellos que han seguido los dos anteriores capítulos de Flash, y

esperaban que hubiese explicado los arrays en este capítulo, les he
de pedir disculpas.
:)
El objeto Array lo explicaremos en el siguiente capítulos. En éste, nos

centraremos en una serie de elementos más sencillos que nos
permitirán realizar ejercicios más complejos en el futuro.
Los nuevos elementos son:

En este ejemplo, vamos a aprender a realizar
4 pequeñas aplicaciones: 1.- Listas. Aprenderemos a utilizar componentes de flash, como las
listas y a saber cual es el elemento seleccionado de una lista.
1.- Realizar una lista de elementos y obtener
el valor pulsado 2.- Modificación de las propiedades de un gráfico.
Aprenderemos a controlar algunas propiedades de una movieclip
(alto, ancho, rotación y alfa)
2.- Modificación de las propiedades de un
gráfico.
3.- Realizar un pequeño test, con listas y radio button, donde
aprenderemos a utilizar la sentencia if y la sentencia case.
3.- Realizar un pequeño test (aplicación de la
sentencia IF/CASE. Radio Button y listas)
4.- Control de una movieclip mediante teclas. Conoceremos el
comportamiento del objeto Key (Tecla)
4.- Control de una movieclip mediante teclas.
Para finalizar la introducción, recuerdo lo que ya dije en el primer

tutorial:
1) Utilizad la ayuda de Flash. Es excelente. Os explicará cómo

hacer todo tipo de objetos y cómo incluir sencillas pero efectivas
programaciones.
2) Probad con pequeñas animaciones (objetos que cambian,

botones que van a fotogramas, películas que se muevan por la
pantalla…) No es tan difícil. Al final del artículo os indico direcciones
dónde podéis encontrar cientos de ejemplos y tutoriales.
3) Paciencia. Mucha paciencia. Aprender a utilizar un programa con

tantas posibilidades es un proceso lento que requiere de muchas
horas y continuo trabajo.
Para seguir el tutorial, al final del artículo encontrareis un enlace a

DESCARGAR EJEMPLO | VER EN GRANDE los ejercicios para que podáis investigar vosotros y ver cómo se ha
realizado.
http://www.faq-mac.com/cursos/flash/Capt3/ (1 of 2)24/02/2007 07:37:50 a.m.

Este código, así como los ejemplos, gráficos que lo ilustran y comentarios,
se pueden copiar, distribuir, imprimir... citando la fuente y el autor.
Tak & Faq-Mac, © Miguel Angel Muras (Tak)
http://www.faq-mac.com/cursos/flash/Capt3/ (2 of 2)24/02/2007 07:37:50 a.m.

CONOCIMIENTOS PREVIOS
Para realizar este ejercicio vamos a utilizar una serie de

conocimientos que ya se han explicado en los anteriores tutoriales.
Los conceptos ya explicados son:
- Crear símbolos partiendo de elementos ( Capt 1 )
- Crear y cambiar el nombre a capas ( Capt 2 )
- Crear fotogramas ( Capt 2 )
- Insertar imágenes a nuestro escenario ( Capt 2 )
- Crear botones desde Biblioteca ( Capt 2 )
- Crear Precarga ( Capt 2 )
Si no se acuerda de cómo hacerlo o no ha leido los capítulos

anteriores, puede pulsar en el botón recordar al lado de cada
concepto.
BASE DE
TRABAJO
Nuestra base de trabajo será la siguiente:
8 capas (datos precarga, precarga, titulo, utilidades, acciones,

botones, textos 4W y fondos) y una zona de trabajo de 494 x 520
pixels.
Tenemos 5 fotogramas y el primer fotograma contiene una

precarga, la misma que en el capítulo 2.
Para cambiar el área de trabajo, seleccionamos la opción

Modificar/Documento...
Allí podremos cambiar el ancho, alto la velocidad de fotogramas y

el color de fondo de nuestra película.
Click
para ampliar
http://www.faq-mac.com/cursos/flash/Capt3/2.html (1 of 3)24/02/2007 07:41:01 a.m.

CAPAS
Las capas que utilizamos contienen lo siguiente: (Imagen 1 e

Imagen 2):
datos precarga (campos de texto con los datos cargados,

porcentaje...), precarga (movieclip con la función de precarga),
titulos (un pequeño texto que indica en qué utilidad estamos),
utilidades (elementos propios de cada utilidad), acciones
(acciones propias de cada utilidad), botones (botones verde de
avanzar y retroceder por las utilidades), textos 4W (una capa de
texto con el título del ejercicio y el nombre de la empresa ) y
fondos (imagen degradado y el logo)
Antes de comenzar a explicar las utilidades, prepararemos la base

(ya explicado en otros capítulos)
- Crear las capas

- Cambiar nombre a las capas
- Crear fotogramas (5 en total)
- Insertar elementos comunes (botones de navegación)
- Insertar precarga (del anterior ejemplo) en el fotograma 1, de las
capas de precarga.
- Insertar código de acciones de los botones
La acción de los botones de navegación será:
Avanzar (botón verde inferior derecha):
on (press)
{
if (this._currentframe == 5) {
} else {
Imagen 1 - lick para ampliar nextFrame();
}
Retroceder (botón verde inferior izquierda):
on (press)
{
if (this._currentframe == 2) {
} else {
prevFrame();
}
El código básicamente mira en qué fotograma estamos actualmente

(_currentframe)... y comprueba si estamos en el último o en el
primero... en cuyo caso no hace nada. Si no es así, irá al fotograma
siguiente (nextFrame - botón derecho) o al anterior
(prevFrame - botón izquierdo).
Imagen 2 - lick para ampliar Una vez tenemos ya la base preparada, comenzaremos a introducir
los elementos.


Ejemplo 1. Listas de elementos y Componentes
La primera utilidad es una lista de elementos que podemos seleccionar. Cada elemento de la lista tiene
un valor (nombres de periódicos) y vamos a mostrar un mensaje cuando el usuario seleccione un
elemento de la lista. Este mensaje mostrará el nombre del periódico y el valor que hemos indicado a
cada periódico.
Para ello, utilizaremos un COMPONENTE.
Los componentes son clips de película complejos ya

prediseñados, que permiten al programador realizar
acciones complejas de una forma más sencilla.
"Macromedia Flash MX incluye siete

componentes de interfaz de usuario de
Flash: CheckBox, ComboBox, ListBox,
PushButton, RadioButton, ScrollBar y
ScrollPane.
Puede utilizar estos componentes por

separado para agregar una interacción
sencilla del usuario con películas Flash,
o conjuntamente para crear una interfaz
de usuario completa para formularios o
aplicaciones Web." (Ayuda de
Macromedia)
Los componentes se encuentran en el menú Ventana/

Componentes
Para insertar un componente, hay que arrastrarlo a nuestra ventana de trabajo. En este caso, cogemos
el componente ListBox.
(click para ampliar)
El componente ListBox tiene una serie de métodos. Podemos detectar qué elemento ha sido pulsado,
ordenar la lista, conocer cuántos elementos hay en la lista, añadir un elemento ...
La información sobre estos métodos se puede encontrar en el menú Ventana/Referencia.

En nuestro ejemplo, nos interesa conocer qué elemento ha sido pulsado y qué valor tiene ese elemento.
Primero crearemos la lista... haciendo click en labels...
Introducimos la lista. Los botones de la parte superior sirven para añadir elementos (+),
borrar elementos (-), bajar un elemento y subir un elemento en la lista.
Haremos lo mismo con el campo Data, con el cual damos un valor cuantificable a la etiqueta.
Lo siguiente es asociar una función a la lista. Esto se hace a través de Change Handler. En esta
casilla escribimos la función que deseamos que se active cuándo seleccionemos un elemento. Escribimos
la función cambio_lista. Esta función la definiremos luego en la capa Acciones.
Por último, y para poder controlar el listado, necesitamos ponerle un nombre en la casilla de nombre de
Instancia (Debajo de la leyenda Componente). El nombre es: lista_periodicos
* Este nombre como otros que se irán indicando a lo largo del capítulo se pueden cambiar. Teniendo
cuidado de cambiar también las líneas de acciones que tengan asociados.
Campo de texto y función
Creamos un campo de texto dinámico, que llamamos resultado.

Cuando seleccionemos algún elemento de la lista, queremos que nos muestre un mensaje. Este mensaje
se crea en la función cambio_lista que hemos definido como controladora de la lista. En el fotograma
de la capa Acciones correspondiente, escribiremos el siguiente código:
function cambio_lista() {
resultado.text = "Ha seleccionado el periódico " add lista_periodicos.getSelectedItem().label
add ".\n" add "Ha conseguido " add lista_periodicos.getSelectedItem().data add " puntos de
regalo";
}
La función se activa cuando seleccionemos algún elemento de la lista.
Escribimos en el campo de texto resultado una frase compuesta de un texto preparado y los valores que
nos devuelva el usuario.
El texto que está entre comillas (") es un texto literal, preparado, y el resto son valores que cogemos de
la lista:
lista_periodicos.getSelectedItem().data Devuelve el nombre del periódico seleccionado
lista_periodicos.getSelectedItem().label Devuelve el valor que le damos al periódico

seleccionado
\n Añadimos un salto de línea
Si probamos nuestra película, aparecerá un mensaje mostrándonos qué periódico hemos seleccionado y
la puntuación que tiene.
:)

Ejemplo 2. Modificación de una MovieClip
El siguiente ejemplo es una movieClip con una foto dentro, que queremos distorsionar.
Pasos:
1.- Importar gráfico
2.- Convertir foto en MovieClip
3.- Poner nombre a la MovieClip para poder manipularlo. En este caso, el nombre es foto.
* Insertamos una foto dentro de una MovieClip para poder actuar sobre la foto. Una foto suelta no tiene
un nombre definido y no podemos "localizarla" ni manipularla dinámicamente. Por ello, la solución es
crear una MovieClip partiendo de la foto y dar un nombre a la MovieClip. Al modificar la MovieClip,
modificaremos la foto.
Lo siguiente es añadir botones para modificar el gráfico.

Estos botones se han importado de la Biblioteca de botones comunes, y se han duplicado
colocándolos como en la imagen.
Al lado de cada botón hemos añadido un texto estático que ilustra la acción del botón.
Las acciones que hay que añadir a los botones son:
+ alfa
on (press) {
if(foto._alpha==100)
{}
else
{
foto._alpha=foto._alpha+10;
}
}

El código es muy sencillo. Controlamos la propiedad alpha que define la transparencia

de la MovieClip. El máximo de Alpha es 100, que es lo mismo que decir totalmente
Opaco. El mínimo valor de Alpha es 0, que es lo mismo que decir totalmente
transparente. Aquí aumentamos el valor del alpha de la foto en 10 puntos. Si el alpha es
100, no hacemos nada.
- alfa
on (press) {
if(foto._alpha==0)
{}
else
{
foto._alpha=foto._alpha-10;
}
}
Aquí disminuimos el valor del alpha de la foto en 10 puntos. Si el alpha es 0, no

hacemos nada. Ya es totalmente transparente.
rotación positiva
on (press) {
foto._rotation=foto._rotation+10;
}
Aumentamos la rotación del objeto foto en 10 grados.
rotación negativa
on (press) {
foto._rotation=foto._rotation-10;
}
Reducimos la rotación del objeto foto en 10 grados.
+ alto
on (press) {
foto._height=foto._height+10;
}
Aumentamos la altura del objeto foto en 10 pixels.
- alto
on (press) {
foto._height=foto._height-10;
}
Reducimos la altura del objeto foto en 10 pixels.
+ largo
on (press) {
foto._width=foto._width+10;
}
Aumentamos la anchura del objeto foto en 10 pixels.
- largo

on (press) {
foto._width=foto._width-10;
}
Reducimos la anchura del objeto foto en 10 pixels.
Y ya está. Con estos botones podemos controlar estas propiedades de la MovieClip. Hay otras
propiedades como x, y, xscale, yscale, visible... que controlan otros aspectos de la MovieClip Cambiando
las funciones para controlar las propiedades, podremos ver cómo afectan.
La forma de modificar dinámicamente estas propiedades es similar a la explicada...
Ej. En lugar de largo, quiero cambiar la posición x
sustituimos _width por _x
foto._x=foto_x+10;
:)

Ejemplo 3. Test. Utilización de Componentes.
Este ejemplo, el tercero, nos servirá para terminar de introducir los componentes así como para
explicar el bucle CASE.
Vamos a realizar un pequeño test de tres preguntas, con tres modelos diferentes de interacción
(respuesta directa, test y selección en lista).
Lo primero es colocar los componentes en su sitio según el diseño:
La primera pregunta es un texto estático ("Cual es la capital de Navarra") y un campo de texto

dónde podamos introducir la respuesta: Campo de Texto con modo Introducción de Texto.
Este campo de texto lo llamaremos como nombre de Instancia: p1.
La segunda pregunta es un texto estático "¿Cual es el símbolo?..." Tres campos de texto

estáticos con las respuestas "H20..." y tres componentes Radio Button.
(Ya hemos explicado los componentes en la tercera página)
Arrastramos un radio Button y definimos los valores del Componente según el gráfico siguiente:
(Clic para ampliar)
Los tres radio Button tienen el mismo valor en Group Name. De esta manera los tres actuarán
como uno bloque. Al activar uno, se desactivarán los otros. En el campo Data, ponemos 0 en los
radio Button que son incorrectos y añadimos un 1 en el radio Button que es correcto.

La tercera pregunta es un componente de ComoBox.
(Ya hemos explicado los componentes en la tercera página)
Este componente funciona de una manera muy parecida a lo explicado en la tercera página, y la
definición de los valores que tiene también podemos hacerlo siguiento la anterior explicación.
Por último, añadimos un botón de componente. Este botón de componente tiene dos
propiedades. Label (el texto que aparece en el botón) y Change Handler (la función que se
activa al hacer click), en nuestro caso: evalua.
(Clic para ampliar)
Y al final del todo, añadiremos un campo de texto, de Dinámico, Multilínea. El nombre de

referencia (instancia) de este campo es Resultado2.
En este campo es dónde mostraremos mensajes según las respuestas.
La función que controla el test, se llama evalua y tiene el siguiente código en la capa Acciones:
p1.restrict = "^0-9";
function evalua()
{
var puntos = 0;
if (p1.text.toLowerCase() == "pamplona")
{
puntos = puntos+1;
}
puntos = puntos+p2.getData();
puntos = puntos+p3.getSelectedItem().data;
switch (puntos)
{
case 0 :
resultado2.text = "No has conseguido ni un punto";
break;
case 1 :
resultado2.text = "Has conseguido un punto";
break;
case 2 :
resultado2.text = "Has conseguido 2 puntos. MUY BIEN";
break;
case 3 :
resultado2.text = "No has conseguido 3 puntos. EXCELENTE";
break;
}
}
Explicación:
p1.restrict es una función que controla qué letras podemos meter en nuestro
campo de texto, en este caso, p1.
En este ejemplo, podemos insertar todas las letras menos los números. El caracter

^ indica que los caracteres que vienen después 0-9 (del 0 al 9) no se pueden
utilizar.
Lo siguiente es la funión evalua. Creamos una variable llamada puntos que tiene el
valor 0 (aumentará de valor con los aciertos).
1.- Comprobamos que la primera respuesta es correcta
if (p1.text.toLowerCase() == "pamplona")
Si el texto de p1 en minúsculas -toLowerCase()- es igual a pamplona, sumaremos

1 a la variable puntos
2.- Comprobamos que la segunda respuesta es correcta
puntos = puntos+p2.getData();
p2.getData() nos devuelve el valor del radio button pulsado, y lo sumamos a los
puntos que tenemos.
3.- Comprobamos que la tercera respuesta es correcta
puntos = puntos+p3.getSelectedItem().data;
p3.getSelectedItem().data() nos devuelve el valor del elemento seleccionado del

componente llamado p3, y lo sumamos a los puntos que tenemos.
4.- Con los puntos totales, mostramos mensajes
switch (puntos)
{
case 0 :
resultado2.text = "No has conseguido ni un punto";
break;
La sentencia switch nos permite controlar una serie de valores y dar un resultado
según el valor que sea.
En este caso, según el valor que tenga puntos, escribirá en el campo de texto
resultado2 un texto u otro. Habrá tantos case como valores posibles puede tomar
la variable puntos.
:)
y ya está.
Ahora podemos complicarlo tanto como queramos e introducir elementos más

interactivos como el explicado en el primer capítulo.
Siguiente y último...


Ejemplo 4. Control de MovieClip a través del objeto Key (tecla)
Este ejemplo enseña como mover una MovieClip a través de las teclas.
Si pulsamos la tecla derecha, el coche se moverá hacia la derecha 10 pixels. Si pulsamos la tecla
izquierda, el coche se moverá a la izquierda 10 pixels.
El Objeto Key tiene una serie de eventos y propiedades. Un evento es isDown.
Key.isDown(), actua de manera que se activa la función cuando una tecla es pulsada... la tecla
pulsada se puede comprobar poniéndola entre los paréntesis ya que todas las teclas tienen un código
de tecla.
Si escribimos
if(Key.isDown(65){}
se activará la función al pulsar la tecla con el código 65 (la tecla A) y ejecutará las órdenes que
hayamos puesto entre los corchetes.
Existen algunas teclas que no necesitan conocer el código, como RIGHT y LEFT, entre otras.
if (Key.isDown(Key.RIGHT)) {}
1.- Insertaremos un gráfico en nuestro fotograma y lo convertiremos en MovieClip. EstaMovieClip lo

llamaremos coche.
2.- En el fotograma 5 de la capa Acciones insertaremos el siguiente código.
(Copiar y pegar)
velocidad = 10;
rotacion=1;
coche.onEnterFrame = function() {
with (coche) {
if (Key.isDown(Key.RIGHT)) {
if (rotacion == 1) {
} else {
rotacion = 1;
_xscale = -_xscale;
}

_x += velocidad;
if (_x>=444) {
_x = 444;
}
}
if (Key.isDown(Key.LEFT)) {
} else {
rotacion = 2;
_xscale = -_xscale;
}
_x -= velocidad;
if (_x<=50) {
_x = 50;
}
}
}
};
(Modo
visual)
velocidad y rotacion son dos variables que definimos para utilizarlas más adelante.
coche.onEnterFrame = function() - Con esta línea ordenamos que se ejecute continuamente la

función mientras exista el objeto coche.
with (coche) { - Indicamos que todo lo que se haga a continuación se referirá a la movieclip coche,
de esta forma no hay que poner toda la ruta para cambiar el valor de _x o de _y, ya que se
sobreentiende que se refiere a la movieclip que está definida en with.
Parte 1
if (Key.isDown(Key.RIGHT)) {
} else {
rotacion = 1;

_xscale = -_xscale;
}
_x += velocidad;
if (_x>=444) {
_x = 444;
}
}
Si la tecla pulsada es la flecha de desplazamiento derecha (Key.RIGHT), se activará lo que hay

debajo, en caso contrario no hará nada.
Si ha pulsado la tecla derecha y además, el valor de rotacion es distinto de 1, significará que el coche
apuntaba hacia otro lado (1 es derecha, 2 es izquierda). Volteamos horizontalmente el coche,
cambiadno el valor de _xscale po su equivalente negativo _xscale = -_xscale; Si ya apuntaba al
lado correcto, no hará nada.
Además de cambiar la orientación (si fuese necesario), cambiamos el valor _x (posición en el eje x
del coche). Comprobamos que no pase de 444 pixels para que no desaparezca de la pantalla. _x +=
velocidad;, es lo mismo que decir x=x+10; (10 es velocidad)
Parte 2
if (Key.isDown(Key.LEFT)) {
} else {
rotacion = 2;
_xscale = -_xscale;
}
_x -= velocidad;
if (_x<=50) {
_x = 50;
}
}
Lo mismo pero al revés. Si pulsamos la tecla izquierda, haremos que el coche se mueva hacia la
izquierda, sin pasar del límite 50 para evitar que desaparezca.
Lo mismo que hemos controlado la tecla izquierda y derecha, podríamos controlar

otras teclas y cambiar otras propiedades de coche, como la posición en el eje y o el
tamaño...

Ejemplos Flash - Puzzle (Arrastrar y Soltar)

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejemplos Flash - Puzzle (Arrastrar y Soltar)

Cargado por

Copyright:

Formatos disponibles

Ejemplos Flash - Puzzle (Arrastrar y Soltar)

Aquellos que han seguido los dos anteriores capítulos de Flash, y

El objeto Array lo explicaremos en el siguiente capítulos. En éste, nos

Los nuevos elementos son:

Para finalizar la introducción, recuerdo lo que ya dije en el primer

1) Utilizad la ayuda de Flash. Es excelente. Os explicará cómo

2) Probad con pequeñas animaciones (objetos que cambian,

3) Paciencia. Mucha paciencia. Aprender a utilizar un programa con

Para seguir el tutorial, al final del artículo encontrareis un enlace a

http://www.faq-mac.com/cursos/flash/Capt3/ (1 of 2)24/02/2007 07:37:50 a.m.

Tak & Faq-Mac, © Miguel Angel Muras (Tak)

http://www.faq-mac.com/cursos/flash/Capt3/ (2 of 2)24/02/2007 07:37:50 a.m.

Para realizar este ejercicio vamos a utilizar una serie de

Los conceptos ya explicados son:

- Crear símbolos partiendo de elementos ( Capt 1 )

- Crear y cambiar el nombre a capas ( Capt 2 )

- Crear fotogramas ( Capt 2 )

- Insertar imágenes a nuestro escenario ( Capt 2 )

- Crear botones desde Biblioteca ( Capt 2 )

- Crear Precarga ( Capt 2 )

Si no se acuerda de cómo hacerlo o no ha leido los capítulos

Nuestra base de trabajo será la siguiente:

8 capas (datos precarga, precarga, titulo, utilidades, acciones,

Tenemos 5 fotogramas y el primer fotograma contiene una

Para cambiar el área de trabajo, seleccionamos la opción

Allí podremos cambiar el ancho, alto la velocidad de fotogramas y

http://www.faq-mac.com/cursos/flash/Capt3/2.html (1 of 3)24/02/2007 07:41:01 a.m.

Las capas que utilizamos contienen lo siguiente: (Imagen 1 e

datos precarga (campos de texto con los datos cargados,

Antes de comenzar a explicar las utilidades, prepararemos la base

- Crear las capas

La acción de los botones de navegación será:

Avanzar (botón verde inferior derecha):

Retroceder (botón verde inferior izquierda):

El código básicamente mira en qué fotograma estamos actualmente

http://www.faq-mac.com/cursos/flash/Capt3/2.html (2 of 3)24/02/2007 07:41:01 a.m.

Tak & Faq-Mac, © Miguel Angel Muras (Tak)

http://www.faq-mac.com/cursos/flash/Capt3/2.html (3 of 3)24/02/2007 07:41:01 a.m.

Ejemplo 1. Listas de elementos y Componentes

Para ello, utilizaremos un COMPONENTE.

Los componentes son clips de película complejos ya

"Macromedia Flash MX incluye siete

Puede utilizar estos componentes por

Los componentes se encuentran en el menú Ventana/

(click para ampliar)

http://www.faq-mac.com/cursos/flash/Capt3/3.html (1 of 3)24/02/2007 07:41:24 a.m.

(click para ampliar)

(click para ampliar)

Campo de texto y función

Creamos un campo de texto dinámico, que llamamos resultado.

http://www.faq-mac.com/cursos/flash/Capt3/3.html (2 of 3)24/02/2007 07:41:24 a.m.

La función se activa cuando seleccionemos algún elemento de la lista.

lista_periodicos.getSelectedItem().data Devuelve el nombre del periódico seleccionado

lista_periodicos.getSelectedItem().label Devuelve el valor que le damos al periódico

\n Añadimos un salto de línea

Tak & Faq-Mac, © Miguel Angel Muras (Tak)

http://www.faq-mac.com/cursos/flash/Capt3/3.html (3 of 3)24/02/2007 07:41:24 a.m.

Ejemplo 2. Modificación de una MovieClip

1.- Importar gráfico

2.- Convertir foto en MovieClip

Lo siguiente es añadir botones para modificar el gráfico.

Las acciones que hay que añadir a los botones son:

http://www.faq-mac.com/cursos/flash/Capt3/4.html (1 of 3)24/02/2007 07:41:45 a.m.

El código es muy sencillo. Controlamos la propiedad alpha que define la transparencia