Part  II  Coding  the  Animation  

 Welcome  to  Part  2  of  a  tutorial  on  programming  with  Alice  and  Garfield  using  the  Alice  2  application  software.  In  Part  I  of  this  tutorial,  you  created  a  scene  containing  characters  and  props.  In  this  part,  you  will  create  program  code  to  animate  characters  in  a  scene.  An  animation  can  be  used  to  tell  a  story  (similar  to  a  video  or  short  film),  create  a  simulation,  or  play  a  game.  In  this  tutorial,  we  will  tell  a  story  in  which  Garfield  the  cat  decides  it  is  time  for  his  friend  Odie  to  take  a  bath.        If  you  have  completed  the  Part  I  of  this  tutorial,  Alice  is  still  running,  and  your  scene  is  still  open,  you  may  skip  ahead  and  begin  with  step  5  on  page  3.  Otherwise,  please  begin  by  completing  steps  1-­‐4  to  open  the  world  you  previously  created  and  saved  in  Part  I:  

 1. Find  the  Alice  application  on  your  computer,  and  start  Alice.  You  should  see  the  following  splash  

screen  as  Alice  starts.    

   

2. After  Alice  has  started,  you  will  see  the  following  dialog  box.  Click  on  the  Open  a  World  tab.    

   

 

   

3. Navigate  to  the  location  on  your  computer  where  your  world  has  been  saved.  Then,  select  the  world  and  click  the  Open  button.    

   

4. After  the  world  has  loaded,  you  should  see  Garfield  the  cat  standing  behind  Odie  and  both  are  facing  the  pond,  as  shown  here:  

 

   

   

5. In  our  story,  Garfield  and  Odie  have  been  sliding  around  on  a  slippery  ice-­‐covered  lake.    The  lake  surface  isn’t  completely  frozen.  A  pond-­‐like  area  with  open  water  can  be  seen  in  the  middle  of  the  lake.  Odie  has  been  playing  with  a  fish  and  his  fur  smells  bad.  Garfield  decides  that  Odie  needs  a  bath.    Our  animation  will  begin  with  Garfield  giving  Odie  a  push  into  the  pond.  Our  design  (plan  of  action)  is  the  following:  

• Garfield  moves  forward  to  bump  into  (collide  with)  Odie  • Odie  moves  forward  to  the  pond  • Odie  moves  down  into  the  water  and  (at  the  same  time)  a  splash  sound  plays    • Garfield  turns  to  look  at  the  camera  • Garfield  says  “Bath  time!”  • Odie  jumps  out  of  the  water  • Odie  turns  to  look  at  the  camera  • Odie  says,  “The  water  is  too  cold!”  

 To  create  the  animation,  each  action  in  the  above  design  will  be  coded  as  a  statement  in  Alice’s  Code  editor,  as  shown  here:        

   

On  the  left  side  of  the  window  are  two  panels:  the  object  tree  at  the  top  and  the  details  panel  at  the  bottom  left.  At  the  lower  right  is  a  yellow  tabbed  area,  labeled  World.my  first  method.  The  yellow  tab  is  where  the  code  statements  will  be  created.      

 The  first  action  is  “Garfield  moves  forward  to  bump  into  (collide  with)  Odie.”  As  you  may  remember,  Garfield  is  standing  1.5  meters  behind  Odie.  This  distance  is  measured  center  to  center,  as  shown  here:    

   

To  move  Garfield  forward  just  enough  to  bump  into  Odie,  we  will  create  a  code  statement  that  tells  Garfield  to  move  forward  less  than  the  total  distance  (1.5  m)  –  say,  1  meter.    This  will  have  Garfield  just  bump  into  (not  slide  through)  Odie.  In  Alice,  a  code  statement  is  created  by  first  selecting  the  object  that  will  perform  the  intended  action.  To  select  Garfield  as  the  object,  click  on  Garfield’s  name  in  the  object  tree,  as  shown  here:  

 

       

   

6. Next,  select  the  action  tile  in  the  methods  tab  of  the  details  panel.  Use  the  mouse  to  click  and  drag  the  move  tile  from  the  details  panel  into  the  Code  Editor.  

 

   

7. Popup  menus  prompt  you  for  the  direction  (select  forward)  and  the  distance  (select  1  meter).    

     

 

   

8. A  code  statement  “garfield  move  forward  1  meter”  should  now  be  seen  in  World.my  first  method.    

   

9.  To  test  your  code,  click  on  the  Play  button  in  the  upper  left  corner.    

       

   

10. When  the  Play  button  is  clicked,  a  run-­‐time  window  pops  up,  where  you  can  view  the  animation  as  the  code  runs  (executes).  You  should  see  Garfield  move  forward  to  collide  with  Odie.  You  can  push  the  Restart  button  in  the  runtime  window  to  view  the  animation  several  times.  When  you  have  finished  viewing  the  animation,  close  the  runtime  window  to  return  to  the  Code  editor.  

 

   

 11.  The  next  step  in  our  animation  design  is  “Odie  moves  forward  to  the  pond.”    Create  a  statement  in  

