In this tutorial, you will learn how to make a Flash parallax scrolling gallery from scratch. Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images.

View Demo Gallery

Download Demo ZIP

1. Floor Pattern

First we need to make a tiled wood floor image. Here I use a 280 x 182px hardwood floor image. Go to menu Filter > Other > Offset and enter the following settings: Horizontal = 140, Vertical = 91 (half size of width and height), Wrap Around. Then use the Clone Stamp Tool to touch up the cutting edges. Select all and go to menu Edit > Define Pattern.

offset filter

2. Build the Wall

Now make a new document, 2520 x 450px. Use the Rectangular Marquee Tool to make a selection. Fill it with a 2 color linear gradient: color1 = #eeebd4, color2 = #cabb99. Then apply Filter > Noise > Add Noise = 2% to add some texture to the wall.

Wall

3. Fill the Floor

Make a rectangle shape just below the wall. Double click on the layer to activate the Layer Style palette, apply Pattern Overlay with the wood pattern you created in Step 1.

Floor pattern overlay

4. Floor Trim

Select foreground color #f0ecd6 and make a rectangle shape above the floor layer. Double click on the layer to activate the Layer Style palette, apply Inner Bevel effect as shown (Size = 3, Angle =70, Altitude = 64, Shadow Color = # 856738, Shadow Opacity = 39%). Then, apply Drop Shadow (Opacity = 27%, Angle = 90, Distance = 1, Size = 3).

floor trim

5. Add Logo Signage

Paste in your vector logo on the wall. To make the metallic effect on the logo, apply Gradient Overlay (Angle = 90, Gradient color1 = #a9a3a3, color2 = #a9a3a3, color3 = #d7cfcf). Then, apply Inner Bevel (Angle = -48, Altitude = 21, Shadow Opacity = 0). Finally, apply Drop Shadow (Shadow color = #73552d, Opacity = 25%, Angle = 90, Distance = 4, Size = 4).

logo signage

6. Couch

Now it is time to add in some furnitures in the scene. Be sure to find stock images that are in the front-view perspective that blend with the scene. Cut out the background from the stock photo and paste the couch above the floor layer.

floor trim

Couch’s Shadow

Make a new layer. Hold down the Cmd key and click on the couch layer thumbnail to load the selection of the couch. Choose a muddy brown color and fill the selection with Foreground to Transparent gradient. Then apply Filter > Blur > Gaussian Blur = 3px.

couch shadow

Go to Edit > Free Transform (Cmd + T). Hold down Cmd key and drag the top middle handle downward and toward the right to create a cast shadow. Now shift this shadow layer below the couch layer. Repeat this step to make the side couch.

couch shadow transform

7. Build a Column

Make a new selection as shown with the Pen Tool. Then create a new layer and fill the selection with color #eef0ec. Next, fill the column with a gradient color that is a darker shade.

column

8. Add Other Decorative Items

Since these steps are very repetitive, I’m not going to further explain the details. Remember, the goal is to find items (stock photos) that are in the front-view perspective. So, be creative!

The items I have included: Coffee Table, Plants, TV, Bookshelf, Toys, Books, Light Switch, Glass Table, Desk, Computer, Printer, Chairs, Clock..

full scene

9. Export the Tiled Background

Assuming that you have finished with the PSD, now it is time to export the graphics to re-assemble in Flash.

First, export the tiled background image. Hide all other layers except the wall and the floor layers. Make a selection 280 x 450px, go to Edit > Copy Merged (Ctrl+Shift+C). Then paste the clipboard in a new file and export the image to PNG.

tiled wall background

10. Export the Other Items

Now export the other items (furnitures, tables, desk, bookshelf, etc.) to individual PNG files. We will re-assemble these items into the scene in Flash.

other items

11. New Flash Document

Create a new Flash document, 700 x 450px at 25fps. Import all the PNG files and organize them in a folder in the Library palette. Then import a JPG copy of the Photoshop mockup and set it to Guide layer. We will use this guide layer to assist on positioning the items on the stage.

layer guide

12. Back_mc

Drag the wall bg.png from the Library to the stage. With the wall bg.png instance selected, press F8 to convert it to movie clip symbol. Make sure you select Type = Movie clip, otherwise the ActionScript will not work. Name the instance "back_mc" so you can assign ActionScript to it.

back mc

13. Edit back_mc

Double click on the back_mc instance to edit the movie clip. Hold down the Option (Alt) key and drag the wall bg.png to the right to duplicate it. Duplicate it 9 times until you reach 2520px in width. By tiling the background graphic rather than using a full image, you will minimize the file size.

duplicate wall

14. Adding Other Items to back_mc

Now drag the other items from the Library and position them as shown on the guide mockup layer. Then use the Text Tool to display a welcome message.

back_mc full

15. Create front_mc

Go back to the main stage, make a new layer. Use the Rectangle Tool to make a 2520 x 80px box. With the box selected, adjust the Alpha to 0% to make it invisible. Press F8 to convert it to a movie clip and name the instance front_mc.

front_mc

16. Edit front_mc

Double click on the front_mc instance to edit it. Use the back_mc as the guide and position the column, table, and stool.png as shown on the mockup guide. Try to avoid placing any objects at 750px from the left and right side of the movie clip because the front_mc will scroll faster than the back_mc.

front_mc full

17. ActionScript Layer

Go back to the main stage, make a new layer and name it "actions". Select frame 1 and enter the following ActionScript code:

stageWidth = Stage.width;

speed1 = 15;
speed2 = 14;

mc1Width = front_mc._width;
mc2Width = back_mc._width;

mc1X = front_mc._x;
mc2X = back_mc._x;

lock_scroll = false;
_root.onEnterFrame = function () {
	if (!lock_scroll)
		scroll_mc();
}

function scroll_mc() {
	var xdist = _xmouse-(stageWidth/2);
	mc1X += -xdist/speed1;
	mc2X += -xdist/speed2;
	if (mc1X>=0) {
		mc1X = 0;
	}
	if (mc1X<=stageWidth-mc1Width) {
		mc1X = stageWidth-mc1Width;
	}
	if (mc2X>=0) {
		mc2X = 0;
	}
	if (mc2X<=stageWidth-mc2Width) {
		mc2X = stageWidth-mc2Width;
	}
	setProperty("front_mc", _x, mc1X);
	setProperty("back_mc", _x, mc2X);
}

//create an empty mc container for content to display
createEmptyMovieClip("content_box", 200);
content_box._x = 195;
content_box._y = 92;

18. Tinted Overlay Gradient

Make a new layer above the front_mc layer. Use the Rectangle Tool and draw a 700 x 450px box on the stage. Fill it with black gradient: color1 = black (alpha=30%) and color2 = black (alpha=90%). Notice this will create a tinted effect on top of the movie clip. Press F8 to convert this to symbol and name it "tint symbol".

tinted gradient

19. Fade-in "Tint" Movie Clip

Convert the "tint symbol" instance again to a movie clip and name it "tint". Double click on the "tint" MC to edit it. Create a fade-in motion tween in between frame5 and frame20. Then delete frame1.

fade in

20. Pause the Scroll Function

Reverse the previous step to create a fade-out effect of the tint symbol between frame25 and frame40. Then make a new layer for ActionScript. Insert stop() action in frame1 and frame20.

fade out

Label frame5 “on” and enter the following code:

tint_mc.onRelease = function (){};
tint_mc.enabled=false;

_root.lock_scroll = true;

The first 2 lines will create a fake button which will block all the buttons below the "tint" MC. The third line sets the lock_scroll variable to true.

21. Restore the Scroll Function

In the previous step, the variable was set to "lock_scroll = true" to stop the scroll function as soon it reaches frame5 (“on”). Now we need to set lock_scroll = false at frame40.

_root.lock_scroll = false;

gotoAndStop(1);

22. Assign Actions to the Buttons

Now we need to assign the actions to the buttons. Select the button and enter the following ActionScript:

on (release) {
	_root.tint.gotoAndPlay("on");
	_root.content_box.loadMovie("experimental.swf", 0);
}

Basically, the script tells the "tint" MC to play label “on” and load the external SWF in the movie container, "content_box". Repeat this step for the other buttons and load the SWF file accordingly.

button actions

23. Create External SWF files

Make a new document, 310 x 265px. Design the layout as you desire (here I have some text and images on a rounded white shape). Save the file name according to the button actions you’ve assigned in the previous step.

external swf

Close button and unload movie

In the external SWF, don't forget to make a button that allows the user to close the pop-up and go back to the main movie. Create a button symbol and name the instance close_btn. In the action layer, enter the following code.

close_btn.onRelease = function (){
	_parent.content_box.unloadMovie(0);
	_parent.tint.gotoAndPlay("off");
}

When the close_btn is clicked, it will unload the movie in the "content_mc" container and tell "tint" mc to play label “off”.

24. Publish the Final Files

Now publish the final SWF file along with the external SWF files. You can view my demo or download the zip.

271 Comments

Björn Pehrsson
Apr 25, 2008 at 6:36 am

Looks nice! But the front_mc should move faster than the back_mc for the parallax-effect to work. Picture yourself in a moving car, looking out at the landscape through the side window. The road will move really fast, while the clouds almost seem to stand still. It’s the same thing, only not as extreme.

daustralala
Apr 25, 2008 at 7:03 am

you are amazing, man… thanks for the tutorial!

Lamin Barrow
Apr 25, 2008 at 7:34 am

WOW…This is amazing stuff. Keep them coming Nick. :)

