Skill Sets:

Home

  1. Intro to Flash
  2. User Input
  3. Fancy Controls 1
  4. Control Flow: if
  5. Control Flow: loop
  6. Nested Structures
  7. Graphics 1
  8. Arrays
  9. Strings
  10. Mouse Movement
  11. Functions
  12. Grouping Images
  13. Graphical Support
  14. Animation
  15. Physics
  16. 2010 Grade 10 Summative showcase
  17. 2010 Grade 11 Summatives
  18. 2011 Grade 10 Summatives
  19. 2011 Grade 11/12 Summatives
  20. Sept 2011 Grade 11 Summatives
  21. Sept 2011 Grade 10 Summatives
  22. Feb 2012 Grade 10 Summatives
  23. Sept 2012 Summatives
  24. Feb 2013 Grade 12 Summatives
  25. Feb 2013 2OI Summatives
  26. Sept 2013 Summatives
  27. Feb 2014 Summatives

Graphics with Keyboard input

Here, we're going to take one more step towards programming for a game. Here, I had a simple ambition of using the keyboard to direct the ball that we had going across the screen in Skill Set 5. I couldn't quit find a way to get Flash to accept keyboard input from the stage, so I created an Input TextField to accept my input. Here's what it looks like. You have to click inside the TextField in order to then use the directional keys in order to move the ball:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Here's the code that made it happen. First the setup:

public class MoveBall extends Sprite {
 public var ball:Sprite;
 public var txtInput:TextField = new TextField();
 public var nDir:int;
 public function MoveBall() {
   txtInput.x = 200;
   txtInput.y = 50;
   txtInput.height = 50;
   txtInput.border = true; // try leaving this out.
   txtInput.type = TextFieldType.INPUT; // you can't input without it.
   ball = new Sprite();
   addChild(ball);
   addChild(txtInput);
   ball.graphics.beginFill(0xaa0010);
   ball.graphics.drawCircle(0, 0, 50);
   ball.x = 50;
   ball.y = stage.stageHeight / 2;
   txtInput.addEventListener(KeyboardEvent.KEY_DOWN, moveIt);
	 stage.focus = txtInput; // this starts the program with the focus on the txtInput box.
   
   }

The only new thing here is the EventListener waits for a KEY_DOWN, and calls the "moveIt" function. Here's the function:

private function moveIt(event:KeyboardEvent){
 nDir = event.keyCode;
 if(nDir==38)//up
 	ball.y-=50;
 else if (nDir ==40)// down
 	ball.y +=50;
 else if (nDir ==37)// left
 	ball.x -=50;
 else if (nDir ==39) // right
 	ball.x +=50;
}

First, I populate the "keyCode" from the event, and put it in the "nDir" variable. It cuts down on typing.

Each direction on the keyboard has a specific keyCode: 37 to 40 that assess whether you entered up, down, left or right. Based on the keyCode, I change the x or y coordinate of the ball.

Notice that I don't have brace brackets around each "if" structure, since only one line of code is executed per "if".

Keyboard response from the stage:

A student of mine (James) just sent me this code that allows user input from the stage rather than from the TextField:

First, make sure you import the following:

import flash.ui.*;

Next, add the following EventListener:

stage.addEventListener(KeyboardEvent.KEY_DOWN, mover);

Here's the "mover" code:

function mover (e:KeyboardEvent)
{
 switch(e.keyCode)
 {
 	case Keyboard.LEFT:
 		ball.x -= 5;
 		break;
 	case Keyboard.RIGHT:
 		ball.x += 5;
 		break;
 	case Keyboard.UP:
 		ball.y -= 5;
 		break;
 	case Keyboard.DOWN:
 		ball.y += 5;
 }
}

First, notice that James is introducing you to a new "if" structure called "switch/case". The "switch" statement takes the keyCode (like I did in my example). He then checks to see if it is "Keyboard.LEFT" and then moves much the way I did. The "switch" structure is a more concise way of checking a bunch of if/else if statements that assess only one variable.

I could have used the "Keyboard.DIRECTION" constants the way James did, but it was crashing on me because I didn't know to include the "flash.ui.*" package, so I went old-school with keyCodes.

Thanks, James.

One issue that I am having challenges with is getting a .swf to have full control of the keyboard. An end user should be able to use the up and down directional on the keyboard without the the browser going up and down. Here, again, James gave me some an example .swf that works for him. I'm going to post it to see if it works for me.

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Here, I'm adding some text to make sure the above .swf is not at the bottom of the page.

 

If I'm going to test the up and down directional, I need more text. I know, I'll show you James' code:

 

package {
 import flash.display.*;
 import flash.ui.*;
 import flash.events.*;
 
 public class box extends MovieClip {
 var s:Sprite = new Sprite();
 
 public function box():void {
 
 s.x = 100;
 s.y = 80;
 s.graphics.beginFill(0x000000);
 s.graphics.drawRect(0,0,300,200);
 s.graphics.endFill();
 
 addChild(s);
 
 stage.addEventListener(KeyboardEvent.KEY_DOWN, moveIt);
 }
 
 public function moveIt(e:KeyboardEvent):void {
 switch (e.keyCode){
 case Keyboard.UP:
 s.y -= 20;
 break;
 case Keyboard.DOWN:
 s.y += 20;
 break;
 case Keyboard.LEFT:
 s.x -= 20;
 break;
 case Keyboard.RIGHT:
 s.x += 20;
 break;
 }
 }
 }
 }

Disable Flash keyboard shortcuts:

Some students prefer to use "old school" directional keys: WASD. Unfortunately when you debug in the Flash environment, keyboard shortcuts get in the way of using these keys as input. Here's how you disable them:

Edit - Keyboard Shortcuts
Duplicate Key bindings
Any name for the temporary file.
Tools (second last)
Minus the key bind you want to erase: WASD, etc.

At school, you will have to do this procedure EVERYTIME at the beginning of class.