I have a large background that is bigger than the Flash document area. When the mouse moves left, I want the background to move left with it, uncovering more of the background. The further the mouse is moved over to the left of the screen, the faster the background will move too.
How would I do this?
I'm a complete amateur when it comes to Flash and especially scripting so I'd really appreciate some simple explanations. Thanks. :)
Here's some code. Its an easy effect but theres a raft of geometry to make it happen.
PHP Code:addEventListener(MouseEvent.MOUSE_MOVE, onMove);
function onMove(e:MouseEvent):void{
// capture the size of the stage and background
const BG_SIZE:Number = myBackground.width;
const STAGE_SIZE:int = stage.stageWidth;
// calculate the difference between stage & bg
// this is the max amount we can move the bg
const RANGE:Number = STAGE_SIZE - BG_SIZE;
// capture the mouse position as a % of the stage
// so left edge is 0, right edge is 1
const MOUSE_PERCENT:Number = e.stageX / STAGE_SIZE;
// calculate the % of the RANGE to actually shift
const AMOUNT_TO_MOVE:Number = RANGE * MOUSE_PERCENT;
// move the background (backwards)
myBackground.x = AMOUNT_TO_MOVE;
}
Thanks for your help, neznein9. I think that's probably exactly what I want. However, as I said, I'm a complete amateur so could you give me an idea of what I'm supposed to put in "BG_SIZE:Number" for example? Am I supposed to put "1024:Number" if the background is 1024px wide? I'm not sure what I have to replace in your code to customise it.
Also, will this code work for up and down along with left and right? I need the mouse to be able to freely roam around the background.
Additionally, when the user moves to another part of the image, there will be things for them to interact with. I've just realised of course that these elements are going to have to move with the background as it moves around the stage. Is there an easy way to do this?
Thanks for your help.
Quote:
Originally Posted by neznein9
Customizing it isn't too hard most variables are already predefined in the movie the ONLY thing you have to do to get this code to work is give your background an instance name of myBackground and the code should work fine.
So I don't have to edit anything at all in that code?Quote:
the ONLY thing you have to do to get this code to work is give your background an instance name of myBackground
This is the code for moving horizontal AND verticalQuote:
Originally Posted by anagoge
As for the interactive parts.. I am not entirely sure on this one sorry.PHP Code:addEventListener(MouseEvent.MOUSE_MOVE, onMove);
function onMove(e:MouseEvent):void{
// capture the size of the stage and background
const BG_SIZE:Number = myBackground.width;
const BG_SIZEY:Number = myBackground.height;
const STAGE_SIZE:int = stage.stageWidth;
const STAGE_SIZEY:int = stage.stageHeight
// calculate the difference between stage & bg
// this is the max amount we can move the bg
const RANGE:Number = STAGE_SIZE - BG_SIZE;
const RANGEY:Number = STAGE_SIZEY - BG_SIZEY;
// capture the mouse position as a % of the stage
// so left edge is 0, right edge is 1
const MOUSE_PERCENT:Number = e.stageX / STAGE_SIZE;
const MOUSE_PERCENTY:Number = e.stageY / STAGE_SIZEY;
// calculate the % of the RANGE to actually shift
const AMOUNT_TO_MOVE:Number = RANGE * MOUSE_PERCENT;
const AMOUNT_TO_MOVEY:Number = RANGEY * MOUSE_PERCENTY;
// move the background (backwards)
myBackground.x = AMOUNT_TO_MOVE;
myBackground.y = AMOUNT_TO_MOVEY;
}
My original code was just horizontal, but it's a linear equation so you can just copy everything and change width->height, x->y, etc. (as Kriogenic did).
To move other clips along with this you could work out additional math (for instance if you wanted stuff to move at a different rate so you get a depth-of-focus feeling) however, for the easiest execution, you can just wrap all your elements into one big clip and target that instead of myBackground.
You'll need to reference your objects inside that layer (so instead of myButton, you'd call myWrapper.myButton) but you shouldnt have any other problems with interactivity.
Thanks for the help. I'll experiment with this later on today.
I've just tried to use the code that was supplied, but I get 5 errors:
http://www.ukimagehost.com/uploads/d1a4d47af1.gif
Suggestions?
You're in AS2 mode.
Changed to AS3 mode, but now I get new errors:Quote:
Originally Posted by neznein9
http://www.ukimagehost.com/uploads/7af3e9b524.gif
Now you are getting that because you have not givin your background image (movie clip with image and buttons in it) an instance name of myBackground
This code works great when you put it in the maintimeline, how do you modify it to affect a movie clip inside of that main timeline?
you name a movieclip myBackground and it will follow the mouse, what else do you want it to do?Quote:
Originally Posted by macromedia_star
well, if u learning to code, i personally suggest you to do something easier that moving background.
to get mouse positions and current time, you can use command mouseX or mouseY;
since you want to control ur mouse from left to right, u should use only mouseX var.
start new project, write next:
stage.addEventListener(Event.ENTER_FRAME,UpdateFra me);
function UpdateFrame(e:Event):void{
trace(mouseX);
}
keep in mind, you will get errors when u run it.
u should include the imports, luckily when u type the code by hand (without copy/pate)
you will get automatic import includes in ur code.