在线互动媒体技术2015课件第四章交互案例菜单类型详解.ppt

在线互动媒体设计 李婕静 第四章 AS3.0 交互案例 （1）横向菜单 4.2 Flash菜单 var arr_menu:Array = [HOME,NEWS,PROFILE,LOCATIONS,VENDORS,ABOUT US,CONTACT]; var menu:MovieClip = new MovieClip(); addChild(menu); menu.x = 80; menu.y = 350; var gap:Number = 14; var hisX:Number = 0; for(var i:Number = 0; i arr_menu.length; i++){ var menuItem:MenuItem = new MenuItem(); menuItem.txt.autoSize = TextFieldAutoSize.LEFT; menuItem.txt.text = arr_menu[i]; menuItem.txt.x = gap/2; 动态的生成菜单放置在menu影片剪辑当中 创建一个组定义菜单项，菜单的名目在数组中 创建一个影片剪辑 影片剪辑放置在舞台上 设置影片剪辑的X,Y位置 设置每个菜单在x位置上的一个变量，第一个菜单初始值为0 //定义菜单之间的间隔距离 运用for循环的变化产生菜单项 i小于数组长度（7） 创建一个menuItem对象 变量名 类名 实例化 //设置文本框左边距保持固定，并根据文字长短自动向右调整 文本框 自定义尺寸属性 用text属性填入内容 数组中的相应内容 设置文本框距左右菜单边缘的距离 4.2 Flash菜单 menuItem.bg.width = menuItem.txt.width + gap; menuItem.bg.alpha = 0; menuItem.mouseChildren = false; menuItem.buttonMode = true; menuItem.addEventListener(MouseEvent.MOUSE_OVER, menuOver); menuItem.addEventListener(MouseEvent.MOUSE_OUT, menuOut); menuItem.addEventListener(MouseEvent.CLICK, menuClick); menuItem.x = hisX; hisX += menuItem.width; menu.addChild(menuItem); } function menuOver(e:MouseEvent){ e.target.bg.alpha = 1; } function menuOut(e:MouseEvent){ e.target.bg.alpha = 0; } function menuClick(e:MouseEvent){ } 设置背景文本框拉升的宽度=文本框宽+gap间隙 保障点击元件本身，防止点击 鼠标移上去光标变成手形 设置x位置是hisX 的变量 hisX 变量是不断变化，下个位置=菜单加上宽度 将菜单显示在menuItem当中 侦听鼠标移入移出的效果 //执行点击功能; 鼠标移入，文本框背景不透明 鼠标移出，文本框背景透明 鼠标点击时菜单背景变化 动画引擎 var arr_url:Array = [home.html,news.html,profile.html,locations.html,vendors.html,aboutus.html,contact.html]; 4.2 Flash菜单 menuItem.id = i; function menuOver(e:MouseEvent){ TweenMax.to(e.target.bg,.5, {alpha: 1}); } function menuOut(e:MouseEvent){ TweenMax.to(e.target.bg,.5, {alpha: 0}); } function menuClick(e:MouseEvent){ navigateToURL(new URLRequest(arr_url[e. target.id])) } import com.greensock.*; （1）横向菜单点击功能 导入Tween 创建菜单对应的页面网址的数组 为菜单添加id属性，赋予相应索引值 通过事件target属性，定位到发生点击事件的菜单项，后获取其id属性 import com.greensock.*; mMenu.mMainMenu.buttonMode = tru