alice workshop v1_presentation_slides_v1.1

Java Fundamentals

Copyright 2012, Oracle. All rights reserved.

Telling a Story Visually

Telling a Story VisuallyWhat Will I Learn?

Objectives In this lesson, you will learn how to: Compare and define an animation and a scenario

Write an example of using the four problem solving steps to storyboard an animation

Use functional decomposition to write a storyboard

Flowchart a storyboard

Describe an algorithm

Telling a Story VisuallyProblem Solving Approach to Animation

A big problem, or sometimes even a little problem, is often solved by breaking down the process into parts.

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.

Present the problem as an animation.

Functional decomposition is the process of taking a complex problem or processand breaking it down into smaller parts that are easier to manage.

Telling a Story VisuallyProblem Solving Approach to Animation (cont.)

The process to develop an animation is very similar to the problem solving process. Compare the problem solving and animation development process listed below.

Problem Solving Process

Animation Development Process

Step 1: Identify the Problem

Step 2: Develop a Solution

Step 3: Implement the Solution

Step 4: Test and Revise the Solution

Step 1: Define theScenario

Step 2: Design a Storyboard

Step 3: Program the Animation

Step 4: Run the Animation

Telling a Story VisuallyAnimation Defined

An animation is a sequence of actions that simulate movement.

As the animation creator, you will program in Alice what the animation should do, and Alice will render the animation for you.

Rendering is the process whereby the system converts the image frames into aseamless animation. Alice3 does all of the work necessary to render the animationbased on what instructions you provided for how the objects should act.

Step 1: Define the Scenario

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

ExamplesStory representing a conflict and resolution

Lesson to teach a math concept

Process to simulate or demonstrate

Game to play

A scenario is a story in the form of a problem to solve or task to perform. Telling a Story Visually

Step 1: Define theScenario

Step 1: Define the Scenario (cont.)

Examples of scenarios and animations are described below.

Scenario TypeScenario Animation

StoryA cat is stuck in a tree and needs help getting down.A man climbs up a tree to save the cat.

Lesson Students have trouble memorizing chemistry symbols.A timed matching game to match chemistry symbols with their definitions.

ProcessA demonstration of how to change a car tire.Virtual tools to show you how to change a tire on a virtual car.

GameAn airplane flies through the sky but should not hit objects in its path.An interactive game to fly an airplane around objects in the sky.

Telling a Story VisuallyOptional activity:
Talk about some examples of scenarios from the following categories: Theatrical plays and literature

Subjects in school

Simulation or demonstrations you have participated in

Games you have played


A storyboard details each scene of your animation.
It includes the following components:

ComponentDefinition Example

ObjectA moving or non-moving character that you position and/or program to move and act Animals, cars, people, trees

Scene The place (or world in Alice) where your story occursPark, library, school, home

Actions The instructions for how each object should act in the scene Walk 2 meters, turn left, say Hello!

User interactionsThe ways in which the user can manipulate the objects in the animation Keyboard commands or mouse clicks to make objects move

Design specificationsHow the objects and scenery should look in the animationSize, position, location, color



Step 2: Design a Storyboard (cont.)

There are two types of storyboards: Visual a series of illustrated images that represent the main scenes in the animation

Textual detailed, ordered list of the actions each object performs in each scene in the animation

A storyboard can be created on paper, or using digital tools such as a word processing program, paint or drawing program, or presentation program.

In computing, a textual storyboard is called an algorithm: a list of actions to perform a task or solve a problem.Telling a Story Visually

Telling a Story VisuallyStep 2: Design a Storyboard (cont.)

Visual Storyboard Example

Boy and girl sit on park bench. Boy walks away and leaves his phone behind.

Girl notices 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 Storyboard Example

Do in orderBoy and girl sit on park bench. Boy stands up and walks away, leaving his mobile phone on the park bench. Girl turns to look at 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 park bench and says, Oh thank you!


Flowchart the storyboard so that you can organize the process of the animation's actions, and ensure each flows logically.

Boy leavesphone on benchGirl says: Hey, youforgot your phone.Girl does nothing

False

True

EndBoy stops and turns around.Boy comes backTo bench and says Thank you.Boy keeps walking

Flow charts are used by programmers to think out how their code will flow; this is especially useful when handling conditions.

Flowchart BasicsTriangle This shape indicates a decision pointRectangle This shape indicates a process to be completed; this could be a calculation or execution of a statement.Elongated circle Ends the program

A second example; this to work through with students. Have the students provide the flowchart for:

If I see a spider, then I will scream, "YAAHHHHAA!"; otherwise, I will not scream (i.e., do nothing).

Ask: What is the:Decision point

True result

False result

Telling a Story VisuallyStep 3: Program the Animation

After completing your visual and textual storyboards you program your animation in Alice.

Your storyboard identifies the design specifications for the animation (how objects appear, move, speak, interact, etc.)

Your program code provides the run-time instructions to Alice.

Step 3: Program the Animation

Telling a Story VisuallyStep 4: Run the Animation

When you finish programming your animation, you run and test the animation to ensure proper execution. 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.

Step 4: Run the Animation

Telling a Story VisuallyStep 4: Run the Animation (cont.)

Test and debug your animation frequently. Below is a list of debugging tasks you may consider: Adjust the direction, distance, and duration that objects move.

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

Change procedures (instructions in the code) that do not work as intended to ones that work better.

Resolve errors created by the programmer.


Creating a Scene by Adding and Positioning Objects

Creating a Scene by Adding and Positioning ObjectsWhat Will I Learn?

Objectives Identify all components of a scene for a given scenario

Define a gallery using Java programming terminology

Define classes and instances and give examples of both

Describe the value of saving multiple versions of an animation scene

Describe three-dimensional positioning axes

Describe the difference between precise positioning and drag-and-drop positioning

Use a one-shot procedural method to precisely position an object in a scene

Creating a Scene by Adding and Positioning ObjectsInitial Scene

To create an animation you first create an initial scene.

An initial scene has three components: Template that provides the sky, ground, and light

Non-moving scenery object(s) that provide the setting

Moving object(s) that provide the action

The initial scene is the first scene in your animation where you set up your animation's objects and background template.

Creating a Scene by Adding and Positioning ObjectsInitial Scene (cont.)

ExampleHere are the components of an ocean floor scene.

Fish are acting objectsThe coral is a scenery objectThe ocean floor is a template

Creating a Scene by Adding and Positioning ObjectsDevelop a Scene

Steps to develop an initial scene:Create a new project and select a template.

Locate classes in the gallery.

Add instances of one or more classes to a scene.

Save the project.

Position the instances within the scene.

Creating a Scene by Adding and Positioning ObjectsStep 1: Create a New Project

To set up an initial scene follow these steps: Start Alice 3.

In the dialog box, select the Templates tab.

Select a template, then click OK.

In the File menu, select Save As...

Name the project.

Save the project.

Creating a Scene by Adding and Positioning ObjectsStep 1: Create a New Project (cont.)