Stevie Killen
Apr 25, 2008 at 8:05 am

Great technique Nick, looks very good. I think I would like to try something similar in javascript if I get the time. One thing I would say though is the actionscript uses a few bad practices. It is best to assign a button with an instance name and call the onRelease action in the first frame of the main timeline, rather than embedded in the buttons. Embedding it in buttons only causes problems later when searching for pieces of code.

twixtop
Apr 25, 2008 at 8:06 am

héhéhé
amazing.. no more words…
thanx
=]

Beau de Noir
Apr 25, 2008 at 9:20 am

I learn something from you with all occasions :-)

Ed
Apr 25, 2008 at 9:58 am

Great tutorial! I really enjoy your websites and make it a practice to visit them every day to see what is new. Wish I had your talent………….

Richard Shields
Apr 25, 2008 at 11:15 am

Truly Impressive! Keep it up!

dude
Apr 25, 2008 at 11:25 am

This first poster is correct – this isn’t parallax scrolling. Maybe something is wrong with the demo? The background should be scrolling slower than the foreground. All I see is a picture scrolling across.

Resat
Apr 25, 2008 at 11:26 am

Good work! Thanks for it.

giackop
Apr 25, 2008 at 12:11 pm

that’s sick!! so nice thanx

andy
Apr 25, 2008 at 12:38 pm

@dude: Yes there is a parallax scrolling. Watch for the pillar moving in front of the pictures. It’s just not a very big difference between the speed of foreground and background.

Tough, there is a slight calculation error I think: The pillar is not in the same position when the picture moves to the right and when the picture moves to the left. But anyway: Nice!

Erika
Apr 25, 2008 at 12:53 pm

It’s in a different spirit from the clearleft parallax (which is what I anticipate many of your visitors will be expecting), but it’s awesome nonetheless. :)

Kevin
Apr 25, 2008 at 5:05 pm

Exactly what I was looking for! Thank You.

David
Apr 25, 2008 at 6:09 pm

Hey…

Is this not the exact same tutorial you did for web designer magazine ages ago… digging up old content eh ?

monster
Apr 25, 2008 at 10:21 pm

I wish I had flash cuz thats cool.

naveed ahmad
Apr 26, 2008 at 4:01 am

man thats really great..thanks alooooooooot for sharing such precious piece knowledge..that is gona for sure help me alot in building my portfolio.. :)

Spartan
Apr 26, 2008 at 7:21 am

Very great tut! Thanks a lot and keep it up!

sesebian
Apr 26, 2008 at 3:07 pm

Thanks :D

Manolo
Apr 26, 2008 at 7:05 pm

Hell, this is amazing. Thank you for sharing!

Susan
Apr 27, 2008 at 1:34 am

hey.. thanks dude..

you inspire me for my next project.. keep up a good work

i will come back.. hungry for more idea / knowledge.. :)

Katalog Stron
Apr 27, 2008 at 6:25 am

Thank you for that very good tutorial :)

webpixelkonsum
Apr 27, 2008 at 11:30 am

My answer is simple: this tutorial is amazing ;)

