AS on timeline works - not in Classes...

[nicholaspaul]

I've got a project working with all the AS in one keyframe on the timeline. Lovely. Then I thought this should probably be in packages and classes. That's where it went wrong.
I managed to fix a number of errors, but got really really ...REALLY stuck when it came to adding event listeners and using arrays.
Basically, the project involves a number of movieclips (rooms) being moved onto the stage with left/right arrows, with each movieclip containing other movieclips that you can interact with (mouse over to display text, etc).

If anyone could take a minute to let me know what I'm doing wrong I would be very grateful. I've been working in AS for a while, but this is my first major venture in AS3 and using Classes. Sorry about the length of this...

Here's the code that worked, on the timeline, all in one piece -

// Flash - import Tween class 
import fl.transitions.Tween; //added to as
import fl.transitions.TweenEvent;//added to as
import fl.transitions.easing.*;//added to as

var leftGutter:Number = -2880;
var rightGutter:Number = 2880;

var room:Array = new Array();
room[1] = livingroom_mc;
room[2] = mediaroom_mc;
room[3] = gallery_mc;
room[4] = musicroom_mc;

var lastRoom:Number = 4;/* put this in external file all by itself. Stops going over edge of world*/
var oldRoom:Number = new Number ();
var newRoom:Number = new Number ();
var currentRoom:Number = 1; /* between 1 and lastRoom */

darkenRooms();
startListening(); /* event listeners for room nav */




function nextRoom(event:MouseEvent):void
{
	if (currentRoom < lastRoom )
	{
	oldRoom = currentRoom; 
	currentRoom ++;
	stopListening();
	room[currentRoom].alpha = 1; /* lights on in current room */
	room[currentRoom].y = 0;
	var getNextRoom:Tween = new Tween(room[currentRoom],"x",Strong.easeOut,rightGutter,0,2,true);
	var moveOldRoom:Tween = new Tween(room[oldRoom],"x",Strong.easeOut,0,leftGutter,2,true);

	getNextRoom.addEventListener(TweenEvent.MOTION_FINISH, turnOffOldRoom); /*turn off lights only when New Room is getted */
	function turnOffOldRoom(event:TweenEvent):void
	{
	var darkenOldRoom:Tween = new Tween(room[oldRoom],"alpha",Strong.easeOut,1, 0, 1,true);
	darkenOldRoom.addEventListener(TweenEvent.MOTION_FINISH, ears);
	}
	}

}


function prevRoom(event:MouseEvent):void
{
	if (currentRoom >1)
	{
	oldRoom = currentRoom;
	currentRoom --;
	stopListening();
	room[currentRoom].alpha = 1; /* lights on in current room */
	room[currentRoom].y = 0;

	var getPreviousRoom:Tween = new Tween(room[currentRoom],"x",Strong.easeOut,leftGutter,0,2,true);
	var moveThisRoom:Tween = new Tween(room[oldRoom],"x",Strong.easeOut,0,rightGutter,2,true);
	moveThisRoom.addEventListener(TweenEvent.MOTION_FINISH, turnOffPreviousRoom);/*turn off lights only when next room is finished */
		
	function turnOffPreviousRoom(event:TweenEvent):void
	{
		var fadeThisRoom:Tween = new Tween(room[oldRoom],"alpha",Strong.easeOut,1, 0, 1,true);
		fadeThisRoom.addEventListener(TweenEvent.MOTION_FINISH, ears);
	}
	}
	
}

function stopListening():void
{
	trace('Cant hear you ');
	/* turn off room nav buttons */
	nextRoom_btn.removeEventListener(MouseEvent.CLICK, nextRoom);
	prevRoom_btn.removeEventListener(MouseEvent.CLICK, prevRoom);
}

function ears(event:TweenEvent):void
{
	startListening();
}