Use this dialog box to select a Template.

Creating a Scene by Adding and Positioning ObjectsStep 1: Create a New Project (cont.)

Use this menu option to save your project.

Creating a Scene by Adding and Positioning ObjectsStep 2: Locate Classes

After a template is selected, the code editor is displayed (the default view). Use the Setup Scene button to switch to the scene editor as it contains the tools needed to edit your scene.

In the scene editor, you can:Select objects to add to the scene from the gallery

Position objects in the scene using the Handles palette

Edit an object's properties using the Properties panel

Run (play) the animation

Access the Code editor

Creating a Scene by Adding and Positioning ObjectsStep 2: Locate Classes (cont.)

This is an example display of the Scene Editor.

15234


A gallery of classes is available with many objects you can add to your scene. You can browse folders or search by keyword.

The gallery is a collection of 3D models that can be inserted into the scene.


Within a class folder in the gallery, select the specific class you want to add to the scene.

A class contains the specifications that define the appearance and movement of a 3D object, such as a frog, cat, or tree. Instructions are provided to Alice3 for how to create and display an object from that class in your scene. Classes are grouped into folders, such as Animals, People, City, etc. All objects within a class have common properties, such as appearance and movement.


ExampleA class could be a type of bird, such as a chicken. Every time a chicken is added to a scene, it has the same basic properties of the chicken class: two legs, two wings, feathers, and the ability to fly.

Creating a Scene by Adding and Positioning ObjectsStep 3: Add Instances

Once you select a class, you can either drag an instance of the class into your scene with your mouse or simply click and let Alice add the instance to the center of your scene.

An instance is an object from a class once it is added to the scene.

Creating a Scene by Adding and Positioning ObjectsStep 3: Add Instances (cont.)

Select the chicken class from the gallery. Use the mouse to drag the object to the scene. The object becomes an instance of the Chicken class. Now, you can modify its properties and program the chicken instance to perform tasks.

Chicken Class

Instance of Chicken


With an instance, you can: Use all of the properties in its class

Change its properties

Program it to perform new tasks

Save it to use in other projects


When you add an instance to the scene you can accept the default name provided by Alice or specify a new instance name. Providing unique instance names will help you to assign actions to the correct objects in the scene.

Alice preferences can be set to automatically name instances of the same class with an incremental number.

Creating a Scene by Adding and Positioning ObjectsStep 4: Save the Project

Save projects frequently at various points throughout your animation development. Alice 3 will remind you to save your project.

To save a project:Select File

Select Save As...

Select the location to save the project (e.g., computer, file server, memory stick)

Enter project name

Click Save

Creating a Scene by Adding and Positioning ObjectsStep 4: Save the Project (cont.)

If you want to use the same scene to create several different animations, save multiple versions of the project at different points of development, giving the versions different names.

By using a saved version of a scene to create a new animation, you save time already spent creating and positioning objects in the scene, and can go straight to programming the instructions for how objects should move and interact.

Creating a Scene by Adding and Positioning ObjectsStep 5: Position Objects

Once instances are added to a scene, you need to position them how you want them to appear when the animation starts.

This includes:Direction the object should face

The object's orientation relative to other objects in the scene

The object's position

The position of the object's sub-parts (arms, legs, head)

Creating a Scene by Adding and Positioning ObjectsStep 5: Position Objects (cont.)

All objects: Have 3D coordinates on an x, y, and z axis

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

Have sub-parts that can move

Move relative to their center point

Can be positioned by moving the axes


Objects move relative to their own orientation, or sense of direction.

ExampleAn object facing backward, programmed to move forward 2 meters, moves 2 meters towards the back of the scene.


Ways to position an object:Imprecise: Drag and drop with cursor

Precise: Enter values for the x, y, and z coordinates

or

Use a procedural method


To position using a drag and drop method:Select the object, or sub-part of object, with the cursor

Select a handle style

Position object with cursor (rings that surround the object may be used to manipulate the object)

Handle TypeDescription

DefaultSimple rotation and movement

RotationRotate about the x, y, and z axes

MovementMove along the x, y, and z axes

ResizeChange size of the object and stretch it along the x, y, and z axes


Handle Styles Used to Position Objects


You can use the four handle styles to position an object's sub-parts as well.

Select the instance, then its sub-part. Use the rings around the subpart to position it.


To position by entering coordinate values:In the Properties panel, locate the Position property.

Enter values in the x, y, and z axes.

The object will automatically re-position to the coordinates.


To position using a one-shot procedure:Right click on the object in the scene editor.

Select Procedures.

Select the procedure.

Enter the argument values.

The object will automatically move based on the procedure and arguments selected.

Note that one-shot procedures are used to make a scene adjustment. The procedure does not execute when the Run button is executed.

A procedure is a set of instructions, or programmed code, for how the object should perform a task.


Using Procedures

Using ProceduresWhat Will I Learn?

Objectives Toggle and describe the visual difference between the scene editor and code editor

Correlate storyboard statements with program execution tasks

Identify the correct procedure to move an object in a scene

Use procedures to move objects in a scene

Add Java programming procedures to the code editor

Demonstrate how procedure values can be altered

Add a control statement to the code editor

Use random numbers to randomize motion

Using ProceduresPrepare to Program

To prepare to program, use a top-down development approach: Define the high-level scenario for the animation.

Document the actions that take place in the scenario, step-by-step, in a textual storyboard. Doing this helps you gain a thorough understanding of all of the actions that need to occur in the animation.

Create a table where you match the storyboard steps to the exact instructions that you need to program in Alice 3.

Review the table at several points during the animation's development to ensure you are creating it correctly and on-track to completion. Revise the table as necessary throughout the animation's development.

A textual storyboard is an organized list of the sequential tasks that the program will execute in the animation.

Using ProceduresPrepare to Program (cont.)

Review this example textual storyboard:

Do the following steps in orderChicken walks byCat turns to look at ChickenCat says, Dinner time!Chicken says, Oh no!Chicken turns to rightDo the following steps together Chicken walks away quicklyCat walks away quickly



Create a table to match the storyboard actions to the programming instructions needed for the animation.

Storyboard ActionProgram InstructionsOrder of Instructions

Do in order

Chicken walks byChicken moves forward 2 metersCat looks at chickenCat turns to face chickenCat says, Dinner time!Cat says Dinner Time!Chicken says, Oh no!Chicken says Oh no!Chicken and cat turn rightChicken turns right .5 metersCat turns right .125 metersCat chases ChickenChicken move forward 2 metersCat move forward 2 meters Do together


Note that the object being programmed changes. Ensure that the correct object is selected when choosing a programming instruction.

Storyboard ActionProgram InstructionsOrder of Instructions

Do in order

Chicken walks byChicken moves forward 2 metersCat looks at chickenCat turns to face chickenCat says, Dinner time!Cat says Dinner Time!Chicken says, Oh no!Chicken says Oh no!Chicken and cat turn rightChicken turns right .5 metersCat turns right .125 metersCat chases ChickenChicken move forward 2 metersCat move forward 2 meters Do together


