Learn 

a bit about Computer Science  About Professor 
Duke Femmes Event Susan Rodger
with Prof. Susan Rodger
• This activity will introduce you to  • I’m in computer science because I like to solve puzzles, and I 
like solving all kinds of problems. In particular, I like to design 
programming with Alice version 3 and create educational software to help people learn. 
• Alice is free here:  www.alice.org • Learning programming is one way to solve problems. But 
computer science is much more than that. Computer science 
• If you want to learn more, see the free  is also about being creative in how you find efficient solutions 
tutorials link on this page: when a problem is really hard to solve. 
www.cs.duke.edu/csed/alice/aliceInSchools • I am married and have two boys, three cats and ten tanks of 
fish! I like to swim and three times swam in a one‐mile race in 
see the Alice 3 tutorials the ocean. I also like to hike and read books. 
SAVE OFTEN!!! SAVE OFTEN!!!

An Introduction to  Hello! I’m Alice, and I’m
going to teach you how to use the 
Alice 3 Alice 3 program. With Alice, you 
can make your own animations, 
using tons of different characters. 

From the Alice v. 2.4 By Jenna Hayes
Modified for Alice v. 3.1 by Lori Fuller
Modified for Alice 3.3 by S. Rodger
under the direction of Professor Susan Rodger
Duke University, February/August, 2018
SAVE OFTEN!!! SAVE OFTEN!!!
 After you click OK, your screen will look 
Starting Off like this:

•Our first step is to choose 
a background. 
•When you open Alice 3, a 
box will pop up that has 
different choices of 
background. It looks like 
the box to the right.
•Select the MOON 
background, because our 
world will be in space. 
•Click on MOON and then 
click OK. 

SAVE OFTEN!!! SAVE OFTEN!!!

Panel Sections for Alice 3.1
Saving your world
•Before we do anything else, let’s save our world. You should also 
always do this before you close out of Alice. 

•Click on File at the top left‐hand corner of your screen, and then 
click on Save As. 

SAVE OFTEN!!! SAVE OFTEN!!!

 Saving your world Adding objects to your world
•In the box that pops up, name your world spaceWorld, and save 
it in a place that you will be able to find again, such as in a 
MyProjects folder on your Desktop. 
•Now, we will add 
some objects to the 
world.
•In the Scene View, 
click on the Setup 
Scene button.

SAVE OFTEN!!! SAVE OFTEN!!!

Adding objects to your world Adding objects to your world
A new screen will appear, on which there is a selection of objects 
below the MOON screen that you can add into your world. This is 
called the Gallery. •In the list provided, select the 
Transport classes

•Select the Automobile classes. 

•Click on the new Humvee.

SAVE OFTEN!!! SAVE OFTEN!!!

 Adding objects to your world Adding objects to your world
•On the box that pops up, you may change the name. Be sure to use unique names if you  The humvee takes up most of your screen, but we will re‐size it.
are going to add more than one instance of the same object.
•Click OK to add the instance to the MOON scene.
•The humvee will appear in the center of the MOON scene. Yes, humvees can drive on 
the MOON.

SAVE OFTEN!!! SAVE OFTEN!!!

Adding objects to your world Adding objects to your world
• The humvee takes up most of your  • The humvee is not facing in the direction we 
need it to face.
screen, but we will re‐size it.
• Select the ROTATION button on the right‐
• Select the RESIZE button on the  hand side of the screen.
right‐hand side of the screen. • Move the cursor to the humvee and click 
• Move the cursor to the humvee and  and drag to turn the vehicle from the bottom 
circle.. 
click and drag to make it larger or 
smaller. In this case, make it smaller, 
we need more space on the MOON.

SAVE OFTEN!!! SAVE OFTEN!!!

 Adding objects to your world Adding objects to your world
•In the window that appears, you will need to build your astronaut. You may even 
make it look like you…
•Next, we are going to add an astronaut.
•Adjust life stage, gender, skin color, outfit should be astronaut suit, hair and face. 
•Click on the All Classes button on the Gallery section.  •One issue, which has been mentioned to the creators of Alice 3 , is that there is no 
•Select Biped classes. space helmet for the astronaut outfit. Let’s pretend you can now breath on the 
MOON.
•Click OK button when done.

SAVE OFTEN!!! SAVE OFTEN!!!