function startListening():void
{
	trace('Im Listening ');
	/*Get the previous/next buttons */

	if (currentRoom != lastRoom)
	{
	nextRoom_btn.addEventListener(MouseEvent.CLICK, nextRoom);
	}
	else
	{
	removeChild(nextRoom_btn);
	addChild(prevRoom_btn);
	}
	if (currentRoom >1)
	{
	prevRoom_btn.addEventListener(MouseEvent.CLICK, prevRoom);
	}
	else
	{
	removeChild(prevRoom_btn);
	addChild(nextRoom_btn);
	}
	if (currentRoom > 1 && currentRoom < lastRoom)
	{
		addChild(nextRoom_btn);
		addChild(prevRoom_btn);

	}
	
	
}

function darkenRooms():void
{
	for (var i:uint = 2;i<=lastRoom; i++)
	{
		room[i].alpha = 0; /* all other rooms are dark */

	}
}

/* Navigation */

menuDetect_btn.addEventListener(MouseEvent.MOUSE_OVER, MenuUp);
var menuOff:Number = 2100;
var menuOn:Number = 2008;

function MenuUp(event:MouseEvent):void
{	
	var showMenu:Tween = new Tween(menu_mc,"y",Strong.easeOut,menuOff,menuOn,1,true);
	menuDetect_btn.removeEventListener(MouseEvent.MOUSE_OVER, MenuUp);
	menu_mc.menuClose_btn.addEventListener(MouseEvent.MOUSE_OVER, MenuDown);
	menu_mc.home_btn.addEventListener(MouseEvent.CLICK, goHome);
	menu_mc.about_btn.addEventListener(MouseEvent.CLICK, goAbout);
	menu_mc.portfolio_btn.addEventListener(MouseEvent.CLICK, goRoom);
}

function MenuDown(event:MouseEvent):void
{
	var showMenu:Tween = new Tween(menu_mc,"y",Strong.easeOut,menuOn,menuOff,1,true);
	menu_mc.menuClose_btn.removeEventListener(MouseEvent.MOUSE_OUT, MenuDown);
	menuDetect_btn.addEventListener(MouseEvent.MOUSE_OVER, MenuUp);

}
function goHome(event:MouseEvent):void
{
	if (currentRoom >1)
	{
	oldRoom = currentRoom;
	currentRoom = 1;
	stopListening();
	room[currentRoom].alpha = 1; /* lights on in current room */
	room[currentRoom].y = 0;

	var getHome:Tween = new Tween(room[1],"x",Strong.easeOut,leftGutter,0,2,true);
	var moveThisRoom:Tween = new Tween(room[oldRoom],"x",Strong.easeOut,0,rightGutter,2,true);
	moveThisRoom.addEventListener(TweenEvent.MOTION_FINISH, turnOffPreviousRoom);/*turn off lights only when next room is finished */
		
	function turnOffPreviousRoom(event:TweenEvent):void
	{
		var fadeThisRoom:Tween = new Tween(room[oldRoom],"alpha",Strong.easeOut,1, 0, 1,true);
		fadeThisRoom.addEventListener(TweenEvent.MOTION_FINISH, ears);
	}
	}
}

function goRoom(event:MouseEvent):void
{
	/*fade out old room, fade in new one */
}
function goAbout(event:MouseEvent):void
{
if (currentRoom >1)
	{
	oldRoom = currentRoom;
	currentRoom = 1;
	stopListening();
	room[currentRoom].alpha = 1; /* lights on in current room */
	room[currentRoom].y = 0;

	var getHome:Tween = new Tween(room[1],"x",Strong.easeOut,leftGutter,0,2,true);
	var moveThisRoom:Tween = new Tween(room[oldRoom],"x",Strong.easeOut,0,rightGutter,2,true);
	moveThisRoom.addEventListener(TweenEvent.MOTION_FINISH, turnOffPreviousRoom);/*turn off lights only when next room is finished */
		
	function turnOffPreviousRoom(event:TweenEvent):void
	{
		var fadeThisRoom:Tween = new Tween(room[oldRoom],"alpha",Strong.easeOut,1, 0, 1,true);
		fadeThisRoom.addEventListener(TweenEvent.MOTION_FINISH, ears);
	}
	}
	var f:int = (5);

	livingroom_mc.sign_mc.gotoAndStop(5);

	
}


