This is a tutorial for people looking to extend the HYPE Framework beyond its current set of abilities. In this tutorial you will learn how to make your own “layout class” by extending and implementing existing elements of the hype framework. The layout class you will be constructing will be used to place display objects on the stage, in a circular layout based on a given radius. You will need to download the latest version of the HYPE Framework in order to follow along, as well you will need basic knowledge of as3 and object oriented programming.

Step 1:
Create a new class file named CircleLayout.as. This class will extend the class AbstractLayout and implement the interface ILayout. Because we are implementing the ILayout interface, our class will need to have a method named getNextPoint() that returns a Point. Since we have also extended the AbstractLayout class we will inherit the applyLayout(object:DisplayObject) method, this is the method that will be called when we want to use our new layout class to position a display object. When you are finished this step, your CircleLayout class should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package {
	import hype.framework.layout.AbstractLayout;
	import hype.framework.layout.ILayout;
 
	import flash.geom.Point;
 
	public class CircleLayout extends AbstractLayout implements ILayout {
		public function CircleLayout() {
 
		}
 
		public function getNextPoint() : Point {
 
			var pt:Point = new Point();
 
			return pt;
		}
	}
}

Step 2:
The next thing you will need to do is fill out the constructor with the parameters that your layout class will require. This will be different for every layout class that you are making, simply because each layout you will be making will hopefully not be the same. Depending on what you are requiring the class to do in the getNextPoint() method or others in the class you will need to supply your layout with different information. For the purpose of this tutorial our class will require four parameters: radius:Number, angleMultiplier:Number, offsetX:Number, offsetY:Number. The radius parameter will supply our class with a number to use while calculating the radius of our layout circle. The angleMultiplier parameter will be used to tell our calculation how far apart (in degrees) that our display objects should be spaced. The offsetX and offsetY parameters will be used to offset the calculation for positioning on screen. By default the centre of the circle is calculated at x:0, y:0, but by using the offset you can change this centre point. In order to make sure that these values are remembered with in the class you will have to define and instantiate several variables with in your class. When you are finished your class should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package {
	import hype.framework.layout.AbstractLayout;
	import hype.framework.layout.ILayout;
 
	import flash.geom.Point;
 
	public class CircleLayout extends AbstractLayout implements ILayout {
 
		private  var _radius : Number;
		private  var _angleMultiplier : Number;
		private  var _offsetX : Number;
		private  var _offsetY : Number;
 
		public function CircleLayout(radius:Number, angleMultiplier:Number, offsetX:Number = 0, offsetY:Number = 0) {
 
			_radius = radius;
			_angleMultiplier = angleMultiplier;
			_offsetX = offsetX;
			_offsetY = offsetY;
 
		}
 
		public function getNextPoint() : Point {
 
			var pt:Point = new Point();
 
			return pt;
		}
	}
}

Step 3:
Now it is time to get to the fun stuff, writing the code for the getNextPoint() method. This method controls all of the logic for the layout class, and will determine where your display objects are placed when implementing the layout in your application. For this tutorial we are going to make the getNextPoint method calculate a point on a circle using the _radius and _angleMultiplier variables that we set in our classes constructor. Please keep in mind that this method will need to be customized for each layout class that you write. In this tutorial in order for our getNextPoint method to work properly we will need to put one more variable in our class, and that is used to count the current number of the point being requested. This variable will increment as each point is requested and we will call it _index. We will be using the polar method of the Point class to calculate the position of the display object. After you have completed this step you code should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

package {
	import hype.framework.layout.AbstractLayout;
	import hype.framework.layout.ILayout;
 
	import flash.geom.Point;
 
	public class CircleLayout extends AbstractLayout implements ILayout {
 
		private  var _index : int = 0;
		private  var _radius : Number;
		private  var _angleMultiplier : Number;
		private  var _offsetX : Number;
		private  var _offsetY : Number;
 
		public function CircleLayout(radius:Number, angleMultiplier:Number, offsetX:Number = 0, offsetY:Number = 0) {
 
			_radius = radius;
			_angleMultiplier = angleMultiplier;
			_offsetX = offsetX;
			_offsetY = offsetY;
 
		}
 
		public function getNextPoint() : Point {
 
			var pt:Point = new Point();
 
			pt = Point.polar(_radius, _index * _angleMultiplier);
			++_index;
 
			return pt;	
 
		}
	}
}

