Create a button link on a custom drag-able horizontal scroller

I've created a custom drag-able horizontal scroller in ActionScript 3. See Sample1.png and Sample2.png as a portfolio samples that worked. It is imported as external SWF file into fl.containers.UILoader on a page with a scroller inside a container. The ActionScript as above start with "package { import....." script of its own.

I've tried to use a same scroller page as HOMEPAGE with click able green buttons link see homepage.png with a code as below using a same ActionScript as above start with "package { import....." for a scroller and a buttons script that start with "import flash.net.URLLoader;". There are five buttons myButton_1, myButton_2 and so on.

I've come across a problem as below with the The compiler errors that read:
/Volumes/LaCie/Flash/Report/Mainhome.as, Line 77      1046: Type was not found or was not a compile-time constant: Event..

I would appreciate with your expertise to get a homepage (homepage.png) green buttons to work so I can link this button as myButton_1 to sample1.png the same for myButton_2 to sample2.png and so on.

UPDATE: If I delete a "import flash.net.URLLoader;" for buttons link, a scroller work perfectly. If I leave a script "import flash.net.URLLoader;" for buttons link in and drag-able scroller doesn't work.

Maybe I may use a different script for a button link or a better way than "import flash.net.URLLoader;" script?
////--Start--Custom drag-able horizontal scroller////////////////////////////////////////////////
package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	
	import caurina.transitions.Tweener;
	
	public class Mainhome extends MovieClip
	{
		private var bounds:Rectangle;
		private var startX:Number;
		private var contentX:Number;

		public function Mainhome():void
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			scrollBar.addEventListener(MouseEvent.CLICK, tween);
			addEventListener(Event.ENTER_FRAME, moveBox);
			startX = scrollHandle.x;
			contentX = scrollingContent.x;
			bounds = new Rectangle(scrollHandle.x, scrollHandle.y, scrollBar.width - (scrollHandle.width + 0), 0); //(scrollHandle.width + 4), 0) It leaves a gapat the right side of handlebar.
		}
		//Tween at the edge of a scrollBar, to mask off the edge.
		private function tween(e:MouseEvent):void
		{
			var mousePos:Number = mouseX;
			if(mousePos > (scrollBar.x + scrollBar.width) - (scrollHandle.width + 4)){
				mousePos = (scrollBar.x + scrollBar.width) - (scrollHandle.width + 4);
			}
			Tweener.addTween(scrollHandle, {x: mousePos, time: 1});
		}
		private function drag(e:MouseEvent):void
		{
			scrollHandle.startDrag(false, bounds);
			scrollHandle.gotoAndStop(2);
			scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
			addEventListener(MouseEvent.MOUSE_UP, stopdrag);
		}
		private function stopdrag(e:MouseEvent):void
		{
			scrollHandle.stopDrag();
			scrollHandle.gotoAndStop(1);
			scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
		}
		//Mask on scrollingContent
		private function moveBox(e:Event):void
		{
			scrollingContent.x = -((contentX - startX) + scrollHandle.x) * ((scrollingContent.width - masker.width) / (scrollBar.width - scrollHandle.width));
		}
	}
}
////--end--Custom drag-able horizontal scroller////////////////////////////////////////////////

////--start--Buttons link////////////////////////////////////////////////
import flash.net.URLLoader;
import flash.net.URLRequest;

myButton_1.addEventListener(MouseEvent.CLICK, myLoader1);
myButton_2.addEventListener(MouseEvent.CLICK, myLoader2);
myButton_3.addEventListener(MouseEvent.CLICK, myLoader3);
myButton_4.addEventListener(MouseEvent.CLICK, myLoader4);
myButton_5.addEventListener(MouseEvent.CLICK, myLoader4);
	
//To fit height and width of a external swf
import fl.containers.UILoader;
var myLoader:UILoader = new UILoader();

function myLoader1(myEvent:Event)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/preloader.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture1.txt", 0xEB2D23); //Feeding the function: is texts.
	//trace("myLoader1 function is running")
}


function myLoader2(myEvent:Event)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_mhc.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture2.txt", 0x000000);
}

function myLoader3(myEvent:Event)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_gemoney.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture3.txt", 0x000000);
}

function myLoader4(myEvent:Event)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_video.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture4.txt", 0xEB2D23); //Feeding the function: is texts.
	//trace("myLoader1 function is running")
}

function myLoader5(myEvent:Event)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_experimental.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture5.txt", 0xEB2D23); //Feeding the function: is texts.
	//trace("myLoader1 function is running")
}