// NICK MOVIE CLIP INTERACTION //
var playing:Boolean = false;
livingroom_mc.nick_mc.stop();
livingroom_mc.nvideo_btn.addEventListener(MouseEvent.CLICK, PlayNick);


function StopNick(event:MouseEvent):void
{	
	livingroom_mc.nick_mc.stop();
	livingroom_mc.nvideo_btn.removeEventListener(MouseEvent.CLICK, StopNick);
	livingroom_mc.nvideo_btn.addEventListener(MouseEvent.CLICK, PlayNick);
	playing = false;
	trace(playing);
}
function PlayNick(event:MouseEvent):void
{	
	livingroom_mc.nick_mc.play();
	livingroom_mc.nvideo_btn.removeEventListener(MouseEvent.CLICK, PlayNick);
	livingroom_mc.nvideo_btn.addEventListener(MouseEvent.CLICK, StopNick);

	playing = true;
	trace(playing);												  
}


// SIGN INTERACTION //
livingroom_mc.sign_mc.buttonMode = true;
livingroom_mc.sign_mc.addEventListener(MouseEvent.MOUSE_OVER, signOn);
livingroom_mc.sign_mc.addEventListener(MouseEvent.MOUSE_OUT, signOff);
livingroom_mc.sign_mc.addEventListener(MouseEvent.MOUSE_DOWN, readSign);

function signOn(event:MouseEvent):void
{
		livingroom_mc.sign_mc.gotoAndStop(2);
}

function signOff(event:MouseEvent):void
{
		livingroom_mc.sign_mc.gotoAndStop(1);
}

function readSign(event:MouseEvent):void
{
	trace('hey im reading');
	livingroom_mc.sign_mc.removeEventListener(MouseEvent.MOUSE_OVER, signOn);
	livingroom_mc.sign_mc.removeEventListener(MouseEvent.MOUSE_OUT, signOff);
	livingroom_mc.sign_mc.removeEventListener(MouseEvent.MOUSE_DOWN, readSign);

	livingroom_mc.sign_mc.gotoAndStop(5);
	livingroom_mc.sign_mc.nextText_mc.addEventListener(MouseEvent.CLICK, nextText);
	livingroom_mc.sign_mc.prevText_mc.addEventListener(MouseEvent.CLICK, prevText);
	
	var f:int = (5);
	function nextText(event:MouseEvent):void
	{
		if (f < 10)
		{
		f = f+5;
		}
		else
		{
		f = 10;
		}
		livingroom_mc.sign_mc.gotoAndStop(f);
		trace(f);
	}
	function prevText(event:MouseEvent):void
	{
		if (f > 5)
		{
		f = f-5;
		}
		else
		{
		f = 1;
		livingroom_mc.sign_mc.addEventListener(MouseEvent.MOUSE_OVER, signOn);
		livingroom_mc.sign_mc.addEventListener(MouseEvent.MOUSE_OUT, signOff);
		livingroom_mc.sign_mc.addEventListener(MouseEvent.MOUSE_DOWN, readSign);
		}
		livingroom_mc.sign_mc.gotoAndStop(f);
		trace(f);
	}
}

I set the document class to Rooms. This is Rooms.as:

