INTRODUCCIÓN

En esta ocasión no habrá mucho texto ya que todo lo he hecho en video, así que este también es mi primer videotutorial, espero migrar poco a poco algunos de los post a este formato.

Eso si, contaré rápidamente que veremos y para que sirve esto. Es un comando para Guardar el documento y Probar la película, es como hacer CRT+S y CTR+ENTER, pero de una sola vez. Además y creo que esto es de lo más importante, veremos como modificar los atajos de teclado para sustituir el atajo CTR+ENTER para que ejecute nuestro comando.

DESCARGAS

Bueno, las descargas son en este caso son:

• Extensión auto instalable mediante Adobe Extensión Manager. Comando Save and Test MXP.
• Comando fichero JSFL para el que lo quiera instalar a mano.

AGRADECIMIENTOS

En esta ocasión quiero agradecer a mi amigo Iván que me ayudó a montar el video y sobre todo a Juan quien me permitió utilizar su creación musical para ponerla de fondo.

Esta reflexión surge por un sentimiento, una sensación, un pinchazo interior y las cosquillas o la curiosidad de las nuevas tecnologías y sobre todo la interactividad. También tiene mucho que ver con el actual movimiento que existe en la red sobre el futuro de Flash y el panorama que se vive y se ve venir. Algunos post interesantes que tratan más o menos el tema que quiero hablar se pueden leer aquí y aquí.

Pero esta reflexión es mía así que además de tener en cuenta todos los factores que en esos post se habla tendremos en cuenta sobre todo las respuestas que he dado al planteamiento hecho por Charly García en deberías saber por qué (la camiseta que me pongo es la de Flashero).

HISTORIA

Haciendo un poco de historia para remontarnos a los orígenes o por lo menos a mis orígenes Flasheros tengo que hablar sobre el bachillerato y la universidad, ayyy aquellos tiempos donde todo lo que importaba era aprender y sacar buenas notas (jejeje, creo que no ha cambiado tanto, ahora sigue siendo aprender y sacar buenos proyectos XD), bueno, como iba diciendo, en aquellos tiempo lo que conocía era Pascal, C, Java, HTML y con el tiempo descubrí Delphi, Visual C++, FrontPage (si, tengo que decirlo porque es la verdad, jejeje), php y Javascript, hasta aquí no dejaba de ser programación pura y dura, existía una mezcla entre el front-end y el back-end, la lógica y la presentación de nuestra aplicación. Pero un día, gracias a un proyecto y aun gran amigo, se mostró ante mis ojos algo que cambiaría para siempre mi vida, la interactividad, las herramientas de dibujo, las líneas de tiempo, los símbolos (gráfico, clip de película y botón) y de la noche a la mañana me olvidé completamente de todo lo demás para hacerle un gran hueco en mi cabeza a esa preciosa aplicación que acababa de conocer, Flash.

MOTIVOS

Supongo que cada quien tendrá sus motivos, los míos son los siguientes:

• la facilidad de desarrollo
• un entorno de diseño
• el alto nivel de interactividad que se podía conseguir
• un lenguaje de programación basado en el modelo de eventos
• animaciones chulas por código (easing y demás)
• reproducción de sonidos
• reproducción de videos (si, era posible en aquella época, aunque muy pesado)
• cargar y actualizar contenidos sin tener que actualizar la página

Todo esto me enamoró y desde ese momento hasta la fecha seguimos felizmente casados.

ACTUALIDAD

Hoy en día han cambiado tanto las tecnologías, se han desarrollado frameworks sobre todo con Javascript, existe AJAX, entornos de desarrollo de alto nivel con los cuales hay que programar muy poco, por ejemplo Dreamweaver facilita enormemente la vida a diseñadores y desarrolladores, HTML 5 quiere (pero yo la verdad lo veo difícil) utilizar una etiqueta VIDEO con lo cual una pieza importante de Flash empieza a moverse (no, estoy de acuerdo, aunque lo leo muy a menudo y mucha gente habla así de esto, pero y que pasa con Red5 y Flash Media Server, que hace HTML contra eso) y algunas cosas más que de alguna forma y otra han hecho a muchas personas plantearse la tecnología a utilizar en sus desarrollos.

MI ACTUALIDAD

Desde que me enamoré hasta ahora hemos pasado por muchas actualizaciones y nuevas versiones, se desarrollo e implementó ActionScript 2, ActionScript 3, Flex, Flash Lite y todo esto me encantó, pero volviendo a mis motivos principales, siento que en esencia la herramienta no ha cambiado mucho.

FRUSTRACIÓN

En mi caso, y este caso se puede extrapolar a muchos casos más que he podido comprobar hablando con mucha gente y leyendo por aquí o por allá, sigo desarrollando con ActionScript 2, por limitaciones muy importante y es que nuestros cliente (empresas grandes como bancos y farmacéuticas entre otros) no tienen en todos sus puestos de trabajo estandarizado un reproductor de Flash avanzado, así es que actualmente desarrollo para Flash Player 7. Otro factor muy importante es la interactividad que se puede conseguir a través de la cámara o el micrófono, pero al final pasa lo mismo que el player, los usuarios finales no lo tienen con lo cual hay que hacer desarrollos que funcionen en el 100% de los puestos de trabajo, o sea que otro .

ROMANCE FUERA DEL MATRIMONIO

He conocido a un par de chicas muy atractivas últimamente, me quieren, me invitan a salir, comparten y coquetean conmigo con todas sus funcionalidades apasionantes, han podido mostrar al mundo unas cuantas cositas a tener en cuenta:

• acelerómetro
• gps
• brújula
• facilidad de uso e interacción con el micrófono
• facilidad de uso e interacción con la cámara

Esto es lo que me ofrecen iPhone SDK y Android SDK sobre lo que ya tengo con Flash, pero un factor importantísimo que es indudablemente una curva que te deja viendo estrellitas y pensando en ella todo el día es la perfecta combinación entre hardware y software, ya que no hay que luchar contra extrañas características de equipos o altos y bajos rendimientos, existe un muy alto control de calidad que nos garantiza la perfecta funcionalidad de nuestros desarrollos en los dispositivos finales.

VISITAS FUERA DE CASA

He visitado y jugado un poco con estos SDK’s y la verdad es que la experiencia ha sido muy grata, pues están muy completos y sobre todo cuentan con una base muy sólida para empezar a desarrollar, cosa que en principio flash no tiene por defecto. Pero sobre todo lo que me tiene más inquieto y feliz (pienso en ella todo el día), es la nueva interactividad que se consigue con estos dispositivos.

CONCLUSIÓN

Cada quién hace las cosas por los motivos que lo han llevado a ello, en mi caso lo he expuesto arriba y creo que como toda relación hay que mantenerse activos y de vez en cuando hacer regalitos, dar sorpresas, sonreir y aprender juntos ante lo que la vida nos pone o tomar al toro por lo cuernos y vivir aventuras, pero creo que mi relación con Flash lleva un tiempo de monotonía por los motivos que he expuesto aquí. Con todo esto no quiero decir que me voy a ir a desarrollar con otro lenguaje (que ya lo estoy haciendo) sino que simplemente quiero compartir esta reflexión porque creo que algo importante a tener en cuenta en el panorama que se vive.

Entiendo que no todos pensamos igual y que habrá personas que verán las cosas desde otro punto de vista, así que cualquier comentario será bienvenido.

Saludos!!!

Poner atención a esta pequeña selección donde se puede ver un poco de todo, la convivencia, la felicidad de los asistentes, los frikis que son pues no dejan el ordenador, las comidas acompañados de grandes personajes del mundo digital, el encuentro de fútbol, la llegada de uno que de verdad ama a Subflash, nuestro querido Jorge Solis que vino desde Argentina (jejeje, cuestiones de trabajo decía ) y como decía Alex:

Subflash se lleva dentro del corazón

He colgado de picasa las fotos que hice este años del Subflash, así que ahí pueden ver el resto de la historia.

Saludos!!!

• Fotos de Subflash 2009
• Subflash 2009 – Vivencias, cotilleos y más
  
• Fotos de Subflash 2008
• Subflash 2008, vivencias, recuerdos, aventuras y mucho más
  

Por fin ya de vuelta de las vacaciones y retomando nuevamente el mando de mi vida estoy aquí para compartir otro tutorial sobre JSFL, para ser exactos no es ni un Comando ni un Panel ya que la ejecución de este JSFL se hace automáticamente desde la línea de comandos mediante una llamada desde una aplicación AIR o simplemente haciendo doble clic.

HISTORIA

