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
Starling “Hello World” con Flash Professional CC

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/

starling003

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.

starling004

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”.

Captura de pantalla 2014-02-07 a la(s) 02.24.07

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

starling001

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:

  1. package {
  2. import flash.display.Sprite;
  3. import starling.core.Starling;
  4. //---------------------------------------------------------
  5. public class Main extends Sprite {
  6. private var __starling: Starling;
  7. //---------------------------------------------------------
  8. public function Main() {
  9. }
  10. }
  11. }

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.

  1. package {
  2. import flash.display.Sprite;
  3. import flash.geom.Rectangle;
  4. import starling.core.Starling;
  5. import starling.events.Event;
  6. //---------------------------------------------------------
  7. public class Main extends Sprite {
  8. private var __starling: Starling;
  9. private var __viewPort: Rectangle;
  10. //---------------------------------------------------------
  11. public function Main() {
  12. if (stage) {
  13. onAddedToStage();
  14. } else {
  15. addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
  16. }
  17. }
  18. private function onAddedToStage(event: Event = null): void {
  19. removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
  20. __viewPort = new Rectangle(0, 0, this.stage.stageWidth, this.stage.stageHeight);
  21. __starling = new Starling(Game, stage, __viewPort);
  22. __starling.stage.stageWidth = __viewPort.width;
  23. __starling.stage.stageHeight = __viewPort.height;
  24. __starling.start();
  25. }
  26. }
  27. }

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.

  1. package {
  2. import flash.display.Sprite;
  3. import flash.geom.Rectangle;
  4. import starling.core.Starling;
  5. import starling.events.Event;
  6. //---------------------------------------------------------
  7. public class Main extends Sprite {
  8. private var __starling: Starling;
  9. private var __viewPort: Rectangle;
  10. //---------------------------------------------------------
  11. public function Main() {
  12. if (stage) {
  13. onAddedToStage();
  14. } else {
  15. addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
  16. }
  17. }
  18. private function onAddedToStage(event: Event = null): void {
  19. removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
  20. __viewPort = new Rectangle(0, 0, this.stage.stageWidth, this.stage.stageHeight);
  21. __starling = new Starling(Game, stage, __viewPort);
  22. __starling.stage.stageWidth = __viewPort.width;
  23. __starling.stage.stageHeight = __viewPort.height;
  24. __starling.start();
  25. __starling.addEventListener(Event.ROOT_CREATED, onRootCreated);
  26. }
  27. private function onRootCreated(event: Event, game: * ): void {
  28. removeEventListener(Event.ROOT_CREATED, onRootCreated);
  29. game.start();
  30. }
  31. }
  32. }

Ahora crearemos la clase “Game”.

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

  1. package {
  2. import starling.display.Sprite;
  3. //---------------------------------------------------------
  4. public class Game extends Sprite {
  5. public function Game() {}
  6. }
  7. }

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.

  1. package {
  2. import starling.display.Sprite;
  3. import starling.utils.*;
  4. import starling.text.TextField;
  5. //---------------------------------------------------------
  6. public class Game extends Sprite {
  7. public function Game() {}
  8. public function start(): void {
  9. var textField: TextField = new TextField(this.stage.stageWidth, this.stage.stageHeight, "Hello World", "Arial", 60);
  10. addChild(textField);
  11. }
  12. }
  13. }

Si publicamos el documento podremos ver la aplicación en funcionamiento.

starling006

Puedes descargar los ficheros del tutorial:

*Debes de estar registrado para ver este contenido. Login | Registro

Compártelo:

Starling “Hello World” con Flash Professional CC
Visto 13.746 veces

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Publicar contenido WebGL con Flash CC 2014

17 oct 2014

Estos tutoriales muestran cómo hacer animaciones Flash exportarlas como animaciones WebGL. Esto permite que se visualicen en cualquier navegador que soporte WebGL sin necesidad de utilizar un plugin.     Para más información sobre cómo empezar con WebGL y Flash, consulte Creación y publicación de documentos WebGL en Flash Professional.   WebGL Runtime API   Este video enseña la API de tiempo de ejecución de Flash WebGL, que le permite agregar interactividad a las animaciones de WebGL. La API de JavaScript puede agregar, eliminar y controlar los elementos de la escena, lo que le permite crear animaciones de respuesta para …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com