Step 4:
This step will not always be necessary when creating a layout class, but it is a very good object oriented example of overriding an inherited method. I will not go into detail of overriding methods here, but for more information check out your good friend google. For the purpose of the CircleLayout class we will need to override the applyLayout(object:DisplayObject) method that the class inherits from the AbstractLayout class. This needs to be done because by default the centre point for our circle calculation is x:0 y:0. In order for us to offset the circle layout to our desired centre point we will add our offsets to the display objects x and y positions. When you are finished this step your class should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

package {
	import hype.framework.layout.AbstractLayout;
	import hype.framework.layout.ILayout;
 
	import flash.display.DisplayObject;
	import flash.geom.Point;
 
	public class CircleLayout extends AbstractLayout implements ILayout {
 
		private  var _index : int = 0;
		private  var _radius : Number;
		private  var _angleMultiplier : Number;
		private  var _offsetX : Number;
		private  var _offsetY : Number;
 
		public function CircleLayout(radius:Number, angleMultiplier:Number, offsetX:Number = 0, offsetY:Number = 0) {
 
			_radius = radius;
			_angleMultiplier = angleMultiplier;
			_offsetX = offsetX;
			_offsetY = offsetY;
 
		}
 
		public function getNextPoint() : Point {
 
			var pt:Point = new Point();
 
			pt = Point.polar(_radius, _index * _angleMultiplier);
			++_index;
 
			return pt;	
 
		}
 
		public override function applyLayout(object:DisplayObject):void {
 
			var pt:Point = getNextPoint();
 
			object.x = pt.x + _offsetX;
			object.y = pt.y + _offsetY;
 
		}
 
	}
}

Step 5:
Your CircleLayout class is now complete! It is time to implement it along with a few other classes from the hype frame work and test everything out. The below code is an example of how you can use your new circle layout class. Click on the image to see the live swf.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

package {
	import hype.extended.color.ColorPool;
	import hype.framework.core.TimeType;
	import hype.framework.rhythm.SimpleRhythm;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	/**
	 * @author Michael Svendsen
	 */
	public class CircleLayoutTest extends Sprite {
 
		private  var _container : Sprite;
		private  var _cl:CircleLayout;
		private  var _sr : SimpleRhythm;
		private  var _cp : ColorPool;
 
		private  var _curItem:int = 0;
		private  const MAX_ITEMS:int = 38;
 
		public function CircleLayoutTest() {
 
			addEventListener(Event.ADDED_TO_STAGE, _init);
 
		}
 
		private function _init(e : Event) : void {
 
			_container = new Sprite();
			addChild(_container);
 
			_cl = new CircleLayout(150, 18, 275, 200);
 
			_cp= new ColorPool(0xDB4A44,0x4D3047,0x913C45,0x8C2E2E,0x6E3647,0x301A2A,0x372C48,0x562635,0xA54045,0x382235,0x492436,0x461B27,0x642835,0x7A2727,0x69242A,0x742A33,0x51181D,0x6E171A,0xA03633,0x57222B,0x8B2B1D,0x621D20,0x461F2E,0x712120,0x3C161F,0x7E3039,0xA5331A,0xCA4744,0x5F3246,0x7E3946,0xB94242,0x3C1F25);
 
 
			_sr = new SimpleRhythm(_createObject);
			_sr.start(TimeType.TIME, 250);
 
		}
 
		public function _createObject(rhythm:SimpleRhythm) : void {
 
			var circ:Sprite = new Sprite();
			with(circ.graphics) {
 
				beginFill(0x000000);
				drawCircle(5, 5, 15);
				endFill();
 
			}
 
			_cl.applyLayout(circ);
 
			_container.addChild(circ);
 
			_curItem ++;
 
			if( _curItem >= MAX_ITEMS) {
				rhythm.stop();
				_cp.colorChildren(_container);
			}
 
		}
 
	}
}