El otro día hablando con Iván Gajate me preguntaba sobre la forma de crear FLA’s dinámicamente y automáticamente me vino a la cabeza JSFL aunque no es la súper solución porque lo que realmente queríamos conseguir es utilizar una librería en C para generar FLA’s con ciertas características peculiares como el tamaño, el color y los fotogramas por segundo, pero como ninguno de los dos es un experto programador en C pues optamos por el camino de JSFL que me gusta y controlo más.

LA IDEA

Desde la aplicación AIR se generará un fichero de texto que nos servirá para configurar las características del FLA que se va a crear y luego simplemente ejecutamos el JSFL. Ya está, así de simple.

COSAS A DESTACAR (o que vamos a aprender)

Con este tutorial aprenderemos:

• Otra forma de ejecutar los ficheros JSFL.
• El uso del objeto FLfile, exactamente del método read.
• Que podemos hacer más cosas de las que parece a simple vista, por ejemplo a cerrar la propia aplicación.

MANOS A LA OBRA

Parte 1: JSFL desde la línea de comandos

Hasta ahora hemos visto tres formas de utilizar JSFL, a través de Comando, a través de Panel y a través de Herramientas, pero esas no son todas las formas en las que podemos utilizar JSFL ya que existe una más que es de la que vamos a echar mano hoy, me refiero a la ejecución de JSFL mediante línea de comandos.

Me explico, dentro de nuestro equipo tenemos:

lugar_de_instalacion_de_flash\flash.exe

y digamos, por ponerle un nombre, que en C tenemos una carpeta que se llama ejemplo y que dentro de ejemplo tenemos un fichero que se llama generar_fla_dinamicamente.jsfl, entonces podríamos decir desde la línea de comandos lo siguiente:

“lugar_de_instalacion_de_flash\flash.exe” “C:\ejemplo\generar_fla_dinamicamente.jsfl“

esto ejecutaría Flash y automáticamente cargaría el JSFL para ejecutarlo, fácil no?, que frikis que sómos, jejeje.

Parte 2: Leer el fichero de configuración

Ahora que ya estamos en nuestro ámbito, recordemos que JSFL sólo funciona con Flash abierto y gracias a la ejecución de JSFL mediante línea de comandos hemos conseguido abrir Flash ya podemos continuar con el proceso del JSFL. Como hemos dicho vamos a leer un fichero de texto que la aplicación AIR ha generado, para seguir con la buena costumbre y quizá también por casualidad o no se muy bien porque, la aplicación AIR genera ese fichero en C dentro de la carpeta ejemplo.

El contenido del fichero es muy simple, se encuentran emparejados variable y valor separados por ampersand (&), como se de variables GET se tratara. Por ejemplo:

frameRate=50&backgroundColor=#00FFFF&width=800&height=200

Esto ahora mismo no viene al caso, pero bueno ya lo escribí así que ahí se quedará y más tarde que lo necesitemos hablaremos de él. Lo que realmente necesitamos es utilizar el objeto FLfile para que con ayuda del método read leamos el fichero de configuración, de tal forma que nuestro código quedaría así:

var sConfiguration = FLfile.read("ruta del fichero de configuración");

Ahora si, dentro de la variable sConfiguration tenemos el contenido del fichero de configuración de tal forma que vamos a tratar el contenido para utilizarlo más adelante, para esto vamos a utilizar funciones básicas de JavaScript, es decir splits y bucles para separar y obtener las variables y su valor, al final lo guardaremos en un array asociativo para tener todas las variables en un mismo sitio y listo, esto lo conseguimos con el siguiente código:

var aConfiguration = new Array();
var aValues = sConfiguration.split("&");
var nTotalValues = aValues.length;
for(var i = 0; i < nTotalValues; i++)
{
	var aTmp = aValues[i].split("=");
	aConfiguration[aTmp[0]] = aTmp[1];
}

Parte 3: Crear el nuevo documento, configurarlo y cerrar Flash

Bueno hasta ahora tenemos acceso al DOM de Flash ya que lo hemos abierto mediante línea de comandos, también tenemos una configuración almacenada en un array asociativo ya sólo nos queda crear el documento y configurarlo, esto lo conseguimos de dos formas, primero lo primero, para crear el documento Fla utilizaremos el método createDocument del objeto fl, este método nos devuelve una referencia al documento creado, lo vamos a almacenar en una variable para más adelante modificar sus propiedades, el ejemplo de la creación del documento es el siguiente:

var oDoc = fl.createDocument();

Ahora simplemente tenemos que configurar los valores que nos indicaron en el fichero de configuración, que ahora ya los tenemos en un array asociativo, así que con una comprobación y una asignación lo tendremos todo resuelto. En este caso deseamos modificar el color de fondo, los fotogramas por segundo, el alto y el ancho del documento, así que pare esto simplemente tendremos que modificar esas propiedades de nuestro objeto Document. El ejemplo es el siguiente:

if(aConfiguration["backgroundColor"])
	oDoc.backgroundColor = aConfiguration["backgroundColor"];

if(aConfiguration["frameRate"])
	oDoc.frameRate = Number(aConfiguration["frameRate"]);

if(aConfiguration["width"])
	oDoc.width = Number(aConfiguration["width"]);

if(aConfiguration["height"])
	oDoc.height = Number(aConfiguration["height"]);

Y listo, ya hemos configurado el nuevo documento, ahora simplemente nos queda guardar el documento y cerrar Flash. Para guardar el documento utilizaremos el método saveDocument del objeto fl, éste método recibe dos parámetros, en el primero indicamos el documento que deseamos guardar y en el segundo la ruta en la que deseamos guardar el documento, por ejemplo:

fl.saveDocument(oDoc, "ruta_donde_queremos_guardar_el_documento\documento_creado_dinamicamente.jsfl")

Vale pues ahora vamos a una de las cosas que más me gusta y sorprende, quizá sea un tontería pero saber que tenemos ese poder me gusta mucho, jejeje. Vamos a cerrar Flash, ya que una vez que hemos creado el documento, lo hemos configurado y lo hemos guardado, ya no necesitamos tener abierto Flash para nada, así que allá vamos. Esta tarea la conseguimos haciendo uso del método quit del objeto fl, éste método recibe un parámetro opcional para preguntar al usuario sobre guardar los cambios, en nuestro caso no lo queremos así que pasaremos false, el ejemplo es el siguiente:

fl.quit(false);

Y listo con esto terminamos este Tutorial que espero os sea de utilidad o que de una vez por todas los haga pensar en utilizar más a menudo JSFL.

DESCARGAS

En este caso pongo un zip donde está todo preparado para funcionar en la carpeta ejemplo en el disco duro C, si lo quieres modificar simplemente cambia la ruta en la primera variable del fichero JSFL, la variable sPath.

Saludos, para cualquier cosa, dudas o comentarios aquí estaré.

Entradas relacionadas

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica
• Tutorial JSFL – Comandos con interfaz gráfica II
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save
• Tutorial JSFL – Guardar copia FLA 1/2 (comando)
• Tutorial JSFL – Introducción a herramientas (tools)
  

Este es un post que tenía pendiente desde hace tiempo, en esta ocasión voy a hablar sobre las herramientas (tools) de Flash y de como personalizarlas o como es nuestro caso crear una nueva herramienta con JSFL.

INTRODUCCIÓN

Recuerdo en los tiempos de Flash 4 que fué cuando empecé con Flash que por comodidad y sobre todo por desconocimiento de la aplicación, quería hacer tablas en Flash y por mucho que busqué no encontré una herramienta que me sirviera para esto, así que al final aprendí a utilizar las herramientas de dibujo y a través de cuadros y líneas con las herramientas rectángulo y trazo conseguí hacer las tablas que quería, luego con el tiempo descubrí el panel alineación y distribución y con eso perfeccioné la tarea y me fué más fácil hacer estas tablas.

Bueno, pues la idea es que vamos a crear una herramienta para crear tablas de una manera fácil como si de rectángulos se tratara.

DESARROLLO

JSFL nos permite extender la funcionalidad de la aplicación, como hemos hablado ya en otras ocasiones, lo podemos hacer con comandos y paneles, pero también existe otro modo de extender y automatizar procesos, me refiero a la creación de herramientas.

Las herramientas al igual que los comandos y paneles se programan con JSFL y se almacenan en las siguiente rutas respectivamente por sistema operativo:

• Windows Vista

unidad de arranque\Users\nombre de usuario\Local Settings\Application Data\Adobe\Flash

CS4\idioma\Configuration\Tools

• Windows XP

