Building a skin from scratch - a tour - (3 Viewers)

Pog

Pog

Retired Team Member
  • Premium Supporter
    • September 7, 2009
    401
    315
    Wicklow
    Home Country
    Ireland Ireland
    Alright, code for both spinning and flipping... you can see the effect of both types at once.

    Code: 
    <!-- Cover Spin Timer -->
	<control>
	  <type>label</type>
	  <id>5544</id>
	  <label>#(iif(lt(sub(
		add(mul(cint(string.trim(string.rtrim(#currentplaytime,'0123456789'),':')),60),cint(string.trim(string.ltrim(#currentplaytime,'0123456789'),':'))),
		mul(div(add(mul(cint(string.trim(string.rtrim(#currentplaytime,'0123456789'),':')),60),cint(string.trim(string.ltrim(#currentplaytime,'0123456789'),':'))),
		10),10)),2),' ',''))</label>
	</control>
<!-- Cover Spin Front/Back/Front/FrontHold -->
	<control>
	  <type>image</type>
	  <posX>300</posX>
	  <posY>250</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="2000" center="550,0" start="0" end="-360" tween="sine" easing="inout" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="700" time="50" start="100" end="0" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>300</posX>
	  <posY>250</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
	  <animation effect="rotatey" time="2000" center="550,0" start="-180" end="-540" tween="sine" easing="inout" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="700" time="50" start="0" end="100" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>300</posX>
	  <posY>250</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="2000" center="550,0" start="0" end="-360" tween="sine" easing="inout" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="1400" time="50" start="0" end="100" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>300</posX>
	  <posY>250</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <visible>!Control.HasText(5544)</visible>
	</control>
 
		   
<!-- Cover Flip Timer -->
	<control>
	  <type>label</type>
	  <id>5545</id>
	  <label>#(iif(lt(sub(
		add(mul(cint(string.trim(string.rtrim(#currentplaytime,'0123456789'),':')),60),cint(string.trim(string.ltrim(#currentplaytime,'0123456789'),':'))),
		mul(div(add(mul(cint(string.trim(string.rtrim(#currentplaytime,'0123456789'),':')),60),cint(string.trim(string.ltrim(#currentplaytime,'0123456789'),':'))),
		10),10)),5),' ',''))</label>
	</control>
<!-- Cover Flip Front/Back/Back/Front -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>250</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="1000" center="1250,0" start="0" end="-180" tween="sine" easing="inout" loop="false" reversible="false" condition="Control.HasText(5545)">conditional</animation>
	  <animation effect="fade" delay="400" time="50" start="100" end="0" condition="Control.HasText(5545)">conditional</animation>
	  <visible>Control.HasText(5545)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>250</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
	  <animation effect="rotatey" time="1000" center="1250,0" start="-180" end="-360" tween="sine" easing="inout" loop="false" reversible="false" condition="Control.HasText(5545)">conditional</animation>
	  <animation effect="fade" delay="400" time="50" start="0" end="100" condition="Control.HasText(5545)">conditional</animation>
	  <visible>Control.HasText(5545)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>250</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
	  <animation effect="rotatey" time="1000" center="1250,0" start="-360" end="-540" tween="sine" easing="inout" loop="false" reversible="false" condition="!Control.HasText(5545)">conditional</animation>
	  <animation effect="fade" delay="420" time="50" start="100" end="0" condition="!Control.HasText(5545)">conditional</animation>
	  <visible>!Control.HasText(5545)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>250</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="1000" center="1250,0" start="-180" end="-360" tween="sine" easing="inout" loop="false" reversible="false" condition="!Control.HasText(5545)">conditional</animation>
	  <animation effect="fade" delay="420" time="50" start="0" end="100" condition="!Control.HasText(5545)">conditional</animation>
	  <visible>!Control.HasText(5545)</visible>
	</control>
     
    kiwijunglist

    kiwijunglist

    Super Moderator
  • Team MediaPortal
    • June 10, 2008
    6,746
    1,751
    New Zealand
    Home Country
    New Zealand New Zealand
    Expanding on the spinning case idea (A LOT)

    Done most of the tricky stuff

    you need fanart enabled to see the inside of the cover.


    PS. You have to delete the cache before texture masks will work (learnt that the hard way!). Also my CD was wobbly as hell and I was pulling my hair out (it's because i was running 1920x1200, doh!)


    Code: 
    <!-- KIWIJUNGLIST -->
 
 
<!-- Inside of case -->
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask1.png">#fanarthandler.music.backdrop1.play</texture>
 <visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919295)+control.isvisible(91919294)</visible>
	</control>
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask1.png">#fanarthandler.music.backdrop2.play</texture>
 <visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919296)+control.isvisible(91919294)</visible>
	</control>
 
 
 
<!-- Rotating CD -->
<control>
	  <type>image</type>
	  <posX>1025</posX>
	  <posY>225</posY>
	  <width>350</width>
	  <height>350</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
 <animation effect="rotate" center="1200,400" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
 <animation effect="slide" start="0,0" end="0,200" time="250">hidden</animation>
 <visible>![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)|string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]</visible>
</control>
 
<!-- CD just before sliding up rear insert shadow -->
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
 <texture>case-shadow-back.png</texture>
<visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
 
	<!-- CD Just before sliding up -->
<control>
	  <type>image</type>
	  <posX>1025</posX>
	  <posY>425</posY>
	  <width>350</width>
	  <height>350</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
 <animation effect="rotate" center="1200,600" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
<visible>string.equals(#currentplaytime,0:05)</visible> 
	</control>
 
<!-- CD sliding up out of case -->
<control>
	  <type>image</type>
	  <posX>1025</posX>
	  <posY>425</posY>
	  <width>350</width>
	  <height>350</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
 <animation effect="slide" tween="bounce" easing="in" start="0,0" end="0,-200" time="500" reversible="false">visible</animation>
 <animation effect="rotate" center="1200,600" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible> 
	</control>
 
<!-- Front Cover ontop of Rotating CD -->
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <visible>![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)|string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)]</visible>
</control>
 
 
<!-- Inside of case CD Insert overlay-->
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask3.png">#fanarthandler.music.backdrop1.play</texture>
<visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919295)+control.isvisible(91919294)</visible>
	</control>
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask3.png">#fanarthandler.music.backdrop2.play</texture>
<visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919296)+control.isvisible(91919294)</visible>
	</control>
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
 <texture>case-shadow-front.png</texture>
<visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
 
 <!-- open front cover at 0:05 -->
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <animation effect="rotatey" time="1000" center="1000,0" start="0" end="135" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="600" time="100" start="100" end="0" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
<visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)</visible>
	</control>
 
 
	<!-- open inside cover at 0:05 and close at 0:07 -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <align>right</align>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
 <texture mask="case-mask2.png">#fanarthandler.music.backdrop1.play</texture>
 <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="-180" end="-45" tween="sine" easing="inout" loop="false" reversible="true" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="600" time="100" start="0" end="100">visible</animation>
 <visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919295)+control.isvisible(91919294)</visible>
</control>
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <align>right</align>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
 <texture mask="case-mask2.png">#fanarthandler.music.backdrop2.play</texture>
 <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="-180" end="-45" tween="sine" easing="inout" loop="false" reversible="true" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="600" time="100" start="0" end="100">visible</animation>
 <visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919296)+control.isvisible(91919294)</visible>
</control>
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
 <texture>case-shadow-left.png</texture>
 <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="-180" end="-45" tween="sine" easing="inout" loop="false" reversible="true" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="666" time="100" start="0" end="100">visible</animation>
 <animation effect="fade" delay="330" time="10" start="100" end="0" condition="string.equals(#currentplaytime,0:07)">visible</animation>
 <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
</control>
 
 
 
<!-- Close front at 0:07 -->
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="135" end="0" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <animation effect="fade" delay="350" time="100" start="0" end="100" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
<visible>string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)</visible>
	</control>
 
<!-- front cover spin first part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
	<!-- rear cover spin middle part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
 <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
 <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
 <animation effect="fade" time="100" delay="500" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
<!-- front cover spin last part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
 <animation effect="fade" time="100" delay="1500" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
<!-- KIWI JUNGLIST -->
     

    Attachments

    • case-shadow-left.png
      case-shadow-left.png
      1.3 KB
    • case-shadow-front.png
      case-shadow-front.png
      3.6 KB
    • case-shadow-back.png
      case-shadow-back.png
      3.6 KB
    • mvr.cdtex.png
      mvr.cdtex.png
      136.3 KB
    • case-mask3.png
      case-mask3.png
      2 KB
    • case-mask1.png
      case-mask1.png
      3.9 KB
    • case-mask2.png
      case-mask2.png
      4.4 KB
    Last edited:
    Pog

    Pog

    Retired Team Member
  • Premium Supporter
    • September 7, 2009
    401
    315
    Wicklow
    Home Country
    Ireland Ireland
    ...loading plugins ...caching blah blah ...dum de dum ... come on mp

    That's very cute, nice one!
     
    Pog

    Pog

    Retired Team Member
  • Premium Supporter
    • September 7, 2009
    401
    315
    Wicklow
    Home Country
    Ireland Ireland
    Did a quick update of your code to use the artist thumb and a cd mask, also <colordiffuse> to darken it.

    Clear the cache!

    Code: 
    <!-- KIWIJUNGLIST -->
 
 
<!-- Inside of case -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask1.png">#fanarthandler.music.backdrop1.play</texture>
	  <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
 
<!-- Rotating CD -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>200</posY>
	  <width>400</width>
	  <height>400</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
	  <animation effect="rotate" center="1200,400" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
	  <animation effect="slide" start="0,0" end="0,200" time="250">hidden</animation>
	  <visible>![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)|string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]</visible>
	</control>
 
	<!-- CD Just before sliding up -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
	  <animation effect="rotate" center="1200,600" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:05)</visible>
	</control>
 
<!-- CD sliding up out of case -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
	  <animation effect="slide" tween="bounce" easing="in" start="0,0" end="0,-200" time="1000" reversible="false">visible</animation>
	  <animation effect="rotate" center="1200,600" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
 
<!-- Front Cover ontop of Rotating CD -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <visible>![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)|string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)]</visible>
	</control>
 
