Make a frame fade with the default roblox chat?

I have an auto-fill system for the chat, and it creates a scrolling frame and moves it below the chat bar.

One error with it though, is that the buttons and scrolling frame don’t fade away with the chat.

This makes it look really weird in game, there’s just a floating button and scrolling frame on your screen
Here’s a video of it:

This is the code for the auto-fill system, it’s in a local script inside StarterCharacterScripts:

local Player = game.Players.LocalPlayer
local Char = Player.Character
local Playerui = Player.PlayerGui
local ChatBar = Playerui:WaitForChild("Chat").Frame.ChatBarParentFrame.Frame.BoxFrame.Frame.ChatBar

local Stufftobesaid = {
	"Ignis",
	"Ignalucem",
	"Somnum",
	"Motus",
	"Ossox",
	"Doloris Inflicto",
	"Propelliatur",
	"Propelare",
	"Prohiberre",
	"Imperium Flactus Malleus",
	"Insanitare ",
	"Summonatur ",
	"Gustus",
	"Corpus Ascendo",
	"Absorbita Difforium",
	"Fractus",
	"Magicae exoquator, mortitalem calamactas. Exis exmagicae morelentum. Mortaliam brutus exoquisa. Nos viribus quo, solvos",
	"Show me, ",
	"Sanatus",

}

local TheTextHolderOriginal = Playerui:WaitForChild("Chat").Frame.ChatBarParentFrame.Frame
local TheTextHolder = Instance.new("ScrollingFrame", TheTextHolderOriginal)
TheTextHolder.Visible = false
TheTextHolder.ScrollingDirection = Enum.ScrollingDirection.XY
TheTextHolder.CanvasSize = UDim2.new(2, 0, 0, 0)
TheTextHolder.BackgroundTransparency = 1
TheTextHolder.Position = UDim2.new(0.04, 0, 0.55, 0)
TheTextHolder.Size = UDim2.new(0.9, 0, 0.4, 0)
TheTextHolder.ScrollBarThickness = 2
TheTextHolder.BorderSizePixel = 0

local UIListLayOut = Instance.new("UIListLayout", TheTextHolder)
UIListLayOut.VerticalAlignment = Enum.VerticalAlignment.Center
UIListLayOut.FillDirection = Enum.FillDirection.Horizontal
UIListLayOut.SortOrder = Enum.SortOrder.Name
UIListLayOut.Padding = UDim.new(0, 5)

local function onAutoFill()
	if ChatBar.Text:lower() ~= Stufftobesaid then
		TheTextHolderOriginal.Size = UDim2.new(1, 0, 1, 0)
		TheTextHolderOriginal.BoxFrame.Size = UDim2.new(1, -14, 1, -14)
		TheTextHolder.Visible = false
	end
	for i, v in pairs(TheTextHolder:GetChildren()) do
		if v:IsA("TextButton") then
			v:Destroy()
		end
	end
	for i, v in ipairs(Stufftobesaid) do
		if v:lower():sub(1, #ChatBar.Text:lower()) == ChatBar.Text:lower() and ChatBar.Text:lower() ~= "" then
			TheTextHolder.Visible = true
			TheTextHolderOriginal.Size = UDim2.new(1, 0, 1.8, 0)
			TheTextHolderOriginal.BoxFrame.Size = UDim2.new(1, -14, 0.6, -14)
			local button = Instance.new("TextButton")
			button.Parent = TheTextHolder
			--local Uicorner = Instance.new("UICorner", button)
			button.BackgroundTransparency = 0.5
			button.BackgroundColor = BrickColor.new("Black")
			button.Position = UDim2.new(0, 0, 0.5, 0)
			button.FontFace.Bold = true
			button.Size = UDim2.new(0, 110, -0.4, 35)
			button.TextColor3 = Color3.fromRGB(76, 76, 76)
			button.TextScaled = true
			button.Font = Enum.Font.Fantasy
			button.Text = v
			button.Activated:Connect(function()
				ChatBar.Text = v
				print(ChatBar.Text)
			end)
		elseif ChatBar.Text:lower() == ""  then
			TheTextHolder.Visible = false
			TheTextHolderOriginal.Size = UDim2.new(1, 0, 1, 0)
			TheTextHolderOriginal.BoxFrame.Size = UDim2.new(1, -14, 1, -14)
		end
	end
end

ChatBar:GetPropertyChangedSignal("Text"):Connect(onAutoFill)

You could just read the transparency value of with another :GetPropertyChangedSignal() and change everything in your ScrollingFrame to be transparent.

I just handled it by adding this to the end of your script.

local ChatFrame = Playerui:WaitForChild("Chat").Frame.ChatChannelParentFrame

function ChangeTransparency()
	local Transparency = ChatFrame.BackgroundTransparency
	TheTextHolder.ScrollBarImageTransparency = Transparency
	local TextHolderChildren = TheTextHolder:GetChildren()

	for Index, Item in TextHolderChildren do
		if Item:IsA("TextButton") then
			Item.Transparency = Transparency
			if Transparency == 1 then
				Item.Active = false
			else
				Item.Active = true
			end
		end
	end
	
	if Transparency == 1 then
		TheTextHolder.Active = false
	else
		TheTextHolder.Active = true
	end
	
end

ChatFrame:GetPropertyChangedSignal("BackgroundTransparency"):Connect(ChangeTransparency)

edit: Forgot to change the active state of the buttons, so they were clickable when transparent. Should be fixed now.

1 Like

Where do you put this in the script? After the last 3 ends or after the onAutoFill function?

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.