功能详解

功能详解

【必看帖】关于H5中声音和视频的处理,看过的问题都解决了!

Mugeda培训songyue 发表了文章 • 0 个评论 • 417 次浏览 • 2016-12-22 16:26 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点:图片压缩、声音压缩、视频压缩
 
图片压缩: 
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点:图片压缩、声音压缩、视频压缩
 
图片压缩: 
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压缩,如图:
1_(1).png

 
压缩好,点击【Downloud】下载到电脑的指定位置,如图:
2_(1).png

 
声音压缩: 
推荐大家【Audacity】这个软件,如图:
3_(1).png

 
把要压缩的声音拖到灰色区域,就能上传并开始编辑,如图:
4_(1).png

 
用选择工具选中音轨中不需要的部分,【Delete】就可删除,如图:
5_(1).png

 
点击放大镜,可以放大音轨,如图:
6.png

 
给声音加特效,需先选中需要添加特效的音轨部分,点击【特效】,如图:
7.png

 
把立体声分离成单声,可以让声音文件变得更小,如图:
8.png

 
在能保证声音质量的前提下,可删除其中一个声道,如图:
9.png

 
【文件】—【导出】,在弹窗的右下角【选项】,可以对声音质量进行选择,数字越小,表示声音质量越差,文件尺寸越小,一般默认为24,如图:
10.png

 
【声道模式】选择【合并立体声】,如图:
11.png

 
视频压缩: 
推荐大家用Freemake Video这个软件,它在压缩的质量和大小上都不错,如图:
12.png

 
左上角【视频】可以导入视频,视频右侧【小剪刀】可裁剪视频,如图:
13.png

 
如果只保留前10秒视频,先定位在10s的位置,单击【开始选取范围】,如图:
14.png

 
单击【移动至选取范围的开始】,即此时的点是要裁剪视频的开始,如图:
15.png

 
把鼠标移动到要裁剪内容的末尾,点击【剪下选取范围】,如图:
16.png

 
只保留了前10s的视频,点击右下角【ok】,完成裁剪,如图:
17.png

 
该软件提供了很多格式的导出,如图:
18.png

 
如果要导出MP4,点击【编辑预先设定】按钮,如图:
19.png

 
点击【转换】,画面大小可以自定义,视频编码器一定要选【H.264】,如图:
20.png

 
比特率类型,设置越大导出的视频文件也就越大,如图:
21.png

 
关于视频中音频的设置,音频解码器一定要选择【AAC】,其他可根据自己的需求设置,如图:
22.png

 
特别注意:在H5导入的视频,视频编码器一定要设置成【H.264】,音频编解码器一定要 设置成【AAC】。
 

2.3.13 动画:复制帧粘贴帧

Mugeda培训songyue 发表了文章 • 0 个评论 • 134 次浏览 • 2016-12-20 17:00 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程   
 
本节知识点:复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层  
 
复制帧-粘贴帧: 
选择某一个图层的全部帧,全选后时间线呈草绿色,右键选择【复制帧】,如图:




 
在没有帧的地方, 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程   
 
本节知识点:复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层  
 
复制帧-粘贴帧: 
选择某一个图层的全部帧,全选后时间线呈草绿色,右键选择【复制帧】,如图:
1.png

 
在没有帧的地方,右键【粘贴帧】,如图:
2.png

 
这时候刚才的一整段动画就被粘贴过来了,如图:
3.png

 
选中第一个空白关键帧,右键【删除帧】,就会得到与复制动画完全一致的一整段动画,如图:
4.png

 
复制关键帧-粘贴关键帧: 
选中关键帧,右键【复制关键帧】,如图:
5.png

 
选择要粘贴的位置,右键【粘贴关键帧】,如图:
6.png

 
注意,不能把关键帧粘贴在另外一段动画的时间单元里,否则会出现如下提示,如图:
7.png

 
目前,不支持复制一个图层的多个关键帧,如图:
8.png

 
则会出现如下提示,如图:
9.png

 
但支持同时复制多个图层的关键帧,如图:
10.png

 
然后选择要粘贴的位置,右键【粘贴关键帧】,如图:
11.png

 
复制多个图层-粘贴多个图层: 
选中所有的4个图层,右键【复制帧】,如图:
12.png

 
另外新建4个图层,如图:
13.png

 
选择最上面图层第2个没有帧的地方,【右键】粘贴站,如图:
14.png

 
复制的4个图层的全部内容全部都粘贴过来了,如图:
15.png

 

2.1.12 界面与舞台:加载的相关设置

Mugeda培训songyue 发表了文章 • 0 个评论 • 63 次浏览 • 2016-12-13 14:53 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 说明:浏览器100%才能看到加载页面的设置
 
本节视频教程请点击此处。
 
加载页面的制作,具体步骤如下:  
1、加载页面默认是进度条,如图:




 
2、样式、提示文字、文字大小均可自由设置,如果设置了动态 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 说明:浏览器100%才能看到加载页面的设置
 
本节视频教程请点击此处。
 
加载页面的制作,具体步骤如下:  
1、加载页面默认是进度条,如图:
1.png

 
2、样式、提示文字、文字大小均可自由设置,如果设置了动态文字,在页面加载的时候,可以看到文字在动,如图:
2.png

3.png

 
3、图片位置,设置的值越大,前景图片的位置越靠下;图片宽度设置的值越小,前景图片的尺寸就越小,如图:
4.png

 
4、当然你还可以在首页里自己制作加载页,只需要在右侧的样式中设置【首页作为加载页面】,如图:
5.png

 
5、除了自己制作,还可以从Mugeda模板里添加加载页,如图:
6.png

 
Mugeda提供丰富的加载界面模板,除此之外还有表单、交互、逻辑判断等模板供大家免费使用,如图:
7.png

 
点击【确定】添加加载界面到舞台上,并把添加的模板调整至首页,然后在样式上设置【首页作为加载界面】,如图:
8.png

 
关于Mugeda模板的更多使用方法,请点击这里学习。

 

 

2.1.14 界面与舞台:元件界面介绍

Mugeda培训songyue 发表了文章 • 0 个评论 • 61 次浏览 • 2016-12-13 14:36 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
 
一、新建元件 
点击舞台右侧的元件面板,左下第一个按钮“新建元件”,如图:




 
查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
 
一、新建元件 
点击舞台右侧的元件面板,左下第一个按钮“新建元件”,如图:
1.png

 
默认命名为“元件1”,自动进入元件编辑界面,如图:
2.png

 
二、如何把新建元件添加到舞台? 
在元件编辑界面完成编辑后,点击页面回到舞台,如图:
3.png

 
把元件添加到舞台的方法有两种
1、鼠标放到元件上,成“十字”后拖动不放,到舞台再松开,如图:
4.png

 
2、点击元件面板下方的“添加到绘画板”按钮,也可把元件导入到舞台,如图:
5.png

 
三、复制元件: 
点击元件面板左下第二个“复制元件”,即可复制一个新的元件,默认命名为“元件2”,如图:
6.png

 
在复制元件,即“元件2”里进行修改,不会影响到“元件1”内的内容 ,如图:
7.png

 
四、新建元件文件夹: 
点击元件面板下方的“新建文件夹”按钮,可以在元件面板里添加文件夹,如图:
8.png

 
文件夹可以方便的对元件、视频、音频等进行管理,如图:
9.png

 
五、导出元件:
点击元件面板下方的“导出”按钮,如图:
10.png

 
如果想让同一个元件应用在不同的作品中,可以用导出功能。选择要导出的元件,点击“导出”按钮,如图:
11.png

 
在新建的作品里,就能看到刚才导出的元件,把它拖动到舞台上就可以使用了,如图:
12.png

 
六、编辑元件: 
编辑元件有多种方法,既可以点击元件面板下方的“编辑”按钮,也可以双击元件,进入到元件编辑界面,如图:
13.png

 
七、删除元件:
14.png

 
 

2.1.13 界面与舞台:物体属性设置

Mugeda培训songyue 发表了文章 • 0 个评论 • 57 次浏览 • 2016-12-13 14:21 • 来自相关话题

`想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:设置坐标,改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
 
1、熟悉属性面板:




 
绘制图形 查看全部
`想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:设置坐标,改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
 
1、熟悉属性面板:
1.png

 
绘制图形,物体的属性都在右侧查找
2.png

 
2、设置物体大小和坐标:​
3.png


4.png

 
3、设置透明度:​
5.png


6.png

 
输入值的方式更准确
7.png

 
4、线条类型: 
包括实线、点线、虚线、点划线
8.png

 
5、填充:
9.png


10.png

 
6、X、Y、Z轴旋转:
11.png


12.png


7、端点: 
端点只能对在Mugeda绘制的线条进行设置,如图:
13.png

 
8、接合: 
对绘制物体的线条接合处进行设置,如图:
14.png

 
9、背景图片: 
在绘制图形里插入图片,还可以通过图片位置和尺寸进行其他设置,如图:
15.png


如果只想保留图片造型,可以通过把线条的颜色设置为空,如图:
16.png


10、预置动画: 
可以在属性面板上给物体添加预置动画,也可以用选择工具选中物体添加,如图:
17.png


11、组类型: 
物体成组后,可以对其进行裁剪内容的操作。如果物体有动画,则裁剪后会有类似遮罩动画的效果,但占用空间更小,推荐使用。
18.png


12、结束时复位: 
首先给物体添加“自由拖动”,然后再打开结束时复位开关,这样物体无论被拖动到什么位置,结束时都会恢复原位。
19.png

 
13、运动: 
属性面板中的运动类型,只有给物体添加了“关键帧动画”或“曲线变形动画”才会出现,而且鼠标要选中时间上的关键帧。
20.png


 

2.1.11 界面与舞台:关键帧和页面的命名

Mugeda培训songyue 发表了文章 • 0 个评论 • 64 次浏览 • 2016-12-08 14:54 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
1、用一个例子来说明,给关键帧命名,并实现跳转功能  
举例:点击右侧的图标(方块、圆、五角星),可以实现跳转到指定帧,具体操作步骤如下:  
 
