Robot04 » ActionScript 3.0

FDT 4 Linked libraries

Robot04 — Wed, 29 Dec 2010 15:09:59 +0000

Si has instalado FDT 4 y no encuentras las linked libraries, ahora se encuetran en Preferencias -> Generales -> WorkSpace -> Linked Resources.

También es posible que no encuentres en el Menú New -> AS Class y que por defecto solo salga MXML Class, puedes volver a restaurarlo en el Menú (superior) Window -> Reset Perspective, para que te aparezcan todas las opciones.

Me he llevado dos sustillos al actualizar hoy .

Reforest y Formato XFL

Robot04 — Sat, 18 Dec 2010 10:20:06 +0000

Según Adobe:
Los archivos XFL son el equivalente XML de los archivos FLA. Un archivo XFL es una carpeta de archivos comprimida que contiene una carpeta de biblioteca y un documento XML (DOMDocument.xml) que describe el archivo FLA.

La carpeta de biblioteca contiene los recursos a los que se hace referencia en el archivo XML. Cuando se abre un archivo XFL en Flash Professional, extrae esos elementos del archivo XFL y los utiliza para crear un documento FLA. El documento se guarda desde Flash Professional como un nuevo archivo FLA, sin cambiar el archivo XFL con Flash Professional.

De esta manera, podemos utilizar este formato para crear nuestras semillas en Reforest y sacar provecho de las ventajas del formato XML.

Cuando creemos un nuevo proyecto con Reforest, podremos variar todos aquellos parámetros del documento flash (en el momento de la creación) que nos hagan falta, como por ejemplo: tamaño, color, vinculaciones, opciones de publicación, objetos de la librería, etc.

Lleva algo de trabajo pero merece la pena invertir un poco de tiempo en ello.

Creamos nuestra semilla (example.seed). Ver tutorial

Junto a la semilla (example.seed) creamos una carpeta, donde vamos a almacenar los archivos que van a servir de plantilla y que Reforest copiará en los nuevos proyectos, con el nombre de files.

Dentro de files creamos un directorio nuevo con el nombre de flash para almacenar todos los archivos relacionados con Flash, paquetes de clases, xfl's, librerías, etc.

Creamos un nuevo documento Flash y lo guardaremos como main.xfl. Veremos que flash nos ha creado un directorio con el nombre main donde se encuentran todos los archivos relacionados al .xfl (DOMDocument.xml, PublishSettings.xml, etc).

Ahora solo tenemos que insertar variables de Reforest en aquellos archivos que tengan las propiedades que queramos cambiar en los distintos proyectos. Por ejemplo si queremos cambiar las propiedades del documento como tamaño, insertaríamos variables de Reforest en el archivo DOMDocument.xml de la siguiente manera:

width="%RFST:DocumentWidth=1004%" height="%RFST:DocumentHeight=680%"

Si lo que queremos cambiar es relativo a las opciones de publicación, introduciríamos las variables en PublishSettings.xml y si fuese sobre algún objeto de la librería, veremos que hay una carpeta con el nombre LIBRARY, dentro de la cual encontraremos todos los elementos disponibles en la librería y sus propiedades, seguiríamos los mismos pasos para todos ellos. Por ejemplo en PublishSettings.xml insertamos variables en los proyectores para variar si se publicarán o no.

Una vez que tenemos las variables de Reforest insertadas, volvemos a la semilla y le decimos qué archivos tiene que analizar Reforest en busca de estas variables con el atributo parse="true", de la siguiente forma:

XML:

>
>
>Robot04>
>09/09/09>
>Basic Template>
>Estructura de proyecto - Ejemplo Formato XFL>
>XFL Rocks >
>
>
name="projectName">
name="flash">
name="main">
name="bin" route="files/flash/main/bin" />
name="DOMDocument.xml" route="files/flash/main/DOMDocument.xml" parse="true" />
name="LIBRARY">
name="Content.xml" route="files/flash/main/LIBRARY/Content.xml" parse="true" />
>
name="main.xfl" route="files/flash/main/main.xfl" />
name="META-INF" route="files/flash/main/META-INF" />
name="MobileSettings.xml" route="files/flash/main/MobileSettings.xml" />
name="PublishSettings.xml" route="files/flash/main/PublishSettings.xml" parse="true" />
>
name="libs" route="files/flash/libs" />
>
>
>
>

