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?
 
RedscrapbookAuthor Commented:
Got it sorted myself. Thanks.
0
 
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;
0
 
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
RedscrapbookAuthor Commented:
I've left this one out as Class: MainHome
Screen-shot-2011-12-16-at-19.31..png
0
 
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.
0
 
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)
0
 
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
0
 
RedscrapbookAuthor Commented:
UPDATE: A green button did recognse an active link when it is mouseover but doesn't link.
0
 
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.
0
 
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
0
 
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.
0
 
RedscrapbookAuthor Commented:
No objections as I have found a solution on my own after waiting for any reply from an expert.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.