Flash + ActionScript para interactividad (1) Imprimer
SOFTWARE - Programación
Lundi, 16 Avril 2007 10:56
There are no translations available.

Con esta actividad comenzamos un curso sobre Flash especialmente dirigido a la creación de pequeñas actividades que permitan la interactuación del alumno.

Flash + ActionScript para interactividad (1)

Introducción

Flash es una herramienta que permite la creación de elementos animados dirigidos especialmente a la red por conseguir altos rendimientos con un peso bastante reducido.

Su uso se ha generalizado en el mundo del diseño. Hoy nos podemos encontrar con elementos animados dentro de las páginas web, o sitios web construidos enteramente con Flash, que son de una extraordinaria calidad.

Pero Flash también permite la comunicación entre el diseño establecido por el creador y el visitante. Lo que tiene gran importancia para su explotación en el mundo de la enseñanza.

Los manuales, los cursos, no dan suficiente peso a las posibilidades que tiene Flash en este terreno. Es aquí donde se sitúa este curso que comenzamos ahora. Suponemos que el lector tiene ya unos ciertos conocimientos de la herramienta. De todas formas, haremos hincapié en los aspectos del diseño en los que haya que hacerlo, sin olvidar que nuestro objetivo principal es divulgar las posibilidades de la interacción. Esto debe hacerse, fundamentalmente, con el lenguaje de programación ActionScript que lleva asociado la herramienta. Se explicará con detalle el código a incrustar para conseguir los objetivos que nos planteemos.

Para aquellos lectores que no conozcan nada la herramienta, les aconsejamos la realización del curso sobre Flash para la enseñanza que organiza el CNICE y que es francamente bueno, así como la consulta del tutorial de este mismo autor Flash paso a paso que se encuentra en esta URL: http://flashpasoapaso.blogspot.com/

Una especial multiplicación

Vamos a comenzar con esta actividad publicada en el blog de aula El Tinglado, en este documento y, dentro de él, en la página 2. Como se observa, nos encontramos inicialmente con una animación que explica el proceso.

Nuestro objetivo es el segundo archivo. La multiplicación planteada para ser resuelta por el alumno.

1.- Creamos el documento intentando poner cada elemento en una capa. De esta forma independizamos los componentes de la animación lo que nos facilita las correcciones.

Es interesante también nombrar cada capa para saber qué contenido se ha colocado en ella.

Imagen 01

Analizamos las capas:

Imagen 02

Hemos colocado cuatro capas:

La primera, denominada estructura, es la rejilla en la que se colocan las cifras:

Imagen =3

La segunda, denominada planteamiento, contiene el planteamiento de la operación:

Imagen 04

La tercera introducción de cifras contiene las cajas de texto en las que el visitante deberá introducir las cifras:

Imagen 05

La cuarta botones está destinada a alojar a los dos botones de nuestra animación. También hemos colocado la caja de texto para alojar el mensaje de éxito o de fallo:

Imagen 06

2.- La primera capa no tiene demasiado misterio. Hemos dibujado utilizando la herramienta Línea Imagen 09 en un documento (500 x 500) en el que se visualiza la cuadrícula (20 x 20) de fondo, para ajustar las líneas dibujadas. Ver >Cuadrícula > Editar cuadrícula:

Imagen10

Y en el menú Mostrar cuadrícula:

Imagen 07

Menú Ajuste:

Imagen 08

3.- La segunda capa se introduce con la herramienta Texto Imagen 12 en su opción Texto estático Imagen 13

Imagen 11

4.- La tercera capa se introduce con Texto Imagen 12 pero en su opción Introducción de texto Imagen 14. Posteriormenete tenemos que dedicar un rato a denominar cada una de las cajas de texto con un nombre que nos ayude a recordar... Por ejemplo la caja superior la he denominado final Imagen 17 por ser la que aloje al resultado final de la operación.

Imagen 15

Observa también que las cajitas de cada una de las cifras no tienen borde (excepto de la de las "llevadas") y sí la del resultado final. Esto tiene su justificación pues las cajitas de cada cifra están dentro de la celda de la tabla grande con lo que ya se visualizan los límites... Esto se hace activando Imagen 18, o desactivando Imagen 19, el botón Mostrar borde alrededor del texto del panel Inspector de Propiedades.

Imagen 16

Observa cómo la caja de texto seleccionada en la imagen anterior tiene como nombre de la variable f1. Los nombres pueden ser los que quieras pero son muy importantes para hacer la programación de las acciones de los botones...

5.- En la última capa hemos puesto los botones para las acciones y la caja de texto para el mensajes de éxito o error. Los botones han sido de diseño propio pero se podrían haber puesto los prediseñados que el propio programa ofrece. La caja de texto se introduce con la herramienta Texto Imagen 12 pero en su opción Texto dinámico Imagen 21 Observa que le hemos puesto texto como nombre de variable: Imagen 22

Imagen 20

6.- Acciones del primer botón.

Empezamos por el de Comprobar: Imagen 24 Lo seleccionamos pinchando sobre él. En la imagen se habrá colocado una especie de diana centrada y, en el panel del Inspector de Propiedades, tendremos las del botón:

Imagen 23

Ahora pinchamos en el panel Acciones: Imagen 25 y escribimos lo siguiente:

Imagen 26

Pincha sobre la imagen para ver en detalle lo que se ha escrito. De todas formas, es conveniente pinchar en el icono Formato automático, para que se coloque el código de la forma más estandarizada y, de paso, nos avisa si tenemos algún error de escritura. Por ejemplo:

Imagen 28

La explicación del código vendría a ser:

código
explicación
on (release) { Cuando liberemos el botón
if (f1 == 3 & f2 == 7 &... ){ Si f1 coincide con 3 y f2 coincide con 7...
texto = "Muy bien"; Será el mensaje de éxito que saldrá en la caja de texto que hemos llamado texto
} else { Si no es así... (con que uno no sea ya será suficiente, claro)
texto = "Repásalo"; Será el mensaje de error que saldrá en la caja de texto texto
} Se cierra el else
} Se cierra el on()

7.- Acciones del segundo botón.

Hacemos lo mismo con el botón Borrar Imagen 30. Lo seleccionamos:

Imagen 29

Y desplegamos el panel de Acciones: Imagen 25. Esto es lo que tenemos que escribir:

Imagen 31

La explicación del código vendría a ser:

código
explicación
on (release) { Cuando liberemos el botón
f1 = ""; f1 contendrá... nada... pues entre las comillas no hay nada
f2 = ""; Lo mismo f2
... ...
texto = ""; texto (el mensaje de éxito o error) se borrará
final = ""; También se borrará final, el resultado de la multiplicación
} Se cierra el on()