选择出现红色方框的关键帧,在关键帧处 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
1、用一个例子来说明,给关键帧命名,并实现跳转功能  
举例:点击右侧的图标(方块、圆、五角星),可以实现跳转到指定帧,具体操作步骤如下:  
 
选择出现红色方框的关键帧,在关键帧处命名“方块”,鼠标在空白处单击一下,如图:
1.png

 
命名成功后,关键帧上方会出现一个黄色的三角,如图:
2.png

 
同理,给出现蓝色圆形的关键帧命名“圆”,如图:
3.png

 
同理,给出现黄色五角星的关键帧命名“五角星”,如图:
4.png

 
然后依次给右侧图标添加跳转行为,选择红色方块,如图:
5.png

 
添加“跳转到帧并停止”的行为,触发条件为“点击”,如图:
6.png

 
点击编辑,在帧名称里选择“方块”,如图:
7.png

 
注:其他图标的行为添加方式相同,这里就不一一说明了  
 
给关键帧命名的好处:有时候我们要修改动画,删帧或者增帧,这时候如果采用的是跳转帧号的话,就要一个个去修改,很麻烦,给关键帧命名就方便多了。
 
如果既填写了帧号,又填写了帧名称,Mugeda会先找帧号,如图:
8.png

 
2、给页面命名  
Mugeda默认的页面名,以数字升序排列,把鼠标放到页面名处,就可更改页面名称,给第2页重命名为“尾页”,如图:
9.png

 
给红色方框添加“跳转到页”行为,如图:
10.png

 
在编辑里设置参数,页名称设置为“尾页”,如图:
11.png

 
与帧名称不同的是,如果既填写了页号,又填写了页名称,Mugeda会首先去找页名称。

 

1.6.4 作品创建前必读:屏幕适配设置(渲染模式、自适应、发布模式、旋转模式)

Mugeda培训songyue 发表了文章 • 0 个评论 • 147 次浏览 • 2016-12-08 14:43 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​

本节视频教程请点击此处。
 
本节知识点: 重点讲解【文件】—【文档信息】中的渲染模式、自适应、发布模式、旋转模式相关设置
 
一般我们把舞台的尺寸设置为320*520:




 
我们可以对适配方式进行设置,让 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​

本节视频教程请点击此处。
 
本节知识点: 重点讲解【文件】—【文档信息】中的渲染模式、自适应、发布模式、旋转模式相关设置
 
一般我们把舞台的尺寸设置为320*520:
1.png

 
我们可以对适配方式进行设置,让我们的作品可以满足不同屏幕的播放。适配方式从【文件】—【文档信息】里设置:
2.png

 
这里需要说明的是,【文档信息】里的导出名称指的是发布后微信标题栏的名称
3.png

 
而舞台上【属性】中的【内容标题】指的是在编辑页面里的名称:
4.png

 
渲染模式,默认为标准,其他几个说明如下 
标准:单个网页的引用 
嵌入:可以嵌入iframe元素中 
内联:通过js方式加载动画 
弹出:弹出对话框显示动画
5.png

 
自适应,一般我们用【宽度适配,垂直居中】 
宽度适配,垂直居中:以宽度来等比例放大缩小您的作品,以320宽度做的,那么在屏幕上显示就是320,通过改变作品的高,来适配您的屏幕;如果您的手机比较窄,那就会把作品的上下两端截掉。
高度适配,水平居中:以高度适配宽度,如果你手机特别的窄,也会把两端截掉。 
全屏:无论你在什么屏幕播放,都会显示您作品的完整内容。
6.png

 
宽度适配,垂直居中,让所有画面显示在屏幕上的小技巧 
在舞台上画安全框,320*416基于iPhone4s大小,目前这个是最小的,所以用这个作为我们的安全框:
7.png

 
把安全框移动到舞台中间,可以对照绿色的参考线,此时的状态下,安全框位于舞台的中央:
8.png

 
如图,完成安全框的绘制:
9.png

 
我们预览时,无论屏幕有多大,背景图片都是把屏幕撑满的,就算手机截掉上下两端,在安全框里设计,有效内容都能被看到:
10.png

 
当您要发布作品时,记得把安全框图层删掉,这样别人预览你的作品时,就不会看到安全框了:
11.png

 
高度适配,水平居中,让所有画面显示在屏幕上的小技巧,同样的方式,这里不再赘述。
 
发布方式: 
前两种发布方式不推荐,动画会卡顿,推荐使用智能加速渲染发布。智能加速渲染的意思就是配合硬件加速动画:
12.png

 
适配方式: 
自动适配:默认是竖屏,动画会撑满竖屏屏幕;默认是横屏,动画会撑满横屏屏幕,但是会发生变形,更多的情况我们选用的是强制竖屏:
12.png

 
如果您要做强制横屏的H5,设置舞台大小520*256。这是基于iPhone6s plus在微信播放时的全屏尺寸。当然你也可以根据需要自行设置,但前提是保证在大屏幕手机能看到全屏:
14.png

 
然后选择【文件】—【文档信息】,设置旋转模式和自适应:
15.png

 

 

2.9.9 API的应用:将Mugeda部署在第三方服务器

Mugeda培训songyue 发表了文章 • 0 个评论 • 168 次浏览 • 2016-12-08 11:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 Mugeda制作的内容可以很方便的直接发布到Mugeda CDN。参见下图。发布到Mugeda CDN后,你会得到一个发布地址,该地址可以用来进行分享。Mugeda会自动处理所有必要的操作,例如微信权限认证等。


查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 Mugeda制作的内容可以很方便的直接发布到Mugeda CDN。参见下图。发布到Mugeda CDN后,你会得到一个发布地址,该地址可以用来进行分享。Mugeda会自动处理所有必要的操作,例如微信权限认证等。
11.jpg


如果你选择导出Mugeda内容并自行部署到一个第三方的服务器上,Mugeda提供一套完善的机制来支持这些操作。简单来说,需要完成如下步骤: 
 
1. 你拥有一个微信公众号,和一个绑定了微信的域名; 
2. 你知道如何获取有效的微信认证信息; 
3. 用微信认证信息对Mugeda内容进行配置; 
4. 部署配置后的内容; 

下面详细介绍每一个步骤。
1.  你拥有一个微信公众号,和绑定了微信的域名 
任何一个可以在微信中进行分享的域名,都必须通过微信的认证并绑定域名。为了绑定域名,你必须先有一个公众号。有了公众号后,登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。关于如何申请公众号以及如何进行微信域名绑定,不在本文讨论范围。请咨询你们的微信管理员或者访问微信官方文档。 以下的讨论假定你已经拥有一个绑定了微信的域名。

2.  你知道如何获取有效的微信认证信息 
拥有微信绑定的域名后,你还需要有有效的微信认证信息。典型的微信认证信息包括: 
appId: 分配给公众号的唯一标识 
timestamp: 生成签名的时间戳 
nonceStr: 生成签名时的随机串 
signature: 认证需要的签名  

关于如何获取或者生成这些参数,请参考微信官方开发文档。这里不再赘述。需要强调的是,由于微信签名认证信息有效期为7200秒,即2个小时,因此在第三方部署时需要保证这些信息在必要时需要实时更新,保障总是能够获取到最新的认证信息。

以下的讨论假定你已经拥有了有效的微信认证信息。  

3.  用微信认证信息对Mugeda 内容进行配置 
当你准备好了上述数据,我们就可以对Mugeda内容进行配置了。步骤如下: 
首先在Mugeda云编辑器中导出想要发布的内容:
12.jpg


导出后会得到一个完整的HTML5内容包。 在内容包中包含有一个index.html文件,这个文件是我们配置的对象。用文本编辑器打开该文件。
13.jpg


在index.html文件中,有一个参数变量叫做_mrmcp,这个变量记录了Mgueda内容进行播放时的一系列控制参数。我们需要定制的就是在这个参数列表中加入我们需要的信息。
14.jpg


配置信息可以包括微信认证信息,_mrmcp.wechatAuth。所需参数参见上述第2步的描述。配置好后的_mrmcp参数如下图所示:
15.jpg


需要说明的是: 
1.    由于微信权限设置有时间限制(7200秒),因此这些权限信息,主要是签名signature和时间戳timestamp参数,需要及时进行更新。可以参考的办法,是在服务器端通过动态技术(例如php等)动态生成这些信息,或者在页面中通过动态技术(例如Ajax请求)获取这些信息,并配置相应的_mrmcp参数。

2.    如果采用异步Ajax等异步技术加载权限信息时,index.html中名为loader.js的脚本文件,需要在Ajax处理完成后才能加载,否则可能会导致加载或者渲染异常。

