Open Source Thought

Flash 10 Coverflow

Posted by Stephen in Featured, Flash, Flash 10 | View Comments

Flash 10 Coverflow

Dec 16, 2009

The last version of the coverflow was made several years ago and its still quite popular (over 700,000 downloads on just version 2). So I decided to make a new version, this new version takes advantage of the new Flash 10 3D capabilities, which is perfect for this particular use. It allows for the Flash to load faster (because its not using Papervision3D) and most important preform much faster. Now users can add a lot more items to the coverflow and still have very snappy performance.

Here are the benefits over the previous coverflow version:

  • Improved Preformance
  • Faster Load Time
  • Easy Modification through XML
  • AS3 Standardized Code
  • Easy Class Structure

And of course you still get many of the benefits of the last version, such as the XML Based (Images, Links and Titles).

I have recently updated the code to help people that are not so familiar with Flash, but still want to use the code. I have included a few flash vars, if they are not provided there are defaults in the code. Here are the flash vars:

flashvars.xmlPath = “xml/data.xml”;
flashvars.backgroundColor = “0×000000″;
flashvars.labelColor = “0xFFFFFF”

“xmlPath” is the path to the XML file.
“backgroundColor” is the color of the background.
“labelColor” is the color of the text label in the middle of the coverflow.

So please download it, play with it, make it better and post your code in the comments to help everyone out. Lets make this piece of code the best it can be!

View Demo

Download Flash 10 Coverflow (9030)

NOTE: I would not recommend trying to learn flash with this file. There are a lot of people asking how to change text color, if you are having these requests I would suggest going through some Lynda.com Flash tutorials to get you familiar with Flash or hiring a Flash developer to help you out.