unidad de arranque\Documents and Settings\usuario\Local Settings\Application Data\Adobe\Flash

CS4\idioma\Configuration\Tools

• Mac OS X

Macintosh HD/Usuarios/nombre de usuario/Librería/Application Support/Adobe/Flash

CS4/idioma/Configuration/Tools

A diferencia de los comandos y los paneles en las herramientas tenemos acceso a funciones y métodos de nivel superior que nos ayudan a desarrollar y controlar el estado de nuestra herramienta, las funciones disponibles son las siguiente:

• activate()
• configureTool()
• deactivate()
• keyDown()
• keyUp()
• mouseDoubleClick()
• mouseDown()
• mouseMove()
• mouseUp()
• notifySettingsChanged()
• setCursor()

Las que utilizaremos para la creación de la herramienta tablas serán, activate que se dispara cuando la herramienta es seleccionada por el usuario, deactivate que se dispara cuando el usuario cambia a otra herramienta, notifySettingsChanged que se dispara cuando el usuario modifica las propiedades de nuestra herramienta, mouseDown, mouseMove y mouseUp que se disparan cuando el usuario hace lo que el nombre de la función dice . Esto con respecto a los eventos para controlar nuestra herramienta.

Pero ¿cómo accedemos a la herramienta?

Pues fácil, como todo en JSFL son objetos necesitamos obtener la referencia a la herramienta activa que será nuestra herramienta, esto lo hacemos con la propiedad activeTool del objeto tools, en el ejemplo siguiente se muestra como obtener una referencia a la herramienta.

theTool = fl.tools.activeTool;

Guay, ¿Y para qué quiero tener una referencia al objeto herramienta?

Pues para asignar a nuestra herramienta nombre, tooltip, icono, opciones, especificar el tipo para el inspector de propiedades por ejemplo y muchas más cosas. Como se muestra a continuación.

// Set the standard tool information
theTool = fl.tools.activeTool;
theTool.setToolName("Tablas");
theTool.setIcon("Tablas.png");
theTool.setMenuString("Herramienta Tablas");
theTool.setToolTip("Herramienta Tablas");
theTool.setOptionsFile("Tablas.xml");

// This tool uses the Shape property inspector
theTool.setPI( "shape" );

Vale, vale, ya me entero, pero ¿Cómo dibujo?

Ah, muy cierto, pues para pintar / dibujar debemos hacer una nota importante y es que tenemos dos momento de dibujo:

• El momento de la previsualización
• El momento del dibujo final

Para el momento de la pre-visualización utilizaremos el objeto drawingLayer y sus métodos moveTo y lineTo que son idénticos a los que utilizamos en la API de dibujo de ActionScript y los método beginFrame y endFrame para indicar el incio y el fin del dibujo de la pre-visualización. Por ejemplo, con el siguiente código dibujaríamos un cuadro de 20×20 en 0, 0:

fl.drawingLayer.beginFrame();
fl.drawingLayer.moveTo(0, 0);
fl.drawingLayer.lineTo(20, 0);
fl.drawingLayer.lineTo(20, 20);
fl.drawingLayer.lineTo(0, 20);
fl.drawingLayer.lineTo(0, 0);
fl.drawingLayer.endFrame();

Y para el momento del dibujo final utilizaremos también el objeto drawingLayer para crear un objeto path con el método newPath, luego utilizaremos los métodos addPoint y makeShape para crear nuestro dibujo. Por ejemplo:

var myPath = fl.drawingLayer.newPath();
myPath.addPoint(0, 20);
myPath.addPoint(20, 20);
myPath.addPoint(20, 0);
myPath.addPoint(0, 0);
myPath.makeShape(false, true);

Perfecto, y ahora ¿cómo modifico las propiedades de mi herramienta?

Vale, para esto debemos recordar que en un principio utilizamos el método setOptionsFile del objeto tool donde indicamos un fichero xml, este fichero xml contiene la definición de las propiedades que utilizaremos en la herramienta. Por ejemplo para la herramienta tabla, utilizo dos propiedades nColumns y nRows. Un ejemplo del fichero xml de configuración es el siguiente:

property name="Columnas: " variable="nColumns" min="1" max="100" defaultValue="3" type="Number"
property name="Filas: " variable="nRows" min="1" max="100" defaultValue="3" type="Number"

Cuando el usuario modifique estos valores en el panel de propiedades se nos notificará en el evento (la función) notifySettingsChanged. Un ejemplo de como utilizar los valores modificados es el siguiente:

function notifySettingsChanged()
{
	var theTool = fl.tools.activeTool;

	this.nColumns = theTool.nColumns;
	this.nRows = theTool.nRows;
}

Y listo, con esto ya tenemos controladas todas las fases del diseño de una herramienta.

EJEMPLOS

A continuación un par de ejemplos de lo que podemos conseguir de una manera sencilla con esta herramienta.

DESCARGAS

Tenemos dos tipos de descargas, para instalar simplemente la herramienta Tablas y para descargar el JSFL:

• Extensión Herramienta Tablas (instalador mxp).
• Paquete zip con la Herramienta Tablas (ficheros jsfl, xml y png).

INSTALACIÓN

Una vez que se haya instalado la extensión debemos asignarla a un grupo de herramienta desde el panel Personalizar panel de herramientas y listo ya se puede utilizar.

Dudas, sugerencias o comentarios, aquí estaré.

Saludos.

Entradas relacionadas

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica
• Tutorial JSFL – Comandos con interfaz gráfica II
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save
• Tutorial JSFL – Guardar copia FLA 1/2 (comando)

Después de escribir este post mi buen amigo Iván aportó una grandísima idea, un diseño y me dió más tareas para el tren, mi lado friki sentía cosquillas por hacerlo con la API de dibujo de Flash, pero para variar un poco en esta ocasión lo he hecho en ActionScript 2.0 y en ActionScript 3.0 que realmente no es tan distinto para los que ya programan en AS2.

INTRODUCCIÓN

La idea es poner un coche en el circuito que ya hicimos en el anterior post, así que simplemente con rectángulos lo vamos a hacer. Para esto haremos uso de la API de dibujo de Flash en AS2 y AS3, las diferencias son pequeñas y en ocasiones grandes, pero con un poco de imaginación haremos que se parezcan más, .

DESARROLLO

ActionScript 3.0

En ActionScript 3.0 utilizaremos los métodos beginFill y drawRect de la clase Graphics.

ActionScript 2.0

En ActionScript 2.0 no tenemos una clase Graphics y menos aún el método drawRect, pero la solución es fácil, hacemos una función o método que haga lo mismo y listo .

function drawRect(_mc:MovieClip, _nX:Number, _nY:Number, _nW:Number, _nH:Number):Void
{
	_mc.moveTo(_nX, _nY);
	_mc.lineTo(_nX + _nW, _nY);
	_mc.lineTo(_nX + _nW, _nY + _nH);
	_mc.lineTo(_nX, _nY + _nH);
	_mc.lineTo(_nX, _nY);
}

CÓDIGO COMPLETO

A continuación el código en ActionScript 3.0:

