OK, well done, you've conquered the basics. Now let’s start making the
objects look cool!
There's no getting away from it - this section is a big one in which you will
learn a lot!
Don't worry though, you can take it bit by bit, and after this section you will
be well armed to create some visually stunning objects.
States
First of all you need to understand what 'states' are. DesktopX does not
restrict you to having one way that an object can appear. Under different
circumstances the object can have a different appearance. Each different
appearance is referred to as a 'state'.
The default state is 'Mouse away' which is how the object looks when the cursor
is not over the object. Unless you create any other states, this is how an
object will look at all times.
First we will go over the basics of what you can define in a 'state' and then we
will return to looking at the creation of additional states.
Image objects
Below the list of states you will notice a series of tabs. The tab shown by
default is 'Appearance' so that is where we will start.
An object can fundamentally have two different types of 'Appearance', either
'Image' or 'Text'.
If you want a graphical object, you can choose an image already in the theme by
selecting it from the drop-down list, or you can ‘Browse’ to find a new image on
your computer. Images of various types are supported (BMP, ICO, PNG, TGA and
JPG).
When you save images they are saved as rectangular images, but obviously you
don't want to be restricted to having rectangular objects. Both PNG and TGA
images allow you to include transparency information with the file, which means
that although the saved image may be a rectangle, the actual image that you see
on your screen can be any shape you want, because the background is visible when
transparent areas of the object exist.
This image on the right is a PNG image created in Macromedia
Fireworks with a checkerboard effect showing the transparency.
When this image is used in DesktopX all transparency is
preserved and the background shows through as you can see on the
right.
DesktopX even allows this sort of effect in image formats that don't support
transparency such as BMP. In these image formats, DesktopX will interpret the
color referred to as magic pink to be transparent. 'Magic pink' is pure pink
with an RGB value of 255,0,255.
Although using this method you can't have a graduated
transparency as you find in the PNG example, you can make a close
approximation. Note, that you need hard crisp edges as if you
'anti-alias' to soften the object edges, your object will have a
pink glow as these colors are not pure 'magic pink'.
Image sizing and offsets
Once you have selected the image to use you can distort the image by entering
a width and height for the image in the appropriate boxes.
DesktopX is not content with sizing objects in such a brutal fashion, so
provides an advanced tab to allow you to resize the image more intelligently.
Clicking the 'Advanced' button brings up a new dialog. This allows you to
specify different scaling horizontally and vertically. At each edge you can
specify a number of pixels that you do not want to stretch and then you can
choose to either Tile (repeat) or Stretch the area in between.
For example, if you have an image that is 40 pixels by 30 pixels and you want
the outer 5 pixels at each edge to remain unstretched, then the corresponding
values A-D would be 5, 35, 5, 25. You could then choose to either tile or
stretch the area in the middle.
Also in this dialog, you can offset the image position. This is not useful in a
single state object because you could just position the object where you want,
but in a multi-state object, you can offset the image in different states to
create useful effects. A particular example of this could be offsetting on
“Mouse down” to represent the click like a button being depressed.
Text Objects
If you choose a 'Text' object type then the configuration options change to a
more simple set.
You can enter the text you want in the text area, and set it's alignment in the
dropdown 'Alignment' list. To further customize your text, you can specify the
font (including style and size) and color in which the text will appear.
If you want, you can specify that the text has a border by clicking the box and
selecting a border color. By having a colored border and setting the text color
to 'Magic pink' you can create text which is purely an outline.
You can also make use of offsets here to create effects like you can for images.
Click the “Advanced” button to specify the offsets you want to use.
Object Transparency
We will come onto the ‘Animation’, and ‘Messages’ tabs later, but the
remaining four allow extra tweaking of your image.
The ‘Transparency’ tab allows you to make the whole object partially transparent
(in addition to any transparency specified in the image).
You have a ‘No transparency’ or you can specify a uniform level of opacity of
the image. For example an object with a uniform opacity of 40% will be 40%
visible and 60% transparent.
The final option allows you to vary opacity as the object animates but we will
discuss that in the appropriate section.
Shadows and Glows
The ‘Shadow/Glow’ tab allows you to apply either a drop shadow on the object
giving it the appearance of floating above the desktop, or a glow surrounding
the object.
If you click “Enabled” button you can specify four parameters to customize the
shadow.
Setting the offset defines in which direction the effect goes. Setting the two
offsets to ‘0’ will create a glow, whereas non zero values will create a drop
shadow in a direction dependant on the positive or negative values.
A low 'Sharpness' value gives a crisp edges shadow whereas a high value makes it
softer. The higher the 'Darkness' value the darker the shadow will be.
You can also specify what color you would like the shadow or glow to be by
clicking on the appropriate button.
This feature can be effectively combined with shadows to create great special
effects.
Color
One of the coolest features of DesktopX is the ability to change the color of
things without replacing the image. In the 'Color' tab you can adjust the
objects hue (color) by selecting a value between 1 and 255. Experiment until you
find a shade you like! Setting the value to 0 will set the object color to that
of its original image.
You can further fine tune the color by tweaking its brightness and contrast
across the specified ranges.
We will come onto additional states later but note that there is a button here
to quickly apply the change you have made to all different states of the image.
Sound
The final tab that we will cover in this section is the 'Sound' tab. Here you
can specify that a sound is played when the state occurs simply by browsing to
it on your hard drive. You can Browse for or select an existing WAV or MP3 file.
Although we will discuss animation later, you can see options for looping the
sound when the state is animated. You can choose to repeat the sound once with
every loop of the animation, loop continuously irrespective of where in the
animation you are, or not loop at all.
New States
You now know the basics of configuring a single state object. A multi-state
object is no more complicated.
To add a new state, simply click the 'Add' button. You will then be presented by
a list of the common states not yet used from which you can select:
Mouse over - occurs when the user moves the cursor over the active part of the
object (as defined by the 'Activation' option on the 'Relation' tab.
Mouse down - occurs which the user presses down the left mouse button over the
object
Mouse up - occurs when the left mouse button is released whilst over the object
Show - occurs when the object appears on screen (either when loaded or via
script)
Hide - occurs when the object is removed from the screen (either when unloaded
or via script)
Command executed - occurs when the object is activated as defined by the 'Starts
with' option on the 'Relation' tab.
You can then configure this state just as you did for the first one. One thing
to remember is that all the images used must be exactly the same size.
The other buttons in this are should be fairly clear as to what they do.
Obviously the 'Remove' button removes a created state though you obviously need
to have one state for an object.
Once you have spend time setting up the first state, the likelihood is that
other states will be fine tuned versions of that state, so for speed you can use
the 'Copy From' button to copy the settings from another created state to the
currently selected one.
The 'Reset' button clears all modifications in the currently selected state so
you can start again.
When you create a state the drop-down list shows you the states that exist by
default in DesktopX, but you aren't just limited to these. In the drop-down list
box you can just type any name in and a 'Custom State' of that name will be
created which can be configured just like any other.
Though these states are not triggered by user interaction they can be activated
by Messages and Script which we will come onto later and are very useful for
that purpose.
The one final thing to define in a multiple state object is the 'Default
Appearance'. On the 'General' tab you can specify the image to be used when the
object first loads. This will not change until the object is interacted with in
some way. Note that this image must be the same size as all the other state
images.
PDF available
