Carrousel How-to

Hi there,

First be sure you have either flash cs3 or flex2 installed on your machine, then you'll want to download the Papervision3d engine.

Now we can get started :)
Look in the code for instructions :)

Download Actionscript source file

And that's it, if you have any questions please post them!! :) We'd love to hear from you.
Lo.

6 Responses to “Carrousel How-to”

  1. Mark Says:

    Great idea for a blog! I hope to see more code like this :)

  2. C4RL05 Says:

    Good example with great comments. Congratulations for the new blog.

  3. anthony Says:

    thanks for great tutorial!
    i’m trying to make X Carrousel. I changed in render function camera positions:

    angle += (sp.mouseY) * 0.001;
    cam.y = Math.cos(angle) * 1350;
    cam.z = Math.sin(angle) * 1350;

    and in calculatePlanes function plane positions:

    tmpPlane.y = Math.cos(i * step) * radius;
    tmpPlane.z = Math.sin(i * step ) * radius;
    tmpPlane.rotationX = 90-stepDeg*i

    It all right, but the movement around X is has PI/2 period and than carrousel turns back.
    Help me please with this problem, I’m not so clever in trigonometry.

  4. Idoru Says:

    Hi anthony, sorry for the long delay in answering but time has been little.
    Regarding your question it seems that your period might be too great for the effect you want to, also could you leave an example of what you want to accomplish?
    Be sure to check that your angle is always valid.

  5. Nova Says:

    got the same problem here
    could u please have a look at it?

    http://behlersartgalerie.de/tmp/carousel.html

    sourcecode:

    //———————————————————
    import org.papervision3d.scenes.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.cameras.*;
    import org.papervision3d.materials.*;
    import caurina.transitions.*;

    var numOfItems:int = 10;
    var radius:Number = 800;
    var anglePer:Number = (Math.PI*2) / numOfItems;
    var dsf:DropShadowFilter = new DropShadowFilter(10, 45, 0×000000, 0.3, 6, 6, 1, 3);

    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 = 2;

    for(var i:uint=1; i<=numOfItems; i++)
    {
    var bam:BitmapAssetMaterial = new BitmapAssetMaterial(”s” + i);
    bam.oneSide = false;
    bam.smooth = false;
    var p:Plane = new Plane(bam, 162, 230, 2, 2);
    p.y = Math.cos(i*anglePer) * radius;
    p.z = Math.sin(i*anglePer) * radius;
    p.rotationX = (-i*anglePer) * (180/Math.PI) + 270;
    scene.addChild(p);
    p.container.filters = [dsf];
    }

    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
    {
    cam.y = Math.cos(angleX) * 1000;
    cam.z = Math.sin(angleX) * 1000;
    scene.renderCamera(cam);
    }
    //———————————————————————-

  6. Sacadura Says:

    anthony, try this:

    angle = (angle % (Math.PI*2));
    this will make sure you travel round the object without changing direction

    but remember that the cameras’ axis will still be aligned with its target

Leave a Reply