Simulated Multiplane Camera

[aaronv2]

Hi guys. Im having alot of trouble and getting really confused with how to make a simulated multiplane camera move.

There are about a hundred tutorials all over the place about scrolling something across screen using _xmouse and alot about easing and etc. Im just not sure how to put it all together.

Let me explain a little more about what i mean. I have a long room say a room in an art gallery. i would like to use the mouse position and the size of my symbol to be relative. so the position of my _xmouse is relative to the xposition on my long symbol.

So instead of just using the mouse to initiate the movment i would like the mouse position and symbol position to be linked. How i thaught about it in my head was to use the stage width and then somehow connect that value to the image width and move it in relative terms.

That being said... how would i also add easing to this effect. so that as the user is nearing the end of the room it slows down to a natural stop?

so ive tried piecing many bits of actionscript together using this site and the tutorials. The "interactive image pan" tutorial is very close to what im looking for. but for the life of me i cant understand how to connect the stage width and symbol width together.

Also i would imagine that creating a longer clip and using the same script on it will scroll faster than the background and give an illusion of depth or perspective.

i was just wondering if anyone can try and help me work it out... ive seen that many _xmouse and stage.width/2 im going crazy.

i realise this is an annoying asked a million times question. but im really looking to create the same old effect with many subtle effects with it such as the easing and perspective and etc.

ANY help you can give me is valuable guys. im so sick of reading tutorials i could really use some human interaction to maybe make it click.

[Charleh]

Right you need to do this

- Find the ratio between the mouse position and the clip width/height and use this as the target point
- Set your 'target point' and also set an 'actual point' set of variables - the goal is to ease towards the 'target point' from 'actual point'
- Perform this code every frame

To get the ratio just do symbolsize / stagesize i.e. and I think you'll need to flip it round to negative values

targetx = -((Symbol._width / Stage._width) * _xmouse);
targety = -((Symbol._height / Stage._height) * _ymouse);

Then you just use a bit of trig to get the vector to move the Symbol by and ease it in by the magnitude of the vector - you may need to snap the symbol to its final position when the vector length gets very small - I'd clip it when it gets to 0.1 units

dx = Symbol._x - targetx;
dy = Symbol._y - targety;

vlen = Math.sqrt(dx * dx + dy * dy);



if(vlen < 0.1) {
Symbol._x = targetx;
Symbol._y = targety;
} else {
dx = dx / vlen;
dy = dy / vlen;
dx *= vlen * 0.2;
dy *= vlen * 0.2;
Symbol._x += dx;
Symbol._y += dy;
}

I can't really test it right now as I don't have Flash on this PC but give it a try and see what happens - it should give you smooth movement towards the mouse position but ease in nicely

[geoken]

I'm having trouble understanding what you're trying to do. Is the functionality similar to this;

http://www.flashloaded.com/flashcomp.../example5.html

[Charleh]

Is this the kind of thing you are looking for?

I couldn't upload the source as the image used is quite big - here's the code anyway

var targetx:Number = 0;
var targety:Number = 0;

onEnterFrame = function () {
	
	targetx = -(((Supper._width - Stage.width) / Stage.width) * _xmouse);
	targety = -(((Supper._height - Stage.height) / Stage.height) * _ymouse);

	var dx = targetx - Supper._x;
	var dy = targety - Supper._y;

	vlen = Math.sqrt(dx * dx + dy * dy);



	if(vlen < 0.1) {
		Supper._x = targetx;
		Supper._y = targety;
	} else {
		dx = dx / vlen;
		dy = dy / vlen;
		dx *= vlen * 0.2;
		dy *= vlen * 0.2;
		Supper._x += dx;
		Supper._y += dy;
	}

}

This goes on the root and assumes the clip you want to scroll about on is called 'Supper'

[aaronv2]

charleh thanks so much for your help... your script is perfect the other script i was using had some weird shaking behaviour. and i can adjust it to suit my needs... im experimenting right now with adding another layer that needs to act differently. i want to try and do alot of this by myself so i dont have to ask so many questions. but thanks man you got the ball rolling for me.

EDIT: Okay well i have looked at the script a bit and am kinda getting lost again ( i cant wait till it jsut *clicks*) just a quick question. if i wanted to loose the y movment what would i have to change? also if i wanted something to scroll without using the stage width and stop when it reached the end of the clip width instead what would i change? that insight should help me to not have to ask anymore annoying questions about this... thanks again charleh your a huge help.

[aaronv2]

Originally Posted by aaronv2

if i wanted to loose the y movment what would i have to change?

ive pretty much got that sussed now. it was relatively simple to get happening, cause you have written your script well i guess.

i guess the other part of the question i can simplify... i would just like something to scroll in and instead of using the stadge width just stop moving once it proceeds too far right or left. (the boundary of the symbol) i hope this isnt too much of a bother for you to help me out with. im still looking around kirupa for any scrollable info that can help.

[Charleh]

You just need to substitute stage width and height with your own values - for instance my stage was 550x400 (the flash default), you can replace stage.width and stage.height with say 50 and 350 to make the symbol scroll in a smaller area -

The stage width and height are really just the rectangle in which the symbols scrolling boundaries are kept - play about with the targetx/targety values to get it right

I'm not sure if I understand what you mean by 'if it reaches the boundary of the symbol'

Are you thinking of putting a picture on the screen which you can scroll about on but stops further inwards than the edge of the stage?

[Pasquale]

If you could turn it into a component like the flashcam, it would be sooooooo amazing.

[Charleh]

Originally Posted by darkmotion

If you could turn it into a component like the flashcam, it would be sooooooo amazing.

Whats the flashcam dm I'm relatively new to flash ?

[aaronv2]

ok this is alot of help and im really getting close to what i like... however it sucks that its so rigid... is there a way to make it smoother. so if i move the mouse violently it would slowly move to the mouse position instead of jerking immediatly to the position?

i guess what im trying to say is ease the movement that occurs when the mouse is moved. heh i wish i could upload what i have so far but i dont have a webspace yet and kirupa has a pretty low upload limit

[aaronv2]

ive been reading about easing and trying to get it work but it just will always be fast and look ugly.... can anyone please... PLEASE try and help me to get it working a bit smoother. just so it looks a little more professional?

[penlix]

I had a go with your code Charleh, and uploaded it for anyone to view.

http://www.vcdc.gr/images/penlix_images/slideimg.zip

Many thanks!

[Raymond187]

Hi People,

I am loving this. My only question would be:-

I will try to explain the best I can. Is there a way of having the image register so on the first frame of the movie, the central part of the image is shown (rather than the top left). when I hit "test movie" the image always defaults to shop the top left of the image. I would really like the image to be cantral so that when the mouse first rolls over it can pan in any direction. At the moment you cant pan "up left" straight away, you have to go down/right.

hope this makes sense. I'm not sure which values to change to acheive this.

cheers

Ray.

[Charleh]

You need to just set the picture position to be at negative half it's width/height

so when your movie loads

Supper._x = -Supper._width / 2;
Supper._y = -Supper._height / 2;

Code might not be right though as I've not got Flash installed but you get the idea!