1

Flash CC で構築されたアニメーション ベースの html プロジェクトがあり、プリロードを個別に行うのに苦労しています。

私がやろうとしていることは次のとおりです。

  1. 1 つの画像を読み込み (「お待ちください」と表示)、createjs エクスポートを行います。
  2. アニメーションはタイムラインの先頭で停止します。ここで関数を呼び出します。
  3. いくつかのアセットをロードします。
  4. アニメーションを開始
  5. タイムライン上の特定のポイントでアニメーションを停止します。次に、アニメーションの次の部分のアセットを読み込みます。
  6. ロードが完了したら、アニメーションを続行します。等

すべてのアセットを読み込んでアニメーション全体を再生しても問題ありません。しかし、マニフェストを分離することになると。必要なファイルをロードしてアニメーションを続行しますが、ロードされた画像がキャンバスに表示されません。

以下のコードをhtmlのinit.jsファイルとして使用しています。

var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    images = images||{};
    preloadLaunch(); 
}

function preloadLaunch(){
    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifestLaunch); //selects the manifest from createjs export,  first image says please wait.
}


function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
    exportRoot = new lib.project();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage); 
}


/// triggers from animation timeline
function preloadPart01() {
    var loader01 = new createjs.LoadQueue(false);
    loader01.addEventListener("fileload", handleFileLoad);
    loader01.addEventListener("complete", start);
    loader01.loadManifest(lib.properties.manifestPart01); //selects the manifest from createjs export   
}

function start() {
    stage.update();
    exportRoot.animation.gotoAndPlay("START"); // files are loaded in manifestPart01 and starts the animation, but loaded images are not visible.
}

「getResult」のことだと思っていたのですが、コードに実装できませんでした。喜んでお手伝いさせていただきます。

どうもありがとうございました。

4

1 に答える 1

0

これが機能しない理由は、 をインスタンス化するexportRootと、ビットマップ インスタンスを含め、exportRoot が必要とするすべてのコンテンツがタイムラインに構築されるためです。ビットマップは、グローバルimagesオブジェクトに保存されているロード済みイメージを使用してインスタンス化されるため、コンテンツをまだプリロードしていない場合は、nullイメージが与えられます。セカンダリ コンテンツをロードするときにビットマップを更新するメカニズムはありません。

エクスポートされたライブラリの Bitmap インスタンスのスニペットを次に示します。

(lib.BitmapName = function() {
    this.initialize(img.BitmapName); // THIS WILL BE NULL IF LOADED LATER
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,600,800);

グローバルオブジェクトで参照を事前に作成し、後で更新することで、これを回避できるはずです。images

// Pre-create dummy instances BEFORE you create the `exportRoot`
var manifest = lib.properites.manifestPart01;
for (var i=0, l=manifest.length; i<l; i++) {
    images[manifest.id] = document.createElement("img"); // Empty instances
    // Note: Don't set src
}

次に、handleFileLoadメソッドで、インスタンスが存在する場合は更新します。

function handleFileLoad(evt) {  
    if (evt.item.type == "image") { 
        if (images[evt.item.id] != null) {
            // Just update the existing instance.
            images[evt.item.id].src = evt.result.src;
        } else {
            // Original behaviour
            images[evt.item.id] = evt.result; 
        }
    }   
}

ライブラリアイテムが作成されたときに画像インスタンスが存在する限り、画像が読み込まれると表示されるため、これは機能するはずです。これは src プロパティを設定するため、画像がブラウザのキャッシュから取り出されるまで少し時間がかかることに注意してください (通常は完全なティック)。

完全な開示 - 私はこれをテストしませんでしたが、EaselJS について知っていることに基づいて、問題なく動作するはずです。これがうまくいくかどうか聞いてみたいです。

1 つの追加の注意: ステージを更新する Ticker がある場合stage.update()、メソッドで余分な呼び出しを行う必要はありませんstart(理由もなく余分な描画を行うだけです)。

于 2016-12-26T17:59:47.603 に答える