Sunteți pe pagina 1din 344

Getting Started with Alice

Develop a Complete Animation

1
reserved.

Develop a Complete Animation

Objectives

This lesson covers the following objectives:

Use functional decomposition to write a scenario and storyboard

Complete an animation

Test an animation

Reposition objects at runtime

Plan a presentation of a completed animation project

2

Animations

Develop a Complete Animation

An animation is a sequence of actions that simulate movement. Use Alice 3 to program what the animation should do, and Alice 3 will render the animation for you.

Rendering is a process where the software program converts your code into the animation that you see. Alice 3 renders the animation based on the instructions provided by the

programmer.

3

Develop a Complete Animation

Animations Require Planning

Animations can be complex to plan and develop. You can:

Break the work down into manageable steps to make it easier to develop your animation.

Employ the process used to solve problems to develop

an animation.

Functional decomposition is the process of taking a complex

problem or process and breaking it down into smaller steps that are easier to manage.

4

Develop a Complete Animation

Functional Decomposition Example

Examine this high-level process:

Consider a math concept that requires many steps.

Identify the high-level steps for the math concept.

Further refine and define the tasks needed for each

high-level step.

5

Develop a Complete Animation

Animation Development Process

The process to develop an animation is similar to the problem- solving process. Compare the two processes below.

Problem-Solving Process

Step 1:
Step 2:
Step 3:
Step 4:
Identify the Problem
Develop a Solution
Implement the
Test and Revise the
Solution
Solution

Animation Development Process

Step 1:
Step 2:
Step 3:
Step 4:
Define the Scenario
Design a
Program the
Run the Animation
Storyboard
Animation

6

Develop a Complete Animation

Step 1: Define the Scenario

Professional animators begin their process by developing a scenarioor storythat gives the animation a purpose.

Examples:

Tell a story that presents a problem and a solution.

Teach a concept.

Simulate or demonstrate a process.

Play a game.

7

Develop a Complete Animation

Scenario and Animation Examples

 Scenario Type Scenario Animation A cat needs help to get down from a tree. A firefighter climbs up the Problem and a solution. tree to save the cat. A timed game matches Teach a concept. Memorizing chemistry symbols is difficult. chemistry symbols with their definitions. A demonstration shows Simulate or demonstrate a process. A car has a flat tire. how to change a tire on a virtual car. Play a game. An airplane must avoid objects in its path as it flies through the sky. An interactive game maneuvers an airplane around objects in the sky. 8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

Develop a Complete Animation

Step 2: Design a Storyboard

There are two types of storyboards that are often used to plan an animation:

Textual: A detailed, ordered list of actions that each object performs in each scene of the animation.

Visual: A series of illustrated images that represent the

main scenes of the animation.

In computing, a textual storyboard is called an algorithm: a list of

actions to perform a task or solve a problem.

9

Develop a Complete Animation

Storyboard Formats

Develop your visual and textual storyboards using a

variety of formats.

Examples:

Draw them on paper with a pencil.

Create them using digital tools such as a word

processor, drawing software, or presentation program.

Write a textual storyboard within Alice 3 in the Code editor using comments to organize the steps in your program.

10

Visual Storyboards

Develop a Complete Animation

The visual storyboard helps a reader understand:

The scene components.

How the initial scene will be set up.

The moving and non-moving objects in a scene.

The actions that will take place.

If there are any user interactions that occur during the animation execution.

11

Develop a Complete Animation

Visual Storyboard Example

12

Boy and girl sit on a park bench. The boy walks away, leaving his phone behind.

Girl notices the mobile phone. She thinks, “Hey! That boy forgot his phone!

Girl says out loud “Hey! You forgot your phone!” Boy turns around and walks back to bench. He says, “Oh! thank you!”

Textual Storyboards

Develop a Complete Animation

Textual storyboards help a reader understand the actions that will take place during the animation.

The moving and non-moving objects can be identified based on the action statements, but would need further

description for another programmer to implement an initial

scene as originally imagined by the author of the storyboard.

In computing, a textual storyboard is called an algorithm: a list of

actions to perform a task or solve a problem.

13

Develop a Complete Animation

Textual Storyboard Example 1

Program the following actions in order:

Boy and girl sit on a park bench. Boy stands up and walks away, leaving his phone on the park bench.

Girl turns to look at the phone.

Girl thinks, “Hey! That boy forgot his phone!” Girl says out loud, “Hey! You forgot your phone!” Boy stops and turns around. Boy walks back to the park bench and says, “Oh! Thank you!”

14

Develop a Complete Animation

Textual Storyboard Example 2

This shows how you can develop your storyboard using comments in the Code editor of your program. Then, you can start to develop the animation directly from the

storyboard.

15

Develop a Complete Animation

Storyboard Components

Textual storyboards should contain the objects listed in the table below to support the program development of the animation.

 Component Definition Examples Scene The place (or “world” in Alice 3) where your story occurs. Park, library, school, home Objects Moving or non-moving characters that you program to move and act. Animals, cars, people, trees Actions Instructions for how each object should act in the scene. Walk 2 meters, turn left, say “Hello!” User Interactions Ways in which the user viewing the animation can manipulate the objects in the animation. Keyboard commands or mouse clicks to make objects move Design Specifications How the objects and scenery should look in the animation. Size, position, location, color 16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

