Papervision Coverflow updated for PV3D 2.0 (GreatWhite)

December 13, 2007 | Uncategorized | 51 Comments

I've updated my original Papervision Coverflow knockoff from Phunky to GreatWhite. The main change is the use of Renderer and ViewPort, but I also added some code to stop rendering when nothing is moving to ease up on the processor. Make sure to download Papervision and Tweener before compiling it.

Links:

51 responses to “Papervision Coverflow updated for PV3D 2.0 (GreatWhite)”

  1. This is cool. Do you have an idea on how I can make this go forever in any direction?

  2. John Dyer says:

    You could just keep adding planes to the coverflow (if you really had an infinite number) or you could fake it by moving the planes to either side as it moved. It really depends on what you’re attempting to visualize/accomplish.

  3. Exey says:

    Thank you for done CoverFlow with GreatWhite!

    You using urls from <media:content>, but <media:content> not always point to _m.jpg, and we have:
    ArgumentError: Error #2015: Invalid BitmapData.
    at flash.display::BitmapData$iinit()
    at CoverFlow/::imageLoaded()

    I fix it thus:
    ..
    var imageUrl = entryNode.thumbnail.@url;
    var data = {title: t, clickUrl: url, imageUrl: fixUrl(imageUrl)};
    ..
    private function fixUrl(imageUrl)
    {
    var str:String = imageUrl;
    var results:Array = str.split(/_s./); //
    return results[0]+"_m.jpg";
    }

  4. Chris says:

    Hi there John, first of, happy new year man!
    thank you for posting your version of this coverflow, really like it!

    i just tried to compile the fla with PV3D Great White, but unfortunately i get the same errors as Bryan Schoenen did with the 1.9 version:

    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

    Seems to me that this is a bug in Flash CS3, and not your code or the PV3D source, as it all looks correctly and should be working!

    anyone have a hint, how to compile successfully?

    thanx in advance,
    chris :)

  5. kaiser says:

    is the clicking feature implemented well on this? cos i think theres something wrong with it…

  6. John Dyer says:

    @Chris, I built this with Flash CS3, so it should work, but GreatWhite (PV2.0 Alpha) might have changed some things since I last compiled the script.

    @kaiser, GreatWhite (PV2.0 Alpha) seems to have some problems detecting clicks accurately.

    Once PV 2.0 is fully released and the codebase is stable, I’ll try to put up another version. For now, you just have to experiment a little.

  7. Sam says:

    Hi John,

    I had the almost the same problem as Chris
    [u]My Compile Errors[/u]
    [b][u]CoverFlow.as, Line 173[/u]
    Description:[/b] 1119: Acces of possibility undefined property interactive through a reference with static type org.papervision3d.materials:Bitmapmaterial.
    [b]Source:[/b] planeMaterial.interactive = true

    [b][u]CoverFlow.as, Line 222[/u]
    Description:[/b] Acces of possibility undefined property interactive through a reference with static type org.papervision3d.events:InteractiveScene3DEvent.
    [b]Source:[/b] if (!showReflections || ev.y <= ev.displayObject3D.extra.height ) {

    [b][u]CoverFlow.as, Line 23[/u]
    Description:[/b]
    1172: Definition org.papervision3d.objects.primitives could not be found.
    [b]Source:[/b] import org.papervision3d.objects.primitives.*;

    The last error made me look for the correct classpath. So I changed the classpath of my AS 3.0 Settings from:
    ..\Papervision\as3\trunk\src\
    to
    ..\Papervision\branches\GreatWhite\src\
    All my errors are gone and FlickrFlow.swf is compiled correctly.

    Thanks for the nice effort to publish this code.
    (I hope that the post uses the tags for bold and underline correctly, because the live preview doesn’t)

  8. Chris says:

    Well, I am trying to get this to work with an external source using your setup code. I don’t know where to put this in. I tried in coverFlow.as, and flickrFlow. also the Fla file and exporting it. It only seems to work for your flickr. I can’t get it to work for my own source. Can you help?

    Thanks

  9. John Dyer says:

    @Chris,
    The license in the readme.txt says that my CoverFlow is MIT licensed. That means that you can use the code however you like in your project as long as you keep the author’s name in your derivative work (http://www.varsisstudio.com/coverFlow/). I understand sometimes it’s hard to keep all the different license types straight, but its really important to check the license before you build a product – that way you help keep the Open Source movement going. It looks like you created a really cool thing (the lightbox is a nice touch), just make sure you let people know you’re using my coverflow and some else’s lightbox.

  10. I found a way to make the clicking work accurately until PV2.0 events get fixed. I’m sure you could incorporate my fix into CoverFlow.as but I did it in the FlickrFlow.as.
    First off, I put added a variable in the as to keep track of the currentIndex but I also add a normal Event Listener for a click either on the stage or on the coverFlow object. that listener then triggers this:

    private function mouseClickHandler(event:MouseEvent):void {
    if (event.relatedObject != null) {
    var clickedItem = viewport.hitTestMouse().displayObject3D.extra.planeIndex;
    trace(currentIndex + " = " + clickedItem)
    if (currentIndex == clickedItem) {
    coverFlow.goToLink();
    } else {
    coverFlow.shiftToItem(clickedItem);
    }
    }
    }

  11. John Dyer says:

    Jonathan, I think you’re a genius. I updated the CoverFlow.as file to use the hitTestMouse method and that fixed it. The download has been updated.

  12. Glad you think so. I personally have not felt so much pride in figuring something out and was gloating like I never have before. That said, I actually think that you are the genius as you seem to be doing amazing work. I work in a .NET shop so I know how rare it is for a .NET developer to have as varied knowledge as you do. Flash, Web 2.0 (as much as I hate that term), and .NET expertise is a combination that I have never really seen. I was showing people at work some of your stuff a few weeks ago and really wished we had you on our team. Hey if you ever end up in Los Angeles for some reason, let us know because we could definitely benefit from your work. Probably couldn’t afford you though.

  13. John Dyer says:

    Jonathan, thanks for the very, very kind compliments. I work for beans out here in Dallas, but I really believe in what we’re doing at Dallas Seminary, so I probably won’t be leaving very soon. But if I find a great Ph.D. program in the LA area, then maybe I’ll give you a ring. Let me know if you find any more great ways to improve/fix my code :)

  14. Underdog says:

    I am getting compiler errors:

    1120: Access of undefined property Tweener.

    for the lines 313,326,337 (all for the constructor):

    tweens[i] = Tweener.addTween(plane,

    and also:
    –1172: Definition caurina.transitions:Tweener could not be found.

    for the line

    import caurina.transitions.Tweener;

    Do you think this might be a Tweener problem, perhaps i am using a different version to you?
    i am using: tweener_1_26_62_as3.zip

    Great work!

  15. John Dyer says:

    Alex, It’s possible the paths just aren’t right. You probably need to open up the FLA and go to the settings and make sure the paths to PV3D and Tweener are right.

  16. Underdog says:

    Thanks very much,
    Its very odd but i had tweener in my default path, hwere all other class libs are but it just wasnt importig. then i put it in the relative/local project and all worked?
    Strange,
    Thanks for your help.

    A

  17. Chris says:

    Just thought I would chime in on this:

    If you want to load to the first image after the stack, but there is a problem with this, it doesn’t want to load. The problem being 0, so here is a simple fix,

    Create an info statement to check if it’s loading parameter is set to 0 (you might not need this, but I have my positions set externally. )

    If it is go shiftToItem(1);
    shiftToItem(0);

    Seems to work, not sure why. It won’t split the stack, but that way will and you won’t even notice the shift to item 1 because 0 is directly below!

  18. Charly says:

    Hi John,

    sorry for my "mistake"… looks like I didn’t read all the stuff.
    I’ve seen Jonathan Badeen’s fix, and it works great.
    Thx to both of you !
    Now, I’m tryin’ to flip the current picture, to put a video on the other side…
    To be continued… :-)

  19. Eric says:

    Hi John, I would like to use your coverflow code as a base to build on for client project ( mp3 player flash widget ). Is this OK?

  20. John Dyer says:

    @Eric, the license is MIT, so you can use it however you like, just if you post it on your site make sure to link back/give credit. Hope the project turns out awesome! It looks like you do some great work!

  21. Charly says:

    Hi John, I’ve modified your code a little bit to be able to flip the picture in the middle and play a video… (I’m using cubes instead of planes)
    But I’m stuck now since days with the videos which play only the sound (and not the images) ?
    So I was wondering if you would mind to have a glance at the code I’ve done to point me out what’s wrong ?

    Whatever your answer, thx anyway :-)

  22. John Dyer says:

    Charly, I think you should make sure you can get a video playing on just a plane with a VideoMaterial first to ensure you don’t have any flash sandboxing problems. If you can get a simple video working, I would imagine it would work under other circumstances as well. I’m looking to re-write the coverflow soon anyway, so you might want to check back then.

  23. Charly says:

    Thx for responding John :-)
    Actually, I did this and everything was fine…
    So now, I got the video playing fine, but its height size is x2…?
    Tryin’ to figure out why… (I must admit that I don’t understand every line in your code… :-) but sure I will at the end !

    Have a good evening (17:19 here…)

  24. John Dyer says:

    @Charly, it might be that the code for the reflections is what’s throwing it off. The reflection doubles the height of the plane (or cube, in your case), so you might have to take off the reflection and add it to a separate plane below your cube.

  25. rd says:

    Hi John,
    Well done on your interpretation of the now ubiquitous Coverflow. I have used it a number of times already to great effect but I have recently needed to use it on a white background but I’m finding it near impossible to to change reflection colour to use white and also have a gradient to fade out the reflections (I hope that makes sense).

    I have changed all the obvious matrix params to try and get the effect bit with little success so far. any help you can offer is greatly appreciated :)

  26. John Dyer says:

    @all, the way to fix any click problems is to change the line:
    viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, mouseDownHandler);
    to
    stage.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler);

    and then to change that method from
    function mouseDownHandler(ev:InteractiveScene3DEvent) {
    to
    function mouseDownHandler(ev:MouseEvent) {

    and
    var index:Number = ev.displayObject3D.extra.planeIndex;
    to
    var index:Number = (viewport.hitTestMouse().displayObject3D == null) ? -1 : viewport.hitTestMouse().displayObject3D.extra.planeIndex;

    @rd,
    change
    holder.graphics.beginGradientFill( GradientType.LINEAR, [ 0, 0 ], [ 0, 100 ], [ 0, 0xFF ], gradientMatrix);
    to
    holder.graphics.beginGradientFill( GradientType.LINEAR, [ 0xffffff, 0xffffff ], [ 0, 100 ], [ 0, 0xFF ], gradientMatrix)

  27. rd says:

    Thanks John,

    Firstly for the Super fast response and of course secondly for the solution to my problem.

    I thought I’d tried ever combination but obviously not.

    Once again, big thanks for your help.

  28. ploufy says:

    I used the MouseEvent and InteractiveScene3DEvent but I have always click problems. I don’t succeed to get the object clicked in my application. I have no problem with the keyboard. Does someone have this problem and have a solution?
    I use Flex 3 and PV3D2

  29. DN says:

    First off, your cover flow code is easy to learn and awesome.. thanks for sharing teh code..

    but when I want to do a double sided effect to the images
    .. and i rotate the images.. i get this funky behavior that can only be described by viewing this webpage

    http://dnecklesportfolio.com/transfer/coverflow/help.html

    What am I doing wrong?
    Why did the tutorial based on pv3d.org..it seems using the yaw u dont get those artifacts as opposed to rotating the y value..

    The reason for the effect is because…I want the person to click on the plane..when its in the center and simply flip like Blitz – http://labs.blitzagency.com/?p=314

    I’m almost there…

    Dwayne

  30. DN says:

    Hey John,
    Another question –
    why do u apply a object click event ot the view port instead of the (commented out) planes?

  31. Penny says:

    Hey john, this is penny here. I would like to ask about the photoshop-like javascript color picker. i’ve downloaded your code and implemented it in my application. In your code, there is an object, named cp1_hex. i copy the content of cp1_hex into another object which is run at server(i am using asp.net)so that i can retrieve the content of cp1_hex in server code.The code is running fine in IE5 and IE6, but not for mozilla firefox and safari browser.i am doubt about would it because of rendering operation. So my question is can i know which part of the functions is the portion that write in the hex color into cp1_hex when mouse up event occur?

  32. Austin Pray says:

    I am trying to implement this into my flash site, and when I try and migrate the object over to my other flash file I get a lot of errors. I fixed most of them but I cannot fix one in particular:

    ReferenceError: Error #1065: Variable addFrameScript is not defined.
    at FlickrFlow$iinit()

    I changed the document class in the new fla to FlickrFlow and added the movieclip to the timeline. Is there a way to fix this? I cannot find the addFrameScript variable :(.

  33. Austin Pray says:

    Also, I can’t seem to find the place in the code which allows me to determine where the coverflow thing is displayed. Is there some place where I can add
    whatever.x = stageWidth / 2;
    whatever.y = stageHeight / 2;
    ?

  34. PK says:

    Sweet one John!!, thanks for sharing,

    I have a problem while setting showReflections=false;
    ArgumentError: Error #2015: Invalid BitmapData.

    I am actually trying to turn off the reflection but without luck.

    thanks for any advice.

  35. PK says:

    ok fixed

    var image:Bitmap = Bitmap(e.target.content);
    var bmp:BitmapData = image.bitmapData;

  36. Aby says:

    Hi John,

    This is one of the cooler CoverFlow versions Ive found online, after extensive searching. So good job!

    Im planning to use your code in a small part of a commercial project. Although Im doing most of the work on this project, the client has not allowed me to add any credits on his page. His design doesn’t permit it apparently.

    So is it cool to add your name in the rightclick menu? Im doing the same for myself!

    Lemme know,

    Thanks!

  37. Michael says:

    I really enjoyed getting my feet wet with papervision on this. i got it to flip by changing the plane to a cube then you can set the delay option in tweener to combine the effects and make it rear back before flipping 180.also you can do all kinds of fun stuff with the camera y and z!

    http://www.gotoandrock.com/flow/ .

  38. Jonas says:

    Hi John, your code is a great example of Papervision 2 usage.

    I used it as inspiration for yet another implementation of coverflow. In my case, it’s an MXML component that loads configuration and image information from an XML feed.

    http://chelseaartgalleries.com

  39. Jeff says:

    Michael,

    I’d love to know how you adapted this to XML feed. Any help?

  40. Jonas says:

    FYI: I made some changes to the version of coverflow we have on chelseaartgalleries.com. MXML was abandoned (to cut size from 200k to 50k), and a custom scrollbar was added (in part based on GenericScrollbar.as).

  41. John Dyer says:

    Jonas, good work man. That looks awesome!

  42. Steven Jack says:

    John,
    This looks like an awsome implementation of a coverflow gallery, but I cant seem to get it to work as intended. Ive put the paper vision and Tweener classes in the correct places and it compiles, but all the images are very large, and take up the whole screen instead of being the small tiles that you can scroll through. Below is a screenshot to try to explain what i mean:

    http://www.smaj.co.uk/coverFlow.png

    Just not sure what it could be?

    Regards,

    Steven

  43. Steven Jack says:

    John,

    Sorry, I also forgot to mention here is the output in the trace when running the program:

    nubmer of photos: 20
    img:
    img:
    img:
    img: do you know where my ice cream is?
    img: the shoe from Peru
    img: birth of a photo assistant
    img: big Dave.
    img: cisum
    img: a hot night on Beale St.
    img: waiting for the ducks to march
    img: staying at the Peabody
    img: …are you?
    img: the horses are ready…
    img: he tasted coffee…
    img: flavor: pink
    img: when the tree is green
    img: cutting dave
    img: not the same without you.
    img: night mommy.
    img: good morning.
    INFO: Viewport autoScaleToStage : Papervision has changed the Stage scale mode.
    INFO: Papervision3D Public Beta 2.0 – Great White (20.08.08)

    0: 100
    1: 90
    2: 80
    3: 70
    4: 60
    5: 50
    6: 40
    7: 30
    8: 20
    9: 10
    10: 0
    11: -10
    12: -20
    13: -30
    14: -40
    15: -50
    16: -60
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at CoverFlow/imageLoaded()

  44. bala says:

    I modified your code for accessing the XML instead of RSS as idon’t have the net in my home and to see the output. when i did that fla file ran successfully.
    it loaded the picers it sked it plus it zoomed it too a large extend. i can see only the center pic as it is zoomed or cropped. I doubt it is caused because of the img size is used is different from your. Can you suggest me Where we can control the script to accept any sized img and load it not over zooming

  45. Bogdan says:

    Hi,
    I have the same problem like Steven… Steven, did you found a solution for this?!

    Thanks

  46. Mikih says:

    Thanks! But the code is really dirty.

  47. Rich Hauck says:

    I just downloaded this and ran into the same issue Steven had using the latest version of PV3D. You can correct the blown "scale" of the images by modifying the camera.z value on L83 of FlickrFlow.as. I believed I eliminated TypeError: Error #1009 by hardcoding a title value on L124 . . . Looking forward to an official "patch." :)

  48. moose says:

    For the correct-scale-issue change L81-83 to:

    camera.zoom = 11;
    camera.focus = 100;
    camera.z = -1100;

    nice job guys!

  49. hoi,

    When U turn of the reflection. It will not longer work.
    The bug is in imageLoaded() Method.

    After drawing it will works again.

    if (showReflections) {

    } else {
    var bmpWithOUTReflection:BitmapData = new BitmapData(bmp.width, bmp.height);
    // draw a copy of the image
    bmpWithOUTReflection.draw(bmp);
    planeMaterial = new BitmapMaterial(bmpWithOUTReflection);
    planeMaterial.smooth= true;
    plane = new Plane( planeMaterial, newWidth, newHeight, 4, 4);

    }

  50. Brian McBreen says:

    Hi Does anybody know how to create the horizontal scrollbar look here in the flex version that Doug implemented.

  51. Daniel Englert says:

    Hi, I think this is one of the more elegant cover flow interfaces I’ve seen yet. But the zip download link seems to be broken. I’d love the chance to look at your code, is there anyway to get the source (I know this is an old thread :)

    Thanks!
    daniel

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.