| 首页 | 视觉资讯 | 平面视觉 | 环艺设计 | CG视觉 | 设计教程 | 人物 |
视觉资讯
设计资讯 网络媒体 设计征集 书刊
平面视觉
画册 包装 VI 招贴 标志 创意 文案 理论
环艺设计
建筑设计 室内设计 景观设计 家装设计
CG视觉
插画 3D视觉 动漫
设计教程
平面教程 网页教程 多媒体教程
人物
设计师 设计公司 人物访谈
您现在的位置: 第一视觉 >> 设计教程 >> 网页教程 >> FLASH教程 >> 正文
Flash制作仿苹果界面的互动图标界面
作者:流浪儿 | 文章来源:闪吧 | 时间:2007-4-8 【字体:

  这个菜单是06年学“类”时写的菜单效果,模仿苹果机中的菜单效果。

  大家可以试试,用鼠标划过图标时,该图标会放大,画面以此图标为中心向两边缩放。

  Flash AS代码入下:

/**
 *MacintoshMenu(仿苹果机菜单)
 *Auther:流浪儿
 *Versoin:MacintoshMenu 1.0
**/
class MacintoshMenu {
 //属性
 private var target:MovieClip;
 private var imageContainer:MovieClip;
 private var imageArr:Array;
 private var total:Number;
 private var spanX:Number = 5;
 private var ypos:Number = Stage.height/2+50;
 //构造函数
 public function MacintoshMenu(target:MovieClip, imageArr:Array, scale:Number) {
  this.target = target;
  this.imageArr = imageArr;
  //
  total = imageArr.length;
  imageContainer = target.createEmptyMovieClip("imageContainer", 1);
  attachMc(scale);
  resetPosition();
 }
 //加载图片
 private function attachMc(scale:Number):Void {
  for (var i:Number = 0; i<total; i++) {
   var menu:MovieClip = imageContainer.attachMovie(imageArr[i], "menu"+i, i);
   mouseControlZoomEffect(menu, scale);
   menu.onRollOver = function() {
    //trace(this._name);
   };
  }
 }
 //鼠标控制缩放比例效果
 private function mouseControlZoomEffect(mc:MovieClip, scale:Number):Void {
  var owner:Object = this;//用一个临时变量指向当前类
  mc.onEnterFrame = function() {
   var mouseX:Number = Math.abs(this._x+this._width/2+owner.imageContainer._x-owner.imageContainer._parent._xmouse);
   //trace(mc._name+">>> "+mouseX);trace("");
   if (owner.imageContainer.hitTest(owner.target._xmouse, owner.target._ymouse)) {
    if (mouseX<scale) {
     var num:Number = 100+scale-mouseX;
     owner.zoomEffect(this, num);
    } else {
     owner.zoomEffect(this, 100);
    }
   } else {
    owner.zoomEffect(this, 100);
   }
   updateAfterEvent();
  };
 }
 //缩放效果
 private function zoomEffect(mc:MovieClip, scale:Number):Void {
  var ratio:Number = .4;
  mc._xscale = mc._yscale += (scale-mc._xscale)*ratio;
 }
 //重新设置各菜单的位置
 private function resetPosition():Void {
  var owner:Object = this;
  target.onEnterFrame = function() {
   for (var i:Number = 0; i<owner.total; i++) {
    var menu:MovieClip = owner.imageContainer["menu"+i];
    menu._x = owner.imageContainer["menu"+(i-1)]._x+owner.imageContainer["menu"+(i-1)]._width+owner.spanX;
    menu._y = owner.ypos-menu._height;
    owner.imageContainer._x = (Stage.width-owner.imageContainer._width)/2;
   }
   updateAfterEvent();
  };
 }
 //转义(位置、间距等)
 public function get _ypos():Number {
  return this.ypos;
 }
 public function set _ypos(values:Number):Void {
  this.ypos = values;
 }
 public function get _spanX():Number {
  return this.spanX;
 }
 public function set _spanX(values:Number):Void {
  this.spanX = values;
 }
 public function get _x():Number {
  return this.target._x;
 }
 public function set _x(values:Number):Void {
  this.target._x = values;
 }
 public function get _y():Number {
  return this.target._y;
 }
 public function set _y(values:Number):Void {
  this.target._y = values;
 }
}
  • 上一篇文章:

  • 下一篇文章:
  • 相关文章
    Photoshop鼠绘华南虎教程
    Photoshop鼠绘可爱的机器猫
    Photoshop鼠绘日落美景
    版权申明:
       转载请不要修改任何文字图片链接信息。如需使用本站作品,请与原作者联系,版权归原作者所有。
       第一视觉(www.vision1.cn)依法保护知识产权,如果我们的文章有涉及或侵犯您的有关权益,请联系我站编辑人员,注明网址及文章,我们会即时处理或删除!
    最新热门文章
    普通文章格斗动画制作的理论基础
    普通文章Flash鼠标触发模糊图片变清晰特效
    普通文章Flash实例教程:“蝶恋花”制作过程
    普通文章Flash制作随意飘飞的彩色肥皂泡
    普通文章Flash制作“时空穿梭”视觉特效
    普通文章Flash制作仿苹果界面的互动图标界面
    普通文章Flash制作彩色线条动态图案生长动画效果
    普通文章Flash制作环形立体旋转的动态文字
    普通文章用FLASH做闪烁文字
    普通文章Flash文件的破解与加密方法
    关于我们 | 联系我们 | 版权声明 | 免责声明 | 网站地图
    版权所有 © 2006-2007 第一视觉(Vision1.cn)
    Copyright © 2006-2007 Vision1.cn All rights reserved