Programming without shortcuts

1. Ctrl-Shift-R – Open any file in the project (really quickly!)

This is the most useful key shortcut for me, it’s a quick search for any files in your open projects and pretty much the only way I open files in my projects. Want to find a .fla file which was called something like UIButtons…, just type in *ui*fla. Or you want to open a source code file which was a State but you don’t remember exactly what, maybe StateMainMenu, type in *state*main*.as

Bonus! Ctrl-Shift-T – Open type, slightly less useful but searches only for classes. Includes built in libraries and such.

2. Ctrl-O – Jump to method/property (inside a source file). Official name is Quick Outline.

Instead of scrolling with your mouse wheel and looking for the right method, just press Ctrl-O and type the first letter or two of the method you’re looking for.

3. Ctrl-Shift-G – Find all references of this method/property. Highlight a methods name and press Ctrl-Shift-G.

Very useful for finding dependencies when refactoring and getting a good general view of how a class fits in with it’s surroundings. See who calls the constructor of your class or figure out easily why is the init() method being called twice.

Bonus! Ctrl-G will find all overrides of a method.

4. F3 OR Ctrl-Click – Open Declaration. Click or move your text input cursor to the top of a method call and press F3. Jumps you to the method declaration.

You have a line that reads

1

gameObject.update(deltaTime)

gameObject.update(deltaTime)

How do you find out what this update method does without first finding what class the gameObject is etc.? Either hold Ctrl and click on the update or press F3.

5. Ctrl-Tab – Switch to the next source file. Maybe obvious but it sure is handy.

6. Ctrl-D – Delete line. Just removes the current line you’re on. I use this a lot to remove excess line breaks or a satisfying way to destroy a block of code you don’t need any more.

7. Ctrl-Alt-Down/Up – Clone. Select some text, for example a MouseOver listener function. Press Ctrl-Alt-Down/Up to clone it above/below the method. In Flash you often write repetitive code like Mouse listener handlers and this way you can easily clone almost similar parts and just change the event names in the cloned block.

8. Ctrl-Alt-R – Smart rename. Sometimes you have to rename your classes or methods and the built-in Eclipse renaming system is much more efficient than doing it by hand.

9. Alt-Up/Down – Move selected lines one line up/down. This might be one of my personal quirks again but I like moving blocks of code around with this combo instead of cut-pasting for example. Give it a try!

That’s actually 11 already.

We need to listen to the TOUCH_BEGIN, TOUCH_MOVE and TOUCH_END events. If you’re familiar with mouse events already, you can think of BEGIN as MOUSE_DOWN and END as MOUSE_UP. The biggest difference between a mouse and touch screen is that there can be multiple touches so you need to keep track of which is which. If you got three fingers on the screen and only follow the events, it’s gonna be a mess.

How to keep track of the touches then? Each touch has touchPointID associated with it so whenever a touch event is fired, you can dig it up and compare it with all your known touch IDs. For now we will use the first touch to occur and assign that for our D-pad.

Before anything else, let’s set the input mode for the Multitouch class to Touch_Point. This means Flash will only track the basic touch events like when the touch begins, when it moves and when it ends.

1
2
3

private function init():void{
  Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}

private function init():void{
  Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}

Then add some basic listeners for Touch events.

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

// ... extends Sprite
 
private var dpadTouchID:int=-1;
 
public function init():void{
  Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
 
  addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin);
  addEventListener(TouchEvent.TOUCH_END, touchEnd);
}
 
private function touchBegin(e:TouchEvent):void{
  dpadTouchID = e.touchPointID;
}
 
private function touchEnd(e:TouchEvent):void{
  dpadTouchID = -1;
}

// ... extends Sprite

private var dpadTouchID:int=-1;

public function init():void{
  Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

  addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin);
  addEventListener(TouchEvent.TOUCH_END, touchEnd);
}

private function touchBegin(e:TouchEvent):void{
  dpadTouchID = e.touchPointID;
}

private function touchEnd(e:TouchEvent):void{
  dpadTouchID = -1;
}

Something I’ve noticed is that touchPointID’s always start from 0 and go up. We’ll use -1 to tell when there is no touch assigned to the D-Pad.

We shouldn’t assume that there’s only gonna be one touch because there probably will be atleast 2. We’ll add some checks to make sure we’re only looking at the correct touch and add a event listener for TOUCH_MOVE so we can track the movement of the finger.

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

// ... extends Sprite
 
private var dpadTouchID:int=-1;
 
public function init():void{
  addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin);
  addEventListener(TouchEvent.TOUCH_END, touchEnd);
  addEventListener(TouchEvent.TOUCH_MOVE, touchMove);
}
 
