Ge#ngStartedWithAlice

ByRuthieTuckerunderthedirec8onofProf.SusanRodger

DukeUniversity,July2008

www.cs.duke.edu/csed/alice/aliceInSchools/

Hi! My name is Alice and this program was named a7er me. With Alice, you can make your own anima=ons! 

ThefirststepinmakinganAliceworldistopickabackground.

WhenyouopenAlice,thisboxtoyourleNwillautoma8callypopup.Youmayhavetoclickonthe“Templates”tab

Today,wearegoingtoselectthewaterworld.

Clickon“water”andthenclickonthe“open”buSon.

Choosing a Background

Once you have chosen the water world this is how your screen should look. 

Choosing a Background

Nowletsaddsomeobjectstoourworld.Wewanttoaddagoldfishandafairy.

Totherightofthewaterworldpicture,thereisagreenbuSonlabeled“AddObjects.”

Clickonit.

Adding Objects

Onceyouhaveclickedon“addobjects”agalleryofobjectswillappear,onyourscreen,belowyourwaterworld.

This is your local gallery of objects. There are lots of folders, each containing objects.  

Adding Objects – Local Gallery

Selecttheanimalsfolderandscrolloverun8lyoufindtheGoldfish.

ClickontheGoldfish.Clickon“Addinstancetoworld.”

The Goldfish should appear in your world, on the water. 

Adding Objects – Goldfish

Your goldfish will be very small. Don’t worry about this yet. 

First we need to add a fairy to your world. 

Clickon“LocalGallery”togobacktothestar8ngpointoftheLocalGallery.

Adding Objects – Goldfish

Now,scrolloverandselectthe“Fantasy”folder.

Then,selectthe“Fairies”folder.

Adding Objects – Fairy

Addthisfairyintoyourworld,byclickingonherandthenclickingon“AddInstancetoWorld”.

Your screen should now look like this.  Note: If you are using a Mac, there will be black boxes around the fairy’s wings. 

WhenyouaddobjectstotheworldtheywillappearinalistontheleNofyourscreen.

This list is called your Object Tree. 

Now that we have two objects in our world, a fish and a fairy, let’s posi=on them! 

Adding Objects – Object Tree

Now look at the right side of your screen. 

All of the buNons with the faces are designed to help you posi=on your objects. 

Positioning Objects

Clickonthewhitearrow,tryclickingonyourfairyandmovingheraround.

Trymovingyourfairysothatsheistotherightofyourfishlikethescreenshownhere.

Clickonitandmoveyourfairysosheishoveringoverthewater

Positioning Objects – Up & Down

ThebuSonwiththeupanddownarrowswillmoveyourobjectupanddown.

ThisbuSonisusedtospinyourobjectsaround.

Tryspinningyourgoldfisharoundsoheisdirectlyparalleltothescreen.

Positioning Objects – Spin

 Any=me you do something wrong in your Alice world you can click the undo buNon and Alice will undo the last command. 

 Use it as much as you need! 

The Undo Button

Note:Ifyouaccidentallyclickonthewaterandmoveitwhileposi8oningyourobjects,clickontheundobuSontomovethewaterback.

 The next buNon will turn your character either backwards or forwards.  

Useittomakeyourfairy8ltslightlyforward.

Positioning Objects – Tilt

This next buNon is a tumble buNon. It will move your object all over the place. 

Useittomoveyourfairysothatsheisfacingthefish

Note: If you don’t like her posi=on, click on “undo” and try to move her again. 

Positioning Objects – Tumble

This next buNon will make your objects bigger and smaller. 

Clickonitanduseittomakeyourgoldfishbiggerthanthefairy.

Positioning Objects – Resize

Nowletsmoveourfishdown(do you remember which buNon does this?).Moveitsothatitisslightlys8ckingoutofthewater.

Youmayhavetopushthefishbackfurtherandresizehimtogetthispicture.

ThereisonemorebuSonthatwewillNOTuse.

ThisbuSonwillcopyyourobject,howeveritcausesproblemslaterSODON’TUSEIT!

