Beginning with Alice 3.

1. You will find Alice on the desktop or in the Alice folder in All Programs.

We are going to make a 3D animation of a witch casting a spell to stir her caludron and summon a dragon.

Follow these instructions carefully and you too can make a successful animation.

At this early stage the animation might not be the most detailed but given that you can actually control the fingers and toes of each character just think how complex your animations could get.

The second exercise will guide you through making objects move a little more realistically.


2. The first thing that you will see when you open Alice is the "Blank States" for a new project.

As we are going to make a witch summon a dragon, a "swamp scene" is the one we want.

You might have to scroll down a little to find it. Press "OK"

When you have finished this tutorial you are going to make your own scene, so think about what your scene might be as you work through these steps.


3. This is the "Alice Interface". This is the area where you will write code and select backgrounds and artifacts.

The area highlighted in red is the "Scene View".

Click on "Setup Scene" to zoom in to the scene.


4. This is the expanded scene view where you can select and place objects.


5. The purple area to the top right is the "Properties Pane".

The highlighted area is where you can move, position or resize objects.


6. The lower part lets us have access to the properties of these objects.

The properties will change depending on the object selected.


7. The part of the interface highlighted in red is the "Gallery".

This is where you will be able to select all of the objects that you may wish to use in your project.

The gallery is sorted in a number of ways.

At the moment it is sorted by "Class Hierarchy". This sorts the characters and objects by type, so all of the bipeds are together and the things that can fly or swim or slither...


8. The objects can also be viewed by theme so for example, all of the fantasy characters are in one place.

Click on the "Browse gallery By Theme tab".


9. Now you can see the objects sorted by theme.

We want the "Fantasy Theme".


10. This is the gallery of all of the fantasy objects.

There are cauldrons and dragons but more of them later.


11. Scroll all the way to the right to find the witch


12. Click and hold the witch...


13. Drag the witch on to the scene.

Don't let go of the mouse button just yet.


14. You will see a cuboid that represents the position of the witch.

Place the cuboid in the centre of the scene, a little way away from the camera.


15. When you let go you will see the "Add Scene Property rom Gallery" dialogue.

Just press "OK".


16. Here is your very green looking witch.

The graphics are better than Scratch, yes?


17. Now scroll the gallery all the way back to the left again so that you can see the cauldron.


18. Open the cauldron folder...


19. Drag the cauldron into the scene.


20. Place the cauldron to the witch's right.

Save your project as "Witch and Cauldron" in the usual manner - File then Save.


Camera Angles.

Moving and positioning the camera.

Saving the camera position.

Camera angles.

21. Now we are going to move the camera so that we can see inside the cauldron.

Take your time with this part as it is easy to lose where you are in the scene.

Read the instructions carefully especially taking note of the part that tells you how to get back to the starting view, in case you get lost.

You need to make sure that you are giving instructions to the cauldron. Click once on the cauldron so that "this.cauldron" appears in the property pane.


22. Now scroll down the property pane until you can see "Camera Markers"


23. Click on "Camera Markers" to open the property. You might have to scroll down a little more to see the detail.


24. Now click "Add Camera Marker".

This will record the position of the camera as it is now.


25. You should see the "Add camera Marker" dialogue box. The default name for the camera is "Camera1".


26. Change the name of the camera to be "start". Press "OK".


27. You should now see a red camera called "start".

The "black to red" and "red to black" camera buttons are now enabled.


28. Now comes the tricky bit.

The three sets of purple arrows in the bottom centre of the scene control the camera.

If you click and hold on an arrow then the camera position will move.

If you happen to move a little too far and lose sight of the witch and her cauldron then click the "undo" button at the top right.


29. In this view I have moved the camera back by clicking on the centre button that faces towards me.

Button set number 1 moves the camera up and down and left and right.

Button set number 2 moves the camera forward and back and turns the camera to the left and the right.

Button set number 3 pitches the camera up and down.


30. Experiment with these controls.

