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
 

 Lecture 2: Interactive Paint Program in Flash
 

Rules

Don't use reserved words as your variable names.

If it turns blue while you are typing it, then it is reserved.


DataTypes

Simple Data Types
int
uint
Number
Boolean
String
void - points to an undefined value
Null - does not point to anything

Complex Data Types
Array
Function
Object
Date
Textfield
MovieClip

Some complex data types have data types within them - they are called composite data types


Arrays

Arrays are collections of data - they can contain lots of individual things.

Arrays start at 0

Examples:
var theColors:Array = new Array():
var theNames:Array = new Array("Bob", "John", "Mary", "Jane");

To access one element in an array:

trace (theNames[1]);

To add another element to the end of an array:

theNames.push("Frank");

To find the length of an array:

theNames.length;

Sample code:

package {
	import flash.display.*;
	import flash.text.*;

	public class Exercise2A extends MovieClip {

		public function Exercise2A() {
			var theColors:Array = new Array();
			var theNames:Array=new Array("Bob","John","Mary","Jane");

			trace(theNames);
			trace(theNames[1]);

			//adds another item to the end of the array
			theNames.push("Frank");
			trace(theNames);

			//find the length of the array
			trace(theNames.length);

			//there is nothing in the theColors array
			trace(theColors);
			theColors[0]="red";
			trace(theColors);
		}
	 }
}

If Blocks

If Blocks are sometimes called conditional statements. You can use these to decide to do one thing or the other. If blocks can also have ELSE clauses thus making them flexible to use when getting input from the user.
var myAge:Number=19;
if (myAge>=18) {
	trace("go have fun");
}

if (myAge<18) {
     trace("stay home");
} else if (myAge >= 65) {
     trace("retire");
} else if (myAge == 18) {
     trace("have fun");
} else if (myAge > 18 && myAge < 65) {
     trace("get a job");
}

Getting Data from Textfields

To make a textbox that the user can enter information into you need to specify that the textbox is Input Text in the Properties. You also need to give it an Instance Name. Put a border around the text also.

text

You will have to put a SUBMIT button next to the textfield and get the user's input using a listener on the button.

enter line size

Also, add a rectangle that has been converted to a MovieClip symbol
Name the Instance Name: lineShape

The code would look like this (this does not actually draw anything) - Exercise2A:

package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;

	public class Exercise2A extends MovieClip {

		public function Exercise2A() {
           // looks for a mouse click on the button
			this.sizeButton.addEventListener(MouseEvent.CLICK, setLineSize);
		}
		public function setLineSize(theEvent:MouseEvent):void {
			var lineSize=myText.text;
           // checking to see if the linesize is too large or small
			if (lineSize<=0) {
				trace("line size too small");
			} else if (lineSize>12) {
				trace("line size too big");
			} else if (lineSize>0 && lineSize<=12) {
				trace("line size is OK");

				// set the new line size
				this.graphics.lineStyle(lineSize, 0xFFFF00, 1);
                    // changes the visual representation of the line under the button
				lineShape.height=lineSize;
			}
		}
	}
}

Here is a variation. Instead of having to have a submit button, you can look for a RETURN then trigger the lineStyle.

Exercise2A2

package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;

	public class Exercise2A2 extends MovieClip {

		public function Exercise2A2() {
			this.myText.addEventListener(KeyboardEvent.KEY_UP, checkForReturn);
		}
		
		public function checkForReturn(theevent:KeyboardEvent) {
			//charCode 13 is a RETURN character
			if (theevent.charCode==13) {
				setLineSize();
			}
		}
		
		public function setLineSize():void {
			var lineSize=myText.text;
			//set the new line size
			this.graphics.lineStyle(lineSize, 0xFFFF00, 1);
			lineShape.height=lineSize;
		}
	}
}

Creating Arrows to alter the line size

First you need:

arrows

2 Buttons with Instance name:
     DecreaseSize
     IncreaseSize

1 Movie Clip with Instance name:
     thelineWidth

Here is the code - Exercise2B:

package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;

	public class Exercise2B extends MovieClip {

		var theSize:Number;
		
		public function Exercise2B() {
               //two arrow buttons with listeners on them
			this.IncreaseSize.addEventListener(MouseEvent.CLICK, makeLineSizeBigger);
			this.DecreaseSize.addEventListener(MouseEvent.CLICK, makeLineSizeSmaller);
		}
       //function to increase the line size
		public function makeLineSizeBigger(theEvent:MouseEvent):void {
			theSize=thelineWidth.height+1;
			trace(theSize);

			if (theSize>12) {
				trace("line size too big");
			} else {
				trace("line size is OK");

				//set the new line size
				this.graphics.lineStyle(theSize, 0xFFFF00, 1);
				thelineWidth.height=theSize;
			}
		}
          //function to decrease the line size
		public function makeLineSizeSmaller(theEvent:MouseEvent):void {
			theSize=thelineWidth.height-1;
			trace(theSize);

			if (theSize<1) {
				trace("line size too small");
			} else {
				trace("line size is OK");

				//set the new line size
				this.graphics.lineStyle(theSize, 0xFFFF00, 1);
				thelineWidth.height=theSize;
			}
		}
	}
}

