Buttons in Fuzize, are actually just images with a function, what is used when they are clicked, tapped, pressed or holded. Today we're gonna learn, how to use a button in Fuzize and how is a custom function works! Let me show you in the next, simple example
1. \\program:=button\..
2. \\log:=1\..
3.
4. STRT
5.
6. button.img;
7. set.button.img.costume.value:={'C:\Users\John Doe\Pictures\button.jpg'};
8. set.button.img.visible:=true;
9.
10. ALWAYS
11.
12. if.(button.img=clicked=true)thando:=
13. write:=('Hello world!');
14. elsedo:=
15. donothing;
16.
17. noSTP
18.
10. STP
As you can see, I used a lot of new command in this code, so let's see what are they doing! First of all, as you can see, and as I said, the button is actually an image, in this case button.img again. This image having a costume , in this case button.jpg . After we placed the button on the screen, we had to add the function, or functions of the button. Firstly, I used ALWAYS , what is a new command. This command not needed to be closed yet, because the ending of it will be noSTP in every case! This means, what is between the ALWAYS and the noSTP commands, that happens forever. So if the code could looks like this
1. ALWAYS
2.
3. write('Hello world!');
4.
5. noSTP
this could means, the screen is changelessly writes "Hello world!" and it's repeats while the program is running. So if you never stop the program, the "Hello world!" text will be shown forever. So, back to the button program! The first code inside ALWAYS is starts with if . When we using if command, we had to know the three output of that:
IF
ELSEIF
ELSEDO
And as closing:
THANDO
Now, as we know that, we can continue the command. Now, if we use if command, that means we want to attach a command to a condition. After the if command, we had to place a dot, because else the condition means nothing. That means "If nothing happens than do this: CONDITION, else do this: SOMETHING ELSE!". After we placed that, we can write the condition of the action. Place it between ( and ) . The condition in our case is "If this image clicked" so we write it down like this in code: button.img=clicked=true , that means, if button is really clicked as we wrote, so clicked=true , than complete the action! After we closed the condition we continue the code with thando:= , what means than do. It's easy and self-explanatory. Now the action. In this case, the action is write('Hello world!'); . After this, if we don't want anything else as action and if we don't have any other condition we write elsedo:= what means else do. (Well, that's also an easy one.) Now we write what happens if the condition is not happens. If we don't want any actions to do, just write donothing; , as I did. Never leave the line under elsedo:= empty, because the program thinks there is a command and it will try to complete it. But empty is not a command, so it will be an error! After all, as I wrote before, we had to close the ALWAYS cycle with a command, noSTP . After we did this, we can continue the code as we want. The ALWAYS cycle is super easy. Just like button using!
Today we learnt about adding buttons in Fuzize, and also how to use ALWAYS cycle and if-than-else commands in a Fuzize code. As I wrote in the top of the lesson, it is super easy, but it effective and interactive! TIP: Try to add other conditions to a simple if-than-else code!
The program generates an objects, what is actually an image, what we call button. If the button clicked, a text showing Hello world!. Else not. It's the first user input what is adding some interaction to our programs!
To make buttons with single-conditions in our program is useful and effective and also fun. But what if I want to add more conditions (multi-condition) to a button in the if-than-else command? That's what we will check in the next example! Also we check how to change a button's costume, when it is clicked or the brightness when the cursor is hover on this.
1. \\program:=button\..
2. \\log:=1\..
3.
4. STRT
5.
6. button.img;
7. pic.img;
8. visible.var;
9. set.invisible.var:=0;
10. set.button.img.costume.value:={'C:\Users\John Doe\Pictures\button.jpg'};
11. set.button.img.visible:=true;
12. set.pic.img.costume.value:={'C:\Users\John Doe\Pictures\image.jpg'};
13. set.pic.img.visible:=false;
14.
15. ALWAYS
16.
17. if.(button.img=touching=cursor=true)thando:=
18. set.button.img.costume.value:={'C:\Users\John Doe\Pictures\button1.jpg'};
19. elseif.(button.img=clicked=true)thando:=
20. set.button.img.costume.value:={'C:\Users\John Doe\Pictures\button2.jpg'};
21. elsedo:=
22. set.button.img.costume.value:={'C:\Users\John Doe\Pictures\button.jpg'};
23.
24. if.(button.img=clicked=true)thando:=
25. if.(visible.var=1)thando:=
26. set.pic.img.visbile:=true;
27. set.visible.var:=0;
28. elsedo:=
29. set.pic.img.visible:=false;
30. set.visible.var:=1;
31. elsedo:=
32. donothing;
33.
34. noSTP
35.
36. STP
Now than, if you write it down and make a test, you should see many differences between this and the earlier code. This program have two images, one of them if a button. The second one is invisible. If the button clicked, the invisible one will be shown as visible image. If you click the button again, the image will be hide as invisible image again! This is a simple but effective program!