Tutorial 2: Making special displays with DS buttons, like a clock

DS Buttons can also be used to spice up your skin by adding buttons as special effects. Combine them with animation (a bit of KitterSpeak) and you can produce some amazing additions onto your interface. In fact, DS buttons don't even have to be buttons at all!

For instance, we can even do something as complex as a clock that displays the time on our skin! In this tutorial we'll walk you through both through creating the patches, then the animation parts, and then finally the DS lines associated with it.

Note: If you'd rather have the patch as you go, you can download the patch for it, especially if you want to just work with the DS lines first! You'll proceed to the Adding DragonSpeak Lines part of this tutorial if so.

But, if you want to try your hand at making the whole clock from scratch, here's the step by step:

Making the patch pieces

The first step in making the patch is to create the clock pieces. For this, we actually only need to create 3 buttons in the Fox Editor, either in button.fox or the dsbtns.fox (whichever you prefer).

For DS buttons, you need to have a second copy of that button that's the downpressed version of the button right afterwards. So in total, we will have 6 objects in the .fox file.

Our first button will be the hours, followed by a copy to be the version of the button that's clicked (or the downpressed version). Since minutes have two numbers (for instance, 1:05, the 0 and the 5 are two separate numbers), we'll have two more buttons for them. The first one will be the first minutes slot, and after the downpressed version, we'll have the second minute slot button, followed by its downpressed version as well.

Let's start with the first button, the hours. These will be objects 1 and 2 in the included patch file. We'll need it to have 24 animation frames total. As for the art, you have a few choices. For a clock that just has 12 hours on it, you'll create the list of numbers 1 through 12, except you'll copy and paste them again for a total of 24 frames. Another option is a 24 hour formatted clock. In that case, you'll create the numbers 1-24 in each of your 24 animation frames.

Now we'll do the second two buttons, or the minutes. They each have their respective downpressed versions for a total of 4 objects. They each need 10 animation frames, with art for the numbers 0-9 (0 counts as Frame 1).

Setting up the animation (KitterSpeak)

Now that you have your DS buttons' animation frames set up, we need to add some animation. In Furcadia this is done through KitterSpeak! If you need help figuring out how to add KitterSpeak lines, you can read through the Animating with KitterSpeak tutorial.

First, go to the Animation menu, then click Animation Editor.

You'll see it's populated a bunch of default KitterSpeak lines. Make sure that the very first step (step 0) says [0] Show Frame 1 behind the furre. Then make sure they go in order, as in Show Frame 2, 3, 4, etc.

Now we need to add our own KitterSpeak lines for the clock. We will use the Stop line so that we can use DS to control when they appear. Basically it tells the animation to wait for DS to tell it what to do next (which is perfect for our clock!). After the last show frame KitterSpeak line, add the Stop line.

Adding the DragonSpeak lines

Not that we have animation lines set up, we can use DS to call up the different frames to reflect what the current time is in the game.

First, we'll start off with our cause:

(0:100) When # seconds have passed, offset by #,

This type of cause is something that happens regardless of what people are currently doing in the Dream. Whatever effects we list afterwards will happen every # seconds. Since we're tracking time, we will set it to go off every second to ensure it'll always set the clock to the right time, even when someone first enters the Dream. To do that, set the first # to a 1, and the second # to a 0.

After the cause, we need to put in the effects that will start displaying the time. To accomplish this, we will use variables to store information for the buttons.

(5:322) set variable # to the current hour FST (Furcadia Standard Time in twenty-four hour format).

(5:323) set variable # to the current minute FST (Furcadia Standard Time).

We can name these variables what they will represent, which is information about what hour the time currently is, and what minute the time currently is. And so, for the first one, change the # to %hour, and the second one change # to %minute.

The next two effects are both the same line repeated, but with different inputs for the #'s.

(5:433) jump the animation of DragonSpeak Button # to step # for everyone in the Dream.

(5:433) jump the animation of DragonSpeak Button # to step # for everyone in the Dream.

