mirror of
https://github.com/Open-Shell/Open-Shell-Menu.git
synced 2026-04-12 09:57:24 +10:00
259 lines
12 KiB
HTML
259 lines
12 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<!-- Mirrored from www.classicshell.net/tutorials/buttontutorial.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 05 Dec 2017 12:31:24 GMT -->
|
|
<head><title>Classic Shell: Custom Start Buttons</title>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta name="keywords" content="classic shell, start menu, explorer, windows 7, vista">
|
|
<meta name="robots" content="index, follow">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
<link href="../css/style.css" rel="stylesheet" type="text/css"></head><body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
|
|
<div style="border:thick; border-style: solid; border-color: red; font-size: 200%; text-align: center;">Original Page: <a href="http://www.classicshell.net">http://www.classicshell.net</a><br>Original Author: Ivo Beltchev</div>
|
|
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
|
|
|
|
<tbody><tr>
|
|
<td background="../images/bg_head.png" height="1">
|
|
<table style="width: 100%; height: 123px;" border="0" cellpadding="0" cellspacing="0">
|
|
<tbody><tr>
|
|
<td style="width: 179px; text-align: center;"><img src="../images/corner.png" style="width: 179px; height: 129px;" alt=""><br>
|
|
</td>
|
|
<td>
|
|
<table style="width: 100%; height: 81px;" border="0" cellpadding="0" cellspacing="0">
|
|
<tbody><tr>
|
|
<td style="vertical-align: middle; width: 100%; height: 101px;">
|
|
|
|
<h1 class="title" style="margin-top: 20px; height: 65px; vertical-align: middle;">
|
|
|
|
<!-- Caption --> Classic Shell: Custom Start Buttons
|
|
|
|
</h1>
|
|
</td>
|
|
<td style="width: 47px; height: 101px;"><br>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" background="../images/bg_menu.png" height="28">
|
|
<table border="0" cellpadding="0" cellspacing="0" height="25">
|
|
<tbody><tr>
|
|
|
|
<!-- Start Navigation -->
|
|
|
|
<td class="menu" align="center"><a href="../index.html" class="menu">HOME</a></td>
|
|
<td class="menu" align="center" width="36">|</td>
|
|
<td class="menu" align="center"><a href="../forum/index.html" class="menu">FORUM</a></td>
|
|
<td class="menu" align="center" width="36">|</td>
|
|
<td class="menu" align="center"><a href="../faq/index.html" class="menu">F.A.Q.</a></td>
|
|
<td class="menu" align="center" width="36">|</td>
|
|
<td class="menu" align="center"><a href="../gallery/index.html" class="menu">SCREENSHOTS</a></td>
|
|
<td class="menu" align="center" width="36">|</td>
|
|
<td class="menu" align="center"><a href="../translations/index.html" class="menu">TRANSLATIONS</a></td>
|
|
<td class="menu" align="center" width="36">|</td>
|
|
<td class="menu" align="center"><a href="../downloads/index.html" class="menu">DOWNLOADS</a></td>
|
|
|
|
<!-- End Navigation -->
|
|
|
|
|
|
</tr>
|
|
|
|
</tbody></table>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="bgrx" background="../images/bg.gif" bgcolor="#e6f2fa" height="100%" valign="top">
|
|
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
|
|
<tbody><tr>
|
|
<td background="../images/bg_left.gif" valign="top" width="179">
|
|
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
|
|
<tbody><tr>
|
|
<td height="52"><br>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td height="18"><br>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="height: 15px; text-align: center; vertical-align: top;"><br>
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody></table>
|
|
</td>
|
|
<td height="100%" valign="top">
|
|
<table style="width: 100%; height: 100%;" border="0" cellpadding="10" cellspacing="0">
|
|
<tbody><tr>
|
|
<td colspan="3" style="height: 10px; vertical-align: top;">
|
|
|
|
<!-- Start Main Text -->
|
|
<h1>Simple Start Buttons</h1>
|
|
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.<br>
|
|
<br>
|
|
<img src="images/button0.png"><br>
|
|
<br>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 Classic Shell settings. The height will be adjusted to preserve the
|
|
aspect ratio.<br>
|
|
<br>
|
|
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.<br>
|
|
<br>
|
|
<h2>Where to download</h2>
|
|
You can find many start button images on the Internet. Here are some of the places:<br>
|
|
<br>
|
|
<a href="../forum/viewforuma213.html?f=18">http://www.classicshell.net/forum/viewforum.php?f=18</a><br>
|
|
<br>
|
|
<a href="http://www.sevenforums.com/themes-styles/34951-custom-start-menu-button-collection.html">http://www.sevenforums.com/themes-styles/34951-custom-start-menu-button-collection.html</a><br>
|
|
<br>
|
|
<a href="http://www.sevenforums.com/customization/78291-big-group-custom-start-orbs.html">http://www.sevenforums.com/customization/78291-big-group-custom-start-orbs.html</a><br>
|
|
<br>
|
|
<a href="http://tutoriales13.deviantart.com/art/Orbs-153450418">http://tutoriales13.deviantart.com/art/Orbs-153450418</a><br>
|
|
<br>
|
|
<a href="http://www.deviantart.com/?q=start+button+orb">http://www.deviantart.com/?q=start+button+orb</a><br>
|
|
<br>
|
|
<h1>Animated Buttons<br>
|
|
</h1>
|
|
Classic Shell version 4.0.5 introduces the support for animated start
|
|
buttons. They contain animated transitions between the different states.<br>
|
|
<br>
|
|
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.<br>
|
|
<br>
|
|
<img src="images/button1.png"><br>
|
|
<br><br>
|
|
<h2>Main information (stored in the first 6 pixels)<br>
|
|
</h2>
|
|
The first two pixels of the first row need to be:<br><span style="font-weight: bold;">
|
|
Pixel 0:</span> color R=65, G=78, B=77 (This is the text ANM in ASCII)<br><span style="font-weight: bold;">
|
|
Pixel 1:</span> color R=66, G=84, B=78 (This is the text BTN in ASCII)<br>
|
|
They allow the start button to recognize that this image contains animation.<br>
|
|
<br>
|
|
The next pixel describes the number of frames and the number of description rows:<br><span style="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).<br>
|
|
If one row is not enough to describe the animations, it can continue on two or more rows.<br>
|
|
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).<br>
|
|
<br>
|
|
The next 3 pixels contain the frames for the 3 distinct states of the start button – Normal, Hot and Pressed.<br><span style="font-weight: bold;">
|
|
Pixel 3:</span> The blue channel contains the index of the frame for the Normal state (usually 0)<br><span style="font-weight: bold;">
|
|
Pixel 4:</span> The blue channel contains the index of the frame for the Hot state<br><span style="font-weight: bold;">
|
|
Pixel 5:</span> The blue channel contains the index of the frame for the Pressed state<br>
|
|
<br>
|
|
<img src="images/button2.png"><br>
|
|
<br><br>
|
|
<h2>Transitions</h2>
|
|
The rest of the pixels describe the transitions between the different states, in this order:<br>
|
|
<ol>
|
|
<li>Normal to Hot</li>
|
|
<li>Hot to Normal</li>
|
|
<li>Normal to Pressed</li>
|
|
<li>Pressed to Normal</li>
|
|
<li>Hot to Pressed</li>
|
|
<li>Pressed to Hot</li>
|
|
</ol>
|
|
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.<br>
|
|
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.<br>
|
|
The red channel is 1 for the default behavior to cross-blend between frames and 0 to disable blending.<br><br>
|
|
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.<br>
|
|
<br>
|
|
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.<br>
|
|
<br>
|
|
<img src="images/button3.png"><br>
|
|
<br>
|
|
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.<br>
|
|
The other 4 transitions are empty.<br>
|
|
<br>
|
|
<h1>Classic Shell Limitations</h1>While the format is very flexible and
|
|
allows for custom animations between all states, Classic Shell does not
|
|
support all features.<br>
|
|
<ol>
|
|
<li>It only supports animations between the Normal
|
|
and Hot states. Any transitions involving the Pressed state are instant
|
|
to improve responsiveness<br>
|
|
<br>
|
|
</li>
|
|
<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<br>
|
|
</li>
|
|
</ol>
|
|
|
|
<br>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.<br>
|
|
<br>
|
|
<br>
|
|
<!-- End Main Text -->
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody></table>
|
|
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="bgrx" align="right" background="../images/bg_bottom.gif" bgcolor="#88cce6" height="1">
|
|
<table border="0" cellpadding="0" cellspacing="0">
|
|
<tbody><tr>
|
|
<td rowspan="" colspan="2" height="8"><img src="../images/spacer.gif" height="8" width="1"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cpr">Classic Shell © 2010-2015, Ivo Beltchev.<br>All right reserved.</td>
|
|
<td width="21"><img src="../images/spacer.gif" height="1" width="21"></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" height="7"><img src="../images/spacer.gif" height="7" width="1"></td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
|
|
</body>
|
|
<!-- Mirrored from www.classicshell.net/tutorials/buttontutorial.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 05 Dec 2017 12:31:28 GMT -->
|
|
</html> |