Alice workshop v1_presentation_slides_v1.1

Telling a Story Visually

Copyright © 2012, Oracle. All rights reserved.


What 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

Copyright © 2012, Oracle. All rights reserved. 2


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

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

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.



Problem 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
Step 1: Step 2: Step 3: Step 4:
Identify the Develop a Implement Test and
Problem Solution the Solution Revise the
Solution

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



Animation 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 a
seamless animation. Alice3 does all of the
work necessary to render the animation
based on what instructions you provided
for how the objects should act.



Step 1: Define the Scenario Step 1:
Define the
Scenario
Professional animators begin the process by
developing a scenario—or story—that gives the
animation a purpose.

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

Examples
• Story representing a conflict and resolution
• Lesson to teach a math concept
• Process to simulate or demonstrate
• Game to play



Step 1: Define the Scenario (cont.)
Examples of scenarios and animations are described
below.
Scenario Type Scenario Animation
Story A cat is stuck in a tree A man climbs up a tree
and needs help getting to save the cat.
down.
Lesson Students have trouble A timed matching game
memorizing chemistry to match chemistry
symbols. symbols with their
definitions.
Process A demonstration of how Virtual tools to show you
to change a car tire. how to change a tire on a
virtual car.
Game An airplane flies through An interactive game to fly
the sky but should not hit an airplane around
objects in its path. objects in the sky.



Step 2: Design a Storyboard Step 2:
Design a
Storyboard
A storyboard details each scene of your animation.
It includes the following components:
Component Definition Example

Object A moving or non-moving Animals, cars, people,
character that you position trees
and/or program to move and act
Scene The place (or “world” in Alice) Park, library, school,
where your story occurs home
Actions The instructions for how each Walk 2 meters, turn
object should act in the scene left, say “Hello!”
User The ways in which the user can Keyboard commands
interactions manipulate the objects in the or mouse clicks to
animation make objects move
Design How the objects and scenery Size, position,
specifications should look in the animation 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

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

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



Visual Storyboard Example

Boy and girl sit on Girl notices mobile Girl says out loud
park bench. Boy walks phone. She thinks, “Hey! You forgot your
away and leaves his “Hey! That boy forgot phone!” Boy turns
phone behind. his phone!” around and walks
back to bench. He
says, “Oh thank you!”



Textual Storyboard Example

Do in order
Boy 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.

True Boy leaves False
phone on bench

Girl says: “Hey, you
Girl does nothing
forgot your phone.”

Boy stops and
turns around. Boy keeps walking
Boy comes back
To bench and says
“Thank you.”

End



Step 3:
Step 3: Program the Animation 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 4: Run the Animation Step 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 (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 Objects

What 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



Initial Scene
To create an animation you first create an initial scene.

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

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



Initial Scene (cont.)
Example
Here are the components of an ocean floor scene.

Fish are
acting objects
The coral is a
scenery object

The ocean
floor is a
template



Develop a Scene
Steps to develop an initial scene:
1. Create a new project and select a template.
2. Locate classes in the gallery.
3. Add instances of one or more classes to a scene.
4. Save the project.
5. Position the instances within the scene.



Step 1: Create a New Project
To set up an initial scene follow these steps:
1. Start Alice 3.
2. In the dialog box, select the Templates tab.
3. Select a template, then click OK.
4. In the File menu, select Save As...
5. Name the project.
6. Save the project.



Step 1: Create a New Project (cont.)
Use this dialog box to select a Template.



Step 1: Create a New Project (cont.)
Use this menu option to save your project.



Step 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:
1. Select objects to add to the scene from the gallery
2. Position objects in the scene using the Handles palette
3. Edit an object's properties using the Properties panel
4. Run (“play”) the animation
5. Access the Code editor



Step 2: Locate Classes (cont.)
This is an example display of the Scene Editor.

4
2

3

5

1



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.



Example
A 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.



Step 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.



Step 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 Instance of
Class 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.



Step 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:
1. Select File
2. Select Save As...
3. Select the location to save the project (e.g., computer,
file server, memory stick)
4. Enter project name
5. Click Save



Step 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.



Step 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)



Step 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.

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



Ways to position an object:
1. Imprecise:
1. “Drag and drop” with cursor
2. Precise:
1. Enter values for the x, y, and z coordinates