package com
{
	
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.text.*;
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.*;
	import flash.display.MovieClip;
	import fl.transitions.TweenEvent;
	import flash.display.SimpleButton;
	/* import as files from folder
	import scripts.secondary_file;
	*/
	public class Rooms extends MovieClip
	{
		public var leftGutter;
		public var rightGutter;
		public var room:Array;
		public var lastRoom:Number;
		public var oldRoom:Number;
		public var newRoom:Number;
		public var currentRoom:Number; /* between 1 and lastRoom */
		public var getNextRoom:Tween;
		public var moveOldRoom:Tween;
		public var darkenOldRoom:Tween;
		public var getPreviousRoom:Tween;
		public var moveThisRoom:Tween;
		public var fadeThisRoom:Tween;
		public var i:int;
		public var livingroom_mc:MovieClip;
		public var mediaroom_mc:MovieClip;
		public var gallery_mc:MovieClip;
		public var musicroom_mc:MovieClip;
		public var nextRoom_mc:MovieClip;
		public var prevRoom_mc:MovieClip;
		public var n:MovieClip;
		public var p:MovieClip;
		
		public function Rooms()
		{						

			lastRoom = 4;
			currentRoom = 1;
			darkenRooms();
			leftGutter = -2880;
			rightGutter = 2880;
			startListening(); /* event listeners for room nav */			
			room[1] = livingroom_mc;
			room[2] = mediaroom_mc;
			room[3] = gallery_mc;
			room[4] = musicroom_mc;

		}
		

		public function nextRoom(event:MouseEvent):void
		{
			if (currentRoom < lastRoom )
			{
			oldRoom = currentRoom; 
			currentRoom ++;
			stopListening();
			room[currentRoom].alpha = 1; /* lights on in current room */
			room[currentRoom].y = 0;
			getNextRoom = room[currentRoom],"x",Strong.easeOut,rightGutter,0,2,true;
			moveOldRoom = room[oldRoom],"x",Strong.easeOut,0,leftGutter,2,true;
		
			getNextRoom.addEventListener(TweenEvent.MOTION_FINISH, turnOffOldRoom); /*turn off lights only when New Room is getted */
			
			function turnOffOldRoom(event:TweenEvent):void
			{
			darkenOldRoom = room[oldRoom],"alpha",Strong.easeOut,1, 0, 1,true;
			darkenOldRoom.addEventListener(TweenEvent.MOTION_FINISH, ears);
			}
			}
		
		}
		
		
		public function prevRoom(event:MouseEvent):void
		{
			if (currentRoom >1)
			{
			oldRoom = currentRoom;
			currentRoom --;
			stopListening();
			room[currentRoom].alpha = 1; /* lights on in current room */
			room[currentRoom].y = 0;
		
			getPreviousRoom = room[currentRoom],"x",Strong.easeOut,leftGutter,0,2,true;
			moveThisRoom = room[oldRoom],"x",Strong.easeOut,0,rightGutter,2,true;
			moveThisRoom.addEventListener(TweenEvent.MOTION_FINISH, turnOffPreviousRoom);/*turn off lights only when next room is finished */
				
			function turnOffPreviousRoom(event:TweenEvent):void
			{
				fadeThisRoom = room[oldRoom],"alpha",Strong.easeOut,1, 0, 1,true;
				fadeThisRoom.addEventListener(TweenEvent.MOTION_FINISH, ears);
			}
			}
			
		}
		
		public function stopListening():void
		{
			trace('Cant hear you ');
			/* turn off room nav buttons */
			nextRoom_mc.removeEventListener(MouseEvent.CLICK, nextRoom);
			prevRoom_mc.removeEventListener(MouseEvent.CLICK, prevRoom);
		}
		
		public function ears(event:TweenEvent):void
		{
			startListening();
		}
		
		public function startListening():void
		{			

			trace('Im Listening ');
			/*Get the previous/next buttons */
		
			if (currentRoom != lastRoom)
			{
				nextRoom_mc.addEventListener(MouseEvent.CLICK, nextRoom);
				nextRoom_mc.buttonMode = true;
			}
			else
			{
			nextRoom_mc.visible = false;
			prevRoom_mc.visible = true;
			}
			if (currentRoom >1)
			{
			prevRoom_mc.addEventListener(MouseEvent.CLICK, prevRoom);
			prevRoom_mc.buttonMode = true;
			}
			else
			{			

			removeChild(prevRoom_mc);
			addChild(nextRoom_mc);
			}
			if (currentRoom > 1 && currentRoom < lastRoom)
			{
				addChild(nextRoom_mc);
				addChild(prevRoom_mc);
		
			}
			
			
		}
		
		private function darkenRooms():void
		{
			for (i = 2;i <= lastRoom; i++)
			{
				room[i].alpha = 0; /* all other rooms are dark */
		
			}
		}

	}
}