Consider grouping the programming instructions together logically and inserting comments into your program to help organize your programing tasks.

//chicken and cat movementChicken walks byChicken moves forward 2 meters

Cat looks at chickenCat turns to face chicken

//chicken and cat speakingCat says, Dinner time!Cat says Dinner Time!

Chicken says, Oh no!Chicken says Oh no!

//chicken and cat movement awayChicken and cat turn rightChicken turns right .5 metersCat turns right .125 meters

Cat chases ChickenChicken move forward 2 metersCat move forward 2 meters


Once the objects are added to the scene in the scene editor, you can use one-shot procedures to precisely position them for the initial scene, or starting point, of your animation.

When positioning objects in a scene, a one-shot procedure is a piece of program code that is executed once to define a single movement for an object in the scene editor. Alice 3 has a set of these procedures available for each class.


To call a one-shot procedure for an object, right-click on the object, select the procedure from the drop-down list, and specify the procedure arguments. The object will immediately move based on what you specified.

Using ProceduresWriting the Animation Program

Once you have positioned the objects and are ready to write the animation program, from Scene View, click Edit Code to display the code editor.

Using ProceduresWriting the Animation Program (cont.)

A scene can have multiple actors. Always make sure you are creating a programming instruction for the correct actor.

Just below the scene view window in the code editor, there is an instance pull down menu.

Use the instance pull down menu to select the actor, or object, for which you want to specify a programming instruction.


For example, if you have a pajama fish and a clown fish in your scene, and you want the pajama fish to move forward choose the pajama fish in the instance menu before creating the programming step to move forward.


To create a programming instruction for a specific object, click and drag the programming instruction into the myFirstMethod area of the code editor.


Below the instance pull down menu is the Methods Panel containing three tabs that organize the Procedures, Functions, and Properties for the object selected in the instance pull down menu: Procedures tab: initially displays all of the pre-defined procedures for an object.

Functions tab: displays all of the pre-defined functions for an object.

Properties tab: displays all of the properties of an object.

Switch between the tabs in the Methods Panel to select a procedure, function, or object property.

Using ProceduresProgramming Statements

The Procedures tab: Displays a pre-defined set for each class

Displays procedures declared for the class

Procedure examples:Move

Turn

Roll

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.

Using ProceduresProgramming Arguments

There are two components that follow the name of the object in a programming statement: Procedure name

Procedure arguments

Programming arguments initially display with ??? to indicate the location at which the argument will be placed.

ProcedureArguments

Using ProceduresProgramming Arguments (cont.)

Arguments are selected after the procedure is dragged into the code editor using cascading menus.

Argument types can include:Direction

Amount

Duration

Target

Text

An argument describes how to perform the procedure.

Using ProceduresPrograming Arguments (cont.)

Use the menus to select the appropriate argument for a procedure. You may need to simply select a placeholder argument that can be changed later.

Using ProceduresProgramming Arguments (cont.)

To change an argument use the menu accessed by clicking the down pointing arrow to the right of the argument value. Select the applicable option from the argument list.

Using ProceduresExecuting A Program

Click the Run button to execute the programming instruction.

Using ProceduresObject Direction

An object can move in six directions:Up

Down

Forward

Backward

Right

Left

Object direction is egocentric. For example, if an object is facing you, and you specify an instruction for the object to turn left, the object will turn to its left, not to your left.

Using ProceduresMove Procedure

The move procedure moves the object in all six directions. You select the direction and distance to move.

Find a demonstration for this exercise in the iLearning, Section 0 Course Resources section. Refer to Section 2 title Section Examples

Demonstration title: S02L04_Example_Move.

The below code can be used to review the Move method:

Using ProceduresMove Toward Procedure

The move toward procedure moves the object toward another object. You select the object to move, the object to move toward and the distance the object will move.

Find a demonstration for this exercise in the iLearning, Section 0 Course Resources section. Refer to Section 2 title Section Examples.Demonstration title: S02L04_Example_Move Toward.

The below code can be used to review the move toward method:

In this example the Alien moves toward the table.Amount - We can experiment with the distance moved by selecting different amounts; the greater the amount, the greater the object moves.

Time We can also experiment with the rate of speed that the Joey moves. Select the More instruction and select different durations.

Using ProceduresMove Away From Procedure

The move away from procedure moves the object away from another object. You select the object to move away from, and the distance to move.

The below code can be used to review the move away method:

Using ProceduresMove To Procedure

The move to procedure will move an object the distance to the center of the target object. You select the object to move to, and the program calculates the distance for you.

You may want to use additional procedures to adjust the position of the moving object so it does not stay in the center of the other object.


Demonstration title: S02L04_Example_Move_To.

Why is the Alien in the center of the sofa? The move to procedure is oriented to the objects' center. After running the animation you will see the center of the Alien moves to the center of the sofa.

This can be corrected by using the move command, to move the object up. (The delay command is not required.)

Using ProceduresMove and Orient To Procedure

The move and orient to procedure will move an object the distance to the center of the target object. Additionally, it adjusts the moving object's orientation to match the orientation of the target object.

You select the object to move to, and the program calculates the distance for you as well as adjusts the object's orientation.


Demonstration title: S02L04_Example_Orient_To.

The below code can be used to review the orient to method:

(The delay command is not required)

Using ProceduresDelay Procedure

The Delay procedure will halt an object for a specific number of seconds. You select the number of seconds to delay until the next procedure is executed.

In this example, the clock delays one second, then the hour hand on the clock rolls to the left 0.25 meters.


Demonstration title:, S02L04_Example_Delay.

The below code can be used to review the Delay method

Using ProceduresSay Procedure

The Say procedure will create a call out bubble with text to make an object appear to talk. You can use the pre-defined text or choose to annotate your own text.


Demonstration title:, S02L04_Example_Delay.

The previous slide displays code.

Upon dropping the Say tile, you are prompted for the text type; select Custom TextString.

Upon the value prompt, type your text.

Using ProceduresRotation Procedures

There are two procedures for rotating objects:Turn

Roll

The turn procedure rotates objects on their center point:Left

Right

Forward

Backward

The roll procedure rolls objects on their center point: Left

Right

Using ProceduresTurn and Roll Procedures Compared

The object below rotates (turns) on its center point, right and left.

The object below rotates (rolls) on its center point, right and left.

Stationary

Right Turn

Left Turn

Stationary

Right Roll

Left Roll

Using ProceduresRoll Procedure Example

Roll Right and Left Example:

Some objects have sub-parts that are also movable. In this example, the pocket-watch object has hour and minute hand sub-parts. The sub-parts may be animated to roll on the clock's center point.

Using ProceduresExamining Sub-part Rotation

Rotation can be applied to an entire object, or select parts (sub-parts) of the object.

Above, the object's sub-part (its head) displays rings; the rings show the sub-parts' range of motion.

