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: [Sound]    [Masks]    [Frames]    [Playback]    [Frame Scripts]    [Timers]    [Date]    [Fullscreen]   

Lecture 6: Linking up the Nucleus
 
package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.ui.*;
	import flash.net.*;

	public class nucleus extends MovieClip {

		var loader:Loader=new Loader();


		public function nucleus() {

			ex1.addEventListener(MouseEvent.CLICK,btnClick);

			ex2.addEventListener(MouseEvent.CLICK,btnClick);

			ex3.addEventListener(MouseEvent.CLICK,btnClick);

			ex4.addEventListener(MouseEvent.CLICK,btnClick);

			ex5.addEventListener(MouseEvent.CLICK,btnClick);

			backbutton.addEventListener(MouseEvent.CLICK,unloadThem);
		}

	function btnClick(event:MouseEvent):void {
	
		var newSWFRequest: URLRequest=new URLRequest(event.target.name + ".swf");
		trace(event.target.name + ".swf");
		loader.load(newSWFRequest);
		loader.x= 0;
		loader.y= 0;
		loader.scaleX= .9;
		loader.scaleY= .9;
		addChild (loader);
}

Mask Layer: 

Limited to only a single shape (Paste Inside); create fill, reveals what is under fill, hides others

  1. Select/create the layer containing the CONTENT visible THROUGH Holes in the Mask

  2. Insert > Timeline > Layer to create a new layer above it.

  3. Draw a shape, type, or create an instance on mask layer; filled area is transparent

  4. Right-click layername and select MASK; down arrow appears and linked to layer below

Properties:

currentFrame : int
[read-only] Specifies the number of the frame in which the playhead is located in the timeline of the MovieClip instance.

currentLabel : String
[read-only] The current label in which the playhead is located in the timeline of the MovieClip instance.

currentLabels : Array
[read-only] Returns an array of FrameLabel objects from the current scene.

framesLoaded : int
[read-only] The number of frames that are loaded from a streaming SWF file.

totalFrames : int
[read-only] The total number of frames in the MovieClip instance.

Methods:

gotoAndPlay(frame:Object, scene:String = null):void
Starts playing the SWF file at the specified frame.
MovieClip

gotoAndStop(frame:Object, scene:String = null):void
Brings the playhead to the specified frame of the movie clip and stops it there.
MovieClip

nextFrame():void
Sends the playhead to the next frame and stops it.
MovieClip

play()
:void
Moves the playhead in the timeline of the movie clip.
MovieClip

prevFrame():void
Sends the playhead to the previous frame and stops it.
MovieClip

prevScene():void
Moves the playhead to the previous scene of the MovieClip instance.
MovieClip

stop():void
Stops the playhead in the movie clip.

Examples

MCname.gotoAndPlay("theJumpScene");
MCname.gotoAndStop(27);
MCname.stop();

Setup for Flash Horse Example:

Make a couple of movieclips with a number of frames - call them horse and horseMC.
Make 2 buttons named horseRun and horseButton
In Flash make another layer and call it scripts
Put a stop(); on this layer by going to the Windows menu - Actions

Inititalize a variable (above the constructor function)

 var horseon:String="on";

In the constructor function:

 //Run button
this.horse.gotoAndStop(1);
runHorse.addEventListener(MouseEvent.CLICK,doHorseRun);

//1 step button
this.horseMC.gotoAndStop(1);
horseButton.addEventListener(MouseEvent.CLICK,doHorseWalk);

Make new functions:

		//***** Horse Walk *********************************************
		private function doHorseWalk(theEvent:MouseEvent) {
			//this is the amount he has to move over after a full trot
			var fulltrot:uint=300;
			//we need to make sure that we have not exceeded the total number of frames in the animation
			if (this.horseMC.currentFrame!=this.horseMC.totalFrames) {
				//go to the next frame
				this.horseMC.gotoAndStop(this.horseMC.currentFrame+1);
			} else {
				if (this.horseMC.x < stage.stageWidth) {
					this.horseMC.x=this.horseMC.x+fulltrot;
				} else {
					this.horseMC.x=0;
				}
				//do a reset back to frame 1
				this.horseMC.gotoAndStop(1);
			}
		}
		//***** Horse Run *********************************************
		private function doHorseRun(theEvent:MouseEvent) {
			if (horseon=="on") {
				this.horse.gotoAndPlay(1);
				horseon="off";
			} else {
				this.horse.gotoAndStop(1);
				horseon="on";
			}
		}

Besides putting scripts in the .as file, you can put scripts on the frames.

ALWAYS make a new layer for your Actions- call it Actions

Make a key frame for the action before writing it.

Setup for the Flash Exercise (Arrows to go to the next level):

1. Make a new layer and call it Labels
2. Put a key frame where you want the first level and a keyframe where you want a second level
3. Make arrow buttons for each page.
4. Name each arrow instance - nextButton, previousButton
5. Create a new layer and call it Actions and put a new keyframe onthe first frame and the frame of the second level
6. Select the first keyframe Actions layer
7. Open the Window menu - Actions

Write the following:

stop();
nextButton.addEventListener(MouseEvent.CLICK, goNext);
function goNext(e:MouseEvent):void
{
   gotoAndStop("Level2");
}

On the keyframe of the second level frame write this:
NOTE: I had to stop the playing of each of my MovieClips on the frame I go to

stop();
previousButton.addEventListener(MouseEvent.CLICK, goPrev);
function goPrev(e:MouseEvent):void
{
   gotoAndStop("Level1");
   horseMC.gotoAndStop(1);
   horse.gotoAndStop(1);
}


clearInterval(id:uint):void
Cancels a specified setInterval() call.

clearTimeout(id:uint):void
Cancels a specified setTimeout() call.

getTimer():int
Returns the number of milliseconds that have elapsed since Flash Player was initialized, and is used to compute relative time.

setInterval(closure:Function, delay:Number, ... arguments):uint
Runs a function at a specified interval (in milliseconds).

setTimeout(closure:Function, delay:Number, ... arguments):uint
Runs a specified function after a specified delay (in milliseconds).


Example: put a timer on the screen

Put this ABOVE the constructor function
		//used for the timer
		var timeDisplay:TextField = new TextField();
		var startTime:int=getTimer();
Put this in the constructor function
			    // timer 
			addChild(timeDisplay);
			timeDisplay.x = 320;
			timeDisplay.y = 40;
			this.addEventListener(Event.ENTER_FRAME, showClock);

Make a new function

 		//***** Show the clock and time passing *********************************************
		function showClock(theEvent:Event):void {
			// get the current time and subtract the time it was when we started
			var timePassed:int=getTimer()-startTime;
			// divide the miliseconds by 1000 to get seconds
			var seconds:int=Math.floor(timePassed/1000);
			// divide the seconds by 60 to get minutes
			var minutes:int=Math.floor(seconds/60);
			// subtract the minutes * 60 from the seconds to get the remaining seconds
			seconds-=minutes*60;
			// make a string out of the time elements
			var timeString:String=minutes+":"+String(seconds+100).substr(1,2);
			// show in text field
			timeDisplay.text=timeString;
		}
Case statements to get date
Make a dynamic text field that is called dayField
		function getDay():void {
			var someDate:Date = new Date();
			var dayNum:uint=someDate.getDay();
			switch (dayNum) {
				case 0 :
					dayField.text = "Sunday";
					break;
				case 1 :
					dayField.text = "Monday";
					break;
				case 2 :
					dayField.text = "Tuesday";
					break;
				case 3 :
					dayField.text = "Wednesday";
					break;
				case 4 :
					dayField.text = "Thursday";
					break;
				case 5 :
					dayField.text = "Friday";
					break;
				case 6 :
					dayField.text = "Saturday";
					break;
				default :
					dayField.text = "Out of range";
					break;
			}
		}

              

Publish Settings to do a full screen, resizable flash file embedded in an HTML page.

Click the Dimensions drop down box. Select Percent and type 100 for the Width and Height.

Click the Scale drop down box and select No scale.

Click Publish to publish the files.

Open the HTML file and add this code after the </title> tag

<style type="text/css">
                <!--
                body {
                height: 100%;
                width: 100%;
                margin: 0;
                }
                -->
</style>