/Flash/ The art of parallax scrolling

18/09/2007 | Filed under Develop > Flash

Paul Wyatt shows you how to use the pseudo-3D parallax scrolling technique to add the illusion of depth to your portfolio or showcase sites. Get ready for some clever Flash fakery

Parallax scrolling sounds like something a doctor would prescribe antibiotics and three weeks of bed rest for. Thankfully, it’s nowhere near as unpleasant. In Flash, it’s a fake 3D technique that provides the illusion of depth and distance between layers. It’s based on multiplane cameras, which were used in traditional animation to move animation cells and backgrounds past the camera at different speeds and distances.

In the real world, if you walk down a street, turn your head to the right and watch the buildings as you pass them, you’ll notice one important thing: the objects nearer to you apparently move more quickly than the objects in the background. This depth is what you’ll be faking in Flash.

But it doesn’t end there. I’ll also show you how to make your scene move according to the position of the mouse pointer. You’ll learn how to create seamless graphics, then put it all together to make a site that’s ideal for anyone’s portfolio.

About the author:

Name: Paul Wyatt
Site: www.paulwyatt.co.uk
Areas of expertise: Website design, Flash, animation, interactive design and motion graphics
Clients: Lycos, Universal, Five
Favourite holiday destination: Scarborough

Click here to download the support files
Click here to download tutorial PDF

 

Comments

fel3232 / 25/11/2007 / 01:39 / http://www.livesteaua.com

I just downloaded the support files and I get some kind of an error. It sends me back to the main page. I wonder if there is a forum where I can solve that.
Thanks for the link.

andy / 30/11/2007 / 12:33

looks amazing. was thinking of doing a portfolio site with a setting, not decided on graphics yet though

paseka mohapi / 04/12/2007 / 10:52

I fand parallax scrolling very excating.but my problem is linking to my pages

Richard / 06/02/2008 / 09:25

This is very cool, but has anyone had any issues with the movie ceasing to work (just disappearing) after a short period of time? This happened in the orginal file and in the version that I created.

Nick / 09/04/2008 / 20:20 / http://www.nicholasklick.com

This is a cool tutorial. But the huge thing missing from this tutorial is that when you create your doubled movie clips (Step 8) you have to center this doubled clip on the zero.
That is... the spot where the clip repeats has to sit directly on 0 (zero). Hope that saves others the hours I wasted trying to figure that out..

Check out my implementation of this: www.nicholasklick.com

Add a comment

Your name:


Your email: (Not displayed)


Your website: (optional)


Enter your comment here:

Issue 176

.net issue 176 is now on sale! Learn how to create outstanding web copy and discover the top 10 design mistakes. Find out more ...

» Subscribe and save 40%
» Buy issue 176
» Get a corporate subscription
» Join us on Facebook

 
Win with .net

The latest competitons from .net magazine

Signup for our newsletter

Enter your email address and start receiving our new-look weekly email newsletter!

 
 

Rackspace Managed Hosting

TopHosts

.net photos powered by:
Canon