14 Replies - 3058 Views - Last Post: 11 November 2009 - 04:41 AM

#1 AUAN   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

ActionScript 3 Help

Post icon  Posted 05 November 2009 - 02:29 AM

Hey all.
Trying to refresh my memory of AS3, just needing some pointers on a few things.

I am trying to create something similar to the functionality of google maps, with a click and drag map.

My Flash project architecture consists of a main layer/timeline with a movie clip placed in keyframe one called "maincomp". Inside this is two layers with two movie clips on the keyframe of each called "Background" and "Map". Background is a white square the same size as the document (1024x768). Map contains an image of a large cityscape.. What I am trying to achieve is for the mouse to be pressed down on the map and while held, the map can be dragged.

Now my questions.

1. Before I just had the Map MC sitting on the main timeline with nothing else, and some AS applied it.

Map.buttonMode = true;

Map.addEventListener(MouseEvent.MOUSE_DOWN,DragStart);
Map.addEventListener(MouseEvent.MOUSE_UP,DragStop);
function DragStart(event:Event) {
	event.target.startDrag(false);	
}
 
function DragStop(event:Event){
	event.target.stopDrag();

}



This worked fine, but now I have moved it within "maincomp" it stops working and gives me the compile error "1120: Access of undefined property Map." Can someone explain this problem and point me in the right direction?


