Papervision3D Carousel Example FLA
Below is a little example of a 3D carousel using Papervision3D. There are many advantages in using a 3D engine rather than the “fake” methods that I have shown before. The biggest is that the engine will take care of scaling and perspective which makes your code much cleaner. You will also get realistic perspective and rotation which is nice.
You can download the FLA file here and if you have any questions about extending it, go on over the GTAL forums and ask around.
Lee
cool lee
Nice lee. Hey I thought you were sick of 3D Carousels?
Just you everyone knows the forums are located at http://www.gotoandlearnforum.com not …forums.com
I’ll checkout your implementation, but so far your fake methods prove to be far superior in terms of performance when onstage with other animations.
Cheers!
Cool. If you find out a way to make it perform better please let me know.
Cool, but impossible to open the FLA file (with flash 8). Is that a CS3 one ?
Also, I was asking myself for some weeks what is really papervision : the link to papervision3D home page shows only a nice white logo … notking else
Anyway, your work is really GREAT !
perfect , really , i love this one
Oh yeah sorry David, it is a CS3 FLA. To learn more about Papervision watch my tutorial on it at http://www.gotoandlearn.com.
Hi Lee
This stuff looks really nice, I think you are really pleasuring us here lately with your amazing tutorials! niiice!
Ok so, Im really excited about having you and mike visiting us here in Denmark, I will not miss that couple of hours with you guys, so i have to be in Århus the 8th of november
- Jimmy
Nice one. I supposed that to be just for Flash Player 9, isn’t it? Whether it is, I might still use the fake method.
Great see you there Jimmy!
Papervision rocks!
@David C.:Isn’t just the white logo, it’s only there while the shark demo is loading. The content link is http://blog.papervision3d.org/.
@Vojtech Kopal: Since it uses the AS3.0 papervision release it requires flash player 9 and at this time FP 9 is at 90.3% penetration rate for mature markets. If you still want an AS2.0 version there is also a AS2.0 papervision release.
nice carousel bad movies
very good makes one on amazon crap
Thank Lee! You rock!
Hi Lee… nice tut. I would like to see a PV3D tutorial with external load of images (XML driven). What class do I need to use to load external JPGs into this carousel?
Keep the good “evangelism” work!
Just what I wanted to do some weeks ago (but I don’t know how to load different external textures for the planes
). So many thanks! I will look at this carrousel 
.
Adobe Evangelists vs. Microsoft Evangelists…
How do you effectively measure the effectiveness of an evangelist? Blog readership? Event……
Perfect..
Nice work, buddy
Thanks for share this with us
Best regard from China
I’m really excited about Papervision. I can’t wait for the FuseKit to come out with their undoubtedly KILLER use of it.
nice Lee it’s by far much cleaner than the old 3D tricks in flash
[...] Lee Brimelow’s Blog [...]
This is ace!! Thank you.
I am new to papervison and want to create something very similar to this. But how do you make the individual panels clickable? It has been driving me mad!!!
nice! me likey! Now, how the heck to do this in a Flex environment? I’m no Flash guru and would like to be able to pull this off and mix it in a Flex app.
DK
[...] Inspired by Nikhil Kothari and Lee Brimelow, I decided to make my own image carousel… [...]
[...] Here’s a Flex component (with source) that does that sweet looking CoverFlow thing (you know, the iTunes/iPhone thing to show cover art). It’s a Flex component, so you can drop it into any Flex app. Just like Lee Brimelow opened the floodgates for a barrage of 3D carousel effects, I hope to see the CoverFlow effect used everywhere. Especially in places where it makes no sense to have this effect whatsoever. Go forth and overuse it and abuse it. [...]
To make each panel clickable, I just added:
p.container.addEventListener(MouseEvent.CLICK, test);
In the ‘for’ loop at the end.
Nice! ..but how can we make this more dynamic? say images coming from an external source (maybe even xml driven). how do you dynamically make the bitmaps of type: BitmapAssetMaterial ??
[...] Papervision 3D – open source 3D engine for flash I was wondering whether this page has Flash Video or is it done using Papervision 3d. Then I found this link and look at the wheel and it is rotating!!! (use the arrow keys to drive the car). Then I concluded that Nissan Rogue website is using Papervision 3D. Look at the other examples . So here is Papervision3D effects for Flex. I couldn’t resist but download papervision 3D. Check out the blogs on Papervision 3D. Here is Lee Brimelow’s website with useful tutorials. Here is Papervision 3d Carousel example in Flash [...]
[...] So, I’ve been wanting to play around with this PaperVison3D schtuff. Why? Well, I certainly do not use 3D in my job, I just wanted to! Unfortunately time demands, new baby and all, keep me from really digging into it. Add to this, almost all the stuff so far that I have seen is Flash based…as in not Flex. There are a couple Flex based examples. One is in the PaperVision3D source called FlexFocus. Another recent great example is from that master robe wearer Doug McCune himself. He calls it CoverFlow. In either of these Flex based cases, terms like Sprite and Clipping are used, Flash terms again that I’m not all familiar with. Though I can brag about playing with Sprites on the C64 and IBM PC way back when, but those were wholly different animals. Thus I sat down and employed the all to famous design patter: Hack It Up. The result? A cross of Canvas3D and Lee Brimelow’s Carousel FLA. [...]
Doesnt work when downloaded. All of the imports are not working. Suggestion?
Thanks!
I had a retarded moment. skip my comment.
I tried opening 3D carousel and my I getting unexpected format in macromedia. Can you let me know what i am doing wrong?
Thanks
Mike
[...] Vertical CoverFlow I refactored the code a little bit to allow me to easily change the 3D layout. This let me crank out a vertical version of the CoverFlow component in no time, shown here on the right. This is almost all the same code, just tweaked to lay things out vertically instead of horizontally. I figure this can be used for a sidebar widget. I had to remove the sweet web 2.0 reflections cause I didn’t know where they would go. The cool part about the refactored code is that the base component handles all the core stuff (like creating the 3d scene and planes, etc) and then each extension can simply modify the layout method. Sweet. Carousel Flex Component And while I was playing I couldn’t help taking some of Lee Brimelow’s code and making a 3D carousel Flex component. Thanks to Lee for doing the math for me. So here’s a Flex container to do that 3D carousel thingy. One sweet thing is that I took the same approach to preserve full interactivity of the child components. When the selected child is rotated to completely face the user the real child is swapped with the 3D plane and you can fully interact with it just like in a normal Flex app. [...]
marvelous i may say!
Hi Andrew,
Thanks for your tutorials.
I have tried to install and use the example provided ( Papervision3D Carousel Example FLA ) .
However I have problems with missing classes :
Line 5: missing class :
caurina.transitions
and Line 44 & 50:
undefined property “Tweener”
- Can you help me ?
best regards
Lars Bojen
Same problem with Lars when hitting ctrl + enter. Any one would like to help?
okay…. maybe I’m a bit lazy and new to actionscript ….Hey Lars just download the class in this site, the one for AS 3 and put the downloaded file in your actionscript folder like in the tutorial by master Lee. Here’s the link for the caurina : http://code.google.com/p/tweener/downloads/list
Cheers,
Frozen
Very nice!
My instinct makes me click and drag to try make it scroll.
I’m still upgrading to AS3 and also trying to jump into papervision…but these samples are so helpful! So, you are moving the camera instead of the dvds? Have you seen anything on loading in the bmp via xml so they can be dynamic?
[...] If you are comfortable with ActionScript 3.0 we encourage you to take a stab at building a similar carousel yourself. You can find the full .fla example on The Flash Blog, see Papervision3D Carousel Example FLA. [...]
Hey…
Dave wrote: “To make each panel clickable, I just added:
p.container.addEventListener(MouseEvent.CLICK, test);
In the ‘for’ loop at the end.”
Well, it just doesn’t work. What am I doing wrong? I’ve thougth of converting the bitmaps into buttons but I guess it’s an easier way… or?
Everything works just fine until I want to make it as buttons…
So, a little help would be nice…
hi,
the link to the fla file seems to be broken.
thanks.
It is true, the link of file its broken
It’s fixed now.
When I was trying to download this flv file, and I was told the couldn’t be opened. Please help.
thanks
Is there a way to make it dynamically pull the images from a XML file? It’s been asked before, but no one has answered it yet.
I’ve been playing around with papervision lately.
I’ve got the items in the background to scale down, I’d like to blur them. Is this possible in P3d?
thanks
[...] example is remake of Lee Brimelow’s example. I removed the tweener library and used the Flash Tween class.I also took the Actionscript code out [...]
this is a lovely file but whn i am downloadinh the fla. file its not working in my computer. i have a maac computer. will it work in PC ? please help
I understand everything in this FLA except for angleX. What the heck is that? What are we animating here? I know angleX is var you created, but what does it do? I thought you could only pass properties of a DisplayObject into Tweener (x, y, scaleX, rotation, alpha etc…)
To everyone who is trying to open the FLA and it doesn’t work. Try getting Flash CS3. How do you expect to work in AS3 and publish in Flash 9 in Flash 8? Duh!
I have a question say if instead of BitmapAssetMaterial you want to create a new Button and have it be scrollable. how can one do that?
Anyone else having trouble with angleX when rewriting Lee’s code to a own class?
It doesn’t make sense to animate a variable!
I have a great question if I have a 400×280 movie clip and put it on the carousel how do I get it so that it’s view at 100% (pixel perfect) when it’s at the front position. I can’t understand this and it always looks fuzzy. Would be good to understand how to fix this issue.
For my taste, there’s too much perspective in this example (just 3 of the images displaying their front side, while seeing the back side of the other 7). This makes me feel that the images are rather arranged in the form of an egg (when looked at from the top).
Anyway… if you want to have less perspective (and more images visible at a glance) increase the distance in the “render” method (the two values being 1000 in the example fla) while increasing the cam.zoom value right before the for loop. Just toy around with these values until the perspective looks like what you have in mind.
> Lee: thanks for making the code available, this stuff is really great!
Cheers.
Thanks for the tutorial.
Just a tip. Remove your render listener when your tween is done.
And just start it again when you click the next/previous button.
That way, you save your CPU memory from going through the roof!
Gday, i just finished installing Great White and attempted to export your .fla to see it in action, but it says
1046: Type was not found or was not a compile-time constant: MovieScene3D.
Thanks, Lee, for this awesome tutorial! It’s great for those of us just getting started with papervision. I have a question, though: I am trying to place an additional plane in the center of the carousel, that will always face towards the camera. Right now I have a plane at x:0, y:0, z:0, but since the camera is rotating around the carousel, this plane rotates too. I have been unable to figure out the math to make the center plane rotate with the camera. Any help you could offer in this area would be awesome. Also, is it possible to mask a 3D scene, say, with a 3D rectangle?
Thanks again Lee, love your tutorials!
Thanx Lee. And here is the Great White version.
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import caurina.transitions.*;
var numOfItems:int = 11;
var radius:Number = 800;
var anglePer:Number = (Math.PI*2) / numOfItems;
var viewport:Viewport3D = new Viewport3D(0, 0, true, true);
addChild(viewport);
viewport.buttonMode = true;
var renderer:BasicRenderEngine = new BasicRenderEngine();
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
camera.zoom = 2;
for(var i:uint=1; i<=numOfItems; i++)
{
var bam:BitmapAssetMaterial = new BitmapAssetMaterial(“s” + i);
bam.oneSide = false;
bam.smooth = true;
var p:Plane = new Plane(bam, 162, 230, 2, 2);
p.x = Math.cos(i*anglePer) * radius;
p.z = Math.sin(i*anglePer) * radius;
p.rotationY = (-i*anglePer) * (180/Math.PI) + 270;
scene.addChild(p);
}
var angleX:Number = anglePer;
var dest:Number = 1;
right.addEventListener(MouseEvent.CLICK, moveRight);
left.addEventListener(MouseEvent.CLICK, moveLeft);
this.addEventListener(Event.ENTER_FRAME, render);
function moveRight(e:Event):void
{
dest++;
Tweener.addTween(this, {angleX:dest*anglePer, time:0.5});
}
function moveLeft(e:Event):void
{
dest–;
Tweener.addTween(this, {angleX:dest*anglePer, time:0.5});
}
function render(e:Event):void
{
camera.x = Math.cos(angleX) * 1000;
camera.z = Math.sin(angleX) * 1000;
renderer.renderScene(scene, camera, viewport);
}
Ramma,
I have tried to get the Great White update working but it does not seem to be working for me. Can you post the FLA? I get it working but the images do not appear…I turned them into symbols and names them s# accordingly. I am using CS3 Pro and AS3…
Thanks so much!
Titus
PS. Thanks Lee for this amazing example, every one helps me learn!
I am having similar to Titus… CS3 Pro with AS3. When I Control Enter in Flash the Carousel.fla shows no errors and presents the screen with buttons but no visible images.
I also have AIR installed…
Any ideas?
sorry… seems I missed some errors. yes, I was missing Caurina… see Frozen’s post of Nov 26th
Thanks!
Hey Lee … I want to tell you that this tutorial helped me so much to getting started with Papervision3d and Actionscript 3.0! Yesterday I wrote a class for that carousel and I wanted to mention that it’s also possible to prevent the onEnterFrame action by using Tweener’s onUpdate function. So that would probably needs few performance. I hope this helps, but I could also post the source files here if anybody wants to know.
Thanks and greetings
hi,
I wonder if there’s any way to preload the pictures in each plane…i’m sure it is but any clue where to do that in the code ?
how do I make an image when clicked ?????
Armin,
I would love to see what you did I am trying to learn how to build my own.
I would like you to show itself as an image can focus on this application??????
Armin – please post your class as I am having issues getting mine to work.
Hey guys…sorry for late posting, but I also was busy because of work. But I have checked the version again and made some comments for understanding, i hope this helps, otherwise you can also contact me via e-mail or here.
Link: http://rapidshare.com/files/120377625/3DRotationMenuAS3.rar
wow… nice work…. i need popUp window script in flash can you tell me any url plz?
Thanks
hmm nice work i need flash script for popup window can you tell me any site?
thanks
I’m trying to drop the black background on the Reflection. Does anyone know how to do that?
hi Lee, I followed your 3D cube tutorial, and downloaded your latest snippets panel but when I copy to clipboard, I only get 4 imports and ar record “53″ errors on my output panel when I manually load the remaining classes……how can I update my snippets panel so that I can just copy them like you did??….pleeeeeeeeaaaaaaaaaseeeee reply:D
Marto
Africa.
Can i change the images by rollover?
This carousel is great! I need to rotate it on the x axis however (vertical rotation). I’ve changed it so that It does this but the results aren’t complete. Some of the images are flipped upside down and after a certain number of clicks the rotation reverses. Any ideas on this. I’m in dire straights.
If anyone knows where I can get serious professional papervision 3d help with this tutorial specifically please drop a line. I wanna use this exact 3d ‘engine’ but rotating on the x axis.
I downloaded the file and once I test it in Flash it stops displaying images…help?
I tryed to imigrate this tutorial to papervision 2.0 Great White, but there are some Problems with the angle mathematics or something like this, because there has somthing beeing changed in this version. After my imigration failed i visited this blog again and i saw that post #61 by Ramma is what I´m looking for, but there is the same bug when i use Ramma´s code… anyone else with the same Problem? Lee, is it possible for you to make a remake to the new PV3D Version + the .FLA File? Would be really great, I think many people are still looking for such a great Carousel like this one! Thank you (and sorry for my bad english)
- Mike
Hi, I also have tryed to transfer your code into it’s own class, and as I am a TweenLite fan, rtyed to avoid using tweener, and aslo have difficulties with angleX. does anyone have a suggestion? Of course I could use tweener( which I for no particular reason dislike) but was thinking there must also be a solution for tweenLite/tweenMax
cheers S
Hi Armin, when I tried to comply in CS3 I get the following error:
RotationMenu.as, Line 115 113:Incorrect number of arguemnts. Expected 1
Can you please help? Thanks
any idea how the photos can be turned into clickable photo with links? Thanks
how can I add a reflection effect to the carousel items, with code? THanks
hey there, i grabbed the great white code from ‘ramma’ above, but there seems to be some issues with the camera and objects. the whole camera seems skewed and distorts heavily – is this a zoom difference in the latest version of papervision? it gets really frustrating when pv3d keeps changing – half of the papervision tutorials online now seem broken, buggy, or simply won’t compile at all – makes it tough to learn.
Hello All,
I have used this file to make my own carousel. Here I have fetched all the images dynamically through xml. But I have found some error which I want to share and discuss with all of you.
List of Bugs:
————————————————————————————
1.If I use more than 11 images, it overlapping each other and not
maintaining the equal distance. I know you will advice me to change the radius. I have tried it but failed. Can anybody tell me what is the exact calculation to dife a radius. I think it is related to the plane height and no-of images also.
2. During the rotation event some images are blinking and changing.Why???????
Actually I want to make an cube rotation like this site http://www.mutabor.de/#/de/black/l/1/0/
In this website you will find a cube is rotating. I want to make like same. Can anybody help me????????
Here is my code:
****************************************************************
// Import Papervision Classes
import org.papervision3d.scenes.*;
import org.papervision3d.objects.*;
import org.papervision3d.cameras.*;
import org.papervision3d.materials.*;
import caurina.transitions.*;
import org.papervision3d.core.*;
import flash.display.*;
// Initial Variables
var picName:Array=new Array();
var picTitle:Array=new Array();
var picDes:Array=new Array();
var nn:Number=9;
var camPos:Number=950/9*nn;
var radius:Number = 800/9*nn;/**/
var zoom:Number=2;
var numOfItems:int;
var anglePer:Number;
var angleX:Number;
var dest:Number = 1;
//var back=new DrawBackground(200,8552960,”aa”,000000);
//addChild(back);
//var backMc:Sprite=new Sprite()
var con:Sprite = new Sprite();
con.x = stage.stageWidth * 0.5;
con.y = stage.stageHeight * 0.5;
addChild(con);
var scene:MovieScene3D = new MovieScene3D(con);
var cam:Camera3D = new Camera3D();
cam.zoom = zoom;
//– Loading XML
var xml:XML;
var XML_URL:String = “data/images.xml”;
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener(Event.COMPLETE, xmlLoaded);
//
//
function xmlLoaded(e:Event):void {
var i:Number;
xml = new XML(e.target.data);
numOfItems = xml.item.length();
anglePer= (Math.PI*3)/ nn;//numOfItems;
angleX = anglePer;
for (var i:Number =0; i<xml.item.length(); i++) {//
picName[i] = xml.item[i].@img;
picTitle[i] = xml.item[i].@titleTxt;
picDes[i] = xml.item[i].@des;
}
setImg();
//myLoader.removeEventListener(Event.COMPLETE, xmlLoaded);
}
function setImg():void {
for (var i:Number=0; i<=nn; i++) {//numOfItems
var bam:BitmapFileMaterial = new BitmapFileMaterial(picName[i]);
bam.oneSide = false;
//bam.smooth = true;
var p:Plane = new Plane(bam,470, 280,2, 2);
//var p:Cube = new Cube(bam,40, 280,200, 2,2,2);
p.x = Math.cos(i*anglePer) * radius;
p.z = Math.sin(i*anglePer) * radius;
p.rotationY = (-i*anglePer) * (180/Math.PI) + 270;
scene.addChild(p);
//trace(picName[i]);
trace(p.z)
}
//right.mask=back;
}
// Action on Left & Right Button
right.addEventListener(MouseEvent.CLICK, moveRight);
left.addEventListener(MouseEvent.CLICK, moveLeft);
this.addEventListener(Event.ENTER_FRAME, render);
function moveRight(e:Event):void {
dest++;
Tweener.addTween(this, {angleX:dest*anglePer, time:0.5});
}
function moveLeft(e:Event):void {
dest–;
Tweener.addTween(this, {angleX:dest*anglePer, time:0.5});
}
function render(e:Event):void {
cam.x = Math.cos(angleX) * camPos;
cam.z = Math.sin(angleX) * camPos;
scene.renderCamera(cam);
}
realy very nice…
How can make that each panel will be clickable individualy
Thanks for the great tutorial. Is it possible to modify the plane objects, such as adding a blur or alpha, so that some depth of field can be created? I can’t seem to figure out how to do this with the camera rotating around the carousel rather then the objects rotating in front of the camera.
http://www.flashden.net/item/real-3d-carousel/30362
Jay What is that
It was an exact copy of Lee’s file for sale that must have been removed. Just thought I’d let Lee know.
Maybe lee saw it before you cause the file was deleted when i clicked, So maybe the user got banned i think someone did your job before you
Hey there, has anyone figured out what the deal is with the angleX property? I saw someone suggested to change the variable to public, but that didn’t help me. I’ve never heard of using a variable as a tweening property.
Also, I’m trying to convert this over to version 2 of papervision. Everything works except for the next/previous buttons. Anyone have any ideas?
Marcel (@ comment 77) mentioned that there’s an issue when rotating the camera on the x-axis. It for some reason flips upside down.
You can somewhat reproduce the problem by changing cam.x at line 55 to cam.y
Any ideas?
re: camera flipping – solved/worked around this by rotating the con container 90 degrees, and every subsequent object in the 3D scene. Rotating the camera on the x axis now *appears* as if it’s rotating on the y
Hello,
Thanks a ton for those 3 tutorials on Carousel.
I have just one problem, which is, I would like the carousel to have functionality just like the above one. That is, it stays stable. and moves only when we click the prev and next btn. How to do that in the dynamic Carousel you have created in those carousels which work thru XML?
Thanks
how can i make this carousel with my own pictures?
Really cool effect….How would you make the thumbnails clickable.
carousel.fla is not opening in flash 8 please HELP
Hi,
im getting four errors,
Line 17 : 1.) 1046:type was not found or was not a compile-time constant:MovieScene3d.
Line 25 : 2.) 1046:type was not found or was not a compile-time constant:Plane.
Line 17 : 3.) 1180: Call to a possibly undefined method MovieScene3D.
Line 25 : 4.) 1180: Call to a possibly undefined method Plane.
can anyone help me on this…im pretty new to action scripting.
regards,
nitin
Greetings ~ I’m trying to run your example and its failing. And I’m not new to AS3! I get similar as as@Nitin:
1046: Type was not found or was not a compile-time constant: Plane.
The reason MovieScene3d and some of the other imports are no longer working is the latest version of PV (Great White) has changed the folder structure a tad. I’m working on a revised version.
I just downloaded the fla and the latest version of caurina and PPV (2.0.883). I initially got two errors for both “MovieScene3D” and “Plane”. I fixed the Plane error by adding
[CODE]import org.papervision3d.objects.primitives.*;[/CODE]
For the MovieScene3D error I did not find that class anywhere in any org folder. I did find it in PPV_1.5 so I copied it into the /scenes directory but now I get a
1020: Method marked override must override another method. This error references the MovieScene3D.as file.
Hi….cool effect…but i want same effect in as2….where can i get it??do you have any post related to it…
Can i make commertial use of this fla file. i want to use in a client’s website…
thanks
reply via mail please
[...] The Flash Blog » Papervision3D Carousel Example FLA – [...]
Hey, this carousel is cool, but anyone know how put the image to remain looking forward ? something like this http://blog.onebyonedesign.com/?p=101