From 6431037185722a63064c2f2fb31fe0e325c9653a Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Thu, 19 Jul 2012 10:19:41 -0700
Subject: FIx 3D animation workflow
Can now add 3D to any keyframe and all the tween will initialize their 3D identity matrices
Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
.../Timeline/TimelineTrack.reel/TimelineTrack.js | 26 ++++++++++++++++++++++
js/panels/Timeline/Tween.reel/Tween.js | 4 ++++
2 files changed, 30 insertions(+)
(limited to 'js/panels/Timeline')
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..e3f9e71a 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,
--
cgit v1.2.3
From 7b7f4157dfd1d3ad2b4a266c92594da56a619254 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Thu, 19 Jul 2012 11:58:23 -0700
Subject: Improve keyframe selection by moving playhead marker to lower z-index
Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 4 ++--
js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | 2 +-
js/panels/Timeline/Tween.reel/Tween.js | 6 ++++++
3 files changed, 9 insertions(+), 3 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index f9f5e98c..201b530e 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -113,7 +113,7 @@ POSSIBILITY OF SUCH DAMAGE.
.playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; visibility: hidden; }
/* line 291, ../scss/TimelinePanel.scss */
-.playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; }
+.playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 1; opacity: 0.7; }
/* line 301, ../scss/TimelinePanel.scss */
.timebar { height: 3px; width: 0; background-color: #ff0003; opacity: 0.3; top: 10px; position: absolute; border-top: #c7a19f thin solid; border-right: #ffffff thin solid; }
@@ -165,7 +165,7 @@ POSSIBILITY OF SUCH DAMAGE.
.tl_slider { width: 127px; height: 5px; float: left; clear: none; margin: 2px 0px 0px 0px; }
/* line 409, ../scss/TimelinePanel.scss */
-.tl_slider .slider-track { background: #29292; width: 127px; height: 4px; border: 1px solid #000; top: 3px; }
+.tl_slider .slider-track { background: #292929; width: 127px; height: 4px; border: 1px solid #000; top: 3px; }
/* line 417, ../scss/TimelinePanel.scss */
.sliderClass { float: left; width: 127px; }
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
index d2d813bb..b07c50b2 100644
--- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
+++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -295,7 +295,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/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index e3f9e71a..c9b59253 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -377,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");
+ }
+
}
}
},
--
cgit v1.2.3
From 6403ec6d21048c93138ddcbcc59fc4677121ed5e Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 19 Jul 2012 15:53:54 -0700
Subject: Timeline: updated livePreview to timeline play. Hide canvas and draw
red outline
- Changed the play button to a toggle button
- livePreview code in stage activated via bindings
- Draw a red outline of the canvas when in play
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
.../Timeline/TimelinePanel.reel/TimelinePanel.html | 22 ++++--
.../Timeline/TimelinePanel.reel/TimelinePanel.js | 31 ++++-----
.../TimelinePanel.reel/css/TimelinePanel.css | 81 ++++++++++++----------
.../TimelinePanel.reel/scss/TimelinePanel.scss | 26 ++++---
4 files changed, 96 insertions(+), 64 deletions(-)
(limited to 'js/panels/Timeline')
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index c287e68e..0d769c23 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE.
"playheadmarker": {"#": "playhead_marker"},
"timetext" : {"#": "time_text"},
"timebar" : {"#": "time_bar"},
- "container_tracks" : {"#" : "container-tracks"},
"end_hottext" : {"@" : "endHottext"},
"container_layers" : {"#" : "container-layers"},
"container_tracks" : {"#" : "container-tracks"},
@@ -62,8 +61,23 @@ POSSIBILITY OF SUCH DAMAGE.
"checkable_animated" : {"#" : "checkable_animated"},
"tl_configbutton" : {"#" : "tl-configbutton"},
"checkable_lock" : {"#" : "checkable_lock"},
- "checkable_visible":{"#" : "checkable_visible"},
- "play_button" : {"#" : "play_button"}
+ "checkable_visible":{"#" : "checkable_visible"}
+
+ }
+ },
+
+ "playButton": {
+ "prototype": "montage/ui/toggle-button.reel",
+ "properties": {
+ "element": {"#": "play_button"},
+ "identifier": "playButton",
+ "pressedClass": "pausebutton",
+ "pressedLabel": "",
+ "unpressedLabel": "",
+ "pressed": false
+ },
+ "bindings": {
+ "pressed": {"<->": "@owner.stage.timelinePlay"}
}
},
@@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
<div data-montage-id="leftpane_inside" class="leftinside">
<div data-montage-id="timeline_controller" class="timelinecontroller">
<div data-montage-id="timeline_controls" class="timelinecontrols">
- <div data-montage-id="play_button" class="playbutton"></div>
+ <button data-montage-id="play_button" class="playbutton"></button>
<div data-montage-id="time_text" class="timetext">00:00:00</div>
</div>
</div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 4e9771d4..521c315d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -36,6 +36,21 @@ var Montage = require("montage/core/core").Montage,
var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
+ _stage: {
+ value: null
+ },
+
+ stage: {
+ get: function() {
+ return this._stage;
+ },
+ set: function(value) {
+ if(value) {
+ this._stage = value;
+ }
+ }
+ },
+
/* === BEGIN: Models === */
_user_layers: {
value: null
@@ -1015,7 +1030,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
- this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false);
this.addPropertyChangeListener("currentDocument.model.domContainer", this);
// Start the panel out in disabled mode by default
@@ -1638,21 +1652,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
}
},
- handlePlayButtonClick:{
- value:function(ev){
- this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
-
- if (this.application.ninja.appModel.livePreview) {
- this.play_button.classList.remove("playbutton");
- this.play_button.classList.add("pausebutton");
-
- } else {
- this.play_button.classList.remove("pausebutton");
- this.play_button.classList.add("playbutton");
- }
- }
- },
-
handleKeyframeShortcut:{
value:function(action){
var tempEv = {};
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index f9f5e98c..f82feb71 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -68,107 +68,116 @@ POSSIBILITY OF SUCH DAMAGE.
.rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
/* line 150, ../scss/TimelinePanel.scss */
-.playbutton { background-image: url("../images/play.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
+.playbutton { background: transparent url("../images/play.png") no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; border: none; margin: 0; min-width: 0; opacity: 0.8; }
-/* line 158, ../scss/TimelinePanel.scss */
-.pausebutton { background-image: url("../images/pause.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
+/* line 162, ../scss/TimelinePanel.scss */
+.playbutton:hover { background-color: #474747; opacity: 1; }
/* line 166, ../scss/TimelinePanel.scss */
+.playbutton.active:hover { background-color: #474747; opacity: 1; }
+
+/* line 170, ../scss/TimelinePanel.scss */
+.playbutton:focus { -webkit-box-shadow: none; }
+
+/* line 173, ../scss/TimelinePanel.scss */
+.pausebutton { background-image: url("../images/pause.png"); }
+
+/* line 176, ../scss/TimelinePanel.scss */
.forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
-/* line 174, ../scss/TimelinePanel.scss */
+/* line 184, ../scss/TimelinePanel.scss */
.timelinemarkers { height: 20px; width: 100%; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; -webkit-box-flex: 0; position: absolute; background-image: url("../images/timetick.jpg"); overflow: visible; }
-/* line 186, ../scss/TimelinePanel.scss */
+/* line 196, ../scss/TimelinePanel.scss */
.layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; }
-/* line 196, ../scss/TimelinePanel.scss */
+/* line 206, ../scss/TimelinePanel.scss */
.masterlayer { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px black; height: 18px; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; color: white; padding-left: 15px; padding-top: 2px; }
-/* line 209, ../scss/TimelinePanel.scss */
+/* line 219, ../scss/TimelinePanel.scss */
.mastertrack { -webkit-box-flex: 0; color: white; height: 20px; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; background-color: #232323; background-image: url("../../Track.reel/images/gridline.jpg"); }
-/* line 223, ../scss/TimelinePanel.scss */
+/* line 233, ../scss/TimelinePanel.scss */
.container-tracks, .timelinemarkers, .mastertrack { width: 2000px; }
-/* line 226, ../scss/TimelinePanel.scss */
+/* line 236, ../scss/TimelinePanel.scss */
.userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; }
-/* line 235, ../scss/TimelinePanel.scss */
+/* line 245, ../scss/TimelinePanel.scss */
.timelinegutter { height: 16px; padding-top: 1px; padding-left: 6px; -webkit-box-flex: 0; background-color: #474747; border-top-style: solid; border-top-width: thin; border-top-color: #3a3a3a; }
-/* line 245, ../scss/TimelinePanel.scss */
+/* line 255, ../scss/TimelinePanel.scss */
.newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }
-/* line 253, ../scss/TimelinePanel.scss */
+/* line 263, ../scss/TimelinePanel.scss */
.deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }
-/* line 261, ../scss/TimelinePanel.scss */
+/* line 271, ../scss/TimelinePanel.scss */
.tracktick { height: 100%; width: 15px; border-right-color: #3a3a3a; border-right-style: solid; border-right-width: thin; float: left; }
-/* line 269, ../scss/TimelinePanel.scss */
+/* line 279, ../scss/TimelinePanel.scss */
.timemark { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; width: 76px; color: gray; float: left; padding-top: 6px; padding-left: 4px; text-align: left; }
-/* line 280, ../scss/TimelinePanel.scss */
+/* line 290, ../scss/TimelinePanel.scss */
.playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; visibility: hidden; }
-/* line 291, ../scss/TimelinePanel.scss */
+/* line 301, ../scss/TimelinePanel.scss */
.playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; }
-/* line 301, ../scss/TimelinePanel.scss */
+/* line 311, ../scss/TimelinePanel.scss */
.timebar { height: 3px; width: 0; background-color: #ff0003; opacity: 0.3; top: 10px; position: absolute; border-top: #c7a19f thin solid; border-right: #ffffff thin solid; }
-/* line 311, ../scss/TimelinePanel.scss */
+/* line 321, ../scss/TimelinePanel.scss */
.timelinegutter .endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; }
-/* line 319, ../scss/TimelinePanel.scss */
+/* line 329, ../scss/TimelinePanel.scss */
.timeline-disabled { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(30, 30, 30, 0.796); z-index: 100; display: none; box-shadow: #111111 0px 0px 14px inset; }
-/* line 330, ../scss/TimelinePanel.scss */
+/* line 340, ../scss/TimelinePanel.scss */
.timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); }
-/* line 333, ../scss/TimelinePanel.scss */
+/* line 343, ../scss/TimelinePanel.scss */
.tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; }
/* Configuration menu */
-/* line 342, ../scss/TimelinePanel.scss */
+/* line 352, ../scss/TimelinePanel.scss */
.layer-master { position: relative; }
-/* line 345, ../scss/TimelinePanel.scss */
+/* line 355, ../scss/TimelinePanel.scss */
.tl-configbutton { position: absolute; top: 0px; right: 2px; width: 20px; height: 20px; background-image: url(../images/icon-gear.png); background-repeat: no-repeat; cursor: pointer; z-index: 100; background-position: 100% 0px; }
-/* line 357, ../scss/TimelinePanel.scss */
+/* line 367, ../scss/TimelinePanel.scss */
.tl-configbutton:hover { width: 180px; }
-/* line 361, ../scss/TimelinePanel.scss */
+/* line 371, ../scss/TimelinePanel.scss */
.tl-configbutton .tl-dropdown { position: absolute; border: 1px solid black; top: 16px; right: 2px; width: 180px; padding-bottom: 7px; background-color: #474747; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); display: none; }
-/* line 372, ../scss/TimelinePanel.scss */
+/* line 382, ../scss/TimelinePanel.scss */
.tl-configbutton.checked .tl-dropdown { display: block; }
-/* line 376, ../scss/TimelinePanel.scss */
+/* line 386, ../scss/TimelinePanel.scss */
.tl-configbutton .checkable { padding-left: 20px; height: 20px; line-height: 20px; margin-top: 3px; }
-/* line 382, ../scss/TimelinePanel.scss */
+/* line 392, ../scss/TimelinePanel.scss */
.tl-configbutton .checkable:hover { background-color: #b2b2b2; color: #242424; text-shadow: none; }
-/* line 387, ../scss/TimelinePanel.scss */
+/* line 397, ../scss/TimelinePanel.scss */
.tl-configbutton .checkable.checked { background-image: url(../images/icon-checkmark.png); background-repeat: no-repeat; background-position: 6px 4px; }
-/* line 393, ../scss/TimelinePanel.scss */
+/* line 403, ../scss/TimelinePanel.scss */
.tl-configbutton .nj-divider { margin-top: 7px; }
-/* line 397, ../scss/TimelinePanel.scss */
+/* line 407, ../scss/TimelinePanel.scss */
.layer-hidden { display: none; }
-/* line 401, ../scss/TimelinePanel.scss */
+/* line 411, ../scss/TimelinePanel.scss */
.tl_slider { width: 127px; height: 5px; float: left; clear: none; margin: 2px 0px 0px 0px; }
-/* line 409, ../scss/TimelinePanel.scss */
-.tl_slider .slider-track { background: #29292; width: 127px; height: 4px; border: 1px solid #000; top: 3px; }
+/* line 419, ../scss/TimelinePanel.scss */
+.tl_slider .slider-track { background: #292929; width: 127px; height: 4px; border: 1px solid #000; top: 3px; }
-/* line 417, ../scss/TimelinePanel.scss */
+/* line 427, ../scss/TimelinePanel.scss */
.sliderClass { float: left; width: 127px; }
-/* line 422, ../scss/TimelinePanel.scss */
+/* line 432, ../scss/TimelinePanel.scss */
.sliderClass .knob { background: url(../images/knob.png) no-repeat transparent center center; margin-bottom: 2px; }
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
index d2d813bb..cf6df347 100644
--- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
+++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -148,20 +148,30 @@ POSSIBILITY OF SUCH DAMAGE.
padding-right: 5px;
}
.playbutton{
- background-image: url('../images/play.png');
- background-repeat: no-repeat;
+ background: transparent url("../images/play.png") no-repeat;
height: 18px;
width: 18px;
float: left;
padding-right: 5px;
+
+ border: none;
+ margin: 0;
+ min-width: 0;
+ opacity: 0.8;
+}
+.playbutton:hover {
+ background-color: #474747;
+ opacity: 1;
+}
+.playbutton.active:hover {
+ background-color: #474747;
+ opacity: 1;
+}
+.playbutton:focus {
+ -webkit-box-shadow: none;
}
.pausebutton{
- background-image: url('../images/pause.png');
- background-repeat: no-repeat;
- height: 18px;
- width: 18px;
- float: left;
- padding-right: 5px;
+ background-image: url("../images/pause.png");
}
.forwardbutton{
background-image: url('../images/play_next.png');
--
cgit v1.2.3