5 files changed, 51 insertions, 9 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 0d769c23..8a4073c9 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 Copyright (c) 2012, Motorola Mobility LLC.
 All Rights Reserved.
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 521c315d..e037cccb 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -527,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
        set:function (newVal) {
            if (newVal !== this._millisecondsOffset) {
-                this.tempValue  = newVal;
+                this.zoomValue  = newVal;
                var tempValue = (1/newVal) * 1000000;
                newVal = tempValue;
@@ -1130,7 +1130,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
                this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
                this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
+                this.millisecondsOffset = this.application.ninja.currentDocument.tlZoomSliderValue ;
+                this.zoom_slider.value = this.application.ninja.currentDocument.tlZoomSliderValue;
                // Are we only showing animated layers?
                                if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {
@@ -1706,12 +1707,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
    zoomTrackContainerWidthChange:{
        value:function () {
-            this.tempValue = this.tempValue/1000;
+            if(this.application.ninja.currentDocument){
-            this.tempValue *= 30;
+                this.application.ninja.currentDocument.tlZoomSliderValue = this.zoomValue;
+            }
+            this.zoomValue = this.zoomValue/1000;
+            this.zoomValue *= 30;
-            this.container_tracks.style.width = (this.tempValue * 80) + "px";
+            this.container_tracks.style.width = (this.zoomValue * 80) + "px";
-            this.master_track.style.width = (this.tempValue * 80) + "px";
+            this.master_track.style.width = (this.zoomValue * 80) + "px";
-            this.time_markers.style.width = (this.tempValue * 80) + "px";
+            this.time_markers.style.width = (this.zoomValue * 80) + "px";
            if (this.timeMarkerHolder) {
                this.time_markers.removeChild(this.timeMarkerHolder);
            }
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
index cf6df347..cce01c90 100644
--- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
+++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -305,7 +305,7 @@ POSSIBILITY OF SUCH DAMAGE.
    top: 0;
    left: 0;
    position: absolute;
-    z-index: 91;
+    z-index: 1;
    opacity: 0.7;
 }
 .timebar{
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index f3ab0d84..56e5d2f1 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -354,6 +354,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
        }
    },
+    _enabled3D:{
+        value:false
+    },
+    enabled3D:{
+        serializable:true,
+        get:function () {
+            return this._enabled3D;
+        },
+        set:function (val) {
+            this._enabled3D = val;
+            this.trackData.enabled3D = val;
+        }
+    },
    _ruleList:{
        value:[]
    },
@@ -495,6 +509,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
            this.trackPosition = this.trackData.trackPosition;
            this.isVisible = this.trackData.isVisible;
            this.stageElement = this.trackData.stageElement;
+            this.enabled3D = this.trackData.enabled3D;
            this.trackEditorProperty = "master";
            this.needsDraw = true;
        }
@@ -1087,6 +1102,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
        }
    },
