H5教程1：受大企业青睐的H5简历长啥样？

听说现在好多小伙伴都在找工作，H5君不少朋友都已经把简历更新成H5版本了，也是厉害！下面这个H5简历，是我的朋友发给我的，据说，同时有3家上市公司的设计部抢着要↓↓↓

把简历做成超级玛丽的形式，不得不佩服，简直超级有想法！我试着用Mugeda做了下，其实很容易，不用加代码，在平面完成的情况下，2个小时搞定。

前期准备：

H5工具：Mugeda

浏览器：下载Chrome浏览器，这是对H5支持最好的，方便边做边调试

下面介绍我的制作步骤：

 

一、原理是什么？一定要理解这个！

（1）在舞台上建3个图层，分别是拖动层、人物和元件。

（2）在元件里，把拖动屏幕后出现的动画做到里面。

（3）用拖动图层关联元件，也是说在触发拖动图层的时候，开启元件动画的播放，用拖动图层上的方框（透明度调为0）的左坐标和元件的左坐标关联。

二、具体制作步骤？

（1）在元件里制作背景长图的动画

如果以前用过Flash的，对这个界面有木有超级熟悉，可以看到基本都是关键帧动画。而且Mugeda和Flash的界面很像，研究一会基本就没什么难。首先把背景长图动画做了。

小人的动画也在元件里做，这种像素风的人物做动作的时候，可以不那么柔和，加些跳帧会显得更活泼些，这就是动画师动画感觉层面上的事啦，多练习找感觉吧。

（1） 回到舞台，设置拖动图层可拖动

回到舞台，新建一个图层，即【拖动层】，用它控制刚才做好的元件动画的播放。这个图层上绘制一个矩形，用拖动这个矩形的动作，来控制元件动画。

 

至于这个矩形有多长，多长都可以！如果想让动画播放的慢一点，就做长一点，如果想让动画播放的快一点，就做短一些。

给矩形命名，调整透明度为0，在【拖动/旋转】选择水平拖动。

（3）最重要的步骤，关联元件！

新建一个图层，命名为元件，把元件动画拖进来。选择元件，在属性面板里【选择关联】为启动，【关联对象】为刚才命名的矩形，开始值和结束值是矩形的坐标。

怎么样？弄清楚了原理是不是so easy！最近在找工作的设计狮小伙伴建议用H5做个简历，真心提高面试率！如果你有什么好的H5简历作品，希望在评论里和我分享哈~

 

我也是H5刚入门，所以讲得也不是太好。而且这个课出视频教程了，看不懂的去学视频吧，更直观一些，看视频戳这里。