private function touchBegin(e:TouchEvent):void{
  if(dpadTouchID == -1){
    dpadTouchID = e.touchPointID;
  }
}
 
private function touchEnd(e:TouchEvent):void{
  if(e.touchPointID == dpadTouchID){
    dpadTouchID = -1;
  }
}
 
private function touchMove(e:TouchEvent):void{
//make sure a D-Pad touch is assigned at all, and then check if it matches
  if(dpadTouchID != -1){
    if(e.touchPointID == dpadTouchID){
      // success! let's print out the x and y!
      trace('D-Pad is moving!', e.stageX, e.stageY);
    }
  }
 
}

// ... extends Sprite

private var dpadTouchID:int=-1;

public function init():void{
  addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin);
  addEventListener(TouchEvent.TOUCH_END, touchEnd);
  addEventListener(TouchEvent.TOUCH_MOVE, touchMove);
}

private function touchBegin(e:TouchEvent):void{
  if(dpadTouchID == -1){
    dpadTouchID = e.touchPointID;
  }
}

private function touchEnd(e:TouchEvent):void{
  if(e.touchPointID == dpadTouchID){
    dpadTouchID = -1;
  }
}

private function touchMove(e:TouchEvent):void{
//make sure a D-Pad touch is assigned at all, and then check if it matches
  if(dpadTouchID != -1){
    if(e.touchPointID == dpadTouchID){
      // success! let's print out the x and y!
      trace('D-Pad is moving!', e.stageX, e.stageY);
    }
  }

}

The red area shows where the touch area is for the finger, right now its overlapping right and up arrows.

Ok, now we’re tracking the D-pad touch around. It’s still pretty much acting like a mouse though. We want to use the touch tracking for a D-pad so we’ll need to figure out based on those X and Y coordinates if the finger is on top of any of the D-Pad buttons. Just for examples sake, we’ll draw a simple graphic to represent the four directional buttons. The buttons are 100×100 pixels in size. The touch area we’ll be using is going to be 60 pixels so it’s small enough to still be precise but big enough so that it can cover two buttons at a time. This way you get 8 directions easily.

Right now we’re using the 60×60 square for the finger area but TouchEvent’s have some interesting properties you might want to look into later. For example; pressure, sizeX and sizeY. Those should come in handy when creating more sophisticated controls.

Next create some simple graphics for the buttons. We’ll name them upArrow, downArrow, leftArrow and rightArrow. They should be a descendant of the DisplayObject class for this.

You want to re-check which buttons your finger is touching whenever it has moved and when it’s first pressed into the screen. So we should modify touchMove(e) and touchBegin(e) to check that.

Stay tuned for part 2!

PLAY IT HERE!

It was immediately chosen as the game of the week(?) on pelikone.fi.
Play it here!

Master of Mot

Petra's Planet

Demolition Dude ( > 7 million plays)

Snailer

Ragdoll Goalkeeper ( > 6 million plays)

Flailery RPG (Android w/ AIR)

The first one is IndexedRadioButtonGroup which improves the spark(Flex4) RadioButtonGroup by adding methods that help you keep track and control the index of which radio button is selected. The main use for this is using radio buttons for navigation.

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

// IndexedRadioButtonGroup.as
package com.designoidgames.ui
{
    import flash.events.Event;
    import flash.utils.getTimer;
 
    import mx.core.IFlexDisplayObject;
 
    import spark.components.RadioButtonGroup;
 
    public class IndexedRadioButtonGroup extends RadioButtonGroup
    {
 
        public function IndexedRadioButtonGroup(document:IFlexDisplayObject=null)
        {
            super(document);
        }
 
        public function getCurrentIndex():int{
            for(var i:int=0;i
<this.numRadioButtons;i++){
                if(getRadioButtonAt(i) == this.selection){
                    return i;
                }
            }
 
            return -1;
        }
 
        public function selectIndex(index:int):void{
            selection = getRadioButtonAt(index);
            dispatchEvent(new Event(Event.CHANGE));
        }
 
        public function moveLeft(ignoreEnabled:Boolean=false):void{
            var index:int = getCurrentIndex();
            index = Math.max(0, index-1);
            if(getRadioButtonAt(index).enabled || ignoreEnabled){
                selectIndex(index);
            }
        }
 
        public function moveRight(ignoreEnabled:Boolean=false):void{
            var index:int = getCurrentIndex();
            index = Math.min(numRadioButtons-1, index+1);
            if(getRadioButtonAt(index).enabled || ignoreEnabled){
                selectIndex(index);
            }
        }
 
    }
}

