由于手机尺寸各异，无论选择什么样的自适应模式都会被截取一部分内容，如果你刚好有一个按钮的设计是属于贴着边框的，通常可以通过选择“高度适配”或者“宽度适配”就可以解决，但是如果左右侧边和上下侧边同时都有贴边设计的按钮或者我们不希望有留边的话，就无法通过木疙瘩自带的适配来防止按钮被切割了，这时候就需要我们手动去计算这些贴边按钮应该出现的位置！（具体设置方法请看相关教程）
先来看看这个案例：http://102f1cea.u.mgd5.com/campaigns/57831537a3664e4735000300/20161219063748/5841517e92b57979951510a3/index.html
这个案例使用的是“覆盖”的自适应效果，也就是无论屏幕是怎样的比例，绝对不会出现留边的情况，高度超出比例时候按高度适配，宽度超出比例的时候就按宽度适配，配合贴边UI就可以让整个画面始终保持饱满的状态了！
 
进入正题，如何实现贴边UI？这个还需要通过当前显示范围大小配合选择的自适应效果，通过计算来实现！首先我们要先显示现在的显示窗口大小：
在舞台上新建两个文本框，分别命名为“窗口高度”“窗口宽度”
然后选择发布按钮左边的 [JS] 按钮，插入如下代码：

var mugeda = Mugeda.getMugedaObject();

mugeda.addEventListener('renderReady', function () {

     var scene = mugeda.scene;

     var yemianW = scene.getObjectByName('窗口宽度');

     var yemianH = scene.getObjectByName('窗口高度');

     var oldW;

     var oldH;

     var updateTime = function () {

         

        if(oldW != window.innerWidth || oldH != window.innerHeight){//防止持续更新文本框

            oldW = yemianW.text = window.innerWidth;

            oldH = yemianH.text = window.innerHeight;

        }

     }

     scene.addEventListener('enterframe', function () {

          updateTime();

     });

});

之后就可以通过“窗口高度”“窗口宽度”这两个文本框，知道现在显示的窗口大小了！
接下来就是分析显示窗口和木疙瘩舞台的关系了，就那“宽度适配”来举例说明吧！
宽度适配情况下，是显示的内容始终让宽度占满整个屏幕，并且宽高比不改变，内容居中显示，如下图：

我们想要按钮1贴着上边，按钮2贴着下边显示的话，我们需要先求出上下边界线在作品里的坐标。
由于宽度自适应，可以观察的出 显示区域高度/作品宽度 = 窗口高度/窗口宽度
所以  显示区域高度 = 窗口高度/窗口宽度*作品宽度。
由于作品内容是居中的，因此，显示的上边界所在上坐标为：  上边界上坐标 = (作品高度-显示区域高度)/2
所以按钮1上坐标应该为：(作品高度-窗口高度/窗口宽度*作品宽度)/2
同理按钮2上坐标应该为：作品高度-(作品高度-窗口高度/窗口宽度*作品宽度)/2-按钮高度
知道怎么算出来之后，就可以通过“改变元素属性”的行为，填入取值公式就可以实现贴边UI的功能了！为了每次窗口变化都能触发，行为需要添加在显示区域的文本框上，触发方式选择为“属性改变”，就可以确保每次窗口改变时候都能实时改变啦！赶快去试试吧！
觉得本篇文章对你有帮助的请点个赞！
 
PS：我上面制作的这个案例的翻页功能也是通过代码实现的，目前木疙瘩还不支持不受翻页影响的导航功能，据官方人员了解，这个功能可能需要到明年才能完成！
 
 
我的其它文章：
【高级互动】如何制用木疙瘩做游戏？ http://bbs.mugeda.com/?/article/392
【代码分享】用鼠标进行控制（鼠标响应事件）！ http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办？5招教你解决！    http://bbs.mugeda.com/?/question/230​

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

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

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

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

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


 
3、图片位置，设置的值越大，前景图片的位置越靠下；图片宽度设置的值越小，前景图片的尺寸就越小，如图：

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

 
5、除了自己制作，还可以从Mugeda模板里添加加载页，如图：

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

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

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

 

 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​）
 Mugeda统计数据可以查看该作品的浏览量和用户数以及传播来源，传播层级，事件统计。