Find a demonstration for this exercise in the iLearning, Section 0 Course Resources section. Refer to Section 2 title Section Examples. Demonstration title: S02L04_Example_Turn_2

The object's sub-part may be selected from the Instance selector, click the arrow.Once selected, then motion may be added.

1

2

3

Using ProceduresEdit Programming Statements

You use the drag-and-drop method to bring procedures into the code editor. You can reorder your objects using drag-and-drop also. There is a dotted area to the left of the object name. Use this dotted area to drag-and-drop without changing an argument's value.

Using ProceduresEdit Programming Statements (cont.)

Right click on programming statements to delete them.

Using ProceduresControl Statements

Procedures listed in the code editor will execute sequentially unless instructions are given to the program to execute in a different manner. These instructions are referred to as control statements. Control statements define how to execute a sequence of programming statements in a manner other than sequentially.

Examples: Do in order: Execute statements in sequential order; referred to as sequential control

Do together: Execute statements simultaneously

Count: Execute statements a specific number of times

While: Execute while a condition is true

Using ProceduresControl Statements (cont.)

Control statement tiles are located below the programming statements you have entered into the code editor. You can enter control statements before or after programming statements are entered into the code editor.

Example 1: you can enter programming statements into the code editor, run the program, and then determine you want two procedures to execute at the same time. You can then drag a do together control statement into your code editor and move the two procedures into the control statement.

Example 2: you can pre-determine that you want two programming statements to execute simultaneously. You can drag a do together control statement into your code editor and then create the two procedures within the control statement.

Using ProceduresStep 1: Insert Control Statement

Drag-and-drop the first control statement into the code editor.

Using ProceduresStep 2: Select Instance

Select the correct instance object from the instance pull down menu.

Using ProceduresStep 3: Enter Procedure

Drag the first procedure into the control statement in the code editor.

Using ProceduresStep 4: Select Argument Values

Select the values for the arguments to create the complete programming statement. Test as necessary.

Using ProceduresStep 5: Repeat Steps 1-4

Repeat steps 1-4 until all of the programming statements are entered into the control statement.

Using ProceduresStep 6: Run the Animation

Test that the animation works as intended at run-time.

Using ProceduresStep 7: Edit Programming Statements

It may take several attempts to get the animation to work as desired. Edit programming arguments as necessary. These steps are often referred to as testing and debugging.

Using ProceduresDebug the Animation

You may run your animation many times, making adjustments to the arguments after each execution. This refinement is referred to as debugging and testing.

Be sure to save often while debugging your program.

Using ProceduresRandom Numbers

Random numbers are a sequence of numbers generated by the computer with no pattern in their sequence. For example: 15674

-6934022.1133

03

Computers require random number generation for:Security: Randomly generated passwords

Simulation: Earth science modeling (e.g., erosion over time)

Random Numbers (cont.)

In the real world, animals do not move in straight geometric lines. They change direction, even if slightly, as they walk, swim and fly.

Random numbers may be utilized in the distance argument of a procedure, so that an object moves in a less predictable manner that appears more lifelike. Examples:

The floating motion of a fish

The flying motion of a bird

Using Procedures

Using ProceduresRandom Numbers (cont.)

When you use random numbers you specify a low and high value for the range of numbers from which to pull a randomized number.

Examine the example below. An up and down move procedure has been established for the clownFish. You replace the placeholder value with the Random option.


You choose the argument containing the ??? placeholders.

Then you specify the values desired from the list of available values or by specifying a custom decimal number for each range value.

NextRandomRealNumberInRangeCustom Decimal Number


Be sure to specify both the minimum and maximum range values.


When the animation is run, the fish will move a random amount up and down.


Declaring Procedures

Declaring ProceduresWhat Will I Learn?

Objectives Describe inheritance and how traits are passed from superclasses to subclasses

Describe when to implement procedural abstraction

Demonstrate how to declare a procedure

Identify and use procedural abstraction techniques to simplify animation development

Declaring ProceduresInheritance

A dalmatian is a type of dog. When a dalmatian puppy is born, it inherits two types of characteristics:All of the characteristics of the dog class (or superclass), including four legs, two eyes, fur, and the ability to bark.

All of the characteristics of the dalmatian dog class (the subclass, which is a subset of the dog class), including white fur, black spots, etc.

Dog Class(Superclass)

Dalmatian Class(Subclass)


Declaring ProceduresInheritance (cont.)

Just like animals, objects inherit the characteristics of their class, including all of the class's procedures.

When a dalmatian object is created, it inherits a set of procedures, functions, and properties from the Quadruped class and Dalmatian subclass that you can view in the code editor.

Inheritance means that each subclass inherits the methods and properties of its superclass.


Declaring ProceduresInheritance (cont.)

Click on the class hierarchy drop-down menu in the code editor to view the list of classes and subclasses in your animation. Select a class to view its inherited procedures and other properties.


Declaring ProceduresProcedural Abstraction

An object, or several objects, may perform the same repetitive motions. For example, a school of five fish may swim together. It takes a lot of procedures to program this swim movement for each fish, and takes up a lot of space in myFirstMethod.

Declaring ProceduresProcedural Abstraction (cont.)

Sometimes, default procedures needed to perform an action are not available for an object. For example, a bird may need to fly, but there is no default fly method available for bird objects.

Many procedures are required to accomplish this action, which takes up a lot of space in myFirstMethod.


Review existing code or the textual storyboard to identify and plan procedures to declare in your program.

Separating out motions into their own procedures can: Simplify code and make it easier to read

Allow many objects of a class to use the same procedure

Allow subclasses of a superclass to use the procedure

Procedural abstraction is the concept of making code easier to understand andreuse. An example of this is to remove repetitive or lengthy programming statements from myFirstMethod and put them in their own procedures to make the code easier to read, understand, and reuse by multiple objects, and in some cases, multiple classes.


To identify which parts of code could benefit from declaring a procedure, look for the following: Motions that do not have a default procedure, such as a bird flying. This requires programming it to flap its wings repeatedly while simultaneously moving forward.

Motions that need to be used by multiple objects or classes, such as all quadrupeds in the animation needing to know how to hop up and down.

Singular motions that require many programming statements that take up a lot of room in myFirstMethod, such as a person moving many body parts to walk. Moving these procedures into their own walk procedure would overall make the code easier to read.

Declaring ProceduresProcedural Abstraction Example 1

In the following storyboard, the bird flies by turning its shoulders and moving forward simultaneously. This repetitive motion could be extracted into its own flying procedure.

Do together Bird turns right shoulder backward Bird turns left shoulder backward Bird moves forward Do together Bird turns right shoulder forward Bird turns left shoulder forward Bird moves forward ...

Do together Bird flies Bird moves forward...

Declaring ProceduresProcedural Abstraction Example 2

In the following code, each bunny moves up and down in order to simulate a hopping motion. This repetitive motion that needs to be used by all bunny objects could be pulled into its own hop procedure.

Declaring ProceduresDefault Features of Code Editor