3.    对Mugeda内容进行第三方部署时,仅需要按照上述步骤配置_mrmcp.wechatAuth参数即可,不需要再次加载微信的SDK JS文件(本文生成时地址为http://res.wx.qq.com/open/js/jweixin-1.0.0.js),也不需要再次调用wx.config, wx.ready或者wx.onMenuShareTimeline等函数。这些具体的操作Mugeda内容都会自动完成。否则可能会导致分享和权限异常。

4.     部署配置后的内容:完成上述步骤后,就可以将配置后的内容部署到目标第三方服务器上,并将部署后的地址发布出去就可以了。对上述流程如有疑问,可以加入Mugeda学习群(QQ: 263360290)进行交流。

2.4.18 行为:使用自定义回调函数

Mugeda培训songyue 发表了文章 • 0 个评论 • 144 次浏览 • 2016-12-08 11:34 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 Mugeda提供完善的交互行为功能,能够无需代码即可方便的添加丰富的交互行为,例如对动画的控制(播放、暂停、跳转等),提交表单,播放视频,上传图片等。
 
在一些特殊情况下,用户可能希望能够编写自定义函数来处理交互逻辑 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 Mugeda提供完善的交互行为功能,能够无需代码即可方便的添加丰富的交互行为,例如对动画的控制(播放、暂停、跳转等),提交表单,播放视频,上传图片等。
 
在一些特殊情况下,用户可能希望能够编写自定义函数来处理交互逻辑。比如,在一些小游戏内容中,用户可能希望能够实现较为复杂的自定义逻辑来满足游戏的需要。这时候,就可以考虑通过自定义的回调函数来进行处理。本教程将会说明如何定义自己的回调函数来添加自己的代码。
 
使用自定义的回调函数的基本流程是在创作的动画内容中为一个指定的元素添加名为“回调函数”的行为,并为行为指定一种触发方式。然后,就可以在代码编辑器中添加回调函数的定义了。
 
下面举例说明一下。在下面的例子中,我们为一个矩形添加一个点击后移动一个圆形的回调函数。首先生成一个包含有圆形和矩形的一个内容,并将圆形命名为"circle"。如下图所示:
1.png

 
然后选中矩形,并点击矩形右下角的添加行为按钮。
2.png

 
在出现的“编辑行为”对话框中,选择“回调函数”条目。在右侧的“触发条件”中,默认的触发条件即为“点击”。也可以用其它合适的触发条件,比如“向左滑动”,“摇一摇”等。
3.png

 
点击操作中的编辑按钮,编辑回调函数的参数。
4.png

 
下面就可以开始编写回调函数的代码了。首先打开代码窗口。
5.png

 
在代码窗口中输入自定的回调函数实现。下面这段代码的含义是,在舞台上寻找一个叫做"circle"的对象,并把它移动到x=100的位置。 
 
window.moveObject = function (){     
 // 获取名称为name的元素对象     
 var target = mugeda.scene.getObjectByName(name);     
 if(target){         
    // 修改获取的元素的位置         
    target.x = 100;     
 } 
}

6.png

 
回调函数的定义方式为:  
window.functionName = function(object, param1, param2){}
 
注意:  
1) 目前回调函数需要定义在window的全局空间。我们今后会取消这个约束用更加规范的方式来定义回调函数。
2) 回调函数目前携带3个参数:第1个参数是行为触发的API对象,在上面这个例子中,即为矩形的API对象。除此以外,回调函数允许用户指定两个参数,即第2个和第3个参数param1和param2。这两个参数可以在编辑回调函数属性的时候指定。
 
在最简单直接的场景下,用户只需要指定一个回调函数名称,并在代码窗口中提供该函数的定义即可。
 
关于如何在Mugeda内容中使用代码以及API,可以参见如下文档:  
API的应用:在动画中添加代码 
http://bbs.mugeda.com/?/question/305 
 
API的应用:Mugeda API的整体结构
http://bbs.mugeda.com/?/article/282
 
API的应用:Mugeda对象 
http://bbs.mugeda.com/?/question/307 
 
API的应用:scene对象 
http://bbs.mugeda.com/?/article/284 
 
API的应用:aObject对象 
http://bbs.mugeda.com/?/article/285 
 
API的应用:工具API 
http://bbs.mugeda.com/?/article/286 
 
API的应用:获取Mugeda后台数据 
http://bbs.mugeda.com/?/article/390
 
 

2.1.10 界面与舞台:翻页的相关设置

Mugeda培训songyue 发表了文章 • 1 个评论 • 232 次浏览 • 2016-11-29 15:30 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

当我们制作的动画有2页以上,就会用到属性栏的【翻页】,如图:




 
【翻页】中的设置有以下几种方式: 
1、 翻页效果: 平移、覆盖、出现、淡入、三维翻转、门轴翻转
 
2、 退 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

当我们制作的动画有2页以上,就会用到属性栏的【翻页】,如图:
17.png

 
【翻页】中的设置有以下几种方式: 
1、 翻页效果: 平移、覆盖、出现、淡入、三维翻转、门轴翻转
 
2、 退出效果: 无、缩小、淡出、缩小淡出  
 
3、 翻页方向: 上下翻页、左右翻页  
 
4、 循环: 是、否  
 
5、 翻页时间: 默认600毫秒,可以自己设置
 
6、 翻页图标: 默认是箭头,支持直接从素材库上传;如果不想要翻页图标,可以在【翻页图标】处上传一个透明底的PNG
18.png

 
7、 多页动画如何设置无缝跳转: Mugeda是分页加载模式,如果做了多页动画,想让动画过渡的更自然,可以在【翻页效果】设置为出现。

2.2.17 素材与媒体:常用编辑操作—转换为元件

Mugeda培训songyue 发表了文章 • 0 个评论 • 106 次浏览 • 2016-11-29 14:43 • 来自相关话题

·​想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。 

转换为元件,具体操作步骤如下: 
在舞台上绘制一个物体,选中这个物体,单击右键【转换为元件】,如图:




 
双击进去才能对这个元件进行编辑,如图:




 
了解更多常用编 查看全部
·​想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。 

转换为元件,具体操作步骤如下: 
在舞台上绘制一个物体,选中这个物体,单击右键【转换为元件】,如图:
13.png

 
双击进去才能对这个元件进行编辑,如图:
14.png

 
了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并
 

2.2.16 素材与媒体:常用编辑操作—排列、对齐、变形、组合、合并功能

Mugeda培训songyue 发表了文章 • 0 个评论 • 116 次浏览 • 2016-11-29 14:39 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 1、排列,具体操作步骤如下: 
只能作用于同一图层的不同物体  在
 
同一图层绘制三个方框,选中灰色物体单击右键,选择【排列】—【上移一层】,如图:




 
灰色图形就会把紫色图 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 1、排列,具体操作步骤如下: 
只能作用于同一图层的不同物体  在
 
同一图层绘制三个方框,选中灰色物体单击右键,选择【排列】—【上移一层】,如图:
R.png

 
灰色图形就会把紫色图形盖住,如图:
S.png

 
2、对齐,具体操作步骤如下: 
对齐有左、右、上、下、左右居中(以左右的中心点对齐)、上下居中(以上下的中心点对齐)、均分宽度(间隔的宽度相同)、均分高度(间隔的高度相同)8种方式,如图:
T.png

 
3、变形,具体操作步骤如下:  
为左右翻转和上下翻转,如图:
U.png

 
4、组合,具体操作步骤如下: 
同一图层的不同物体,才可以进行此操作,操作后两个图形会变成一个图形,如图:
V.png

 
组合后双击可以对单个物体进行编辑,如图:
W.jpg

 
5、合并,具体操作步骤如下: 
这个是关于裁剪的一些功能,选中舞台上的两个物体,选择【合并】,如图:
X.png

 
两个图形会合并成一个图形,如图:
Y.png

 
选择【用上层物体裁剪】,效果如图:
Z.png

 
选择【用下层物体裁剪】,效果如图:
11.png

 
选择【相交】,效果如图:
12.png

 
了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—转换为元件
 

2.2.15 素材与媒体:常用编辑操作—路径工具

Mugeda培训songyue 发表了文章 • 0 个评论 • 110 次浏览 • 2016-11-29 14:30 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 路径工具,具体操作步骤如下: 
给物体添加动画后,选中物体单击鼠标右键,选择【路径】—【自定义路径】,如图:




 
可以看到,此时的路径线是直线,即物体做直线运动,如图:


查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 路径工具,具体操作步骤如下: 
给物体添加动画后,选中物体单击鼠标右键,选择【路径】—【自定义路径】,如图:
L.png

 
可以看到,此时的路径线是直线,即物体做直线运动,如图:
M.png

 
选中工具栏中的【节点工具】,可以对物体的运动线路进行自定义,如图:
N.png

 
再次选中物体单击鼠标右键,选择【路径】中【自定义路径】,可以看到路径线变成黑色,还原成直线运动,如图:
O.png

 
若想再次编辑,只需选中物体单击鼠标右键,选择【路径】—【自定义路径】,可以看到路径线变成紫色,如图:
P.png

 
显示和隐藏路径线,可以通过【切换路径显示】来操作,如图:
Q.png

 
了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件

2.2.14 素材与媒体:常用编辑操作—节点工具

Mugeda培训songyue 发表了文章 • 0 个评论 • 114 次浏览 • 2016-11-29 14:27 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

节点工具,具体操作步骤如下: 
这个工具,只作用于用Mugeda绘制的图形,对于导入的PNG、JPG不起作用,如图:





选择工具栏的【曲线工具】在舞台上绘制一条曲线,结束时敲击键 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

节点工具,具体操作步骤如下: 
这个工具,只作用于用Mugeda绘制的图形,对于导入的PNG、JPG不起作用,如图:
E.png


选择工具栏的【曲线工具】在舞台上绘制一条曲线,结束时敲击键盘“V”,结束绘制,并在属性面板上把填充色设置为空,如图:
F.jpg


选中图形,并选择节点工具,如图:
G.jpg



选中想编辑的节点,单击右键,可【添加节点】【删除选中节点】【重置选中节点】,如图:
H.png


选中节点,控制手柄就可以调整曲线,如图:
I.png


对于选中没有手柄的节点,可单击右键,选择【重置节点】就可以调用出手柄,如图:
J.png

K.png


添加节点快捷键,在选中节点工具状态下,Ctrl+单击鼠标左键 
删除节点快捷键,在选中节点工具状态下,Alt +单击鼠标左键
 

了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件

2.2.13 素材与媒体:常用编辑操作—锁定物体

Mugeda培训songyue 发表了文章 • 0 个评论 • 178 次浏览 • 2016-11-29 14:15 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

本节视频教程请点击此处。 

在编辑菜单里,是Mugeda的常用编辑操作,如图:




 
锁定物体,具体操作步骤如下: 
在舞台上绘制两个物体,如图:




 
选择要锁定的物体,【编辑】—【锁定物体】,就把 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

本节视频教程请点击此处。 

在编辑菜单里,是Mugeda的常用编辑操作,如图:
A.png

 
锁定物体,具体操作步骤如下: 
在舞台上绘制两个物体,如图:
B.png

 
选择要锁定的物体,【编辑】—【锁定物体】,就把选中物体锁定,不可对其进行编辑,如图:
C.png

 
如果想重新对锁住物体进行编辑,选择【编辑】—【全部解锁】即可,如图:
D.png

 
了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件

2.3.12 动画:标尺和辅助线的用法

Mugeda培训songyue 发表了文章 • 0 个评论 • 172 次浏览 • 2016-11-29 12:02 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

 标尺和辅助线的用法,具体使用方法如下
 