<!-- Inside of case CD Insert overlay-->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask3.png">#fanarthandler.music.backdrop1.play</texture>
	  <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
 
  <!-- open front cover at 0:05 -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="1000" center="1000,0" start="0" end="180" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="100" end="0" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)</visible>
	</control>
 
	<!-- open inside cover at 0:05 -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <align>right</align>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask2.png">#fanarthandler.music.backdrop1.play</texture>
	  <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="-180" end="0" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="0" end="100" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
 
	<!-- Close inside at 0:07 -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask2.png">#fanarthandler.music.backdrop1.play</texture>
	  <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="0" end="-180" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="100" end="0" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)</visible>
	</control>
 
<!-- Close front at 0:07 -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="180" end="0" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="0" end="100" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)</visible>
	</control>
 
<!-- front cover spin first part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
	<!-- rear cover spin middle part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
	  <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="-180" end="180" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <animation effect="fade" time="100" delay="450" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
<!-- front cover spin last part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <animation effect="fade" time="100" delay="1450" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
 
<!-- KIWI JUNGLIST -->
     

    Attachments

    • mvr.cdtex.png
      mvr.cdtex.png
      136.3 KB
    Pog

    Pog

    Retired Team Member
  • Premium Supporter
    • September 7, 2009
    401
    315
    Wicklow
    Home Country
    Ireland Ireland
    23-56-41.png


    I added a slight see through grainy texture to that cd mask. (part of the last update)
     
    Last edited:
    mbuzina

    mbuzina

    Retired Team Member
  • Premium Supporter
    • April 11, 2005
    2,839
    726
    Germany
    Home Country
    Germany Germany
    You guys are crazy. I thought i was obsessive with my cd sliding into cover, rotate 180 to show background & cd slide out again.

    Btw i have a very realistic cd mask, will upload.

    So we need a kiwi/pog/mbuzina skin?
     
    kiwijunglist

    kiwijunglist

    Super Moderator
  • Team MediaPortal
    • June 10, 2008
    6,746
    1,751
    New Zealand
    Home Country
    New Zealand New Zealand
    Thanks, much appreciated. I'm mostly working on the core animations then aesthetics come later, but will definitely save time if you can upload some. I think we will have to go back and clean up this thread soon, I'm hijacking it to much. So sorry about that @mbuzina[DOUBLEPOST=1372498426][/DOUBLEPOST]This is what I have so far. you will need to overwrite the image files as they changed. since the masks are changing you also have to delete the skin cache.

    Changes:
    Case now opens to 135 degrees (instead of 180), so it takes up less space on the left margin.
    Made the spin at the start a bit better.
    Made the CD smaller
    Added creases and shadows to the inside of the case

    Code: 
    <!-- KIWIJUNGLIST -->
 
 
