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: 1001975" data-attributes="member: 12382"><p><span style="font-size: 18px">6. First Results</span></p><p>I will not recount all the pains I went through to get the flexibility up to where it is now, but there are quite a few. Some things to think about:</p><ul> <li data-xf-list-type="ul">MP will not render anything that is off-screen. So if you want something to slide in from outside of the screen you need to position it inside first and then animate it away (use a conditional animation of slide with short timing & large positional change. Maybe include fade in so it is not visible while moving).</li> <li data-xf-list-type="ul">MP is very touchy about how you use the Skin Expressions, Skin Functions, Visibility Conditions & more. This is just extensive trial & error and quite frustrating to be honest. For deciding on texture I found a good working switch function which I would like to share here:<br /> [code=XML]<texture>#(switch(<br /> eq(#BasicHome.B0.Backdrop,'WORLDWEATHER'),string.format('weather/backgrounds/{0}.jpg',#WorldWeather.TodayIconNumber),<br /> eq(1,1),#BasicHome.B0.Backdrop<br /> ))</texture>[/code]<br /> Make sure to use the exact whitspace configuration as I did here (start of switch on the same line as the texture tag, ending parentheses on same line as the closing tag. This way you have great conditional selection.</li> <li data-xf-list-type="ul"> Use of skin.setsting. I use setstring to maintain the current selected ID of the menu to control all of visibility & animation positions. That works great except some issues I stumbled upon (later more). I use the following set onfocus:<br /> [code=XML]<br /> <onfocus>#(skin.setstring('#BasicHome.Current.Label',#BasicHome.B0.Label))|#(skin.setstring('#BasicHome.Previous.ID',#BasicHome.Current.ID))|#(skin.setstring('#BasicHome.Current.ID',0))</onfocus>[/code]</li> <li data-xf-list-type="ul">Use Styles religiously. My styles result in very short control definitions. I will omit ID, placement, etc. if possible. Use group controls to handle visibility better. But remember one thing (stupid, I know): If you animate a group control, its contents is animated twice. So slide a group 300 px to the right & the contents (if you do not use layouting) slides 600 px.</li> <li data-xf-list-type="ul">Use conditional animation for positioning. Sample for one menu item<br /> [code=XML]<animation effect="slide" time="300" end="0,0" easing="inout" condition="control.isvisible(1100)">conditional</animation><br /> <animation effect="slide" time="300" end="-800,0" easing="inout" condition="control.isvisible(1101)">conditional</animation><br /> <animation effect="slide" time="300" end="-1600,0" easing="inout" condition="control.isvisible(1102)">conditional</animation><br /> <animation effect="slide" time="300" end="-2400,0" easing="inout" condition="control.isvisible(1103)">conditional</animation><br /> <animation effect="slide" time="300" end="-3200,0" easing="inout" condition="control.isvisible(1104)">conditional</animation><br /> <animation effect="slide" time="300" end="-4000,0" easing="inout" condition="control.isvisible(1105)">conditional</animation><br /> <animation effect="slide" time="300" end="-4800,0" easing="inout" condition="control.isvisible(1106)">conditional</animation><br /> <animation effect="slide" time="300" end="-5600,0" easing="inout" condition="control.isvisible(1107)">conditional</animation><br /> <animation effect="slide" time="300" end="-6400,0" easing="inout" condition="control.isvisible(1108)">conditional</animation><br /> <animation effect="slide" time="300" end="-7200,0" easing="inout" condition="control.isvisible(1109)">conditional</animation><br /> <animation effect="slide" time="300" end="-8000,0" easing="inout" condition="control.isvisible(1110)|control.isvisible(1111)|control.isvisible(1112)">conditional</animation>[/code]<br /> Controls 1110 -> 1112 are visible depending on the value of #BasicHome.Current.ID set by focus changing.</li> </ul></blockquote><p></p>
[QUOTE="mbuzina, post: 1001975, member: 12382"] [SIZE=5]6. First Results[/SIZE] I will not recount all the pains I went through to get the flexibility up to where it is now, but there are quite a few. Some things to think about: [LIST] [*]MP will not render anything that is off-screen. So if you want something to slide in from outside of the screen you need to position it inside first and then animate it away (use a conditional animation of slide with short timing & large positional change. Maybe include fade in so it is not visible while moving). [*]MP is very touchy about how you use the Skin Expressions, Skin Functions, Visibility Conditions & more. This is just extensive trial & error and quite frustrating to be honest. For deciding on texture I found a good working switch function which I would like to share here: [code=XML]<texture>#(switch( eq(#BasicHome.B0.Backdrop,'WORLDWEATHER'),string.format('weather/backgrounds/{0}.jpg',#WorldWeather.TodayIconNumber), eq(1,1),#BasicHome.B0.Backdrop ))</texture>[/code] Make sure to use the exact whitspace configuration as I did here (start of switch on the same line as the texture tag, ending parentheses on same line as the closing tag. This way you have great conditional selection. [*] Use of skin.setsting. I use setstring to maintain the current selected ID of the menu to control all of visibility & animation positions. That works great except some issues I stumbled upon (later more). I use the following set onfocus: [code=XML] <onfocus>#(skin.setstring('#BasicHome.Current.Label',#BasicHome.B0.Label))|#(skin.setstring('#BasicHome.Previous.ID',#BasicHome.Current.ID))|#(skin.setstring('#BasicHome.Current.ID',0))</onfocus>[/code] [*]Use Styles religiously. My styles result in very short control definitions. I will omit ID, placement, etc. if possible. Use group controls to handle visibility better. But remember one thing (stupid, I know): If you animate a group control, its contents is animated twice. So slide a group 300 px to the right & the contents (if you do not use layouting) slides 600 px. [*]Use conditional animation for positioning. Sample for one menu item [code=XML]<animation effect="slide" time="300" end="0,0" easing="inout" condition="control.isvisible(1100)">conditional</animation> <animation effect="slide" time="300" end="-800,0" easing="inout" condition="control.isvisible(1101)">conditional</animation> <animation effect="slide" time="300" end="-1600,0" easing="inout" condition="control.isvisible(1102)">conditional</animation> <animation effect="slide" time="300" end="-2400,0" easing="inout" condition="control.isvisible(1103)">conditional</animation> <animation effect="slide" time="300" end="-3200,0" easing="inout" condition="control.isvisible(1104)">conditional</animation> <animation effect="slide" time="300" end="-4000,0" easing="inout" condition="control.isvisible(1105)">conditional</animation> <animation effect="slide" time="300" end="-4800,0" easing="inout" condition="control.isvisible(1106)">conditional</animation> <animation effect="slide" time="300" end="-5600,0" easing="inout" condition="control.isvisible(1107)">conditional</animation> <animation effect="slide" time="300" end="-6400,0" easing="inout" condition="control.isvisible(1108)">conditional</animation> <animation effect="slide" time="300" end="-7200,0" easing="inout" condition="control.isvisible(1109)">conditional</animation> <animation effect="slide" time="300" end="-8000,0" easing="inout" condition="control.isvisible(1110)|control.isvisible(1111)|control.isvisible(1112)">conditional</animation>[/code] Controls 1110 -> 1112 are visible depending on the value of #BasicHome.Current.ID set by focus changing. [/LIST] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
MediaPortal 1
MediaPortal 1 Skins
Building a skin from scratch - a tour -
Contact us
RSS
Top
Bottom