The code editor has several default features that are important to understand when declaring a procedure.

The myFirstMethod tab is displayed by default when the code editor is opened.

Declaring ProceduresDefault Features of Code Editor (cont.)

By default, the MyScene class tab is displayed, which sets up the initial scene and the objects in it. The MyScene tab represents the MyScene class which calls the myFirstMethod when the Run button is selected.

Declaring ProceduresClass Hierarchy Menu

The class hierarchy menu displays all of the classes in your program. Select a class to view its default properties.

Declaring ProceduresClass Hierarchy Menu (cont.)

Remember the role that inheritance plays in procedures. Selecting a superclass, such as MySwimmer, allows you to declare a procedure that can be used by all MySwimmer subclasses, such as MyClownFish.

Declaring ProceduresDeclare A Procedure

To declare a procedure: Select the class that should inherit the procedure from the class hierarchy. Remember that all subclasses beneath the class will inherit the procedure as well (subclasses indicated by a + or ++ next to the class name).

Declaring ProceduresDeclare A Procedure

Click the Add Procedure... button.

Declaring ProceduresDeclare A Procedure (cont.)

Specify a name for the procedure, then click OK.

Declaring ProceduresDeclare A Procedure (cont.)

A new tab will open with the name of the procedure. This is where the new procedure will be coded.

Declaring ProceduresAdd Procedure to myFirstMethod

As you code the procedure, you will debug it often. A helpful tip is to add the new procedure to myFirstMethod before coding. Then, you can click the Run button to test the procedure as you code it.

To add the procedure to myFirstMethod:Click the Back to MyScene button.

Declaring ProceduresAdd Procedure to myFirstMethod (cont.)

Click the myFirstMethod tab.


Select the instance to code from the drop-down menu.


In the Procedures tab, locate the declared procedure. The instance inherited this procedure from the MySwimmer superclass.

Drag the procedure into myFirstMethod.

Declaring ProceduresEdit Declared Procedures

Once the procedure is declared, you can add programming statements to it, and edit as necessary. To edit the declared procedure: Select the class where the procedure was declared from the class hierarchy drop-down menu.

Declaring ProceduresEdit Declared Procedures (cont.)

Click the Edit button next to the procedure name.


Create or edit the code in the procedure.

Click the Run button to test. Debug as necessary.


When finished programming the procedure, click Back to MyScene.


Continue to code the animation. Edit the animation's code and declared procedures, and create additional procedures, as necessary.

Declaring ProceduresIdentify Opportunities for Declared Procedures

As you code, continue to identify where you could implement procedural abstraction techniques to declare procedures. In the code below, the fish needs to bob up and down. A separate bob procedure could be declared.


Using Control Statements and Functions

Using Control Statements and FunctionsWhat Will I Learn?

ObjectivesDefine multiple control statements to control animation timing

Create an animation that uses a control statement to control animation timing

Recognize programming constructs to invoke simultaneous movement

Use functions to control movement based on a return value

Create programming comments

This lesson references example files. The example files are located in iLearning, Section

0 Course Resources section. Refer to Section 2 title Section Examples

Students should now:1. Go to iLearning Section 0 Resources section2. From Section 2, locate and click-on the URL entitled Section Examples3. Save the zip file to a location you will remember4. Extract the files to a location you will remember.

Using Control Statements and FunctionsEditing Arguments

When a procedure tile is dropped into the code editor, its arguments may be changed, or further defined, to control the object's movement and timing.

ObjectDirectionAmountDurationA computer program requires arguments to tell it how to implement the procedure. Examples of Alice 3 arguments are: object, direction, direction amount, and time duration.Procedure

Using Control Statements and FunctionsEditing Arguments (cont.)

Use the arrows next to the argument's value to display the menu and select a new value.

Using Control Statements and FunctionsEditing Arguments (cont.)

In the Instance menu, you can select or change the object to program.

The Methods Panel will display all of the available options for the object.

You can also select the arrow next to the object's name to select a sub-part, if it has any.

Using Control Statements and FunctionsSimultaneous Movements

Do In Order is the default sequential control statement in the code editor. This statement executes procedures in sequential order. For example:Object turns right, then

Object turns left, then

Object rolls right

However, sometimes objects (and their sub-parts) need to move together at the same time, such as for walking or sitting motions, which requires the Do Together control statement.

Using Control Statements and FunctionsSimultaneous Movements (cont.)

To create the walking motion with a bi-pedal object, a series of procedures and Do Together control statements are required. Each bipedal object may walk a little differently and require different coding to walk properly.

Practice walking forward slowly. How do the subparts of each of your legs move as you walk forward?

You can document this in a textual storyboard.

Find a demonstration for this exercise in the iLearning, Section 0 Course Resources section. Refer to Section 2 title Section Examples. Demonstration title: S02L04_Example_Simultaneous_1


Textual Storyboard for Walking Motion

Left hip turns forward Do TogetherWhole body moves forward Left hip turns backward Right hip turns forward Left shoulder turns leftRight shoulder turns rightDo TogetherWhole body moves forward Left hip turns forward Right hip turns backwardLeft shoulder turns rightRight shoulder turns left...



To program the walking motion for a person: Drag the Do Together tile into the code editor.

Insert the procedures into the Do Together.



Examine this code for a simple walking motion.


Using Control Statements and FunctionsVehicle Property

Another type of simultaneous movement is to have one object act as a vehicle of another. This means that the two objects are synchronized and move together.

Examples of this relationship:A dog walks alongside a person

A person rides a camel or horse

A camera follows around a helicopter to shoot the scene from the helicopter's point of view

When one object is set as a vehicle of another using the setVehicle procedure, if you program the vehicle object to move, the rider object will automatically move with it.

Using Control Statements and FunctionsVehicle Property (cont.)

ExamplesThe child is positioned on the camel. Then, the camel is set as the vehicle of the child. When the camel is programmed to move, the child will stay on top and move with the camel.


Examples (cont.)The helicopter is set as the vehicle of the camera. When the helicopter moves around the scene, the camera films the scene from the helicopter's perspective.


To assign an object as a vehicle of another object:1. Determine the vehicle and the rider.

2. Select the rider object with your cursor.

RiderVehicle


3. From Procedures tab in the Methods Panel, drag the setVehicle programming instruction into the code editor.

4. Select the vehicle object from the menu.


5. Insert the procedures to make the vehicle move. The rider will move along with the vehicle.

Note: The code includes establishing the camera as a vehicle to the UFO object. Adding the camera as a vehicle to an object can add a new dimension to your animations.


If at some point during the animation you want the rider to no longer be connected with the vehicle: Drag another setVehicle procedure into the code editor at the point the rider should get off the vehicle.

Set the vehicle to this (you are setting the vehicle of the rider back to the scene).

Continue programming your animation.

Note: The code includes establishing the camera as a vehicle to the UFO object. Adding the camera as a vehicle to an object can add a new dimension to your animations.

Using Control Statements and FunctionsFunctions