<!-- Inside of case -->
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask1.png">#fanarthandler.music.backdrop1.play</texture>
 <visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919295)+control.isvisible(91919294)</visible>
	</control>
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask1.png">#fanarthandler.music.backdrop2.play</texture>
 <visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919296)+control.isvisible(91919294)</visible>
	</control>
 
 
 
<!-- Rotating CD -->
<control>
	  <type>image</type>
	  <posX>1025</posX>
	  <posY>225</posY>
	  <width>350</width>
	  <height>350</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
 <animation effect="rotate" center="1200,400" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
 <animation effect="slide" start="0,0" end="0,200" time="250">hidden</animation>
 <visible>![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)|string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]</visible>
</control>
 
<!-- CD just before sliding up rear insert shadow -->
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
 <texture>case-shadow-back.png</texture>
<visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
 
	<!-- CD Just before sliding up -->
<control>
	  <type>image</type>
	  <posX>1025</posX>
	  <posY>425</posY>
	  <width>350</width>
	  <height>350</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
 <animation effect="rotate" center="1200,600" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
<visible>string.equals(#currentplaytime,0:05)</visible> 
	</control>
 
<!-- CD sliding up out of case -->
<control>
	  <type>image</type>
	  <posX>1025</posX>
	  <posY>425</posY>
	  <width>350</width>
	  <height>350</height>
	  <colordiffuse>FFC0C0C0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
 <animation effect="slide" tween="bounce" easing="in" start="0,0" end="0,-200" time="500" reversible="false">visible</animation>
 <animation effect="rotate" center="1200,600" time="6000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible> 
	</control>
 
<!-- Front Cover ontop of Rotating CD -->
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <visible>![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)|string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)]</visible>
</control>
 
 
<!-- Inside of case CD Insert overlay-->
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask3.png">#fanarthandler.music.backdrop1.play</texture>
<visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919295)+control.isvisible(91919294)</visible>
	</control>
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask3.png">#fanarthandler.music.backdrop2.play</texture>
<visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919296)+control.isvisible(91919294)</visible>
	</control>
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
 <texture>case-shadow-front.png</texture>
<visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
 
 <!-- open front cover at 0:05 -->
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <animation effect="rotatey" time="1000" center="1000,0" start="0" end="135" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="600" time="100" start="100" end="0" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
<visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)</visible>
	</control>
 
 
	<!-- open inside cover at 0:05 and close at 0:07 -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <align>right</align>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
 <texture mask="case-mask2.png">#fanarthandler.music.backdrop1.play</texture>
 <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="-180" end="-45" tween="sine" easing="inout" loop="false" reversible="true" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="600" time="100" start="0" end="100">visible</animation>
 <visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919295)+control.isvisible(91919294)</visible>
</control>
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <align>right</align>
 <zoom>true</zoom>
 <keepaspectratio>true</keepaspectratio>
 <texture mask="case-mask2.png">#fanarthandler.music.backdrop2.play</texture>
 <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="-180" end="-45" tween="sine" easing="inout" loop="false" reversible="true" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="600" time="100" start="0" end="100">visible</animation>
 <visible>[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]+control.isvisible(91919296)+control.isvisible(91919294)</visible>
</control>
<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
 <texture>case-shadow-left.png</texture>
 <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="-180" end="-45" tween="sine" easing="inout" loop="false" reversible="true" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="666" time="100" start="0" end="100">visible</animation>
 <animation effect="fade" delay="330" time="10" start="100" end="0" condition="string.equals(#currentplaytime,0:07)">visible</animation>
 <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
