用户名: 密码: 验证码: QQ--程序群:31736530 动画群:38836599
闪无忧
 
首 页 业界新闻 业界杂谈 Flash教程 Flash源码 Flash图书 Flash酷站 Flex & AIR 供求信息
   本栏目通告:   有意向写收费精品教程的朋友,请联系本站合作
当前位置 :首页>flash教程>Flash动画教程>列表

FLASH版仿苹果电脑桌面菜单滑动效果制作教程

[来源:taoshaw.com | 作者:沙子 | 时间:2008-07-16 | 点击:  | 收藏本文  【 】]

演示效果:

 

1、首先新建一FLASH文件。然后准备几个用于制作菜单的水晶图标。最好是去下载FIREWORKS制作的图标。在一些素材站就可以搜索到的。



2、然后导入到FLASH中。
3、新建MC“icon0”。将图标Bitmap 1拖进舞台中。
4、然后在MC“icon0”上击右键,选链接属性。然后设置链接属性为“icon0"。



5、新建一个背景元件“bgbar”。然后在里面绘制导航栏的背景。



6、如步骤4所示,将背景元件的链接属性改为“bgbar”。



7、回到场景中,新建一AS图层,在AS帧中,添加代码:


详细代码:

//================版权声明开始================//
//★淘沙网:http://www.taoshaw.com
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
//定义链接的数组,用数组可以提高代码运行的效率.
var menu_URLs=new Array("http://www.taoshaw.com","http://www.taoshaw.com","http://www.taoshaw.com",
"http://www.taoshaw.com","http://www.taoshaw.com","http://www.taoshaw.com
");
//最小缩写范围
var menu_minScale=100;
//最大扩大范围
var menu_maxScale=130;
//导航栏开始的X位置
var menu_StartX=280;
//导航栏开始的Y位置
var menu_StartY=200;
//ICON图标数量
var IconNumber=9;
//ICON缩小范围
var Icon_minScale=30;
var Icon_maxScale=60;
var Icon_Space=4;
//在此处创建导航菜单
//此处先复制背景
var DockMenu=createEmptyMovieClip("dmenu",10);
//设置背景元件的位置
DockMenu._x=menu_StartX;
DockMenu._y=menu_StartY; 
//调用库中的ICON图标到场景中
for(var i=0;i<IconNumber;i++){
//复制ICON图标
var theItem=DockMenu.attachMovie("icon"+i,"item"+i,i+10);
  theItem.attachMovie("label","ilabel",10);
  theItem.preItem=DockMenu["item"+(i-1)];
  theItem._x=theItem.preItem._x+theItem.preItem._width+Icon_Space;
  theItem.ilabel._visible=false;
  //设置链接对象
  theItem.URL=menu_URLs;
  theItem._xscale=Icon_minScale;
  theItem._yscale=Icon_minScale;
  theItem.onRelease=function(){
   getURL(this.URL);
  }
  //此处用于显示图标在鼠标移上或移开的时候的状态
  theItem.onEnterFrame=function(){
   if(this._parent.mover){
    var scale=Icon_maxScale-Math.abs(DockMenu._xmouse-this._x-30)/5;
    if (scale<Icon_minScale) scale=Icon_minScale;
    //缩放比例
    this._xscale+=(scale-this._xscale)/3;
    this._yscale+=(scale-this._yscale)/3;
   }
   if(this._parent.mout){
    this._xscale+=(Icon_minScale-this._xscale)/3
    this._yscale+=(Icon_minScale-this._yscale)/3    
   }
    this._x+=(this.PreItem._x+this.PreItem._width+Icon_Space-this._x)/3;   
  }
}
var theBGBox=DockMenu.attachMovie("bgbar","bgbox",1);
  theBGBox.onEnterFrame=function(){
   this._x=DockMenu["item0"]._x;
   this._width=DockMenu["item"+(IconNumber-2)]._x+DockMenu["item"+(IconNumber-2)]._width-DockMenu["itemCon"]._x;
  }
  
DockMenu.onEnterFrame=function(){
if(this.mover){
  this._xscale+=(menu_maxScale-this._xscale)/4;
  this._yscale+=(menu_maxScale-this._yscale)/4;  
}
if(this.mout){
  this._xscale+=(menu_minScale-this._xscale)/4;
  this._yscale+=(menu_minScale-this._yscale)/4;
  }
this._x+=(-this._width/2+menu_StartX-this._x)/3;
}
DockMenu.onMouseMove=function(){
if(this.hitTest(_root._xmouse,_root._ymouse,false)){
  this.mover=true;
  this.mout=false;
}else{
  this.mover=false;
  this.mout=true;
}
}
//AD
ad_text.border = 0;
ad_text.html = true;
ad_text.htmlText = "<a href=’http://www.taoshaw.com ’,target=’_blank’>淘沙网原创教程系列:http://www.taoshaw.com </a>";
//================版权声明开始================//
//★淘沙网:http://www.taoshaw.com
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//

源文件下载: List_Ico.rar

文章如果有错误或者缺少文件,请发邮件提交给我们
上一篇:手把手教你制作奥运苹果菜单
下一篇:没有了
Tags:    
>>> 最新评论:(共有 0 位网友发表了评论)      查看所有评论
  发表评论
用户名: 新注册) 密码: 匿名评论
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
·本站发布内容均为客观表达作者观点,不代表闪无忧立场,请勿攻击和漫骂
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为
  教程分类
  基础操作   动画特效
  应用开发   组件学习
  As程序   动画教程
  Flash cs3   AS 3.0
  FCS/FMS教程   Loading教程
  Flash与Web   Flash教程连载
  相关文章
·FLASH版仿苹果电脑桌面菜单滑动
·手把手教你制作奥运苹果菜单
·挥手的小女孩-FLASH鼠绘自编教程
·中性装扮的酷女子-FLASH鼠绘经典
·依靠在窗边的女子-FLASH鼠绘经典
·教你如何制作flash弹跳文字
·画人、临摹、水彩【虫虫学画日记
·flash中河流的画法参考
·flash中如何通过多点绘制光滑曲
·Flash鼠绘马蹄莲教程
  热门文章
·Flash进度条的制作详细讲解(组图)
·flash幻灯片网页效果
·Flash打造简单的飘雪动画视觉特效
·Flash旋转拖尾文字效果的制作教程
·flash水影效果字
·全Flash动画网站实现的基础教学
·超酷flash光晕移动效果
·flash春雷闪电效果
·Flex 3 AdvancedDataGrid的使用(第二
·即拷即用的loading代码
·Flash制作大雪纷飞效果动画
关于我们 - 免责声明 - 网站地图 - 商务服务 - 联系我们 - RSS地图
©CopyRight 2006-2008, 5UFlash.COM, Inc. All Rights Reserved
鲁ICP备06034971号