>>
Lección 15 (parte b)


Animación avanzada (mueveTextos).


El segundo ejemplo de animación avanzada es una especie de generador de anuncios con fondos variables y letreros que se mueven rebotando en las paredes. El alumno aprenderá otro detalle del método de la doble imagen estudiando este ejemplo.

 

Este applet tiene muchos parémetros a través de los cuales se puede configurar para aparecer de muchas maneras diferentes y con diferentes letreros e imágenes. Ésta es la llamada con los parámetros que producen el resultado de arriba:

<applet code="ejem15.mueveTextos.class" codebase="../"
        width="300" height="100">
<param name="BGCOLOR" value="FF3399">
<param name="LOGO" value="imagenes/mjap.gif">
<param name="LOGOx" value="0">
<param name="LOGOy" value="0">
<param name="ORILLA" value="3">
<param name="Ffont" value="Helvetica">
<param name="FType" value="BOLD">
<param name="FSize" value="12">
<param name="FN" value="Diseñe">
<param name="FW" value="su propio">
<param name="FC" value="ANUNCIO">
<param name="FE" value="y úselo">
<param name="FS" value="en sus páginas Web">
<param name="FColor" value="white">
<param name="Mfont" value="TimesRoman">
<param name="MType" value="BOLD+ITALIC">
<param name="MSize" value="18">
<param name="MColor" value="orange">
<param name="M1" value="Curso">
<param name="M1Color" value="red">
<param name="M2" value="Java">
<param name="M2Color" value="cyan">
<param name="M3" value="Mentor">
<param name="M3Color" value="orange">
</applet>

Hay parámetros para definir el color del fondo (BGCOLOR), la imagen o logotipo (LOGO) y sus coordenadas (LOGOx y LOGOy), el grueso de la orilla (ORILLA), los textos fijos(FN, FW, FC, FE, FS), los textos móviles (M1, M2 y M3) y sus tipos de letra y sus colores (el alumno podrá adivinar fácilmente cuales son estos parámetros). Para los valores de los parámetros que representan colores se pueden usar sus nombre en inglés o en español o bien una expresión hexadecimal RRVVAA indicando la cantidad de rojo, verde y azul respectivamente.

Una vez identificados los significados de los parámetros el alumno deberá estudiar el código del applet:

Si su navegador reconociese la etiqueta de applet, aquí vería un applet

Primero buscará en el método init() la lectura de cada parámetro usando los métodos de la clase staticLib: string, integercolor y fontType que se utilizan a la vez para definir un valor por defecto y para convertir el parámetro al valor que le corresponde. El código de staticLib se presenta al final de la página.

Luego verá los métodos start() y stop() que se encargan de arrancar y parar el hilo del applet respectivamente. Luego están paint(Graphics g) y update(Graphics g) que hacen lo mismo que en otros programas de animación ya estudiados: el primero utiliza la imagen que es copia de lo que aparece en pantalla para refrescar el recuadro del applet, y el segundo simplemente sobreescribe al método original de manera que no se borre el recuadro antes de llamar a paint. El método paint presenta un mensaje de espera mientras imagen no está definida. Esto se hace porque su preparación puede tardar unos segundos.

Hasta aquí el applet movetext no ofrece novedades. Lo nuevo está en el método run() donde utiliza el método de "doble imagen" simplificado pero con la novedad de que la imagen de fondo es variable. Al principio hay una llamada al método fondosCirculares.crear() que se encarga de crear artificialmente las imágenes de fondo antes de comenzar la animación. La clase fondosCirculares sólo tiene el método crear() pues su función es exclusivamente la de crear los fondos que aparentan círculos que crecen continuamente. Se trata de una clase complicada y que no se pide al alumno entender completamente. Su código aparece al final de la sección para los alumnos que se interesen en él. Lo importante es saber que  hace esa clase es crear los fondos pixel a pixel. En otras aplicaciones este paso se podría sustituir por imágenes leidas del disco.

A continuación se escriben los textos fijos en todas las imágenes de fondo para no tener que hacerlo durante la animación y tratar así de ahorrar tiempo de procesamiento en el ciclo infinito. El alumno debe observar que todo esto podría hacerse en  start() pero preferimos hacerlo en run() porque tarda un poco y así el método paint ya actúa desde start() y coloca un mensaje de espera en la pantalla.

La esencia del ejemplo se encuentra en el ciclo infinito del método run(). Allí lo que se hace es, comenzando con k=0:

El alumno debe distinguir estos pasos claramente en el texto del método, meditar sobre la generalidad del método empleado y concebir otras aplicaciones.

La razón por la que la espera se realiza después de dibujar fondo[k] sobre imagen es que en IExplorer y Netscape (pero no en el appletviewer) este proceso no funciona sincrónicamente, es decir, la función regresa sin haber terminado el dibujo y, si no se hace una espera allí, los textos se dibujan al mismo tiempo que fondo[k], con lo cual desaparecen algunas partes de ellos.

Al final del archivo  mueveTextos.java se encuentran los métodos dibujarTextosFijos(Graphics g), dibujarTextosMóviles(Graphics g), moverTextosMóviles(int w,int h) y prepararVariables(), que no presentan ninguna novedad pero son necesarios para el funcionamiento del ejemplo.

Finalmente presentamos el texto de las clases staticLib y fondosCirculares. La primera puede ser una clase útil en muchas otras aplicaciones y al alumno le conviene estudiarla y tomarla en cuenta para usarla en sus propias aplicaciones. La segunda es algo complicada y será de interés sólo para los alumnos que deseen aprender a crear imágenes artificiales partiendo de matrices de bytes.

Si su navegador reconociese la etiqueta de applet, aquí vería un applet

Si su navegador reconociese la etiqueta de applet, aquí vería un applet


Índice

Ejercicios de la Lección 15.


José Luis Abreu y Marta Oliveró