2. I added "Map.buttonMode = true;" so that the mouse cursor looks like a hand. Now I see that the er..method(I'm used to Java terms) buttonMode turns it into that particular sprite. Is there any similar function that uses an open hand, and then a another one of a closed hand that I can "= true;" when the mouse is held?

3. As I said before my document size is 1024x768, but the map itself is about 2000x2000. Is there any possible way to resrict the edge of the Map MC going past the document window? As when it does currently we just see the end of the image, and white space. Some kind of if statement maybe?

Thanks alot for any help!

This post has been edited by AUAN: 05 November 2009 - 02:30 AM


Is This A Good Question/Topic? 0
  • +

Replies To: ActionScript 3 Help

#2 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: ActionScript 3 Help

Posted 05 November 2009 - 03:24 AM

1. Did you move the code as well? If your code is still on the root and the Map is inside another MoveClip then you're going to need to tell the code that. Something like:
myContainer.Map.buttonMode = true;


2. In this case buttonMode is a property :P The icons you're describing aren't a part of flash, but if you create the two sprites yourself you can swap them for the mouse pointer. You can hide and reveal the mouse pointer with Mouse.hide() and Mouse.show(), and when it's hidden attach your required sprite and continually update its x and y based on the stage.mouseX and stage.mouseY using the mouseMove event:
stage.addEventListener(MouseEvent.MOUSE_MOVE,onmousemove);
function onmousemove(evt:MouseEvent):void {
   myCursor.x = stage.mouseX;
   myCursor.y = stage.mouseY;
}



3. StartDrag accepts a second parameter, which is a rectangle object that you can use as a boundry: startDrag.
Was This Post Helpful? 1
  • +
  • -

#3 AUAN   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Re: ActionScript 3 Help

Posted 05 November 2009 - 04:08 AM

View Postthehat, on 5 Nov, 2009 - 02:24 AM, said:

1. Did you move the code as well? If your code is still on the root and the Map is inside another MoveClip then you're going to need to tell the code that. Something like:
myContainer.Map.buttonMode = true;


The code is inside the "maincomp" MC, which is on the first keyframe of the main timeline, attached to the same keyframe as the "Map" MC. And I tried the suggested way, it I got the same compiler error.

EDIT: SUCCESS! Since I haven't done flash in so long, I forgot all about instance names. Added them and it works fine. Cheers!

View Postthehat, on 5 Nov, 2009 - 02:24 AM, said:

2. In this case buttonMode is a property :P The icons you're describing aren't a part of flash, but if you create the two sprites yourself you can swap them for the mouse pointer. You can hide and reveal the mouse pointer with Mouse.hide() and Mouse.show(), and when it's hidden attach your required sprite and continually update its x and y based on the stage.mouseX and stage.mouseY using the mouseMove event:
stage.addEventListener(MouseEvent.MOUSE_MOVE,onmousemove);
function onmousemove(evt:MouseEvent):void {
   myCursor.x = stage.mouseX;
   myCursor.y = stage.mouseY;
}



3. StartDrag accepts a second parameter, which is a rectangle object that you can use as a boundry: startDrag.


Thank you so much. Answered everything!

This post has been edited by AUAN: 05 November 2009 - 04:53 AM

Was This Post Helpful? 0
  • +
  • -

#4 AUAN   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Re: ActionScript 3 Help

Posted 07 November 2009 - 02:00 AM

I've been playing around with StartDrag as thehat suggested, but I am struggling to visualize what I am trying to do exactly.

In Flash my composition is 1024x768. I have a MC which is a 2000x2000 image of a map. I am trying to make it so the edges of the 2k x 2k MC cannot go past the edges of the composition.
Example: I drag the top of the map down as far as I can go, but when the edge of the map MC tries to move past down the top of the composition (as it's obviously alot bigger) it stops, as if one was able to drag it past it it would reveal white space and the edge of the MC/image of the map.

This tutorial, sort of explain my idea and it has helped me to understand some things. http://www.flashandm...ic/dragdroptour.The thing that this does differently though, is that the draggable object is inside the composition, and doesn't go outside the comp, while in mine it's larger and the edge shouldn't be dragged down past the edge of the composition, which would make it inside the 1024x768 space.

If anyone can offer some things for me to try I would greatly appreciate it. Also if some images would help let me know.

This post has been edited by AUAN: 07 November 2009 - 02:12 AM

Was This Post Helpful? 0
  • +
  • -

#5 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: ActionScript 3 Help

Posted 08 November 2009 - 03:59 PM

I guess your only option is to create and ENTER_FRAME event listener when you call startDrag, and within this, you can force your map to not exceed any boundaries you set. eg:
box.addEventListener(MouseEvent.MOUSE_DOWN,onDown);

function onDown(evt:MouseEvent):void {
	box.startDrag(false);
	this.addEventListener(Event.ENTER_FRAME,checkBounds);
}

function checkBounds(evt:Event):void {
	if(box.x > 0) {
		box.x = 0;
	} else if(box.x < 0-box.width) {
				box.x = 0-box.width;
		}
		if(box.y > 0) {
				box.y = 0;
		} else if(box.y < 0-box.height) {
				box.y = 0-box.height;
		}
}



I've not tested this, so I hope it works for you!
Was This Post Helpful? 1
  • +
  • -

#6 AUAN   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Re: ActionScript 3 Help

Posted 09 November 2009 - 12:04 AM

View Postthehat, on 8 Nov, 2009 - 02:59 PM, said:

I guess your only option is to create and ENTER_FRAME event listener when you call startDrag, and within this, you can force your map to not exceed any boundaries you set.



Wow thanks for creating that! It unfortunately does not stop the map MC from going past the created edge of the canvas. It just stops it going past a point. A point that is defined past the size of the canvas window. Would it be better for me to create a rectangle(something that is static) and convert that into a movie clip and constrain the map to that, since the canvas can be resized when the program is run?

My current code
myContainer.Map.buttonMode = true;

myContainer.Map.addEventListener(MouseEvent.MOUSE_DOWN,DragStart);
myContainer.Map.addEventListener(MouseEvent.MOUSE_UP,DragStop);
function DragStart(event:Event) {
	event.target.startDrag(false);
	myContainer.Map.buttonMode = true;
}
 
function DragStop(event:Event){
	event.target.stopDrag();
	

}

myContainer.Map.addEventListener(MouseEvent.MOUSE_DOWN,onDown);

function onDown(evt:MouseEvent):void {
	myContainer.Map.startDrag(false);
	this.addEventListener(Event.ENTER_FRAME,checkBounds);
}

function checkBounds(evt:Event):void {
	if(myContainer.Map.x > 0) {
		myContainer.Map.x = 0;
	} else if(myContainer.Map.x < 0-myContainer.Map.width) {
				myContainer.Map.x = 0-myContainer.Map.width;
		}
		if(myContainer.Map.y > 0) {
				myContainer.Map.y = 0;
		} else if(myContainer.Map.y < 0-myContainer.Map.height) {
				myContainer.Map.y = 0-myContainer.Map.height;
		}
}




So if I wanted to constrain to a shape MC (Box) how would I write the code? Something like this??

if(myContainer.Map.x > myContainer.Box) {
		myContainer.Map.x = 0;
	} else if(myContainer.Map.x < 0-myContainer.Box.width) {
				myContainer.Map.x = 0-myContainer.Box.width;
		}



Cheers

This post has been edited by AUAN: 09 November 2009 - 12:05 AM

Was This Post Helpful? 0
  • +
  • -

#7 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: ActionScript 3 Help

Posted 09 November 2009 - 03:22 AM

I think the code I gave you before was slightly wrong in that it didn't take account of the size of the stage. You're probably right that creating a bounding box is better. Let me mess around with the idea later on and I'll get back to you, I'm about to embark on a 350 mile drive!
Was This Post Helpful? 0
  • +
  • -

#8 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: ActionScript 3 Help

Posted 10 November 2009 - 05:21 AM

Right, so using the code I gave you previously I've made the necessary changes to use a bounding box:
box.addEventListener(MouseEvent.MOUSE_DOWN,onDown);

function onDown(evt:MouseEvent):void {
	box.startDrag(false);
	this.addEventListener(Event.ENTER_FRAME,checkBounds);
}

function checkBounds(evt:Event):void {
	if(box.x > 0) {
		box.x = 0;
	} else if(box.x < 0-(box.width-bound.width)) {
		box.x = 0-(box.width-bound.width);
	}
	
	if(box.y > 0) {
		box.y = 0;
	} else if(box.y < 0-(box.height-bound.height)) {
		box.y = 0-(box.height-bound.height);
	}
}



In this example, box is a movieclip on the stage that is larger than the stage, and bound is a movieclip positioned at 0,0 that is the size of the stage. I've done this rather than use the stage object because stage is unreliable and stage.width will return the width of the box movieclip.
Was This Post Helpful? 1
  • +
  • -

#9 AUAN   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Re: ActionScript 3 Help

Posted 10 November 2009 - 11:09 PM

View Postthehat, on 10 Nov, 2009 - 04:21 AM, said:

In this example, box is a movieclip on the stage that is larger than the stage, and bound is a movieclip positioned at 0,0 that is the size of the stage. I've done this rather than use the stage object because stage is unreliable and stage.width will return the width of the box movieclip.


Thanks again for trying to get this to work, but again to no avail.

myContainer.Map.buttonMode = true;

myContainer.Map.addEventListener(MouseEvent.MOUSE_DOWN,DragStart);
myContainer.Map.addEventListener(MouseEvent.MOUSE_UP,DragStop);
function DragStart(event:Event) {
	event.target.startDrag(false);
	myContainer.Map.buttonMode = true;
}
 
function DragStop(event:Event){
	event.target.stopDrag();
	

}

myContainer.Map.addEventListener(MouseEvent.MOUSE_DOWN,onDown);

function onDown(evt:MouseEvent):void {
	myContainer.Map.startDrag(false);
	this.addEventListener(Event.ENTER_FRAME,checkBounds);
}

function checkBounds(evt:Event):void {
	if(myContainer.Map.x > 0) {
		myContainer.Map.x = 0;
	} else if(myContainer.Map.x < 0-myContainer.Map.width) {
				myContainer.Map.x = 0-myContainer.Map.width;
		}
		if(myContainer.Map.y > 0) {
				myContainer.Map.y = 0;
		} else if(myContainer.Map.y < 0-myContainer.Map.height) {
				myContainer.Map.y = 0-myContainer.Map.height;
		}
}




http://www.swfcabin....open/1257917433

Here is also an exported swf of what it's doing. It is restricted from going beyond points, but only when you move it outsize the canvas, nothing is stopping the edge of Map MC going past the start of Box MC.

I really appreciate your effort though.

I think my best bet might be with
event.target.startDrag(false, new Rectangle(0, 0, 120, 120));

This post has been edited by AUAN: 10 November 2009 - 11:23 PM

Was This Post Helpful? 0
  • +
  • -

#10 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: ActionScript 3 Help

Posted 11 November 2009 - 02:29 AM

Why do you have two MOUSE_DOWN listeners and two calls to startDrag? I think the first one you have there is going to cause unwanted behaviour, so try taking away the following code:
myContainer.Map.addEventListener(MouseEvent.MOUSE_DOWN,DragStart);
function DragStart(event:Event) {
	event.target.startDrag(false);
	myContainer.Map.buttonMode = true;
}



Also, in your check bounds function you're using the width and height of the map movieclip where I used a bounding box. This isn't going to work because the bounding box must be the size of the desired visible area. I've attached the test file I made when creating the previous post's code so you can see how it should work.

Attached File  constrain_drag.zip (5.85K)
Number of downloads: 196
Was This Post Helpful? 1
  • +
  • -

#11 AUAN   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Re: ActionScript 3 Help

Posted 11 November 2009 - 02:59 AM

View Postthehat, on 11 Nov, 2009 - 01:29 AM, said:

Why do you have two MOUSE_DOWN listeners and two calls to startDrag? I think the first one you have there is going to cause unwanted behaviour, so try taking away the following code:
myContainer.Map.addEventListener(MouseEvent.MOUSE_DOWN,DragStart);
function DragStart(event:Event) {
	event.target.startDrag(false);
	myContainer.Map.buttonMode = true;
}



Also, in your check bounds function you're using the width and height of the map movieclip where I used a bounding box. This isn't going to work because the bounding box must be the size of the desired visible area. I've attached the test file I made when creating the previous post's code so you can see how it should work.

Attachment attachment


Hmm I must've forgot the change it to the bounding box. I have set it to a MC that's a rectangle as big as my canvas called "Box". And I've removed the code. Now..The restrictions from the top and left work. But I can still drag the Map MC past the right side and the bottom of the canvas.

Also could you try uploading that file again, Flash CS3 says it's an "unexpected file format". Could this be because I am using CS3 and you a newer version? I think if I can see it work in the way you are approaching it I can figure it out.

Thanks.

This post has been edited by AUAN: 11 November 2009 - 03:04 AM

Was This Post Helpful? 0
  • +
  • -

#12 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: ActionScript 3 Help

Posted 11 November 2009 - 03:54 AM

No worries, CS3 version attached :)
Attached File  constrain_drag_cs3.zip (6.05K)
Number of downloads: 195
Was This Post Helpful? 1
  • +
  • -

#13 AUAN   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Re: ActionScript 3 Help

Posted 11 November 2009 - 04:04 AM

View Postthehat, on 11 Nov, 2009 - 02:54 AM, said:

No worries, CS3 version attached :)
Attachment attachment


Hey friend, thanks again, but i still get the same error, as does a friend who has Flash CS3 who I sent the file to over msn.

Sorry to be a pain.

Cheers

This post has been edited by AUAN: 11 November 2009 - 04:05 AM

Was This Post Helpful? 0
  • +
  • -

#14 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: ActionScript 3 Help

Posted 11 November 2009 - 04:12 AM

Oops, my bad. I don't think I actually changed the format last time...

Attached File  constrain_drag_cs3_actual.zip (9.94K)
Number of downloads: 207
Was This Post Helpful? 1
  • +
  • -

#15 AUAN   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 30-July 09

Re: ActionScript 3 Help

Posted 11 November 2009 - 04:41 AM

View Postthehat, on 11 Nov, 2009 - 03:12 AM, said:

Oops, my bad. I don't think I actually changed the format last time...

Attachment attachment



My friend, thank you very much for this! Finally I got it working.

Thank you so much for your time.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1