home
products
contribute
download
documentation
forum
Home
Forums
New posts
Search forums
What's new
New posts
All posts
Latest activity
Members
Registered members
Current visitors
Donate
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Search titles only
By:
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
MediaPortal 1
MediaPortal 1 Skins
Building a skin from scratch - a tour -
Contact us
RSS
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="mbuzina" data-source="post: 1004497" data-attributes="member: 12382"><p><span style="font-size: 18px">Next Up: Fun with animations on the musicOverlay</span></p><p><span style="font-size: 12px">I really got into the mood of animating, thanks to @<a href="https://forum.team-mediaportal.com/members/pog.97724/" target="_blank">Pog</a> 's idea on alternating selection. I wanted to have a nice Music Overaly that shows the running album along with the spinning CD. But most of all I wanted to have a nice animation on track change.</span></p><p> </p><p><span style="font-size: 12px">One big issue with that, there is no event you can listen to on track change. You have to do this manually. But how? Well I had the basic idea in my head earlier (check #currentplaytime & #currentremaining), but Pogs ideas pushed me all the way. I added the following hidden control:</span></p><p>[code=xml]<type>label</type></p><p><id>5545</id></p><p><label>#(switch(</p><p>eq(#currentplaytime,'0:00'),'Yes',</p><p>eq(#currentremaining,'0:05'),'Yes',</p><p>eq(#currentremaining,'0:04'),'Yes',</p><p>eq(#currentremaining,'0:03'),'Yes',</p><p>eq(#currentremaining,'0:02'),'Yes',</p><p>eq(#currentremaining,'0:01'),'Yes',</p><p>eq(#currentremaining,'0:00'),'Yes',</p><p>eq(1,1),''</p><p>))</label></p><p></control>[/CODE]</p><p> </p><p>Now lets have a look at the animations for the CD itself, here is the code:</p><p>[CODE=xml] <control Style="thumbStyle"></p><p> <type>image</type></p><p> <id>0</id></p><p> <zoom>true</zoom></p><p> <posX>135</posX></p><p> <posY>205</posY></p><p> <width>250</width></p><p> <height>250</height></p><p> <texture>..\..\..\Thumbs\CDArt\Music\#Play.Current.Artist - #Play.Current.Album.png</texture></p><p> <keepaspectratio>yes</keepaspectratio></p><p> <centered>yes</centered></p><p> <visible>player.hasmedia+[control.isvisible(10001)|control.isvisible(10002)|control.isvisible(10003)|control.isvisible(10004)|control.isvisible(10005)|control.isvisible(10006)|control.isvisible(10007)|control.isvisible(10008)|control.isvisible(10009)]</visible></p><p> <!-- animations to place the overlay on BasicHome --></p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="0,0" condition="control.isvisible(10001)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10001)">conditional</animation></p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="0,284" condition="control.isvisible(10002)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10002)">conditional</animation></p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="0,570" condition="control.isvisible(10003)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10003)">conditional</animation></p><p> </p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="840,0" condition="control.isvisible(10004)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10004)">conditional</animation></p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="840,284" condition="control.isvisible(10005)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10005)">conditional</animation></p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="840,570" condition="control.isvisible(10006)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10006)">conditional</animation></p><p> </p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="1680,0" condition="control.isvisible(10007)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10007)">conditional</animation></p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="1680,284" condition="control.isvisible(10008)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10008)">conditional</animation></p><p> <animation effect="slide" time="0" delay="11" start="0,0" end="1680,570" condition="control.isvisible(10009)">conditional</animation></p><p> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10009)">conditional</animation></p><p> </p><p> <!-- Simple fade on stop/start visibility --></p><p> <animation effect="fade" time="200" delay="20" easing="inout" condition="true">Visible</animation></p><p> <animation effect="fade" time="200" easing="inout" condition="true">Hidden</animation></p><p> </p><p> <!-- Slide the CD in view & fade on window open / out of view on window close --></p><p> <animation effect="slide" time="200" delay="200" start="-130,0" end="0,0" easing="out" tween="cubic" reversible="false">WindowOpen</animation></p><p> <animation effect="fade" time="200" delay="200" end="100">WindowOpen</animation></p><p> <animation effect="slide" time="200" delay="0" start="0,0" end="-130,0" easing="out" tween="cubic" reversible="false">WindowClose</animation></p><p> <animation effect="fade" time="200" delay="100" end="0">WindowClose</animation></p><p> </p><p> <!-- Slide the CD partly into the sleave on pause --></p><p> <animation effect="slide" time="200" delay="0" start="0,0" end="-60,0" easing="out" tween="cubic" condition="player.paused">Conditional</animation></p><p> </p><p> <!-- On Track Change slide the CD into the sleave completly, works best if on leftmost column, needs fade --></p><p> <animation effect="slide" delay="0" time="700" start="0,0" end="-395,0" easing="out" tween="cubic" reversible="false" condition="control.HasText(5545)">Conditional</animation></p><p> <animation effect="fade" delay="300" time="200" start="100" end="0" reversible="false" condition="control.HasText(5545)">Conditional</animation></p><p> <animation effect="slide" delay="0" time="700" start="-395,0" end="0,0" easing="out" tween="cubic" reversible="false" condition="!control.HasText(5545)">Conditional</animation></p><p> <animation effect="fade" delay="300" time="200" start="0" end="100" reversible="false" condition="!control.HasText(5545)">Conditional</animation></p><p> </p><p> <!-- Rotate the CD. Stop on pause, speedup on forwarding, reverse speed up on rewinding --></p><p> <animation effect="rotate" delay="0" end="-359" time="8000" loop="true" condition="player.playing+!player.paused+!player.rewinding+!player.forwarding">Conditional</animation></p><p> <animation effect="rotate" delay="0" end="-359" time="2000" loop="true" condition="player.playing+!player.paused+player.forwarding">Conditional</animation></p><p> <animation effect="rotate" delay="0" end="359" time="2000" loop="true" condition="player.playing+!player.paused+player.rewinding">Conditional</animation></p><p> </control>[/CODE]</p><p> </p><p>As you can see from the comments, a lot of different animation blocks. The first section you might already know from previous posts, it positions the control on the BasicHome page depending on the settings. I usually do that to a whole group, eliminating the need for these animations to appear on every control - but animations are applied in the order they come in and group animations are applied last. For the rotation animation to find the correct center, it has to be that last animation in the list (otherwise it will rotate around a center that is not within the CD, looks not good). So I had to take out the CD (and the background as well to keep the order of drawing in place).</p><p> </p><p>We have fade in on Visibility Change (for positioning). I might change that to the slide animation later on, right now it does not bother me too much.</p><p> </p><p>Then there is the window open animation that will combine with the thumb (the sleave) so that the CD slides into the cover and the cover slides out of view while fading (might need some more time checking). The same in reverse for window open, cover slides in, CD slides out of cover.</p><p> </p><p>Next up is a small gimmick on pause - not only will the CD stop spinning (see below), it will slide partly into the sleave.</p><p> </p><p>Now is the best part, I slide the CD into the sleave, sleave out of view, then the track changes, the sleave slides back into view and the cd slides out of it. I could watch this forever ;-)</p><p> </p><p>The last block is the rotation. Again I added a little gimmick: When fast forwarding, the CD spins notably faster (4x) and on rewinding it spins it backwards.</p><p> </p><p>Video will follow.</p></blockquote><p></p>
[QUOTE="mbuzina, post: 1004497, member: 12382"] [SIZE=5]Next Up: Fun with animations on the musicOverlay[/SIZE] [SIZE=3]I really got into the mood of animating, thanks to @[URL='https://forum.team-mediaportal.com/members/pog.97724/']Pog[/URL] 's idea on alternating selection. I wanted to have a nice Music Overaly that shows the running album along with the spinning CD. But most of all I wanted to have a nice animation on track change.[/SIZE] [SIZE=3]One big issue with that, there is no event you can listen to on track change. You have to do this manually. But how? Well I had the basic idea in my head earlier (check #currentplaytime & #currentremaining), but Pogs ideas pushed me all the way. I added the following hidden control:[/SIZE] [code=xml]<type>label</type> <id>5545</id> <label>#(switch( eq(#currentplaytime,'0:00'),'Yes', eq(#currentremaining,'0:05'),'Yes', eq(#currentremaining,'0:04'),'Yes', eq(#currentremaining,'0:03'),'Yes', eq(#currentremaining,'0:02'),'Yes', eq(#currentremaining,'0:01'),'Yes', eq(#currentremaining,'0:00'),'Yes', eq(1,1),'' ))</label> </control>[/CODE] Now lets have a look at the animations for the CD itself, here is the code: [CODE=xml] <control Style="thumbStyle"> <type>image</type> <id>0</id> <zoom>true</zoom> <posX>135</posX> <posY>205</posY> <width>250</width> <height>250</height> <texture>..\..\..\Thumbs\CDArt\Music\#Play.Current.Artist - #Play.Current.Album.png</texture> <keepaspectratio>yes</keepaspectratio> <centered>yes</centered> <visible>player.hasmedia+[control.isvisible(10001)|control.isvisible(10002)|control.isvisible(10003)|control.isvisible(10004)|control.isvisible(10005)|control.isvisible(10006)|control.isvisible(10007)|control.isvisible(10008)|control.isvisible(10009)]</visible> <!-- animations to place the overlay on BasicHome --> <animation effect="slide" time="0" delay="11" start="0,0" end="0,0" condition="control.isvisible(10001)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10001)">conditional</animation> <animation effect="slide" time="0" delay="11" start="0,0" end="0,284" condition="control.isvisible(10002)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10002)">conditional</animation> <animation effect="slide" time="0" delay="11" start="0,0" end="0,570" condition="control.isvisible(10003)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10003)">conditional</animation> <animation effect="slide" time="0" delay="11" start="0,0" end="840,0" condition="control.isvisible(10004)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10004)">conditional</animation> <animation effect="slide" time="0" delay="11" start="0,0" end="840,284" condition="control.isvisible(10005)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10005)">conditional</animation> <animation effect="slide" time="0" delay="11" start="0,0" end="840,570" condition="control.isvisible(10006)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10006)">conditional</animation> <animation effect="slide" time="0" delay="11" start="0,0" end="1680,0" condition="control.isvisible(10007)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10007)">conditional</animation> <animation effect="slide" time="0" delay="11" start="0,0" end="1680,284" condition="control.isvisible(10008)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10008)">conditional</animation> <animation effect="slide" time="0" delay="11" start="0,0" end="1680,570" condition="control.isvisible(10009)">conditional</animation> <animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(10009)">conditional</animation> <!-- Simple fade on stop/start visibility --> <animation effect="fade" time="200" delay="20" easing="inout" condition="true">Visible</animation> <animation effect="fade" time="200" easing="inout" condition="true">Hidden</animation> <!-- Slide the CD in view & fade on window open / out of view on window close --> <animation effect="slide" time="200" delay="200" start="-130,0" end="0,0" easing="out" tween="cubic" reversible="false">WindowOpen</animation> <animation effect="fade" time="200" delay="200" end="100">WindowOpen</animation> <animation effect="slide" time="200" delay="0" start="0,0" end="-130,0" easing="out" tween="cubic" reversible="false">WindowClose</animation> <animation effect="fade" time="200" delay="100" end="0">WindowClose</animation> <!-- Slide the CD partly into the sleave on pause --> <animation effect="slide" time="200" delay="0" start="0,0" end="-60,0" easing="out" tween="cubic" condition="player.paused">Conditional</animation> <!-- On Track Change slide the CD into the sleave completly, works best if on leftmost column, needs fade --> <animation effect="slide" delay="0" time="700" start="0,0" end="-395,0" easing="out" tween="cubic" reversible="false" condition="control.HasText(5545)">Conditional</animation> <animation effect="fade" delay="300" time="200" start="100" end="0" reversible="false" condition="control.HasText(5545)">Conditional</animation> <animation effect="slide" delay="0" time="700" start="-395,0" end="0,0" easing="out" tween="cubic" reversible="false" condition="!control.HasText(5545)">Conditional</animation> <animation effect="fade" delay="300" time="200" start="0" end="100" reversible="false" condition="!control.HasText(5545)">Conditional</animation> <!-- Rotate the CD. Stop on pause, speedup on forwarding, reverse speed up on rewinding --> <animation effect="rotate" delay="0" end="-359" time="8000" loop="true" condition="player.playing+!player.paused+!player.rewinding+!player.forwarding">Conditional</animation> <animation effect="rotate" delay="0" end="-359" time="2000" loop="true" condition="player.playing+!player.paused+player.forwarding">Conditional</animation> <animation effect="rotate" delay="0" end="359" time="2000" loop="true" condition="player.playing+!player.paused+player.rewinding">Conditional</animation> </control>[/CODE] As you can see from the comments, a lot of different animation blocks. The first section you might already know from previous posts, it positions the control on the BasicHome page depending on the settings. I usually do that to a whole group, eliminating the need for these animations to appear on every control - but animations are applied in the order they come in and group animations are applied last. For the rotation animation to find the correct center, it has to be that last animation in the list (otherwise it will rotate around a center that is not within the CD, looks not good). So I had to take out the CD (and the background as well to keep the order of drawing in place). We have fade in on Visibility Change (for positioning). I might change that to the slide animation later on, right now it does not bother me too much. Then there is the window open animation that will combine with the thumb (the sleave) so that the CD slides into the cover and the cover slides out of view while fading (might need some more time checking). The same in reverse for window open, cover slides in, CD slides out of cover. Next up is a small gimmick on pause - not only will the CD stop spinning (see below), it will slide partly into the sleave. Now is the best part, I slide the CD into the sleave, sleave out of view, then the track changes, the sleave slides back into view and the cd slides out of it. I could watch this forever ;-) The last block is the rotation. Again I added a little gimmick: When fast forwarding, the CD spins notably faster (4x) and on rewinding it spins it backwards. Video will follow. [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
MediaPortal 1
MediaPortal 1 Skins
Building a skin from scratch - a tour -
Contact us
RSS
Top
Bottom