16
Storyboarding and Program Design Alice

Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Embed Size (px)

Citation preview

Page 1: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Storyboarding and Program Design

Alice

Page 2: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Step 1: Design

Decide on the problem to be solved Design a solution

We will use a storyboard design technique, commonly used in the film industry

Page 3: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Example The scenario (description of the story/game)

is: First Encounter

After traveling through space, a robot-manned craft has just made a landing on a moon. The robot is on the moon and has set up a camera so earthbound scientists in Houston can view this historic event. The camera view shows the robot, the lunar Lander and some nearby rock formations. Suddenly an alien peeks out from behind a rock, surprising the robot. The robot looks around, spots the alien, and walks over to take a closer look. The alien is frightened and hides behind the rocks.

The problem is: How can we create this animation?

Page 4: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Create Initial World

Page 5: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

StoryboardOption 1: Sketches

Page 6: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

StoryboardOption 2: Screen Shots

Initial scene

The spiderRobot walks toward the alien

Page 7: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

StoryboardOption 3: Text Form A textual storyboard is like a "to-do" list. The Learning to Program in Alice textbook puts

a textual storyboard in a box: Below is an algorithm in psuedocode (half

English-half code)

Do the following steps in order alien moves up alien says "Slithy toves?" robot's head turns around robot turns to look at alien Do together robot moves toward the alien robot legs walk alien moves down

Page 8: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Demo

FirstEncounter

Page 9: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Step 2: Implementation

To implement the storyboard, translate the actions in the storyboard to a program.

Program (a.k.a. script) a list of instructions to have the objects perform

certain actions in the animation

Page 10: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Break it down!

Creating a list of instructions is also known as creating a method

Often a program has many methods (even thousands!)

Often a method uses a variable A variable is just like in Math—a namea different object. Example:name = “Alice”Alice is now stored in a variable called name.

Page 11: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Action Blocks in Alice

Sequential Action Block – actions occur one after another

Simultaneous Action Block

-- actions occur at the same time

Page 12: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Concepts in this first program

Program instructions may have arguments Example: for the move instruction, the arguments

we used in this example were direction distance

DoTogether and DoInOrder blocks can be nested one inside the other

Page 13: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Testing An important step in creating a program is to run it –

to be sure it does what you expect it to do. Read, design, implement, test We recommend that you use an incremental

development process: write a few lines of code and then run it write a few more lines and run it write a few more lines and run it…

This process allows you to find any problems (bugs) and fix them as you go along.

Getting rid of bugs is called degugging

Page 14: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Comments While Alice instructions are easy to

understand, a particular combination of the instructions may perform an action that is not immediately obvious.

Comments are used to document the code – explain the purpose of a particular segment of the program to the human reader.

//This slide is to show comments

Page 15: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Assignment #3: Snow People

1. Create a snow world. Place three snow people in the Snow World. Two snowwoman should be facing one another and a snowman is behind them.

2. A snowman is trying to get a snowwoman’s attention. The snowwoman should be talking to a friend.

3. The snowman should say “Ahem”. The snowwoman should turn toward the snowman. The snowman should then blink his eyes. (Make sure you store the word “Ahem” in a String variable.)

4. The snowwoman should blush (face turns red). Then she shows she is not interested by turning and walking away.

5. The snowman then hangs his head in dissapointment.

Page 16: Storyboarding and Program Design Alice. Step 1: Design Decide on the problem to be solved Design a solution We will use a storyboard design technique,

Assignment #4 Island1. Open the Island Application from the

previous lesson2. Make the fish swim in a circle around

the island. 3. At some point in time when it is

swimming the fish should jump out of the water and then under the water.

4. Eventually the fish should return to it’s original position