统计数据可以通过选择“开始时间”和“结束时间”来筛选数据的时间范围进行查询数据。（如下图） 


（点击查看大图）

浏览量（PV）：页面被查看的次数。用户多次打开或刷新同一个页面，该指标值累加。

用户数（UV）：页面的访问人数。所选时间段内，同一访客多次访问会进行去重。

下图数据表可以通过选择“时”“天”“周”“月“进行筛选查看。


（点击查看大图）

传播来源：是指通过某些途径进行传播。Mugeda的传播来源包括微信的（单聊，群聊，朋友圈）等，其他包含浏览器，QQ等。


（点击查看大图）

传播层级：可以查看每一层传播的相关数据。

所谓层级：比如“我”通过朋友圈传播给“a”“b”“c”，“a”“b”“c”又分别通过朋友圈或者私聊传播出去，那么“我“为第一层级，abc分别为第二层级，依此类推。如下图  


（点击查看大图）

从下面可以了解到，一层传播数据最高，其次是五层。 


（点击查看大图）

事件统计：在Mugeda编辑界面，你可以给元素——行为添加一个可选的“事件名称”，凡是包含“事件名称”的行为，都会记录在统计数据的“事件统计”中，你可以在后台查看这些事件的统计数据。例如：用户点击某个按钮的次数。 



如何添加事件统计？

编辑界面——选择您想要添加事件统计的物体——行为——添加事件名称即可。（所有事件可以添加统计哦）

例如：用户点击某个按钮的次数。

1、选中要添加事件统计的按钮
2、点击”行为“图标，进入行为操作界面（如下图） 


（点击查看大图）

3、选择要添加”事件统计“的任意一个行为，比如：我想添加”跳转到帧并播放“的事件统计，点击编辑——添加”事件名称“即可。现在可以到动画作品——统计，查看你添加的事件统计了。（统计最长需要等待1个工作日）


（点击查看大图）
 
 

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

 
默认命名为“元件1”，自动进入元件编辑界面，如图：

 
二、如何把新建元件添加到舞台？ 
在元件编辑界面完成编辑后，点击页面回到舞台，如图：

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

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

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

 
在复制元件，即“元件2”里进行修改，不会影响到“元件1”内的内容 ，如图：

 
四、新建元件文件夹： 
点击元件面板下方的“新建文件夹”按钮，可以在元件面板里添加文件夹，如图：

 
文件夹可以方便的对元件、视频、音频等进行管理，如图：

 
五、导出元件：
点击元件面板下方的“导出”按钮，如图：

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

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

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

 
七、删除元件：

 
 

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

 
绘制图形，物体的属性都在右侧查找

 
2、设置物体大小和坐标：​



 
3、设置透明度：​

 
输入值的方式更准确

 
4、线条类型： 
包括实线、点线、虚线、点划线

 
5、填充：

 
6、X、Y、Z轴旋转：

7、端点： 
端点只能对在Mugeda绘制的线条进行设置，如图：

 
8、接合： 
对绘制物体的线条接合处进行设置，如图：

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


如果只想保留图片造型，可以通过把线条的颜色设置为空，如图：


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


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


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

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


 

本周bug修复如下：
 
1、修复了单独页面命名， 顺序变化导致命名重置的问题。
2、修复了当内容中存在一个空的幻灯片控件时，作品无法预览的问题。
3、修复了直接拖拽素材上传，过早关闭界面，下次打开会提示素材缺失的问题。
4、修复了当元素添加可拖动的属性（旋转）， 预览时只有第一次拖动旋转生效，第二次预览失效的问题。
 
以上修复内容可在beta.mugeda.com上查看。