This tutorial exercise provides step-by-step directions for guiding you through designing and implementing a simple animation.  Here you will explore the different methods that can be used for each step of process as you follow along.  This will provide an overview of the problem solving process and teach you the basic process to get you started designing implementing and iterating an animation in Alice.

You will need to access other printed materials or have access to the alice.org website to view the how to content and resources called out within these materials.  These materials can be downloaded and printed for offline use from Alice.org

Don’t forget to save your projects frequently.

Brainstorming

First you will need to decide what story you are telling.  Some great resources for using as a starting point and getting the creative juices flowing are:

– Characters singing your favorite song or animating a music video
– Characters telling jokes (ex. A knock knock joke)
– Your favorite internet meme
– Funny or sentimental eCards
– Existing comics strips and cartoons
– Even a serious conversation or event

1. Find a source for your story or come up with a story idea of your own.

Write a Script and/or Draw a Storyboard

The first step to planning you program is to better understand what you are trying to animate.  Depending on which you are more comfortable with write a script or draw a simple storyboard for your story.  For this step you may need to print out the blank storyboard template or create your own.

2. Create a script for your story or/
a. Be sure to describe the scenery
b. Detail out the actions and dialogue for your story

3. Draw a storyboard of your story
a. Create frames that highlight key actions in your story
b. Add comments to add detail if necessary

Write an Algorithm Design and/or a Flow Chart

Next you will start to outline the specifics of your program through a textual algorithm design, a flow chart, or both.  

4. Write out a step by step set of directions focusing on highlighting the objects or characters in the story and the actions or events that take place
a. Focus on highlighting the objects or characters in the story and the actions or events that take place.
b. Be sure to note what happens in order and what happens at the same time
c. Be as detailed as you need to be clear about what you need to program

5. Diagram a flow chart of the events of your story giving each action a separate box
a. Connect the events or actions together in the order they occur with arrows if you need to represent multiple events happening at the same time by branching your arrows and bringing them back together 
b. You can expand each box and make a separate diagram to represent the action or event if it needs more detail for planning your program

Plan Your Scene

Review your storyboard or script and make sure you have a list of all the location, characters, and props you need to create your animation.  If needed draw a quick sketch of the scene to help plan for what you need to build.

6. Read through your script and algorithm design and or flow chart and account for all of the scene description and objects and characters required to support your story 

7. Review your storyboard looking for scenery information and read through your algorithm design and or flow chart and account for all of the scene description and objects and characters required to support your story

8. Do a quick scene sketch or floor plan for locating and planning the scene design

Build Your Scene

It’s time to build your scene.  Remember you are building the scene for the state that you want the world in at the beginning of your animation.  For the following steps, you may wish to watch the Videos or check the Quick Reference Guides for the How To:  Scene Editor Overview and related scene editor how to content.

9. Open Alice 

10. Choose the location template theme for your scene

11. Navigate to the Scene Editor

12. Place your characters and propos and set up your scene based on your design

13. Save the project.

Use Comments to Plan Your Program

Before starting to build your program use comments from the control panel to outline what you want to create.  For the following steps, you may wish to watch the Videos or check the Quick Reference Guides for the How To:  Code Editor Overview

14. Navigate to the Code Editor

15. Drag comment blocks from the control panel into myFirst Method

16. Outline your program based on your algorithm design creating separate comment blocks for each object and action to allow you to insert the code statements in between your comment blocks

17. Save the project.

Program Your Animation

To make the animation use the code editor to add code statements to myFirstMethod to program the actions and events that you have outlined in your comments.  For the following steps, you may wish to watch the Videos or check the Quick Reference Guides for the How To:  Code Editor Overview and related code editor how to content.

18. Build your program using the code editor
a. Insert code statements to build the actions that are outlined by your comments
b. Add, move, separate and remove comments as needed to enable you to build and document your animation
c. Don’t forget you can incrementally build your full story by working through small parts of the animation
d. Experiment with nesting do together and do in orders to get a set of movements that you like.  

19. Save the project.

Run Your Animation

Remember you can run and test your animation as often as you like.  Skip to this step whenever you have built enough of your program that you want to see if it is behaving as desired.

20. Save the project.  It’s a good idea to save the program before running in case a fatal error occurs.  Alice is designed to avoid this but this is also a point where Alice can cause computers to freeze so it is better to be safe than sorry.

21. Run your animation and see if there are any problems with the output
a. You can disable sections of the code to only execute parts of the animation by right clicking and enabling and disabling
b. You can also fast forward to areas of your code which may be necessary if disabling code means objects and characters are not in the right place to execute later animations

Iterate Till You Are Happy

The design process can be repeated as many times as you want till you are happy.  You can iterate through small components of the animation adding more as you go and troubleshooting existing designs.   Continue this process of defining the problem, thinking through the design solution, implementing and then testing until you have completed your animation and are happy with the results.

22. Repeat previous steps until happy!