Translucent scrollbars
Thursday, October 30th, 2008Postponing support for SMIL attribute ‘fill=”scroll”‘ for a long time, I now really needed this feature for extending the Atom feed support in KMPlayer. KMPlayer comes with a flash player backend and supporting the Youtube feeds was just a too low hanging fruit to not implement.
Anyhow, to ensure that the first flash link doesn’t play automatically on first load or when clicking on a next item, I’ve added as first link a summary of the entry using the media:description and media:thumbnail tags as SMIL presentation.
Since the presentation has a fixed aspects, ie. the text scales when resizing the player, some larger description text have their text fall outside the region area.
A quick implementation attempt was to simply draw the scrollbars over the right side of the text, painting it as black with 0.5 alpha value. Now that looked actually quite nice and has benefit that the scrollbar is there but also doesn’t take any screen resources (that is, one can’t click behind it but can see through it).
<smil>
<head>
<layout>
<root-layout background-color="white" width="320" height="240"/>
<region id="image0" top="5" left="5" bottom="5" right="5"fit="scroll"/>
</layout>
</head>
<body>
<img src="elep1.jpg" region="image0" dur="60"/>
</body>
</smil>
After that, it was a small step to extend the virtual area with the scrollbar width (so the clicking limitation is gone) and therefor added the horizontal scrollbar.
(took an image because the first reaction of my dear colleague Frerich R showing with text, was that it looked like a bug that the text was painted through the scrollbars – of course I suspect that because his knewsticker can’t show the media files like mine)
