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

• Papervision3D @Google Code
• Tweener @Google Code

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 :)

leo @ 15.08.2008 13:42 CEST
Pretty cool. Can the image tag not be a remote http source?

Sandro @ 15.08.2008 14:39 CEST
As of yet remote http sources have not been considered :) But i might look into that in the future :)

Pierre Spring @ 15.08.2008 14:54 CEST
nice one ... now i just need to find a project that needs this ;)

Lukas @ 25.08.2008 12:51 CEST
The pages always open in a new window. I couldn't find any docs on how to set target="_self". Can you help me?

Lukas @ 25.08.2008 12:55 CEST
I just found on how to set the target myself. It's done in the yacc.js in the onClick method.

joshua @ 08.09.2008 23:30 CEST
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.

Sandro @ 10.09.2008 15:52 CEST
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

Dave @ 30.09.2008 11:41 CEST
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

Kaspars Jaudzems @ 21.10.2008 11:46 CEST
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/

Randy @ 25.10.2008 20:36 CEST
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

Peter @ 28.10.2008 08:03 CEST
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.

Dan @ 25.11.2008 18:37 CEST
How can you make the tool tip visible?

Sandro @ 25.11.2008 18:44 CEST
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

Marcus @ 07.12.2008 21:16 CEST
Hi Sandra, I would also love to use the flow for a project, but I am waiting or the crossdomain-issue =) Greetings

Fred Bolder @ 17.12.2008 22:58 CEST
How do i make the scrollbar transparent or change its background color? Complete newbee when it comes to the flash files ?

Thanks

Fred Boilder @ 18.12.2008 14:44 CEST
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

dm @ 28.12.2008 20:19 CEST
Hi there!
Great Coverflow! Brillant!
Its possible to hide the scrollbar?

Cheers,
dm

dafly @ 01.01.2009 15:34 CEST
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.

Tom E. @ 10.02.2009 10:18 CEST
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.

Kevin Monk @ 24.02.2009 11:01 CEST
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.

Kevin Monk @ 24.02.2009 17:20 CEST
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?

André Hilger @ 15.03.2009 11:53 CEST
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.

Marcus @ 03.04.2009 11:18 CEST
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

Marco @ 09.04.2009 20:22 CEST
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

Maschine @ 15.04.2009 00:05 CEST
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

Hans-Jürgen Hartl @ 27.05.2009 00:22 CEST
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

Olaf @ 09.06.2009 18:25 CEST
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

The_Doomed @ 09.07.2009 21:33 CEST
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??

The_Doomed @ 09.07.2009 21:34 CEST
in htm i would write a link with the attribut rel=""

Gregorio @ 12.07.2009 10:01 CEST
Can someone please assist me in describing how I may change the appearance (color) of the scrollbar?

Thank you!

Gregorio @ 12.07.2009 10:01 CEST
Can someone please assist me in describing how I may change the appearance (color) of the scrollbar?

Thank you!

Mandar @ 04.01.2010 11:30 CEST
Hi
How to hide the reflection of images and scroll bar?

Thanks
Mandar

Priyanka @ 04.01.2010 11:34 CEST
Hey
How can we hide or remove the scroll bar?

Chris de Kok @ 03.02.2010 10:57 CEST
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);
*/

Chris de Kok @ 03.02.2010 11:22 CEST
Btw anybody know where to find the gradient on reflections ? :)

Chris @ 03.02.2010 11:43 CEST
ok nevermind i found it.. but i also notice performance is really high.. takes my cpu up to 100% after 1st click

Chris @ 03.02.2010 12:27 CEST
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.

Chris @ 03.02.2010 12:57 CEST
Hmmm it seems only happends when click.. if use scroll it works normal.

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

mlimaye@adccindia.com @ 04.02.2010 12:57 CEST
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.

mlimaye@adccindia.com @ 17.02.2010 11:33 CEST
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?

mlimaye@adccindia.com @ 17.02.2010 11:33 CEST
Preload works if in xml in place of preload put _preload

Niko @ 19.03.2010 12:23 CEST
@Chris de Kok

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

Chris @ 19.03.2010 12:29 CEST
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/

Michael @ 30.06.2010 18:26 CEST
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!! :-)

Mandar @ 01.07.2010 07:31 CEST
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.