Ralph

Jordy Wouters
Apr 28, 2008 at 4:08 am

Very handy tutorial! I love parallax :P

Björn Pehrsson
Apr 28, 2008 at 8:16 am

@andy: Yes, there is sort of a parallax-effect, but it’s inverted. For a more realistic effect (as I wrote before), the front_mc should move faster, not slower than the back_mc.

Alain Tovar
Apr 28, 2008 at 11:17 am

great tutorial. What I would like to see if the explanation for the code, that would help people like me that want to learn actionscripting.
Thank you.

John
Apr 28, 2008 at 2:50 pm

Love your site.. but wasn’t this the same tut in a web design magazine about a year ago?

xenowork
Apr 28, 2008 at 3:54 pm

your tutorials are very detail and awesome man.. thats help me a lot..keep up the good work nick..

Nick La
Apr 28, 2008 at 5:38 pm

@John – Yes, it was previously published in Web Designer magazine before. I re-publish here due to many requests.

sledgeweb
Apr 28, 2008 at 11:17 pm

Umm… this isn’t right. The background is moving faster than the foreground, this is reverse of how it should be.

imaginepaolo
Apr 29, 2008 at 2:17 am

Great article…

Neil
Apr 29, 2008 at 5:25 am

Great tutorial, thank you for taking the time, looking forward to giving this a go tonight! ;)

Bernhard
Apr 29, 2008 at 10:49 am

Thanx for this fantastic tutorial and of course the inspiration.
rgds bernahrd

Duncan
Apr 29, 2008 at 5:58 pm

Uh… where’s the parallax? I viewed the demo and I see the room move from left to right, but the foreground and the background seemed to move at exactly the same speed – no parallax.

Joefrey Mahusay
Apr 30, 2008 at 12:45 am

Rally nice tutorial, I wanna do something like this. Thanks :)

Glich
Apr 30, 2008 at 5:35 am

Wow! Really really cool! :)

Fubiz
Apr 30, 2008 at 9:41 am

An excellent tutorial. Good job!

Amos
Apr 30, 2008 at 12:03 pm

Wow! It’s really cool! :)

John
Apr 30, 2008 at 12:51 pm

@Nick. Cool Thanks. You rock.

Real Estate Graphic Design and Marketing
Apr 30, 2008 at 1:06 pm

I have the same issue as #36, same speed. I’m using Firefox 2.0.
Beautiful piece nonetheless.

pepe
Apr 30, 2008 at 1:13 pm

thanks, because with your help we are getting a more friendly internet every day; really thanks for all you do for web master rookies.

Ken Nickless
Apr 30, 2008 at 6:19 pm

Great demo! You’re giving designers some top quality training for nothing. And explaining everything step by step means that we can all give it a try.

Allison
Apr 30, 2008 at 9:43 pm

wow…

thank you so very much…

wow….

Allison
Apr 30, 2008 at 9:45 pm

quick question:

is there a way to blur the wholoe swf while scolling?

I think it might be a little easier on the eye.

Ariyo
Apr 30, 2008 at 10:32 pm

This is mad cool. Thanks for all of your hard work. I can’t wait to give it a try after my final exams.

José Santibáñez
May 2, 2008 at 2:00 am

Great element and thanks for share your hard work. I challenge you to this… traducelo al español.

P.Suma
May 2, 2008 at 2:17 am

the work is just marvelous.. u r really great to share it ..n teaching each n every aspect of the work..hats off………

Jean bon
May 2, 2008 at 3:32 pm

This gallery is very cool …But the link is corrupted…Could you put another archive ?

THX

Thura
May 2, 2008 at 8:28 pm

Thanks !

ph
May 3, 2008 at 5:45 pm

THAT’S JUST FANTASTIC! I love your site!

Frosty Web Designs
May 4, 2008 at 2:13 am

Real cool!

Teksty
May 4, 2008 at 4:41 am

another great tutorial… regards

Paul
May 4, 2008 at 9:27 am

Nice demo… but it took me a few moments to realise what wasn’t right about the perspective. When you move around in real life, objects closer to you appear to move faster than objects further away. In your demo, objects closer to you move SLOWER than objects further away.

kailep
May 4, 2008 at 5:18 pm

hi! this is awsome, i was lookin for this 2 weeks ago, just a question: is so important to made 9 backgrounds?? i need to know this ’cause i have a background that is not a pattern, have diferent forms, etc, so this affect something??

TPN WEB DESIGN INC.
May 5, 2008 at 12:53 am

wow, Nicely done.

naran_ho
May 5, 2008 at 4:55 am

Excelente, nice work, very interesting .

Cavan
May 5, 2008 at 9:36 pm

Your demo parallax is backwards. The closer an object is too you, the quicker it should move buy. However, in your explanation you get it right. Oops…

Web Design UK
May 6, 2008 at 11:01 am

Once again you prove why this is the essential web design blog. Brilliant tutorial, many thanks!

pakolg
May 6, 2008 at 4:54 pm

hi! i love your blog and love this demo
but i have a problem with the file parallax-gallery.fla
can you help me?
thanks!

pakolg
May 6, 2008 at 7:44 pm

exactly
I cant ope the file

Triple-H
May 8, 2008 at 2:20 pm

wow man this is awesome

thank you for the tutorial

Nick La
May 8, 2008 at 3:43 pm

@pakolg – the demo FLA files were saved as Flash CS3 format (thus you need CS3 to open it). Please download the zip again, I have replaced the files with Flash 8 format.

Firoz Jokhi
May 8, 2008 at 4:50 pm

Nice effect and all, but your parallax works opposite of real life :)
Things closer to you should be moving faster than things away.

akratellio
May 9, 2008 at 7:50 am

it looks nice but i didn’t have found out how i can stop the scrolling once i’ve start it?!?

akratellio
May 9, 2008 at 7:53 am

it looks nice but i didn’t have found out how i can stop the scrolling once i’ve start it?!?
(i tried out with the touch pad of my notebook instead of an mouse)

MyDesign.com.ar
May 9, 2008 at 10:27 am

exelente posto, muchas gracias, me sirvio para comprender muchas cosas del flash que no sabia hacer tambien

Esmeralda
May 9, 2008 at 8:33 pm

Hola!! disculpen la ignorancia, pero el primer diseño es hecho en photoshop verdad??

