Moving a gif with arrowkeys, causing error Uncaught TypeError: Object function (){throw"Ticker cannot be instantiated.";}

StackOverflow https://stackoverflow.com/questions/23555824

Question

I am a beginner at javascript. Like, REALLY beginner status.
My goal: I made a gif of a floating cat tied to a balloon. I would like to be able to move the gif around on a canvas using the arrow keys. Now, I have my gif on the canvas, and I can move it around with the arrow keys. However, the gif moves frame-by-frame as you move the arrow keys. I mean, it is a still gif until you move the arrow key once, then it advances by one frame.

If it is any help, here is my code:

<script>

var KEYCODE_LEFT = 37, 
    KEYCODE_RIGHT = 39,
    KEYCODE_UP = 38, 
    KEYCODE_DOWN = 40;
var myStage;
var floaty;

function keyPressed(event) {
    switch(event.keyCode) {
        case KEYCODE_LEFT:  
            floaty.x -= 5;
            break;
        case KEYCODE_RIGHT: 
            floaty.x += 5; 
            break;
        case KEYCODE_UP: 
            floaty.y -= 5;
            break;
        case KEYCODE_DOWN: 
            floaty.y += 5;
            break;
    }
    myStage.update();
}

function init(){
    myStage = new createjs.Stage(document.getElementById("myCanvas"))
    floaty = new balloon();
    floaty.x = 300;
    floaty.y = 200;
    myStage.addChild(floaty);

    createjs.Ticker.setFPS(6);
    createjs.Ticker.addEventListener("tick", drawNewFrame);
    }

function drawNewFrame(evt){ 
    myStage.update();
    }

function start(){
    this.document.onkeydown = keyPressed;
    }

</script>

And the body:

<body onload="init(); start();">
<canvas id="myCanvas" width="800" height="400"></canvas>
</body>

This is the error that I get:

Uncaught TypeError: Object function (){throw"Ticker cannot be instantiated.";} has no method 'addEventListener'

I want the gif to run continuously, not just advancing by one frame. I thought that "drawNewFrame" would get the gif to run continuously, but it isn't working.
I don't know what that error means. If anyone could lend me some assistance in figuring out what that error means, I would really appreciate it. Thank you ^_^

Was it helpful?

Solution

This error Uncaught TypeError: Object function (){throw"Ticker cannot be instantiated.";} has no method 'addEventListener' is related to a change in the way that the Ticker object handles Event Listeners from createjs version 0.5 to createjs version 0.7.

In version 0.5 it was somehitng like this:

createjs.Ticker.addListener(/*function to call*/)

In version 0.7 it was change to

createjs.Ticker.addEventListener('tick', /*function to call*/);

as per Reference (as per problem #2)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top