SWFTools en español (1)

SWFTools en español

Introducción

Hace un par de días me dí a la tarea de desarrollar un manual en español sobre las SWFTools ya que la documentación que encontré en Internet ha sido poca, incluso en su idioma original; talvés no haya realizado una búsqueda exhaustiva, pero si di un par de vueltas sin llegar a algo realmente satisfactorio... en fin.

Así que he decido crear mi propia documentación y compartirla para que otras personas no tengan que empezar de 0.5 como me tocó a mi.

SWFTools

Se conoce como SWFTools a una serie de herramientas que permiten la creación y edición de archivos en formato SWF, el cual es el formato utilizado por los archivos que se generan con el reconocido programa de animación Adobe Flash, solo que a diferencia de el mencionado las SWFTools son unas herramientas Freeware de código abierto.

La versión utilizada para hacer esta documentación fue la 0.9.0 actualmente va en la versión 0.9.2 la cual a la hora de yo realizar mi descarga no estaba disponible para Windows y la verdad compilarlas a través de un código que está direccionado para linux es parte de otro tema.

Cuando se realiza la descarga y la instalación se obtiene una carpeta que contiene varios programas, uno de ellos es SWFC.exe con el cuál iniciare este guía.

SWFC

Herramienta que hace parte del kit SWFTools, la cual se utiliza para compilar archivos .sc.

Formato de archivos .sc

El formato .sc es básicamente un documento de texto plano en el que se utilizan una serie de tags que son necesarios para el el programa swfc.exe genere como salida un archivo .swf funcional; por tanto este tipo de documentos no requieren de un editor o generador específico, aunque si requiere una perfecta utilización de la sintaxis de las etiquetas que se describen en este documento; esto quiere decir que con un editor de texto como lo son el block de notas en windows o gedit en linux es suficiente aunque hay opciones.

Todos los tags de este formato inician con un punto “.” no tienen carácter de fin de linea por tanto un tag se separa de otro solo en el momento en que se escribe el siguiente tag, esto puede ser util porque pueden utilizarse varias lineas para definir los atributos de un tag o puede utilizarse una linea para definir varios tags, además la sangria se puede utilizar por fines estéticos y legibilidad del código.

Para facilitar la legibilidad de este documento he dividido los tags de acuerdo a su funcionalidad y en esa medida serán introducidos en este documento.

Etiqueta de Cabecera: Permiten crear los elementos requeridos para el documento.

Este tipo de etiquetas por lo regular utilizan una etiqueta de finalización .end.

Etiquetas de Importación: Permiten importar elementos que son requeridos para el documento.

Este tipo de etiquetas utilizan un atributo filename que contiene la ruta del objeto a importar.

Etiquetas de Posicionamiento: Permiten ubicar y re-ubicar los elementos en la pantalla.

Este tipo de etiquetas no solo controlan la ubicación de los objetos sino también la apariencia.

Etiqueta de tiempo: Etiqueta que permite definir los cambios en el tiempo para película.

Etiquetas para dibujo: Permiten crear dibujos a partir código.

Etiquetas para texto: Permiten crear elementos de texto

Etiquetas para el Sonido: Permiten iniciar y detener la reproducción de sonidos.

Etiquetas para botones: Permiten definir elementos botones.

Etiqueta de cabecera

Etiqueta .flash

Esta etiqueta debe usarse de carácter obligatorio en el documento y sirve para indicarle al programa swfc.exe que lo que sigue a continuación es un documento para compilación. Es importante saber que los atributos son opcionales aunque al no asignarlos el compilador tomará los valores por defecto que pueden no ser los que uno desee para la película, se debe tener en cuenta que así como se utiliza la etiqueta .flash para el inicio del archivo, al final del mismo debe usarse la etiqueta .end.

Se debe tener en cuenta que el atributo filename hace referencia a rutas relativas al programa swfc.exe

Ejemplo de utilización:

En el siguiente ejemplo se define un documento cuyo nombre de variable es pelicula sus dimensiones son de 320 de ancho X 240 de alto, color de fondo blanco velocidad de fotogramas de 24fps(fotogramas por segundo) y le indica al compilador que el archivo de salida debe quedar ubicado en el subdirectorio pruebas con el nombre de archivo ejemplo.swf.

.flash

name=pelicula

bbox=320x240

background=white

fps=24

filename=pruebas/ejemplo.swf

…

.end

Etiquetas de importación

Este tipo de etiquetas permiten realizar la importación de diferentes elementos al documento que se esta definiendo asignándole nombres de variables a los elementos importados para luego hacer referencia a ellos por medio de dichos nombres.

Los formatos que se pueden importar dentro del documento son los siguientes:

Archivos de imagen: .jpg, png.

Archivos de tipos de letra: .ttf.

Archivos de sonido: .wav.

Archivos de script: .as

Archivos .swf

Todos estas etiquetas tienen en común el atributo filename el cual contiene la ruta relativa al compilador del archivo que se quiere llamar. Igualmente el atributo name que sirve para asignarle un nombre de variable al archivo en cuestión y puede tener el nombre que el programador quiera asignarle.

Etiqueta .jpeg

Esta etiqueta sirve para hacer la importación de un archivo en formato .jpg cuenta además con un atributo quality que sirve para especificar la calidad con la que será importado el archivo.

Ejemplo de utilización

.jpeg name=foto quality=80% filename=ejemplos/fotografia.jpg

Etiqueta .png

Esta etiqueta sirve para hacer la importación de un archivo en formato .png el cual a diferencia de las imagenes .jpg es un formato que admite transparencias.

Ejemplo de utilización

.png name=imagen filename=ejemplos/grafico.png

Etiqueta .font

Esta etiqueta permite importar un tipo de letra para ser utilizada posteriormente con las etiquetas de texto. Es recomendable tener dentro de la carpeta donde se esta trabajando un subdirectorio con copia de los archivos .ttf que se vayan a utilizar.

También es posible utilizar tipos de letra que se hayan exportado al formato swf.

Ejemplo de utilización

.font name=letra filename=fuentes/Arial.ttf

.font name=myletra filename=fuentes/miLetra.swf

Etiqueta .sound

Esta etiqueta permite realizar la importación de archivos de sonido en formato wav que luego pueden ser utilizados las veces que sea necesario por las etiquetas .play ó .stop utilizando el nombre de variable asignado al elemento .sound.

Ejemplo de utilización

.sound name=myCancion filename=sonidos/ejemplo.wav

…

.play myCancion

…

.stop myCancion

Etiqueta .soundtrack

Etiqueta que sirve para importar un archivo de sonido .wav y se diferencia de la anterior en que la reproducción del sonido comienza de forma inmediata y no se controla por medio de las etiquetas .play y .stop.

Ejemplo de utilización

.soundtrack name=sonido filename=sonidos/sonido.wav

Etiqueta .swf

Permite realizar la importación de un archivo .swf para su utilización en el documento actual es muy útil porque permite tener un proyecto dividido en varias secciones y luego reunirlo en un documento principal es importante tener en cuenta que la velocidad de los fotogramas en ambos documentos debe ser la misma.

Ejemplo de utilización

.swf name=ejemplo filename=externos/elemento.swf

Etiqueta .action

De momento el programa swfc.exe solo admite sintaxis de actionscript 2.0.

Esta etiqueta es posible utilizarla de dos formas, la primera consiste en definir las etiquetas actionscript dentro del mismo documento .sc en cuyo caso se usa asi:

Ejemplo de utilización

.action:

instrucciones actionscript

…

.end

Otra posible forma de utilizarla es importando un archivo de instrucciones actionscript en cuyo caso la sintaxis es la siguiente:

Ejemplo de utilización

.action filename=”scripts/script.as”

Etiquetas de posicionamiento

Este tipo de etiquetas permite ubicar los elementos en el escenario y como varios de ellos tienen atributos en común en este capitulo se hará una breve descripción de la etiquetas y finalmente se describirán los atributos de forma mas explicita.

Etiqueta .put:

La etiqueta .put permite colocar en el escenario una instancia de un elemento ya referenciado utilizando su nombre de instancia, igualmente este elemento puede tener un nombre que podrá utilizarse para referirse a la instancia con las modificaciones realizadas al momento de agregarlo a la pantalla.

Etiqueta .change

La etiqueta .change permite aplicar una transformación de alguno o varios de los atributos de una instancia de elemento ya puesto en pantalla por medio de la etiqueta .put. Por lo regular se utiliza después de la definición de un fotograma. Aunque en la documentación dice que con esta etiqueta pueden modificarse los atributos x e y el programa swfc.exe al realizar la compilación informa que estos atributos no estarán disponibles en versiones futuras por tanto no es conveniente su utilización en ves de ello sugiere usar la etiqueta .move para realizar desplazamientos.

Etiqueta .move

La etiqueta .move permite realizar el desplazamiento de un elemento por la escena entre el punto en el que se encuentra actualmente y las coordenadas que se utilicen como atributos de la etiqueta. Permite tambien definir un tipo de interpolación que será el efecto que se verá en pantalla mientras se realice el desplazamiento.

Etiqueta .jump

La etiqueta .jump permite reubicar el elemento sin que se genera ninguna interpolación entre los 2 puntos.

Etiqueta .del

La etiqueta .del permite eliminar una instancia del escenario para no ser mas utilizada.

Atributos

Atributo name:

Las etiquetas que tienen este atributo permite hacer referencia a la instancia que se utilizará.