Por otra parte los quiero felicitar porque me encanta el diseño de su pagina.

Atte. Esmeralda

PD. Si tienen una web en español envienmela por favor

Paintworkz Web Design
May 12, 2008 at 1:50 am

Thanks for this brilliant post. Well I have tried it with the instructions provided here, and its looking pretty good.

in-sanity
May 12, 2008 at 10:16 am

Excellent tutorial! I never got flash … now I’m beginning to see that it’s not that big of a deal, if you know what you want and no how to obtain it :-). Thanks a lot. Keep up the good work.

arthur
May 15, 2008 at 10:52 am

we did something similar for a client recently.
check out http://www.debriefvoordekoningdefilm.nl/
(it’s mostly dutch, will be translated later this month :))

Steven
May 15, 2008 at 1:43 pm

This article has been ripped straight out of Web Designer Magazine? Shouldn’t you be worrying about publishing copyright issues unless you have permission to redistribute their material on your blog?. Sure copying out of publications is an easy way to get content and visitors but it’s also just as easy to get yourself sued, very disappointing behavior from what is otherwise a pretty good blog.

http://www.webdesignermag.co.uk/

Poor m8, pretty poor :(

Owen
May 15, 2008 at 2:22 pm

Thank you for sharing this.I like you design very much!

Flash Animations
May 17, 2008 at 12:17 am

Great work!
Nice tutorial on site. I am learning Flash CS3 and sometimes working Flash scripting for a few jobs.
see my work on http://www.gigaturn.com/flash-work.htm

Lawrence Kazali
May 17, 2008 at 3:33 am

What a lovely work!
I truly enjoyed exploring your work and I would like to thank you for sharing such an immense talent.

Keep the good work up!
Lawrence

php-web-developer
May 17, 2008 at 4:52 am

Thank you for sharing this.I like you design very much!

aronil
May 20, 2008 at 12:34 am

Thanks a lot man for sharing this tutorial with us :) Although I find the scrolling a tad bit of a headache. Something I can keep in mind next time if i just wanted to make something look cool.

Steven: I don’t think it’s a rip off, especially if you were to look at the number of tuts on the web that almost look the same.

Fredrick
May 26, 2008 at 5:53 am

Truly impressive.
Would like to know a couple of things.
Is it possible to make your swf files open at a pre defined (x & y) position rather than at the center. Would xml driven swf files open up on the tint mc? The reason I asked was I have heard of ‘layer’ clash in flash.
Expecting your reply. Regards

Tommy_Gun
May 28, 2008 at 6:26 am

good :)

AndrU
May 28, 2008 at 1:55 pm

to: Steven

Maybe is because NICK write for that magazine?, inform yourslef before posting a negative comment.

Cheerz from Uruguay!,

Stephan
May 30, 2008 at 8:57 am

Hey Steven, it’s good idea to advertise your magazine here and it’s smart idea that you did here… But I will not click on your link. Nice trying. But not right.

gNcWebmaster
May 30, 2008 at 11:20 am

wow! Really good. Thanks

Aspiring to be the best seo company
May 31, 2008 at 8:45 am

Awesome.

Thanks for a well-written and easy to follow tutorial.

Superb.

savannah
Jun 3, 2008 at 8:06 am

hey , when i try to download this zip (for viewing on my computer) i get all the files and they open except for the actual flash .fla files – they say UNEXPECTED FILE FORMAT… tried downloading zip a couple of times…
I would really like to get it working – i did the tutorial (which is great by the way), but its doesn’t really work properly when i make it, so i need to see your source FLA files
any suggestions?
by the way- love this site’s design. Amazing!

sophie
Jun 4, 2008 at 3:17 am

this tutorial is great, thanks so much for putting it out there for us all. so stoked to have found ur site

Giuseppe
Jun 7, 2008 at 4:52 am

Simply magic!! Wow

dohitsch
Jun 9, 2008 at 5:10 am

hi, thx for great tutorial !!!

is it possible to scroll with right/left arrows ? i am not so experienced with flash/action script, but i would like to do it different way …

and, another problem, i have only flash mx/ flash 6, is that action sript works with my old version of flash ? could you post .fla file in this old format ?

thank you in advance, jan

Strike
Jun 10, 2008 at 8:13 am

Really good. Thanks

Priyanka
Jun 11, 2008 at 2:25 am

nice tutorial

Flash Development
Jun 13, 2008 at 12:04 pm

Awesome, really cool flash gallery!

Ryan
Jun 18, 2008 at 7:23 am

awesome, thanks !

Marceli
Jun 21, 2008 at 2:25 pm

awesome. But I think there is one problem when you wanna stop inside it vibrates but no stop.

sunbear
Jun 22, 2008 at 3:20 am

waw!

Flash Experts India
Jun 22, 2008 at 4:27 am

Nice Gallery, I was using differnt way for our flash work. This is really helpful for my future flash work.

Eucrid
Jun 23, 2008 at 8:20 am

This crashed my browser (FF3) when I right clicked it. Generally it was quite slow and buggy, only scrolled if the mouse was in a very specific location.

Pity because it looks great.

Skyte Media
Jun 27, 2008 at 8:29 am

Yet another brilliant aid from webdesignerwall.

http://www.skytemedia.com

Phillip
Jun 29, 2008 at 10:43 am

THIS Is a test

curtis
Jul 1, 2008 at 6:12 am

i’m currently learning Flash at Tech in sydney Australia.
It would really help if you could send me Actionscript comments on what all the code is doing. I learn faster when i understand what the code is for.
Seeing other peoples script comments helps me alot.
Are you able to send me(if you have time) a text file with the actionscript for the above tutorial, but with script comments? it would me alot!!!

Thanks.

curtis
Jul 1, 2008 at 6:14 am

woops, i meant “it would help me alot” . . . . .
email: oceanskater88@hotmail.com

Rt
Jul 4, 2008 at 11:23 pm

Have not seen the likes of this

Dennis Mortensen
Jul 6, 2008 at 3:19 am

So many components to purchase for Flash MX – CS3, but a black hole of information on how to create you own simple component.
Have you seen or posted such a tutorial?
Thanks

Joey
Jul 6, 2008 at 9:00 am

Very nice gallery, great job!

Joey – http://www.leetwebmasters.com

