Hi, I'm here today to explain to you the usefulness of having custom in-game (or application) scrollbars ! There is a scrollbar object for MMF2 but it is the windows look- you can't change it, and the custom scrollbar for MMF 1.5 hasn't been ported, isn't vitalize compatible (or java) and has some very annoying bugs that would make your program look rather unprofessional.
Anyway, this guide will go through how to make a slider-dragging scrollbar with button, using only 4 actives and a quick-backdrop object. Create these, give them custom graphics of your choice (I will not be providing graphics :P) and name them appropriately, but if you will be copying the code from this example then you will want to use the same names as I have: "Scroll Top 1", "Scroll Bottom 1", "Scroll Button 1" and "Scroll Arrow 1". Name of quick backdrop does not matter.
So basically, you have the "Scroll Top 1" as the upper arrow (9x7 pixels for mine), "Scroll Bottom 1" as the bottom arrow (9x7) (I turned fine collision off for both to increase speed and area that they can be clicked), "Scroll Button 1" as the button that will be moving (9x9), the quick backdrop was placed behind these with a motif background (9x148) and the final "Scroll Arrow 1" as a single colour filled object to set the allowed drag area for the button (40x153) which is placed in the middle over everything.
Once you have this done, you will have something looking a tad bit like this:
I included both horizontal and veritcal scrollbars so show that you can use both in a very similar fashion, where the code differs it will be noted for which orientation is required. Now it is time to get onto the coding, so open the event viewer! Beware I coded all this in MMF 1.5 so things might not work in MMF2 (they should all work fine though) and any screenshots will not look the same as MMF2 so do not worry.
Make a new event, Start of frame and look at this little understanding part to know what each alterable value of the button will be storing:
So add these events to the event you just made (I won't copy and paste code yet, you can find the menus for these with each )
A = Start Y (or X)
B = Height (or length)
C = Current Set Value
D = Maximum Value
Now time make the buttons work so make events for both increase and decrease value actives being clicked and on the "Scroll Top 1" button add another event: Alterable Value C of "Scroll Button 1" > (Greater than) 0
Set Alterable Value A of "Scroll Button 1" to: Y (X for horizontal) of "Scroll Button 1"
Set Alterable Value B of "Scroll Button 1" to: Height of the backdrop, mine was 143
Set Alterable Value C of "Scroll Button 1" to: 0 (Starting value)
Set Alterable Value D of "Scroll Button 1" to: 5 (Number of values, remember 0 is a number so 5 means there are 6 values from 0-5)
And subtract 1 from the value of Alterable Value C of "Scroll Button 1".
For the other event add the extra event: Alterable Value C of "Scroll Button 1" < (Lower than) Alterable Value D of "Scroll Button 1"
And add 1 to the value of Alterable Value C of "Scroll Button 1", woo, the buttons will now work but nothing will happen because the movement isn't implemented yet! Add a run-loop action to both events that will run "Upd1" for once loop, this means the update code will not be repeated on all the events it is used on
Now to create the loop event! Make a new event: On loop "Upd1" and use this code:
So lets break this down, what does it actually do? Well, it sets the position to the starting position as noticed by the Alterable Value A part, and works out how many pixels down the current value is from the maximum value, and combines it with the size of the scrollbar with Alterable Value B, Simple!
Set Y (or X) Position of "Scroll Button 1" to: Alterable Value A( "Scroll Button 1" ) + ( Alterable Value B( "Scroll Button 1" ) / Alterable Value D( "Scroll Button 1" ) ) * Alterable Value C( "Scroll Button 1" )
Run the program and see what happens when you click the buttons, it should move the button well through 6 positions and not go above or below the set marks, if it does then you have not used the correct events, or you have not positioned the objects correctly.
Now comes the tricky part, adding drag-scrolling to the object...
Start by making the obvious condition: User clicks with left button on "Scroll Button 1" and from this event simply set the First Internal Flag of "Scroll Button 1" to be on (Used as the dragging-flag) and set Alterable Value E of "Scroll Button 1" to Alterable Value C of "Scroll Button 1", this will allow the replication of the scrollbar-trick where if you drag one and you leave the mouse too far while still holding the mouse button down, it will go back to the old value but moving the mouse back into range will put the current value back where the mouse is located!
Now add another event for "Repeat while left mouse-key is pressed" and negate it to have the cross next to it, and add a "Only one action when event loops" to stop it running all the time. This one events is global to all objects so if you create two scrollbars, add the code to this events, do not copy the event and change the coding for each individual object. Add these actions:
this stops the dragging when the user is no longer clicking.
Run loop "Upd1" 1 time
Set Internal Flag 1 of "Scroll Button 1" Off
Now to add the actual dragging events, it took me a long time to work out the mathematical calculations for these, guess I haven't done maths in a while lol. Create one event block with these conditions:
Copy and paste the event, negate the 2nd event for the "Scroll Arrow 1" object and add "Only one action while event loops" to the end of it. For actions on this events, we will revert the value to the old value before dragging started so add these actions:
Repeat while left-mouse button is clicked
+ Mouse Pointer is Over "Scroll Arrow 1"
+ Internal Flag 1 of "Scroll Button 1" is On
And now for the event created before this but not assigned anything yet, add these conditions:
Set Alterable Value C of "Scroll Button 1" to Alterable Value E of "Scroll Button 1"
Run loop "Upd1" 1 time
Which breaks down to the following: Get the mouse position, take away the starting Y position to get the frame position, adding 7 (Bug fix, without +7 it was out of place for me, you might not need it), times this by the maximum value and devide it by the size of the object, which will get the value that it is set to and then update the position.
Set Alterable Value C of "Scroll Button 1" to: ( ( YMouse - Alterable Value A( "Scroll Button 1" ) + 7 ) * Alterable Value D( "Scroll Button 1" ) ) / Alterable Value B( "Scroll Button 1" )
Run loop "Upd1" 1 time
Once again run the program to see a nice working scrollbar! Hope it was easy to understand, first article I have written and if it is anything like my college assignments then its probably full of bull... and 2000 words too long lol, any problems post below and I will see if I can help you out! Thanks