视频教程

视频教程

2.3.2 动画:选择工具

回复

原创分享mingyueliu 发起了问题 • 3 人关注 • 0 个回复 • 4132 次浏览 • 2016-09-21 14:21 • 来自相关话题

【代码分享】超少代码实现到特定时间活动结束的效果

原创分享qqf35714a4fc 发表了文章 • 0 个评论 • 1050 次浏览 • 2019-06-10 23:45 • 来自相关话题

mugeda.addEventListener("renderready", function(){
    var scene = mugeda.scene;
    var d = new Date();//获取现在的时间
    var x = d.getTime();// 查看全部
mugeda.addEventListener("renderready", function(){
    var scene = mugeda.scene;
    var d = new Date();//获取现在的时间
    var x = d.getTime();//返回自 1970 年 1 月 1 日以来的毫秒数:
    var aObject = scene.getObjectByName("time");
    mugeda.scene.getObjectByName('time').text = x;
});

 
我们先看看案例效果点击查看案例,到了明天下午1点钟后就会显示活动已结束。
把以上代码复制到你的作品js里面,然后在舞台新建一个文本命名为time。
然后你就会发现time文本就会变成
微信截图_20190610233239.png
一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
微信截图_20190610234018.png

我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。

1.4.2 快速入门:发布作品

原创分享wx6a18b9d061 回复了问题 • 8 人关注 • 9 个回复 • 5499 次浏览 • 2018-12-16 19:02 • 来自相关话题

本月刷屏级H5《真假朋友大质检》,制作方法公开!

培训教程songyue 发表了文章 • 0 个评论 • 2637 次浏览 • 2017-03-28 15:44 • 来自相关话题

3月28日的案例课已经讲解了这个刷屏级H5的制作方法,为了方便大家学习和复习,上课的重要知识点整理如下:
 
戳这里看案例
 
视频回放已经上线,点这里开始学习
(注:课程报名后才能观看,报名免费)
 
前期准备:
H5工具:Mugeda(www.mugeda.com)
浏览器:下载Chrome浏览 查看全部
3月28日的案例课已经讲解了这个刷屏级H5的制作方法,为了方便大家学习和复习,上课的重要知识点整理如下:
 
戳这里看案例
 
视频回放已经上线,点这里开始学习
(注:课程报名后才能观看,报名免费)
 
前期准备:
H5工具:Mugeda(www.mugeda.com)
浏览器:下载Chrome浏览器,这是对H5支持最好的,方便边做边调试
 
一、游戏原理 
1.不同用户间传播 
a首次打开 
*通过某个值/"判断选择"为2 
b第二用户打开 
*通过某个值/"判断选择"小于2 
c自己再次打开 
*根据{{当前用户昵称=上用户昵称}}判断 
a设置获取微信头像命名为“N” 
b设置上用户微信昵称命名为“N上” 
 
2.根据定时器属性变化判断判断文本不同跳转不同状态页 
a赋值为2跳转到添加问题页面 
b赋值小于2跳转到答题页面 
c{{N=N上}}跳转到提示自己页面
 
二、制作步骤 
1.绘制一个圆角矩形添加获取微信头像 
2.在舞台外复制一个,添加改变图片并勾选转发时保持 
3.定制原理 
a通过输入框输入问题 
b制作选项 
*制作真假选项状态 
*通过改变选中圆点的左坐标来实现选中状态 
c记录选择答案 
*制作判断选择文本  
通过改变“判断选择”数值,真为1,假为0,默认为2 
*通过改变数值并勾选转发时保存状态 
后边会通过此数值判断用户是否答对 
4.制作生成按钮 
a跳转到转发页面 
b改变上用户昵称 
c改变题目文字
 
三、逻辑判断重点 
1.绘制一个矩形添加改变图片行为使此图片改变为上用户头像 
2.添加一个文本框添加改变元素属性是文本框内容变为“@{{N}}你真的了解我吗?” 
3.在真假按钮添加不同回馈 
a真的:跳转第二帧出现文字提示及答题 
b假的:跳转第三帧出现文字提示及出题
 

【案例教程】13个H5热门案例精讲大放送!每个只要9.9!

培训教程songyue 发表了文章 • 0 个评论 • 2513 次浏览 • 2017-01-18 17:56 • 来自相关话题

2016年,Mugeda总共讲过13个热门H5案例,每个都是刷屏级,目的是希望Mu友们都能在第一时间掌握当下最流行的H5制作技术。  
 
岁末年初,想把这一兜子干货全部给你!还没有看过?现在还来得及,而且每个只要9.9,就能一人抵百,掌握只有大公司大团队才能做出的神作!
 
点击课程名称,马上学习 查看全部
2016年,Mugeda总共讲过13个热门H5案例,每个都是刷屏级,目的是希望Mu友们都能在第一时间掌握当下最流行的H5制作技术。  
 
岁末年初,想把这一兜子干货全部给你!还没有看过?现在还来得及,而且每个只要9.9,就能一人抵百,掌握只有大公司大团队才能做出的神作!
 
点击课程名称,马上学习。
 
1、【动画类】什么才是福
知识点:曲线变形动画、元件动画、控制元件
9824d6f4539542ddaa89b50bea4e8757.jpg

 
2、【长图拖动类】你玩过ROOM吗
知识点:背景拖动、关联动画、逻辑判断
ROOM.png

 
3、【3D视角】小爷吴亦凡
知识点:陀螺仪、关联动画、视频使用 
1080副本_2.jpg

 
4、【视频类】星巴克咖啡
知识点:序列帧动画、控制元件、表单制作
900星巴克.jpg

 
5、【小游戏类】拍出惊喜
知识点:随机数、逻辑判断、控制元件 
900拷问啪啪.jpg

 
6、【课件类】化学课件制作
知识点:高级交互、控制元件、逻辑判断
900.jpg

 
7、【交互游戏类】谁是足球明星
知识点:陀螺仪、逻辑判断、高级交互
900谁是足球明星.jpg

 
8、【仿朋友圈类】CEO邀你群聊
知识点:关键帧动画、行为添加、Mugeda图形绘制
900_CEO.jpg

 
9、【绘画板功能】里约大冒险
知识点:绘画板功能、元件动画、添加行为
微信-奥运小人.jpg

 
10、【超炫景深】天猫双十一宇宙邀请函
知识点:关联动画结合逻辑判断,制作超炫景深透视效果
腾讯-双11.jpg

 
11、【快闪】仿苹果7发布会超炫快闪
知识点:多种快闪的组合效果,用色块遮盖文字消失
腾讯用图-快闪.jpg

 
12、【小游戏】H5换装小游戏
知识点:手指拖动放下,及多种逻辑表达式的写法
腾讯-女生GDP.jpg

 
13、【视差类】视差类H5的制作
知识点:动画关联的用法
900.jpg

 
 

Mugeda常见问题解答

培训教程songyue 发表了文章 • 18 个评论 • 7278 次浏览 • 2016-12-27 14:47 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程 
 
如何压缩图片、声音和视频? 
答:http://bbs.mugeda.com/?/article/429 
 
为什么导入H5里的视频无法播放? 
答:确保视频格式为MP4,另外大小控制在20M以内,另外注意视频的格式 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程 
 
如何压缩图片、声音和视频? 
答:http://bbs.mugeda.com/?/article/429 
 
为什么导入H5里的视频无法播放? 
答:确保视频格式为MP4,另外大小控制在20M以内,另外注意视频的格式,视频编码必须是H.264,音频编码必须是AAC。
 
Mugeda里的模板如何使用? 
答:单页模板使用说明http://bbs.mugeda.com/?/article/297 
精品模板使用说明http://bbs.mugeda.com/?/article/401 
 
如何实现H5里可以定制文字和图片的功能? 
答:定制文字教程http://bbs.mugeda.com/?/article/363 
定制图片教程http://bbs.mugeda.com/?/article/351 
 
H5作品文件要如何设置? 
答: http://bbs.mugeda.com/?/article/296 
 
屏幕适配要如何设置?如渲染模式、自适应、选择发布模式、如何设置强制横屏竖屏?
答:http://bbs.mugeda.com/?/article/418 
 
我想让一个物体不断循环动,怎么实现? 
答:用元件动画可以实现,相关教程http://bbs.mugeda.com/?/article/323 
 
如何复制帧/图层? 
答:http://bbs.mugeda.com/?/article/427 
 
为什么无法导入PSD? 
答:导入PSD及注意事项说明http://bbs.mugeda.com/?/article/412 
 
逻辑表达式要怎么写? 
答:7种逻辑表达式的写法http://bbs.mugeda.com/?/article/406 
 
Mugeda API的使用方法? 
答:具体文档http://card.mugeda.com/mugedaApiDoc/index.html
 
如何使用回调函数? 
答:具体文档http://bbs.mugeda.com/?/article/416
 
为什么我的背景音乐无法播放? 
答:Mugeda支持的声音格式为mp3和wav; 
保证声音文件大小10M以内(通常建议压缩处理后声音文件大小500kb左右)。
 
为什么我的背景音乐只在一页中播放? 
答:整个作品的背景音乐在属性栏——背景音乐处添加 
其他Mugeda声音使用相关问题请参考http://bbs.mugeda.com/?/article/13
 
为什么打开内容时,会提示素材缺失? 
答:素材缺失,指的是图片、视频和音频素材在源文件里丢失的情况,这是因为素材没有上传完成造成的。 
以图片为例,当图片上传到素材库时,会有进度条显示上传进度,橙色进度条完成时才算上传成功,如图:
1.png


同时如果在素材库里删除了素材,相关作品中用到的素材也会删除,会显示如下:
2.png

 
为什么我的内容发布后还是会有橙色的广告条? 
答:内容发布后,如果扫描“效果预览”旁的二维码,这时候看到的是预览链接,在最上方会看到橙色的广告条,如果是正式发布链接,则不会出现广告条,特此说明。如图:
3.jpg

(此图二维码是预览地址,有广告条)

4.jpg

(此图二维码是发布地址,无广告条)
 
【预览和发布链接的详细区别】可参考: https://ke.qq.com/webcourse/index.html#course_id=156055&term_id=100178720&taid=964413431636375&vid=s1415c5xz65
 
我想让画面上的一个物体停下来,用手指点击再播放,怎么做? 
答:这个属于动画控制,建议学习下基础课程: https://ke.qq.com/webcourse/index.html#course_id=156055&term_id=100178720&taid=982606913102231&vid=c1415r781id
 
为什么我做的H5打不开了,说是涉及违规内容被举报? 
答:请先自查作品是否违规:http://bbs.mugeda.com/?/article/272 
如果你确实没有违反的话,可以重新发布一遍。
 

 

【案例教程】用H5怎么做出高大上的快闪效果?Mugeda案例课3、2、1教会你!

培训教程songyue 发表了文章 • 3 个评论 • 9649 次浏览 • 2016-12-14 12:01 • 来自相关话题

还记得苹果7发布会的那则快闪广告啵?




 
节奏把握的太好了,不仅用户看的爽,而且信息量巨大!  
 
这种形式用H5做,不仅效果好,而且巨简单,Mugeda案例课程这次就以《快闪H5制作》为例,为大家揭秘如何用H5打造一款堪比苹果快闪的特效。
 
案例学习:《快闪H5制作》






查看全部
还记得苹果7发布会的那则快闪广告啵?
797537.gif

 
节奏把握的太好了,不仅用户看的爽,而且信息量巨大!  
 
这种形式用H5做,不仅效果好,而且巨简单,Mugeda案例课程这次就以《快闪H5制作》为例,为大家揭秘如何用H5打造一款堪比苹果快闪的特效。
 
案例学习:《快闪H5制作》
腾讯用图-快闪.jpg


1.gif


kuaishan.png

 
课程时长:1小时  
知识点:快闪的几种组合效果,用色块遮盖控制文字消失。   
课程形式:随到随听  
 
点击这里开始学习
 

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

培训教程songyue 发表了文章 • 0 个评论 • 2556 次浏览 • 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 界面与舞台:元件界面介绍

培训教程songyue 发表了文章 • 0 个评论 • 2515 次浏览 • 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 界面与舞台:物体属性设置

培训教程songyue 发表了文章 • 0 个评论 • 2559 次浏览 • 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 界面与舞台:关键帧和页面的命名

培训教程songyue 发表了文章 • 0 个评论 • 2231 次浏览 • 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 作品创建前必读:屏幕适配设置(渲染模式、自适应、发布模式、旋转模式)

培训教程songyue 发表了文章 • 1 个评论 • 4389 次浏览 • 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.1.10 界面与舞台:翻页的相关设置

培训教程songyue 发表了文章 • 1 个评论 • 3072 次浏览 • 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.18 素材与媒体:导入PSD及注意事项

培训教程songyue 发表了文章 • 2 个评论 • 5690 次浏览 • 2016-11-29 15:09 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
在工具栏,选中PS图标,如图:




 
直接把PSD文件拖拽到指定区域。如图:




 
可以选择导入单个图层,也可以按住Ctrl选择多个图层,然后分层导入,如图:




查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
在工具栏,选中PS图标,如图:
1.png

 
直接把PSD文件拖拽到指定区域。如图:
2.png

 
可以选择导入单个图层,也可以按住Ctrl选择多个图层,然后分层导入,如图:
3.png

 
PSD素材分图层导入舞台,而且导入的图片和PSD中的位置完全一致,如图:
4.png

 
常见问题: 
1、问:为什么我按照320*520做的底图素材,但用手机扫描却很模糊? 
答:Mugeda默认的画布尺寸为320*520
5.png

 
在PS里处理素材时,应把素材的尺寸设置为640*1040(即2倍精度大小),这样导入到Mugeda里的图片才足够清晰,切记素材的尺寸设置要与舞台尺寸保持比例一致。
6.png

 
如果导入的PSD文件过大,会出现如下提示:
7.png

 
2、问:为什么我导入不了带有图层样式的PSD? 
答:在PS中做了一张有图层样式的素材,如图:
8.png

 
导入Mugeda里效果如下,如图:
9.png

 
Mugeda不可以直接导入带有图层样式的PSD文件,如果想保留效果,可以选择图层,点击右键【转换为智能对象】,如图:
10.png

 
经过这样的处理后,再导入Mugeda,就可以保留原来素材的效果,如图:
11.png

 
3、问:我想导入JPG,但导进来却是透明背景的PNG,是什么原因?          
答:在你的PS文件中,舞台外还有另一个图形,如图:
12.png

 
选择合并后,如图: 
13.png

 
把这个素材导入到Mugeda里,默认保留了通道,如图:
14.png

 
4、问:怎么处理素材,才能让文件尽可能的小? 
答:减少素材的用色,尽量让素材图片少一些,另外严格按照1.5/2两倍精度(等比例)制作素材。
 
5、问:怎么摆脱PPT样式的H5? 
答:在做设计的时候,就要考虑到H5中的交互,如图:
15.png

 
如果素材过大,可以利用PS中的裁剪工具裁剪成多个再保存,如图:
16.png

 
 

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

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

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

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




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




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

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

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

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

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

培训教程songyue 发表了文章 • 0 个评论 • 3359 次浏览 • 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 素材与媒体:常用编辑操作—路径工具

培训教程songyue 发表了文章 • 0 个评论 • 2721 次浏览 • 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 素材与媒体:常用编辑操作—节点工具

培训教程songyue 发表了文章 • 0 个评论 • 3119 次浏览 • 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 素材与媒体:常用编辑操作—锁定物体

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

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

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

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




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




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

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

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

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

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

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

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

2.10.3 判断:多种逻辑表达式的写法

培训教程songyue 发表了文章 • 5 个评论 • 8284 次浏览 • 2016-11-29 14:00 • 来自相关话题

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

本节知识点:取值的方法、获取物体的属性、基本算法符号、基本判断符号、满足条件符号、保留后几位小数、判断字符串的长度

1、取值的方法 
给某个物体取名叫a,获取a的值如下: {{a}}
  查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

本节知识点:取值的方法、获取物体的属性、基本算法符号、基本判断符号、满足条件符号、保留后几位小数、判断字符串的长度

1、取值的方法 
给某个物体取名叫a,获取a的值如下: {{a}}
 
2、获取物体的属性 
{{a.top}}   上坐标 
{{a.left}}  左坐标 
{{a.height}}  物体的高 
{{a.width}}   物体的宽 
{{a.text}}     字符
 
举例:如何让文本框获取到物体的上坐标?具体步骤如下: 
给方块命名为“A”,文字框命名为“T”,如图:
1.jpg

 
给方块添加改变元素属性行为,触发条件为出现,如图:
2.jpg

 
进入编辑设置相关参数,取值{{a.top}},如图:
3.jpg

注:给物体命名可以是中文的,但是符号一定要在英文状态下输入
 
3、基本算法符号 
+  加 
-  减 
*  乘  
/  除 
== 等于 
‘’ 字符串(注意:是英文状态下的引号)
 
4、基本判断符号 
>  大于 
<  小于 
!= 不等于
 
举例:iPhone解锁效果,具体步骤如下: 
在舞台上绘制滑动条和解锁块,给解锁块在右侧属性中添加“水平拖动”和“结束时复位”,如图:
4.jpg

 
给解锁块命名为“a”,并给它添加跳转到“下一页”的行为,触发条件是“属性改变”,设置的参数应该写成{{a.left}}>210,即当解锁块的左坐标大于210的时候,就会跳到第二页,如图:
5.jpg

 
5、满足条件符号 
||  或 
&& 同时满足
 
举例:{{a.text}}==’2’||{{b.text}}==’6’就翻页  
举例:小球a移动到方框b里就成功,表达式 {{a.top}} > {{b.top}} && {{a.left}} > {{b.left}} && ({{a.top}} + {{a.height}} < {{b.top}} + {{b.height}}) && ({{a.left}} + {{a.width}} < {{b.left}} + {{b.width}})
 
6、保留后几位小数 
~~  取整数 
{{a}}.toFixed(n)   a保留n位小数,当n=0时,取的是整数  
 
举例:用文本框获取运动圆球的上坐标,具体步骤如下:
给运动的圆球命名为”a”,在舞台上添加文本框,并让它关联圆球“a”的上坐标,默认是保留三位小数,如图:
6.jpg


实现效果,如图:
7.jpg


在舞台上新添加一个文本框t2,让它的值等于t,如图:
8.jpg


给t添加改变元素属性行为,触发条件为属性改变(注:哪个物体在动,就把行为添加在它那里),在参数设置里的取值填入{{t}}.toFixed(1),能实现保留一位小数的效果,如图:
9.jpg

 
注:如果要取整数,在参数设置里的取值填入{{t}}.toFixed(0) 或 ~~{{t}} 均可。  
 
取整数的另一种方法,在被控量【关联属性】前加”~~”,但适用于取整,如图:
10.jpg

 
7、'{{a}}'.length==n    判断字符串的长度 
 
举例,输入框不能输入6个字以上,超出则会弹出提示,具体步骤如下:  
给输入框命名“a”,给提示语命名”b”,提示语默认的透明度为0,如图:
11.jpg

 
给输入框添加改变元素属性行为,触发条件是“属性改变”,设置参数'{{a}}'.length>5,如图:
12.jpg



           

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

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

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

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




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




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

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

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

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

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

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

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

【直播课】4.24-4.28,Mugeda直播课表

培训教程songyue 发表了文章 • 3 个评论 • 5204 次浏览 • 2016-11-11 17:45 • 来自相关话题

(点击查看大图)
 
点此报名,报了名后才能听课哦。
 
PS:本课程提供录播,方便大家复习使用;

 

 

4.24大课表_.png


(点击查看大图)
 
点此报名报了名后才能听课哦。
 
PS:本课程提供录播,方便大家复习使用;

 

 

【案例教程】Word 天,《天猫双十一宇宙邀请函》原来用Mugeda就可以做!

培训教程songyue 发表了文章 • 0 个评论 • 2714 次浏览 • 2016-10-28 14:37 • 来自相关话题

上周末天猫出了个H5神作,不知道你看了没:









 
天猫有钱有人力,玩得转设计,加得了代码,那普通宝宝怎么办?Mugeda案例课程这次就以《天猫双十一宇宙邀请函》为例,为大家揭秘不用代码而用Mugeda该怎么做。
 
案例学习:《天猫双十一宇宙邀请函》




课程时长:1小时  查看全部
上周末天猫出了个H5神作,不知道你看了没:

IMG_3399_副本.png

双十一_副本.png

 
天猫有钱有人力,玩得转设计,加得了代码,那普通宝宝怎么办?Mugeda案例课程这次就以《天猫双十一宇宙邀请函》为例,为大家揭秘不用代码而用Mugeda该怎么做。
 
案例学习:《天猫双十一宇宙邀请函》
微信-双11.jpg

课程时长:1小时 
知识点:关联动画结合逻辑判断,制作超炫景深透视效果。  
课程形式:随到随听
 
点击这里开始学习

2.2.12 素材与媒体:粘贴第三方文字和图片

培训教程songyue 发表了文章 • 0 个评论 • 3524 次浏览 • 2016-10-09 16:23 • 来自相关话题

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

 复制粘贴以及拖拽添加图片功能已经更新到beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。
 
1、现在可以直接将剪切板的文字添加到物体。操作方法是:在任意应用中用C 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 复制粘贴以及拖拽添加图片功能已经更新到beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。
 
1、现在可以直接将剪切板的文字添加到物体。操作方法是:在任意应用中用Ctrl+C(或者等效的菜单操作)将一段文字复制到剪切板,然后在Mugeda IDE中用Ctrl+V即可将该文字粘贴成一个文本对象;
 
2、现在可以直接将剪切板的图片添加到物体。操作方法是:在任意应用中用Ctrl+C(或者等效的操作,例如QQ的屏幕截屏)将一张图片复制到剪切板,然后在Mugeda IDE中用Ctrl+V即可将图片在“选择图片”对话框中打开并准备上传;
99.png

 
3、可以直接将文件拖动到舞台并放下,即可打开上传图片对话框并上传图片;
999.png

 
相关教学视频本周会上线,请留意论坛和群内消息哟~

2.2.11 素材与媒体:虚拟现实/全景组件的用法

培训教程songyue 发表了文章 • 8 个评论 • 6340 次浏览 • 2016-10-09 16:13 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 虚拟现实场景组件已经更新到beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。  
 点击查看全景演示
 
本节视频教程请点击此处。

简介: 
虚拟现实场景组件,可以用来显示360度全景图片,并添 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 虚拟现实场景组件已经更新到beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。  
 点击查看全景演示
 
本节视频教程请点击此处。

简介: 
虚拟现实场景组件,可以用来显示360度全景图片,并添加热点进行交互。  
 
具体教程: 
1、添加组件 
虚拟现实场景组件通过工具栏的“虚拟现实场景”图标添加:
1.png

 
在画布上拖动鼠标画出组件的位置。松开鼠标后,即可进入编辑场景图片的界面。
2.png

 
插入场景图片时,注意图片格式,规定如下:
L.png

 
选择图片后,会出现更多的编辑选项,各区域说明如下图所示:
A.png

 
1) 场景预览区:这里可以看到载入的图片渲染的场景效果,可以用鼠标拖动进行全景浏览; 
2) 场景列表区:显示所有添加的场景,可以对场景添加、删除、编辑、排序; 
3) 热点和场景编辑:用来切换热点和场景;
4) 全局配置:用来设置导航条以及导航条中出现的条目的选择;
 
