Is there an AS3 script for scrolling parallax background?

[jjfossey]

I want to create a parallax scrolling effect using 3 PNG images that are 950px x 335px. One image is the foreground, another is the background and the third is the "middle" image. What I want to do is automatically scroll each image horizontally at different speeds, but I can't figure out how to do that using AS3. All the parallax examples I've seen so far requires the user to scroll the background using their mouse or keyboard, and that's not what I want to do. I want it to automatically start scrolling when the user loads the page. Can this be done with AS3? If so, can someone give me a script or tell me where to find one?

Thanks.

[Ned Murphy]

You should try searching Google using "AS3 parallax tutorial"

[jjfossey]

I did, but none of the tutorials showed me what I need. Thanks though.

[newToAS3]

Did you checked this tutorial at gotoAndLearn?

http://www.gotoandlearn.com/play?id=96

Hope it helps...

[jjfossey]

Yes, I saw that, but that''s not what I wanted. Take a look at these two links:

http://stephenmcintyre.net/examples/parallax/

http://youlove.us/  (look at the header)

These sites us JavaScript to achieve the parallax effect, which isn't the most optimal because it uses 50%+ of the user's CPU, but this is the effect I want to douplicate in Flash using AS3. I hope this is possible.

[Ned Murphy]

Your best bet will be to scroll one image first.  Once you have that done, you should be able to make it happen a couple more times for the other two images.

In AS3 you could use an Event.ENTER_FRAME event handler function to continuously increment the x property of an image's movieclip.  If you want it seamless, then you need to have two such objects, each taking turns tailing the other--as one moves out of view it moves all the way to the other end of the one tailing it.  Using the ENTER_FRAME event will make things happen without any need for interaction with a mouse or keyboard.

[jjfossey]

Thanks for your reply. I tried applying the following AS2 script to each image:

For the first movie clip I used:

animator = createEmptyMovieClip('animator',1);
bg_1 = animator.attachMovie('star1','bg_1',1);
bg_2 = animator.attachMovie('star1','bg_2',2);
bg_1._x = -bg_1._width/2;
bg_2._x = bg_2._width/2;
speed = 1;
starWidth = 950;
animator.onEnterFrame = function() {
    bg_1._x -= speed;
    bg_2._x -= speed;
    if(bg_1._x <= -bg_1._width) bg_1._x = starWidth;
    if(bg_2._x <= -bg_2._width) bg_2._x = starWidth;
}

For the second movie clip I used:

animator = createEmptyMovieClip('animator',2);
bg1 = animator.attachMovie('star2','bg1',1);
bg2 = animator.attachMovie('star2','bg2',2);
bg1._x = -bg1._width/2;
bg2._x = bg2._width/2;
speed = 2;
starsWidth = 950;
animator.onEnterFrame = function() {
    bg1._x -= speed;
    bg2._x -= speed;
    if(bg1._x <= -bg1._width) bg1._x = starsWidth;
    if(bg2._x <= -bg2._width) bg2._x = starsWidth;
}

And for the third and final movie clip I used:

animator = createEmptyMovieClip('animator',3);
bg01 = animator.attachMovie('star03','bg01',1);
bg02 = animator.attachMovie('star03','bg02',2);
bg01._x = -bg01._width/2;
bg02._x = bg02._width/2;
speed = 3;
starssWidth = 950;
animator.onEnterFrame = function() {
    bg01._x -= speed;
    bg02._x -= speed;
    if(bg01._x <= -bg01._width) bg01._x = starssWidth;
    if(bg02._x <= -bg02._width) bg02._x = starssWidth;
}

I thought this would work, but when I tested the movie all three movie clips moved together at the same speed. I want each movie clip to move at a different speed, but I'm completely stuck.

[Ned Murphy]

If you're going to go with AS2 you should resume your posting in the AS2 forum.

As far as the code you show, if that's all in the same timeline then your speed value will be the same as whatever the last value you assign to it.  You should have three different speed variables (speed1, speed2, etc).

Regardless of what else I offered, if you managed to get something moving, then you are likely on the path to achieving what you want, so I suggest you continue on that path and expect a little head scratching and frustration along the way.  I believe that suffering this stuff is the best way to learn it.

[Rothrock]

If you are publishing to an AS3 document and Flash 10 (I think) you can easily use the z property of objects to fake parallax.

Set up a movieclip to contain your scene. And then set up your movieclips for the various depths (near, mid-range, far, very far, what have you) and give each one of them a depth with higher numbers for the further away slower moving parts.You can then just tween the parent/scene clip and Flash will do the math.