Adding objects to your world Adding objects to your world
This window will appear, and you may rename the instance.  You will need to resize the astronaut to fit the window and have size continuity 
with the humvee. Just as you did with the humvee, select the RESIZE button and 
Remember, if you are using more than one (maybe you’ve been 
click and drag to the size desired. And then, if necessary, select the ROTATION
cloned), name each with a unique name. Click OK when done. button and rotate the astronaut as needed. Use the DEFAULT button to move 
the object around the screen. Should look similar to the image below.

SAVE OFTEN!!! SAVE OFTEN!!!

 Now we have Review on positioning and adjusting 
added two objects to our  instances in the scene
world. The next step is to position
them! •Within the scene, select the object 
you want to position or adjust.
•The DEFAULT handle style allows you 
to move the instance on the screen.
•The ROTATION handle style allows 
you to rotate the instance on the 
given axis. 
•The TRANSLATION handle style 
allows movement up or down and 
forward or backward in the scene.
•The RESIZE handle style allows you to 
make the instance larger or smaller.

SAVE OFTEN!!! SAVE OFTEN!!!

Review on positioning and adjusting  The Undo button is your friend!
instances in the scene
•What if you make a mistake, like accidentally clicking on 
something and moving it or resizing it? 
•You may also Position the instance by  •You can click on the Undo button above the Code Editor to 
setting the X, Y, and Z points. undo the last thing you did. 
•Reminder, on the Mac, all three  •Use this button whenever you mess up, or want to get rid of 
points needed to be set before click  something you just did. I think this is redundant.
on Enter/Return button.
•You may also adjust the size of the 
instance by adjusting the Size: Width, 
Height, and Depth. 
•Again, on the Mac, I had to remain in 
the size field selected and press the 
Enter/Return key.

SAVE OFTEN!!! SAVE OFTEN!!!

 We have finished The Camera Markers
positioning our characters, so
now we can move on and start to •A Camera marker is a 
move our camera around! bookmark location to save the 
location of your camera view. 
This way, if you move your 
camera around, you can 
always get back to a certain 
position by moving to the 
Camera marker location. 
•Look to the right side of your 
screen, and find the Camera 
Markers arrow. Click the 
arrow to reveal the Add 
Camera Marker button.

SAVE OFTEN!!! SAVE OFTEN!!!

The Camera Markers The Camera Markers
• Alice has only one camera in a scene. The camera is moved around and repositioned for • It is highly recommended marking the starting location of the camera before moving the
close-up views and special effects. Because moving the camera is a common action when camera around in the scene. The camera can then be moved freely around the scene and
setting up a scene in the Scene editor, Alice provides a way to mark a camera position so can always be returned to its original position, using the marker.
as to create known camera positions in the scene.
• To create a starting location camera marker click on the Add Camera Marker button. A
• Each scene and camera angle is setup and rehearsed until you are happy with the dialog box will pop up. Enter a meaningful name for the marker, for example startView.
arrangements. The camera positions (location and orientation angle) are marked before any
actual filming begins. Below is an example of the camera position as set for the initial • When a name is entered, press OK and Alice will automatically create a camera marker
scene. object at the current location of the camera. The marker remembers not only the location
but also the camera’s orientation (the direction and angle at which it is pointed). This
information is commonly known as the camera’s viewpoint. Also, color coded.

SAVE OFTEN!!! SAVE OFTEN!!!

Moving the Camera The Camera Marker
•Let’s try moving the camera to get a close up of the astronaut.  •Move your camera until it is close to the astronaut’s face. Use 
the Undo button if you make any mistakes or don’t like the 
•Under your viewing screen, you should see a bunch of blue arrows.  result. Not too close…
•Let’s drop another Camera marker at the camera’s new 
•If you click on the arrows and drag your mouse in different directions, the 
camera will move in different ways. Use small adjustments. position, using the same steps as before, and label it Astronaut 
I found that the trackpad on the Mac works also… HeadShot.

SAVE OFTEN!!! SAVE OFTEN!!!

The Camera Marker The Camera Markers
•Add another Camera Marker for the humvee. 
•Move the cameras so you can only see the humvee in the  •To move from one camera view to the next using the Camera 
camera. Marker Window… 
•Add another Camera Marker and name it humveeView. •As you can see they are color coded.
•Click on the view you want to go to and click on the left 
camera button at the top left of the window. Then, click on the 
color of the camera view. Practice a few times and then return 
to the startView.

SAVE OFTEN!!! SAVE OFTEN!!!

 Camera Marker Conclusion Now that we
