现在有很多主流软件或门户网站开发出了迷你首页,如腾讯QQ。当你登录QQ之后,很快会弹出迷你的首页-腾讯网我的资讯。在这个首页里,采用选项卡的形式列出了新闻、财经、娱乐、体育等最新的资讯内容。当用户使用鼠标移到相应的选项卡时,对应的内容也就会出现。这是响应了鼠标移入事件(MOUSE_OVER)我们使用Flash AS3.0也可以实现同样的功能。
一、制作选项卡
我们一共需要制作3个选项卡,每个选项卡有一个大长方形和一个小长方形组成,小长方形作为选项卡标题背景,而大长方形作为内容页背景。在每个选项卡里我们设置了三个图片,点击每个图片都会跳转到一个相应实例的教程页面。三个选项卡的标题位置有不同,所以每个选项卡的小长方形的位置也不同。如图:
二、组合选项卡
将上面制作好的选项卡拖动到舞台,调整它们的位置,使大长方形互相重合,而小长方形依此排列,这样基础工作就做好了。此时我们需要使用代码来实现交互效果。代码如下:
for (var fl_ChildIndex:int = 0;
fl_ChildIndex < this.numChildren;
fl_ChildIndex++)
{
this.getChildAt(fl_ChildIndex).addEventListener(MouseEvent.MOUSE_OVER, fl_ClickToBringToFront);
trace(fl_ChildIndex)
}
function fl_ClickToBringToFront(event:MouseEvent):void
{
this.addChild(event.currentTarget as DisplayObject);
}
for (var fl_ChildIndex:int = 0;<br/> fl_ChildIndex < this.numChildren;<br/> fl_ChildIndex++)<br/>{<br/> this.getChildAt(fl_ChildIndex).addEventListener(MouseEvent.MOUSE_OVER, fl_ClickToBringToFront);<br/> trace(fl_ChildIndex)<br/>}<br/><br/><br/>function fl_ClickToBringToFront(event:MouseEvent):void<br/>{<br/> this.addChild(event.currentTarget as Display<a href=http://www.flashabc.net/catalog.asptags=Object>Object</a>);<br/>}<br/>
我们并没有给实例添加实例名,但是可以现实我们想要的结果。代码中,首先使用for循环给每个影片剪辑实例,添加了MouseEvent.MOUSE_OVER事件,在响应函数里,使用event.currentTarget as DisplayObject代码来代表当前鼠标碰触到的影片剪辑,并将当前影片剪辑添加到显示列表中。