こんな感じ。今回は、これらの中身を簡単に見てみようと思った。sample.edgeファイルは単にEdgeアプリケーションが使うプロジェクトファイルみたいなので、いったん無視する。構成ファイルは、プロジェクト固有のものがsample.html, sample_edge.js, sample_edge.cssの3つ。あとはランタイムと思われるedge_includes。
（１）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>
（２）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();
});
（３）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 件のコメント:
コメントを投稿