package
{
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;

	public class Car extends MovieClip
	{
		private var car:Sprite;

		private var lights:Shape;
		private var bar:Shape;
		private var structure:Shape;
		private var wheels:Shape;

		private var nCounter:uint;

		public function Car():void
		{
			this.drawCar();

			this.nCounter = 0;

			this.addEventListener(Event.ENTER_FRAME, doOnEnterFrame);
		}

		private function drawCar():void
		{
			this.car = new Sprite();

			this.lights = new Shape();
			this.bar = new Shape();
			this.structure = new Shape();
			this.wheels = new Shape();

			//Chasis
			this.wheels.graphics.beginFill(0x1E1E1E);
			this.wheels.graphics.drawRect(38, 146, 316, 28);

			this.wheels.graphics.beginFill(0x1E1E1E);
			this.wheels.graphics.drawRect(157, 172, 78, 6);

			//Llanta izquierda
			this.wheels.graphics.beginFill(0x333333);
			this.wheels.graphics.drawRect(28, 132, 45, 68);

			//Llanta derecha
			this.wheels.graphics.beginFill(0x333333);
			this.wheels.graphics.drawRect(318, 132, 45, 68);

			//Carrosería
			this.structure.graphics.beginFill(0xFF0000);
			this.structure.graphics.drawRect(42, 0, 308, 166);

			//Cristal trasero
			this.structure.graphics.beginFill(0x70A9FE);
			this.structure.graphics.drawRect(49, 7, 293, 68);

			//Retrovisor izquierdo
			this.structure.graphics.beginFill(0xFF0000);
			this.structure.graphics.drawRect(0, 65, 42, 21);

			this.structure.graphics.beginFill(0x70A9FE);
			this.structure.graphics.drawRect(3, 68, 35, 15);

			//Retrovisor derecho
			this.structure.graphics.beginFill(0xFF0000);
			this.structure.graphics.drawRect(350, 65, 42, 21);

			this.structure.graphics.beginFill(0x70A9FE);
			this.structure.graphics.drawRect(353, 68, 35, 15);

			//Luz izquierda
			this.lights.graphics.beginFill(0xFF9900);
			this.lights.graphics.drawRect(46, 100, 34, 18);

			//Luz derecha
			this.lights.graphics.beginFill(0xFF9900);
			this.lights.graphics.drawRect(312, 100, 34, 18);

			//Defensa
			this.bar.graphics.beginFill(0x808080);
			this.bar.graphics.drawRect(38, 124, 316, 28);

			//Matrícula
			this.bar.graphics.beginFill(0xFFFFFF);
			this.bar.graphics.drawRect(157, 128, 78, 20);

			this.car.addChild(this.wheels);
			this.car.addChild(this.structure);
			this.car.addChild(this.bar);
			this.car.addChild(this.lights);

			this.car.scaleX = 0.5;
			this.car.scaleY = 0.5;

			this.addChild(this.car);
		}

		private function doOnEnterFrame(_oEvent:Event):void
		{
			this.nCounter++;
			if(this.nCounter % 4 == 0)
			{
				this.lights.y = (this.lights.y == 0) ? 3: 0;
				this.structure.y = (this.structure.y == 0) ? -3: 0;
				this.bar.y = (this.bar.y == 0) ? 2: 0;
			}
		}
	}
}

Y a continuación el código en ActionScript 2.0:

import gs.TweenLite;

var nColor1:Number = 0xFFFFFF;
var nColor2:Number = 0xCCCCCC;
var nColor3:Number = 0xFF0000;
var nColor4:Number = 0xFFFFFF;

var nColorSky:Number = 0x0066FF;
var nColorGrass:Number = 0x65FF00;

var nWidthSky:Number = Stage.width;
var nHeigthSky:Number = 80;

var nWidthGrass:Number = Stage.width;
var nHeigthGrass:Number = 170;

var nWidthBorderLine:Number = 30;
var nWidthMiddleLine:Number = 8;
var nWidthCenterLine:Number = 140;
var nHeigthLine:Number = 2.5;

var nTotalLines:Number = 68;

var nCounter:Number = 0;
var nFramesToUpdateCircuit:Number = 3;
var nFramesToUpdateCar:Number = 5;

var mcSky:MovieClip;
var mcGrass:MovieClip;
var mcCircuit:MovieClip;

var mcCar:MovieClip;

var mclights:MovieClip;
var mcBar:MovieClip;
var mcStructure:MovieClip;
var mcWheels:MovieClip;

this.create();

function create():Void
{
	Key.addListener(this);

	this.mcSky = this.createEmptyMovieClip("mcSky", 1);
	this.mcGrass = this.createEmptyMovieClip("mcGrass", 2);
	this.mcCircuit = this.createEmptyMovieClip("mcCircuit", 3);

	this.mcSky.beginFill(this.nColorSky, 100);
	this.drawBox(this.mcSky, this.nWidthSky, this.nHeigthSky);
	this.mcSky.endFill();

	this.mcGrass.beginFill(this.nColorGrass, 100);
	this.drawBox(this.mcGrass, this.nWidthGrass, this.nHeigthGrass);
	this.mcGrass.endFill();

	this.mcGrass._y = this.nHeigthSky;
	this.mcCircuit._y = this.nHeigthSky;

	for (var i:Number = 0; i < this.nTotalLines; i++)
	{
		var nType:Number = ((i % 2) == 0) ? 1: 0;
		var mc:MovieClip = this.createLine(nType);
		mc._xscale = 100 + (i * 2);
		mc._x = Math.round((Stage.width - mc._width) / 2)
		mc._y = i * this.nHeigthLine;
		mc.nPosOriX = mc._x;
	}

	this.drawCar();
	this.mcCar._xscale = 40;
	this.mcCar._yscale = 40;
	this.mcCar._x = (Stage.width - this.mcCar._width ) / 2;
	this.mcCar._y = 100;
	this.mcCar.nPosOriX = this.mcCar._x;
	this.mcCar.nPosOriY = this.mcCar._y;

	this.mcInstructions.swapDepths(this.getNextHighestDepth());
}

function createLine(_nType:Number):MovieClip
{
	var nDepth:Number = this.mcCircuit.getNextHighestDepth();
	var mcLine:MovieClip = this.mcCircuit.createEmptyMovieClip("mcLine_" + String(nDepth), nDepth);
	var mcLine1:MovieClip = mcLine.createEmptyMovieClip("mcLine1", 1);
	var mcLine2:MovieClip = mcLine.createEmptyMovieClip("mcLine2", 2);

	this.contructLine(mcLine1, _nType);
	this.contructLine(mcLine2, _nType + 1);

	mcLine2._visible = false;

	return mcLine;
}

function contructLine(_mc:MovieClip, _nType:Number):Void
{
	var mcBox1:MovieClip = _mc.createEmptyMovieClip("mcBox1", 1);
	var mcBox2:MovieClip = _mc.createEmptyMovieClip("mcBox2", 2);
	var mcBox3:MovieClip = _mc.createEmptyMovieClip("mcBox3", 3);

	var nColor:Number = (_nType == 1) ? this.nColor1: this.nColor3;

	mcBox1.beginFill(nColor, 100);
	this.drawBox(mcBox1, this.nWidthBorderLine, this.nHeigthLine);
	mcBox1.endFill();

	mcBox2.beginFill(this.nColor2, 100);
	this.drawBox(mcBox2, this.nWidthCenterLine, this.nHeigthLine);
	mcBox2.endFill();

	mcBox3.beginFill(nColor, 100);
	this.drawBox(mcBox3, this.nWidthBorderLine, this.nHeigthLine);
	mcBox3.endFill();

	mcBox2._x = this.nWidthBorderLine;
	mcBox3._x = this.nWidthBorderLine + this.nWidthCenterLine;

	if(_nType == 1)
	{
		var mcBox4:MovieClip = _mc.createEmptyMovieClip("mcBox4", 4);
		mcBox4.beginFill(nColor, 100);
		this.drawBox(mcBox4, this.nWidthMiddleLine, this.nHeigthLine);
		mcBox4.endFill();

		mcBox4._x = (_mc._width - mcBox4._width) / 2;
	}
}

function drawBox(_mc:MovieClip, _nWidth:Number, _nHeigth:Number):Void
{
	_mc.lineTo(_nWidth, 0);
	_mc.lineTo(_nWidth, _nHeigth);
	_mc.lineTo(0, _nHeigth);
	_mc.lineTo(0, 0);
}

function onEnterFrame(_mc:MovieClip):Void
{
	this.nCounter++
	if(this.nCounter % this.nFramesToUpdateCircuit == 0)
	{
		for (var i:Number = 0; i < this.nTotalLines; i++)
		{
			var mcLine:MovieClip = this.mcCircuit["mcLine_" + String(i)];
			mcLine.mcLine1._visible = !mcLine.mcLine1._visible;
			mcLine.mcLine2._visible = !mcLine.mcLine2._visible;
		}
	}

	if(this.nCounter % this.nFramesToUpdateCar == 0)
	{
		this.mcLights._y = (this.mcLights._y == 0) ? 3: 0;
		this.mcStructure._y = (this.mcStructure._y == 0) ? -3: 0;
		this.mcBar._y = (this.mcBar._y == 0) ? 2: 0;
	}
}

function moveLeft():Void
{
	var r:Number = 1.5;
	for (var i:Number = 0; i < this.nTotalLines; i++)
	{
		var mc:MovieClip = this.mcCircuit["mcLine_" + String(i)];
		TweenLite.to(mc, 1, { _x:mc.nPosOriX - (this.nTotalLines - i) * r } );
		r -= 0.01;
	}
	TweenLite.to(this.mcCar, 1, { _x:this.mcCar.nPosOriX - 40, _y:this.mcCar.nPosOriY + 10 } );
}

function moveRight():Void
{
	var r:Number = 1.5;
	for (var i:Number = 0; i < this.nTotalLines; i++)
	{
		var mc:MovieClip = this.mcCircuit["mcLine_" + String(i)];
		TweenLite.to(mc, 1, { _x:mc.nPosOriX + (this.nTotalLines - i) * r } );
		r -= 0.01;
	}
	TweenLite.to(this.mcCar, 1, { _x:this.mcCar.nPosOriX + 40, _y:this.mcCar.nPosOriY + 10 } );
}

