Tweenable Switch

Help and Feedback Scripting Support
#1

How hood I make a tweenable switch? Something like this preferably.

I think many of us have seen stuff like this before, however how would I actually make it?

2 Likes
#2

you could add a tiny frame then add ui corner for that frame then add a image button in the frame the tween the image button to the side when clicked

1 Like
#3

Let’s say I wanted to make a music switch like this, making it easier could I say something like;

if ImageButton.Position == ( ) then
—action here?

#4

And for the tween I would say;

local script.parent.MouseButton1DownClick:Connect(function()
— Tweens and stuff here

Correct?

#5

it is possible but i do think there is much cleaner way and ill show you one right now

#6

You can :TweenPosition(Udim2) the while part, and make the gray thing green. do a local variable that keeps track of switched on, or off. Do the according things based on the variable.

#7

There shouldn’t be “local” at the beginning. and make sure to put end) below da tweenz!!

#8

absolutely I remember the end, I forgot to remove the “local”

#9

the model i made long ago feel free to use it

#10

Works and looks like the image attached?

#11

You can add an TextButton (or ImageButton) and customize it.

local activated = false -- false is the default setting, you can change it if you want to
local button = script.Parent -- the button were using

button.MouseButton1Click:Connect(function() -- connect our event
activated = not activated -- for example sets true to false

if activated then -- is it activated
print('on')
-- tween the button's position using TweenPosition
else -- if not then
print('off')
-- same thing above
end
end)
1 Like
#12

its just a frame and a blank image label

1 Like
#13

Thank you for your help, I’ll try all replies ideas available.

#14

Thank you for your help, I’ll try this when I’m available.

#15 
local circle = script.Parent.Circle_goes_here;
local TS = game:GetService('TweenService');
local old_pos = circle.Position;
local new_pos = UDim2.new(x,0,y,0);
local enabled_bool = circle:FindFirstChild("Ebool");
circle.MouseButton1Click:Connect(function()
	circle.Ebool.Value = not circle.Ebool.Value;
end)
enabled_bool:GetPropertyChangedSignal("Value"):Connect(function()
	if enabled_bool.Value then
		local tween = TS:Create(circle,TweenInfo.new(length),{Position = new_pos});
		tween:Play();
		tween.Completed:Wait();
	else
		local tween = TS:Create(circle,TweenInfo.new(length),{Position = old_pos});
		tween:Play();
		tween.Completed:Wait();
	end
end)

(this is a localscript that has the same parent as the circle)

The circle must be either an ImageButton or a TextButton.

I wrote this whole thing in the devforum reply editor :\ (Don’t worry I also tested it in studio to make sure it works).

#16

Here is a basic UI switch I made, hope it works and is helpful!
Toggle UI.rbxm (5.2 KB)

#17

Doesn’t open in roblox studio.

#18

Download that file, go on a baseplate, right-click on StarterGUI in the explorer, and select the file.