[Mugeda HTML5技术教程之4] Studio 概述

Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境，可以让你在不需要安装客户端程序的情况下，只通过浏览器就能轻松创作高质量的HTML5动画。HTML5动画相对于传统的Flash动画最大的特点是可以跨平台部署，除了能在PC上显示，还可以在手机、pad等移动设备上完美显示。本节我们将主要介绍下Studio界面的相关组件，以方便大家后续使用。各组件的具体用法，后续章节会陆续介绍。

 

下面的截图是一个Mugeda Studio界面的工作图。

Studio界面的主要组件有菜单栏、工具栏、时间线、工具条、舞台、元件库、脚本、属性。如下图所标示。注意这些组件几乎都可以通过鼠标拖拽的方式来选择停靠还是悬浮，当制作复杂动画的时候，这可以帮助设计开发人员更加高效合理的布局界面。

其中菜单栏包含了所有的命令集：文件、编辑、修改、视图、动画、帮助。我们会分专集专门介绍这些功能。

菜单下方，顶部工具栏包含了一些最常用的操作：新建、保存、图片库、复制、粘贴、撤销、重复、预览、通过条形码共享、脚本等。这些是使用频率非常高的常用操作，而且大部分（例如保存、删除、撤销、播放）等都很好理解。个别命令（例如图片库）我们之前已经提到过了，后续还会继续在教程中加以详细说明。

左侧工具条包含可被添加到舞台上的对象和常用编辑功能。

舞台是整个界面的核心区域，位于界面的中央。在舞台周围，留有一定的编辑缓冲区域，该区域内的对象不会在最终的内容展示上出现，但是可以用来很方便的组织暂时不在舞台上的对象。

属性对话框显示用来调整已选对象的属性和参数。舞台上任何对象被选中后，均会在属性对话框显示对应的属性。根据所选择的对象的不同，所显示的属性也会不同（例如文字对象会包含字体等）。如果没有选中任何舞台上的对象（在舞台的空白区域单击鼠标左键，会取消对所有当前对象的选中状态），这时候显示的则为舞台自身的属性（例如帧率等）。

元件库面板包含对元件进行管理的必要功能，例如新建元件、复制元件、生成文件夹、删除元件、引入元件等。一个元件是一个包含有自身独立的时间线的动画片段，可以反复在舞台上使用，创建比较复杂的组合动画。

脚本窗口允许开发人员通过Mugeda API进行高级的富媒体内容开发。这些高级操作包括精确地操纵舞台上的对象、动态生成动画对象、访问并控制HTML5 DOM元素等等。脚本对于像创建像游戏这样内容非常有用。Mugeda API 是基于Javascript脚本语言的开发接口。具体使用方法，后续章节会详细介绍。

    

通过上述介绍，我们可以对Mugeda Studio有个大概的了解，熟悉了其主要界面组件。具体使用我们会在后续章节陆续带领大家慢慢体会。下一节我们就会讲到如何使用Studio创建新作品。