Yet Another Coverflow using Papervision

November 4, 2007 | Uncategorized | 91 Comments

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 Responses to “Yet Another Coverflow using Papervision”

  1. umer says:

    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. John Dyer says:

    @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.

  3. umer says:

    @John Dyer
    Thanks for the quick response. I appreciate it.

  4. gnupi says:

    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:

  5. John Dyer says:

    @gnupi, it looks like your comment got cut off…

  6. Tomas says:

    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. fabien says:

    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. Chris Bray says:

    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. John Dyer says:

    @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. K says:

    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. John Dyer says:

    @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. Bryan Schoen says:

    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. John Dyer says:

    @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.

  14. alexey says:

    please John, do a favor and publish 2.0 code. Thanks!

  15. catalin says:

    please John, publish 2.0 code. Thanks you too!

  16. John Dyer says:

    The Papervision 2.0 (GreatWhite) code is up. Also includes Chris Bray’s suggestion about idle time rendering.

  17. wil says:

    Great work,

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

    Thanks

  18. Eric says:

    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.

  19. Moss says:

    I don’t understand how to implement it.

  20. Dan says:

    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. Dan says:

    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. John Dyer says:

    @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. James says:

    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. John Dyer says:

    @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. James says:

    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. Jorge says:

    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

  27. John Dyer says:

    The PV2.0 (GreatWhite) [b]event problems have been fixed[/b] based on a tip from Jorge. The download has been updated.

  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. Sebastian says:

    hi,

    verry nice work!!
    where do i have do change the paths to PV and Tweener?

    thx 4 answer
    sebastian

  30. John Dyer says:

    @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. nono says:

    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. Martin says:

    Very nice coverflow :) One of the most ‘apple like’ :D But hey… Could you explain me how to use this :D ? 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!!

  33. Martin says:

    Oh… And where can i find PV 2.0 if i need it?

  34. John Dyer says:

    Martin, I don’t think I’ll be able to help you in just a comment, but I can tell you that you can get the GreatWhite branch of PV3D from http://code.google.com/p/papervision3d/source/checkout

  35. nono says:

    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. b says:

    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. ZaphodAK42 says:

    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

  38. ZaphodAK42 says:

    Oh, and you can get me at achythlook(a)google(dot)com, if you wish

  39. Chris says:

    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. Wouter says:

    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. Charly says:

    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. Wouter says:

    @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. ic00 says:

    John, that’s beautiful.

    I’m new to actionscript and wondering how I can use this coverflow to load local images.

    Thanks alot,

  44. d_fyah says:

    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. James says:

    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. rd says:

    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. John Dyer says:

    @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. rd says:

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

  49. mike says:

    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. mike says:

    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!

  51. John Dyer says:

    @mike, sounds like there might be some PV3D differences. Make sure you’re using the GreatWhite branch.

  52. kevin says:

    I’m getting these errors:

  53. kevin says:

    weird, the actual content of my errors didn’t display.. here’s a screenshot

    -n http://tinyurl.com/5ydukr

    totally unsure what to do.
    any ideas?
    it’s very much appreciated!

  54. kevin says:

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

  55. Chris Elmes says:

    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. Soenke says:

    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

  57. dutsi says:

    Here is a SVN link to Great white with all the extras http://papervision3d.googlecode.com/svn/trunk/branches/Effects/

  58. meekish says:

    This is the first clone I’ve found that really feels like CoverFlow. Excellent work.

  59. Daron says:

    anyone know how to get this to work in flex

  60. Jim says:

    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

  61. John Dyer says:

    I’ll try to get out an update that shows how to load from a simple local XML file.

  62. Jim says:

    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. John says:

    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. wcteskey says:

    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. Nigel says:

    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. wcteskey says:

    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. soulgloooow says:

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

  68. Joe says:

    Is there a simple example somewhere of how to use the latest version of the code?

  69. Justin says:

    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. John Dyer says:

    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. Philippe says:

    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. ico says:

    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

  73. P says:

    Hi,

    Anyone know how many planes can I render with it ?
    1000 is possible ?

    thanks.

  74. Brandon says:

    Does anyone here know where I can find a tutorial on this step by step?
    Thanks

  75. Brandon says:

    Hi,

    Great work!!! Just one question, is it possible to make this a continuous cover flow?

  76. baskarans says:

    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. Alex says:

    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. John Dyer says:

    @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. Alex says:

    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. Mike says:

    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

  81. rsprake says:

    Was able to modify and use your code in a project. Thanks for the hard work!

  82. John Dyer says:

    Awesome! If you have a link to the project, I’d love to see it.

  83. adrenaline says:

    Hi the link for the download is broken

  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. Prescott says:

    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. steve says:

    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. benrhayader says:

    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. Reda Makhchan says:

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

  89. Carl says:

    does this still work ? I can’t get it to work. Any one else?

  90. Robert says:

    Great flash guys, just great. But one question though, I found a flash Cover Flow on http://www.flashxml.net website that supports .flv video. Do you have this feature? Thank you!

  91. Sathish says:

    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!

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.