Develop a Complete Animation

Storyboard Process Flow

Flowcharting a storyboard helps you organize the flow of the animation actions and conditions.

17

Boy leaves
phone on
bench

True

Girl says “Hey you forgot phone”

False

Girl does

nothing

Boy stops,
turns around,
comes back to
bench, says
“Thank you”
Boy keeps
walking
End

Develop a Complete Animation

There are several ways that storyboards aid in program development:

Textual storyboards can be used to generate program comment statements and organize program development.

Storyboards can also help programmers identify repetitive actions, or actions that may be performed by more than one object.

18

Develop a Complete Animation

Step 3: Program the Animation

After completing the storyboard, the next step is to program the animation in Alice 3. As you program the animation, refer to your storyboard for the animation’s design specifications.

The code written in Alice 3 provides the instructions for

how the animation should look at run-time.

19

Animation Checklist

Develop a Complete Animation

During the animation development process, use this checklist to ensure that your animation meets all animation principles.

20

Develop a Complete Animation

Create a Complete Animation

To create a complete animation, use all of the

components that you have learned.

 Complete scene of multiple objects from multiple classes, including props and shapes Vehicle riding with the setVehicle procedure Declared procedures Functions Movement procedures IF and WHILE control statements Object rotation and object sub-part rotation procedures Random numbers Simultaneous movement with the Do Together control statement Math expressions Variables Keyboard controls 21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

Step 4: Run the Animation

Develop a Complete Animation

Run the animation to test that it functions properly and executes the actions planned in the storyboard. This process is often referred to as testing and debugging the software.

Programs are tested by entering unanticipated commands to try and “break” the code. When something is broken or doesn't work as you intended in a software program, it is often referred to as a “bug”. Debugging is the process of finding software bugs in a software program.

22

Develop a Complete Animation

Test and debug the animation frequently as it is developed. Use some of the following debugging techniques:

Adjust the direction, distance, and duration that objects move.

Adjust math calculations that help refine the distance or duration that objects move.

Refine instructions in the code that do not work as

intended.

Resolve errors created by the programmer.

23

Develop a Complete Animation

Test these elements of your animation:

Math calculations operate as expected.

Objects move with smooth timing.

Control statements are operating as expected.

Event listeners operate as expected.

24

Develop a Complete Animation

It’s time to present your complete animation project. Here are some steps to follow when organizing your animation project presentation:

Make sure your presentation is fully tested and complete.

Plan to demonstrate how you used each of the concepts learned in this course.

Find out how much time you will have for your

presentation.

If it is a group presentation, plan who will do which parts of the presentation.

25

Develop a Complete Animation

Prepare a Presentation Outline

Create a presentation outline to plan your complete animation project presentation.

The following slides show an example presentation

outline.

26

Develop a Complete Animation

Presentation Outline: Section 1

Section 1: Introduction

Introduce the theme of the animation project.

Establish your credibility as a speaker.

Give the audience a reason to listen to the presentation.

27

Develop a Complete Animation

Presentation Outline: Section 2

Section 2: Presentation of animation project

Organize the presentation in a logical flow.

Show all capabilities of your animation project.

Demonstrate how each course concept was used in the animation project.

Time visual aids to support the spoken presentation.

28

Develop a Complete Animation

Presentation Outline: Section 3

Section 3: Conclusion

Summarize the animation in a memorable way.

Motivate the audience to respond.

Provide closure.

29

Develop a Complete Animation

Rehearse aloud.

Time your speech and if it is too long or short, revise it.

Rehearse standing up.

Rehearse in front of someone.

Tape-record or videotape your speech or practice in front

of a mirror if you do not have access to a video camera.

Rehearse using your visual aids and technology

30

Group Presentations

Develop a Complete Animation

If you will be making your presentation with a group, here are some steps your group can follow to make sure all group members have a part in preparing and delivering the presentation.

Include all group members in all steps of the presentation planning.

Divide presentation tasks equally among group members.

Practice the presentation as a group, and give each

other constructive feedback before the presentation

delivery.

31

Summary

Develop a Complete Animation

In this lesson, you should have learned how to:

Use functional decomposition to write a scenario and storyboard

Complete an animation

Test an animation

Reposition objects at runtime

Plan a presentation of a completed animation project

32

Getting Started with Alice

Prepare for this Course

33
reserved.

Prepare for this Course

Objectives

This lesson covers the following objectives:

Describe the purpose for using Alice 3 to learn Java

Check system requirements needed for the course

Install necessary software for the course

34

Prepare for this Course

What is Alice 3?

Alice 3 is an integrated development environment (IDE) that helps you quickly and easily learn the basics of computer programming using characters that interact in a virtual 3D world. It was created by Carnegie Mellon University.

The best part about Alice 3 is that you learn to program without even realizing it, and it’s fun!

35

Prepare for this Course

Alice Teaches Programming Theory

Alice is designed to teach solid programming theory

minus the intimidation that typically accompanies the complex syntax and structural rules associated with most production languages.

Using Alice, you simply drag-and-drop objects from a gallery into a virtual world, and then link together programming statements that animate the objects in a fun

and engaging way.

36

Prepare for this Course

Three-Dimensional Objects

Alice 3 uses three-dimensional (“3D”) objects that

programmers can drag-and-drop into a scene to create a virtual world.

