When starting with DesktopX there is no substitute for learning from others. Throughout this series of tutorials we are going to use some of Paul Boyer's objects from his FauxS-X theme to learn. Here we will dissect an object to help you understand the components it is made up of.

To start with, download this Theme which contains a series of objects of increasing complexity. Download it

Run this Theme by either launching it from Explorer or import it from within DesktopX. It you want to use the same wallpaper as in the demo, you can download it here. Once you have unzipped it do the following:

  • Double click the DesktopX icon in the system tray to bring up the DesktopX configuration.
  • Click the 'Theme Settings' icon
  • Click the 'Wallpaper' tab
  • Instead of the default wallpaper that I inserted into the theme, browse to locate the file you have extracted called 'Creation.bmp'
  • The wallpaper is a resolution of 1024x768, so making the style 'Resize' works at all resolutions. Experiment with the othe options to see the effect.

Right click on the Basic1 object and enter the appearance section. This is the area where the magic is weaved and all sorts of effects are achieved.

For the first few examples all you need to focus on is the 'Appearance' tab. The graphic that is the basis for the object is selected here by browsing to find the location.

When you select a graphic it is copied into your theme diretory.

Here, you can see that a simple object on a solid background will appear exactly as per the bitmap source file.

DesktopX makes basic transparency easy to create.

By simply using a pure magenta background, transparency can be achieved. Nothing else needs to be changed in DesktopX, just a simple change in the source graphic. DesktopX does all the complicated stuff for you.

There are 2 ways to achieve fancy transparency effects, the easy way and the hard way. This is the hard way. I'll explain this, then the easy way will be a doddle !!

Before I do this let me explain the basic items which are also on this page.

Uniform transparency affects the visibility of an entire Desktop object. Try changing this on the 'Alpha blending' tab of the Basic2 object, to say 50% - cool huh !

The other one is 'Per frame'. In the next sections you will see how to make animated objects comprising of several frames. This option allows to to vary the level of transparency in each frame. Again, experiment to see the effect.

 

OK, now onto what I'm supposed to be talking about, the complicated way of doing per-pixel alpha blending. WHat exactly does this mean - it means that each pixel that makes up the image can have a different level of transparency.

This is done by creating a graphic split in two. The top half contains the image and the bottom half contains the transparency information. Note that you don't need to use magenta to achieve transparency, any background wil do.

If you study the image above you'll note that the bottom half is all greyscale (black and white). The blacker it is the more transparent it is. Pure black means you will only see background, pure white means you will only see the object. You can see that the above object uses this subtly to create a drop shadow effect.
This object has a very obvious 'per pixel' transparency setting going from totally transparent (left) to totally visible (right). Check out the object in the theme and drag it around, over other objects to see how this appears.

And now for the easy way - use PNG graphics !!!

From version 0.7 of DesktopX onwards, support for the PNG graphics format has been added as well as BMP. This graphic format has transparency built in. This means that the tranparency which is in your source graphic, will be used in your DesktopX object. This is difficult to demonstrate here, but for those who have the software that can use 32-bit PNG files, give it a go. If you need some software, download Macromedia Fireworks which I find to be the best tool for creating PNG files.

 


&

If you can master transparency, then animation will be a doddle.

 

If you look at the source for this section, you can see there are 3 images side by side. You may say, hold on there are 6 images, but remember our images have the per pixel transparency information too.

These 3 images are the 3 frames of the animation. If you just change the source image then the result is as shown for the Result Basic 4. To tell DesktopX about the animation, you need to edit the 'Animation' tab under the object property.

It's all very logical. You enter the number of frames the image contains, and the interval between the images. The style shows the direction in which to play the animation. In our example this would be as follows:
Forwards: 1,2,3
Backwards: 3,2,1
Forwards + Backwards: 1,2,3,2,1
Backwards + Forwards: 3,2,1,2,3

If, additionally you want to loop the animation, you check the 'loop' box. In our example, this means the frames will animate 1,2,3,2,1,2,3,2,1, ... etc.

That explains animation, but while we're here I'll explain the 'Static' option. Instead of motion animation, you can have transparency animation. You choose a single frame image, and fill in the the Animation tab as normal, but also select the 'Static' checkbox.

You then need to go to the Alpha blending tab and amend the 'per frame' info.

In our example, with 3 frames, this will cause transparency animation which goes 30%, 60%, 90%, 60%, 30%, 60% ... etc. You can see an example of this in the example theme.
 

Well, erm that's it basically.

This is just the start. Playing around with all these combinations you can create some remarkable effects. Things get even more exciting when you start placing objects on top of each other. The transparency options can create effects that are amazing.

Enough reading .. go do it !!