Classic Shell: Forum

**[UPDATED!] 255-frame Animations described in the 4th Post of this thread**
The format "32-bit PNG" seems to confuse many people, so i'll explain it here, and how to make a custom Start Menu Orb
The above orb set was created by Wesley, available here: viewtopic.php?f=18&t=194&p=1667#p1667

• Make a new image thats 200wx200h with a transparent background
• Create the image as you want your Start Menu Orb to look in its normal state
  • Its a good Idea to test your image as small as 30x30 and as big as 200x200 to be sure it still looks good
• Resize the Canvas to 200w600xh
• Duplicate your original image two times, so you have 3 layers, and center the other two in the 200-400 & the 400-600 square
• Edit the middle image to be your hot state, as you want it to look when the cursor is moved over the start button
• Edit the bottom on the bottom as you want it to look when the start button its pressed
• Be sure you are working in 8-bit mode using Transparency (Transparent Background)
• Click Save, in most programs transparency will be saved automatically, adding a 4th 8-bit channel (Alpha) to the Three 8-bit color channels: 8-bit Red, 8-bit Green & 8-bit Blue (RGB 24-bit).. meaning most PNG's will automatically be saved as 32-bit images (RGBa)
• If it gives you an option to save it as 24-bit, select that, and also select "Transparency" checkbox, 24+8=32
• Save the image

*You can create any size square image you like, such as 150x150, just be sure its centered, and your graphic occupies the space, then just triple the pixel height when you resize the canvas (150x3=450, so resize a 150x150 image to 150w x 450h, etc.. and it doesnt have to be square, so long as the widths are all the same, depending on how you want it to look, or sit..etc )..
**Its important NOT to work in 16-bit or 32-bit mode when creating your PNG, only 8-bit.. as that setting is per channel, so 32-bit CMYK would would be 128-bit.. PNG doesnt support CMYK, and 32-bit doesnt support Alpha transparency, so 32-bit mode would create 96-bit 3-channel (RGB) .PNG image, but you must have only a 32-bit image for most any custom PNG graphic having to do with Windows
*Step 2 - Set it as your Start Menu Orb

• Save your PNG image to a permanent location with a path name will not be moved or changed
• Right-click your Classic Shell Orb & go to Settings:
• Click the "Start Button" tab
• Under "Button Look" select "Custom Button"
• Click "Button Image" and click the "..."
• Browse to your new custom image
• Under "Button Size" select any size you want your button to be
  • Between 30 & 50 for single row task bar, or up to 70 or more if you want it bigger
  • Between 70 & 100 if you use a double-row taskbar, or as high as 200 if you like a real big one
  • The example above is size 170
• Click OK

its also a good idea to set up a Color Square Checking System, as such:

• If your image is 300x300, for example, create a new layer, select it, and fill it with Red
• Resize your image Canvas to 300wx900h
• Duplicate the Red Color layer 2 times
• Use the Fill Bucket to fill one Square with Blue and one square with Green
• Set the three color boxes exactly on the document so they are not overlapping, and there is no space between them, and they are centered exactly in the middle.. so one nudge of any block in any direction will leave a blank space.
• Set the 3 color block layers behind all other layers
• Normal State:
  • Set you first Image of the Normal State on the top, centered on the top colored block
  • Click the layer for the color block thats on top
  • Ctrl+Click the Layer to select the block, or Use a Magic Wand select it
  • Right-Click and select "Invert" to select the space of the bottom two squares
  • Click your top graphic image layer, and hit Delete on your keyboard
• Hot State:
  • Set you first Image of the Hot State in the Middle section, centered on the middle colored block
  • Click the layer for the color block thats in the middle
  • Ctrl+Click the Layer to select the block, or Use a Magic Wand select it
  • Right-Click and select "Invert" to select the space of the squares above & below it
  • Click your middle graphic image layer, and hit Delete on your keyboard
• Click State:
  • Set you first Image of the Click State on the bottom, centered on the bottom colored block
  • Click the layer for the color block thats on bottom
  • Ctrl+Click the Layer to select the block, or Use a Magic Wand select it
  • Right-Click and select "Invert" to select the space of the two squares above it
  • Click your top graphic image layer, and hit Delete on your keyboard
• Hide the 3 color Block Layers
• You should now have a very clean graphic with no overlapping or strange alignment
• Save as PNG with Transparency
• Done

Below is an Example, the Original Can be found Here:

Another, more fail-safe way to work, might be to:

• Create your 300x300 icon
• Duplicate it two times, by either:
  • Hitting Ctrl+A to select all, New Document from Clipboard, Repeat
  • or Saving it, then Find it in the folder & duplicate it two times
• Create a New Document sized 300w x 900h
• Create the Colored boxes as described in the second step above
• In each of the three 300x300 images:
  • Ctrl+A to Select All
  • Crop Image to remove any off-stage elements
  • Group all visible Elements into a New Group
  • Ctrl+Drag to the 300x900 doc, then Hold Ctrl+Shift to release to paste in place, Use Shift +Up/Down (just Up /Down for smaller movements) to move it Vertically up or down to its location, centered on its colored block
  • **you can also use the Distribute & Align functions to help get them distributed equally
• Trim the Edges with the Colored Square Boxes as detailed in 2nd post above
• Save as PNG
• The main difference between this method & the one above, is that you are creating a new document, rather than resizing, then importing 3 separate graphic in fresh, so there's less likelihood of a few pixels going astray

**also, if you are using a Gradient Transparency be sure it only fills the bottom half of the Image background, or else the faint edges will show around the icon.. you can do that by either filing a marquee selection of the desired height, or by filling the layer, then transforming it and dragging the top downward