var loader:URLLoader = new URLLoader();//store the information eg: load. //Flash Variables are wide range of type.

function myTextLoad(file:String,color:uint):void
{
	loader.load(new URLRequest(file));	//File is feeding path of the URL request. File: you must give a path.
	myTextField.backgroundColor = color;//Background color 
}
////--end--Buttons link////////////////////////////////////////////////

Open in new window

homepage.png
sample1.png
sample2.png
RedscrapbookAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

invsman249Commented:
its a little confusing how you explained this, the code you posted isn't all together right. The package is a document class or a class for a movieclip in the library??

and the ////--start--Buttons link//////////////////////////////////////////////// is on the main timeline ?

Just trying to clarify your setup

you are getting that error /Volumes/LaCie/Flash/Report/Mainhome.as, Line 77      1046: Type was not found or was not a compile-time constant: Event..

because you need to import the events, i see you have it imported in your package but you haven't imported it for your buttons code

e.g
////--start--Buttons link////////////////////////////////////////////////
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
RedscrapbookAuthor Commented:
My apologies for not making it clear with my setup, the scroller bar is a horizontal black line and scroller handle is a red drag-able rectangle shape is a MovieClip in the library for all swf files and action script is saved as class: Main and it is import .as file.

The Package is a scroller script (Code SnippetSnippet ID=8240652) is a script for a custom scroller and it is saved as mainhome.as as external .as, it is saved as  class: Mainhome and it is imported mainhome.as file. You can see a screen grab of Flash Class as Main on flash property panel.  This is a SWF file on its own swf/ScrollingBar_home.swf with Sample1.jpg and Sample2.jpg.

What I'm trying to do is to get green buttons to work so I can click a green buttons to get view Sample.1png (swf/ScrollingBar_home.swf) from a green button, that button would be myButton_1.

If you have a better way to create a script for a button to work and I'm prepared to drop all other scripts except Package {…..} (from line 2 to line 60)?

The buttons script from line 63 downwards ////--start--Buttons link//////////////////////////////////////////////// with is added underneath Package {…..} (from line 2 to line 60) as on mainhome.as.

I've tried to add events
////--start--Buttons link////////////////////////////////////////////////
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;

as you've suggested import flash.events.Event; but a scroller didn't work or a button?

I've added a MAIN script (Code SnippetSnippet ID=8240662) that goes with a image of a MAIN CONTAINER as main file and a serene grab that  swf/ScrollingBar_home.swf would have loaded in there.

Hope I'm clear?

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	
	import caurina.transitions.Tweener;
	
	public class Mainhome extends MovieClip
	{
		private var bounds:Rectangle;
		private var startX:Number;
		private var contentX:Number;

		public function Mainhome():void
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			scrollBar.addEventListener(MouseEvent.CLICK, tween);
			addEventListener(Event.ENTER_FRAME, moveBox);
			startX = scrollHandle.x;
			contentX = scrollingContent.x;
			bounds = new Rectangle(scrollHandle.x, scrollHandle.y, scrollBar.width - (scrollHandle.width + 0), 0); //(scrollHandle.width + 4), 0) It leaves a gapat the right side of handlebar.
		}
		//Tween at the edge of a scrollBar, to mask off the edge.
		private function tween(e:MouseEvent):void
		{
			var mousePos:Number = mouseX;
			if(mousePos > (scrollBar.x + scrollBar.width) - (scrollHandle.width + 4)){
				mousePos = (scrollBar.x + scrollBar.width) - (scrollHandle.width + 4);
			}
			Tweener.addTween(scrollHandle, {x: mousePos, time: 1});
		}
		private function drag(e:MouseEvent):void
		{
			scrollHandle.startDrag(false, bounds);
			scrollHandle.gotoAndStop(2);
			scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
			addEventListener(MouseEvent.MOUSE_UP, stopdrag);
		}
		private function stopdrag(e:MouseEvent):void
		{
			scrollHandle.stopDrag();
			scrollHandle.gotoAndStop(1);
			scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
		}
		//Mask on scrollingContent
		private function moveBox(e:Event):void
		{
			scrollingContent.x = -((contentX - startX) + scrollHandle.x) * ((scrollingContent.width - masker.width) / (scrollBar.width - scrollHandle.width));
		}
	}
}

Open in new window

import flash.net.URLLoader;
import flash.net.URLRequest;

