Log in

View Full Version : Button Focus Fade


Agastar
March 18th, 2010, 12:15 PM
When working on an app I had a button I wanted to fade in the focused texture but snap back to the un-focused texture. I was unable to find anything quite like what I wanted after searching google and this forum. With no luck I decided to approach it from another angle.

Here is what I came up with...


<control type="group">
<width>225</width>
<height>64</height>
<visible>Control.IsVisible(9001)</visible>
<control type="image">
<visible>!Control.HasFocus(9001)</visible>
<animation effect="fade" time="200" delay="100">Hidden</animation>
<posx>0</posx>
<posy>0</posy>
<width>225</width>
<height>64</height>
<texture>live_off.png</texture>
</control>
<control type="button" id="9001">
<posx>0</posx>
<posy>0</posy>
<width>225</width>
<height>64</height>
<onleft>-</onleft>
<onright>9002</onright>
<onup>-</onup>
<ondown>100</ondown>
<texturenofocus>-</texturenofocus>
<texturefocus>live_on.png</texturefocus>
<animation effect="fade" start="50" end="100" time="200">Focus</animation>
<onclick>Control.SetLabel(110,Live)</onclick>
<onclick>Container.SetPath(100,rss://www.SomeDomain.com/SomeRssFeed.xml)</onclick>
</control>
</control>


The button is an image of the text "Live" with another image that is the same text in another color with a glow efect. The texturefocus and texturenofocus provide the mechanism to swap the images but so far I've not been able find documentation to support adding animation to the texture changes.

To get aroud this I specify the texture for when the button has focus but not for when it doesn't have focus. I added an animation to fade in the focused texture
<animation effect="fade" start="50" end="100" time="200">Focus</animation>

I added an image control above the button and gave it a conditional visibility.
<visible>!Control.HasFocus(9001)</visible>

This allows the image to show up only when the button has lost it's focus. This gives us the oppertunity to apply an animation for when the image is hidden resulting in a cross fade effect.
<animation effect="fade" time="200" delay="100">Hidden</animation>


This methods produces a nice subtle fade-in effect when you mouse over the button. If you just apply the fade effect but still use the texturenofocus element, the nofocus texture will hide before the fade in effect has completed giving the animation a pop in the middle of the animation.

riegersn
March 23rd, 2010, 11:02 PM
Good thinking! Yes although there may not be direct ways to perform specific effects in boxee, there is always a hack to get it working :)