Interactive+Environment

The goal of this section is to provide an overview of the components in the code editor and the scene editor in the Alice Interactive Development Environment (IDE). The components are briefly described and screen shots identify the individual components. The Alice 3.1 components include: **Welcome dialog box**: Select a template for the scene **Code editor**: Scene view, Editor tabs, Control tiles, Methods panel **Scene editor**: Scene Setup panel and the Gallery
 * Alice 3.1 Interactive Environment**
 * Initial Display
 * Methods
 * Control Panel
 * **Toggle Between Two Editors**

**Selecting a template in the Welcome dialog box** When Alice starts, select a template for a project scene by clicking on one of the templates in the Welcome dialog box, as shown, and then click OK. (NOTE: A double-click on the template can be used to avoid clicking OK.)

**Select a template**

**Initial display window and menu bar** Upon selection of a template for the scene, Alice displays the scene in the upper left corner of the window, as shown in Figure 3.2. In Alice, the interface is a programming environment where a virtual world (a scene with actors and props) and a program (a script that gives instructions to the actors) can be created.

**Code editor** In addition to displaying a view of the scene (upper left), the opening interface displays the Code editor panel (right) where different parts of a program are created. The Code editor also has a Methods panel (lower left) and a Control tiles panel (lower right). When Alice is first started with a new template, the camera is the selected object, the Scene view displays the selected template scene, and //myFirstMethod// (the main method defined for a scene) is the open tab in the Code editor panel.

**Alice 3.1 Code editor**

//Methods: Filtered into procedures, functions, properties//
In the **Methods** panel, each tile represents a method. A method is an action performed on or by an object (animal, person, prop, fish, or some other entity) in a scene. As shown below, the Methods panel categorizes methods for display on three tabs: **Procedures** (methods that perform an action), **Functions** (methods that ask a question), and **Properties** (methods related to a characteristic of an object, such as the object’s name, opacity, and color). In this example, the camera object’s Procedures tab displays methods named//setVehicle, moveAnd OrientToAGoodVantagePoint, move, moveToward,// and others. .

**Methods: Procedures, Functions, and Properties**

//Control panel//
In the **Control** panel, each tile represents a statement that organizes and manages instructions and information (data). The figure below highlights the control tiles. Most control tiles specify the order in which to perform methods. As a convenience, a comment tile ( **//** ) and a variable tile (for storing data) are also on the Control panel. **Control tiles** Overall, the Code editor provides a drag-and-drop environment. Method and control tiles are dragged into the editor to create statements that compose a **program.** In Alice, a program animates objects in a scene.

**Scene editor**  To view the Scene editor, click the Setup Scene button in the lower right corner of the scene, as shown. **Setup Scene button switches to Scene editor** As labeled below, the Scene editor has two panels: Scene Setup and Gallery. The purpose of this editor is to create a virtual world by adding and arranging the objects in a scene. The Gallery contains 3D models that are used to create objects in the scene. The SetUp provides buttons for positioning objects in the scene and changing the size, color, and other properties of these objects. **Alice 3: Scene editor panels**

**Toggle between two editors** The creation of an animation often involves frequent switching back and forth between the Code and Scene editors. To toggle between the two editors, click the Setup Scene button in the Code Editor or click the Edit Code button in the Scene editor, as shown.

**Toggle between Code and Scene editors**