下面我们来学习一下iH5高级教程：HTML5建站，图片瀑布流的设计
工具/原料
iH5
方法/步骤
1、1.设置舞台大小。由于是PC作品，为了适应PC大小，且瀑布流比较长，所以我们将舞台设置宽为1366px，高为3000px，再设置其背景颜色。2.选中舞台，点击中文字体，在舞台下添加页面标题“Outdoors”、副标题“竖向效果”和“横向效果”的文本。选中舞台，添加2个矩形，分别重命名为标题背景和矩形1。3.选中舞台，点击页面工具，添加一个页面。为了方便管理我们用来制作瀑布流的图片，我们可以添加一个矩形在页面下，选中页面，点击矩形工具，在舞台上画一个框，重命名为图片组，设置属性面板。4.上传初始显示的图片。在“图片组”对象下添加4个矩形，分别重命名为第一列、第二列、第三列和第四列。先处理第一列的图片，在第一列下添加两张图片，并将其的剪切效果设置为YES后移动到合适的位置。再分别在图片下添加两个矩形，分别设置两个，不同的背景颜色。第二三四列如何类推，跟第一列是同样的做法。
2、1.艮劁飨戽以第一列的第一个时间轴为示范，其后的时间轴做法是一样的。选中“第一列”对象，点击时间轴工具，选中时间轴，点击矩形工具，下添加一个矩形，设置其属性面板的剪切为YES。在案颖蓟段扛例中的矩形都是无边框的，但由于矩形使用的是svg的画法，所以如果要设置图形为无边框，线条宽度最小值为1px，是不能设置为0px的，但可以在线条颜色的输入框中输入“none”，表示线条颜色为无。2.选中矩形1，在矩形1下上传一张图片。由于矩形1设置了剪切，这张图片是矩形1的子对象，所以矩形1的范围以外，图片是不会显示的。为了让图片紧贴矩形的位置，我们将图片的坐标设置为（0,0）。3.制作一个显示的过程。还需要分别在图片下添加一个矩形和在图片的父对象“矩形1”下添加一个矩形。并为他们和图片添加一个轨迹。4.添加关键帧。作为背景的矩形以及图片的关键帧设置的是竖直方向的从上到下的位移效果，关键帧之间只需要改变y坐标。而作为图片下方的矩形则是从下到上的效果。5.因为后面的时间轴效果是一样的，如此类推制作好第一列的其他6个时间轴以及第四列下的时间轴效果。
3、1.添加小的透明按钮在相应的位置。这些透明按钮的作用是为了让其显示的时候瀑布流图片显示。每一个有瀑布流效果的图片都要制作一个透明按钮放在页面1下。2.选中页面，点击事件工具，添加多个事件。事件的触发条件是对象出现，对象分别是这些页面下的透明按钮，目标对象是对应位置要显示图片的时间轴。目标动作时继续播放（或从头播放）。
4、1.复制页面1，选中舞台，点击鼠标右键后选择粘贴。再将页面2拖动到页面1上面。2.将时间轴里的移动端关键帧分别选中，将其更改成x坐标上的位移（即横向移动）。其中每个时间轴的关键帧中y坐标是不变的。
5、1.页面1是竖向瀑布流的效果，页面2是横向瀑布流的效果。所以点击子标题1跳转页面1，点击子标题2跳转页面2。分别选中在子标题1和子标题2，点击事件工具，添加一个事件。触发条件是点击，目标对象都是舞台，目标动作是跳转页面，页面分别选择页面1和页面2。
6、先行知识：事件、时间轴、矩重点控件： 页面、事件、獯骓窑嗔透明按钮、剪切、时间轴、轨迹、矩形重点事件：触发对象：页面1触发条件：对象出现醑穿哩侬对象：凳子透明按钮目标对象：凳子时间轴目标动作：继续播放TIPS：1.剪切属性：剪切属性设置了YES，那透明按钮的子对象的坐标如果超过了透明按钮所画出的框的范围，那么就不会显示。如果剪切属性设置了NO，那么即便其子对象的坐标超过了透明按钮所画框的范围，那么子对象依然显示。使用了透明按钮的剪切效果可以制作遮罩的效果，如本案例中利用了透明按钮剪切的时间轴动画效果。2.矩形无边框属性：由于矩形使用的是svg的画法，所以如果要设置图形为无边框，线条宽度最小值为1px，是不能设置为0px的。但是在线条颜色处，我们可以有两种方法：第一种是在线条颜色的输入框中输入“none”，表示线条颜色为无；第二种是如果有背景颜色的情况下，复制背景颜色输入框处的颜色代号复制到线条颜色的输入框。3.时间轴：本案例中的时间轴动画实际上是图片对象的横向或纵向位移，在设置关键帧时，如果是横向位移只需要更改y轴坐标，如果是纵向位移只需要更改x轴坐标。