[UPDATE] ANIMATED ORBS! (up to 255 Frames of Animation!):

1. Create your states the same as above, only you can create as many as 255.. all the same width, just as before, using the control boxes so they are all exactly spaced, for as many as you have.. be sure to make your document height exactly the size needed.. for example if your box is 256 w x 230 h, and you want 50 frames, then multiply 230 x 50, and make your canvas size 256w x 11500h.
2. Select the Top Box and Paste your Animated Frame directly in the box, auto-fitted to the dimensions:
   • Select a colored box with the Marching Ants, then paste your single graphic animation frame on a new layer within those marching ants, then repeat with the rest of the animated frames, putting every frame over a selected different color (with the marching ants), so that they'll all be centered nicely
3. Arrange all your colored boxes down so there is no spaces in between
   • If you have access to Photoshop:
     • Create one colored box, Hit Ctrl+Alt+T to make a Transform-Duplicate
     • Use your keyboard arrow keys to move the new box directly down below the current box, zoom in at a pixel level to be sure there is no overlapping pixels
     • Hit Enter to complete the transition
     • Zoom all the way out to view the full document
     • Hit Ctrl+Alt+Shift+T over and over to repeat the last transition until you get to the bottom if the document
     • Go back and Ctrl-Click on each box and hit Ctrl+U to adjust its color a bit, repeat down to the bottom

• When you're finished with your orb, resize your Canvas to 1 pixel more in height.
• Select all your layers and move them all down one pixel, if your extra pixel row was added to the bottom, then begin coloring the top 1-pixel row with the following colors, pixel by pixel, as follows:

Pixels 0 & 1 - Standard Animation Data Pixels (doesn't change):

• Double-click your color picker and change RGB to 65R 78G 77B, switch to your 1-pixel sized pencil and click on the first pixel in the far left of the row to color it that color - This is called Pixel "0"
• Change RGB to 66R 84G 78B and color in the pixel to the right of the last one, the second pixel from the left, Pixel "1"

Pixel 2 - Graphic Animation Frame Data:

• Change RGB to 1R 0G, then change B to the number of animated frames you have, like 50B, and color the 3rd pixel in your new row, which is Pixel "2"... (the "1R" just states we're only using one row here, which is all we'll ever need, so this doesn't change

Pixels 3, 4, & 5 - Defining Frames for Button States

• Normal State:Change RGB to 0R, 0G, and then change R to the frame you want in your normal state, first frame=0, so 0B for the first frame as Cold state), then color the next pixel, the 4th from the left, or Pixel "3"
• Hot State:Change RGB to 0R 0G and change B to the frame you want on your Hot state, say, frame 48, so 48B.. then use that to color in the 5th pixel, or Pixel "4"
• Pressed State:Change RGB to 0R, 0G, then change B to the frame you want when clicked.. say frame 49, so 49B, then use that to color in the 6th pixel, or Pixel "5"

Pixels 6 & 7 - Defining Normal to Hot Animation, Timing, & Frames

• Change RGB to R1 G1 and change B the time length you want (18= 0.3 seconds, make the number higher for slower animations), such as 50B.. Color the 7th pixel in the row (called Pixel "6") with this color
• Change RGB to R= End frame, G=0, B= Start Frame, as you want it to play from normal to hot.. such as 48R 0G 0B, to go from beginning to end (0 is frame 1, 49 is frame 50), then color the 8th pixel (called Pixel "7") with this color.. (Note: raising this number doesnt seem to affect the play.. all frames should be played if the range is higher than what is present)

Pixels 8 & 9 - Defining Hot to Normal Animation, Timing, & Frames

• Change RGB to R1 G1 and change B to the time length you want (it says 18= 0.3 seconds, so make the number higher for slower animations), such as 50B.. Color the 7th pixel in the row (called Pixel "8") with this color (this color will probably be the same as Pixel "6" above..)
• Change RGB to R= End Frame, G=0, B = Start frame, as you want it to play from Hot back to normal.. so if you wanted it to play backwards you'd enter 0R 0G 48B.. (0 is frame 1, 49 is frame 50), or if you just wanted it to repeat the same animation you'd use the same as above… then color the 9th pixel with this color

Pixels 10, 11, 12, & 13 - Not available for Orb animation in Classic Shell

• Color them 0R, 0G, 0B, (100% Black in RGB)

------------------

1. Save it, export it as PNG, and load it into classic shell
2. You can cancel the animation by simply clicking... so dont worry about making long animations
3. Making a short Normal to Hot animation, then a very long Hot to Normal animation will allow your animation to continue playing as you move on to other things (as long as you dont click anything)

You can also put Completely different animations for you Orb.. such as:

• Frame 49 = Normal State
• Frame 2-25 (Completely Different) are used for the Normal to Hot transition...
• Then frames 30-45 (Completely different again) are for the Hot back to Normal transition
• Then Frame 1 (a completely unrelated image, again) is used for the Pressed state

Interested to see or hear how other people are using this new implementation of Animated Frames.. share your ideas, requests, or work in the Start Button Forum Section!

its very hard to resize animated orbs, and the more frames you have the bigger it will become, making it difficult to share..

I recommend under 20 frames.. 12-15 is probably best

Resizing will negate the first pixel line of data you entered, so you will have to enter that again... but resizing will also often ruin the entire animation as the height and width wont match up..

one possible solution would be to delete the first row from the image, then resize, then add another row to the top of your smaller image and add the animation data to the new row.. I'll test this later

it may also be necessary that the new height be equally divisible by the number of frames, without decimals.. (perhaps this is required for all animations, i dont know if it supports decimal places during its division)