Step-by-Step Tutorials	#11 - Animation
A series by RomanDA

Listing of other DX Tutorials: Click here
Today's Lesson: "Animation"

Ok, So.. I lied.  Well I didn't Lie, I really was done, but this one was really simple and I saw some people asking about this, and I had just finished making just this thing.  I figured why not.
So call it a bonus for me becoming a Master.. or call it, I was bored.

We will be Using the SCRIPTED Animation check you have seen in the Object "Animation" tab.

For this and all the Step-By-Step DX Tutorials you will need to purchase DesktopX for $14.95 from Stardock.

Lets get started.

STEP 1 - Create the objects

We are going to make a single object here, but its more complicated then normal.

First thing you have to do is make a PNG that has multiple images inside it.  There are a LOT of ways to make this kind of PNG.

I have used FLASH to export a series of images, then they all need to be complied into one image.
Like this:

The trick with the frames (objects) in this kind of image is that the need to be EXACTLY The same size, and they have to be spaced EXACTLY the same as well.
In this case the image has 4 frames, I numbered them for you so you will be able to see the animation in action.

Create a NEW object, call it "TEST" or whatever. 
You can (save-as) the above image, and use it for testing.  The Catch here is make sure you change the ANIMATION TAB in the STATES tab of the properties to show:

(4) Frames, and SCRIPTED is checked.

STEP 2 - Moving Ahead - Add a Script

Create a SCRIPT on the object we just created.

Lets look at the above script.
First we use the same function we use all the time to handle click:

Here is the main part of the script.  The script looks at the object to see what its Current Frame is.
CurFrame = object.CurrentFrame + 1
This is based on 0-3 not 1-4, even though there are 4 frames in the animation.  We START at 0 not 1!!!!

Then we check to see if CurFrame its less than < the max number of frames (4 frames of animation).
If so, then we make the current frame the new CurFrame.

Or else the object's CurrentFrame is set to 0 (the first frame of the animation).

CONCLUSION

So, that's about it.  you click on the object, and it changes the current frame up 1 each time till it gets to the last frame, then it goes back to 0.
I used this in something I'm working on right now.

I hope you took the time to enter the code (not just copy/pasted the entire thing) so you could work thru the tutorial step-by-step and see how things work. 

This one was very simple, but I know I didn't know how to use this till I had to, so I hope it helps everyone out.

This REALLY will be my last tutorial for a while.  I hope you have enjoyed this step into DX.

Step-by-Step Tutorials	#10 - Hide & Seek
A series by RomanDA

Listing of other DX Tutorials: Click here
Today's Lesson: "Hide & Seek"

This will be the last in this series of Tutorials. I hope you have enjoyed them, and managed to get something out of them.
In this lesson we will do some basic DX operations on one object from another.
We will cover the following:

• HIDE/SHOW one object by clicking on another
• SLIDE/HIDE one object by clicking on another
• EXPAND/SHRINK one object by clicking on another

For this and all the Step-By-Step DX Tutorials you will need to purchase DesktopX for $14.95 from Stardock.

Lets get started.

STEP 1 - Create the objects

For this tutorial we will be using 3 objects: (right click and SAVE the images to your pc)

Mask
Button
Target

• Create 3 objects. (look at the old tutorials for info on how to do this)
• Create an object called Mask
  • width: 260
  • height: 90
  • Group Tutorial10
  • Widget Tutorial10
  • NOTE: we will later change the transparency to 0, but for now we want to see how the mask makes things work.
• Create an object called Target
  • Make its PARENT object MASK
  • place it at 0,0 for top/left.
  • Group Tutorial10
  • Widget Tutorial10
• Create an object called Button
  • place it above the TARGET/MASK object (like you see in the table above, just above it)
  • Widget Tutorial10
  • NO GROUP!!!!
• We will make a VERY simple script on Button to hide/show Target.

STEP 2 - Add a simple HIDE/SHOW Script

Add the following script to Button:

Lets look at the above script.
Its VERY simple, we look at the Visibility of Target and see if its True (is it visible), if so, we HIDE it (False), if its Hidden (False) we Show it (True).

That's all there is to it. 
SAVE the code.
Click Button to see how it toggles Target on/off.
The MASK will stay there, but that's ok for now, we will play with that NEXT.

Here is what you will see:

Normal View	CLICKED

STEP 3 - Sliding Target

• The Function Object_OnLButtonUp(x, y, Dragged) is the button being pressed (well released)
  Inside here we look at the TOP position of the TARGET.
  If the TARGET's top is = 0 this means its being shown and is at the normal position, so we want to HIDE it (Timer 200).
  If not then we want to SHOW it (Timer 100).
  We kill the timer just to be sure, then we set the correct timer to start.
• In the timers we simply look to see if the top is at 0 or at -90 (shown / hidden).
  All we do to HIDE the TARGET is to move it 5 spaces at a time UP
• Because we have the TARGET's parent as a MASK it will move up past the Visible area the mask shows, so it will look like its vanishing.
• In the Timer we keep moving it UP until it reaches -90 (the object it 88 pixels tall), then we kill the timer.
• When we click the button again it sees the TARGET.top position is -90 and it SHOWS it by doing the opposite as it does to SHOW it.
• We move it DOWN 5 pixels at a time till its back to 0, with the mask setup it looks like its sliding from nowhere.
• We are using this
  Sub Object_OnScriptEnter
  desktopx.Object("Target").top = 0
End Sub
To set the initial TARGET position to 0, just so that it shows the menu on startup.  If you wanted to have the menu HIDDEN on startup, you would change the 0 to -90

Here is the script to SLIDE the TARGET UP/DOWN: (this code goes in the BUTTON)
REPLACE the code from the "HIDE/SHOW" above. 

This would end up looking like this (when you click the button it goes UP then DOWN):

To make this look a LOT better you could go in and make the MASK's transparency = 0 so that its basically invisible.
You can use whatever objects you want, you would only have to change the -90 to the correct height for the object you want to use.
Again, these are just samples for you to work with.

STEP 3 - Shrinking / Expanding

One of the things we need to do is change the ADVANCED settings on the TARGET image.
Click on properties, then States then ADVANCED:

This will make it so the 3d EDGE of the TARGET stays the right width, and the insides kind of Expand.

This would end up looking like this (when you click the button it EXPANDS / SHRINKS):
It wont look exactly like this, the edges should stay and the middle should shrink (I just dumped this into flash, so its not the same).

In the case of the EXPAND/SHRINK, you do NOT need the MASK, so you could delete that object.  I left it here only for reference.

CONCLUSION

This tutorial is actually 3 in 1.  But they are related, so I wanted to make this last Tutorial a good one.

This will be my last tutorial for a while.  I hope you have enjoyed this step into DX.

Step-by-Step Tutorials	#9 - Wallpaper Changer
A series by RomanDA

Listing of other DX Tutorials: Click here
Today's Lesson: "Wallpaper Changer"

In this lesson we will walk thru a few built-in commands in DX that allow you to create a Wallpaper Changer.
We will start simple and add to the script.  It is amazing all the things that are built into DX.

We will use the file dialog box, the wallpaper changer, create a "right-click" menu and even a custom preference window.

For this and all the Step-By-Step DX Tutorials you will need to purchase DesktopX for $14.95 from Stardock.

Lets get started.

STEP 1 - Using the System.FileOpenDialog & System.SetWallpaper