Atributos x y

Los atributos x e y son utilizados para realizar la ubicación del elemento en el escenario teniendo en cuenta que las coordenadas x=0 y=0 se encuentran ubicadas en la sección superior izquierda del escenario.

Ejemplo de utilización

.png imagen filename=”ruta/imagen.png”

.put miImagen=imagen x=10 y=10

Atributos red, green, blue, alpha

Las transformaciones de color permiten modificar la forma en que se visualizan los colores del objeto, sin modificar el objeto en si; estos atributos se pueden expresar en forma acumulativa, porcentajes, o valores enteros.

Ejemplo de utilización

.png imagen filename=”ruta/imagen.png”

.put imagen blue=+255 → Incrementa el color rojo de la imagen al máximo

.put mi_imagen=imagen red=0 → Elimina el color rojo de la imagen

.change mi_imagen alpha=50% → Ajusta la transparencia de la imagen al 50%

Atributo luminance

Este atributo permite permite modificar la luminosidad del objeto su valor puede expresarse en porcentajes.

Ejemplo de utilización

.png imagen filename=”ruta/imagen.png”

.put imagen luminance=20% → Ajusta la luminosidad del objeto al 20%

Atributo scale, scalex, scaley

Estos atributos permiten modificar la escala de un objeto de manera proporcional, solo el ancho, solo el alto.

Ejemplo de utilización

.png imagen filename=”ruta/imagen.png”

.put fig=imagen scale=20% → Ajusta el tamaño del objeto al 20% del original

.change fig scalex=150% → Ajusta el ancho del objeto al 150% del original

.change fig scaley=30% → Ajusta el alto del objeto al 30% del original

Atributo pin

El atributo pin se refiere al punto del objeto que se tomará como referencia para realizar una rotación o escalada admite dos tipos de valores, una constante definida por el programa que puede ser:

left	top-center	right
left-center	center	right-center
bottom-left	bottom-center	bottom-right

Otra forma de definir el atributo es a través de una cadena entre comillas que contenga las coordenadas (x,y) así: “(50,50)”

Ejemplo de utilización

El siguiente ejemplo utiliza el atributo pin para indicarle a la etiqueta .put que el punto (10,10) debe usarse para colocar la parte central de la imagen insertada.

.png imagen filename=”ruta/imagen.png”

.put imagen x=10 y=10 pin=center

Atributo rotate

Este atributo se utiliza para obtener una rotación del elemento en sentido horario y como parámetro se debe utilizar un angulo en grados.

Ejemplo de utilización

El siguiente ejemplo utiliza la instrucción rotate realizar una rotación de 90º del objeto ya insertado llamado imagen

.png imagen filename=”ruta/imagen.png”

.put imagen x=130 y=120 pin=center rotate=90

.change imagen rotate=90

Atributo interpolation

El atributo interpolación se refiere a los cambios de la velocidad del objeto durante el efecto puede tomar uno de varios valores constantes definidos por el programa el valor por defecto de este parametro es linear, sin embargo no es el unico.

linear → velocidad constante

quadIn → velocidad duplica en el tiempo.

quadOut → la velocidad duplicada disminuye en el tiempo.

quadInOut → incrementa hasta la mitad y luego disminuye la velocidad duplicada

cubicIn → velocidad triplicada en el tiempo

cubicOut → velocidad triplicada disminuye en el tiempo

cubicInOut → incrementa hasta la mitad y luego disminuye velocidad triplicada.

quartIn → velocidad cuadruplicada en el tiempo

quartOut → velocidad cuadruplicada disminuye en el tiempo

quartInOut → velocidad cuadruplicada hasta la mitad luego disminuye

quintIn → velocidad quintuplicada en el tiempo

quintOut → velocidad quintuplicada disminuye en el tiempo

quintInOut → velocidad quintuplicada hasta la mitad luego disminuye

circleIn → velocidad aumenta en el tiempo

circleOut → velocidad disminuye en el tiempo

circleInOut → velocidad aumenta hasta la mitad luego disminuye en el tiempo

exponentialIn → velocidad incrementa exponencialmente en el tiempo

exponentialOut → velocidad exponencial disminuye en el tiempo

exponentialInOut → velocidad exponencial hasta la mitad luego disminuye

sineIn → velocidad varia sinusoidal en el tiempo

sineOut → velocidad varia sinusoidal en el tiempo

sineInOut → velocidad varia sinusoidal en el tiempo

Ejemplo de utilización

El siguiente ejemplo utiliza la instrucción rotate realizar una rotación de 90º del objeto ya insertado llamado imagen

.png imagen filename=”ruta/imagen.png”

.put imagen x=130 y=120 pin=center rotate=90

.frame 24

.move x= 600 y=400 interpolation=quadIn