are done setting up our cameras,
we can start to animate the characters
•Now, right click on camera in the object list and set its view back 
in the world! 
to startView. Yes, that was mentioned on the previous slide.
•As the camera moves back into the start position, you can see the 
other camera placements. And they are color coded as they are in 
the Camera Marker window. 

SAVE OFTEN!!! SAVE OFTEN!!!

Methods/Procedures Methods/Procedures
•Click on the Edit Code button. •The Code Editor panel is where you will add the coding to 
•It should bring you to the main windows.  animate the objects.
•The Methods panel is where you will find the pre‐existing 
Procedures and Functions for the objects.
•And the Scene View is where you will see the animation 
evolve.

SAVE OFTEN!!! SAVE OFTEN!!!

 Selecting the object Adding Methods/Procedures
•To tell your astronaut to do 
•The method editor is where you  something, click on one of these 
can get the pre‐existing  methods, hold down your mouse 
procedures and functions to  button, and drag and drop the 
make your characters do things.  procedure into your Coding Editor. 

•Click and drag the astronaut 
•Your characters already know  (this.adultPerson) ‘say’ procedure to 
how to do certain things. the drop statement here position. 
Select ‘hello’ as the default.
•To select an object to animate,  •Add a move and set it for up 1 meter.
either click on the instance in the 
Scene View, or use the drop  •Add a turn right 1.
down menu next to ‘this’ (in this  See the sample programming statements in
•Add a move down 1 meter.
case) to select it.   the Code Editor
•Press the Run button.
SAVE OFTEN!!! SAVE OFTEN!!!

Adding an astronautWave Procedure Adding an astronautWave Procedure
•Click on the Class Tab.
•From the list, select the AdultPerson, which in this case is the astronaut.
•Click on the Add AdultPerson Procedure. •In the window, name this astronautWave.
•Click OK.

Class Tab

•This should bring you to the window now named astronautWave. See tabs at the 
top of the Code Editor.

SAVE OFTEN!!! SAVE OFTEN!!!

 Adding an astronautWave Procedure code Adding an astronautWave Procedure code
1. From the Procedure tab under the Methods  3.   From the Procedure tab under the Methods 
panel, click and drag ‘this turn…’ to the Code  panel, click and drag ‘this turn…’ to the Code 
Editor Editor
• From the ‘this’ click and locate the  • From the ‘this’ click and locate the 
getRightShoulder, and  getRightWrist, and 
• set the direction to Left at .4  • set the direction to Backward at 
meters.  .25 meters. 
• Set the duration to 1 second and  • Set the duration to 1 second and 
• set the animation style to Begin  • set the animation style to Begin 
and End Gently. and End Gently.

2.    From the Procedure tab under the Methods  4.    From the Procedure tab under the Methods 
panel, click and drag ‘this turn…’ to the Code  panel, click and drag ‘this turn…’ to the Code 
Editor Editor
• From the ‘this’ click and locate the  • From the ‘this’ click and locate the 
getRightWrist, and  getRightShoulder, and 
• set the direction to Forward to .25  • set the direction to Right at .4 
meters.  meters. 
• Set the duration to 1 second and  • Set the duration to 1 second and 
• set the animation style to Begin  • set the animation style to Begin 
and End Gently. and End Gently.
SAVE OFTEN!!! SAVE OFTEN!!!

Adding an astronautWave Procedure code Adding an astronautWave Procedure

You should now have 4 programming statements in the Code Editor.

• Above the Methods panel, you should 
see the panel with ‘this’ in it.

• Click on the down arrow and select 
this.adultperson from the list.

• You should now see the astronautWave
method now listed under the Procedure 
tab.

Select the myFirstMethod tab at the top of the Code Editor panel.

SAVE OFTEN!!! SAVE OFTEN!!!

 Adding an astronautWave Procedure Adding Keyboard Controls
• Click and drag the astronautWave procedure to the Code Editor, and place it  •Now we want to add keyboard controls to control the action in 
under the existing code. the animation.
•The first keyboard to add is for when the SPACE bar is pressed, 
the astronaut will perform the astronautWave procedure.
•To start, click on the intializeEventListeners tab at the top of the 
Code Editor panel.
•Click on the Add Event Listener tab.
• It should look like this… press the run button to try it out.

SAVE OFTEN!!! SAVE OFTEN!!!

Adding Keyboard Controls Adding Keyboard Controls

•Select Keyboard and then addKeyPressListener.  •The window should look like the one below.

