[CloudDweller]

I'm totally new to skinning and have finally decided to have a go and turn my Photoshop work into something that lives but I need a bit of help and wondered if someone can help.

I have a list which has a PNG image that I use as a button and as apposed to jumping from one item to the other, it animates up and down the list like the Apple TV UI. The problem is that when it scrolls from one item to another, the image layer order causes gets messed up and the button image obscures the item it’s leaving focus.

So in other words let’s say I have a list with two lines of text, 'TV Shows' and 'Movies'. If 'TV Shows' has focus then the image is behind the text which is correct. If I then scroll down to 'Movies' the image jumps in front of the 'TV Shows' text and then scrolls down behind 'Movies' and the same things repeats if I have something else in the list.

What I'm after is a way to always have the image behind the text even when it’s animated. Is this possible with the skinning engine?

Also I’m trying to achieve the middle item in a list scrolling effect like the Apple TV (sorry I don’t know how else to describe it). In other words I have a list with twenty items but only 10 are visible in the screen. When I scroll down to the sixth item, the button stops moving and the list starts to scroll. When the last item in the list is visible, the list stops scrolling and the button scrolls to the bottom.

I’ve been using code from another skin which is below but I said I’m new and have never coded anything in my life so I would love some help?

<focusedlayout height="50" width="300">
<control type="image">
<posy>0</posy>
<width>500</width>
<height>54</height>
<texture>button_scrolling.png</texture>
<aspectratio>keep</aspectratio>
<visible>Control.HasFocus(100)</visible>
<animation effect="slide" start="0,-50" end="0,0" time="200" reversible="false" easing="out" condition="Container(300).OnNext">Focus</animation>
<animation effect="slide" start="0,50" end="0,0" time="200" reversible="false" easing="out" condition="Container(300).OnPrevious">Focus</animation>
</control>
<control type="label">
<posy>24</posy>
<posx>324</posx>
<width>500</width>
<height>28</height>
<aligny>center</aligny>
<info>ListItem.Label</info>
<textcolor>White</textcolor>
<scroll>false</scroll>
<font>list1</font>
<align>center</align>
</control>
</focusedlayout>

[Sranshaft]

For the first issue, you could put the image outside of the list control. And for the second problem you'd want to change the list control to a wraplist.

[CloudDweller]

Thanks Sranshaft for the advice. I changed it to a wrap list, but not the list simply wraps continuously and the button image never move, just the list. I also moved the image outside of the control list but it disappears. LIke I said, I'm a total noob at this so some hand holding would be greatly appreciated.

[Hitcher]

A fixedlist with <movement>5</movement> is what I think you want.

[CloudDweller]

Thanks Hitcher. The button now moves when it gets to the bottom 5 items but when it's on the first 15 the button doesn't move, just the list. Like I said, total noob.

[Nemesis7]

Ask the guys from this thread

[eumel]

I use
<focusposition>4</focusposition>
<movement>5</movement>
in a list with 10 visible items, with this the selector (focus) starts on top of the list, at the first item, then move's 5 items down, hold this position, now the list moves up, and if are only 5 items below the focus, the selector moves down to the bottom.

The image of the focus/selector is behind my list, and moves with a slide animation, with the condition "container.position"

[pecinko]

Also I’m trying to achieve the middle item in a list scrolling effect like the Apple TV (sorry I don’t know how else to describe it). In other words I have a list with twenty items but only 10 are visible in the screen. When I scroll down to the sixth item, the button stops moving and the list starts to scroll. When the last item in the list is visible, the list stops scrolling and the button scrolls to the bottom.

You will be able to achieve a "sort of" Front Row behavior i.e. it won't be perfect.

One way is to use code you posted, the other is to use Container(300).Position(x) to trigger animation of ButtonFO.png that's outside of fixedlist.

Please note that there's no way to achieve this throughout entire skin as some controls are not predefined so there's no sane way to trigger animation.

Those are my findings with my Front Row like skin which will be available till the end of week for alpha testing.

[CloudDweller]

Thanks to both eumel and pecinko for your feed back. I must say that I'll feeling totally out of my depth with this lot . I thought it was going to be a challenge but this is getting me totally down as I can't get my head around where I need to put lines of code and what goes inside and not inside containers

I'm starting to think that skinning isn't for me as although I'm good with Photoshop, I feel like with coding, I'm not just hitting brick walls but driving 200mph into them.

Is there anychance I could see either of your code? Or pecinko, could I please alpha test your skin?

[CloudDweller]

pecinko has been very helpful and has given me some code to use. However I think I forgot to mention that my skin is to be used with Plex and although they share a lot of skinning features, the <movement> tag isn't implemented and so I can't use that. Does anyone know if I can achieve what I'm after (Apple TV like list scrolling) without it?

[Hitcher]

If it's for Plex then wouldn't you be better off asking on their forums?

[CloudDweller]

And I have but the response on XBMC's forum has been much better. I'm guessing because most skins for Plex originated on XBMC. Also I've been using XBMC for over 4 years and only recently switched to Plex because of it's library system and iOS playback support. If XBMC gets these features in an easy to implement fashion then I would look at switching back.

Hitched you are an extremely talented skinner and as such I value your help greatly. If you or anyone else is able to advise me as to whether my issue can be solved that would be fantastic.

[Hitcher]

Basically XBMC's skinning engine gets updated quite frequently by Jonathan because we skinners always want more and bug the hell out of him for changes.

And I guess Plex on the other hand is using an older skinning engine so these new features are useless.

[CloudDweller]

So are you saying it's not possible then with the current skinning engine?

[Hitcher]

I know nothing about the Plex skinning engine but if you said that <movement> isn't implemented then I guess not.