摘要: 本文档通过一个实例介绍可定制贺卡的动画的制作过程。实例包含两部分: 1. 动画部分:介绍动画制作过程中如何给祝福词和落款的文本对象命名,如何给定制按钮定义表单动作。 2. 代码部分:介绍贺卡的脚本逻辑的编写。 例程编辑地址: https://cn.mugeda.com/animation/edit/0326f6a1 例程预览地址: https://cn.mugeda.com/client/preview_css3.html?id=0326f6a1动画部分 动画需要注意修改的地方: 1. 给祝福词和落款等文本对象命名; 2. 给定制按钮定义表单动作。给祝福词和落款等文本对象命... 阅读全文
posted @ 2014-02-18 10:22 mugedatech 阅读(2567) 评论(0) 推荐(1) 编辑
摘要: 1.简介本文主要介绍如何在Android应用程序中使用Mugeda动画。Mgeda动画是标准HTML5格式的动画,在Android应用程序中可以使用WebView来加载Mugeda动画。动画内容本身可以放在应用程序本地,也可以放在远端。先来看一下Mugeda动画的格式。下图中展示了一个典型Mugeda动画的文件结构。对于Android应用程序来说,需要加载index.html来打开动画。 2. 示例下面用一个实例在演示如何使用,这个实例的界面如下图所示。中间的白色区域是WebView用来展现Mugeda动画。点击本地动画按钮让WebView加载本地动画,点击远端动画让WebView加载远端服务 阅读全文
posted @ 2014-02-17 17:13 mugedatech 阅读(487) 评论(0) 推荐(0) 编辑
摘要: 1. 功能简介Mugeda提供动画统计功能,使得动画制作者可以直观的了解动画的浏览情况,包括浏览量,参与度,以及观看者的分布情况。目前统计功能主要展示动画内容和广告工程的统计数据。在动画被发布或导出,并且被观看过之后才会在统计页面中看到关于这个动画的统计数据。在动画被发布或导出,可以将动画放在本地观看,也可以放到服务器上供大量用户观看,这些情况下观看情况都能被统计。1.1 在动画作品列表中,点击每个动画下方的发布按钮就可以发布一个动画了。 1.2 在每个动画的编辑页面中,点击下图红框中的按钮,就会将动画导出到本地。2. 使用介绍2.1 动画内容统计概述登录Mugeda网站后,点击左侧的访问统计 阅读全文
posted @ 2014-02-17 10:19 mugedatech 阅读(788) 评论(0) 推荐(1) 编辑
摘要: 本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏。PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后,操作手机上的游戏可以同步控制主屏幕的游戏画面和结果。游戏结果会记录到排行榜,商家定期会对排名前10的玩家进行奖励。游戏规则和前面分析过的爱消除的案例类似,这个游戏本身就是在原来的单机游戏的基础上有进一步开发做了跨屏通讯的内容。(一)游戏规则: 1、开始游戏时,德基的logo机出现在最上面一行的任意一格; 2、游戏时,方块随机从上往下落,填满所有的方框,相同的三个石头不能相邻的排在一列或者一行; 阅读全文
posted @ 2014-02-12 16:02 mugedatech 阅读(1201) 评论(2) 推荐(0) 编辑
摘要: 本文档要分析的案例是一个一氧化碳还原氧化铜的教育小课件,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作移动教育课件的方法。Mugeda为移动教育领域和移动数字出版领域提供理想的教育课件/微课程和交互动画内容制作方案,在PC上制作相关内容的Flash创作人员可无障碍使用Mugeda制作适合平板电脑和智能手机的课件和数字出版物。课件内容:一氧化碳还原氧化铜实验课件。课件动画的前半段是实验设备的安装过程动画;后半段是交互部分,在这部分学生可以通过点击按钮的步骤来完成实验,有点燃酒精灯1,点燃酒精灯2,通入CO,然后是停止实验的步骤,有关闭两个酒精灯,和关闭CO。该实验有一定的危 阅读全文
posted @ 2014-02-11 11:19 mugedatech 阅读(1154) 评论(0) 推荐(2) 编辑
摘要: 本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法。(一)游戏规则: 1、开始游戏时,手机出现在最上面一行的任意一格; 2、开始游戏时,彩色石头随机从上往下落,填满所有的方框,相同的三个石头不能相邻的排在一列或者一行; 3、手机从上移动到最下面一行的任意一格,就算胜利,或游戏时间结束,消除的石头数量超过30个也算胜利。(二)、游戏玩法 只要三个相同的石头相邻的排在一列或者一行,他们就会消失,同时上面的石头往下落,落到消失的石头位置上。游戏动画演示:https://en.mugeda.com/client/preview 阅读全文
posted @ 2014-02-08 11:37 mugedatech 阅读(1506) 评论(0) 推荐(1) 编辑
摘要: 在广告主的需求中,有很多情况下需要在动画中添加一些外部链接。这份文档就在Mugeda动画中添加外部链接的方式,做一下梳理。1.通过点击触发的链接就是要用户点击屏幕来触发链接的情况,这是推荐使用的方式。因为存在流量的考虑,不需要任何点击就跳转的操作,在有些移动设备上是不被支持的,所以我们推荐的触发跳转链接的方式是通过点击触发。实现的方式是:在舞台上选中一个物体对象,在动作中选择“链接”,输入框中写入完整的链接的URL,如下图。这样当用户点击这个物体时就会跳转到相应的页面。2.自动跳转的链接如果用户确实需要用到这种需求,在执行到某帧时自动跳转。比如动画播放到最后一帧跳转链接。可以这样实现:在要跳转 阅读全文
posted @ 2014-01-26 14:08 mugedatech 阅读(1128) 评论(0) 推荐(0) 编辑
摘要: mugeda动画平台还可以用来制作跨屏互动的动画应用,比如在PC端的大屏幕上显示动画的主界面,同时会显示出供手机扫描的二维码,手机扫描后会在手机上显示手机端动画界面。通过手机就可以和PC端的显示界面跨屏互动操作。这种动画应用在类似一些商场搞活动,或者户外宣传等常见可以使用。可以制作一对一玩的跨屏互动应用,也可以制作一对多玩(多个玩家同时玩)的跨屏互动应用。为了更好的理解跨屏互动应用的使用,本文档将通过一个简单的例子来演示跨屏动画的制作过程。一、制作动画1.PC端动画制作a.在PC端,设置舞台吃尺寸为宽700、高480b.在舞台中放在一个文字对象,并命名为info(用于显示连接及通讯信息)c.在 阅读全文
posted @ 2014-01-23 16:46 mugedatech 阅读(1123) 评论(0) 推荐(1) 编辑
摘要: 一.API 概述Mugeda API 提供了一个简单的,结构化的方法来实时动态管理Mugeda内容。它提供了一下方法:•访问Mugeda内容中的对象。•获取和设置对象属性,如位置、旋转、比例、不透明度等。•控制Mugeda动画的回放(例如:播放/暂停/跳转)。•在舞台中添加/移除/编辑对象。•处理鼠标/触控事件创造互动体验Mugeda API 是基于系统JavaScript技术。 不需要额外的库。二.开始开始使用Mugeda API是很轻松的。 在Mugeda IDE中,只需点击脚本工具栏上的按钮 。 然后在脚本窗口中输入你的代码。三.命名空间和类大部分的Mugeda API是基于一个叫做Mu 阅读全文
posted @ 2014-01-20 16:59 mugedatech 阅读(1145) 评论(0) 推荐(0) 编辑
摘要: 动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题。这一节,我们讲述怎样将制作好的动画内容发布到想要的地方。对制作好的内容,可能的使用场景主要有以下三种:直接导出;发布到Mugeda CDN;上传到你自己的或者第三方的服务器上。直接导出到本地,并部署在其他地方。点击工具栏上的导出按钮,或者点击菜单栏的File\导出\动画,就可以把动画包的ZIP文件下载到本地,解压缩后就是动画包的文件夹。然后你可以部署到其他地方。导出的动画包的内容如下图,根据制作的动画内容的不同,动画包的内容也会有所不同。根据动画有没有使用脚本,主要有两种类型。 包类型1,适用于用户创建了脚本,或 阅读全文
posted @ 2014-01-20 15:48 mugedatech 阅读(416) 评论(0) 推荐(0) 编辑
摘要: 元件是一个可以在舞台上实例化和再利用的预先生成的独立动画。一个元件有它自己的时间轴(层,单位等),可以独立显示的动画。元件提高了动画的重用性和灵活性,是个强大的存在。元件可用于创建复杂的动画效果。 所有元件都在元件库里管理。您可以创建、编辑、删除元件,或将他们归类到不同的文件夹。元件既可以直接拖拽到舞台上生成实例,更可以再脚本中,通过Mugeda API 代码动态生产实例,一个元件可以生成多个实例,并可随时动态删除,在复杂的动画中,比如小游戏,非常方便,Mugeda API的使用后面会有专门的章节介绍。建立新的元件:在元件库栏的左下角,有新建元件的按钮,还有复制元件的按钮。点击新建元件按钮建立 阅读全文
posted @ 2014-01-17 16:42 mugedatech 阅读(536) 评论(0) 推荐(0) 编辑
摘要: 上一节我们已经在新建的作品中添加了元素和动画,如果我们想要作品能够和用户互动,就需要给元素添加动作行为。在舞台上选中一个要添加动作的元素,在属性栏的动作下拉列表中选择一个动作。可选类别有链接、表单、行为。链接可以导航到网页;表单可以被编辑并提交;行为是更高级的动作方式(包括播放控制、过渡、调用电话功能、回调函数等)。后面会有详细介绍。链接是在广告动画中比较常用的方式。通过链接的方式,我们可以再作品中加入想要用户浏览的一些链接。在动作下拉列表中选择“链接”后在后面的输入框中输入网址。然后选择链接的打开方式,有外部打开、内部打开和扩展显示。如果选择外部打开,该链接将在默认浏览器下一个新的窗口/标签 阅读全文
posted @ 2014-01-17 14:03 mugedatech 阅读(764) 评论(0) 推荐(0) 编辑
摘要: 前一节我们讲述了怎么在新建的作品中添加元素,元素加好以后我们还想让他们动起来,来实现比较炫的效果。这节我们将要讲述怎么给元素添加动画。Mugeda动画是通过时间轴和帧来实现的。通过在时间轴上创建图层和单元,您可以在几分钟内创建专业动画。时间轴界面如下图。对于要在移动设备上投放的作品,帧速最好不要超过12,因为帧速太快有些移动设备会比较吃力,设置帧速在属性区。 动画图层是用来组织添加对象 每个图层可以包含一个或多个单元(单元将在后面解释) 单击图层将使该图层置为当前图层 添加到舞台的元素将被添加到当前图层一个对象一定属于一个图层,属于不同的层中的对象,将有不同的纵向位置,靠近观看者的是上层,下. 阅读全文
posted @ 2014-01-16 14:12 mugedatech 阅读(503) 评论(0) 推荐(1) 编辑
摘要: 我们上节讲了怎么创建新作品。新作品创建好后,我们就可以在里面添加内容了。这一节,我们将要讲述如何在作品中添加元素。动画的中的内容都是以各种元素的形式组成的。对于添加到舞台上的元素,我们可以在时间线上添加动画,也可以在属性对话框中修改相应属性,还可以在脚本中通过名字获取到该元素对象,通过Javascript代码通过Mugeda API 操作该元素从而完成更加丰富多彩的内容。这节我们主要讲解怎么添加元素和修改其属性,给元素添加动画和通过脚本操作元素将会在后面的章节中有详细介绍。Mugeda支持的元素类型有图片、文本、矩形、圆角矩形、椭圆。对于除了图片以外的元素类型,都可以通过在工具栏中选中所需元素 阅读全文
posted @ 2014-01-16 11:46 mugedatech 阅读(448) 评论(0) 推荐(0) 编辑
摘要: 前一节,我们介绍了Mugeda Studio。这一节我们讲一下怎么通过Studio创建新作品。首先登陆网站,如果还没有登陆账号,你可以登录 www.mugeda.com 免费注册一个。登录网站后,点击网站左侧的“创建作品”,然后从出现的创建列表中选择”从Mugeda Studio创建”,这样Mugeda Studio的在线集成开发环境会在浏览器窗口中打开了。如果已经在Studio页面想新建另一个作品,可以点击文件菜单下面的“新建”按钮来开始,如图:进入Mugeda Studio后,首先需要选择一个动画尺寸,可以选择预设的尺寸,也可以手动输入自定义尺寸。然后选择画类型,Mugeda支持CSS3 阅读全文
posted @ 2014-01-15 10:53 mugedatech 阅读(418) 评论(0) 推荐(0) 编辑
摘要: Mugeda Studio 是基于云平台的制作HTML5动画的专业可视化集成开发环境,可以让你在不需要安装客户端程序的情况下,只通过浏览器就能轻松创作高质量的HTML5动画。HTML5动画相对于传统的Flash动画最大的特点是可以跨平台部署,除了能在PC上显示,还可以在手机、pad等移动设备上完美显示。本节我们将主要介绍下Studio界面的相关组件,以方便大家后续使用。各组件的具体用法,后续章节会陆续介绍。下面的截图是一个Mugeda Studio界面的工作图。 Studio界面的主要组件有菜单栏、工具栏、时间线、工具条、舞台、元件库、脚本、属性。如下图所标示。注意这些组件几乎都可以通过鼠标拖 阅读全文
posted @ 2014-01-14 17:58 mugedatech 阅读(497) 评论(0) 推荐(1) 编辑
摘要: 今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程。在开始制作之前,请确保你已经拥有一个Mugeda网站的账号。如果还没有,你可以登录 www.mugeda.com 免费注册一个。简单来讲,制作一个Mugeda动画内容,包含有如下几个步骤:1. 添加元素(图片、文字等)到舞台;2. 为添加的元素定义动画;3. 定义和用户的交互行为(例如点击跳转等);4. 导出或发布内容;在这个例子中,我们制作一个简单的动画,让一段”Hello, world!”的文字旋转着出现在屏幕中央,点击文字后,调转到一个指定的页面。动画的演示地址如下:https://cn.mu 阅读全文
posted @ 2014-01-13 15:13 mugedatech 阅读(713) 评论(1) 推荐(0) 编辑
摘要: Mugeda提供基于云的平台,供开发人员和设计人员快速的开发、发布和统计基于HTML5的,包含丰富动画和交互的移动富媒体内容。 阅读全文
posted @ 2014-01-10 18:46 mugedatech 阅读(1155) 评论(2) 推荐(0) 编辑
摘要: HTML5并不试图解决所有问题。但是在很多适合的场合,HTML5是不二选择。 阅读全文
posted @ 2014-01-10 15:27 mugedatech 阅读(610) 评论(1) 推荐(0) 编辑