function returnCenter():Void
{
	for (var i:Number = 0; i < this.nTotalLines; i++)
	{
		var mc:MovieClip = this.mcCircuit["mcLine_" + String(i)];
		TweenLite.to(mc, 1, { _x:mc.nPosOriX } );
	}
	TweenLite.to(this.mcCar, 1, { _x:this.mcCar.nPosOriX, _y:this.mcCar.nPosOriY } );
}

function onKeyDown():Void
{
	if(Key.isDown(Key.LEFT))
	{
		this.moveLeft();
	}
	else if(Key.isDown(Key.RIGHT))
	{
		this.moveRight();
	}
	else if(Key.isDown(Key.UP))
	{
		this.returnCenter();
	}
}

function drawCar():Void
{
	this.mcCar = this.createEmptyMovieClip("mcCar", 4);

	this.mcLights = this.mcCar.createEmptyMovieClip("mcLights", 4);
	this.mcBar = this.mcCar.createEmptyMovieClip("mcBar", 3);
	this.mcStructure = this.mcCar.createEmptyMovieClip("mcStructure", 2);
	this.mcWheels = this.mcCar.createEmptyMovieClip("mcWheels", 1);

	//Chasis
	this.mcWheels.beginFill(0x1E1E1E);
	this.drawRect(this.mcWheels, 38, 146, 316, 28);

	this.mcWheels.beginFill(0x1E1E1E);
	this.drawRect(this.mcWheels, 157, 172, 78, 6);

	//Llanta izquierda
	this.mcWheels.beginFill(0x333333);
	this.drawRect(this.mcWheels, 28, 132, 45, 68);

	//Llanta derecha
	this.mcWheels.beginFill(0x333333);
	this.drawRect(this.mcWheels, 318, 132, 45, 68);

	//Carrosería
	this.mcStructure.beginFill(0xFF0000);
	this.drawRect(this.mcStructure, 42, 0, 308, 166);

	//Cristal trasero
	this.mcStructure.beginFill(0x70A9FE);
	this.drawRect(this.mcStructure, 49, 7, 293, 68);

	//Retrovisor izquierdo
	this.mcStructure.beginFill(0xFF0000);
	this.drawRect(this.mcStructure, 0, 65, 42, 21);

	this.mcStructure.beginFill(0x70A9FE);
	this.drawRect(this.mcStructure, 3, 68, 35, 15);

	//Retrovisor derecho
	this.mcStructure.beginFill(0xFF0000);
	this.drawRect(this.mcStructure, 350, 65, 42, 21);

	this.mcStructure.beginFill(0x70A9FE);
	this.drawRect(this.mcStructure, 353, 68, 35, 15);

	//Luz izquierda
	this.mcLights.beginFill(0xFF9900);
	this.drawRect(this.mcLights, 46, 100, 34, 18);

	//Luz derecha
	this.mcLights.beginFill(0xFF9900);
	this.drawRect(this.mcLights, 312, 100, 34, 18);

	//Defensa
	this.mcBar.beginFill(0x808080);
	this.drawRect(this.mcBar, 38, 124, 316, 28);

	//Matrícula
	this.mcBar.beginFill(0xFFFFFF);
	this.drawRect(this.mcBar, 157, 128, 78, 20);
}

function drawRect(_mc:MovieClip, _nX:Number, _nY:Number, _nW:Number, _nH:Number):Void
{
	_mc.moveTo(_nX, _nY);
	_mc.lineTo(_nX + _nW, _nY);
	_mc.lineTo(_nX + _nW, _nY + _nH);
	_mc.lineTo(_nX, _nY + _nH);
	_mc.lineTo(_nX, _nY);
}

RESULTADO

El resultado final es una bonita carretera con su césped, su cielo y un coche que da saltitos, jejeje

Circuito con coche en ActionScript 2.0

El resultado en ActionScript 3.0 para generar el coche es el siguiente:

Coche programado con ActionScript 3.0

DESCARGAS

Tenemos los ficheros para la versión en ActionScript 2.0 y para los de ActionScript 3.0:

• El documento Fla del circuito con el coche en ActionScript 2.0
• El documento Fla y la clase para el coche en ActionScript 3.0

Entradas relacionadas:

• Circuito de carreras en Flash con ActionScript
• PHP Reader File SWF
• Concurso 25 líneas de ActionScript
• Tutorial JSFL – Panel Auto Save Flash

Saludos

En un proyecto que participé hace poco tuvimos que hacer un circuito de carreras  y aunque parece increíble no encontré algo por ahí que me sirviera de base, así que al final me lo tuve que cocinar.

Dentro de los requisitos técnicos tenía que ser para Flash Player 7, con lo cual no podía utilizar la Clase BitmapData de AS2 y muchísimo menos utilizar AS3, así que la cosa se ponía más chunga, pero bueno, sino donde queda la gracia.

Teníamos en la mente el mítico juego Out Run y queríamos conseguir algo como eso. Aunque durante la investigación vimos las maravillas de AS3 o las posibilidades al utilizar la Clase BitmapData con el motor del modo 7, pero nada, donde manda capitán no manda marinero, así que a buscarse la vida.

El resultado fué el siguiente, bueno, este realmente no es, esta es una versión lite que programé en mis mañanas de tren, jejeje. Mi lado friki me obligó a hacerlo todo con programación, así que el código se puede copiar, pegar y compilar sin problema.

NOTA:

Utilizo la TweenLite así que no funciona tal cual, hace falta tener la librería TweenLite.

CÓDIGO

import gs.TweenLite;

var nColor1:Number = 0xFFFFFF;
var nColor2:Number = 0xCCCCCC;
var nColor3:Number = 0xFF0000;
var nColor4:Number = 0xFFFFFF;

var nColorSky:Number = 0x0066FF;
var nColorGrass:Number = 0x65FF00;

var nWidthSky:Number = Stage.width;
var nHeigthSky:Number = 80;

var nWidthGrass:Number = Stage.width;
var nHeigthGrass:Number = 170;

var nWidthBorderLine:Number = 30;
var nWidthMiddleLine:Number = 8;
var nWidthCenterLine:Number = 140;
var nHeigthLine:Number = 2.5;

var nTotalLines:Number = 68;

var nCounter:Number = 0;
var nFramesToUpdate:Number = 3;

var mcSky:MovieClip;
var mcGrass:MovieClip;
var mcCircuit:MovieClip;

this.create();

function create():Void
{
	Key.addListener(this);

	this.mcSky = this.createEmptyMovieClip("mcSky", 1);
	this.mcGrass = this.createEmptyMovieClip("mcGrass", 2);
	this.mcCircuit = this.createEmptyMovieClip("mcCircuit", 3);

	this.mcSky.beginFill(this.nColorSky, 100);
	this.drawBox(this.mcSky, this.nWidthSky, this.nHeigthSky);
	this.mcSky.endFill();

	this.mcGrass.beginFill(this.nColorGrass, 100);
	this.drawBox(this.mcGrass, this.nWidthGrass, this.nHeigthGrass);
	this.mcGrass.endFill();

	this.mcGrass._y = this.nHeigthSky;
	this.mcCircuit._y = this.nHeigthSky;

	for (var i:Number = 0; i < this.nTotalLines; i++)
	{
		var nType:Number = ((i % 2) == 0) ? 1: 0;
		var mc:MovieClip = this.createLine(nType);
		mc._xscale = 100 + (i * 2);
		mc._x = Math.round((Stage.width - mc._width) / 2)
		mc._y = i * this.nHeigthLine;
		mc.nPosOriX = mc._x;
	}
}

function createLine(_nType:Number):MovieClip
{
	var nDepth:Number = this.mcCircuit.getNextHighestDepth();
	var mcLine:MovieClip = this.mcCircuit.createEmptyMovieClip("mcLine_" + String(nDepth), nDepth);
	var mcLine1:MovieClip = mcLine.createEmptyMovieClip("mcLine1", 1);
	var mcLine2:MovieClip = mcLine.createEmptyMovieClip("mcLine2", 2);

	this.contructLine(mcLine1, _nType);
	this.contructLine(mcLine2, _nType + 1);

	mcLine2._visible = false;

	return mcLine;
}

