Flash iTunes Cover Flow

Flash iTunes Cover Flow

Hey Everyone,

Love Apple? Love iTunes? Love looking at all your albums in your iTunes in a sense of accomplishment. Now you can do it in flash. Great way to show off those piece of work or just have a photo album. I hope someday someone takes this and hooks it up with an API to some music service. That would be amazing. Anyways here is the example and then the code below.

Flash iTunes Coverflow Screenshot

Have fun and make it better.

[UPDATED: Version 2.0 Available ]

Example:

Example

Source:

Full Source

License: Free To Use, Distribute, Modify for Commercial Use or Anyother Use. Just improve on it and post on the comments your improvements. If we all make it the best piece of code possible then we all win.

Notes: AS2 is not at all effecient at faking 3D or using Bitmap, however AS3 is MUCH better at it. If you don’t like the preformance of this AS2 version I would suggest using any of the AS3 versions available for free.

  • kushagra
    thanks for your great Component.
    how can we do one thing that when we reached our player to last image so after last image first image should be attach.i mean to say i want to convert this player to endless image slider with your all functionality
    ....
    plz help me
  • kanyal
    Hi Guys
    i like this work, good effort. i have question? i want want to use it as external swf loaded in another swf and want to place this coverflow in some top area and when user click on front image i shall show him a large view of that image and its detail in bottom area. i.e there i divided my screen in 2 parts, top area for coverflow and bottom for its detail and large view. cover flow will be added as child of a movie clip not on stage. how can i do that because i try this and coverflow is using stage as reference that puts it on whole stage. hope you people will get idea what i want to do. i want to make coverflow not dependent on stage (i.e want to make its use in other swf not as standalone).
    Regards
    kanyal
  • ladav
    It's great!!
    But i have a problem..
    The font-size is too small and i want to change it.
    How can i do this?
  • dilbert_dogbert
    Many thanks for your work. It's great.
    I just want to add something on it. I want to add a href link to the front item in order to be able to click on it and follow an hyperlink... Where can I do that in your flash template ?

    Many thanks in advance.
  • rojan123
    I really like your cover flow .I want to change its position to verical from horizontal
  • YellowFrog
    Hello,
    Great code, thank you

    I just want to be able to call a function when the front image stops.
    So i can attach another Movie over it with some animation can please helpe me.
    Thanks in advance
  • pdbethke
    How can I change the color of the album info text?
  • automaticben
    nice bit of flash work there!
    have you by any chance done a vertical version or is there a fairly easy way to convert this to vertical cover flow?

    cheers!
  • felipegm
    Is there a way to make the clicked cover to stay in place? I´ll have a limited number of covers, so to fill all the screen width. Is there a way to make the cover just to rotate and distort, but not move?
  • squiggy151
    I like the coverflow for what it does, but can anyone help me to solve a little problem.
    Using the coverflow idea I want to be able to use it to reference (load) a specific document in the same webpage. Example: I have a 4 div page that floats and resizes to the users screen resolution. I want to put the coverflow in my leftnav div and have it open its links in my content div. Does anyone have a clue as to how accomplish this task. Thanks for any help you can give in this matter
  • wsterling
    Sounds like you want to talk from flash (coverflow, leftnav) to another HTML or Flash div. If, for example, you have a coverflow of thumbnails, and clicking on them opens a larger version in the center <div>. You need to use javascript to communicate from flash to the target div. Using the prebuilt getURL will not target a div on the current page. You could, however use an iFrame and add the name to the getURL.

    Ex:
    getURL("http://mydomain.com/image.jpg", "iframeName");

    Otherwise, you need to use the ExternalInterface class to call a javascript function that communicate to your other <div>.

    Example using Flash ExternalInterface:
    import flash.external.ExternalInterface;

    ExternalInterface.call("javascriptFunction", "param1","param2");
    /*This calls a function "javascriptFunction()" on the HTML page, passing 2 arguments. These arguments could be "image" and "div". */

    your javascript could then take this and either swap image.src or change an element's class... at least you can now target the div you want to update.
  • Anniecounie
    Thank you! But the gallery not load in Firefox, why?
  • wsterling
    We needed the ability to skip through the flow to a certain 'category'. Our elements are arranged by 'color' and through javascript, you can click on a color and the coverflow will skim through until it finds it. The coding is pretty simple since the functions are already there:

    In Flash:
    First, import the externalInterface class:

    import flash.external.*

    Second, create a new function, and register it:

    var connection = ExternalInterface.addCallback("jumpTo", null, jump);//registers new function.

    function jump(mySlide:Number):Void {
    current = mySlide; //set current slide to be the one to jump to
    updateInfo(); //This performs the flip
    }

    Now, the Javascript:
    <script language="javascript">
    //Function to target Flash object:
    function getFlashMovieObject(movieName)
    {
    if (window.document[movieName])
    {
    return window.document[movieName];
    }
    if (navigator.appName.indexOf("Microsoft Internet")==-1)
    {
    if (document.embeds && document.embeds[movieName])
    return document.embeds[movieName];
    }
    else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
    {
    return document.getElementById(movieName);
    }
    }

    function jumpFlash(slide)
    {
    var flashMovie=getFlashMovieObject("myFlashID");//stores a reference to flash obj. **"myFlashID" needs to be the same as the ID and NAME tags set inside the <object><embed>.
    flashMovie.jumpTo(slide);//calls the actionscript method
    }
    </script>

    That's it for the functions. You just need to make sure you add the id and name tags inside the <object> and <embed>. Also, if it isn't set already, you'll need to set the swLiveConnect="true" inside the <embed>.

    Once you've done this, in order to call this method, just add an 'onClick()' to any link:
    <a href="#" onClick="jumpFlash(11)">my link

    The example above with send coverflow to the 11th slide.

    This still pretty slick! Thanks for the app!
  • phoebe14
    this works great in IE!

    Would love to get some feedback on how to do this in firefox. Thanks
  • tarneem
    i like it so much
    but i want to ask if i can linke the image to open in lightbox and how can i do this?
  • sadie11
    Is there a way of connecting the images to a URL so when the user clicks on it, it opens up a new page? I've been looking through the coding and i cant seem to figure it out.

    Anyone know how? would be really thankful, doing it for my web design project in ICT :)


    Sadie.
  • wsterling
    The XML provides 2 opportunities to add the link. The authLink and albumLink tags. Inside Flash, you can tell the img_mc to use one of these links. Look for the function "controlTheObject(mc)". Inside here you can change the "getURL(infostruc[current - 1].albumLink, "_blank")" to point to authLink instead. Or, if you are familiar with XML and Flash you can add to the XML to be the artwork link.
  • arunsameer
    hi wsterling My name is Arun I a bignner in scripting, i found "controlTheObject(mc)" inside that i written get url code but in some cases gettin error check the internet adress in some cases nothing getting loading normal scrolling plz help me. tell me the full code and sorry for my poor english
  • wsterling
    arunsameer, it sounds like your issues may be with the XML rather than what is going on inside flash. "check the interent address" sounds like the path (link) you're setting in the XML is incorrect so Flash doesn't know what to do.

    The image, the album and the author all have getURL()'s attached. If you are having problems loading images or links not going to the right place your links might not have the correct skope. Make sure everything is coming from where the Flash is located, not the XML.
  • arunsameer
    hi wsterling i need scripting for video or flv player it should be just like youtube and overlay links also is it possible in actionscript if yes tell were cal i learn or get those actionscript. plz help me to learn and thanks in advance.............
  • arunsameer
    Thanks Wsterlink yeh problem with Flash scripting i got it now thanks for your reply and answer
  • Thiago Vidal
    hey there's one way to make the reflection goes to alpha? I wan't to use a bitmap background and the reflection color make things uglier. Help please.
    thiagovidal@gmail.com
  • Hi, thanks, I found out how to change the reflection to white, or another color, in lines 35, 49, and 50 of the code on frame 2, by changing the color value to 0xFFFFFF. Thanks!
  • Hey this is great! thanks!
    I want to do one with a white background. I changed the movie background color to white, but the reflections are mixed with black. Is there an easy way to change the reflections to mix with white instead of black?
    Thanks!
    mn8multimedia.com
  • girish
    hey is there any way to use this class without xml
    means i want to apply this effect on images which are in library of my .fla
    so that i can load them on runtime
    thanks and regards
  • d
    I'm getting my stride in flash, so i can make some edits. If i have a bigger page, how can I make the album art itself bigger?
  • d
    got it: edit stage size, scene1 actions frame 2 & size of movieclip default

    action script now starts with:
    /*/
    iTunes Album Art Viewer
    /*/
    import flash.display.*;
    import flash.geom.*;
    import flash.filters.*;
    //Change these values below to customize the viewer fuctionality
    var root:MovieClip = this;
    var myMO:Object;
    var myKO:Object;
    var loadedAll:Boolean;
    var distance:Number;
    var autoJump:Number = .15;
    var maxSlide:Number = 100;
    var deleteMinDistance:Number = 0;
    var deleteMaxDistance:Number = 500;
    var doubleClickRegister:Number = 500;
    var frontCDWidth:Number = 300;
    var frontCDHeight:Number = 300;
    var shelveCDHeight:Number = 240;
    var shelveCDWidth:Number = 80;
    var shelveCDSpacing:Number = 50;
    var centerDistance:Number = 50;
    var albumEase:Number = 4;
    var angle:Number = 8;
    var fadePoint:Number = Stage.width;
    var fadeDist:Number = 200;
    var current:Number = 1;
    var centerX:Number = Stage.width/2;
    var centerY:Number = 180;
  • Charley
    Thank you very much for this very good work !

    Now, seemingly like several people here, I'm looking for a way to get a link to url or load swf files when we click on the front-thumbnail.

    Thanks for helping us !
    Cheers.
  • So there are several ways to do that. You can place a getURL code to open a new page or call a Javascript function (for Thickbox or something). What you need to do is on the on press function for the movieclip container (line of code looks like this "mc.onPress = function():Void {" ) you need to do an if statement to check and make sure that the selected movieclip is the one that is clicked on. You can do that by checking the value of the "current" variable. If they are the same value then do a getURL command.

    Hope this helps and hope you all like the new commenting system. I think it will help everyone communicate better.
  • Charley
    Thanks very much Stephen !
    I tried to do a getURL command just after the only "mc.onPress = function():Void {"line I found (L.312 of the code) it works ! but it works even if we click on the others thumbnails, actually I wanted to open a new window only if we click on the one in the middle.
    I'm not sure to well understand if I have to found a code for:
    "do an if statement to check and make sure that the selected movieclip is the one that is clicked on. You can do that by checking the value of the "current" variable" and if it's THE solution of my pblm.

    Actually I'm a beginner in translating code, I know how to do a getURL command but nothing more complicated (I'm a bit ashamed). So if you don't mind, could you give me a piece of code or could you explain how to write it. I'll appreciate it very much !

    That right the new commenting system is pretty cool !
    Bye
  • Well I would definitely recommend learning some conditional logic in Actionscript to help you on this. However since this feature has already been added into the version 2 of this coverflow I would check that out and hopefully it will save you some time. The feature you want is on line 364-366 on Version 2 of this code. Good luck!
  • Charley
    Thank you very much !
  • eric
    Is there anyway to to just add
    class="group"
    to the link in flash? Adding the class="group" to any link would initiate the fancybox...
  • Haha. No there is not. You need to make a JS function that you call to trigger the fancybox to open. The flash code would look something like this getURL("javascript:openBox('image.jpg')"); where "openBox" is the function and 'image.jpg' is the path to the image to open.
  • eric
    anyone know how to add a css class to the link in flash (or on the xml)? trying to get this to work with either fancybox or lightbox, so when it is clicked it will open a window powered by fancybox with content
  • Use getURL to call a JS function to open your fancybox, lightbox, thickbox or any of those boxes. :-)
  • Mona Reilly
    wonderful thanks a lot!
  • looks great! but how can you load swf files to the album cover? lets say i want something animated?
  • this effect is very good for navegation, thank you for download. bye!
  • Dickson Ding
    Me too having problem when displaying small amount of pictures (say 5 pictures)...

    i have check the code, no LoadError, onLoadInit execute with no problems...

    if i put the number of pictures more than 5 (say 6 pictures), then it will display correctly...

    Had any one discoverd this problem?

    TQ
blog comments powered by Disqus
Get Adobe Flash playerPlugin by wpburn.com wordpress themes