0

我在 Animate CC HTML 5 画布项目中创建按钮时遇到问题。我尝试在我的库中创建一个 MovieClip 实例，设置链接名称并在 MovieClip 中为每个状态创建一个帧，标记为“out”、“over”、“down”和“hit”。

在 CreateJS 中使用 ButtonHelper 类在一定程度上“有效”，产生了一个具有翻转状态的功能按钮，直到我尝试使用 .x 和 .y 属性将按钮重新定位在舞台上的其他位置。当我这样做时，命中状态似乎与电影剪辑的其余部分“分离” - 即要触发“翻转”帧，我必须将鼠标悬停在舞台右侧更下方和右侧的命中状态上。

我的 Animate CC 试用版现已过期，因此我正在尝试使用带有普通老式 HTML 的 CreateJS 库来解决我的问题。我创建了一个 spritesheet PNG 文件，其中包含三个 50px x 50px 的图像，等于 150px X 50px。我创建了一个 HTML 文档和 Javascript 代码，如下所示，但是当我单击“向下”或鼠标“悬停”它时，Sprite 按钮的状态没有改变。

我想知道是否有什么可以通过我的方式传递一些想法？我写的东西很可能有一个简单的错误，我自己工作并且放慢了对它的“代码盲”。

非常感谢，

戴夫

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sprite and Spritesheet Testing</title>
        <script type="text/javascript" src="js/easeljs-0.8.2.min.js"></script>
        <script type="text/javascript" src="js/preloadjs-0.6.2.min.js"></script>
        <script type="text/javascript" src="js/soundjs-0.6.2.min.js"></script>
    <script type="text/javascript" src="js/tweenjs-0.6.2.min.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <link type="text/css" rel="stylesheet" href="css/defaults.css" />
    </head>

    <body onload="init();">
        <h1>Using Sprites, SpriteSheets and ButtonHelper</h1>
        <p>Below should be some example buttons.  Hopefully this functionality can be recreated within Animate CC using the CreateJS libraries.</p>

        <!-- CreateJS content will be displayed here -->
        <canvas id="t26Canvas" width="749" height="737" class="setupCanvas">
            <h1>The internet browser you are currently using does not support the &lt;canvas/&gt; HTML 5 element.</h1>
        </canvas>

    </body>

</html>

Javascript：

/* Javascript required by the example page */

var HTML5Stage;
var spritesheet;
var data;
var myButton;
var myButtonHelper;

function init() {
    // Get the HTML5 <canvas/> element we are going to be using for the CreateJS content.
    HTML5Stage = new createjs.Stage("t26Canvas");
    // Set usable on touch devices
    createjs.Touch.enable(HTML5Stage);
    // Enable capturing of mouse rollover events
    HTML5Stage.enableMouseOver(30);
    setupSpriteSheet();
    addTestButton();
}


function setupSpriteSheet() {
        data = {
         images: ["images/ui/buttonsprites.png"],
         frames: {width: 50, height: 50},
         animations: {
            out: 0,
            over: 1,
            down: 2
         }
     };
    spritesheet = new createjs.SpriteSheet(data);
}

function addTestButton() {
    myButton = new createjs.Sprite(spritesheet);
    myButtonHelper = new createjs.ButtonHelper(myButton);
    HTML5Stage.addChild(myButton).set({x: 300, y: 100})
    HTML5Stage.update();
}
4

0 回答 0