Una vez hecho esto abrimos la semilla con Reforest y creamos proyecto, veremos en el apartado de cambio de variables aquellas que hayamos añadido y podremos variarlas al vuelo al crear el proyecto.

Nueva versión de Flint Particles

Robot04 — Tue, 31 Aug 2010 19:20:46 +0000

El sístema de partículas Flint se actualiza a la versión 2.1.4.

Esta versión implementa:

Colisiones entre partículas y zonas.
La interface Zone2D incluye un método collideParticle usado para probar colisiones entre partículas y zonas.
Además corrige algunos pequeños bugs.

Loading Workbench… Eclipse + FDT

Robot04 — Sat, 03 Jul 2010 11:12:28 +0000

Si alguna vez te ocurre que al abrir Eclipse se te queda en: Loading Workbench... esta es la solución:

Vas a tu workspace y en .metadata/.plugins/org.eclipse.core.resources y borras el archivo .snap

Enamorado de Signals

Robot04 — Sun, 13 Jun 2010 02:15:53 +0000

Y para muestra un botón

Actionscript:

package view.ui.common
{
import com.greensock.TweenMax;
import flash.events.MouseEvent;
import org.osflash.signals.natives.NativeSignal;

import flash.display.Sprite;

/**
* @author robot04
*/
public class BasicButton extends Sprite
{
private var overed:NativeSignal;
private var outed:NativeSignal;
public var clicked:NativeSignal;

public function BasicButton()
{
buttonMode = true;
mouseChildren = false;
overed = new NativeSignal(this, MouseEvent.MOUSE_OVER);
outed = new NativeSignal(this, MouseEvent.MOUSE_OUT);
clicked = new NativeSignal(this, MouseEvent.CLICK, MouseEvent);
}

public function removeListeners():void
{
overed.remove(onOver);
outed.remove(onOut);
}

public function addListeners():void
{
overed.add(onOver);
outed.add(onOut);
}

protected function onOut(event:MouseEvent):void
{
TweenMax.to(this, .4, {alpha:1});
}

protected function onOver(event:MouseEvent):void
{
TweenMax.to(this, .4, {alpha:.8});
}
}
}

Robert Penner - Signals

Reforest

Robot04 — Sun, 13 Jun 2010 01:57:27 +0000

Reforest es una aplicación desarrollada en Adobe AIR que crea estructuras de proyecto a través de plantillas.

Estas plantillas pueden ser configuradas al gusto de cada uno para crear el árbol de carpetas y archivos que formarán nuestro directorio de proyecto.
El ejemplo que viene con Reforest, cuando lo descargáis, es un MVC simple con Flash y AS3, pero se puede utilizar para cualquier tipo de proyecto, diseño, .php, html, etc

La plantilla, a partir de ahora semilla (.seed), está compuesta por los siguientes nodos:

info

Info es la parte de la semilla que nos va a proveer de la información de ésta, como autor, fecha, nombre, descripción, etc.

Esta es la estructura:

XML:

>
>
>Robot04>
>09/09/09>
>Example Template>
>Estructura de proyecto base con vista y controlador>
>Acuérdate de borrar el árbol de main.fla >
>
>

Después encontramos la estructura.

structure

Structure es la etiqueta que va a contenter nuestro proyecto, y en ella podremos crear y copiar los archivos y directorios que solamos utilizar frecuentemente en nuestros proyectos.

Dentro de structure podremos utilizar dos tipos de etiquetas diferentes:

folder
file

folder

Folder es la encargada de crear los directorios, tiene un sólo parámetro obligatorio name.
Si el valor del parámetro name es projectName, el valor se sustituirá en tiempo de ejecución por el nombre que elijamos para el proyecto.

XML:

>
>
>Robot04>
>09/09/09>
>Example Template>
>Estructura de proyecto base con vista y controlador>
>Acuérdate de borrar el árbol de main.fla >
>
>
name="projectName">
>
>
>

file

El nodo file se encarga de copiar archivos y carpetas a nuestro directorio de proyecto.

