Frame

Frame.Style

The below example would print "Part is now a child of Model".


Instance.AncestryChanged

child

parent

Instance.AttributeChanged

attribute

This sample demonstrates the subtleties of the Changed event on normal objects
and "-Value" objects.


This code sample demonstrates the Changed event firing within a parent object.


Instance.Changed

property

This snippet prints the names of objects as they are added to the Workspace:


Instance.ChildAdded

This snippet prints the names of objects as they are removed from the
Workspace:


Instance.ChildRemoved

This following example will print the name of any object that is added to the
Workspace:


Instance.DescendantAdded

descendant

The following example prints the name of any descendant as it is being removed
from the Workspace:


Instance.DescendantRemoving

This sample demonstrates how an Instance being destroyed remains in place
until the connected function yields.


Instance.Destroying

Instance.childAdded

This example creates a Part and adds a few sparkle objects to the part. Then
it calls Part:ClearAllChildren() to remove all of the children.


Instance:ClearAllChildren

This code first references an existing object in the `original` variable.
Then, it makes a copy of the object, sets the parent to that of the original,
and finally moves the copy to (0, 50, 0).


Instance:Clone

Instance:Destroy

Instance:FindFirstAncestor

name

Instance:FindFirstAncestorOfClass

className

Instance:FindFirstAncestorWhichIsA

The below would look in Workspace for an object name "Brick". If found, it
will change the name of the object to "Foo".


Instance:FindFirstChild

recursive

Instance:FindFirstChildOfClass

Instance:FindFirstChildWhichIsA

Instance:FindFirstDescendant

Instance:GetActor

Instance:GetAttribute

Instance:GetAttributeChangedSignal

Instance:GetAttributes

The below would print the name of all objects currently in Workspace when ran.


Instance:GetChildren

Instance:GetDebugId

scopeLength

GetDescendants is often used to do something to all the descendants that are a
particular type of object. The code in this example uses GetDescendants and
`Class.Instance:IsA()` to find all of the parts in the workspace and turns
them green.


Instance:GetDescendants

This code sample demonstrates the behavior of `Class.Instance:GetFullName()`.
It shows how the function behaves when called on an object not in the
`DataModel` hierarchy, and it also shows how the return value does not escape
special characters.


This code sample re-implements the `Class.Instance:GetFullName()` function in
Lua.


Instance:GetFullName

This code sample demonstrates how to save a value before a changed event fires
on it in order to get more information about a change.


This code sample demonstrates the equivalence of the `Changed` event and event
returned by `GetPropertyChangedSignal`.


Instance:GetPropertyChangedSignal

Instance:IsA

Instance:IsAncestorOf

Instance:IsDescendantOf

ancestor

The following code demonstrates how a part can be re-added to the DataModel
after being removed:


Instance:Remove

Instance:SetAttribute

value

The following code waits for an instance named "Part" to be added to
Workspace.


Instance:WaitForChild

childName

timeOut

Instance:children

Instance:clone

Instance:destroy

Instance:findFirstChild

Instance:getChildren

Instance:isA

Instance:isDescendantOf

Instance:remove

Instance

Instance.Archivable

Instance.ClassName

Instance.DataCost

Instance.Name

Instance.Parent

Instance.RobloxLocked

Instance.SourceAssetId

Instance.archivable

Instance.className

The below example assumes it's within a GuiObject such as a `TextButton`, and
that the `Class.GuiObject.Draggable` property is set to true. It will print
the UDim2 of where the player started dragging the object from.


GuiObject.DragBegin

initialPosition

The below example assumes it's within a GuiObject such as a `TextButton`, and
that the `Class.GuiObject.Draggable` property is set to true. It will print
the X and Y of where the player stopped dragging the GUI. For example, if the
player were to stop dragging the object at 189, 180 the below would print The
player stopped dragging the GuiObject at (189, 180)


GuiObject.DragStopped

The following example demonstrates one of many usage examples of handling user
input from InputBegan depending on its type.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


GuiObject.InputBegan

input

