Guía para principiantes de FlashDevelop - Basix

Hay dos conceptos erróneos sobre Flash Professional: en primer lugar, que hay que comprarlo para crear aplicaciones y juegos Flash; en segundo lugar, que es una herramienta decente para escribir código. Totalmente falso.

En este artículo, veremos cómo utilizar la aplicación gratuita de Windows FlashDevelop para trabajar en proyectos de Flash, tanto con Flash Professional como sin él.

¿Qué tiene de bueno FlashDevelop?

Puedes crear proyectos Flash con cualquier editor de texto, así que ¿qué hace que FlashDevelop sea tan especial? Aquí están mis seis características favoritas:

Finalización del código

Escribe someMovieClip.got y ofrecerá gotoAndPlay() y gotoAndStop() como posibles opciones a elegir. Puedes continuar escribiendo para reducir la elección, o utilizar las teclas de flecha para seleccionar una opción específica, y luego pulsar la tecla Tab para que FlashDevelop escriba automáticamente el resto de la palabra clave.

Además, FlashDevelop puede hacer coincidir el texto de cualquier parte de la palabra clave, por lo que someMovieClip.pla ofrecerá tanto play() como gotoAndPlay() como posibles opciones.

Importaciones automáticas

Escribe myMovieClip = new MovieClip(); y FlashDevelop añadirá automáticamente import flash.display.MovieClip; al lugar correcto en la parte superior del archivo de clase.

