BMP Image frames
Friday, February 10, 2006 by BlindingLight | Discussion: WindowBlinds
Hi there,
i'm new to WindowBlinds and to skinning but WindowBlinds isn't that hard to figure out. However, the thing I don't immediately understand is how the BMP's with multiple frames are used.
When editing one of the files you can see the 'filmstrip'. Editing it directly works fine and I understand the principle of the frames. But I thought that I had to make an animated gif and than convert that to a hor. or vert. framed BMP with an app like BitStrip. This, however, doesn't seem to work. How does WB split the image if it's 1 image? Does it 'scroll' the image with a kind of masking relative to the width/height of the parent element?
ThanX for any replies!!!
BlindingLight
i'm new to WindowBlinds and to skinning but WindowBlinds isn't that hard to figure out. However, the thing I don't immediately understand is how the BMP's with multiple frames are used.
When editing one of the files you can see the 'filmstrip'. Editing it directly works fine and I understand the principle of the frames. But I thought that I had to make an animated gif and than convert that to a hor. or vert. framed BMP with an app like BitStrip. This, however, doesn't seem to work. How does WB split the image if it's 1 image? Does it 'scroll' the image with a kind of masking relative to the width/height of the parent element?
ThanX for any replies!!!
BlindingLight
Daiwa
Reply #2 Friday, February 10, 2006 2:12 PM
Reply #2 Friday, February 10, 2006 2:12 PM
The normal non-animated images just include all the states of the control in one static image (e.g., normal, mouseover, presed, etc., for buttons). WB takes the width of the image & divides it by the number of frames (tiles) to determine which pixels to display for which state, given the pre-determined order (left to right) of states. "How" it does this is just a matter of programming the math.
If you have an image which is 100px wide, has 5 states (frames) and the tiles are arranged horizontally, each individual tile will be 20px wide. In this example, the leftmost 20px will be displayed as the "normal" state, and so forth. The images can be of any height and width, as long as they have the right number of tiles of the same size each. In general, it's best to use the smallest possible image that will still provide the appearance of the control or element that you want. In other words, if the titlebar is to be 23px tall, there's no point in using an image with a tile height of 30px - not really harmful to do so, depending on how the sizing & content margins are set, but results in a bigger file size than necessary.
Cheers,
Daiwa
If you have an image which is 100px wide, has 5 states (frames) and the tiles are arranged horizontally, each individual tile will be 20px wide. In this example, the leftmost 20px will be displayed as the "normal" state, and so forth. The images can be of any height and width, as long as they have the right number of tiles of the same size each. In general, it's best to use the smallest possible image that will still provide the appearance of the control or element that you want. In other words, if the titlebar is to be 23px tall, there's no point in using an image with a tile height of 30px - not really harmful to do so, depending on how the sizing & content margins are set, but results in a bigger file size than necessary.
Cheers,
Daiwa
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
Reply #1 Friday, February 10, 2006 5:45 AM