A 3D object is one with width, depth, and height.

37

Prepare for this Course

Virtual World

You will use Alice 3 and your imagination to create a virtual world.

Your virtual world will contain the following 3D objects:

The Setting: stationary objects (trees, rocks, or buildings).

Actors: objects that move (people, animals, or vehicles).

The Background: a template onto which you place both

setting and actor objects.

38

Prepare for this Course

Virtual World Example

Here is an example of a 3D world or “virtual world”. This

virtual world has setting and actor objects, as well as a

background template.

A virtual world contains

3D objects and simulates

a real or imaginary

physical environment.

39

Prepare for this Course

Programming Objects in an Animation

You can "program" the objects in the virtual world by

dragging and sequencing tiles that represent logical

programming structures.

These logical structures are programming instructions that

correspond to standard statements in a production

programming language such as Java.

40

Prepare for this Course

Alice 3 Animations

The programming instructions in an Alice 3 project can be run to create an animation.

An animation is a series of independent still images that, when viewed rapidly one-after-another, creates the illusion of movement.

41

Rendering the Animation

Prepare for this Course

As an animation creator, you will program the animation instructions in Alice 3, and Alice 3 will render the animation for you.

Rendering is the process whereby the system converts the

still image frames into a seamless animation. Alice 3 does all of the work necessary to render the animation based on the instructions you provide for each object.

42

Summary

Prepare for this Course

Alice is a programming environment that makes it easy and fun to create an animation for telling a story, playing an interactive game, or sharing a video on the web.

Students who have never learned a programming

language enjoy using Alice because the interactive

development environment is fun and engaging.

By learning Alice, you are actually learning how to

program. Alice is also used at many colleges and universities in introductory programming courses.

43

Prepare for this Course

44

Prepare for this Course

Check System Requirements

This course includes practice exercises that you can work

on to reinforce the concepts being taught.

You need to have Flash, the Java Development Kit (JDK),

and Alice 3 installed on your machine.

45

System Requirements

Prepare for this Course

Ensure that your system meets the minimum system requirements for running Alice 3.

 System Component Minimum Requirement Processor Pentium 4 or higher One of the following: Operating System •Windows XP and up •Apple OS X and up Any modern browser that supports Java: Browsers •Internet Explorer 6 and up •Firefox 3 and up •Chrome •Safari •Opera 4.x and up Memory 1 GB Free disk space: Free Disk Space •Required: 1.5 GB •Recommended: 8 GB 46 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

System Requirements

(continued)

Prepare for this Course

 System Component Minimum Requirement Graphics •Capable of high (16-bit) color and 1024 X 768 resolution •3D video card recommended Sound Card Required Software •Adobe Flash Player (latest) •JDK 7 (see JDK download instructions) •Alice 3 (see Alice 3 download instructions)

47

Prepare for this Course

 1. Open any Internet Browser and type the following URL : 2. From the Java SE Downloads page, click the Download button for the Java Development Kit (JDK). 3. Review and accept the License Agreement. 4. Locate the JDK for your computer’s operating system and click the download link. 5. If prompted, save the file to a location on your hard drive that you can easily remember, and click OK.

48

Prepare for this Course

Steps to Launch the JDK Executable File

1. Locate and double-click the executable file to launch the installation.

2. When prompted to run the executable file, click Run.

49

Prepare for this Course

Steps to Run the JDK Wizard

 1. From the Installation Wizard, click the Next button. 2. To accept the default settings, click Next. 3. When prompted for installation location, click Next. If prompted, close the internet browser window. 4. Click Continue to acknowledge the successful installation. 5. You will be prompted to set-up the Software Developer Kit (SDK). Click Next. 6. When prompted for the installation location, click Next. 7. When the set-up is complete, click Close. 50 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

Prepare for this Course

1. Open any Internet Browser and enter the following URL: http://www.alice.org

3. Locate and select the Alice 3 Offline Installer option for your computer platform.

4. When prompted, Save the Alice 3 Installer file.

51

Prepare for this Course

Vista, Windows 7, and Windows 8 all have a strong malware protection scheme that may resist installing non- standard software directly on the hard drive.

To reduce the likelihood of installation problems,

download the Universal ZIP file for Alice 3 (instead of the Offline Installer file) if you are using one of these operating systems.

52

Prepare for this Course

 1 Go to the Alice website at: http://www.alice.org. 2 From the Downloads list, select the Alice 3 link. 3 Locate and select the Alice 3 Universal Installer option. 4 Download the zipped file to your desktop.

53

Prepare for this Course

Steps to Launch the Alice Installer Wizard

1. Locate the saved installer file.

2. Double-click the executable file. A progress window

will appear.

Wizard appears. Click Next to begin the installation.

54

Steps to Install Alice 3

Prepare for this Course

 1. From the Installer Wizard, select the Install option. 2. To accept the default installation option, click Next. 3. Review the License Agreement. 4. If you agree, select the box next to “I accept the terms in the license agreement.” Click Next to continue. 5. To accept the default setting that installs a desktop shortcut, click Next. 6. To begin the installation, click Install. A progress window will display during the Alice 3 installation. 7. To complete the installation, click Finish.

55

Steps to Launch Alice 3

Prepare for this Course

1. After Alice 3 is installed, the Alice 3 icon will appear on