Flash Website
Jul 7, 2008 at 10:07 am

One of best gallery, I have seen ever…:)

Search Scripts
Jul 14, 2008 at 2:08 am

This is awesome. I’ve never seen such a beautiful flash gallery in my life. This is so realistic and full of life flash gallery.

Aman Singh
Jul 14, 2008 at 10:20 am

Hey I used my own version of Parallax scrolling, but this is an excellent tutorial, I’ll definitely let people know about it. My site is using parallax scrolling – http://www.skribbs.com – check it out let me know what you think!

Jesus
Jul 14, 2008 at 6:38 pm

Great!

d.
Jul 16, 2008 at 11:29 pm

The tutorial is very helpful, so thanks for that.

NOW… is there a way to make the scrolling effect go smoothly? Even in the demo, it looks rough.

I’ve seen other ones that have “no friction” =p

aside from that. Awesome site!

mikemantx
Jul 30, 2008 at 9:04 am

I have been scouring the internet for a UNIQUE flash gallery for a projeect of Kids art here at work. Fom the example I will be jazzing it up with a kids theme. Thanks alot.

Eneza
Aug 4, 2008 at 4:51 am

Great!!! Very very impressive thank you for the script. Maybe I can tweak it to something relevant to my project.

Thanks!

Renzo
Aug 6, 2008 at 11:19 am

Excelent!

Website Design
Aug 7, 2008 at 9:45 pm

Prefect site for designers…Cool Gallery for flash experts.

Free 3G iPhone
Aug 12, 2008 at 2:28 pm

Thanks for that. Much appreciated

iceman
Aug 14, 2008 at 4:00 am

I want to make like this one.. nice thank you so much for the tutorial.. nice job..

shweta
Aug 14, 2008 at 9:53 am

great gal
lery

warley nunes
Aug 16, 2008 at 8:58 am

GOOD, Totaling GOOD, Incridible,

Iso 9001 Kalite Belgesi
Aug 20, 2008 at 9:09 am

Thank you very much

zeeshan
Aug 26, 2008 at 2:30 am

nice work
i like

LittlePieStudio
Aug 27, 2008 at 11:35 am

Wow! I’ve been looking for help on creating a similar effect. I’ve got a new client who wants a layered look and I appreciate this in-depth tutorial. You rock, man!!

LittlePieStudio
Aug 27, 2008 at 11:38 am

I wanted to add this example to the list. This is the one my client brought to me. I think it’s an amazing piece of work and can only hope to create something like this someday!

http://www.springcreekbluegrassband.com/

Iso 22000 Kalite Belgesi
Sep 11, 2008 at 2:04 am

Thank you its great work.

fatih
Sep 11, 2008 at 3:46 pm

How is done transparent buttons?

Wcs Kalite
Sep 13, 2008 at 8:34 am

This site is good,for Iso 9001 Quality Management

gia
Sep 18, 2008 at 12:22 am

Indeed very interesting!.

Laboratuar Akreditasyonu
Sep 22, 2008 at 12:15 pm

Thanks for good article

Nan
Sep 27, 2008 at 4:14 pm

Great contributor!!…
:
:
Love your site, and all your tutorials are really really incredible!!
^_^

cheers

lili
Sep 29, 2008 at 2:37 pm

this is cool

Jorge Lobo
Sep 29, 2008 at 5:15 pm

Great work. But it would be more reallistic if you invert the values…

“speed 1” must be lower than “speed 2”, considering that speed 1 moves the farthest objects, and speed 2 moves the closest.

Try the optical illusion with your monitor and the farther wall on your room, move from one side to another. The monitor will “move” faster while the wall moves just a little.

I downloaded the files, and it seems to be much better with speed1=18; speed2=22; or something like that.

Congrats!

Antônio Vítor
Oct 1, 2008 at 3:56 pm

Thank you for the share of your knowledge in flash in this lesson. I has need very much to know how to make an application like that.

Thks!

chethan
Oct 3, 2008 at 6:24 am

oh wow cool I love trying new things like this :)

belgelendirme
Oct 8, 2008 at 2:36 pm

than for good article

jb
Oct 13, 2008 at 3:07 pm

espectacular!
re woau!

Tim Marshall
Oct 15, 2008 at 10:36 am

Wow really slick work.

This can come in very handy

GAN
Oct 28, 2008 at 4:45 pm

cool, thanks

hubo
Oct 29, 2008 at 11:05 pm

what about if you have 3 different planes instead of two?

Andres
Nov 4, 2008 at 8:07 am

Should I change/add ActionScript if I’d like the Gallery to zoom in on certain pictures?

Otherwise gr8 job m8!

Fe
Nov 4, 2008 at 7:52 pm

Man, really incredible tip.

Brammy
Nov 10, 2008 at 9:18 pm

can anyone suggest how to add a 3rd layer, between the front_mc and back_mc

i’ve tried making new movie clips and adjustng the actionscript but im having alot of trouble getting it to work

any help?

Diego
Nov 14, 2008 at 7:11 pm

The couch shadow was a really nice touch

Diego

http://www.corporatewebsolutions.net

Sam
Nov 16, 2008 at 8:17 pm

hey,
this is great,
but i was wondering if maybe you could do a video version of it.
it always seems so much easier to see things being done live and copy them or adapt them.

thanks.
sam.

maumau
Dec 2, 2008 at 8:52 pm

Oops – parralax is backwards in your demo. Nearer things should move faster than farther things…. think of a car trip – the fence at the side of the road zips by, but the distant mountans hardly move.

arvee
Dec 3, 2008 at 11:30 am

wow. is that how is it done? interesting.

Borja
Dec 3, 2008 at 5:48 pm

awesome! can be the tutorial made on actionscrp 3? its grat thank for the work!

JavierSE
Dec 26, 2008 at 6:47 pm

really cool and really easy to follow – you surely rule! thank you and best wishes!

Luiz Fernando
Jan 15, 2009 at 9:25 pm

Great!
see my site with the gallery: http://www.lisdalcorte.com.br/galeria.html

Ramalho
Jan 19, 2009 at 1:29 pm

So wonderful!!!

dhyani
Jan 25, 2009 at 11:15 am

Brilliantly done and explained …….

Elizabeth K. Barone
Feb 3, 2009 at 1:00 pm