As you may be able to tell, the arrays dont' work....but they are an important part, as I need at time to be able to tell where visitors are.

Other functions from the original got sorted into livingRoom.as and menu.as,for the bottom navigation. I guess I could start with Room.as and go from there.

I would be very grateful to anyone who can help point me in the right direction. I feel as though this is a structural problem rather than syntax.

Thanks!

[nicholaspaul]

I should mention that the error I'm getting at the moment is:


TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com::Rooms/darkenRooms()
at com::Rooms()


If I comment out 'darkenRooms();' in the Rooms function, I get other errors referring to null objects due to the 'startListening();' line and the 'room[1]' to 'room[4]' lines.

[moagrius]

at a glance, i see you declare the "room" array here:

public var room:Array; 

and start populating it a couple places (inside darkenRooms(), as well as in the constructor), but you haven't defined (instantiated) it yet.

in the constructor, before you call darkenRooms() or attempt to populate the room array at all, you need to make it an array:

public function Rooms()
        {                        
            room = [];  //  THIS LINE CREATES THE ARRAY - UNTIL NOW IT'D BE UNDEFINED
            lastRoom = 4;
            currentRoom = 1;
            darkenRooms();
            leftGutter = -2880;
            rightGutter = 2880;
            startListening(); /* event listeners for room nav */            
            room[1] = livingroom_mc;
            room[2] = mediaroom_mc;
            room[3] = gallery_mc;
            room[4] = musicroom_mc;

        } 

[nicholaspaul]

I put the room[]; line in the constructor and added a couple of traces to darkenRooms to see where I'm getting the error.

I changed darkenRooms to read just

room[1].alpha = 0;

and I still get the error:

TypeError: Error #1010: A term is undefined and has no properties.
	at com::Rooms/darkenRooms()
	at com::Rooms()

Before I put this stuff in classes, the array, as it was, worked fine. Is it possible the movieclips that are being referred to (room[2] - room[4]), even though they are just off the stage, are not instantiated and causing errors?

Also...if I comment out darkenRooms();, I don't get any errors. None of the event listeners work though, so I can't click on anything on the stage! When I click on nextRoom_mc, I get -

TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::MovieClip@561c5311 to fl.transitions.Tween.
	at com::Rooms/nextRoom()

[moagrius]

do your objects exist?

test with a trace...

public function Rooms()
        {                        

            lastRoom = 4;
            currentRoom = 1;
            darkenRooms();
            leftGutter = -2880;
            rightGutter = 2880;
            startListening(); /* event listeners for room nav */        
            trace(livingroom_mc);  // what's the output here?
            room[1] = livingroom_mc;
            trace(room[1]);  // is it being added to the array?
            room[2] = mediaroom_mc;
            room[3] = gallery_mc;
            room[4] = musicroom_mc;

        } 

[nicholaspaul]

Yup. room[1] (livingroom_mc) is the background on the stage.
I pasted in those traces and got -

[object MovieClip]
[object MovieClip]

[moagrius]

in darkenRooms, trace out lastRoom to make sure it's defined...

[nicholaspaul]

I get '4', which is what it should be.

[moagrius]

trace out the loop iterations...