很多编辑区域均配有即时帮助:
B.png

 
2、编辑场景 
场景具有如下属性:   
1) 图片:即全景的导入图片,支持等距长方投影和三维六面贴图两种格式; 
2) 预览图:在全景载入之前的一个小尺寸图片,可选; 
3) 缩略图:如果选择显示导航条,缩略图会显示在导航条上提示用户,尺寸是64*64; 
4) 标题:每一个场景的名称,会显示在导航条上;
 
3、热点编辑 
点击“热点”标签可以切换到热点编辑模式。在热点编辑模式下,可以添加、删除、移动热点,并未热点指定图形、动画和行为。   
 
击热点列表下的添加图标,可以进入热点添加模式。
C.png

 
进入热点添加模式后,加号图标会变成橙色提醒用户。
123.jpg

 
在热点添加模式下,在场景预览区域点击即可添加新的热点。
D.png

 
点击热点列表中的任一热点,可以在列表中和预览窗口中定位热点,便于识别。
E.png

 
每个热点可编辑的属性有:   
1) 热点名称:用于区分和识别不同热点的名称; 
2) 图标:显示在场景中的图标; 
3) 尺寸:图标的显示大小; 
4) 行为:点击热点后激活的行为; 
5) 操作:对行为进行编辑或者删除热点;  
 
