Lesson1:PlayingwithStorytellingAlice

Goals

Dotheiceskatertutorial.
LearnhowtouseStorytellingAlicethroughthetutorial.
Recreatetheiceskaterworldfromscratch.

NowthatwehaveStorytellingAliceinstalled,letsplaywith
StorytellingAlicetolearnhowtouseit.

Wewillbeginwiththeiceskatertutorialinordertofigureoutwhereeverythingisandwhateverything
meansinStorytellingAlice.Wewillthenrecreatetheiceskaterworldfromscratch.

The Tutorial
1. StartupAlice.exebydoubleclickingontheiconthatlookslikethis:

2. TheWelcometoAlice!window,showninFigure1below,shouldappear.

Ifthewindowdoesnotappear,gotothetopleftcornerofthescreenandclickonHelp.In
thedropdownmenu,clickonTutorial,andthewindowshouldappear.

Figure 1. Starting the Ice Skater Tutorial.

2010,TheMyVICETeam(http://myvice.cs.vt.edu/).

3. ClickonTutorial,thefirsttabinthewindow,asshowninFigure1.
4. ClickonTutorial1,i.e.,thetutorialwithapictureofaniceskater,andclickOpen.
Inworkingthroughthetutorial,payattentiontothefiveareasofStorytellingAlicethat
areshownbelowinFigure2.
World Window

Object Tree

Events Area

Editor Area

Details Area

Figure 2. Each Area in the Storytelling Alice Program.

5. Followthetutorialandonceyoufinish,clickonExitTutorial.

Your Own Ice Skater World

TheiceskatertutorialhelpedtofamiliarizeyouwithAlice.Now,letsseehowyouwouldgoaboutre
creatingtheiceskaterscenefromscratch.(Figure1aboveshowsapictureoftheiceskaterworldfrom
thetutorial.Wewillusethatpicturetomakeouriceskaterworld.)
1. ClickonFileatthetopleftcornerofthescreenandclickonNewWorld.
2. TheWelcometoAlice!windowwillpopupwiththeTemplatestabopen.ClickonSnowand
clickOpen.

Theskyscolorisbrighterthanthetutorialssky.Letschangetheskytobethecorrectcolor.
3. IntheWorldsdetailswindow,clickonPropertiestab.
4. ForatmosphereColor(whichistheskyscolor),clickonthecolor
boxrightnexttothetext.
5. Atthebottomofthemenu,clickonOthersincethecolorthat
wedesireisnotlisted.

2010,TheMyVICETeam(http://myvice.cs.vt.edu/).

Whenyouclickonthe
propertiesofthe
Worldsdetails,you
arechangingthings
abouttheworlditself.

6. Clickonthedarkbluecolorthatisinthethirdrowfromthebottomandseventhcolumnfrom
theleftandislabeled0,0,153,asshownbelowinFigure3.ThenclickOK.

Figure 3. Color Selection.

Nowthatwehavethecorrectskycolor,weneedtoaddthetrees,cabin,andicetothescenewherethe
iceskaterskates.
7. ClickonthegreenboxlabeledAddObjectsintheSceneswindow.Thisopensthegalleryof
characterandsceneobjectsthatwecanaddintoourworld.
8. Tofindthebackgroundthatwerelookingfor,weneedtolookatthescenesavailable.Clickon
Scenes,circledbelowinFigure4.

Figure 4. Looking for Scenes.

2010,TheMyVICETeam(http://myvice.cs.vt.edu/).


Theiceskaterskatesonafrozenlakebyacabinandtrees.Letsfindtheseitems.
9. ClickonLake,anditopensthelakescenes.
10. ThereisoneobjectClassLake;clickonitandawindowwillpopupaskingwhetheryouwantto
addtheinstancetotheworld,asshownbelowinFigure5.ClickAddinstancetoworld,andthe
scenewillappearintheworldwindow.

Figure 5. Adding a Lake Object to Your World.

Nowletsaddtheiceskater.
11. ClickonSearchGalleryatthetoprighthandcorneroftheGallery.
12. Inthesearchboxtype:iceskater,andthenclickonSearch.
13. TheClassIceSkaterobjectshouldappear,asshownbelowinFigure6.Clickonit,andthenclick
Addinstancetoworld.Thecharacterwillappearintheworldwindow,asshowninFigure7.

Figure 6. The Class IceSkater.

2010,TheMyVICETeam(http://myvice.cs.vt.edu/).


14. ClickonthegreenboxontherightsidethatsaysDoneinred,asshowninFigure7.

Figure 7. What Your World Window Should Look Like.

Wenowhavethebackgroundscenewiththefrozenlake,treesandcabininourworld,andwealsohave
theiceskaterintheworld.Ourworldiscompletenow!Now,letsaddaniceskatingroutinefortheice
skater,justaswedidinthetutorial.

15. ClickonIceSkaterintheObjectTreewindow,andtheDetails
Areawilldisplaytheproperties,methods,andfunctionsof
theiceskater,asshowntotherightinFigure8.
Propertiesdescribethevisualdetailsoftheobject.
Methodsdescribethebehaviorsoractionsthat
objectscandointheworld,e.g.,preparetoskate,as
showninFigure8.
Functionsdescribetheproximity(closeness),size,
spatialrelation,pointofviewandotherdetailsofan
object.
16. Forthepurposeofrecreatingthetutorial,clickonthe
methodstabintheDetailsArea.Thisshowseverybehavior
youcanmaketheskaterdo,asshowninFigure8.
17. ClickonpreparetoskateintheDetailsAreawindowand
dragittotheEditorAreaintheWorld.scene1methodtab.
whereitsaysDoNothing.ThistellsAlicethattheIceSkater
willpreparetoskate,asnowshowninFigure9.

2010,TheMyVICETeam(http://myvice.cs.vt.edu/).

Figure 8. IceSkaters Details

Properties, Methods, Functions.


Figure 9. Preparing the IceSkater to Skate.

18. ClickonPlayatthetopleftcornerofthescreentowatchtheiceskaterpreparetoskate.After
themovieisover,clickonStoptoexitthewindow.
19. Youcancontinuetoaddmoreactionsfortheiceskatertodoinherroutinebyclickingand
dragginganyofthemethodsintheIceSkatersdetailswindow.

Summary

Inthislesson,wewentthroughtheiceskatertutorial.IttaughtushowtouseAliceandwhere
everythingisinAlice.Wewerealsoabletorecreatetheiceskaterworldinthetutorialfrom
scratch.Thistaughtushowtousethegallery,addobjectsintotheworldandmakethose
objectsdocertainactions(methods).

What to Look Forward To

NowthatweknowhowtouseAlice,thenextlessonwillhaveuslearnhowtohavetwoobjects
dodifferentactionsatthesametime,alsoknownasparallelism.Wewillbestagingacafeteria
scenewithkidsstartingafoodfight.

2010,TheMyVICETeam(http://myvice.cs.vt.edu/).

Key Terms
1. WorldWindow
Showstheopeningsceneoftheworld.
2. ObjectTree
Listscharactersandscenesintheworld.
3. DetailsArea
Providesinformationaboutthemovieworldorsomethinginthemovieworld.
4. EditorArea
WhereyoutellStorytellingAlicewhatyouwanttohappeninthemovie.
5. EventsArea
AllowsyoutotellAlicewhichpartofthestorytoplay.
6. Properties
Thevisualdetailsoftheobject.
7. Methods
Behaviorsoractionsthatobjectscandointheworld.
8. Functions
Definestheproximity(closeness),thesize,thespatialrelation,pointofviewand
otherdetailsofanobject

Extra Exercises
Createaroutinefortheiceskaterthathasherskatesfor2steps,do2simplespins,1
spinthenskatebackwardsforonestep,andjump,aftershepreparestoskate.

2010,TheMyVICETeam(http://myvice.cs.vt.edu/).