选择菜单栏,【视图】—【标尺】,即可调出标尺工具,如图:




 
标尺就会显示在舞台上,如图:




 
两侧标尺的绿色线条可以作为 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

 标尺和辅助线的用法,具体使用方法如下
 
选择菜单栏,【视图】—【标尺】,即可调出标尺工具,如图:
1.png

 
标尺就会显示在舞台上,如图:
2.png

 
两侧标尺的绿色线条可以作为我们的辅助线,如图:
3.png

 
移动舞台上的图形时,能看到辅助线,如下图中,当用【选择工具】移动图形时,如果两条辅助线交叉于物体中心,说明物体居于舞台中央,如图:
4.png

 
如果想在舞台上对齐两个物体,可以用【选择工具】对物体进行拖动,如下图中当左侧的绿色辅助线重合时,表明两个物体左对齐,如图:
5.png

 
关闭标尺,辅助线依然存在,移动物体可以看到物体的参考位置,如图:
6.png

1.16-1.20,Mugeda直播课表

Mugeda培训songyue 发表了文章 • 2 个评论 • 1458 次浏览 • 2016-11-11 17:45 • 来自相关话题

(点击查看大图)
 
点此报名,报了名后才能听课哦。PS:本课程提供录播,方便大家复习使用。
 
如果你对Mugeda课程有任何建议和疑问,欢迎在下方留言~我会在第一时间回复你哟!
  查看全部
1.16-1_.20课表_.png


(点击查看大图)
 
点此报名报了名后才能听课哦。PS:本课程提供录播,方便大家复习使用。
 
如果你对Mugeda课程有任何建议和疑问,欢迎在下方留言~我会在第一时间回复你哟!
 

2.9.7 API的应用:获取Mugeda后台数据

原创分享songyue 发表了文章 • 0 个评论 • 192 次浏览 • 2016-11-03 15:04 • 来自相关话题

方法一: 
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。

方法二: 
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是 查看全部
方法一: 
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。

方法二: 
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是存在跨域问题的,这个时候推荐使用jsonp的方式来请求数据,如果你的动画部署在自己的服务器上,这个时候就不会存在跨域问题,你可以使用ajax方式来请求数据。

推荐在动画中引入jQuery,这样你可以使用jQuery ajax方法来发送请求,以下是例子,其中url需要执行你自己后台的请求地址,注意,跨域情况下使用jsonp的请求需要服务器后台支持。

1.没有跨域的情况:
$.ajax({ 
  url: '/submit', 
  type: 'POST', 
  data: {name: 'test'}, 
  success: function (response) { 
     //TODO; 
  } 
});


2.跨域的情况:
$.ajax({ 
  url: "/submit.jsonp", 
  jsonp: "callback", 
  dataType: "jsonp", 
  data: {name: 'test'}, 
  success: function( response ) { 
     //TODO; 
  } 
});


2.9.6 API的应用:工具API
2.9.5 API的应用:aObject对象
2.9.4 API的应用:scene对象
2.9.3 API的应用:Mugeda对象
2.9.2 API的应用:Mugeda API的整体结构
2.9.1 API的应用:在动画中添加代码

2.10.2 判断:逻辑表达式判断

原创分享mingyueliu 发表了文章 • 0 个评论 • 399 次浏览 • 2016-10-09 16:09 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 逻辑表达式判断即当物体条件符合所设定的表达式,即执行行为;

如下图,承接上一案例2.9.1 判断:条件判断,在矩形“下一页”编辑行为的“参数”对话框内,设置“执行条件”为“逻辑表达式”, 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 逻辑表达式判断即当物体条件符合所设定的表达式,即执行行为;

如下图,承接上一案例2.9.1 判断:条件判断,在矩形“下一页”编辑行为的“参数”对话框内,设置“执行条件”为“逻辑表达式”,具体公式为“{{圆判断.left }}==29”,即设置了当“圆判断”圆形的左值等于29时,点击矩形跳转下一页;

2.9-14_.png

图2.9-14

点击“预览”观察效果,由于此时“舞台”上的“圆判断”圆形左值正好是29,即点击矩形可跳转至下一页。

2.9-15_.png

图2.9-15

同理,也可将公式改为“{{圆判断.left }}>15”,因“舞台”上的“圆判断”圆形左值等于29,即大于15,因此点击矩形仍可跳转至下一页。

2.9-16_.png

图2.9-16

逻辑表达式可执行多种判断条件,如图,在“舞台”上添加一个输入框,命名为“sr”;

2.9-17_.png

图2.9-17

同理,回到矩形“下一页”编辑行为的“参数”对话框,将公式改为“{{圆判断.left }}==29 && {{sr.text }}==50”,即设置了只有当“圆判断”左值等于29且“sr”输入框内容为50时,点击矩形才可跳转至下一页。
注意:“&&”表示“并且”

2.9-18_.png

图2.9-18

点击“预览”观察效果;

2.9-19_.png

图2.9-19

同理,将公式改为“{{圆判断.left }}==29 || {{sr.text }}==50”,即设置了只有当“圆判断”左值等于29或者“sr”输入框内容为50时,点击矩形才可跳转至下一页。点击“预览”观察效果。
注意:“||”表示“或者”

2.9-20_.png

图2.9-20

附件:逻辑表达式概念文档

101.png

 

2.10.1 判断:条件判断

原创分享mingyueliu 发表了文章 • 0 个评论 • 269 次浏览 • 2016-10-09 15:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 条件判断即通过一个物体的属性条件,判断物体行为是否执行;

如下图,点击在“舞台”上添加一个矩形;





图2.9-1

为矩形添加两个行为:
 
“跳转下一页”:点击矩形的“添加/ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 条件判断即通过一个物体的属性条件,判断物体行为是否执行;

如下图,点击在“舞台”上添加一个矩形;

2.9-1_.png

图2.9-1

为矩形添加两个行为:
 
“跳转下一页”:点击矩形的“添加/编辑行为”按钮,在“编辑行为”对话框中选择“动画播放控制”→“下一页”→触发条件:“点击”,点击“确认”
“禁止翻页”:在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件:“点击”,点击“确认”

2.9-2_.png

图2.9-2

新建下一页,为便于识别,在下一页中添加一张背景图片素材。

2.9-3_.png

图2.9-3

回到上一页,新建一个输入框,为其命名为“判断”;

2.9-4_.png

图2.9-4

点击矩形的“添加/编辑行为”按钮;

2.9-5_.png

图2.9-5

在“编辑行为”对话框中点击“下一页”行为的“编辑”按钮;

2.9-6_.png

图2.9-6

在弹出的“参数”对话框中设置“执行条件”为“检查元素状态”;
元素名称:“判断”
考察属性:“文本取值”
逻辑条件:“等于”
参考值:“100”
即设置了当“判断”输入框内容等于100时,点击矩形跳转到下一页的行为;

2.9-7_.png

图2.9-7

点击“预览”观察效果;

2.9-8_.png

图2.9-8

如下图,删除输入框,添加一个圆形,将其命名为“圆判断”;

2.9-9_.png

图2.9-9

同理点击矩形的“添加/编辑行为”按钮进入“编辑行为”对话框,点击“下一页”行为的“编辑”按钮进入“参数”对话框;

2.9-10_.png

图2.9-10

设置“执行条件”为“检查元素状态”;
元素名称:“圆判断”
考察属性:“左”
逻辑条件:“不等于”
参考值:“30”
即设置了当“圆判断”圆形左值不等于30时,点击矩形跳转下一页的行为;

2.9-11_.png

图2.9-11

点击“预览”观察效果,如下图,此时“圆判断”的左值为“29”,即不等于30,因此点击矩形即会跳转至下一页;

2.9-12_.png

图2.9-12

2.9-13_.png

图2.9-13

【必看帖】关于H5中声音和视频的处理,看过的问题都解决了!

Mugeda培训songyue 发表了文章 • 0 个评论 • 417 次浏览 • 2016-12-22 16:26 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点:图片压缩、声音压缩、视频压缩
 
图片压缩: 
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点:图片压缩、声音压缩、视频压缩
 
图片压缩: 
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压缩,如图:
1_(1).png

 
压缩好,点击【Downloud】下载到电脑的指定位置,如图:
2_(1).png

 
声音压缩: 
推荐大家【Audacity】这个软件,如图:
3_(1).png

 
把要压缩的声音拖到灰色区域,就能上传并开始编辑,如图:
4_(1).png

 
用选择工具选中音轨中不需要的部分,【Delete】就可删除,如图:
5_(1).png

 
点击放大镜,可以放大音轨,如图:
6.png

 
给声音加特效,需先选中需要添加特效的音轨部分,点击【特效】,如图:
7.png

 
把立体声分离成单声,可以让声音文件变得更小,如图:
8.png

 
在能保证声音质量的前提下,可删除其中一个声道,如图:
9.png

 
【文件】—【导出】,在弹窗的右下角【选项】,可以对声音质量进行选择,数字越小,表示声音质量越差,文件尺寸越小,一般默认为24,如图:
10.png

 
【声道模式】选择【合并立体声】,如图:
11.png

 
视频压缩: 
推荐大家用Freemake Video这个软件,它在压缩的质量和大小上都不错,如图:
12.png

 
左上角【视频】可以导入视频,视频右侧【小剪刀】可裁剪视频,如图:
13.png

 
如果只保留前10秒视频,先定位在10s的位置,单击【开始选取范围】,如图:
14.png

 
单击【移动至选取范围的开始】,即此时的点是要裁剪视频的开始,如图:
15.png

 
把鼠标移动到要裁剪内容的末尾,点击【剪下选取范围】,如图:
16.png

 
只保留了前10s的视频,点击右下角【ok】,完成裁剪,如图:
17.png

 
该软件提供了很多格式的导出,如图:
18.png

 
如果要导出MP4,点击【编辑预先设定】按钮,如图:
19.png

 
点击【转换】,画面大小可以自定义,视频编码器一定要选【H.264】,如图:
20.png

 
比特率类型,设置越大导出的视频文件也就越大,如图:
21.png

 
关于视频中音频的设置,音频解码器一定要选择【AAC】,其他可根据自己的需求设置,如图:
22.png

 
特别注意:在H5导入的视频,视频编码器一定要设置成【H.264】,音频编解码器一定要 设置成【AAC】。
 

1.16-1.20,Mugeda直播课表

Mugeda培训songyue 发表了文章 • 2 个评论 • 1458 次浏览 • 2016-11-11 17:45 • 来自相关话题

(点击查看大图)
 
点此报名,报了名后才能听课哦。PS:本课程提供录播,方便大家复习使用。
 
如果你对Mugeda课程有任何建议和疑问,欢迎在下方留言~我会在第一时间回复你哟!
  查看全部
1.16-1_.20课表_.png


(点击查看大图)
 
点此报名报了名后才能听课哦。PS:本课程提供录播,方便大家复习使用。
 
如果你对Mugeda课程有任何建议和疑问,欢迎在下方留言~我会在第一时间回复你哟!
 

2.1.4 Mugeda界面与舞台:时间轴

回复

原创分享0023116082991 回复了问题 • 4 人关注 • 1 个回复 • 370 次浏览 • 2016-10-03 15:21 • 来自相关话题

2.2.4 素材与媒体:幻灯片

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 269 次浏览 • 2016-09-20 16:02 • 来自相关话题

2.1.7 Mugeda界面与舞台:什么是舞台?

回复

问题答疑mingyueliu 发起了问题 • 1 人关注 • 0 个回复 • 266 次浏览 • 2016-09-20 14:42 • 来自相关话题

2.1.3 Mugeda界面与舞台:快捷工具栏

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 237 次浏览 • 2016-09-19 17:39 • 来自相关话题

2.1.2 Mugeda界面与舞台:菜单栏

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 227 次浏览 • 2016-09-19 17:32 • 来自相关话题

2.9.3 API的应用:Mugeda对象

回复

原创分享mingyue 发起了问题 • 1 人关注 • 0 个回复 • 559 次浏览 • 2016-09-07 11:37 • 来自相关话题

2.9.1 API的应用:在动画中添加代码

回复

原创分享mingyue 发起了问题 • 3 人关注 • 0 个回复 • 685 次浏览 • 2016-09-07 11:01 • 来自相关话题

【必看帖】关于H5中声音和视频的处理,看过的问题都解决了!

Mugeda培训songyue 发表了文章 • 0 个评论 • 417 次浏览 • 2016-12-22 16:26 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点:图片压缩、声音压缩、视频压缩
 
图片压缩: 
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点:图片压缩、声音压缩、视频压缩
 
图片压缩: 
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压缩,如图:
1_(1).png

 
压缩好,点击【Downloud】下载到电脑的指定位置,如图:
2_(1).png

 
声音压缩: 
推荐大家【Audacity】这个软件,如图:
3_(1).png

 
把要压缩的声音拖到灰色区域,就能上传并开始编辑,如图:
4_(1).png

 
用选择工具选中音轨中不需要的部分,【Delete】就可删除,如图:
5_(1).png

 
点击放大镜,可以放大音轨,如图:
6.png

 
给声音加特效,需先选中需要添加特效的音轨部分,点击【特效】,如图:
7.png

 
把立体声分离成单声,可以让声音文件变得更小,如图:
8.png

 
在能保证声音质量的前提下,可删除其中一个声道,如图:
9.png

 
【文件】—【导出】,在弹窗的右下角【选项】,可以对声音质量进行选择,数字越小,表示声音质量越差,文件尺寸越小,一般默认为24,如图:
10.png

 
【声道模式】选择【合并立体声】,如图:
11.png

 
视频压缩: 
推荐大家用Freemake Video这个软件,它在压缩的质量和大小上都不错,如图:
12.png

 
左上角【视频】可以导入视频,视频右侧【小剪刀】可裁剪视频,如图:
13.png

 
如果只保留前10秒视频,先定位在10s的位置,单击【开始选取范围】,如图:
14.png

 
单击【移动至选取范围的开始】,即此时的点是要裁剪视频的开始,如图:
15.png

 
把鼠标移动到要裁剪内容的末尾,点击【剪下选取范围】,如图:
16.png

 
只保留了前10s的视频,点击右下角【ok】,完成裁剪,如图:
17.png

 
该软件提供了很多格式的导出,如图:
18.png

 
如果要导出MP4,点击【编辑预先设定】按钮,如图:
19.png

 
点击【转换】,画面大小可以自定义,视频编码器一定要选【H.264】,如图:
20.png

 
比特率类型,设置越大导出的视频文件也就越大,如图:
21.png

 
关于视频中音频的设置,音频解码器一定要选择【AAC】,其他可根据自己的需求设置,如图:
22.png

 
特别注意:在H5导入的视频,视频编码器一定要设置成【H.264】,音频编解码器一定要 设置成【AAC】。
 

2.3.13 动画:复制帧粘贴帧

Mugeda培训songyue 发表了文章 • 0 个评论 • 134 次浏览 • 2016-12-20 17:00 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程   
 
本节知识点:复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层  
 
复制帧-粘贴帧: 
选择某一个图层的全部帧,全选后时间线呈草绿色,右键选择【复制帧】,如图:




 
在没有帧的地方, 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程   
 
本节知识点:复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层  
 
复制帧-粘贴帧: 
选择某一个图层的全部帧,全选后时间线呈草绿色,右键选择【复制帧】,如图:
1.png

 
在没有帧的地方,右键【粘贴帧】,如图:
2.png

 
这时候刚才的一整段动画就被粘贴过来了,如图:
3.png

 
选中第一个空白关键帧,右键【删除帧】,就会得到与复制动画完全一致的一整段动画,如图:
4.png

 
复制关键帧-粘贴关键帧: 
选中关键帧,右键【复制关键帧】,如图:
5.png

 
选择要粘贴的位置,右键【粘贴关键帧】,如图:
6.png

 
注意,不能把关键帧粘贴在另外一段动画的时间单元里,否则会出现如下提示,如图:
7.png

 
目前,不支持复制一个图层的多个关键帧,如图:
8.png

 
则会出现如下提示,如图:
9.png

 
但支持同时复制多个图层的关键帧,如图:
10.png

 
然后选择要粘贴的位置,右键【粘贴关键帧】,如图:
11.png

 
复制多个图层-粘贴多个图层: 
选中所有的4个图层,右键【复制帧】,如图:
12.png

 
另外新建4个图层,如图:
13.png

 
选择最上面图层第2个没有帧的地方,【右键】粘贴站,如图:
14.png

 
复制的4个图层的全部内容全部都粘贴过来了,如图:
15.png

 

2.1.12 界面与舞台:加载的相关设置

Mugeda培训songyue 发表了文章 • 0 个评论 • 63 次浏览 • 2016-12-13 14:53 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 说明:浏览器100%才能看到加载页面的设置
 
本节视频教程请点击此处。
 
加载页面的制作,具体步骤如下:  
1、加载页面默认是进度条,如图:




 
2、样式、提示文字、文字大小均可自由设置,如果设置了动态 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 说明:浏览器100%才能看到加载页面的设置
 
本节视频教程请点击此处。
 
加载页面的制作,具体步骤如下:  
1、加载页面默认是进度条,如图:
1.png

 
2、样式、提示文字、文字大小均可自由设置,如果设置了动态文字,在页面加载的时候,可以看到文字在动,如图:
2.png

3.png

 
3、图片位置,设置的值越大,前景图片的位置越靠下;图片宽度设置的值越小,前景图片的尺寸就越小,如图:
4.png

 
4、当然你还可以在首页里自己制作加载页,只需要在右侧的样式中设置【首页作为加载页面】,如图:
5.png

 
5、除了自己制作,还可以从Mugeda模板里添加加载页,如图:
6.png

 
Mugeda提供丰富的加载界面模板,除此之外还有表单、交互、逻辑判断等模板供大家免费使用,如图:
7.png

 
点击【确定】添加加载界面到舞台上,并把添加的模板调整至首页,然后在样式上设置【首页作为加载界面】,如图:
8.png

 
关于Mugeda模板的更多使用方法,请点击这里学习。

 

 

2.1.14 界面与舞台:元件界面介绍

Mugeda培训songyue 发表了文章 • 0 个评论 • 61 次浏览 • 2016-12-13 14:36 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
 
一、新建元件 
点击舞台右侧的元件面板,左下第一个按钮“新建元件”,如图:




 
查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
 
一、新建元件 
点击舞台右侧的元件面板,左下第一个按钮“新建元件”,如图:
1.png

 
默认命名为“元件1”,自动进入元件编辑界面,如图:
2.png

 
二、如何把新建元件添加到舞台? 
在元件编辑界面完成编辑后,点击页面回到舞台,如图:
3.png

 
把元件添加到舞台的方法有两种
1、鼠标放到元件上,成“十字”后拖动不放,到舞台再松开,如图:
4.png

 
2、点击元件面板下方的“添加到绘画板”按钮,也可把元件导入到舞台,如图:
5.png

 
三、复制元件: 
点击元件面板左下第二个“复制元件”,即可复制一个新的元件,默认命名为“元件2”,如图:
6.png

 
在复制元件,即“元件2”里进行修改,不会影响到“元件1”内的内容 ,如图:
7.png

 
四、新建元件文件夹: 
点击元件面板下方的“新建文件夹”按钮,可以在元件面板里添加文件夹,如图:
8.png

 
文件夹可以方便的对元件、视频、音频等进行管理,如图:
9.png

 
五、导出元件:
点击元件面板下方的“导出”按钮,如图:
10.png

 
如果想让同一个元件应用在不同的作品中,可以用导出功能。选择要导出的元件,点击“导出”按钮,如图:
11.png

 
在新建的作品里,就能看到刚才导出的元件,把它拖动到舞台上就可以使用了,如图:
12.png

 
六、编辑元件: 
编辑元件有多种方法,既可以点击元件面板下方的“编辑”按钮,也可以双击元件,进入到元件编辑界面,如图:
13.png

 
七、删除元件:
14.png

 
 

2.1.13 界面与舞台:物体属性设置

Mugeda培训songyue 发表了文章 • 0 个评论 • 57 次浏览 • 2016-12-13 14:21 • 来自相关话题

