问题答疑

问题答疑

提出您在创作作品时遇到的问题和疑惑
培训教程

培训教程

线上直播、线下培训、视频教程
原创分享

原创分享

分享您的原创作品,创作经验,操作技巧
BUG反馈

BUG反馈

反馈您在使用Mugeda时遇到的BUG
新功能需求

新功能需求

写下您期待Mugeda增加的新功能

​1.4.1 快速入门:H5作品相关设置-加载、文档信息

mingyueliu 发表了文章 • 0 个评论 • 3713 次浏览 • 2016-09-18 17:12 • 来自相关话题

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

 方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否





图1.2-67

设置颜色:点击有颜色的正方形方框,在出现 查看全部

 

 方法一:在操作页面右侧的“加载”面板里设置加载页面属性。如下图,设置加载样式:进度条;提示文字:“正在加载……”;文字大小:12;动态文字:否

1.2-67_.png

图1.2-67

设置颜色:点击有颜色的正方形方框,在出现的颜色框内选取自己想要的颜色。也可以按住Alt键,鼠标在舞台上选取某一颜色。

1.2-68_.png

图1.2-68

添加加载页面图片:点击“背景图片”“前景图片”右侧“+”标志,在弹出的“媒体库”中选择自己想要的图片素材。

1.2-69_.png

图1.2-69

改变“图片宽度”为100像素(等比例缩放),点击保存、预览。

1.2-70_.png

图1.2-70

方法二:点击第1页面左上角的绿色“+”标志在第1页面前插入一个新页面

1.2-71_.png

图1.2-71

在新首页添加一张图片素材

1.2-72_.png

图1.2-72

在右侧“加载”面板里将样式设为“首页作为加载页面”,点击预览,即首页为加载页面。

1.2-73_.png

图1.2-73
 
编辑文档信息
 
点击“文件”→“文档信息”

1.2-74_.png

图1.2-74

在弹出的“文档信息选项”对话框填写信息,如下图所示,填写转发标题:“来!摇个配偶吧!”;转发描述:“你会摇中谁来当配偶”;导出名称:“单身狗相亲”,点击“选择文件”选择预览图片,点击“确认”,并保存。

1.2-75_.png

图1.2-75
 
以下操作素材可通过:“素材库——新手入门素材”中找到。

1.3 快速入门:快速制作一个摇一摇随机出现结果的H5测试题

mingyueliu 发表了文章 • 1 个评论 • 7115 次浏览 • 2016-09-18 16:49 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
 
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。

上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景 查看全部

 
 
无代码添加交互功能
本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。以下操作素材可通过:“素材库——新手入门素材”中找到。

上传、添加动画:如下图所示,新建作品,进入操作页面。上传、添加背景图片、文字等素材,同时新建第2页,添加与第1页相同素材。
注:第1页素材可添加进一个图层内,为方便设置关键帧动画,第2页应注意新建图层,将每个素材分别添加进一个图层内。

1.2-41_.png

图1.2-41

添加预置动画:选中第1页面,为舞台上的各个素材添加预置动画效果,如下图所示,为图片“摇一摇”素材添加“放大进入”进入动画效果

1.2-42_.png

图1.2-42

为文字“摇一摇”素材添加“颤抖”强调动画效果

1.2-43_.png

图1.2-43

为其他说明文字素材添加“蹦入”进入动画效果,在“动画选项”对话框内改变延迟时间为1.5秒

1.2-44_.png

图1.2-44
1.2-45_.png

图1.2-45

如下图所示,选中第2页面,为图层1、2(分别放置了“摇一摇”上下两部分图片素材)添加“插入关键帧动画”

1.2-46_.png

图1.2-46

选中图层2时间轴上最后一个关键帧,鼠标在舞台上将该图层上物体,即“摇一摇”上部分图片素材移至舞台上方

1.2-47_.png

图1.2-47

同理选中图层1时间轴上最后一个关键帧,将“摇一摇”下部分图片素材移至舞台下方,做出“摇一摇”图片上下分开的动画效果

1.2-48_.png

图1.2-48

点击“播放”按钮,可在舞台上查看动画效果

1.2-49_.png

图1.2-49

设置打开时有类似回弹的动画效果,可选中“摇一摇”上部分图片素材,在其“属性面板”下设置“运动”为“碰撞进入”。同理设置“摇一摇”下部分图片素材运动效果。

1.2-50_.png

图1.2-50

复制页面:复制两次第2页面为第3、4页面。
替换图片素材:选中第3页面,选中人物图片素材,点击“属性面板”中的图像“编辑”按钮

1.2-51_.png

图1.2-51

在弹出的“媒体库”中选择相应图像替换该图像。

1.2-52_.png

图1.2-52

同理,替换人物名字素材

1.2-53_.png

图1.2-53

同理,选中第4页面,替换人物图像素材与相应名字素材

1.2-54_.png

图1.2-54
添加“禁止翻页”动画:选中第1页面,选中舞台上的“摇一摇”文字素材,点击其右边的“添加/编辑行为”按钮(橘黄色圆圈按钮)

1.2-55_.png

图1.2-55

弹出“编辑行为”对话框,选择“动画播放控制”→“禁止翻页”,设置“触发条件”为“出现”

1.2-56_.png

图1.2-56
继续添加“编辑行为”,选择“动画播放控制”→“跳转到页”,点击“编辑”按钮,弹出“参数”对话框

1.2-57_.png

图1.2-57

设置参数值:页号:2;3;4(英文输入方式),点击“确认”,即设置点击“摇一摇”文字素材即可随机跳转到2、3、4页的动画效果。

1.2-58_.png

图1.2-58

设置“跳转到页”动画效果:点击选中第2页面左上角“返回”文字素材,点击该素材“添加/编辑行为”

1.2-59_.png

图1.2-59

在“编辑行为”对话框中,添加“跳转到页”行为,点击“编辑”按钮,设置“参数值”为“页号”:1

1.2-60_.png

图1.2-60
1.2-61_.png

图1.2-61

复制粘贴行为:点击第2页面“返回”文字素材,鼠标右键→“复制行为”

1.2-62_.png

图1.2-62

选中第3页面“返回”文字素材,鼠标右键→“粘贴行为”,即将第2页面该素材行为复制粘贴进第3页面响应的素材内。同理复制粘贴行为至第4页面“返回”文字素材

1.2-63_.png

图1.2-63

:由于摇一摇动作不能在电脑端体验,因此为方便直观感受之前操作都将“摇一摇”素材触发条件设为“点击”,现将其改回“摇一摇”。
改变“摇一摇”文字素材触发条件:点击选中第1页面的“摇一摇”文字素材,点击“添加/编辑行为”按钮

1.2-64_.png

图1.2-64

在其“跳转到页”的触发条件中,将“点击”改为“摇一摇”,点击保存。

1.2-65_.png

图1.2-65

二维码扫描:点击“通过二维码共享”按钮,用手机扫描生成的二维码,体验作品。

1.2-66_.png

图1.2-66
 

1.2.5 快速入门: 添加背景音乐

mingyueliu 发表了文章 • 9 个评论 • 6127 次浏览 • 2016-09-18 16:37 • 来自相关话题

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

本节视频教程请点击此处。  
 
添加背景音乐

1)    方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮





图1.2-34

在弹出的“导入声音”对话框中点击“选择文件”按钮


查看全部


本节视频教程请点击此处。  
 
添加背景音乐

1)    方法一:选中作品第1页面,在“属性栏“内的背景音乐中,点击“上传”按钮

1.2-34_.png

图1.2-34

在弹出的“导入声音”对话框中点击“选择文件”按钮

1.2-35_.png

图1.2-35

选择音乐文件

1.2-36_.png

图1.2-36

上传自己所选的音乐文件,点击“添加”按钮

1.2-37_.png

图1.2-37

将添加至舞台的音乐图标移至舞台之外即可。

1.2-38_.png

图1.2-38

调节背景音乐属性:选中舞台上的背景音乐素材,在其“属性栏”内设置自动播放、循环播放。

1.2-39_.png

图1.2-39

2)    添加背景音乐方法二:点击“工具栏”内的“声音”按钮,在弹出的“导入声音”对话框中上传音乐素材。

1.2-40_.png

