Edge Animateで作成したパーツをそのままアップロードできる場合は良いのですが、画像やJSの配置場所がすでに決まっておりそのままの配置ではアップロードできないことが多いと思います。
今回ブログのヘッダーをEdge Animateで作成したのですが、その際にデフォルトから変更した部分を紹介します。
<div id="Stage" class="EDGE-14275278"> </div>
この部分にアニメーションが挿入されるので、この部分を表示したい場所に移します。
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="header_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-14275278 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
あとはJSファイルの読み込みも移植します。
{プロジェクト名}_edgePreload.jsの読み込み先は本番環境のディレクトリに合わせて書き換えます。
aLoader = [
{ load: "edge_includes/jquery-1.7.1.min.js"},
{ load: "edge_includes/edge.2.0.0.min.js"},
{ load: "header_edge.js"},
{ load: "header_edgeActions.js"}];
上記の読み込みファイルのパスを環境に合わせて修正します。
ポスターを利用している場合は、
dlContent={
dom: [
{
id:'Poster2',
type:'image',
tag:'img',
linkURL:"http://coelacanth.heteml.jp/blog/",
rect:['0','0','980px','240px','auto','auto'],
fill:["rgba(0,0,0,0)",'images/Poster.png','0px','0px']
}]};//simpleContent
})( "EDGE-14275278");
この部分のPoster.pngの位置を適切なものに書き換えます。
このファイルの中の画像などの読み込みパスを修正します。
今回の場合以下のように画像の指定がありました。
"stage": {
version: "2.0.0",
minimumCompatibleVersion: "2.0.0",
build: "2.0.0.250",
baseState: "Base State",
initialState: "Base State",
gpuAccelerate: false,
resizeInstances: false,
content: {
dom: [
{
id:'head',
type:'image',
rect:['0px','0px','980px','240px','auto','auto'],
fill:["rgba(0,0,0,0)",'head.jpg','0px','0px']
},
{
head.jpgのパスを適切なものに書き換えます。
他にもアセットがある場合は書き換えが必要になると思います。
本番にアップするたびに上記のファイルを書き換えるのは骨です。
プロジェクト側のファイルパスを「http://~」という本番の絶対パスにすることである程度回避はできますが、リソースなどはパブリッシュする際に別ディレクトリーにコピーしようとするため、Web上のパスを指定しているとエラーになるようです。
というわけで、この辺の解決ができてないのですが、ソースコードをバージョン管理するなどして、変更を確認しながら管理するのが今のところ妥当かなと思っています。
Please give us your valuable comment