Ejemplos de Animaciones FlAniS
(Ver conversión de AniS a FlAniS para el caso general)
Ejemplo 1. Animación con botón de movimiento/parada (start/stop).
El código del applet es:
<OBJECT type="application/x-shockwave-flash" data="flanis.swf"
width="900" height="600" id="FlAniS">
<PARAM NAME="movie" VALUE="flanis.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="menu" value="false">
<PARAM NAME="FlashVars" value="configFilename=ejemplo1.cfg">
</OBJECT>
El fichero de configuración, ejemplo1.cfg, es (obsérvese que se le ha añadido el "tooltip" correspondiente al control startstop):
controls=startstop
controls_tooltip=Pulsa para parar/comenzar la animación
file_of_filenames = VIS.txt
Siendo el fichero VIS.txt:
VIS1.jpg
VIS2.jpg
VIS3.jpg
VIS4.jpg
Ejemplo 1b. Animación con botón de movimiento/parada (start/stop) (Versión alternativa).
Podemos conseguir lo mismo incluyendo algunos o todos los parámetros en las "FlashVars", separados por "&". Si no incluimos el "configFilename" hay que incluir todos los parámetros. Los nombres de ficheros también se pueden incluir, utilizando la forma "filenames=file1,file2...". De este modo podemos tener un único fichero HTML y no es necesario tener aparte un fichero de configuración ni uno con los nombres de las imágenes.
<OBJECT type="application/x-shockwave-flash" data="flanis.swf"
width="900" height="600" id="FlAniS">
<PARAM NAME="movie" VALUE="flanis.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="menu" value="false">
<PARAM NAME="FlashVars" value="controls=startstop&controls_tooltip=Pulsa
para parar/animar&filenames=VIS1.jpg,VIS2.jpg,VIS3.jpg,VIS4.jpg">
</OBJECT>
Ejemplo 2. Animación con desvanecimiento (fader).
El código es similar en todo al anterior. Sólo cambia el tamaño de imagen y el fichero de configuración, ejemplo2.cfg, que es:
controls=fader, fadertoggle
controls_tooltip=Mueve el cursor para que se produzca la transición o desvanecimiento
entre imágenes, Pasa a la siguiente imagen
file_of_filenames = Temperaturas.txt
Siendo el fichero Temperaturas.txt:
ZZP000T2M.1.png
ZZP001T2M.1.png
ZZP002T2M.1.png
ZZP003T2M.1.png
ZZP004T2M.1.png
............................
Ejemplo 3 : Animación con botón de movimiento/parada (start/stop), ampliación (zoom) y mostrar imagen (show)
El control show sólo puede hacerse con JavaScript, por lo que hay que insertar en la cabecera del HTML (entre las etiquetas <HEAD> y </HEAD>) la función flanis_show, con el siguiente código:
<script language="javascript" type="text/javascript">
//---------------------------------------------
function flanis_show(imageURL) {
var windowName = 'newWindow';
var windowConfig = 'width=750,height=500,location=yes,menubar=yes,resizable=yes,scrollbars=yes,toolbar=no';
window.open(imageURL, windowName, windowConfig);
}
</script>
El fichero de configuración ejemplo3.cfg es:
controls=startstop,zoom, show
controls_tooltip=Pulsa para parar/animar, Coloca el puntero y haz clic para
aumentar, Pincha para mostrar (parar la imagen antes)
file_of_filenames = VIS.txt
Y el fichero VIS.txt es el mismo que el del ejemplo 1.
Ejemplo 4: Animación con múltiples controles, cada uno con su "tooltip"
Ejemplo 5: Animación de mapas de temperaturas con diversos controles: FlAniS vs AniS
Ejemplo 6: Animación con imágenes y gráficos superpuestos, realces y posibilidad de imprimir
En este caso el fichero de configuración es:
backcolor=0xdddddd
forecolor= =0xff0000
controls=startstop, speed, firstlast, step, print, zoom, enhance,overlay
enhace_filename=realce.tab
bottom_controls=toggle
controls_tooltip=Pulsa para parar/animar, Cambia la velocidad, Primera/Ultima
imagen, Adelante/Atrás, Pulsa para imprimir, Pulsa para ampliar, Elige
realce
bottom_controls_tooltip=Haz clic para eliminar/restaurar y Mayus+clic para mostrar
file_of_filenames = SYN.txt
transparency=0x000000
overlay_labels= Geopotencial y Temperatura en 500 HPa, Presión en SFC
y Temperatura en 850 HPa
overlay_labels_color=0xff0000, 0x0000ff
overlay_transparent_amount= 100, 100
(Obsérvese que se usa un realce diferente del que hay por defecto mediante el uso de enhance_filename).
Y el fichero SYN.txt, que incluye las superposiciones:
SYNIR_0.JPG overlay=SYNMOD500_0.GIF, SYNMODSFC_0.GIF
SYNIR_1.JPG overlay=SYNMOD500_1.GIF, SYNMODSFC_1.GIF
SYNIR_2.JPG overlay=SYNMOD500_2.GIF, SYNMODSFC_2.GIF
SYNIR_3.JPG overlay=SYNMOD500_3.GIF, SYNMODSFC_3.GIF
SYNIR_4.JPG overlay=SYNMOD500_4.GIF, SYNMODSFC_4.GIF
SYNIR_5.JPG overlay=SYNMOD500_5.GIF, SYNMODSFC_5.GIF
SYNIR_6.JPG overlay=SYNMOD500_6.GIF, SYNMODSFC_6.GIF
SYNIR_7.JPG overlay=SYNMOD500_7.GIF, SYNMODSFC_7.GIF
Ejemplo 6b: Animación con imágenes y gráficos superpuestos, realces y posibilidad de imprimir (versión sin file of filenames)
En este caso en el fichero de configuración hay que incluir en una línea los filenames separados por comas y en otra los overlay_filenames, separados por "&" dentro de cada overlay, que a su vez se separan por comas:
backcolor=0xdddddd
forecolor= =0x000000
controls=startstop, speed, firstlast, step, print, zoom, enhance, overlay
bottom_controls=toggle
controls_tooltip=Pulsa para parar/animar, Cambia la velocidad, Primera/Ultima
imagen, Adelante/Atrás, Pulsa para imprimir, Pulsa para ampliar, Elige
realce
bottom_controls_tooltip=Haz clic para eliminar/restaurar y Mayus+clic para mostrar
transparency=0x000000
filenames = SYNIR_0.JPG, SYNIR_1.JPG, SYNIR_2.JPG, SYNIR_3.JPG, SYNIR_4.JPG,
SYNIR_5.JPG, SYNIR_6.JPG, SYNIR_7.JPG
overlay_filenames = SYNMOD500_0.GIF&SYNMOD500_1.GIF&SYNMOD500_2.GIF&SYNMOD500_3.GIF&SYNMOD500_4.GIF&SYNMOD500_5.GIF&SYNMOD500_6.GIF&SYNMOD500_7.GIF,
SYNMODSFC_0.GIF&SYNMODSFC_1.GIF&SYNMODSFC_2.GIF&SYNMODSFC_3.GIF&SYNMODSFC_4.GIF&SYNMODSFC_5.GIF&SYNMODSFC_6.GIF&SYNMODSFC_7.GIF
overlay_labels= Geopotencial y Temperatura en 500 HPa, Presión en SFC
y Temperatura en 850 HPa
overlay_labels_color=0xff0000, 0x0000ff
overlay_transparent_amount= 100, 100
Ejemplo 6c: Animación con imágenes y gráficos superpuestos, realces y posibilidad de imprimir (versión sin file of filenames ni fichero de configuración)
En este caso incluimos todos los parámetros en las "FlashVars", pero las distintas imágenes de los overlays en vez de separarlas con "&" lo hacemos con "|":
<OBJECT type="application/x-shockwave-flash" data="flanis.swf"
width="850" height="625" id="FlAniS">
<PARAM NAME="movie" VALUE="flanis.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="menu" value="false">
<PARAM NAME="FlashVars" value="backcolor=0xdddddd&forecolor=
=0x000000&controls=startstop, speed, firstlast, step, print, zoom, enhance,
overlay&bottom_controls=toggle&controls_tooltip=Pulsa para parar/animar,
Cambia la velocidad, Primera/Ultima imagen, Adelante/Atrás, Pulsa para
imprimir, Pulsa para ampliar, Elige realce&bottom_controls_tooltip=Haz clic
para eliminar/restaurar y Mayus+clic para mostrar&filenames = SYNIR_0.JPG,
SYNIR_1.JPG, SYNIR_2.JPG, SYNIR_3.JPG&overlay_filenames=SYNMOD500_0.GIF|SYNMOD500_1.GIF|SYNMOD500_2.GIF|SYNMOD500_3.GIF,
SYNMODSFC_0.GIF|SYNMODSFC_1.GIF|SYNMODSFC_2.GIF|SYNMODSFC_3.GIF&transparency=0x000000&overlay_labels=
Geopotencial y Temperatura en 500 HPa, Presión en SFC y Temperatura en
850 HPa&overlay_labels_color=0xff0000, 0x0000&overlay_transparent_amount=
100, 100">
</OBJECT>
Ejemplo 7: Animación de imágenes de gran tamaño: FlAniS vs AniS
Ejemplo 8: Uso de "hotspots" para "pseudonavegación", información pop-up y enlaces a otras páginas web
Los hotspots se pueden incluir en el fichero de configuración o en el "file of filenames" (fof)En este caso el fichero de configuración llama al fof RADMAD.txt, que incluye las imágenes radar de Madrid y los "hotspots": Los cuatro primeros sirven para cargar otro fof, que se mostrará en la pantalla. El quinto sirve para mostrar un información pop-up pinchando en él. El último enlaza con la página web de la AEMET, abriendo una nueva ventana.
RARE1MADR.GIF
RARE2MADR.GIF
RARE3MADR.GIF
hotspot = 0, 400, icon, atras.gif, pan, fof, RADCACE.txt, Radar Extemadura
hotspot = 680, 400, icon, adelante.gif, pan, fof, RADVALE.txt, Radar Valencia
hotspot = 330, 0, icon, arriba.gif, pan, fof, RADVALL.txt, Radar Valladolid
hotspot = 330, 690, icon, abajo.gif, pan, fof, RADMALA.txt, Radar Málaga
hotspot = 30,30, icon, attent.gif, pan, popup, Pincha en las flechas para "pseudonavegacion"entre
los distintos radares, pincha aquí para más información
hotspot = 570,0,icon,logoaemet.jpg ,pan, link, http://www0.inm.es, Pinchar para
acceder a la web interna de la AEMET
Para poder abrir la ventana en la que aparece la página web de AEMET es necesario insertar un JavaScript en la cabecera del fichero HTML:
<script language="javascript" type="text/javascript">
//---------------------------------------------
function flanis_link(linkURL) {
var windowName = 'newWindow';
var windowConfig = 'width=750,height=450,location=yes,menubar=yes,resizable=yes,scrollbars=yes,toolbar=no'
;
window.open(linkURL, windowName, windowConfig);
}
</script>
Ejemplo 9: Barrido ("wiping") entre dos imágenes
El barrido se hace arrastrando el ratón de izquierda a derecha o al revés, manteniendo pulsado el botón izquierdo.
La opción "wiper" no puede combinarse con otros controles. El fichero de configuración podría ser del siguiente modo:
always_wiping=true;
use_anti_caching=false
filenames=SATREPIR.JPG,SATREPPSIR.JPG
backcolor=0x808080
Ejemplo 10: Medida de coordenadas y extrapolación
Para habilitar ambas opciones, en el fichero de configuración, además de los controles "location" y "extrap" hay que incluir las coordenadas de la esquina superior izquierda y la inferior derecha, además de las horas que corresponden a las imágenes:
coordinates=43.48, -03.25, 39.32, 02.20
controls = startstop,speed,step,zoom,toggle,location,extrap
filenames=1331510.GIF,1331540.GIF,1331610.GIF,1331640.GIF,1331710.GIF,1331740.GIF
times= 1510,1540,1610,1640,1710,1740
Ejemplo 11a: Sonda de datos ("data probe") con imágenes del SAF-NWC
Se usa el control "probe" y es necesaria una tabla de realces que contenga los necesarios para cada capa. En este caso es realcesaf.tab, con realces para el SAI (Stability Analysis Imagery) y el TPW (Total Precipitable Water).
El fichero de configuración es el siguiente:
backcolor=0xdddddd
forecolor= =0x000000
enhance_filename = realcesaf.tab
overlay_enhance_table = 1,2,3
overlay_radio = t,t,f
probe_label = Sonda
probe_labels_colors=x000000, xffff00, xffff00
probe_style = 0x303030, 0xffffff,12
startstop_labels = Parar,Animar,60
print_label = Imprimir
zoom_label = Ampliar
controls=probe, startstop, spacer,speed, firstlast, step, print, zoom,overlay
bottom_controls=toggle
rate=10,2,50
controls_tooltip=Lee valores en pantalla, Pulsa para parar/animar, Cambia la
velocidad, Primera/Ultima imagen, Adelante/Atrás, Pulsa para imprimir,
Pulsa para ampliar
bottom_controls_tooltip=Haz clic para eliminar/restaurar y Mayus+clic para mostrar
file_of_filenames = SAF.txt
overlay_labels= Indíce de Elevación (LI)/on, Agua Precipitable
Total (TPW), Mapa
overlay_labels_color=0xff0000, 0x0000ff, 0x00ff00
overlay_transparent_amount= 100, 100, 100
Ejemplo 11b: Sonda de datos ("data probe") con imágenes RADAR
En este caso la tabla de realces es realceradar.tab, con realces para reflectividad.
El fichero de configuración es muy similar, aunque ahora sólo hay una capa con datos y otra con el mapa.