Local.ch Coverflow Clone goes open source

I am very excited to announce that local.ch granted us the possibility to open source the coverflow clone we created for them under the “Simplified BSD License“. So first of all a big thanks to them, you guys rock!

“Oh noes! Not another coverflow clone!”

Fear not! This one is actually quite different.

“Yet Another Coverflow Clone”, or lovingly YACC for short, is built in Actionscript 2, which makes it compatible with Flash Player 6 and newer to ensure that a broad userbase can be served. It’s been built to be dimensions independent. That means you can use whatever size of pictures you want and embed the flash with whatever size you can think of.

Under the Hood

YACC sports horsepower provided by the open source Papervision3D engine which allows for smooth 3d presentations. Animation is realized through the also open source Tweener which gives you the power to easily change the coverflow animation to whatever your heart desires. Best of all, even though it is Actionscript 2, it’s more performant than many of the other clones we’ve encountered. Even some of the AS3 versions and with 33kb it’s not a burden on your site either!

“Is that all that is to it?”

Of course not! YACC loads its Dataset and many customization settings through a simple, yet extendable XML.

“How is it extendable?”

Glad you asked! YACC implements a variety of heavily customizable and bi-directional javascript calls that allow you to interact with this coverflow like with no other.

Development Challenges

During development I was faced with a couple problems that needed to be solved. Of which two I think are of interest to other developers as well.

As you may or may not know, the Actionscript 2 version of the Papervision3D library does not include a possiblity to dynamically load images on runtime and assign them as a material to 3D objects (in our case planes). So it was neccessary to create a BitmapLoader class capable of loading and creating Papervision compatible materials.
(If you are in need of such a class yourself, feel free to use the BitmapLoader Class in any of your own Projects.)

Pretty soon into development we also realized that the Mac Flash Player has quite some performance issues with the intensive displayrendering that Papervision3D required. We came up with 3 steps to solve this problem:

  • The BitmapLoader Class allows you to preload a certain amount of pictures before even starting to display the coverflow and silently loads the rest then in the background.
  • The Application only displays a user-defined (yes, in the xml :) ) number of planes at once.
    Thus allowing us to have a less render intensive animation cycle.
  • To ensure the Flashplayer doesn’t just hog system resources while no interaction is happening in the coverflow, the 3D Engine is instructed to stop rendering until a new interaction happens.

I hope this information can be useful to someone else struggling with similar problems.

Where to get YACC

  • You can download the whole shabang here
    (incl. sourcecode, example, required 3rd party libraries)
  • Or you can get the latest build from SVN

Additional Ressources

If you have questions, suggestions feel free to chat me up in #liip on freenode and i’ll try to respond to you in a timely manner :)

Pretty cool. Can the image tag not be a remote http source?

As of yet remote http sources have not been considered :) But i might look into that in the future :)

nice one … now i just need to find a project that needs this ;)

The pages always open in a new window. I couldn’t find any docs on how to set target=”_self”. Can you help me?

I just found on how to set the target myself. It’s done in the yacc.js in the onClick method.

Hi,

This is an amazing component. Love it. It’s probably the best one I have seen so far.

Do you know, is there a way to remove the scrollbar?
Also, for the life of me, I can’t get my images to scale to 100%. Setting defaultScale and highlightScale both to 1.075 gets me just a few pixels off from the image’s actual size. So my images look a little blurry.

Thanks again for rockin’ the casbah.

Hi Joshua,

thanks for the props! I am actually gathering the request and will (once i find some time for it), implement those into a newer version. So far i’ll be looking into adding remote pictures, a possiblity to remove/hide the scrollbar and as you stated correct the perspective to make sure the pictures will scale to 100% of their actual pixels.

greetz
Sandro

Hi,

Great coverflow, best i’ve seen but I get an issue when more than 9 projects are added in the XML, when you go to the 10th project in the coverflow it skips through the rest to the end. Do you or anyone else know of this problem and/or a fix for it?

Cheers