or

2. Use a procedural method



To position using a “drag and drop” method:
1. Select the object, or sub-part of object, with the cursor
2. Select a handle style
3. Position object with cursor (rings that surround the
object may be used to manipulate the object)
Handle Type Description

Default Simple rotation and movement
Rotation Rotate about the x, y, and z axes
Movement Move along the x, y, and z axes
Resize Change 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:
1. In the Properties panel, locate the Position property.
2. Enter values in the x, y, and z axes.
3. The object will automatically re-position to the
coordinates.



To position using a one-shot procedure:
1. Right click on the object in the scene editor.
2. Select Procedures.
3. Select the procedure.
4. Enter the argument values.
5. The object will automatically move based on the
procedure and arguments selected.

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

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


Using Procedures


Using Procedures

What 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 Procedures

Prepare to Program
To prepare to program, use a top-down development
approach:
1. Define the high-level scenario for the animation.
2. 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.
3. Create a table where you match the storyboard steps
to the exact instructions that you need to program in
Alice 3.
4. 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.


Using Procedures

Prepare to Program (cont.)
Review this example textual storyboard:

Do the following steps in order
Chicken walks by
Cat turns to look at Chicken
Cat says, “Dinner time!”
Chicken says, “Oh no!”
Chicken turns to right
Do the following steps together
Chicken walks away quickly
Cat walks away quickly


Using Procedures

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

Storyboard Action Program Instructions Order of
Instructions
Do in order

Chicken walks by Chicken moves forward 2 meters
Cat looks at chicken Cat turns to face chicken
Cat says, “Dinner time!” Cat says “Dinner Time!”
Chicken says, “Oh no!” Chicken says “Oh no!”
Chicken and cat turn right Chicken turns right .5 meters
Cat turns right .125 meters
Cat chases Chicken Chicken move forward 2 meters Do together
Cat move forward 2 meters


Using Procedures

Note that the object being programmed changes. Ensure
that the correct object is selected when choosing a
programming instruction.
Storyboard Action Program Instructions Order of
Instructions
Do in order

Cat chases Chicken Chicken move forward 2 meters Do together


Using Procedures

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



//chicken and cat speaking



//chicken and cat movement away


Cat chases Chicken Chicken move forward 2 meters


Using Procedures

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.


Using Procedures

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 Procedures

Writing 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 Procedures

Writing 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.


Using Procedures

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.


Using Procedures

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


Using Procedures

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. Switch between the
• Properties tab: displays all of tabs in the Methods
the properties of an object. Panel to select a
procedure, function, or
object property.


Using Procedures

Programming 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 Procedures

Programming 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.
Procedure Arguments


Using Procedures

Programming 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 Procedures

Programing 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 Procedures

Programming 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 Procedures

Executing A Program
Click the Run button to execute the programming
instruction.


Using Procedures

Object 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 it’s left, not to your left.


Using Procedures

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


Using Procedures

Move 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.


Using Procedures

Move 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.


Using Procedures

Move 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.


Using Procedures

Move 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.


Using Procedures

Delay 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.


Using Procedures

Say 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.


Using Procedures

Rotation 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 Procedures

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

Stationary Right Turn Left Turn

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

Stationary Right Roll Left Roll


Using Procedures

Roll 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 Procedures

Examining 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.


Using Procedures

Edit 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 Procedures

Edit Programming Statements (cont.)
Right click on programming statements to delete them.


Using Procedures

Control 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 Procedures

Control 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 Procedures

Step 1: Insert Control Statement
Drag-and-drop the first control statement into the code
editor.


Using Procedures

Step 2: Select Instance
Select the correct instance object from the instance pull
down menu.


Using Procedures

Step 3: Enter Procedure
Drag the first procedure into the control statement in the
code editor.


Using Procedures

Step 4: Select Argument Values
Select the values for the arguments to create the complete
programming statement. Test as necessary.


Using Procedures

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


Using Procedures

Step 6: Run the Animation
Test that the animation works as intended at run-time.


Using Procedures

Step 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 Procedures

Debug 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 Procedures

Random 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)


Using Procedures

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

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.


Using Procedures