Tiene dos parámetros obligatorios:

name
route

Name indica el nombre con el cual se guardará el archivo en nuestro directorio de proyecto y route es el path al archivo que se va a copiar.

XML:

>
>
>Robot04>
>09/09/09>
>Example Template>
>Estructura de proyecto base con vista y controlador>
>Acuérdate de borrar el árbol de main.fla >
>
>
name="projectName">
name="flash">
name="main.fla" route="files/flash/main.fla" />
>
>
>

Además de esto y esta es la joyita de Reforest, el nodo file tiene un atributo opcional parse.

Si le decimos a Reforest que parsee el documento con el atributo parse="true". Reforest buscará en esos archivos variables de Reforest y nos permitirá durante la creación del proyecto cambiar sus valores por otros al vuelo.

Las variables de Reforest tienen el siguiente aspecto:
%RFST:Variable=Valor%

Por ejemplo un uso básico en un archivo html podría ser:
%RFST:title=titulo%

o en un .as podríamos ajustar las características de nuestro fla de la siguiente manera:

Actionscript:

[SWF(width="%RFST:SWFWidth=1004%", height="%RFST:SWFHeight=680%", backgroundColor="%RFST:SWFBGColor=#FFFFFF%", frameRate="%RFST:SWFFramerate=30%")]

Espero que lo disfrutéis y si tenéis sugerencias o dudas, ya sabéis

PD: Junto con el instalador de Reforest encontraréis más información y un ejemplo de uso.

AIR Autoupdater en 10 pasos

Robot04 — Tue, 14 Jul 2009 17:12:08 +0000

Ale, aquí os dejo cómo configurar un autoupdater para AIR en diez pasos.

1. Bajar el SDK de AIR.
2. Copiar el archivo applicationupdater_ui.swc a nuestra carpeta de proyecto.
3. Linkarlo en configuración de publicación.

4. Crear un updateConfig.xml con los siguientes parámetros:

XML:

<?xml version="1.0" encoding="utf-8"?>
xmlns="http://ns.adobe.com/air/framework/update/configuration/1.0">
>http://www.robot04.com/reforest/update.xml>
>1>
>
   name="checkForUpdate" visible="false" />
   name="downloadUpdate" visible="true" />
   name="downloadProgress" visible="true" />
   name="installUpdate" visible="true" />
   name="fileUpdate" visible="false" />
   name="unexpectedError" visible="true" />
>
>

5. En el Main o donde iniciéis la app (esto es solo una muestra, a partir de aquí se pueden jugar con todos los parámetros del ApplicationUpdater y configurarlo a vuestro gusto):

Actionscript:

package
{
import air.update.events.UpdateEvent;
import air.update.events.StatusUpdateErrorEvent;
import flash.events.ErrorEvent;
import air.update.events.StatusUpdateEvent;
import air.update.ApplicationUpdaterUI;

public class Main
{
public function Main()
{
initUpdater();
}
public function initUpdater():void
{
appUpdater = new ApplicationUpdaterUI(); appUpdater.addEventListener(StatusUpdateErrorEvent.UPDATE_ERROR, updateError);
appUpdater.addEventListener(UpdateEvent.INITIALIZED, updateInitialized);
appUpdater.addEventListener(StatusUpdateEvent.UPDATE_STATUS, updateStatus);
appUpdater.configurationFile = new File("app:/updateConfig.xml");
appUpdater.initialize();
}
private function updateInitialized(event:UpdateEvent):void
{
checkForUpdates();
}
private function checkForUpdates():void
{
appUpdater.checkNow();
}

private function updateError(event:ErrorEvent):void
{
trace("Error");
}

private function updateStatus(event:StatusUpdateEvent):void
{
trace("update status: " + event.version);
trace("update available: " + event.available);
trace("update details: " + event.details);
}
}
}

6. Añadir el updateConfig.xml en los settings de AIR: File --> AIR Settings --> Included Files + updateConfig.xml.
7. Compilar versión dejando, por ejemplo, en los AIR Settings en el campo de versión 0.90, la instalamos y compilamos otra versión cambiando el valor de la versión a la 0.91.
8. Crear un update.xml con:

XML:

