I 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 throughout the 35 minutes. First and foremost I show you how to use the SimpleZSorter class that I talked about in this post. This is a must if you need your 3D objects to be sorted correctly in Flash Player 10.
In this tutorial I actually use Flex Builder for my code editor and I go over how to use it in conjunction with Flash CS4 to properly target Flash Player 10. For the animation I’m using GTween which is a new tweening library created by none other than Grant Skinner. This has many advanced features including smart rotation, where the shortest possible route to a new value is chosen. This feature is extremely helpful in getting the carousel to work correctly. Download the latest version before starting the tutorial.
One thing to point out here is that this is an advanced tutorial. So if you are just getting started with ActionScript 3, you may want to hold off on this until you’re more comfortable. Basically if you don’t know how to make Flash go to a new URL when an image is clicked, then carousels shouldn’t be your priority at this point 
.
Lee
Hi Lee,
I just want to say that I want to be like you, you are the best, your mind is clear.
when I have something that is complex I said how would lee think of it and I start think like you and everything goes will.
your are the man!
I hope you accept me as a friend.
keep it up man.
@Emad Wow thanks for the compliments
.
thank you for sharing,
as you said here http://theflashblog.com/?p=471#comments this approach is really easier for who has never dealt with 3D frameworks.
i have just few questions:
is the swf fastest than a framework (pv3d\away\alternativa…etc) generated one? and what about cpu usage? is native 3d less intensive than the other?
thanx
Dear lee,
thank you so much. you are the best and we wish u lot of love and care from all..
thank u for sharing your knowledge..
harpal
Great tutorial.
but please do not make another carousel tut.i feel dizzy:-)
Thanks a million Lee, that’s awesome! Every time I can learn a lot from your tutorials. Those are the best tutorials I have ever seen.
Keep going!!!
Thanks for another great tutorial Lee. You are a great inspiration and teacher for Flash!
Regards,
David Rosser
(Student!)
Hi Lee thanks for another great tutorial, I wish all tutorials were as easy to follow as yours!
I have Flex builder 3 courtesy of Adobe (I am a student) and Flash CS3. Can I use a CS3 .fla to compile for FP10? Do I need the Gumbo sdk to do it? I understand I need the swc for FP10 but I don’t know how to go about it
I’m trying to move from Flash to Flex as my main code monkey tool but get a bit confused at this point… I am very confident in Flash but there’s no way I can afford the new CS4 suite.
What is necessary to add video to the carousel ?
Hi Lee
this cool but why this is your last tutorial about carousel.
I hope makee other tutorials About this.
Thanks
AS
Lee,
Always entertaining and insightful. You write efficient coded, man.
I noticed that you’ve been fiddling with Flexbuilding to pull off coding (obviously easier with advanced coding hinting and code introspection.) I think it begs the next point…
For fear of beating a dead horse (or accidentally killing a mamed one)… Adobe apparently didn’t throw any additional hours into improving the code editor experience inside Flash CS4. I can only imagine that Adobe intends to get flexbuilder and the Flash code panel on the same page so they can grow together. If that is right, then I get it, but I am still think it is a bummer. I spend 90% of my time coding for flash and making that easier would be, well, 90% of my personal priority in terms of what I would like to see improved in Flash (this conversations been going on since Flash 8 now.) Any word on this getting a facelift before CS5 in two years!?
More importantly (realizing that this belabored point is like performing CPR on someone laying in a coffin) I have recently moved from Windows to OS X and I am looking for something like FlashDevelop (that does do code hinting and code introspection.) Maybe you have posted on this before, but… any suggestions? maybe you or your readers have mac-centric suggestions for this and/or a good PHP editor (until I can afford to buy CS4 for my new mac)?
Please don’t say flexbuilder. I can afford CS4 yet, let alone Flexbuilder.
@Steve It’s unclear about the future of the Flash code editor. As we continue to drop the price for Flex Builder, you may see it as the primary AS code tool. Of course we have a lot of work to do to make that a smoother workflow. Also the code editor in Flash won’t ever disappear. As for editors for Mac your main choices are Flex Builder, FDT, and Textmate.
Those of you guys who cant afford Flexbuilder should try FlashDevelop, it comes at a very nice price (free!)
Very great tutorials Lee, your name is common knowledge amongs us Flash Students here in Australia
Hi Lee,
that is a wonderful tutorial, But I am wondering The Gtween Class you used does it have onComplete property like Tweener Class or something like that cause I am sure that i will need that
thanks Again
Lee,
i have to say this is really excelent.
About some new 3d ideas: how about a 3d image globus.
As a newby I dont know if it is to hard to do, put you were asking for some ideas.
Christian
@gordon – Can I use a CS3 .fla to compile for FP10?
Nah that’s not possible atm. if adobe releases some patch, that would be great
Do I need the Gumbo sdk to do it?
nah not necessarily. if you download the flex 3.0.2 sdk, it comes with the fp10.swc, which gives u full capabilities of flash player 10. (that’s what http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10+Beta+with+Flex+SDK+3.0.x
says) but i never got the dynamic sound working. the SampleDataEvent only fires once.
I don’t know how to go about it
I’m trying to move from Flash to Flex as my main code monkey tool but get a bit confused at this point… I am very confident in Flash but there’s no way I can afford the new CS4 suite.
if u like coding, flex is for u. i was a flasher but turning a full time flexer. sometimes i even code the sprites using graphics API than drawing em. the link above shows u how to go about the installation and use fp10 and its new api from flex. if u want screen shots and someone using plain english, http://blog.everythingflex.com/2008/05/20/using-flash-player-10-within-flex-builder/
explains it well. i think flex builder 3 is still having issues with code completion on some classes, like graphics, and bitmap. everything else seems cool. especially accelarated 3D. the new 3D api really rocks, and yeah they’re faster than pv3d or away3D as fp10 uses openGL and directX to render the 3D. don’t forget the shaders too, they bring a whole new set of creativity
and yeah lee, ur super awesome. ur blog is like a news blog for me to learn new things. i have breakfast while reading ur blog. lol!!
wud like to see the mac coverflow with the new 3D api.
Nice tutorial, very informative. For people looking for editors, if you are a student, you can use Flex Builder for free. Great perk for us students =D.
Hey lee, you helped me so much over the past months. I’m actually the top performer in my class =D. All thanks to you. Keep up the great work.
Also I noticed you loading up xml in your tutorial just now. I created a simple class for loading up xml. If you ever have time, you should come check it out.
Anywho, keep up the good work. =D
XMLLoader 2.0
http://blog.kreativeking.com/downloads/classes/XMLLoaderClass_v2.0.zip
Usage
http://blog.kreativeking.com/2008/10/stable-release-xmlloader-20/
Mr. Lee
Awesome as always.
Upwards and onwards!!
Hey lee, I’ve just hit an issue with Flash CS4, maybe you can do a quick tutorial, or reference one, involved with best-practices for namespacing involving packages, and instance variables.
I have an update package, and a document class that imports a class within that package. In CS3, this wasn’t a problem, but compiling in CS4 is generating what appear to be namespace errors.
import update.UpdateManager;
var update:Object = {test:’namespace conflict’};
trace(update.test);
//1202: Access of undefined property test in package update.
Great Tutorial! Question about the Z though, how can you determine the where to place items in the z direction? I see that you used 100 when you zoomed into the pictures, would 100 be normal scale, with anything less being larger and anything more be smaller in perspective?
Could you do anething on bone and bind tools especialy Z sorting (we have 2 symbols whoes parents were 3d rotated we conect them by bones mnd rotate. Problem – flash does Z sorting strangely…((((example: http://superior0.narod.ru/Untitled-3.swf)
Thanks for the reccomendation on gTween. Looks like a great tweening engine. I’m gunna give it a try on my next project. Any idea if it can tween filter properties?
Good stuff as usual here.
I’m happy you put this online, i was just looking for something to get into the 3D effect with FP10 as i really don’t like PV3D T_T (and also i’m still afraid of 3D since i tried 3D Studio Max at the university two years ago x_x )
Thanks a lot for all you’ve done Lee \o/
Update to the problem I mentioned. Packages should be defined with full path’s.
import com.myapp.update.UpdateManager;
var update:Object = {test:’namespace conflict resolved’};
trace(update.test);
//namespace conflict resolved
From Adobe: This is not a bug. We allowed this in CS3, but it was actually unintended. In CS4, we follow the ecma specification which state that imported package names shadow names of definitions in the same scope when used on the lhs of a dot operator (ie they look like package references). Workarounds include wrapping the reference in parens. e.g.
Hey,
i played around with this (added video, delayed movements, effects, … ), and i’ve just an advice for everyone who planed to take this and use it :
Putting the
SimpleZSorter.sortClips(container);
on an enterFrame is really CPU Intensive (got about a 35% usage on a solid Dual Core…) , instead of this, i recommand to add an event listener on a MouseEvent.MOUSE_MOVE, so when the mouse is not moving your not zSorting the clips and save by this a few CPU usage.
Or if you plan to use something like GTween to move your carousel (as i did, my carousel turn every 3sec to change the image on the front, and i use GTween to move the container), use an event listener like:
tw.addEventListener(Event.CHANGE, zSortClip);
So you’re sure that you’re not doing any useless zSort when your carousel is not moving.
Hi Lee
Thanks for this tutorial and the many others on you site – a real resource for all of us (newbiews and veterans alike) – very happy that you are now an Adobe evangelist – guessing they saw your talent from the early days when you were just finishing university – I might make a prediction – that you might become Adobe CEO someday (hehe – smileys) – just kidding….
BTW – Mikushi is right the SimpleZSorter.sortClips(container) method is great BUT is Processor Intensive – that is if you have a lot of clips on stage – so well thought out schemes are in order (as he mentions) – I wanted to ask about the fact that mc elements – once they are added to the container – are rendered as bitmaps – very clear when you rotate the container by 180 – and look at a given clip as say z = 500. Since it is rotated, it effectively becomes -500 (where fuzzy edges are noticed) – (btw – i am not referring to the spedifics of you tutorial, but rather on my tests where vector mc’s are added – F10 player renders them as bitmaps.
Any hints / discussion about this particular issue appreciated.
cheers
Great tutorial and beautiful carousel. I am very interested in using this carousel in my Flex 3 app but I am not sure how to go about integrating it into Flex. Does anyone happen to know how I could integrate this app inside of Flex? I would also like to make the carousel dynamic so that I can pass in the XML to the carousel from Flex. I have not used Flash before so any help/tips would be greatly appreciated.
Thanks!
This worked out great for me! Thank you so much. I know Lee said that this is advanced, and I can make images go to new URL’s when they’re movie clips. I was wondering if someone could tell me how I could get it to go to a new URL for each image clicked with this.
Thanks!
Lee as always fantastic tutorial. I basically have the same question as Brent, how would we add a URL / hyperlink to each photo on max size so that when the viewer clicks it will take them to a website?
this project “Aplicación Multimedia para Construir un Recorrido Virtual por la Torre del Reloj” . we looked how they designed in 3d the clock in the “Malecon 2000″ in Guayaquil-Ecuador
How would I do this without the step in Flash at the start? i.e. Only using Flex builder. I presume I have to create the 3d view container somehow but can’t get started. Any pointers?
Anyone figured out how to get the carousel to rotate seamlessly in both directions? When you get to the last item in the carousel and then click the first one, it rotates all the way back instead of one position forward. Similarly, when you’re at the first item and click on the last one on the left, it rotates forward all the way around to the end instead of just going back one slot.
Any ideas?
Duh, finally figured out my dilemma. Had to set the autoRotation property.
i.e.
var tw:GTween = new GTween(container, 0.8, {rotationY:targetRotation}, ease:Exponential.easeOut});
tw.autoRotation = true;
Great stuff Lee.
OK … so get this. If you use Tweener instead of GTween, you get the full revolution when clicking on the first item and clicking on the last item (see Mark G’s note – same issue but with Tweener).
I have been racking my brain for months with this (using Tweener) and never thought to look at the tweening classes as the cause of my problems. In PV3D I have been using Quaternion matrix and slerp!!
I’ll contact Zeh to see what the deal is with Tweener.
Is there a way (which Im sure there is) to show only the internal part of the carousel? Meaning only show the images in the back, so that the image in the very center would be furthest away from you and rotate closer to the user and the edge of the stage as you scroll.