在网页中时常可以见到这样的广告效果:广告主体由几张不同内容的图片构成,当鼠标移动到不同的标题上时,会随之显示不同的图片,还伴有切换效果,各图片均有相关链接。在闪吧首页,新浪体育首页等都有这样的广告条。其优点是可以在有限的版块内投入更多的广告,同时生动的切换效果不会让人觉得单调,相比不动的图片更具有欣赏性。本文选择一个比较有代表性的作为分析,希望抛砖引玉,带动大家的交流。
[url=http://space.flash8.net/space/batch.download.php?aid=94296][/url]
一、制作思路:
鼠标移动到某标题上时(如1,2,3,4,5),用num计下其位置,设该图片的tAction属性为true,并显示该图,同时淡隐该图的标题,并控制其余几个标题移动。当鼠标移动到另一标题上时,num的值改变,原图片淡隐,标题浮现,同时其余的图片各自走位。当鼠标没有监控到鼠标时,按时间间隔自动循环播放。
二、制作过程:
1、准备五张图片,大小300*60,转换为影片剪辑,命名为p1~p5,对齐位置(0,0)。
[url=http://space.flash8.net/space/batch.download.php?aid=94290]
[/url]
[url=http://space.flash8.net/space/batch.download.php?aid=94291]
[/url]
[url=http://space.flash8.net/space/batch.download.php?aid=94292]
[/url]
[url=http://space.flash8.net/space/batch.download.php?aid=94293]
[/url]
[url=http://space.flash8.net/space/batch.download.php?aid=94294]
[/url]
2、Ctrl+F8,新建MC名为pic,在图层1上分五帧放置p1~p5,在图层二上添加代码:
[url=http://space.flash8.net/space/batch.download.php?aid=94298]
[/url]
this.gotoAndStop(_parent.num);
3、制作标题,Ctrl+F8新建MC名为title,在title 中画一圆边矩形,大小为36*60,对齐位置(2,0);不以原点对齐是为了能显示圆角,以便美观。新建MC名为title5,在第一层分五帧放置五个title,调整它们的色调使之显不同颜色(如果不嫌麻烦,分别画五个不同颜色的title也可以)。在第二层放置五个文本,分别输入1,2,3,4,5如图:
[url=http://space.flash8.net/space/batch.download.php?aid=94299]
[/url]
图1
[url=http://space.flash8.net/space/batch.download.php?aid=94295]
[/url]
图2
(图2是为便于理解将五张放在一起的效果,实际是不会出现这样的效果的)
4、制作主动画。新建MC名为movie,在图层一放置影片剪辑pic,实例名为img;在图层二放置影片剪辑title5,实例名为title;在图层三放置一按钮btn,实例名也为btn,尺寸为600*60;以上三元件对齐位置均为(0,0)。图层四添加代码:
wImg = 300;
wSpc = 2;
wSA = 42;
x1 = 0;
x2 = 42;
x3 = 84;
x4 = 126;
x5 = 168;
x0 = 0;
xa = 302;
xb = 344;
xc = 386;
xd = 428;
num = this._name.charAt(this._name.length-1);
this.img.gotoAndStop(num);
this.title.gotoAndStop(num);
this.btn.onRollOver = function() {
_root["movie"+num] = true;
_root.code = num;
_root.tAction = true;
_root.dTime = _root.timer;
};
this.btn.onRollOut = function() {
_root.tAction = false;
};
this.btn.onRelease = function() {
getURL(_root.urlArray[num], _root.window);
};
this.onEnterFrame = function() {
if (_root.code == 1) {
xpos = [0, 0, xa, xb, xc, xd];
ap = [0, 0, 100, 100, 100, 100];
xp = [0, 100, 0, 0, 0, 0];
} else if (_root.code == 2) {
xpos = [0, 0, x2, xb, xc, xd];
ap = [0, 100, 0, 100, 100, 100];
xp = [0, 0, 100, 0, 0, 0];
} else if (_root.code == 3) {
xpos = [0, 0, x2, x3, xc, xd];
ap = [0, 100, 100, 0, 100, 100];
xp = [0, 0, 0, 100, 0, 0];
} else if (_root.code == 4) {
xpos = [0, 0, x2, x3, x4, xd];
ap = [0, 100, 100, 100, 0, 100];
xp = [0, 0, 0, 0, 100, 0];
} else if (_root.code == 5) {
xpos = [0, 0, x2, x3, x4, x5];
ap = [0, 100, 100, 100, 100, 0];
xp = [0, 0, 0, 0, 0, 100];
}
this._x = this._x+(xpos[num]-this._x)*_root.speed;
this.title._alpha = this.title._alpha+(ap[num]-this.title._alpha)*_root.speed;
this.img._alpha = this.img._alpha+(xp[num]-this.img._alpha)*_root.speed;
};
效果图:
[url=http://space.flash8.net/space/batch.download.php?aid=94297]
[/url]
5、最后到主舞台。分别在五个图层的第二帧添加五个影片剪辑movie,实例名分别为movie1~movie5;在第六图层加入一个空影片剪辑,选中该空影片剪辑,添加代码:
onClipEvent (enterFrame) {
if (_root.tAction == false) {
if (_root.dTime
最后新建一层作为AS层,在第一帧添加:
Stage.scaleMode = "noScale";
menuNum = 5;
url01 = "";
url02 = ""
url03 = "";
url04 = "";
url05 = "";
window = "_blank";
第二帧添加:
allMenuNum = 5;
numArray = new Array(allMenuNum);
for (i=1; i
第五帧添加:
this.stop();
_root.tAction = false;
效果图:
[url=http://space.flash8.net/space/batch.download.php?aid=94300]
[/url]
Ctrl+Enter 测试效果。
本文转自:http://www.5uflash.com/flashjiaocheng/Flashjichucaozuo/3356.html
发表评论
-
精美全Flash个人网站的制作全程解析
2010-04-10 14:15 614原文件下载地址: http:/ ... -
asp+access+as3+flash留言本教程——flash篇
2010-04-10 14:15 619[1b] 需要源文件留下email [/1b] [1b]成业作 ... -
TOMCAT+JSP+ACCESS+FLASH连接数据库
2010-04-10 14:15 575很多新人问FLASH和数据库连接的方法,这里介绍一下,后台可 ... -
Flash站技术应用(7)—FileReference路径获取问题
2010-04-10 14:14 612关于flash后台通信问题,大家先看下 火山的Flash+a ... -
Flash全站的技术应用-Flash也能播放wmv,wma
2010-04-10 14:14 678前言 Flash能播放除flv,m ... -
flash中NetConnection与NetStream知识整理
2010-04-10 09:34 821NetConnection只有一个connect方法,NetS ... -
flv制作工具大全
2010-04-10 09:34 690Collected links to Flash Vid ... -
FLV播放器汇总
2010-04-10 09:34 676http://www.dengjie.com/weblog/c ... -
flash视频文件自动的在服务器端转换成FLV文件的FFMPEG的编译方法
2010-04-10 09:33 700在闪吧看别人的帖子看 ... -
flash视频文件自动的在服务器端转换成FLV文件的FFMPEG的编译方法
2010-04-10 09:33 708在闪吧看别人的帖子看 ... -
flash9/as3访问WebService的暂时替代方法
2010-04-09 12:31 1138在前面写了 flash9/as3访问WebService的的方 ... -
《as3中文帮助(PDF&CHM)》下载
2010-04-09 12:31 1403官方的下载地址(PDF格式): ActionScript 3. ... -
《as3中文帮助(PDF&CHM)》下载
2010-04-09 12:30 968官方的下载地址(PDF格式): ActionScript 3. ... -
AS3数据存取方式效率比较
2010-04-09 12:30 567通常我们存取数据有如下几种方式:Array, Object, ... -
AS3数据存取方式效率比较
2010-04-09 12:30 591通常我们存取数据有如下几种方式:Array, Object, ... -
一个AS3 socket解码设计的错误思路
2010-04-09 08:08 601调试游戏确实是一项磨人的工作。难怪很多业内人都喜欢说“好游戏是 ... -
一个AS3 socket解码设计的错误思路
2010-04-09 08:08 649调试游戏确实是一项磨人的工作。难怪很多业内人都喜欢说“好游戏是 ... -
SWF间的双向通信
2010-04-09 08:08 700演示文件源码下载: swfs_communication.r ... -
SWF间的双向通信
2010-04-09 08:07 620演示文件源码下载: swfs_communication.r ... -
Flash相册加载图片完毕等比缩放的类
2010-04-09 08:07 680每次做相册类的flash的 ...
相关推荐
5屏FLASH广告图片切换 5屏FLASH广告图片切换 5屏FLASH广告图片切换
仿新浪flash广告切换~网站上很流行 可编辑图片
flash 图片切换广告 xml文件配置图片路径 带fla文件
动态flash广告图片切换,可以加图片连接,图片标题
flash图片切换广告! 很值得下载看看!资源免费,大家分享!!
新浪flash广告切换,可实现5个图片进行轮转,可替换图片,可编辑图片的文字信息。。。。经典flash图片轮转,用于优化界面
适合网站首页的大屏Flash图片切换特效 适合设计类网站的大幅Flash图片切换特效,大气美观,艺术美感十足,特别吸引人的眼球,当然也可以用来制作广告。可以自动播放也可以手动控制上一张、下一张,它的长和宽在调用...
以前用flash的广告切换效果做焦点图片新闻,一直对搜索引擎不是很好,现放上用javascript写的,为方便全部放在了一个html文件中,自己分离一下就可以用了.
简单实用flash广告切换效果,实现轮播图片展示效果。
中国人网flash图片切换广告代码 JQuery,div+css,网页特效,广告设计
Flash和JS实现图片切换,外加一幅广告对联。
Flash广告切换,支持外部读取图片,并可以通过修改xml来控制。
图片浏览效果,图片自动切换效果,Flash图片轮显, 广告图片切换
trs置标中应用 js实现flash图片切换 分页 漂浮广告 利用trs置标实现
包括一个五屏图文切换的广告切换效果和一个数字排列七屏切换的广告效果,图片过渡效果是渐入渐出的。用的是swfobject.js加flash加载效果
jQuery仿动感flash自动滚动图片切换广告插件.rar
flash 7屏图片切换,flash+xml焦点图广告代码[缩略],下载吧
本图片切换是常见的网站一些图片切换,假如停留三秒内会自动换成另一张图片。里面有web.xml,flash,等需要的文件
源代码实现网上流行的FLASH图片切换效果,纯AS脚本制作,并做了详细的的注释,共享出来希望对想做FLASH动画或有兴趣的朋友有所帮助。
4屏图片切换广告代码 4屏图片切换广告代码4屏图片切换广告代码 4屏图片切换广告代码