+    initial3DforAllTweens:{
+        value:function(){
+            var j;
+            var tweensLength = this.tweens.length;
+            for (j = 0; j < tweensLength; j++) {
+                this.tweens[j].tweenData.tweenedProperties["-webkit-transform"] = "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)";
+            }
+            this.enabled3D = true;
+        }
+    },
    addAnimationRuleToElement:{
        value:function (tweenEvent) {
            this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 0f567fbd..c9b59253 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -299,6 +299,10 @@ var Tween = exports.Tween = Montage.create(Component, {
                    this.parentComponent.parentComponent.updateKeyframeRule();
                    this.isTweenAnimated = true;
                }
+            if(!this.parentComponent.parentComponent.enabled3D){
+                this.parentComponent.parentComponent.initial3DforAllTweens();
+            }
                        
                        if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") {
                        var arrMat = eventDetail.data.value[0].properties.mat,
@@ -373,6 +377,12 @@ var Tween = exports.Tween = Montage.create(Component, {
                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");
                this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");
+                if(this.parentComponent.parentComponent.enabled3D){
+                    var current3DMatrix = this.tweenedProperties["-webkit-transform"];
+                    this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "-webkit-transform", [current3DMatrix], "Change", "tween");
+                }
            }
        }
    },

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 0d769c23..8a4073c9 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<!-- <copyright>	2	<!-- <copyright>
3	Copyright (c) 2012, Motorola Mobility LLC.	3	Copyright (c) 2012, Motorola Mobility LLC.
4	All Rights Reserved.	4	All Rights Reserved.


diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 521c315d..e037cccb 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -527,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
527	set:function (newVal) {	527	set:function (newVal) {
528	if (newVal !== this._millisecondsOffset) {	528	if (newVal !== this._millisecondsOffset) {
529		529
530	this.tempValue = newVal;	530	this.zoomValue = newVal;
531	var tempValue = (1/newVal) * 1000000;	531	var tempValue = (1/newVal) * 1000000;
532	newVal = tempValue;	532	newVal = tempValue;
533		533
@@ -1130,7 +1130,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1130	this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;	1130	this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
1131	this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;	1131	this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
1132	this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;	1132	this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
1133		1133	this.millisecondsOffset = this.application.ninja.currentDocument.tlZoomSliderValue ;
		1134	this.zoom_slider.value = this.application.ninja.currentDocument.tlZoomSliderValue;
1134		1135
1135	// Are we only showing animated layers?	1136	// Are we only showing animated layers?
1136	if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {	1137	if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {
@@ -1706,12 +1707,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1706	zoomTrackContainerWidthChange:{	1707	zoomTrackContainerWidthChange:{
1707	value:function () {	1708	value:function () {
1708		1709
1709	this.tempValue = this.tempValue/1000;	1710	if(this.application.ninja.currentDocument){
1710	this.tempValue *= 30;	1711	this.application.ninja.currentDocument.tlZoomSliderValue = this.zoomValue;
		1712
		1713	}
		1714
		1715	this.zoomValue = this.zoomValue/1000;
		1716	this.zoomValue *= 30;
1711		1717
1712	this.container_tracks.style.width = (this.tempValue * 80) + "px";	1718	this.container_tracks.style.width = (this.zoomValue * 80) + "px";
1713	this.master_track.style.width = (this.tempValue * 80) + "px";	1719	this.master_track.style.width = (this.zoomValue * 80) + "px";
1714	this.time_markers.style.width = (this.tempValue * 80) + "px";	1720	this.time_markers.style.width = (this.zoomValue * 80) + "px";
1715	if (this.timeMarkerHolder) {	1721	if (this.timeMarkerHolder) {
1716	this.time_markers.removeChild(this.timeMarkerHolder);	1722	this.time_markers.removeChild(this.timeMarkerHolder);
1717	}	1723	}


diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index cf6df347..cce01c90 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -305,7 +305,7 @@ POSSIBILITY OF SUCH DAMAGE.
305	top: 0;	305	top: 0;
306	left: 0;	306	left: 0;
307	position: absolute;	307	position: absolute;
308	z-index: 91;	308	z-index: 1;
309	opacity: 0.7;	309	opacity: 0.7;
310	}	310	}
311	.timebar{	311	.timebar{


diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f3ab0d84..56e5d2f1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -354,6 +354,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
354	}	354	}
355	},	355	},
356		356
		357	_enabled3D:{
		358	value:false
		359	},
		360	enabled3D:{
		361	serializable:true,
		362	get:function () {
		363	return this._enabled3D;
		364	},
		365	set:function (val) {
		366	this._enabled3D = val;
		367	this.trackData.enabled3D = val;
		368	}
		369	},
		370
357	_ruleList:{	371	_ruleList:{
358	value:[]	372	value:[]
359	},	373	},
@@ -495,6 +509,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
495	this.trackPosition = this.trackData.trackPosition;	509	this.trackPosition = this.trackData.trackPosition;
496	this.isVisible = this.trackData.isVisible;	510	this.isVisible = this.trackData.isVisible;
497	this.stageElement = this.trackData.stageElement;	511	this.stageElement = this.trackData.stageElement;
		512	this.enabled3D = this.trackData.enabled3D;
498	this.trackEditorProperty = "master";	513	this.trackEditorProperty = "master";
499	this.needsDraw = true;	514	this.needsDraw = true;
500	}	515	}
@@ -1087,6 +1102,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1087	}	1102	}
1088	},	1103	},
1089		1104
		1105	initial3DforAllTweens:{
		1106	value:function(){
		1107	var j;
		1108	var tweensLength = this.tweens.length;
		1109	for (j = 0; j < tweensLength; j++) {
		1110	this.tweens[j].tweenData.tweenedProperties["-webkit-transform"] = "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)";
		1111	}
		1112	this.enabled3D = true;
		1113	}
		1114	},
		1115
1090	addAnimationRuleToElement:{	1116	addAnimationRuleToElement:{
1091	value:function (tweenEvent) {	1117	value:function (tweenEvent) {
1092	this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";	1118	this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";


diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 0f567fbd..c9b59253 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -299,6 +299,10 @@ var Tween = exports.Tween = Montage.create(Component, {
299	this.parentComponent.parentComponent.updateKeyframeRule();	299	this.parentComponent.parentComponent.updateKeyframeRule();
300	this.isTweenAnimated = true;	300	this.isTweenAnimated = true;
301	}	301	}
		302
		303	if(!this.parentComponent.parentComponent.enabled3D){
		304	this.parentComponent.parentComponent.initial3DforAllTweens();
		305	}
302		306
303	if (eventDetail.source === "translateTool" \|\| eventDetail.source === "rotateTool") {	307	if (eventDetail.source === "translateTool" \|\| eventDetail.source === "rotateTool") {
304	var arrMat = eventDetail.data.value[0].properties.mat,	308	var arrMat = eventDetail.data.value[0].properties.mat,
@@ -373,6 +377,12 @@ var Tween = exports.Tween = Montage.create(Component, {
373	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");	377	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
374	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");	378	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");
375	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");	379	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");
		380
		381	if(this.parentComponent.parentComponent.enabled3D){
		382	var current3DMatrix = this.tweenedProperties["-webkit-transform"];
		383	this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "-webkit-transform", [current3DMatrix], "Change", "tween");
		384	}
		385
376	}	386	}
377	}	387	}
378	},	388	},