2. Double-click the icon to launch Alice 3.

56

Prepare for this Course

Steps to Install Alice 3 Using the Universal ZIP File

1. Unzip the file on the desktop.

2. Move the unzipped folder (containing all of Alice 3) to the Program Files (X86) folder on the C:\ drive.

3. Create a shortcut on the desktop to Alice3.bat.

4. Click the shortcut to launch Alice.

57

Prepare for this Course

Join the forum to get help from other users:

Alice FAQs:

Contact the Alice team:

58

Summary

Prepare for this Course

In this lesson, you should have learned how to:

Describe the purpose for using Alice 3 to learn Java

Check system requirements needed for the course

Install necessary software for the course

59

Getting Started with Alice

Get Started with Alice 3

60
reserved.

Get Started with Alice 3

Objectives

This lesson covers the following objectives:

Identify scene components

Create and save a new project

Add an object to a scene

Communicate the value of saving multiple versions of a scene

Code a simple programming instruction

Use the copy and undo command

Understand the value of testing and debugging

61

Initial Scene

Get Started with Alice 3

An initial scene is the starting point of your animation. It has three components:

A background template which provides the sky, ground, and light.

Non-moving scenery objects which provide the setting.

Moving objects which provide the action.

The initial scene is the first scene of an animation where you

select the background template and position the objects.

62

Get Started with Alice 3

Initial Scene Components

Below are components of an ocean floor scene.

Coral are
scenery objects.
Fish are acting
objects.
Ocean floor is a
template.

63

Get Started with Alice 3

Steps to Create a New Project

 1 Launch Alice 3. 2 In the Welcome dialog box, select the Templates tab. 3 Select a template, and click OK.

64

Get Started with Alice 3

Steps to Save a Project

1. In the File menu, select Save As.

2. Select the location to save the project (e.g., computer, file server,

memory stick).

3. Enter the project name.

4. Click Save.

5. Save projects frequently to avoid losing your work.

65

Get Started with Alice 3

Navigating Between Editors

Alice provides two different workspace editors, called

perspectives, to build a project; you will toggle between

them frequently throughout the development of your project. The two editors are:

Code Editor (Edit Code perspective, shown on the left)

Scene Editor (Setup Scene perspective, on the right)

66

Get Started with Alice 3

Navigating Between Editors

Switch between the two editors by using either the Edit

Code button or Setup Scene button.

You are in the Code editor when you see programming instructions in the left window pane.

You are in the Scene editor when you see the gallery of

objects.

67

Get Started with Alice 3

The Default Editor

By default, Alice starts in the Code editor.

Click the Setup Scene button to switch to the Scene editor.

68

Get Started with Alice 3

Add an Object to a Scene Display

In programming terms, a class is a blueprint used to build

an object, and an object is an instance of a class. In the Scene editor add an object (instance of a class) to a scene in one of two ways:

Drag an object (instance) from the gallery into the scene

with your mouse. Click the object, complete the dialog box, and let Alice add the object to the center of the scene.

After an object is added to a scene, it is referred to as an instance of the object. You can add many instances of the same object to a scene (multiple coral objects in the water, for example). Each instance must have a unique name.

69

Get Started with Alice 3

Add an Object to a Scene Display

Click the object once, or drag the object from the gallery

into the scene with your mouse.

70

Naming the Object

Get Started with Alice 3

Review the name that Alice 3 provided for the object. You

can modify the name, or click OK to accept the name and add the instance to the scene.

71

Get Started with Alice 3

Scene Editor

In the Scene editor, you can:

Select objects from the gallery to add to the scene.

Position objects in the scene using the Handles palette.

Edit an object's properties using the Properties panel.

Access the Code editor to add programming statements.

Run the animation after the programming statements are added to the Code editor.

72

Get Started with Alice 3

73

Scene Editor Display

The Scene editor contains two panels:

Scene Setup (top panel)

Gallery (bottom)

Get Started with Alice 3

Gallery

The gallery is a collection of three-dimensional objects

that you can insert into the scene.

The gallery is organized using tabs.

To find objects, browse the gallery tabs or use the

Search Gallery feature to search by keyword.

74

Gallery Tabs

The gallery has five tabs:

Get Started with Alice 3

 Tab Function Browse Gallery by Class Hierarchy Organizes objects by mobility. Browse Gallery by Theme Organizes objects by region and folklore context. Browse Gallery by Group Organizes objects by categories. Search Gallery Allows an object search by name. Shapes/Text Organizes object shapes, 3D text, and the billboard.

75

Get Started with Alice 3

Select a Class

The Class Hierarchy tab groups objects by mobility type (biped, flyer, prop, quadruped, swimmer).

A class contains the instructions that define the appearance and movement of an object. All objects within a class have common properties. The class provides instructions to Alice 3 for creating and displaying the object when it is added to your scene.

76

Get Started with Alice 3

Class Example

Classes can contain sub-classes. Consider the example

below. The chicken class is a sub-class of the Flyer class. There are two chicken sub-classes in the gallery.

Every chicken added to a scene inherits the properties

that all Flyer objects have in common: two legs, two wings, the ability to fly, etc.

77

Save New Project Version

Get Started with Alice 3

Save time by creating multiple versions of your project.

After objects are positioned in the initial scene, save multiple versions of your project, giving each version a different name.

Benefits of saving multiple versions of projects:

Use the same scene to create different animations. Save time re-creating the scene if you encounter programming errors.

78

Get Started with Alice 3

Steps to Save a Project Version

 1 Select File. 2 Select Save As 3 Select the location to save the project (e.g., computer, file server, memory stick). 4 Enter the project name. 5 Click Save. 6 Save projects frequently in case of a power failure or a computer

crash.

79

Get Started with Alice 3

Code Editor

Click the Edit Code button to display the Code editor. The Code editor is where you add the programming

80

Get Started with Alice 3

81

Methods Panel

The Procedures tab, located within the Methods Panel in the Code editor, displays pre-defined methods for the

selected instance, as well as methods defined for the

class of objects.

A procedure is a piece of program

code that defines how the object should execute a task. Alice 3 has

a set of procedures for each

class; however, users can create or "declare" new procedures.

Get Started with Alice 3

The instance menu displays above the Procedures tab. The down pointing triangle on the right side of the menu indicates that the menu drops down when selected.

82

Get Started with Alice 3

Create a Programming Instruction

From the Methods Panel, click and drag the desired programming instruction into the myFirstMethod tab of the Code editor.

83

Get Started with Alice 3

Select Values for Method Arguments

After you drag the programming instruction into the myFirstMethod tab, use the cascading menus to select the

value for each argument used in the method.

An argument is a value that is used by the method to perform an action.

84

Get Started with Alice 3

Procedure Argument Types

Argument types may include:

Direction

Amount

Duration

Text

Alice 3 recognizes how many arguments are needed for each programming instruction. It presents you with the correct number of cascading menus to specify the values for each of those arguments.

85

Get Started with Alice 3

Copy Programming Instructions

To copy a programming instruction, you may use any one of these methods:

The CTRL + Drag method.

Right-click and use the Copy to Clipboard option.

Click and drag the programming instruction to the

clipboard.

86

Get Started with Alice 3

Steps to Use the CTRL + Drag Method

1.

2.

Hold down the CTRL key on your keyboard.

Click on and hold the programming instruction handle.

87

3.

Drag the handle to the desired location in the code, or to the clipboard. Release the mouse button before releasing the CTRL key.

Get Started with Alice 3

Steps to Use the Right-Click Copy Method

1. Right-click on the programming instruction handle.

2. Select the Copy to Clipboard option.

88

Get Started with Alice 3

Steps to Use the Click + Drag To Clipboard Method

1. Click and drag a copy of the programming instruction to the clipboard icon. The clipboard changes to a yellow color when the

mouse pointer makes contact with the clipboard icon. Use this

method when copying programming instructions between tabs.

89

Get Started with Alice 3

Undo an Action

Undo an action using the Undo option on the Edit menu,

or the keyboard shortcut CTRL + Z.

90

Get Started with Alice 3

Test and Debug Your Animation Testing…

Once you create the programming instructions for your animation, you need to test your program.

To test your program, click the Run button.

Run the animation to test that it functions properly and executes as planned and without error.

Test the animation frequently during development.

91

Get Started with Alice 3

92

Test and Debug Your Animation Testing…

Testing the limits of your program is also an important part of the process. One example of this is changing the value of an argument in a method in an effort to intentionally “break” the code in order to prove that it works under extreme conditions .

What happens if a number is very large? or negative?

Test the limits of the animation frequently during development.

Get Started with Alice 3

Test and Debug Your Animation Debugging…

The cycle of testing your program, identifying errors or unintended results, rewriting the code, and re-testing is a process referred to as debugging your program.

Software programs, such as animations, are tested by entering

unanticipated commands to try and "break" the code. When something is broken or doesn't work as intended in a software program, it is often referred to as a "bug". Debugging is the process of finding bugs in a software program.

93

Get Started with Alice 3

Testing and Debugging Techniques

Use some of the following techniques as you program the animation in Alice 3:

Adjust the arguments that specify the direction, distance, and duration that objects move.

Adjust the mathematical expressions that manipulate the

direction, distance, and duration that objects move.

Refine or replace instructions in the code that do not work as intended.

Resolve errors created by the programmer.

94

Summary

Get Started with Alice 3

In this lesson, you should have learned how to:

Identify scene components

Create and save a new project

Add an object to a scene

Communicate the value of saving multiple versions of a

scene

Code a simple programming instruction

Use the copy and undo commands

Understand the value of testing and debugging

95

Getting Started with Alice

96
reserved.

Objectives

This lesson covers the following objectives:

Open a saved version of a project

Add multiple objects to a scene

Describe the difference between precise positioning and drag-and-drop (or imprecise) positioning

Use a one-shot procedure to precisely position an object

in a scene

97

Objectives (continued)

This lesson covers the following objectives:

Edit properties of an object in the Scene editor

Describe three-dimensional positioning axes

Position the sub-parts of an object in the Scene editor

98

Open an Existing Project

Saved Alice 3 project files can be opened and edited.

There are two ways to open an existing Alice 3 project file after launching Alice:

Select the project from the My Projects tab.

Browse for the project using the File System tab.

99

Steps to Open an Existing Project Using the My Projects Tab

 1 Open Alice 3. 2 From the Select Project dialog box, select the My Projects tab. 3 Scroll to the name or thumbnail of the project to open. 4 Select the name or thumbnail of the project and click OK.

