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

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

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

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

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

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

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

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

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

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

    

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

[Mugeda HTML5技术教程之4] Studio 概述的更多相关文章

  1. [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  2. [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

  3. [Mugeda HTML5技术教程之14]案例分析:制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

  4. [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭

    [Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...

  5. [Mugeda HTML5技术教程之11]Mugeda API简介

    一.API 概述 Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容.它提供了一下方法: •访问Mugeda内容中的对象. •获取和设置对象属性,如位置.旋转.比例.不 ...

  6. [Mugeda HTML5技术教程之5] 创建新作品

    前一节,我们介绍了Mugeda Studio.这一节我们讲一下怎么通过Studio创建新作品.首先登陆网站,如果还没有登陆账号,你可以登录 www.mugeda.com 免费注册一个.登录网站后,点击 ...

  7. [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画

    今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...

  8. [Mugeda HTML5技术教程之17] 理解Mugeda访问统计结果

    1. 功能简介 Mugeda提供动画统计功能,使得动画制作者可以直观的了解动画的浏览情况,包括浏览量,参与度,以及观看者的分布情况. 目前统计功能主要展示动画内容和广告工程的统计数据.在动画被发布或导 ...

  9. [Mugeda HTML5技术教程之18]如何在Android应用中使用Mugeda动画内容

    1.简介 本文主要介绍如何在Android应用程序中使用Mugeda动画.Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画.动画内容本身 ...

随机推荐

  1. 无效的过程调用或参数: 'Instr'解决方法

    以前我一直使用ASP无组件上传类来上传文件.但是今天又个客户反映说.不能上传.出现错误.,但在我电脑上测试没问题.后来发现客户用的是IE8 于是开始找解决方法 错误如下:Microsoft VBScr ...

  2. Owncloud中文目錄包裹下載

    Owncloud提供私有雲端儲存環境的自由軟體解決方案,目前4.5版中文支援已經很完整,但是早期ZIP壓縮檔內的檔名不支援utf-8,所以使用ZIP格式下載整個目錄或多個檔案時大部分解縮軟體無法正確處 ...

  3. 黑马程序员_Java泛型

    泛型 概述: ClassCaseException:类型转换异常. 代码中不加泛型,编译没问题,运行可能会发生异常.但是用户解决不了,这样程序就存在安全隐患.所以我们希望在编译时期就能看出问题,程序员 ...

  4. cf509B Painting Pebbles

    B. Painting Pebbles time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. 【KMP】剪花布条

    KMP算法 又水了一题.算是巩固复习吧. Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽 ...

  6. Neighbour table overflow --- arp表溢出

    [root@jiangyi01.sqa.zmf /home/ahao.mah] #grep . /proc/sys/net/ipv4/neigh/default/gc_thresh* /proc/sy ...

  7. 【Ruby on Rails学习二】在线学习资料的整理

    由于工作任务重,时间紧,没有太多学习的时间,大致找了些在线学习资料,这里做个整理,希望对同样准备学习的朋友有帮助 在线文档类: Ruby on Rails 实战圣经  使用 Rails 4.2 及 R ...

  8. LeetCode - 204. Count Primes - 埃拉托斯特尼筛法 95.12% - (C++) - Sieve of Eratosthenes

    原题 原题链接 Description: Count the number of prime numbers less than a non-negative number, n. 计算小于非负数n的 ...

  9. [深入react] 4.牛逼闪闪的虚拟DOM

    React.createElement嵌套后的结果就是虚拟dom,虚拟dom听着很高端,其实就是一个json,类似: { type:'div', props:{ className:"box ...

  10. 解析Xcode把应用程序打包成ipa---解决打包完新版本itunes提示不是有效应用程序的问题

    Xcode把应用程序打包成ipa是本文要介绍的内容,不多说,先俩看内容.注意:本方法需要先制作假凭证编译于项目中,否则产生的ipa还是无法于iPhone中运行. 制作方法请参考: http://blo ...