// IndexedRadioButtonGroup.as
package com.designoidgames.ui
{
	import flash.events.Event;
	import flash.utils.getTimer;

	import mx.core.IFlexDisplayObject;

	import spark.components.RadioButtonGroup;

	public class IndexedRadioButtonGroup extends RadioButtonGroup
	{

		public function IndexedRadioButtonGroup(document:IFlexDisplayObject=null)
		{
			super(document);
		}

		public function getCurrentIndex():int{
			for(var i:int=0;i
<this.numRadioButtons;i++){
				if(getRadioButtonAt(i) == this.selection){
					return i;
				}
			}

			return -1;
		}

		public function selectIndex(index:int):void{
			selection = getRadioButtonAt(index);
			dispatchEvent(new Event(Event.CHANGE));
		}

		public function moveLeft(ignoreEnabled:Boolean=false):void{
			var index:int = getCurrentIndex();
			index = Math.max(0, index-1);
			if(getRadioButtonAt(index).enabled || ignoreEnabled){
				selectIndex(index);
			}
		}

		public function moveRight(ignoreEnabled:Boolean=false):void{
			var index:int = getCurrentIndex();
			index = Math.min(numRadioButtons-1, index+1);
			if(getRadioButtonAt(index).enabled || ignoreEnabled){
				selectIndex(index);
			}
		}

	}
}

The next two classes are the MovieClipButton and a static skin class for it. This is useful when you want to use embedded MovieClips, like when you have a lot of material inside the Flash IDE and you export it as an .SWC file into your project. The MovieClipButton class is extremely simple, in fact it only adds one method to the spark Button called 'source' (other spark components like Image use the same).

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

// MovieClipButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" useHandCursor="true" buttonMode="true">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
 
    <fx:Script>
        <![CDATA[
            public var source:Class;
        ]]>
    </fx:Script>
 
</s:Button>

// MovieClipButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
		  xmlns:s="library://ns.adobe.com/flex/spark"
		  xmlns:mx="library://ns.adobe.com/flex/mx" useHandCursor="true" buttonMode="true">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			public var source:Class;
		]]>
	</fx:Script>

</s:Button>

Then you supply a skin class for the button, this is the simplest one. It only tries to set the current frame of the MovieClip to a frame with the same name as the current state. Also if the MovieClip has a text label like most buttons do, you can change the text through MXML. Just make sure it's called "label" inside the MovieClip.

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

// StaticButtonSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
 
<!--- The default wireframe skin class for the Spark Button component.
        Skin classes in the wireframe package are useful for using as a simple base for a custom skin.
 
       @see spark.components.Button
 
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                    creationComplete="creationCompleteHandler(event)" alpha.disabled="0">
    <fx:Metadata>
        [HostComponent("com.designoidgames.ui.MovieClipButton")]
    </fx:Metadata>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            private var mc:MovieClip;
 
            override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void{
                super.stateChanged(oldState,newState,recursive);
 
                if(mc==null) return;
 
                mc.gotoAndStop(newState);
            }
 
            protected function creationCompleteHandler(event:FlexEvent):void{
                mc = new (hostComponent as MovieClipButton).source();
                mcHolder.addChild(mc);
 
                mc.gotoAndStop(currentState);
 
                if(hostComponent.label) mc.label.text = hostComponent.label;
            }
 
        ]]>
    </fx:Script>
 
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <s:SpriteVisualElement id="mcHolder"/>
 
</s:SparkButtonSkin>

// StaticButtonSkin.mxml
<?xml version="1.0" encoding="utf-8"?>

<!--- The default wireframe skin class for the Spark Button component.
        Skin classes in the wireframe package are useful for using as a simple base for a custom skin.

       @see spark.components.Button

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    				creationComplete="creationCompleteHandler(event)" alpha.disabled="0">
	<fx:Metadata>
		[HostComponent("com.designoidgames.ui.MovieClipButton")]
	</fx:Metadata>

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			private var mc:MovieClip;

			override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void{
				super.stateChanged(oldState,newState,recursive);

				if(mc==null) return;

				mc.gotoAndStop(newState);
			}

			protected function creationCompleteHandler(event:FlexEvent):void{
				mc = new (hostComponent as MovieClipButton).source();
				mcHolder.addChild(mc);

				mc.gotoAndStop(currentState);

				if(hostComponent.label) mc.label.text = hostComponent.label;
			}

		]]>
	</fx:Script>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

	<s:SpriteVisualElement id="mcHolder"/>

</s:SparkButtonSkin>

Demolition Dude has been released, first exclusively on Armor Games.
After a week, the viral version will be out without a sitelock.

Play it now.

The first game to be officially released by Designoid Games is going to be Demolition Dude this week or early next week. Stay tuned for that stuff.