A week ago I have posted a 4-day series of articles that you describing my progress of creating my 1st WindowBlinds skin. You can view articles
WWW Link here and download the skin
WWW Link here. In one of my articles ‘unclerob’ asked me to create a tutorial on how I created the animations for my skin. It seems that this month will have for me more 1st time experiences then just a WindowBlind skin as I decided to post my 1st tutorial on WinCustomize.com.
I used Flash to create the animations because I’m quite skillful with it as I’ve been using it since the Flash 5 release 6 years ago and it’s really easy to draw and animate graphics. OK, enough talking let’s get started. You can download the source file used in this tutorial
WWW Link here.
--------------------------------------
STEP 1
First create a new document and then click on size option (1) and ‘Document Properties’ window will open where you enter the title (2), set dimensions to width 272 px and height 60px (3), choose the background color of your animation (4). Make sure it matches the color of the background of your dialog windows. Finally set the frame rate (5). I recommend the rate of 10 frames per second.
-------------------------------------
STEP 2
Next we need to create layers where we will create some objects later. In this tutorial we will need 3 layers as Flash animates all the objects in the selected layer. So we have to make sure that the objects that we want to animate and the ones we don’t are not in the same layer. Create layers by clicking on the ‘Insert Layer’ icon (1) and rename them for reference into ‘background’, ‘animation’ and ‘foreground’ (2).
-------------------------------------
STEP 3
Now that we prepared the document and layers we the fun begins. First click on the ‘foreground’ layer to tell Flash that you want to draw and object in this layer (1). Then select the ‘Rectangle Tool’ (2) and the properties window will show the below options (3). Choose the stroke color and thickness and the fill color to suit you. Finally draw an object (4).
-------------------------------------
STEP 4
Now we will ‘skew’ the object downwards to create the feeling of an open folder. Select the ‘Free Transform Tool’ and double-click on the fill of the object to select both fill and stroke. Finally position your mouse cursor on the right-edge of the object and click-hold and pull it downwards a bit and release it (2).
-------------------------------------
STEP 5
We also need to add the back cover of our folder. Click on the ‘background’ layer (1) and repeat the steps with the ‘Rectangle Tool’ (2) and ‘Free Transform Tool’ (3) from the STEP 4 and now your folder should look something like this (4).
-------------------------------------
STEP 6
Next we need to duplicate the folder to the other side of the document. To do that you need to select the folder with the ‘Selection Tool’ (1) and draw a rectangle around the folder to select both front and back cover (2). Finally press and hold ALT and then click and drag the folder to the other side of the document and release the left mouse button followed by the release of the ALT key. I recommend to hold SHIFT while dragging to make sure both folders are aligned.
-------------------------------------
STEP 7
Now we will ‘mirror’ the duplicated folder. If you have deselected the duplicated folder repeat selection method from the STEP 6. With the folder selected open the ‘Transform’ panel (1) and make sure that the ‘Constrain’ option is switched off. Finally add a - in front of 100.0% (3) and press ‘Enter’ to apply changes and Flash will mirror your folder (4).
-------------------------------------
STEP 8
If you are happy with your folders lock the ‘background’ and ‘foreground’ layers to make sure you don’t move them by mistake while working in the ‘animation’ layer. You can lock layers by clicking on the black dot in the ‘lock’ column (1) and (2). Dots will turn into small locks when clicked to show that the layer is locked for editing.
-------------------------------------
STEP 9
Now we need to create an object that we will animate moving from the left to the right folder. Click on the ‘animation’ layer (1) and create an object with ‘Rectangle Tool’ (2) method that we used in the STEP 3. You can either create more objects in it or as in this tutorial add some text (4) with the ‘Text Tool’ (3).
-------------------------------------
STEP 10
Now we need to insert the amount of the frames we want to create for our animation. I recommend 35 frames for your animation. Before inserting more frames move your object with the ‘Selection Tool’ inside of the folder (2). To insert frames click the 35th frame of each layer (3) and press the ‘F5’ key to insert frames (4).
-------------------------------------
STEP 11
Now we will convert our object into ‘Motion Tween’. Right-click anywhere in the timeline of the ‘animation’ layer (1) and select the ‘Create Motion Tween’ option from the drop-down menu (2). Finally select the last frame of the ‘animation’ layer and press the ‘F6’ key to insert a keyframe.
-------------------------------------
STEP 12
Next we need to determine the final position of the animated object. To do that click the last frame of the ‘animation’ layer and move the object with the ‘Selection Tool’ (2) to the desired location (3).
-------------------------------------
STEP 13
And now the moment we’ve all been waiting for… Press CTRL+ENTER to ‘Test Movie’.
-------------------------------------
STEP 14
If you are happy with your animation you should export it to AVI to use in SkinStudio. Go to File>Export>Export Movie. In the ‘Export Movie’ window type in the ‘File name’ (1) and choose the ‘Windows AVI’ from the file type menu (2) and press ‘Enter’ key.
In the next window you will see the settings for exporting to AVI. Make sure that the ‘Width’ and ‘Height’ are 272 and 60 (1) and that ‘Maintain aspect ratio’ is on (2). For video format I recommend 16 bit color (3) with both ‘Compress video’ and ‘Smooth’ options turned on. Finally choose ‘Disable’ sound format (4) as our animation doesn’t contain any audio and click ‘OK’.
In last Export window you will be able to adjust the compression options. You can test a bit different codecs and compression options but I recommend to use the ‘Full Frames’ compressor for best results (1).
There you go we have created an AVI animation for the SkinStudio in Flash. We used only basic animation options in this tutorial. Flash comes with lots more effects which I will cover in my next tutorial. The exported animation created in this tutorial looks like this. Please note that the actual exported AVI is better quality then the below exported GIF.