图1.2-40
 

1.2.4 快速入门:制作翻页动画

mingyueliu 发表了文章 • 0 个评论 • 3999 次浏览 • 2016-09-18 16:24 • 来自相关话题

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

制作翻页动画

添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。





图1.2-26

复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。





图1 查看全部

 

制作翻页动画

添加新页面:点击“添加新页面”按钮,可添加一个新空白页面。

1.2-26_.png

图1.2-26

复制页面:点击“复制页面”按钮,可复制一个与上页面完全相同的页面,包括素材及其动画效果。

1.2-27_.png

图1.2-27

替换背景图片:选中复制的第2页,选中舞台上的背景图片素材,点击属性栏内的“编辑”按钮,在弹出的“媒体库”对话框中选择要更替的图片素材,点击“添加”按钮,替换原有图片。

1.2-28_.png

图1.2-28
1.2-29_.png

图1.2-29

同理复制第3页面,替换背景图片。点击保存并预览效果。

1.2-30_.png

图1.2-30

:若在预览中出现某素材动画效果不断循环重复的情况,可在上方菜单栏选择“动画”→去掉“循环”效果。

1.2-31_.png

图1.2-31
1.2-32_.png

图1.2-32

制作翻页效果:在“翻页”菜单栏内设置翻页属性。
  • 翻页效果:三维翻转;
  • 退出效果:无;
  • 翻页方向:左右翻页;
  • 循环:是;
  • 翻页时间:600毫秒;
  • 保存并预览效果。


1.2-33_.png

图1.2-33
以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.3 快速入门:在时间轴上制作关键帧动画

mingyueliu 发表了文章 • 2 个评论 • 4949 次浏览 • 2016-09-18 16:17 • 来自相关话题

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


快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。





图1.2-15

剪切、复制物 查看全部

 


快速入门:在时间轴上制作关键帧动画
删除预置动画:选中某一物体,点击右边的“编辑预置动画”按钮,在弹出的“动画选项”对话框内选择“删除”按钮,删除该元素预置动画效果。

1.2-15_.png

图1.2-15

剪切、复制物体:点击选中logo素材,右键→剪切

1.2-16_.png

图1.2-16
新建图层:如下图点击“新建图层”按钮,新建一个图层。鼠标选中新建图层第1帧空白帧,在舞台上右键→粘贴,将Logo素材粘贴进新图层中。

1.2-17_.png

图1.2-17

插入帧:鼠标拖动同时选中两个图层的第15帧(可自主调节帧数),右键→“插入帧”

1.2-18_.png

图1.2-18

插入关键帧动画:鼠标选中图层1第1帧,将其向后拖动至第7帧(可自主调节帧数),右键→“插入关键帧动画”

1.2-19_.png

图1.2-19
1.2-20_.png

图1.2-20

插入关键帧:选中图层1第11帧,右键→“插入关键帧”,同理在第12、13、14帧插入关键帧。

1.2-21_.png

图1.2-21
1.2-22_.png

图1.2-22

制作进入动画:选中图层1上物体所在首帧,即第7帧,按住Shift键,鼠标将Logo素材拖至舞台上方之外

1.2-23_.png

图1.2-23

选中图层1第12帧,按住Shift键,按一下键盘下滑键,将Logo素材向下移动一点距离,同理,选中第14帧,将Logo素材向上移动一点距离,制作出进入后上下摆动的动画效果。点击“预览”观察效果。

1.2-24_.png

图1.2-24

保存作品:点击“保存”按钮,在弹出的“保存”对话框中将作品命名为“玩转H5”,点击“保存”。

1.2-25_.png

图1.2-25

以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.2 快速入门:添加预置动画

mingyueliu 发表了文章 • 1 个评论 • 4085 次浏览 • 2016-09-18 16:01 • 来自相关话题

  想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
快速入门:添加预置动画

 鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。



查看全部

 
本节视频教程请点击此处。
 
快速入门:添加预置动画

 鼠标选中“选择”工具,点击舞台上“玩转H5”素材右边“添加预置动画”按钮(红色圆圈按钮),
弹出“添加预置动画”对话框,选择“翻转进入”动画效果。

1.2-8_.png

图1.2-8
1.2-9_.png

图1.2-9

以相同方式为舞台上其他两个素材添加预置动画效果。可点击“预览”按钮,观察动画效果。

1.2-10_.png

图1.2-10

调整预置动画时间:我们发现,此时三个素材的动画都是同时出现的,接下来要调整预置动画出现时间,使其有个先后顺序。点击“玩转H5”素材右边的“编辑预置动画”按钮(蓝色圆圈按钮),在弹出的“动画选项”对话框中,调整动画出现属性:时长1.5秒;延迟0秒;顺时针;

1.2-11_.png

图1.2-11
1.2-12_.png

图1.2-12

同理,如下图分别调整文字、Logo两个其他素材的预置动画属性:

1.2-13_.png

图1.2-13
1.2-14_.png

图1.2-14

注:预置动画是Mugeda根据大众需求在自己的框架里设置好的动画效果,这些动画效果同样也可使用关键帧来实现。但二者不可同时出现。
 
以上操作素材可通过:“素材库——新手入门素材”中找到哦

1.2.1 快速入门:上传、添加素材

mingyueliu 发表了文章 • 0 个评论 • 5129 次浏览 • 2016-09-18 15:56 • 来自相关话题

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

 创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。





图1.2-1

上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所 查看全部

 

 创建作品:登陆账号,在“动画作品”→“我的作品”页面点击“创建作品”进入一个新的操作页面。

1.2-1_.png

图1.2-1

上传素材:在“工具栏”中选择“图片”按钮,弹出“上传图片”对话框,点击“选择文件”,打开素材所在的文件夹,选择所要上传的图片。

1.2-2_.png

图1.2-2

1.2-3_.png

图1.2-3

如下图,点击“上传”按钮,上传所选图片。上传成功后,点击“选择”按钮,将图片成功放置舞台,作为作品背景。

1.2-4_.png

图1.2-4

:上传成功后的素材可在“媒体库”中找到。点击“素材库”按钮,在弹出的“媒体库”对话框中,“私有”菜单下的“default”文件夹即是存储新上传素材位置。同时,也可在“媒体库”中点击“+”标志上传新素材。

1.2-5_.png

图1.2-5

添加素材:在“媒体库”中找到已上传好的素材。如下图,在“共享组”下的“新手入门素材·平台”中选择图片素材(“玩转H5”图片、文字、Logo三个素材),点击“添加”按钮添加至舞台。

1.2-6_.png

图1.2-6

调整素材:点击选择“变形”工具,调整舞台上素材的大小与位置。

1.2-7_.png

图1.2-7
 
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

Mugeda百科全书——文本教程目录

mingyueliu 发表了文章 • 20 个评论 • 41383 次浏览 • 2016-09-18 15:01 • 来自相关话题

一、新手必看
 
1、快速入门

1.1 Mugeda是什么?
1.2.1 快速入门:上传、添加素材
1.2.2 快速入门:添加预置动画
1.2.3 快速入门:在时间轴上制作关键帧动画
1.2.4 快速入门:制作翻页动画
1.2.5 快速入门: 添加背景音乐
1.3 快速入门:快速制作一个摇一摇随机 查看全部
默认标题_自定义px_2018.09_.03_.png


一、新手必看
 
1、快速入门

1.1 Mugeda是什么?
1.2.1 快速入门:上传、添加素材
1.2.2 快速入门:添加预置动画
1.2.3 快速入门:在时间轴上制作关键帧动画
1.2.4 快速入门:制作翻页动画
1.2.5 快速入门: 添加背景音乐
1.3 快速入门:快速制作一个摇一摇随机出现结果的H5测试题
​1.4.1 快速入门:H5作品相关设置-加载、文档信息
1.4.2 快速入门:发布作品
​1.5 快速入门:学会使用Mugeda模板
​1.6 快速入门:导出视频和GIF动画的相关规则

2、作品创建前必读 

1.6.1 作品创建前必读:手机屏幕适配方法
1.6.2 作品创建前必读: 图片的处理
1.6.3 作品创建前必读: 声音及视频处理
1.6.3 作品创建前必读: 移动端H5页面音频/视频规范
 
二、功能详解
 