It’sbeSertoaddanotherobjectfromthegalleryifyouwanttwoofthesamething.

Positioning Objects – Copy

X

Clickonthe“done”buSontoleaveyourobjectsgallery.

Nowyourscreenshouldlooklikethis:

Positioning Objects

Now that our fish and fairy are in posi=on, let’s set up the camera for our anima=on. 

 The Dummy Camera is designed to save camera posi=ons as you move your camera around.  

Clickonthe“addobjects”buSonagainandlookforagraybuSonunderyourobjectposi8oningbuSons ClickonthebuSonlabeled

“morecontrols”.

Dummy Cameras

Onceyouhaveclickedonthe“morecontrols”buSonyouwillseeadropdownmenu.

Clickonthe“dropdummyatcamera”buSon.Justclickonce!

Dummy Cameras

Onceyouhavedroppedthedummycamera.Afolderwillappearonyourobjecttreecalled“DummyObjects.”

IfyouclickontheplussignbesidetheDummyObjectsfolderyourlistofdummycameraposi8onsshouldappear.

Rightnowthereshouldonlybeone,called“Dummy”.

Dummy Cameras

Rightclickon“Dummy”(control + click for Macs) andrenamethedummycameraposi8ontosomethingthatiseasiertoremember.

Letsrenameours“Start.”

This will freeze your camera posi=on for you to return to whenever you would like.  

Dummy Cameras – Renaming

Nowwecanmoveourcameratoanotherposi8onusingthepurplearrowsattheboSomofyourscreen.

Movethecamerasothatwecangetacloseupofthefairy.

Cameras – Moving

LetsdropanotherDummyCameraatourFairyPosi8onandlabelit“Fairy.”

Nowwhatifwewanttogobacktoour“Start”cameraposi8on?

RightClickoncamerainyourobjecttree

Cameras – Changing Views

RightclickonCameraandchoose“methods”,then“camerasetpointofviewto”then“DummyObjects”,then“Start”.

•  This should set your camera view back to its star=ng posi=on. 

Cameras – Changing Views

Nowgothroughthesestepsagaintocreateacameraposi8onfor“Fish.”

Dummy Cameras

Finally,Setyourcameraposi8onbackto“Start”posi8on.

Nowclickonthe“Done”buSonattheboSomrightofyourscreentoexitoutofyour“addobjects”sec8on(youmayhavetoscrolldowntoseetheDonebuSon).

Dummy Cameras

Now that we have done some cool things with the camera, we can animate our characters! 

 The large tan part in the center of your screen is called your “Method Editor.” The method editor is for making your characters do something. 

Methods

Your characters already know how to do several things. 

Theseareallofthethingsthatyourfairyknowshowtodo.

Youcanfindthesebyclickingonyourfairyinyourobjecttreeandchoosingmethods.

Methods

Lets try anima=ng our fairy with some of these methods. 

This8meinsteadofrightclicking,dragyourcamerasetpointofviewtointoyourmethodeditor.

Setyourcameraviewto“Fairy.”

Methods – Camera

ClickonlichenZenspidertogobacktothefairy’smethods.

Clickonthemethodcalled“Wink,”dragitoveranddropitinyourmethodeditor.

Methods – Fairy

Whenyoupressplaythefairyshouldwinkwithherrighteye.

Closethe“WorldRunning”windowwhentheanima8onisdoneplaying.

Trydraggingineachofthemethodsandpressingplaytoseewhattheydo.

Methods – Play

Notethatthe“flapwing”methodasksyouforadura8onandanamount.Selectnumbersforbothandseewhathappens.

Ifyoudon’twantanyofthiscodeyoucanrightclickonthesec8onthatyoudon’twantandchoose“delete.”

Methods – Delete

YoucanalsoclickonthedoSedtabtotheleNofthelineyouwanttodeleteanddragitovertothetrashcan.Releasewhenthetrashcanishighlightedingreen.

What if we want to teach our fairy to do something that she doesn’t know how to do? 