具体说明两点:图标和行为。
 
3、热点图标和行为 
3.1 热点图标 
热点图标Mugeda提供预置的图标,如图:
F.png

 
以外,用户可以上传任意的图片作为热点图标,在“+”位置添加,如图:
G.png

 
并指定相应的尺寸即可,如图:
H.png

 
3.2 热点行为 点击热点后,可以触发一系列的行为。该操作和为物体添加行为类似。
I.png

 
注意“切换虚拟现实场景”行为。这个行为允许用户在点击热点后进行场景和热点切换。切换时,需要指定场景名称和热点名称。其中,热点名称可选,如果不指定,切换场景后会切换到预览窗口所显示的区域。
J.png

 
4、场景属性
222.jpg

 
1) 显示导航:在屏幕下方出现的导航条。当包含2个以上的场景时,建议选择; 
2) 允许陀螺仪控制:是否在导航条上显示陀螺仪控制的切换图标; 
3) 左右分离视角:是否在导航条上显示左右分离视角;这个目前比较小众,建议不选;
 
5、场景渲染 
场景渲染时,可以用鼠标或者手指拖动切换视。如果选择了显示导航,还会出现一个导航条提供进一步的选择包括:上一场景、显示缩略图、VR效果、收起导航栏、下一场景。
K.png

 
6、如何产生全景内容 
产生全景内容的方式有两种:   
1) 用可以产生全景内容的App
例如:Google Street View, Sphere, 百度圈景,等等。在苹果和安卓应用商店可以搜到。   
2) 用全景拍摄设备。这些设备从简单到专业有很多选择,例如Insta360在京东的旗舰店: http://insta360.jd.com/  
 
