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:
- Flash CS3 Project: coverflow.zip (18 kb)
- Flickr Example
- DTS Media example
This is cool. Do you have an idea on how I can make this go forever in any direction?
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.
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";
}
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 🙂
is the clicking feature implemented well on this? cos i think theres something wrong with it…
@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.
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)
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
@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.
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);
}
}
}
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.
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.
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 🙂
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!
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.
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
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!
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… 🙂
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?
@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!
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 🙂
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.
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…)
@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.
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 🙂
@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)
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.
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
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
Hey John,
Another question –
why do u apply a object click event ot the view port instead of the (commented out) planes?
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?
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 :(.
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;
?
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.
ok fixed
var image:Bitmap = Bitmap(e.target.content);
var bmp:BitmapData = image.bitmapData;
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!
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/ .
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
Michael,
I’d love to know how you adapted this to XML feed. Any help?
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).
Jonas, good work man. That looks awesome!
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
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()
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
Hi,
I have the same problem like Steven… Steven, did you found a solution for this?!
Thanks
Thanks! But the code is really dirty.
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." 🙂
For the correct-scale-issue change L81-83 to:
camera.zoom = 11;
camera.focus = 100;
camera.z = -1100;
nice job guys!
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);
}
Hi Does anybody know how to create the horizontal scrollbar look here in the flex version that Doug implemented.
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