If you look below the methods that you just tried there are more simple methods. 

These are the methods that we will use to teach our fairy to do new things. 

Methods – Simple

Letsstartwithsomethingsimple.GotothemethodsforyourfairyandselectthegraybuSonlabeled“Createnewmethod.”

Nameit“Talk.”Anewtabcalled“lichenZenSpider.Talk”shouldappearnextto“world.myfirstmethod”inyourmethodeditor.

Methods – Talk Method

Nowlookinthesimplemethodsofyourfairyandfindthe“say”method

Dragitoveranddropitintoyourmethodeditor.

•  Select“other…”,thisshouldgiveyouaboxforyoutotypesomething.

•  Type“I’mflying!”andpressOK.

Methods – Talk Method

 Try this again but have her say something else. 

Methods – Talk Method

Now how can we play this method? 

 An event is a way to call the methods you create when you play your world 

 The event editor is in the top right hand corner of your screen. 

Wewantthefairytosay“I’mflying”andtheotherthingsthatyoutypedwheneverwepressthespacebar.

Todothis,wewilladdaneventandcalltheTalkmethodwewrote.

Events

Clickon“createnewevent”

Youwillseethelistofeventsintheeventseditor.

Select“whenakeyistyped”

ANerclickingityoushouldgetthis.

Events – New

Events – New

Clickon“nothing”andselectlichenZenSpiderandthenTalk.

Clickon“anykey”andselectSpace.

Your event editor should now look like this. 

Note:ForMacusers,thespaceshouldlooklikeaflatbracket(shownhere).

Tryplayingyourworld

Each8meyoupressthespacebar,yourfairyshouldsay“I’mflying”,then“Thisisfun!”

Events – Playing

Now,letshavethefairyflyaroundthefish.

Clickonyourfairyinyourobjecttreeandgotomethods.

SelectthegraybuSonthat’slabeled“createnewmethod.”

Methods – FairyFly

ANerclickingonitagrayboxwillappearthatasksyoutonameyournewmethod.

Let’snameours“FairyFly”.

Nowanewmethodwillappearonyour

methodeditor.

Firstwewillsetourcameratoitsoriginalposi8on.

Clickonthecameraintheobjecttree.Gotoit’smethodsandfind“camerasetpointofviewto.”

Dragthatintothemethodeditor.

Select“DummyObjects”andthen“Start”.

Methods – FairyFly

Nowletshaveourfairyflapherwings.

ClickonlichenZenspiderintheobjecttreeandthen“methods”tab.

DragintheflapWingsmethod.

Methods – FairyFly

Haveherflap68mesfor2seconds.Ifthenumberyouwantisnotthere,select“other”andthentypeitin.

 Now before we test it out, we need to change our events editor so that our new FairyFly method will play. 

Weneedtochangethe“whentheworldstarts”eventtoour“FairyFly”method.Clickonthearrowby“world.myfirstmethod”andselect“lichenZenSpider”andthen“FairyFly”.

Methods – FairyFly

Youreventeditorshouldlooklikethepictureabove.

Nowtryplayingyourmethod.Yourcamerashouldmovebacktothestar8ngposi8onandyourfairyshouldflapherwings.

Methods – FairyFly

It’s not quite right We need to have our fairy fly around the fish instead of flying in place. 

Gobacktoyoursimplemethodsforyourfairyandselect“turn”anddragitintoyourcode.

HaveyourfairyturnleN1revolu8on.

Methods – FairyFly

 Your code should now look like this. 

Methods – FairyFly

Nowtryplayingthis.

Your Fairy should flap her wings and then spin in place. 

Now we know that we need to fix two things. We need her to flap while she turns and we need her to turn around the fish instead of turning in place. 

Firstletshaveherflapandturnatthesame8me.

LookattheboSomofyourscreenforapurplebuSonlabeled“DoTogether.”

Dragthisupanddropitunderyourcode.Thenplaceyour“flapwings”codeandyour“turn”codeinsideit.

Tryplayingit

Methods – FairyFly

