论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash教程
Tag:flash cs,flash 8,鼠绘,as,手绘,工具,文字,loading,入门,初学,mc,影片剪辑,声音,mtv,游戏,引导,遮罩,菜单,补间,广告条,时钟,视频教程

广告类图片的切换

文章类别:Flash | 发表日期:2008-9-21 20:10:21

  
在网页中时常可以见到这样的广告效果:广告主体由几张不同内容的图片构成,当鼠标移动到不同的标题上时,会随之显示不同的图片,还伴有切换效果,各图片均有相关链接。在闪吧首页,新浪体育首页等都有这样的广告条。其优点是可以在有限的版块内投入更多的广告,同时生动的切换效果不会让人觉得单调,相比不动的图片更具有欣赏性。本文选择一个比较有代表性的作为分析,希望抛砖引玉,带动大家的交流。

/UploadTeach/200805/2008052815633351.swf

一、制作思路:
鼠标移动到某标题上时(如1,2,3,4,5),用num计下其位置,设该图片的tAction属性为true,并显示该图,同时淡隐该图的标题,并控制其余几个标题移动。当鼠标移动到另一标题上时,num的值改变,原图片淡隐,标题浮现,同时其余的图片各自走位。当鼠标没有监控到鼠标时,按时间间隔自动循环播放。
 
二、制作过程:
1、预备五张图片,大小300*60,转换为影片剪辑,命名为p1~p5,对齐位置(0,0)。
 
 
  
 
 
 
2、Ctrl+F8,新建MC名为pic,在图层1上分五帧放置p1~p5,在图层二上添加代码:
 
this.gotoAndStop(_parent.num);
3、制作标题,Ctrl+F8新建MC名为title,在title 中画一圆边矩形,大小为36*60,对齐位置(2,0);不以原点对齐是为了能显示圆角,以便美观。新建MC名为title5,在第一层分五帧放置五个title,调整它们的色调使之显不同颜色(假如不嫌麻烦,分别画五个不同颜色的title也可以)。在第二层放置五个文本,分别输入1,2,3,4,5如图:
                                      

图1
                                                              

图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;

};
效果图:
5、最后到主舞台。分别在五个图层的第二帧添加五个影片剪辑movie,实例名分别为movie1~movie5;在第六图层加入一个空影片剪辑,选中该空影片剪辑,添加代码:
onClipEvent (enterFrame) {
       if (_root.tAction == false) {
                 if (_root.dTime<=1) {
                          if (_root.code == _root.menuNum) {
                                   _root.code = 1;
                          } else {
                                   _root.code++;
                                   _root["movie"+_root.code] = true;
                          }
                          _root.dTime = _root.timer;
                 }
                 _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<=menuNum; i++) {
       numArray[i] = true;
}
code = 1;
speed = 0.200000;
timer = 50;
dTime = timer;
urlArray = new Array(0, url01, url02, url03, url04, url05);
第五帧添加:
this.stop();
_root.tAction = false;
效果图:

Ctrl+Enter 测试效果。
上一篇:{实例}路面的循环动画 人气:1273
下一篇:{实例}FLASH+XML构造的下拉菜单 人气:2744
视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058