Here is a simple example that creates an object with 5 button parts, clicking on each one animates it (and that's it!). For this we'll use the sprite file called 'EggLayer.c16' - open it up in SpriteBuilder and follow the example.
| Code | Explanation |
| *****the display part | |
| new: comp 3 3 1234 "egglayer" 10 17 9000 | Create a new Compound Object with a classifier of 3 3 1234. Use 10 images from the sprite file 'egglayer' - these 10 images start at sprite number 17. The image plane for this agent is 9000. |
| attr 32 | Make the object a floating object |
| *red button | |
| pat: butt 1 "egglayer" 18 2 112 30 0 [] 1000 0 | Create part 1 - a button part. Use 'egglayer' sprite file starting at frame number 18, and use 2 images. Offset the button to position (112,30) relative to part 0. Relative plane is 0. There is a hover animation for this part - which uses pose 1. Clicking on this part will trigger event 1000, and the button can be clicked on anywhere. |
| part 1 | This sets the animation to return to when anim_hover is no longer needed. |
| anim [0] | |
| *green button | |
| pat: butt 2 "egglayer" 20 2 114 54 0 [] 1001 0 | Create part 2 - a button part. Use 'egglayer' sprite file starting at frame number 20, and use 2 images. Offset the button to position (114,54) relative to part 0. Relative plane is 0. There is a hover animation for this part - which uses pose 1. Clicking on this part will trigger event 1001, and the button can be clicked on anywhere. |
| part 2 | This sets the animation to return to when anim_hover is no longer needed. |
| anim [0] | |
| *yellow button | |
| pat: butt 3 "egglayer" 22 2 13 83 0 [] 1002 0 | Create part 3 - a button part. Use 'egglayer' sprite file starting at frame number 22, and use 2 images. Offset the button to position (13,83) relative to part 0. Relative plane is 0. There is a hover animation for this part - which uses pose 1. Clicking on this part will trigger event 1002, and the button can be clicked on anywhere. |
| part 3 | This sets the animation to return to when anim_hover is no longer needed. |
| anim [0] | |
| *male button | |
| pat: butt 4 "egglayer" 24 2 75 53 0 [] 1003 0 | Create part 4 - a button part. Use 'egglayer' sprite file starting at frame number 24, and use 2 images. Offset the button to position (75,53) relative to part 0. Relative plane is 0. There is a hover animation for this part - which uses pose 1. Clicking on this part will trigger event 1003, and the button can be clicked on anywhere. |
| part 4 | This sets the animation to return to when anim_hover is no longer needed. |
| anim [0] | |
| *female button | |
| pat: butt 5 "egglayer" 26 2 76 33 0 [] 1004 0 | Create part 5 - a button part. Use 'egglayer' sprite file starting at frame number 26, and use 2 images. Offset the button to position (76,33) relative to part 0. Relative plane is 0. There is a hover animation for this part - which uses pose 1. Clicking on this part will trigger event 1004, and the button can be clicked on anywhere. |
| Part 5 | This sets the animation to return to when anim_hover is no longer needed. |
| anim [0] | |
| flto 300 200 | Float the agent to position (300,200) |
You can download this COS file at the end of this article.
Ok, important things to note here:
anim_hover -
This is stated at the creation of the button part - and specifies the animation to play whenever the mouse pointer is over the button.
When the hand moves off of the button though the button carries on with the animation it was playing before the anim_hover was triggered. For this reason you will need to give the button part an animation at creation - otherwise the button will not know which animation to play. This is why each button part has an animation specified for it - but in this case the animation is in fact a static frame (anim [0]).
Button parts are different from DULL parts in that you *do* specify the number of images to use.
The last parameter allows you to specify whether you only want events triggered when a non-transparent part of the button is pressed. This can be useful if you are using a sprite with a large area (maybe because the drawing of the button itself is an irregular shape) and only want the image of the button to trigger an event rather than the whole area of the sprite.
Because this is a floating object it will stay in the viewport wherever you scroll - when you want to remove it just use the remove script part of the COS file.
If you inject this as it stands (with no event scripts) you will see that it creates a display floating on screen ... and if you move the mouse over any of the buttons they will light up (don't click on them yet). When you move the mouse away from the button it return to it's unlit state.
At this point you can try altering the anim_hover part and make a more complex animation (such as [0 1 0 1 0]) - or try removing the default animation specified for each button (anim [0]) and see how that affects the buttons when you move the mouse over them.
We'll add some simple event scripts now ... one for each of the buttons.
| Code | Explanation |
| scrp 3 3 1234 1000 | This marks this as being the script for event 1000 |
| part 1 | Animates the button, and waits for it to finish before carrying on. |
| anim [0 1 0 1 0 1 0] | |
| over | |
| anim [0] | This bit will make sure that anim_hover knows which animation to play when anim_hover has finished. |
| endm | |
| ********************* | |
| scrp 3 3 1234 1001 | This marks this as being the script for event 1001 |
| part 2 | Animates the button, and waits for it to finish before carrying on. |
| anim [0 1 0 1 0 1 0] | |
| over | |
| anim [0] | This bit will make sure that anim_hover knows which animation to play when anim_hover has finished. |
| endm | |
| ********************* | |
| scrp 3 3 1234 1002 | This marks this as being the script for event 1002 |
| part 3 | Animates the button, and waits for it to finish before carrying on. |
| anim [0 1 0 1 0 1 0] | |
| over | |
| anim [0] | This bit will make sure that anim_hover knows which animation to play when anim_hover has finished. |
| endm | |
| ********************* | |
| scrp 3 3 1234 1003 | This marks this as being the script for event 1003 |
| part 4 | Animates the button, and waits for it to finish before carrying on. |
| anim [0 1 0 1 0 1 0] | |
| over | |
| anim [0] | This bit will make sure that anim_hover knows which animation to play when anim_hover has finished. |
| endm | |
| ********************* | |
| scrp 3 3 1234 1004 | This marks this as being the script for event 1004 |
| part 5 | Animates the button, and waits for it to finish before carrying on. |
| anim [0 1 0 1 0 1 0] | |
| over | |
| anim [0] | This bit will make sure that anim_hover knows which animation to play when anim_hover has finished. |
| endm |
Things to note:
Again, there are some commands specifically to make sure that anim_hover does what we want when the mouse moves away from the button. Try removing the anim [0] line from each event, clicking on the buttons and see what happens then. You should find that anim_hover works as normal, that is the button will light whenever the hand is over it, but if you remove the hand the button will now animate rather than just go out. This is because the previous animation that the button played was from the event script (the anim [0 1 0 1 0 1 0]) - and so this is used.
Of course, this example is fairly trivial but does show you how to use buttons to trigger events!