1. Alice and Media Computation August 2009
Animation
Storyboard  Code
Steve Cooper
Barbara Ericson

2. Traditional Problem Solving in CS
Read and understand the problem or task specification
Design a solution (develop an algorithm)
Implement (code)
Test
Revise, as needed

3. Designing a Solution in Alice
To create a design, we borrow the idea of storyboards from professional animators at Disney, Pixar, etc.

4. Recall…. Princess Escape
A princess has been grounded by her father (a wizard). Being a rather rebellious princess, she has ed the local dragon taxi service. The dragon will fly to the princess and she will climb aboard the dragon to escape from the castle – to meet some friends at the village dance club.

5. Visual Storyboards

6. Textual Storyboard (pseudo code)
Do in order
dragon takes off
dragon flies to princess
princess climbs on dragon's back
dragon and princess escape
knight shakes his arm (and sword) in protest

7. Implementing a program in Alice
Create the program instructions using the drag and drop editor
We recommend an incremental development approach
write a method
test it
and so on….

8. Stepwise refinement - 1 How can a dragon "take off"? Do in order
dragon takes off
dragon flies to princess
princess climbs on dragon's back
dragon and princess escape
knight shakes his arm (and sword) in protest
How can a dragon "take off"?
Do together
dragon moves up
dragon flaps wings

9. Stepwise refinement - 2 How can a dragon flap its wings? Do together
dragon moves up
dragon flaps wings
Do together
dragon flap left wing
dragon flap right wing

10. Stepwise refinement - 3 How can a dragon flap its left wing?
Do together
dragon flap left wing
dragon flap right wing
How can a dragon flap its left wing?
Do in order
Do together
dragon close left wing rolls right
dragon far left wing rolls right
dragon close left wing rolls left
dragon far left wing rolls left
Is this too detailed?
Probably, but you get the picture…

11. Create an object method
Slides are actually demonstrated with Alice, but are included in the slide set for later reference.

12. Drag the code into the editor

13. The complete method

14. Calling a method

15. Your turn! Create the flapLeftWing method
Create an analogous flapRightWing method
Pause to allow participants to do create these two methods.

16. Create a flapWings method
Demo this slide.

17. Your turn! Create the flapWings method
Create a takeOff method, where the dragon moves up 2 meters and flaps its wings twice
What changes will you need to make to the duration= parameter to get the animation working?
Pause to let participants create these two methods.

18. Create a fly method
Demo slides 18-19

19. Saving out a new class Renaming the class Saving it
Importing it for a different world

20. Textbook More information – Alice Storyboards Coding
Chapter 2, Section 1
Coding
Chapter 2, Section 2
Class-level Methods & Inheritance
Chapter 4, Section 3