for (i = 2;i <= lastRoom; i++)
            {
                trace(room[i]);
                room[i].alpha = 0; /* all other rooms are dark */
        
            } 

[nicholaspaul]

AHA!

"undefined
TypeError: Error #1010: A term is undefined and has no properties.
at com::Rooms/darkenRooms()
at com::Rooms()"

[nicholaspaul]

What if I were to back up a bit...
Taking the original code, how could I convert it into Classes? Or am I heading in the right direction?

Just trying to cut down on the migraines...

[moagrius]

there's really not a lot to break out into individual classes - honestly i think that communicating between them would cause you further headaches at this stage of your development.

the next step would be to trace out lastRoom, and trace out just the iterator:

// in the darkenRoom loop...
trace(i); 

but before that, in looking at your code again, i see some additional fatal errors...

getNextRoom = room[currentRoom],"x",Strong.easeOut,rightGutter,0,2,true;
            moveOldRoom = room[oldRoom],"x",Strong.easeOut,0,leftGutter,2,true; 

you have that - or something like it - in a couple places. i assume you mean it to be:

getNextRoom = new Tween(room[currentRoom],"x",Strong.easeOut,rightGutter,0,2,true);
            getNextRoom = new Tween(moveOldRoom = room[oldRoom],"x",Strong.easeOut,0,leftGutter,2,true); 

also, array indices start at 0, not 1 - you might just want to use the push method instead of assignment to make sure you don't have any gaps...

next, that loop starts at 2 - not sure if that's intentional - if you want to "darken" all rooms, and have only the active room "lit", i'd just set them all dark (alpha=0) first, then on the next line set the current one to alpha=1. like so:

//  somewhere earlier, in your variable declaration block
private var activeRoom:MovieClip;
// then set that as the active - lit - room changes...
// and then in darkenRooms()
for(var i:int=0;i<rooms.length;i++) {
  var mc:MovieClip = rooms[i] as MovieClip;
  mc.alpha = 0;
}
activeRoom.alpha = 1; 

maybe you should scale back all other functionality, and just get that part working. when i have a persistent bug, i try to build out just that functionality and make sure it's working, then move on to adding the more sophisticated or detailed behavior...

[nicholaspaul]

The reason I had the arrays starting at 1 was just to make sense of there being four rooms, numbered 1 to 4. The rooms to darken start at 2, the room that is next.

I see what you mean about scaling back functionality. I'm wondering if I would benefit by using classes at all anyhow? As it is, I'm just adding function to the end of the AS in frame 1 of the timeline. The trouble is, it's working! I was under the impression that using classes would make things easier.
It seems the best thing to do, as you said, is to abandon the idea of classes and soldier on. Thanks for the tips.

[moagrius]

for larger applications, and IMO more importantly for re-use, classes are great - but realistically there's not a lot to parse out or reuse in what you're doing... i have many classes far longer than the code you've posted there.

i noticed another problem - you're nesting named functions - not only is this bad practice (hard to read), and inefficient (function gets defined each time the parent function is invoked), it also hampers debugging - e.g., it won't enforce argument counts...

anyway, like you said - if the timeline script is working for you, go for it... otherwise, the simplest way to convert timeline code to a document class is to do the following:

1. copy out all non-local variables (variables that aren't defined in the scope of a function), and put them as variables in the variable declaration block (customarily above the constructor).
2. copy out all functions to class-level functions (like you have - except for the nested ones which should be class-level as well).
3. take all the rest of the frame script into the constructor.

as regards 1 and 2, whether they're public, private, protected or unspecified doesn't really matter from a document class. similiarly doesn't really matter if they're static variables/methods or instance variables/methods, since a document class will only ever be instanced once.

hth, gl

[nicholaspaul]

Oops. I had a feeling that nesting functions was bad. I'll fix em - thanks.

I've found a way to make things a tad easier - include external .as files and keep functions separated according to room.

Thanks for the 3 tips. They seem to make sense. Cheers!