SAVE OFTEN!!! SAVE OFTEN!!!

 Adding Keyboard Controls Adding Keyboard Controls

•Click and drag an If statement to the Drop Statement Here area. •Click and drag                                     onto the true to replace it. 
•Select true as the placeholder.

• Select the Custom

Key… and then press
the SPACE bar to add
it.

• The SPACE bar will be

pressed for the
astronaut to wave.

SAVE OFTEN!!! SAVE OFTEN!!!

Adding Keyboard Controls Adding Keyboard Controls
•You should now see the 
•Click on the ‘this’ just  astronautWave
above the Methods  procedure listed.
Panel and click the drop 
down arrow to select  •Click and drag the 
this.adultPerson. astronautWave
procedure into the spot 
in the If (top) drop 
statement here area.

•Should look like the 
image to the right. Test 
your program. Click Run
and then press the 
SAVE OFTEN!!!
SPACE bar. SAVE OFTEN!!!
 Add float Methods/Procedure Add float Methods/Procedure
•From the ‘this’ drop down menu, select this.adultPerson from 
•Let’s write another method. This method will have the  the list.
astronaut go up in the air and then float in a circle around the 
humvee.
•From the Class drop down 
menu, select ‘Scene’. It is the 
area where we need to build 
the float procedure.

•Select Add Scene Procedure 
from the list.

•Name the new procedure float.
SAVE OFTEN!!! SAVE OFTEN!!!

Add float Methods/Procedure Add float Methods/Procedure
•Click and drag the this.adultPerson move programming  •In the Do together click and drag a this.adultPerson say 
statement into the Code Editor panel.  statement. Type in “Wheeeeee!!!” using a custom string. (no 
quotes)

•Set the direction as Up 1.0 meters, duration to 1 second, and 
the animation style to Begin and End Gently.  •Click and drag a this.adultPerson turn statement from the 
Methods panel under the Orientation section.

•Drag a Do Together from the bottom panel below the Code  •For the turn, set the direction to Left 1.0 meters, asSeenBy 
editor and place it below the this.adultPerson move line. click and select humvee from the list, and set the animation 
style to Begin and End Gently.

SAVE OFTEN!!! SAVE OFTEN!!!

 Add float Methods/Procedure Add float Methods/Procedure
•For the last line of code for the float procedure, click and drag  •Click on the myFirstMethod tab at the 
a this.adultPerson move statement below the Do Together in  top above the the Coding Editor.
the Code Editor.
•To add the float procedure to the 
•Set the direction as Down 1.0 meters, animation style as Begin  myFirstMethod panel, go to the drop 
and End Gently. down panel above the Methods Panel 
and select ‘this’ from the list.

•The coding should look like the image below. •You should see the float procedure 
listed. Click and drag it to the Code 
Editor under the last line of code.

•Test your animation, press Run.
SAVE OFTEN!!! SAVE OFTEN!!!

Add a rideHumvee Method/Procedure Add a rideHumvee Method/Procedure
• Just like we did with the float procedure, we are going to  •From the ‘this’ drop down menu, select this.adultPerson
add procedure for the astronaut to get into the humvee to  from the list.
get ready to ride in it.
•From the Class drop down 
menu, select ‘Scene’. It is 
the area where we need to 
build the rideHumvee 
procedure.

•Select Add Scene 
Procedure from the list.

•Name the new procedure 
rideHumvee.
SAVE OFTEN!!! SAVE OFTEN!!!
Add a rideHumvee Method/Procedure Add a rideHumvee Method/Procedure
•Click and drag the this.adultPerson moveTo programming statement into  •Add a Do Together as shown below. This part of the procedure will have the 
the Code Editor. See settings below. astronaut getting into the humvee. You may need to adjust the settings in 
order to get the astronaut driver in place.
•Add a this.adultPerson move statement under the previous moveTo 
statement and use the settings listed below.

•Add another move statement and use the settings below.

•Add a this.humvee getFrontLeftDoor turn statement and use the settings 
below.

•Check your coding, it should look like the image below.

SAVE OFTEN!!! SAVE OFTEN!!!

Add a rideHumvee Method/Procedure
Add the rideHumvee Procedure
•These last lines of code close the door to the humvee, and set the vehicle 
•Click on the myFirstMethod tab at the 
to the astronaut so when the humvee moves, the astronaut moves with it, 
thus making the procedure complete. top above the the Coding Editor.