`想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:设置坐标,改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
 
1、熟悉属性面板:




 
绘制图形 查看全部
`想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:设置坐标,改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
 
1、熟悉属性面板:
1.png

 
绘制图形,物体的属性都在右侧查找
2.png

 
2、设置物体大小和坐标:​
3.png


4.png

 
3、设置透明度:​
5.png


6.png

 
输入值的方式更准确
7.png

 
4、线条类型: 
包括实线、点线、虚线、点划线
8.png

 
5、填充:
9.png


10.png

 
6、X、Y、Z轴旋转:
11.png


12.png


7、端点: 
端点只能对在Mugeda绘制的线条进行设置,如图:
13.png

 
8、接合: 
对绘制物体的线条接合处进行设置,如图:
14.png

 
9、背景图片: 
在绘制图形里插入图片,还可以通过图片位置和尺寸进行其他设置,如图:
15.png


如果只想保留图片造型,可以通过把线条的颜色设置为空,如图:
16.png


10、预置动画: 
可以在属性面板上给物体添加预置动画,也可以用选择工具选中物体添加,如图:
17.png


11、组类型: 
物体成组后,可以对其进行裁剪内容的操作。如果物体有动画,则裁剪后会有类似遮罩动画的效果,但占用空间更小,推荐使用。
18.png


12、结束时复位: 
首先给物体添加“自由拖动”,然后再打开结束时复位开关,这样物体无论被拖动到什么位置,结束时都会恢复原位。
19.png

 
13、运动: 
属性面板中的运动类型,只有给物体添加了“关键帧动画”或“曲线变形动画”才会出现,而且鼠标要选中时间上的关键帧。
20.png


 

2.1.11 界面与舞台:关键帧和页面的命名

Mugeda培训songyue 发表了文章 • 0 个评论 • 64 次浏览 • 2016-12-08 14:54 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
1、用一个例子来说明,给关键帧命名,并实现跳转功能  
举例:点击右侧的图标(方块、圆、五角星),可以实现跳转到指定帧,具体操作步骤如下:  
 
选择出现红色方框的关键帧,在关键帧处 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
1、用一个例子来说明,给关键帧命名,并实现跳转功能  
举例:点击右侧的图标(方块、圆、五角星),可以实现跳转到指定帧,具体操作步骤如下:  
 
选择出现红色方框的关键帧,在关键帧处命名“方块”,鼠标在空白处单击一下,如图:
1.png

 
命名成功后,关键帧上方会出现一个黄色的三角,如图:
2.png

 
同理,给出现蓝色圆形的关键帧命名“圆”,如图:
3.png

 
同理,给出现黄色五角星的关键帧命名“五角星”,如图:
4.png

 
然后依次给右侧图标添加跳转行为,选择红色方块,如图:
5.png

 
添加“跳转到帧并停止”的行为,触发条件为“点击”,如图:
6.png

 
点击编辑,在帧名称里选择“方块”,如图:
7.png

 
注:其他图标的行为添加方式相同,这里就不一一说明了  
 
给关键帧命名的好处:有时候我们要修改动画,删帧或者增帧,这时候如果采用的是跳转帧号的话,就要一个个去修改,很麻烦,给关键帧命名就方便多了。
 
如果既填写了帧号,又填写了帧名称,Mugeda会先找帧号,如图:
8.png

 
2、给页面命名  
Mugeda默认的页面名,以数字升序排列,把鼠标放到页面名处,就可更改页面名称,给第2页重命名为“尾页”,如图:
9.png

 
给红色方框添加“跳转到页”行为,如图:
10.png

 
在编辑里设置参数,页名称设置为“尾页”,如图:
11.png

 
与帧名称不同的是,如果既填写了页号,又填写了页名称,Mugeda会首先去找页名称。

 

1.6.4 作品创建前必读:屏幕适配设置(渲染模式、自适应、发布模式、旋转模式)

Mugeda培训songyue 发表了文章 • 0 个评论 • 147 次浏览 • 2016-12-08 14:43 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​

本节视频教程请点击此处。
 
本节知识点: 重点讲解【文件】—【文档信息】中的渲染模式、自适应、发布模式、旋转模式相关设置
 
一般我们把舞台的尺寸设置为320*520:




 
我们可以对适配方式进行设置,让 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​

本节视频教程请点击此处。
 
本节知识点: 重点讲解【文件】—【文档信息】中的渲染模式、自适应、发布模式、旋转模式相关设置
 
一般我们把舞台的尺寸设置为320*520:
1.png

 
我们可以对适配方式进行设置,让我们的作品可以满足不同屏幕的播放。适配方式从【文件】—【文档信息】里设置:
2.png

 
这里需要说明的是,【文档信息】里的导出名称指的是发布后微信标题栏的名称
3.png

 
而舞台上【属性】中的【内容标题】指的是在编辑页面里的名称:
4.png

 
渲染模式,默认为标准,其他几个说明如下 
标准:单个网页的引用 
嵌入:可以嵌入iframe元素中 
内联:通过js方式加载动画 
弹出:弹出对话框显示动画
5.png

 
自适应,一般我们用【宽度适配,垂直居中】 
宽度适配,垂直居中:以宽度来等比例放大缩小您的作品,以320宽度做的,那么在屏幕上显示就是320,通过改变作品的高,来适配您的屏幕;如果您的手机比较窄,那就会把作品的上下两端截掉。
高度适配,水平居中:以高度适配宽度,如果你手机特别的窄,也会把两端截掉。 
全屏:无论你在什么屏幕播放,都会显示您作品的完整内容。
6.png

 
宽度适配,垂直居中,让所有画面显示在屏幕上的小技巧 
在舞台上画安全框,320*416基于iPhone4s大小,目前这个是最小的,所以用这个作为我们的安全框:
7.png

 
把安全框移动到舞台中间,可以对照绿色的参考线,此时的状态下,安全框位于舞台的中央:
8.png

 
如图,完成安全框的绘制:
9.png

 
我们预览时,无论屏幕有多大,背景图片都是把屏幕撑满的,就算手机截掉上下两端,在安全框里设计,有效内容都能被看到:
10.png

 
当您要发布作品时,记得把安全框图层删掉,这样别人预览你的作品时,就不会看到安全框了:
11.png

 
高度适配,水平居中,让所有画面显示在屏幕上的小技巧,同样的方式,这里不再赘述。
 
发布方式: 
前两种发布方式不推荐,动画会卡顿,推荐使用智能加速渲染发布。智能加速渲染的意思就是配合硬件加速动画:
12.png

 
适配方式: 
自动适配:默认是竖屏,动画会撑满竖屏屏幕;默认是横屏,动画会撑满横屏屏幕,但是会发生变形,更多的情况我们选用的是强制竖屏:
12.png

 
如果您要做强制横屏的H5,设置舞台大小520*256。这是基于iPhone6s plus在微信播放时的全屏尺寸。当然你也可以根据需要自行设置,但前提是保证在大屏幕手机能看到全屏:
14.png

 
然后选择【文件】—【文档信息】,设置旋转模式和自适应:
15.png

 

 

2.9.9 API的应用:将Mugeda部署在第三方服务器

Mugeda培训songyue 发表了文章 • 0 个评论 • 168 次浏览 • 2016-12-08 11:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 Mugeda制作的内容可以很方便的直接发布到Mugeda CDN。参见下图。发布到Mugeda CDN后,你会得到一个发布地址,该地址可以用来进行分享。Mugeda会自动处理所有必要的操作,例如微信权限认证等。


查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 Mugeda制作的内容可以很方便的直接发布到Mugeda CDN。参见下图。发布到Mugeda CDN后,你会得到一个发布地址,该地址可以用来进行分享。Mugeda会自动处理所有必要的操作,例如微信权限认证等。
11.jpg


如果你选择导出Mugeda内容并自行部署到一个第三方的服务器上,Mugeda提供一套完善的机制来支持这些操作。简单来说,需要完成如下步骤: 
 
1. 你拥有一个微信公众号,和一个绑定了微信的域名; 
2. 你知道如何获取有效的微信认证信息; 
3. 用微信认证信息对Mugeda内容进行配置; 
4. 部署配置后的内容; 

下面详细介绍每一个步骤。
1.  你拥有一个微信公众号,和绑定了微信的域名 
任何一个可以在微信中进行分享的域名,都必须通过微信的认证并绑定域名。为了绑定域名,你必须先有一个公众号。有了公众号后,登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。关于如何申请公众号以及如何进行微信域名绑定,不在本文讨论范围。请咨询你们的微信管理员或者访问微信官方文档。 以下的讨论假定你已经拥有一个绑定了微信的域名。

2.  你知道如何获取有效的微信认证信息 
拥有微信绑定的域名后,你还需要有有效的微信认证信息。典型的微信认证信息包括: 
appId: 分配给公众号的唯一标识 
timestamp: 生成签名的时间戳 
nonceStr: 生成签名时的随机串 
signature: 认证需要的签名  

关于如何获取或者生成这些参数,请参考微信官方开发文档。这里不再赘述。需要强调的是,由于微信签名认证信息有效期为7200秒,即2个小时,因此在第三方部署时需要保证这些信息在必要时需要实时更新,保障总是能够获取到最新的认证信息。

以下的讨论假定你已经拥有了有效的微信认证信息。  

3.  用微信认证信息对Mugeda 内容进行配置 
当你准备好了上述数据,我们就可以对Mugeda内容进行配置了。步骤如下: 
首先在Mugeda云编辑器中导出想要发布的内容:
12.jpg


导出后会得到一个完整的HTML5内容包。 在内容包中包含有一个index.html文件,这个文件是我们配置的对象。用文本编辑器打开该文件。
13.jpg


在index.html文件中,有一个参数变量叫做_mrmcp,这个变量记录了Mgueda内容进行播放时的一系列控制参数。我们需要定制的就是在这个参数列表中加入我们需要的信息。
14.jpg


配置信息可以包括微信认证信息,_mrmcp.wechatAuth。所需参数参见上述第2步的描述。配置好后的_mrmcp参数如下图所示:
15.jpg