myButton_portfolio.addEventListener(MouseEvent.CLICK, myLoader1);
myButton_about.addEventListener(MouseEvent.CLICK, myLoader2);
myButton_contact.addEventListener(MouseEvent.CLICK, myLoader3);
myButton_home.addEventListener(MouseEvent.CLICK, myLoader4);
	
//To fit height and width of a external swf
import fl.containers.UILoader;
var myLoader:UILoader = new UILoader();

function myLoader1(myEvent:Event)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/preloader.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture1.txt", 0xEB2D23); //Feeding the function: is texts.
	//trace("myLoader1 function is running")
}

function myLoader2(myEvent:Event)
{
	myLoader.source = "swf/about.swf";
	myTextLoad("text/picture2.txt", 0x000000);
}

function myLoader3(myEvent:Event)
{
//	myLoader.autoLoad=true;
//	myLoader.load();
	myLoader.source = "swf/contact.swf";
//	myLoader.scaleContent = false;
//	myLoader.move(20, 110);
//	myLoader.width = 1000;
//	myLoader.height = 485;
//		addChild(myLoader);
	myTextLoad("text/picture3.txt", 0x000000);
}


function myLoader4(myEvent:Event)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_home.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture1.txt", 0xEB2D23); //Feeding the function: is texts.
	//trace("myLoader1 function is running")
}




var loader:URLLoader = new URLLoader();//store the information eg: load. //Flash Variables are wide range of type.

function myTextLoad(file:String,color:uint):void
{
	loader.load(new URLRequest(file));	//File is feeding path of the URL request. File: you must give a path.
	myTextField.backgroundColor = color;//Background color 
}

Open in new window

Screen-shot-2011-12-16-at-19.02..png
Screen-shot-2011-12-16-at-19.08..png
RedscrapbookAuthor Commented:
I've left this one out as Class: MainHome
Screen-shot-2011-12-16-at-19.31..png
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

RedscrapbookAuthor Commented:
CORRECTION:
The Package is a scroller script (Code SnippetSnippet ID=8240652) is a script for a custom scroller and it is saved as mainhome.as as external .as, it is saved as  class: Mainhome and it is imported mainhome.as file. You can see a screen grab of Flash Class as Mainhome on flash property panel.  This is a SWF file on its own swf/ScrollingBar_home.swf with Sample1.jpg and Sample2.jpg.
invsman249Commented:
hmm well my mistake it should have been MouseEvent not Event and the function myloader should have MouseEvent not Event in the brackets

like this


////--start--Buttons link////////////////////////////////////////////////
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.MouseEvent;


function myLoader1(myEvent:MouseEvent)
function myLoader2(myEvent:MouseEvent)
function myLoader3(myEvent:MouseEvent)
function myLoader4(myEvent:MouseEvent)
RedscrapbookAuthor Commented:
Yes, I've tried that and a scroller Red reactanagle tried to move and it appear 'flashing' red and black colours (red is mouseout and black is mouse over).

And a link did not work.
////--Start--Custom drag-able horizontal scroller////////////////////////////////////////////////
package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	
	import caurina.transitions.Tweener;
	
	public class Mainhome extends MovieClip
	{
		private var bounds:Rectangle;
		private var startX:Number;
		private var contentX:Number;

		public function Mainhome():void
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			scrollBar.addEventListener(MouseEvent.CLICK, tween);
			addEventListener(Event.ENTER_FRAME, moveBox);
			startX = scrollHandle.x;
			contentX = scrollingContent.x;
			bounds = new Rectangle(scrollHandle.x, scrollHandle.y, scrollBar.width - (scrollHandle.width + 0), 0); //(scrollHandle.width + 4), 0) It leaves a gapat the right side of handlebar.
		}
		//Tween at the edge of a scrollBar, to mask off the edge.
		private function tween(e:MouseEvent):void
		{
			var mousePos:Number = mouseX;
			if(mousePos > (scrollBar.x + scrollBar.width) - (scrollHandle.width + 4)){
				mousePos = (scrollBar.x + scrollBar.width) - (scrollHandle.width + 4);
			}
			Tweener.addTween(scrollHandle, {x: mousePos, time: 1});
		}
		private function drag(e:MouseEvent):void
		{
			scrollHandle.startDrag(false, bounds);
			scrollHandle.gotoAndStop(2);
			scrollHandle.removeEventListener(MouseEvent.MOUSE_DOWN, drag);
			addEventListener(MouseEvent.MOUSE_UP, stopdrag);
		}
		private function stopdrag(e:MouseEvent):void
		{
			scrollHandle.stopDrag();
			scrollHandle.gotoAndStop(1);
			scrollHandle.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
		}
		//Mask on scrollingContent
		private function moveBox(e:Event):void
		{
			scrollingContent.x = -((contentX - startX) + scrollHandle.x) * ((scrollingContent.width - masker.width) / (scrollBar.width - scrollHandle.width));
		}
	}
}
////--end--Custom drag-able horizontal scroller////////////////////////////////////////////////