Hope you enjoy and post additions you would like on the next version (I’m thinking of video handling).

  • Paroled
    Hi.
    First of all... Thanks for your work!

    But i have a problem and cant find a reason for this - if i open index.html the coverflow is showing and all seems to work, but if i upload this to the webspace, i cant see anything?! i installed flashplayer 10 several times but no help, i tried to open the site with different browsers but every time the same
    is there a requirement for the webspace to bring it to work?

    thanks


    pls forgive my terrible english ;)
  • If the images are hosted on another server than the server hosting the images has to have a crossdomain.xml file. There have been lots of comments on this coverflow where we talked about this so look through the comments if this is the situation.
  • Paroled
    thanks for reply!

    i have uploaded the hole unzipped package in a test folder on the webspace and at the moment the images not changed so the original images still in the images folder like the coverflow package - so all files are on same server
  • Are the image locations relative or absolute? If they are relative, check that the path is correct. If your not sure then put it absolute and if that works then the path was not correct relative.
  • Paroled
    ok, i checked out that i have to upload the package in the root of webspace or i have to add the folder in the links in index.php - sorry now i added a subdomain for testing^^

    but now comes the next problem - i only can see the download image "Get Adobe Flash Player"... i have installed the flash player 10, i have installed adobe flash cs4 also and it works on local system - i am confused
  • Paroled
    OK, now i am absolutely confused... i have to add the hole url: with http://www.tattoo-freun.de/old/

    i worked on webpages first time at 2001 and i never had to link inside a webspace with the hole url - i am so sorry to annoy you!!!

    thanks for this wonderful program!

    now i can test last functions i added (import and administration script for images with webinterface) but it seems to work like i wish, so now it comes the finetuning :whistle:


    regards Paro
  • Hi. This cover flow looks, and operates great.

    I was hoping you may be willing to give me a tip with an edit I have. I need to add a navigation under the coverflow. I am using 7 covers. There will be 7 buttons placed under the coverflow, and when someone hovers over a button, the cover flow jumps/animates to the corresponding cover. Do you have any guidance you can offer me?
  • Radovanmail
    hi
    thank you for your work.
    i have two question

    i want change position for slide and i would like delete scrollbar completly.
    thank you
  • A wonderfully clean and simple implementation. Thank you so much for sharing this (and for not filling it with spaghetti code).
  • Nice! vey good for my project, thanks!
  • Sreelash S
    Hi, First of all thank you very much. Its really looks great. I have downloaded the two versions of Coverflow. In the latest version(Flash Player10), when i load different sized images, the image is displaying in its actual size itself. But in the earlier version(CS3), the resizing of images works well. Issue that i found with earlier version is when less than 6 images are loading, the first image is not displaying. How can i solve this problem?

    Regards,
    Sreelash
  • Solange Molina Urrutia
    excelent!
  • Rafael
    Hello Stephen,

    you've made a great a job!!

    Just one like bug: you added the functionality to be able to config form _level0 the xml path but you forgot to parametrize the request:

    Coverflow.as
    Line 236: coverflowXMLLoader.load(new URLRequest("xml/data.xml"));

    Anyway... great job!!

    Rafael
  • kuldeep shah
    Hello Stephen Weber,

    you did wonderful implementation for coverflow. I gone through each class which you have made for coverflow. I have some query in this coverflow you may help out to solve this.
    I want to sift coverflow always in center when resize the stage dynamically.
    function in main.cs
    ===============
    private function resizeMe():void {

    //No Resizing for This
    if (stage != null && coverflow !=null )
    {
    coverflow.sw = stage.stageWidth;
    coverflow.sh = stage.stageHeight;
    coverflow.centerX = stage.stageWidth >> 1;
    trace("coverflow.centerX" + coverflow.centerX);
    coverflow._stage = stage;
    coverflow.resetData();
    coverflow.reOrderCover(coverflow._currentCover);
    //coverflow.loadCover();
    trace(coverflow._stage.stageWidth);
    }

    }

    function in coverflow.cs
    ====================
    public function resetData():void{
    for (var i:int = 0; i < coverflowItemsTotal; i++)
    {
    var cover:Sprite = coverArray[i];
    //trace(cover.getChildAt(0));
    var coverItem = cover.getChildAt(0);


    coverItem.padding=padding;
    coverItem.imageWidth=coverflowImageWidth;
    coverItem.imageHeight=coverflowImageHeight;
    coverItem.setReflection(reflectionAlpha, reflectionRatio, reflectionDistance, reflectionUpdateTime, reflectionDropoff);

    coverItem.x=- coverflowImageWidth/2-padding;
    coverItem.y = - coverflowImageHeight / 2 - padding;
    cover.addChildAt(coverItem, 0);
    coverArray[i] = cover;
    }


    }


    this did not work proper, I tried lot to resolve it. but not getting.
  • Find the width of the object (in this case the coverflow) and then put this into your resizeMe:

    (stage.stageWidth/2) - (coverflow.width/2).

    That should center it. Make sure it has a reference to the stage.
  • kuldeep shah
    Hello stephen,
    after a long strugle.. i found the solution..
    private function resizeMe():void {

    //Update Perspective Point of stage
    var l_oPerspectiveProjection:PerspectiveProjection = this.transform.perspectiveProjection;
    if(l_oPerspectiveProjection==null){
    l_oPerspectiveProjection = new PerspectiveProjection();
    }
    l_oPerspectiveProjection.projectionCenter = new Point(stage.stageWidth/2, stage.stageHeight/2);
    // p.fieldOfView = 40;
    this.transform.perspectiveProjection = l_oPerspectiveProjection;

    //align the X and Y of Coverflow.
    coverflow.x = (stage.stageWidth / 2) - (coverflow.width / 2);

    }

    we have to update perspective projection point.. the view port of the 3D dynamicall..

    hope you like the solution

    Thank you,
    kuldeep
  • kuldeep shah
    Thanks for quick reply, But still the same... its not working proper..
    coverflow.x=(stage.stageWidth / 2) - (coverflow.width / 2);
    you may try this in your code and take a look.. :(

    private function resizeMe():void {

    //No Resizing for This
    if (stage != null && coverflow !=null )
    {
    coverflow.x=(stage.stageWidth / 2) - (coverflow.width / 2);
    }

    }
    Still i am not getting to it that why its not working. it should but its not..
  • Funkwarrior
    Hello and thank you for this useful class!
    I've a question about how manage this class. I'm trying to integrate this class in a Gaia Framework page.
    In the example you provide, the document class extend the Sprite classes. But in my case, the document class of Gaia Page already extend a Gaia Class. here's the code: http://pastie.org/985412
    Can you help me to understand how to use your coverflow class in this case?

    Thanks a lot!
  • Make the document class just the class for calling the coverflow. Just attach the class to a MovieClip (which will turn into a Sprite) and then place that on stage.
  • Sorry Stephen, but I don't understand very well.. (shame on me)
  • You can either use my document class as a normal class and call it in your document class or you can simply take the code in my document class and call it in your document class.
  • Thanks a lot Stephen! :)
  • FJ
    Hi everybody and thank you Stephen for this awesome program :)

    Here is a question: Is there any way for loading different XML files on the same stage? For example, let's say that I have 4 albums with pictures, one from the Summer, one from the Autumn, one from the Winter and one more from the Spring season. What I would like to do is to add 4 buttons (with their corresponding events) that when clicked, load different XML files, with the contents or those different albums. And every time I just want to see one album of pictures, I don't want to put all the pictures from different albums together.
    I have spent long time trying to figuring it out by myself but I'm completely stuck. :S

    For example, I tried to delete all the elements from the coverArray with:

    coverArray.splice(0,_coverArray.length);

    and then call

    loadXML(DifferentXMLfile);

    but there is always data left in the coverArray that is not deleted (I think is the currentCover and the rightCovers). :S

    Because that didn't work I tried other approach, deleting all the children from the _stage:

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

    and calling again Main.init(); (yes, you can't call main function class from a child class but I read this:
    http://www.alessandromastronardi.com/en/?p=296
    and I solved it) but now I'm getting a
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    error, probably because the _stage is completely empty. :S

    I hope someone knows how to load those different XML files on the same _stage.
    Thank you in advance. :)
  • steph_graham
    Also ... I don't want the thumbs behind to be on an angle ... fussy aren't I?
  • steph_graham
    Thanks for making this available.

    I have a couple of problems however :)

    1. I want to reposition the text
    2. I want to reposition the slide show on a larger movie stage
    3. The thumbnails are appearing larger than they should be (441 x 318) and blurry. I have set centerCoverflowZPosition="0" which helped a little but still something going on.

    thanks in advance for your help.
  • 1. You can do that just by opening the file and moving the text field.
    2. Increase the stage size or put it in another flash file. Then adjust positioning.
    3. Flash 3D does make images a little blurry. There are some articles on the internet about how to avoid this, check them out.
  • steph_graham
    thanks so much for your reply.

    With adjusting the position of the thumbnails, I want to move them to the right. Do I do this in the movie or in one of the external scripts?

    I also want to reduce the space between the main thumbnail and the ones behind it.

    Thanks for your help :)
  • stuartmitch
    Sorry if I have missed something here but I can't seem to be able to change the background colour. Have altered flashvars.backgroundColor to white in index.html but it remains black whenever I play the swf.

    Any suggestions to help me please.

    Cheers....Scotty

    PS Great work. Thanks for making it available to all of us who would not have a clue how to do this.
  • luciadossin
    Now, just found out what the problem with z property was... My test file, built only for testing purposes, was published for FP10 (that's why I did not have any errors). My 'real' file was published for FP9 (it was originally made in CS3). That's why I got errors in one but not in the other.
    Now everything is ok!
    Thanks for sharing, Stephen!
  • jobroyer
    Hello luciadossin,

    did you manage the external.swf ?
  • luciadossin
    Hello jobroyer,

    yes, I did, but strangely enough now there's a difference in the simple file I used to test it and the 'real' file in my project. I now get errors related to the z property (first I got error 1056 and now another one). This errors do not occur in the simple file used for testing purposes, only in the file I'm building for my project. I am trying to solve that but still did not manage.

    The structure is the following:
    on the main.fla file, I have a button (btn) and a movieclip containing a loader (sectionLoader_mc.sectionLoader). And I also put this code on first frame:

    btn.addEventListener(MouseEvent.CLICK, loadContent);

    function loadContent(e:MouseEvent):void{
    sectionLoader_mc.sectionLoader.load(new URLRequest("external.swf"));
    }

    Inside the sectionLoader_mc movieclip I have the following code:
    var sectionLoader:Loader = new Loader();
    addChild(sectionLoader);

    Then, on the external.fla, I have the following code on first frame:
    var coverflow:Coverflow = new Coverflow(900, 400, stage);
    this.addChild(coverflow);

    Originally, the creation of a new Coverflow instance was made in the Main.as, which was the Document Class for the main.fla file. I did not use that. Instead, I created a new instance of the Coverflow class with the lines above.

    Hope that helps!
  • jobroyer
    ...and did you have a scrollbar?
  • jobroyer
    Hello,

    could you explain the following "I have a button (btn) and a movieclip containing a loader (sectionLoader_mc.sectionLoader). " ?!
  • luciadossin
    Hi jobroyer,
    yes, I used the same scrollbar provided in the original files.
    As for the explanation, I just tried to describe a bit better the code... The button btn listens to a click and then triggers the function that loads the external swf.
    The external swf is loaded inside the movieclip that's called sectionLoader_mc.
    Don't forget to remove the Document Class (Main) if you're using the original Main.fla file. (You can do that in the Settings).
  • jobroyer
    I made the changes as you described. Now it works. Thank you:-)

    But I have one little problem now: I have no scrollbar. When I export the original FLA-file you get one in the .swf.

    You wrote you had one. Do you have an idea what is wrong ?

    jobroyer
  • luciadossin
    Hi jobroyer,
    sorry, I don't have any idea why the scrollbar is not showing...
    I used the scrollbar provided in the original files, and did not change anything regarding that.
  • jobroyer
    Hello luciasossin,
    do you have a scrollbar in the SWF just when you export it in Flash or do you have a scrollbar in the embedded file (index.html + swf.) ?
  • luciadossin
    Hi jobroyer,
    scrollbar appears in both cases for me. I did not change anything regarding that, I used the scrollbar as originally provided by Stephen.
  • luciadossin
    Hi,
    Has anyone ever used this as a loaded .swf?
    I have made all the customizations I need fo my project and it worked just fine. But I need to load it as an external .swf and then nothing works. I suspect it has to do with 'stage' definitions, but I'm not sure of that - and neither of what exactly i should do in order to change that and make it work.
    So, if anyone has any clue, I'd love to know.
    Thanks!
  • Instead of stage use some other reference to the area.
blog comments powered by Disqus