需要说明的是: 
1.    由于微信权限设置有时间限制(7200秒),因此这些权限信息,主要是签名signature和时间戳timestamp参数,需要及时进行更新。可以参考的办法,是在服务器端通过动态技术(例如php等)动态生成这些信息,或者在页面中通过动态技术(例如Ajax请求)获取这些信息,并配置相应的_mrmcp参数。

2.    如果采用异步Ajax等异步技术加载权限信息时,index.html中名为loader.js的脚本文件,需要在Ajax处理完成后才能加载,否则可能会导致加载或者渲染异常。

3.    对Mugeda内容进行第三方部署时,仅需要按照上述步骤配置_mrmcp.wechatAuth参数即可,不需要再次加载微信的SDK JS文件(本文生成时地址为http://res.wx.qq.com/open/js/jweixin-1.0.0.js),也不需要再次调用wx.config, wx.ready或者wx.onMenuShareTimeline等函数。这些具体的操作Mugeda内容都会自动完成。否则可能会导致分享和权限异常。

4.     部署配置后的内容:完成上述步骤后,就可以将配置后的内容部署到目标第三方服务器上,并将部署后的地址发布出去就可以了。对上述流程如有疑问,可以加入Mugeda学习群(QQ: 263360290)进行交流。

2.4.18 行为:使用自定义回调函数

Mugeda培训songyue 发表了文章 • 0 个评论 • 144 次浏览 • 2016-12-08 11:34 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 Mugeda提供完善的交互行为功能,能够无需代码即可方便的添加丰富的交互行为,例如对动画的控制(播放、暂停、跳转等),提交表单,播放视频,上传图片等。
 
在一些特殊情况下,用户可能希望能够编写自定义函数来处理交互逻辑 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 Mugeda提供完善的交互行为功能,能够无需代码即可方便的添加丰富的交互行为,例如对动画的控制(播放、暂停、跳转等),提交表单,播放视频,上传图片等。
 
在一些特殊情况下,用户可能希望能够编写自定义函数来处理交互逻辑。比如,在一些小游戏内容中,用户可能希望能够实现较为复杂的自定义逻辑来满足游戏的需要。这时候,就可以考虑通过自定义的回调函数来进行处理。本教程将会说明如何定义自己的回调函数来添加自己的代码。
 
使用自定义的回调函数的基本流程是在创作的动画内容中为一个指定的元素添加名为“回调函数”的行为,并为行为指定一种触发方式。然后,就可以在代码编辑器中添加回调函数的定义了。
 
下面举例说明一下。在下面的例子中,我们为一个矩形添加一个点击后移动一个圆形的回调函数。首先生成一个包含有圆形和矩形的一个内容,并将圆形命名为"circle"。如下图所示:
1.png

 
然后选中矩形,并点击矩形右下角的添加行为按钮。
2.png

 
在出现的“编辑行为”对话框中,选择“回调函数”条目。在右侧的“触发条件”中,默认的触发条件即为“点击”。也可以用其它合适的触发条件,比如“向左滑动”,“摇一摇”等。
3.png

 
点击操作中的编辑按钮,编辑回调函数的参数。
4.png

 
下面就可以开始编写回调函数的代码了。首先打开代码窗口。
5.png

 
在代码窗口中输入自定的回调函数实现。下面这段代码的含义是,在舞台上寻找一个叫做"circle"的对象,并把它移动到x=100的位置。 
 
window.moveObject = function (){     
 // 获取名称为name的元素对象     
 var target = mugeda.scene.getObjectByName(name);     
 if(target){         
    // 修改获取的元素的位置         
    target.x = 100;     
 } 
}

6.png

 
回调函数的定义方式为:  
window.functionName = function(object, param1, param2){}
 
注意:  
1) 目前回调函数需要定义在window的全局空间。我们今后会取消这个约束用更加规范的方式来定义回调函数。
2) 回调函数目前携带3个参数:第1个参数是行为触发的API对象,在上面这个例子中,即为矩形的API对象。除此以外,回调函数允许用户指定两个参数,即第2个和第3个参数param1和param2。这两个参数可以在编辑回调函数属性的时候指定。
 
在最简单直接的场景下,用户只需要指定一个回调函数名称,并在代码窗口中提供该函数的定义即可。
 
关于如何在Mugeda内容中使用代码以及API,可以参见如下文档:  
API的应用:在动画中添加代码 
http://bbs.mugeda.com/?/question/305 
 
API的应用:Mugeda API的整体结构
http://bbs.mugeda.com/?/article/282
 
API的应用:Mugeda对象 
http://bbs.mugeda.com/?/question/307 
 
API的应用:scene对象 
http://bbs.mugeda.com/?/article/284 
 
API的应用:aObject对象 
http://bbs.mugeda.com/?/article/285 
 
API的应用:工具API 
http://bbs.mugeda.com/?/article/286 
 
API的应用:获取Mugeda后台数据 
http://bbs.mugeda.com/?/article/390
 
 

2.1.10 界面与舞台:翻页的相关设置

Mugeda培训songyue 发表了文章 • 1 个评论 • 232 次浏览 • 2016-11-29 15:30 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

当我们制作的动画有2页以上,就会用到属性栏的【翻页】,如图:




 
【翻页】中的设置有以下几种方式: 
1、 翻页效果: 平移、覆盖、出现、淡入、三维翻转、门轴翻转
 
2、 退 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

当我们制作的动画有2页以上,就会用到属性栏的【翻页】,如图:
17.png

 
【翻页】中的设置有以下几种方式: 
1、 翻页效果: 平移、覆盖、出现、淡入、三维翻转、门轴翻转
 
2、 退出效果: 无、缩小、淡出、缩小淡出  
 
3、 翻页方向: 上下翻页、左右翻页  
 
4、 循环: 是、否  
 
5、 翻页时间: 默认600毫秒,可以自己设置
 
6、 翻页图标: 默认是箭头,支持直接从素材库上传;如果不想要翻页图标,可以在【翻页图标】处上传一个透明底的PNG
18.png

 
7、 多页动画如何设置无缝跳转: Mugeda是分页加载模式,如果做了多页动画,想让动画过渡的更自然,可以在【翻页效果】设置为出现。

2.2.17 素材与媒体:常用编辑操作—转换为元件

Mugeda培训songyue 发表了文章 • 0 个评论 • 106 次浏览 • 2016-11-29 14:43 • 来自相关话题

·​想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。 

转换为元件,具体操作步骤如下: 
在舞台上绘制一个物体,选中这个物体,单击右键【转换为元件】,如图:




 
双击进去才能对这个元件进行编辑,如图:




 
了解更多常用编 查看全部
·​想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。 

转换为元件,具体操作步骤如下: 
在舞台上绘制一个物体,选中这个物体,单击右键【转换为元件】,如图:
13.png

 
双击进去才能对这个元件进行编辑,如图:
14.png

 
了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并
 

2.2.16 素材与媒体:常用编辑操作—排列、对齐、变形、组合、合并功能

Mugeda培训songyue 发表了文章 • 0 个评论 • 116 次浏览 • 2016-11-29 14:39 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 1、排列,具体操作步骤如下: 
只能作用于同一图层的不同物体  在
 
同一图层绘制三个方框,选中灰色物体单击右键,选择【排列】—【上移一层】,如图:




 
灰色图形就会把紫色图 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 1、排列,具体操作步骤如下: 
只能作用于同一图层的不同物体  在
 
同一图层绘制三个方框,选中灰色物体单击右键,选择【排列】—【上移一层】,如图:
R.png

 
灰色图形就会把紫色图形盖住,如图:
S.png

 
2、对齐,具体操作步骤如下: 
对齐有左、右、上、下、左右居中(以左右的中心点对齐)、上下居中(以上下的中心点对齐)、均分宽度(间隔的宽度相同)、均分高度(间隔的高度相同)8种方式,如图:
T.png

 
3、变形,具体操作步骤如下:  
为左右翻转和上下翻转,如图:
U.png

 
4、组合,具体操作步骤如下: 
同一图层的不同物体,才可以进行此操作,操作后两个图形会变成一个图形,如图:
V.png

 
组合后双击可以对单个物体进行编辑,如图:
W.jpg

 
5、合并,具体操作步骤如下: 
这个是关于裁剪的一些功能,选中舞台上的两个物体,选择【合并】,如图:
X.png

 
两个图形会合并成一个图形,如图:
Y.png

 
选择【用上层物体裁剪】,效果如图:
Z.png

 
选择【用下层物体裁剪】,效果如图:
11.png

 
选择【相交】,效果如图:
12.png

 
了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—转换为元件
 

2.2.15 素材与媒体:常用编辑操作—路径工具

Mugeda培训songyue 发表了文章 • 0 个评论 • 110 次浏览 • 2016-11-29 14:30 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 路径工具,具体操作步骤如下: 
给物体添加动画后,选中物体单击鼠标右键,选择【路径】—【自定义路径】,如图:




 
可以看到,此时的路径线是直线,即物体做直线运动,如图:


查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 路径工具,具体操作步骤如下: 
给物体添加动画后,选中物体单击鼠标右键,选择【路径】—【自定义路径】,如图:
L.png

 
可以看到,此时的路径线是直线,即物体做直线运动,如图:
M.png

 
选中工具栏中的【节点工具】,可以对物体的运动线路进行自定义,如图:
N.png

 
再次选中物体单击鼠标右键,选择【路径】中【自定义路径】,可以看到路径线变成黑色,还原成直线运动,如图:
O.png

 
若想再次编辑,只需选中物体单击鼠标右键,选择【路径】—【自定义路径】,可以看到路径线变成紫色,如图:
P.png

 
显示和隐藏路径线,可以通过【切换路径显示】来操作,如图:
Q.png

 
了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件

2.2.14 素材与媒体:常用编辑操作—节点工具

Mugeda培训songyue 发表了文章 • 0 个评论 • 114 次浏览 • 2016-11-29 14:27 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

节点工具,具体操作步骤如下: 
这个工具,只作用于用Mugeda绘制的图形,对于导入的PNG、JPG不起作用,如图:





