Encontronazos con ActionScript 3: Creando un hola mundo

Este artículo es la parte 3 de 6 de la serie Encontronazos con ActionScript 3

0-presentacion

Siguiendo con la idea de esta serie de artículos, vamos a hacer el programa más pequeño posible en ActionScript 3 (AS3) que muestre el fundamento de la programación en este lenguaje. Considero que AS3 es una forma de programar para SWF muy superior a AS2.  Una nota aparte, creo que no hay que despreciar a AS2, pues lo seguiremos viendo durante mucho tiempo en la forma de Flash Lite u otro tipo de contenido.

Este artículo requiere tener algunas nociones de programación. Manejar ActionScript 2 es opcional.

En el artículo anterior les expliqué cómo se establecía un ambiente de desarrollo con FlashDevelop y el SDK gratuito de Flex. Una buena noticia que no había anunciado en aquel entonces es que también es posible montar este mismo ambiente en Linux: el SDK viene de caja para funcionar con Linux, y FlashDevelop se puede (con unos trucos) ejecutar para este sistema operativo. Así que no hay excusas para no desarrollar para el pingüino 🙂 .

Manos a la obra

Vamos a hacer un simple SWF que muestre un cuadro de texto. Lo primero que haremos en FlashDevelop será crear un proyecto nuevo en el que irá nuestro código. Hacemos click en Create New Project para esto.

1-create-project

Pondremos el nombre del proyecto, que lo titularemos «HolaMundo». La ubicación del proyecto dependerá mucho de la configuración de tu máquina, pero yo recomiendo tener una carpeta con todos los proyectos.

2-new-project

Puede que parezca que hacer un proyecto sea demasiado para un simple HolaMundo. Además que en Flash es simplemente cuestión de crear un .fla. Pero el hecho es que este tipo de organización ayuda mucho en el futuro. Yo en el pasado ya he tenido muchos casos de proyectos en Flash qeu vuelvo a abrir y tengo un amasijo de imágenes y .fla en distintas revisiones. Créeme que soy responsable al afirmar que esto te va a ayudar. Palabra de programador.

Una vez creado el proyecto veremos que ya FlashDevelop había abierto un archivo nuevo. Vamos a darle nombre de una vez a este archivo guardándolo. En este archivo lo guardaremos específicamente con el nombre de «HolaMundo.as». Tiene importancia y luego veremos por qué.

Dentro de HolaMundo.es escribiremos el siguiente código:

package {
    import flash.display.MovieClip;
    import flash.text.TextField;
    public class HolaMundo extends MovieClip {
        public function HolaMundo() {
            var c : String = "Hola Mundo"
            agregarTexto(c);
        }
        private function agregarTexto(cadena:String) : void {
            var textField:TextField = new TextField();
            textField.text = cadena;
            textField.x = 10;
            textField.y = 10;
            stage.addChild(textField);
        }
    }
}

Ahora abriremos las propiedades del proyecto haciendo click secundario sobre el proyecto HolaMundo (AS3), y seleccionado la opción Properties… en el menú desplegable. En la primera pestaña llamada Output, tendremos especial cuidado de nombrar el archivo de salida en la opción Output File.

3-project-properties

Cerraremos el cuadro presionando OK. Ahora probaremos la película abriendo el menú Project -> Test Movie.

4-test-movie

Si sale una ventana pidiéndote abrir la configuración del contexto de AS3, significa que no le has indicado a FlashDevelop dónde está el compilador de Flex. Vuelve al artículo anterior para asegurarte que lo has hecho bien.

5-as3-context

Si todo va bien, vas a ver en una nueva pestaña la película que hemos creado, un SWF con un cuadro de texto que dice «Hola Mundo»:

6-hola-mundo

¿Qué hemos hecho?

Con el modelo de ActionScript 3, ahora tenemos un MovieClip base (en Flash CS3 se llama Document Class). Este MovieClip es una clase que define un montón de cosas que nos permiten reproducir animaciones como las que hacíamos en Flash. En este caso lo usaremos como contenedores para mostrar gráficos en pantalla.

En este ejemplo sólo he creado un objeto de tipo cuadro de texto (TextField), le he puesto contenido, y le he asignado una posición. Un TextField es uno de los tantos tipos de objetos gráficos que se pueden incluir en una película. Me incliné por él debido a que es simple de utilizar y demuestra rápidamente el punto de crear objetos gráficos y agregarlos al MovieClip. Veremos en otro artículo que la adición de otros objetos gráficos es muy similar.

Queda entonces explicar qué significa el objeto stage dentro del código. El MovieClip base está unido a un objeto gráfico especial que representa la ventana donde se reproduce el SWF. Este objeto es el Stage, y la ventaja de definirlo así consiste en que el stage es accesible desde cualquier punto de la jerarquía de MovieClips. Esta jerarquía la expliqué en un artículo sobre Display Lists hace algún tiempo.

En un próximo artículo haremos algo un poco más complicado, creando formas y figuras y animándolas a través de código.

Navegar la seriePost anterior en la seriePost anterior en la seriePróximo post en la serie

10 comentarios en «Encontronazos con ActionScript 3: Creando un hola mundo»

  1. Hola Ciro, Gracias por la ayuda xD

    Cuando intento hacer el Test Movie me sale lo siguiente:

    "In Order to build this project, you must mark the AS or MXML entry points as "Always Compile" in the project Tree."

    Como hago?

    Saludos y que tengas una felices fiestas…

  2. Sabía que había olvidado algo 😛 En la barra lateral 'Project' haz click secundario sobre HolaMundo.as y marca la opción "Always Compile". Esta es la manera que tiene FlashDevelop de saber cual es la clase inicial.

  3. Hay algunas similitudes con AS2, pero el fondo ha cambiado. Recuerda que para crear películas tenías que usar createEmptyMovieclip() o duplicateMovieclip(). Ahora la cuestión es más explícita: creas los objetos con new y luego los insertas dentro de otros movieclips. Agregándolo al Stage lo haces visible.

  4. Ciro!!! chamo…. de verdad yo te felicito por administrar bien tu tiempo para brindar esta clase de contenido en español a la gente. Yo comencé uno pero como ando con la tesis y SDL, prefiero echar código y después de madurar un poco es que ire escribiendo sobre la experiencia…. sino, no servirá de nada.

    Bueno chamo… feliz navidad… Y estamos hablando por ahí =) jeje

Deja un comentario