Grupo de Apoyo a la Teleenseñanza

Desde el Grupo de Apoyo a la Tele-Enseñanza se ha creado un pequeño ejemplo que muestra las posibilidades de Flash para crear contenidos docentes dinámicos.

Describiremos brevemente los pasos para realizar estos ejemplos. De manera que siguiendo éstos pasos usted pueda crear contenidos en Flash rápidamente. Puede bajarse también los ficheros fuente para Macromedia Flash MX del ejemplo1 y ejemplo2.

Creando y usando Capas

El movimiento de los símbolos de Flash por el lienzo están asociados a una capa y no a un símbolo como se podría creer en un principio. Si queremos que dos simbolos se tengan movimientos diferentes deberemos usar capas para separarlos. También se usan las capas para mantener ordenados los contenidos dentro del lienzo. Podemos imaginarnos las capas como folios transparentes que se superponen uno encima del otro, si los superponemos todos tenemos la imagen resultante de sumar las imágenes de cada uno de ellos por separado.

A la izquierda de la línea de tiempo podemos ver algunas de las capas creadas para nuestro ejemplo. Las capas superiores aparecerán por encima de las capas interiores y sus gráficos estarás superpuestos. El símbolo del candado en cada capa indican que ahora mismo se encuentra bloqueadas apra evitar modificarlas por error. Los puntos que aparecen en la columna con el símbolo de un ojo indican si esas capas son visibles o no (a la hora de editarlas), podemos pulsar sobre el punto de una capa para ocultarla y así trabajar más cómodamente con el resto. A la hora de reproducir la animación todas las capas serán visibles.

Animación preliminar

En el fichero fuente que se ha bajado, se ha creado una sencilla animación preliminar a modo de ejemplo. Para cada simbolo en movimiento creamos una capa. Para dar la sensación de que las imágenes van apareciendo una tras otra lo que debemos hacer es que los símbolos de algunas capas empiezen a aparecer a partir de un cierto fotograma.

Como se muestra en la imágen, algunas capas sólo tienen contenido en ciertos momentos en la línea de tiempo, lo que se hace es crear un fotograma clave donde se quiera que vaya a aparecer una imágen y si quiere que aparezca la imágen desde un margen del lienzo, deberá colocar el símbolo fuera del lienzo en la posición inicial, y posteriormente dentro del lienzo en su posición final en otro fotograma clave, tal y como se explicó anteriormente.

Si reproduce el archivo Flash verá como va avanzando por la línea de tiempo y mostrando todos los movimientos y transiciones.

Creando las zonas de las regiones

Tanto en el ejemplo1 como en ejemplo2 aparecen un mapa de España, esto es símplemente un gráfico bajado de Internet que se ha importado a Flash y se ha convertido en símbolo para poder moverlo por la pantalla. El mapa de España y su movimiento conforman una capa.

Luego, se ha superpuesto otra capa encima de ésta para posicionar zonas de selección (ejemplo1) o zonas donde se ilumina la región (ejemplo2), el proceso para por dibujar a mano alzada el contorno de la región, en una capa superior a la del mapa (con la herramienta de lápiz, podemos hacer zoom en la zona para marcarla con más precisión), una vez tenemos dibujado el contorno usamos la herramienta de relleno (cubo de pintura) para colorear todo el interior. Posteriormente seleccionamos las líneas de contorno con la herramienta de selección y las borramos (tecla suprimir), ya que sólamente nos interesa la parte interior.

Seleccionamos la figura creada, que tendrá la misma forma que la región sobre la que está, y la convertimos en símbolo (podemos pulsar con el botón derecho sobre la figura y en el menú que aparece en Convertir en símbolo como atajo al método anteriormente descrito). Lo mejor es que ahora borremos el símbolo (tecla suprimir) para tener el lienzo de trabajo despejado para seguir dibujando el resto, no tenemos que preocuparnos ya que al crear el símbolo, se crea una referencia en la biblioteca de Flash pudiendo insertar la figura a partir de ahora cuando lo deseemos simplemente con arrastrarla desde la biblioteca hasta el lienzo.

A partir de éste punto la manera de trabajar con los simbolos será distinta para el ejemplo1 y el ejemplo2.

Ejemplo1 y regiones que funcionan como botones ejecutando acciones.

Usaremos los símbolos creados para crear a su vez botones que tengan las formas de cada región dibujada. Para eso creamos directamente los botones mediante el menú Insertar-> Nuevo Símbolo y elegiremos la opción de símbolo botón.

