How to Create an Animated Start Button Alternative
A Follow up on MirsGuy's great tutorial.
Thursday, August 13, 2009 by voidcore | Discussion: WindowBlinds Tutorials
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.
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).
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.
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.
//Voidcore - David Clevestam
Reply #2 Thursday, August 13, 2009 9:43 PM
Thx, I think we got it covered how to animate a startbutton now Mirsguy
Reply #3 Thursday, August 13, 2009 10:40 PM
Thank you SO MUCH for this, voidcore! I really appreciate all the pictures.
Reply #4 Thursday, August 13, 2009 10:47 PM
Thanks, if you need any help let me know
Reply #5 Friday, August 14, 2009 3:53 PM
Fantastisk tut du har skrevet, min venn!
Tack så mycket!
Reply #6 Friday, August 14, 2009 3:55 PM
Tack tim, nu kanske du inte behöver miniräknaren nå mer
Reply #8 Friday, August 14, 2009 4:06 PM
Good job voidcore.
Also this method can be easily adapted to making XP file animations.
Reply #11 Friday, August 14, 2009 8:33 PM
Yeah i understood that haha.... but its somewhat close to tutankhamun
Reply #13 Sunday, November 29, 2009 3:54 PM
As I suspected, this tutorial (primarily, the Export, Render Video Instructions) do not work on CS2. I've draw up all the animated frames needed, but I do not know how to export them with CS2 so that I can use them with Skinstudio. Please advise.
Reply #14 Sunday, November 29, 2009 5:24 PM
I even tried importing each of the 43 frames into the frame builder and it doesn't work. Not sure why not..... Im running Vista Home premium on a 32 bit dell inspiron 1501. Any clues as to why its not working? The button appears but no animation. To say the least, I'm pretty pissed after drawing all 43 frames and trying repeatedly to import them. Please help.
Reply #16 Sunday, November 29, 2009 6:45 PM
you can always do it the old fashioned way (as i still do) get out yr pc calculator and work out the height of your frames and times that by 43. ( so basically this is the calculation your image height x 43) the width is the same) so for example if my image was 30width by 20 height it would be 20x43 so the new canvas would be 30width by 860height.
(Because we are going to stack them vertically, instead of horizontally) once you got the number create a new blank canvas with those numbers and paste the 43 frames one by one onto the new canvas. (to save future agony, put a 1 pixel dot on each corner of each frame so you have training wheels to guide where they are going to go and acuratley, it only takes one frame that is not in the correct position to ruin the whole animation)
when its finished save it in yr window blind skin folder and then go into skin studio find your startbutton.
On the image tab, import the animation you just saved in your skin folder and check the 'this image has frames stacked vertically"
Then click on the animation tab and select the following numbers:
This animtion should start with frame 5
stop on frame 42 (why 42? because you always stop it before your LAST animation frame)
if you want it to loop and not play just once, than use those same numbers as above.
choose your speed rate to how you would like it.
and that should get it going for you. always check the animation first before you rub out the dots, cause you never know.
*** edit cause for some unknown strange reason i started explaining the userpane animation instead of startbutton, my bad)
apply the skin and yr done. **sometimes you also have to restart your pc for an animation to 'kick in' and start working***
and last but not least, if you still cannot get it to work, pm me and i will send you my email address and you can send the skin to me and I will get it to work for you and explain anything that needed to be done that was not done to make it work.
Reply #17 Sunday, November 29, 2009 8:56 PM
Determining the total height (vertically) or Length (Horizontally isn't really the issue I struggle with. It's kind of hard for me to explain: I want my button to at Normal to be invisible and through the animation, slowly start to appear. This presents a problem (for me any way). I draw all of my individual animation images and am trying to place them in their exact places so that they dont jump. I heard somewhere that using a background "Template" or alpha channels would help in this regard, but I dont know how to do either of those methods. And when I try to copy a nearly transparent image on a completely transparent canvas, it only copies the image (not the total canvas size). So when I paste it to a new document, it's never the correct image size.
My work-a-round is simply to use the animation feature in CS2 to create a fluid animation, then flatten all frames into layers, then I go Frame by frame, and crop, save each as its frame number, then uncrop, select the next frame, until all 43 frames are saved seperately. Then import each frame into SKS6 vertically. But that didnt work either. So I Measured out the total length of all 43 images, setting guides as I went, and one frame at a time, I Free transformed (Nudged) each frame to where it should be. It took me hours to do, but I finally got a decent outcome. There's still alot of tweaking to do, but I'm pretty content with my first animated start button attempt.
Here's the button:
And here's my taskbar:
Thank you all for your help.
Reply #18 Sunday, November 29, 2009 9:03 PM
Vampothica, I wanted to especially thank you for your very detailed assistance. Now, being that I'm a bit of a laymen, it may take me some time to grasp all of it. But thank you again.
Reply #19 Sunday, November 29, 2009 9:11 PM
If anyone wants to try out my start button, you can download it from my deviantart page :
And the matching taskbar:
Reply #20 Monday, November 30, 2009 12:45 AM
no worries mate, im a laymens person myself, so if you need anything explained or help just ask, i dont mind helping.
im glad you got it working, but as i said before, all animations have to be on a strip, they cant be on their own. hence the vertical and or horizontal strips to put them on , then they can be used as animaitons.
holla if you need help again.
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
Reply #1 Thursday, August 13, 2009 9:41 PM
Awesome tutorial, vc!