单纯用Flash制作网页焦点图片转换
2010-08-07 12:19
148 查看
效果如下:
![](http://hiphotos.baidu.com/%D0%A1%BD%A3%BF%CDgg/pic/item/9e218c6da84578cd421694a2.jpg)
首先,把需要用到的材料准备好,要展示的图片素材,我拿五个图为例,自己制作的五个按钮并编上号,这是必须的。
其次,把图片素材导入到舞台,新建5个图层,并且每个图层放一张,然后选中图片,按F8键,转换为图形原件,这五张图片都转换成图形元件。(这样有利于设置透明度,实现渐变效果,接着往下看~)
再次,做渐变效果,要使得每个图片都播放一定的帧数,以第一张图片播放30帧为例,就把这图片所在的图层添加30帧,并且把第5帧和第25帧分别变为关键帧,单击第一帧,把图形元件的Alpha值调整为0(Alpha设定在元件属性,颜色的下拉菜单里),这样图片就成了透明状态,然后添加补间动画,这图片就会由透明到显示的渐变了。同样,把第30帧的图形元件Alpha值设置为0,并且添加补间动画,这样图片就又由显示到透明了,同理,把其他四张图片都这样做出来,图层二由30帧到60帧,图层三由60帧到90帧,依次排列好,按Ctrl+Enter查看下效果,就是五张图片循环播放了。
等等,还有,在每张图播放的首帧,例:图层一的第一帧的帧标签里输入"pic1”,图层二的第三十帧帧标签输入"pic2",依次类推。(看下面就明白了)。
因为按钮还没有添加,把按钮添加到图片下方,排列好(最好使用对齐工具排列),在每个按钮的动作面板里输入命令:
on(release){
this.gotoAndPlay("pic1");
}
这是第一个按钮,第二个按钮的动作就复制过去,但是把"pic1"改为"pic2",其他的也就明白了吧~
这是让鼠标单击第一个按钮时播放第一个图,单击第二个按钮时播放第二个图,其他类似。
还有个问题,这样功能是实现了,但是当自动播放每个图片时,按钮没有颜色显示,分不清这到底是哪个图片啊,哈哈,这就是我自己摸索出来的经验,给大家分享啦。如下:
把按钮里面的第二针,也就是“指针经过”帧的所有内容完整的复制一下(也就是按钮变色时的状态),然后在舞台时间轴上新建一层,注意,一定要在最上层,把这个类似按钮复制到舞台上,按Ctrl+G组合(毕竟是文字和方框两项,不好摆放),并把它覆盖到对应的按钮上面,这是第一个,在第30帧添加空白关键帧,用同样的方法把按钮二覆盖,在第60帧添加空白关键帧,把按钮三覆盖,依次类推。保证播放每个图片时,下面的按钮对应显示一定颜色,为区分图片播放到第几个了。
这样基本就完成了,还有如果有要求单击图片跳转到某个网页,那么就可以直接做一个透明按钮,放到图片上面,按钮的动作里面写上代码就可以了:on(release){this.getURL("http://www.baidu.com")}
![](http://hiphotos.baidu.com/%D0%A1%BD%A3%BF%CDgg/pic/item/9e218c6da84578cd421694a2.jpg)
首先,把需要用到的材料准备好,要展示的图片素材,我拿五个图为例,自己制作的五个按钮并编上号,这是必须的。
其次,把图片素材导入到舞台,新建5个图层,并且每个图层放一张,然后选中图片,按F8键,转换为图形原件,这五张图片都转换成图形元件。(这样有利于设置透明度,实现渐变效果,接着往下看~)
再次,做渐变效果,要使得每个图片都播放一定的帧数,以第一张图片播放30帧为例,就把这图片所在的图层添加30帧,并且把第5帧和第25帧分别变为关键帧,单击第一帧,把图形元件的Alpha值调整为0(Alpha设定在元件属性,颜色的下拉菜单里),这样图片就成了透明状态,然后添加补间动画,这图片就会由透明到显示的渐变了。同样,把第30帧的图形元件Alpha值设置为0,并且添加补间动画,这样图片就又由显示到透明了,同理,把其他四张图片都这样做出来,图层二由30帧到60帧,图层三由60帧到90帧,依次排列好,按Ctrl+Enter查看下效果,就是五张图片循环播放了。
等等,还有,在每张图播放的首帧,例:图层一的第一帧的帧标签里输入"pic1”,图层二的第三十帧帧标签输入"pic2",依次类推。(看下面就明白了)。
因为按钮还没有添加,把按钮添加到图片下方,排列好(最好使用对齐工具排列),在每个按钮的动作面板里输入命令:
on(release){
this.gotoAndPlay("pic1");
}
这是第一个按钮,第二个按钮的动作就复制过去,但是把"pic1"改为"pic2",其他的也就明白了吧~
这是让鼠标单击第一个按钮时播放第一个图,单击第二个按钮时播放第二个图,其他类似。
还有个问题,这样功能是实现了,但是当自动播放每个图片时,按钮没有颜色显示,分不清这到底是哪个图片啊,哈哈,这就是我自己摸索出来的经验,给大家分享啦。如下:
把按钮里面的第二针,也就是“指针经过”帧的所有内容完整的复制一下(也就是按钮变色时的状态),然后在舞台时间轴上新建一层,注意,一定要在最上层,把这个类似按钮复制到舞台上,按Ctrl+G组合(毕竟是文字和方框两项,不好摆放),并把它覆盖到对应的按钮上面,这是第一个,在第30帧添加空白关键帧,用同样的方法把按钮二覆盖,在第60帧添加空白关键帧,把按钮三覆盖,依次类推。保证播放每个图片时,下面的按钮对应显示一定颜色,为区分图片播放到第几个了。
这样基本就完成了,还有如果有要求单击图片跳转到某个网页,那么就可以直接做一个透明按钮,放到图片上面,按钮的动作里面写上代码就可以了:on(release){this.getURL("http://www.baidu.com")}
相关文章推荐
- 遮罩的妙用-Flash-网页制作
- 旋转的花朵-实例教学-Flash-网页制作
- 制作网页数据图表/曲线图【flash版本】
- 基础动画-动态遮罩教程-Flash-网页制作
- 运动的矩形-实例教学-Flash-网页制作
- 网页制作常用代码(文字颜色/字体/插入图片/flash等
- myFocus制作网页焦点图 实现图片轮播效果
- 控制影片剪辑【基础】-实例教学-Flash-网页制作
- 简单的伸缩菜单-实例教学-Flash-网页制作
- 诚求“FLASH制作网页动画片的实现”相关资料
- 网页制作全套视频教程下载(包括html,ASP,Flash,Photoshop)
- FLASH2004时间轴特效的应用-实例教学-Flash-网页制作
- [中文版Dreamweaver.Flash.Photoshop网页制作从入门到精通(CS4版)].杨颖&张永雄 pdf
- 求“FLASH制作网页动画片的实现”相关资料
- 旋转的花朵-实例教学-Flash-网页制作
- 『网页制作小技巧』定制调用 Flash 函数
- 【荐】来自搜狐图片频道JS+flash控制可上下翻页的焦点图代码_网页代码站(www.webdm.cn)
- 运动的矩形-实例教学-Flash-网页制作
- Flash+JS打造鼠标移上去显示缩略图的焦点图_网页代码站(www.webdm.cn)
- 简单的伸缩菜单-实例教学-Flash-网页制作