Question

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

在CreateJS中使用ButtonHelper类已经“工作”，在某种程度上，生成一个具有翻转状态的功能按钮，直到我尝试使用.x和.y属性重新定位其他位置在舞台上的按钮。当我这样做时，命中状态似乎与MovieClip的其余部分“分离” - 即触发“翻转”框架，我将不得不将鼠标悬停在阶段右下方的命中状态。 / p>

我的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();
}

CreateJS - Sprite / ButtonHelper问题

0 个答案: