Getting fancy
Link to the scripts used in this chapter, lesson3-6.zip.
(xpBlues lesson 3)
Let’s say that you wanted to have your button fade in. There are
several ways to do this. We are going to do it using timers and one trigger
button. We will redo the original script:
; Get
visibility of button 16
GET
16
VISIBILITY
T1
; Make it
invisible
IF
T1
0
=
{
SET
16
2
TEMP1
SETTIMER
16
10
END
}
; Make it
visible
This is a mirror of
what we already wrote. We check to see if the
visibility is 16 instead of 0. If it is 16 we set
TEMP1 to 1 instead of 2. Make sure to keep these straight! Call the script for
button 16 and end.
IF
T1
16
=
{
SET
16
1
TEMP1
SETTIMER
16
10
END
}
END
“That’s quite a change from the script we had before. Don’t we need
all that code from before? Where is the code for changing the alpha?” The
script has changed dramatically. What it is doing is calling another script.
The way SETTIMER works is it calls the script specified in the skin for that
button, here it calls the script for button 16. It waits for the second number
of milliseconds before calling the script while it continues the script, here
it waits of 10ms.
We need to write the script that it calls. The script needs to fade in
and fade out the button since a button can only be tied
to one script. What this means is if another script calls the script for
a button it doesn’t call the mouse press for that button it calls the script
tied to that button. We will look at this more in lesson 5.
Also notice that we used TEMP1. We want to pass a variable to another
script so we will use that now.
We
get to use that TEMP variable. It was set in the other script, but we can use
it here. We need to change it to a T type so we can work with it.
Programmers would call TEMP a global variable for the button and T a local
variable.
GET
16
TEMP1
T2
GET
BUTNO
ALPHA
T1
; Fade and change visibility for the buttons.
IF
T2
1
=
{
SET
BUTNO
0
VISIBILITY
We
do the second IF because this is going to loop and we need a way to stop it.
A loop that never stops is a good way to crash a program.
IF
T1
255
=
We
do some math to start increasing the ALPHA to make it visible. We increase
T1 by 15 and then set it to be the ALPHA trait for the button. We
also use BUTNO for the second time. It can be used in place of the button
number. It uses the number from the button that called the script. This way
you can use the same script for more then one button.
END
MATHS
T1
ADD
15
SET
BUTNO
T1
ALPHA
Here we call the same script. We do this to
loop the script. We could also use JUMPTOTOP. This way we pause to let the
ALPHA take effect and give it consistency across different computers that
run at different speeds.
REPAINT
SETTIMER
BUTNO
100
Make
sure to have that closing bracket. ;-)
}
IF
We
do the same thing for fade out with some important differences. One
change is we wait till T1(alpha) is down to zero before changing the
visibility. Otherwise the button would wink out on the first time through
the script. The
other is instead of adding 15 we subtract 15.
T2
2
=
{
IF
T1
0
=
SET
BUTNO
16
VISIBILITY
IF
T1
0
=
END
MATHS
T1
SUBTRACT
15
SET
BUTNO
T1
ALPHA
REPAINT
SETTIMER
BUTNO
100
}
END
Make sure to keep track of where it is calling TEMP from and
what you expect TEMP to be. As you add more scripts and start to reuse variables
it is very important to know where your variables are and what is setting them!
We need to set up our fade script in SkinStudio.
|
|
We need to add a section called Script#.
This will create a section that we need but it is labeled wrong.
The way it is now it sets a script to button 0. To correct this go to
code view.
|
|
You will probably find it at the end of the code since it was the last
thing you added. After changing it save the skin and it will be listed in the explorer
window on the left properly.
We need to point the preset at the fade script.
Let’s make things a little neater by having two triggers. That way we
can have one button for show and one for hide. (xpBlues lesson 4)
Now back to VisiButton.wbs.
; Start the fade for button 16
SET
16
1
TEMP1
SETTIMER
16
10
; Switch buttons
SET
17
16
VISIBILITY
SET
18
0
VISIBILITY
END
This method requires that you create another button and another script
that we will call HideButton.wbs. We could also just use one button by checking
the alpha trait for button 16 and setting TEMP1 accordingly. We need to create
button 18 and set it up the same way that we set up the original trigger button
except it calls HideButton.wbs and visibility is set to 16.
; Start the fade for button 16
SET
16
2
TEMP1
SETTIMER
16
10
; Switch buttons
SET
17
0
VISIBILITY
SET
18
16
VISIBILITY
END
“Could we fade
the trigger buttons as well?”
I thought you
would never ask.
(xpBlues lesson
5)
We need to go
back to our old friend visibutton.wbs.
; Start the fade for button 16
SET
16
This section hasn’t
changed. Here instead of
changing the visibility of the buttons we are calling the scripts for them.
1
TEMP1
SETTIMER
16
10
; Switch buttons
SETTIMER
17
0
SETTIMER
18
100
END
We also need to
make the same changes to HideButton.wbs
; Start the fade for button 16
SET
16
2
TEMP1
SETTIMER
16
10
; Switch buttons
SETTIMER
17
0
SETTIMER
18
100
END
Fade.wbs stays
the same. Make sure that in it you used BUTNO for everything you SET because we
are going to have the hide button use it as well. This will make things a
little less complicated.
In lesson 3 we
tied a script to button 16. We need to do that again for buttons 17 and 18.
Button 18 is going to use fade.wbs since it is visible when button 16 is.
Button 18 also needs to have its alpha level at 0 in the skin for this to work
correctly. Button 17 needs another script since it is doing the opposite of the
other two buttons.
Let’s call this
callFade.wbs.
GET
16
TEMP1
T2
GET
BUTNO
ALPHA
T1
; Fade and change visibility for the buttons.
IF
T2
2
Here is the important
difference. When TEMP1 is set to 2 it makes the button visible and when it is
set to 1 it makes it invisible. This is the opposite of fade.wbs.
=
{
SET
BUTNO
0
VISIBILITY
IF
T1
255
=
END
MATHS
T1
ADD
15
SET
BUTNO
T1
ALPHA
REPAINT
SETTIMER
BUTNO
5
END
}
IF
T2
1
=
{
IF
T1
0
=
SET
BUTNO
16
VISIBILITY
IF
T1
0
=
END
MATHS
T1
SUBTRACT
15
SET
BUTNO
T1
ALPHA
REPAINT
SETTIMER
BUTNO
10
}
END
Getting
confused yet?
Let’s take a
look at what we are doing.
When a window
opens:
Button16: Not visible
Alpha is 0
TEMP1 is not set
Tied to fade.wbs
Mouse click is whatever we want
Button17: Visible
Alpha is 255
Tied to fadeCall.wbs
Mouse click is VisiButton.wbs
Button18: Not visible
Alpha is 0
Tied
to fade.wbs
Mouse click is HideButton.wbs
What happens
when we click Button17?
If you click
Button 17 now the opposite happens when it sets TEMP1 to 2 and calls scripts
for Buttons 16-18.
“Oooo… ahhhhh….
This is like the 4th of July. Well, not quite, but it does look
neat. How would I add more buttons?”
Easy to do
compared to some of the things we have done so far.
(xpBlues lesson
6)
Create a button
similar to button 16. It can have whatever image, alignment and click
properties you want. Make sure the alpha and visibility are the same as button
16 though.
We need to make
some changes to visibutton.wbs and HideButton.wbs.
Lets start with
visibutton.
; Start the fade for button 16 AND 19
SET
16
1
TEMP1
SETTIMER
16
10
SETTIMER
19
10
; Switch buttons
SETTIMER
17
0
SETTIMER
18
100
END
The only change
we made was to add:
SETTIMER
19
10
Do the same
thing to HideButton.
The last thing
to do is tie button 19 to the fade.wbs script in the presets like we did in
lesson 3.
Now you are
ready to add as many buttons as you like.
Some things to
consider, fade can become very CPU intensive. As you add more buttons to fade
in and out at the same time the whole process will become slower. You will also
see the buttons fade at unequal rates. One way around this is to have a patch
that looks the same as the background covering your hidden buttons. Instead of
fading each button individually you simply fade the patch. It will look like
all the hidden buttons are fading at the same rate at the same time.
The cclock
plugin has built in fade that is currently broken with WindowBlinds. The patch
idea works well with it.
The scripts used in
this lesson use 15 to subtract or add to the alpha value. If you decide to
change this make sure that the number divides into 255 evenly such as 5, 15, 17
and 51. If you do use a number not listed you will need to use less then and
greater then symbols instead of equals. This becomes the path to madness.