Click-n-zoom 3D carousel

As I mentioned in my last post, we now have a great z-sorting class thanks to Ralph. Tomorrow I’m planning on recording a tutorial showing how to use it and the example below will be the finished product. This is a basic 3D carousel that allows you to spin it based on mouse position. When you click on an image, you zoom to a close-up of the photo. From there you can click on other images to spin them into focus. To zoom back out simply click on the stage. All of the photos are loaded in via XML. Click on the image below to see the example.

Lee


Commentary

  1. vamapaull says:

    Very useful class :)

  2. This is a quite popular 3D implementation and it’s pretty simple to develop this with papervision3D.. I’m curious to take a look at the code so we can all see the main differences between native and “framework’s”.

    Further, i’m curious to see the file size, i think the native one is going to be really really smaller…

    can you publish the code please lee?

    thx,
    bye
    Piergiorgio

  3. bjorn says:

    Lee, nothing shows up here. I’m running the debug player, so I got this error message:

    ReferenceError: Error #1056: Cannot create property rotationY on flash.display.Sprite.
    at carousel10_fla::MainTimeline/carousel10_fla::frame1()

  4. binhdocco says:

    Sorry. I see the DisMiss All error dialog.

  5. lee says:

    @Piergiorgio I’ll be posting the source tomorrow. Going to bed right now :-) . You’re right, something like this could easily be created in PV3D. I’m definitely not pushing this approach over the various 3D frameworks. But for some people, this might be easier than dealing with frameworks.

  6. Nabeel says:

    Go One Lee

  7. Tom Cipriano says:

    Looks Sharp. Like a smaller version of 3d wall pro. I would guess your limited to the number of photos you can insert in the xml script.

  8. CaptainCode says:

    @bjorn, I had the same issue. Update to the latest version of FP10, and it all works now. :)

  9. ikiM says:

    I guess you can’t do many things with native that you can do with pv3d. In my case, I was trying to get some very simple 3d planes animations to work with pv3d and vectorvision and I couldn’t get past the z sorting problem, even using quads. With the native mode and Ralph’s class, it worked perfectly, and it was easier to implement. I guess what I’m saying is that for simple projects native is better. I must say, I am completely new to pv3d and even less experienced in vectorvision so there is a big chance my comparison is not fair because I might have been doing everything the wrong way in the first place.

  10. ikiM says:

    Sorry to bother again… I found something strange using SimpleZSorter. If you have two sprites very close together in depth, (say one at z=0 and the other at z = 5) you need to put both at the same x and y coordinates inside the container to avoid z sorting errors. I tested this rotating the container according to mouse position (hover cam like). If you increase x and y distances between the sprites, z distance must increase too to avoid z sorting errorrs. A workaround is to have each object you want to put in 3d space inside a dummy holder inside the container. This way the dummy can be at the same x and y as the container and you can move the object wherever you want inside the dummy. (Like using layers in pv3d? Don’t know…).

  11. ikiM says:

    I am really sorry for posting so many times. I forgot to mention, z coordinates and 3D rotation values must be applied to the dummy holder, not the object inside…. not ideal I guess…. Lee, I hope you can put all my comments together in one post! Sorry!

  12. simon says:

    nothing is visible except for the black stage background. The example you posted yesterday works but this one does not for me.

  13. simon says:

    works now….just takes a second to load all the images

  14. flashzone says:

    Great! Thanks Lee.
    Waiting for the tutorial…

  15. erik says:

    Very nice…Very nice

  16. Kevin Sweeney says:

    Can we please come up with some concepts more compelling than 3D carousels? They’re so 2006…

  17. lee says:

    @Kevin I’ve talked at length about the “played outness” of carousels. But they are excellent for teaching 3D concepts. I think you should absolutely come up with more compelling content. When you do, let us all know.

  18. Ram says:

    hey lee,

    when I click the picture I get the following error:

    ReferenceError: Error #1056: Cannot create property rotationY on flash.display.Sprite.
    at carousel10_fla::MainTimeline/frame1()

  19. Jason says:

    Hi Lee. Carousels might be played out for us but clients still love them. This new stuff is really great, but I have yet to start doing anything real for 10 because nobody has it yet. Can you possibly mix in a few AS3 tuts that don’t require 10 until we can really start developing for it?

  20. keehun says:

    Down with the revival of the carousel!!!
    Uggh, I remember so many people asking the same questions so many times on the forums =/

  21. Nabeel says:

    Hi Lee and everyone,

    I created a simple cube using the wonderful Auto Z srorting class and i thought why don’t share it with you all
    SWF : http://www.box.net/shared/bti6i92ryo
    FLA : http://www.box.net/shared/09i3prmmj9

    Wish you all a Good Luck

  22. Tim says:

    Heey lee?

    Don’t see the code yet…? is it still coming??

    thnx!

  23. Marius says:

    Has anyone seen the code for this particular 3D carousel? this is a bit different than the one on gotoandlearn.com…

    I really really need the piece of code that handles the rotation via mouse location. Please HELP!

    thx

  24. jp says:

    Has anyone seen the code for this particular 3D carousel? this is a bit different than the one on gotoandlearn.com…

    I really really need the piece of code that handles the rotation via mouse location. Please HELP!

    thx

    SAME PROB if download the files in the main site, carousel wont spin and it follows mouse very oddly… could someone help? thank you

  25. Luke says:

    Hi,

    Great site! I just finished this tutorial and for some reason the “smart rotation” isn’t working for me… any ideas why that may be? I followed line for line except my carousel objects are a class extending the Sprite class and I have placed them in an array. I doubt that has much to do with it as I’d assume smart rotation just looks at the current rotationY, what I want to tween to, and picks the shortest distance to get there, but for some reason, it isn’t doing that… any ideas?

    Thanks,

    –d

  26. kanu kukreja says:

    Can i have the source files for this?
    Thanks

  27. paul says:

    Just seen your 3d carousel tutorial with tooltips:
    http://www.gotoandlearn.com/play?id=34

    - one of the best tutorials I’ve seen I have to say.

    Just thinking of how it could be improved however;

    1. From a usability point of view – could it be made more obvious when clicked that you have to re-click on the image again to re-join the carousel? (perhaps an optional back btn).

    2. What if someone wanted to add more than text to the pop up info/description? – e.g. could it be improved by adding images or formatted text instead of just plain text?

    paul.

  28. Jason says:

    re: the above post:

    “2. What if someone wanted to add more than text to the pop up info/description? – e.g. could it be improved by adding images …”

    I don not think this is possible with the above 3D carousel you mentioned sir.

  29. Matt says:

    Is this tutorial gone? I haven’t touched Flash since 8 pro and so CS 5 Flash and AS 3.0 is a big change. Started with this tutorial and loved it but cannot find it now on the web. Where did it go??? I’m half way through it.

  1. [... As I mentioned in my last post, we now have a great z-sorting class thanks to Ralph. Tomorrow I'm planning on recording a tutorial showing how to use it and ...]

  2. [... As I mentioned in my last post, we now have a great z-sorting class thanks to Ralph. Tomorrow I'm planning on recording a tutorial showing how to use it and ...]

  3. [... As I mentioned in my last post, we now have a great z-sorting class thanks to Ralph. Tomorrow I'm planning on recording a tutorial showing how to use it and ...]

Leave a Comment