Hi,
Thanks for open sourcing this great coverflow. While developing an project we added 2 more features: rotation (after last cover first cover is the next) and startIndex (different start index support). You can download the updates here http://labs.first.lv/2008/10/21/yetanothercoverflowclone-rotation-startindex/

Sandro hands down this is a great piece of work. I have to agree the most sought after feature is for remote sourceing the images from other servers. This is great for mashups. I’m not a Flash developer but let me help this thread by sharing some research I have done today. A cross-domain policy file will need to be implemented for this feature to
work on any of our webservers.

http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html

http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html#allow-access-from-domain

Looking forward to when you can add this capability.

Randy

This is a really sweet coverflow script! And very nice code too.

How can I get it to automatically zoom in the first poster to the highlight scale and add the highlight effects on first initialization? I have scoured through the code and can’t figure out how to get it to do that. I can’t seem to find a separate function specifically for doing that and not sure what code can be copied into the coverFlowReady()
method to achieve that. I’ve tried but failed.

I would appreciate any suggestions.

How can you make the tool tip visible?

Hi Dan

The Tooltip appears automatically when you hover over the scrollbar. If you want to make changes look into YetAnotherCoverflowClone.as and look for showTooltip().

Greetz
Sandro

Hi Sandra, I would also love to use the flow for a project, but I am waiting or the crossdomain-issue =) Greetings

How do i make the scrollbar transparent or change its background color? Complete newbee when it comes to the flash files ?

Thanks

Ok, got it working. What about the last image bug. Was that fixed. With 10 images loading only 9 show and one gets lost.

Cheers
Fred

Hi there!
Great Coverflow! Brillant!
Its possible to hide the scrollbar?

Cheers,
dm

Hello,

many thanks for sharing this great app !
yet another coverflow clone, agreed, but this one is wonderfully built and optimized.

stumbled upon your blog while searching for a “continuous” coverflow solution ( image list looping at the end like in a caroussel )

do you think it is an option that you might develop in a close future ? or is there guidelines you culod provide me to add the functionnality.

cheers and thanks again.

Thanks for open presenting this wonderful application!

I was wondering how the part with the HTML descriptions underneath the YACC at LOCAL.CH was done and how they are displayed in sync with the CoverFlow without a page reload? Is this feature part of YACC, which I can turn on/off somewhere? Thank you for you replies.

This is excellent. Thank you and local.ch so much for making it open source. I’ll be using it in a Rails project and will post back the link when it’s done.

I’ve been doing A LOT of researching into this type of Coverflow Flash Gallery and this is by far the best.

…. I’ve checked out the latest SVN and I’m going to have a “hack around” on the source to try to fix this “more than 9 images, last one not showing” bug but I’m by no means a flash guru so Sandro, if you’ve already done any work on this bug then I’d love a starting point.

As a feature request – I’d love to see a method of positioning the scrollbar.

I revisited the “more than 9 images thing” and once I had it running from a dynamicall generated xml file it went away. I only had the problem when I copied and pasted some of the entitites. I assume that was because I was getting some repeated images and for whatever reason it didn’t like it. I’ve now got 20 or so unique images working well with
this carousel.

Good stuff. Our designer loves it.
If it makes it into the final production site then I’ll definitely send a donation even if it’s just a few beers for your dev team.

Have you got a donations scheme set up?

Fantastic work!!

But a question:

How do I activate “jsonclick”?

With the Click on a cover a HTML link should open.

Can somebody send me an example file?

Many thanks.

Hi Sandro,
big thanks for open-source the coverflow-clone. It’s pretty cool – I love it.

Have you managed to solve the remote http picture problem yet?

I just take a look at the sources but I’m not sure where exactly the problem is.

Greets Marcus

Hi,

great work, but there are two things, that would be great to know:

1. how could i get jsOnClick work to open the url. Currently nothing happens if i click on a cover :(

2. is there a way to get scrolling with mousewheel working?

Greetings
Marco

Hi,

I also ran into the “9 images bug”. No way to solve it first. I then got it “fixed” by setting the number of visible planes to my total number of images…

Hope this helps somehow to solve this nasty bug ;-)