1、Mugeda界面与舞台
 
​2.1.1 Mugeda界面与舞台:界面概览
2.1.2 Mugeda界面与舞台:菜单栏
2.1.3 Mugeda界面与舞台:快捷工具栏
2.1.4 Mugeda界面与舞台:时间轴
2.1.5 Mugeda界面与舞台:工具条 
​2.1.6 Mugeda界面与舞台:页面栏
2.1.7 Mugeda界面与舞台:什么是舞台?
2.1.8 Mugeda界面与舞台:属性面板

2.  素材与媒体

2.2.1 素材与媒体:图片/图片序列/GIF/PNG/SVG/JPG等
2.2.2 素材与媒体:文本/富文本
2.2.3 素材与媒体:网页
2.2.4 素材与媒体:幻灯片
2.2.5 素材与媒体:视频
2.2.6 素材与媒体:声音
2.2.7 素材与媒体:绘制素材
2.2.8 素材与媒体:云字体
2.2.9 素材与媒体:可视化图表
2.2.10 素材与媒体:建组 、裁剪组​
 
3:动画
 
2.3.1 动画:时间轴以及图层 
2.3.2 动画:选择工具
2.3.3关键帧动画   
2.3.4 动画:路径动画
2.3.5 动画:进度动画   
2.3.6 动画:变形动画
2.3.7 动画:预置动画 
2.3.8 动画:元件动画
2.3.9 动画:分页/加载页
2.3.10 动画:遮罩
2.3.11 动画:动画运动
 
4:行为     

2.4.1 行为:行为添加以及触发事件
2.4.2 行为:帧的行为
2.4.4 行为:播放元件片段
2.4.5 行为:改变元素属性
2.4.6 行为:改变图片
2.4.7 行为:设置定时器
2.4.8 行为:手机事件
2.4.9 行为:视频控制
2.4.10 行为:声音控制
2.4.11 行为:录制声音
2.4.12 行为:选择上传图片
2.4.13 行为:修改图表数据
2.4.14 行为:提交表单
2.4.15 行为:定义分享信息
 
5、控件

2.5.1 行为:陀螺仪
2.5.2 行为:定时器
2.5.3 行为:随机数
2.5.4 行为:擦玻璃
2.5.5 行为:绘画板功能
2.5.6 行为:点赞

6:微信功能 

2.6.1 微信功能:微信头像
2.6.2 微信功能:微信昵称
2.6.3 微信定制:定制图片
2.6.4 微信定制:录制用户声音
2.6.5 微信功能:定义分享信息
 
7:表单

2.7.1 表单:输入文字(输入框)
2.7.2 表单:单选框
2.7.3 表单:多选框
2.7.4 表单:下拉菜单(列表框)
2.7.5 表单:表单提交
2.7.6 表单:默认表单/定制文字
2.8.1 关联绑定:动画关联
2.8.2 关联绑定:属性关联
2.8.3 关联绑定:自动关联
 
9、API

2.9.1 【API的应用】在动画中添加代码
2.9.2 【API的应用】Mugeda API的整体结构
2.9.3 【API的应用】Mugeda对象
2.9.4 【API的应用】scene对象
2.9.5 【API的应用】aObject对象
2.9.6 【API的应用】工具API
2.9.7 【API的应用】获取Mugeda后台数据
 
10、判断

2.10.1 判断:条件判断
2.10.2 判断:逻辑表达式判断

三:案例讲解
 
1、展示动画

3.1.1 【展示动画】邀请函
3.1.2 【展示动画】招聘
3.1.3 【展示动画】简历
3.1.4 【展示动画】贺卡
3.1.5 【展示动画】公司广告
3.1.6【展示动画】长按手指控制动画播放 
3.1.7【展示动画】2016网易娱乐圈画传 
3.1.8【展示动画】一只挖空心思的行礼箱 
3.1.9【展示动画】科幻风格H5的制作
3.1.10【展示动画】拖动长图类H5制作
3.1.11【展示动画】小爷吴亦凡

2、UI原型
 
3.2.1【UI原型】图标动效
3.2.2 【UI原型】用Mugeda巧做GIF

 3、小游戏
 
3.3.1 【游戏测试】手速测试
3.3.2 【游戏测试:】手术刀
3.3.3 【游戏测试】选择题
3.3.4 【游戏测试:】随机测试
 
4、微信定制
 
3.4.1 【微信定制 】和宝宝聊天
3.4.2 【微信定制 】和奥运冠军合影

5:热门案例      

3.5.1:【H5案例课】接东西小游戏H5
3.5.2:【H5案例课】拍拍员工被玩坏了
3.5.3:【H5案例课】交互动画类H5制作
3.5.4:【H5案例课】什么,才是福
3.5.5:【H5案例课】VR扫红包
3.5.6:【H5案例课】H5版Flappy Bird
3.5.7:【H5案例课】H5酷炫特效制作
3.5.8:【H5案例课】跳一跳小游戏
3.5.9:【H5案例课】连连看H5小游戏
3.5.10:【H5案例课】求职H5简历
3.5.11:【H5案例课】世界名画抖抖抖起来了
3.5.12:【H5案例课】教你做魔性H5弹幕
3.5.13:【H5案例课】画一个小人
3.5.13:【H5案例课】剪刀石头布小游戏
3.5.14:【H5案例课】足球小游戏
3.5.15:【H5案例课】房地产楼书H5制作
3.5.16:【H5案例课】在H5中插入“直播+弹幕”
3.5.17:【H5案例课】换装小游戏
3.5.18:【H5案例课】接东西H5小游戏
3.5.18:【H5案例课】天猫双十一宇宙邀请函
3.5.19:【H5案例课】重力感应类H5
3.5.20:【H5案例课】教你玩转密室逃脱类H5
3.5.21:【H5案例课】快闪制作
3.5.22:【H5案例课】交互视频类H5
3.5.23:【H5案例课】制作局部镜头特效
3.5.24:【H5案例课】测试题类型H5

更多课程持续更新中……

四:新功能教程

4.1.1【新功能教程】缩放功能
4.1.2【新功能教程】复制/粘贴/拖拽/添加图片
4.1.3【新功能教程】虚拟现实场景组件
4.1.4【新功能教程】最新上线的小功能
4.1.5【新功能教程】拖动组件的运用
4.1.6【新功能教程】连线题的制作
4.1.7【新功能教程】投票组件的使用
4.1.8【新功能教程】辅助线功能 
4.1.9【新功能教程】改变行为属性增加边框颜色和填充色 
4.1.10【新功能教程】滤镜效果 
4.1.11【新功能教程】首页加载的静态导出 
4.1.12【新功能教程】投票、抽奖实时数据管理 
4.1.13【新功能教程】文字变形动画 
4.1.14【新功能教程】运动曲线编辑
4.1.15【新功能教程】计数器组件 
4.1.16【新功能教程】屏幕适配范围与安全框
4.1.17【新功能教程】VR全景视频​
4.1.18【新功能教程】视频的跳转并播放功能(精确到秒)​

 
关于付费及发票
 
六:常见问题   ( Mu友友情贡献​)

【代码分享】显示前一个人的微信头像                               作者:zgs
【代码分享】VR功能实现GIF热点,获取VR坐标的功能         作者:zgs
【使用前必看】素材资源一贴整合(图片、声音、视频)       作者:mugedacn
【代码分享】三级菜单下拉框                                           作者:zgs
【代码分享】在mugeda内实现视频直播的方法                   作者:zg
【高级互动】如何用木疙瘩做游戏?                                 作者:Total恺 
查看定制的图片地址                                                      作者:zhongyue
转发后保留文本内容                                                      作者:zhongyue
使用回调函数跳转链接以及弹出默认系统提示                     作者:zhongyue
分享后的行为代码                                                         作者:zhongyue
【代码入门】如何在mugeda中,实现H5作品和外部 网页之间实现数据连接   作者:qq1f07c
如何在mugeda上无代码实现倒计时(天、时、分、秒)                             作者:qq1f07c
使用回调函数跳转链接以及弹出默认系统提示                                           作者:zgs
两种在标题中显示数量的方法(在作品中实时获取浏览量信息的方法)          作者:zgs
【代码分享】贴边UI功能!                                                                   作者: Total恺 
如何导入超过20M的视频文件/如何使用视频分享通用代码?                       作者: lian007 
【代码分享】倒计时代码                                                                      作者: lx_mgd
如何自定义绑定微信公众号                                                                   作者:zgs












