Course notes
syllabus | schedule | topics | projects | class notes | resources | students | ARTC courses
 Lectures:
Lecture A: The Flash Interface Lecture 4: User Input
Lecture B: Animation Lecture 5: Extras & Game Design
Lecture 1: Drawing with Code and ActionScripting Lecture 6: Linking up the Nucleus
Lecture 2: Graphics Application Development Lecture 7: Brainstorming Game Types
Lecture 3: Working with Movieclips Lecture 8: Topics for Discussion
  Lecture 9: Preloaders and JavaScript Windows
 
Notes: [Interfaces]    [Toggles]    [Radio Buttons]    [Sliders]    [Pickup]    [Moving]    [Keyboard]   

Lecture 4: Working with Interfaces

Things to cover: interfaces, controlling animation, timers, keyboard input, animating and altering levels with depths

Interface Elements

Events can be triggered either by the user or by the system

- Users click mouse buttons and press keys
- The system triggers events when specific conditions are met or processes completed (the SWF file loads, the timeline reaches a certain frame, a graphic finishes downloading, and etc)

You write methods to do something when an event occurs

Types of events:

Mouse events
Ex: when the user clicks or drags the mouse

CLICK : String = "click"
Defines the value of the type property of a click event object.

DOUBLE_CLICK : String = "doubleClick"
Defines the value of the type property of a doubleClick event object.

MIDDLE_CLICK : String = "middleClick"
Defines the value of the type property of a middleClick event object.

MIDDLE_MOUSE_DOWN : String = "middleMouseDown"
Defines the value of the type property of a middleMouseDown event object.

MIDDLE_MOUSE_UP : String = "middleMouseUp"
Defines the value of the type property of a middleMouseUp event object.

MOUSE_DOWN : String = "mouseDown"
Defines the value of the type property of a mouseDown event object.

MOUSE_MOVE : String = "mouseMove"
Defines the value of the type property of a mouseMove event object.

MOUSE_OUT : String = "mouseOut"
Defines the value of the type property of a mouseOut event object.

MOUSE_OVER : String = "mouseOver"
Defines the value of the type property of a mouseOver event object.

MOUSE_UP : String = "mouseUp"
Defines the value of the type property of a mouseUp event object.

MOUSE_WHEEL : String = "mouseWheel"
Defines the value of the type property of a mouseWheel event object.

RIGHT_CLICK : String = "rightClick"
Defines the value of the type property of a rightClick event object.

RIGHT_MOUSE_DOWN : String = "rightMouseDown"
Defines the value of the type property of a rightMouseDown event object.

RIGHT_MOUSE_UP : String = "rightMouseUp"
Defines the value of the type property of a rightMouseUp event object.

ROLL_OUT : String = "rollOut"
Defines the value of the type property of a rollOut event object.

ROLL_OVER : String = "rollOver"
Defines the value of the type property of a rollOver event object.


Frame Events
Ex: when a keyframe on the timeline is entered

enterFrame
[broadcast event] Dispatched when the playhead is entering a new frame. DisplayObject

exitFrame
[broadcast event] Dispatched when the playhead is exiting the current frame.

Example:
thesprite.addEventListener(Event.ENTER_FRAME, doenterFrame);

function doenterFrame(theevent:Event):void {
      trace("we are now at the frame");
}
 


Toggle button
This switches between two different states

You can make two MovieClips and switch between them by setting their alpha to 0 when you want to hide them.

  1. You need to make the two movieClips in Flash
  2. Export them for ActionsScript in the Properties
  3. Name the class thumbDown and thumbUp

The Code:

package {
	import flash.display.*;
	import flash.events.*;
	
	public class Exercise4 extends MovieClip {
	          // setup the toggle button
		public var good:Boolean=true;
		public var theUpThumb:thumbUp=new thumbUp();
		public var theDownThumb:thumbDown=new thumbDown();

		public function Exercise4() {
			// load up the toggle button thumbs
			loadThumbs();
			// only have the finger curser on the hand that is showing
		           // do not detect a click on the thumb down yet
			theUpThumb.mouseEnabled=true;
			theUpThumb.buttonMode=true;
			theDownThumb.buttonMode=false;
			theDownThumb.mouseEnabled=false;
            // look for a click on the buttons
			theUpThumb.addEventListener(MouseEvent.CLICK,doToggleButton);
			theDownThumb.addEventListener(MouseEvent.CLICK,doToggleButton);
		}

		//***** TOGGLE BUTTON *********************************************
		private function loadThumbs() {
			// show the up thumb
			theUpThumb.x=0;
			theUpThumb.y=50;
			theUpThumb.alpha=1.0;
			// hide the down thumb
			theDownThumb.x=0;
			theDownThumb.y=50;
			theDownThumb.alpha=0.0;
			addChild(theUpThumb);
			addChild(theDownThumb);
		}
		private function doToggleButton(theEvent:MouseEvent) {

			if (good==true) {
				theUpThumb.alpha=0;
				theDownThumb.alpha=100;
				good=false;
			} else {
				theUpThumb.alpha=100;
				theDownThumb.alpha=0;
				good=true;
			}
			    // change the finger and clickable status
				theUpThumb.mouseEnabled=good;
				theUpThumb.buttonMode=good;
				theDownThumb.buttonMode=!(good);
				theDownThumb.mouseEnabled=!(good);
		}
	}
}