Programming an object's motion requires precision: very specific instructions to ensure the object acts exactly as you intend.

Precision may be achieved using trial-and-error. For example, you may continuously adjust the distance that the dog moves to the tree, and test the procedure over and over, until it moves and stands perfectly next to the tree.

However, there is an easier way to program the distance that an object moves. Alice 3 provides functions that can provide information about an object, such as its depth, the direction it is facing, or its distance to another object.

Using Control Statements and FunctionsFunctions (cont.)

Functions provide precise answers to questions, such as: What is the distance between the helicopter and the ground?

What is the height of the cat?

What is the width of the owl?

Functions answer questions about an object, such as its height, width, depth, andeven its distance to another object.

Experiment with students using trial and error to find the exact distance to the front of the ramp.


Functions for an object can be found in the Methods Panel by selecting the Functions tab. View each object's functions in the code editor by selecting the object from the instance menu, then selecting the Functions tab.

To use a function, select and drag a function tile onto an argument of an existing procedure in the code editor.


For example, we want the lion to move directly to the rock without having to manually determine the distance between the lion and the rock.

Steps: Identify the moving object and the target object. Select the moving object from the instance menu.


Steps (cont.): Drag the move procedure into the code editor.

Select any placeholder arguments for direction and distance (the distance value will be changed in the next step).

From the Functions tab, drag the getDistanceTo tile onto the highlighted distance value.


Steps (cont.): Select the target object. To verbalize this procedure you can say the lioness will move forward to the rock the distance amount determined by the getDistance function.


Steps (cont.): Click the Run button. Notice the lion moves to the center of the rock at run-time.


The lion should land near the rock, but not in the center of it. To avoid the collision, you can use math operators to reduce the distance from the moving object to the target object.

To verbalize this example you can say the lioness will move forward to the rock (Z) the distance amount determined by the getDistance function (X) minus the amount determined by calculating the width of the rock (Y) divided in half.

LionessRock

X = Get Distance Lioness to Rock

Y = Get Width of Rock

Z = X (Y / 2 )


Steps: 1. Click the outer arrow next to the function argument.

Select Math.


Steps (cont.): Select the getDistanceTo subtraction option containing the placeholder ??? symbols.

Select the distance amount for the placeholder.

Run the animation to test the distance the object moves at run-time.


A precise way to avoid a collision is to remove the length of the moving object from the function.

RockLion moves forward

Lion

Lion Depth

Distance from lion to rock


To remove the length of the moving object from the function: Drag the moving object's getDepth function onto the highlighted distance value.

Run the animation to test the complete programming statement. Adjust with additional math calculations if necessary.

Using Control Statements and FunctionsComments

Remember to include comments above each segment of programming statements.

Comments: Help humans understand what your program does

Describe the intentions of the programming instructions

Do not affect the functionality or behavior of instances

Using Control Statements and FunctionsComments Steps Reviewed

To enter comments: Drag and drop the comments tile above a code segment

Write comments that describe the sequence of actions in the code segment

In large programs it is not uncommon to create segment comments before creating programming instructions.


Using the IF and WHILE Control Statements

Using the IF and WHILE Control StatementsWhat Will I Learn?

ObjectivesIn this lesson, you will learn how to: Use the IF control statement to effect execution of instructions

Use the WHILE control statement to create a conditional loop for repetitive behavior

Using the IF and WHILE Control StatementsControl Statements

Control statements are pre-defined statements that determine the order of execution for instructions.

For example:Do In Order, where procedures are executed sequentially

Do Together, where procedures are executed simultaneously

Using the IF and WHILE Control StatementsControl Statements Nested

Control statements may be nested, meaning that one or many are embedded within another.

F

Using the IF and WHILE Control StatementsControl Statements IF and WHILE

Additional control statements are:IF control statementA statement executes, or does not execute, dependent on the result of a condition

Also known as conditional execution

WHILE control statement A statement, or block of statements, are run repeatedly

Also known as repetition

Using the IF and WHILE Control StatementsIF Statement

If it rains today, then I will wear a rain coat. Otherwise, I will wear a sweater.

The above may appear to be a simple decision, but to a programmer this is a decision based on a condition.

Let's interpret this condition as a process flow.

A process flow is a graphical representation of a process model. Process flows use shapes to represent the actions in the model.

Using the IF and WHILE Control StatementsIF Statement Flowchart

If it rains today, then I will wear a rain coat. Otherwise, I will wear a sweater.

If it rains today, thenDo this:Wear rain coatOtherwise, do this: Wear sweater

False

True

End

Using the IF and WHILE Control StatementsIF Statement Flowchart (cont.)

To apply the process flow to Alice 3 consider the following:If the mysterious, invisible cheshire cat walks into the dog, then the cheshire cat appears and says Excuse me!; otherwise, the cheshire cat continues walking.

If cat collides with dog thenDo this:Cat appears and says, Excuse me!Otherwise, do this: cat continues to walkand be invisible

False

True

End

Using the IF and WHILE Control StatementsIF Statement Flowchart (cont.)

The important factor to consider when using the IF construct in Alice is that you must specify a true or false value for the IF construct when you first drag the tile to the code editor. You can choose either argument as a placeholder because you will change the value to be an actual statement. Consider this portion of the example:If the mysterious, invisible cheshire cat walks into the dog.... You create an IF construct and choose the true placeholder value. You then replace the true value with a programming statement that determines if the collision between the cat and the dog did in fact occur. If the collision does occur then the IF value is true and the IF statements are executed. Otherwise the Else statements are executed.

Using the IF and WHILE Control StatementsCreating an IF Statement

Steps to use the IF statement include:Insert the initial motions that happen before the collision. In this example: The cat is invisible (set opacity = 0.0).

The cat moves forward the distance to the dog.

The dogs wag their tails and hop.

.

Using the IF and WHILE Control StatementsCreating an IF Statement (cont.)

Steps to program IF statement (cont.): Drag and drop the IF statement tile into code editor. Notice the format of the control statement.

Select True condition.

.


Steps to program IF statement (cont.): Select the object to collide (cheshire cat) from Instance menu.

In the Functions tab, drag the isCollidingWith function onto the True condition.

Select the target object to collide with (dog).

.


Steps to program IF statement (cont.): Insert the procedures that will be executed if the condition is true (if) and if the condition is false (else).

Run the animation and debug as necessary.

.

Using the IF and WHILE Control StatementsIF Statement Steps Summarized

To summarize the IF control structure steps:You select the control structure (IF) tile

You choose the True conditional option

You specify the True condition

You specify the actions to occur if the condition is true

You specify the actions to occur if the condition is false

You execute the program to observe the conditional behavior

You debug and test until the conditional actions execute as desired

.

Using the IF and WHILE Control StatementsWHILE Statement

Loops are used when a program requires one or more procedures to execute repeatedly. A loop can be infinite (continue forever) or conditional (stops upon a condition).

Examples Infinite loop: The hour and minute hands on a clock continue rolling (unless the batteries run out!).