点击这里学习Mu友提供的实用攻略


2.9.6 API的应用:工具API

mingyue 发表了文章 • 1 个评论 • 6456 次浏览 • 2016-09-07 13:58 • 来自相关话题

微信转发

在微信中,经常需要定义微信转发的标题、描述、转发地址。除了在IDE的文档信息中填写这些信息以外,还可以通过代码动态的更改这些值,代码如下:





 
上述函数可以多次调用,每调用一次,用新值覆盖旧值。上述4个参数可以省略1~3个。

信息提示

Mugeda渲染器提供通用的信息提示 查看全部
微信转发

在微信中,经常需要定义微信转发的标题、描述、转发地址。除了在IDE的文档信息中填写这些信息以外,还可以通过代码动态的更改这些值,代码如下:

11.png

 
上述函数可以多次调用,每调用一次,用新值覆盖旧值。上述4个参数可以省略1~3个。

信息提示

Mugeda渲染器提供通用的信息提示函数,代码如下:

22.png


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.9.5 API的应用:aObject对象

mingyue 发表了文章 • 1 个评论 • 4143 次浏览 • 2016-09-07 12:00 • 来自相关话题

aObject对象是舞台上动画元素(例如:图片、文字、组、元件实例)的抽象,每一个动画元素,都有对应的aObject对象。

获取aObject对象

1、获取动画中,已有物体的aObject对象

在IDE中,可以在属性面板中为物体命名。同一个scene对象中(主舞台或元件实例),物体的名称是唯一 查看全部
aObject对象是舞台上动画元素(例如:图片、文字、组、元件实例)的抽象,每一个动画元素,都有对应的aObject对象。

获取aObject对象

1、获取动画中,已有物体的aObject对象

在IDE中,可以在属性面板中为物体命名。同一个scene对象中(主舞台或元件实例),物体的名称是唯一的。要获取命名物体的aObject对象,可以在包含命名物体的scene上:

1.png

 
2、复制已有的aObject对象

动画元素可以被复制:

2.png

3、使用元件产生元件实例:

3.png

aObject对象的属性

aObject包含一系列属性控制动画元素的变换:

4.png


5.png


6.png

aObject的事件

可以在aObject上绑定绝大多数的鼠标/触摸事件:touchstart、touchmove、touchend、mousedown、mousemove、mouseup、click、dblclick、mouseover、blur、focus。此外,还提供inputstart、inputmove、inputend三个事件。在PC上,这三个事件对应于mousedown、mousemove、mouseup,在手机和平板上,对应于touchstart、touchmove、touchend事件、click事件经过处理,已经不会有300ms的延迟问题。使用如下:

7.png

 
了解更多API详情

2.9.4 API的应用:scene对象

mingyue 发表了文章 • 0 个评论 • 3646 次浏览 • 2016-09-07 11:49 • 来自相关话题

对于主舞台、元件实例这样拥有时间轴的动画元素,都拥有对应的scene对象。通过操作scene对象,可以使用编程的方式,获取当前的播放位置、跳转播放位置、获取主舞台上的物体等操作。

获取scene对象

