Labs: Flash based Coverflow

by

CONTACT INFO: If you want to get price quotes for this control send an email to [info at gogogic dot com]

Coverflow

(Picture is a link to an online app that you can mess with)

Gogogic was recently asked to implement a coverflow like micro site (head banner) for a client. The implementation needed to be very smooth, very light weight and highly customizable, because the client wants to be able to change images easily.

We took a good look at what was already out there but basically we didn’t find anything adequate in terms of quality and customization. We finally decided to build our very own coverflow application from scratch because – in the end – it would be more cost efficient than to find a 3rd party control and customize it.

A lot of Flash cover flow implementations are based on Papervision, which is an excellent product, but is sometimes misused a little. We felt that creating cover flow functionality with Papervision would be like shooting a mouse with a cannon – a little misguided. The result is also usually a loss in smooth motions and some tortured scaling.

Anyway. We just finished with our version of Flash based dynamic coverflow, all based on pure AS3 goodness. You can mess with it here, and over here you can see it in action.

UPDATE: Check out this coverflow implementation as well!

Tags: , , , ,

29 Responses to “Labs: Flash based Coverflow”

  1. Halldór Andri Bjarnason Says:

    This is real nice. Very smooth, like everything that shoots out of Ari’s fingers.

  2. Lady Elin Says:

    Mikið rosalega er þetta óggilega cool! Og mikið rosalega er gaman að þið eruð farnir að nördast meira á netinu. Alltaf svo skemmtilegt að vita hvað þið eruð að bardúsa og hvernig gengur.
    ps. ef þið vitið ekkert hver ég er spyrjið bara Gummudu.
    pps. bara af því að það er fimmtudagur;
    time flies like the wind, fruit flies like bananas!!!!

  3. Clint Modien Says:

    is the source available?

  4. Ari Says:

    Sorry, no, but if you do have any questions about the flash coverflow I’ll be happy to answer them.

  5. Jónas Antonsson Says:

    Hi Clint.

    Since the code was made for commercial purposes we can’t release it in whole, but me and Ari have discussed a follow-up article regarding implementation of the coverflow functionality in AS3 and he is going to take a look at that when he has the time (along with some other very interesting posts).

    If you have any specific questions, you could send them our way through our site (www.gogogic.com) and we’ll try to answer them if we possibly can.

    Cheers,
    J#

  6. Labs: Flash based Coverflow Revisited « All Things Gogogic Says:

    […] Flash based Coverflow Revisited The initial post that featured our very own Flash based Coverflow has gotten a huge response. We have been bombarded with email since we posted it and we’ve […]

  7. tom Says:

    http://playmobile.pl/ made by k2 (k2.pl)

    your cover flow looks like k2 production!!!

  8. Jónas Antonsson Says:

    Hi Tom.

    When we were doing research for our Coverflow solution, we looked at a lot of different implementations that were already out there. The k2 coverflow solution was amongst those we took a very close look at since one of our clients liked a lot of things about it (reflection, jumps, swivels).

    So we incorporated some of those things in our dynamic solution (they can be adjusted, to a large extent) when we programmed it. But we went for smoother motions and more algorithms to control the behavior of our application.

    We also decided to program it completely from scratch to get it to work exactly how we wanted it to work. That meant that we did not rely on any 3rd party packages like Papervision (or similar solutions).

    J#

  9. steve Says:

    whats the point of publishing an article like this when we cannot either see the source or get hold of the thing to use it. Just to let us know how clever you are , or what ?

  10. Jónas Antonsson Says:

    This is what we do as a company. We sell this stuff to other companies. Sometimes we like to talk about what we do and create. An extended portfolio. We’re proud of our work so why not write about it?

    J#

  11. Dwayne Neckles Says:

    I am trying to do a coverflow without papervision using pauls code from reflektions.com. However what confuses me is that I’m unable to successfully add reflection using the free reflection classes outt here.

    Because you cant reflect something that’s been scaled. So I am very curious as to how you were able to achieve the reflection on your skewed bitmaps…

    I even tried to create a holder clip that contains all planes and simply reflect that but no success. I understand and have swallowed your reason for not sharing code.

    Can you provide me with a direction of what to go in. Thank you

  12. kristoph Says:

    Are you licensing this as a component?

  13. Omar Says:

    Hi, Am interested in buying this from you, please let me know more. Thanks.

  14. daniel lopes Says:

    Why create a post blog with a sample of implementation without code??? Just put the final project in your portifolio.

  15. Jónas Antonsson Says:

    Thanks for all the comments.

    Daniel : For one thing we wanted to point out that it might be better to build controls like this without relying on external frameworks like Papervision. We also view our blog as an extension of our portfolio, where we can discuss our projects more thoroughly.

    I am sorry that we’re not able to publish any code but I think I’ve explained why that is already.

    J#

  16. Rita Says:

    Have you sold this code to other companies? My company is interested in integrating this coverflow into an existing flash based application.

    Thanks.

  17. Jon Says:

    Hey,

    How long did it take you all to create this. I am trying to alter a third party version from spephen weber in AS 2 but it is not as smooth as I would like it to be.

    Thanks!

  18. Scott Says:

    I didn’t see a response to any requests to use this on other websites. Can you contact me about potentially buying the means to put this on my website?

  19. Ten things you probably didn’t know about Gogogic « All Things Gogogic Says:

    […] you google “flash coverflow” we’re  in the top 1-5 results – our coverflow blog post has been read 15.000 times or about 30 times every day, on average (46 hits yesterday […]

  20. Adam Says:

    Hey, is there any chance you could send me the source? I am not looking to rip your work, I would like to compare your code with my own and other open source examples. I recently built a CoverFlow app using the Away3D engine but my client has just informed me that they require 100+ images to be displayed which almost kills the app! I think I have any other choice but to fake the 3D effect or use FP10 which isn’t a great solution either.

    Thanks in advance. I would be happy to trade source files if your interested or hesitant in showing your code.

  21. name Says:

    good

  22. Drew Says:

    I would really like to be able to use this on my site, garagemic.com. Is it available for use?

  23. Indyaner Says:

    I ask myself too why you published an entry for a coverflow-clone in Flash withput any code-samples. You doint use this blog as a lab, but this entry is useless in this way. You wrote “our coverflow blog post has been read 15.000 times or about 30 times every day,” (https://gogogic.wordpress.com/2009/02/28/ten-things-you-probably-didnt-know-about-gogogic/) but I bet my rigth arm that 80% of the cisitors were pissed Developers who hasnt found what they were looking for on this Page: Samplecode for quick mockups.

  24. Jónas Antonsson Says:

    Sorry you feel that way Indiyaner but, of course, we’re not obligated to publish source code for the solutions we provide for our clients.

    We tried to explain the reasoning behind building our own control and we wanted to show that you can indeed build a control like this without compromising dynamics, for example. In another post on this blog there are more details about technical aspects and implementation.

    But ultimately this is our blog. We can use it to post what we like. In this case, an announcement about something we did and thought was cool enough to share with others – at least to show what can possibly be achieved.

    We’ve had a lot of positive feedback and hopefully you’re wrong about the number of visitors that read the post and do not like it.

    But maybe the question is : “What would you like to see covered in a post like this?” Leave another comment as an answer and we’ll try to write a new post in reply – hopefully containing some of the things you ask for. The only thing we can’t do is publish the entire source code or files. We need those to make a living.

  25. Dragos Stancu Says:

    Hi,

    This is cool, I’ll take a look at the code. If you want to check out some Video3D:

    Flash Video Album Using Five3D (Mathieu Badimon) And gTween (Grant Skinner)

  26. Özgür ALTAY Says:

    A nice “cover flow” flash app, smooth and very fast. Congrats!

    You can upgrade by adding mouse wheel integraditon to extend usage.

  27. madana Says:

    I wonder if you can use transparent image or scroll bar in loading image.

  28. John Says:

    Hi Ari,

    You need to take a look at this Cover Flow:http://www.flashxml.net/cover-flow.html that is very customizable. Certainly it will be useful for you.

  29. Robby Says:

    John make’s a good point. I tried http://www.flashxml.net ‘s Cover Flow and it is art. Thank you John for this awesome product.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: