Ok so your a skinner, you make a skin with transparency and you've added a shadow to your frames and such. Now you want to add the blurring feature to your skin but you get something like this...

hum... now we have a problem cause that looks like hell.

But take notice, the image is square but the blur is effecting only SOME of the whole image area for that part of the frame. So whats happening here? This didn't just hit me till last night even though I've been dealing with it personally ever since the blur feature was added. After some discussion with another Master (Lasse, aka PixelPirate) skinner it dawned on us and here are some 'test' results for my working theory on this 'discovery'.

The Theory

The blur effect has a threshold point. At some point in the opacity of the image the blur feature no longer effects the image being used.

The Tests

I'm going to test this as I write this post so bare with me. For the test I'll make a white wallpaper with a 2 pixel stroke on it, make a 100 pixel long frame section gradiented with a 100% to 0% opacity set with a blur and at true size. This should give a 1% opacity change per line of pixels on the frame and we'll see where the blur stops taking effect. Here goes...

ok here is test 1... first is our 'control' (the plain stroke, no frame) then blue, red, green, black and last white. As you can see pure black has no blur effect at all. This isn't exactly what I expected. Lets try different shades of grey because it seems white does have an effect where black doesn't. there must be some point at which this changes.

Test 2... I'm not going to post the pics of this but oddly enough black up to 3,3,3 does not blur and anything lighter does. The odd part is the white gradient (used as the inactive part) also did not blur at the same time. Need to run some different tests...

Test 3... Here I made something like a frame and added a pure black gradiented outer glow in frame 1. This blurred the frame but not the outer glow. In frame 2 I added a dark blue shadow to the outer glow as you can see where the dark blue shadow appears so does the blur. Additionally even though the inactive frame did NOT have the dark blue shadow it also blurred the same area. In frame 3 I changed the dark blue shadow to pure black and again the blur effect did nothing to it. See the image below.

 

