打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
(原创)图片连续滚动带链接
来源:原创      作者:黄舒奇     发表时间:2013年7月25日
(原创)图片连续滚动带链接(源文件下载)
网站在做产品介绍和做广告时,有时会用上这个效果,当鼠标放在连续滚动的图片上时,图片会自动停止不动,并弹出产品内容,当鼠标点击后,会指向产品所在的页面,这是怎么实现的呢,用代码可以,但在FLASH里能实现吗?回答是完全可以的。我们就按上面的要求制作一个吧。
效果浏览:   源文件下载
hsq80网站安装了防盗链,这里也不支持SWF,所以删除了浏览   舒奇与2015.8.28修改
提示:本实例用的是FLASH8软件,素材仍用上一个“图片连续滚动”教程。
第一步:打开FLASH8软件,新建一个文档,设置宽为640象素,高为94象素,帧频30,如图1
图1  设置文档属性
第二步:单击菜单“导入”-“导入到库”,将事先准备好的五张图片导入进来。
第三步:单击图层1第1帧,从库里拖出第1张图片,然后单击菜单“窗口”-“对齐”,在右上方对齐菜单窗口中设置左对齐,上对齐,如图2
图2 设置对齐
第四步:再分别从库里拖出第2、3、4、5张图片,中间大概留有一点间隙,最后1张设置右对齐,然后将图片全部选择上,将相对于舞按上来,单击“水平平均间隔”按钮。如图3
图3 设置水平平均间隔
第五步: 将相对于舞台按钮点下去,再单击“垂直中齐”,如图4。
图4  设置“垂直中齐”
第六步:对着第1张图片单击右键,选择“转换为元件”如图5
图5  转换为元件
这时会弹出一个“转换为元件”对话框,在名称中我们输入“按钮”,在类型中选择“按钮”,单击“确定”。如图6,用同样方法分别把后面四张图片也转换为“按钮”并命名为“按钮2、3、4、5。
图6 转换为按钮元件
第七步:制作弹出内容动画 。单击菜单“插入”-“新建元件” ,在弹出的对话框名称中输入”按钮1内容”,在类型中选择“影片剪辑”,单击“确定”。如图
图7  按钮1动画内容
在按钮1影片剪辑编辑区中选择文本工具,字体选择你喜欢的字体,字号选择18,输入“FLASH素材”字,如图8  (注意:设置字体宽度不得超过图片宽度,我们用的图片宽是125,字体宽用的是121)
图8 输入文字
选中字体,按键盘ctrl+b二次,打散字体,如图9
图9 打散字体
第八步:选中所有的字体单击右键,选择“转换为元件”,在名称中输入“FLASH素材”在类型中选择“图形”,单击“确定”,如图10
图10 将字体转换为图形
第九步:选中转变后的图形,单击变形“选择“垂直中齐”,“水平中齐”,如图11
图11 设置对齐
第十步:在图层1第30帧处插入关键帧,,单击第30帧,(现在修改为15帧)再单击字体,设置下面的属性“Alpha”为100%。如图12
图12  设置Alpha值为100
第十一步:单击第1帧,再单击字体,设置字体属性 “Alpha”为“0”,同时设置图形宽为20,高为2.9,然后选中图形,单击对齐,选择垂直中齐,水平中齐。如衅13
图13  设置图形
第十二步:右键单击第1帧, 选择“创建补间动画”。如图14
图14 创建补间动画
第十三步:单击第30帧,然后在属性左下,单击“动作”,在编辑区中输入“ stop();”如图15。
图15  在编辑区中输入stop();
第十四步:分别从第七步到十三步为按钮2、3、4、5制作内容动画。
第十五步:单击场景1,为五个按钮设置动作。如图16
图16 进入场景1
第十六步:双击场景1里的第一个按钮,将指针经过、按下、点击设置为关键帧,如图17
图17  设置关键帧
第十七步:锁住按钮编辑区图层1,新建图层2,在“指针经过”、“按下”、“点击”均插入关键空白帧,然后单击指针经过空白帧,将库里的按钮1内容影片剪辑拖到场景中来,设置居中,如图18|
图18  将影片剪辑拖入场景中
第十八步:重复十六、十七步,为按钮2、3、4、5加入影片剪辑。
第十九步:为每个按钮增加动作。进入场景1,选中第一个按钮(注意一定要选中按钮,否则会提示出错)单击右键,选择“动作”在“动作”如图19
图19   选择“动作”
第二十步:编辑区中设置第一个动作,当鼠标放上去的时候,图片停止滚动,操作方法如下:单击动作+号,向右选择“影片剪辑控制”,再向右单击“on”,如图20
图20  为按钮增加第一个动作
在对话框中双击“rollOver”,(是鼠标滑过的时候)如图21
图21  设置当鼠标滑过的时候
将光标放在第2行{括号前面,然后单击动作+号,选择“全局函数”-“时间轴控制”-“stop”。如图22。
图22  “当鼠标滑过的时候,停止滚动”
设置后编辑区内容如图23
图23  编辑区内容
第二十一步:在编辑区中设置第二个动作,当鼠标点击的时候打开一个页面,方法如下:将光标放在第四行,然后单击动作+号,向右选择“影片剪辑控制”,再向右单击“on”,和图20一样,在对话框中双击“ rollOut”(当鼠标滑离的时候)开始播放。如图24
图24 当鼠标滑离的时候开始播放
第二十二步:在编辑区中设置第三个动作,当鼠标点击的时候打开一个页面,方法如下:将光标放在第四行,然后单击动作+号,向右选择“影片剪辑控制”,再向右单击“on”,和图20一样,在对话框中双击“ release”(当鼠标释放的时候)如图24
图25 选择release
然后将光标放在第五行{括号前,单击+号,选择“全局函数”-“浏览器/网络”-“getURL”,如图25
图26 选择“getURL”
在括号里输入 "http://www.hsq80.com/tmflash-0.htm", "_blank",完成后如图26
图27 动作语言含义
将五个按钮都按以上方法添加动作,输入不同的网址。
第二十三步:进入场景1,在图层1第400帧处插入“关键帧”,然后将所有图片向前移动,如图27
图28  移动图片
第二十四步:右键单击图层1第1帧,选择“创建补间动画”。
第二十五步:复制图层1所有帧,然后锁上图层1,新建图层2,删除图层2空白帧,然后对着图层
2第1帧单击右键,粘贴帧。
第二十六步:解开图层1小锁,复制第1关键帧,再锁上图层1,粘到图层2第400帧处。
第二十七步:关闭图层1眼睛,单击图层2第1帧,将图片第一张移止最后,如图29
图29  移动图片
第二十八步:打开图层1眼睛,锁上图层1,单击图层2第400帧处,将图片调整如图30
图30  细心调整图片间隙
第二十九步:按键盘ctrl+Enter进行测试。有打顿现象时再进行调整,直至满意为止。
全文结束。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
破解禁止复制的简单方法
如何制作幻灯片
淘宝旺铺促销模板详细制作过程(多图)
【盘点】高效制作优质PPT的技巧
使用Photoshop批量去除数码照片的时间日期
flash《金陵十二钗》及其制作步骤
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服