Conditional loop: The propeller of an airplane turns while the airplane is moving or flying. Once the airplane stops, the propeller stops turning.

Using the IF and WHILE Control StatementsWHILE Statement Flowchart

The While control statement performs conditional loops.

Example: The Queen continues to move forward, unless it collides with the Playing Card. If the Queen collides with the Playing Card, she stops and turns around to face the camera.

The While control will perform instructions while a condition is true; otherwise it will stop the instructions.

While the Queen is collisionfree Queen stops and turns aroundEnd

Queen moves forward continuously

True

False

Using the IF and WHILE Control StatementsWHILE Statement Placeholder

Consider the portion of the While statement that reflects the true condition while the queen is collision free.To create the While loop construct using the While tile you must specify an initial true or false placeholder value that is then replaced with the actual condition.

Using the IF and WHILE Control StatementsWHILE Statement Steps

Steps to program the While control statement: Select the moving object from the Instance menu.

Drag the While control statement tile into the code editor. Select the True condition.

Using the IF and WHILE Control StatementsWHILE Statement Steps (cont.)

Steps to use the While statement (cont.): Position the moving object so it is facing the target object to collide with (this will help us test if the while statement works when we run the animation).

Drag the move procedure into the While statement. Select forward and 1.0 for the distance.


Steps to use the While statement (cont.): Drag the IsCollidingWith function of the queen object onto the true argument and select the target object (playingCard in this example).
Note that in this example we are specifying the While condition after specifying the action to occur. It is perfectly fine to program either part of the While loop first.


Steps to use the While statement (cont.): From IsCollidingWith menu, select the NOT isCollidingWith argument to invoke the opposite action.


Steps to use the While statement (cont.): Drag the turnToFace procedure below the While condition. Select this.Camera as the target.


Steps to use the While statement (cont.): To test this program, move the Queen to different positions. Include a path that collides with the playing card, and one that does not. Run the animation and debug as necessary.


Using Expressions

Using ExpressionsWhat Will I Learn?

ObjectivesIn this lesson, you will learn how to: Create an expression to perform a math operation

Interpret a math expression

Using ExpressionsExpressions

If you have taken a math course, you may recall mathematical expressions defined as a combination of values that, when arranged correctly, will result in a final value.

For example: 2+2=4

The expression is created using two values (2 and 2) and the operator (+). Combining the values with the operator result in the new value, 4.

Using ExpressionsExpressions (cont.)

Expressions are created in Alice 3 animations using built-in math operators. They are:Add (+)

Subtract (-)

Multiply (*)

Divide (/)

Math operators are available in the same menu where you select values for the:Amount and Duration arguments in procedures

Get Distance functions


Select the Math option to view the math operators available for the distance argument.


Select the Math option to view the math operators available for the getDistanceTo function's argument.


How to use math operators to create an expression:Summarize the problem

Identify timing or distance problem

Consider a solution

Consider an expression

Code the expression

Debug the expression


Problem: In Alice 3, the person object walks forward to a rock and stops in the center of the rock, rather than near the rock. This is because the getDistanceTo function calculates the distance to the center of the target object.

To make the animation look more realistic, the person should not stop in the center of the rock (because this would not happen in the real world!).


Problem Solving Steps Summarize the problemPerson walks through a rock object, and stops at the rock's center.

Identify timing or distance problemDistance

Consider a solutionUse getDistance function and reduce the distance traveled by some amount.

Consider an expressionPerson getDistanceTo rock minus 0.5, 1 or 2, etc, (i.e.subtract whole number) OR

Person getDistanceTo rock minus getDepth from rock (i.e., subtracting with getDepth)


Code an expression to solve the distance problem. Steps:Drag a move procedure into the code editor (direction = forward, distance 1 meter).

Go to the Functions tab. Drag the getDistanceTo function onto the distance argument.


Steps (cont.):Select the target object that the person should move to.


Steps (cont.):From the getDistanceTo tile, click the outer-most down arrow icon, then select Math.


Steps (cont.):Select getDistanceTo - ???

Select a number to reduce the distance by, or select Custom DecimalNumber... to enter a number.


Steps (cont.):Type in an amount to reduce the distance, then click OK.

Review the final expression.


During the testing and debugging process, you may need to adjust the value of the expression.

If you need to adjust the value to subtract from the distance argument, click the arrow next to the value, and select a new value.


A more precise way to ensure that the moving object lands directly next to the target object without going to the center of the object is to subtract the depth of the target object from the expression.

This saves time so you don't have to guess at the distance, as well as repeatedly test and debug various values that you enter into the expression.


Steps:From Functions tab, drag the getDepth tile onto the distance value, 3.5.

Select the target object (the Asteroid).


Steps:Test and debug the final expression by running the animation and adjusting the values of the expression accordingly.

Using ExpressionsIntrepret an Expression

Expressions can be interpreted by reading an expression from left to right. Consider this example:

Begin evaluating the expression by recognizing the instances that are specified. In this example we see that there is a teaTray and cave instance. We can also determine by reading all of the code that there is also a madHatter instance involved in this animation. The madHatter instance is moving with the teaTray instance.

Using ExpressionsIntrepret an Expression (cont.)

Examine the visual associated with this expression. You can now visualize that the madHatter and teaTray instance are moving towards the cave. Will they go into the cave?

Using ExpressionsIntrepret an Expression (cont.)

The expression tells us that the teaTray is moving forward towards the cave. The distance between the teaTray and cave is being determined by the getDistanceTo function. The distance being moved is being reduced by half of the width of the cave (width divided by 2). The width of the cave is being determined using the getWidth function.

To interpret an expression you may need to draw a picture or write down the values you know before formulating the expression: Z = x (a / b)Z = distance moved; x = distance from tray to cave; a = cave width; b = 2


Using Variables and Keyboard Controls to Manipulate Motion

Using Variables and Keyboard ControlsWhat Will I Learn?

ObjectivesUnderstand variables and how they are used in programming

Define the value of a variable based on a math calculation

Use keyboard controls to manipulate an animation

Complete an animation

Test an animation

Using Variables and Keyboard ControlsVariables

There are times when we need to create a place to store information about objects in our animations. For example: The number of times a procedure should be executed

An object's properties, such as its size and color

A variable is a place in memory where data of a specific type can be stored for later retrieval and use by your program. Each variable is given a unique name to make it easy to find. We can then use it to store and retrieve data.

Grey Color

1.17 Meter Height

0.46 Meter Width

1.0 Opacity

Using Variables and Keyboard ControlsVariables (cont.)

A variable is like a container that stores a specific type of data for later retrieval and use by your program. You can declare variables by naming them and selecting the type of data to store in them.

Numbers (1, 0.254)

Boolean values (true or false)

String (Hello world!)

List of objects in Alice 3

Variable

Using Variables and Keyboard ControlsVariables (cont.)

Object properties are also variables that store information about the object, such as an object's color, width, height, and depth.

Width Variable