You choose the argument
containing the ???
placeholders.
NextRandomRealNumberInRange
Then you specify the values
desired from the list of
available values or by
specifying a custom decimal
Custom Decimal Number
number for each range value.


Using Procedures

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


Using Procedures

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


Declaring Procedures



What 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



Inheritance
A dalmatian is a type of dog.
When a dalmatian puppy is born, Dog Class
(Superclass)
it inherits two types of
characteristics:
• All of the characteristics of
the dog class (or
“superclass”), including four
legs, two eyes, fur, and the Dalmatian Class
ability to bark. (Subclass)
• 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.



Inheritance (cont.)
Just like animals, objects inherit
the characteristics of their class,
including all of the class's
procedures.
Inheritance means that each subclass inherits
the methods and properties of its superclass.

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 (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.



Procedural 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.



Procedural 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 and
reuse. 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.



Procedural 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 Do together
Bird turns right shoulder backward Bird flies
Bird turns left shoulder backward Bird moves forward
Bird moves forward ...
Do together
Bird turns right shoulder forward
Bird turns left shoulder forward
Bird moves forward
...



Procedural 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.



Default 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.



Default 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.



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



Class 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.



Declare A Procedure
To declare a procedure:
1. 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).



Declare A Procedure
2. Click the Add Procedure... button.



Declare A Procedure (cont.)
3. Specify a name for the procedure, then click OK.



Declare A Procedure (cont.)
4. A new tab will open with the name of the procedure.
This is where the new procedure will be coded.



Add 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:
1. Click the Back to MyScene button.



Add Procedure to myFirstMethod (cont.)
2. Click the myFirstMethod tab.



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



4. In the Procedures tab, locate the declared procedure.
The instance inherited this procedure from the
MySwimmer superclass.
5. Drag the procedure into myFirstMethod.



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



Edit Declared Procedures (cont.)
2. Click the Edit button next to the procedure name.



3. Create or edit the code in the procedure.
4. Click the Run button to test. Debug as necessary.



5. 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.



Identify 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



What Will I Learn?
Objectives
• Define 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



Editing 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.
Procedure

Object Direction Amount Duration

A 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.



Editing Arguments (cont.)
Use the arrows next to the argument's value to display the
menu and select a new value.



Editing 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.



Simultaneous 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.



Simultaneous 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.



Textual Storyboard for Walking Motion

Left hip turns forward
Do Together
Whole body moves forward
Left hip turns backward
Right hip turns forward
Left shoulder turns left
Right shoulder turns right
Do Together
Whole body moves forward
Left hip turns forward
Right hip turns backward
Left shoulder turns right
Right shoulder turns left
...



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

2. Insert the procedures into the Do Together.



Examine this code for a simple walking motion.



Vehicle 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.



Vehicle Property (cont.)
Examples
The 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.

Rider

Vehicle

2. Select the rider object with your cursor.



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.



If at some point during the animation you want the rider to
no longer be connected with the vehicle:
1. Drag another setVehicle procedure into the code editor
at the point the rider should get off the vehicle.
2. Set the vehicle to this (you are setting the vehicle of the
rider back to the scene).
3. Continue programming your animation.



Functions
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.



Functions (cont.)

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

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 (cont.)
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.



Functions (cont.)
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:
1. Identify the moving object and the target object. Select
the moving object from the instance menu.



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

3. Select any placeholder arguments for direction and
distance (the distance value will be changed in the
next step).
4. From the Functions tab, drag the getDistanceTo tile
onto the highlighted distance value.



Functions (cont.)
Steps (cont.):
5. 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.”



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



Functions (cont.)
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.”

Lioness Rock
X = Get Distance Lioness to Rock
Y = Get Width
of Rock
Z = X – (Y / 2 )


Functions (cont.)
Steps:
1. Click the outer arrow next to the function argument.

2. Select Math.



Functions (cont.)
Steps (cont.):
3. Select the getDistanceTo subtraction option containing
the placeholder ??? symbols.
4. Select the distance amount for the placeholder.
5. Run the animation to test the distance the object
moves at run-time.



Functions (cont.)
A precise way to avoid a collision is to remove the length of
the moving object from the function.
Lion moves forward
Rock Lion

Lion Depth

Distance from lion to rock



