SWFTools en español (2)

Introducción

Continuando con el tema de las SWFTools en este entrada se describen dos tipos de etiquetas mas, las etiquetas de tiempo y de dibujo, muy importantes porque son las que nos dan la oportunidad de agregar elementos mejor presentados a nuestro trabajo y controlar parte del proceso de animación.

Etiqueta de tiempo

.frame n

Esta etiqueta permite tener un control sobre fotogramas de la escena, a través de el numero que utiliza como parámetro se indican que cuadro se va a definir a continuación.

Ejemplo de utilización

En el siguiente ejemplo se definen 2 instancias de un elemento figura definido previamente.

…

.frame 1

.put figura x=120 y=200

.put figura x=220 y=200

...

Etiquetas de dibujo

Como su nombre lo indica las etiquetas de dibujo permiten realizar dibujos en pantalla desde formas básicas como rectángulos y círculos hasta formas complejas por medio de especificación de lineas.

Etiqueta .box

Por medio de esta etiqueta se puede realizar la definición de un rectángulo el cual puede ser utilizado luego por medio de instrucciones de posicionamiento a través del nombre asignado en el atributo name, el los atributos width y height corresponden al ancho y alto del rectángulo, line permite especificar el grueso del trazado, el atributo color se refiere al color de linea, fill al relleno y ambos pueden establecerse por nombre de alguno de estos colores:

snow, gainsboro, linen, bisque, moccasin, cornsilk, ivory, seashell, honeydew, azure, lavender, white, black, gray, grey, navy, blue, turquoise, cyan, aquamarine, green, chartreuse, khaki, yellow, gold, goldenrod, sienna, peru, burlywood, beige, wheat, tan chocolate, firebrick, brown, salmon, orange, coral, tomato, red, pink, maroon, magenta, violet, plum, orchid, purple, thistle.

También es posible definir los colores por medio de sus valores hexadecimales en RGBA así:

#FF66007B

Ejemplo de utilización

.box name=cuadro width=230 height=30 line=2 color=blue fill=#6633FFFF

Etiqueta .circle

Por medio de esta etiqueta se puede realizar la definición de un círculo el cual puede ser utilizado luego por medio de instrucciones de posicionamiento a través del nombre asignado en el atributo name, el atributo r corresponde al radio del circulo, line permite especificar el grueso del trazado, el atributo color se refiere al color de linea, fill al relleno y ambos pueden establecerse por nombre de alguno de estos colores:

snow, gainsboro, linen, bisque, moccasin, cornsilk, ivory, seashell, honeydew, azure, lavender, white, black, gray, grey, navy, blue, turquoise, cyan, aquamarine, green, chartreuse, khaki, yellow, gold, goldenrod, sienna, peru, burlywood, beige, wheat, tan chocolate, firebrick, brown, salmon, orange, coral, tomato, red, pink, maroon, magenta, violet, plum, orchid, purple, thistle.

También es posible definir los colores por medio de sus valores hexadecimales en RGBA así:

#FF66007B

Ejemplo de utilización

.circle r=30 line=2 color=blue fill=#9955AA

Etiqueta .spite

La etiqueta .sprite sirve para definir elementos que contienen varios frames simplificando la legibilidad del codigo y ahorrando trabajo de definir la misma animación varias veces. Posee un atributo name para hacer referencia posterior al elemento, puede contener varias etiquetas .frame ya para finalizar la definición del sprite se debe utilizar la etiqueta .end

Ejemplo de utilización

.sprite spr1
.frame 1

.put bola1=balón x=0 y=0
.frame 2

.change bola1 x=100 y=100.end

Etiqueta .outline

Permite realizar la definición de un trazado consta solo de dos atributos que son name que corresponde al nombre de con el que será referenciado luego y M el cual es una secuencia de puntos y coordenadas para realizar el trazado que utiliza la misma sintaxis del parámetro d de la etiqueta Path en los archivos SVG, por tanto puede utilizarse un editor de este tipo de archivos para tener la secuencia con mayor facilidad y obtener dibujos de muy alta calidad.

Nota: Esta etiqueta solo sirve para definir el trazado, para verlo en el escenario es necesario instanciarlo con la etiqueta .filled. Y luego ubicarlo en el escenario con .put

Ejemplo de utilización

.outline trazado:

M 91.899855,57.43741 C 108.68925,37.1134 111.2156,5.4772196 131.66421,5.3019196 C 152.54439,5.1153496 158.63094,29.7752 174.07953,56.55376 C 203.22295,55.34705 250.07364,35.34609 252.7246,76.87777 C 255.51188,120.54531 205.89102,82.17968 197.05449,116.64213 C 188.21797,151.10457 264.07276,157.98752 235.9352,191.75258 C 205.00736,228.86598 164.35935,144.03535 141.38439,140.50074 C 112.51006,136.05854 73.343155,223.56407 44.182625,198.8218 C 10.614472,170.33973 61.855675,159.94109 80.412375,123.71134 C 98.969075,87.48159 5.2763616,110.1389 4.4182616,69.80854 C 3.5346116,28.27688 62.739325,46.83358 91.899855,57.43741

.end

.filled name=estrella outline=trazado fill=degradado

.put estrella

Etiqueta .filled

La etiqueta .filled sirve para obtener la imagen de un trazado hecho con la etiqueta .outline ó .textshape. Como atributos tiene name que será el nombre utilizado para instanciarlo con las etiquetas de posicionamiento, outline que hace referencia al objeto de trazado, line que hace referencia al grueso de la linea que se va a utilizar, color para asignar un color a la linea fill para asignar un color de relleno a la figura y ambos pueden establecerse por nombre de alguno de estos colores:

snow, gainsboro, linen, bisque, moccasin, cornsilk, ivory, seashell, honeydew, azure, lavender, white, black, gray, grey, navy, blue, turquoise, cyan, aquamarine, green, chartreuse, khaki, yellow, gold, goldenrod, sienna, peru, burlywood, beige, wheat, tan chocolate, firebrick, brown, salmon, orange, coral, tomato, red, pink, maroon, magenta, violet, plum, orchid, purple, thistle.

También es posible definir los colores por medio de sus valores hexadecimales en RGBA así:

#FF66007B

Etiqueta .gradient

Esta etiqueta permite definir un degradado para ser utilizado en atributos fill o color, tiene una etiqueta de inicio y una etiqueta de final .end dentro se deben ubicar los porcentajes de color a utilizar; otros atributos son horizon para definir un degradado horizontal, radial para definir un degradado radial. El atributo name como siempre se refiere al nombre asignado a este elemento y poder posteriormente utilizarlo.

Ejemplo de utilización

.gradient degradado:

0% red

50% green

100% blue

.end

.box b1 width=ancho height=alto fill=degradado line=trazo color=blue

Etiqueta .texture

La etiqueta .texture permite definir una textura para posteriormente utilizarla con la etiqueta .filled o atributo fill y aunque la etiqueta .filled o atributo fill puede aplicar como relleno directamente la instancia de un archivo previamente importado, la etiqueta .texture permite ampliar las posibilidades al permitir la manipulación de la instancia a la hora de agregarla como relleno, con atributos como scale y sus variantes scalex y scaley para modificar el tamaño de la instancia de la imagen, rotate para rotar la imangen aunque en la práctica me ha pasado que rotar la imagen, modifica la escala... width y height para especificar el alto y ancho de la textura o r para especificar el radio de que cubrirá la textura.

Ejemplo de utilización

.jpeg imagen filename=”ruta/grafico.jpg”

.texture fondo=imagen scale=150%

.box cuadrado 100 100 fill=fondo