Home » AIR »Android »CC »Flash »iOS »Mobile »Starling »Tutoriales » Currently Reading:

Starling “Hello World” con Flash Professional CC

febrero 6, 2014 AIR, Android, CC, Flash, iOS, Mobile, Starling, Tutoriales No Comments

5.00 / 5 5
1 / 5
2 / 5
3 / 5
4 / 5
5 / 5

En este tutorial mostraré como trabajar con Flash Professional CC y Starling.

El primer paso, evidentemente, será descargarnos el Framework de Starling desde su página oficial: http://gamua.com/starling/

Una vez descargado extreremos el archivo .SWC y lo colocaremos dentro de la carpeta de nuestro proyecto o en la carpeta donde incluyamos nuestra librería de Clases.

Desde Flash Profesional CC crearemos una nueva película que llamaremos “helloworld”. Para este ejemplo seleccionaremos tipo de Aplicación Android a 800x480px y 60 fotogramas.

Le asignaremos una Clase de documento “Main”.

Editaremos la configuración de Actionscript e incluiremos el archivo SWC dentro de la librería de Clases.

Ahora ya estamos listos para trabajar con Starling.

Lo primero que haremos es crear la clase del documento. Crearemos un archivo nuevo “Main.as” y escribiremos una clase que extienda de Sprite e importaremos en ella la Clase Starling:

package {
import flash.display.Sprite;
import starling.core.Starling;
//---------------------------------------------------------
public class Main extends Sprite {
private var __starling: Starling;
//---------------------------------------------------------
public function Main() {
}
}
}

A esta clase le añadiremos una función privada que instanciará Starling una vez el stage esté disponible en la aplicación.

A esta instancia de Starling le pasaremos como parámetros una clase “Game” que será la que contenga la funcionalidad de la aplicación, y que crearemos más tarde.

package {
import flash.display.Sprite;
import flash.geom.Rectangle;
import starling.core.Starling;
import starling.events.Event;
//---------------------------------------------------------
public class Main extends Sprite {
private var __starling: Starling;
private var __viewPort: Rectangle;
//---------------------------------------------------------
public function Main() {
if (stage) {
onAddedToStage();
} else {
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
}
private function onAddedToStage(event: Event = null): void {
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
__viewPort = new Rectangle(0, 0, this.stage.stageWidth, this.stage.stageHeight);
__starling = new Starling(Game, stage, __viewPort);
__starling.stage.stageWidth = __viewPort.width;
__starling.stage.stageHeight = __viewPort.height;
__starling.start();
}
}
}

Para acabar, añadiremos otra función privada que se ejecutará cuando la instancia de Starling esté creada y lista para ejecutarse.

En esta función ejecutaremos una función “Start” de la clase “Game”, que inicializará la aplicación.

package {
import flash.display.Sprite;
import flash.geom.Rectangle;
import starling.core.Starling;
import starling.events.Event;
//---------------------------------------------------------
public class Main extends Sprite {
private var __starling: Starling;
private var __viewPort: Rectangle;
//---------------------------------------------------------
public function Main() {
if (stage) {
onAddedToStage();
} else {
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
}
private function onAddedToStage(event: Event = null): void {
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
__viewPort = new Rectangle(0, 0, this.stage.stageWidth, this.stage.stageHeight);
__starling = new Starling(Game, stage, __viewPort);
__starling.stage.stageWidth = __viewPort.width;
__starling.stage.stageHeight = __viewPort.height;
__starling.start();
__starling.addEventListener(Event.ROOT_CREATED, onRootCreated);
}
private function onRootCreated(event: Event, game: * ): void {
removeEventListener(Event.ROOT_CREATED, onRootCreated);
game.start();
}
}
}

Ahora crearemos la clase “Game”.

Esta clase deberá extender de la clase Sprite de Starling (que es diferente de la clase Sprite de Flash)

package {
import starling.display.Sprite;
//---------------------------------------------------------
public class Game extends Sprite {
public function Game() {}
}
}

Añadiremos la función publica “start” donde incluiremos el código de nuestra aplicación. En este caso mostraremos un texto “Hello world” en pantalla.

package {
import starling.display.Sprite;
import starling.utils.*;
import starling.text.TextField;
//---------------------------------------------------------
public class Game extends Sprite {
public function Game() {}
public function start(): void {
var textField: TextField = new TextField(this.stage.stageWidth, this.stage.stageHeight, "Hello World", "Arial", 60);
addChild(textField);
}
}
}