Como vemos en la imágen, al crear un símbolo botón se genera una línea de tiempo algo especial, ya que un botón tiene 4 estados en Flash, en reposo, sobre (cuando el cursor del ratón está sobre él), presionado y región activa (la zona del botón a la que el ratón responde como si estubiera sobre el botón). Al principio se encuentran los fotogramas vacíos, deberemos crear los fotogramas clave para cada uno de los estados (tecla F6). Para realizarlo de forma rápida lo que haremos es:

De ésta manera el botón se ilumina cuando pulsamos o pasamos sobre él con el ratón.

Haga click sobre la imagen para ampliarla

Una vez hemos colo cado todos los botones sobre la capa de botonos, es el turno del texto que tiene que aparecer cuando se pulsa sobre alguna región del mapa (un botón).

Para hacerlo más interesante, usamos un pequeño degradado del texto para que aparezca poco a poco (como hemos comentado antes ese efecto se lograba mediante una transición desde un nivel de transparencia 0% a uno 100% o algo inferior, dando la sensación de que aparece poco a poco).

Como hemos de generar el efecto de transición, deberemos de introducir el texto en otra capa, y en la línea de tiempo, ir generando las transiciones de cada texto. Crearemos una capa llamada "nombres" donde se irán poniendo sobre la línea de tiempo las distintas transiciones.

Como ve en la figura aparece un pequeño símbolo (una a) dentro del fotograma clave final de cada transición. Esto indica que este fotograma lleva una acción incluida.

Programación Básica en Flash (las Acciones)

Flash permite incluir código ejecutable dentro de las presentaciones o animaciones para dotarlo de más posibilidades, nosotros sólamente usaremos las opciones básicas siempre desde el modo *guiado*.

Necesitaremos las acciones dentro de los fotogramas para parar la película al final de cada transición. La idea es que al pulsar sobre un botón vayamos a un fotograma de la película y empezemos a reproducir el efecto del texto apropiado, y luego se detenga para que no desaparezca a los segundos y continue con el siguiente texto. Para esto los fotogramas clave finales llevarán un stop en la película. Además los botones deberan ejecutar las acciones de ir a un fotograma y reproducirlo.

Para introducir las paradas en los fotogramas clave finales, debemos pinchar sobre el fotograma en cuestión y desplegar el panel de Acciones que se encuentra justo encima del panel de Propiedades del objeto en el entorno Flash. Desplegamos las acciones, y dentro del conjunto Control de película pulsamos con doble click sobre stop de ésta manera se agregará la acción a este fotograma, podremos comprobarlo porque aparece el símbolo de la (a) en el fotograma. Deberemos de repetir el proceso para el resto de transiciones, además debemos ponerlo al comienzo de la elección para pulsar los botones ya que la película debe de quedarse parada al inicio para esperar la pulsación de algún botón por parte del usuario.

Click sobre la imagen para ampliarla

Una vez tenemos todas las acciones definidas nos queda definir las acciones para los botones. Lo único que haremos será incluir acciones en éstos, pinchamos sobre un botón de alguna provincia. Desplegamos el menú de acciones y en Control de película, pulsamos doble click sobre goto se nos pedirá a qué fotograma queremos que vaya, deberemos especificar el número de fotograma en que se inicia el efecto de aparecer el nombre que corresponde a ese botón de provincia.

Click sobre la imagen para ampliarla

Una vez hemos definido todas las acciones tenemos nuestro ejemplo completo para ejecutarlo, podemos probarlo mediante el menú Control -> Probar película o si estamos ya contentos con el resultado ir al menú Archivo -> Publicar que generará nuestro fichero en Flash y una página web desde la que se puede ver la presentación desde cualquier navegador.

Ejemplo2, con los nombres como botones

En el segundo ejemplo simplemente los botones ahora son el texto que se encuentra a la derecha. Hemos creado los botones con el procedimiento descrito anteriormente mediante Insertar -> Nuevo Símbolo y hemos introducido texto en el botón en vez de ser una forma, debemos intentar crear un pequeño rectángulo dentro de la zona activa del botón ya que de otra forma la zona activa del botón sería las letras pero no los espacios entre ellas por lo que sería más difícil pulsar en el mismo.

Ahora las provincias serán los símbolos gráficos que creamos al inicio con la forma de cada provincia estarán siempre con nivel de transparencia a 0% y aparecerán cuando pulsemos sobre el nombre moviendonos sobre la película con las opciones de goto y stop anteriormente descritas.