Create a Dynamic textfield with the Instance Name: mouseLocText (Exercise2D)

package {
	import flash.display.*;
	import flash.events.*;

	public class Exercise2D extends MovieClip {

		public function Exercise2D() {
           // this will constantly execute since we have a 1 frame movie and it keeps looping and entering the first frame
			stage.addEventListener(Event.ENTER_FRAME, showit);
		}
		public function showit(theevent:Event) {
           // write the mouse location to the text field
			mouseLocText.text="X = "+mouseX+" Y = "+mouseY;
		}
	}
}

You can create create a container, called a Sprite, for the graphics you draw in Actionscript 3.0.

This display object will let you move, rotate, scale and set other parameters. It is like a movieclip but has no timeline.

See: Exercise2E

package {
	import flash.display.*;
	import flash.events.*;

	public class Exercise2E extends MovieClip {

		var sprite1:Sprite = new Sprite();

		public function Exercise2E() {

			sprite1.graphics.lineStyle(2,0x000000, 1);
			sprite1.graphics.beginFill(0xFF0000);
			sprite1.graphics.drawRect(0,0,100,50);
			sprite1.graphics.endFill();
			addChild(sprite1);
			//change the sprite
			sprite1.x=100;
			sprite1.y=50;
			sprite1.rotation=30;
			sprite1.alpha=.5;
			//sets the cursor so it changes to a hand
			sprite1.buttonMode=true;
			//look for mouse events over the sprite
			sprite1.addEventListener(MouseEvent.ROLL_OVER, doRollover);
			sprite1.addEventListener(MouseEvent.ROLL_OUT, doRollout);
		}
		public function doRollover(theevent:MouseEvent) {
			sprite1.alpha=1;
			sprite1.scaleX=1.2;
			sprite1.scaleY=1.2;
		}
		public function doRollout(theevent:MouseEvent) {
			sprite1.alpha=.5;
			sprite1.scaleX=1.0;
			sprite1.scaleY=1.0;
		}
	}
}

You can't really make custom cursors but you can hide the real cursor and have a sprite follow the hidden cursor..

1. Create a new layer in the timeline of your Flash file - Make sure it is the TOP layer.
2. Create a graphic that you want to be your cursor and leave it on the stage.
3. Convert it to a MovieClip
4. Give it an Instance Name
5. Make sure you import another class in your package: import flash.ui.*;

See: Exercise2F

package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.ui.*;

	public class Exercise2F extends MovieClip {

		public function Exercise2F() {
			Mouse.hide();
			stage.addEventListener(Event.ENTER_FRAME, moveCursor);
			//set it so you can click and it will detect the click below the cursor
			theCursor.mouseEnabled=false;
		}

		public function moveCursor(theevent:Event) {
			//move the picture to where the cursor is
			theCursor.x=mouseX;
			theCursor.y=mouseY;
		}
	}
}

A New and Improved Simple Drawing Program with custom cursor(Exercise2G)

Click here to download the sample file

NEW Setup:

  1. In the timeline on the main stage, make three layers: cursor (on top), interface (middle), painting (bottom)
    You may have more than one layer of interface elements but they should be in the middle layers

    layers

  2. Create your cursor (Movie clip symbol) on the cursor layer and give it an Instance Name. Make sure to have the center of the cursor on the center pivot point when you draw it.
  3. Create the buttons you need for the interface and put them on the interface layers and give them an Instance Name
  4. Create an EMPTY MovieClip and put it on the painting layer. Position it in the 0,0 position (top, left corner)
    Give the Empty Movie Clip an Instance Name - this is where you will do your drawing
layers2
package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.ui.*;

	public class Exercise2G extends MovieClip {
		public var linesize:Number=2;
		public var thecolor:Number=0x00FF00;
		public var theAlpha:Number=1;
	
		public function Exercise2G() {
			Mouse.hide();
			stage.addEventListener(Event.ENTER_FRAME, moveCursor);
			    // set it so you can click and it will detect the click below the cursor
			theCursor.mouseEnabled=false;
			// set the drawing style before starting to draw
			this.EmptyMC.graphics.lineStyle(linesize, thecolor, theAlpha);

			// listen for a mouse up or mouse down
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownhandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUphandler);
		}
		public function moveCursor(theevent:Event) {
			// move the picture to where the cursor is
			theCursor.x=mouseX;
			theCursor.y=mouseY;
		}
		public function onMouseDownhandler(theevent:Event):void {
			// move to the starting position
			this.EmptyMC.graphics.moveTo(mouseX, mouseY);
			// every time the mouse moves it calls the drawit function
			stage.addEventListener(MouseEvent.MOUSE_MOVE, drawIt);
		}
		public function onMouseUphandler(theevent:Event):void {
			// deletes the Mouse move event
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, drawIt);
		}

		public function drawIt(theevent:Event):void {
			this.EmptyMC.graphics.lineTo(mouseX, mouseY);
		}

	}
}