在上一节课中，我们讨论了游戏化拉新的技巧，比如谷歌工牌、录取通知书和测试游戏等，这些页面的增粉效果都非常显著。这节课，我们将探讨如何实现这些H5页面，一般有两种途径。实现这些H5页面的方法有两种：一种是自己制作，另一种是使用第三方软件。如果公司有设计师和程序员，可以利用他们的专业知识和经验，自己创意并实现页面。但如果公司缺乏这样的资源，就需要使用第三方软件，例如H5制作工具或模板。这种方式适用于那些需要独立负责新媒体项目的同学，但需要注意选择合适的软件和教程，以确保制作过程的顺利。
对于没有资源的同学，今天我们会重点介绍如何使用第三方软件来制作H5页面。首先，我会简单介绍一下第一种方法：通过actual软件来画流程图。这种软件易于使用，可以在互联网和产品设计中广泛使用。例如，在使用PPT或手绘方式画圆心图之前，可以先将其导入actual软件中，并在上面绘制所需的图形和流程。然后，将流程图导出为H5格式，并发送给设计师。接下来，设计师可以根据流程图为H5页面进行设计。
掌握actual软件，制作H5页面更流畅
第二种方法是使用actual软件中的一些功能来制作H5页面。例如，可以使用actual的页面制作工具来创建基本的页面布局，并添加文本、图像和链接等元素。还可以使用actual的动画工具来创建交互式动画效果，使页面更具吸引力。
无论选择哪种方法，都需要掌握实际软件的使用和设计技能。
设计师，程序员，那么这个过程就会更加顺利。
制作H5页面的第三方软件：IH5
第三种方法是使用第三方软件来制作H5页面。例如，可以使用actual软件来画流程图和圆形图，或使用其他软件来制作测试结果页。无论选择哪种方法，都需要掌握实际软件的使用和设计技能，以确保制作过程的顺利。如果公司缺乏资源，可以考虑使用第三方软件，但这需要选择合适的软件和教程，以确保制作过程的顺利。
下载IH5软件并查看上一节的视频，了解如何使用IH5软件来制作H5页面。如果对IH5软件的操作不熟悉，可以参考下一节的视频，老师会非常详细的演示步骤。如果感兴趣，可以跟随老师学习，相信通过不断的练习，可以制作出自己的H5页面。
去看一下IH5这个第三方工具，搜索一下，然后呢，进入到操作页面，然后跟着老师一起来做。
“制作H5录取通知书：自定义名字和内容”
大家好，我是馒头，我们今天的视频给大家介绍怎么样可以做一个H5，可以模仿出那种录取通知书，大家应该都在朋友圈里面有过很多像这样的例子，一个五生一张片，张片里是一个像清华大学录取通知书，或者是结婚证，或者是一个合照之类的，然后他可以让你的名字出现在他上面，比方说是某某同学，然后恭喜你如入我校什么专业学习，这些内容是你自己可以写的。
如果对IH5软件的操作不熟悉，可以参考下一节的视频，老师会非常详细的演示步骤。
“造假型案例：如何在脑袋中生成图片后去朋友圈分享？”
在脑袋中生成出来之后，可以保存一下这张图片，然后拿去发朋友圈或者转给其他看。
这个在我们这边可以统称为造假型的案例，但这是一个玩笑说法，就是他要假造某一个内容嘛，所以就叫造假型的案例。
这个东西在H5里面其实非常容易实现的，在A5这款工具当中，我们可以非常快速的把它做出来。那我们首先来了解它整体的结构，就是这种造假型的案例。它本质上来说呢，它是一个DIY图片这么一种案例，DIY图片的案例，一般来说有两页，第一页呢是一个制作业，制作页，第二页呢，是一个分享页。
制作业是用来让用户输入关键信息的，然后用户输入信息之后，它可以下来，并且把它转到一张图片上面去。
把图片分享到朋友圈的简单方法
把信息转到图片上面去，这一步用户是不一定能看见的，它能看见是最终的成品，那就是分享页，分享页的话就是用户可以保存图片，然后可以把这张图片发到朋友圈里面去。那我们下面就来看一下一个这样的案例，最最最简单的做法。
我们打开H5这款工具，然后给它添加两个页面。页面的话是在这里有页面这个工具。点击两下，它就会在舞台下添加两个页面。然后把准备好了的录取通知书的图片拖动到页面二。
现在它就在页面二里面了，当我们点击页面一是空白的，因为页面一现在没有东西。我们把这个形式比例调小一点。然后再来看一下，我们需要在这里做一个输入页，所以呢，我会加上一个输入框。输入框在左边工具栏的第三行的第一个框叫做输入框。输入框就是让用户输入信息的，所以我们可以在这里找到提示文字，提示文字可以在这里找到，一个叫请输入姓名，一个叫可以打上。
然后我们有了这个之后，还可以让他。对他复制粘贴一下。CTRLC，选中页面一，CTRLV然后拖动。就有两个了，这里的话，我们把他复制粘贴一下，然后放到页面二里，再对它改一下文字提示，把“请输入专业”改成“请输入姓名”。
居中按钮设计示例
因为我们刚才那个图片里可以让用户写姓名和专业，然后你可以把这两个东西通过右上方的对齐来居中一下。
有了这么一个内容之后呢，我们下面就要给大家一个按钮。这个按钮就是。我这里就用一个很简单的按钮，一般来说是这样的，一般来说你会用一张图片。然后这张图片呢，就是你所事先做好的一个按钮图片，有了这么一张图片了之后，我这里的话就直接把它用一个颜色来代替了。
清华大学录取通知书生成器：如何使用透明按钮和画布完成？
有了一张图片之后，再在这个图片上面盖一个透明按钮。一般的做法是这样的。那为了方便的话，我直接删掉图片，用一个有颜色的透明按钮来代替。
之后，有了这样一个按钮，通常它。是提交或确定文字的按钮，我没有按钮图片，所以我重建了一个，直接用透明按钮，给它加一个背景颜色，然后给它做一个逻辑，就是点击按钮之后，要把姓名和专业都传到一张图片上面去。
对吧，这个应该没有问题。那在做了这个之前呢，我们首先来了解一下最终需要做的事情。让用户把这一张图片，包括姓名和专业的，这里的内容全部打印成为新的图片。把它转变成为新的图片，让用户保存在手机或者存在内存当中，然后再把它转发给其他人或者朋友圈。为了实现这样一个特殊的功能，我们必须要用到一个特殊的工具，它叫做画布。
在工具栏的下方，有一个像画家板一样的形状，它叫画布。长按鼠标可以看到上面画布，然后点击一下，画面变白，不用慌张，把这个录取通知书拖到花圃底下。
然后我们就需要对录取通知书的高度和坐标进行修改。首先，我们将它的坐标和X、Y值改为零零。因为它的坐标是左上角的，所以我们应该紧贴着它。接下来，我们将它的宽和高改为6、2和1，然后记住要加上一个百分比符号，这里是PX。最后，我们将画布的宽和高改为6、1和9，并将画布的坐标改为2、1。
这个作用是让画布跟图片一样大。因为我们需要一个效果，所以要保证画布跟图片一样大，才能正常保存成为新的图片。然后，在画布里面选中画布，然后添加一些新的内容，那就是中文字体，然后写上一个姓名。
OK，你可以在属性栏当中调整大小、字体、颜色等等，让它更加符合这里的效果。啊，比如说放一个姓名。然后复制、粘贴、拖动、把它变长、把它的内容改一下、改成专业。然后我们拖到下面、文本改成居中。OK，事先写下的内容、姓名和专业、主要为了我们自己方便、区分和看。
好，有了这一个内容之后呢，我们来开始做刚才的事件。我们需要做的是确定一个事件它的触发对象是谁。那就是谁发起了这个事件。这个事件要不要发生，取决于它。现在决定了这个事件要发生的是按钮。因为它被点击时会发生一件事情，所以我们给他增加一个右边的事件，然后把条件选择为点击。点击之后，事件就会发生了。
然后下面是对象和动作，指的是当我点击透明按钮时，会发生什么事情。
要发生的事情是什么呢？那就是我们需要让这里的姓名和专业变成所写下的内容。所以我们吧。
来看一下其他的。在然后我们点一下加号，再增加一个动作一个动作的话跟刚才是一样的原理，赋值给他一个值是输入框二。
好，所以之后呢，我们就已经把输入框的内容转到来了，现在就可以测试一下，进行一下预览了。首先我们看到的是输入框，然后我们就可以写了。
完了之后，因为我们现在没有做任何跳转，所以我们还会保持在第一页。然后I当中有一个默认向上滑动页的时候会翻过去的设置，如果我们不改过来的话，它就是默认存在的。所以我们按紧鼠标向上滑一下。
我们就看到页了，你就会看到这里已经有小明同学录入我校畜牧业专业学习好，所以我们需要给他增加一下动作是吧。
这里呢我们是可以直接给他增加一个翻页事件，翻到第二去的，但是这个不是最佳的方法。下面给它加给大家最佳的方法是，首先是这一个画布本身，它并不是最终想要看见的效果，并不是最终我们要做的，我们要看到它之后直接就可以把它传成单独的一张图片。
把成单独图片。所以我们要做的事情是什么呢？就是我们会增加一页。我们会再增加这个页面。其实用户是不会看见的。我们在三页面这里增加一个图片。
然后这个图片是空白的，所以我们取消了。这么一个空白，它的大小跟一个画布，或者说一个录取通知书里面的大小是一样的，所以他应该是6、1乘以5、9，我们要把这个比例勾掉6,1然后，同样的零坐标，哦，不对，可以让它居中。
那我们准备好了三页面的一个空白之后，下面要做的一个事情就是要实现刚刚所说的效果，就是把图片变成一张单独的图，然后让它可以转到三页面里面来。
做到这一点呢？我们来一个动作，对象是画布，动作是打印。打印是一个非常特殊的事件，它的作用在于它可以把画布里面的内容打印成一张图。
所以我们会选择，在这里你是要输出这张图到哪个地方来看一下，这张图是没有空白像素的，所以不需要是PNG，可以是JPG，可以是，图片质量根据你需要来选择。
因为我们发到朋友圈或者是，啊，给别人在微信流传的图片，质量对他的要求不算特别高。
根据实际需要来，然后选这里的字，一定要选择到三页面里面的空白图片，就是一个容器，是用来装我们这张图的，好，这里还有一个非常非常重要的东西，就是打印画布，它的一个逻辑，它是把。
这里面的，跟这个三个全部一起打印出来，变成这张图片的内容，所以我们，必须要确保的一点是，在打印画布的时候，这两个赋值已经完成，因为我们这里用的是中文字体，然后是从输入框到中文字体，要生成文字，它是需要跟服务器去拿到一个字体的信息，然后再字体的信息回到H里面去生成文字，所以它需要时间，我要确保我们在打印画布的时候，它确实已经，有
我们必须要给打印画布的事件加一个延迟。一个三秒的延迟，然后点一下这个时间，给他一个三秒的延迟，一般来说用户都不会太在意。
当然你可以给他增加一个层，比方说用一个半透明的图片，然后是生成中的这样的一个图片做一个，呃，生成中的动画。我们可以非常快速的制作一下这个效果，比方说是这么一个东西，那它就是一个提示了，是吧，所以我们可以把这个容器隐藏掉，然后在这里去让他显示出来。
这样的话，在两秒的延迟期间，我们会有这样一个提示，这样用户就不会觉得太突兀，然后我们再增加下一个动作，是下一个让舞台翻到后面去的动作。
下一页，就是这一页就应该能看到最终的图片，因为这个打印画布是有延迟的，所以下一页同样有一个延迟，这里可以给他一个2.3秒之类的，通过这种方式我们可以完整的把所有的效果出来，看一下。
OK，就可以看到我们已经可以生成一张这样的图片了，正常来说，刚刚看到的生成中，它只覆盖了一个区域，这是因为在电脑屏幕上手机的大小那么广阔，所以只有这边盖住了，是正常的，你在手机里面看就是很正常的，现在在图片上右键另存为，他就是一张这样的背景图片，图片上所有的文字都变成了图片。
那如果要让用户可以在手机里面下载这张图片呢？我们还需要更改一个设置，那就是在图片页面的三底下有一
滑动翻页，可以让我们一划就翻到下一页，手指一划就翻到下一页，会让我们的页面案例穿帮，可以这么说，因为二我们希望不让用户看见，所以把滑动翻页改成无，这样就可以完成了。
最后如果想要案例更加完整的话，我们现在会给案例添加加微信组件，也是在工具栏里面可以直接找到的，我们加了一个之后，需要这里设置他的标题，截图，分享，它就是里面我们在微信转发的时候，所能看到的那些标题，描述等等，所以我们在这里写一下，比如说，这是一个清华大学录取通知书生成器，然后是清华大学去，然后还可以这里上传一张分享截图，我们可以看到的封面图。
那之后在这样的设置下，我们就可以完成一个比较完整的案例了。。
