Adobe CS3 Icon 3D Carousel

Let’s face it, everything is better when put in a 3D carousel. It’s so played out that it’s cool. This little Flash app contains an interactive 3D carousel of all of the new icons for Creative Suite 3. Many people have complained about them but I actually really like the simplicty of them. I mean how much more could they have done with the whole nature/flower concept? I like the whole elements analogy and think it is a nice change. You can click the image below to check it out. There are a couple of icons that are yet to be identified so let me know if you find out. I got most of my information about these from this blog posting.

Looking forward to CS3!
Lee


Commentary

  1. jason says:

    How did you create this carousel? Do you know of a tut?

  2. lee says:

    I hear that gotoAndLearn.com has a great 3-part series ;-)

    Lee

  3. Savvas says:

    Hi Lee and happy new year.
    I like the new icons too.Especially for the Mac OS X dock..

  4. lee says:

    Happy new year to you too!

  5. Art says:

    Hello! IC is InCopy ;)

  6. Chad says:

    I have nothing to back this idea up, but I wonder if the two unidentified icons with a film/video theme are for products that were acquired with Adobe’s purchase of Serious Magic ( http://seriousmagic.com )…?

  7. Scott Barnes says:

    That is some smooth animation, well done! :)

    (It actually feels as if the icons are on a high gloss finish)

  8. Tink says:

    Ah it makes a nice change to hear something positive about those icons. Lets face it none of use have actually had any experience with em yet in full use yet!

    Shame the rollOver doesn’t work when the mouse is kept still so u can just cycle through em all and see what they are.

  9. Wondering why Breeze is in there? Wont it be called Adobe Acrobat Connect Professional or something like that?

    I have two words for the new icons: “coke classic”. Branding wise, it’s a lame move. “if it ain’t broke…don’t fix it.”

  10. lee says:

    Hey Tink,

    Do you know how to force rollovers if you are not moving your mouse? I’m guessing some kind of hit testing or something.

    Lee

  11. Tink says:

    If i’m at either side it seems to work. I first thought this could be because the icons overlap, and therefore an immediate rollOver gets noticed (i.e. a rollOut onto the stage seem to bugger it up), but playing with it a bit more there seems to be a selectable textField in the area where it doesn’t work?

  12. Hi Lee,

    Great work, I would make the distance in between the objects become relative to the perspective too, it would look even more real and make the carousel more space efficient.

    Peace!

  13. lee says:

    Ahhhh that was it. Thanks man!

  14. ia says:

    Wow, that’s awesome! :D

  15. Marco says:

    Lee,
    You’re hilarious, and the first comment is even more hilarious. It has to be a joke, and just when everyone thought you retired the carousel. Anyhow, I’m very thankful I learned how valuable of a resource you are early in my flash developing, and will continue to learn every day.

    Marco

  16. sascha/hdrs says:

    People rejoice! You can finally know what all those icons mean!
    Control is a bit too sensitive IMHO though, otherwise thumbs up!

  17. mario says:

    if you looking path for cs3 photoshop. trial 2 full
    http://rapidshare.com/files/10014279/cs3.rar

  18. Whoa! WHOA! WHOA!!!!!!

    Why is Freehand in there?

  19. mark says:

    nice carousel, still bad icons…

  20. luchini says:

    Very innovative use of something I have seen a couple times before. Really impressive.

  21. Bill Napier says:

    I know there have been a lot of complaints regarding the design of these icons. But look at the vast array of applications they deliver. To me, if Adobe continued to use feathers or Venus or whatever instead of these periodic table of element abbreviations it could potentially be much more confusing.

    When I mouse over them as the carousel spins, I can guess most before the pop-up occurs. And I would say as far as branding is concerned that as long as Adobe’s consumers can identify their products for purchase there shouldn’t be much cause for alarm. Remember too that software, because of its very nature, needs to be updated frequently. Its not like Coke Classic or New Coke.

    When I want a Coke, I want a Coke.

    When I want Flash 9, I don’t want Flash MX (or Future Splash Player or Shockwave or whatever the heck it used to be) or a symbol that represents an earlier version.

  22. valugi says:

    I think adobe will invent something better than this.

    If they wont I will! Beware!

  23. Ben Evans says:

    So tell me again the visual difference between Live Cycle and in copy? Personally I think think its a poor, un-inspiring branding effort. Carousels…its been done a thousand times before. I think the average Adobe slug could come up with something far more interesting.

  24. patzo says:

    hello lee that’s very nice and helpful.
    but although i have seen your carousel tutorials i can’t make it in as3.
    could you please post in your blog the code????
    ]

    thanks a lot

  25. Al says:

    Ahhhh – adobe continues their downward spiral. What did they do, fire all their designers and hire a bunch of green MBA’s? Someone PLEASE start developing alternative tools that work properly. Lee, would should make a widget of this so that I can pop it up each time I need to figure out which icon I need to use LOL!

  26. lee says:

    Patzo,

    I haven’t made a carousel in AS3 yet but I will let you know when I do :-)

    Lee

  27. Oh, give me a break—you honestly mean to tell me that a god damn feather says “Photoshop” to you, but “Ps” doesn’t?

  28. Hal says:

    Hi, Lee and happy n.year

    I have followed you video tut on 3D Carousel, but I want to know how to make the carousel icons load an external movie file once it is clicked.

    Can you help? Plz

  29. Richard says:

    I don’t have a problem with changing the original Adobe icons. But to forgo the Macromedia’s legendary line of circular and shiny icons? They had such a minimalistic and organic design that emphasized creativity everytime the application was opened.

    It seems like a serious lack of originality if they stick with the elemental table design invented by Dmitri Mendeleev in 1869. They’re fricken Adobe, let’s get some icons as original and powerful as their applications.

  30. cherni samir says:

    very nice icons for adobe products, also excellent carousel. i like it ! :-)

  31. hebchop says:

    Nice! First of all, thanks for all the wonderful knowledge on gotoandlearn.com. As for the icons, I really like the periodic chart design, although a little glossiness would be nice. Pretty soon Adobe will have more apps than the earth has elements (if they don’t already).

    I also agree with Mr. Napier’s comments about cola. I accidentally bought a case of berry flavored coke because the packaging was so similar to regular coke’s. It tasted awful.

  32. Lee,
    Very funny comments you have running….

    As a designer… which I really, if ever, see voicing their opinions on Dev blogs and sites… I would speculate that these ” Periodic ” table style elements are “FPO”… or For Placement only.

    I truly believe Adobe is not going to just abandon its legacy of brand heritage altogether leaving us Arial or Helvetica or Futura bold…. as it’s “brand”.

    Then again… who can say. As buggy as the CS2 applications have been since release, I’d rather have them concentrate on making the applications run smooth and powerfully than have a next Gen look of their legacy brand.

    who knows? Less time paying us designers for branding and froo froo, might actually save us all some money. Mac OS already makes the adobe environemnt pleasing.

    so… what are we really wanting?

    I’m smart enough to know PS means PhotoShop.
    I’ve been using those abbreviations for years on IM.

  33. udanium says:

    Nice looking carousel, but i fear Apple will take your idea and make a truly 3D Dock UI that accelerates/spins a bit too fast for someone to actually choose an icon to click on! :-) Whoa, where’s the virtual dramamine!

  34. phil says:

    Bonsoir
    Cela semble très bien et joli.
    Malheureusement, je ne comprends pas l’Anglais
    Bonne continuation

  35. me says:

    Hey lee how do you stick links into your carousel, Its hard to do with the xml, which also uses

  36. Dave says:

    I wonder what font is used in the icons.
    Looks close to Myriad Pro… but it’s different though. The ‘l’ in the Flash icon isn’t a Myriad character.
    Nice and professional typeface… i think… in my opinion.

  37. Paul says:

    I really like these icons, although I don’t get why some of them are pictures (it’s not like the letter combinations are already used).

  38. supreme says:

    this new icons suck the cs2 were so EZ to tell the apart on my dock. now i have to read to find the right program. i say this is a bad idea for icons

  39. Tobi says:

    I like the new icons. Very clear ones. Hopefully Adobe will release CS3 soon.

  40. theBakachan says:

    Slick little flash, really neat. :)

    The two remaining unidentified icons would pretty much have to be the Serious Magic acquisitions… The green one with a silhouette of a person is the most obvious; Ultra, which is a chromakey app. (An awesome one, btw) So I’m going to guess the other is Adobe OnLocation. Cheers! :D

  41. Greenflash says:

    Very nice goodies, i like this 3b modelling.

  42. LC says:

    I’m also looking forward….^^

  43. Mezzo says:

    The font used is “Guage” by Robert Slimbach (the guy that designed Myriad Pro, etc).

  44. This thing is cool because its so fast and so smooth!
    Yeah, for the speed of AS3.

  45. Raj says:

    Mr Lee, your carousel technique is quite unique I really liked it very much, am doing a project am having a slow dial up ISP can’t download the flv files it would be a great help if you email me the carousel fla files please am stuck up with the actionscript,……….

  46. Jason says:

    I would also like to know how to attach links to the content. Maybe not in the content section but if I could add a couple of additional images or movie clips to the released function with xml generated urls that would be great.

  47. Jesse P says:

    Hi Lee… I think what you’ve done is Awesome!!! Just a quick question if I may, I’m trying to develop the same for my own web presentation but instead of the text to appear once the icon is click on, as you have it on your site, gotoAndLearn.com/Creating 3D Carousels III, how do I make a small Quicktime video pop out and play instead of the complete text description for the icon?

    I would greatly appreciate this help since I can’t figure this on my own :)

    Thanks Lee, I check your sites very frequently and really think your helping alot of us!!

    Jesse

  48. Thomas S says:

    Where did you get all the icons, I need a copy of the director one for my director mx so that it matches my CS3 icon set, if you could tell me it would be much appreciated!

  49. Matt says:

    Hey, I noticed it’s already been asked above, but I’ve been trying to figure it out for a while and need a little help – how do I add URLs to the XML file, and intergrate them into this ActionScript? Basically, so clicking the icons will go to external websites rather than an internally driven application.

    Many thanks, and good work on a fantastic (and very simple) tutorial! I have very little experience of Flash but was able to follow this with ease!

  50. Nihil says:

    The green “You tell me” is visual communicator (Adobe bought Serious magic)

  51. Lee, Tutorials on gotoAndLearn are not working can you check please ?

  52. Anthony Gibbs says:

    Hi Lee, I’m abit of a new bee to flash and am in great need of some help. I have successfully completed your carousel tutorial and am now struggling with the second. When I export the flash movie no Icons are appearing from the xml file dispite following you instrutions carefully(i tested the movie at the halfway mark, as suggested). I am recieving no script errors and am baffled.
    Please please can you help!

  53. addahville says:

    Hi Lee.. Love the carousel.. passe’ or not.. I’m trying to do something with it.. and I’m stuck.. I actually completed all three tutorials with no problems.. but here’s what I want to do.. I want to exchange the dynamic text file with PNG files.. containing the text and a pic.

    I have listed the “content” in the XML like this: content=”page1.png”
    and I made a movie clip labled “pages”.. I made all the neccessary changes in AS.. the linking, labling, etc.

    The icons move to their proper places.. and go back to their original spots..when clicked.. I tried using a solid as a place marker for the PNGs and THAT works.. it’s the actual PNGs that are not showing up..

    Also.. I’ve seen other carousels where the images turn to their sides as they pass the sides of the carousel.. I know this is done with scaling.. Do you happen to have code that will add to the ones you’ve already written.. or would you have to come up with them from scratch?

    HELP ! and THANKS ! ! (love your stuff btw)

  54. addahville says:

    Sheesh.. I should read the rest of the postings.. I just saw others asking the same questions.. pretty much.. the old “How do I replace blah-blah with a whatchamacallit..” :P

    Thanks again !

  55. Janet says:

    I have a question regarding swapdepths
    this.swapDepths(Math.round(this._xscale) + 100);

    when the focused item is in the exact center, both items on the left side & right side would have the same _xscale & depths, how to prevent this?

  56. Janet says:

    please delete my previous post. it’s not the correct place to post.

  57. Pete says:

    Where did you get these icons from? I want them…trying to go through the tutorial myself.

    I think the ICONS look great. Simplicity always wins through for me.

    Hope thats not saying something about me as a person :-s

  58. Craig says:

    Lee,
    Your carousel tutorial is amazing.

    I’m trying to recreate it for myself in Flash CS3, but I’m wondering if I need to make some code changes because I keep geting an error 1026?
    I have never used Flash before so please forgive this newbie question.

    Yours confused

    craig

  59. hello says:

    Please Help me!
    I need the 3d carousels III fla file.
    I don’t have time to folow the tutorial.

    Andrew

  60. Jorge Aquino says:

    Congratulations, the article that you offer is perfect.!!

    Thanks.

  61. That is sweet! I am going to learn how to do this as quick as I can. Thanks for the show!!!!

  62. Arnold says:

    Why is Freehand in there?

  63. Pankaj says:

    […] The 2D Carousel component is another ActionScript 3.0 component headed for release. If you were not on the moon for the for the past year (haha), you have seen a bunch of implementations of the Flash carousel. One of the first implementations we saw was posted on The Flash Blog by Lee Brimelow. We encourage you to check out Lee’s example as it contains step-by-step instructions and the source code! So, why did we build our own version? There are a bunch of reasons, but the main one is compatibility with the AFC ActionScript 3.0 component framework so you guys can just drag and drop it into your projects. We have also included an event model, the availability of the display parameters, methods, etc. […]

  64. Paul M says:

    Hi Lee

    I have followed your tutorial which is think is very clearly explained howeevr i am using flash cs3 which doesnt seem to recognise the delegate utility which you imported in your actionscript using mx. For this reason i am unable to create a working tooltip when you hover over one of the icons. Any suggestions – i would appreciate your help sooooooooo much as i am responsible for created a navigation tool for an application at work – the carousel being just that. Please please help – you might just save me my job!

  65. peter says:

    were can I find .mxp for this Carousel or maybe .fla with tweaking ability

  66. Vipin says:

    Great Tut. Is it possible to make this navigation similar to iPhone ? ie. Drag the icons to move them ?

    It will be a great feature.

  67. Brock says:

    I think others have already said that two of the missing ones where Ultra (green) and OnLocation (blue), but I didn’t see Contribute anywhere (or maybe I missed it). Don’t know if at this point you’ll want to go back and change it though.

  68. engin says:

    Thanks mean !

  69. Dean says:

    Any problems with carousel on Mac OS or Linux. I can’t tell by your sample above because it spins really fast. On others when you move mouse pointer outside of browser window wheel spins really fast and changes direction back and forth.

  70. Bob Gentry says:

    There is another example of this carousel with selectable icons on http://www.dees-fancydress.co.uk

  71. Aldo says:

    Hi Dean…
    Were you able to find a fix for this flash problem?
    I bought a carousel component from FlashDen and has the same glitch on Macs.
    The speed gets crazy after a while.

    Please let me know.
    My email is caniball@hotmail.com
    Thanks
    Aldo

  72. resimler says:

    think others have already said that two of the missing ones where Ultra (green) and OnLocation (blue), but I didn’t see Contribute anywhere (or maybe I missed it). Don’t know if at this point you’ll want to go back and change it though.

  73. harun says:

    hi can you give me *.fla file please?

  74. buzbuz says:

    i have done similar carousels. Mine are dynamic though, icons and Information are exctracted from a database … It’s pretty much the same though except that the deep icons in my carousel are blurred and darker to preserve depth of icons, and sensitivity to mouse motion is much smaller, smoother to use.

  75. Jane says:

    Hello Mr.Lee and Everyone.
    I am learning Flash and following Video tutorial, Carousels 3D part1, for CS2. I am trying to make it run in CS3.

    I couldn’t not get it work when it comes to this statement “this.swapDepths(Math.round(this._xscale) + 100)” since the function “swapDepths” does not exist on CS3.

    I REALLY APPRECIATE IF ANYONE CAN KINDLY TELL ME WHERE I CAN FIND THE INFORMATION / TUTORIAL FOR CS3 OR EVEN BETTER IF YOU CAN SEND ME SAMPLE CAROUSELS IN THIS VERION.

    THANK YOU VERY MUCH for your attention and help.

    email: Jane94115@yahoo.com

  76. Jesse says:

    Cool carousel, I don’t know why these icons get so much praise.. Im browsing the web for a replacement haha :P

  77. F3RH4T says:

    were can I find .mxp for this Carousel or maybe .fla with tweaking ability

  78. Jens says:

    Hi, I like this performancewise,
    but its not working anymore.
    why?

  79. enes says:

    Hi Lee,

    Tahnks for your workings. But I have a question about this working, when i click on an icon i want it to open a new page (may be any link such as index.html or any onether link), could you please help about its codes.

    Sincerely,

    Enes Gürel
    enesgurel@yahoo.com
    http://www.enesgurel.com

  80. willgame4food says:

    ok, so, i kno how to make the carousel, but i dont have the icon set. can u send me the set, or maby even put the whole thing, including the icons, flash, xml, ect, all in a zip or rar file? my e-mail is willgame_4food1313@yahoo.com

  81. YL says:

    Hi. I have a few questions to ask:

    - The HTML you linked to is not working. I had to view the source and link to the SWF directly.

    - How can you get the icons that have parts of it covered?

  82. YL says:

    … better yet, can I have a copy of the JPG files you dynamically liked to in the Flash movie?

  83. asui says:

    How can i link the icons to the real programs ???

  84. We are intersted in using the carousel on http://www.fancydresstogo.com, can anyone tell me how long it is likely to take to do and how difficult it is?

  85. ZenLee says:

    Hi Mr Lee,
    I would like to know the code for the above flash such that when i click on an icon, it to open a new page or link to a page.

    Thanks

  1. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  2. XIPLog linked here

    [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  3. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  4. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  5. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  6. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  7. DT blogi linked here

    [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  8. Adobe at tim* linked here

    [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  9. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  10. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  11. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  12. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  13. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  14. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  15. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  16. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  17. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  18. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  19. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  20. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  21. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  22. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

  23. [... Let's face it, everything is better when put in a 3D carousel. It's so played out that it's cool. This little Flash app contains an interactive 3D carousel of all ...]

Leave a Comment