in 3D

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

Write a Comment

Comment

104 Comments

  1. 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!

  2. 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 !

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

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

  5. 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!

  6. 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 ;).

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

  8. To make each panel clickable, I just added:

    p.container.addEventListener(MouseEvent.CLICK, test);

    In the ‘for’ loop at the end.

  9. 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 ??

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

  11. 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?

  12. 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… :)

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

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

  15. 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…)

  16. 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?

  17. Anyone else having trouble with angleX when rewriting Lee’s code to a own class?

    It doesn’t make sense to animate a variable!

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

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

  20. 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!

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

  22. 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!

  23. 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);
    }

  24. 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!

  25. 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?

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

  27. 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 ?

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

  29. 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. :(

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

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

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

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

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

  35. 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);
    }

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

  37. 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?

  38. 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?

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

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

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

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

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

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

  45. Quick question. Having some trouble getting the FLA to run. I downloaded the additional plug-in files, but one error is returned.
    Tweener.as, Line 1 5007: An ActionScript file must have at least one externally visible definition.

    Can someone explain to me what I might be doing wrong? Thanks!

  46. about the angleX and setting the camera position with camera.x and camera.z:

    i’d suggest to use the camera.orbit(…) method instead.
    something like:
    camera.orbit(90,curAngleInDegrees);
    where curAngleInDegrees could be set like
    Tweener.addTween(this, {curAngleInDegrees:newAngleInDegrees, time:0.5});

  47. Hey …. I came up wd an issue.I just made whole setup of classes to run above carousal.but unfortunatly m getting null object reference for Scene3D class.I have instantiated that class & created object also but still it showing error of null object reference with Scene3D.
    I back traced application & i think there is a problem in SceneObject3D class which is the parent class for Scene3D.But m not getting what exactly it is.can neone help me on that???or has neone encounterd the same problem???

  48. i am working on cs5 and it display:

    Scene 1, Layer ‘actions’, Frame 1, Line 17 1046: Type was not found or was not a compile-time constant: MovieScene3D.
    Scene 1, Layer ‘actions’, Frame 1, Line 26 1046: Type was not found or was not a compile-time constant: Plane.
    Scene 1, Layer ‘actions’, Frame 1, Line 17 1180: Call to a possibly undefined method MovieScene3D.
    Scene 1, Layer ‘actions’, Frame 1, Line 26 1180: Call to a possibly undefined method Plane.

    is this a normal?
    is there any way to solve this problem