Flash + ActionScript para interactividad (3) Imprimeix
SOFTWARE - Programación
dimecres, 18 de juliol de 2007 14:16
There are no translations available.

Tercera entrega de este curso sobre Flash y ActionScript. Validación de múltiples matrices de datos.

Flash + ActionScript para interactividad (3)

Cuadrado mágico de 3 x 3

En esta ocasión, la novedad fundamental respecto a las dos primeras actividades, consiste en que el botón de validación no va a evaluar una única tira de datos. Va a evaluar las ocho posibilidades diferentes que se corresponden con las soluciones de un cuadrado mágico de 3 filas y 3 columnas.

Veamos la animación. Por supuesto, antes de seguir, conviene familiarizarse con ella y hacerla en su totalidad para observar el comportamiento de los botones y de toda la aplicación. Se trata de conseguir las ocho soluciones diferentes. Primero se busca una cualquiera en la parte principal. Comprobada la solución, se traslada a los cuadros inferiores. Estos cuadros pueden orientarnos también en el encuentro del resto de soluciones pues están ordenados por giros y simetrías.

 

En El Tinglado se ha publicado una variable de esta actividad consistente en cambiar las nueve cifras propuestas por los nueve números enteros que van desde el -4 al 4.

Lógicamente, los cuadrados mágicos, pueden diseñarse con sucesiones aritméticas diferentes...

Y, en este otro documento, hay explicaciones sobre el diseño y explotación de estos cuadrados mágicos de 3 x 3 con animaciones en flash para las búsquedas de soluciones con giros y simetrías.

1.- Independización de los elementos de la animación por capas.

En esta actividad, se han colocado los diferentes elementos, en siete capas distintas. Es muy importante hacerlo así. Permite el diseño de un objeto, asegurando lo trabajado en una capa anterior.

Capas de la animación

2.- Primera capa. La rejilla principal del cuadrado mágico.

Capa 1

Es una tabla de 3 x 3 dibujada sobre un escenario en el que se ha hecho visible la cuadrícula. Opción Ver > Cuadrícula > Mostrar cuadrícula. La cuadrícula se ha diseñado a 10 x 10 píxeles.

También se ha optado por ajustar Ver > Ajuste > Ajustar a cuadrícula para conseguir que los segmentos del dibujo coincidan con los vértices de la cuadrícula.

3.- Segunda capa. Cajas de texto principales.

Capa 2

Se han ajustado para que se coloquen dentro de cada una de las celdas de la tabla dibujada en la capa anterior. Es texto del tipo Introducción de texto y se les ha dado un nombre de variable: a1, a2, a3 para la primera fila, b1, b2, b3 para la fila intermedia y c1, c2, c3 para la fila inferior.

Caja de introducción de texto con nombre de variable

En esta misma capa se ha dibujado una caja de texto del tipo Texto dinámico y, como nombre de variable, se le ha puesto mensaje.

Caja de texto dinámico: mensaje

4.- Tercera capa. Botones.

Capa 3

En este caso se ha elegido un botón de la biblioteca común de botones. Ventana > Bibliotecas comunes > Botones. Elegimos el botón y lo arrastramos a nuestra biblioteca. Una vez en nuestra biblioteca lo duplicamos dos veces para crear los tres botones que vamos a necesitar y para poderlos editar cambiando el texto que viene por defecto por el texto que nos interesa. A saber: comprobar, borrar y pista.

Edición de un botón

5.- Cuarta capa. Rejilla soluciones.

Capa 4

Hacemos las tablas para colocar las ocho soluciones que nos van a ir apareciendo.

6.- Quinta capa. Cajas de texto de las soluciones.

Capa 5

Del tipo Introducción de texto. En este caso no hay que darles ningún nombre puesto que no vamos a asociar ninguna acción con ellas.

7.- Dos últimas capas. Caja para los números propuestos y los propios números.

Capas 6 y 7

No tienen más misterio estas dos últimas capas. El tipo de texto, en este caso, es Texto estático.

Cajas de texto estático

8.- Código del botón Comprobar.

Es lo más difícil de la actividad.

Tenemos que hacer que evalúe cualquiera de las ocho posibilidades que tenemos de soluciones. Para ello, primero tendremos que escribirlas y asociar el nombre de la variable de la caja de Introducción de texto con el valor que se debe introducir.

Escribimos aquí las soluciones tal como se han diseñado en la aplicación:

Soluciones

Pues bien, tendremos que coger el botón comprobar, seleccionarlo y darle a Acciones para escribir esto:

Código botón Comprobar
Puedes pinchar sobre la imagen para verla un poco más grande.

código
explicación
on (release) { Cuando liberemos el botón...
if(a1==4 && a2==3 &&...){ Si ocurre que en la casilla a1 el visitante introduce el 4 y en la casilla a2 el 3 y... hasta la casilla c3 que es 6.
mensaje="Fenomenal. Solución 1"; Será el mensaje de éxito que aparecerá en el cuadro de texto dinámico mensaje.
}else if(a1==2 && a2==9 &&..){ Son los datos de la segunda solución... hasta el c3 que es 8.
mensaje="Fenomenal. Solución 2"; Será el mensaje de éxito que aparecerá en el cuadro de texto dinámico mensaje.
... Continuamos con las otras seis soluciones
}else{ En caso de que no sea ninguna de estas tiras ordenadas de números...
mensaje="Hay algún error"; Será el mensaje de error que aparecerá en el cuadro de texto dinámico mensaje.
} Se cierra el else.
} Se cierra el on().

9.- Código del botón Borrar.

Este botón ya lo hemos visto en anteriores ocasiones. Se trata, simpemente de este código:

Código del botón Borrar

código
explicación
on (release) { Cuando liberemos el botón...
a1 = ""; El contenido que se haya introducido en a1 se borrará.
a2 = ""; Lo mismo en la caja de texto a2.
... ...
mensaje = ""; Igualmente en la caja del mensaje de éxito o error.
} Se cierra el on().

10.- Código del botón Pista.

Se trata de introducir la variable que es fija en las ocho soluciones. Es la posición del centro. En este caso ocupada por el número central en la progresión aritmética del 1 al 9, es decir, el 5.

Código del botón Pista

código
explicación
on (release) { Cuando liberemos el botón...
b2 = 5; En la caja b2 se colocará el 5.
} Se cierra el on().