質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

Animate CC で作ったアニメーションをwordpressで表示したい。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,307

score 11

表題の通りなのですが、読み込む画像が404になってしまい、アニメーションが表示されない状況です。
アニメーションはcanvasにしています。

wordpressのディレクトリパスを取得する”<?php echo get_template_directory_uri(); ?>”を、
該当の画像を読み込んでいるところに付け加えればいいのかと思うのですが、
その該当の画像を読み込んでいるところはどこなのか分からず、または、違う記述をしなくてはならないのか・・・

すみませんがお力を貸してください。よろしくお願いいたします。


Animate CC 2015 を使用しています。

エラー内容(chrome)
エラーは以下の2件でした。

GET https://サイトパス/images/test_animation_atlas_.png 404 (Not Found)
Image (async)        
b.load    @    createjs-2015.11.26.min.js:15
b.load    @    createjs-2015.11.26.min.js:15
b.load    @    createjs-2015.11.26.min.js:16
b._loadItem    @    createjs-2015.11.26.min.js:15
b._loadNext    @    createjs-2015.11.26.min.js:15
b.setPaused    @    createjs-2015.11.26.min.js:15
b.loadManifest    @    createjs-2015.11.26.min.js:15
b._loadManifest    @    createjs-2015.11.26.min.js:16
b.handleEvent    @    createjs-2015.11.26.min.js:16
(anonymous)    @    createjs-2015.11.26.min.js:12
b._dispatchEvent    @    createjs-2015.11.26.min.js:12
b.dispatchEvent    @    createjs-2015.11.26.min.js:12
b._sendComplete    @    createjs-2015.11.26.min.js:15
b.handleEvent    @    createjs-2015.11.26.min.js:15
(anonymous)    @    createjs-2015.11.26.min.js:12
b._dispatchEvent    @    createjs-2015.11.26.min.js:12
b.dispatchEvent    @    createjs-2015.11.26.min.js:12
b._handleLoad    @    createjs-2015.11.26.min.js:15
b._handleReadyStateChange    @    createjs-2015.11.26.min.js:15
(anonymous)    @    createjs-2015.11.26.min.js:16
XMLHttpRequest.send (async)        
b.load    @    createjs-2015.11.26.min.js:15
b.load    @    createjs-2015.11.26.min.js:15
b.load    @    createjs-2015.11.26.min.js:15
b._loadItem    @    createjs-2015.11.26.min.js:15
b._loadNext    @    createjs-2015.11.26.min.js:15
b.setPaused    @    createjs-2015.11.26.min.js:15
b.loadFile    @    createjs-2015.11.26.min.js:15
init    @    (index):129
onload    @    (index):48


GET https://サイトパス/images/test_animation_atlas_.png 404 (Not Found)
Image (async)
b._parseData @ createjs-2015.11.26.min.js:12
a @ createjs-2015.11.26.min.js:12
b._handleManifestComplete @ createjs-2015.11.26.min.js:16
(anonymous) @ createjs-2015.11.26.min.js:12
b._dispatchEvent @ createjs-2015.11.26.min.js:12
b.dispatchEvent @ createjs-2015.11.26.min.js:12
b._sendComplete @ createjs-2015.11.26.min.js:15
b._loadNext @ createjs-2015.11.26.min.js:15
b._handleError @ createjs-2015.11.26.min.js:15
(anonymous) @ createjs-2015.11.26.min.js:12
b._dispatchEvent @ createjs-2015.11.26.min.js:12
b.dispatchEvent @ createjs-2015.11.26.min.js:12
b._sendError @ createjs-2015.11.26.min.js:15
b.handleEvent @ createjs-2015.11.26.min.js:15
(anonymous) @ createjs-2015.11.26.min.js:12
b._dispatchEvent @ createjs-2015.11.26.min.js:12
b.dispatchEvent @ createjs-2015.11.26.min.js:12
b._handleError @ createjs-2015.11.26.min.js:15
(anonymous) @ createjs-2015.11.26.min.js:16