The following example demonstrates one of many usage examples of handling user
input from InputChanged depending on its type.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


GuiObject.InputChanged

The following example demonstrates one of many usage examples of handling user
input from InputEnded depending on its type.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


GuiObject.InputEnded

The following example prints the mouse location, in pixels, when it enters GUI
element.


The code sample below creates a GUI `Frame` that acts as a canvas that can be
drawn on and cleared.

It uses two `UserInputService` events, `Class.UserInputService.InputBegan` and
`Class.UserInputService.InputEnded` to determine when the user's left mouse
button is down. These events set the `hold` variable so that the `paint`
function only draws a new pixel if the user's left mouse button is pressed.

When the user's mouse moves on the canvas, the pointer GUI moves to follow the
mouse and, if the `hold` is true, clones the pointer to draw a new pixel onto
the canvas at the pointer's location. The pointer's visibility is set to false
when the mouse exits the GUI and to true when the mouse enters the GUI.

Pressing the clear button destroys all Canvas children named "Pixel" to clear
the canvas.

![Canvas GUI Demonstration](/assets/legacy/CanvasGuiDemo.gif)

![Gui in Studio Explorer](/assets/legacy/CanvasGuiExplorer.png)


GuiObject.MouseEnter

GuiObject.MouseLeave

GuiObject.MouseMoved

The example below creates a custom scrolling frame using a `Frame` to mimic a
`ScrollingFrame` using the `Class.GuiObject.MouseWheelForward` and
`Class.GuiObject.MouseWheelBackward`.

The example works by moving a Frame that is the child of our
**CustomScrollingFrame** and parent to the `TextBox|TextBoxes`. Thus, we use a
Frame to act as a container for the GUI elements we want to scroll. The script
adjust's the `Datatype.UDim2` **Y** scale position of the Frame between 0 and
-1 when the user scroll's their mouse forward and backward to mimic the
scrolling of a traditional ScrollingFrame element.

Although this is a simple application of the MouseWheel events, it can be
expanded upon for more complex `GuiObject|GUI` layouts and interaction such as
custom ScrollingFrames that scroll at different rates or with different
elasticity.

The gif below demonstrates the expected functionality of the code based on the
GUI layout also shown below.

![Code sample demonstration](/assets/legacy/CustomScrollingFrameDemo.gif)

![GUI Layout in Studio Explorer Window](/assets/legacy/Screen_Shot_2018-09-11_at_10.21.41_PM.png)


GuiObject.MouseWheelBackward

GuiObject.MouseWheelForward

The following example prints a message when the user selects the object with a
gamepad.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


GuiObject.SelectionGained

The following example prints a message when the element has its focus lost on
a gamepad.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


GuiObject.SelectionLost

This code sample allows the player to manipulate the screen position of some
UI element, like a `Frame`, by holding down on the UI element for a brief
moment. Then, the player moves their finger and releases. During the gesture
the Frame is colored blue with a white outline.


GuiObject.TouchLongPress

touchPositions

state

This code sample is meant to be placed in a `LocalScript` within an inner
`Frame` that is inside an outer `Frame`, or other `GuiObject`. It allows the
player to manipulate the position of the inner frame by moving their finger on
the outer frame.


GuiObject.TouchPan

totalTranslation

velocity

This code sample is meant for a `LocalScript` within an inner `Frame` that is
inside an outer `Frame`, or other `GuiObject`. It allows the player to scale
the inner frame by performing a `Class.GuiObject.TouchPinch` gesture on the
outer frame.


GuiObject.TouchPinch

scale

This code sample is meant for a `LocalScript` within an inner `Frame` that is
inside an outer `Frame`, or other `GuiObject`. It allows the player to rotate
the inner frame by performing a `Class.GuiObject.TouchRotate` gesture on the
outer frame.


GuiObject.TouchRotate

rotation

