Open Source Thought

Flash iTunes Cover Flow – Version 2

Flash iTunes Cover Flow – Version 2

Sep 25, 2007

So, people have been commenting a lot on the iTunes Cover Flow. Mostly they are good comments, but there were a few suggestions. I made one suggestion that seemed to make sense and was very easy to implement.

New Feature:

-Link based on XML for the Artist and the Album. If no link is given then the button is disabled.

-Link is placed on the actual text of the Artist and Album name.

Have fun and make it better.

Coverflow

UPDATE: NEW Flash 10 Coverflow. It is recommended that you use this new version as it will preform better.


Example:
Example

Source Files:
Download Flash Coverflow AS2 - CS3 (763637)
Download Flash Coverflow AS2 - Flash 8 (569566)

Please send me your improvements or modifications and I would be happy to put them up to help everyone else and I will attribute it to you and give you a link.
Remember this code is Open Source so please use, improve and share.
This code is under the MIT License.

Note: If the images are not showing up for you and you are pulling the images from a different server than the flash piece is being served from than you need to use a crossdomain.xml file to allow the flash piece to read from the remote server. This is a flash security feature and the only alternative to this is using a proxy page (as far as I am aware of). Read More

If you are experiencing a flickering on your images make sure to use the latest version.

Transparent PNG images are now supported.

If you have any questions don’t hesitate to post because there are a lot of nice people who will love to help.
Good luck!

