iH5高级教程：HTML5建站，图片瀑布流的设计

1、设置舞台大小。由于是PC作品，为了适应PC大小，且瀑布流比较长，所以我们将舞台设置宽为1366px，高为3000px，再设置其背景颜色。2.选中舞台，点击中文字体，在舞台下添加页面标题“Outdoors”、副标题“竖向效果”和“横向效果”的文本。选中舞台，添加2个矩形，分别重命名为标题背景和矩形1。3.选中舞台，点击页面工具，添加一个页面。为了方便管理我们用来制作瀑布流的图片，我们可以添加一个矩形在页面下，选中页面，点击矩形工具，在舞台上画一个框，重命名为图片组，设置属性面板。4.上传初始显示的图片。在“图片组”对象下添加4个矩形，分别重命名为第一列、第二列、第三列和第四列。先处理第一列的图片，在第一列下添加两张图片，并将其的剪切效果设置为YES后移动到合适的位置。再分别在图片下添加两个矩形，分别设置两个，不同的背景颜色。第二三四列如何类推，跟第一列是同样的做法。

5、页面1是竖向瀑布流的效果，页面2是横向瀑布流的效果。所以点击子标题1跳转页面1，点击子标题2跳转页面2。分别选中在子标题1和子标题2，点击事件工具，添加一个事件。触发条件是点击，目标对象都是舞台，目标动作是跳转页面，页面分别选择页面1和页面2。

6、先行知识：事件、时间轴、矩重点控件：页面、事件、獯骓窑嗔透明按钮、剪切、时间轴、轨迹、矩形重点事件：触发对象：页面1触发条件：对象出现对象：凳子透明按钮目标对象：凳子时间轴目标动作：继续播放TIPS：1.剪切属性：剪切属性设置了YES，那透明按钮的子对象的坐标如果超过了透明按钮所画出的框的范围，那么就不会显示。如果剪切属性设置了NO，那么即便其子对象的坐标超过了透明按钮所画框的范围，那么子对象依然显示。使用了透明按钮的剪切效果可以制作遮罩的效果，如本案例中利用了透明按钮剪切的时间轴动画效果。2.矩形无边框属性：由于矩形使用的是svg的画法，所以如果要设置图形为无边框，线条宽度最小值为1px，是不能设置为0px的。但是在线条颜色处，我们可以有两种方法：第一种是在线条颜色的输入框中输入“none”，表示线条颜色为无；第二种是如果有背景颜色的情况下，复制背景颜色输入框处的颜色代号复制到线条颜色的输入框。3.时间轴：本案例中的时间轴动画实际上是图片对象的横向或纵向位移，在设置关键帧时，如果是横向位移只需要更改y轴坐标，如果是纵向位移只需要更改x轴坐标。