Scrolling background

[Soje]

Hey, i'm new here so it would be great if you guys can help me out

I'm trying to achieve the effect where whenever the button is clicked, the background scrolls. Here is an example from the nokia website, click on the 3300 link to activate:

http://www.nokia.com/let_yourself_go/launch.html

thanks, help would be much appreciated

[spriggan]

There's 2 simple ways to do that effect. The first is to just have it animated on the MC timeline. So you start at frame1 and when you click a button you have a simple gotoAndPlay (x) call. Then you have the animation from there on. The better way is called easeing, wich is what I beleave they used at that site. There;s a nice tutorial here http://www.actionscript.org/tutorials/intermediate/Easing_Menu_System/index.shtml and instead of makeing the easing menu a 2x2 row you can line it up into one row like Nokia did.

[slowpoke]

here's the actionscript way of doing this. Sod it, why not put an ickle tutorial in here. This can serve as an intro to modular actionscripting.

create an empty movie clip (MAC apple+f8 or PC control + f8) and call it move.MA
//in frame 1
targetX = 0;

//in frame 2
xPos = _parent._x;
distance = targetX - xPos;
newX = distance / 5;
_parent._x += newX;

//in frame 4
gotoAndPlay(2);

//overview
//basic math: distance is calculated by figuring out where you want to be, where you are, and subtracting one from the other
//try changing the number 5 in the distance variable later on to see what effect it has
//if you are new to the "+=" operator, it basicaly means "this equals this + that"


ok. now draw a box, and convert it into a movieclip. give it the instance name of "backDrop". double click the "backDrop" instance to open it up for editing. Now drag your "move.MA" clip from the library, put it in the top left hand corner of the "backDrop" box and give it the instance name "move".

now find your way back to the mainstage (probaly by clicking "scene1" just under and to the left of the timeline) and create a button. In the buttons actions add the following code.

on (release){
backDrop.move.targetX = 100;
}


now create another button, add the same code but change the 100 to whatever number you want. Create as many buttons as you want using different target variables.

OK, so now you have a working engine for your backdrop thingy. To make it look even more stunning. Use multiple backdrops each with their own move.MA engine and change the "distance / 5" equation to create a paralax effect.