My Conclusion (updated Aug. 2nd '08)

Window Frames - You must use pure black (or RGB 3,3,3 and lower) for the shadows to not blur. Blur will effect anything with color. Image for the frame must have a clear line of pixels on the outter rim for the widnow frame. Blurr effect is square, it does nto support odd shapes, you can use the settings under the 'Extras' tab to round off the corners.

Taskbar - untested

Start Menu - Not fully tested. Blur effect looks odd when 2 transparent parts are touching in XP, Vista is uneffected by this.

_________________________________________________

Now you might ask why I went through this trouble and why the big write up. As a skinner and an advocate to 'pushing limits' and finding out what those limits are these sort of things help both me and all you other skinners. Currently there is no 'Mask Layer' for the blur effect but this might be one way to (in some fashion) create one to an extent.

My conclusion is based solely on the above testing plus comments and further testing below. Please if you find some variation or the like, feel free to post your results here for others to see and read.

Thanks and happy skinning as always 

This is the final part of my ‘Creating Shell Animations for SkinStudio’ tutorial series. If you haven’t read Part 1 WWW Link and Part 2 WWW Link I suggest to go through them before proceeding with the final part.

In this part I will show you how to use the ‘Explode’ effect that is ideal to use for the ‘Empty Bin’ and ‘Permanent Delete’ animations. To get started either open the source file with which you ended up at the end of Part 2 or click here WWW Link to download it.

------------------------------------

STEP 1
First we need to delete the right folder as we don’t need it in this tutorial. To do this select the ‘Selection Tool’ and select the folder (1) and press key ‘Delete’ on your keyboard.



------------------------------------

STEP 2
Next we need to remove the second half of the animation as we will replace it later on with the 'Explode' effect. Click on the last keyframe (1) and press 'Shift+F6' to remove it.



------------------------------------

STEP 3
Now we need to remove the 'Motion Tween' of the second half of the animation. First click on the frame next to the middle keyframe and press 'F6' to create new keyframe (1) and then right-click on it and select 'Remove Tween' (2) from the drop-down menu. We needed to remove the tween because the 'Explode' effect can't be applied properly on the 'Motion Tween'.



------------------------------------

STEP 4
Now the fun begins. Right-click on the object you wish to 'Explode' (LOL) and select Timeline Effects>Effects>Explode (2) from the drop-down menu.



------------------------------------

STEP 5
After completing STEP 4 an 'Explode' window opens. I suggest you to try-out different settings until you get the desired effect. I used the below settings for this tutorial. First select the duration of the 'Explode Animation' you want (1). After that set the direction (2) in which the explode fragments should move to after the explosion. Next are Arc Size (3) and Rotate Fragments by (4). As I wanted that my fragments don't fly around too much I set them both to 20. The higher you set these numbers the bigger the explosion. Finally set the size change of your fragments if you wish to do so (5) and the final alpha of your animation (6). You should just leave it on 0% as this will make all the fragments disappear. When you set all the settings click the 'Update Preview' button (7) to see your animation. Please note that every time you change a setting you will need to hit this button to see the changes. Once happy with the explosion hit 'OK' to insert it into your flash document. You will probably need to wait a few seconds so please be patient.



------------------------------------

STEP 6
The final step you need to do is set that the explosion plays only once in case you still have some extra frames after it so it will not loop. In 'Properties' (1) tab click on the 'Loop' and select 'Play Once' (2) from the drop-down menu.



------------------------------------

Press CTRL+ENTER to preview the animation and if happy with it export it to AVI as described in Part 1. WWW Link



------------------------------------

This part completes the tutorials that you will need to create all the 'Shell Animations' so now you are ready to create stunning animations. You can download the final source file here WWW Link. Please post in comments your final results or if you have any further questions. Good luck!

This is a follow-up tutorial from my Creating 'Shell Animations' for SkinStudio Part 1 tutorial. In Part 1 I showed how to create a simple animation in Flash using motion tween effect. If you have missed out the Part 1 then I suggest you to read it first WWW Link before proceeding with Part 2.

At the end of Part 1 we ended up with an animation that looked like this:


In Part 2 we will continue from where we finished in Part 1. So if you don’t have the source file from Part 1 you can get it WWW Link here. Now we are ready to start. Flash offers some additional effects from just motion tween that we used in Part 1. You can animate brightness, tint, alpha and transform.

--------------------------------------

TRANSFORM
First we will go through the transform animation. Remember the ‘Free Transform Tool’ that we used in Part 1. The same tool will be used for animating. Let’s say that we would like the ‘AB’ object to become bigger in the middle of the animation, rotate a bit and transform. In order to apply an effect in a place that you want you will need to create a keyframe.

So first click on the frame 17 in layer ‘animation’ and press ‘F6’ key to insert a keyframe (1) and then select the ‘Free Transform Tool’. Now you can rotate, resize and transform the object.

If you position the mouse cursor on the any of the small squares (2) the cursor will change to two-way arrow and that means you can resize the object by left-clicking and dragging.

When you position it over the edges (3) it will change into two opposing arrows and that means it will skew the object.

Finally if you position it a bit outside of the corners (4) it will turn into a round arrow and in this case you can rotate the object.



Try them all out a bit until you get the desired transformation. Once finished press CTRL+Enter to see the result.



Free transform tool is a quick way to transform your objects. But if you need to precise when transforming your objects you can use the ‘Transform Window’. If it’s not open you can bring it up by pressing the CTR+T and enter the modifications you want to make.



--------------------------------------

BRIGHTNESS, TINT, ALPHA
Now that we have transformed the object we can also apply some animation to its color and transparency. Click on the keyframe that you created earlier (1) in this tutorial in ‘animation’ layer and then with the ‘Selection Tool’ that we used in Part 1 as well click on the object (2) that you transformed and in ‘Properties’ window (3) some options will appear.





In this tutorial we will focus on options in ‘Color’ section. When you click on the drop-down menu you should get the following options. None, Brightness, Tint, Alpha and Advanced. They are pretty self-explanatory.

To change the brightness choose (1) Brightness and set the percentage you wish to use.

In Tint (2) you set both colour and the percentage you wish to apply.

In Alpha (3) again only the percentage of the transparency you wish to achieve.

Finally the advanced option click on the ‘Settings’ (4) button that appears and you will get a new Advanced Effect window (5) where you can set combinations of all Tint and Alpha effects.



Press CTRL+ENTER to preview the animation and if happy with it export it to AVI as described in Part 1. WWW Link



This covers the basics of animating in Flash. You can get the final Flash source file WWW Link here.

Note that you can apply the effects that we used in this tutorial on any keyframe that you create. So for example you could make the object in the first keyframe red in middle green and transformed in the final keyframe transparent to 0% so that it will gradually disappear imitating the delete action.

There is one more part Timeline effects like explode and blur which I will cover in Part 3 of my tutorial.

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.

For those of you who have tried to create a Per-Pixel ShutDown and LogOff and just can not seem to get it to work here is why.

There seems to be a glitch in the coding where 2 lines of code are not present and must be put in for it to work correctly. You will have to go to the top center tab 'Code' and look for the [ShutdownDialog.BackgroundPerPixel] and the [LogOffDialog.BackgroundPerPixel]. Now they could be at any number code line but tend to be near the bottom. In the original state they look something like this...



but as I said there are two lines of code missing that need to be placed in there. Here is what the finished or completed code should look like...



if you place these missing lines of code into those sections all should work propery. Hope this helps out.

This chapter applies only to WIndow Frames/Borders. If anything here applies to any other area of WB Skinning, I haven't gotten that far yet.

What I Didn't Know-
The WB5 version of SKINSTUDIO allows you to make skins for WB5 AND previous versions of WB. Well, I knew that. What I didn't know is that you can make a skin for either version, say...you don't want to get mixed up in all the new stuff v5 has to offer and you want to keep it simple...or you want to make a skin only WB5 can run. OR make one skin that works well in both. This last one is the rub.

If you want to make a skin that works for both and or all...you essentially have to make 2 copies of everything for the WINDOW FRAME/BORDERS. (See opening statement..only talking about the frame here)

Having gotten frustrated trying to work with MagicPink on my STARTMENU, I decided to try TGA and PNG format, being under the impresion that I would NOT need the MagicPink. Which I wouldn't...IF...
I were making JUST a wb5 skin.

What I tried to do was this..(I told you I would flaunt my errors..lol) I attempted to use PNG and TGA formats in the WRONG skin format. If you are not making a WB5 skin, you will have to use the MagicPink for your frame. Here is a pic of what I kept getting.



That was trying to use TGA. When I tried to use PNG, I got a little black corner instead of a white one. For anyone using MagicPink and getting a pink corner...stick with ME, I'll get to that.

Now, after some whining and tylenol..it was explained to me that TGA and PNG were for the WB5 skins when making the frame. In SkinStudio's preview window, there are 4 sub-pre-views in the dropdown menu. Idiot I am, assumed they just SHOWED your skin in different states. And they do! But they are also there to APPLY AND/OR/EDIT your images for each of those states.
So I scrapped my mess and started a new one (skin, not mess. Not yet, anyway). I used PNG's in the per-pixel states as applies to WB5.


As you can see, the corner is much better. (This is the same template as previous image, just different color)

To do the same skin for versions previous to WB5, I will have to go back to BMP and MagicPink..but I can include both versions in the same wb file.

There are some differences in making the images,(You can save your files as PNG's in your Image Editor...SKINSTUDIO will convert them to TGA for you!) and I strongly urge you to read the following tutorial several times to understand this. Plus, it will make clearer what I have said here.>>Link

Now if you are still with me...

Those pesky corners and such in the frames. No matter what format you are working in...pixel, pixel, pixel...MagicPink, TGA,PNG, or BMP...pixel, pixel, pixel.
As I was advised when I started this..PIXEL BY PIXEL.

Let me put it this way...BE THE PIXEL!

You can easily skip over this and that, a detail here and there..etc. IT WILL show in the end and you WON"T like it. You might TELL yourself you do, but you won't.

My Pixel Problems-





Look at the right edge of my image. See how it's slightly transparent. You won't notice it unless you zoom in on it in whatever image program you use. But you will notice it when you try to use it in your skin. Like here...



I couldn't understand why I was getting that white line when my I set my margins correctly.

To correct this I have tried 2 different things. This is where the pro's may cringe and say 'There's a better way" and I hope they will let us know in this thread if there is. What I did was either go pixel by pixel with my eraser...OR..duplicate the layer. Both worked, depending on waht I image I was working on. Sometimes just 'sharpening the edegs will work'.

Now, I have been 'cutting' my images with a template. Look at this...

See that shadow around the top bar...that kept screwing up my cuts, often creating the semi-transparent pixels like in the previous image.
The fix..(which may be VERY common knowledge...but wasn't for me as I am still learning with Photoshop)...when you create your drawing your template files and you set the size for the image, enable the 'snap to pixel' and your image will come out with edges like in the bottom bar.

Finally...and I'm sorry, I must have deleted the images I would have used for this. When working with MagicPink and you get those pink corners and edges...open the image back up in you image editing program and get in close. The SLIGHTEST varience in that 255/0/255 setting will show. Sometimes the effects (ie, shadows, outer/inner glow, etc) can be MagicPinks enemy. A little outterglow bleed over and it's not true MagicPink anymore.

So, you get in there on those corners and go PIXEL BY PIXEL with that pencil or brush set at 1px. Can't get to that one in the corner or the edge...make a new layer, make your square, and scale it to fit if you have to.

Last time...BE THE PIXEL! Take the extra 5 minutes on an image and check those edges. It's almost amazing how a few changes on a few pixels makes such a difference when you reapply it to the skin.

I don't know if I have helped anyone, so as always, feedback is welcome. And I aplogize for my lack of knowledge in what could have been better terminology and wording on the technichal stuff. I will leave it to the experienced people to fill in what I may have missed. For their help and info I have provided here, I would like to thank Boopish, Bushman, and Night Train. If I left anyone out, I apologize.

It all started with another brain-freeze today. I just couldn't find a section that contained the File Dialog places bar images. You know the bar on the left on the File->Save and File->Open dialogs? I bet you've been cursing more than once searching for a section like that. SkinStudio will help you with searching for a section if you know it's UIS name or its part AND if such section actually exist. But in my case it didn't.

Wouldn't it be great if I could just lookup the section by it's name or a part of it?

So I've added a tool button like you can see on the image below.

Press this button (or press Ctrl+F while the tree view is focused) and you're getting the familiar "Find" dialog.

Enter the section name or a part of it and press the "Fine Next" button.

There you are... Where have you been? I've been so worried!

It will also work if there is more than one section matching, in which case SkinStudio will iterate through the sections when you press the "Find Next" button consecutively.

The feature will be introduced in SkinStudio 5 Beta, soon to be made available on Object Desktop.