CAAT – Tutorial 2, Behaviors

Refer to the new tutorials and demos page too:
CAAT tutorials and demos.

Advertisements

4 thoughts on “CAAT – Tutorial 2, Behaviors”

  1. Hey hyperandroid,

    i’ve tried to do a very simple animation with CAAT. I’ve clicked and search through most of the samples on the tutorial page, but didn’t find the error of my code. Would be great if you or anyone else could help me…

    cheers!

    The Error is:
    – his.path.getPosition is not a function
    – var point= this.path.getPosition(time);
    – caat.js (Zeile 3779)And thats the code:

        // DRAW THE CANVAS
        var director = new CAAT.Director().initialize(
            600,    // 100 pixels wide
            340,    // 100 pixels across
            document.getElementById(‘canv’));
           
         // CREATE FIRST SZENE
        var scene_bg = director.createScene();       

        // DECLARE COLORS
        var bmwgrey = ‘#888’;
        var bmwstreet = ‘#ccc’;
       
         // PAINT BG
        var bg = new CAAT.Actor().
            setBounds(0,0,600,340).
            enableEvents(false);
        bg.paint = function() {
            var ctx = director.ctx;   
            ctx.fillStyle = bmwgrey;
            ctx.fillRect(0,0, 600, 60);
            ctx.fillRect(0,280, 600, 60);
            ctx.fillStyle = bmwstreet;
            ctx.fillRect(0,60, 600, 220);
            ctx.fillStyle = “#FFF”;
            ctx.fillRect(0,60,600,3);
            ctx.fillRect(0,277,600,3);
        }
        // create a line
        line = new CAAT.ShapeActor().
              setLocation(20, (director.height / 2) – 4).
              setSize(100, 8).
              setShape(CAAT.ShapeActor.prototype.SHAPE_RECTANGLE).
              enableEvents(false).
              setFillStyle( ‘#FFF’ );
           
        // create a path.
        movingPath= new CAAT.PathActor().
        setBounds(0,0,600, 340).
            create().
            setPath(
                new CAAT.Path().beginPath(20,(director.height / 2) – 4).addLineTo(580, (director.height / 2) – 4).endPath().
            setInteractive(false));

        // moving the line
        var path_behavior= new CAAT.PathBehavior().
                setPath( movingPath ).
                setFrameTime(0,5000).
                setCycle(true).
                setAutoRotate( false );
       
        // ADD shapes and stuff
        scene_bg.addChild (bg);
        scene_bg.addChild(line);
        scene_bg.addChild( movingPath );
        line.addBehavior(path_behavior);
     
     
    CAAT.loop(30);

    Like

  2. okay… i’ve found the error… I used an pathActor instead of an simple path.
    But, how to change the direction of the path movement?

    setAutoRotate(true, CAAT.PathBehavior.autorotate.LEFT_TO_RIGHT)

    changing this to

    setAutoRotate(true, CAAT.PathBehavior.autorotate.RIGHT_TO_LEFT).

    didn’t work. any ideas?

    Like

    1. If you want to traverse the path inversely, you must set a different pathbehavior interpolator:
      pathbehavior.setInterpolator( new CAAT.Interpolator().createLinearInterpolator( false, true );

      false= no ping-pong (so only go throught the path)
      true= inverse.

      regards,
      -i

      2011/11/29 Disqus

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s