ANerclickingonthearrowapopupmenuwillappear.

Select“asSeenBy”,“goldfish”,“theen8regoldfish”.

Inordertomakethefairyflyaroundthefishweneedtoselectthe“more”buSonbesidethe“Turn”code.

Methods – FairyFly

 This should make your fairy turn around in a circle from the point of view of the fish. This means it will rotate around the fish. 

Pressplaytotryit.

Lets write one more method. 

Lets make the fairy ride the fish a7er she has flown around him. 

Methods – FairyFly

Firstyouwillwanttocreateanewmethodlabeled“RideFish.”

Clickon“lichenZenspider”thenthe“methods”tab.Click“createnewmethod”andnameit“RideFish.”

Insideyourmethodeditordragthe“moveto”commandandselect“goldfish,”“theen8regoldfish.”Yourcodeshouldlooklikethis.

Methods – RideFish

Now we need a way to glue the fairy to the goldfish so that when the goldfish moves, the fairy will move with it. 

Wewillusethevehicleproperty.Youcanfinditundertheproper8estabofyourfairy.

Methods – RideFish

Dragthevehiclepropertyovertoyourmethodeditorandselectgoldfish,theen8regoldfish.

Thisshouldsetyourgoldfishasavehicletoyourfairysothatwhenthefishmovesthefairyshouldmovewithit.

Letsmakeaneventforthismethod.

Clickon“createnewevent”inyoureventseditor.

Select“letthearrowkeysmovesubject.”

Itwillbesetautoma8callytocamera.

Changethissoitissettothegoldfish,theen8regoldfish.

Events

 Now we can put it all together. If you no=ced at the beginning of your method editor there was a method that said “World.myfirstmethod.” This method is for telling our story.  Note that there are a lot of tabs at the top. You can see each method you wrote by clicking on the tabs.  

Clickonthetabthatsays“world.myfirstmethod”Thisisthetabweputallofouroriginalcodein.Yourcodewillprobablylookdifferentthanmine.That’sok.

Events

Firstweneedtosetourcameraposi8onin“world.myfirstmethod”to“Start”rightaNerthecodeyouhave.

Dragin“camerasetpointofviewto”andsetto“DummyObjects”,then“Start”

Events

 If you look under the methods of your fairy you will now see the methods that you wrote. We can put these together in world.myfirstmethod to tell a story. Lets have the fairy fly around the fish and then get on the fish and ride. 

Drag“FairyFly”and“Ridefish”intoWorld.myfirstmethod.

Events – Calling Methods

Nowwecanusetheevent“Whentheworldstarts”tocallit

Clickonthearrowtochangetheeventbackto“myfirstmethod.”

. Now you will see that when you play your world the fairy will fly around the fish and then get on its back. 

Events – Calling Methods

Youcanhavehertalkbypressingthespacebarandmovethefishwiththearrowkeys.Pressplayandtryit.

Findthecamera’svehiclepropertyanddragitinbetween“FairyFly”and“RideFish”inthecode.

Setitto“goldfish”,“theen8regoldfish”.

Wait! Our fish swam away! Hmmm how can we fix it so that we can follow the fish? Let’s set the camera as a vehicle to the fish! 

Vehicle Property

 If you later want to unglue the fairy from the fish or the unglue the camera, see these instruc=ons: 

 To unglue the fairy from the fish, set the vehicle property for the fairy back to “world”. 

 To unglue the Camera from the fish, also set its vehicle property back to “world.”  

Onceyouhavedonethistryplayingyourworldagain.

Vehicle Property

1.  Dropanislandfromtheenvironmentsfolder.2.  Steerthefisharoundtheisland.

3.  Ungluethefairy(byse#nghervehiclebacktoworld)andhavehermoveovertotheisland.

4.  Trygluingthecameratothefairyinsteadofthefish.

Exercises

 Prac=ce what you have just learned about Alice by doing these exercises. Start with your finished fish and fairy world. 

Congratula=ons! You have just made your first Alice World. Come back and see me soon!