外文翻译 - 基于java的网络构建动画演示的系统

外文原文AJava-basedsystemforbuildinganimatedpresentationsovertheWebAbstractWedescribeLeonardoWeb,acollectionoftoolsforbuildinganimatedpresentationsthatcanbeusefulforteaching,disseminating,ande-learning.PresentationscanbecreatedviathecombineduseofavisualeditorandaJavalibrary.ThelibraryallowsittogenerateanimationsinabatchfashiondirectlyfromJavacodeaccordingtoanimperativespecificationstyle.Batch-generatedanimationscanthenberefinedandcustomizedusingtheeditor.PresentationscanbefinallyviewedwithasimpleJavaplayer,whichshipsbothasastand-aloneapplicationforoff-linedeploymentandasaJavaappletembeddedinaWebpage.Theplayersupportsstep-by-stepandcontinuousexecution,reversibility,speedselection,andsmoothanimation.1.IntroductionInteractiveanimationsareavaluabletoolforteachingandlearning:theycanbeusedbyalgorithmresearcherswhowanttoshareanddisseminatetheirideas,bylecturerstolivenuplectures,todemonstratethebehaviorofcomplexsystems,ortoportraythedynamicaspectsofsometopicofinterest,andbystudentsforindividualexperiments,soastodeepentheknowledgeacquiredinthelectures.Realizingillustrativecomputer-basedlearningmaterialisusuallyveryexpensive5,9,andthetaskisevenmorecumbersomeifonewantsanimationstobeportableacrossdifferentplatforms.Instructorswhowishtoprepareanimatedpresentationsaretypicallyrequiredtousesomecommercialgeneralpurposetool,oreventowriteadhoccomputerprograms:thismightbedifficultandtime-consuming.Forinstance,usingtoolssuchasMicrosoftPowerPointorOpenOfficeImpress,whichprovideaflexiblesupportforcreatinganimatedslides,maybehardifcomplexanimationsaretobeproduced.Ontheotherhand,specializedtools,suchasMacromediaFlash,canbeusedtocreatehighlycustomizedanimations,butmayhaveasteeplearningcurve.CreatinganimatedGIFsofMPEGmoviesmightbeevenharderandlimitstheuserinteractionpossibilities.Inthiscontext,exploitingWeb-basedtechnologiesforeducationseemstobeaquitenaturalsolution4,11,18,22.However,asdetailedinSection2,thequestforsimple,light,andeasy-to-usetoolsforbuildinggeneral-purposeanimatedpresentationsovertheWebstilldemandsforfurtherefforts.InthispaperwedescribeLeonardoWeb,acollectionofWeb-basedtoolsforcreatinganimationsthatcanbeusefulforteaching,disseminating,ande-learning.AnimatedpresentationscanbecreatedwithaspecializedvisualeditorandviewedwithasimpleJavaplayer,whichisavailablebothasastand-aloneapplicationforoff-linedeploymentandasaJavaapplet.Theplayersupportsstep-by-stepandcontinuousexecutionofanimations,whichcanberunbothforwardandbackwardatdifferentspeeds.Tosupportvisualizationofalgorithmicconcepts,LeonardoWebalsoprovidesalibrarythatcanbeusedtogenerateanimationsdirectlyfromJavaalgorithmimplementationsaccordingtoanimperativestyle,i.e.,byinsertingcallstographicalroutinesinthepointsofthecodewheretheeventsofinteresttakeplace.PresentationscreatedwithLeonardoWeb,whichincludetext,2Dgraphics,andbitmappedimageswithsmoothanimationeffects,shipasplaintextfileswritteninasimplescriptinglanguage.Animationscriptsaresmallandcompact,andcanspecifyhighlycomplexgraphicalscenes.Batch-generatedanimationscanbeeasilyrefinedandcustomizedusingtheeditor.LeonardoWebiswritteninJavaandismadeofthreemaincomponents:TheBuilder:avisualeditor,whichcanbeusedtobuildandeditanimatedpresentations;ThePlayer:aviewerforLeonardoWebpresentations,whichcanbeusedbothasaJavastand-aloneapplicationandovertheWebasaJavaapplet;TheLibrary:aJavalibrarythatsupportscreationofbatch-generatedanimationscriptsusingJavaprogramsasdrivers.AnimationscreatedinthiswaycanbefurtherrefinedusingtheBuilder.UptodateinformationabouttheLeonardoWebtoolscanbefoundattheWebsitehttp:/www.dis.uniroma1.it/leoweb3.Therestofthispaperisorganizedasfollows.InSection2wesurveythemostcommonapproachestocreatinganimationsovertheWebandrecentrelatedwork.InSection3wedescribethemaincomponentsofLeonardoWeb,presentingtheirmainfeaturesandtheoveralldesignofthesystem.TheinternalarchitectureofthePlayerandoftheBuilderisdiscussedinSection4.InSection5weaddressdifferentscenariosthatshowhowLeonardoWebcanbeusedtocreatepresentationsforeducationalanddisseminationpurposes.Section6givesconcludingremarksanddiscussesdirectionsforfuturework.2.RelatedworkDespitetheimpressiveriseofWebauthoringapplicationsinthelastfewyears,creatinganimatedpresentationsasasupportfore-learningandteachingovertheWebstillremainsachallengingtask.ThemostpopulartrendistowriteadhocJavaappletsthatdisplaythedesiredanimations(see,e.g.,1,15,23,29).Withthistechnique,highlycustomizedandinteractivepresentationscanbeobtained,butpreparingthemmaybealongandboringtask.Creatingpresentationsofcomputerscienceconceptshasmotivatedresearcherstothinkaboutwaystoautomate(oratleasttosimplify)theprocessofvisualizing,e.g.,howprogramsandalgorithmswork.Inparticular,afewWeb-basedsystemscanbefoundintheliterature.JEliot13automaticallyproducesvisualizationsofJavaprogramsbyparsingtheJavacodeandallowingtheusertochooseasubsetofvariablestovisualizeonthestageaccordingtobuilt-ingraphicalinterpretations.Itrelievestheuserfromwritinganyvisualizationcodeandisveryeasytouse,butislackingincustomizationpossibilitiesandabstraction.Thus,itismostlyusefultoillustratebasicprogrammingconcepts.JDSL2isaJavalibraryofdatastructuresthatfeaturesavisualizerforanimatingoperationsonabstractdatatypessuchasAVLtrees,heaps,andredblacktrees6.Itiswellsuitedforeducationalpurposes,asstudentsareallowedtowriteandtesttheirownclassesprovidedtheyimplementspecificJDSLJavainterfaces.Thevisualizationofsupporteddatatypes,however,isembeddedintothelibraryandcannotbechanged.VEGA14isaC+client/servervisualizationenvironmentespeciallytargetedtoportrayinggeometricalgorithms:whilethealgorithmisexecutedontheserver,theclientsrunsonanyJavaVirtualMachineandasmallbandwidthcommunicationinterfaceguaranteesgoodperformanceevenonslownetworks.Theend-usercanvisualizealgorithmson-lineorshowsavedrunsoff-line,andcancustomizethevisualizationbyspecifyingasuitablesetofviewattributes.WAVE8isanalgorithmvisualizationtoolbasedonapublication-drivenapproach:algorithmsrunonadevelopersremoteserverandtheirdatastructuresarepublishedonblackboardsheldbytheclients.Animationsarespecifiedbyattachingvisualizationhandlerstothedatastructurespublishedontheclientsblackboard:modificationstothesestructures,duetotheremotealgorithmexecution,triggertherunningofthecorrespondinghandlersontheclientsside.OtherWeb-basedalgorithmanimationtoolsarementionedin10,28.Inordertorealizeananimatedpresentation,allthosesystemshingeupontheexistenceofanunderlyingrunningprogramandaretiedtoaspecificprogramminglanguage.TheSambapackage25,anditsWeb-basedfollowupJSamba,representafirstefforttowardsalanguage-independentsolutiontoalgorithmanimation.Sambaprovidesaninterpretedfront-endtotheTangosystem26andusesascripting-basedapproach:itreadsanASCIIfile,onecommandperline,inordertoacquiredirectionsforcreatingananimation.Thus,analgorithmcanbeeasilyvisualizedbyplacingprintstatementsintheunderlyingprogram,whichcanbeimplementedinanylanguage.Unfortunately,thisoftenrequiresonetotakeintoaccountverylow-leveldetailsaboutthevisualization,e.g.,explicitlyspecifyingthepositionofobjectsinthegraphicalscene:wrappingtheprintstatementsintocallstomethodsofamoreabstractlibrarywouldinsteadhidesomeofthesetediousdetails.Inmanycasesitwouldbequiteusefultobeabletoanimatehigh-levelconcepts,independentlyofaspecificalgorithm,suchasrotationsinbalancedbinarysearchtrees.Inthisscenario,startingfromanunderlyingprogrammaybedifficult,andavisualeditortoanimatetheseproofsofconceptswouldbeveryuseful.ArecentreleaseoftheJAWAAsystem20exploitstheuseofaneditortogenerateanimationtracesinascriptinglanguagesimilartothatofSamba.However,itdoesnotsupportintegrationoftheeditorcapabilitieswiththetraditionalprogram-drivenanimationapproach.Indeed,creatingapresentationmaybealongandboringtaskusingavisualeditoronly,whichinturnmaybeusefulforrefiningavisualizationskeletonbyaddingcommentsandexplanationsandbyorchestratingtheoverallgraphicallayout.TheANIMALsystem24wasdesignedtocombinevisualeditingwithbatchgeneration.Unfortunately,thesystem,whichprovidespowerfulfeaturesforcreatinglecturepresentations,seemstobeunavailableforWeb-baseddeployment.3.AnoverviewofLeonardoWebLeonardoWebisacollectionoftoolsforbuildingandviewinganimatedpresentations.ThesystemiswritteninJavaandusesbothstand-aloneandapplettechnologies,allowinguserstocreateandviewpresentationsoff-line,andthentoeasilypostthemovertheWebforremoteaccess.InthissectionwedescribethemainfeaturesoftheLeonardoWebtools,addressingthekeyaspectsofourapproach.3.1.TheBuilderPresentationsinLeonardoWebcanbeeasilycreatedusingtheBuilder,avisualeditorforbuildinganimations(seeFig.1forasnapshot).Thetoolallowstheusertowriteandmaintainasequenceofkeyframes(orscenes),whicharethebackboneofthepresentation.Eachframecancontaintextand2Dgraphicalobjectsdrawnfromavocabularyofelementarygeometricshapes,includingcircles,ellipses,lines,rectangles,andarbitrarypolygons.User-definedbitmappedimagescanalsobeaddedtothepresentation.TheusercaninteractwiththeBuildersGUIinordertoadd,resize,move,hide,anddeletegraphicalobjects.Thesequenceofkeyframesinthepresentationisshownasalistofnumberedthumbnails,whichprovideagraphicalstoryboardthathelpstheusercontrolthebigpictureofthepresentationandselectindividualframesforediting.WereferthereadertoFig.6forasnapshotoftheBuilder.Eachgraphicalobjectinaframeisassignedanidentificationlabelandasetofattributes,includingsize,position,color,andlayer,whichcanbeindividuallymodifiedusingtheobjectinspectortoolbar.Tosupportsmoothanimation,objectsbythesameidentificationlabelinconsecutivescenesarecompared,andattributechangesareinterpolatedtoformasequenceofintermediateframes.Thenumberofintermediateframesisanattributeoftheobjectitself,andcanbefullycontrolledbytheuser.Thismakesitpossibletoanimategraphicalobjectsinthesamesceneatdifferentspeeds.Duringediting,whenanattributeofanobjectismodifiedinascene,thesystemautomaticallypropagatesthatchangetotheotherframes:thecurrentstrategyistoextendthepropagationuptothefirstsuccessiveframeinwhichtheobjecthadadifferentvalueforthatattribute.Otherpossibilitiesmightalsobecontemplated,suchaspropagatingthechangeforagivennumberofframesoruptotheendofthepresentation,andweplantoaddtheminafuturereleaseoftheBuilder.TheBuildercansaveapresentationasaplaintextfilewritteninasimplescriptinglanguage,whichspecifiestheincrementalchangesthatleadfromakeyframetothesuccessiveone.Thebenefitsofusingscriptinglanguagesforgeneratingprogramvisualizationshavebeenpointedoutbyseveralauthors20,24,25.Inparticular,ourlanguagewasinspiredbythatofSamba25andJAWAA20.Theincrementalnatureofourscriptinglanguagemakespresentationscriptssmallandcompact,andthusamenabletoquickdownloadevenonslownetworkconnections.PresentationscreatedwiththeBuildercanbevisualizedwiththePlayer,aswewillseeinSection3.2,andcanbelaterreopenedwiththeBuilderitself,whichreconstructsthesequenceofkeyframes,foradditionalediting.Interestingly,theBuildercanalsoopenandmodifypresentationscreatedinsomeotherway(e.g.,directlywritingascriptorusingtheLibrary):thisallowstheuserstocreateandrefinepresentationsviathecombineduseofdifferenttools,usingthemostappropriateoneindifferentstagesoftheanimationspecificationprocess.TheBuilder,whichincludeson-linehelp,canbedownloadedfromtheLeonardoWebsite3.3.2.ThePlayerTheLeonardoWebPlayerhasbeendesignedasalightandeasy-to-usepresentationviewer.ItisabletointerprettextfilescreatedbytheBuilder,andcanbeusedbothasastand-aloneJavaapplicationandasanappletinsideaWebpage.ThegraphicuserinterfaceofthePlayer,showninFig.2,iscleanandsimple,resemblingtoastandardVCRcontroltool.Theusercanstart,stop,rewind,andplaythepresentationbothforwardandbackward.Playingissupportedeitherinastep-by-stepfashion,orcontinuously.Animatedtransitionsofgraphicalobjects,includingmovementsandcolorchanges,aresmoothlyrenderedbythesystembygeneratingsequencesofinterpolatinginterframes.Tosupporteffectiveon-linedeploymentevenonslownetworkconnections,thePlayerisfullymulti-threaded,allowingittostartplayingapresentationevenifithasnotbeencompletelydownloadedfromtheremotepeer.Furthermore,theappletversionofthePlayerisjustabout100KB,includingGUIgraphics.Thisimposesalightburdenontheappletstart-upphase,whichistypicallyverytime-critical.TheinterestedreadercanseethePlayerinactionanddownloaditsstand-aloneversionattheLeonardoWebsite3.3.3.TheLibraryWhiletheBuilderappearstobeflexibleenoughtosupportcommonuserneeds,sometimespresentationsincludecomplexanimationsthatportraysometechnicalaspectofatopicofinterest,whichmightbedifficulttospecifyvisually.Inthisscenario,itmightbeeasiertowriteaprogramwhoseexecutionproducesthedesiredanimationscript,ratherthanhavingtospecifyitdirectlyintheBuilder.Still,ascriptgeneratedinthiswaycanbelaterrefinedandcompletedusingtheBuilder.Tosupportthisscenario,whichwillbeaddressedinmoredepthinSection5,LeonardoWebprovidesaJavalibrary(JLeoScript)thatprovidesprimitivesforcreatingpresentationscripts.AvailableprimitivessupportedbytheclassJLeoScriptincludeaddinggraphicalobjectstothescene,deletingexistinggraphicalobjects,movingandresizingobjects,andchangingcolor.Asanexample,inFig.3weshowaJavaprogramthatusestheJLeoScriptlibrarytogenerateasimpleanimatedpresentation.Theproducedscriptsimulatesaballbouncinginaboxasshowninthesamefigure.Toachievethisgoal,theprogramfirstcreatesaJLeoScriptobject,specifyingthenameofthefiletobecreated,andthenaddstheball(newCircle)andthebox(newRectangle)tothescene.Thosegraphicalobjectsaredefinedbyspecifyingauniquename(e.g.,“ball”,“box”),thecoordinatesofthetopleftcorner,thedimension(radiusorwidthandheight),thecolorinRGBformat,andaflagtellingwhethertheobjecthastobecolor-filled.Theprogramthenentersasimulationloopthatletstheballbounceinsidethebox(moveAbsolute).Eachelementarymovementoftheballissmoothlyinterpolatedusingfourinterframes.4.ArchitectureofthesystemInthissectionwebrieflydescribetheinternalarchitectureofthePlayerandoftheBuilder.ThestructureofthePlayerisshowninFig.4.Twothreadscooperateinplayingananimationscript:alanguageparserandaninteractiveanimationmodule.AstheappletisloadedfromtheLeonardoWebsite,thelanguageparserestablishesaconnectiontotheremotesitethatcontainsthedesiredscript,whichisloadedandparsed.Intheoff-lineapplicationversionofthePlayer,thelanguageparserretrievesthescriptfromalocaldisk,ratherthanfromaWebsite.Thelanguageparserproducesanindexedsequenceofscenes,eachofwhichconsistsofalistofdatarecordsdescribingoperationsongraphicalobjects.Theinteractiveanimationmoduleisactivatedbytheuserthroughthebuttonsinthecontrolpalette.Thismoduleisabletointerprettheoperationsinthescenebufferaccordingtotheplaybackdirection,incrementallycreatinginterpolatinginterframesforsmoothanimationrendering.ThemainmodulesoftheBuilderareshowninFig.5.TheheartoftheBuilderistheeditingengine,whichhandlestheeventsgeneratedbytheuserwhileinteractingwithwindows,menus,andtoolbars.Theeditingengineisresponsibleformanipulatingobjectsinthecurrentscene,aswellasaddinganddeletingscenes.Anotherimportantmoduleisthescript/sceneconverter,whichisabletoconvertalistofscenesintoaLeoWebscript,andviceversa.5.LeonardoWebinactionInthissectionweshowhowLeonardoWebcanbeusedtoprepareapresentationandhowanimationscanbemadeavailableovertheWeb.5.1.PreparingapresentationWeconsiderdifferentusagescenarios,detailinghowthedifferentpartsofthesystemcanbeeffectivelyexploitedtoachievethedesiredresult.5.1.1.UsingtheBuilderVisualeditorsmaybeespeciallyusefulforpreparingsimpleanimationsthatillustratehigh-levelconcepts(e.g.,rotationsinbalancedbinarysearchtrees),aswellasforrefiningmoresophisticatedpresentationsobtainedfromprogramexecutiontraces.Indeed,asnotedbyBrownandHershberger,“eventhoughitmaybeeasytoanimateaprogram,itsnotSoeasytoproduceaneffectiveandinformativevisualization”5.Thisrequiresaddingcomments,labels,andalotoftextexplanationsthataretypicallyquiteboringtorealize.Anappealinggraphicallayoutshouldbeorchestrated;otheressentialgraphicalfeatures,suchastextcolorandsize,shouldbecustomized,andtheirmeaningexplained.Inthiscontext,webelievethatanintegrateduseoftheLibraryandtheBuildercanbeverybeneficial.Inthefollowing,webrieflydescribeausageexampleoftheBuilderrelatedtothefirstscenario.Letusassumethatwewanttoillustratetheideabehindbacktrackingbymeansofasimpletoyexample:amouseinalabyrinthisseekingforitscheese.Themousemovesalongapathinthelabyrinthuntileitheradead-endstreetorthecheeseisfound.Incaseofadead-endstreet,themousebacktrackstothenearestbranchingandtakesadifferentpath.AnanimationlikethiscanbeeasilypreparedusingtheBuilder.Thelabyrinthismadeupofverticalandhorizontallines,whichcanbeaddedbymeansoftheobjectinspectorwindow.Cheeseandmousecanberepresentedusingtwobitmappedimages.Whenasceneisready,wecancommititandthenobtainthesubsequentonebyincrementalmodification(i.e.,wejustneedtorepositionthemouse).Thegraphicalstoryboardallowsustoselectanyscene,modifyit,addanewsceneordeleteanexistingone.Forinstance,ifwedecidetochangethestructureofthelabyrinth,itsufficestomodifythestartingsceneandpropagatethechangetoallthesuccessiveones.AsnapshotoftheBuilderinuseisillustratedinFig.6andtheanimationisavailablefromtheLeonardoWebsite3.Similarly,theBuildercanbeusedinordertorefineanexistinganimation.Inthiscase,whenanexistingpresentationisopened,thekeyframesareparsedandappearinthegraphicalstoryboard.Anyscenecanthenbemodified,possiblypropagatingchangestoasubsetofthesubsequentscenes,andthenewanimationcanthenbesavedandplayedasusual.5.1.2.UsingtheLibraryCreatingapresentationmightbealongandboringtaskevenusingavisualeditor.Thisisespeciallytrueifthecontentiscomplexandtechnical.Forinstance,creatingapresentationtoexplainhowanalgorithmworksonsomeinputdataforaComputerScienceclassmightbehardandevenerror-proneduetothedifficultyofcapturingalltheaspectsofthealgorithmexecution.Aclassicalapproachinalgorithmanimation28consistsofusinganimplementationofthealgorithmtobevisualizedasadriver,andlettingitemitasequenceofeventswhichareturnedintographicalcommandsastheimplementationruns.Thisistypicallyachievedbyannotatingthealgorithmimplementationwithsuitablecallstolibraryroutines.ToexplainhowthisapproachcanbesupportedusingLeonardoWeb,letusconsideraconcreteexample.Supposethataninstructorhastoprepar