This code sample will cause a `Frame` (or other `GuiObject`) to bounce when a
swipe gesture is performed on a touch-enabled device (or Studio's emulator).
Horizontal swipes will change the hue of the
`Class.GuiObject.BackgroundColor3`, while vertical swipes will change the
saturation.


GuiObject.TouchSwipe

swipeDirection

numberOfTouches

This code sample will toggle the `Class.GuiObject.BackgroundTransparency` of a
UI element, like a `Frame`, when it is tapped on a touch-enabled device.


GuiObject.TouchTap

This code sample demonstrates a more involved usage of TweenPosition by
detecting when the tween completes/cancels by defining a callback function. It
also prints whether the tween will play.


GuiObject:TweenPosition

endPosition

easingDirection

easingStyle

time

override

callback

This code sample demonstrates the usage of the `Class.GuiObject:TweenSize()`
function. It initiates an animation on the parent's `Class.GuiObject.Size`
property to `UDim2.new(0.5, 0, 0.5, 0)`, which is half the `GuiObject`'s
parent size on both axes.

Additionally, it demonstrates how the callback parameter can be used to detect
when the tween stops (whether it was cancelled by another tween or completed).


GuiObject:TweenSize

endSize

The below example would tween a `Class.Frame` to the top left of the parent's
size and resize it down to 0.


GuiObject:TweenSizeAndPosition

GuiObject

This code sample demonstrates the usage of the Active property as a debounce
for the Activated event.


GuiObject.Active

This code sample moves a UI element to different sides of the parent element.
It starts at the top-left and ends at the bottom-right. Paste into a
LocalScript in a Frame, within a ScreenGui.


GuiObject.AnchorPoint

The following script creates an automatically-sized parent frame with
a`UIListLayout`, then it inserts several automatically-sized `TextLabel`
objects. Note how the parent `UIListLayout` automatically resizes to fit its
child content and the labels automatically resize to fit their text content.
This script can be parented to a `ScreenGui`.


GuiObject.AutomaticSize

GuiObject.BackgroundColor

This code sample causes a parent Frame to loop through all colors of the
rainbow using Color3.fromHSV.


GuiObject.BackgroundColor3

The example below demonstrates how to continuously fade a GUI element in and
out (see image below). It relies on the
`Class.RunService.RenderStepped|RenderStepped` event to update and render the
element's `Class.GuiObject.BackgroundTransparency` every frame.

The GUI element fades in and out between the maximum transparency value,
`MAX_TRANSPARENCY`, and minimum transparency value, `MIN_TRANSPARENCY`. It
uses the `delta` variable to determine what amount to change the element's
BackgroundTransparency.

This example should work as expected when placed in a `Script` or
`LocalScript` that is the child of the GUI element you want to fade in and
out.

![GUI Element Fading In and Out](/assets/legacy/GuiObject_Fading_In_and_Out.gif)


GuiObject.BackgroundTransparency

GuiObject.BorderColor

This code sample causes the border of a parent GuiObject to highlight when the
user hovers their mouse over the element.


GuiObject.BorderColor3

GuiObject.BorderMode

GuiObject.BorderSizePixel

GuiObject.ClipsDescendants

GuiObject.Draggable

This code sample demonstrates sorting data using
`Class.UIGridStyleLayout.SortOrder` and `Class.GuiObject.LayoutOrder`.


This example uses LayoutOrder within a UIGridLayout to change the order of
images.


GuiObject.LayoutOrder

This example demonstrates how to enable Gamepad navigation through a grid of
`GuiObject|GUI` elements without manually having to connect the
`Class.GuiObject.NextSelectionUp`, `Class.GuiObject.NextSelectionDown`, and
`GuiObject|NextSelectionRight`, and `Class.GuiObject.NextSelectionLeft`
properties for every element in the grid.

Note that this code sample assumes your `UIGridLayout` is sorted by
`Class.UIGridLayout.SortOrder|name`, where elements are named in successive
numerical order (see image below).

![UIGridLayout Sorted By Name](/assets/legacy/Screen_Shot_2018-09-15_at_5.41.52_PM.png)

The code relies on this to set the NextSelection properties for all
`GuiObjects` in the same level as the UIGridLayout. In our example, the
UIGridLayoutObject and GUI elements within the grid are all children of a
`Frame` named _"Container"_. The code
`Class.Instance:GetChildren()|gets the children` of _"Container"_ and loops
through each child. Children that are not GuiObjects are ignored. For each GUI
element, the code attempts to assigned the NextSelection properties using the
following logic:

1. Starting with 1, the name of all GUI elements match their position in the
   grid
2. Left: The item to the left will always be numbered 1 less than the current
   element
3. Right: The item to the left will always be numbered 1 more than the current
   element
4. Up: The item above (up) will always be number of GUIs in a row 1 less than
   the current element
5. Down: The item below (down) will always be the number of GUIs in a row more
   than the current element This logic also allows for the GUI elements at the
   begging and end of rows (excluding the first and last element) to wrap
   around to the next and previous rows. If an element doesn't exist to the
   left, right, up, or down, the NextSelection will remain nil and moving the
   Gamepad selector in the direction will not change the selected GUI.

This example also contains code to test the grid using the arrow keys (Up,
Down, Left, Right) of your keyboard instead of a gamepad, just in case you
don't have a gamepad to test with. This portion of code initially selects the
element named _"1"_ by assigning it to the `Class.GuiService.SelectedObject`
property.

![Grid Demonstration Gif](/assets/legacy/NextSelectionGridGif.gif)


GuiObject.NextSelectionDown

GuiObject.NextSelectionLeft

GuiObject.NextSelectionRight

GuiObject.NextSelectionUp

This code sample moves a GuiObject in a circle within its parent object using
RunService's BindToRenderStep. It defines a parametric equation in a function
to help with positioning the GuiObject.

To try this code out, put a ScreenGui in the StarterGui. Inside the ScreenGui,
insert a Frame with a LocalScript. Paste this code into the LocalScript, then
play the game. Watch the Frame travel counterclockwise within.


GuiObject.Position

This code sample shows how a UI element's size, position and rotation can be
copied without parenting a "copycat" to the original. It uses the
Absolute-family of properties to orient a "copycat" Frame that covers on the
screen space that the original does.


This code sample rotates a parent `GuiObject` (such as a `Frame`) using a
given rotation speed and the `Class.RunService.RenderStepped` event.


GuiObject.Rotation

The example below offers a simple demonstration on how to use the
`Class.GuiObject.Selectable` property to limit when a GUI element can be
selected by the Gamepad navigator.

When a `TextBox` has gains focus, it can be selected. However, when a TextBox
loses focus it can no longer be selected.

Although this is a simple demonstration, the property can also be used to
prevent the navigator from selecting UI elements that exist for cosmetic
rather than functional purposes. For instance, while the buttons on a menu
screen should be selectable, the title image should not be.


GuiObject.Selectable

GuiObject.SelectionImageObject

GuiObject.SelectionOrder

This code sample allows you to create a simple color-changing health bar using
two nested Frames. Paste this into a LocalScript on the inner frame.


GuiObject.Size

This code sample sets the SizeConstraint of a parent UI element.


GuiObject.SizeConstraint

GuiObject.Transparency

This code sample blinks a UI element on/off, much like HTML's beloved <blink>
tag. They still have that, right?


This code sample adds open/close functionality to a Window UI. Paste as a
LocalScript that is a sibling of a Frame named Window, a
TextButton/ImageButton named Window, and a TextButton/ImageButton within the
Window called Close.


GuiObject.Visible

This code sample flips the ZIndex rendering order of two frames.


GuiObject.ZIndex

This example shows how to use `Class.GuiBase2d.SelectionChanged` to set the
color of a background frame depending on if the gamepad selection has a child
GuiObject focused in a hierarchy that looks like this:

<img src="/assets/engine-api/classes/GuiBase2d/Gamepad-SelectionChanged.png" />

You can add code to change the background color of backgroundWindow to green
when buttons 1, 2 or 3 are selected and change to red when other buttons
outside the frame are selected. This helps you to add any new buttons to the
backgroundWindow without updating the code.


Frame

Summary

Properties

Methods

Events

Properties

Style

Methods

Events