Are you using FlashDevelop and want to get start using Starling Framework? Here’s a quick tip how to setup your first Starling project!
Note: I’m using the latest FlashDevelop4 RC-1
- Installed the Flex SDK. I install the latest Flex SDK 4.5.1
- Make sure you have download player playerglobal.swc here and add it to your Flex SDK folder ({flex_sdk_folder}\frameworks\libs\player\11.0)
- Download the Starling Framework. You can get it from github or download from Starling website
- Create a new AS3 project.
- On Project Property, change output Flash Platform to version 11.0
- On project property, add -swf-version=13 into additional compiler options
- Add Starling folder ({starling_folder}\starling\src\) as ClassPaths
- Create a new Class (just named it Screen1 or any name…) and extends it from class Starling’s Sprite (starling.display.Sprite). So far leave it empty:
package
{
import starling.display.Sprite;
/**
* Dummy Starling Sprite
* @author Abiyasa
*/
public class Screen1 extends Sprite
{
public function Screen1()
{
super();
}
}
}
- Modify your Main.as to add Starling object:
package
{
import flash.display.Sprite;
import flash.events.Event;
import starling.core.Starling;
/**
* ...
* @author Abiyasa
*/
public class Main extends Sprite
{
private var _starling:Starling;
public function Main():void
{
super();
this.addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
_starling = new Starling(Screen1, this.stage);
_starling.start();
}
}
}
- If you compile your project now, you’ll get 2 error messages:
C:\dev\starling\starling\src\starling\events\TouchMarker.as(22): col: 9: Error: unable to resolve ‘media/textures/touch_marker.png’ for transcoding
C:\dev\starling\starling\src\starling\events\TouchMarker.as(22): col: 9: Error: Unable to transcode media/textures/touch_marker.png.
- The starling framework is trying to get media folder, which is available at {starling_folder}\starling\media\. Unfortunately, you cannot have linked folder on FlashDevelop, so what I did is to copy the folder media to {starling_folder}\starling\src\starling\events\. Note: please let me know if you know better solution 😉
- Now compile your project! Everything should be OK and an empty blank screen will be displayed.
- Empty screen is boring, so let’s add something to our screen. Modify our Screen1:
package
{
import starling.display.Quad;
import starling.display.Sprite;
import starling.events.Event;
import starling.text.TextField;
import starling.utils.VAlign;
import starling.utils.HAlign;
/**
* ...
* @author Abiyasa
*/
public class Screen1 extends Sprite
{
protected var _box:Sprite;
public function Screen1()
{
super();
this.addEventListener(Event.ADDED_TO_STAGE, init);
}
protected function init(event:Event):void
{
this.removeEventListener(Event.ADDED_TO_STAGE, init);
createBox();
}
protected function createBox():void
{
// create box sprite
_box = new Sprite();
// create quad (box shape)
var q:Quad = new Quad(128, 128, 0x009ee1);
_box.addChild(q);
// add text
var text:TextField = new TextField(100, 100, "Hello World", "Verdana", 16, 0xFFFFFF);
text.vAlign = VAlign.TOP;
text.hAlign = HAlign.LEFT;
text.x = 10;
text.y = 10;
_box.addChild(text);
this.addChild(_box);
_box.x = 100;
_box.y = 100;
}
}
}
Hello Starling
- Click here to see the result/demo. You can download the source code here
- Enjoy 😉
Bonus: Starling with animation. source code included
