分享一个怎么制作晒明星朋友圈的H5教程

Monkey妹妹

在交互H5已经被作为一种营销形式被广泛使用的时代，各类前段时间，小黄人大电影正在热火朝天的上映的时候，有个关于vivo手机的《小黄人朋友圈》被传遍了朋友圈，好玩有趣，还能读取我们的微信头像，让我们感觉到身临其境，参与感爆棚。很多人也想要找画葫芦，制作一个类似形式的朋友圈H5去用于营销推广。但是有一件事很多人都很苦恼如何下手。
     今天给大家分享一个利用iH5制作“晒明星朋友圈”的H5教程。

     1.首先要预先准备好相关的素材，最重要的素材就是背景图了。
    大家可以用PS或者其他制作图片的软件制作一张朋友圈的图片。也许有人会吐槽说：“找不到高清的微信朋友圈界面啊！怎么办？”其实要解决很简单，我们需要用到手机上的截图功能，将自己朋友圈的界面截图下来，仿照截图来制作一张宽度为640px的图片就可以了。
    如果颜色没有办法做出一样的，可以利用PS等工具里的拾色器读取颜色。时间关系，写这个教程之前已经制作好了一张。这里呈上一张制作好的朋友圈背景图，我们在iH5编辑器里新建一个页面，利用图片工具将它上传。上传后为了保证其紧贴舞台且不会随意被移动，切记将背景图右键设置“等比缩放”和“锁定”，同时将其坐标设置为（0，0），宽度为640px。

     2.新建面板工具。制作通过滑动可以对朋友圈图进行上下拖拉的效果。
    选中页面工具之后添加一个面板工具，另外由于下面还有其他的素材需要放和朋友圈图一起进行拖动，为了防止拖动的时候由于手机系统的处理不当导致错位，可以添加一个透明按钮，再将背景图剪切到透明按钮下。这个透明按钮在这里的作用是等同于我们常说的文件夹。

    3.添加用作获取微信头像的图片。
   首先添加一张空白图片，选择了图片工具之后在上传页面选择空白即可，为了我们方便看到图片在哪里，可以为其添加一个背景颜色。另外，有一点很重要就是要记得将图片属性面板的“记录图像”勾选YES。记录图像的作用是为了让获取的头像自动记录。

    4.添加获取微信昵称的文本
    文本的操作跟上一步图片是一样的道理。切记“记录文本”同样要勾选YES。下面的其他涉及出现打开作品的用户的微信昵称的都同样操作。这里提一下，背景图要注意留出足够的空位来给这个昵称的文本，另外由于昵称的长度不同一问题，文本的宽度最好相对大一些，现在的文本内容可以随便输入。

  5.添加跳转页面的事件
     选择“页面3”，鼠标右键进行复制，在舞台下粘贴一个新页面，在“页面3”的面板下添加一个透明按钮，再在透明按钮下添加一个跳转页面的事件。透明按钮在这里是充当一个按钮作用，点击后创造属于自己的朋友圈。跳转页面的事件目标对象必须是舞台，否则是没有跳转页面的事件的哦！

    6.添加“页面4”里读取微信头像和读取微信昵称的事件
     将读取微信昵称和读取微信头像的事件加在页面下，为了能更方便地管理事件，这里添加了一个事件组，再将相关的事件添加在事件组下。

    7.添加“页面4”里读取微信头像和读取微信昵称的事件
    复制事件组1，将事件组2里的所有目标对象分别对应替换为“页面3”里需要读取微信头像和微信昵称的图片和文本。

     8.使读取的头像和昵称记录下来
     添加一个1秒的时间轴，设置为自动播放。然后在时间轴下添加事件。事件具体设置为当时间轴播放结束的时候舞台提交素材。提交的原因是的我们要将前面记录的素材（即已经读取的头像和昵称），使分享出去之后其他人打开作品后会看到前一个人记录的头像和昵称。
     简单来说，提交之后记录了我的微信头像和昵称，然后当我分享出去的时候别人打开我的作品就会看到我的头像和昵称了。