2011年8月6日土曜日

Adobe Edge Previewの書き出しファイルを要点だけチェック

前回のエントリでは、Adobe Edge Previewの書き出しファイルが普通のHTML+JS+CSSファイルになると書きました。
こんな感じ。今回は、これらの中身を簡単に見てみようと思った。sample.edgeファイルは単にEdgeアプリケーションが使うプロジェクトファイルみたいなので、いったん無視する。構成ファイルは、プロジェクト固有のものがsample.html, sample_edge.js, sample_edge.cssの3つ。あとはランタイムと思われるedge_includes。


(1)sample.html
sample.htmlの中身はこんな感じで非常にシンプル。わかることは、
  • jqueryをベースに構築されてるらしい
  • アニメーションの制御はjQuery Easingを使っているらしい
  • EdgeランタイムもjQuery pluginとして作られてるみたい

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="sample_edge.js"></script>
    <link rel="stylesheet" href="sample_edge.css"/>
<!--Adobe Edge Runtime End-->

</head><body>
<div id="stage" class="symbol_stage">
</div>
</body>
</html>

(2)sample_edge.js
jsの中身を見てみる。やっていることは
  • symbolsという設定オブジェクトを作って、
  • $.Edgeオブジェクトに渡して再生
だけみたい。クリックイベントとかが入ってくるとこのへんはどうなるのかな。

/**
 * Adobe Helium: symbol definitions
 */
window.symbols = {
"stage": {
   version: "0.1",
   baseState: "Base State",
   initialState: "Base State",
   parameters: {

   },
   content: {
      dom: [
        {
            id:'Rectangle1',
            type:'rect',
            rect:[109,80,84,96],
            fill:['rgba(192,192,192,1)'],
            stroke:[0,"rgba(0,0,0,1)","none"],
        },
(略)
      ],
      symbolInstances: [
      ],
   },
   states: {
      "Base State": {
         "#RoundRect1": [
            ["transform", "originX", '50%'],
            ["transform", "rotateZ", '-31deg'],
            ["style", "border-style", 'dashed'],
            ["style", "border-width", '5px'],
            ["style", "width", '181px'],
            ["transform", "originY", '50%'],
            ["style", "height", '180px'],
            ["color", "border-color", 'rgba(255,0,0,1.00)'],
            ["transform", "translateY", '-3px'],
            ["style", "border-top-right-radius", [120,120],{valueTemplate:'@@0@@px @@1@@px'}]
         ],
(略)
      }
   },
   actions: {

   },
   bindings: [

   ],
   timelines: {
      "Default Timeline": {
         fromState: "Base State",
         toState: "",
         duration: 1000,
         timeline: [
            { id: "eid7", tween: [ "transform", "#RoundRect1", "translateY", '-3px', { valueTemplate: undefined, fromValue: '-3px'}], position: 0, duration: 0, easing: "linear" },
(略)
            { id: "eid28", tween: [ "transform", "#Rectangle1", "skewX", '39deg', { valueTemplate: undefined, fromValue: '0deg'}], position: 0, duration: 1000, easing: "linear" }]
      }
   },
}};

/**
 * Adobe Edge DOM Ready Event Handler
 */
$(window).ready(function() {
     $.Edge.initialize(symbols);
});
/**
 * Adobe Edge Timeline Launch
 */
$(window).load(function() {
    $.Edge.play();
});

(3)sample_edge.css
最後はCSSを見てみる。
  • domのIDは、Edgeアプリケーション上のシンボル名がそのまま使われるみたい。日本語シンボル名は無理かしら
  • オブジェクトの描画属性は単純にCSSプロパティだった。だからRectangleとRoundRectだった。
自由形状のSVGとかが入ると、このあたりはどうなるのかな。
/**
 * Adobe Edge(TM): Generated CSS
 * Do not edit this file.
 */

#RoundRect1 {
    border-style: dashed;
    border-width: 5px;
    width: 181px;
    height: 180px;
    border-color: rgba(255,0,0,1.00);
    -webkit-transform: translateY(-3px) rotate(-31deg);
    -moz-transform: translateY(-3px) rotate(-31deg);
    -ms-transform: translateY(-3px) rotate(-31deg);
    -o-transform: translateY(-3px) rotate(-31deg);
}
#stage {
    height: 400px;
    background-color: rgba(255,255,255,1);
    width: 550px;
}
#Rectangle1 {
    background-color: rgba(192,192,192,1.00);
    -webkit-transform: translateX(-30px) translateY(23px) skewX(0deg);
    -moz-transform: translateX(-30px) translateY(23px) skewX(0deg);
    -ms-transform: translateX(-30px) translateY(23px) skewX(0deg);
    -o-transform: translateX(-30px) translateY(23px) skewX(0deg);
}
#Text1 {
    -webkit-transform: translateX(-204px) translateY(-11px);
    -moz-transform: translateX(-204px) translateY(-11px);
    -ms-transform: translateX(-204px) translateY(-11px);
    -o-transform: translateX(-204px) translateY(-11px);
}

コピペしたファイルは、基本的に書き出しファイルそのまま。つまり改行やインデントなども維持されていて、書き出し後にいろいろと編集もできそうではある。バージョンが進むにつれて分からないけど。

0 件のコメント:

コメントを投稿