相关教学视频本周会上线,请留意论坛和群内消息哟~

Mugeda是什么?

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

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

 一、    Mugeda是什么?

Mugeda是一个专业级H5交互动画制作云平台,基于云平台计算框架,Mugeda无需任何下载和安装。

二、    如何进入Mugeda页面?

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

 一、    Mugeda是什么?

Mugeda是一个专业级H5交互动画制作云平台,基于云平台计算框架,Mugeda无需任何下载和安装。

二、    如何进入Mugeda页面?

1)下载Google浏览器:(考虑有些浏览器对html5的支持不够,建议使用chrome浏览器),打开Google浏览器,输入www.mugeda.com
 进入Mugeda首页。

2)注册Mugeda账号:进入首页后,可点击右上角“注册”,通过几步简单的步骤注册一个新账号。
也可以点击“立即体验”进入操作界面。

1.1-2_.jpeg

图1.1-2

三、    Mugeda操作界面简单介绍

帮助手册:点击“立即体验“,会打开Mugeda的帮助手册,点击“预览”按钮即可观看整个平台的功能和基本操作。
 
1.1-3_.jpeg

图1.1-3

简单制作交互动画:Mugeda操作界面和Flash高度相似,因此有Flash基础的朋友基本不用通过学习就可快速制作出一个H5作品。此外,设计师也无需添加任何代码即可完成复杂的交互。
 
1.1-4_.jpeg

图1.1-4

除了设计师,工程师在Mugeda中也大有所为,在“脚本”按钮中,工程师可以写入“JS”代码来制作自己想要的交互效果。

1.1-5_.jpeg

图1.1-5

手机观看:在Mugeda中制作出的H5作品支持随时手机观看,点击“通过二维码共享”按钮,可用手机扫描出现的二维码观看作品效果。
 
1.1-6_.jpeg

图1.1-6

发布作品:点击橙色“发布”按钮,可发布H5作品,用Mugeda平台发布的任何H5作品都没有Mugeda的Logo,大家可以放心使用。

共享、导出作品:Mugeda同时还支持动画作品的共享、导出。如图1.1-7,在“通过二维码共享”对话框中,可以选中“共享源文件”,复制共享作品编辑地址。
 
1.1-7_.jpeg

图1.1-7

同时还可以导出一个HTML5源文件部署在自己的服务器上,同样也不附Mugeda的Logo。除此之外,Mugeda还支持GIF、视频、PNG等格式的导出,基本覆盖现在流行的主流多媒体格式,功能十分强大。导出步骤:“文件”→“导出”→选择导出格式
 
1.1-8_.jpeg

图1.1-8

四、    团队管理

针对企业账号,Mugeda提供专业企业服务。点击操作界面右上角账号管理的三角形,在下拉菜单中选择“团队管理”,可进入团队管理页面。在管理页面中,可添加企业成员,方便进行人员及作品管理。企业账号与子账号,子账号与子账号之间可共享作品,十分方便。

1.1-9_.jpeg
 
图1.1-9
1.1-10_.jpeg

图1.1-10

五、    数据服务

Mugeda还提供专业的数据服务。针对每一个作品,我们可以在后台统计页面中浏览到数据。在数据页面,可以选择统计时间段、每个时段的浏览量与用户数,方便运营人员进行详细的分析。基于微信传播,Mugeda还提供朋友圈、单聊、群聊以及其他四种传播来源数据。
 
1.1-11_.jpeg

图1.1-11

六、    Mugeda动画交互作品展示

下面让我们简单介绍一下用Mugeda做出的几种类型的交互作品:

动画:
 
1.1-12_.png

图1.1-12

广告:

1.1-13_.png

图1.1-13

测试:
 
1.1-14_.png

图1.1-14

贺卡:
 
1.1-15_.png

图1.1-15

电子绘本
 
1.1-16_.png

图1.1-16

课件:
 
1.1-17_.png

图1.1-17

游戏:
 
1.1-18_.png

图1.1-18

2.3.9 动画:分页/加载页

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

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

 如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等





图2.3-67

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

 如下图,在右侧“加载”页面,选择“加载样式”为“进度条”,在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色,添加背景图片、前景图片等

2.3-67_.png

图2.3-67

点击“预览”观察效果

2.3-68_.png

图2.3-68

如图,将样式改为“进度环”,其他属性设置不变

2.3-69_.png

图2.3-69

点击“预览”观察效果

2.3-70_.png

图2.3-70

将样式改为“旋转加载”,可观察到加载效果如下:

2.3-71_.png

图2.3-71

将样式改为“旋转加载+百分比”,可观察到加载效果如下

2.3-72_.png

图2.3-72

将样式改为“首页作为加载页面”可完成更个性化的加载形式定制。

如下图,在首页添加一个火箭图片素材,调整大小与位置。鼠标选中该素材右键→“转换为元件”

2.3-73_.png

图2.3-73

双击该元件进入元件编辑页面。在时间轴20帧的位置右键→“插入帧”,右键→“插入关键帧动画”

2.3-74_.png

图2.3-74

在20帧的位置右键→“插入关键帧”

2.3-75_.png

图2.3-75

鼠标选中第10帧关键帧位置,将火箭图片向上拖动一些位置,制作出火箭上下移动的动画效果

2.3-76_.png

图2.3-76

点击回到“舞台”,新建一个图层1,选中图层1的第一帧,点击“矩形”工具在“舞台”上拉出一个长条矩形作为进度条,可适当调整矩形颜色大小等。

2.3-77_.png

图2.3-77

同时选中图层0、图层1的第30帧,鼠标右键→“插入帧”

2.3-78_.png

图2.3-78

选中图层1的有帧位置,右键→“关键帧动画”

2.3-79_.png

图2.3-79

选中图层1的起始关键帧,点击矩形元素,在其“属性面板”内将其“宽”值设为“1”

2.3-80_.png

图2.3-80

添加一个新页面,点击预览动画效果,发现长条矩形出现横向拉长,即加载的动画效果,动画播放完后自动跳至第2页。

2.3-81_.png

图2.3-81

2.3.8 动画:元件动画

原创分享mingyueliu 发表了文章 • 4 个评论 • 5118 次浏览 • 2016-09-21 14:54 • 来自相关话题

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

 元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。

如图,点击“素材库”,在“舞台”上添加一个车 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 元件动画可以实现复杂的动画效果,每一个元件都是一个独立的完整动画,元件在“舞台”上运动的同时,元件内部的动画也可以同时播放,元件可以重复使用。

如图,点击“素材库”,在“舞台”上添加一个车轮的图片素材

2.3-48_.png

图2.3-48

选中车轮素材,右键→“转换为元件”,即将车轮元素属性转换为元件

2.3-49_.png

图2.3-49

双击“舞台”上的车轮,进入元件编辑页面

2.3-50_.png

图2.3-50

在时间轴50帧位置右键→“插入帧”

2.3-51_.png

图2.3-51

在任意有帧的位置右键→“插入关键帧动画”

2.3-52_.png

图2.3-52

点击选中最后有帧位置(此处为第50帧),在“属性面板”下调整元件属性“Z轴旋转角度”为“360”度

2.3-53_.png

图2.3-53

点击“播放”可观察车轮出现自转一周的动画效果

2.3-54_.png

图2.3-54

点击“舞台”回到“舞台”编辑页面

2.3-55_.png

图2.3-55

点击“预览”发现元件动画可重复不断地播放

2.3-56_.png

图2.3-56

元件也可重复使用。例如在“元件面板”下找到车轮元件,鼠标可将其选中并拖拉至“舞台”

2.3-57_.png

图2.3-57
2.3-58_.png

图2.3-58

元件可配合舞台操作进行复杂的动画设置。如下图,在“素材库”中添加进一个汽车图片素材至“舞台”,选中汽车图片,右键→“排列”→“移至底层”

2.3-59_.png

图2.3-59

调整“舞台”上原本的两个车轮元件位置、大小,使其对齐覆盖汽车图片上的两个车轮

2.3-60_.png

图2.3-60

点击“预览”,出现汽车轮胎转动的动画效果

2.3-61_.png

图2.3-61

在“舞台”的40帧位置,右键→“插入帧”

2.3-62_.png

图2.3-62

在有帧的位置右键→“插入关键帧动画”

2.3-63_.png

图2.3-63

选中关键帧动画的起始帧(此处为第1帧),将汽车移至屏幕左侧。

2.3-64_.png

图2.3-64

选中关键帧动画的最后帧(此处为第40帧),将汽车移至屏幕右侧。

2.3-65_.png

图2.3-65

点击“预览”,观察汽车从屏幕左侧开至右侧的动画效果

2.3-66_.png

图2.3-66
 

2.3.7 动画:预置动画

原创分享mingyueliu 发表了文章 • 1 个评论 • 3495 次浏览 • 2016-09-21 14:45 • 来自相关话题

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

 预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。

1.    添加进入动画

如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮





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

 预置动画可实现一秒钟制作动画,分为进入动画、强调动画以及退出动画。

1.    添加进入动画

如下图,给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮

2.3-43_.png

图2.3-43

在弹出的对话框内选择进入动画效果为“弹入”,同理将其他两个文字素材添加“弹入”的进入动画效果。可点击预览效果

2.3-44_.png

图2.3-44

2.    强调动画

点击“强调动画”文字素材右边的“添加预置动画”按钮,

2.3-45_.png

图2.3-45

在弹出的对话框中选择强调动画效果为“晃动”,可点击预览效果。

2.3-46_.png

图2.3-46

3.    退出动画

同理点击“退出动画”文字素材右边的“添加预置动画”按钮,在弹出的对话框中选择推出动画效果为“蹦出”,可点击预览效果。

2.3-47_.png

图2.3-47

2.3.6 动画:变形动画

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

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

 曲线变形动画可以实现一个形状变成另一个形状的动画效果。

如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。





图2.3-35

在时间轴20帧的位置,右 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。

 曲线变形动画可以实现一个形状变成另一个形状的动画效果。

如下图,选中新图层0的第1帧,鼠标点击“矩形”工具在“舞台”上绘制一个矩形。

2.3-35_.png

图2.3-35

在时间轴20帧的位置,右键→“插入帧”

2.3-36_.png

图2.3-36

在时间轴有帧的位置,右键→“插入曲线变形动画”

2.3-37_.png

图2.3-37

选中最后一帧,鼠标点击“节点”工具

2.3-38_.png

图2.3-38

改变矩形形状为三角形

2.3-39_.png

图2.3-39

点击“播放”,观察矩形变成三角形的动画效果

2.3-40_.png

图2.3-40

同理,点击选中时间轴上的最后一帧,在“属性面板”下改变物体填充色为红色,点击“播放”观察动画效果,发现矩形变成三角形的同时,物体颜色也逐渐由紫色变成红色。

2.3-41_.png

图2.3-41
2.3-42_.png

图2.3-42
 

【视频教程】60分钟学会热门H5案例(0907更新)

回复

培训教程songyue 发起了问题 • 5 人关注 • 0 个回复 • 4872 次浏览 • 2016-08-09 15:09 • 来自相关话题

本月刷屏级H5《真假朋友大质检》,制作方法公开!

培训教程songyue 发表了文章 • 0 个评论 • 2637 次浏览 • 2017-03-28 15:44 • 来自相关话题

3月28日的案例课已经讲解了这个刷屏级H5的制作方法,为了方便大家学习和复习,上课的重要知识点整理如下:
 
戳这里看案例
 
视频回放已经上线,点这里开始学习
(注:课程报名后才能观看,报名免费)
 
前期准备:
H5工具:Mugeda(www.mugeda.com)
浏览器:下载Chrome浏览 查看全部
3月28日的案例课已经讲解了这个刷屏级H5的制作方法,为了方便大家学习和复习,上课的重要知识点整理如下:
 
戳这里看案例
 
视频回放已经上线,点这里开始学习
(注:课程报名后才能观看,报名免费)
 
前期准备:
H5工具:Mugeda(www.mugeda.com)
浏览器:下载Chrome浏览器,这是对H5支持最好的,方便边做边调试
 
一、游戏原理 
1.不同用户间传播 
a首次打开 
*通过某个值/"判断选择"为2 
b第二用户打开 
*通过某个值/"判断选择"小于2 
c自己再次打开 
*根据{{当前用户昵称=上用户昵称}}判断 
a设置获取微信头像命名为“N” 
b设置上用户微信昵称命名为“N上” 
 
2.根据定时器属性变化判断判断文本不同跳转不同状态页 
a赋值为2跳转到添加问题页面 
b赋值小于2跳转到答题页面 
c{{N=N上}}跳转到提示自己页面
 
二、制作步骤 
1.绘制一个圆角矩形添加获取微信头像 
2.在舞台外复制一个,添加改变图片并勾选转发时保持 
3.定制原理 
a通过输入框输入问题 
b制作选项 
*制作真假选项状态 
*通过改变选中圆点的左坐标来实现选中状态 
c记录选择答案 
*制作判断选择文本  
通过改变“判断选择”数值,真为1,假为0,默认为2 
*通过改变数值并勾选转发时保存状态 
后边会通过此数值判断用户是否答对 
4.制作生成按钮 
a跳转到转发页面 
b改变上用户昵称 
c改变题目文字
 
三、逻辑判断重点 
1.绘制一个矩形添加改变图片行为使此图片改变为上用户头像 
2.添加一个文本框添加改变元素属性是文本框内容变为“@{{N}}你真的了解我吗?” 
3.在真假按钮添加不同回馈 
a真的:跳转第二帧出现文字提示及答题 
b假的:跳转第三帧出现文字提示及出题
 

【案例教程】13个H5热门案例精讲大放送!每个只要9.9!

培训教程songyue 发表了文章 • 0 个评论 • 2513 次浏览 • 2017-01-18 17:56 • 来自相关话题

2016年,Mugeda总共讲过13个热门H5案例,每个都是刷屏级,目的是希望Mu友们都能在第一时间掌握当下最流行的H5制作技术。  
 
岁末年初,想把这一兜子干货全部给你!还没有看过?现在还来得及,而且每个只要9.9,就能一人抵百,掌握只有大公司大团队才能做出的神作!
 
点击课程名称,马上学习 查看全部
2016年,Mugeda总共讲过13个热门H5案例,每个都是刷屏级,目的是希望Mu友们都能在第一时间掌握当下最流行的H5制作技术。  
 
岁末年初,想把这一兜子干货全部给你!还没有看过?现在还来得及,而且每个只要9.9,就能一人抵百,掌握只有大公司大团队才能做出的神作!
 
点击课程名称,马上学习。
 
1、【动画类】什么才是福
知识点:曲线变形动画、元件动画、控制元件
9824d6f4539542ddaa89b50bea4e8757.jpg

 
2、【长图拖动类】你玩过ROOM吗
知识点:背景拖动、关联动画、逻辑判断
ROOM.png

 
3、【3D视角】小爷吴亦凡
知识点:陀螺仪、关联动画、视频使用 
1080副本_2.jpg

 
4、【视频类】星巴克咖啡
知识点:序列帧动画、控制元件、表单制作
900星巴克.jpg

 
5、【小游戏类】拍出惊喜
知识点:随机数、逻辑判断、控制元件 
900拷问啪啪.jpg

 
6、【课件类】化学课件制作
知识点:高级交互、控制元件、逻辑判断
900.jpg

 
7、【交互游戏类】谁是足球明星
知识点:陀螺仪、逻辑判断、高级交互
900谁是足球明星.jpg

 
8、【仿朋友圈类】CEO邀你群聊
知识点:关键帧动画、行为添加、Mugeda图形绘制
900_CEO.jpg

 
9、【绘画板功能】里约大冒险
知识点:绘画板功能、元件动画、添加行为
微信-奥运小人.jpg

 
10、【超炫景深】天猫双十一宇宙邀请函
知识点:关联动画结合逻辑判断,制作超炫景深透视效果
腾讯-双11.jpg

 
11、【快闪】仿苹果7发布会超炫快闪
知识点:多种快闪的组合效果,用色块遮盖文字消失
腾讯用图-快闪.jpg

 
12、【小游戏】H5换装小游戏
知识点:手指拖动放下,及多种逻辑表达式的写法
腾讯-女生GDP.jpg

 
13、【视差类】视差类H5的制作
知识点:动画关联的用法
900.jpg

 
 

【案例教程】用H5怎么做出高大上的快闪效果?Mugeda案例课3、2、1教会你!

培训教程songyue 发表了文章 • 3 个评论 • 9649 次浏览 • 2016-12-14 12:01 • 来自相关话题

还记得苹果7发布会的那则快闪广告啵?




 
节奏把握的太好了,不仅用户看的爽,而且信息量巨大!  
 
这种形式用H5做,不仅效果好,而且巨简单,Mugeda案例课程这次就以《快闪H5制作》为例,为大家揭秘如何用H5打造一款堪比苹果快闪的特效。
 
案例学习:《快闪H5制作》






查看全部
还记得苹果7发布会的那则快闪广告啵?
797537.gif

 
节奏把握的太好了,不仅用户看的爽,而且信息量巨大!  
 
这种形式用H5做,不仅效果好,而且巨简单,Mugeda案例课程这次就以《快闪H5制作》为例,为大家揭秘如何用H5打造一款堪比苹果快闪的特效。
 
