REAL Scroll Bar for any Layout Size

2

Attached Files

The following files have been attached to this tutorial:

.capx

scroll-bar.capx

Download now 175.95 KB

Stats

3,247 visits, 4,378 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 10 Dec, 2018. Last updated 19 Feb, 2019

First of all, create a sprite with the dimensions 10 x 80, or larger if you prefer, and the color of your preference too, and put the behavior of drag'n drop.

This example takes the name of "scroll_bar".

Put your axes to just vertical:

After that create a layer so that it stays above all the others and seven without paralax like 0, for both X and Y and put the "scroll_bar" sprite on it.

Add the mouse plugin and create this condition:

With it, when you start all the scroll sprite will move to its proper place.

Now create these two conditions for the mouse:

See that you do not need to configure anything, it auto adjusts for each layout size, the value 100 in the condition is the amount in pixels that the scroll will scroll on the scroll screen with the mouse.

On mouse wheel up:

"scroll_bar.Y-(((100100)/LayoutHeight)/100)OriginalWindowHeight"

On mouse wheel down:

"scroll_bar.Y+(((100100)/LayoutHeight)/100)OriginalWindowHeight"

And now make this condition:

You can use "every tick" or "every x sec" with dt, it makes no difference.

This condition will convert the position in the screen of the sprite "scroll_bar" to the position that the scroll of the layout must be move according to the position of "scroll_bar", since it is in a layer where its parallax is 0,0:

"(((scroll_bar.Y100)/OriginalWindowHeight)/100)(OriginalWindowHeight*(LayoutHeight/OriginalWindowHeight-1))+(OriginalWindowHeight/2)"

And finally limit how far the "scroll_bar" can go for drag'n drop to run smoothly:

"clamp(scroll_bar.y, 0, OriginalWindowHeight)".

In the end it should look something like this:

In this example for my day-to-day I create a separate event sheet with all these conditions and for each layout I only care, since it auto adjusts to any layout size, it's very simple, just import the event sheet, create the layer with 0,0 paralax and copy the sprite.

For those who want to access github and give a star to help: github.com/Bestfastfire/scrollbar_construct2

Here at the end I leave the capx with an explanation in both English and Portuguese.

If this tutorial is well evaluated I will do a teaching how to upload any file to your server in php or another, without any hassle of transforming image into base64 or something, it is for any kind of file even, the right way with Filechooser, AJAX and js. vlw

.CAPX

scroll-bar.capx

Download now 175.95 KB
  • 3 Comments

  • Order by
Want to leave a comment? Login or Register an account!