# 拖动长图类H5制作 **设置首页** 如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面 ![](https://box.kancloud.cn/9f31ad0c1bc7f66935fcf47d36cb6c20_900x501.png) 可为每个素材添加预置动画效果 ![](https://box.kancloud.cn/fc5af91924c5ee7996a5d3e75e3cf66a_900x504.png) 将“点击”图标右键转换为元件,双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。 ![](https://box.kancloud.cn/33021aa4f804dceed93db4e9e134574c_900x504.png) **设置长图元件动画** 新建图层,在第3帧插入帧,插入关键帧,同时添加进长图背景素材 ![](https://box.kancloud.cn/bdecff7182d30ee0ca2f6e20dfe97e7a_900x504.png) 将背景图片右键转换为元件,进入元件页面。 新建图层,分层导入其他图片素材。 ![](https://box.kancloud.cn/f6c5d28f4a3f09a6da1ff8a1d86c30c7_900x507.png) 为所有素材图层插入关键帧动画,分别设置素材的动画效果,例如给人物素材设置放大缩小动画,为“向左滑动”图标设置向左滑动动画效果。 ![](https://box.kancloud.cn/4bca8c17198d6d52ee20ce5bdbfb362f_900x505.png) 回到舞台,补全所有图层的帧数,为长图元件添加预置动画,如图为“向右移入” ![](https://box.kancloud.cn/b0f06c85d210fdfda93d8e3e3915d33b_900x505.png) 如下图,为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”,添加矩形,为其添加一个“出现即暂停”的行为。注意随时保存作品。 ![](https://box.kancloud.cn/8aff0237d97b111151ebe0d5bbb1b975_900x507.png) 选中长图元件,在其属性栏内设置“拖动/旋转”为“水平拖动” ![](https://box.kancloud.cn/c9c6db367c54870281b3aea3c8c6609b_900x495.png) **设置点击出现提示效果** 新建图层“提示层”,在第4帧插入空白关键帧,同时导入原先预备好的提示素材。可为其添加预置动画效果等。 ![](https://box.kancloud.cn/e4e462164510038eff5f9b34ac418944_900x500.png) 新建两个按钮层,分别在一个图层的第3帧放置“分享”按钮,在另一个图层第4帧提示页面放置一个“返回”按钮。 ![](https://box.kancloud.cn/b6149b8d9de0746998cbe8b041e3fed1_900x505.png) 补全“行为层”及其他图层帧数,为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为 ![](https://box.kancloud.cn/d068d34c78a7bf7f4eeddd78faca3bc6_900x511.png) 为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画,同理可为接下来的人物素材设置提示出现消失的动画。 ![](https://box.kancloud.cn/eff35bb3079abd6ff913a24cd4d2e7c5_900x505.png) 设置分享动画的提示:如下图,新建“分享”图层,添加分享提示的素材,命名为“分享”,将其移至舞台之外。 ![](https://box.kancloud.cn/a521eb03a63c360a339844e5ac711b7f_900x506.png) 为“分享”按钮添加“改变元素属性”行为 属性控制→改变元素属性→触发条件:点击。 设置“参数” 元素名称:“分享” 元素属性:“左” 赋值方式:“用设置的值替换现有值” 取值:“0” ![](https://box.kancloud.cn/60a43500a696f09e54095517eb19906e_900x504.png) ![](https://box.kancloud.cn/f8476c397c77137c1bd40437c190d1e3_900x419.png) 同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为,即点击将其移至舞台之外。 ![](https://box.kancloud.cn/4f0b83b533fe6d502489ef6ebced06b2_900x393.png) 观看本节视频教程: http://cdn1.mugeda.com/course/4/4.1/4.1.10.mp4