DX Tutorial #4: Let's all just Fade Away

RomanDA's DX Tutorial Series

May 24, 2006 2:18 PM from

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 [email protected]

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.

Please let me know if you find these Tutorials useful, they take a lot of time and effort to setup and I don't want them to be for my own benefit, as I can just take my own code and use it.

Enjoy,
RomanDA
AKA: David A. Roman
http://romanda.wincustomize.com
http://www.romanda.org
[email protected]

8,470 views 5 replies