•To add the rideHumvee procedure to 
the myFirstMethod coding panel, go to 
•Full code should look like the image below:
the drop down panel above the 
Methods Panel and select ‘this’ from 
the list.

•You should see the float procedure 
listed. Click and drag the rideHumvee 
to the Code Editor under the last line 
of code.

SAVE OFTEN!!! •Test your animation, press Run. SAVE OFTEN!!!

Pulling it all together – Add arrow keys  Pulling it all together – Add arrow keys 
to move humvee around the scene to move humvee around the scene
•To add the arrow keys to move the humvee around the scene.
•Click on the Initialize Event Listener tab above the Code Editor 
panel. •Before we run our animation, 
•Click on the Add Event Listener  we need to have the camera stay 
button. with the humvee as it moves.
•Select Keyboard and then
addObjectMoverFor and humvee •From the ‘this’ menu, click the 
from the list. down arrow and select 
•This adds the ability to move this.camera from the list.
the humvee around the 
scene using the arrow keys.

SAVE OFTEN!!! SAVE OFTEN!!!

Pulling it all together – Add arrow keys  Pulling it all together – Adding instructions

to move humvee around the scene •Now, drag an astronaut say method at the bottom of your code and 
just above the rideHumvee programming statement. Select and click 
•Find the vehicle section in the  on Custom textString…. Type in, “Now press the arrow keys to see 
Method Editor panel, and click  me move, and to drive me around.” You may change the text as long 
and drag this.camera setVehicle  as it give the correct instructions. Change the duration on the 
statement to the Code Editor  command to make the speech stay on the screen longer. To do this, 
panel just above the rideHumvee click on add detail… on the astronaut say line of code, then choose 
code. duration, other…, and then type in 4 or 5. 

•Select this.humvee from the list 
to set the camera’s vehicle to the 
humvee. 

•Now, test your animation, press 
the run key.
SAVE OFTEN!!! SAVE OFTEN!!!
 Check your work Notes for later

•Your final code for myFirstMethod should look like this: •If you later want to unglue the astronaut from the humvee, set 

the vehicle property of the astronaut from humvee back to 
‘this’. Don’t forget to make the astronaut stand back up. Just 
reverse the coding you used to make the astronaut sit in the 
first place.

•If you later want to un‐glue the camera from the humvee, also 
set its vehicle property back to ‘this’. 

•Adding delay statements helps control the flow of the 
Press Run again to test out your world.  animation. Sometimes it just needs to slow down a bit.

SAVE OFTEN!!! SAVE OFTEN!!!

And now for some fun… And now for some fun…
•Let’s make a new introduction for our animation… •In the Methods Editor, scroll down and locate the audio 
section. Click and drag  the this.playAudio statement and place 
•First, you will need to have a 15 – 20 second mp3 audio file  it into the doTogether.
ready to go. Download one legally from the Internet. Have it 
ready on your desktop. •Choose to import a sound file. From the window, locate the 
mp3 file you downloaded legally previously.
•Click on the myFirstMethod tab.
•Now go to the Control Tiles located under the Code Editor, and 
•From the ‘this’ drop down menu above the Methods panel, be  click and drag a doInOrder command under the sound file 
sure to select ‘this’ from the menu. within the doTogether code box.

•From the Control Tiles below the Code Editor, click and drag a  •Now go to the ‘this’ drop down menu located just above the 

doTogether command to the top of the coding in the code  Methods panel, and select this.camera.
editor.
SAVE OFTEN!!! SAVE OFTEN!!!
 And now for some fun… And now for some fun…
•Scroll to the bottom of the procedures and find the  •Add this.camera moveAndOrientTo statement into the 
this.camera delay statement and drag it into the doInOrder doInOrder, and select this.humveeView from the list.
part of the coding for the introduction. Click on the add Detail 
and set the duration between 2 – 5 seconds depending on your  •Add this.camera delay and set the duration for 2‐5 seconds.
intro music.
•Add this.camera moveAndOrientTo statement to the 
•Add this.camera moveAndOrientTo statement to the  doInOrder and select this.startView from the list.
doInOrder, and select this.astronautHeadShot from the list. 
This will change the camera to the astronaut head shot postion.

•Add a this.camera delay and make the duration 2‐5 seconds.

SAVE OFTEN!!! SAVE OFTEN!!!

And now for some fun…
Congratulations! You have just
•Your introduction code should look like the following: made your first Alice world. There are 
many more things that you can do with 
Alice, so keep exploring it!

SAVE OFTEN!!! SAVE OFTEN!!!