If you get lost and can no longer see the witch and her cauldron, there is no need to worry. In the camera markers property there is the black to red camera.

The black camera is the view you have now and the red camera is the view that you saved as "start".

Click the "black to red camera button" and you will be placed back in front of the witch and her cauldron.


31. There is a drop down menu near the top of the screen that says "Starting camera View".


32. Click the drop down and you can see some of the other views that you might want to make use of later in the project.


33. Click on the top view for instance and you will see the witch, her cauldron and the camera marked in red.

You might have to move the scene a little forward or back to see this.


34. This is the front view. You can see where the red camera is.


35. Make sure that you click "Starting camera View" before you continue.


36. Finally we want to edit the camera view so that we can see in side the cauldron.

Tap on the camera up (arrow set 1) to lift the camera up.

Tap on the camera pitch down (arrow set 3) to rotate the camera so that we have a better view of the cauldron's surface.


37. Now we have to reset the camera's starting position. As the Black to red button returns the current camera (black) to the preset position (red) the red to black button sets the preset position (red) to be the current position (black)

Save your project with File and Save.


Properties

Changing the properties of objects.

Introducing the "Spoon"..

More about properties.

38. Drag the magic spoon in to the scene.


39. Press "OK" on the "Add Scene property From Gallery" dialogue.


40. The spoon is pretty small and not in the right place. The next series of instructions will show you how to move and resize an object using its properties.


41. With the "Default" property selected the object can move in the 3 possible planes (x, y and z axes in maths terms) that you can see (just) highlighted on the spoon in red white and green.


42. With the "Rotation" property selected the object can rotate in the 3 possible planes (x, y and z axes in maths terms) that you can see highlighted on the spoon in red white and blue.

Hover the mouse over one of the "planes" (red, white or blue) until it changes colour slightly by becoming paler and you can drag on the arc and the oject will change the way it is facing.


43. With the "Resize" property selected there is an arrow that lets you grow or shrink the object. I have increased the size of the spoon to be suitable for the cauldron.


44. Move and rotate the spoon so that it is in the cauldron.

If you think that your adjustments are not correct, you can make use of the "Undo" button when ever you wish.


45. The next step is to add the dragon that the witch summons.

Click on the "Fantasy" folder again.


46. Select the baby dragon.


47. Choose the baby dragon that you want the witch to summon and add it to the scene.


48. Here is the dragon to the witch's left.


49. She's not much if a witch if she summons a dragon that is already here, so make the dragon vanish by changing the "opacity" property from 1.0 to 0.0


50. Select the drop down and choose "0.0"


51. Here is the invisible dragon. You can see it is still part of the scene as the movement ring is round it and the object "this.dragonBaby" is in the list of objects.

Save your project using "File" and "Save".


Coding

Writing

code.

More about properties.

52. To add code to your project click on "Edit Code".


53. This is the "Code Editor".


54. The area under the scene is called the "Methods pane".


55. Statements (methods) from the methods pane can be dragged on to "myFirstMethod".


56. The code in myFirstMethod is executed when the run button is pressed.


57. Click on the witch. Do you notice that the selected object is "this.witch"?


58. The witch is going to chant a spell to summon the dragon.

As spells go, this is a pretty famous one.

"Double, double toil and trouble; Fire burn and cauldron bubble. Fillet of a fenny snake, In the cauldron boil and bake; Eye of newt, and toe of frog, Wool of bat, and tongue of dog, Adder's fork, and blind-worm's sting, Lizard's leg, and howlet's wing, For a charm of powerful trouble, Like a hell-broth boil and bubble."

Drag "this.witch.say/???" onto myFirstMethod.


59. Alice will ask in effect "Do you want to say "Hello" or your own piece of text?" Click "Custom TextString" to add your own text.


60. Copy and paste the spell into the value section of the TextString. Select the spell and click on CTRL + C to copy it

"Double, double toil and trouble; Fire burn and cauldron bubble. Fillet of a fenny snake, In the cauldron boil and bake; Eye of newt, and toe of frog, Wool of bat, and tongue of dog, Adder's fork, and blind-worm's sting, Lizard's leg, and howlet's wing, For a charm of powerful trouble, Like a hell-broth boil and bubble."


61 When you run the code, the witch says the entire speech in one go for a very short period of time.


62. This is not quite good enough so drag the method back to the method pane to delete it and this time get the witch to say just the first part of the spell;

"Double, double toil and trouble; "


63. If you click on "add detail" it is possible to add other information to the method, such as the duration. Add a duration of 1.0 seconds.


64. I have added the rest of the spell in smaller sections. This animates quite smoothly when it is run.


65. Now I want to add some movement to the scene. Click on the spoon and we can make it stir the cauldron. Note that the selected object is "this.magicSpoon"


66. Look down the list of methods to find "turn" in the "orientation" section.

Drag turn onto "myFirstMethod".


67. Select "right" turn and the number of turns to be 2.0 (it is just on the image honest!)


68. I have moved the turn method up to be the second method as each method is executed in order. This lets me see the effect without having to run all the way through the scene.


69. The spoon sort of spins on its axis rather than stirs the cauldron so add another detail to the method. Click on "add detail" and select "asSeenBy" and then choose "this.cauldron"


70. Now when the code is run, the spoon stirs the cauldron. (Sort of.)


71 Adding the extra detail to slow the spoon down makes it slightly more realistic. Click on "add detail" and choose "duration" and select "Custom DecimalNumber"..


72. A sort of calculator appears.


73. Click on "5". Press "OK".

Test the code to see if it works as it should.


74. Next we need to make the dragon appear.

From the drop down next to "this.magicSpoon" select "this.dragonBaby".


75. Scroll down through all of the methods to get near the bottom where you will find the "appearance" group of methods and drag in the "setOpacity" method.


76. Set the opacity to be "0.1"


77. Add another spoon stirring method and a dragonBaby setOpacity method after each small speech. Increase the opacity by 0.1 each time.

As the witch recites the spell and the spoon stirs the cauldron the dragon slowly appears.


78. It would be better if the witch recited the spell as the spoon stirred and the dragon appeared.

There is an additional method at the bottom of the screen called "do together".


79. Drag the "do together" method to the beginning of the code; all of the other methods will move down to make room.


80. Drag the first "this.witch" method into the "do together" method


81 Drag the first "this.magicSpoon" method onto the space in the "do together" method so that they are both placed inside the "do together" method.


82. Drag the first "this.dragonBaby" method onto the bottom edge of the "do together" method and it too will be added.


83. Repeat this with each set of 3 methods so that all of the events happen together.

Save and test your project.


Procedures

Making a

new method.

Procedures - making new methods.

84. The witch is now going to celebrate the conjuring of the new baby dragon.

Rather than making a series of methods we are going to make a new procedure called "celebrate" that contains a number of methods.

Click on the lozenge shape at the top centre of the screen. This is the set of "classes". In Java a class is a type of object; it can have rules and properties that are passed to all the members of the class. There is a class called "witch"; our witch is called "this.witch" a specific member of the class "witch".

Add a procedure to the "class" "witch" by clicking on "Add Witch Procedure".


85. Name the new procedure "celebrate". Press "OK".


86. The witch now has a new tab called "celebrate" and only the witch is in the scene view now.

The procedure is going to ge the witch to scream "I am invincible" and then do a back flip.


87. Add the "say" method and using custom text add "I AM INVINCIBLE!".

Next plan the back flip.

A back flip is in three parts, the witch jumps up, flips over and lastly lands.


88. From the set of "position" methods drag in the "move" method.


89. The witch is going to jump up so select "up" and then the value "1.0" so that she jumps up her own height.


90. From the set of "orientation" methods drag in the "turn" method.


91 The witch is going to flip backwards so select "backward" and then "1.0" so she completes a 360 degree flip.


92. Finally the witch is going to drop to the ground, so from the set of "position" methods drag in the "move" method.

The witch is going to fall so select "down" and then the value "1.0" so that she falls her own height.