Rules for Radio buttons:

Only one button can be highlighted at a time.
There are a number of ways to do this:

- Move the highlight element
- Use alpha to hide and show the highlight
- Use visible to hide and show the highlight
- Swap Movieclips from the library

This example moves the highlight

Preparation:

Name the highlight graphic Instance in the Properties (tigerMC for my example)
Name each circle Instance (circle1, circle2, circle3)

In the Constructor Function:

// ***** RADIO BUTTON *********************************************
circle1.addEventListener(MouseEvent.MOUSE_OVER,doRadio1Button);
circle2.addEventListener(MouseEvent.MOUSE_OVER,doRadio2Button);
circle3.addEventListener(MouseEvent.MOUSE_OVER,doRadio3Button);
// can make listeners so you can set a variable if they click on one            

Outside of the Constructor Function:

// ***** RADIO BUTTON *********************************************
private function doRadio1Button(theEvent:MouseEvent) {
		this.tigerMC.y=105;
}
private function doRadio2Button(theEvent:MouseEvent) {
		this.tigerMC.y=182;
}
private function doRadio3Button(theEvent:MouseEvent) {
		this.tigerMC.y=260;
}

***************************************************************************************

Essentially you only need to set parameters inside the startDrag method. The first sets wether you want to lock the center of the object to the mouse when sliding, the next is the Left, Top, Right and Bottom of the area that it can be dragged.

Preparation:

Create a Dynamic Text box called percentText
Create a movieclip Instance called lobster

You will need to import these classes:

We will be using startDrag with its parameters to restrict the movement of the lobster.
startDrag(lockCenter:Boolean, bounds:Rectangle)

lockCenter - Specifies whether the draggable sprite is locked to the center of the mouse position (true), or locked to the point where the user first clicked the sprite (false)

bounds - A constraint rectangle for the Sprite

Example:

	
import flash.display.*;
import flash.events.*;
import flash.text.*;
import flash.geom.*;

// put in the Constructor Function
//***** SLIDER *********************************************
lobster.buttonMode=true;
lobster.addEventListener(MouseEvent.MOUSE_DOWN,doStartDrag);
stage.addEventListener(MouseEvent.MOUSE_UP,doStopDrag);
            
// put outside the Constructor Function
// ***** SLIDER *********************************************
private function doStartDrag(theEvent:MouseEvent):void {
		var myRectangle:Rectangle=new Rectangle(216,50,1,200);
		lobster.startDrag(false, myRectangle);
		// I had to look for a mouse move on the stage because if I looked
			  // for it on the lobster and I drug the mouse off 
			  // the lobster it would not calculate the percentage
		stage.addEventListener(MouseEvent.MOUSE_MOVE,doSliderMove);
}
private function doStopDrag(theEvent:MouseEvent):void {
		lobster.stopDrag();
}
// calculate the percentage of the move
private function doSliderMove(theEvent:MouseEvent):void {
		percentText.text = (lobster.y - 50) / 2 + "%";
}

Can make an object follow the mouse when you click it and then drop it off when you click again

You need to use a global variable to keep track of whether the object should be attached to the mouse or not.

Preparation:

Make an Instance and name it frogMC

Example:

         // used for attaching the frog
		var frogAttached:Boolean=false;
        
        //In the Constructor Function:

        //***** ATTACH OBJECT *********************************************
		frogMC.addEventListener(MouseEvent.CLICK,doAttachObject);

        // Outside the Constructor Function

        //***** ATTACH OBJECT *********************************************

		// change the state of the frog to be attached to the mouse 
		private function doAttachObject(theEvent:MouseEvent):void {

			if (frogAttached==true) {
				frogAttached=false;
				// remove the listener that looks for a mouse move
				stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveIt);
			} else {
				// when the mouse moves the frog will go with it
				frogAttached=true;
				stage.addEventListener(MouseEvent.MOUSE_MOVE, moveIt);
			}
		}

		private function moveIt(theEvent:MouseEvent):void {
			// move the frog to the spot where the cursor is
			frogMC.x=mouseX;
			frogMC.y=mouseY;
		}
        