-Stephen

  • Fabio Cerqueira Ba
    its perfect!!!!!!!!!!
  • Jon 21
    Hi
    Thanks for this great work!!
    I have a little question, i would like to change the text colors for "the artist" and "the album name". I'd like to put it in black. I haven't find the way to do it, could you help?

    Thanks a lot
  • Just go into the FLA and change the color of the text field.
  • Hey Huys,

    Can anyone tell me how to change the reflection image Background colour so when i have it on a blue background it doesn't get a big black blob at the bottom.
  • Its in the comments.
  • Simon
    Hay!

    This is great!!! I do have one question (I’m not so good with Flash). I manage to make some small modifications like transparency, opening links _self instead of _blank… but I would really like to know how I could make links open in targeted iframe on my page. I would like to have this on top of my page with iframe under it and when visitors click on desired album link would open in that iframe. Any help would be appreciated.

    Thank you!
  • Will
    Can this work with Lightbox? So that when you click on the album cover, it actually opens the album picture in a lightbox on the page. I have tried modifying the .fla and .xml to allow for this but no luck. Anyone try this yet?
  • Namdab
    i will lobe one of this to... I have found one that is free but it has advertisement on it.

    http://www.jetphotosoft.com/web/coverflow/van_g...

    i can be done, but i don't know how... :(
  • Yup! A lot of people have done lightbox with this. Just call a javascript function and send it the url and let the Javascript function call lightbox.
  • Radovanmail
    hi
    thank you for the coverflow.
    i have question how i can change y postion in the stage ? i try use this option in xml coverSlidePositionY but without any effect
    thank you very much.
  • Raj
    Hi I am using Flash Coverflow AS2 - CS3 (762930) version .. picture are appearing pixelated some how .. i can see it is same in yours one as well. Is there any solution? please suggest.
  • That is going to happen. The AS3 version will have less, but still some. Its what Flash does when it manipulates images.
  • Michael
    hi! thx for the coverflow... its awesome.
    i have put the coverflow together with my flash, it works fine. but, when i add a button going back from the coverflow, the pictures and the scroll is still there, but the background changes to the link.
  • Thanks for your link:)
  • help
    hello splendid job!

    but since there's only the cover title, may i know what should i do to display the artist name above the title in the coverflow? thanks!
  • felicese
    Hi,
    thanks for the great template. As a flash-rookie, I wouldn't be able to change the background to white?
    Any help would be appreciated.

    Regards
  • Eddie
    I downloaded the latest version. But i cannot find a way to make the movie in tranparent in mode. Anyone?
  • just add this line on your javascript declarion:

    params.wmode = "transparent";
  • Hexe ju
    Hi, thank you very much for this!
    But one question: I tried to put transparent pngs in, but it makes a white background where the pictures are transparent. How can I turn this of.
    I mean the CS3-Version, which runs since I have change the path to the xml-file in the fla-file in line 577.
  • Asger danish
    Hi,
    Very very usefull :-), but I have a few set backs.
    And if I find the answer (not from here, I promise to posted it)

    I'm entering the coverflow in my menu action, and I can't get the covers to wait for my signal.
    What is the name of the actual cowerflow, no problems with the scrollbar and info.

    scrollBar._visible = false;
    img_info._visible = false;
    AlbumInfo_mc._visible = false;
    ArrowBttn_mc._visible = false;

    please help
  • Geoff
    how do you change the pictures?
  • Simon
    Hello this is some brilliant coding my friend. Very smart and quite a lot of maths.

    My only question is, The code that opens the link whne the picture opens i want to change this so it opens up with a larger version of the picture.

    Heres the code;

    function updateInfo():Void {
    goto.text = current;
    img_info.author = infostruc[current - 1].auth;
    img_info.album = infostruc[current - 1].album;

    //Version 2 Addition
    img_info.artistLink.enabled = true;
    if (infostruc[current - 1].authLink == undefined) {
    img_info.authLink.enabled = false;
    } else {
    if (infostruc[current - 1].authLink == "undefined") {
    img_info.authLink.enabled = false;
    } else {
    img_info.artistLink.onPress = function() {
    getURL(infostruc[current - 1].authLink, "_blank");
    };
    }
    }
    img_info.albumLink.enabled = true;
    if (infostruc[current - 1].albumLink == undefined) {
    img_info.albumLink.enabled = false;
    } else {
    if (infostruc[current - 1].albumLink == "undefined") {
    img_info.albumLink.enabled = false;
    } else {
    img_info.albumLink.onPress = function() {
    getURL(infostruc[current - 1].albumLink, "_blank");
    };
    }
    }
    //
    scrollBar.scroller._x = scrollBarStart + ((current - 1) / (infostruc.length - 1) * (scrollBar._width - scrollBarStop));
    }

    now if i just delete this, will this compile an error or will that be fine?
  • Littlestjevito
    how do you change the pictures?
  • Frank Walsh
    your notes here say transparent png's are supported, however, when I tried to use some covers that have slightly rounded edges...via PNG transparency....it doesn't work.... possibly because the background of the image is white, and when i changed it to black...it looked like you have a white background behind the cover. Can you tell me how I can disable this in the AS?

    Thanks
  • Caleb
    Hello yet again...

    I have been looking for the code on the auto scroller

    I would like to disable this..

    i have searched for auto, scroller, scroll and i cant seem to find it

    I am looking in the javascript file or is it in the .fla file?
  • Caleb
    Hey great code and coverflow,

    Just had a few questions..

    when the album or picture comes into the centre of screen is there a way if the person clicks on that image that it will increase in size? maybe zoom into the picture a little bit and either if they click back on it or go to next picture it will go back to normal?

    thanks in advance
    Caleb
  • Yes you could do that, however I would really recommend the Flash 10 version because it has a Z position that you could animate to do what your talking about.
  • Caleb
    ok thanks for your quick reply.

    one more question... i have had some experience with AS3 and i know this will work with the z axis..

    my question is: if the person viewing the website doesnt have flash 10 version will it still zoom in. I dont mind if it doesnt look the greatest just want to know if the person can view it without the 'flash has slowed down, wish to abort?' error?

    thanks
    Caleb
  • Sadly in order for the SWF file to show at all they will have to have Flash 10. However Flash 10 is installed on 97% of computers.

    http://www.adobe.com/products/player_census/fla...
  • Caleb
    Well 94% in my country but still thats terrific news. No need to worry about that then.

    If they dont have flash player 10 ill have the link to where they can download it.

    Thankyou yet again and ill be sure to leave ur name in my comments in my html code.

    Thanks.. this is a huge help :P
  • HI Stephen,
    Thanks again for this wonderfull little program which has become a major part of my record label site.
    It took me around 2 weeks to get my head round it, but it gave me a unique in sight into how versatile flash can be; I disagree with Jobs. Thanks again(I wont forget a credit as soon as I do the page.)
  • Glad you like it!
    Yeah Flash can do quite a lot. Credit would be nice, but not required.
    Thanks for the comment.
  • FJ
    Hello everybody and thank you Stephen for this awesome application. :)

    I have a question. Is there any way to load different XML files?
    I would like to add some buttons that when clicked clear the data and art that is already loaded and load a different data from a different XML file. Let's say, I would like to have four buttons that links to four different albums of pictures and that every time I just want to see one of them.

    Till now I have tried to solve it in many ways inserting code in the function that handle the buttons' click event.
    For example, trying to delete the data from the coverArray with this:

    coverArray.splice(0,coverArray.length());

    and then call loadXML(); with a new parameter pointing to a different XML file.
    The call to loadXML works perfect but I don't know why the elements from the coverArray are just partially deleted, thus is, the currentCover plus all the covers and the titles on the right are still visible. :S

    I tried to solve it in one more way, deleting all the elements from the stage with this:

    for (var i = 0, i < _stage.numChildren(), i++){
    _stage.removeChildAt(i);
    }

    and then calling main.init() (yes, I found the way to solve the problem of calling a main class method from a child class) but it returns an error:

    TypeError: Error #1009: Cannot access a property or method of a null object reference.

    Maybe is because the stage is completely empty.

    Any idea of how can I load different albums collections from different XML files?
    I'm completely stuck. :S
    Any help is appreciated. Thanks in advance.
  • marcusbell
    Hi,
    Thank you for this magical piece of code,
    So you've introduced me to class's (I took the lesson)(although I only found access from the fla to "main.as, the others I had to load by hand) and by reading the errors I soon found a hierarchy that allowed "coverflow" to work on my desktop. changed the url,img files, etc in the xml file with dreamweaver, so far so good.
    How do I put the swf on line?
    At the moment I only get the black frame even though i respected the hierarchy, what do the index.html an .js files included in your package do??? I've read everything on your site.....honest
  • kevinfielding
    Stephen, you've got some great math in here. I am really impressed. I have been making a lot of edits to the actionscript and have run into a problem that I have not found a solution for. The images I'm putting in are high quality icons (covers) made for 180x180. I've done all the appropriate fixes and have the layout nice for displaying them, however, the horizontal border on them is skewed. Is there a render call or something of the sort I need to add? Would using the AS3 version fix this issue? (I am more familiar with 2 at the moment and haven't got around to perfecting 3 just yet)

    Thanks in advance,
    Kevin
  • Chris
    Hi, first just let me say thanks for this amazing script. I'm putting it to use or some student event type spam.

    I am encountering a bug which prevents the first "album cover" art from displaying unless there are at least 4 entries in the xml file. After the 4th entry is added the first cover art finally pops up. I should mention that the artist and album information does display - just not the associated .jpg.

    I've tried the fix that another user suggested below (changing line 18 so that deleteMaxDistance:Number = 10 instead of a variable) and played around with the actual value. Nothing seems to be working.

    Has anybody else had this problem and found the cause?

    Thanks!
  • Rostik
    i made this edit to line 220

    for (var i:Number = -1; i <= infostruc.length; i++){

    seems to work now... give it a try
  • stuartmitch
    This question seems to have been asked many times so apologies for asking it again. Is there a way to amend the reflection for use with a white background? Nothing I do seems to make a difference.

    is there an answer out there somewhere?

    Thanks ..... Scotty
  • hexe ju
    Hi, you have to change that in the .fla with adobe flash.
  • heaversm
    It'd be great to have a non-full screen version that could be easily toggled. And the ability to hide the scroller.
blog comments powered by Disqus