As I was reading Mirsguys great tutorial on making an animated startbutton i thought i would elaborate on it and show you another way of doing and importing animations into skinstudio with Photshop CS4 and Skinstudio 6's built in sub frame builder.

Both methods have their pro's and con's but the more options on how to make something the better right?

Also i suggest you read Mirsguys tutorial* first as its better for small animations imo and start with that and this tutorial will build on Mirsguy's no need to reiterate his words.

*I will assume you have read Mirsguy's tutorial and know how to make a startbutton and the basics in how animation works in skinstudio.

OK lets get it going shall we.

1. Fire up the mighty Photoshop

Create your startbutton, the normal state, as you want it to appear on the taskbar.

As all good tv-chefs i have one allready made et voila!

2. Animation, now we are cooking!

Do you see the animation tab in the lower left corner of photoshop? click that (If its not there go to Window-->Animation)
It will probably start in timeline mode you can use this mode also for better control of each layer but for this tutorial we are going with easy mode aka frame by frame mode. Click the three squares in the lower right corner.

OK, so now we are in frame by frame mode

1.Change the delay to No Delay by clicking the small arrow in the bottom of the frame.

2.Create a New Frame

This is where the magic happens, in frame nr2 start making changes to the button layer styles lets say inner and outer glow?
You will notice that the changes only apply to frame nr2 and nr1 stay the same.

What we have here is the Normal state, frame nr1, and how the mouse over animation will look at its peak, middle frame, if you are making a pulsating button, frame nr 2. I will also use frame nr 2 as my pressed state.

Now, with frame nr2 selected, lets press TWEEN.

The tween menu pops up, here you have some settings for your tween we are going to tween with the previous frame, frame nr1, and add 10 frames, the more frames you add the smoother the animation will be, i would have used more frames for a nicer animation, but for the sake of this tutorial we will use 10. We want to tween all layers and all parameters, we actually dont need to tween position as we havent moved anything around but it doesnt really matters in this case you can leave it checked.

Press OK!

You should be looking at 12 frames now.

If you want you can preview the animation at this point by clicking the play button in the animation area, you can change where it says ONCE to FOREVER and have it loop while you decide if its any good.

3. Lets play shuffle!

Great! you have your animation! what now?

Now we are going to make the different button states.

1.With frame 12 selected press the new frame button.

2.Move frame 13, by dragging it in the timeline area, drop it between fram 1 and 2 so it becomes frame nr2, and theres your pressed state!

3.Select frame nr1 and create a new frame and drag the new frame in between 3 and 4 to make it frame nr3.

4.This is your disabled state make adjustments accordingly, i just dropped the fill to 0%.

5.Shortcut! you dont have to make anymore states! But if you want you can make them too just use the pressed state as default state. (new frame with pressed state or normal state, which ever you prefer as focus, selected and move the new frame so its frame nr5, not made in the picture below).

4. Export!

Almost finished with photoshop.

Above ive used a dark gray background on my button i dont want this in my animation so lets select frame nr1 and toggle the background layers visibility (the eye beside the layer in the layers panel) , this will toggle it off in all frames.

OK all systems green, lets export!

Choose FILE --> EXPORT --> RENDER VIDEO

Lets go through the export options.

First the name, thats what you saved your file as and is the rendered files filename.
Select the folder where you want the files, Ill let photoshop create a new subfolder for my files.

File options, we want a sequence of PNG's and the starting number after the end of our filename is 01 and we only need 2 digits after the filename as its under 100 frames. Leave the Document Size as it is. We want all frames ofcourse.
We want to have Straight - unmatted alpha channel unless you have used premultiplied alpha if you did you know what to use here. Leave the framerate at 30 fps, we will adjust the animation speed in skinstudio.

Press Render!

5. Enter stage right Skinstudio

Now lets open old faithful, erhm i mean skinstudio.

Navigate to your startbutton, next to the edit image button press the arrow and choose Frame Builder.

Sub Frame Builder.

First change your frame count to the number of frames you have in our case 14.
Choose frame 1 and press Pick File, navigate to the folder where you saved your PNG's and pick..... wait for it....... wait for it.... doh! you guessed allready!? Startbutton01.png, now isnt that handy they are numbered the same as the frame number we will import them into, great for us that zone out when doing repetitive work so we dont loose count. Yes NEIL please incorporate batch loading of images into sub frame builder!

All done? Make sure save with alpha is ticked and press Save file.

Change image count to 14 and open the animation tab.

The Animation Tab

Adjust setting accordingly, i lowered the FPS to 20.41 to slow it down a bit. And ticked Only play once, i didnt want to have a flashing button. If you want a pulsating button you need to add frames to your animation.

(Then you would make new frame of frame nr1 and drag it to the end of the frames and tween it just like we did before, repeat above steps, and presto you have a pulsating button instead.)

Apply... save yes... done!

Here how a pulsating button would look like.  

And thats that! Thanks Mirsguy for the inspiration.
This method can be used for any animation not just the startbutton ofcourse.

Suggestions/comments welcome.

//Voidcore - David Clevestam