Welcome, Sit down, and make yourself comfortable.
RomanDA's DX Tutorial Series
Published on April 26, 2006 By RomanDA In 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 items.
This could easily be modified to use for a DROP DOWN, or SLIDE OUT menu system.

Click HERE to download the working widget first!

Master Background Transparent Background Item Frame
MasterBack transparentback Area1,2,3,4

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:

MasterBack transparentback area1
area2 area3 area4
You need to change the Transparency on
transparentback item.

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.
This will be the "container" for the AREA(1,2,3,4) items.
<----------


In the properties of the transparentback as well as
all of the areas you need to change the "activation"
to "NONE" this makes the mouse ignore these areas.

This would need to be a little different if you are wanting
the areas to be "buttons" in a menu system.
BUTT, if your doing that setup, you should use a
mouse over, i would make a btn you CLICK to show
the menu then click to Hide it!  ----------------------->

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.

 
Dim MinW,MaxW
MinW = 100
MaxW = 250

Sub Object_OnScriptEnter
     object.width = MinW
     desktopx.Object("transparentback").top = 35
     desktopx.Object("transparentback").left = 15
     desktopx.Object("transparentback").width = object.width-30
     desktopx.Object("transparentback").height = object.height-60
End Sub

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.

Sub Object_OnMouseEnter
    Call Grow
End Sub

Sub Object_OnMouseLeave
    Call Shrink
End Sub

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.

Function Shrink
    object.KillTimer 200
    object.SetTimer 100,10
End Function

Function Grow
     object.KillTimer 100
     object.SetTimer 200,10
End Function

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.

Sub object_ontimer100
     If object.width => MinW Then
          object.width = object.width - 5
          desktopx.Object("transparentback").width = object.width-30
     Else
          object.KillTimer 100
     End If
End Sub

Sub object_ontimer200
     If object.width <= MaxW Then
          object.width = object.width + 5
          desktopx.Object("transparentback").width = object.width-30
     Else
          object.KillTimer 200
     End If
End Sub

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.

 
In Conclusion
  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.

 
Enjoy,
RomanDA
AKA: David A. Roman
http://romanda.wincustomize.com
http://www.romanda.org
DXTutorials@RomanDA.org

Comments (Page 2)
2 Pages1 2 
on Oct 05, 2006
alright you mentioned earlier that if i wanted to make buttons out of these areas, i'd have to do something different..

well i don't get how to do drag and drop either, so i thought i'd just make them shortcuts and put the parent as the menubackground, but the only way to make the menu come out is to put their activation on none, and then they can't be clicked..

is there not a way i can script the shortcuts to just act the same as the rest of the menu when hovered over? i tried just changing it to this, and it seemed logical, but didn't quite work.. this was on my buttons:

Dim MinW,MaxW
MinW = 100
MaxW = 500
Sub Object_OnMouseEnter
Call Grow
End Sub
Sub Object_OnMouseLeave
Call Shrink
End Sub
Function Shrink
object.KillTimer 200
object.SetTimer 100,1
End Function
Function Grow
object.KillTimer 100
object.SetTimer 200,1
End Function
Sub object_ontimer100
If desktopx.Object("cont1back").width => MinW Then
desktopx.Object("cont1back").width = desktopx.Object("cont1back").width - 15
desktopx.Object("cont1trans").width = desktopx.Object("cont1back").width - 30
Else
object.KillTimer 100
End If
End Sub
Sub object_ontimer200
If desktopx.Object("cont1back").width <= MaxW Then
desktopx.Object("cont1back").width = desktopx.Object("cont1back").width + 15
desktopx.Object("cont1trans").width = desktopx.Object("cont1back").width-30
Else
object.KillTimer 200
End If
End Sub

these are all the names of my objects, of course.. and it seems like it should work to me, but the two scripts seem to not cooperate

i tried just putting the mouse over grow scripting on the transparent background, thinking that'd be over top of the shortcuts, but that didn't work either..

is there a sectret? and if i made the areas drag and drop, and dropped a shortcut in there, wouldn't this same problem happen? is there no way to be able to hover over it, have that keep the menu out like hovering over the menubackground, and be able to click it?
on Oct 05, 2006
well that posting didn't work

well here's the fix i just figured out.. if i put all the scripting on the buttons, and not on the background at all, i can have it working properly, but any gap between the buttons will make it shrink again, but it should work out how i want it to this way
on Oct 07, 2006
Sorry,

I have not had Internet access for over a week. And I will be extremely busy catching up next week. email me your DX project and ill look at it.

David
2 Pages1 2