(Redirected from UI)
- This article is about the editing environment and design. For the editor on the Scratch Website, see Online Editor. For other uses, see Edit (disambiguation).
- This article or section documents the current version of Scratch (version 3.0). For this article in Scratch 2.0, see User Interface (2.0). For this article in Scratch 1.4, see User Interface (1.4).
The User Interface is the design of the interface of the Scratch editor. It is designed to make coding easier for beginner programmers.
In designing Scratch, the Scratch Team's main priority was to make its language and development environment intuitive and easily learned by children who have had no previous programming experience[1]. There is a strong contrast between the powerful multimedia functions and multi-threaded programming style and the rather limited scope of the Scratch programming language. As a result, some tasks are easy in high-level programming languages but hard in Scratch (e.g. multidimensional arrays) while some tasks are easy in Scratch but hard in many high-level programming languages (sprite-like graphics, sensing the ambient noise, etc.).
Structure
Scratch is a programming language with multiple sprites, which act like different characters. Each sprite has unique characteristics, such as costumes, size, position, effects, and private variables. Blocks are the pieces of code that run the project, and each sprite has its own blocks that are independent of other sprites' blocks. Sprites interact with each other on the stage, and they can communicate with each other using broadcasts, variables, and sensing blocks.
Blocks form each sprite are displayed in the Code Area. They are structured into scripts, which are connected chains of blocks that run together. The Block Palette contains a list of all blocks, and is where blocks are dragged from. The blocks are arranged into 9 or more different categories: Motion, Looks, Sound, Events, Control, Sensing, Operators, Variables, My Blocks, and other categories for any extensions. Some blocks can move the sprite or change its looks, some interact with other sprites or the stage, while others perform internal operations, such as mathematics or changing variables and lists.
Organization
The User Interface consists of several sections which allow users to create and edit projects.
On the top right of the screen below the Navigation Bar, there are three buttons: Code, Costumes, and Sounds. The Code area allows one to build scripts that run the project, Costumes allow the user to change how the sprite looks using the Paint Editor, and Sounds uses the Sound Editor to edit sounds.
Code Tab
The code tab contains several sections that allow one to code scripts that control sprites.
Block Palette
- Main article: Block Palette
The Block Palette is the area on the left of the screen when the Code button is opened. On the left, there is an area that contains the nine Block Categories in Scratch. To the right of that, there is an area that contains a list of all blocks. These blocks can be dragged into the Code Area to make scripts.
Extensions Button
- Main article: Extension
The extensions button is the purple button below the categories of the Block Palette. It allows the user to add extensions, which add new possible blocks to the Block Palette like blocks that communicate with other devices.
Code Area
- Main article: Code Area
The Code Area is the large space to the right of the Block Palette. It is an area for storing blocks that run the project. Blocks can be dragged from the Block Palette into the Code Area and arranged to form scripts. Each sprite has its own scripts, and sprites can be selected using the Sprite Pane.
Stage
- Main article: Stage
The stage is the area where the sprites are displayed and perform their actions. It is located in the top of the area to the right of the Scripts Area.
Small Stage Layout
The small stage layout is a size option for the stage. It lowers the stage's resolution to 240x180 pixels — half of the normal size, increasing the size of the Code Area, Paint Editor, and Sound Editor. The small stage layout can be activated by toggling the stage size switch located in the top-right corner in the project editor next to the full screen button. It is useful when using Scratch on a smaller screen or on a phone or tablet, as the Code Area may be too small to use on those devices.
Sprite Pane
- Main article: Sprite Pane
The Sprite Pane is located to the right of the Scripts Area and under the stage. It allows one to quickly switch sprites and view the different scripts each sprite contains.
Backpack
- Main article: Backpack
The Backpack is a small area to the bottom of the Block Palette and the Scripts Area. It can be opened by clicking on it. It stores scripts, costumes, and sounds and allows them to be transferred from one project to another. They can be added by dragging and dropping the scripts, costumes, or sounds into the backpack. This is especially useful if work from another project is being taken to use in one's own project.
Paint Editor
- Main article: Paint Editor
The paint editor allows one to view, create, and edit a sprite's costumes.
Costume Pane
- Main article: Costume Pane
The costume pane is the area on the left of the paint editor. It allows one to switch between a sprite's Costumes.
Viewing Area
To the right of the Costume Pane is a large area to make edits and view the costume.
Tools
To the left of the Viewing Area are several tools that allow one to make edits: select, reshape, paintbrush, eraser, fill, text, line, circle, and rectangle.
To the top of the Viewing Area are more tools that include changing colors, undo and redo, grouping, layers, and flipping.
Below the Viewing Area there is a button to convert the costume to bitmap or vector mode. Each type of costume has different tools for editing.
Sound Editor
- Main article: Sound Editor
The sound editor allows one to make, view, and edit the sprite's sounds.
Sounds Pane
The sounds pane allows one to switch between different sounds.
Viewing Area
The viewing area allows one to view the sound waves of the selected sound.
Sound Effects Tools
Above and below the viewing area are many tools. These include making the sound louder, softer, have effects, fade in or out, copying and pasting, undo, and redo.
Header
- Main article: Header (editor)
The header is the purple bar at the top, which from left to right has:
- The Scratch logo that links to the Front Page.
- A globe icon which opens a list of languages when clicked.
- File and edit menus.
- Tutorials.
- Project name, share button, and see project page.
- Folder icon which links to My Stuff.
- Profile picture and username.
Tools
Tools are the various functions that the interface has. They add functions on top of the main sections of the editor.
Stage Area
The following functions are found above the stage area:
- Green Flag — Starts the scripts in the project's code.
- Stop Sign — Stops all running scripts.
The following functions are found below the stage area:
- Sprite Rename — A textbox which can be used to rename the currently selected sprite.
- X and Y — Edits the position of the currently selected sprite.
- Show/Hide — Shows or hides the currently selected sprite.
- Size — Changes the size of the currently selected sprite.
- Direction — Changes the direction of the currently selected sprite.
The following functions are found on the navigation bar above the project editing area:
Settings Drop-down
- Language — Change the language of the editor.
- Color Mode — Change the color mode of the editor.
File Drop-down
- New — Creates a new empty project
- Save Now — Saves the project
- Save as a copy — Makes a new project containing the same blocks as the current one.
- Load from your computer — Load a .sb, .sb2, or .sb3 Scratch project file.
- Save to your computer — Downloads the project in its current state as a .sb3 file.
Edit Drop-down
- Restore <sprite/script/costume> — Undeletes the last deleted element.
- Turn <on/off> Turbo Mode — Speeds up the project's execution.
Other
- Tutorials — Guides to making projects
- Project name — Change the name of the project. The default name is "Untitled".
- Share — Share the current project. Will instead say "Shared" if it already is.
- See Project Page — View the project's main page.
- My Stuff — View one's My Stuff page containing one's projects and studios.
- User button — View the user menu.
- Profile — View one's user profile.
- My Stuff — View one's My Stuff page contain one's projects and studios.
- Account Settings — Change options such as one's password, country, and email.
- Sign out — Exit one's Scratch user account, requiring one to log in to view one's unshared projects again.