</control>
 
 
 
<!-- Close front at 0:07 -->
<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <animation effect="rotatey" delay="0" time="1000" center="1000,0" start="135" end="0" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <animation effect="fade" delay="350" time="100" start="0" end="100" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
<visible>string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)</visible>
	</control>
 
<!-- front cover spin first part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
	<!-- rear cover spin middle part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
 <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
 <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
 <animation effect="fade" time="100" delay="500" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
<!-- front cover spin last part-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
 <animation effect="rotatey" time="2000" delay="0" center="1200,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
 <animation effect="fade" time="100" delay="1500" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
 
<!-- KIWI JUNGLIST -->
     

    Attachments

    • case-shadow-left.png
      case-shadow-left.png
      1.3 KB
    • case-shadow-back.png
      case-shadow-back.png
      3.6 KB
    • case-shadow-front.png
      case-shadow-front.png
      3.6 KB
    • mvr.cdtex.png
      mvr.cdtex.png
      136.3 KB
    • case-mask1.png
      case-mask1.png
      1.3 KB
    • case-mask3.png
      case-mask3.png
      2 KB
    • case-mask2.png
      case-mask2.png
      4.4 KB
    Last edited:
    catavolt

    catavolt

    Design Group Manager
  • Team MediaPortal
    • August 13, 2007
    14,597
    10,590
    Königstein (Taunus)
    Home Country
    Germany Germany
    Hehehe, there are some issues regarding the #fanarthandler.music.backdrop1.play ;)
    1. If no #fanarthandler.music.backdrop1.play is available, the animation looks really bad.
    So I made a kind of default backdrop to not spoil the animation (see attachment).
    Therefore the code had to be expanded a bit (see spoiler). (Pls note: I set all positions 400 px to the right to fit better in my skins, so to fit in yours you have to subtract 400 px accordingly)

    2. If you are using a sampler with various artists, very often the #fanarthandler.music.backdrop1.play refers to the artist played before the actual artist, so there must be something to ensure the backdrop belongs to the actual played artist. Working on that at the moment - let you know when I have a solution ;)


    Code: 
    <!-- *************************************************************************************************** -->
	<!-- *************************** Rotating CD and Flipping Cover  *************************************** -->
	<!-- *************************************************************************************************** -->
	<!-- ANIMATION IDEA THX TO KIWIJUNGLIST AND POG! -->
	<!-- Inside of case -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask1.png">case-mask4.jpg</texture>
	  <visible>!string.equals(#fanarthandler.music.backdrop1.play)+[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask1.png">#fanarthandler.music.backdrop1.play</texture>
	  <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
	<!-- Rotating CD -->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>200</posY>
	  <width>400</width>
	  <height>400</height>
	  <colordiffuse>FFE0E0E0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
	  <animation effect="rotate" center="1600,400" time="3000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
	  <animation effect="slide" start="0,0" end="0,200" time="250">hidden</animation>
	  <visible>![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)|string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]</visible>
	</control>
	<!-- CD Just before sliding up -->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <colordiffuse>FFE0E0E0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
	  <animation effect="rotate" center="1600,600" time="3000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:05)</visible>
	</control>
	<!-- CD sliding up out of case -->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <colordiffuse>FFE0E0E0</colordiffuse>
	  <texture mask="mvr.cdtex.png">#Play.Current.Thumb</texture>
	  <animation effect="slide" start="0,0" end="0,-200" time="1000" reversible="false">visible</animation>
	  <animation effect="rotate" center="1600,600" time="3000" start="0" end="360" loop="true" condition="![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)]">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
	<!-- Front Cover ontop of Rotating CD -->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <visible>![string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)|string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)]</visible>
	</control>
	<!-- Inside of case CD Insert overlay-->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask3.png">case-mask4.jpg</texture>
	  <visible>!string.equals(#fanarthandler.music.backdrop1.play)+[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask3.png">#fanarthandler.music.backdrop1.play</texture>
	  <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
	<!-- open front cover at 0:05 -->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="1000" center="1400,0" start="0" end="180" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="100" end="0" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)</visible>
	</control>
	<!-- open inside cover at 0:05 -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <align>right</align>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask2.png">case-mask4.jpg</texture>
	  <animation effect="rotatey" delay="0" time="1000" center="1400,0" start="-180" end="0" tween="sine" easing="inout" loop="false" reversible="false" condition="!string.equals(#fanarthandler.music.backdrop1.play)+[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)]">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="0" end="100" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <visible>!string.equals(#fanarthandler.music.backdrop1.play)+[string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)]</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <align>right</align>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask2.png">#fanarthandler.music.backdrop1.play</texture>
	  <animation effect="rotatey" delay="0" time="1000" center="1400,0" start="-180" end="0" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="0" end="100" condition="string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:05)|string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)</visible>
	</control>
	<!-- Close inside at 0:07 -->
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask2.png">case-mask4.jpg</texture>
	  <animation effect="rotatey" delay="0" time="1000" center="1400,0" start="0" end="-180" tween="sine" easing="inout" loop="false" reversible="false" condition="!string.equals(#fanarthandler.music.backdrop1.play)+[string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)]">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="100" end="0" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <visible>!string.equals(#fanarthandler.music.backdrop1.play)+[string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)]</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>1000</posX>
	  <posY>400</posY>
	  <width>800</width>
	  <height>400</height>
	  <zoom>true</zoom>
	  <keepaspectratio>true</keepaspectratio>
	  <texture mask="case-mask2.png">#fanarthandler.music.backdrop1.play</texture>
	  <animation effect="rotatey" delay="0" time="1000" center="1400,0" start="0" end="-180" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="100" end="0" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:06)|string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)</visible>
	</control>
	<!-- Close front at 0:07 -->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" delay="0" time="1000" center="1400,0" start="180" end="0" tween="sine" easing="inout" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="0" end="100" condition="string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:07)|string.equals(#currentplaytime,0:08)</visible>
	</control>
	<!-- front cover spin first part-->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="2000" delay="0" center="1600,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
	<!-- rear cover spin middle part-->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
	  <animation effect="rotatey" time="2000" delay="0" center="1600,0" start="-180" end="180" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <animation effect="fade" time="100" delay="450" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
	<!-- front cover spin last part-->
	<control>
	  <type>image</type>
	  <posX>1400</posX>
	  <posY>400</posY>
	  <width>400</width>
	  <height>400</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="2000" delay="0" center="1600,0" start="0" end="360" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <animation effect="fade" time="100" delay="1450" loop="false" reversible="false" condition="string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)">conditional</animation>
	  <visible>string.equals(#currentplaytime,0:00)|string.equals(#currentplaytime,0:01)|string.equals(#currentplaytime,0:02)|string.equals(#currentplaytime,0:03)|string.equals(#currentplaytime,0:04)</visible>
	</control>
	<!-- ANIMATION IDEA THX TO KIWIJUNGLIST AND POG! -->
     

    Attachments

    • case-mask4.jpg
      case-mask4.jpg
      24.3 KB
    Last edited:

    Users who are viewing this thread

    Online now: 4 (members: 0, guests: 4)

    About The Project

    The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

    In reaching this goal we are working every day to make sure our software is one of the best.

             

    Quick Navigation

    Support MediaPortal!

    The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

    Care to support our work with a few bucks? We'd really appreciate it!

    Community platform by XenForo® © 2010-2021 XenForo Ltd.
    Top Bottom