10

Steps to Open an Existing Project Using the File System Tab

 1 Open Alice 3. 2 From the Select Project dialog box, select the File System tab. 3 Select the Browse button. 4 Use the navigation window to navigate to the directory structure on your computer where the Alice 3 file is located. Note: Alice 3 cannot open animations created with the Alice 2 software. 5 Click OK after the Alice 3 file has been selected.

1 reserved.

Positioning Objects Within Initial Scene

Positioning objects within your initial scene includes choosing the:

Direction the object should face.

Orientation of objects relative to other objects in the scene.

Position of objects in the scene.

Position of the object's sub-parts (arms, legs, etc.).

10

Positioning Features of Objects

All Alice 3 objects share the same positioning features:

3D coordinates on x, y, and z axes.

a center point, where its own axes intersect (usually at the center of mass).

sub-parts that can move.

10

Object Orientation

Objects (and their sub-parts) move relative to their own orientation, or sense of direction.

An object that is facing toward the back of the scene, programmed to move forward 2 meters, moves 2 meters

further toward the back of the scene.

10

Ways to Position an Object

Precise / Imprecise Positioning

There are two ways to position an object:

Precise positioning using one of two methods:

Use a one-shot procedure. Enter values for the x, y, and z coordinates and press the Enter key.

Imprecise positioning using the drag-and-drop method with the cursor.

10

Select Instance to Position

Precise / Imprecise Positioning

There are two ways to select the instance that you want to position. Rings or arrows will surround the object once it is selected.

Click the name of the instance from the object list in the upper left corner of the scene window. - OR -

Click the instance in the scene window.

 10 Copyright © 2012, Oracle and/or its affiliates. All rights 6 reserved.

One-Shot Procedures

Precise / Imprecise Positioning

One-shot procedures:

Are used to make scene adjustments and position objects.

Are not executed when the Run button is selected to play the animation.

A procedure is a set of instructions, or programmed code, for how the object should perform a task. One-shot procedures are available in the Scene editor. They are the same as the procedures in the Code editor; however, they only execute one time to re-position the object, unlike in the Code editor where they will execute every time the Run button is clicked to play the animation.

10

Positioning Objects in the Scene

Precise / Imprecise Positioning

After adding multiple objects to the center of a scene, use one-shot procedures to precisely place them in different locations in the scene so that all objects are visible.

10

Steps to Open the One-Shot Procedures Menu

Precise / Imprecise Positioning

 1. Right-click on an object in the Scene editor. 2. Select procedures. OR 1. Select the one shots procedure menu in the Properties panel. 2. Select procedures.

10

Steps to Use One-Shot Procedures

Precise / Imprecise Positioning

 1 From the one-shots procedures menu, select the desired procedure. 2 Specify the argument values (direction and distance). 3 The object will automatically re-position based on the procedure selected and the arguments specified.

11

Positioning Example

Precise / Imprecise Positioning

Sometimes it is convenient to have many instances positioned in the center of the scene. For example:

If you want to put several yetis on a floating ice floe, add the ice floe and yetis to the center of the scene first.

Move them with one-shot procedures as opposed to

trying to drag-and-drop them into the correct location on

top of the floating ice floe.

11

Position Property

Precise / Imprecise Positioning

The Position property tells you where the object is positioned in the scene on the x, y, and z axes.

11

Steps to Position an Object Using Coordinates

Precise / Imprecise Positioning

 1 In the Properties panel, locate the Position property. 2 Enter a value in the x axes and press enter. 3 Enter a value in the y axes and press enter. 4 Enter a value in the z axes and press enter.

11

The object will automatically re-position to the coordinates entered in

the x, y, and z axes fields. You must press the enter key after entering

each value.

Steps to Use the Drag and Drop Method

Precise / Imprecise Positioning

1. Select the object, or the sub-part of the object, using the cursor.

2. Select a handle style. Each handle style presents rings or arrows

to assist you with your positioning. For example, the Translation

handle style will present three arrows to use in positioning the object along the x, y, and z axes.

3. Position the object with your cursor by selecting and dragging the rings that surround the object.

11

Types of Handle Styles

Precise / Imprecise Positioning

 Handle Style Description Default Simple rotation and movement. Rotation Rotate about the x, y, and z axes. Translation Move along the x, y, and z axes . Change the size of the object and stretch it along the x, y, and z axes. Resize Note: If you select a very large object in the scene, and then select the Resize handle, the positioning arrow that helps you resize the object may appear off of the screen. If this happens, select the Resize handle and then use the scrolling button on your mouse to resize the object.

11

The Selected Object Properties menu in the Scene editor provides you with the ability to change the properties of the instance that is currently selected in the scene.

11

Modifying Properties

Properties can be modified during scene setup and during animation execution. For example:

Change the Opacity property of an instance to 0 during scene setup to make it disappear.

Create a programming statement to set the Opacity

property of the instance to 1 so the instance reappears

in the scene during execution of the animation.

11

Steps to Change an Instance’s Properties in the Scene Editor

1. Select the instance in the Scene editor.

2. Change properties such as its paint (color), opacity, or size using

the menus in the properties panel.

The triangle in front of the Selected Object Properties button can hide or display the properties of an instance. If the property fields for an