选择工具栏的【曲线工具】在舞台上绘制一条曲线,结束时敲击键 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

节点工具,具体操作步骤如下: 
这个工具,只作用于用Mugeda绘制的图形,对于导入的PNG、JPG不起作用,如图:
E.png


选择工具栏的【曲线工具】在舞台上绘制一条曲线,结束时敲击键盘“V”,结束绘制,并在属性面板上把填充色设置为空,如图:
F.jpg


选中图形,并选择节点工具,如图:
G.jpg



选中想编辑的节点,单击右键,可【添加节点】【删除选中节点】【重置选中节点】,如图:
H.png


选中节点,控制手柄就可以调整曲线,如图:
I.png


对于选中没有手柄的节点,可单击右键,选择【重置节点】就可以调用出手柄,如图:
J.png

K.png


添加节点快捷键,在选中节点工具状态下,Ctrl+单击鼠标左键 
删除节点快捷键,在选中节点工具状态下,Alt +单击鼠标左键
 

了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—锁定物体
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件

2.2.13 素材与媒体:常用编辑操作—锁定物体

Mugeda培训songyue 发表了文章 • 0 个评论 • 178 次浏览 • 2016-11-29 14:15 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

本节视频教程请点击此处。 

在编辑菜单里,是Mugeda的常用编辑操作,如图:




 
锁定物体,具体操作步骤如下: 
在舞台上绘制两个物体,如图:




 
选择要锁定的物体,【编辑】—【锁定物体】,就把 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

本节视频教程请点击此处。 

在编辑菜单里,是Mugeda的常用编辑操作,如图:
A.png

 
锁定物体,具体操作步骤如下: 
在舞台上绘制两个物体,如图:
B.png

 
选择要锁定的物体,【编辑】—【锁定物体】,就把选中物体锁定,不可对其进行编辑,如图:
C.png

 
如果想重新对锁住物体进行编辑,选择【编辑】—【全部解锁】即可,如图:
D.png

 
了解更多常用编辑操作:  
【Mugeda教程】常用编辑操作—节点工具
【Mugeda教程】常用编辑操作—路径工具
【Mugeda教程】常用编辑操作—排列、对齐、变形、组合、合并功能
【Mugeda教程】常用编辑操作—转换为元件

2.3.12 动画:标尺和辅助线的用法

Mugeda培训songyue 发表了文章 • 0 个评论 • 172 次浏览 • 2016-11-29 12:02 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

 标尺和辅助线的用法,具体使用方法如下
 
选择菜单栏,【视图】—【标尺】,即可调出标尺工具,如图:




 
标尺就会显示在舞台上,如图:




 
两侧标尺的绿色线条可以作为 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。

 标尺和辅助线的用法,具体使用方法如下
 
选择菜单栏,【视图】—【标尺】,即可调出标尺工具,如图:
1.png

 
标尺就会显示在舞台上,如图:
2.png

 
两侧标尺的绿色线条可以作为我们的辅助线,如图:
3.png

 
移动舞台上的图形时,能看到辅助线,如下图中,当用【选择工具】移动图形时,如果两条辅助线交叉于物体中心,说明物体居于舞台中央,如图:
4.png

 
如果想在舞台上对齐两个物体,可以用【选择工具】对物体进行拖动,如下图中当左侧的绿色辅助线重合时,表明两个物体左对齐,如图:
5.png

 
关闭标尺,辅助线依然存在,移动物体可以看到物体的参考位置,如图:
6.png

1.16-1.20,Mugeda直播课表

Mugeda培训songyue 发表了文章 • 2 个评论 • 1458 次浏览 • 2016-11-11 17:45 • 来自相关话题

(点击查看大图)
 
点此报名,报了名后才能听课哦。PS:本课程提供录播,方便大家复习使用。
 
如果你对Mugeda课程有任何建议和疑问,欢迎在下方留言~我会在第一时间回复你哟!
  查看全部
1.16-1_.20课表_.png


(点击查看大图)
 
点此报名报了名后才能听课哦。PS:本课程提供录播,方便大家复习使用。
 
如果你对Mugeda课程有任何建议和疑问,欢迎在下方留言~我会在第一时间回复你哟!
 

2.9.7 API的应用:获取Mugeda后台数据

原创分享songyue 发表了文章 • 0 个评论 • 192 次浏览 • 2016-11-03 15:04 • 来自相关话题

方法一: 
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。

方法二: 
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是 查看全部
方法一: 
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。

方法二: 
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是存在跨域问题的,这个时候推荐使用jsonp的方式来请求数据,如果你的动画部署在自己的服务器上,这个时候就不会存在跨域问题,你可以使用ajax方式来请求数据。

推荐在动画中引入jQuery,这样你可以使用jQuery ajax方法来发送请求,以下是例子,其中url需要执行你自己后台的请求地址,注意,跨域情况下使用jsonp的请求需要服务器后台支持。

1.没有跨域的情况:
$.ajax({ 
  url: '/submit', 
  type: 'POST', 
  data: {name: 'test'}, 
  success: function (response) { 
     //TODO; 
  } 
});


2.跨域的情况:
$.ajax({ 
  url: "/submit.jsonp", 
  jsonp: "callback", 
  dataType: "jsonp", 
  data: {name: 'test'}, 
  success: function( response ) { 
     //TODO; 
  } 
});


2.9.6 API的应用:工具API
2.9.5 API的应用:aObject对象
2.9.4 API的应用:scene对象
2.9.3 API的应用:Mugeda对象
2.9.2 API的应用:Mugeda API的整体结构
2.9.1 API的应用:在动画中添加代码

2.10.2 判断:逻辑表达式判断

原创分享mingyueliu 发表了文章 • 0 个评论 • 399 次浏览 • 2016-10-09 16:09 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 逻辑表达式判断即当物体条件符合所设定的表达式,即执行行为;

如下图,承接上一案例2.9.1 判断:条件判断,在矩形“下一页”编辑行为的“参数”对话框内,设置“执行条件”为“逻辑表达式”, 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 逻辑表达式判断即当物体条件符合所设定的表达式,即执行行为;

如下图,承接上一案例2.9.1 判断:条件判断,在矩形“下一页”编辑行为的“参数”对话框内,设置“执行条件”为“逻辑表达式”,具体公式为“{{圆判断.left }}==29”,即设置了当“圆判断”圆形的左值等于29时,点击矩形跳转下一页;

2.9-14_.png

图2.9-14

点击“预览”观察效果,由于此时“舞台”上的“圆判断”圆形左值正好是29,即点击矩形可跳转至下一页。

2.9-15_.png

图2.9-15

同理,也可将公式改为“{{圆判断.left }}>15”,因“舞台”上的“圆判断”圆形左值等于29,即大于15,因此点击矩形仍可跳转至下一页。

2.9-16_.png

图2.9-16

逻辑表达式可执行多种判断条件,如图,在“舞台”上添加一个输入框,命名为“sr”;

2.9-17_.png

图2.9-17

同理,回到矩形“下一页”编辑行为的“参数”对话框,将公式改为“{{圆判断.left }}==29 && {{sr.text }}==50”,即设置了只有当“圆判断”左值等于29且“sr”输入框内容为50时,点击矩形才可跳转至下一页。
注意:“&&”表示“并且”

2.9-18_.png

图2.9-18

点击“预览”观察效果;

2.9-19_.png

图2.9-19

同理,将公式改为“{{圆判断.left }}==29 || {{sr.text }}==50”,即设置了只有当“圆判断”左值等于29或者“sr”输入框内容为50时,点击矩形才可跳转至下一页。点击“预览”观察效果。
注意:“||”表示“或者”

2.9-20_.png

图2.9-20

附件:逻辑表达式概念文档

101.png

 

2.10.1 判断:条件判断

原创分享mingyueliu 发表了文章 • 0 个评论 • 269 次浏览 • 2016-10-09 15:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 条件判断即通过一个物体的属性条件,判断物体行为是否执行;

如下图,点击在“舞台”上添加一个矩形;





图2.9-1

为矩形添加两个行为:
 
“跳转下一页”:点击矩形的“添加/ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 条件判断即通过一个物体的属性条件,判断物体行为是否执行;

如下图,点击在“舞台”上添加一个矩形;

2.9-1_.png

图2.9-1

为矩形添加两个行为:
 
“跳转下一页”:点击矩形的“添加/编辑行为”按钮,在“编辑行为”对话框中选择“动画播放控制”→“下一页”→触发条件:“点击”,点击“确认”
“禁止翻页”:在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件:“点击”,点击“确认”

2.9-2_.png

图2.9-2

新建下一页,为便于识别,在下一页中添加一张背景图片素材。

2.9-3_.png

图2.9-3

回到上一页,新建一个输入框,为其命名为“判断”;

2.9-4_.png

图2.9-4

点击矩形的“添加/编辑行为”按钮;

2.9-5_.png

图2.9-5

在“编辑行为”对话框中点击“下一页”行为的“编辑”按钮;

2.9-6_.png

图2.9-6

在弹出的“参数”对话框中设置“执行条件”为“检查元素状态”;
元素名称:“判断”
考察属性:“文本取值”
逻辑条件:“等于”
参考值:“100”
即设置了当“判断”输入框内容等于100时,点击矩形跳转到下一页的行为;

2.9-7_.png

图2.9-7

点击“预览”观察效果;

2.9-8_.png

图2.9-8

如下图,删除输入框,添加一个圆形,将其命名为“圆判断”;

2.9-9_.png

图2.9-9

同理点击矩形的“添加/编辑行为”按钮进入“编辑行为”对话框,点击“下一页”行为的“编辑”按钮进入“参数”对话框;

2.9-10_.png

图2.9-10

设置“执行条件”为“检查元素状态”;
元素名称:“圆判断”
考察属性:“左”
逻辑条件:“不等于”
参考值:“30”
即设置了当“圆判断”圆形左值不等于30时,点击矩形跳转下一页的行为;

2.9-11_.png

图2.9-11

点击“预览”观察效果,如下图,此时“圆判断”的左值为“29”,即不等于30,因此点击矩形即会跳转至下一页;

2.9-12_.png

图2.9-12

2.9-13_.png

图2.9-13