论文部分内容阅读
2007年3月16日,微雨,轻风
最近在浏览网站时,发现一些动态的图片新闻设计得非常有意思,不点击的时候,它自动一页一页循环演示,如果你感兴趣的新闻图片跳过去了也不用着急,点击下面相应的数字序号即可跳转回想要的图片上。这种设计,应用到Banner条上效果也是不错的。没找到它正式的名称,就暂且称之为“互动式Flash图片新闻”吧,下面我也试着做一个。如果你有更好的方法,欢迎到论坛上共享哦。
老规矩,还是先在Photoshop中处理好相应的图片素材。根据图片新闻版面的大小统一设置所有图片的大小,本例设置大小为300×220像素,分辨率为72像素/英寸。这里暂借小编们的照片代替一下,裁剪调整好图片大小后,在下方画出一个半透明的黑白渐变,将渐变的右侧划分出三块,添加数字(1、2、3),以备后期作为透明按钮的位置参考。最后的效果如图1所示,与图片对应的数字,作加亮处理。所有图片处理好之后,接下来进入Flash 8.0中制作。
![](https://www.soolun.com/img/pic.php?url=http://img.resource.qikan.cn/qkimages/dnah/dnah200705/dnah20070554-1-l.jpg)
图1
第1步 启动Flash 8.0,新建一个文档,单击下方属性面板中的“大小”,参考Photoshop中制作的图片大小,将文档尺寸设置为300×220像。背景设置为黑色,其他取默认值。
第2步 执行“文件→导入→导入到库”,导入上面准备好的新闻图片(本例共3张)。按Ctrl+L键调出库面板,将第1张图片拖放到第1帧的舞台上。右击第20帧,选择“插入空白关键帧”,然后将第2张图片也拖放到舞台中央。依此类推,在第40帧处放置第3张新闻图片。
小提示:将图片拖放到舞台上后,可在下方的属性面板中手动设置X和Y的值为0,这样可以快速将图片和舞台对齐。
第3步 现在按Ctrl+回车键预览一下效果,可以看到新闻图片像幻灯演示一样自动播放了。如果感觉播放的速度过快或过慢,可通过在各关键帧之间添加或删减帧的办法来控制播放速度。
第4步 按Ctrl+F8键创建新元件,类型选择“按钮”,名称可随意定,确定后自动进入按钮编辑窗口。按钮一共有四个帧,分别右击,“插入空白关键帧”。在每一帧里画一个红色矩形,因为我们要制作的是具有半透明感觉的按钮,所以可将颜色的Alpha值设置得低些(如10%)。
第5步 点击窗口上的“场景1”返回主场景,新建一个图层,点选新图层的第1帧,将刚刚制作的半透明按钮拖放到舞台中,使用任意变形工具调整它的大小,使它与照片中数字按钮图形的大小相当。右击这个按钮,选择“动作”,在下面打开的动作编辑面板中输入以下代码(见图2):
![](https://www.soolun.com/img/pic.php?url=http://img.resource.qikan.cn/qkimages/dnah/dnah200705/dnah20070554-2-l.jpg)
图2
on (release) {
gotoAndPlay(1);
}
这一命令的意思是:单击之后跳转到第1帧重新播放。
第6步 将这个按钮再复制粘贴两份,分别覆盖在其他两个数字上。动作脚本代码基本不变,仅将gotoAndPlay(1)语句中的数字分别改成20和40即可。现在再按Ctrl+回车键,哈,一个可自动播放,也可点击选择的互动式Flash图片新闻就制作完成了。当然,这个例子比较简单,还可以添加更复杂的控制,下次有机会咱们再慢慢聊吧。
相关链接
想看看我制作的实例么?可以到下面的地址下载上文中所完成的实例源文件。
网址:http://bbs.cfan.com.cn/forum-133-1.html
内幕揭密:虫虫实际上是个团队
有朋友来E-mail,想和“虫虫织网记”中的虫虫mm认识一下。这里要给大家揭开的一个内幕就是:虫虫实际上不是某一个人,而是统一在这一系列下的多个作者的成果。如果你在编织网页的过程中,对网页设计(尤其是美学方面的)有什么独到的见解和实战经验,非常欢迎你把它写出来,加入到“虫虫”行列中来。小编聊备薄酒,在此恭候大驾光临……
最近在浏览网站时,发现一些动态的图片新闻设计得非常有意思,不点击的时候,它自动一页一页循环演示,如果你感兴趣的新闻图片跳过去了也不用着急,点击下面相应的数字序号即可跳转回想要的图片上。这种设计,应用到Banner条上效果也是不错的。没找到它正式的名称,就暂且称之为“互动式Flash图片新闻”吧,下面我也试着做一个。如果你有更好的方法,欢迎到论坛上共享哦。
老规矩,还是先在Photoshop中处理好相应的图片素材。根据图片新闻版面的大小统一设置所有图片的大小,本例设置大小为300×220像素,分辨率为72像素/英寸。这里暂借小编们的照片代替一下,裁剪调整好图片大小后,在下方画出一个半透明的黑白渐变,将渐变的右侧划分出三块,添加数字(1、2、3),以备后期作为透明按钮的位置参考。最后的效果如图1所示,与图片对应的数字,作加亮处理。所有图片处理好之后,接下来进入Flash 8.0中制作。
![](https://www.soolun.com/img/pic.php?url=http://img.resource.qikan.cn/qkimages/dnah/dnah200705/dnah20070554-1-l.jpg)
图1
第1步 启动Flash 8.0,新建一个文档,单击下方属性面板中的“大小”,参考Photoshop中制作的图片大小,将文档尺寸设置为300×220像。背景设置为黑色,其他取默认值。
第2步 执行“文件→导入→导入到库”,导入上面准备好的新闻图片(本例共3张)。按Ctrl+L键调出库面板,将第1张图片拖放到第1帧的舞台上。右击第20帧,选择“插入空白关键帧”,然后将第2张图片也拖放到舞台中央。依此类推,在第40帧处放置第3张新闻图片。
小提示:将图片拖放到舞台上后,可在下方的属性面板中手动设置X和Y的值为0,这样可以快速将图片和舞台对齐。
第3步 现在按Ctrl+回车键预览一下效果,可以看到新闻图片像幻灯演示一样自动播放了。如果感觉播放的速度过快或过慢,可通过在各关键帧之间添加或删减帧的办法来控制播放速度。
第4步 按Ctrl+F8键创建新元件,类型选择“按钮”,名称可随意定,确定后自动进入按钮编辑窗口。按钮一共有四个帧,分别右击,“插入空白关键帧”。在每一帧里画一个红色矩形,因为我们要制作的是具有半透明感觉的按钮,所以可将颜色的Alpha值设置得低些(如10%)。
第5步 点击窗口上的“场景1”返回主场景,新建一个图层,点选新图层的第1帧,将刚刚制作的半透明按钮拖放到舞台中,使用任意变形工具调整它的大小,使它与照片中数字按钮图形的大小相当。右击这个按钮,选择“动作”,在下面打开的动作编辑面板中输入以下代码(见图2):
![](https://www.soolun.com/img/pic.php?url=http://img.resource.qikan.cn/qkimages/dnah/dnah200705/dnah20070554-2-l.jpg)
图2
on (release) {
gotoAndPlay(1);
}
这一命令的意思是:单击之后跳转到第1帧重新播放。
第6步 将这个按钮再复制粘贴两份,分别覆盖在其他两个数字上。动作脚本代码基本不变,仅将gotoAndPlay(1)语句中的数字分别改成20和40即可。现在再按Ctrl+回车键,哈,一个可自动播放,也可点击选择的互动式Flash图片新闻就制作完成了。当然,这个例子比较简单,还可以添加更复杂的控制,下次有机会咱们再慢慢聊吧。
相关链接
想看看我制作的实例么?可以到下面的地址下载上文中所完成的实例源文件。
网址:http://bbs.cfan.com.cn/forum-133-1.html
内幕揭密:虫虫实际上是个团队
有朋友来E-mail,想和“虫虫织网记”中的虫虫mm认识一下。这里要给大家揭开的一个内幕就是:虫虫实际上不是某一个人,而是统一在这一系列下的多个作者的成果。如果你在编织网页的过程中,对网页设计(尤其是美学方面的)有什么独到的见解和实战经验,非常欢迎你把它写出来,加入到“虫虫”行列中来。小编聊备薄酒,在此恭候大驾光临……