提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
连简历都不是H5的?你还好意思说你是互联网人?
听说现在好多小伙伴都在找工作,H5君不少朋友都已经把简历更新成H5版本了,也是厉害!下面这个H5简历,是我的朋友发给我的,据说,同时有3家上市公司的设计部抢着要↓↓↓
把简历做成超级玛丽的形式,不得不佩服,简直超级有想法!我试着用Mugeda做了下,其实很容易,不用加代码,在平面完成的情况下,2个小时搞定。
前期准备:
H5工具:Mugeda
浏览器:下载Chrome浏览器,这是对H5支持最好的,方便边做边调试
下面介绍我的制作步骤:
一、原理是什么?一定要理解这个!
(1)在舞台上建3个图层,分别是拖动层、人物和元件。
(2)在元件里,把拖动屏幕后出现的动画做到里面。
(3)用拖动图层关联元件,也是说在触发拖动图层的时候,开启元件动画的播放,用拖动图层上的方框(透明度调为0)的左坐标和元件的左坐标关联。
二、具体的操作步骤?
(1)在元件里制作背景长图的动画
如果以前用过Flash的,对这个界面有木有超级熟悉,可以看到基本都是关键帧动画。而且Mugeda和Flash的界面很像,研究一会基本就没什么难。首先把背景长图动画做了。
小人的动画也在元件里做,这种像素风的人物做动作的时候,可以不那么柔和,加些跳帧会显得更活泼些,这就是动画师动画感觉层面上的事啦,多练习找感觉吧。
(2)回到舞台,设置拖动图层可拖动
回到舞台,新建一个图层,即【拖动层】,用它控制刚才做好的元件动画的播放。这个图层上绘制一个矩形,用拖动这个矩形的动作,来控制元件动画。
至于这个矩形有多长,多长都可以!如果想让动画播放的慢一点,就做长一点,如果想让动画播放的快一点,就做短一些。
给矩形命名,调整透明度为0,在【拖动/旋转】选择水平拖动。
(3)最重要的步骤,关联元件!
新建一个图层,命名为元件,把元件动画拖进来。选择元件,在属性面板里【选择关联】为启动,【关联对象】为刚才命名的矩形,开始值和结束值是矩形的坐标。
怎么样?弄清楚了原理是不是so easy!最近在找工作的设计狮小伙伴建议用H5做个简历,真心提高面试率!如果你有什么好的H5简历作品,希望在评论里和我分享哈~
我也是H5刚入门,所以讲得也不是太好。而且这个课出视频教程了,看不懂的去学视频吧,更直观一些,看视频戳这里。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册