对主舞台,直接通过下面的方式获取:





 
对元件实例,首先需要在舞台上对元件实例命名( 查看全部
对于主舞台、元件实例这样拥有时间轴的动画元素,都拥有对应的scene对象。通过操作scene对象,可以使用编程的方式,获取当前的播放位置、跳转播放位置、获取主舞台上的物体等操作。

获取scene对象

对主舞台,直接通过下面的方式获取:

1.png

 
对元件实例,首先需要在舞台上对元件实例命名(例如“A”),然后通过下面的方式获取:

2.png

 
scene对象的属性

scene对象包含了主舞台和元件实例时间轴和播放进度的信息。

1、获取当前播放位置和状态

3.png

其中currentId为currentDecimalId的取整值。

4.png

2、获取时间轴的信息

可以通过下面的代码,获取时间轴的长度和页的信息:

5.png

3、获取命名帧的实际帧号

在IDE中,可以为关键帧命名,从而在行为中方便的跳转到命名帧。下面函数提供了命名帧到实际帧号的转换。

6.png

scene的事件

当主舞台或者元件实例重绘前,引发enterframe事件。在事件的回调中,可以操作动画,改变物体的位置,或调整将动画重定向到其他帧。

7.png

scene的方法

scene包含系列控制播放进程的方法,此外,scene代表舞台或者元件实例,管理着舞台或元件实例容器中的所有子物体。

1、控制播放进程

在主舞台scene或元件实例scene上使用下面的方法,可以控制他们的播放进程:

8.png


9.png

2、播放片段

可以通过代码,将一小段时间轴标记为片段,将动画的播放范围限定在片段中。如下:

10.png

3、物体遍历

舞台和元件作为容器,包含一系列的动画元素。在IDE中,可以为物体命名,下面的代码通过名字查找到舞台上的元件实例A中的物体B。

11.png

上述例子允许反遍历(由子元素寻找父元素),例如:

12.png

4、增删物体

13.png

 
了解更多API详情

2.9.3 API的应用:Mugeda对象

回复

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

新手必读:30秒帮助你快速学习Mugeda

Kingsley 发表了文章 • 1 个评论 • 1673 次浏览 • 2016-09-07 11:30 • 来自相关话题

一、新手入门必学课程
   1.基础视频课程:立即学习
   2.案例录播课程(每周三更新):开始学习
   3.经典案例课程:立即学习
   4.百科全书(技术文档):立即查看

二、问题答疑
   1.直播答疑(工作日:10:00——11:00):立即报名
   2.可以在论坛通过“关键词”搜索 查看全部
一、新手入门必学课程
   1.基础视频课程:立即学习
   2.案例录播课程(每周三更新):开始学习
   3.经典案例课程:立即学习
   4.百科全书(技术文档):立即查看

二、问题答疑
   1.直播答疑(工作日:10:00——11:00):立即报名
   2.可以在论坛通过“关键词”搜索相关问题,自己寻找答案,如:搜“声音”。若无相关问题,你可以发起“提问”,等待老师来解答。
(问题包含不限于“关于Mugeda的所有技术问题,付费,发票,活动,培训,建议,新功能需求,bug等等”)                   
   新手提问建议:立即查看
   3.技术精华问题汇总:立即查看 

三、申请成为设计师立即申请
 
四、免费使用模版,一对一技术答疑立即申请
 
 

2.9.2 API的应用:Mugeda API的整体结构

mingyue 发表了文章 • 4 个评论 • 4846 次浏览 • 2016-09-07 11:19 • 来自相关话题

Mugeda API整体上分为三个层次:mugeda对象、scene对象、aObject。

每个mugeda对象与单个动画对应,是访问单个动画的入口。
通过访问mugeda对象,可以得到mugeda的总体信息。如:大小、标题。
动画中,每个时间轴对应于scene对象,主舞台和元件实例都有对应的sc 查看全部
Mugeda API整体上分为三个层次:mugeda对象、scene对象、aObject。

每个mugeda对象与单个动画对应,是访问单个动画的入口。
通过访问mugeda对象,可以得到mugeda的总体信息。如:大小、标题。
动画中,每个时间轴对应于scene对象,主舞台和元件实例都有对应的scene对象。
通过操作scene,可以获取事件轴的信息,对播放位置做跳转。
每个动画物体和aObject对象相对应,控制aObject,就可以控制物体的位置、透明度、可见性。
 
了解更多API详情

“H5简历”模板征集大赛

mingyue 发表了文章 • 15 个评论 • 2841 次浏览 • 2016-09-06 15:08 • 来自相关话题

赵本山的一个小品里说:猫走不走直线取决于耗子。

一个求职者简历好不好,完全取决于招聘者。

那么,为什么投出去简历石沉大海,杳无音信?

很大的原因是你的简历并没有吸引住招聘者的眼球。

参加“Mugeda简历模版征集大赛”

用“H5”制作简历,征服你未来的老板……

活动时间:

作品征集:9 查看全部
首页轮播-简历模版大赛.png


赵本山的一个小品里说:猫走不走直线取决于耗子。

一个求职者简历好不好,完全取决于招聘者。

那么,为什么投出去简历石沉大海,杳无音信?

很大的原因是你的简历并没有吸引住招聘者的眼球。

参加“Mugeda简历模版征集大赛”

用“H5”制作简历,征服你未来的老板……

活动时间:

作品征集:9月7日——22日

获奖公示:
 
用户名:qq1b21c
作品:咖啡简约简历
 
用户名:qq82d0c
作品:设计师简历
 
请以上获奖Mu友尽快与我联系,QQ:3024076303,获奖内容有部分需要修改及调整,审核通过后我们会尽快发放现金奖励哦。
感谢大家的支持,没获奖的Mu友下次继续努力哈。
 
奖品设置:

在活动期间内,作品通过审核并成功上线模版。奖励现金500元(作品数量不限)

设计师专属权益:您可以对自己的模版自定义价格并出售(只有认证设计师有资格,出售模版近期上线,敬请关注)

参赛方式:

1、将您的作品发布地址提交到下方评论区即可

2、获奖信息将在本页公示(请留意)

参与须知:

1、作品必须使用Mugeda平台制作;

2、每个作品的不得少于3个页面;

3、模版容易编辑,重复使用率高;

4、模版必须是活动期间9月7日—22日制作并提交;

5、模版可以从个人展示,小游戏等形式展开(个性化,更吸引人)

6、模版必须是原创的;

7、每个人提交作品数量不限;

8、获奖的模版的版权将归主办方所有。

本活动的最终解释权归北京乐享云创科技有限公司所有。

添加与删除素材元素(图片、文本、矩形、圆角矩形、椭圆等)

mingyue 发表了文章 • 1 个评论 • 2893 次浏览 • 2016-09-02 17:55 • 来自相关话题

如何添加与删除素材元素(图片、文本、矩形、圆角矩形、椭圆等)?

Mugeda动画的中的内容都是以各种元素的形式组成的。
 
对于添加到舞台上的元素:
1、我们可以在时间线上添加动画;
2、可以在属性对话框中修改相应属性;
3、可以在脚本中通过名字获取到该元素对象,通过Javascript代码,通过 查看全部
如何添加与删除素材元素(图片、文本、矩形、圆角矩形、椭圆等)?

Mugeda动画的中的内容都是以各种元素的形式组成的。
 
对于添加到舞台上的元素:
1、我们可以在时间线上添加动画;
2、可以在属性对话框中修改相应属性;
3、可以在脚本中通过名字获取到该元素对象,通过Javascript代码,通过Mugeda API 操作该元素从而完成更加丰富多彩的内容;
(添加元素和修改其属性,给元素添加动画和通过脚本操作元素将会其他章节中有详细介绍)

Mugeda支持的元素类型有图片、文本、矩形、圆角矩形、椭圆等。
对于除了图片以外的元素类型,都可以通过在工具栏中选中所需元素对象,然后单击或者拖动到舞台上来添加。
后面分别介绍添加各种类型对象的方法。

home.png


从工具栏中选择所需的对象,然后单击或拖动以添加到舞台上。

2.png


添加图片的方法有:从本地文件获取、从网页获取、批量上传三种。

1、点击上图标示的图片元素按钮,打开上传图片对话框。点击“上传文件”选项来从本地文件上传图片。

3.png


2、还可以选择“输入网址”选项来网页获取图片

4.png


3、选择“批量上传”选项,可以通过拖拽的方式从本地一次上传一或多张图片

5.png


4、一旦图片上传,点击选择按钮就可以将图片添加到舞台上

6.png


注意:
  • 已经上传的图片可以在图片素材库中重复使用
  • 在图片库中双击图片或选中后点击添加图片,可以将选中的图片添加到舞台上



7.png


可以通过点击文本按钮,通过舞台上点击或者直接拖动来添加文本元素。然后可以在属性对话框中进一步编辑其参数,包括文字、颜色、位置、宽高、对齐方式、字号等等。

8.png


通过矩形、圆角矩形、椭圆按钮可以将相应的图形元素添加到舞台上,同样可以在属性对话框中进一步编辑其参数。各种元素的属性种类略有不多,比如只用文本类型才有文字的属性。

对于已经添加到舞台上的元素,可以点击“选择”按钮以后,在舞台上点击该元素来选中它。

9.png


可以通过拖动的方式选中一个或多个元素。

10.png


可以按下Ctrl建点击各个元素来同时选择多个对象。

11.png


点击“变形”按钮后,通过拖动对象周围的某一控制点来缩放对象。

12.png


通过拖动旋转节点可以旋转对象。

13.png


对象的大小、位置、旋转、透明度等属性也可以在属性对话框中编辑。

删除素材库里的素材:
 
1、在IDE中,点击素材库图标,进入管理界面删除,如下图
 
14.png


2、进入用户初始界面,通过“素材管理”菜单对用户私有素材进行删除或添加。(如下图)
 
15.png


注意:当你素材库的内容应用于所创建作品时,删除该素材会导致作品中素材丢失,但对发布后的作品链接无影响。

更多学习内容:
使用Mugeda创建第一作品(做一个h5)

这两天刷屏的"里约大冒险"(小人)H5,没想到用Mugeda5分钟就做出来了……

mingyue 发表了文章 • 1 个评论 • 2469 次浏览 • 2016-09-01 15:56 • 来自相关话题

这两天小编收到各种私信,“这种用Mugeda 能做吗”?











网易哒哒出品的这个H5,在奥运这场营销竞赛中拔得头筹:个性强、有故事性、交互有意思,一上线就吸睛无数!

仔细研究下,这个H5的技术难点就在于“如何让用户自由绘制的小人,在后面的场景中做运动”?

不信吧?这个难点用 查看全部
这两天小编收到各种私信,“这种用Mugeda 能做吗”?

9.gif


8.png


网易哒哒出品的这个H5,在奥运这场营销竞赛中拔得头筹:个性强、有故事性、交互有意思,一上线就吸睛无数!

仔细研究下,这个H5的技术难点就在于“如何让用户自由绘制的小人,在后面的场景中做运动”?

不信吧?这个难点用Mugeda制作只需要三步:(点图片看高清版)

(1)      第一帧,在舞台上放入画布功能

1.png


A.画布的底色、宽高等在右侧属性栏里设置

B.给画布在右侧的属性栏命名“小人”

(2)新建一页绘制一个方框(小人的运动范围)

2.png


3.png


A.给方框新建一段关键帧动画

B.给方框在右侧的属性栏命名“动画”

(3)在第一页的位置插入“完成按钮”


4.png


5.png


A.给按钮添加“点击播放下一页”行为

B.给按钮添加改变图片行为,用命名的画布(“小人”)替代命名的方框(“动画”),即源元素替代目标元素。

原理就是这样,是不是敲简单!而且已经有Mu友用这个原理,做了一个更酷的!感谢Mu友:手冢治

6.png


7.png


相关案例:
 
南山双创大冒险   作者:微盐

南山双创大冒险.jpeg


1.jpeg

 

8月13—8月19日 技术问题汇总

shuihu 回复了问题 • 3 人关注 • 1 个回复 • 3570 次浏览 • 2016-08-29 15:59 • 来自相关话题

8月20——8月26日 技术问题汇总

mingyue 发表了文章 • 1 个评论 • 3342 次浏览 • 2016-08-29 15:38 • 来自相关话题

1、文字滚动播放不成功,只显示文本框里的内容,是什么原因?

答:选择右侧的“变形”工具来控制文字框大小,拉大文字框让所有文字都在框内显示。

2、后台数据统计浏览量和用户数是如何定义的?我想准确知道有多少人看了,如果想深入做到了解看的人的查看轨迹和页面停留时间,怎么做呢?

答:浏览量是作品被浏览 查看全部
1、文字滚动播放不成功,只显示文本框里的内容,是什么原因?

答:选择右侧的“变形”工具来控制文字框大小,拉大文字框让所有文字都在框内显示。

2、后台数据统计浏览量和用户数是如何定义的?我想准确知道有多少人看了,如果想深入做到了解看的人的查看轨迹和页面停留时间,怎么做呢?

答:浏览量是作品被浏览的次数,用户数是指浏览的唯一人数,如果你想知道有多少人看了就看用户数。

查看轨迹我理解是传播来源,在Mugeda统计一栏都可以看,朋友圈、单聊、群聊的数据。

页面停留时间的话,你可以加事件统计,看一下这个文档或许对你有帮助:http://support.mugeda.com/?page_id=1956

3、请问画布/绘画板,能否去掉勾叉图标,设置手指抬起保存图片?

答:勾叉自定义图片功能已经安排工程师开发了,过段时间会上线,到时候第一时间去体验吧~

4、微信公众号上的贺卡,网站模板里有吗?

答:您说的是卡司令吗?卡司令是Mugeda的内容展示平台,部分内容在模板里可以看到,年费用户可全部免费使用,成为年费用户:http://www.mugeda.com/pricing.php

5、如何做出一个刮卡的有奖活动呢?

答:你好,首先你需要两张图片,一个是刮奖前的图片(比如一张灰色图片),一个是刮奖后的图片(中奖情况),然后刮卡的效果,你可以使用木疙瘩的擦玻璃功能。然后通过右侧属性栏可以设置前景图片,和背景图片,擦除的比例等。

1.png


6、请问怎么设置?(添加一个按钮点击后一个图片消失,另一个图片出现)

答:先给每个图片放到一个元件里,元件里制作好出现到消失的动画,并且在第一帧和出现完成的那一帧画个小方块,增加“暂停”的行为,触发方式为“出现”。然后在舞台上可以用按钮控制对应图片元件跳转并播放对应的帧来实现!

7、如何实现转盘转动后随机连接到我编辑好任意一个的动画元件中?

答:加个跳转到帧的行为 ,帧数中 输入一组数字 实现随机跳转。

8、图片加载缺失怎么解决?

答:你的这个 问题应该是你删除了素材库中的图片造成的。建议,不要删除素材库中动画中用到的素材,需要你重新上传素材并重新在作品中制作那个素材对应的动画。

9、请问如何实现前面三页用同一个背景音乐,后面几页每一页单独一个音乐?

答:能实现的办法有2个:

1)将前面三页做在一页上,

