New tutorial on parallax 3D effects

I just uploaded a new tutorial that shows you how to create a subtle 3D effect on photographs. This effect is widely used in documentary film making. This is the first tutorial in a long time that contains no ActionScript. Most of the time is spent in Photoshop preparing the photographs for Flash. Then I show you how to do the parallax animation on the Flash CS4 timeline. This may be my favorite tutorial that I have done so far simply because it is such an easy way to add pizazz to an otherwise boring photo.

Lee

Comments

  1. December 5th, 2008 | 1:37 am

    I had no idea you could drag a container MovieClip around and see the live effects of the z depth. Very cool. Thanks for sharing Lee.

  2. stringycustard
    December 5th, 2008 | 1:56 am

    Nice technique. You could do that in an earlier Flash version (also without scripting) without much hassle, but it’s nice to see CS4 let’s you skip a step or two, and keep accurate depth perception.

  3. December 5th, 2008 | 2:03 am

    Pretty amazing. Thanks Lee.

  4. December 5th, 2008 | 2:10 am

    just like the 2.5D we always use in AE, but now that its in Flash I imagine it will be a smaller file size than improting into Flash from AE

  5. December 5th, 2008 | 2:33 am

    Thanx for this ! I’ve always loved this parallax effect especially in war documentary.

  6. Stu
    December 5th, 2008 | 5:15 am

    Hey Lee, I was hoping that you would do something like this soon. I caught your talk at FOTB08 and it’s been bugging me ever since how you did it! I remember that you made it look easy, but trying to recreate it with my shoddy memory has proven to be a problem!

    Thanks for this tutorial, you’ve just brought it flooding back. Love it!

  7. December 5th, 2008 | 5:25 am

    Excellent !

  8. December 5th, 2008 | 7:54 am

    could a virtual camera ever been implemented into Flash in CS7 or something? That might be asking for too much AE in Flash,huh?

  9. December 5th, 2008 | 8:25 am

    [...] > The Flash Blog » New tutorial on parallax 3D effects [...]

  10. December 5th, 2008 | 9:08 am

    Thx Lee, I was searching for how to do this for a while. Thanks for making it look easy.

  11. twoedge
    December 5th, 2008 | 11:20 am

    This effect your are working with is called ‘depth of field’. Very cool take on it. Thanks!

  12. guy
    December 6th, 2008 | 5:34 am

    can you make more videos on adobe air pls

  13. December 8th, 2008 | 8:05 am

    Can this be done with Flash CS3 or is it only with CS4?

  14. December 8th, 2008 | 10:58 am

    Hey Lee, maybe an idea for your next fun tutorial. If you’d preview the “end result” in the beginning, the viewers can first get excited about what they’re going to be learning, or decide that they might already know how to pull it off. It helps if you have a grasp of where things are going before you get it step by step… It also helps if you want to see the cool stuff first but you have a really slow internet connection, like me :D

    Cheers,
    Eric-Paul.

  15. cramden
    December 8th, 2008 | 1:03 pm

    hey lee,

    can’t believe how awesome and easy you made this. After watching the vid i pulled off something similar with some very rough vectors in about 5 minutes.

    I have to second @epologee. When the video started out and photoshop i had to jump quick to the end to see if it would ever make it into flash.
    thanks for all you do for the community
    cramden

  16. lee
    December 8th, 2008 | 1:15 pm

    @epologee @cramden I agree with both of you! I will start all new tutorials by showing the end result first. Thanks guys.

  17. December 12th, 2008 | 6:26 am

    I really like this effect :-) Hope you can do some tuts about kinematics soon.

  18. January 2nd, 2009 | 2:51 pm

    This effect is great and very simple to do in Flash CS4.

    But i stuck with the name of the effect; parallax effects sounds right, but look at the Ken Burns Effect. I dont know :S

  19. January 28th, 2009 | 1:06 am

    It’s Cool~!!

  20. Consumernine
    February 11th, 2009 | 4:10 pm

    Very, nice tutorial, Good Job & thanks for posting this.

  21. Raven
    March 10th, 2009 | 10:12 am

    Great tutorial. I agree with Eric-Paul (comment #14) that a preview at the beginning of the tutorial would have been even more effective.

    -DF

  22. March 25th, 2009 | 6:26 am

    Great tutorial! Many thanks!

  23. April 1st, 2009 | 5:49 pm

    Great tut. Your a genius.

  24. Cyberfish
    July 20th, 2009 | 10:08 pm

    This is a great tute lee. I am curious about something though. I loaded the resulting movie (my own) into a flex actionscript project to test its utility as a header. It didnt look so hot. In the previous versions of flash, anything outside the stage seemed to automatically cropped. This didn’t do that and actually appeared to shrink. I applied a mask with mixed results. Bottom line, it seems hard to control the elements of the movie.

  25. Saar
    November 11th, 2009 | 9:38 am

    thanx Lee

    in my AIR app i need this effect on a series of bitmaps, dissolving one into the other, and in fullscreen mode. this is a huge rendering performance problem for my processor (i also have other thing going on at the time)

    my question is: would pixel bender help me get the same effect alternatively and speed things up ? (using multi cores and so on…)

Leave a reply