3 files changed, 160 insertions, 0 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html
new file mode 100644
index 00000000..3e72acc0
--- /dev/null
+++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+        <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" type="text/css" href="css/Tween.css">
+        <script type="text/montage-serialization">
+                    {
+                        "owner": {
+                            "module": "js/panels/Timeline/Tween.reel",
+                            "name": "Tween",
+                            "properties": {
+                                "element": {"#": "tweenspace"},
+                                "keyframe": {"@": "keyframe"},
+                                "span": {"@": "span"},
+                                "tweencontainer": {"#": "tweencontainer"}
+                            }
+                        },
+                        
+                        "span": {
+                            "module": "js/panels/Timeline/Span.reel",
+                            "name": "Span",
+                            "properties": {
+                                "element": {"#": "span_container"}
+                            }
+                        },
+                        "keyframe": {
+                            "module": "js/panels/Timeline/Keyframe.reel",
+                            "name": "Keyframe",
+                            "properties": {
+                                "element": {"#": "keyframe_container"}
+                            }
+                        }
+                    }
+        </script>
+        </head>
+        <body>
+        <div id="tweenspace">
+            <div id="tweencontainer" class="tween_container">
+                <div id="span_container"></div>
+                <div id="keyframe_container"></div>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
new file mode 100644
index 00000000..64e998c3
--- /dev/null
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -0,0 +1,109 @@
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var Tween = exports.Tween = Montage.create(Component, {
+    hasTemplate:{
+        value: true
+    },
+    _spanWidth: {
+        value: 0
+    },
+    spanWidth: {
+        serializable:true,
+        get: function(){
+            return this._spanWidth;
+        },
+        set: function(value){
+            this._spanWidth = value;
+        }
+    },
+    _spanPosition:{
+        value: 0
+    },
+    spanPosition:{
+        serializable:true,
+        get:function () {
+            return this._spanPosition;
+        },
+        set:function (value) {
+            this._spanPosition = value;
+        }
+    },
+    _keyFramePosition:{
+        value:0
+    },
+    keyFramePosition:{
+        serializable:true,
+        get:function () {
+            return this._keyFramePosition;
+        },
+        set:function (value) {
+            this._keyFramePosition = value;
+        }
+    },
+    _keyFrameMillisec:{
+        value:0
+    },
+    keyFrameMillisec:{
+        serializable:true,
+        get:function () {
+            return this._keyFrameMillisec;
+        },
+        set:function (value) {
+            this._keyFrameMillisec = value;
+        }
+    },
+    _keyframeID:{
+        value:0
+    },
+    keyframeID:{
+        serializable:true,
+        get:function () {
+            return this._keyframeID;
+        },
+        set:function (value) {
+            this._keyframeID = value;
+        }
+    },
+    _timelineTrack:{
+        value:0
+    },
+    timelineTrack:{
+        serializable:true,
+        get:function () {
+            return this._timelineTrack;
+        },
+        set:function (value) {
+            this._timelineTrack = value;
+        }
+    },
+    prepareForDraw:{
+        value:function(){
+            this.keyframe.containingTrack = this.timelineTrack;
+        }
+    },
+    draw:{
+        value:function(){
+            this.span.spanWidth = this.spanWidth;
+            this.keyframe.position = this.spanWidth;
+            this.keyframe.timelinePosition = this.keyFramePosition;
+            this.keyframe.id = this.keyframeID;
+            this.tweencontainer.style.left = this.spanPosition + "px";
+        }
+    }
+});
diff --git a/js/panels/Timeline/Tween.reel/css/Tween.css b/js/panels/Timeline/Tween.reel/css/Tween.css
new file mode 100644
index 00000000..942f9fc9
--- /dev/null
+++ b/js/panels/Timeline/Tween.reel/css/Tween.css
@@ -0,0 +1,4 @@
+.tween_container{
+    height: 16px;
+    position: absolute;
+}
+\ No newline at end of file

diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html new file mode 100644 index 00000000..3e72acc0 --- /dev/null +++ b/js/panels/Timeline/Tween.reel/Tween.html
@@ -0,0 +1,47 @@
	1	<!DOCTYPE html>
	2	<html lang="en">
	3	<head>
	4	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	5	<link rel="stylesheet" type="text/css" href="css/Tween.css">
	6	<script type="text/montage-serialization">
	7	{
	8	"owner": {
	9	"module": "js/panels/Timeline/Tween.reel",
	10	"name": "Tween",
	11	"properties": {
	12	"element": {"#": "tweenspace"},
	13	"keyframe": {"@": "keyframe"},
	14	"span": {"@": "span"},
	15	"tweencontainer": {"#": "tweencontainer"}
	16	}
	17	},
	18
	19	"span": {
	20	"module": "js/panels/Timeline/Span.reel",
	21	"name": "Span",
	22	"properties": {
	23	"element": {"#": "span_container"}
	24	}
	25	},
	26
	27	"keyframe": {
	28	"module": "js/panels/Timeline/Keyframe.reel",
	29	"name": "Keyframe",
	30	"properties": {
	31	"element": {"#": "keyframe_container"}
	32	}
	33	}
	34	}
	35	</script>
	36	</head>
	37	<body>
	38
	39	<div id="tweenspace">
	40	<div id="tweencontainer" class="tween_container">
	41	<div id="span_container"></div>
	42	<div id="keyframe_container"></div>
	43	</div>
	44	</div>
	45
	46	</body>
	47	</html> \ No newline at end of file


diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js new file mode 100644 index 00000000..64e998c3 --- /dev/null +++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -0,0 +1,109 @@
	1	var Montage = require("montage/core/core").Montage;
	2	var Component = require("montage/ui/component").Component;
	3
	4	var Tween = exports.Tween = Montage.create(Component, {
	5
	6	hasTemplate:{
	7	value: true
	8	},
	9
	10	_spanWidth: {
	11	value: 0
	12	},
	13
	14	spanWidth: {
	15	serializable:true,
	16	get: function(){
	17	return this._spanWidth;
	18	},
	19	set: function(value){
	20	this._spanWidth = value;
	21	}
	22	},
	23
	24	_spanPosition:{
	25	value: 0
	26	},
	27
	28	spanPosition:{
	29	serializable:true,
	30	get:function () {
	31	return this._spanPosition;
	32	},
	33	set:function (value) {
	34	this._spanPosition = value;
	35	}
	36	},
	37
	38	_keyFramePosition:{
	39	value:0
	40	},
	41
	42	keyFramePosition:{
	43	serializable:true,
	44	get:function () {
	45	return this._keyFramePosition;
	46	},
	47	set:function (value) {
	48	this._keyFramePosition = value;
	49	}
	50	},
	51
	52	_keyFrameMillisec:{
	53	value:0
	54	},
	55
	56	keyFrameMillisec:{
	57	serializable:true,
	58	get:function () {
	59	return this._keyFrameMillisec;
	60	},
	61	set:function (value) {
	62	this._keyFrameMillisec = value;
	63	}
	64	},
	65
	66	_keyframeID:{
	67	value:0
	68	},
	69
	70	keyframeID:{
	71	serializable:true,
	72	get:function () {
	73	return this._keyframeID;
	74	},
	75	set:function (value) {
	76	this._keyframeID = value;
	77	}
	78	},
	79
	80	_timelineTrack:{
	81	value:0
	82	},
	83
	84	timelineTrack:{
	85	serializable:true,
	86	get:function () {
	87	return this._timelineTrack;
	88	},
	89	set:function (value) {
	90	this._timelineTrack = value;
	91	}
	92	},
	93
	94	prepareForDraw:{
	95	value:function(){
	96	this.keyframe.containingTrack = this.timelineTrack;
	97	}
	98	},
	99
	100	draw:{
	101	value:function(){
	102	this.span.spanWidth = this.spanWidth;
	103	this.keyframe.position = this.spanWidth;
	104	this.keyframe.timelinePosition = this.keyFramePosition;
	105	this.keyframe.id = this.keyframeID;
	106	this.tweencontainer.style.left = this.spanPosition + "px";
	107	}
	108	}
	109	});


diff --git a/js/panels/Timeline/Tween.reel/css/Tween.css b/js/panels/Timeline/Tween.reel/css/Tween.css new file mode 100644 index 00000000..942f9fc9 --- /dev/null +++ b/js/panels/Timeline/Tween.reel/css/Tween.css
@@ -0,0 +1,4 @@
	1	.tween_container{
	2	height: 16px;
	3	position: absolute;
	4	} \ No newline at end of file