2)用背景先贯穿整个动画,然后在第四页先停止所有音乐,然后播放单页的音乐。同时在第3页开始加播放背景音乐。

10、做答题游戏(选择题的),我应该怎么设置选项,答对计得分,答错不计分,另外问答最后结果怎么设置啊?

答:做一个 文本框用来记录分数,给正确的选项上加行为“改变元素属性-点击-文本框的文本取值”在原有的基础上增加相应的分数。

问答最后结果怎么设置,用改变元素属性的行为,通过执行条件的判断设置对应的结果,你可以在 腾讯课堂里,搜 mugeda 看下关于测试题的案例教程。

11、木疙瘩可不可以复制图层?

答:图层不可以复制,但可以把别的帧复制到新的图层上去。

12、把A拖到B处触发行为要怎么做,然后触发下一页?

答:使用增加“下一页”的行为,触发方式选择拖动结束,执行条件选择“逻辑表达式”,判断当A和B方块接触就行!公式可以百度搜索“碰撞检测”获得。

13、设置图片向左滑动,触动行为怎么设置?

答:图片向左拖动的话,在图片的属性里“拖动/旋转”一项中选择 “水平拖动”即可,然后增加一个“改变元素属性”的行为,使得图片如果是向右移动的话,归位到初始位置即可!如果是需要手指在图片上向左滑动但是图片不跟着动的话,添加行为后,触发方式中选择“手指向左滑动”即可!

14、不需要文字描边,怎么取消?

答:在线条的颜色选区窗口中,右上角的颜色预览框有个小的X,点击那个就可以取消,如果觉得难点的话也可以把A数值改为0,A是透明度(alpha)的英文头字母!

15、行为控制面板改变元素属性中为何找不到元素?

2.png


答:重新检查下,是否给元素命名了。

16、泼墨效果如何才能做的顺畅?

答:用遮罩做字的效果,打开速度有点慢,建议再压缩下图片。

17、【长按】如何屏蔽系统长按菜单?想做个类似指纹识别的项目,发现长按会弹出系统的长按菜单。

答:你在按钮上绘制一个图形,在图形上添加“手指按下”行为。如果再舞台外导入一个图形,直接在上面添加行为,长按会出现系统菜单,用Mugeda本身绘制图形就不会出现这种情况了。

18、遮罩动画有些抖动,怎么办?http://www.mugeda.com/client/preview_css3.html?id=4d636319

答:关于遮照的问题涉及的内容比较多,我们还在处理中,完善后会及时通知大家,暂时您可以参考这个链接中的方法试试http://bbs.mugeda.com/?/question/224

制作第一个H5作品(1)

hihihi 发表了文章 • 1 个评论 • 2263 次浏览 • 2016-08-26 17:10 • 来自相关话题

准备工作:

1、下载chrome浏览器(百度搜索下载即可)
2、使用chrome浏览器打开Mugeda网站注册账号。(考虑到有些浏览器对html5的支持不够,强烈建议使用chrome浏览器)




点击图片查看大图

简单来讲,制作一个Mugeda动画内容,包含有如下几个步骤:

1. 添加元 查看全部
准备工作:

1、下载chrome浏览器(百度搜索下载即可)
2、使用chrome浏览器打开Mugeda网站注册账号。(考虑到有些浏览器对html5的支持不够,强烈建议使用chrome浏览器)
1.png

点击图片查看大图

简单来讲,制作一个Mugeda动画内容,包含有如下几个步骤:

1. 添加元素(图片、文字等)到舞台;(制作动画前需要先准备好图片或文字等素材)

2. 为添加的元素定义动画;

3. 定义和用户的交互行为(例如点击跳转等);

4. 导出或发布内容;

现在我们制作一个简单的动画,让一段”Hello, world!”的文字旋转着出现在屏幕中央,点击文字后,调转到一个指定的页面。
点击查看动画演示
 
1、登录网站后,点击右上角用户名旁边的小箭头——点击下拉列表“动画作品”,进入管理后台,创建作品。

2.png


2、Mugeda的编辑工作台(IDE)在浏览器窗口中打开。默认的舞台尺寸为320*520,(我们通常建议使用这个默认尺寸,这是一个典型的适配移动设备动画的尺寸),素材(图片)建议是640*1040,几乎可以保证清晰度,适配大多数主流机型。

3.png


3、开始做动画,我们为舞台添加一个背景图片。从IDE左侧的工具栏上选择“素材”按钮,可以打开选择“素材”的对话框,选择背景图片。

5.png


如果Mugeda提供的素材无法满足您的需求,您可以选择上传自己制作的素材,点击查看上传方式

4,我们为舞台添加一段文字。首先在IDE上方的时间线上,点击时间线左下角的“新图层”添加一个新的图层。

6.png


5、新添加的图层会自动命名为”图层1”, 并添加在图层0的上面。

图7.png


6、添加文字。从IDE左侧的工具栏选择”文字“, 并在舞台上点击鼠标添加文字,双击鼠标可以改变“文字的内容”,并且通过右侧属性栏修改文字的颜色,大小等。

图8.png


7、这个例子我们把颜色调为红色。下面是一个调整好的样子。

9.png


ok,我们已经完成了第一个步骤:添加元素到舞台。
接下来,我们为添加的文字定义一个简单的动画。
在继续之前,我们先保存一下作品,点击IDE上部工具条上的”保存”按钮,或者从文件菜单中选择“文件/保存”。
第一次保存作品时,需要提供一个文件名称。
(注意:保存时的当前舞台截图,将作为作品的缩略图存在。之后再次保存时,不需要提供文件名,而作品缩略图会根据最新的舞台截图进行更新。)

10.png


8、为了制作动画,我们需要先将内容的帧数扩展至一个适合的数据。默认情况下,动画内容只有一帧,这个可以时间线面板上看到:

11.png


9、我们现在把动画的帧数调整到20帧。在时间线上点击图层0,选中第20帧,然后单击鼠标右键,从出现的菜单中选择“插入帧(F5)”,可以将图层0的帧数扩展至第20帧。也可以选中第20帧后,直接按下键盘的F5键,达到同样的效果。

