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

Question

表題の通りなのですが、読み込む画像が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;

Answer 1

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

Comments

[jeaw]

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

[kei344]

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

[jeaw]

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

Answer 2

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

Answer 3

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

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

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

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

Comments

[jeaw]

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