function contructLine(_mc:MovieClip, _nType:Number):Void
{
	var mcBox1:MovieClip = _mc.createEmptyMovieClip("mcBox1", 1);
	var mcBox2:MovieClip = _mc.createEmptyMovieClip("mcBox2", 2);
	var mcBox3:MovieClip = _mc.createEmptyMovieClip("mcBox3", 3);

	var nColor:Number = (_nType == 1) ? this.nColor1: this.nColor3;

	mcBox1.beginFill(nColor, 100);
	this.drawBox(mcBox1, this.nWidthBorderLine, this.nHeigthLine);
	mcBox1.endFill();

	mcBox2.beginFill(this.nColor2, 100);
	this.drawBox(mcBox2, this.nWidthCenterLine, this.nHeigthLine);
	mcBox2.endFill();

	mcBox3.beginFill(nColor, 100);
	this.drawBox(mcBox3, this.nWidthBorderLine, this.nHeigthLine);
	mcBox3.endFill();

	mcBox2._x = this.nWidthBorderLine;
	mcBox3._x = this.nWidthBorderLine + this.nWidthCenterLine;

	if(_nType == 1)
	{
		var mcBox4:MovieClip = _mc.createEmptyMovieClip("mcBox4", 4);
		mcBox4.beginFill(nColor, 100);
		this.drawBox(mcBox4, this.nWidthMiddleLine, this.nHeigthLine);
		mcBox4.endFill();

		mcBox4._x = (_mc._width - mcBox4._width) / 2;
	}
}

function drawBox(_mc:MovieClip, _nWidth:Number, _nHeigth:Number):Void
{
	_mc.lineTo(_nWidth, 0);
	_mc.lineTo(_nWidth, _nHeigth);
	_mc.lineTo(0, _nHeigth);
	_mc.lineTo(0, 0);
}

function onEnterFrame(_mc:MovieClip):Void
{
	this.nCounter++
	if(this.nCounter % this.nFramesToUpdate == 0)
	{
		for (var i:Number = 0; i < this.nTotalLines; i++)
		{
			var mcLine:MovieClip = this.mcCircuit["mcLine_" + String(i)];
			mcLine.mcLine1._visible = !mcLine.mcLine1._visible;
			mcLine.mcLine2._visible = !mcLine.mcLine2._visible;
		}
	}
}

function moveLeft():Void
{
	var r:Number = 1.5;
	for (var i:Number = 0; i < this.nTotalLines; i++)
	{
		var mc:MovieClip = this.mcCircuit["mcLine_" + String(i)];
		TweenLite.to(mc, 1, { _x:mc.nPosOriX - (this.nTotalLines - i) * r } );
		r -= 0.01;
	}
}

function moveRight():Void
{
	var r:Number = 1.5;
	for (var i:Number = 0; i < this.nTotalLines; i++)
	{
		var mc:MovieClip = this.mcCircuit["mcLine_" + String(i)];
		TweenLite.to(mc, 1, { _x:mc.nPosOriX + (this.nTotalLines - i) * r } );
		r -= 0.01;
	}
}

function returnCenter():Void
{
	for (var i:Number = 0; i < this.nTotalLines; i++)
	{
		var mc:MovieClip = this.mcCircuit["mcLine_" + String(i)];
		TweenLite.to(mc, 1, { _x:mc.nPosOriX } );
	}
}

function onKeyDown():Void
{
	if(Key.isDown(Key.LEFT))
	{
		this.moveLeft();
	}
	else if(Key.isDown(Key.RIGHT))
	{
		this.moveRight();
	}
	else if(Key.isDown(Key.UP))
	{
		this.returnCenter();
	}
}

RESULTADO

Circuito de carreras en Flash con ActionScript

DESCARGAS

Para el que quiera el fla aquí está.

Saludos!!!

Entradas relacionadas:

• PHP Reader File SWF
• Concurso 25 líneas de ActionScript
• Tutorial JSFL – Panel Auto Save Flash

Desde siempre me han llamado la atención las marquesinas. Quizá por las veo muy habitualmente en el tren que viajo todos los días para ir de la casa al trabajo y del trabajo a casa, aunque ya desde mucho antes me gustaban.

NOTA
Puede ser interesante leer antes o después este otro post de Introducción a Comandos para saber qué son, dónde van y cómo funcionan.

INTRODUCCIÓN

Bueno, pues con esa idea en la cabeza se me ocurrió hacer un comando que en si mismo no tiene una utilidad claro, sino más bien abstracta o artística, pero que me viene muy bien para explicar el Objeto Timeline de JSFL.

El comando Escribir palabra no tiene una utilidad clara, es decir, no se creó con el fin de resolver un problema, sencillamente se hizo porque una tarde con una visión muy al estilo matrix (puede ser por la película o por una matriz) y con la nostalgia de las marquesinas de leds en la mente (quizá influenciado por las pantallas de los trenes de cercanías), si hizo.

TUTORIAL

Primero utilizaremos el objeto Document para acceder a su biblioteca (library), creamos y editamos un MovieClip en ella y por último acceder a su línea de tiempo (Timeline).

var oDoc;
var oLib;
var oTimeline;

this.oDoc = fl.getDocumentDOM();
this.oLib = this.oDoc.library;
this.oLib.addNewItem("movie clip", "Nombre_MovieClip");
this.oLib.editItem("Nombre_MovieClip");
this.oTimeline = this.oDoc.getTimeline();

Una vez que tenemos una referencia al objeto Timeline podremos utilizar sus métodos y propiedades, en este caso vamos a utilizar el método addNewLayer para agregar tantas capas como necesitemos.

this.oTimeline.addNewLayer();

Luego seleccionamos los fotogramas con los que vamos a trabajar, esto lo hacemos con el método setSelectedFrames y los convertimos en fotogramas clave:

this.oTimeline.setSelectedFrames(INICIO, FIN, REMPLAZAR_SELECCIÓN);
this.oTimeline.convertToKeyframes();

Y listo lo siguiente es simplemente ir creando algo en cada fotograma en función de un patrón para que la línea de tiempo tenga forma. Una forma sencilla de hacer esto es dibujando un círculo en el escenario, de esta manera el fotograma dejará de estar vacío, para dibujar el círculo utilizamos el método addNewOval del objeto Document:

this.oDoc.addNewOval({left:0, top:0, right:10, bottom:10});

El resultado al que queremos llegar es el que se muestra en la siguiente imagen.

Quizá sea mejor verlo desde lejos, porque muy cerca de la pantalla cuesta un poco leerlo.

El código completo es el siguiente:

var oDoc;
var oLib;
var oTimeline;
var aLetters;
var aWord;

this.config();

function config()
{
	fl.showIdleMessage(false);
	fl.outputPanel.clear();

	if(fl.getDocumentDOM())
	{
		this.oDoc = fl.getDocumentDOM();
		this.oLib = this.oDoc.library;

		this.init();
	}
	else
	{
		alert("Debes tener un documento abierto.");
	}
}

function init()
{
	this.configLetters();
	this.configWord();

	var nTotalLetters = this.aWord.length;
	for(var i = 0; i < nTotalLetters; i++)
	{
		this.createLetter(this.aWord[i], i * 6);
	}
}