12.png


这时候时间线显示如下。注意:图层0已经包含20帧,而图层1仍然只有一帧。

13.png


注意:定义在图层中的元素(图像、文字等),只有在图层的范围内才可见。为了理解这一点,可以点击工具栏上的播放按钮,在舞台上预览作品。

14.png


10、开始添加动画,在时间线上,单击图层1中1到20帧的任何一帧,单击右键,在出现的菜单中选择“插入关键帧动画”。

15.png


这时候,图层1变成了浅绿色,并且在图层范围的最后一帧(第20帧)出现了一个红色的点。这表明,动画已经添加成功了。图层1中的第1帧和第20帧,定义了动画的开始、结束帧。中间的帧就可以由系统自动通过插值产生了。我们可以为图层1中包含的(文字)元素在动画的开始和结束帧分别定义不同的(位置、大小等)属性,从而产生动画效果。

16.png


11、在时间线上选中图层1的第1帧,选中IDE左侧的“变形”工具,然后在舞台上选中文字,可以对文字进行缩放、旋转等操作。也可以直接在属性面板调整其属性。在这个例子中,我们把文字的初始透明度设置为10,旋转设为180度,大小缩小一点,并放置在舞台中央。调整好的属性如下图所示。

17.png


保存作品。然后从工具栏点击“播放”在舞台上预览动画效果。也可以在工具栏上点击“预览”在一个单独的窗口预览动画效果。还可以在工具栏点击”二维码“获取一个二维码,然后在手机上预览产生的动画。

图19.png


默认的动画是不循环,可以通过菜单项”动画/循环“来切换循环状态。

20.png


12、我们已经完成了添加元素、定义动画两个步骤。下面我们进一步为动画添加一个最简单的跳转行为。就是当点击文字时,跳转到一个目标网页。选中背景图片,然后在其属性面板上,为其添加一个”链接“行为,地址指向百度,打开方式选择“外部打开”。

21.png


点击预览查看动画。点击背景图片,将会导航至http://www.baidu.com。(注意:添加链接前面一定要加http://)Mugeda支持大量的行为方式,从简单的链接,到表单提交、动画控制、调用手机功能(例如打电话),甚至调用JavaScript回调函数等。我们会在今后的教程中陆续介绍给大家。

13、点击保存,恭喜你!第一个动画已经顺利完成了!

为了在你的网站使用这个动画内容,最简单的方式,就是导出完整的动画包,并内嵌到自己的网站中。记住在导出前保存你的作品。在菜单中选择”文件/导出/HTMl源文件”。该操作会将动画内容打包下载到你的硬盘上。

22.png


导出的动画包中包含有动画播放所需要的脚本、样式、页面、图像等。双击其中的index.html文件可以直接在浏览器中观看动画内容或者通过iframe的方式嵌入动画。

23.png


本教程用到的动画的预览地址是:

点击查看

你也可以在登录后用下面的链接在IDE中查看其源代码:

点击查看

关于文档信息中对应选项代表的含义

回复

ddbackhome 发起了问题 • 2 人关注 • 0 个回复 • 2376 次浏览 • 2016-08-25 18:31 • 来自相关话题

[获奖公布]《“H5”模仿秀》第三期:亦师亦友(教师节专场)

mingyue 发表了文章 • 18 个评论 • 3411 次浏览 • 2016-08-22 15:16 • 来自相关话题

 不知不觉一年一度的教师节要来了,“H5”模仿秀第三期给大家挑选了教师节的案例。为了充分展现各位Mu友的实力,本期形式为模仿+创意,意思是您既可以模仿原作品制作,也可以根据提供的素材,自由发挥属于您的个性作品呦。都有机会获得奖品。

一辈子的时间
谁不曾感到无助和迷茫……
幸好我有你这位损友无时无刻 查看全部
轮播图-第三期.png

 不知不觉一年一度的教师节要来了,“H5”模仿秀第三期给大家挑选了教师节的案例。为了充分展现各位Mu友的实力,本期形式为模仿+创意,意思是您既可以模仿原作品制作,也可以根据提供的素材,自由发挥属于您的个性作品呦。都有机会获得奖品。

一辈子的时间
谁不曾感到无助和迷茫……
幸好我有你这位损友无时无刻的给我?
醍醐灌顶
当头棒喝
振聋发聩
……
别说九月十号和你八竿子打不着关系,
孔子都说了“三人行,必有我师”
~咱俩认识那么久,你偶尔粗暴的提醒却蕴含老师的智慧,
所以请接受我的祝福:教师节快乐~

获奖公示:
 
  • “Mu”仿达人(1名):200元(红包)

       用户名:shuihu
       作品预览
 
  • “最佳创意奖”(1名):200元(红包)

       无:由于未发现具有代表性的创意作品
 
  • “积极参与奖”(5名):20元(红包)

1、用户名:totalacg
      作品预览
 
2、用户名:qq15080
      作品预览
 
3、用户名:qqf1b7f
     作品预览
 
4、用户名:qq54750
      作品预览
 
5、用户名:qqe5b49
      作品预览
 
请以上获奖人加微信号:ju5787695,联系人:明月,以便于我们尽快发奖。7个工作日内联系有效。

作品提交:8月25日——8月31日

参赛规则:

1、使用Mugeda工具模仿原作品制作H5内容

2、在下方评论区直接贴出作品的发布链接即可

3、根据提交作品的顺序、相似度及创意评选(如两个作品的相似度相同,先提交的作品获奖)

4、制作中遇到问题在下方评论区提出,有专业老师解答

5、获奖名单将在本页公示(一定要随时关注动态哦)

奖品设置:

“Mu”仿达人(1名):200元(红包)

“最佳创意奖”(1名):200元(红包)
  
“积极参与奖”(5名):20元(红包)
 
作品预览

1.png


