Your DesktopX Documentation Resource Guide

Documentation Home

Quick Start

User's Guide

Developer's Guide

Resources

Tutorials


Lets all just Fade Away (and BACK TOO!):
  How to add fading to your DX project.

Lets see how this would work:

Hidden (image 1):

Shown: (image 2)

This will involve several steps.

STEP 1: What's in your Drawers?
  Lets see what we have to hide!  In order to fade things in and out, we have to know what the names of the items we want to fade.
In the case above we will use danilloOc's new DX player widget http://danillooc.wincustomize.com/ .  When you click on the "Settings Button" (see image 1) it runs a script that first checks to see if the "Settings drawer" is open (shown) and if it isn't it fades it in, if it is, it fades it out. 

The problem is there are a lot of items in the Settings Drawer:

  • Panel Back
  • Repeat Btn
  • Help Btn
  • Shuffle Btn
  • Mute Btn
  • Open_folder Btn
  • Close Settings Drawer Btn

I decided that its easier to make the fade in/out use an array so you only have to put the info in 1 location.  And its a lot easier to add new items, or change existing ones. 

Lets look over the example here.
The DIM sets up the Vars to be read by the object. (these are put ABOVE the "Sub Object_OnScriptEnter")
It saves the "count" in FadeSettingsX and the objs in FadeSettingsObj

    Dim FadeSettingsObj(30), FadeSettingsX
    FadeSettingsX = 1 : FadeSettingsObj(FadeSettingsX) = "ae_player_settings_panel"
    FadeSettingsX = FadeSettingsX+1 : FadeSettingsObj(FadeSettingsX) = "ae_player_but_repeat"
    FadeSettingsX = FadeSettingsX+1 : FadeSettingsObj(FadeSettingsX) = "ae_player_but_help"
    FadeSettingsX = FadeSettingsX+1 : FadeSettingsObj(FadeSettingsX) = "ae_player_but_shuffle"
    FadeSettingsX = FadeSettingsX+1 : FadeSettingsObj(FadeSettingsX) = "ae_player_but_mute"
    FadeSettingsX = FadeSettingsX+1 : FadeSettingsObj(FadeSettingsX) = "ae_player_but_open_folder"
    FadeSettingsX = FadeSettingsX+1 : FadeSettingsObj(FadeSettingsX) = "ae_player_but_close_settings"

You would have to use the names that match your items.  Its VERY important that the first item is the background item for the drawer (you will see why later).

 
STEP 2: I have a Fading Feeling
  Once you know the objects you want to fade in/out, you need to made a function that does this fading.  Lets start with fading things in first.
 
One thing we need to do is to HIDE everything first.
This is done in the OnScriptEnter Portion of our object.

Sub Object_OnScriptEnter
     desktopx.Object("ae_player_settings_panel").Opacity = 0
     desktopx.Object("ae_player_settings_panel").Visible = False
End Sub

Now lets Fade things IN

'-- I made a separate function for each drawer that needed to be faded in and out.
'-- It was easier for me to do this so I could call the right one based on the BTN pressed.

Function FadeIn_Settings()
     temp = 0
'-- This is used to set the beginning Opacity to 0 (or invisible)
     For x = 1 To FadeSettingsX
'-- loop from 1 to the Max # of items in the array
          desktopx.Object(FadeSettingsObj(x)).Opacity = temp
'-- set the opacity to 0 (invisible)
     Next
'-- Loop
     desktopx.Object(FadeSettingsObj(1)).Visible = True
'-- I said before item 1 needed to be the BG item
                                                        '-- Reason is we want to control is Visibility

     object.SetTimer 2,50
'-- This sets a timer to fade in the items
                          '-- The 50 is in Milliseconds want it to fade in faster make it 30 or 20 or 10
                          '-- Slower would be 60, 75, 100 - try them and see how they change things.

End Function

Sub object_OnTimer2 
     temp = desktopx.Object(FadeSettingsObj(1)).Opacity + 5 
'-- get the BG's current Opacity, add 5 to it
     If temp <= 100 Then
    '-- if its less than or = too 100 keep going
          For x = 1 To FadeSettingsX  
'-- Loop thru the objects
               desktopx.Object(FadeSettingsObj(x)).Opacity = temp
'-- Set the Opacity to Temp's Value
          Next
'-- Loop
     Else
'-- If temp > 100 IE its 100% visible now, stop the timer, and set a few more things
          desktopx.Object(FadeSettingsObj(1)).Visible = True
'-- Set the BG's Viz top True now
          object.KillTimer 2 
'-- Kill the timer (stop fading it in!)
                              '-- If you don't kill this, it will continue to TRY and fade it out forever!

     End If
End Sub

Ok,  that's the basic fading IN part, now lets show how to fade it OUT as well.

'-- Again, Each Drawer has a Fade out/in function and timer.
'-- Im not annotating every line here, look above to see what I'm doing,
'-- Its basically the reverse of above.

Function FadeOut_Settings()
     temp = 100
     For x = 1 To FadeSettingsX
          desktopx.Object(FadeSettingsObj(x)).Opacity = temp
     Next
     object.SetTimer 20,50
End Function

Sub object_ontimer20
     temp = desktopx.Object(FadeSettingsObj(1)).Opacity - 5
     If temp > 0 Then
          For x = 1 To FadeSettingsX
               desktopx.Object(FadeSettingsObj(x)).Opacity = temp
          Next
     Else
          desktopx.Object(FadeSettingsObj(1)).Visible = False
          object.KillTimer 20
     End If
End Sub

 
STEP 3: Button, Button, who's got the.. oh heck who cares, just get on with it...
  Ok, now we need to make the Buttons do the fading we just setup.
Its not so bad with the functions we just created.

The first button we have to work on is the "Settings Button" shown in (image 1)

 
Add this code to the Button

Function Object_OnLButtonUp(x,y,dragged)
     If dragged = False Then '-- Don't do anything if the object was dragged across the screen
          If desktopx.Object("ae_player_info_panel").Visible = False then '-- This is how I determine if the drawer
               '-- is shown or hidden.
               '-- False means its hidden, so fade it in
               desktopx.ScriptObject("ae_player_body").FadeIn_Info
               '-- since the functions we wrote are in another object (ae_player_body) we need to
               '-- call them with the ScriptObject command.

           else '-- It must be showing, so fade it out.
               desktopx.ScriptObject("ae_player_body").FadeOut_Info
         End if
     End If
End Function

That's all that's needed to fade the drawer in and out.  You would also have to add this to the "close" button on the drawer itself.

 
In Conclusion:
  DX code is not as hard as people make it out to be, and I feel more tutorials like this one will (I hope) help people to see what can be done with just a little code, and some ingenuity.
 

There were some other issues with particular widget.

  • Since this has 2 drawers I had to setup a test to see if the other drawer is open and fade it out, as it fades in.
    So I had to add an IF into the button code.
  • There was also an issue with 3 DX Plugin items (volume control items - see image 2)
    Had to make them just Visible = true/false since they wouldn't fade right.

7/29 

SkinStudio 6.2 Released

7/25 

A God Has Fallen - New Demigod Trailer Released

7/24 

Sins of a Solar Empire v1.1 Beta has Arrived

7/23 

Stardock Releases New WindowBlinds 6.2 Update

7/22 

Stardock Releases The Political Machine v1.04 with New Characters

7/22 

Stardock Releases MyColors 2.5

7/17 

DesktopX 3.5 Officially Released

7/11 

Corel WinDVD 9 and Painter X Now Available on Impulse!