instance are not displaying, click the triangle to display them.

11

Positioning an Object’s Sub-Parts

Use handle styles to position an object’s sub-parts during scene setup.

For example, if you want an object’s head looking to the left when the animation begins, complete these steps…

11

Steps to Position Object Sub-Parts

 1 Select the instance from the object properties menu. 2 The right-pointing triangle next to the instance name indicates that there are additional cascading menus for the instance’s sub-parts. Select the sub-part that you want to position. 3 Use the rings around the sub-part to position it.

Repeat these steps to position additional sub-parts.

Use the Undo feature when necessary.

12

Summary

In this lesson, you should have learned how to:

Open a saved version of a project

Add multiple objects to a scene

Describe the difference between precise positioning and drag-and-drop (or imprecise) positioning

Use a one-shot procedure to precisely position an object

in a scene

12

Summary

(continued)

In this lesson, you should have learned how to:

Edit properties of an object in the Scene editor

Describe three-dimensional positioning axes

Position the sub-parts of an object in the Scene editor

12

Getting Started with Alice

Use Procedures and Arguments

12
3
reserved.

Objectives

Use Procedures and Arguments

This lesson covers the following objectives:

Toggle between, and describe the visual differences between, the Scene editor and the Code editor

Locate and describe the purpose of the methods panel and the procedures tab

Use procedures to move objects

Add Java programming procedures to the Code editor

12

Objectives

(continued)

Use Procedures and Arguments

This lesson covers the following objectives:

Demonstrate how procedure values can be altered

Reorder, edit, delete, copy, and disable programming statements

Test and debug an animation

12

Display the Code Editor

Use Procedures and Arguments

Click Edit Code to display the Code editor. The Code editor is where you program your animation.

12

Select Instance

First, select the instance that you want to program; this will insure that

you are creating a programming

instruction for the correct instance.

You can select an instance by

clicking on the instance in the small

scene window or by using the instance pull down menu below the small scene window.

12

Use Procedures and Arguments

Methods Panel

Use Procedures and Arguments

The methods panel contains two tabs:

Procedures: All pre-defined procedures for an object.

Functions: All pre-defined functions for an object.

12

Procedures Tab

Use Procedures and Arguments

The Procedures tab displays pre-defined procedures for the selected instance, as well as procedures of your own that you define.

A Procedure is a piece of program code that defines how the object should execute a task. Alice 3 has a set of procedures for each class; however, users can create (“declare”) new procedures of their own.

12

Functions Tab

Use Procedures and Arguments

13

The Functions tab displays pre-defined functions for the selected instance, as well as functions of your own that you define.

A Function computes and answers a question about an object, such as, “What is its width or height?”, or “What is its distance from another object?” Alice 3 has a set of functions for

each class; however, users can

declare new functions of their own.

Use Procedures and Arguments

Code Editor Tabs

The Class Menu displays to the left of the Scene tab. You

create your programming instructions on the myFirstMethod tab.

By default, Alice creates a Do In Order control statement

in the myFirstMethod procedure. The area labeled drop statement here is the location onto which you will place programming instructions.

13

Control Structures

Use Procedures and Arguments

At the bottom of the myFirstMethod tab you will find the Alice control structures.

13

Use Procedures and Arguments

Create a Programming Instruction

From the Procedures tab, click and drag the desired procedure into myFirstMethod in the Code editor.

13

Use Procedures and Arguments

Select and Set Argument Values

After the programming statement is created, use the drop- down menus to set the values for each argument. To access the argument drop-down menu, click on the down- pointing triangle to the right of the argument value.

13

Execute the Program

Use Procedures and Arguments

Click the Run button to execute the programming instructions. Run the program frequently to test for the

desired results, and alter the values of the arguments as

necessary.

13

Use Procedures and Arguments

Object Movement

Object movement is egocentric: Objects move based on the direction they face.

An object can move in six directions:

Up

Down

Forward

Backward

Right

Left

13

Use Procedures and Arguments

Examples of Movement Procedures

 Procedure Description Move Moves the object in any one of its six directions. Move Toward Moves the object toward another object. Move Away From Moves the object away from another object. Move To Moves the object from its current position to the center point of the target object. Move and Orient To Moves the object from its current position to the center point of the target object and adjusts the object’s orientation to match the orientation of the target object. Delay Halts an object’s movement for a certain number of seconds. Delay can be used to slow down the execution of an animation. Say Creates a call-out bubble with text that makes the object appear to talk. 13 Copyright © 2012, Oracle and/or its affiliates. All rights

Use Procedures and Arguments

Examples of Rotation Procedures

 Procedure Description Turn Rotates an object left, right, forward, or backward on its center point. Left and right turn on the object’s vertical axis; forward and backward turn on the object’s horizontal axis. Roll Rolls an object left or right on its center point using the object’s horizontal axis.

13

Use Procedures and Arguments

Arguments

Arguments are selected after the procedure is dropped onto the Code editor. Argument types may include:

Object

Direction

Direction amount

Time duration

Text

An argument is a value that the procedure uses to complete its

task. A computer program uses arguments to tell it how to implement the procedure.

13

Use Procedures and Arguments

The argument menu offers default argument values to

select from. If none of the defaults are suitable, select the

Custom DecimalNumber… option so that you can specify a more accurate argument value.