教程地址:(8月23日下午15:00直播
 
评选老师:安仔老师,vn老师,森林味老师,钟樾老师以及班主任松月

本活动最终解释权归Mugeda所有。
 
素材下载:

动画封面在哪里修改

wangfangqwe 回复了问题 • 2 人关注 • 2 个回复 • 1913 次浏览 • 2016-08-20 16:33 • 来自相关话题

[审核] Mugeda审核规则(请仔细阅读,避免违规)

mingyue 发表了文章 • 1 个评论 • 7929 次浏览 • 2016-08-19 15:56 • 来自相关话题

如经审查发现我的作品中包含诱导分享、色情、暴力等违规内容,Mugeda有权对相关内容进行删除,屏蔽,直至“删除用户帐号,删除用户帐号,删除用户帐号,删除用户帐号”的措施以保证Mugeda内容发布的健康运作。
 为了给大家提供更好的服务,维护Mugeda平台与用户共同发展,请严格遵守以下审核规范。

查看全部
如经审查发现我的作品中包含诱导分享、色情、暴力等违规内容,Mugeda有权对相关内容进行删除,屏蔽,直至“删除用户帐号,删除用户帐号,删除用户帐号,删除用户帐号”的措施以保证Mugeda内容发布的健康运作。
 为了给大家提供更好的服务,维护Mugeda平台与用户共同发展,请严格遵守以下审核规范。

具体规则及相关处罚如下:


1、诱导分享类内容

1.1 要求用户分享,分享后方可进行下一步操作,分享后方可知道答案等;

1.2 含有明示或暗示用户分享的文案、图片、按钮、弹层、弹窗等的,如:分享给好友、邀请好友一起完成任务等;

1.3 通过利益诱惑,诱导用户分享、传播外链内容,包括但不限于:现金奖励、实物奖品、虚拟奖品(红包、优惠券、代金券、积分、话费、流量、信息等)、集赞、拼团、分享可增加抽奖机会、中奖概率,以积分或金钱利益诱导用户分享、点击、点赞微信公众帐号文章等;

1.4 用夸张言语来胁迫、引诱用户分享的。包括但不限于:“不转不是中国人”、“请好心人转发一下”、“转发后一生平安”、“转疯了”、“必转”、“转到你的朋友圈朋友都会感激你”等;

11.png

22.png


若内容中包含以上情况,一经发现,立即停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行的访问,短期封禁相关开放平台帐号或应用的分享接口;对于情节恶劣的情况,永久封禁帐号、域名、IP地址或分享接口。 

2、诱导关注类内容

强制或诱导用户关注公众帐号的,包括但不限于关注后查看答案、领取红包、关注后方可参与活动等;

33.png


若内容中包含以上情况,一经发现,立即停止链接内容传播;对于情节恶劣的情况,永久封禁帐号。 

3、H5游戏、测试类内容

以游戏、测试等方式,吸引用户参与互动的,具体形式包括但不限于比手速、好友问答、性格测试,测试签、网页小游戏等;

44.png


55.png


若内容中包含以上情况,一经发现,立即停止链接内容传播;对于情节恶劣的情况,永久封禁帐号。 

4、欺诈类内容

4.1 虚假红包、活动

通过虚假的红包、活动等形式,以赚取现金、实物奖品、虚拟奖品等方式欺骗用户参与的,具体形式包括但不限于虚假现金红包、虚假话费卡、虚假流量红包、虚假优惠券、虚假优惠活动等; 

4.2 宣传或销售侵害他人合法权益的商品

通过虚假宣传、恶意营销等方式,向用户宣传或诱骗用户购买侵害他人合法权益的物品的,例如以骗取邮费为目的的赠送物品活动、虚假付费服务等; 

若内容中包含以上情况,一经发现,立即永久封禁帐号。 

5、骚扰信息、广告信息及垃圾信息

传播骚扰、欺诈、垃圾广告等信息的,包括但不限于虚假中奖类信息,不符合国家相关法律法规的保健品、药品、食品类信息,假冒伪劣商品信息,虚假服务信息,虚假网络货币等;

若内容中包含以上情况,一经发现,立即停止链接内容传播;对于情节恶劣的情况,永久封禁帐号。 

6、内容低俗的信息

6.1 内容低俗的信息

涉及性器官、性行为、性暗示的,传播低级趣味、庸俗、有伤风化内容的,或者宣扬暴力、恶意谩骂、侮辱他人内容的,例如:传播走光、偷拍、露点、一夜情、换妻、性虐待、情色动漫、非法性药品广告和性病治疗广告、推介淫秽色情网站等;

88.png


若内容中包含以上情况,一经发现,立即停止链接内容传播;对于情节恶劣的情况,永久封禁帐号。 

7、非法获取用户数据、信息

未经用户明确同意,并向用户如实披露数据用途、使用范围等相关信息的情形下复制、存储、使用或传输用户数据的,包括但不限于要求用户共享个人信息(手机号、出生日期等)才可使用其功能,或收集用户密码或者用户个人信息(包括但不限于,手机号,身份证号,生日,住址等);

若内容中包含以上情况,一经发现,立即停止链接内容传播;对于情节恶劣的情况,永久封禁帐号。 

8、其它违反国家法律法规的内容,包括但不限于:

(1) 违反宪法确定的基本原则的;

(2) 危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一的;

(3) 损害国家荣誉和利益的;

(4) 煽动民族仇恨、民族歧视,破坏民族团结的;

(5) 破坏国家宗教政策,宣扬邪教和封建迷信的;

(6) 散布谣言,扰乱社会秩序,破坏社会稳定的;

(7) 散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的;

(8) 侮辱或者诽谤他人,侵害他人合法权益的;

(9) 煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;

(10) 以非法民间组织名义活动的;

(11) 含有法律、行政法规禁止的其他内容的。

若内容中包含以上情况,一经发现,立即停止链接内容传播;对于情节恶劣的情况,永久封禁帐号。 

更多规则请参考微信外部链接内容管理规范,立即查看
常见问题:

1、我的内容出现下图的提示是什么原因?我该怎么办?

1.jpg


答:你好,由于您发布的内容违反了Mugeda的审核标准,所以将你的内容屏蔽,他人将无法查看。您可以根据以上的标准逐一检查,将违规内容修改或删除,重现发布至原地址即可。重新发布后,如果内容没有及时更新,请ctrl+F5强制刷新一下。(注意:如果违规内容没有删除或修改,选择再次发布,一经发现,永久封禁帐号)

2、我的内容好像被微信封了?我该怎么办?

21.jpeg


答:您好,由于您的内容违反的微信的规则,您需要自己申诉,联系微信的工作人员呦。

123.png

 
 更多参考资料:http://kf.qq.com/faq/131117ne2MV7141117JzI32q.html
 
3、Mugeda不可以制作测试题的作品吗?
 
答:您好,Mugeda是可以制作测试题类的H5,但是不可以直接发布,您需要将作品导出,部署到您的服务器上发布。(因为您发布了测试题的内容有可能导出Mugeda整个域名被封,所有用户的作品将都不能查看,后果很严重),导出方法如下:

54.png

 
提示:部署服务器需要您联系贵公司的工程师去处理哦。
 

手机上播放木疙瘩的H5动画很卡怎么办?5招教你解决!

hh360 回复了问题 • 14 人关注 • 1 个回复 • 12967 次浏览 • 2016-08-19 13:27 • 来自相关话题

如何通过曲线变形动画实现遮罩的动画效果!(解决遮罩动画抖动的问题)

totalacg 回复了问题 • 4 人关注 • 1 个回复 • 3731 次浏览 • 2016-08-18 22:00 • 来自相关话题

[Mugeda公告]版本更新0817:设计师页面上线

totalacg 回复了问题 • 3 人关注 • 1 个回复 • 5464 次浏览 • 2016-08-18 16:19 • 来自相关话题

关于付费和发票问题

mingyue 发表了文章 • 3 个评论 • 17322 次浏览 • 2016-08-18 11:08 • 来自相关话题

>>>点击申请增值税专用发票

充值或购买木疙瘩服务即可申请发票。发票类型为增值税普通发票或增值税专用发票,开票明细为:软件服务;税率6%,由木疙瘩承担;增值税普通发票【默认申请电子发票】,可及时开具。金额低于1000元且要求纸质发票,快递费需自理。
 
开具增值税普通发票方法:
查看全部
>>>点击申请增值税专用发票

充值或购买木疙瘩服务即可申请发票。发票类型为增值税普通发票或增值税专用发票,开票明细为:软件服务;税率6%,由木疙瘩承担;增值税普通发票【默认申请电子发票】,可及时开具。金额低于1000元且要求纸质发票,快递费需自理。
 
开具增值税普通发票方法:

一、充值过程中选择开具发票类型,并按要求填写相关信息。【默认开具电子发票】如下图:

E0AE3B74-1F05-4DE8-AB95-DF1E1A5FF968.png


二、如果您选择“无需发票”后,又有开具发票的需求,请提供以下信息:(请提供文字版,不要放截图,谢谢)
  • 订单截图

  • 订单金额
  • 发票抬头
  • 纳税人识别号
  • 开票明细:软件服务
  • 开票类型:增值税普通发票
  • 联系人和联系电话
  • 电子邮箱(如未留将默认发送至您的来信邮箱)


请将以上内容发送至contact@mugeda.com,邮件标题统一为:用户名+会员发票服务。必须严格按照以上要求提供资料,否则无法开具,谢谢配合。

*电子发票不支持开具增值税专用发票;
*支付宝支付不支持开具增值税专用发票;

>>>点击申请增值税专用发票

*增值税普通发票(电子发票)我们会在收到邮件后5个工作日内开具,敬请留意预留邮箱;增值税专用发票10个工作日内寄出,请知晓。如遇到特殊情况,会有延迟。感谢您对Mugeda的关注与支持。

温馨提示:

1、发票开具的信息以您发送的邮件为准,请务必正确填写发票类型、寄送地址,若因信息填写错误或资料提供错误造成开具发票错误或寄送错误等问题由您自行承担

2、您购买Mugeda付费服务后,请及时索要发票。除每年12月份购买服务后可于次年1月索要发票外,原则上不提供跨年或跨期超过3个月的开票服务,请您知晓。
 

[Mugeda公告]版本更新0817:作品管理优化

回复

mingyue 发起了问题 • 1 人关注 • 0 个回复 • 4091 次浏览 • 2016-08-17 18:10 • 来自相关话题

接单——中秋节活动

totalacg 回复了问题 • 3 人关注 • 2 个回复 • 1628 次浏览 • 2016-08-16 10:08 • 来自相关话题