案例学习:《快闪H5制作》
腾讯用图-快闪.jpg


1.gif


kuaishan.png

 
课程时长:1小时  
知识点:快闪的几种组合效果,用色块遮盖控制文字消失。   
课程形式:随到随听  
 
点击这里开始学习
 

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

培训教程songyue 发表了文章 • 0 个评论 • 2556 次浏览 • 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 界面与舞台:元件界面介绍

培训教程songyue 发表了文章 • 0 个评论 • 2515 次浏览 • 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 界面与舞台:物体属性设置

培训教程songyue 发表了文章 • 0 个评论 • 2559 次浏览 • 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 界面与舞台:关键帧和页面的命名

培训教程songyue 发表了文章 • 0 个评论 • 2231 次浏览 • 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 作品创建前必读:屏幕适配设置(渲染模式、自适应、发布模式、旋转模式)

培训教程songyue 发表了文章 • 1 个评论 • 4389 次浏览 • 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.1.10 界面与舞台:翻页的相关设置

培训教程songyue 发表了文章 • 1 个评论 • 3072 次浏览 • 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.18 素材与媒体:导入PSD及注意事项

培训教程songyue 发表了文章 • 2 个评论 • 5690 次浏览 • 2016-11-29 15:09 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
在工具栏,选中PS图标,如图:




 
直接把PSD文件拖拽到指定区域。如图:




 
可以选择导入单个图层,也可以按住Ctrl选择多个图层,然后分层导入,如图:




查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
在工具栏,选中PS图标,如图:
1.png

 
直接把PSD文件拖拽到指定区域。如图:
2.png

 
可以选择导入单个图层,也可以按住Ctrl选择多个图层,然后分层导入,如图:
3.png

 
PSD素材分图层导入舞台,而且导入的图片和PSD中的位置完全一致,如图:
4.png

 
常见问题: 
1、问:为什么我按照320*520做的底图素材,但用手机扫描却很模糊? 
答:Mugeda默认的画布尺寸为320*520
5.png

 
在PS里处理素材时,应把素材的尺寸设置为640*1040(即2倍精度大小),这样导入到Mugeda里的图片才足够清晰,切记素材的尺寸设置要与舞台尺寸保持比例一致。
6.png

 
如果导入的PSD文件过大,会出现如下提示:
7.png

 
2、问:为什么我导入不了带有图层样式的PSD? 
答:在PS中做了一张有图层样式的素材,如图:
8.png

 
导入Mugeda里效果如下,如图:
9.png

 
Mugeda不可以直接导入带有图层样式的PSD文件,如果想保留效果,可以选择图层,点击右键【转换为智能对象】,如图:
10.png

 
经过这样的处理后,再导入Mugeda,就可以保留原来素材的效果,如图:
11.png

 
3、问:我想导入JPG,但导进来却是透明背景的PNG,是什么原因?          
答:在你的PS文件中,舞台外还有另一个图形,如图:
12.png

 
选择合并后,如图: 
13.png

 
把这个素材导入到Mugeda里,默认保留了通道,如图:
14.png

 
4、问:怎么处理素材,才能让文件尽可能的小? 
答:减少素材的用色,尽量让素材图片少一些,另外严格按照1.5/2两倍精度(等比例)制作素材。
 
5、问:怎么摆脱PPT样式的H5? 
答:在做设计的时候,就要考虑到H5中的交互,如图:
15.png

 
如果素材过大,可以利用PS中的裁剪工具裁剪成多个再保存,如图:
16.png

 
 

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

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

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

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




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




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

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

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

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

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

培训教程songyue 发表了文章 • 0 个评论 • 3359 次浏览 • 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 素材与媒体:常用编辑操作—路径工具

培训教程songyue 发表了文章 • 0 个评论 • 2721 次浏览 • 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 素材与媒体:常用编辑操作—节点工具

培训教程songyue 发表了文章 • 0 个评论 • 3119 次浏览 • 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 素材与媒体:常用编辑操作—锁定物体

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

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

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

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




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




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

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

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

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

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

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

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

2.10.3 判断:多种逻辑表达式的写法

培训教程songyue 发表了文章 • 5 个评论 • 8284 次浏览 • 2016-11-29 14:00 • 来自相关话题

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

本节知识点:取值的方法、获取物体的属性、基本算法符号、基本判断符号、满足条件符号、保留后几位小数、判断字符串的长度

1、取值的方法 
给某个物体取名叫a,获取a的值如下: {{a}}
  查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

本节知识点:取值的方法、获取物体的属性、基本算法符号、基本判断符号、满足条件符号、保留后几位小数、判断字符串的长度

1、取值的方法 
给某个物体取名叫a,获取a的值如下: {{a}}
 
2、获取物体的属性 
{{a.top}}   上坐标 
{{a.left}}  左坐标 
{{a.height}}  物体的高 
{{a.width}}   物体的宽 
{{a.text}}     字符
 
举例:如何让文本框获取到物体的上坐标?具体步骤如下: 
给方块命名为“A”,文字框命名为“T”,如图:
1.jpg

 
给方块添加改变元素属性行为,触发条件为出现,如图:
2.jpg

 
进入编辑设置相关参数,取值{{a.top}},如图:
3.jpg

注:给物体命名可以是中文的,但是符号一定要在英文状态下输入
 
3、基本算法符号 
+  加 
-  减 
*  乘  
/  除 
== 等于 
‘’ 字符串(注意:是英文状态下的引号)
 
4、基本判断符号 
>  大于 
<  小于 
!= 不等于
 
举例:iPhone解锁效果,具体步骤如下: 
在舞台上绘制滑动条和解锁块,给解锁块在右侧属性中添加“水平拖动”和“结束时复位”,如图:
4.jpg

 
给解锁块命名为“a”,并给它添加跳转到“下一页”的行为,触发条件是“属性改变”,设置的参数应该写成{{a.left}}>210,即当解锁块的左坐标大于210的时候,就会跳到第二页,如图:
5.jpg

 
5、满足条件符号 
||  或 
&& 同时满足
 
举例:{{a.text}}==’2’||{{b.text}}==’6’就翻页  
举例:小球a移动到方框b里就成功,表达式 {{a.top}} > {{b.top}} && {{a.left}} > {{b.left}} && ({{a.top}} + {{a.height}} < {{b.top}} + {{b.height}}) && ({{a.left}} + {{a.width}} < {{b.left}} + {{b.width}})
 
6、保留后几位小数 
~~  取整数 
{{a}}.toFixed(n)   a保留n位小数,当n=0时,取的是整数  
 
举例:用文本框获取运动圆球的上坐标,具体步骤如下:
给运动的圆球命名为”a”,在舞台上添加文本框,并让它关联圆球“a”的上坐标,默认是保留三位小数,如图:
6.jpg


实现效果,如图:
7.jpg


在舞台上新添加一个文本框t2,让它的值等于t,如图:
8.jpg


给t添加改变元素属性行为,触发条件为属性改变(注:哪个物体在动,就把行为添加在它那里),在参数设置里的取值填入{{t}}.toFixed(1),能实现保留一位小数的效果,如图:
9.jpg

 
注:如果要取整数,在参数设置里的取值填入{{t}}.toFixed(0) 或 ~~{{t}} 均可。  
 
取整数的另一种方法,在被控量【关联属性】前加”~~”,但适用于取整,如图:
10.jpg

 
7、'{{a}}'.length==n    判断字符串的长度 
 
举例,输入框不能输入6个字以上,超出则会弹出提示,具体步骤如下:  
给输入框命名“a”,给提示语命名”b”,提示语默认的透明度为0,如图:
11.jpg

 
给输入框添加改变元素属性行为,触发条件是“属性改变”,设置参数'{{a}}'.length>5,如图:
12.jpg



           

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

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

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

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




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




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

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

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

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

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

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

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

【直播课】4.24-4.28,Mugeda直播课表

培训教程songyue 发表了文章 • 3 个评论 • 5204 次浏览 • 2016-11-11 17:45 • 来自相关话题

(点击查看大图)
 
点此报名,报了名后才能听课哦。
 
PS:本课程提供录播,方便大家复习使用;

 

 

4.24大课表_.png


(点击查看大图)
 
点此报名报了名后才能听课哦。
 
PS:本课程提供录播,方便大家复习使用;

 

 

【案例教程】Word 天,《天猫双十一宇宙邀请函》原来用Mugeda就可以做!

培训教程songyue 发表了文章 • 0 个评论 • 2714 次浏览 • 2016-10-28 14:37 • 来自相关话题

上周末天猫出了个H5神作,不知道你看了没:









 
天猫有钱有人力,玩得转设计,加得了代码,那普通宝宝怎么办?Mugeda案例课程这次就以《天猫双十一宇宙邀请函》为例,为大家揭秘不用代码而用Mugeda该怎么做。
 
