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.
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.
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.
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.
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).
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).
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.
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.
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.
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.
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..
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.
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.
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.
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.
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.
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.
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.
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.
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".
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.
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.
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.
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.
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.
Björn Pehrsson
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
you are amazing, man… thanks for the tutorial!
Lamin Barrow
WOW…This is amazing stuff. Keep them coming Nick. :)
Stevie Killen
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
héhéhé
amazing.. no more words…
thanx
=]
Beau de Noir
I learn something from you with all occasions :-)
Ed
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
Truly Impressive! Keep it up!
dude
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
Good work! Thanks for it.
giackop
that’s sick!! so nice thanx
andy
@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
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
Exactly what I was looking for! Thank You.
David
Hey…
Is this not the exact same tutorial you did for web designer magazine ages ago… digging up old content eh ?
monster
I wish I had flash cuz thats cool.
naveed ahmad
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
Very great tut! Thanks a lot and keep it up!
sesebian
Thanks :D
Manolo
Hell, this is amazing. Thank you for sharing!
Susan
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
Thank you for that very good tutorial :)
webpixelkonsum
My answer is simple: this tutorial is amazing ;)
Ralph
Jordy Wouters
Very handy tutorial! I love parallax :P
Björn Pehrsson
@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
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
Love your site.. but wasn’t this the same tut in a web design magazine about a year ago?
xenowork
your tutorials are very detail and awesome man.. thats help me a lot..keep up the good work nick..
Nick La
@John – Yes, it was previously published in Web Designer magazine before. I re-publish here due to many requests.
sledgeweb
Umm… this isn’t right. The background is moving faster than the foreground, this is reverse of how it should be.
imaginepaolo
Great article…
Neil
Great tutorial, thank you for taking the time, looking forward to giving this a go tonight! ;)
Bernhard
Thanx for this fantastic tutorial and of course the inspiration.
rgds bernahrd
Duncan
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
Rally nice tutorial, I wanna do something like this. Thanks :)
Glich
Wow! Really really cool! :)
Fubiz
An excellent tutorial. Good job!
Amos
Wow! It’s really cool! :)
John
@Nick. Cool Thanks. You rock.
Real Estate Graphic Design and Marketing
I have the same issue as #36, same speed. I’m using Firefox 2.0.
Beautiful piece nonetheless.
pepe
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
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
wow…
thank you so very much…
wow….
Allison
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
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
Great element and thanks for share your hard work. I challenge you to this… traducelo al español.
P.Suma
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
This gallery is very cool …But the link is corrupted…Could you put another archive ?
THX
Thura
Thanks !
ph
THAT’S JUST FANTASTIC! I love your site!
Frosty Web Designs
Real cool!
Teksty
another great tutorial… regards
Paul
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
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.
wow, Nicely done.
naran_ho
Excelente, nice work, very interesting .
Cavan
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
Once again you prove why this is the essential web design blog. Brilliant tutorial, many thanks!
pakolg
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
exactly
I cant ope the file
Triple-H
wow man this is awesome
thank you for the tutorial
Nick La
@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
Nice effect and all, but your parallax works opposite of real life :)
Things closer to you should be moving faster than things away.
akratellio
it looks nice but i didn’t have found out how i can stop the scrolling once i’ve start it?!?
akratellio
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
exelente posto, muchas gracias, me sirvio para comprender muchas cosas del flash que no sabia hacer tambien
Esmeralda
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
Thanks for this brilliant post. Well I have tried it with the instructions provided here, and its looking pretty good.
in-sanity
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
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
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
Thank you for sharing this.I like you design very much!
Flash Animations
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
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
Thank you for sharing this.I like you design very much!
aronil
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
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
good :)
AndrU
to: Steven
Maybe is because NICK write for that magazine?, inform yourslef before posting a negative comment.
Cheerz from Uruguay!,
Stephan
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
wow! Really good. Thanks
Aspiring to be the best seo company
Awesome.
Thanks for a well-written and easy to follow tutorial.
Superb.
savannah
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
this tutorial is great, thanks so much for putting it out there for us all. so stoked to have found ur site
Giuseppe
Simply magic!! Wow
dohitsch
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
Really good. Thanks
Priyanka
nice tutorial
Flash Development
Awesome, really cool flash gallery!
Ryan
awesome, thanks !
Marceli
awesome. But I think there is one problem when you wanna stop inside it vibrates but no stop.
sunbear
waw!
Flash Experts India
Nice Gallery, I was using differnt way for our flash work. This is really helpful for my future flash work.
Eucrid
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
Yet another brilliant aid from webdesignerwall.
http://www.skytemedia.com
Phillip
THIS Is a test
curtis
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
woops, i meant “it would help me alot” . . . . .
email: [email protected]
Rt
Have not seen the likes of this
Dennis Mortensen
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
Very nice gallery, great job!
Joey – http://www.leetwebmasters.com
Flash Website
One of best gallery, I have seen ever…:)
Search Scripts
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
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
Great!
d.
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
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
Great!!! Very very impressive thank you for the script. Maybe I can tweak it to something relevant to my project.
Thanks!
Renzo
Excelent!
Website Design
Prefect site for designers…Cool Gallery for flash experts.
Free 3G iPhone
Thanks for that. Much appreciated
iceman
I want to make like this one.. nice thank you so much for the tutorial.. nice job..
shweta
great gal
lery
warley nunes
GOOD, Totaling GOOD, Incridible,
Iso 9001 Kalite Belgesi
Thank you very much
zeeshan
nice work
i like
LittlePieStudio
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
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
Thank you its great work.
fatih
How is done transparent buttons?
Wcs Kalite
This site is good,for Iso 9001 Quality Management
gia
Indeed very interesting!.
Laboratuar Akreditasyonu
Thanks for good article
Nan
Great contributor!!…
:
:
Love your site, and all your tutorials are really really incredible!!
^_^
cheers
lili
this is cool
Jorge Lobo
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
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
oh wow cool I love trying new things like this :)
belgelendirme
than for good article
jb
espectacular!
re woau!
Tim Marshall
Wow really slick work.
This can come in very handy
GAN
cool, thanks
hubo
what about if you have 3 different planes instead of two?
Andres
Should I change/add ActionScript if I’d like the Gallery to zoom in on certain pictures?
Otherwise gr8 job m8!
Fe
Man, really incredible tip.
Brammy
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
The couch shadow was a really nice touch
Diego
http://www.corporatewebsolutions.net
Sam
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
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
wow. is that how is it done? interesting.
Borja
awesome! can be the tutorial made on actionscrp 3? its grat thank for the work!
JavierSE
really cool and really easy to follow – you surely rule! thank you and best wishes!
Luiz Fernando
Great!
see my site with the gallery: http://www.lisdalcorte.com.br/galeria.html
Ramalho
So wonderful!!!
dhyani
Brilliantly done and explained …….
Elizabeth K. Barone
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
Hi!
I am trying to create a prallax effect and I came across your tutorial at:
https://webdesignerwall.mystagingwebsite.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
I cannot wait to give this a try! I’m super excited about this!!! Great job!
Larry
very nice work sir!
navees
great sir,
thanks for teaching,
this is awsome.
vivy
tutorial excelente!!!!!
kristay
Is there an AS3 version aanywhere out there?
The gallery is awesome bu I’m working in as3.
adrian
Muchas Gracias amigo. Excelente Tutorial.
Adriana
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
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
It is super, but I really need the ac3 one. Does anyone know how to do it!? Thank you!
suzana
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
i’m having trouble doing this using CS4 seeing as how the motion tween is different. can anyone help me?
CgBaran Tuts
Great tutorial thanks
Willie
can anyone help me do this with Flash CS4?
grace
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
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
grace,
did you get the scroll function to work? i looked in the action script and thought everything looked like the tutorial…
grace
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
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
CAN ANYONE HELP ME?!?!?!?
put3d
Good tutorial.
grace
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.
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
çok güzel albümler var.
Vero
Nice!!!! but I can’t download the demo T.T
Saludos =)
darsane
Thank you for information:)
yapidekor
Thank you my friend …
einner
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?
哈哈
很好不错。谢谢！
cennetevi
these are awesome!
thanks for putting in the effort to get this list together
cennetevi
these are awesome!
thanks for putting in the effort to get this list together http://www.cennet.gen.tr
TotallyConfused
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
I love tutorial but for now, i dont have time to do self-study due to busy works..
DaveH
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
Nice!!!! but I can’t download the demo T.T
Cyrus
Great , Parallax Gallery
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
Crazy90
You’re the same as all the others. ,
panel radyatör
oh my god what is this i have never seen like this
Mike
thanks for putting in the effort to get this list together
Egyptian Papyrus
Thanks for this nice illustration.. It’s really great Thanks
TFN
thanks…I’m beginner for this..
I’ll practice a lot
ยุ
Oh good
yu
gooooooooooooooooooooooooddd
Rams
Very niceeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
EastFilters
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
nice tutorial i will translate my language
juan pretell
excelente
Rose
Oh My god …
thank u very much for sharing this lesson with us ..
it’s Really Fantastic job ..
vincentdresses
The designs showed here show what simple and tasteful design is all about. Another one to consider
Clifford Eva
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
So fantastic!!!
I will try…
Abhilash Thekkel
The demo looks so great. Hope its not that difficult to create.
Thanks.
sbobet
Explained details. Simplify up then I will try to do more.
analía
grrrrrrrrrrrreat!
Sylvain dechamps (Sido)
A really nice tutorial very usefull.
thanks so much for sharing
Medya
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
Very impressive … This is very helpful…
Reda Makhchan
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
What program do I need to make this ? Exept from a place where to host it. :)
Web Design
Great tutorial! u are awesome..thanks!
Web Design
im going to try it right now looks easy !
Alex
Was looking over web for this example. Now i can learn and apply it on my own projects.
grant wei
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
The Parallax Gallery is one of the most unique and innovative galleries!!!
Adhie Mempawah
i like this article
nicole
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
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
So nice, very detailed…
Thanks for sharing
Enve Creative
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
Muito legal este tutorial, excelente oportunidade de aprendizado! Parabéns estou um pouco enferrujado com estas coisas…
Ahmed
Simply Awesome!! thanks for sharing such a detailed and easy tutorial.
عمار السليماني
nice idea but go right or left i can’t go around like go straight or go back,
but cool example.
Norton
It’s great!!
Thank you your sharing
Salvo
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
الأندرويد
very detailed and clear as all tutorial here
王蛟
还不错，就是土了点.css网格很简单，
fabio
Beautyfull effects!
Thanks!
chris
That’s not correct. The pillar is moving at the same speed. It’s nice scrolling but not parallax.
Massinissa
thnx :)
ⵜⴰⵏⵎⵉⵔⵜⵀ
jozsmith
good post ,thanks! This article was Very helpful. i like your website,I am fond of reading online punjabi news.
Iwy
I don’t see any parallax scrolling. Hmm, what’s wrong?
Melvins
Great tutorial. Thanks for giving us.
Los Angeles Web Design
Henry Peise
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
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
En güzel günler bizi bekliyor haydi baklım
Uçak Bileti
photoshop ile mac farki tabikide
Uçak Bileti
senii sildim seni
Uçak Bileti
yarali yarlai
Ben
Hey this is a great post. I’m going to email this to my buddies.
tütüne son
I don’t see any parallax scrolling. Hmm, what’s wrong?
tütüne son
It’s very nice and i love drawing and thank you
formula 21
I don’t see any parallax scrolling. Hmm, what’s wrong?
altın çilek
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
That’s Great! Thanks for the post!
hcg damla
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
It’s very nice and i love drawing and thank you
diş beyazlatma kalemi
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
This is really cool. Thank you for sharing this tut.
altın çilek
thanks man. very cool
Mark Hamilton
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
Ilove Google adwords
orjinal altın çilek
I don’t see any parallax scrolling. Hmm, what’s wrong?
Emprego
Wow. Great tutorial. Thanks
Yılmaz Barış
Çok hoş ama bu kadarı beni aşar..
obakeng
Beautiful!! Great work.
#Web Designer in South Africa.
orjinal panax clavis
çok güzel!!
ORJİNAL PEMBE MASKE
çok iyi harika
zeta
How it’s Very Helpful and AMAZING !!
U.V. Lak
its difficult…
Trabajo
Amazing gallery. Thanks for share
bio merhem
I don’t see any parallax scrolling. Hmm, what’s wrong?
complex 41
And then he handed you the thirty-five 55
complex41
And then he handed you the thirty-five 45
pembe maske
Amazing gallery.
Denes
Wow,
great inspiration.
Check this dynamic 3D cloudy sky parallax webpage: http://bit.ly/vWDYlK
Fredrick Ribb
dssadssfdsf
Jim
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
I’m not good in drawing but I really want to make on my website
yemek tarifleri
Paintingasder on the tablet is fun, but to do cool things need work.
çizgi film
nice sharing.. thanks..
DymoLabels
hi
i like your collection
thanks for sharing your collection
keep it up
DymoLabels
hi
i really like your collection
thanks for sharing it