Maschine

Hi,

i’d like to enhance this very nice CoverFlow by some little features:
-Ability to define a base angle for rotation of the blured images (rotateBy: baseAngle+degreeSteps).With degreeSteps set to 0, you could have each image rotated by the same angle.
-Ability to show/hide the Scrollbar.

Where do i get the netTrekLIBs? I am not really a flash developer and just using FlashDevelop. I’d also like to contribute my changes, if anyone finds it useful.

Best regards,
Hans Hartl

Nice, but this thing cannot fly with any Flash Player below version 8 because of the BitmapData and the filter classes you use.
Maybe I missed something but if I am right you might consider to change your description as it is not FP6 compatible.
Cheers,
Olaf

Hey great component
but i have a question
i want to change the url target to a target which open the picture in another java component
in html i would write
how can i create that in java for the onClick event??

in htm i would write a link with the attribut rel=””

Can someone please assist me in describing how I may change the appearance (color) of the scrollbar?

Thank you!

Can someone please assist me in describing how I may change the appearance (color) of the scrollbar?

Thank you!

Hi
How to hide the reflection of images and scroll bar?

Thanks
Mandar

Hey
How can we hide or remove the scroll bar?

Awesome thanks a million ^^

For all the people who dont want scroll (me included)

Edit: yetAnotherCoverflowClone.as and comment

// add a ScrollBar (thanks michel! ;) )
/*
scrollbar = ScrollBar(__instance.attachMovie( “ScrollBar”, “scroller”, __instance.getNextHighestDepth(), {theme:”custom”, steps: __xml.titleArray.length-1, length:300, _x: 20, _y: 20} ));
scrollbar._rotation = – 90;
scrollbar._y = Stage.height;
scrollbar._x = Math.round(Stage.width/2 – scrollbar._width/2);
scrollbar.addEventListener(Event.CHANGING,onScrollChanging,this);
scrollbar.addEventListener(Event.CHANGED,onScrollChanged,this);
scrollbar.addEventListener(ScrollBar.PRECISE_OVER,onPreciseOver,this);
scrollbar.addEventListener(ScrollBar.PRECISE_OUT,onPreciseOut,this);
*/

Btw anybody know where to find the gradient on reflections ? :)

ok nevermind i found it.. but i also notice performance is really high.. takes my cpu up to 100% after 1st click

Am pretty sure there is a memory leak somewhere… in the begnning and end the cpu state is normal… but after 1 click it goes up to 100% even with no animation.. untill it reaches the beginning or end.

Hmmm it seems only happends when click.. if use scroll it works normal.

Also.. sometimes the wrong amount of planes are shown.

Hi
The visible panes and preload amount seems to be not working
Because when I tested it with 100 images and different values for above mentioned properties the result was same.

Further investigation leads to wrong planes visible e.g if we set visible planes 6 then 8th plane doesn’t show up.
Unable to get to root of problem?

Preload works if in xml in place of preload put _preload

@Chris de Kok

Removing the scrollbar does not work for me.I removed the code, nothing happend.
Please help!

Umm it works but you need to compile it again.. anyway I would advise against using this coverflow as it has a memory leak…

Better use this instead: http://www.weberdesignlabs.com/blog/2009/12/flash-10-coverflow/

Hey, great tool, but I’m facing a problem: I tried it out offline from my desktop and the links are not working!
I would like to open a MP3 file (in target=”_blank” or even on the same page)when a cover is clicked. Please help!
Grüße in die schöne Schweiz!! :-)

Hi Michael
You need to open the page not as local file but as web page.
i.e if you are using iis make web application or virtual folder and then navigate to file with http://yourwebapp/yourfile.html
It will work.

Hi Sandro,

This is a fantastic work. Thanks for your good work. I am just wondering how to put left & right arrow to rotate left and right instead of scroll bar. Which function can I call in yacc.as to rotate left and right. Please help me. Many thanks

How to implement the Coverflow in cairographics? non-OpenGL, non-Flash, non-DirectX