MAKE YOUR OWN THROBBER FOR INTERNET EXPLORER & OUTLOOK EXPRESS IN WINDOWS XP INSTRUCTIONS TO CREATE BASIC ANIMATED LOGO REPLACEMENT FOR INTERNET EXPLORER & OUTLOOK EXPRESS IN WINDOWS XP
-------------------------------------------------------------------------------- Originally written for IE4, OE Revised for IE6, OE6 & Windows 95 & Windows XP by Bill James by JCW March, 1998 Feb. 2004
The "throbber" is the image in the upper right-hand corner of Internet Explorer and Outlook Express. Its purported purpose is to show, by its animation, that IE or OE is retrieving information or e-mail. The other function of the throbber is to put before the user a near constant, graphic reminder of some vendor, most likely, Microsoft.
These instructions are to create a basic animated logo replacement for Internet Explorer 6 and Outlook Express 6 in Windows XP, using MS Paint as installed with Windows XP. The logo that you will create here will be the first letter of your name, which will spin in IE whenever loading a web page, and in OE when sending or receiving e-mail. This entails making two animated logos: a small one and a large one. Normally, the small logo is used. The large logo is used when you combine the menu bar and tool bar into one on the same line and display all of the toolbar text labels.
Follow these instructions exactly and once done, you should have your own logo or "throbber" to use instead of a branded logo from Microsoft or another vendor. You then should be able to experiment with other ideas for making different throbbers of your liking, perhaps using a graphics editing program more versatile than MS Paint.
To those who are well-versed with using MS Paint or similar software, an apology for the detail provided here could be made. But these instructions were written for those not conversant with Paint. Other users will be able to proceed more quickly with making advanced throbbers.
A. Set-up folder. On your hard drive where IE and OE are installed, create a new folder named whatever you want (for these instructions, we'll call it: My Throbber). You should be able to put the new folder wherever you want on that drive. One suggestion is under: Program Files\Common Files\Microsoft Shared. The animated logos that you make here should be saved to and kept in that new folder.
B. Create basic logo bitmap. 1. Open MS Paint to a new window. Click on Image, Attributes, and set Width=100, Height=100, Pixels, Colors, and then click OK. (The 100 by 100 size is used only for ease in working with it; the size will be reduced later.)
2. Click on the text button with an "A" at the left of the Paint window. Position your cursor at the top left of the white square in the Paint window, click and hold down the left mouse button, and drag the cursor down and to the right to encompass the white square.
A small window entitled "Fonts" should pop up. if you don't see the Fonts window, click on View and then Text Toolbar. In the Fonts window, click on the down arrow in the left box, and scroll down to Georgia and click on that font. Next click on the down arrow for the type size box, and scroll down and choose 72 as the type size. Then click on the "B" button at the right to set Bold type.
Now click once in the white square in the Paint window, and type a capital letter (the first letter of your first or last name). If part of the letter is cropped off, go back to the type size box in the Fonts window and type in a slightly smaller size, such as 70. Then click in the box with the letter in the Paint window to see if the entire letter is shown. Repeat that process until you get the right size. Once you do, click on the select button with a dotted rectangle at the upper left of the Paint window to set your letter.
3. With the dotted rectangle button still selected, click at the upper left of your letter, hold down the mouse button and drag the cursor down and to the right, to make a box around the letter. Click inside the box and drag the letter until it is centered in the white square. Then click outside the box (or click on the dotted rectangle button) to set the letter's position.
4. Now click on the button with a paint bucket at the left of the Paint window. Next select the background color that you want by right-clicking on it in the color box at the bottom of the Paint window. Choose a color that will contrast well with the color you intend to use for your letter (the foreground image).
A suggestion: while not necessary, due to sizing you may find that the best background color to use is black.
Now position the paint bucket cursor over the white background of the square, and right-click to fill the white square with your selected background color. If you are using a letter such as A or B, you also must "dump" the background color in the spaces enclosed within the letter. If you miss and put paint in the wrong place, press Ctrl+Z to undo your mistake.
5. Click on the button with the paint bucket again. In the color box at the bottom of the Paint window, click on the foreground color you want for the letter itself. Pick a color that stands out well against your background. Position the paint bucket cursor over your letter and click to paint it with your selected foreground color. Again, if you put paint in the wrong place, use Ctrl+Z to undo the mistake.
6. Save your work, naming it (say) Logo1.bmp, as a 24-bit (16.7 million colors) bitmap file (in the "Save as type" box at the bottom of the Save window, make sure "24-bit Bitmap" is selected). Leave this Logo1.bmp window open.
Note: Microsoft prescribed a 256-color setting for logo bitmaps used in IE5x. For Windows XP (IE6 & OE6), a 24-bit setting appears to work satisfactorily. It is suggested that Windows XP users save their work as 24-bit bitmap files. If the throbber that you produce doesn't work satisfactorily because of the 24-bit setting, you can convert the involved bitmap files to a 256-color setting (although realize that the lower color setting may result in some loss of color quality).
C. Create extended logo design. 1. Open a 2nd MS Paint window, and set its width and height attributes to 100 by 100.
2. Go to the Logo1.bmp window. Press Ctrl+A and then Ctrl+C to copy the entire Logo1 letter bitmap.
3. Jump back to the new (untitled) Paint window. Press Ctrl+V to paste there the letter that you just copied.
4. While still in the untitled Paint window, change its size attributes to 100 by 200, creating a white area below the letter you just pasted there.
5. Return to the Logo1.bmp window. Select Image, Flip/Rotate, Rotate by Angle, 90, OK. The letter now should be sideways. Press Ctrl+A, Ctrl+C to copy the sideways letter.
6. Jump back to the untitled Paint window, and press Ctrl+V to paste the sideways letter there. With your mouse, grab the sideways letter and drag it down from the top to fill the lower blank white area, positioning it so that no white shows on any of the 4 sides.
7. Repeat steps 4, 5 & 6 above two more times, each time adding 100 to the height attribute of the untitled Paint window and rotating the letter 90 degrees in the Logo1 window. When you are done, the untitled Paint window should have the letter appearing in 4 different positions, with a total size of 100 by 400.
8. The animated logo may work better if its cycle of images is repeated, particularly if the cycle doesn't have many images (here, 4). So in the untitled Paint window, use Ctrl+A, Ctrl+C to copy its entire image. Next change the size attributes in the untitled Paint window to 100 by 800 to double the height. Then use Ctrl+V to paste the copied image in that window, and drag the copy down to fill the lower blank white area. Repeat this step, changing the size attributes to 100 by 1600. When done, the untitled Paint window should show a vertical strip of 16 frames.
D. Add 4 lead-in frames. 1. Return to the Logo1.bmp window. Select Image, Flip/Rotate, Rotate by Angle, 90, OK, to restore the letter to its normal upright position. Use Ctrl+A, Ctrl+C to copy the Logo1 image. Next change the size attributes to 100 by 200. Then use Ctrl+V to paste the copied image in the Logo1 window, and drag the copy down to fill the lower blank white area. Repeat this step, changing the size attributes to 100 by 400. The Logo1 window now should show four frames of the letter in the normal upright position. These four frames will be "lead-in" frames. Now change the size attributes of Logo1 to 100 by 2000.
2. Go to the untitled Paint window, and use Ctrl+A, Ctrl+C to copy the entire 16-frame strip in that window. Jump back to the Logo1.bmp window, use Ctrl+V to paste the 16-frame copy in Logo1, and drag the copy down to fill the lower blank white area in the Logo1 window. Now the Logo1 window should show a vertical strip of of 20 frames: the first 4 lead-in frames of the letter in its normal upright position, and the remaining 16 frames consisting of 4 successive cycles each of the letter spinning clockwise in 90 degree increments.
3. Save the Logo1 window NOT as Logo1.bmp, but rather as a different file, say Logo2.bmp. Leave this Logo2.bmp window open. Close the untitled Paint window without saving it.
E. Reduce size to create 2 final spinning logos. 1. In the Paint window now entitled Logo2.bmp, select Image, then Stretch/Skew. Under Stretch, in the % box for each of Horizontal and Vertical, enter 22.
Note: Microsoft has said to use a frame size of 22 by 22 pixels for the final small logo. You may prefer a larger size. If a larger frame is used, Windows will increase the height of the toolbar in IE and OE to accommodate the larger sized logo. A logo frame larger than 30 by 30 is not recommended, as it distorts the menu bar rather badly. You may find that a frame size of 26 by 26 is acceptable. Whatever frame size you want to use for the final small logo, enter the number (e.g. 22) in the % box for each of Horizontal and Vertical. Use only a square frame; that is, the number should be the same for both the horizontal and vertical directions.
Click OK. Save the work as (say) My Small Logo.bmp.
2. In that same Paint window (now entitled My Small Logo.bmp), open again the Logo2.bmp file. In a similar manner as you did in the prior step, reduce Logo2 to 38% in each of the horizontal and vertical directions. Save the work as (say) My Large Logo.bmp.
Note: As mentioned at the outset of these instructions, the large logo is used if you combine your menu bar and tool bar into one on the same line and display all toolbar text labels. If you don't intend to configure IE and OE that way, you may skip making a large logo in this step 2.
You're done with the "artwork" now. Close the Paint window.
F. Register your logos. CAUTION: This section describes how to change your registry to recognize the new throbber you have made. If you are not familiar with working in the registry, you first should read background material on doing so (widely available on the internet, including at Microsoft's website, e.g. MS Knowledge Base Articles 256986 & 322756) before making any changes to your registry. Before making registry changes, always back-up the registry keys to be changed (it wouldn't hurt also to enter a manual restore point in Windows System Restore).
Another note: As mentioned previously, the large throbber (frame size 38 by 38 pixels) is used if the menu bar and tool bar are combined into one on the same line, with all toolbar text labels displayed. If you don't intend to configure IE and OE that way and have skipped making a large logo in step E.2 above, do not create the BrandBitmap registry string value below.
There create (or modify if they already exist) two string values (REG_SZ), one named "SmBrandBitmap" and the 2nd named "BrandBitmap" (both without the quote marks). For SmBrandBitmap, the value data should be the full path and file-name of the small logo you created; e.g.
C:\Program Files\Common Files\Microsoft Shared\My Throbber\My Small Logo.bmp
For BrandBitmap, the value data should be the full path and file-name of the large logo you created; e.g.
C:\Program Files\Common Files\Microsoft Shared\My Throbber\My Large Logo.bmp
If you prefer not to edit your registry directly, copy to Notepad the information between the two dotted lines below (excluding those dotted lines). Then in that Notepad copy, in each of the lines for SmBrandBitmap and BrandBitmap, complete between the 2nd set of quote marks the full path and file-name of your small logo and of your large logo, respectively (see the examples above). Save the Notepad file as a .reg file (e.g. My Throbber.reg), and put it in the new folder you made. Then import or merge that .reg file to enter the logo information in your registry. ----------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- Whichever way you registered your logos, better practice suggests that you close all programs and reboot. Now open IE and OE to see your handiwork. If you still see the MS logo, go through the instructions again and see what went wrong.
Ideas for other throbbers: --- Spell out your name, one letter at a time. Try painting the letters of your name in different colors. You will need to make multiple consecutive images of each letter, or the letters will flash by so quickly you won't be able to read them. (This is one way to slow the rate at which a throbber moves: make multiple consecutive frames of each image; the more frames of an image, the more slowly the throbber moves.)
--- Have your name scroll across the box. First create a wide bitmap showing horizontally the letters of your name plus at the end, the first letter of your name (e.g. if your name were ABC, the bitmap would be 400 by 100 and show ABCA). Also make, in a manner similar to section D above, a 100 by 500 vertical bitmap strip of 5 consecutive frames of the first letter of your name. Then flip horizontally the wide bitmap, reduce its width by 10 pixels, flip it horizontally again, reduce its width to 100 pixels, and copy it to the other Paint window beneath the 5 frames of your first letter.
Return to the original wide bitmap, flip it horizontally, reduce its width by 20, flip it horizontally again, reduce its width to 100, and similarly copy it to the other Paint window. Repeat this process, reducing the width by 10 pixels each time, until all positions of each letter in your name appear in the Paint window containing the vertical bitmap strip (in our example of a 3-letter name, your final vertical bitmap strip would have 34 frames).
You can experiment with the scrolling movement by using increments of other than 10 pixels to reduce the width (e.g. to slow the scrolling speed, use smaller increments, say of 5 pixels, or use multiple consecutive frames of each image). And again, you can try painting the letters of your name in different colors.
--- Try actual photos that have been converted to bitmaps -- perhaps a collage of family members' faces. As you won't see much detail due to the small size, use simple photos. Even video can be converted frame by frame with the right equipment.
--- Take a look at the webdings and wingdings fonts in Windows (view in both the lower and upper cases) for a variety of images that you might want to modify for use as a throbber. The internet also is a rich source of imagery; search it and take advantage of free images that you find, saving them as bitmap files and and then manipulating them as you like. Try flipping images horizontally or vertically, instead of rotating them as done in section C above. Or try combinations of flipping and rotating images.
Other notes: a) If you intend to have a throbber that proceeds through a definite cycle, it is important to have the 4 introductory frames as a lead-in to the frames constituting the desired cycle. (For the letter logo, the lead-in frames were created in section D above.) This means that usually the first 5 frames of your final bitmap strip will be the same image. Otherwise, a gap will occur in the throbber's motion.
While information is being retrieved, the throbber scrolls through the vertical bitmap strip; when it reaches the bottom end, it loops back to the beginning of the strip, but starts with with the 5th frame, not the first. If you don't include the 4 lead-in frames, you will lose the motion represented by the first 4 frames of the strip each time the throbber loops back to start over again. (The 4 lead-in frames were not used in Windows 95.)
b) While you have saved Logo1 and Logo2 as bitmap files, neither is used to "run" your animated logo. Once you have completed these instructions and your animated logos are working satisfactorily, you may delete the Logo1.bmp and Logo2.bmp files. However, if in the future you make more detailed throbbers, you may want to keep their equivalent of the Logo1 bitmap file, particularly if time-consuming to reproduce, in case you want to modify a throbber or your final throbber files become corrupted. Possible corruption of a final throbber file is a valid reason to keep the Logo2.bmp file or its equivalent as well.
c) If you have other throbbers and want to switch the throbber you are using, you may prefer to change the names of your final throbber files, rather than changing the throbber file names in the registry. For example, in section F above, you could enter in the registry for the small throbber a generic file name such as My Small Throbber.bmp, and for the large throbber, My Large Throbber.bmp (in each case, preceded by the correct path).
Then when you want to switch the throbber that you display, say from a letter logo to a picture, you would: first close IE and OE; then change the file names of the letter logo to something else (say My Small Logo.bmp and My Large Logo.bmp); then change the file names of the picture-throbber to My Small Throbber.bmp and My Large Throbber.bmp.
To return to using the letter logo, you would reverse the process: first close IE and OE; then change the file names of the picture-throbber to something else (say My Small Picture.bmp and My Large Picture.bmp); then change the file names of the letter logo to My Small Throbber.bmp and My Large Throbber.bmp. You would not need to reboot in either instance.