It is currently Thu Mar 28, 2024 2:16 pm

All times are UTC - 8 hours [ DST ]




Post new topic Reply to topic  [ 21 posts ] 
Author Message
PostPosted: Sun Mar 08, 2015 8:45 am 
Offline

Joined: Sun Mar 08, 2015 8:16 am
Posts: 22
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.


Attachments:
RubiksCubeStartButton.png
RubiksCubeStartButton.png [ 118.14 KiB | Viewed 68473 times ]


Last edited by Situla on Wed Apr 08, 2015 7:07 am, edited 1 time in total.
Top
 Profile  
Reply with quote  
PostPosted: Sun Mar 08, 2015 9:06 am 
Offline
Site Admin
User avatar

Joined: Wed Jan 02, 2013 11:38 pm
Posts: 5333
Very clever :)


Top
 Profile  
Reply with quote  
PostPosted: Sun Mar 08, 2015 6:46 pm 
Offline
User avatar

Joined: Sun Jan 06, 2013 1:44 pm
Posts: 1996
Best animated button yet, Love it :)


Top
 Profile  
Reply with quote  
PostPosted: Sun Mar 08, 2015 8:20 pm 
Offline
User avatar

Joined: Thu Jun 13, 2013 12:07 pm
Posts: 1208
Superb.:)
What's your future project - transformers?


Top
 Profile  
Reply with quote  
PostPosted: Sun Mar 08, 2015 10:41 pm 
Offline

Joined: Sun Mar 08, 2015 8:16 am
Posts: 22
Thanks for the feedback :D


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


Top
 Profile  
Reply with quote  
PostPosted: Sun Mar 08, 2015 11:24 pm 
Offline
User avatar

Joined: Sun Jan 06, 2013 1:44 pm
Posts: 1996
@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


Top
 Profile  
Reply with quote  
PostPosted: Thu Mar 26, 2015 12:19 am 
Offline
User avatar

Joined: Thu Jan 03, 2013 12:38 am
Posts: 5374
Oh this is simply too good! :P

_________________
Links to some general topics:

Compare Start Menus

Read the Search box usage guide.

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


Top
 Profile  
Reply with quote  
PostPosted: Mon Mar 30, 2015 12:55 am 
Offline

Joined: Sun Mar 08, 2015 8:16 am
Posts: 22
Thanks, glad you like it :D


Top
 Profile  
Reply with quote  
PostPosted: Sun Apr 05, 2015 10:00 am 
Offline
User avatar

Joined: Thu Jan 03, 2013 12:38 am
Posts: 5374
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 helped a little with Classic Shell's testing and usability/UX feedback.


Top
 Profile  
Reply with quote  
PostPosted: Sun Apr 05, 2015 7:31 pm 
Offline

Joined: Sun Mar 08, 2015 8:16 am
Posts: 22
GauravK wrote:
A suggestion: could you add some differentiation for the "pressed" state?


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


Last edited by Situla on Wed Apr 08, 2015 7:04 am, edited 1 time in total.

Top
 Profile  
Reply with quote  
PostPosted: Sun Apr 05, 2015 9:31 pm 
Situla wrote:
GauravK wrote:
A suggestion: could you add some differentiation for the "pressed" state?


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.


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.


Top
  
Reply with quote  
PostPosted: Sun Apr 05, 2015 11:01 pm 
Offline

Joined: Sun Mar 08, 2015 8:16 am
Posts: 22
prop_design wrote:
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.


Top
 Profile  
Reply with quote  
PostPosted: Mon Apr 06, 2015 5:28 am 
Situla wrote:
prop_design wrote:
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.


Top
  
Reply with quote  
PostPosted: Wed Apr 08, 2015 7:01 am 
Offline

Joined: Sun Mar 08, 2015 8:16 am
Posts: 22
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.


Attachments:
1.png
1.png [ 127.2 KiB | Viewed 67194 times ]
2.png
2.png [ 127.2 KiB | Viewed 67194 times ]
3.png
3.png [ 127.2 KiB | Viewed 67194 times ]


Last edited by Situla on Fri Apr 10, 2015 11:18 pm, edited 1 time in total.
Top
 Profile  
Reply with quote  
PostPosted: Fri Apr 10, 2015 1:11 am 
Offline
User avatar

Joined: Thu Jan 03, 2013 12:38 am
Posts: 5374
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 helped a little with Classic Shell's testing and usability/UX feedback.


Top
 Profile  
Reply with quote  
PostPosted: Fri Apr 10, 2015 7:54 am 
GauravK wrote:
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.


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.


Top
  
Reply with quote  
PostPosted: Fri Apr 10, 2015 9:48 am 
Offline
User avatar

Joined: Sun Jan 06, 2013 1:44 pm
Posts: 1996
well its value is arguable... because the fact that the menu opens is indication enough that you pressed/touched the button :P it is nice to have aesthetically though


Top
 Profile  
Reply with quote  
PostPosted: Fri Apr 10, 2015 12:17 pm 
Jcee wrote:
well its value is arguable... because the fact that the menu opens is indication enough that you pressed/touched the button :P 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.


Top
  
Reply with quote  
PostPosted: Fri Apr 10, 2015 5:05 pm 
Offline
User avatar

Joined: Sun Jan 06, 2013 1:44 pm
Posts: 1996
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.


Top
 Profile  
Reply with quote  
PostPosted: Fri Apr 10, 2015 11:10 pm 
Offline

Joined: Sun Mar 08, 2015 8:16 am
Posts: 22
GauravK wrote:
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.


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 :lol:

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


Top
 Profile  
Reply with quote  
PostPosted: Sun Apr 12, 2015 12:30 am 
Offline

Joined: Sun Mar 08, 2015 8:16 am
Posts: 22
prop_design wrote:
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.


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.


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 21 posts ] 

All times are UTC - 8 hours [ DST ]


Who is online

Users browsing this forum: Google [Bot] and 16 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group, Almsamim WYSIWYG Classic Shell © 2010-2016, Ivo Beltchev.
All right reserved.