DesktopX: Builder Mode for Beginners Pt 3
From WinCustomize Wiki
| DesktopX Builder Mode for Beginners (Part 3) | ||||||||||
| ||||||||||
This DesktopX Builder Mode tutorial series for beginners will give you a basic feel for working with DesktopX and show you how to create fully functioning objects without having to write a script. Some of the most powerful DesktopX creations require scripts but so much can be done in DesktopX without ever having to write a single line of code. Thanks to various plug-ins and easy to use components of DesktopX you can create objects that do many of your basic tasks. From an email notifier to system meters, they’re all pretty easy to setup. In most cases you need only select the plug-in of choice and apply your own graphics.
In addition, you have the ability to import pre-existing widgets, where all the coding might be done for you, and modify them to fit into your own creations. (Note: If you intend to distribute your work, it is important to ask for permission from, and give credit to the author whose work you are including.)
Contents |
[edit] Animations
Adding animations to your object will give it the extra flare to make it stand out. It will bring more interest to your work and, of course, it will add more excitement to your desktop. There are many ways to animate your object and in this tutorial we will cover two of the basic methods: using states and using images.
[edit] Using States
First, a rundown of the most commonly used states:
- Mouse Away is what the object will look like when the user moves the cursor away from the object.
- Mouse Over is what the object will look like when the user moves the cursor over the object.
- Mouse Down is what the object will look like when the user presses the mouse on the object.
- Mouse Up is what the object will look like when the user releases the mouse on the object.
Using these states to animate your object is incredibly easy as DesktopX comes with various effects to add to your object such as shadow, glow, color, brightness, contrast, and transparency. By adjusting the effects of the different states we can make the object come alive when the user interacts with it. Right-click on the DesktopX builder icon, create a new object, and let’s get started!
[edit] Step 1 - Add States
In the States tab of object properties, you’ll see in the list that the ‘mouse away’ state has already been created by default. Under the list you’ll see 4 buttons: add, remove, copy from and reset. Click add. You’ll be presented with the states identifier window. In the drop down, you’ll see a list of all the preset states. Choose ‘mouse over’ and click ok.
Now add the states, ‘mouse down’ and ‘mouse up’, and hit apply.
Before we move on we have to give each state an image. Below the 4 buttons you’ll see a group of tabs. All the information in these tabs will be specific to the selected state. Select the ‘mouse away’ state and, in the Appearance tab, click on the browse button. Browse for an image you’d like to use and select it. In this tutorial I’ll use the folder image from Part 1.
Now, select the ‘mouse over’ state. In the appearance tab, click on the drop down and select the same image you applied to the ‘mouse away’ state.
Do the same for ‘mouse down’ and ‘mouse up’. Hit apply.
[edit] Step 2 - Color tab
We’re going to give the object the effect of lighting up when the user interacts with it. This is achieved by changing the brightness.
Select the ‘mouse away’ state and go to the Color tab. Set the brightness to minus fifty (-50). Hit apply and try it out.
[edit] Step 3 - Shadow
Now, we’ll add the effect of making the object appear to be raised off of the desktop some distance.
Select the ‘mouse over’ state, and go to the Shadow/Glow tab. Check enabled. You can leave the settings as they are or adjust them to your liking. Do the same for the ‘mouse up’ state, hit apply, and try it out.
Pretty neat, huh?
[edit] Using Images
There are two ways to use images to animate your object: apply different still images to each state or apply an animated image to one state. I’ll show you how to do both.
[edit] Apply a still image to each state
Create a new object and add the ‘mouse away’, ‘mouse over’ states. Now we need 2 images. Here are the images I’m using:
(Note: Right-click on the images here and save if you want to use them)
To give the effect of the folder popping open when the user interacts with it, I’ll apply the folder1.png to the ‘mouse away’ state and the folder2.png to the ‘mouse over’ state. Apply your images to each state, and give each state a shadow. Hit apply and you’re done.
[edit] Use an animated image
For this part you’ll need to download the application called AniUtil here: http://www.stardock.com/products/cursorxp/downloads.asp This utility will take several images and combine them to make one animated image. It’s a must have and it's free.
[edit] Step 1 - Create the animated image
Think of an animated image as a film strip. A strip of film has frames; still images that, when run together, appear to move. What we need to create first are those still images.
Open up your graphics program. I use Photoshop 7.
Aside from having an idea of what you want your animation to do, you need to have a general idea of how many frames (still images) you want in your animation. Too many and you’ll have a really big image file, to few and the animation will be jumpy. You want just enough to have a smooth transition for your animation. I have 10 images below that will have the folder open, the picture come out, and then have the folder close behind it. Make sure your images are all the same size.
As you can see, I have saved each image in order (e.g. folder1, folder2, folder3 etc.).
Now, open AniUtil and select new job. Select all the images of your animation and open. In the next window that pops up, enter the name of your newly combined animated image and save.
[edit] Step 2 - Apply the animation
Create a new object and add the ‘mouse away’, ‘mouse over’ states. Select the ‘mouse over’ state and, in the Appearance tab, browse for your animated image.
Go to the Animation tab. Enter the amount of frames you have in your image (10 for me) where it says ‘Frames’. Interval is basically the speed at which your animation will play. The higher the number the slower the animation. I’d suggest trying the animation out before adjusting this. Finally, set the style to forwards.
Select the ‘mouse away’ state and click on the Copy From button. Copy the parameters from the ‘mouse over’ state. In the animation tab, change the style to backwards.
Hit apply and you’re done!
[edit] Tips
None right now.
[edit] Further Reading
- DesktopX: Builder Mode for Beginners Pt 1
- DesktopX: Builder Mode for Beginners Pt 2
- DesktopX: Builder Mode for Beginners Pt 4
