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
Very useful class
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
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()
Sorry. I see the DisMiss All error dialog.
@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.
Go One Lee
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.
@bjorn, I had the same issue. Update to the latest version of FP10, and it all works now.
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.
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…).
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!
nothing is visible except for the black stage background. The example you posted yesterday works but this one does not for me.
works now….just takes a second to load all the images
Great! Thanks Lee.
Waiting for the tutorial…
Very nice…Very nice
Can we please come up with some concepts more compelling than 3D carousels? They’re so 2006…
@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.
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()
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?
Down with the revival of the carousel!!!
Uggh, I remember so many people asking the same questions so many times on the forums =/
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
Heey lee?
Don’t see the code yet…? is it still coming??
thnx!
[...] just uploaded the new tutorial that shows you how to make the click and zoom 3D carousel that I showed in a previous post. This is a long tutorial and teaches quite a few different things [...]
[...] just uploaded the new tutorial that shows you how to make the click and zoom 3D carousel that I showed in a previous post. This is a long tutorial and teaches quite a few different things [...]
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
[...] Example’s original post [...]
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
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
Can i have the source files for this?
Thanks
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.