////--start--Buttons link////////////////////////////////////////////////
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.MouseEvent;

myButton_1.addEventListener(MouseEvent.CLICK, myLoader1);
myButton_2.addEventListener(MouseEvent.CLICK, myLoader2);
myButton_3.addEventListener(MouseEvent.CLICK, myLoader3);
myButton_4.addEventListener(MouseEvent.CLICK, myLoader4);
myButton_5.addEventListener(MouseEvent.CLICK, myLoader4);
	
//To fit height and width of a external swf
import fl.containers.UILoader;
var myLoader:UILoader = new UILoader();

function myLoader1(myEvent:MouseEvent)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/preloader.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture1.txt", 0xEB2D23); //Feeding the function: is texts.
	trace("myLoader1 function is running")
}


function myLoader2(myEvent:MouseEvent)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_mhc.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture2.txt", 0x000000);
	trace("myLoader2 function is running")
}

function myLoader3(myEvent:MouseEvent)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_gemoney.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture3.txt", 0x000000);
	trace("myLoader3 function is running")
}

function myLoader4(myEvent:MouseEvent)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_video.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture4.txt", 0xEB2D23); //Feeding the function: is texts.
	trace("myLoader4 function is running")
}

function myLoader5(myEvent:MouseEvent)
{
	myLoader.autoLoad=true;
	myLoader.load();
	myLoader.source = "swf/ScrollingBar_experimental.swf";
	myLoader.scaleContent = false;
	myLoader.move(0, 110);
	myLoader.width = 1000;
	myLoader.height = 485;
		addChild(myLoader);
	myTextLoad("text/picture5.txt", 0xEB2D23); //Feeding the function: is texts.
	trace("myLoader5 function is running")
}


var loader:URLLoader = new URLLoader();//store the information eg: load. //Flash Variables are wide range of type.

function myTextLoad(file:String,color:uint):void
{
	loader.load(new URLRequest(file));	//File is feeding path of the URL request. File: you must give a path.
	myTextField.backgroundColor = color;//Background color 
}
////--end--Buttons link////////////////////////////////////////////////

Open in new window

Screen-shot-2011-12-16-at-20.16..png
Screen-shot-2011-12-16-at-20.16..png
RedscrapbookAuthor Commented:
UPDATE: A green button did recognse an active link when it is mouseover but doesn't link.
RedscrapbookAuthor Commented:
UPDATE:
This is the error I'm now reading

/Volumes/LaCie/Flash/Report/Mainhome.as, Line 68      1120: Access of undefined property myButton_1.
/Volumes/LaCie/Flash/Report/Mainhome.as, Line 69      1120: Access of undefined property myButton_2.
/Volumes/LaCie/Flash/Report/Mainhome.as, Line 70      1120: Access of undefined property myButton_3.
/Volumes/LaCie/Flash/Report/Mainhome.as, Line 71      1120: Access of undefined property myButton_4.
/Volumes/LaCie/Flash/Report/Mainhome.as, Line 72      1120: Access of undefined property myButton_5.
RedscrapbookAuthor Commented:
I'd appreciate if anyone can provide a script or solution for error 1120 for a green button on a homepage inside a container with example as below. I've used a script for scroller (Line 1: package. With the original Question) that works fine but it not work when I add a script for buttons as examples as above.

I've added import flash.events.MouseEvent; on line 66 as invsman249 suggested. But I still get /Volumes/LaCie/Flash/Report/Mainhome.as, Line 68      1120: Access of undefined property myButton_1.
Error-1120.png
RedscrapbookAuthor Commented:
Got it sorted myself. Thanks.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RedscrapbookAuthor Commented:
Got a solution on my own  from reading blogs on other forum: O'Reilly Flash CS5 on mouse events. Choose Window > Code Snippets > Load and Unload > Click to Load/Unload Swf or image.
RedscrapbookAuthor Commented:
No objections as I have found a solution on my own after waiting for any reply from an expert.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.