案例学习:《天猫双十一宇宙邀请函》




课程时长:1小时  查看全部
上周末天猫出了个H5神作,不知道你看了没:

IMG_3399_副本.png

双十一_副本.png

 
天猫有钱有人力,玩得转设计,加得了代码,那普通宝宝怎么办?Mugeda案例课程这次就以《天猫双十一宇宙邀请函》为例,为大家揭秘不用代码而用Mugeda该怎么做。
 
案例学习:《天猫双十一宇宙邀请函》
微信-双11.jpg

课程时长:1小时 
知识点:关联动画结合逻辑判断,制作超炫景深透视效果。  
课程形式:随到随听
 
点击这里开始学习

2.2.12 素材与媒体:粘贴第三方文字和图片

培训教程songyue 发表了文章 • 0 个评论 • 3524 次浏览 • 2016-10-09 16:23 • 来自相关话题

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

 复制粘贴以及拖拽添加图片功能已经更新到beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。
 
1、现在可以直接将剪切板的文字添加到物体。操作方法是:在任意应用中用C 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。

 复制粘贴以及拖拽添加图片功能已经更新到beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。
 
1、现在可以直接将剪切板的文字添加到物体。操作方法是:在任意应用中用Ctrl+C(或者等效的菜单操作)将一段文字复制到剪切板,然后在Mugeda IDE中用Ctrl+V即可将该文字粘贴成一个文本对象;
 
2、现在可以直接将剪切板的图片添加到物体。操作方法是:在任意应用中用Ctrl+C(或者等效的操作,例如QQ的屏幕截屏)将一张图片复制到剪切板,然后在Mugeda IDE中用Ctrl+V即可将图片在“选择图片”对话框中打开并准备上传;
99.png

 
3、可以直接将文件拖动到舞台并放下,即可打开上传图片对话框并上传图片;
999.png

 
相关教学视频本周会上线,请留意论坛和群内消息哟~

2.2.11 素材与媒体:虚拟现实/全景组件的用法

培训教程songyue 发表了文章 • 8 个评论 • 6340 次浏览 • 2016-10-09 16:13 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 虚拟现实场景组件已经更新到beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。  
 点击查看全景演示
 
本节视频教程请点击此处。

简介: 
虚拟现实场景组件,可以用来显示360度全景图片,并添 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 虚拟现实场景组件已经更新到beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。  
 点击查看全景演示
 
本节视频教程请点击此处。

简介: 
虚拟现实场景组件,可以用来显示360度全景图片,并添加热点进行交互。  
 
具体教程: 
1、添加组件 
虚拟现实场景组件通过工具栏的“虚拟现实场景”图标添加:
1.png

 
在画布上拖动鼠标画出组件的位置。松开鼠标后,即可进入编辑场景图片的界面。
2.png

 
插入场景图片时,注意图片格式,规定如下:
L.png

 
选择图片后,会出现更多的编辑选项,各区域说明如下图所示:
A.png

 
1) 场景预览区:这里可以看到载入的图片渲染的场景效果,可以用鼠标拖动进行全景浏览; 
2) 场景列表区:显示所有添加的场景,可以对场景添加、删除、编辑、排序; 
3) 热点和场景编辑:用来切换热点和场景;
4) 全局配置:用来设置导航条以及导航条中出现的条目的选择;
 
很多编辑区域均配有即时帮助:
B.png

 
2、编辑场景 
场景具有如下属性:   
1) 图片:即全景的导入图片,支持等距长方投影和三维六面贴图两种格式; 
2) 预览图:在全景载入之前的一个小尺寸图片,可选; 
3) 缩略图:如果选择显示导航条,缩略图会显示在导航条上提示用户,尺寸是64*64; 
4) 标题:每一个场景的名称,会显示在导航条上;
 
3、热点编辑 
点击“热点”标签可以切换到热点编辑模式。在热点编辑模式下,可以添加、删除、移动热点,并未热点指定图形、动画和行为。   
 
击热点列表下的添加图标,可以进入热点添加模式。
C.png

 
进入热点添加模式后,加号图标会变成橙色提醒用户。
123.jpg

 
在热点添加模式下,在场景预览区域点击即可添加新的热点。
D.png

 
点击热点列表中的任一热点,可以在列表中和预览窗口中定位热点,便于识别。
E.png

 
每个热点可编辑的属性有:   
1) 热点名称:用于区分和识别不同热点的名称; 
2) 图标:显示在场景中的图标; 
3) 尺寸:图标的显示大小; 
4) 行为:点击热点后激活的行为; 
5) 操作:对行为进行编辑或者删除热点;  
 
具体说明两点:图标和行为。
 
3、热点图标和行为 
3.1 热点图标 
热点图标Mugeda提供预置的图标,如图:
F.png

 
以外,用户可以上传任意的图片作为热点图标,在“+”位置添加,如图:
G.png

 
并指定相应的尺寸即可,如图:
H.png

 
3.2 热点行为 点击热点后,可以触发一系列的行为。该操作和为物体添加行为类似。
I.png

 
注意“切换虚拟现实场景”行为。这个行为允许用户在点击热点后进行场景和热点切换。切换时,需要指定场景名称和热点名称。其中,热点名称可选,如果不指定,切换场景后会切换到预览窗口所显示的区域。
J.png

 
4、场景属性
222.jpg

 
1) 显示导航:在屏幕下方出现的导航条。当包含2个以上的场景时,建议选择; 
2) 允许陀螺仪控制:是否在导航条上显示陀螺仪控制的切换图标; 
3) 左右分离视角:是否在导航条上显示左右分离视角;这个目前比较小众,建议不选;
 
5、场景渲染 
场景渲染时,可以用鼠标或者手指拖动切换视。如果选择了显示导航,还会出现一个导航条提供进一步的选择包括:上一场景、显示缩略图、VR效果、收起导航栏、下一场景。
K.png

 
6、如何产生全景内容 
产生全景内容的方式有两种:   
1) 用可以产生全景内容的App
例如:Google Street View, Sphere, 百度圈景,等等。在苹果和安卓应用商店可以搜到。   
2) 用全景拍摄设备。这些设备从简单到专业有很多选择,例如Insta360在京东的旗舰店: http://insta360.jd.com/  
 
相关教学视频本周会上线,请留意论坛和群内消息哟~

【Mugeda新功能教程】缩放功能

培训教程songyue 发表了文章 • 3 个评论 • 4259 次浏览 • 2016-09-12 17:14 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 缩放功能分为两部分: 
1、舞台缩放:对舞台显示内容的缩放,这个不改变物体的实际大小,只是改变显示的大小; 
2、物体缩放:对物体的缩放,这个会改变物体的实际大小;   
 
1、舞台缩放 

舞台缩放功能位于舞台编辑区 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 缩放功能分为两部分: 
1、舞台缩放:对舞台显示内容的缩放,这个不改变物体的实际大小,只是改变显示的大小; 
2、物体缩放:对物体的缩放,这个会改变物体的实际大小;   
 
1、舞台缩放 

舞台缩放功能位于舞台编辑区域的右上角,并有一个实时帮助信息提示:
配图1.png

 
点击下拉框即可对舞台进行缩放。如果想要进行任意的缩放,可以点击键盘z键进入缩放模式,或者在屏幕左侧的工具栏上选择“缩放”工具。把鼠标放在“缩放”工具上,会弹出一个详细的缩放操作的说明。
配图2.png

 
同样的说明在缩放下拉框右侧也可以打开。
配图3.png

 
一些最常用的鼠标+键盘操作包括:   
在缩放模式下, 1) 点击鼠标放大,Alt+鼠标左键点击缩小; 2) Shift + 鼠标左键点击: 恢复100%缩放; 3) 拖动鼠标左键可以拖动舞台; 在任意情况下: 1) 按住空格键,左键拖动鼠标可以拖动舞台; 2) 右键拖动鼠标可以拖动舞台;   
 
缩放舞台并不会改变数据。只是对舞台进行了缩放和放大,便于查看和编辑。
 
2.、物体缩放 物体缩放的办法有两种: 
本节视频教程请点击此处。

1) 普通缩放:选中物体,然后进入缩放编辑(点击键盘Q,或者从左侧工具栏选择“变形”工具;
配图4.png

 
在变形模式下,选择物体,然后通过物体四周出现的控制块即可缩放物体;
配图5.png

 
2) 整层缩放:有时候,需要对一个或者多个层里的所有内容进行缩放。具体操作是:在时间线上选择需要进行缩放的层。选择层的方式是:用鼠标拖动选中想要缩放的层中的任意数目的时间单元即可:
配图6.png

 
选定层后,点击鼠标右键,从出现的菜单中选择“缩放层数据”:
配图7.png

 
在弹出的对话框中输入想要缩放的比例,例如2, 然后确定。这里需要注意的是,填入2就是放大两倍,填入0.2就是缩小两倍。
配图8.png

 
这时候,所选中的层中的所有物体都会按照指定的比例进行缩放。   
 