<?xml version="1.0" encoding="utf-8"?>
xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
>0.91>
>http://www.robot04.com/reforest/reforest.air>
> Versión 0.91
* Añadida actualización automática
]]>>
>

9. Subir la versión nueva y el update.xml al servidor.
10. Añadir un nuevo tipo MIME ".air" al server

Abrimos la aplicación instalada y veremos que nos aparece la ventana de Update para descargar la nueva versión.
Nota: joder que mal se ven los estilos de syntax hiliter para los xml. Ya lo cambiaré.

Config Constants – ActionScript 3.0

Robot04 — Mon, 04 May 2009 14:55:20 +0000

Config Constants en Flash CS4. Con la creación de las constantes de configuración podemos acceder a partes de nuestro código dependiendo del valor de las mismas. Para ver un pequeño ejemplo, imaginad que tenéis un fla que va a ir en dos idomas, con las constantes podemos hacer que un mismo fla (o fla diferentes) accedan a un idioma en la programación o a otro.

Creamos un par de Constantes, una para el español CONFIG::ES y otra para el portugués CONFIG::PT y le damos a la primera un valor de true y a la segunda un valor de false en la configuración de publicación.

Después en nuestro código podremos tener lo siguiente:

Actionscript:

public function createButtons():void
{
CONFIG::ES
{
botones = [ "El sistema de franquicias", "Pasos a seguir", "Tipos de tienda",
"Inversión inicial", "Criterios de emplazamiento" ];
}

CONFIG::PT
{
botones = [ "O sistema de franchising", "Passos a seguir", "Tipos de loja",
"Investimento Inicial", "Critérios de localização" ];
}
}

Al compilar la película flash cogerá lo que aparezca dentro del CONFIG::ES e ignorará lo que esté dentro del CONFIG:PT.

Fases de propagación de eventos – ActionScript 3.0

Robot04 — Sat, 25 Apr 2009 12:28:14 +0000

Stage-->MainTimeLine-->MovieClip-->TextField-->MovieClip-->MainTimeline-->Stage

Cuando el evento se transmite hacia el objeto se le conoce como la Fase de Captura.
Cuando llega al TextField es la Target Fase.
Cuando vuelve a subir hacia el Stage Fase de Burbujeo (Bubbing)

La fase de captura no se utiliza a no ser que lo especifiques explicitamente.

Actionscript:

clip_mc.addEventListener(MouseEvent.CLICK, botonClick, true);

Se suele usar para deshabilitar eventos.

Eventos – ActionScript 3.0

Robot04 — Sat, 25 Apr 2009 12:26:48 +0000

Para enviar eventos usamos la clase EventDispatcher.
Se puede usar por herencia o por composición.

Después tenemos que crear el evento

Actionscript:

var event:Event = new Event("change");

o lo que sería mejor

Actionscript:

var event:Event = new Event(Event.CHANGE);

y después tenemos que distribuir (lanzar) el evento:

Actionscript:

dispatchEvent(event);

Para usarlo por composición tenemos que implementar IEventDispatcher
En el constructor nos creamos un nuevo EventDispatcher();

Actionscript:

dispatcher = new EventDispatcher(this); //donde this es el target que distribuye el evento.

Después en cada función definida por la Interfaz devolvemos el dispatcher:

Actionscript:

return dispatcher.dispatchEvent(event);
return dispatcher.hasEventListener(type);
return dispatcher.willTrigger(type);
return dispatcher.removeEventListener(type, listener, useCapture); etc

Cualquier DisplayObject hereda de DispatchEvent
Si queremos crear un evento propio nuestro tenemos que crear una nueva clase que herede de Event y que llame explicitamente al constructor y crear una constante estática con el nombre y valor que queramos como evento.

Actionscript:

public static const LIMITE_EXCEDIDO:String = "limite";

Después en la clase en la que vamos a usar el evento generamos un nuevo evento EjemploEvent

Actionscript:

var evento:EjemploEvent = new EjemploEvent(EjemploEvent.LIMITE_EXCEDIDO);
dispatchEvent(evento);

En la clase en la que nos vayamos a apuntar al evento

Actionscript:

foo.addEventListener(EjemploConEvento.LIMITE_EXCEDIDO, funcion);