Jump to content


Photo

Audio Player Skinning


  • Please log in to reply
5 replies to this topic

#1 pink_panther

pink_panther

    X-S Senior Member

  • Members
  • PipPip
  • 220 posts
  • Xbox Version:none
  • 360 version:v1 (xenon)

Posted 19 December 2005 - 05:24 AM

Well I finally figured out most of how to skin the audio player, which is really time comsuming. Anyway the only thing I can't figure out is how to get text to display. I don't know what i'm doing wrong, the song info and time won't show up. O and how do I change the visualaztion color, the default blue is not working for me. And I guess well were at it, how do I change the hightlighter color as well, I need to get all blue out of here.
Here's my media section code, any help is appreciated:

CODE

<MusicPlayer Left="19" Top="86" Width="272" Height="197" >
        <BackGround>main_back.png</BackGround>

        <!-- back image of the peak meter and mask for the volume -->
        <!-- Progress and volume must be under this image, hence zIndex > 0 -->
        <Image Left="35" Top="93" Width="248" Height="141" zIndex="1">vizbg.png</Image>
        <!-- cover image must be drawn on top of everything, zIndex=10 should be fine -->
        <Image Left="0" Top="0" Width="640" Height="480" zIndex="10">viz_cover.png</Image>


        <ButtonMap>ButtonMap.png</ButtonMap>    
        <Element Type="Prev" Left="45" Top="245" Width="30" Height="30" />
        <Element Type="Play" Left="75" Top="245" Width="30" Height="30" />
        <Element Type="Pause" Left="105" Top="245" Width="30" Height="30" />
        <Element Type="Stop" Left="135" Top="245" Width="30" Height="30" />
        <Element Type="Next" Left="165" Top="245" Width="30" Height="30" />
        <Element Type="PrevTrack" Left="195" Top="245" Width="30" Height="30" />
        <Element Type="NextTrack" Left="225" Top="245" Width="30" Height="30" />
        <Element Type="Random" Left="334" Top="168" Width="30" Height="18" zIndex="2" />
        <Element Type="Mute" Left="372" Top="168" Width="30" Height="18" zIndex="2" />
        <Element Type="Progress" Left="38" Top="300" Width="162" Height="16" />
        <Element Type="Volume" Left="38" Top="320" Width="162" Height="16" />

        <Element Type="Meter" Left="36" Top="135" Width="250" Height="60" Color="0xFFFFFF" zIndex="2" />
        <Element Type="SongStatus" Left="37" Top="100" Width="10" Height="10" zIndex="2" />

        <Text Left="45" Top="100" Width="60" Height="30" Color="0xFFFFFF" Source="SongTime" Font="Agency" Align="left" ScaleX="140" ScaleY="140" zIndex="3"/>
        <Text Left="37" Top="120" Width="238" Height="15" Color="0xFFFFFF" Source="SongTrack" Scroll="2" Font="Agency" Align="left" ScaleX="100" ScaleY="120" zIndex="3"/>

        <Playlist Top="86" Left="292" Width="329" Height="310" OffsetX="25" OffsetY="8">
            <BackGround>pl_back.png</BackGround>
        </Playlist>
        
    </MusicPlayer>


#2 Jezz_X

Jezz_X

    X-S Knowledgebase

  • Moderator
  • PipPipPipPipPipPipPipPip
  • 4,531 posts
  • Location:Australia
  • Xbox Version:v1.1
  • 360 version:none

Posted 19 December 2005 - 06:51 AM

Well it looks good about the only thing I can think of is have you declared the font Agency in the skin <fonts> part like this
CODE
<Fonts>
    <Font Name="Agency ">Agency.xpr</Font>
</Fonts>    




Ahh hang on I notice that your colors only have 8 digits they need to be 10
you have 0xFFFFFF which is an invalid color if you want white you need to have 0xFFFFFFFF it works like this

Bit in blue Dont know what it does, Bit in red is how transperant the color is, bit in normal black is the actual color,

0xFFFFFFFF

#3 pink_panther

pink_panther

    X-S Senior Member

  • Members
  • PipPip
  • 220 posts
  • Xbox Version:none
  • 360 version:v1 (xenon)

Posted 19 December 2005 - 11:14 PM

Thanks for the help. That worked out. Now any idea how to change the meter ( visualization ) color and song selector color? And in my skin itself, the active text color won't change, it stays blue, even if I did change it with UXArchitect. Where is it in the .xml file, maybe I can fix it there...
Ok, NM I found it. For anyone else wondering though, here it is:
-1) Change the colors for the default music player skin. Refer to the following image for more info:
IPB Image

The whole page can be found here: Skin media player

Just scroll down a little and it will show you. laugh.gif

Edited by pink_panther, 20 December 2005 - 12:06 AM.


#4 Jezz_X

Jezz_X

    X-S Knowledgebase

  • Moderator
  • PipPipPipPipPipPipPipPip
  • 4,531 posts
  • Location:Australia
  • Xbox Version:v1.1
  • 360 version:none

Posted 20 December 2005 - 12:11 AM

Ok you need to look at this
IPB Image

Basically you need to add these items to the bottom of the skin.xml in the colorscheme section

<MMActiveForeColor>0xFFB6FF00</MMActiveForeColor>
<MMForeColor>0xFFADADAD</MMForeColor>
<MMOffForeColor>0xFF808080</MMOffForeColor>
<MMDarkBarColor>0xFF404040</MMDarkBarColor>
<MMLightBarColor>0xFF404040</MMLightBarColor>
<MMDarkBackColor>0x99404040</MMDarkBackColor>

Haha you beat me to it

#5 pink_panther

pink_panther

    X-S Senior Member

  • Members
  • PipPip
  • 220 posts
  • Xbox Version:none
  • 360 version:v1 (xenon)

Posted 20 December 2005 - 12:27 AM

yea but thanks anyway, now we have a little information for others that might need this stuff.

ADDED: Ok the text and highlighter over lap to the outside of my playlist ( on the right side, left side is good. ) how do I fix that? I have a small curve in my playlist by the way, so the middle is skinnier then the upper and lower. It curves like this ---> " | P ( " P is the area for the playlist...

Edited by pink_panther, 20 December 2005 - 01:00 AM.


#6 pink_panther

pink_panther

    X-S Senior Member

  • Members
  • PipPip
  • 220 posts
  • Xbox Version:none
  • 360 version:v1 (xenon)

Posted 20 December 2005 - 01:57 AM

ADDED: Ok the text and highlighter over lap to the outside of my playlist ( on the right side, left side is good. ) how do I fix that? I have a small curve in my playlist by the way, so the middle is skinnier then the upper and lower. It curves like this ---> " | P ( " P is the area for the playlist...






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users