Using Variables and Keyboard ControlsLocal Variables

Local variables are declared (created) in your code. They are useful to declare when you need to: Assign the same value to multiple procedures, such as have a set of procedures move the same distance amount

Be able to easily change that value so the change cascades to all of the procedures using it in the program

Using Variables and Keyboard ControlsLocal Variables (cont.)

For example, you may create a Spins variable that is initialized to a whole number value, 3.

This variable is then dragged into distance argument of each bunny's turn procedure so that each bunny spins around three times.

If you want the bunnies to spin more, you can change the initialized value of the Spins variable, and all of the procedures will automatically update with that value.


When you create a variable you specify the variable type, the name of the variable, and the initial value for the variable. The example below shows you that the preview section of the dialog box is indicating that youve created a variable with an whole number type, named Spins, that has an initial value of 3.

Area whereyou specifythe variableinformation


Steps to create a local variable: Drag the local tile into the code editor.

Select the value type.


Alice supports several types of data.

Data TypeDescription

Decimal NumberUsed to perform arithmetic and to set the value of a procedure's arguments. Examples: 0.1, 2.25, 98.6.

Whole NumberUsed to perform arithmetic and to set the value of a procedure's arguments. Examples: 1, 459, 30.

BooleanOne of two values, true or false; usually data of this type is the result of tests that compare one thing to another.

ObjectAny object in Alice 3 like a cat, dog, person, etc.

ClassesThe classes of objects in your animation. Examples: MyBiped, MyScene, MyQuadruped.

TextStringA String of characters such as hello and goodbye.

OtherThings like sounds, colors and other special values.


Name the variable.

Select the value to initialize (set) the variable to.

Click OK.


For the existing procedures in your code, drag the local variable name tile (Spins in the example below) into the distance arguments.

All of the bunnies will turn the distance specified in the Spins variable.


You may then decide to change the distance that one of the objects move. For example, the bunny2 object should spin two more revolutions than the other bunnies.

A math calculation can be used to change the value of the Spins argument for this object.


Use the following steps to change an argument using a variable and a math calculation.In the selected procedure, right-click on the arrow next to the argument.

Select Math.


Select the math operator.

Select the value for the math calculation.


Run the animation to test. Revise the calculation as needed.

Using Variables and Keyboard ControlsKeyboard Controls

To make your animations more interactive, you can insert keyboard controls to allow the viewer to control one or more objects in the animation.

With keyboard-controlled animations, you may:Create animated scenes where the user controls an object to interact with other objects.

Create animated games where the user is required to control an object to win the game.

Using Variables and Keyboard ControlsKeyboard Controls Example

In Alice 3, you can associate procedures to keys on your keyboard. When the viewer clicks a keyboard key, the procedure assigned to the keyboard key is executed.

For example, in a submarine animation, selecting the right arrow key on your keyboard will turn the submarine right.

In programming, keystrokes, or mouse clicks, are an event. Coding the events to handle each procedure is referred to as event handling.

Using Variables and Keyboard ControlsMyScene Activation Listeners

Event listeners are established to listen for keyboard input. Animation tasks can be associated with a keystroke. When the event listener hears keyboard input the associated animation tasks are executed.Event listeners are created at the MyScene class level. You select the MyScene tab to add an event listener to the Scene Activation Listener. There are 4 event listener types:Scene Activation / Time

Keyboard

Mouse

Position/Orientation

Using Variables and Keyboard ControlsMyScene Keyboard Listener

There are 4 keyboard listener types:addKeyPressListener()

addArrowKeyPressListener()

addNumberKeyPressListener()

AddObjectMoveFor(???)

To add an addKeyPressListener() to listen for, and react to, a keyboard keystroke you specify the listener type and then add the programming arguments for the listener construct. A listener construct requires you to specify a conditional statement that can be read as if the true condition of the x key being pressed exists, then do something.

Using Variables and Keyboard ControlsKeyboard Listener Steps

Steps to assign a procedure to a keyboard listener are listed below.In the Instance menu in the code editor, select the object to control.

Using Variables and Keyboard ControlsKeyboard Listener Steps (cont.)

Click the MyScene tab.

From the Procedures area, click the Edit button next to InitializeEventListeners.


In the InitializeEventListeners tab that opens, click the Add Event Listener button.


Select Keyboard.

Select addArrowKeyPressListener.


Drag If control statement tile onto drop statement here field, and select True condition.

Drag e isKey: ??? procedure onto True condition.


Select arrows, then Up.


Drag a move procedure into the If condition. Select Forward for direction and 1 meter for amount.


Drag another If control onto the Else argument.



Drag e isKey: ??? procedure onto True condition.

Select arrows, then Down.


Drag a move procedure into the If condition. Select Backward for direction and 1 meter for amount.


Drag another If statement onto the Else argument.



Drag e isKey: ??? onto True condition.

Select arrows, then Right.

Drag a turn procedure into the If condition. Select Right for direction and 0.25 for amount.


Drag another If statement onto the Else argument. Select True condition.



Select arrows, then Left.

Drag a turn procedure into the If condition. Select Left for direction and 0.25 for amount.


The submarine is now programmed to move left, right, forward, and backward using the arrows keys on a computer keyboard.


But what about moving up and down? Since there are only four arrow keys on a keyboard, we need to program two other keys for the up and down motion. Steps: Click the Add Event Listener button.

Select Keyboard, then addKeyPressListener.

For each event, repeat steps 3 through6. This will be repeated for Down, Right and Left arrow keys.

Hint: Use Turn command for right and left; and set amount to .01

Depending on your event handling, the final false (i.e., else) statement will remain empty: if user does not select a key, then nothing happens.


Steps (cont.): Drag If control statement tile onto drop statement here field, and select True condition.




Using Variables and Keyboard ControlsKeyboard Controls (cont.)

Steps (cont.): Drag e isKey: ??? onto True condition.

Select letters N-Z, then X.

Drag a move procedure into the If condition. Select Up for direction and 1 meter for amount.





Steps (cont.): Drag another If statement into the Else argument.



Select letters N-Z, then Z.

Drag a move procedure into the If condition. Select Down for direction and 1 meter for amount.





Click the Run button to run the animation, then click your cursor on the Run window. The object will stand still until the keyboard keys are used to make it move.




Using Variables and Keyboard ControlsAnimation Checklist

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

The checklist is a programmer's final check to ensure their animation is its best.

SummaryQuestions?

Topics covered:


Creating a Scene by Adding and Position Objects

Using Procedures

Declaring Procedures

Using Control Statements and Functions

Using the IF and WHILE control statements

Using Expressions

Using Variables and Keyboard Controls to Manipulate Motion

The checklist is a programmer's final check to ensure their animation is its best.

Click to edit the outline text formatSecond Outline LevelThird Outline Level

Fourth Outline LevelFifth Outline LevelSixth Outline LevelSeventh Outline LevelEighth Outline LevelNinth Outline Level


alice workshop v1_presentation_slides_v1.1

Education