Any ideas on how to create adjustable menu bars

Hi, i'm new to this forum & its my first post on it, i'm a student studying video games design in Dundalk institute of technology (DKIT) in ireland & am a beginner in using construct 2, i plan to keep using it & learn more about it once i have finished the course as it is an excellent program to use especially for a beginner like myself...

I have used the program over the last while to create prototypes for games projects etc, & am currently working on an assignment were i have to implement a basic menu style interface into a game prototype i created earlier in the year (start, options changing game settings, sound etc...

I have most of it working up to a certain point making sure buttons are working & linking to layouts & screens etc, but i am having trouble trying to figure out how to create an adjustable slider bar on one of the screens, a few examples are shown below...

<img src="http://excitedaboutgaming.files.wordpress.com/2013/05/menu-screen.jpg" border="0" />

<img src="http://excitedaboutgaming.files.wordpress.com/2013/05/slider-bar-1.png" border="0" />

<img src="http://excitedaboutgaming.files.wordpress.com/2013/05/slider-bar-2.png" border="0" />

<img src="http://excitedaboutgaming.files.wordpress.com/2013/05/slider-bar-3.png" border="0" />

<img src="http://excitedaboutgaming.files.wordpress.com/2013/05/slider-bar-4.png" border="0" />

I want each of the bars to increase & decrease once the buttons on either side have been pressed to adjust the volume levels of each option, i'm just not sure how to go about getting this to actually work,

I have tried creating the separate bar images as seen above & tried creating an animation to see if that would work, but not sure if i'm doing the right thing or not...

If anyone has any ideas's on this issue, it would be a great help

Thanks...

<img src="smileys/smiley4.gif" border="0" align="middle" />

Make a TiledBackground that is entirely green, then you can set its width to the size you want the bar to be. Eg:

Press button "plus"

• Set TiledBg width: TiledBg.width+1

Then limit the size:

TiledBg.width > 200

• Set TiledBg width: 200

Thanks i have used ur idea & it works great, just having a slight problem,

i have it set to position that when the bar reaches the end it stops & i can press the - button to decrease the bar to the end, but then once the bar reaches the start point again & when i press the - button again & then go to press the + button nothing happens, luckily i can press the back button to move to a previous screen & go back in again & everything is reset... not sure how to solve this,

thanks again... its been a massive help... <img src="smileys/smiley4.gif" border="0" align="middle" />

• Set TiledBg width: clamp(TiledBg.width + 1, minWidth , maxWidth)

and for the lower

• Set TiledBg width: clamp(TiledBg.width - 1, minWidth , maxWidth)

clamp(x, lower, upper) is by the far the easiest way to handle return of lower and upper limitations.

however, i'm surprised your buttons to change your slider. I always found it to be more intuitive to use a drag model.

for simple sample this assumes that all your objects center points are on the left side rather than the center. also the sample uses touch, but you can use mouse. However, I find touch to be a lovely action for when the mouse is being pressed anyways :)

give the dragborder/box the variable touchid and set default to -1

dragborder.touchid = -1

when the touch or mouse is on the meter frame

onTouch dragborder

-- dragborder = touch.touchid

while the right touch id is touching the screen

isTouching

dragborder.touchid = touch.touchid

-- meterbar.width = clamp(touch.x, dragborder.x, dragborder.x + dragborder.width)

--meterbar.value = (meterbar.width / dragborder.width) * 100

when the touch event is released

on any touch end

dragborder.touchid = touch.touchid

-- dragborder.touchid = -1

-- meterbar.value = meterbar.value = (meterbar.width / dragborder.width) * 100