Once it is created (you can use any image you want, but for me I'm just going to use the standard round DX image.

Add the following script:

Looking at the above script we have some new things in here.

The FileOpenDialog is a built-in DesktopX function.  It allows you to select a file from a standard windows looking open dialog box.
The format is very simple. 

• "Select Wallpaper..." - Title for the window
• "" - default file (say you want it to come up with a file selected, this would be that file name)
• FolderName - The default folder to open
• "Wallpapers |*.jpg" - this is the file Extension to use, in this case JPG
• 0 - flags (to learn more about all these flags look over: https://www.stardock.com/products/desktopx/documentation/scripting/system_namespace.html )

The way this works, is you click on the object, it pops open the FileOpenDialog , then you select your wallpaper this file name gets saved into the Wallpaper var.

This is another built-in DesktopX command.  It does exactly what it says "SetWallpaper".  It gets passed 2 items:

• wallpaper - the file we picked from above, has to have the entire path (IE: c:\wallpaper\mywallpaper.jpg )
• 3 - There are 3 options for this: (we will add a right-click menu later to select this)
  • 0 = use default wallpaper
  • 1 = Center wallpaper
  • 2 = Tile wallpaper
  • 3 = Stretch wallpaper

So with just the above script you have created a object/widget that allows you to click, pick a file, and have it set the wallpaper to that file.

This is good, but every time it loads it points to that same folder, what if you had multiple folders?  What if you want it to STORE what folder you picked the last time?

STEP 2 - Pulling the Folder name from the Open Window Dialog box

Our entire script looks like this now:

By Adding dim FolderName at the very top of the script it will make that variable Global, meaning it will be able to read/write to that var from any/all functions/subs.
If you don't add this it will not be able to pull the value of FolderName from the other functions.

We are going to add a way to pull the Folder name from the one we selected in our Dialog box.
To do this we need to "pull" the file name, and then strip that out from the var.

We are going to assume that the user clicked on another drive/folder/filename from the open dialog.
Let's say I picked:  D:\My data\Wallpapers\ZubazisUgly.jpg

Breaking this apart:

• Set filesys = CreateObject("Scripting.FileSystemObject")
  Sets the var FILESYS to a FileSystemObject
• f = filesys.GetBaseName(wallpaper)
Pulls the File name from the entire path
  In this case it pulls: ZubazisUgly.jpg
• t = instr(1,wallpaper,f)
This finds the position of the file name in the path, so that we can strip it out.
• FolderName = left(wallpaper,t-1)
  This pulls the LEFT T-1 characters from the string so we end up with just the path:
  D:\My data\Wallpapers\

This is all well and good, but the next time we click the button it will still use the C:\wallpaper folder, so we want to add a little more code to save and restore this var.

STEP 3 - Adding the Save / Load registry functions

We are going to add (2) new functions to the script:

• The SaveSettings and LoadSettings are functions we talked about in Tutorial #6.
• We are storing the FolderName into the reg key "HKCU\SOFTWARE\desktopx\wallpaperpicker\folder"
• We use a DEFAULT of the Current DesktopX Executable Directory so that it loads up using the folder the EXE was run from.
  You don't want to hard-code a folder here because not everyone's pc will have that folder location.

STEP 4 - Putting it all together

Lets see what the entire script looks like now, with all the above included.

This should allow you to click and open a dialog box, allowing you to pick a folder/file to set the wallpaper, then it sets the wallpaper, and stores the selected folder.

STEP 5 - Adding a Right-Click menu for options.

The next step is to add a menu so we can pick from default/centered/tiled/stretched for the wallpaper.
I made a tutorial a while back on how to add a Right-click menu - CLICK HERE to view that, I'm not going to go thru this step by step, I'm just going to give you the working code.  If you want a break down of how the menu works, please use the above link to the other Tutorial.

The code below will popup a menu when you right-click.  It gives you 4 options, from changing to the default wallpaper, to making it tiled/stretched.
It will do this immediately so you can see what it does, it also stores the info in a Var (WPFormat) so that the next time you pick a wallpaper it will use this same setting.  With 1 exception the 0.  This is designed to set the wallpaper to the default, so we don't want to STORE that, we will default it back to 3 (stretched). 

STEP 6 - Putting it all together

We are going to add a few more DIMs at the top:

• Dim Wallpaper - stores the selected Wallpaper name
• Dim WPFormat - Stores the Current Wallpaper "format" - stretched/centered/etc.

Here is the FULL script, if you just want to copy/paste this into your object, its your call.

CONCLUSION

I hope you took the time to enter the code (not just copy/pasted the entire thing) so you could work thru the tutorial step-by-step and see how things work.  You will notice I added a small IF under the Open Dialog box so that it only does anything if you select a file, it will crash out without that code if you don't select a file.

I hope you have enjoyed this step into DX, and look forward to the next installment..

Step-by-Step Tutorials	#8 - Tool-Tip Replacement
A series by RomanDA

Listing of other DX Tutorials: Click here
Today's Lesson: "Tool-Tip Replacement"

In this lesson we will make a replacement for the built in Tool-tip, one that can be made any color, shadow, transparency, and have it re-size automatically.

This is not going to be a simple STEP-BY-STEP, I'm assuming if you are this advanced into DX, I don't need to explain how to get the script windows up, or edit properties!  This is more like a SCRIPT example, not a step-by-step.

For this and all the Step-By-Step DX Tutorials you will need to purchase DesktopX for $14.95 from Stardock.

Lets get started.

I made a very simple rounded corner background item to use for the tool-tip background.

• The reason for the RED is because that's the best color to use for changing hue's
• Rounded corners (just cause)
• black frame cause I liked it.
• You can make yours anyway you want.

STEP 2 - Create the ToolTipBack

• Select the tool-tip-back.png from above.
• You will need to set the "ADVANCED" properties on the object so it can be re-sized easily.
• Click on the "summary" tab and name this object "ToolTip_Back"
• Make this part of the GROUP "ToolTip"

STEP 3 - Add the ToolTip_Text to the ToolTip_Back

• Make the text about 10px Arial black, or whatever color you want.
• Call it ToolTip_Text
• Make the Parent/Owner  ToolTip_Back
• make the Group ToolTip
• for this example change the left/top to 5 & 5

STEP 4 - Making a test object for the tip.

We need to make something, anything to mouse over.  You can use the "default" object since we dont really care what it looks like.

• Make a NEW OBJECT, call it TEST_OBJECT.
• use any image you want, or just the built-in default image.
  (this is what I will show here)
• We need to add a script to this object.

Add the following code to the above TEST object.  Put it at the bottom of the code, under the OnMouseLeave sub section.

I will try and explain some of the code below. (look for the yellow info)

STEP 6 - Test it out.

You can move the tooltip_back up or down more based on your preferences.
The changes would be on the places where it shows "Desktopx.Object("ToolTip_Back").Top = ...
You can make that + or - smaller or larger to suit your desires.

STEP 7 - Changes and more changes.

• Color of the tool-tip background image (play with the hue/brightness/contrast to get it looking the color you would like.
  You could also CODE this so that important tool-tips show up in RED, info in Yellow, etc. Its up to you.
• Transparency: make the background image as clear as you like.  Again, this could be coded easily.
• Text: using the  Call desktopx.ScriptObject("ToolTip_Back").ShowToolTip("This is my Tool-Tip")  you can change the text in the tool-tip easily here you can even add multiple lines.
  EX: Call desktopx.ScriptObject("ToolTip_Back").ShowToolTip("Tool Tip Text Line 1" & vbnewline & "second line here" & third line here")

This is just my idea on how to change out the built-in tool tip command.

I hope you have enjoyed this step into DX, and look forward to the next installment..

Step-by-Step Tutorials	#5 - Using WMI
A series by RomanDA

Listing of other DX Tutorials: Click here
Today's Lesson: "Using WMI" Windows Management Instrumentation

In this lesson we will cover how to use Microsoft's WMI to find out some basic info about our windows computer.
In order to use these Tutorials you will need to purchase DesktopX for $14.95 from Stardock.
Lets get started.

STEP 1 - Create a text object.

I'm not going to go back over the first 4 tutorials, if you haven't read them, and gone thru them, please go back and do that first.

Create a TEXT objet, make the default text something like "TEST" it doesn't matter, make it the size you want (big enough to read on your screen).

We are simply going to be using this text object to display the info we gather.  Again, this is just to show you HOW to use WMI to retrieve info from your computer, not how to make a pretty widget.  We can do that later. 

Don't worry about adding scripts yet, we will do that in a later step.

STEP 2 - WMI Basic connection

WMI is used to pull information from your system, things like Computer name, User name, What drives are attached to your system.  We are going to pull this information from your computer using a simple script in DX.

Open your object, click on NEW for the script.
We will be adding some info to the "Sub Object_OnScriptEnter"
 

What we want from this table is:

• UserName  - User Name
• TotalPhysicalMemory - Total Memory
• Domain - Domain name (If there is one)
• Name - Computer Name

STEP 3 - Pulling info from WMI

So, we know how to make the connection to WMI, and we know what table we want.
Lets get the USERNAME that is logged into the current computer.
 

Let's look over this one too.

I'm not going to break everything apart, but the basics are this:
the FOR EACH is used to pull 1 item at a time from the COMPINFO we set before, and store it in the objComputer variable. 
Then we assigning the variable PCName to the .NAME field from the table.
Then we take and set the TEXT of the object to "ComputerName: " & PCName

SAVE & APPLY this now, and see what happens.
What you SHOULD see is your text object showing something like:
ComputerName: MyPcsName

Not to hard was it?  Lets add a little more. 

STEP 4 - Adding more info

Open the object back up, EDIT the script.  Lets add a little more info.
 

We added the Domain name (if there is one, you may not have one), and the Username.
Notice the USERNAME has the domain name as part of it? (if you have a domain, otherwise you wont see this).
We want to pull JUST the user name out from that. So lets add a simple IF statement to the script.

Insert this script right below the UserName = objComputer.UserName line.
This simply looks at the PCName to see if its LENgth is over 1 character
Then it gets the length of that name + 2 spaces (the \ and then the first letter of the name)
Then it sets UserName to the MIDdle of the the string UserName starting at the T postion.

Don't worry I will put the entire script at the bottom in one place, so you can copy/paste it if you want.

STEP 5 - What Drives do we have?

We are going to add a little more to this script.  One of the things people have asked to see is how to determine what drives, drive letters, etc. are on your pc.

The code we are going to add looks a lot like what we used above:
 

DeviceID | DriveType | Description | VolumeName | FreeSpace | FileSystem
C: | 3 | Local Fixed Disk | Boot-2006b | 30640107520 | NTFS
D: | 3 | Local Fixed Disk | Storage-2006b | 14589018112 | NTFS
E: | 5 | CD-ROM Disc | 20030803_1304 | 0 | CDFS
F: | 5 | CD-ROM Disc | | | 

STEP 5 - Here's The code:

Promised to post all the code in one place, here it is:

There are a lot of things that can be done with this info.  Things like making a Drive monitor, or a simple piece of text with your username etc on it.
WMI is EXTREMELY powerful, you can pull things from other computers on your network, A simple GOOGLE search will show you TONS of places with lots of script examples. 

Check back as I add new Step-By-Step Tutorials on how to make this a link to a folder, web-site, or just about anything you want!

I hope you have enjoyed this step into DX, and look forward to the next installment.