You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A custom start button requires an image that contains 3 distinct parts – one for the normal state of the button, one for the hot state (when the mouse is over the button), and one for the pressed state. The 3 parts must be the same size.
29
+
<br>
30
+
<br>
31
+
<imgsrc="images/button0.png">
32
+
<br>
33
+
<br>
34
+
By default the width of the start button equals the width of the image. The height of the button is the height of the image divided by 3. You can scale the image by overriding the width of the button from the Open-Shell settings. The height will be adjusted to preserve the aspect ratio.
35
+
<br>
36
+
<br>
37
+
The image must be saved in either PNG or BMP format (including 32-bit BMP files). For best results use an image editor that supports transparency, like Photoshop, Gimp or Paint .NET.
38
+
<br>
39
+
<br>
40
+
<h3>Where to download</h3>
41
+
You can find many start button images on the Internet. Here are some of the places:
Open-Shell does support animated start buttons. They contain animated transitions between the different states.
56
+
<br>
57
+
<br>
58
+
The animated image consists of one or more rows of pixels that describe the animation, followed by one or more button frames. The description rows need to be fully opaque (A=255). The frames are counted from 0 – frame0, frame1, .... All frames must be the same size.
59
+
<br>
60
+
<br>
61
+
<imgsrc="images/button1.png">
62
+
<br>
63
+
<br>
64
+
<h3>Main information (stored in the first 6 pixels)</h3>
65
+
The first two pixels of the first row need to be:
66
+
<br>
67
+
<spanstyle="font-weight: bold;"> Pixel 0:</span> color R=65, G=78, B=77 (This is the text ANM in ASCII)
68
+
<br>
69
+
<spanstyle="font-weight: bold;"> Pixel 1:</span> color R=66, G=84, B=78 (This is the text BTN in ASCII)
70
+
<br>
71
+
They allow the start button to recognize that this image contains animation.
72
+
<br>
73
+
<br>
74
+
The next pixel describes the number of frames and the number of description rows:
75
+
<br>
76
+
<spanstyle="font-weight: bold;"> Pixel 2:</span> The red channel contains the number of description rows (usually 1). The blue channel contains the number of total frames in the bitmap (this limits the number of frames to 255).
77
+
<br>
78
+
If one row is not enough to describe the animations, it can continue on two or more rows.
79
+
<br>
80
+
The contents of this pixel and the total size of the image determine the size of the individual frame. The number of description rows (red channel) is subtracted by the total height of the image, and then it is divided by the number of frames (blue channel).
81
+
<br>
82
+
<br>
83
+
The next 3 pixels contain the frames for the 3 distinct states of the start button – Normal, Hot and Pressed.
84
+
<br>
85
+
<spanstyle="font-weight: bold;"> Pixel 3:</span> The blue channel contains the index of the frame for the Normal state (usually 0)
86
+
<br>
87
+
<spanstyle="font-weight: bold;"> Pixel 4:</span> The blue channel contains the index of the frame for the Hot state
88
+
<br>
89
+
<spanstyle="font-weight: bold;"> Pixel 5:</span> The blue channel contains the index of the frame for the Pressed state
90
+
<br>
91
+
<br>
92
+
<imgsrc="images/button2.png">
93
+
<br>
94
+
<br>
95
+
<h3>Transitions</h3>
96
+
The rest of the pixels describe the transitions between the different states, in this order:
97
+
<br>
98
+
<ol>
99
+
<li>Normal to Hot</li>
100
+
<li>Hot to Normal</li>
101
+
<li>Normal to Pressed</li>
102
+
<li>Pressed to Normal</li>
103
+
<li>Hot to Pressed</li>
104
+
<li>Pressed to Hot</li>
105
+
</ol>
106
+
The blue channel of the first pixel of each transition contains the duration of the animation in 1/60th of a second (so 60 means 1 second). If this is 0, then there is no transition.
107
+
<br>
108
+
The green channel contains the number of frame ranges that follow. If this is 0, then the transition is a direct transition from the start state to the end state.
109
+
<br>
110
+
The red channel is 1 for the default behavior to cross-blend between frames and 0 to disable blending.
111
+
<br>
112
+
<br>
113
+
The next few pixels contain pairs or frame ranges that make up the animation between the states. Their count is in the green channel of the first pixel of the transition. The first frame in the range is in the blue channel and the last frame is in the red channel. If the first and last frame of the range are different, then both frames and all frames between them are included.
114
+
<br>
115
+
<br>
116
+
If the first and the last frame are the same, then the range identifies a single frame. This allows for precise selection of each frame of the animation.
117
+
<br>
118
+
<br>
119
+
<imgsrc="images/button3.png">
120
+
<br>
121
+
<br>
122
+
In this example the Normal to Hot animation contains frames from 0 to 10. They play for 0.3 seconds and allow blending between frames. The Hot to Normal animation is the same but in reverse – it plays from frame 10 to frame 0.
123
+
<br>
124
+
The other 4 transitions are empty.
125
+
<br>
126
+
<br>
127
+
<h2>Open-Shell Limitations</h2>
128
+
While the format is very flexible and allows for custom animations between all states, Open-Shell does not support all features.
129
+
<br>
130
+
<ol>
131
+
<li>It only supports animations between the Normal and Hot states. Any transitions involving the Pressed state are instant to improve responsiveness
132
+
<br>
133
+
<br>
134
+
</li>
135
+
<li>The animations between Normal and Hot must use the same (or similar) frames in both directions. Potentially the two transitions can play at different speed. The reason is that at any point during the animation it can be interrupted and the opposite animation will start from the current frame. This can happen when the mouse moves in and out of the start button
136
+
<br>
137
+
</li>
138
+
</ol>
139
+
<br>
140
+
The system also allows you to create a button with a single image. Just set pixels from 3 to 11 to 0. Then frame 0 will be used for all states.
The image must be a 32-bit PNG or BMP. By default the width of the
311
311
image determines the size of the button. You can override that by
312
312
entering a custom width.<br>
313
-
Read the <ahref="http://www.classicshell.net/tutorials/buttontutorial.html">Button Tutorial</a> for more information about creating custom buttons.<br>
313
+
Read the <ahref="ButtonTutorial.html">Button Tutorial</a> for more information about creating custom buttons.<br>
314
314
You can find many custom Start button images online. Here are few examples:<br>
0 commit comments