93. The procedure is now complete. Click on the "myFirstMethod" tab.


94. Click on the witch.


95. Now you can see that the witch has the new procedure "celebrate" which can be called like any other method.

Drag the "celebrate" method into the program and test it. When the dragon is summoned the witch should jump up and do a back flip.

If she wants to jump up three times then drag in two more copies of the "celebrate" method.


96. There is another way to do this using the "count" tile. There are a series of tiles at the bottom of the screen, "count" is one of them.

The count tile will repeat a specific method or group of methods a fixed number of times.


97. Drag the "count" tile into the program; when asked for the number of times to repeat the count select "3".


98. There is a space in the "count" tile for the statement to be added to the count.


99. Drag a copy of the "celebrate" method and delete the other 2.

Test your code and see if the witch celebrates 3 times when she has conjured the dragon.

Save your project.


Events

Reacting to

events.

Events.

100. In this section we are going to write the code to make the dragon fly away when the letter "F" is pressed.


101. Firstly. make a very short procedure to make the dragon fly.

Click on "classes" again then choose "dragonBaby" and then "Add dragonBaby Procedure".


102. Give the procedure then name "fly".


103. The dragon is simply going to rise up 10.0 units.


104. Drag in the "move" method, selecting "up-" then "10.0".


105. Click back on "myFirstMethod" to see the code again.


106. From the drop down of objects select the "dragonBaby".


107. Add the "fly" procedure to the code.


108. The next step is to make the "dragonBaby" fly when the letter "F" is pressed.

For this to work correctly you must set up an "eventListener".

Click on initializeEventListeners"


109. When the scene is activated (press run) the "eventListener" "sceneActivated" detects this and runs the "myFirstMethod" code.

This can be changed if necessary.

Click on "Add Event Listener" to add a new listener.


110. Select "Keyboard" and then "addKeyPressListener".


111. Now a code fragment needs to be created that waits for a key being pressed. This is an "If" statement.

"If" is one of the tiles at the bottom of the screen.


112. Drag the "if" tile in to the space "drop statement here".


113. Select "true".


114. Pause here to find out about the "if" statement.

There is a statement called a "condition" that can only be true or false such as "the letter F has been pressed".

If the statement is true then the "if true" statement is executed.

If the statement is false then the "else" statement is executed.


115. Drag the "event IsKey" statement over the yellow "true".

Select "letters (A-Z)" and then "F".


116. Check that you have the right code at this point.


117. Drag the "fly" procedure to the top space.

Run the code and see whet happens when you press the letter "F".

Save your project.


Vehicles

Interesting ways

to move.

Vehicles.

118. In this final section we are going to make the witch move to the dragon and then use the dragon as her "vehicle". A vehicle means that both object move together.

Click on "myFirstMethod" to see the code.


119. Drag a "do together" tile to the end of your code.


120. Click on the witch.


121. Add a "moveTo" method from the position group into the "do together".


122. Get the witch to say "Let's save the world!" as well.


123. Scroll down through all of the methods to get to the vehicle methods. Drag in the "setVehicle" method.


124. Select the dragonBaby and add the think bubble "Press "F" to make me fly."


125. Test your finished program.

Save the project.



126. Challenges.

A. Add more to the scene; search for interesting things that a witch would have.

  1. There are potions and bottles and giant toadstools and all sorts of weird and fun things to find and explore.
  2. Adding these things will make the scene more "witchy".

B. You wrote a spell for homework.

  1. Get your witch to recite your own spell in the scene.
  2. Does your spell rhyme and scan as well as Shakepeare's witches did?

C. See if you can work out how to make the dragon grow in size as well as appear as the witch recites her spell.

  1. There is a procedure for the dragonBaby called "resize" that might help.
  2. Experiment with this "resize" procedure to see what happens.

D. See if you can make the witch change colour as she recites her spell.

  1. There is a witch procedure called "setPaint" that you might find useful.
  2. Make the changes either very subtle or very dramatic.