Functions (cont.)
To remove the length of the moving object from the
function:
1. Drag the moving object's getDepth function onto the
highlighted distance value.

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



Comments
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



Comments Steps Reviewed
To enter comments:
1. Drag and drop the
comments tile above a
code segment
2. 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



What Will I Learn?
Objectives
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



Control 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



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



Control Statements IF and WHILE
Additional control statements are:
• IF control statement
– A 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”



IF 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.



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

If it rains today,
then

True False

Do this: Otherwise, do this:
Wear rain coat Wear sweater

End



IF 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
True with dog False
then

Do this: Otherwise, do this:
Cat appears and says, cat continues to walk
“Excuse me!” and be invisible

End



IF 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.


Creating an IF Statement
Steps to use the IF statement include:
1. Insert the initial motions that happen before the
collision. In this example:
1. The cat is invisible (set opacity = 0.0).
2. The cat moves forward the distance to the dog.
3. The dogs wag their tails and hop.



Creating an IF Statement (cont.)
Steps to program IF statement (cont.):
2. Drag and drop the IF statement tile into code editor.
Notice the format of the control statement.
3. Select True condition.



4. Select the object to collide (cheshire cat) from
Instance menu.
5. In the Functions tab, drag the isCollidingWith function
onto the True condition.
6. Select the target object to collide with (dog).



7. Insert the procedures that will be executed if the
condition is true (if) and if the condition is false (else).

8. Run the animation and debug as necessary.



IF 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



WHILE 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.



WHILE Statement Flowchart
The While control statement performs conditional loops.

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

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.
While
the Queen is False
Queen stops and
collision End
turns around
free

True

Queen moves
forward continuously



WHILE 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.



WHILE 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.



WHILE Statement Steps (cont.)
Steps to use the While statement (cont.):
3. 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).
4. Drag the move procedure into the While statement.
Select forward and 1.0 for the distance.



5. 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.



6. From IsCollidingWith menu, select the NOT
isCollidingWith argument to invoke the opposite action.



7. Drag the turnToFace procedure below the While
condition. Select this.Camera as the target.



8. 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 Expressions

What Will I Learn?
Objectives
how to:
• Create an expression to
perform a math operation
• Interpret a math
expression


Using Expressions

Expressions
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 Expressions

Expressions (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


Using Expressions

Expressions (cont.)
Select the Math option to view the math operators available
for the distance argument.


Using Expressions

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


Using Expressions

Expressions (cont.)
How to use math operators to create an expression:
1. Summarize the problem
2. Identify timing or distance problem
3. Consider a solution
4. Consider an expression
5. Code the expression
6. Debug the expression


Using Expressions

Expressions (cont.)
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!).


Using Expressions

Expressions (cont.)
Problem Solving Steps
• Summarize the problem
– Person walks through a rock object, and stops at the
rock's center.
• Identify timing or distance problem
– Distance
• Consider a solution
– Use getDistance function and reduce the distance
traveled by some amount.
• Consider an expression
– Person 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)


Using Expressions

Expressions (cont.)
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.


Using Expressions

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


Using Expressions

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


Using Expressions

Expressions (cont.)
Steps (cont.):
5. Select getDistanceTo - ???
6. Select a number to reduce the distance by, or select
Custom DecimalNumber... to enter a number.


Using Expressions

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

7. Review the final expression.


Using Expressions

Expressions (cont.)
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.


Using Expressions

Expressions (cont.)
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.


Using Expressions

Expressions (cont.)
Steps:
• From Functions tab, drag the getDepth tile onto the
distance value, 3.5.

• Select the target object (the Asteroid).


Using Expressions

Expressions (cont.)
Steps:
3. Test and debug the final expression by running the
animation and adjusting the values of the expression
accordingly.


Using Expressions

Intrepret 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 Expressions

Intrepret 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?


Alice workshop v1_presentation_slides_v1.1

Alice workshop v1_presentation_slides_v1.1

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Alice workshop v1_presentation_slides_v1.1

Semelhante a Alice workshop v1_presentation_slides_v1.1 (20)

Mais de Muhammad Farooq

Mais de Muhammad Farooq (15)

Último

Último (20)

Alice workshop v1_presentation_slides_v1.1

Notas do Editor