发新帖

  • ~M~梦令教你做一个未接来电页面~超详细解析步骤,有耐心的来
  • 木头夫人   2015-08-03 11:40:02
  •   [复制链接]
  • 34124    524
  • 本帖最后由 木头夫人 于 2016-4-1 16:59 编辑

    可以进群交流 65461243 梦令老群新开,欢迎冒泡潜水交流

    先上效果:http://e.eqxiu.com/s/92mrgUzs
    适用范围:很广泛,属于创意类的,自己根据主题内容往里套就可以了
    运用的工具:触发和音效


    创意的来源不是我自己,是在一个Q群,一个朋友发的一个链接,http://app.zuk.com/scoresys/bossCalling/index.html?from=singlemessage&isappinstalled=0
    感觉这个创意真心赞,所以呢,就用易企秀模仿了一个,只能说大差不差,因为原版链接里是用代码写的,用秀秀去模拟会有一个差异。关于差异和如何解决差异,我会在下文中讲到。


    第一步,就是看原版网页,进行分析。
    打开网页,是“电话铃声”+“未接来电页面”,即下图:
    P1.jpg

    这个页面中,分析得出3个基本元素和1个隐含元素:
    3个基本元素:头像+接听按钮+拒接按钮
    1个隐含元素:电话铃声


    然后点击  接听按钮,会跳出接听页面,即下图:
    接听后的页面.jpg
    这个页面中有3个基本元素:
    3个基本元素:头像+键盘+音效

    刚刚的那个是接听后的跳转,拒接的跳转是下图:
    拒接页面.jpg

    拒接的页面,是3个基本元素:
    3个基本元素:对话框01+对话框02+下方输入框

    可以看出这3个页面的关系,并且在易企秀中的实现方式就是触发+音效,
    分析图片如下:

    分析图片.png

    基于以上分析,可以开始动手了。
    素材包和音效包,我会分享给大家的,先看教程!

    搞清楚逻辑,素材也准备完毕后,就可以制作了。

    第一步,插入拒接页面的元素。【为了可以看清楚元素,梦令加了个暗色背景,只做演示用的哦,完工后删除即可】
    第一步.png

    第二步,插入接听页面的元素。
    第二步.png


    第三步,插入未接来电页面的元素。
    第三步.png





    小提醒01:前面3步都是插入图片,为什么我这里需要分3步来分开呢,因为易企秀中的图片是有先后顺序的,先插入的图片在底层,后插入的图片在上层,书序ppt和ps的童鞋就可以很容易理解。不理解的童鞋,可以试着操作下,不按照顺序插入,效果会很乱的。所以特地在此提醒~~~

    小提醒02:为什么前面插入的图片,都不拉大到正常的尺寸。因为要做触发,图片太大的话,在触发的时候会点击不了,所以做触发前,需要把图片都排开,确保每个图片都可以被点击到被触发【或显示或隐藏】,少点击一个元素的话,会影响效果的。

    还有其他疑问,欢迎回帖,教程没完呢,继续往下翻!

    2016-04-01更新:感谢#418楼友友的提醒,在场景设置里可以使用“禁止滑动到下一页”功能,可以使来电场景变得更加逼真和精致,再次感谢这位友友哦!

    可以进群交流 65461243 梦令老群新开,欢迎冒泡潜水交流!


    原始素材下载需要回帖哦!!!

    游客,如果您要查看本帖隐藏内容请回复







    点评

    特别棒  发表于 2015-11-11 15:35
    谢谢  发表于 2015-9-16 08:24
    回复
  • 最新评论
  • 添加评论
  • 发表于 2015-8-3 13:14:50 | 显示全部楼层
    好吧,我来坐坐沙发

    点评

    沙发是我自己做的哦~~~  详情 回复 发表于 2015-8-3 15:20
    回复 支持 1 反对 0
  •  楼主| 发表于 2015-8-3 12:07:53 | 显示全部楼层
    5】现在这个已经算是做好了,但是就有一个问题。
    在原版中,打开网页是有电话铃声的,那么怎么用到刚刚的场景中的。
    1.如果用作背景音乐的话,由于后面还有其他的页面,那么直接做背景音乐就会影响其他的页面,所以这个被pass。
    2.如果运用音效的话呢,音效是需要点击才可以有的那么怎么样才能让别人点击呢?
       我就想到了,易企秀中的那个表示音乐的标志【 music_off.png 】,把这个音效插入到场景中,做了一个旋转的循环动画,并且添加了【电话铃声】的音效。

    果然效果棒棒哒~~~

    再把触发优化下,隐藏掉这个标志就大功完成了。

    ————————————END梦令————————————————

    点评

    我做到最后一步不会了,求指点易企秀中的那个表示音乐标志,把这个音效插入到场景中,做了一个旋转的循环动画,并且添加了【电话铃声】的音效。 我都做了,但是还说需要触碰那个小标志才会有声音....能在说详细  详情 回复 发表于 2016-1-6 14:41
    回复 支持 1 反对 0
  •  楼主| 发表于 2015-8-3 11:54:59 | 显示全部楼层
    4】加入音效
    加入音效.png

    点评

    请问音效怎么添加?  详情 回复 发表于 2016-12-7 17:07
    回复 支持 1 反对 0
  •  楼主| 发表于 2015-8-3 11:54:12 | 显示全部楼层
    2】文本【接听】的触发
    触发-接听.png

    回复 支持 1 反对 0
  •  楼主| 发表于 2015-8-3 11:56:18 | 显示全部楼层
    第五步,测试与优化。
    触发完成后,就需要把图片拉至正常位置。
    通常,我会直接开拉,有些童鞋触发的使用不是很上手的话,建议可以先保存发布,看下效果怎样,如果有错误的,可以重新编辑修正。
    拉图片的过程如下:
    1】拉拒接图片
    第一步-拉拒接图片.png

    2】拉接听图片
    第一步-拉接听图片.png



    回复 支持 1 反对 0
  •  楼主| 发表于 2015-8-3 11:50:12 | 显示全部楼层
    本帖最后由 木头夫人 于 2015-8-3 11:53 编辑

    第四步,做触发。
    1】做2个文本图层,一个是【接听】,一个是【未接】。
    【为什么呢?提示下,这2个文本就是触发源。】

    加入文本.jpg



    回复 支持 反对
  •  楼主| 发表于 2015-8-3 11:54:34 | 显示全部楼层
    3】文本【拒接】的触发
    触发-拒绝---.png

    回复 支持 反对
  •  楼主| 发表于 2015-8-3 11:59:59 | 显示全部楼层
    3】拉未接来电图片:
    先拉头像,确保2个头像的位置要一致。
    第三步-拉未接来电图片01.png


    如下图,图片的位置都拉至正常位置,下一步处理文本
    第三步-拉未接来电图片02222.png

    回复 支持 反对
  •  楼主| 发表于 2015-8-3 12:03:03 | 显示全部楼层
    4】处理触发源【文本】
    其实很简单,就是把文本框拉大一些,然后把样式清除,把文字删除,这样就OK了,至于为什么呢?作为课后思考题吧【其实是懒癌发作,打字累的
    就是如下图一样哦~~~
    拒接文本-处理.png

    回复 支持 反对
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 木头夫人
  • 副总裁
    • 2181
      积分
    • 1932
      金币
    • 829
      帖子
    猜你喜欢
    快速回复 返回顶部 !pub_help!