Adobe Edge Animate入門その5 本番環境にアップする

水曜日 , 21, 8月 2013 Leave a comment

 Edge Animateで作成したパーツをそのままアップロードできる場合は良いのですが、画像やJSの配置場所がすでに決まっておりそのままの配置ではアップロードできないことが多いと思います。

 今回ブログのヘッダーをEdge Animateで作成したのですが、その際にデフォルトから変更した部分を紹介します。

 

 

index.html

 

<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の読み込み先は本番環境のディレクトリに合わせて書き換えます。

 

{プロジェクト名}_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の位置を適切なものに書き換えます。

 

{プロジェクト名}_edge.js

 このファイルの中の画像などの読み込みパスを修正します。

 今回の場合以下のように画像の指定がありました。

 

"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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください