animation programs alice. overview 2-step process for creating animations step 1: design step 2:...
TRANSCRIPT
![Page 1: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/1.jpg)
Animation Programs
Alice
![Page 2: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/2.jpg)
Overview
2-step process for creating animationsStep 1: Design
Step 2: Implementation
![Page 3: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/3.jpg)
Step 1: Design
Decide on the problem to be solvedOften the problem to be solved is given to you by your instructor, team leader, etc.
Other times, you get to make it up!
We will practice both
Design a solution We will use a storyboard design
![Page 4: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/4.jpg)
An example problem (scenario)
The scenario is: Several snow-people are outdoors, on a snow-
covered landscape. A snowman is trying to meet a snowwoman who is talking with a group of her friends (other snowwomen.) He says “Ahem" and blinks his eyes, trying to get her attention.
The problem is: How can we create this animation?
![Page 5: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/5.jpg)
Designing a solution
First decide on the objects that will be in the scene.Then, create a storyboard.
A "storyboard" is a representation of what actions are going to take place in the animationA storyboard can take two forms
sketches textual "to do" lists
![Page 6: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/6.jpg)
Sketch Objects: A snowman and a snowwoman (and possibly other snowpeople)
Opening Scene: a snowy scene
A quick sketch:
![Page 7: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/7.jpg)
A Storyboard
Initial scene Snowman tries to catch snowwoman’s attention
Snowwoman looks around
![Page 8: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/8.jpg)
Storyboard in Text Form
Animation Artists (for example, at Disney or Pixar Studios) sketch their storyboardsYou might not have such expertise, so here is a textual form that can be used:
This is like a "to-do" list.
Snowman turns to face snowwoman.
Snowman “makes eyes” and calls out to snowwoman.
Snowwoman turns around.
![Page 9: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/9.jpg)
Step 2: Implementation
Implementing an animation requires Setting Up the Initial Scene in Alice
Writing the Program (Script)
![Page 10: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/10.jpg)
Create Initial Scene
![Page 11: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/11.jpg)
Techniques and Tools
Mouse is used toset up the initial sceneapproximately position objects in the scene
Camera Navigation is used toset the camera point of view
Drop-down menu methods are used to resize objectsmore precisely position objects in the scene
Scene Editor's Layout Manager is used toobtain specific alignmentsposition one object relative to another object
![Page 12: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/12.jpg)
Writing A Program
"Writing" a program (script) a list of instructions to have the objects perform certain actions in the animation
![Page 13: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/13.jpg)
Writing the Program
Our storyboard (to-do list) is:
The idea now is to translate the design steps to program instructions.
Snowman turns to face snowwoman.
Snowman “makes eyes” and calls out to snowwoman.
Snowwoman turns around.
![Page 14: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/14.jpg)
Translating the Design
Some steps in the storyboard can be written as a single instruction
The snowman turns to face the snowwoman
Other steps are composite actions that require more than one instruction
The snowman tries to catch the snowwoman’s attention is two actions
Snowman says “ahem”
Snowman raises and lowers his eyes
![Page 15: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/15.jpg)
Actions
Sequential Some actions occur one after the other
first step (snowman turns to face snowwoman)
second step (snowman tries to get snowwoman’s attention)
SimultaneousOther actions occur at the same time
Snowman says "Ahem" and while simultaneously blinking his eyes
![Page 16: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/16.jpg)
Action Blocks in Alice
Sequential Action Block
Simultaneous Action Block
![Page 17: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/17.jpg)
Write the Animation Program
Will develop in class.
![Page 18: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/18.jpg)
Coding the first 2 steps
Things to note: Nesting of DoTogether and DoInOrder blocks
Arguments for the move instruction direction
distance
![Page 19: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/19.jpg)
Testing
An important step in creating a program is to run it – to be sure it does what you expect it to do.
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 and fix them as you go along.
![Page 20: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/20.jpg)
Comments
While Alice instructions are easy to understand, it is often desirable to be able to explain (in English) what is going on in a program
We use comments to explain to the human reader what a particular section of code does
![Page 21: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/21.jpg)
![Page 22: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/22.jpg)
![Page 23: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/23.jpg)
Assignment
Read Chapter 2 sections 1 and 2 Scenarios and Storyboards
A First Program
Read Tips & Techniques 2 Orientation and Movement Instructions
![Page 24: Animation Programs Alice. Overview 2-step process for creating animations Step 1: Design Step 2: Implementation](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c464ca/html5/thumbnails/24.jpg)
Lab 2
Exercises from 2-1 and 2-2