スクリプト

<script>
    var canvas, stage, exportRoot;
    function init() {

    canvas = document.getElementById("canvas");
    images = images||{};
    ss = ss||{};

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadFile({src:"<?php echo get_template_directory_uri(); ?>/images/test_animation_atlas_.json", type:"spritesheet", id:"test_animation_atlas_"}, true);
    loader.loadManifest(lib.properties.manifest);
    }

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

    function handleComplete(evt) {
        var queue = evt.target;
        ss["test_animation_atlas_"] = queue.getResult("test_animation_atlas_");
        exportRoot = new lib.test_animation();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        stage.update();

        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
    }
</script>

追記
test_animation.js の中身です。
中略の部分は、アニメーションの指定をしているところでしたので略しました。
.jsonの中身は、画像のファイル名と、数字のみでしたので省きました。
すみませんがよろしくお願いいたします。

(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes
lib.webFontTxtFilters = {}; 

// library properties:
lib.properties = {
    width: 1920,
    height: 950,
    fps: 24,
    color: "#FFFFFF",
    webfonts: {},
    manifest: []
};



lib.webfontAvailable = function(family) { 
    lib.properties.webfonts[family] = true;
    var txtFilters = lib.webFontTxtFilters && lib.webFontTxtFilters[family] || [];
    for(var f = 0; f < txtFilters.length; ++f) {
        txtFilters[f].updateCache();
    }
};
// symbols:



(lib._01_test_site = function() {
    this.spriteSheet = ss["test_animation_atlas_"];
    this.gotoAndStop(0);
}).prototype = p = new cjs.Sprite();



(lib._02_camera = function() {
    this.spriteSheet = ss["test_animation_atlas_"];
    this.gotoAndStop(1);
}).prototype = p = new cjs.Sprite();


【中略】

// stage content:
(lib.test_animation = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    this.instance = new lib._17_adban_right();
    this.instance.setTransform(787.9,814.3,0.183,0.183);

【中略】

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(1385.6,597.9,3690.1,474.9);

})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

test_animation_atlas_.json の中に画像URLが書かれている箇所はありませんか?それをすべてhttpから始まるパスに置き換えてみてはいかがでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/20 10:06

    回答ありがとうございます。
    jsonの中にも画像URLが書かれていたのでhttpから書き込んでみたのですがエラーは同じでした。
    ところで、chromeの検証で、Sources内のNetworkタブを見ていたところ、imagesフォルダが表示されていなかったのですが、imagesフォルダが読み込まれていないということですよね?
    すると、imagesフォルダ自体へのパスを書くところがあるのかなと思ったのですが、Javascriptの記述が読めず・・・
    すみませんが見当は付きますでしょうか?
    よろしくお願いします。

    キャンセル

  • 2018/03/25 16:20

    JSONの中身や書かれていない部分のJavaScriptも質問文に追記されてはいかがでしょうか。

    キャンセル

  • 2018/03/26 17:28

    ありがとうございます。
    追記させていただきました。

    キャンセル

check解決した方法

0

Animate CC 2018 で書き出したら、問題は解消されました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

get_template_directory_uri();はWPのテンプレートファイルがあるディレクトリまでのパスです。

test_animation_atlas_.pngが404not foundと出ているので、ファイルを格納している場所は合っていますか?

WPのテンプレートファイルは
wp-content/themes/テンプレート名/
の中に入っています。

wp-content/themes/テンプレート名/images/
ディレクトリの中にtest_animation_atlas_.pngを入れてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/20 10:07

    回答ありがとうございます。
    こちらもう一度確認しましたが、きちんとファイルは入っていました。
    ただ、画像へのフルパスを打ち込んでも404になってしまうので、よく調べたところ、imagesフォルダが読み込まれていないような感じでした。
    imagesフォルダまでのパスをどこかで設定できると思うのですが、私にはわからず・・・
    すみませんがまた何かわかりましたら教えてください。
    よろしくお願いいたします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る