14

Steps to Edit Arguments

Use Procedures and Arguments

 1 Next to the argument’s value, click the arrow to display the menu of values. 2 Select a new value. 3 Use the Custom DecimalNumber… option to specify a value that differs from the default list of values.

14

Use Procedures and Arguments

Arguments as Placeholders

When a procedure is dropped into the Code editor, all

argument values must be specified. There will be times

that you select an argument value as a temporary placeholder value that will be replaced later.

For example, you may want an object to move forward but you are not sure how far. You can select a placeholder value of 2 meters, run the animation, determine that a different value is needed, and then edit the value. You can

also specify a placeholder value that you will replace later

with a function or a variable.

14

Use Procedures and Arguments

Steps to Reorder Programming Statements

1.

2.

3.

Use “Drag and Drop”: Select the handle of the programming

statement.

Drag the programming statement to its new position.

Drop the programming statement into its new position by de- selecting the handle.*

*Note: A green position indicator line will appear to help you align the programming statement in the desired position.

14

Use Procedures and Arguments

Edit Programming Statements

Use the drop-down lists to edit the values of a

programming statement.

14

Use Procedures and Arguments

Delete Programming Statements

Right-click programming statements to delete them.

14

Edit and Test the Program

Use Procedures and Arguments

Run the animation to test it, and edit the code as necessary. It may take several cycles of testing and editing to get the animation to run as desired.

14

Use Procedures and Arguments

Debugging and Testing

Debugging and Testing is the process of running the

animation many times, and adjusting the control statements, procedures, and arguments after each execution.

Save often while debugging your program.

14

Use Procedures and Arguments

Insert Temporary Programming Statements to Help with Debugging

You can insert temporary programming statements into your code to help with debugging. For example: imagine that you have an object that is not moving forward.

Temporarily enter a Say programming statement to announce that the object is about to move forward.

Test the program to see whether or not the Say programming statement executes.

If the Say statement executes, but the object does not move, this indicates one type of problem; if both the Say

and Move statements do not execute, this may indicate

another type of problem.

14

Use Procedures and Arguments

Disabling Programming Statements

Programming statements can be disabled in the Code editor.

Disable programming statements to:

Help isolate portions of code during testing.

a specific instruction.

14

Use Procedures and Arguments

Steps to Disable a Programming Statement

1. Right-click on the programming statement.

2. Unselect "Is Enabled" from the drop-down list.

3. The color of the programming statement will change to gray

15

hashmarks to show that it is disabled.

Use Procedures and Arguments

Steps to Re-Enable a Disabled Programming Statement

1. Right-click on the programming statement that has been disabled.

2. Select "Is Enabled" from the drop-down list.

15

Use Procedures and Arguments

Including programming comments in an animation helps humans understand the flow of the programming.

Describe the intention of the programming instructions.

Do not affect the functionality of the program because they are ignored during its execution.

Are typically placed above the block of programming

statements that it describes.

Are often written first, in large programs, as an outline of the programming instructions.

15

Use Procedures and Arguments

Steps to Enter Comments in a Program

1. Drag and drop the comments tile above a code segment. The

comment tile is located at the bottom of the myFirstMethod.

2. Type comments that describe the sequence of actions in the code segment.

15

Use Procedures and Arguments

Comments can be an excellent tool for organizing the development of a program.

For large programs, create a comment that indicates the end of the program. An “end of program” comment helps to minimize scrolling when adding programming statements to a lengthy myFirstMethod.

15

Summary

Use Procedures and Arguments

In this lesson, you should have learned how to:

Toggle between and describe the visual differences between the Scene editor and Code editor

Locate and describe the purpose of the methods panel and procedures tab

Use procedures to move objects

Add Java programming procedures to the Code editor

15

Summary

(continued)

Use Procedures and Arguments

In this lesson, you should have learned how to:

Demonstrate how procedure values can be altered

Reorder, edit, delete, copy, and disable programming statements

Test and debug an animation

15

Getting Started with Alice

15
7
reserved.

Objectives

This lesson covers the following objectives:

Correlate storyboard statements with program execution tasks

Add a control statement to the Code Editor

Use random numbers to randomize motion

15

Program Development Using a Top-Down Approach

Just as a homebuilder uses a set of blueprints and follows a series of steps, a programmer uses a plan and follows a series of steps to build a program.

Homebuilders work with a purpose and set specific goals as they buildthe room is energy efficient, the bathroom is

accessible, the home meets building codes, etc.

Programmer’s also work with purpose and set goals because without them, success cannot be measured.

Another term for the goal or purpose of an animation is a high-level scenarioit is a story with a purpose.

15

Steps to Use a Top-Down Approach to Programming

1. Define the high-level scenario (the purpose/goal of the program).

2. Document the actions step-by-step in a textual storyboard. This

helps to gain a thorough understanding of the actions that need to

be programmed.

3. Create a table to align the storyboard steps to the programming instructions.

4. Review the table during the animation’s development to ensure the animation meets specifications.

5. Revise the table as necessary.

16

Textual Storyboard Example

Program the following actions in order:

16

Chicken walks by. Cat turns to look at the chicken. Cat says, “Dinner time!”

Chicken says, “Oh no!”

Chicken turns to right. Program the following actions together:

Chicken walks away quickly. Cat walks away quickly.