function configLetters()
{
	this.aLetters = new Array();

	this.aLetters[" "] = "0,0,0,0,0|0,0,0,0,0|0,0,0,0,0|0,0,0,0,0|0,0,0,0,0|0,0,0,0,0|0,0,0,0,0";
	this.aLetters["A"] = "0,1,1,1,0|1,0,0,0,1|1,0,0,0,1|1,1,1,1,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1";
	this.aLetters["B"] = "1,1,1,1,0|1,0,0,0,1|1,0,0,0,1|1,1,1,1,0|1,0,0,0,1|1,0,0,0,1|1,1,1,1,0";
	this.aLetters["C"] = "0,1,1,1,0|1,0,0,0,1|1,0,0,0,0|1,0,0,0,0|1,0,0,0,0|1,0,0,0,1|0,1,1,1,0";
	this.aLetters["D"] = "1,1,1,1,0|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,1,1,1,0";
	this.aLetters["E"] = "1,1,1,1,1|1,0,0,0,0|1,0,0,0,0|1,1,1,1,0|1,0,0,0,0|1,0,0,0,0|1,1,1,1,1";
	this.aLetters["F"] = "1,1,1,1,1|1,0,0,0,0|1,0,0,0,0|1,1,1,1,0|1,0,0,0,0|1,0,0,0,0|1,0,0,0,0";
	this.aLetters["G"] = "0,1,1,1,0|1,0,0,0,1|1,0,0,0,0|1,0,1,1,1|1,0,0,0,1|1,0,0,0,1|0,1,1,1,0";
	this.aLetters["H"] = "1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,1,1,1,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1";
	this.aLetters["I"] = "0,1,1,1,0|0,0,1,0,0|0,0,1,0,0|0,0,1,0,0|0,0,1,0,0|0,0,1,0,0|0,1,1,1,0";
	this.aLetters["J"] = "0,0,0,0,1|0,0,0,0,1|0,0,0,0,1|0,0,0,0,1|0,0,0,0,1|1,0,0,0,1|0,1,1,1,0";
	this.aLetters["K"] = "1,0,0,0,1|1,0,0,1,0|1,0,1,0,0|1,1,0,0,0|1,0,1,0,0|1,0,0,1,0|1,0,0,0,1";
	this.aLetters["L"] = "1,0,0,0,0|1,0,0,0,0|1,0,0,0,0|1,0,0,0,0|1,0,0,0,0|1,0,0,0,0|1,1,1,1,1";
	this.aLetters["M"] = "1,0,0,0,1|1,1,0,1,1|1,0,1,0,1|1,0,1,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1";
	this.aLetters["N"] = "1,0,0,0,1|1,0,0,0,1|1,1,0,0,1|1,0,1,0,1|1,0,0,1,1|1,0,0,0,1|1,0,0,0,1";
	this.aLetters["O"] = "0,1,1,1,0|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|0,1,1,1,0";
	this.aLetters["P"] = "1,1,1,1,0|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,1,1,1,0|1,0,0,0,0|1,0,0,0,0";
	this.aLetters["Q"] = "0,1,1,1,0|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,1,1|0,1,1,1,1";
	this.aLetters["R"] = "1,1,1,1,0|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,1,1,1,0|1,0,0,1,0|1,0,0,0,1";
	this.aLetters["S"] = "0,1,1,1,0|1,0,0,0,1|1,0,0,0,0|0,1,1,1,0|0,0,0,0,1|1,0,0,0,1|0,1,1,1,0";
	this.aLetters["T"] = "1,1,1,1,1|0,0,1,0,0|0,0,1,0,0|0,0,1,0,0|0,0,1,0,0|0,0,1,0,0|0,0,1,0,0";
	this.aLetters["U"] = "1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|0,1,1,1,0";
	this.aLetters["V"] = "1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|0,1,0,1,0|0,1,0,1,0|0,0,1,0,0";
	this.aLetters["W"] = "1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|1,0,1,0,1|1,0,1,0,1|1,1,0,1,1|1,0,0,0,1";
	this.aLetters["X"] = "1,0,0,0,1|1,0,0,0,1|0,1,0,1,0|0,0,1,0,0|0,1,0,1,0|1,0,0,0,1|1,0,0,0,1";
	this.aLetters["Y"] = "1,0,0,0,1|1,0,0,0,1|1,0,0,0,1|0,1,0,1,0|0,0,1,0,0|0,0,1,0,0|0,0,1,0,0";
	this.aLetters["Z"] = "1,1,1,1,1|0,0,0,0,1|0,0,0,1,0|0,0,1,0,0|0,1,0,0,0|1,0,0,0,0|1,1,1,1,1";
}

function configWord()
{
	sWord = prompt("Escribe una palabra.");

	this.aWord = new Array();
	var nWordLength = sWord.length;
	for(var i = 0; i < nWordLength; i++)
	{
		this.aWord.push(sWord.substring(i, i + 1));
	}

	this.createTimeline(sWord);
}

function createTimeline(_sWord)
{
	var sWordLengthInFrames = _sWord.length * 6;
	this.oLib.addNewItem("movie clip", _sWord);
	this.oLib.editItem(_sWord);
	this.oTimeline = this.oDoc.getTimeline();
	this.oTimeline.setSelectedFrames(0, sWordLengthInFrames, true);
	this.oTimeline.convertToKeyframes();
	for(var i = 0; i < 6; i++)
	{
		this.oTimeline.addNewLayer();
		this.oTimeline.setSelectedFrames(0, sWordLengthInFrames, true);
		this.oTimeline.convertToKeyframes();
	}
}

function createLetter(_sLetter, _nStartFrame)
{
	var sConfigLetter = this.aLetters[_sLetter];
	if(sConfigLetter)
	{
		var aConfigLetter = sConfigLetter.split("|");
		for(var i = 0; i < 7; i++) aConfigLetter[i] = aConfigLetter[i].split(",");

		for(var i = 0; i < 7; i++)
		{
			for(var j = 0; j < 5; j++)
			{
				if(aConfigLetter[i][j] == "1")
				{
					this.oTimeline.setSelectedLayers(i);
					this.oTimeline.setSelectedFrames(_nStartFrame + j, _nStartFrame + j + 1, true);
					this.oDoc.addNewOval({left:0, top:0, right:10, bottom:10});
				}
			}
		}
	}
	else
	{
		alert("No existe el caracter: " + _sLetter);
	}
}

DESCARGAS

Tenemos dos tipos de descargas, para instalar simplemente el comando y para descargar el JSFL:

• Extensión Escribir palabra (instalador mxp).
• Comando Escribir palabra (fichero jsfl).

Dudas, sugerencias o comentarios, aquí estaré.

Saludos.

Entradas relacionadas

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica
• Tutorial JSFL – Comandos con interfaz gráfica II
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save
• Tutorial JSFL – Guardar copia FLA 1/2 (comando)

Esta es la primera entrega de un grupo de dos tutoriales sobre una misma tarea, guardar una copia del documento Fla con el que se esta trabajando pero sin perder el documento actual en el IDE de Flash.

Introducción

Me explico mejor, existe la opción de Guardar como, pero esta opción lo que hace es abrir el cuadro de diálogo donde nos permite especificar la ruta y nombre del documento Fla, al hacer clic el guardar el documento que se queda en edición en el IDE de Flash es el nuevo. Pero, ¿que pasa si quiero trabajar sobre el mismo fichero?, porque lo que realmente quería hacer era una copia del documento, pues que tenemos que cerrar el documento nuevo y abrir el original.

Bueno para esto sirve el comando que vamos a hacer en este tutorial. En el siguiente tutorial vamos a hacer lo mismo pero lo haremos con un panel para ver las ventajas de un sistema sobre el otro.

NOTA
Puede ser interesante leer antes o después este otro post de Introducción a Comandos para saber qué son, dónde van y cómo funcionan.

Tutorial

Para hacer la tarea de guardar una copia debemos primeramente guardar el documento en edición, esto lo hacemos mediante el método save del objeto Document,

fl.getDocumentDOM().save(true);

Una vez guardado el documento procedemos a realizar una copia, para esto hacemos uso del método copy del objeto FLfile, éste método recibe dos parámetros:

• Origen: La ruta del fichero que deseamos copia.
• Destino: La ruta del fichero resultante.

NOTA:

Es importante destacar que las rutas deben estar expresadas en  file:///

Ya que las rutas las debemos especificar mediante  file:/// haremos uso de una de las novedades de Flash CS4, me refiero a la propiedad pathURI del objeto Document ya que esta propiedad nos devuelve precisamente la ruta del documento Fla en edición expresda en file:///.

NOTA:

En caso de que el documento no haya sido guardado todavía el valor de la propiedad pathURI será udefined con lo que podemos controlar esa situación.

El código que utilizaremos para hacer la copia sería el siguiente:

FLfile.copy(fl.getDocumentDOM().pathURI, NUEVO_NOMBRE);

El caso de que la copia se realice con éxito el método copy nos devolverá true, en caso contrario devolverá false, con lo cual también podemos controlar esa situación para informar al usuario.

A continuación en código completo del commando:

var oDoc;

this.config();

function config()
{
	fl.showIdleMessage(false);
	fl.outputPanel.clear();

	if(fl.getDocumentDOM())
	{
		this.oDoc = fl.getDocumentDOM();

		this.init();
	}
	else
	{
		alert("Debes tener un documento abierto.");
	}
}

function init()
{
	if(this.oDoc.pathURI)
	{
		this.oDoc.save(true);
		var bResult = FLfile.copy(this.oDoc.pathURI, this.oDoc.pathURI.split(".fla")[0] + "_back.fla");
		if(bResult)
		{
			alert("La copia se ha guardado correctamente.");
		}
		else
		{
			alert("Error al guardar la copia.");
		}
	}
	else
	{
		alert("El documento no ha sido guradado.\nPara crear una copia debes guardar antes el documento.");
	}
}

Descargas

• Extensión para instalar el comando (fichero mxp).
• Fichero JSFL.

Dudas, sugerencias o comentarios, aquí estaré.

