Animation

Ok, first off, this will be my first time trying to animate. I currently own Photoshop CS2 and skinstudio 6 pro. I want to create a complex animated start button.  I dont simply want to create a startbutton with only one image for mouseover, pushed, focused, etc. My goal is to create a start button that as I mouseover it, has smoothly flowing, glowing, energy beams swirling around it while the button is rotating. I would appreciate any simplistic instructions on how to do so. I do not need help with drawing as I am pretty well at that part ;) .

14,380 views 18 replies
Reply #2 Top

Quoting CarGuy1, reply 1
Have you checked out these tutorials?

How to Create an Animated Start Button

How to Create an Animated Start Button Alternative

Each of these tutorials uses Photoshop CS4. I only have CS2 and I'm not sure that the animation settings between the two different versions function the same or have the same features and thus, whether I'd be able to achieve the same results with my older version. For instance, CS2 doesnt have the Animation Timeline and Measuring Log (CS4 does). My question then, is: Can I use CS2 to follow this tutorial?

Reply #3 Top

you should be able to

Reply #4 Top

I'm not positive but I think CS2 uses Image Ready instead of the animation settings.

Reply #5 Top

Quoting k10w3, reply 4
I'm not positive but I think CS2 uses Image Ready instead of the animation settings.

Photoshop CS2 has a very limited animation feature which creates crappy, pixelated GIF images. I think imageready has the same limited/crappy feature

Reply #6 Top

My goal is to create a start button with a sort of atom-like glow/trail orbiting it when i mouseover it and then when you click the startbutton, it should explode like a mini supernova and reassemble as a rotating sun.

Reply #7 Top

The above tutorials are a bit confusing. I do not simply want to copy this same "pulsating" type of animation. Tho very detailed, this tutorial does not explain such things as WHY "shuffling" the animation frames is needed. Cant I simply just create each progressive frame as I go from frame 1 to frame 14 WITHOUT having to rearrange the frames afterward? And on exactly which frame will each different section begin (normal, pressed, disabled, mouse over, focus and default). Because for each one of those different sections, I want to use a few frames so that they each have their own animations. For instance, even in Normal mode, I would like my start button to remain animated. Then, when I mouse over it, I want the next set of animations to begin. And likewise,  a different type of animation will begin when its pressed. I know it's a lot of drawing, But thats the easy part for me. I simply need to UNDERSTAND the "why's", and in what frames to put them all. so that I can adapt the understanding to complete my project. If someone would be so kind as to explain those things to me, I'd be extremely grateful. \o/   BTW: thanks in advance.

Reply #8 Top

Is such an animation on the start Button even possible?:maybe:

Reply #9 Top

maybe, but I'm guessing you'd have to know lots of scripting...

Reply #10 Top

Unfortunately, a Start button can only be animated on the mouseover state, so you can't have an animation when it is idle or pressed.

As far as image states go, it's Normal, Pressed, Disabled (never used afaik), Mouseover, Default (also never used). After that, you can add any animation frames for the mouseover state.

So, if your animation is 6 frames, for example, the first 5 frames would be the regular button states, and the following 6 would be your animation. I always use a copy of the first frame of my animation as the mouseover state image.

In the animation settings in SkinStudio, you would tell it to start the animation on frame 5 and end on frame 10. You might be asking yourself, "why doesn't it start on frame 6 and end on frame 11?" That's because the first frame is considered frame #0. So the 6th frame is actually frame #5, etc.

I hope that helps a bit. :)

Reply #11 Top

Quoting MikeB314, reply 10
Unfortunately, a Start button can only be animated on the mouseover state, so you can't have an animation when it is idle or pressed.

As far as image states go, it's Normal, Pressed, Disabled (never used afaik), Mouseover, Default (also never used). After that, you can add any animation frames for the mouseover state.

So, if your animation is 6 frames, for example, the first 5 frames would be the regular button states, and the following 6 would be your animation. I always use a copy of the first frame of my animation as the mouseover state image.

In the animation settings in SkinStudio, you would tell it to start the animation on frame 5 and end on frame 10. You might be asking yourself, "why doesn't it start on frame 6 and end on frame 11?" That's because the first frame is considered frame #0. So the 6th frame is actually frame #5, etc.

I hope that helps a bit.

No animation on the pressed state either?!?  8(|    :(O :rolleyes:  :(  XO   Ok, now Im a bit confused as to your statement: "if your animation is 6 frames, for example, the first 5 frames would be the regular button states, and the following 6 would be your animation."

Let's see if I understand you -- The first frame should be the Normal state, the second frame should be the Pressed state, The 3rd frame should be the Disabled state, Then 4th frame should be the Default state, and the 5th frame should be the first mouseover state, and the following states should be the animation for the mouseover? Is that right? Sorry, but I just wanna make sure that I do this right.

Reply #12 Top

About animation all states of the start button, I assumed that it was possible because I've seen themes with various parts of the start panel being animated.

Reply #13 Top

start panel / start button different areas

I'm not sure since I don't skin yet... but I think the panel is done with an overlay

Reply #14 Top

like Mike said.. start button, only mousuover can be animated.

Start menu, much more freedom.

Reply #15 Top

like Mike said.. start button, only mousuover can be animated.

Start menu, much more freedom.

Yeah, I got that part already. But my question was regarding the exact order of the frames in an animated start button.

I'm waiting for him to clarify his statement.

"if your animation is 6 frames, for example, the first 5 frames would be the regular button states, and the following 6 would be your animation."

My question:

Let's see if I understand you -- The first frame should be the Normal state, the second frame should be the Pressed state, The 3rd frame should be the Disabled state, Then 4th frame should be the Default state, and the 5th frame should be the first Mouseover state, and the following states should be the animation frames for the mouseover? Is that right? 

Reply #16 Top

My goal is to create a start button with a sort of atom-like glow/trail orbiting it when i mouseover it and then when you click the startbutton, it should explode like a mini supernova and reassemble as a rotating sun.

Can't be done.

 

Easiest way to find out (and quickest) is to throw some states in SKS, apply... see whats where. repeat as many times as is neccesary....

 

... trial and error, a skinners best friend, especially when it sounds like your trying to do something that isn't possible ;)

Reply #17 Top

I'll try to clarify. The start button image state order goes like this..

Normal
Pressed
Disabled
Mouseover
Default
Animation frame 1
Animation frame 2
etc.

The single image mouseover state is not next to the animation frames. It is separated from them by the default state. I don't think the mouseover state on the 4th frame will be used by WindowBlinds if there is are animation frames included, but it needs to be there anyway.

Reply #18 Top

Quoting MikeB314, reply 17
I'll try to clarify. The start button image state order goes like this..

Normal
Pressed
Disabled
Mouseover
Default
Animation frame 1
Animation frame 2
etc.

The single image mouseover state is not next to the animation frames. It is separated from them by the default state. I don't think the mouseover state on the 4th frame will be used by WindowBlinds if there is are animation frames included, but it needs to be there anyway.

Thanks for the clarification, MikeB314, I'll give it a shot.