Classic Shell: Forum

ANIMATED RUBIKS'S CUBE BUTTON

Attached is my animated Rubik's cube start button. To create it I made an actual Rubik's Cube in SketchUp with rotatable sections. I then exported a 2D snapshot of the cube every time I rotated the top and bottom sections by 15 degree increments in clockwise and anti-clockwise directions respectively. I then repeated the processes for the left and right sections. The snapshots were then compiled into a 48x625 png in GIMP, totalling 13 frames.

The animation is quick and snappy. Hover over the button to initiate the complete animation, scrambling the cube. Move cursor away to reverse animation, unscrambling the cube.

Edit: For anyone interested in a version featuring a pressed state, please click here.

Very clever

Best animated button yet, Love it

Superb.
What's your future project - transformers?

Thanks for the feedback


Transformers sounds rather ambitious haha. I have some other ideas, but nothing quite as inordinately complex as a Transformer.

@juniper If you want transformers, you could probably find a GIF then just rip the layers, and delete the background. Though it might be a little rough, and you would probably be better off with a webM either one is doable without much artistic talent

Oh this is simply too good!

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

I am a Windows enthusiast and did Classic Shell's testing and usability/UX feedback.

Thanks, glad you like it

A suggestion: could you add some differentiation for the "pressed" state?

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

I am a Windows enthusiast and did Classic Shell's testing and usability/UX feedback.

Sure thing. I'll try and add one perhaps later on this evening if I have time. I didn't make a specific pressed state frame partly because CS doesn't support animation between hot and pressed states which looks slightly odd proceeding an animation IMO, and partly because I don't mind not having a pressed state frame. However I'd be more than happy to include a pressed state frame with my past and future buttons.

Edit: Done. Updated version can be found here

yeah i just found that out the hard way, regarding the lack of animation between hot and pressed. i added a hot state frame to my button and it just creates more work (i.e. an extra frame). if you could animate between hot and pressed, it's no extra work/frames, because you could reuse the existing frames.

Yes I must confess to learning that the hard way too haha. I agree with what you're saying. I might also say that if one is going to have an additional pressed state frame after an animation between the default and hover state, then you would probably agree that the pressed state frame should look noticably different in order to be recognized as the pressed state.

The trouble with this is that since animation isn't supported between hover and pressed states, you effectively go from a smooth transition between the default and hover state and then jump to the markedly different pressed state frame without transition. I suppose it's a matter of personal opinion/taste whether this presents an issue - ordinarily its not noticeable in 3 part buttons, but in my opinion this jump begins to look a little strange the longer and more elaborate the animation is between the default and pressed states.

yep i completely agree with you. i experimented with that and found the same thing. it looks like crap to jump to a different frame. i ended up just using a color effect like the non animated buttons typically do. otherwise it jumps and looks terrible.

The button now features a Pressed State frame.

Wasn't quite sure what kind of Pressed State look to go for so I ended up making three versions. Choose from the attached files below and decide for yourself which, if any you like. The pressed state in the first file simply features an inverted colour scheme. The second features an altered colour palate which I personally think looks more complimentary than the inverted colours. In the third I changed all of the faces to solid white and then made them slightly transparent so that when you click the button the faces take on the colour of your task bar.

If anyone desires a different type of pressed state, let me know and I'll see what I can do.

Edit: also, just for the sake of clarity, the button is configured tp display the first frame by default and then transition through to the second last frame when the mouse hovers over the button. Clicking the button will display the final frame.

Thanks Situla! I like #2 the best. The reason I requested a separate pressed state is that when you are using the keyboard to open the Start Menu (Win or Ctrl+Esc), it's the only indicator for the button. There's no hover state

For touchscreens too, the same is true.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

I am a Windows enthusiast and did Classic Shell's testing and usability/UX feedback.

ohhh, i didn't know that. thanks for explaining. so the pressed state is pretty important then. i added one to my button just for the hell of it. didn't realize it had value.

well its value is arguable... because the fact that the menu opens is indication enough that you pressed/touched the button it is nice to have aesthetically though

that's true. but this all makes me wonder if the whole way that animated buttons are currently implemented makes sense. it seems like you should just define a set of frames to be animated and define a speed (that is limited for safety). then no matter what happens the animation plays. it would be easier for people creating the button and would seem to fill the needs of all. you would probably want to limit the number of frames as well as the total play time. but allow people to slow down or speed up the animation so that it visually looks good. right now having 255 frames seems a bit much. 13 seems more reasonable. i doubt anyone wants to see an animation more than 30 seconds long either. it might not be a bad idea to have the animation time be something you can set in classic shell settings. that way all one needs to do to create an animated button is line up 13 frames. the first and last frame being the same. so no line of pixels would even need to be defined at all. you'd probably get more people creating buttons if it were that easy.


update; even better idea. limit to 12 frames and just have the program replay the first frame at the end of the animation, so that it ends where it started.

What you are suggesting is replacing the 'on-hover' animation with an 'on-click' It has been suggested by several to add an 'on-click' animation that plays after the button is clicked, in ADDITION to on-hover.

Oh I see - if you just tap windows key it skips right past the hover animation, which was originally the only activity indication the button expressed. aside from the start menu popping up of course. You know now that I think about it, for all the hotkeys I generally press day to day I actually almost never press the windows key to access the start menu except in combination with other keys, i.e. windows+E, windoes+D, so the issue you outlined never really occured to me

Well, I intend to include unique pressed states from now on.

This may make it easier for people making the buttons, but I think it would also shift a lot of work and configuration onto the end user, depending on how its implemented. As things stand, one is responsible for making a button that is essentially an all-in-one product that works out of the box without additional customization and configuration (minus sizing). If Classic Shell were altered so that all one had to do is make the image file used as a button, then configure it to work using the Classic Shell interface, then you're basically forcing people who download your button to replicate those same configurations themselves in Classic Shell in order to get the button to work on their end. For the less savy or willing users, this may be a bridge too far and lead to a lot of problems.