BitmapAnimataion wont show

manwith1000dreams's Avatar

manwith1000dreams

05 Mar, 2013 06:41 AM

I wrote my script like this.

<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>

<script type="text/javascript" src="src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="src/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="src/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="src/easeljs/display/SpriteSheet.js"></script>
<script type="text/javascript" src="src/easeljs/display/BitmapAnimation.js"></script>
<script type="text/javascript" src="src/easeljs/geom/Rectangle.js"></script>

</head>

<body>
    
<script>
var canvas;
var stage;
var rect;
var bottle;
function init() {
    canvas = new createjs.Stage("democanvas");
    //
    sheet = {"frames": [[120, 0, 60, 200, 0, -20, 0], [180, 0, 60, 200, 0, -20, 0], [240, 0, 58, 200, 0, -21, 0], [62, 0, 58, 200, 0, -21, 0], [0, 0, 62, 200, 0, -19, 0]], "images": ["swf/bottle.png"], "animations": {"sosro": {"frames": [1]}, "nu": {"frames": [2]}, "joy": {"frames": [0]}, "tra": {"frames": [4]}, "mizone": {"frames": [3]}}};
    
    var ss = new createjs.SpriteSheet(sheet);
    
    bottle = new createjs.BitmapAnimation(ss);
    
    canvas.addChild(bottle);
    bottle.x = 100;
    bottle.y = 100;
    
    createjs.Ticker.addEventListener('tick', canvas);
    
}

</script>

<canvas id="democanvas" width="500" height="200"  style="border:1px solid #000000; background-color:#999;" >alternate content</canvas>
    
    <script>
        init();
        </script>
</body>
</html>

But it didn't show anything? Just blank....
Is there something wring with my script? I used zoe to produce the sheet

  1. Support Staff 1 Posted by Lanny McNie on 05 Mar, 2013 05:44 PM

    Lanny McNie's Avatar

    When using BItmapAnimation, you must call gotoAndStop(frameOranimation) or gotoAndPlay(frameOrAnimation), or nothing will display. I added a gotoAndStop("joy"), and your demo works.

    Cheers.

  2. Lanny McNie closed this discussion on 05 Mar, 2013 05:44 PM.

  3. manwith1000dreams re-opened this discussion on 06 Mar, 2013 03:55 AM

  4. 2 Posted by manwith1000drea... on 06 Mar, 2013 03:55 AM

    manwith1000dreams's Avatar

    I'm sorry i have to re-open this. Not that i want to discuss this more.

    I just wanna say thanx to Lanny McNie, yes it works. Thanx for the pointer.
    And for the admin (maybe) for correcting my post. Thank you very much.

    GBU All

  5. Support Staff 3 Posted by Lanny McNie on 06 Mar, 2013 04:34 AM

    Lanny McNie's Avatar

    No problem. I edit most posts I respond to so the code is formatted properly.
    Cheers.

  6. Lanny McNie closed this discussion on 06 Mar, 2013 04:34 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

18 Dec, 2014 11:26 PM
18 Dec, 2014 09:03 PM
18 Dec, 2014 08:56 PM
18 Dec, 2014 07:26 PM
18 Dec, 2014 12:56 PM

 

18 Dec, 2014 09:38 AM
18 Dec, 2014 08:37 AM
17 Dec, 2014 11:52 PM
17 Dec, 2014 11:19 PM
17 Dec, 2014 10:41 PM
17 Dec, 2014 10:14 PM