User Tag List

Results 1 to 7 of 7

Thread: Custom Scrollbar

  1. #1
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Jul 2006
    Posts
    2,023
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom Scrollbar

    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:
    Code:
    A = Start Y (or X)
    B = Height (or length)
    C = Current Set Value
    D = Maximum Value
    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 )
    Code:
    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)
    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
    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:
    Code:
    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" )
    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!

    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:
    Code:
    Run loop "Upd1" 1 time
    Set Internal Flag 1 of "Scroll Button 1" Off
    this stops the dragging when the user is no longer clicking.

    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:
    Code:
    Repeat while left-mouse button is clicked
    + Mouse Pointer is Over "Scroll Arrow 1"
    + Internal Flag 1 of "Scroll Button 1" is On
    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:
    Code:
    Set Alterable Value C of "Scroll Button 1" to Alterable Value E of "Scroll Button 1"
    Run loop "Upd1" 1 time
    And now for the event created before this but not assigned anything yet, add these conditions:
    Code:
    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
    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.

    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

  2. #2
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Jul 2006
    Posts
    2,023
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Custom Scrollbar

    OK take it no one can be the slightest bit arsed to read thru all that haha, worth putting an example up?

  3. #3
    No Products Registered

    Join Date
    Feb 2007
    Location
    Sydney, Australia
    Posts
    1,654
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Custom Scrollbar

    Haha I just realized you were the same person who wrote the article when you said that.

    Yes, an example will be worth it.

    To make it better, please comment on the example!

  4. #4
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Jul 2006
    Posts
    2,023
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Custom Scrollbar

    OK will do when I've finished the big part of this major security app, might take a few days

  5. #5
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Jul 2006
    Posts
    2,023
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Custom Scrollbar

    OK done the example but noticed somethings errr very wrong... If you change the maximum value (Value D) to like 400 it won't work and even on 200 it doesn't go right, so ignore the first scrollbar on the left as I was using it for testing, with small number the scrollbars work fine, hummm if someone wants to fix my dodgy coding :P
    Attached files Attached files

  6. #6
    No Products Registered

    Join Date
    Feb 2007
    Location
    Sydney, Australia
    Posts
    1,654
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Custom Scrollbar

    Thats a very nice example! Thank you for posting, it can be very helpful to me later

  7. #7
    No Products Registered

    Join Date
    Aug 2006
    Location
    The Netherlands
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Custom Scrollbar

    I actually like the default Windows scrollbar. It makes your application more consistent when you change visual styles, instead of ending up with programs that want to do everything by themselves and look bad in the process (Windows Live Messenger is an example)

    For games however custom scrollbars are better, so it matches the overall feel of the game.

    I also vote for an example file

    EDIT: Disregard that, I'm slow.

Similar Threads

  1. scrollbar.mfx
    By dascribe in forum Multimedia Fusion 2 - Technical Support
    Replies: 3
    Last Post: 27th April 2010, 10:08 PM
  2. Custom scrollbar object
    By tourmaline in forum Multimedia Fusion 2 - Technical Support
    Replies: 7
    Last Post: 14th August 2008, 06:33 PM
  3. Custom scrollbar for the list object
    By Sphax in forum Widgets
    Replies: 1
    Last Post: 31st July 2008, 01:41 PM
  4. custom scrollbar
    By imothep85 in forum File Archive
    Replies: 0
    Last Post: 2nd March 2008, 10:56 AM
  5. custom scrollbar mmf2
    By imothep85 in forum Extension Developers Lobby
    Replies: 3
    Last Post: 2nd March 2008, 10:48 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •