Note: This article is about programming tip for Adobe Flex 😉

ItemRenderer is a great feature to render List or DataGroup items. All items wil be rendered and if you want to remove an item from list, then you have to delete it. But what if you don’t want to remove the item from the list but you don’t want it to be displayed?

I couldn’t find any direct way to do this. I tried to Google this but found nothing related so I decided to make some experiments. After several times failing, I found out that you can ‘hide’ an item on DataGroup/List from being rendered by using ItemRendererFunction and an empty Item Renderer (renderer with height=0).

Click more if you want to read the details on how I did it. As usual, you can see the demo and download the source code below 😉

Continue reading →

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