The idea is to have the DS button move to the animation step that reflects whatever our variable %hour says the the current hour is, and then we want to stop the animation until we get an update the next second, as it might be time to change it again.

That will take two effect DS lines to do. For the first copy of this line, we're going to change the very first # to 1, since DS button 11 shows the hour. The second # in this line we're going to change to %hour so it'll set it to whatever the number the variable is at.

And for the second copy of this line, we're going to change the first # to 11 again, but this time the second # is going to be 24, since it's the step in the animation that stops the frame.

Now that we've set up the hour button, it's time to address the minutes. We've been keeping track of the %minute information, but since (if you remember), we set up our DS buttons to have two slots for representing the minutes, we need to keep track of those slots individually. The next line has a lot of of places to input numbers and variable names, but we'll break it down:

(5:308) divide variable # by # and put the remainder in variable #.

What we're going to do here is set it up to divide variable %minute by 10, and put the remainder in variable %minute.y. To do this the very first # is going to be %minute, and the second one will be 10. It'll read divide variable %minute by 10, then the very last one change the # to %minute.y. It will put the remainder value inside variable %minute's y value. The way this works is if the time was 10:13, it would take 13 divide by 10. Since 10 goes into 13 1 time, it sets variable %minute to 1, and the remainder, which is the leftover amount (3), goes to variable %minute.y.

Adding in the last 4 effects should be something you're familiar with. It's very similar to what we did for the hours above, but this time the values have changed. There's going to be 4 copies of this line:

(5:433) jump the animation of DragonSpeak Button # to step # for everyone in the Dream.

The first two will share the same button number like above. So let's change the first # on the very first two lines to 12. Now we have those two lines paired up. The second # in the first line is going to be the first minute variable which is %minute. On the second line, you're going to change the second # to 10, since 10 is the step that stops the animation, like before.

And now to finish up, the last two lines will also share a DS button, but this time the DS button number is 13. The first line's second # is %minute.y, while the very last line's # will be 10, just like above.

(0:100) When 1 seconds have passed, offset by 0, *Automatic Timer

(5:322) set variable %hour to the current hour FST (Furcadia Standard Time in twenty-four hour format). *Sets Hour

(5:323) set variable %minute to the current minute FST (Furcadia Standard Time). *Sets Minute

(5:433) jump the animation of DragonSpeak Button 11 to step %hour for everyone in the Dream. *Set Hour

(5:433) jump the animation of DragonSpeak Button 11 to step 24 for everyone in the Dream. *Stops Hour Frame

(5:308) divide variable %minute by 10 and put the remainder in variable %minute.y.

(5:433) jump the animation of DragonSpeak Button 12 to step %minute for everyone in the Dream. *Sets First Minute Slot Frame

(5:433) jump the animation of DragonSpeak Button 12 to step 10 for everyone in the Dream. *Stop First Minute Slot Frame

(5:433) jump the animation of DragonSpeak Button 13 to step %minute.y for everyone in the Dream. *Sets Second Minute Slot Frame

(5:433) jump the animation of DragonSpeak Button 13 to step 10 for everyone in the Dream. *Stop Second Minute Slot Frame

Fixing clicked display DS buttons

Now we're all done right? Let's see what happens when we click the numbers on the clock. Oh, the animation seems to reset. Well, we can fix this by creating one more DS button!

This button needs to be:

• made transparent.. anything from a border, to a screen with a glare, to even a layer that is barely visible
• shown when someone enters the Dream
• sized to be the complete size of the clock (or it can be bigger if needed, just not smaller)
• positioned over the clock, by making sure the position for the overlay is actually higher than the clock position inside the Skin Editor (Note: Back, Middle Front Positions, Not X, Y)

Make sure the clicked frame of this second button is the exact same, so it doesn't change when clicked (unless that is what you desire to do with your design).

You now have a fully functioning clock made of DS buttons! (Note: With this specific set of triggers, the additional button for the overlay isn't necessary because the frames refresh each second, however it's a nice trick for effects like this that refresh at a lower rate, or change less often.)