Esto también funciona para las clases que no están integradas en Flash, incluidas las clases que has escrito tú mismo. Si tu proyecto contiene la clase com.activetuts.examples.ExampleClass entonces puedes escribir var myExample:com.activetuts.examples.ExampleClass; y FlashDevelop importará la clase y acortará esa línea a var myExample:ExampleClass;. (Por supuesto, gracias a la finalización de código, solo necesitas escribir var myExample:com.act "Tab".ex "Tab".Cla "Tab";.

Nuestros tutoriales de alto nivel en Activetuts+ a menudo no mencionan explícitamente las declaraciones de importación, ya que asumimos que estás usando un editor de código que se encarga de esto por ti.

Creación automática de clases

Para crear esta clase com.activetuts.examples.ExampleClass, puedes hacer clic con el botón derecho del ratón en una carpeta dentro de FlashDevelop y seleccionar Add | New Class...:

The New Class dialog will appear:

Puedes escribir el nombre del paquete deseado en el campo Package (incluso si la estructura de carpetas \comactivetuts\examples\ no existe) y el nombre de la clase deseada en el campo Name. FlashDevelop creará entonces la estructura de carpetas (si es necesario) y un nuevo archivo AS, ExampleClass.as:

1

package com.activetuts.examples 

2

{

3

	/**

4

	 * ...

5

	 * @author MichaelJW

6

	 */

7

	public class ExampleClass

8

	{

9

10

		public function ExampleClass() 

11

		{

12

13

		}

14

15

	}

16

17

}

(Observa que aquí se ha añadido automáticamente un comentario de varias líneas con mi nombre y un espacio para escribir un poco de información sobre la clase... estupendo).

Si quieres extender una clase existente, como, por ejemplo, la clase Rectangle, puedes especificarlo en el cuadro de diálogo Nueva clase haciendo clic en el botón Browse... junto al campo Clase base:

Si marcas "Generar constructor que coincida con la clase base" le dará a la clase los mismos argumentos que la clase Rectángulo a la que extiende:

1

package com.activetuts.examples 

2

{

3

	import flash.geom.Rectangle;

4

5

	/**

6

	 * ...

7

	 * @author MichaelJW

8

	 */

9

	public class SuperRectangle extends Rectangle

10

	{

11

12

		public function SuperRectangle(x:Number = 0, y:Number = 0, width:Number = 0, height:Number = 0) 

13

		{

14

			super(x, y, width, height);

15

16

		}

17

18

	}

19

20

}

Del mismo modo, si especificas algunas interfaces para que la clase las implemente, puedes decirle a FlashDevelop que cree automáticamente funciones stub para cada uno de los métodos de esas interfaces.

Creación automática de objetos

¿Alguna vez has escrito el nombre de una variable o función antes de haberla creado? Yo lo hago todo el tiempo con las funciones de control de eventos al definir un oyente. Escribo algo como:

1

menuButton.addEventListener(MouseEvent.CLICK, onClickMenuButton);

...cuando aún no he definido la función manejadora onClickMenuButton().

Bueno, en FlashDevelop, todo lo que tienes que hacer es mover el cursor del texto sobre la palabra clave aún no definida y pulsar Ctrl-Shift-1 para que aparezca este menú:

Pulsa enter, y FlashDevelop creará automáticamente una nueva función, con el parámetro correcto establecido en la firma:

1

public function ExampleClass() 

2

{

3

	menuButton.addEventListener(MouseEvent.CLICK, onClickMenuButton);

4

}

5

6

private function onClickMenuButton(event:MouseEvent):void 

7

{

8

9

}

Puedes hacer lo mismo para las variables que no has definido, las variables privadas para las que quieres definir setters y getters públicos, y más. Ctrl+Mayús+1 es el atajo más poderoso de FlashDevelop; revisa esta página de la documentación oficial y los comentarios debajo de este artículo para saber más.

Refactorización del código

Digamos que has creado un método llamado refresh(), pero con el tiempo modificas lo que hace exactamente para que no solo refresque los datos sino que también los actualice. Para mantener el código correcto, quieres cambiar el nombre del método a update(), pero ¿cómo? No puedes simplemente hacer un Find/Replace y cambiar todas las instancias de refresh a update, y encontrar todos los lugares en todo el proyecto donde se llama a la función refresh() de esa clase te llevaría una eternidad.

Entre en el menú Refactor. Solo tienes que hacer clic con el botón derecho en cualquier función o nombre de variable y seleccionar Refactorizar | Renombrar...:

Todas las referencias a la función, en todo el proyecto (incluida la propia función), se renombrarán con el nombre que introduzca.

El menú Refactor te permite hacer más cosas, como eliminar declaraciones de importación que antes eran necesarias pero que ahora no se utilizan, aunque el método Rename... es el que más utilizo.

Seguimiento de tareas mediante comentarios

A veces, mientras se desarrolla, se encuentra un error que ocurre solo una vez entre un millón, en casos muy específicos, y no vale la pena pasar horas arreglándolo. Así que le das una solución rápida y haces una nota mental para volver a ella más tarde. Por supuesto, es difícil llevar la cuenta de las notas mentales...

En FlashDevelop, puedes hacer un seguimiento de estos escribiendo comentarios con el prefijo //FIXME:, y aparecerán en el panel de Tareas. Así, esto:

1

public function load():void

2

{

3

	//FIXME: Causes app to crash if loaded on Feb 29th during a solar eclipse

4

	displaySkyline();

...te da:

También es posible utilizar otros prefijos. //TODO: y //BUG: están soportados por defecto, pero puedes añadir los tuyos propios.

Gran cosa

De acuerdo, claro, Flash Professional hace mucho de eso. Pero FlashDevelop lo hace mejor; por ejemplo, el autocompletado de Flash CS3 requiere que se escriba la mayúscula exactamente igual que la palabra clave que se intenta encontrar, por lo que someMovieClip.gotoand no coincidirá con nada. El editor de Flash CS5 es mucho mejor que el de las versiones anteriores de Flash, pero todavía tiene un camino que recorrer.

Si se miran como una lista, puede que no parezcan gran cosa. ¿A quién le importa si puedes reducir unos milisegundos el tiempo que tardas en escribir una línea de código? ¿Qué tan difícil es agregar una declaración de importación usted mismo? ¿Qué hay de malo en escribir una función manejadora de eventos por tu cuenta?

Esto es perder el punto. Verás, todas estas tareas son tediosas; son trabajo sucio, no programación. Automatizarlas y racionalizarlas te libera para codificar, sin tener que pensar en escribir código. La interfaz de usuario de FlashDevelop ayuda de la misma manera: parece mucho más fácil y rápida de usar que la de Flash Professional (lo cual no es sorprendente, ya que se basa en la excelente interfaz de usuario de Visual Studio).

FlashDevelop tiene un montón de otras características, y como es de código abierto la comunidad crea a menudo más plugins y extensiones, dándole aún más funcionalidad. También puedes modificar la configuración para que siga tus propias convenciones de codificación, para que te sientas cómodo.

Ahora que ha visto lo que FlashDevelop puede hacer, veamos cómo empezar.

Instalación de FlashDevelop

Puedes instalar FlashDevelop como lo harías con cualquier otra aplicación de Windows. En primer lugar, descarga el último archivo de instalación desde el hilo correspondiente de este foro. También hay un enlace directo a la página de descarga en la página principal de FlashDevelop.

Una vez que lo hayas descargado, simplemente ejecuta el EXE y sigue las instrucciones de instalación. Si te pregunta si quieres instalar el SDK de Flex, di que sí.

Desgraciadamente, FlashDevelop no está soportado actualmente en ninguna otra plataforma que no sea Windows, pero es posible ejecutarlo en Mac OS X utilizando Parallels. Consulta este hilo del foro para obtener más detalles.

EDIT: La compatibilidad con Mac/Linux está en camino.

También debes instalar la última versión de Java runtime y la última versión de Flash Players.

Cuando ejecutes por primera vez FlashDevelop, se verá algo así:

Puede que no se vea exactamente igual, ya que he personalizado el diseño del mío, pero tendrá los mismos elementos básicos. Puedes elegir qué paneles mostrar seleccionándolos en el menú Vista, y arrastrarlos por la UI para distribuirlos a tu gusto. Muévelos hacia un borde de la ventana para que se ajusten a ese borde. Algunos paneles tienen un icono de "chincheta"; al hacer clic en él, los paneles se ocultan automáticamente cuando no se utilizan y vuelven a aparecer cuando se pasa el ratón por encima de su icono.

Hay tres formas principales de utilizar FlashDevelop:

1. Completamente por sí mismo, sin necesidad de Flash Professional
2. Junto con Flash Professional, utilizando Flash CS3+ para exportar activos mientras FlashDevelop se encarga de todo el proyecto
3. Como editor de código, utilizando Flash Professional para gestionar y compilar el proyecto

Diferentes flujos de trabajo serán adecuados para diferentes personas. Si ya estás utilizando Flash Professional para todos tus proyectos, probablemente te resulte más fácil seguir haciéndolo pero cambiar a FlashDevelop como tu principal editor de código (opción 3). Si no tienes Flash Professional, tal vez seas nuevo en Flash, puedes empezar usando FlashDevelop por sí mismo (opción 1). Si eres un codificador y trabajas con un diseñador que utiliza Flash Professional para la maquetación y la animación, entonces el uso de las dos herramientas una al lado de la otra os dará a cada uno lo que necesitáis (Opción 2). Los tres flujos de trabajo producen proyectos ligeramente diferentes, así que si trabajas con otros programadores, asegúrate de comprobar lo que es aceptable con ellos antes de causar potencialmente un desastre.

Personalmente, empecé con Flash Professional en solitario, luego me pasé rápidamente a la opción 3, y ahora utilizo la opción 1 o la 2 para mis propios proyectos (según convenga), y ocasionalmente necesito utilizar la opción 3 para trabajos independientes. Sin duda, merece la pena conocer las tres, así que las repasaremos una por una.

Opción 1: FlashDevelop solo

En este flujo de trabajo, no necesitas una copia de Flash Professional; utilizarás FlashDevelop para escribir todo el código, importar e incrustar todos tus activos (gráficos, sonidos, etc.) y compilar tu proyecto.

Configuración

Para que FlashDevelop pueda compilar un proyecto Flash, tendrás que instalar el Adobe Flex SDK gratuito. Hay un poco de confusión sobre esto, así que déjame aclararlo: usar el SDK de Adobe Flex no significa que tengas que usar el marco de trabajo de Adobe Flex o MXML; tampoco significa que tengas que usar Adobe Flex Builder (ahora llamado Adobe Flash Builder). En esta etapa, puedes pensar en el SDK de Adobe Flex como una herramienta que permite a FlashDevelop convertir tu código en un archivo SWF real de Flash.

Con suerte, habrás instalado el SDK de Flex como parte del proceso de instalación de FlashDevelop. Si es así, pasa a la sección Creación de un Nuevo proyecto. De lo contrario...

1. Descarga la "última versión de calidad de producción" de la página web del kit de desarrollo de software de Flex. (Obtén la versión etiquetada como "Adobe Flex SDK" o "Free SDK" en lugar de "Open Source Flex SDK"). Descomprímelo en algún lugar de tu disco duro; colócalo en algún lugar genérico, en lugar de en la carpeta de un proyecto Flash específico.
2. Ahora, en FlashDevelop, haz clic en Herramientas | Configuración del programa y selecciona AS3Context en la lista de la izquierda. En la sección Idioma | Ubicación del SDK de Flex, haz clic en el cuadro de texto y, a continuación, haz clic en el botón marcado "..." que aparece. Aparecerá un cuadro de diálogo del explorador de archivos; úsalo para navegar hasta la carpeta raíz del SDK de Flex. (Esta es la carpeta que contiene las subcarpetas llamadas "ant", "asdoc", "bin", etc.).
3. A continuación, todavía en la configuración del programa, selecciona FlashViewer de la lista de la izquierda. En la sección Misc | External Player Path, busque \runtimes\player\10.1\win\FlashPlayer.exe dentro de la carpeta raíz del Flex SDK. (Esto es correcto en el momento de escribir este artículo, cuando Flash Player 10.1 es la última versión. En el futuro, esto puede cambiar).
4. Cierra la configuración del programa.
5. Haz clic en Herramientas | Herramientas Flash | Generador de documentación | Configuración y establece la ubicación de ASDoc en el directorio \bin\ dentro de la carpeta raíz del SDK de Flex.
6. Haz clic en Guardar configuración y luego cierra la ventana del Generador de documentación de ActionScript.

Hay otras formas de configurar el SDK de Flex; consulta esta sección de la wiki oficial para obtener más detalles.

Creación de un nuevo proyecto

FlashDevelop está ahora listo para ser usado. Crea un nuevo proyecto haciendo clic en Proyecto | Nuevo Proyecto.... Aparecerá el siguiente diálogo:

¿Qué elegir? Bueno, "Flash IDE" se refiere a Flash Professional, así que no podemos utilizarlo. Los proyectos de AIR Projector son todos para crear aplicaciones de AIR independientes, en lugar de SWFs que puedan ejecutarse en una página web, así que ignóralos. "Proyecto de Flex 3" y "Proyecto de Flex 4" suenan bien, ya que estamos utilizando el kit de desarrollo de software de Flex, pero son para proyectos que utilizan un marco de trabajo de Flex, en lugar de solo el kit de desarrollo de software de Flex. Esto es útil para algunos proyectos, pero no es necesario, y está fuera del alcance de este tutorial.

La elección es entre "Proyecto AS3" y "Proyecto AS3 con Precargador"; son lo mismo, excepto que la última opción incluye todo el código básico y la configuración necesaria para una pantalla de carga. Selecciona "Proyecto AS3 con Precargador", luego introduce un nombre para tu proyecto, y selecciona una ubicación para los archivos.

Se crearán tres carpetas: bin, lib y src.

Para más información sobre esto, consulta el consejo rápido de Daniel Apt: Cómo organizar los archivos de tu proyecto Flash. En pocas palabras: los archivos de código van en \src\, los archivos SWF salen en \bin\.

Probar el proyecto

Si cargas \src\Preloader.as, verás varios // TODO comentarios, que marcan puntos donde puedes añadir tu propio código para mostrar, actualizar y ocultar un cargador personalizado. Una vez que todo el proyecto se ha cargado en el ordenador del usuario, se ejecutará la función startup(); esto creará una nueva instancia de la clase \src\Main.as, así que vamos a echar un vistazo a eso:

1

package 

2

{

3

	import flash.display.Sprite;

4

	import flash.events.Event;

5

6

	/**

7

	 * ...

8

	 * @author MichaelJW

9

	 */

10

	[Frame(factoryClass="Preloader")]

11

	public class Main extends Sprite 

12

	{

13

14

		public function Main():void 

15

		{

16

			if (stage) init();

17

			else addEventListener(Event.ADDED_TO_STAGE, init);

18

		}

19

20

		private function init(e:Event = null):void 

21

		{

22

			removeEventListener(Event.ADDED_TO_STAGE, init);

23

			// entry point

24

		}

25

26

	}

27

28

}

Sin entrar en demasiados detalles (ver este Consejo Rápido para un poco más de explicación sobre lo que sucede en esta clase), el comentario // punto de entrada es lo importante aquí. Esto marca el punto donde todo el código y los activos están completamente cargados y han comenzado a ejecutarse.

Podemos probar el proyecto añadiendo una simple sentencia trace() inmediatamente después de esta línea, así:

1

package 

2

{

3

	import flash.display.Sprite;

4

	import flash.events.Event;

5

6

	/**

7

	 * ...

8

	 * @author MichaelJW

9

	 */

10

	[Frame(factoryClass="Preloader")]

11

	public class Main extends Sprite 

12

	{

13

14

		public function Main():void 

15

		{

16

			if (stage) init();

17

			else addEventListener(Event.ADDED_TO_STAGE, init);

18

		}

19

20

		private function init(e:Event = null):void 

21

		{

22

			removeEventListener(Event.ADDED_TO_STAGE, init);

23

			// entry point

24

			trace("Project is running fine!");

25

		}

26

27

	}

28

29

}

Haz clic en Proyecto | Película de prueba y FlashDevelop compilará el código en un SWF, y luego ejecutará ese SWF. Aparecerá la ventana de Flash Player:

...pero estará en blanco, porque no le hemos dicho que muestre nada. Sin embargo, comprueba el panel de salida dentro de FlashDevelop (haz clic en Ver | Panel de salida si no está ya visible):

¡Genial!

Incorporación de activos

En Flash Professional, podemos añadir imágenes y sonidos a un proyecto Flash arrastrándolos a la biblioteca, y hacer referencia a ellos en el código estableciendo sus propiedades de enlace dentro de la biblioteca. En FlashDevelop, el proceso es un poco más largo; he aquí un resumen rápido:

Supongamos que tienes un JPEG, y quieres mostrarlo dentro del SWF. En primer lugar, muévela a la carpeta \lib\. Luego, en el panel Proyecto, haz clic con el botón derecho en la imagen y selecciona "Añadir a la biblioteca":

El nombre del archivo de la imagen se volverá azul para indicar que ahora está en la biblioteca.

En Main.as, encima de la función constructora, añade esta línea:

1

public class Main extends Sprite

2

{

3

	public var ActivetutsLogo:Class;

4

5

	public function Main():void

6

	{

7

		if (stage) init();

8

		else addEventListener(Event.ADDED_TO_STAGE, init);

9

	}

(Por supuesto, debes llamar a esta clase algo relevante para el archivo de imagen que está utilizando, en lugar de ActivetutsLogo).

Usaremos esta clase para contener el archivo de imagen en sí, como un Bitmap. Para enlazar las dos, inserta una nueva línea en blanco encima de public var ActivetutsLogo:Class;, mueve el cursor hasta ella, vuelve a hacer clic con el botón derecho del ratón sobre la imagen en el panel Proyecto y selecciona "Insertar en el documento". Se añadirá una nueva línea a la clase:

1

public class Main extends Sprite

2

{

3

[Embed(source='../lib/Activetuts.jpg')]

4

public var ActivetutsLogo:Class;

5

6

public function Main():void

7

{

8

	if (stage) init();

9

	else addEventListener(Event.ADDED_TO_STAGE, init);

10

}

Ahora has definido ActivetutsLogo como una clase que extiende Bitmap y contiene la imagen. (Es importante que la etiqueta [Embed] esté en la línea inmediatamente superior a la que declara la variable; así es como Flash sabe que las dos están vinculadas). Ahora puedes mostrar la imagen en el SWF. Para ello, muévete a la función init(), debajo de la sentencia trace() que has añadido antes, y añade estas líneas:

1

private function init(e:Event = null):void

2

{

3

	removeEventListener(Event.ADDED_TO_STAGE, init);

4

	// entry point

5

	trace("Project is running fine!");

6

	var activetutsBitmap:Bitmap = new ActivetutsLogo();

7

	addChild(activetutsBitmap);

8

}

Ejecuta el proyecto (Proyecto | Película de prueba) y deberías ver tu imagen dentro de Flash Player:

¡Éxito! Sigue los mismos pasos básicos para incrustar otros tipos de activos, como la música. Consulta esta sección de la documentación de Flex para obtener más detalles.

Ahora bien, si eres completamente nuevo en Flash, toda esa charla sobre las clases y demás probablemente haya pasado por encima de tu cabeza. ¡No te preocupes! Esta es una guía de FlashDevelop, más que de Flash o AS3, por lo que he omitido algunos detalles. Puedes recogerlos en otros tutoriales de Basix en el sitio.

Opción 2: FlashDevelop con Flash Professional Assets

Este flujo de trabajo es ideal si estás trabajando con un diseñador o animador de Flash que utiliza Flash Professional para crear tus activos. Básicamente, te permite incrustar las bibliotecas de uno o más FLA dentro de tu proyecto de FlashDevelop.

Creación de un nuevo proyecto

Crea un nuevo proyecto siguiendo exactamente las mismas instrucciones que para la opción 1, pero ignora la sección de incrustación de activos. Puedes incrustar activos utilizando ese método si lo prefieres, pero no es necesario.

Abre Flash Professional. Estoy usando Flash CS3, pero cualquier versión superior a ésta también funcionará. Crea un clip de película simple, que a su vez contiene otros clips de película; he creado un menú básico usando un fondo de degradado y algunos botones hechos con mi panel Buttonizer:

Dale al símbolo del menú un nombre de enlace de SimpleMenu. Dentro del símbolo, dale a cada botón un nombre de instancia relevante (yo he optado por startButton, stopButton e infoButton).

Guarda el FLA en la carpeta \lib\ de tu proyecto. Ahora, todavía en Flash Professional, haz clic en Archivo | Configuración de publicación..., haz clic en la pestaña Flash, y marca la casilla "Exportar SWC". En la pestaña Formatos, desmarca todas las casillas excepto la de Flash. Presiona OK, y luego haz clic en Archivo | Publicar. Tu carpeta \lib\ de ahora en adelante contendrá un FLA, un SWF, y un SWC.

Añade el SWC a tu proyecto FlashDevelop

El SWC es la clave de este flujo de trabajo. Es un archivo que contiene la biblioteca del FLA, en un formato que FlashDevelop y el SDK de Flex pueden leer.

(De acuerdo, técnicamente no contiene necesariamente toda la biblioteca, ya que puedes forzar que ciertos símbolos no se exporten cambiando ciertas configuraciones, pero eso no es importante ahora).

Cambia a FlashDevelop y haz clic con el botón derecho del ratón en el SWC de la carpeta \lib\. Haz clic en "Añadir a la biblioteca".

Hasta aquí, es como incrustar un JPEG, ¿verdad? Bueno, aquí es donde las cosas cambian. En primer lugar, fíjate en lo que ocurre si haces clic en el pequeño signo más que aparece junto al SWC:

Podemos ver todas las clases disponibles para el FLA, y todos los símbolos a los que se les dio un nombre de enlace. Los botones no están ahí, pero no te preocupes.

Vamos a añadir una instancia del menú al SWF. Añade dos nuevas líneas inmediatamente después de la sentencia trace() que has añadido antes:

1

private function init(e:Event = null):void

2

{

3

	removeEventListener(Event.ADDED_TO_STAGE, init);

4

	// entry point

5

	trace("Project is running fine!");

6

	var menu:SimpleMenu = new SimpleMenu();

7

	addChild(menu);

8

}

Ejecuta el proyecto:

Excelente. Hemos conseguido tomar el menú directamente del archivo SWC, añadirlo a un proyecto Flash independiente y mostrarlo en el SWF de ese proyecto.

Como puedes ver, los botones permanecen en el menú, aunque no podamos verlos dentro del archivo SWC. Esto se debe a que los botones están dentro del objeto SimpleMenu; todavía tenemos acceso completo a ellos a través de FlashDevelop, aunque solo a través del SimpleMenu. Esto es muy útil, por ejemplo, inmediatamente debajo de las dos líneas de código que acabas de añadir, escribe menu.button:

Asumiendo que has nombrado tus botones de forma similar a la mía, verás que todos existen como propiedades del objeto menu, porque les hemos dado nombres de instancia. Esto significa que podemos acceder a todo desde el SWC a través de código, así:

1

private function init(e:Event = null):void

2

{

3

	removeEventListener(Event.ADDED_TO_STAGE, init);

4

	// entry point

5

	trace("Project is running fine!");

6

	var menu:SimpleMenu = new SimpleMenu();

7

	addChild(menu);

8

	menu.startButton.addEventListener(MouseEvent.CLICK, onClickStart);

9

	menu.stopButton.addEventListener(MouseEvent.CLICK, onClickStop);

10

	menu.infoButton.addEventListener(MouseEvent.CLICK, onClickInfo);

11

}

12

13

private function onClickStart(a_event:MouseEvent):void 

14

{

15

	//do something

16

}

17

18

private function onClickStop(a_event:MouseEvent):void 

19

{

20

	//do something else

21

}

22

23

private function onClickInfo(a_event:MouseEvent):void 

24

{

25

	//do a third thing

26

}

Esto separa el FLA del código. El diseñador podría revisar completamente los gráficos, y mientras haya un símbolo SimpleMenu que contenga un startButton, un stopButton y un infoButton, el proyecto seguirá funcionando. Además, el proyecto puede contener múltiples SWCs; cuando se construye un juego, un diseñador podría trabajar en un FLA de interfaz de usuario que contenga diseños de menú, mientras que otro trabaja en un FLA diferente que contenga animaciones de personajes. Los fondos podrían ser JPEG de alta resolución, añadidos al proyecto mediante la etiqueta [Embed()]. Es un gran flujo de trabajo.

Para obtener más información sobre los SWC, consulta este tutorial.

Opción 3: FlashDevelop como editor de código de Flash Professional

El tercer flujo de trabajo es el más sencillo. En este escenario, FlashDevelop se utiliza simplemente como editor de los archivos AS de un proyecto de Flash Professional. Sigue obteniendo la mayoría de las ventajas de las funciones de FlashDevelop (finalización del código, importaciones automáticas, etc.), pero depende de Flash Professional para compilar el proyecto y mantener la biblioteca.

Creación de un nuevo proyecto

Es muy sencillo crear un proyecto para este flujo de trabajo. En FlashDevelop, haz clic en Project | New Project y selecciona Flash IDE Project.

Elige una carpeta en blanco y dale un nombre al proyecto. Luego, dentro de ese proyecto, crea un nuevo FLA.

¡Eso es todo! Configura tu estructura de carpetas como quieras, y no olvides que, aunque vayas a usar FlashDevelop para editar todas tus clases, necesitarás enlazar tu clase documento con tu FLA.

Cuando ejecutes el proyecto en FlashDevelop, cambiará a Flash Professional y publicará el SWF. Deberías seguir recibiendo la salida de las sentencias trace() en el panel Output de FlashDevelop.

Uso de FlashDevelop para un proyecto existente

Si ya has empezado un proyecto de Flash Professional sin FlashDevelop, puedes seguir usando FlashDevelop como tu editor de código principal. Sigue los mismos pasos que en el caso anterior, creando un nuevo proyecto Flash IDE dentro de FlashDevelop, pero en lugar de seleccionar una carpeta en blanco, selecciona la carpeta donde se encuentran tus archivos FLA y otros archivos del proyecto. Se te dará una advertencia:

...pero puedes ignorar esto con seguridad; FlashDevelop no sobrescribirá ningún archivo existente (a menos que ya tengas un proyecto FlashDevelop en esa carpeta). Haz clic en OK, y obtendrás el mismo resultado que si hubieras estado usando FlashDevelop desde el principio del proyecto.

Donar

FlashDevelop es completamente gratuito y de código abierto. Esto es posible gracias a las donaciones, así que si lo encuentras útil, considera enviar al equipo unos cuantos dólares. Actualmente están realizando una campaña de donaciones mientras se preparan para la versión 4.0, así que estoy seguro de que cualquier cosa que puedas aportar será muy apreciada en estos momentos.

¿Alguna idea?

Eso cubre lo básico, pero sé que hay mucho más en FlashDevelop. ¿Qué características y plugins esenciales me he perdido? Por favor, compártalo en los comentarios :)