CAAT – Tutorial 2, Behaviors

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

This entry was posted in CAAT, CAAT-Tutorial. Bookmark the permalink.
  • aparadekto

    Hey, I can’t view your site properly within Opera, I actually hope you look into fixing this.

  • http://twitter.com/emgerold Moritz Gerold

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

  • http://twitter.com/emgerold Moritz Gerold

    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?

    • Anónimo

      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