Making a MovieClip move back and forth based on the position of the mouse

You can make a movieClip and put buttons or movieClips in it.

Preparation:

Make a tall movieclip (much taller than the screen) with a lot of buttons on it.
Give each button an Instance Name
Give the movieClip a name - insectMC

Get the height of the clip (you will need this to figure out how to get it from going off the screen
Get the top and bottom position of the clip (move it to the top and get the Y and then move it to the bottom and get the Y

//********************* PUT IN Constructor Function *********************************************
this.insectMC.mouseEnabled=true;
this.insectMC.addEventListener(MouseEvent.MOUSE_OVER,doMoveMC);

//**************************** New functions ******************************************************
private function doMoveMC(theEvent:MouseEvent):void {
		insectMC.addEventListener(Event.ENTER_FRAME, moveTheMC);
}
private function moveTheMC(theEvent:Event):void {
		if (mouseY<50) {
			this.insectMC.y=insectMC.y-10;
		}
		if (mouseY > (stage.stageHeight-50)) {
			this.insectMC.y=insectMC.y+10;
		}
}

Let's try to expand on that code:

//code that keeps it from running off the page
private function doMoveMC(theEvent:MouseEvent):void { insectMC.addEventListener(Event.ENTER_FRAME, moveTheMC); } private function moveTheMC(theEvent:Event):void { if (mouseY<50) { //does the clip reach the bottom? if (this.insectMC.y>-450) { this.insectMC.y=insectMC.y-10; } } if (mouseY > (stage.stageHeight-50)) { //does the clip reach the top of the clip? if (this.insectMC.y<0) { this.insectMC.y=insectMC.y+10; } } }

Keyboard events
When someone presses a key down

KeyboardEvent(type:String, bubbles:Boolean = true, cancelable:Boolean = false, charCodeValue:uint = 0, keyCodeValue:uint = 0, keyLocationValue:uint = 0, ctrlKeyValue:Boolean = false, altKeyValue:Boolean = false, shiftKeyValue:Boolean = false, controlKeyValue:Boolean = false, commandKeyValue:Boolean = false)
Creates an Event object that contains specific information about keyboard events.

KEY_DOWN : String = "keyDown"
[static] Defines the value of the type property of a keyDown event object.

KEY_UP : String = "keyUp"
[static] Defines the value of the type property of a keyUp event object.

altKey : Boolean
Indicates whether the Alt key is active (true) or inactive (false) on Windows; indicates whether the Option key is active on Mac.

charCode : uint
Contains the character code value of the key pressed or released.

commandKey : Boolean
Indicates whether the Command key is active (true) or inactive (false).

controlKey : Boolean
Indicates whether the Ctrl key is active (true) or inactive (false).

ctrlKey : Boolean
On Windows, indicates whether the Ctrl key is active (true) or inactive (false); On Mac OS, indicates whether either the Ctrl key or the Command key is active.

keyCode : uint
The key code value of the key pressed or released.

keyLocation : uint
Indicates the location of the key on the keyboard.

shiftKey : Boolean
Indicates whether the Shift key modifier is active (true) or inactive (false).

Example:

// add this import to the top
import flash.ui.*;

// make a textfield Dynamic and name it keyDownText and another one and name it keyUpText
// add these to the Constructor Function
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener (KeyboardEvent.KEY_UP, keyUpHandler);
  
// new functions           
function keyDownHandler (theEvent:KeyboardEvent):void {
              keyDownText.text = "Key code: " + theEvent.keyCode + "\n" +
              "Ctrl status: " + theEvent.ctrlKey + "\n" +
              "Key location: " + theEvent.keyLocation + "\n" +
              "Shift key: " + theEvent.shiftKey + "\n";
              checkKey(theEvent);
}

function keyUpHandler (theEvent:KeyboardEvent):void {
              keyUpText.text = "Key code: " + theEvent.keyCode;
}           

// function to move the beetle bug using the up, down, right and left key
		public function checkKey(theKey:KeyboardEvent):void {
			switch (theKey.keyCode) {
				case Keyboard.UP :
					trace("up");
					beetle.rotation = 0;
					beetle.y = beetle.y - 10;
					break;
				case Keyboard.DOWN :
					trace("down");
					beetle.rotation = 180;
					beetle.y = beetle.y + 10;
					break;
				case Keyboard.LEFT :
					trace("left");
					beetle.rotation = -90;
					beetle.x = beetle.x - 10;
					break;
				case Keyboard.RIGHT :
					trace("right");
					beetle.rotation = 90;
					beetle.x = beetle.x + 10;
					break;
			}
		}