缩放物体时,物体的实际大小会发生改变。这个有别于缩放舞台。

【自学必备】最全面的Mugeda教程帖,哪里不会点哪里!

培训教程songyue 发表了文章 • 1 个评论 • 4130 次浏览 • 2016-09-09 14:43 • 来自相关话题

总有不少Mu友问“怎么声音出不来啦”、“怎么设置转发标题”、“怎么做测试题H5”?这些问题,Mugeda早就出教程了,快到下面找一找自学一下,点击课程名称,就可学习。  
 
 
一、基础教程(这个一定要看!不学会没法做作品的)
点击开始学习
 

二、直播课程




每周五会提前预告下周直播课 查看全部
总有不少Mu友问“怎么声音出不来啦”、“怎么设置转发标题”、“怎么做测试题H5”?这些问题,Mugeda早就出教程了,快到下面找一找自学一下,点击课程名称,就可学习。  
 
 
一、基础教程(这个一定要看!不学会没法做作品的)
点击开始学习
 

二、直播课程
大课表3.13_.png

每周五会提前预告下周直播课程,方便大家学习,并提供录播,点击报名
每周案例课回放,点击观看(需报名) 
每周功能课回放,点击观看(需报名)
 
 
三、案例教程:
1、【动画类】什么才是福
知识点:曲线变形动画、元件动画、控制元件
9824d6f4539542ddaa89b50bea4e8757.jpg

 
2、【长图拖动类】你玩过ROOM吗
知识点:背景拖动、关联动画、逻辑判断
510.png

 
3、【3D视角】小爷吴亦凡
知识点:陀螺仪、关联动画、视频使用 
510.jpg

 
4、【视频类】星巴克咖啡
知识点:序列帧动画、控制元件、表单制作
900星巴克.jpg

 
5、【小游戏类】拍出惊喜
知识点:随机数、逻辑判断、控制元件 
paipai.jpg

 
6、【课件类】化学课件制作
知识点:高级交互、控制元件、逻辑判断
900.jpg

 
7、【交互游戏类】谁是足球明星
知识点:陀螺仪、逻辑判断、高级交互
900谁是足球明星.jpg

 
8、【测试题类】猜猜他在吃什么? 
知识点:加载页、行为添加、逻辑判断 
900一号店.jpg

 
9、【新闻类】总理给你送快递
知识点:预置动画、元件动画、裁切组
900人民日报.jpg

 
10、【仿3D类】尚迪品牌宣传 
知识点:关键帧动画、元件动画、制作表单
900时尚.jpg

 
11、【展示类】设计师个人简历
知识点:加载页、添加行为、控制元件
900简历.jpg

 
12、【游戏类】G20小精灵GO
知识点:背景拖动、添加行为、逻辑判断
900g20.jpg

 
13、【设计类】UI动态图标设计 
知识点:元件动画、关键帧动画、预置动画
900-UI图标.jpg

 
14、【仿朋友圈类】CEO邀你群聊
知识点:关键帧动画、行为添加、Mugeda图形绘制
1080雷军邀请你_副本.jpg

 
15、【绘画板功能】里约大冒险
知识点:绘画板功能、元件动画、添加行为
微信-奥运小人.jpg


16、【超炫景深】天猫双十一宇宙邀请函
知识点:关联动画结合逻辑判断,制作超炫景深透视效果
微信-双11.jpg

 
17、【快闪】仿苹果7发布会超炫快闪
知识点:多种快闪的组合效果,用色块遮盖文字消失
腾讯用图-快闪.jpg

 
18、【小游戏】H5换装小游戏
知识点:手指拖动放下,及多种逻辑表达式的写法
腾讯-女生GDP.jpg

 
19、【视差类】视差类H5的制作
知识点:动画关联的用法
900.jpg




四、Mugeda新功能教程:
1、缩放功能
 
2、绘画板功能
 

3、虚拟现实场景组件
 
4、复制/粘贴/拖拽/添加图片
 
5、最新上线的小功能(1104更新) 
 
6、付费会员如何使用模板
 
7、如何在微信及网页展示已发布的作品
 

五、Mugeda(时时更新的图文版教学课程)
点击开始学习

【课程调查】7种类型的H5,你希望Mugeda案例课程讲什么?

培训教程songyue 发表了文章 • 9 个评论 • 1744 次浏览 • 2016-07-08 17:44 • 来自相关话题

每周三20:30,Mugeda都有直播的案例课程,围绕当下热门的一些H5案例做深入讲解。  
 
关于案例,班主任整理了几种类型,你更希望老师讲解哪种,请在评论区直接回复序号即可,如1、2、3,如果这几种都不是你的菜,也可以直接评论写下你的想法。  
 
班主任会根据大家的反馈,合理安排课程案例,具 查看全部
1.jpg

每周三20:30,Mugeda都有直播的案例课程,围绕当下热门的一些H5案例做深入讲解。  
 
关于案例,班主任整理了几种类型,你更希望老师讲解哪种,请在评论区直接回复序号即可,如1、2、3,如果这几种都不是你的菜,也可以直接评论写下你的想法。  
 
班主任会根据大家的反馈,合理安排课程案例,具体类型如下:
 
1.    类型一:游戏类 
 
2.    类型二:视频类 
 
3.    类型三:活动类 
 
4.    类型四:品牌宣传类 
 
5.    类型五:答题类

Mugeda直播课程

培训教程mingyue 发表了文章 • 2 个评论 • 2322 次浏览 • 2016-06-20 16:36 • 来自相关话题

 [新手集训班]
 
快速入门+问题答疑(每周一至周五,下午15:00——16:00)
 
快速入门:Mugeda老师为新注册的同学介绍木疙瘩的功能和简单的案例讲解。之后的30分钟时问题解答时间,所有的Mugeda同学都可以来直播间提问,老师屏幕演示,帮您快速解答问题。(强烈建议大家每天都来哦)么么 查看全部
直播.png

 [新手集训班]
 
快速入门+问题答疑(每周一至周五,下午15:00——16:00)
 
快速入门:Mugeda老师为新注册的同学介绍木疙瘩的功能和简单的案例讲解。之后的30分钟时问题解答时间,所有的Mugeda同学都可以来直播间提问,老师屏幕演示,帮您快速解答问题。(强烈建议大家每天都来哦)么么哒。
 
 
[高手训练营]
 
精选案例讲解(每周三晚上20:30——21:30)
 
Mugeda老师每周都会精选一些热门的H5为大家讲解。(千万不可错过哦)
 
特别提示:直播课程是免费的,但是想看回播,录播是需要单独收费呢。

[更新]Mugeda案例视频教程

培训教程mingyue 发表了文章 • 2 个评论 • 3179 次浏览 • 2016-06-20 16:35 • 来自相关话题

Mugeda案例视频教程
 
[案例八]谁是足球明星 






[案例七]用HTML5做交互课件






[案例六]拍拍,拍出惊喜





 
[案例五]星巴克,有你才温暖
 




 
[案例四]小爷吴亦凡,凡心所向






 
[案例三]什么,才是福?






查看全部

Mugeda基础视频教程

培训教程mingyue 发表了文章 • 1 个评论 • 4770 次浏览 • 2016-06-20 16:33 • 来自相关话题

 第一章 平台简介及案例展示

简介及案例展示
 
第二章 快速入门

一分钟制作H5
进度动画
添加声音和视频
关键帧动画
路径动画和元件动画
交互和变形动画
添加电话/链接/地图
设置分享信息/加载界面/发布作品
 
第三章 常用功能详解

声音的灵活运用
视频的灵活运用
制作表单与数据统计功能 查看全部
111.jpg

 第一章 平台简介及案例展示

简介及案例展示
 
第二章 快速入门

一分钟制作H5
进度动画
添加声音和视频
关键帧动画
路径动画和元件动画
交互和变形动画
添加电话/链接/地图
设置分享信息/加载界面/发布作品
 
第三章 常用功能详解

声音的灵活运用
视频的灵活运用
制作表单与数据统计功能介绍
幻灯片和网页链接
擦玻璃/画布/点赞
 
第四章 动画功能详解

关键帧动画和路径动画
进度动画
变形动画
遮罩动画
元件动画
 
第五章 无代码交互功能详解

播放与暂停
摇一摇/随机跳转/禁止翻页
手指按下和手指抬起
播放元件片段
定制图片和录制声音
关联和关联动画
定时器
随机数
陀螺仪
自定义分享信息
逻辑判断
 
第六章 实战训练-制作可定制贺卡

制作动画
定制内容
 
网易云课堂(如果你有网易账号,也可以在这里学习)