New Community Theme: Retro (1 Viewer)

ge2301

Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,705
    3,491
    Stuttgart
    Home Country
    Germany Germany
    I created a new theme called "Retro" for Titanium skin.
    In comparison to the default skin buttons have transparency and reflection effects.
    All buttons are handmade in photoshop :)

    To install the theme just unpack the zip file into the client plugin folder.
    You can now select it from settings within MP2.

    Here a few impressions of Version 1.0:
    preview.jpg

    preview2.jpg

    preview3.jpg
    [DOUBLEPOST=1411170925][/DOUBLEPOST]Hi morpheus_xx
    I'd like to implement a lens fare effect, when MP2 is starting up. Since MP2 can not handle direct code for effects at the moment I created a layer as png.
    I'd like to blend the layer over the background picture in 8 steps, stepwise changing opacity (0,1 0,25 0,5 1,0 0,5 0,25 0,1 0).

    Where should be the code placed? Do you have an additional hint how to realize?

    With full opacity it will look like this:
    background_start-png.155317
     

    Attachments

    • Background_start.png
      Background_start.png
      3 MB
    • TitaniumRetroSkin.7z
      13.7 MB
    Last edited:

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    Great look!

    I'd like to implement a lens fare effect, when MP2 is starting up. Since MP2 can not handle direct code for effects at the moment I created a layer as png.
    I'd like to blend the layer over the background picture in 8 steps, stepwise changing opacity (0,1 0,25 0,5 1,0 0,5 0,25 0,1 0).
    This can be done by animations. For example, inside Reflexion skin we have a StoryBoard that slides in the player controls from bottom when entering the screen.

    For your goal you should add the animation for "home.xaml": A "DoubleAnimation"(UsingKeyFrames) is able to "animate" double values (like Opacity) from given start to given end value in steps you define (MSDN: http://msdn.microsoft.com/de-de/lib...edia.animation.doubleanimation(v=vs.110).aspx)

    One implementation example for buttons (https://github.com/MediaPortal/Medi...on/themes/default/styles/Buttons.xaml#L37-L41)
    XML:
     <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" AutoReverse="true" BeginTime="00:00:00" Storyboard.TargetName="ButtonControlRectangle" Storyboard.TargetProperty="Fill.RelativeTransform.Children[0].ScaleX">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.26"/>
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.8"/>
    <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1.335"/>
    </DoubleAnimationUsingKeyFrames>
    The "TargetProperty" would be "Opacity", the time and values you define in the SplineDoubleKeyFrames.

    The animation and storyboard should be defined inside ThemeResources.

    Into screen you have to add "Triggers" that will start/stop animation on Show/Hide (https://github.com/MediaPortal/Medi...anium/screens/master_dialog_bare.xaml#L37-L48)
    XML:
     <Screen.Triggers>
    <EventTrigger RoutedEvent="Screen.Show">
    <EventTrigger.Actions>
    <BeginStoryboard Storyboard="{ThemeResource ShowDialogStoryboard}"/>
    </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Screen.Hide">
    <EventTrigger.Actions>
    <BeginStoryboard Storyboard="{ThemeResource HideDialogStoryboard}"/>
    </EventTrigger.Actions>
    </EventTrigger>
    </Screen.Triggers>
     

    ge2301

    Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,705
    3,491
    Stuttgart
    Home Country
    Germany Germany
    • Thread starter
    • Admin
    • #4
    the focused button text is in white and easily readable :)
    Edit: For ticker I will see how it can be improved
     
    Last edited:

    Users who are viewing this thread

    Top Bottom