Saludos.

Entradas relacionadas

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica
• Tutorial JSFL – Comandos con interfaz gráfica II
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save

Bienvenido querido lector a la sección de tutoriales en nomeva, en esta ocasión vamos a crear con Flash mediante JSFL y ActionScript un Panel que realice la tarea de guardar automáticamente el documento Fla en edición.

NOTA
Puede ser interesante leer antes o después este otro post de Introducción a Paneles para saber qué son, dónde van y cómo funcionan.

Auto Save es un Panel (plugin) que en un principio(*) tiene una misión muy importante, guardar automáticamente el documento (fla) con el cual estamos trabajando.

(*)Digo en un principio porque al pensarlo bien, tal como funciona el IDE de Flash y sobre todo con la gran cantidad de fallos (bugs) que he encontrado en esta nueva versión de Adobe Flash CS4 Professional no estoy 100 % seguro si nos podrá ayudar o no. Con esto quiero decir que el uso de este Panel es bajo tu propio riesgo.

Ahora si, dicho todo lo anterior hablemos del Panel.

CONFIGURACIÓN Y USO

Es muy fácil de configurar el Panel, son únicamente tres valores:

• Frecuencia: Como su nombre indica sirva para configurar la frecuencia el minutos del auto guardado.
• Preguntar: Si está activado antes de guardar te preguntará si deseas guardar, pudiendo responder que no y seguir tranquilamente con tu trabajo.
• Activo / Inactivo: Este es nuestro botón de encendido, con el cual indicamos que el auto guardado está activo o inactivo.

Y ya está, así de fácil es configurar el Panel de Auto guardado de documentos Fla. (Hola Gus!!!)

Uso

Para usar el Panel debemos abrirlo, desde el menú Ventana > Otros paneles > Auto save y configurarlo tal como indicamos arriba. Es importante mencionar que para que funcione debe estar visible, es decir, el Panel debe estar abierto. Tal como se muestra en la siguiente imagen.

Un poco de historia

Hablando con un amigo (Iván) me comentó una funcionalidad importantísima y es que recuerde la configuración porque sino sería un verdadero incordio tener que estar configurándolo cada vez que lo utilizas, así que SI, el Panel recuerda la configuración cada vez que lo cierras y lo abres e incluso si cierras el IDE de Flash.

Descarga

Para todo aquel que simplemente necesite el Panel Auto Save y no tenga interés en saber como funciona por dentro puede descargar aquí el instalador mxp.

A los que les interese saber como funciona sigan leyendo hasta el final que también hay otro enlace al instalador al final. ;D

Parte friki, tutorial, código y demás

Hasta ahora hemos hablado del Panel y sus beneficios (es verdad, también hemos hablado de las posibles no bondades ), pero todavía no sabemos cómo funciona, qué engranes se mueven por dentro, dónde está la magia y demás historias que en realidad es lo que quiero contar de lo que trata este post.

Pues vamos allá, jejeje, es que realmente el funcionamiento interno de este Panel es realmente sencillo, únicamente utilizamos dos métodos de JSFL, uno para comprobar que exista un documento abierto y otro para guardar el documento, si, así de fácil.

Explicación

Para saber si existe un documento Fla abierto utilizamos el método fl.getDocumentDOM() que nos devolverá un Objeto de tipo Document en caso de existir, en caso contrario nos devolverá undefined, con lo cual podemos hacer las comprobaciones necesarias en nuestro código ActionScript.

Lo siguiente que tenemos que hacer en caso de que exista el documento y que las variables de configuración del Panel (Frecuencia, Preguntar y Activo) nos los permitan es guardarlo, haciendo uso del método fl.getDocumentDOM().save(true) y listo.

Resultado final

En esta ocasión es más código ActionScript que código JSFL, como en los anteriores post aquí también hacemos uso de la función MMExecute que nos permite ejecutar JSFL desde un fichero swf con ActionScript.

A continuación os pongo el código. Hay un par de cosas feas por ahí, así que tener en cuenta que lo programé el viernes por la mañana mientras iba en el tren hacia el trabajo, así que si alguién lo quiere modificar para dejarlo más bonito o añadir funcionalidad es libre de hacerlo siempre y cuando mencione el origen (y si no lo menciona también, total, lo que quiero es compartir).

import fl.controls.Button;
import fl.controls.CheckBox;
import fl.controls.Label;
import fl.controls.NumericStepper;
import flash.events.Event;

var nIntervalID:uint;
var nMinutesToAutoSave:uint;
var bCheckBoxAsk:Boolean;
var bActive:Boolean;

var comButtonOnOff:Button;
var comCheckBoxAsk:CheckBox;
var oLabel:Label;
var comNumericStepperFrecuency:NumericStepper;

var oSharedObject:SharedObject;

this.config();
this.init();

function config():void
{

	this.oSharedObject = SharedObject.getLocal("DATA_AUTOSAVE_SO");

	this.nMinutesToAutoSave = (this.oSharedObject.data.nMinutesToAutoSave != undefined) ? this.oSharedObject.data.nMinutesToAutoSave: this.comNumericStepperFrecuency.value;
	this.bCheckBoxAsk = (this.oSharedObject.data.bCheckBoxAsk != undefined) ? this.oSharedObject.data.bCheckBoxAsk: this.comCheckBoxAsk.selected;
	this.bActive = (this.oSharedObject.data.bActive != undefined) ? this.oSharedObject.data.bActive: false;

	this.comNumericStepperFrecuency.value = this.nMinutesToAutoSave;
	this.comCheckBoxAsk.selected = this.bCheckBoxAsk;
	if (this.bActive)
		this.comButtonOnOff.label = "On";
	else
		this.comButtonOnOff.label = "Off";

	this.comButtonOnOff.addEventListener(MouseEvent.CLICK, onClickButtonOnOff);
	this.comCheckBoxAsk.addEventListener(Event.CHANGE, onCheckBoxAskChange);
	this.comNumericStepperFrecuency.addEventListener(Event.CHANGE, onNumericStepperFrecuencyChange);

	this.saveSharedObject();
}

function saveSharedObject():void
{
	this.oSharedObject.data.nMinutesToAutoSave = this.nMinutesToAutoSave;
	this.oSharedObject.data.bCheckBoxAsk = this.bCheckBoxAsk;
	this.oSharedObject.data.bActive = this.bActive;

	this.oSharedObject.flush();
}

function onClickButtonOnOff(_oMouseEvent:MouseEvent):void
{
	if (this.bActive)
	{
		this.bActive = false;
		this.comButtonOnOff.label = "On";
	}
	else
	{
		this.bActive = true;
		this.comButtonOnOff.label = "Off";

		this.init();
	}

	this.saveSharedObject();
}

function onCheckBoxAskChange(_oEvent:Event):void
{
	this.bCheckBoxAsk = this.comCheckBoxAsk.selected;

	this.saveSharedObject();
}

function onNumericStepperFrecuencyChange(_oEvent:Event):void
{
	this.nMinutesToAutoSave = this.comNumericStepperFrecuency.value;

	this.init();

	this.saveSharedObject();
}

function init():void
{
	clearInterval(this.nIntervalID);
	this.nIntervalID = setInterval(autoSave, this.nMinutesToAutoSave * 60 * 1000);
}

function autoSave():void
{
	if (this.bActive && this.isDocument())
	{
		if (this.comCheckBoxAsk.selected)
		{
			var sCodeJSFL:String = "";
			var sResult:String = "";

			sCodeJSFL = "confirm(\"Quieres guardar\");";
			sResult = MMExecute(sCodeJSFL);

			if (sResult == "true")
			{
				this.saveDocument();
			}
		}
		else
		{
			this.saveDocument();
		}
	}
}

function isDocument():Boolean
{
	var bRet:Boolean;

	var sCodeJSFL:String = "";
	var sResult:String = "";
	sCodeJSFL = "fl.getDocumentDOM();";
	sResult = MMExecute(sCodeJSFL);
	bRet = (sResult != "undefined") ? true: false;

	return bRet;
}

function saveDocument():void
{
	var sCodeJSFL:String = "";
	var sResult:String = "";
	sCodeJSFL = "fl.getDocumentDOM().save(true);";
	sResult = MMExecute(sCodeJSFL);
}

Aquí tenéis los archivos de descarga.

• Instalador MXP
• Código fuente (Fla)

Sugerencias, dudas, ideas o comentarios?

Saludos!!!

Entradas relacionadas:

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica
• Tutorial JSFL – Comandos con interfaz gráfica II
• Tutorial JSFL – Introducción a Paneles