Yet Another Coverflow using Papervision

By BylineJohn Dyer on

UPDATE: Now uses Papervision 2.0 Alpha (GreatWhite). 

There are a million Apple Coverflow knockoffs (blitz, doug mccune, antti kupila, weber design) and now there are a million and one. This one is made using Papervision3d and Tweener and includes keyboard and scrollwheel support. Here are two uses, one pulling from a friend's Flickr photo stream, and the other pulling from DTS's recent media items:

 

This uses the Phunky GreatWhite branch of Papervision (1.9 or so 2.0 Alpha). Here's the setup: 

var coverFlowData:Array = [{title: "item title", clickUrl:"http://mysite.com/target", imageUrl:"http://mysite.com/image.jpg"}];
var coverFlow = new CoverFlow(stage, camera, scene, coverFlowData);

And here's the project (for Flash CS3): coverflow.zip (16.21 kb)

91 thoughts on “Yet Another Coverflow using Papervision”

  1. I used the following lines to setup your CoverFlow file with Phunky branch of Papervision 1.9:
    var coverFlowData:Array = [{title: "item title", clickUrl:"http://mysite.com", imageUrl:"ImageFlow/pic/1.jpg"}];
    var camera:Camera3D = new Camera3D();
    var container:Sprite = new Sprite();
    var scene:Scene3D = new Scene3D(container);
    addChild(container);
    var coverFlow = new CoverFlow(stage, container, camera, scene, coverFlowData);
    but I get the following errors:
    DisplayObject3D: null
    DisplayObject3D: null
    Papervision3D Beta 1.9 – PHUNKY (20.09.07)
    DisplayObject3D: null
    0: 5
    DisplayObject3D: null
    TypeError: Error #1010: A term is undefined and has no properties.
    at com.webeyestudio::CoverFlow/::shiftCoverFlow()
    at com.webeyestudio::CoverFlow/com.webeyestudio::imageLoaded()
    Can you suggest any solution to solve the problem I am having?

  2. @umer,
    I just updated the download to include a full project instead of just the class, so you can see how it all works. It includes parsing the RSS feed from flickr.

  4. hi there!
    as i tried to start the coverflow from the .fla in the zip,
    i got some errors, i´m not quite sure how to manage them.
    as far as i see, there is a problem with the AS3 Tweener Class I installed:

  6. Hi, great job man!
    First of all i’d like to thank you for the code, is really cool.
    I m trying to implement it, but just can’t make the InteractiveScene3DEvents in the planes work. I wonder if you could help me with that.
    P.D: I am using PHUNKY (20.09.07)
    Thanks in advance.

  7. Hi !
    First i’d like to congrate you for your great work ! But i’m such a noob in flash and i’ve tryed severals times to made your coverflow working with my flickr ID but i got 3 errors when i compile my .fla
    I think i’ve got trouble with tweener but i don’t know how to use it, could you please help me
    thanks Fab.

  8. Hey man — great work! This looks to be the best CoverFlow component out there yet. The movement is very smooth. Have you looked at killing the unnecessary idle time rendering as done in Doug’s implementation?
    ~ Chris

  9. @fabien, you might want to check that the paths to Papervision and Tweener are setup correctly for your site.
    @Chris, for one implementation I did add some code to only render when there is movement. Perhaps I’ll update the source for PV2.0

  10. Hi,
    your cover flowrocks! And reading this article I discovered both papervision and tweener… awesome stuff, thank you.
    but…
    I have a little problem, when i try to use you .fla, after the installation of papervision and tweener, I get this errors that I can’t fix ..
    ten error with this description

  11. @K, looks like your comment got a little messed up. Sorry about that.
    As for the Phunky branch, it has been discontinued in favor of PV2.0 which is currently alpha. I need to update my stuff to see if it works with PV, but I might wait until it’s more stable.

  12. I’ve been looking around for an AS3.0 cover flow and yours is by far the best so thank you very much for sharing your code. However, I am having a couple problems getting the code to work on my cpu. Here are the main errors I am getting…
    CoverFlow.as line 168: planeMaterial.interactive = true
    CS3 doesn’t recognize the interactive property of PV’s BitmapMaterial
    CoverFlow.as line 218: if (!showReflections || ev.y <= ev.displayObject3D.extra.height )
    CS3 doesn’t recognize the y property of PV’s InteractiveScene3DEvent
    FlickrFlow.as line 59: scene = new Scene3D( container, true )
    CS3 expects one argument where you give Scene3D two arguments
    I am using PV 1.5 and Tweener 1.26.62 both from code.google.
    Help would be greatly appreciated, as I am doing my best to learn the PV class.

  13. @Bryan, this coverflow was created under Papervision 1.9 (Phunky). Unfortunately, the code for "interactive" changed a lot between 1.0, 1.5, 1.9 and now 2.0. I would recommend upgrading to 2.0 (using SVN). I updated my code to 2.0 and I’ll post it soon.

  17. Great work,
    Having trouble finding how the scrollbar works. no scrollbar is defined
    in the call to GenericScrollbar(_stage, scrollbar, scrollbar);
    Thanks

  18. hey. i a very small amount of flash knowledge. i’d like to post a flash cover flow of some images i have.. i like the one you have here on your site, but i’m not exactly sure what i have to do in order to do that. could you help me out? thanks for your time.

  20. If you change the size
    CoverFlow(stage, camera, scene, coverFlowData, true,390,325)
    (instead of 240/200) the clipping is horrible.
    Any ideas how to enable a larger display of items?

  21. Nevermind – it’s a fault of PV3d, not the script..
    If you increase the size of the items, of have more items on the stage at once (say 1400pixels wide) then you get clipping..
    When I ported this to flex I got clipping from about 6 items left and on, and 6 items right and on..
    The fix is to move out (decrease your Z-index value) and zoom in with the camera (like a zoom of 4 and a z of -700)

  22. @Dan, thanks for the updates. I noticed something like this as well. It also seems to differ from PV 1.5, 1.7, 1.9, and 2.0. I’m glad you found a good solution. Also, you could try increasing the number of triangles for each image…

  23. John,
    This is awesome stuff but it seems like there is a problem with the eventListener added to the plane. Sometimes it doesn’t register a click at all and other times it will send me back the wrong index. I noticed you have the same problem on the two examples you posted so I’m wondering if this is a problem with papervision 2.0.

  24. @James, I think it’s a problem with PV2.0. I still have the PV 1.9 code lying around and it worked perfectly, so I need to get around to releasing it sometime.

  25. John, Thank you so much for the quick reply. I appreciate you making this open source. When you post the working 1.9 code, you will without a question have the best flash coverflow option on the internet.

  26. John,
    I’m very interested in using this coverflow in a website my department is working on but as other forum posters have already found, the 2.0 is a little finicky. I was just wondering if posting the 1.9 was anywhere on the horizon.
    Thanks,
    Jorge

  28. I really love this CoverFlow… It’s very smooth, in contradiction to most others.
    The only problem I had was trying to put it on a white background, but after a moment of changing and trying i finally found a way to make non greyish reflections.
    You should add transparency. I made it work with transparant images, as you would normally see the gradient over other images, and it looked quite nice (www.helphettoneelstuk.nl/links).
    Thank you very much, for this wonderfull CoverFlow (for which I had been looking quite some time)

  29. hi,
    verry nice work!!
    where do i have do change the paths to PV and Tweener?
    thx 4 answer
    sebastian

  30. @Sebastian, Open the .fla file and go to Properties and click the settings button next to the Actionscript version dropdown. You can also do this at "Edit > Preferences > Actionscript > ActionScript 3.0 Settings"

  31. Very nice script but 2 question :
    where are the images (covers), how define it
    How integrate the SWF to a simple web page ?
    thanks

  32. Very nice coverflow 🙂 One of the most ‘apple like’ 😀 But hey… Could you explain me how to use this 😀 ? I’m a noob in flash and just dunno what to do… How to put images? How to get this thing working 🙂 What to do if i want to open a bigger version of image when clicking on a cover?
    Thanks 4 answer!!

  35. Hi John, i succed in custom your coverflow and integrate it on my future website project, it’s excellent ! but there is one problem, the fact to click the on left or on right cover with the mouse don’t work everytime, it don’t scroll and move the wanted item and center it, sometimes it work when click on scroll bar or use keybord arrows but not everytime, i have PV2.0 like u said and tweener and right configured the AS files source, so i have made my own searches, look papervision as files and haven’t find why i do it, but i’m sure that it’s happen hre, on CoverFlow.as file, under the mousedonwHandler private function :
    var index = viewport.hitTestMouse().displayObject3D.extra.planeIndex;
    please tell me more, thank you very much, very nice script, apolozige my speaking.

  36. your example is cool…thanks for providing the code.
    I’m having problems though: the coverflow shelf can’t seem to be able to stick to the center of the screen and it always loads and displays in the bottom right corner..
    (I’m new to Papervision3d) I tryied moving the camera, moving the scene, moving the viewport, adding them to a container e and move the container…but I couldn’t make it mode from the lower right corner
    I used the greatWhite branch
    do you have any tips on how one could center the shelf?
    any documentation on what the viewport3d does? how is it different from the scene?
    thanks alot anyways

  37. Hello, John. Splendid piece you have here. I would like to use this on my websites, but I don’t know beans about Flash (I have vCS3, however). If there is a tutorial available for nooblings, or an IRC chan, or something, google hasn’t come up with it. So, um… help? I need help with what elements of GreatWhite to download and where to put them, where to put the Tweener files, and how to edit the AS’s and FLV to have my pictures show (that might be all, but I don’t know).
    Thanks in advance

  39. I got a bunch of errors. Possibly somebody could help.
    I am a Newbee to Papervision, but "Yet Another Coverflow" is perfect! 🙂
    I really want to get it work.
    I used TortoiseSVN to get the latest Papervision-Repository 442.
    Then i configured Actionscript3.0 path to \branches\GreatWhite\src.
    Tweener Class i put to \en\First Run\Classes\FP9.
    ——
    Occouring errors are: [b](CoverFlow.as)[/b]
    [b]Line 177: 1119:[/b] Access of possibly undefined property interactive through a reference with static type org.papervision3d.materials:BitmapMaterial.
    [b]Line 229: 1119:[/b] Access of possibly undefined property y through a reference with static type org.papervision3d.events:InteractiveScene3DEvent.
    [b]Line 313,326,337 1120:[/b] Access of undefined property Tweener.
    [b]Line 29 1172:[/b] Definition caurina.transitions:Tweener could not be found.
    —-
    So i change AS3 classpath to \as3\trunk\src… this i’ve read anywhere i think in the papervisionwiki…
    Only one Error occours:
    Line 67 1046: Type was not found or was not a compile-time constant: Viewport3D.
    I really would but can’t help myself.
    I would really happy if somebody of you could help a little…
    Sorry for my bad english, it’s been years ago i spoke the last english word….
    Thank you.
    Chris

  40. hey John, great thing you created here!
    but I found the same bug as nono (earlier comment)….clicking on an item (image) doesnt always work…I found a way to reproduce it: fire the thing up, then click ABOVE the items in the ’empty black area’….then try clicking an item again and it won`t work…I tried to fix this myself but haven`t been succefull (yet!) and hop it is easy for you to fix….I will keep trying though and if I succeed I`ll be sure to post a comment here!
    thanx John,
    greetings!

  41. Hi John,
    Thx a lot for your great job, really huge !
    But like some others here, I can’t have the click work each time on the pictures… 🙁
    I’ve spent hours tryin’ to fix it but without any result… 🙁
    The only thing I found out is that the clicks work when I comment out this line :
    "if ( !showReflections || ev.y <= ev.displayObject3D.extra.height ) { "
    If it can help…
    Still workin’ on it, I’ll let you know if I find any solution…
    Take care.
    Charly

  42. @charly: unfortunately that doesnt solve it…..when you read my comment and follow those ‘instructions’ you`ll see it still doesnt work
    if the whole thing works from the start seems to depend on where you have your mouse pointer when you export the movie (i do this in my flash IDE with <ctrl><enter>

  43. John, that’s beautiful.
    I’m new to actionscript and wondering how I can use this coverflow to load local images.
    Thanks alot,

  44. first of all, thanks for sharing this great piece of work. I first had the ‘cant click’ problem, but found a workaround for that issue.
    Now I lost my head while trying to figure out a procedure to ‘reset’ the coverflow in order to reinitialize it with a different array of pictures. The problem is -and it cant be a big deal lol- I dont really get to remove the created scene / planes / objects from the stage before the reinitialization…so it places a new (working) coverflow on top of the existing items in the scene / viewport. Any help on the on the ‘removal’ of the created objects would be greatly apprecciated.
    once again, respect for that work and the ‘open-sourcing’
    d_fyah

  45. Hi John,
    Firstly, thanks for publishing this code – I have implemented my own CoverFlow style interface and was concerned that the scene was being rendered on every frame (a little overkill) – this is what brought me to your implementation. I also experienced intermittent issues when selecting items with the mouse. It seemed to appear that if the mouse was not located over the Coverflow as it started up then certain mouse events are not being handled correctly by Papervision.
    I’ve found a workaround, it may not be the best solution, but it maintains rendering only when necessary.Firstly it involves adding 2 more event listeners to the viewport interactiveSceneManager
    viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_MOVE,vpMouseMove);
    viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OUT,vpMouseOut);
    In the mousemove handler function add the following code
    if(viewport.hitTestMouse().displayObject3D is Plane){ viewport.interactiveSceneManager.removeEventListener(InteractiveScene3DEvent.OBJECT_MOVE,vpMouseMove);
    viewport.interactiveSceneManager.updateRenderHitData();
    }
    and in the mouseout handler function add
    viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_MOVE,vpMouseMove);
    This seems to work for me – obviously it may be improved as you will inevitably get multiple updates to updateRenderHitData. I’ll leave it to you guys to improve upon, but I hope it helps someone.

  46. Hi John,
    Further to your help yesterday I did some investigation (tinkered) and I hit upon another problem but this time I also come armed with the solution :), you may want to include this in your version to help with potential future issues.
    While the solution you gave me yesterday helped, it did indeed allow the reflections to work on a white background but it didn’t allow the reflections to work on any background as they weren’t transparent so I have changed a few bit of code to provide arguably better reflections that have a transparent gradient so that they can be used with any background.
    Please find code changes to the CoverFlow class below:
    before*
    bmpWithReflection.draw( bmp, flipMatrix, new ColorTransform(alpha, alpha, alpha, 1, 0, 0, 0, 0));
    after*
    bmpWithReflection.draw( bmp, flipMatrix, new ColorTransform(alpha, alpha, alpha, 1, 0, 0, 0, 0),BlendMode.LAYER );
    and…
    before*
    holder.graphics.beginGradientFill( GradientType.LINEAR, [ 0x000000, 0x000000 ], [ 0, 100 ], [ 0, 0xFF ], gradientMatrix);
    after*
    holder.graphics.beginGradientFill( GradientType.LINEAR, [ 0x000000, 0x000000 ], [ 100, 0 ], [ 0, 0xFF ], gradientMatrix);
    before*
    bmpWithReflection.draw( holder, m );
    after*
    bmpWithReflection.draw( holder, m,null,BlendMode.ALPHA );
    All done 🙂

  47. @rd, thanks for the code. I was initially worried that the use of alpha blending would cause the frame rate to drop so I didn’t pursue it. If you’re finding that it doesn’t make much difference that’s great! I’ll look into adding it for a later version.

  48. Performance is a valid point, but so far I haven’t seen any substantial performance issues. It’s all good 🙂

  49. I got the same problem like chris
    Occouring errors are: (CoverFlow.as)
    Line 177: 1119: Access of possibly undefined property interactive through a reference with static type org.papervision3d.materials:BitmapMaterial.
    Line 229: 1119: Access of possibly undefined property y through a reference with static type org.papervision3d.events:InteractiveScene3DEvent.
    Line 313,326,337 1120: Access of undefined property Tweener.
    Line 29 1172: Definition caurina.transitions:Tweener could not be found.
    can someone help???
    thx

  50. oh sorry, not the same problem, but i think it’s very similar:
    1061: Call to a possibly undefined method calculateMultiply4x4 through a reference with static type org.papervision3d.core:Matrix3D.1061: Call to a possibly undefined method calculateMultiply4x4 through a reference with static type org.papervision3d.core:Matrix3D.1061: Call to a possibly undefined method calculateMultiply4x4 through a reference with static type org.papervision3d.core:Matrix3D.
    did they change the papervision code? or whats the problem!
    thx for help!

  54. i should add that i’m using the GreatWhite Papervision version and have specified "caurina" as the directory that contains Tweener 3d

  55. Hi John, Looks awesome, but I am having some trouble getting it to compile, What revision number of great white did you use, it looks like they changed a couple methods in Face3D.as, I get a bunch of errors on line 165, a little poking around and I think they changed drawFace3D() to drawTriangle() and the params are a little different.
    I have the latest revision of great white (532) but maybe I need to go backwards a few revisions if you haven’t updated your code in a while – I am guessing you posted the 2.0 version in Nov 07?
    So if you could let me know what revision of great white you are using that would be awesome.
    Thanks in advance
    Chris

  56. hi John, thanks for sharing the code.
    is there any license needed to use the cover flow in one of my projects?
    well done!
    Soenke

  60. Hey John, Great work on your amazing Coverflow. I was hoping to try a simpler treatment of this which just loaded image files from an XML source file. Little did I know how difficult is was going to be! : ) Anyway I seem to have most of the issues resolved stripping out the text and click through references in the FlickerFlow.as file but I’m really struggling with CoverFlow.as. The problem all seems to stem from …
    line 119// imageLoader.load( new URLRequest( coverFlowData[currentLoaderIndex].imageUrl ), loaderContext );
    imageUrl hasn’t been defined anywhere in this file so I’m getting a a error message…
    TypeError: Error #1010: A term is undefined and has no properties.
    Any advise would be awesome.
    thanks, Jim

  62. Thanks John. I’ve resorted leaving the code as you had it originally and using Yahoo’s XML namespace to get round the problem for now. Not exactly tidy but does the job! A simpler version would still be great to have. I’ve also noticed that resizing the viewport in FlickerFlow.as trips out when it goes for the Coverflow.as. file

  63. hi,
    is it possible to use the coverflow without flickr? i like to use it with pictures from a folder. is there an easy way?
    thanks.

  64. This seems to have happened over the last weekend. I had it working
    on Friday.
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at CoverFlow/::imageLoaded()
    Error opening URL ‘http://file:/crossdomain.xml’
    Failed to load policy file from http://file:/crossdomain.xml

  65. I really like this coverflow. Great work! And I’d also like to use it with a simple xml file pointing to pictures in a folder etc. Looking forward to that version.

  66. I have just a question from CoverFlow.as line 320
    dispatchEvent(new CoverFlowEvent(CoverFlowEvent.ITEM_FOCUS, newCenterPlaneIndex));
    Commenting out this line seems to have no effect whatsoever on
    the functionality of the app.
    Comment 2: The source is missing a ; after this statement. line 166
    Amazing enough the CS3 does not seem to care until you start making
    changes to the code then it gets real confusing.
    holder.graphics.beginGradientFill( GradientType.LINEAR, [ 0, 0 ], [ 0, 100 ], [ 0, 0xFF ], gradientMatrix) !!! missing ; !!!
    Also
    Well It seems be slightly less broke then it was. Now it loads one picture before you get the following:
    Connection to http://file:/apps/video/video_mtl_xml.gne?v=x&photo_id=null&secret=null&olang=null&noBuffer=null&bitrate=700&target=_blank halted – not permitted from http://www.flickr.com/apps/video/stewart.swf?v=49235&photo_id=2548377938
    Error #2044: Unhandled securityError:. text=Error #2048: Security sandbox violation: http://www.flickr.com/apps/video/stewart.swf?v=49235&photo_id=2548377938 cannot load data from http://file:/apps/video/video_mtl_xml.gne?v=x&photo_id=null&secret=null&olang=null&noBuffer=null&bitrate=700&target=_blank.
    at PlaylistParser/loadPlaylistUrl()
    at Stewart/::initialize()
    at Stewart$iinit()

  67. EXCELLENT,EXCELLENT CODE!!!! For those having trouble with dynamic centering, it’s as easy as using the stageWidth/stageHeight properties. Worked like a charm.

  69. John, can you help me place this on a white background? Itried using the method described by "rd" on April 3rd, but the image still appears to have a black background behind it.

  70. Justin,
    I think the best way might be to replace all the references to 0x000000 (which mean ‘black’) with 0xFFFFFF (which in hex means ‘white’). That should do it…

  71. Nice and simple, thanks.
    In FlickFlow, instead of the "stupid hack" to properly get the title, just get the first title node:
    var t:String = entryNode.title[0].text();
    You’re just getting a double title because of the additional flickr <media:title> node.

  72. Hi,
    first of all i wanna say:"great job", i have done something very similar to that but now i am stuck into a problem…i would like to have some alpha effect within the shifting, somehow i cannot make it work, plane doesnt’t get alpha…any ideas how could i make fade effect.
    best regards

  76. Hi John,
    Thanks for your wonderful code. I have a problem: I CANT click the plane(image) even though mouse click event code(planeClicked) present. How can i overcome this problem. Could anyone pls suggest what’s wrong.
    Thanks in Advance.
    Bas.S

  77. I was wondering if there was a way to fade the left and right most edges of your coverflow with papervison3d 2.0? I was looking at how the itunes coverflow works and it does fade left and right. Let me know if you think this is possible. P.S. I think this clone is the best one I’ve seen. Good work!

  78. @Alex, you could try to do this programatically, but you could also add a gradient just in the Flash IDE on top of whereever you have the coverflow.

  79. John, thanks for your reply.
    I tried both approaches and neither worked.
    1. I created a movieClip with a black to white gradient and exported it for actionscript.
    Then i did:
    var mc:MyClip = new myClip();
    addChild(mc);
    myClip.casheAsBitmap = true;
    this.mask = myClip;
    2. Same as 1 but created the gradient shape programmaticlly.
    Papervision alwasy shows up on top most layer while my gradient shows up behind it.
    Well thanks again for your replay let me know if you think there is a better approach than this.
    Thanks!
    Alex

  80. Hi John,
    I have been puzzled for the last two days about something. I have been trying to add rollover functionality to each image. I added the following two lines of code below where you set the planeClicked event listener in CoverFlow.as
    plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, planeRollover);
    plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, planeRollout);
    Now, my rollovers work. The issue is that the rollovers are working when the user rolls over the reflection not just the image. But the strange thing is the click event doesn’t get triggered when a user clicks on the reflection. Do you know why? Where is that listener getting overwritten?
    I noticed in your FlickrFlow class you have the following line of code viewport.buttonMode = true; so when the user rolls over an image the cursor changes to button mode.
    I want to make sure if a user rollsover the image and/or reflection the rollover, out and click functionality is synched.
    Could you please help me with this issue? Any information would help a lot.
    Thanks,
    Mike

  84. Your cover flow is amazing. When I looked over your article I discovered both of papervision and tweener, which were new to me… incredible contribution, thanks.

  85. Yes, I love these to feature photo’s and other art. Glad more options are coming out. I know there are some free services out there too that automate this. Thanks

  86. Papervision3D now has integrated QuadTree support. For those of you who aren’t sure what this means – it is a technique of subdividing the screen into smaller and smaller regions to resolve potential conflicts between triangles. This is one solution to the common error found in the Painter’s algorithm that Papervision, (and all Flash3D engines) uses.

  87. Hey there
    The coverflow demo is amazing !
    I wish i could dig in the code, but it seems that the download link is down !!
    I’d be really grateful if someone could rehost it or share it with me
    thanks in advance
    ben

  88. lien de telechargement ne marche pas, quelqu’un peux nous aider pour pouvoir telecharger le code source?

  91. Hi can you please upload the source for phunky with which this coverflow example is created. All the source projects that i get from internet are either incomplete or wrong version. Thank you!

Comments are closed.