RomanDA's DX Tutorial Series
Wednesday, April 26, 2006 by RomanDA | Discussion: DesktopX Tutorials
RomanDA's DesktopX Tutorials:
My goal is to make a set of tutorials for DesktopX. If you have ideas on what you would like to see, please email me at DXTutorials@RomanDA.org
|MouseOver DX Controls:|
|How to use a transparent area and mouseover to show/hide
This could easily be modified to use for a DROP DOWN, or SLIDE OUT menu system.
|Master Background||Transparent Background||Item Frame|
The trick to using these is in the ADVANCED properties in DX!
By using these setting you are
able to "stretch out" the Background and still keep its shape and look.
The Left/Right/Top/Bottom are in PIXELS. You have to know the position of things in your images to be able to use the correctly.
I used the same ADVANCED settings to take the very small Item Frame and make it into the bars you see in the working widget.
This is a great part of DX, it allows you to have a REALLY small png file and use it to make just about any sized bar.
Use these setting below to work out the height/width/top/left/and parent/child relationships:
|You need to
change the Transparency on
This makes this item nearly invisible.
DO NOT EVER SET IT TO 0 for the opacity!!
I have had DX BLOW UP on me
simply by setting this to 0.
In the properties of the
transparentback as well as
This would need to be a
little different if you are wanting
So now you have all the parts. and hopefully you have them all put together right.
The way this works is as follows:
- The AREAS(1/2/3/4) reside on top of the transparentback object.
- transparentback object resides on top of the MasterBack object.
- The Script we will create will make the transparentback's width/height match the MasterBack (- a little to make it reside INSIDE)
|STEP 2: Let's look at the scripts:|
|Ok, now that we have the objects
made, lets play with some scripts.
The only object that has a script is MasterBack.
Click the PROPERTIES of MasterBack then click on ""NEW" for the script.
MinW = 100
MaxW = 250
The above script is designed to
set the default size of the MasterBack to its Min Size.
You could easily change the MinW (minimum width) and MaxW (maximum width) to be whatever settings you want.
It also sets the top/left/height/width of the transparentback object to match the size of the MasterBack object.
The above scripts are to handle
the mouse over/leave states.
I have them call sub functions so i could keep track of what it was doing. It could easily be changed to work without these sub functions.
These functions start and stop
the "grow" and "shrink" function of the widget.
You can make it grow/shrink faster or slower by changing the ,10 in the SETTIMER function.
The 10 is 10 ms. If you want it to be slower make it 20 or 30, faster would be 5, 2.
If object.width => MinW Then
object.width = object.width - 5
desktopx.Object("transparentback").width = object.width-30
These are really pretty simple
"grow" and "shrink" functions.
object_ontimer100 Shrinks the MasterBack width down by 5 pixels at a time until it reaches the MinW value.
It also changes the transparentback object's width as well.
By making the transparentback shrink at a smaller size than the MasterBack it looks like the AREA(1/2/3/4) objects are being hidden.
object_ontimer200 does the same thing only in reverse. It makes the object GROW at 5 pixels at a time until it hits the MaxW value.
Once they reach their set values,
they KILL the timer so it stops trying to shrink or grow.
I also added this code in the shrink/grow functions to be sure it doesn't get stuck in a loop.
|This is a really simple way to
have a container that shows and hides objects placed inside it. I have
used this for my
GalCiv II Drive Meter widget.
I know this seems simple, but it took me a while to figure this out. I hope by posting this article and the widget that I can help other people who are attempting to learn DX. The potential for DX is amazing.
Please let me know if you have problems, comments, or questions with this.
AKA: David A. Roman