0

Animate CC HTML 5 キャンバス プロジェクトでのボタンの作成に問題があります。ライブラリに MovieClip インスタンスを作成し、リンケージ名を設定して、「アウト」、「オーバー」、「ダウン」、「ヒット」のラベルが付いた各状態のムービークリップにフレームを作成しようとしました。

CreateJS で ButtonHelper クラスを使用すると、.x および .y プロパティを使用してステージ上の別の場所にボタンを再配置しようとするまで、ロールオーバー状態で機能するボタンが生成され、ある程度「機能」しました。これを行うと、ヒット状態が MovieClip の残りの部分から「分離」しているように見えます。つまり、「ロールオーバー」フレームをトリガーするには、ステージのさらに下と右側にあるヒット状態にマウスを合わせる必要があります。

Animate CC の試用期間が終了したので、昔ながらの HTML で CreateJS ライブラリを使用する際の問題を解決しようとしています。3 つの 50px x 50px の画像を含むスプライトシート PNG ファイルを作成しました。これは 150px X 50px に相当します。以下に続くHTMLドキュメントとJavascriptコードを作成しましたが、スプライトボタンの状態が「下」または「上」をクリックしても変化しません。

私は何かが私の方法でいくつかのアイデアを渡すことができるのだろうか? 私が書いたものには単純な誤りがあるかもしれません.

どうもありがとう、

デイブ

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