Nice tutorial, as usual. I hated Flash when I first started using it, but now i love and appreciate it. I can’t wait to try this!

Janis
Feb 7, 2009 at 2:14 pm

Hi!
I am trying to create a prallax effect and I came across your tutorial at:
http://www.webdesignerwall.com/tutorials/parallax-gallery/comment-page-15/#comments
I can not figure out how does Flash understand where is a middle point to scroll left or right! In my case in is far at the right side and I have to move a mouse right at the border of my flash video to scroll it left! How can I make program to understand my middle point is in the middle?
Thanks in advance,
and have a nice day!
Janis

Ashley
Feb 12, 2009 at 11:44 pm

I cannot wait to give this a try! I’m super excited about this!!! Great job!

Larry
Mar 3, 2009 at 1:09 pm

very nice work sir!

navees
Mar 5, 2009 at 5:00 am

great sir,
thanks for teaching,
this is awsome.

vivy
Mar 5, 2009 at 9:33 am

tutorial excelente!!!!!

kristay
Mar 16, 2009 at 12:28 pm

Is there an AS3 version aanywhere out there?

The gallery is awesome bu I’m working in as3.

adrian
Mar 21, 2009 at 5:20 pm

Muchas Gracias amigo. Excelente Tutorial.

Adriana
Mar 26, 2009 at 11:25 am

Muchas gracias me encantó el tutorial, además q me encanta este tu blog muy lindo diseño, lo hiciste tu??
Un saludo

Patricia Ann
Apr 7, 2009 at 2:56 pm

This is exactly the type of tutorial that should be on every inspirational web design web site. I love that you gone and explained how to use the Flash part. You are brilliant!

I will definitely give this a try on our new web site. :)

Baby
Apr 10, 2009 at 8:37 pm

It is super, but I really need the ac3 one. Does anyone know how to do it!? Thank you!

suzana
Apr 24, 2009 at 11:37 am

Thank you! I was thinking in to do something like this to my new site, but only a desktop clickable :) This tuto helped me so much.

Willie
Apr 24, 2009 at 10:16 pm

i’m having trouble doing this using CS4 seeing as how the motion tween is different. can anyone help me?

CgBaran Tuts
Apr 25, 2009 at 11:59 am

Great tutorial thanks

Willie
Apr 25, 2009 at 6:25 pm

can anyone help me do this with Flash CS4?

grace
Apr 27, 2009 at 10:38 pm

Willie…did you get help with that? I’m on step 20 and can’t figure out how to adjust the alpha in CS4. It keeps adjusting the alpha for each color of the gradient fill.

And…can anyone help me with step 16?

Was I only supposed to copy the column to the to the front MC? Why does the white rectangle look like two in the preview under 16?

Willie
Apr 28, 2009 at 9:27 pm

Hey grace,

no one has helped me yet. :( I’ve tried this multiple times…i can’t get it to work…when i publish to html it shows only the 450X700 box with that much of my room and it flashes the grey gradient off and on. i can’t get it to scroll when i move the mouse to the right.

Willie
Apr 28, 2009 at 9:30 pm

grace,

did you get the scroll function to work? i looked in the action script and thought everything looked like the tutorial…

grace
Apr 30, 2009 at 6:28 pm

argh! nope, no success yet. Yeah, it’s just showing the same box… I went step by step and made sure my document was as identical as possible to the demo file…

and, nothing.

Willie
May 1, 2009 at 7:42 pm

Grace,

when you started your new file did you use Action Script 3.0 or 2.0? the original is 2.0, so that might be our problem…. i’m going to try haha

Willie
May 3, 2009 at 2:24 pm

CAN ANYONE HELP ME?!?!?!?

put3d
May 15, 2009 at 3:16 am

Good tutorial.

grace
May 24, 2009 at 2:55 pm

Willie! Sorry, I gave up. Actually, I used 2.0 because I looked at the provided file and it listed actionscript 2.0..but I still had the problems. Honestly, I gave up! I launched a plain old site and gave up hope of publishing my gallery. I hope you had more luck than I. Unless, you’ve found the answer…my files will just be archived into my ideas folder… ;o(

Sean S.
May 28, 2009 at 6:26 am

Actually, I’m still using AS.2 so i don’t think i could apply this. I love tutorial but for now, i dont have time to do self-study due to busy works..

But i like this this ;)

bilal
Jun 6, 2009 at 6:23 am

çok güzel albümler var.

Vero
Jun 15, 2009 at 4:06 pm

Nice!!!! but I can’t download the demo T.T

Saludos =)

darsane
Jun 22, 2009 at 1:59 pm

Thank you for information:)

yapidekor
Jul 6, 2009 at 1:45 pm

Thank you my friend …

einner
Jul 7, 2009 at 1:27 pm

hey man! in the file, the wall btns don`t load the external swf. In demo does but zip doesn`t. Can you tell me what`s up?

哈哈
Jul 9, 2009 at 10:17 pm

很好不错。谢谢!

cennetevi
Aug 8, 2009 at 5:46 am

these are awesome!
thanks for putting in the effort to get this list together

cennetevi
Aug 8, 2009 at 6:04 am

these are awesome!
thanks for putting in the effort to get this list together http://www.cennet.gen.tr

TotallyConfused
Aug 22, 2009 at 11:25 am

Never mentioned “tint symbol” is an mc and not a graphic symbol (step18)
Never mentioned which of the 4 instances of the “tint symbol” in tint is meant to be named tint_mc
Never mentioned you need to name something tint_mc
Shouldn’t the AS for the fake button be logically in frame 20 where tint stops?
Why the code still works beats me, Flash is weird :) and so is all Adobe suite even at CS4. At frame 20 shouldn’t the code in frame5 be no longer relevant?
In frame 20 the code IMHO should be:

tint_mc2.onRelease = function (){};
tint_mc2.enabled=false;
stop();

I named each of the instances in the tweens separately (tint_mc1..tint_mc4) to understand Flash behavior.

Note if I only name the first instance tint_mc (frame5 begin of tween) Flash assumes the remaining instances (unanmed) are the same and targeted by the code in frame5. Why? my understanding was at a new keyframe in action layer or tint layer I am dealing with totally unique items. Why would code in frame5 at frame20 still apply?
Thanks for any enlightening into the world of Adobe/Macromedia :)

Aoobi
Sep 4, 2009 at 9:00 pm

I love tutorial but for now, i dont have time to do self-study due to busy works..

DaveH
Sep 8, 2009 at 11:06 pm

Hi.
I’m very anxious to find a way of doing this with AS3. I saw some other people here were also asking. Anyone get it it working yet? Thanks. Great tutorial!

bagsin
Sep 10, 2009 at 7:47 pm

Nice!!!! but I can’t download the demo T.T

Cyrus
Sep 21, 2009 at 9:46 am

Great , Parallax Gallery
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Crazy90
Oct 22, 2009 at 9:05 pm

You’re the same as all the others. ,

panel radyatör
Oct 24, 2009 at 8:46 am

oh my god what is this i have never seen like this

Mike
Oct 31, 2009 at 4:52 am

thanks for putting in the effort to get this list together

Egyptian Papyrus
Nov 2, 2009 at 1:17 pm

Thanks for this nice illustration.. It’s really great Thanks

TFN
Nov 20, 2009 at 8:55 pm

thanks…I’m beginner for this..
I’ll practice a lot

ยุ
Nov 28, 2009 at 7:46 am

Oh good

yu
Nov 28, 2009 at 7:48 am

gooooooooooooooooooooooooddd

Rams
Dec 3, 2009 at 7:28 am

Very niceeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

EastFilters
Dec 7, 2009 at 12:44 pm

http://www.eastfilters.com
Auto Filters, Replacement Elements For Fuel Filters, Turbine Fuel Filters, Replacement for Fuel Filters, Air Filters, Filter Water Separators, Fuel Purification Systems, Engine Fuel Filters, Gasoline Engine Fuel Filter, Diesel Engine Fuel Filter, Trailer Engine Fuel filter, Engine Fuel filter, Car Filter, auto fuel filters, Truck Fuel Filter and Motor Yacht parts.

panel radyatör
Dec 15, 2009 at 8:26 am

nice tutorial i will translate my language

juan pretell
Dec 21, 2009 at 6:53 pm

excelente

Rose
Dec 23, 2009 at 10:10 am

Oh My god …
thank u very much for sharing this lesson with us ..
it’s Really Fantastic job ..

vincentdresses
Jan 5, 2010 at 11:36 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

Clifford Eva
Jan 18, 2010 at 2:14 pm

maybe this posting could be off topic but anyways, Having been surfing about your site I must comment on how it is well presented and professional. It is obvious that you know your topic and you are passionate about it. I am putting up a new website and I am trying to make it look fine, as well as pass on the best message. I have gained much from your site and also I look forward to your future posts. Please include the email that I have submitted into your mailing list and let us know when you make new posts. Thanks.

Driver Detective Download

Chris
Feb 12, 2010 at 1:14 pm

So fantastic!!!
I will try…

Abhilash Thekkel
Feb 18, 2010 at 3:25 am

The demo looks so great. Hope its not that difficult to create.
Thanks.

sbobet
Mar 4, 2010 at 4:02 am

Explained details. Simplify up then I will try to do more.

analía
Mar 4, 2010 at 12:35 pm

grrrrrrrrrrrreat!

Sylvain dechamps (Sido)
Mar 16, 2010 at 5:02 am

A really nice tutorial very usefull.

thanks so much for sharing

Medya
Mar 19, 2010 at 8:26 am

I haven’t tried the plug yet but it looks very nice!

I can think of a few sites I can use something like this on.

Thanks!

Myk Roveros
Apr 5, 2010 at 4:59 am

Very impressive … This is very helpful…

Reda Makhchan
Apr 7, 2010 at 6:50 am

1st Thks for this tutorial..
2nd it has a small probleme in the limit, the floating object jumps from thier final position, any idea to resolve that ? (u can see that if u make ur flash fullscreen)
what if I had a dynamic stageWidth/Height ? (full screen website)

Olivia
Apr 28, 2010 at 9:54 am

What program do I need to make this ? Exept from a place where to host it. :)

Web Design
Apr 28, 2010 at 8:46 pm

Great tutorial! u are awesome..thanks!

Web Design
Apr 28, 2010 at 8:47 pm

im going to try it right now looks easy !

Alex
May 9, 2010 at 1:38 pm

Was looking over web for this example. Now i can learn and apply it on my own projects.

grant wei
May 11, 2010 at 7:03 am

Happened to find and log on, excellent and great to see this gallery. I’m trying to design an E-book for my friend who is a unique calligrapher in China. Thanks for the inspiration.

Pariuri Sportive
May 13, 2010 at 5:29 pm

The Parallax Gallery is one of the most unique and innovative galleries!!!

Adhie Mempawah
May 28, 2010 at 2:03 pm

i like this article

nicole
May 30, 2010 at 3:10 pm

I have a question for you and I cannot seem to find the answer anywhere on the internet. I’ve setup something similar to your example, except that I’d like to have 1 of my movieclips loop. I know how to make a MC loop on it’s own, but I’m not sure how to loop a MC that’s moving forward and backward depending on how the mouse moves. Can you give me some insight as to how to code that clip? I’m thinking I somehow need to duplicate the MC?

Michi
May 31, 2010 at 1:31 pm

Hey very nice Tutorial!! Thank u a lot!!!
I was trying to change the size of the windows and i couldn´t make it.
must be 310 x 265px the size?? where i can make that change?
Thank u very much!!

pattaya
May 31, 2010 at 2:03 pm

So nice, very detailed…
Thanks for sharing

Enve Creative
Jun 15, 2010 at 10:27 am

This is an amazingly useful way to engage users! I’m targeting a small business and non-profit organization market, a group that responds very favorably to a one-on-one engagement with me. I’ve been looking for a way to lend that feeling in some way to my site. This will be a great big help!

Dugattodesign
Jun 18, 2010 at 3:55 pm

Muito legal este tutorial, excelente oportunidade de aprendizado! Parabéns estou um pouco enferrujado com estas coisas…

Ahmed
Jun 23, 2010 at 4:47 pm

Simply Awesome!! thanks for sharing such a detailed and easy tutorial.

عمار السليماني
Jul 11, 2010 at 3:27 am

nice idea but go right or left i can’t go around like go straight or go back,
but cool example.

Norton
Jul 12, 2010 at 11:53 pm

It’s great!!
Thank you your sharing

Salvo
Aug 25, 2010 at 8:21 pm

I’ve pretty much customized this for my needs, it’s excellent and thank you for sharing it. I do have one problem, where can I tell the action script to look for the external files for the content box (1.swf,2.swf, etc….) or if it’s not in the action scrip please advise. Thank you in advance for any and all help

الأندرويد
Sep 19, 2010 at 6:39 am

very detailed and clear as all tutorial here

王蛟
Oct 10, 2010 at 9:21 pm

还不错,就是土了点.css网格很简单,

fabio
Oct 18, 2010 at 3:11 pm

Beautyfull effects!

Thanks!

chris
Oct 20, 2010 at 5:28 pm

That’s not correct. The pillar is moving at the same speed. It’s nice scrolling but not parallax.

Massinissa
Nov 6, 2010 at 10:59 am

thnx :)
ⵜⴰⵏⵎⵉⵔⵜⵀ

jozsmith
Dec 8, 2010 at 3:40 am

good post ,thanks! This article was Very helpful. i like your website,I am fond of reading online punjabi news.

Iwy
Dec 19, 2010 at 5:03 pm

I don’t see any parallax scrolling. Hmm, what’s wrong?

Melvins
Dec 22, 2010 at 12:15 am

Great tutorial. Thanks for giving us.

Los Angeles Web Design

Henry Peise
Dec 24, 2010 at 1:56 am

As you already know the difference between the cameras in these phones is quite big but it was interesting to find out just how big using white iphone 4 and iphone 3. Check out the shootout gallery inside.

Juno Mindoes
Dec 25, 2010 at 1:19 am

Still wonder white iphone 4 avaiable or not? We tells you the answer is "yes". Now you can buy the hottest white iphone 4 Conversion Kit and make a change!

tütüne son
Jan 11, 2011 at 1:42 pm

En güzel günler bizi bekliyor haydi baklım

Uçak Bileti
Jan 11, 2011 at 1:56 pm

photoshop ile mac farki tabikide

Uçak Bileti
Jan 11, 2011 at 3:34 pm

senii sildim seni

Uçak Bileti
Jan 11, 2011 at 11:27 pm

yarali yarlai

Ben
Jan 14, 2011 at 2:39 am

Hey this is a great post. I’m going to email this to my buddies.

tütüne son
Jan 29, 2011 at 7:35 am

I don’t see any parallax scrolling. Hmm, what’s wrong?

tütüne son
Jan 29, 2011 at 4:01 pm

It’s very nice and i love drawing and thank you

formula 21
Jan 31, 2011 at 1:47 pm

I don’t see any parallax scrolling. Hmm, what’s wrong?

altın çilek
Feb 1, 2011 at 3:50 pm

Still wonder white iphone 4 avaiable or not? We tells you the answer is “yes”. Now you can buy the hottest white iphone 4 Conversion Kit and make a change!

altın çilek
Feb 2, 2011 at 6:05 am

That’s Great! Thanks for the post!

hcg damla
Feb 2, 2011 at 1:52 pm

My them e options page doesn’t display as it is here it only shows:

Koi Theme Options
Hide the header search form? Yes, I’d like to hide the header search form.

What could be the problem

altın çilek
Feb 8, 2011 at 3:07 am

It’s very nice and i love drawing and thank you

diş beyazlatma kalemi
Feb 18, 2011 at 6:17 am

All whitening formulation is applied by dentists with quality features, powerful, secure, and very reasonable prices, as well as the missing handbag is a unique product design, fashion styling you will not ..

st.catharines web designer
Mar 6, 2011 at 2:50 am

This is really cool. Thank you for sharing this tut.

altın çilek
Mar 16, 2011 at 3:08 pm

thanks man. very cool

Mark Hamilton
Mar 21, 2011 at 6:39 am

The way web search form is hide is nice. I m a Web Designer in London & yes nice compilation and thanks for that hard work.

Adwords
Apr 16, 2011 at 1:12 pm

Ilove Google adwords

orjinal altın çilek
Apr 16, 2011 at 1:12 pm

I don’t see any parallax scrolling. Hmm, what’s wrong?

Emprego
May 25, 2011 at 5:13 am

Wow. Great tutorial. Thanks

Yılmaz Barış
May 28, 2011 at 4:02 am

Çok hoş ama bu kadarı beni aşar..

obakeng
Jun 13, 2011 at 6:39 am

Beautiful!! Great work.

#Web Designer in South Africa.

orjinal panax clavis
Jun 16, 2011 at 8:24 am

çok güzel!!

ORJİNAL PEMBE MASKE
Jun 16, 2011 at 8:25 am

çok iyi harika

zeta
Jun 23, 2011 at 9:53 am

How it’s Very Helpful and AMAZING !!

U.V. Lak
Aug 14, 2011 at 3:06 pm

its difficult…

Trabajo
Aug 19, 2011 at 6:17 am

Amazing gallery. Thanks for share

bio merhem
Aug 23, 2011 at 8:42 am

I don’t see any parallax scrolling. Hmm, what’s wrong?

complex 41
Aug 23, 2011 at 10:03 am

And then he handed you the thirty-five 55

complex41
Aug 23, 2011 at 10:36 am

And then he handed you the thirty-five 45

pembe maske
Sep 14, 2011 at 6:58 am

Amazing gallery.

Denes
Nov 3, 2011 at 7:56 am

Wow,
great inspiration.
Check this dynamic 3D cloudy sky parallax webpage: http://bit.ly/vWDYlK

Fredrick Ribb
Nov 13, 2011 at 8:45 pm

dssadssfdsf

Jim
Nov 28, 2011 at 8:06 am

Hi – nice scene – how would you introduce some ‘easing’ into it, so the scrolling slows down as you get to each side?

cheers
J

max
Dec 30, 2011 at 3:00 am

I’m not good in drawing but I really want to make on my website

yemek tarifleri
May 2, 2012 at 12:39 pm

Paintingasder on the tablet is fun, but to do cool things need work.

çizgi film
Jul 10, 2012 at 3:05 am

nice sharing.. thanks..

DymoLabels
Jun 1, 2013 at 8:55 am

hi
i like your collection
thanks for sharing your collection
keep it up

DymoLabels
Jun 1, 2013 at 8:57 am

hi
i really like your collection
thanks for sharing it

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.