which  Odie  will  move  forward.  We  don’t  really  know  exactly  how  far  Odie  is  from  the  pond,  so  we  will  take  a  good  guess  and  try  4  meters  as  the  distance.  Select  Odie  in  the  object  tree,  click  and  drag  the  move  tile  into  the  code  editor,  selecting  forward  and  other…  from  the  popup  menus.  A  number  pad  should  be  displayed.  Enter  4.0  as  the  distance,  and  click  Okay.    

 

                   

12. Click  on  the  Play  button  to  test  your  code.  Odie  should  now  be  on  the  pond,  as  shown  here:      

     

 Debug:    If  Odie  does  not  end  up  in  the  pond,  you  will  need  to  adjust  the  distance  that  Odie  moves  forward.  If  so,  click  on  the  number  4  in  the  odie  moves…  code  statement,  and  select  other…  to  return  to  the  keypad  to  enter  a  better  value  (for  example,  you  might  enter  3.8    or    4.25).  

 13. No  doubt,  you  have  noticed  that  the  two  code  statements  you  created  were  executed  in  order,  one  

after  the  other.  First  Garfield  moves  forward  and  then  Odie  moves  forward.  But,  now  we  want  to  create  code  to  have  Odie  move  down  into  the  water  and  make  a  splash  sound  at  the  same  time.  Alice  has  a  Do  together  control  statement  that  will  execute  code  statements  at  the  same  time.  The  Do  together  control  tile  is  found  at  the  bottom  of  the  code  editor.    To  use  Do  together,  click  on  the  Do  together  control  tile  and  drag  it    into  the  code  editor.  

 

   

14. Create  a  code  statement  within  the  Do  together  code  block  that  will  have  Odie  move  down  5  meters.  (We  chose  5  meters  so  that  Odie  will  go  completely  down  into  the  water.  You  may  choose  a  smaller  value  if  you  want  to  see  his  head  still  above  water.)  

 

 

     

15. Find  the  play  sound  tile  in  the  Details  Panel.  Click  and  drag  it  into  the  same  Do  together  block.  Select  splash  from  the  menu  of  sound  choices.    

 

       

 16. You  should  now  have  two  code  statements  in  the  same  Do  together  code  block.  Click  on  the  Play  

button  to  test  your  code.  When  these  statements  are  executed,  Odie  should  fall  down  into  the  water,  and  you  should  hear  a  splash  sound.      Debug:    If  you  do  not  hear  a  splash  sound,  check  that  your  computer’s  sound  is  turned  on  and  is  loud  enough  to  hear.  In  some  school  computer  labs,  you  may  need  to  attach  earphones  to  the  computer.  

 

     

 17. The  next  design  step  is  to  have  Garfield  turn  to  face  the  camera.  Select  Garfield  in  the  object  tree.  

Click  and  drag  the  turn  to  face  tile  into  the  Code  Editor,  and  select  camera  from  the  dropdown  menu  of  objects  that  Garfield  can  turn  to  face.    

 

   

 18. The  next  step  is  to  have  Garfield  say  “Bath  time!”  Click  and  drag  the  say  tile  into  the  Code  Editor.  

Select    other…  from  the  menu  of  choices  that  appears.  Type  in  Bath  time!    in  the  textbox.      

         

 19. Click  on  the  Play  button  to  test  your  code.  When  these  two  code  statements  are  executed,  Garfield  

should  turn  to  face  the  camera  and  tell  us  it  is  Odie’s  bath  time.    

   

Debug:  You  may  wish  to  have  the  text  bubble  displayed  on  the  screen  a  little  longer  (to  give  the  user  time  to  read  the  text).  If  so,  click  on  the  more…  options  item  on  the  say  statement,  select  duration  from  the  drop-­‐down  menu,  and  then  select  the  amount  of  time  (in  seconds)  we  want  the  duration  to  last.  

 

         

 Your  Turn  

 We  have  completed  this  much  of  the  original  design  for  this  animation:    

• Garfield  moves  forward  to  bump  into  (collide  with)  Odie  • Odie  moves  forward  to  the  pond  • Odie  moves  down  into  the  water  and  (at  the  same  time)a  splash  sound  plays    • Garfield  turns  to  look  at  the  camera  • Garfield  says  “Bath  time!”  

 It  is  now  your  task  to  complete  the  project  by  creating  the  code  for  these  actions:  

 • Odie  jumps  out  of  the  water  • Odie  turns  to  look  at  the  camera  • Odie  says,  “The  water  is  too  cold!”  

 All  of  the  methods  needed  to  complete  these  steps  have  been  illustrated  above.    You  may,  however,  wish  to  explore  other  methods  in  Alice  to  finish  this  story,  or  even  to  add  a  different  ending.    You  may  also  want  to  experiment  with  the  Do  together…  statement.  For  example,  when  you  are  having  Odie  jump  out  of  the  water,  what  happens  if  Odie  moves  up  and  moves  forward  at  the  same  time  in  a  Do  together…  code  block?    Be  sure  to  save  your  Alice  world  when  you  are  done.  

   

To  learn  about  Alice  and  how  to  use  it,  you  may  want  to  try  the  tutorials  that  are  built  into  the  software.  To  view  the  Tutorials,  go  to  the  File  menu  and  select  New  World….      Then,  click  on  the  Tutorial  tab  in  dialog  box  that  pops  up.    

   

Also,  explore  the  Alice  website,  http://www.alice.org  to  find  other  resources  for  learning  about  Alice.