Flash MX 2004新特性实例学习五 -pc6资讯

您的位置：首页 → 网页设计 → Flash → Flash MX 2004新特性实例学习五

Flash MX 2004新特性实例学习五 时间：2004/11/7 2:21:00来源：本站整理作者：蓝点我要评论(0)

　　　　　　　　　　　　

　　　　　　　　　　　　实例六、Scriptable Masks Part 2

　　一、涉及特性

　　这里主要涉及的是MovieClip.setMask()的应用和Window组件的应用，都是在Flash MX 2004中才出现的新特性。在实例的制作过程中，要先准备三个差不多大小的图片，而且在制作中，要创建很多的Movie Clip，如果不想全部制作的话，可以用打开图库的方式打开源文件，直接用相应的Clip就是了。

　　二、制作过程

　　1、先准备好三个差不多大小的图片，按Ctrl + F8新建一个Movie Clip，命名为“Angel”，按Ctrl + R，在此Clip的场景中导入一个图片。

　　2、按Ctrl + F8新建一个Movie Clip，命名为“City Scape”，按Ctrl + R，在此Clip的场景中导入一个图片。

　　3、按Ctrl + F8新建一个Movie Clip，命名为“Garden”，按Ctrl + R，在此Clip的场景中导入一个图片。

　　4、在TimeLine中新建一个图层，命名为“Angel”，将图库中的Angel Clip放在此层中，将其命名为angel。

　　5、在TimeLine中新建一个图层，命名为“Garden”，将图库中的Garden Clip放在此层，将其命名为garden。

　　6、在TimeLine中新建一个图层，命名为“Cityscape”，将图库中的City Scape Clip放在此层，将其命名为city。

　　7、接下来制作遮照的Mask层，也有三个效果。按Ctrl + F8，新建一个Graphic，命名为“Triangle”。在该Graphic的场景中用矩形工具和线条工具绘制一个倒三角形。按Ctrl + F8，新建一个Movie Clip，命名为“One Spiral”。在该Clip的场景中用矩形工具绘制一个矩形，将图库中的Triangle拖四次到场景中，如图1所示排列。

图1
8、按Ctrl + F8新建一个Movie Clip，命名为“Complex Mask”。在该Clip的场景中用圆形工具绘制一个圆。在该Clip的TimeLine中新增一个图层，命名为“Spiral3”。将图库中的One Spiral拖到该层的场景中，在该层的第45帧和第85帧上面插入关键帧，并用旋转工具旋转One Spiral一定的角度。然后分别用鼠标点击第1帧和第45帧，在帧的属性面板上面的Tween中选择Motion效果。同理在TimeLine中增加Spiral2和Spiral1图层，图层的处理跟Spiral 3 中的一样，但要注意旋转的角度要适当错开，并可以利用缩放工具适当调整。此时的Complex Mask如图2所示。

图2
　　9、按Ctrl + F8新建一个Movie Clip，命名为“Circle”。在该Clip的场景中用圆形工具绘制一个圆。

　　10、按Ctrl + F8新建一个Movie Clip，命名为“Circles”。先在该Clip的场景中用圆形工具绘制一个圆，然后将图库中的Circle Clip拖到场景中，在第15帧和30帧上插入关键帧，并将第15帧中的Clip往偏离圆心的方向移动一定的位置。分别用鼠标点击第1帧和第15帧，在帧的属性面板上面的Tween中选择Motion效果。再将图库中的Circle Clip拖三个到场景中，进行相同的操作。此时的Circles Clip如图3所示。

图3

11、按Ctrl + F8新建一个Movie Clip，命名为“Stripe”。在该Clip的场景中用矩形工具绘制几个长方形。

　　12、按Ctrl + F8新建一个Movie Clip，命名为“Stripes1”。将图库中的Stripe Clip拖到该Clip的场景中。在图层的第60帧和120帧上面插入关键帧，并调整各帧上面的Stripe Clip的位置。点击第1帧和第60帧，在它们的帧属性面板上面Tween中选择Motion效果，形成一个Stripe Clip从场景外运动到场景中间的效果。

　　13、按Ctrl + F8新建一个Movie Clip，命名为“Stripes”。将图库中的Stripes1 Clip拖两次到该Clip的场景中，适当调整其位置。

　　14、回到主场景中，在TimeLine中新建一个图层，图层命名为“Complex”，将图库中的Complex Mask Clip拖到场景中，将其命名为“complex”。同样，在TimeLine中新建两个图层，分别命名为“Circles”和“Stripes”，将图库中的Circles Clip和Stripes Clip分别拖到各层的场景中，并分别命名为circles和stripes。

　　15、至此，三个遮照效果的原材料是准备好了，下面我们来制作控制这些效果的Clip。按Ctrl + F8新建一个Movie Clip，命名为Cpinfo，并在Link age中选定“Export for Action script”，设置Identifier为Cpinfo。在该Clip的场景中，从组件库中拖6个Radio Button出来，分别命名为“rCity”、“rAngel”、“rGarden”、“rStripes”、“rComplex”、“rCircles”，依次设置data属性为“city”、“angel”、“garden”、“stripes”、“complex”、“circles”，依次设置Label属性为“Cityscape”、“Angel”、“Garden”、“Stripes”、“Complex”、“Circles”，最后将前三个Button的groupName属性设置为“maskeeGroup”，后三个Button的groupName属性设置为“maskGroup”。从组件库中拖一个Check Box出来，命名为“cbDrag”，设置Label为“Drag Mask”。排列这些组件如图4所示。

图4
　　16、回到主场景中，在TimeLine中新增一个图层，从组件库中拖一个Window组件出来，命名为“controlPanel”，设置contentPath为“cpinfo”，Title为“Control Panel”。再从组件库中拖一个Check Box到场景中，命名为“hideCP”，设置Label为“Show control panel”。

　　17、在主场景中的TimeLine上增加一个新的图层，命名为“Actions”，在该层的第2帧上插入关键帧，相应调整其他图层的帧数。在Actions层的第1帧的Action面板上增加下面的语句：

/* Copyright 2003 Macromedia, Inc. All rights reserved.
The following is Sample Code and is subject to all restrictions
on such code as contained in the End User License Agreement
accompanying this product.
*/

var maskees:Array = [city, angel, garden]; //注释1
for (var i in maskees) maskees[i]._visible = false; //注释2
var masks:Array = [stripes, circles, complex]; //注释3
for (var i in masks) masks[i]._visible = false; //注释4

　　注释1：定义一个数组，里面放的是三个遮照的背景。
　　注释2：这里是设置三个遮照的背景都为不可见。
　　注释3：定义一个数组，里面放的是三个遮照的效果。
　　注释4：这里是设置三个遮照的效果都为不可见。

　　将各种效果放在数组中来操作，是一种很值得学习的编程习惯。

18、在Actions层的第2帧的Action面板上增加下面的语句：

function handleHideControlPanel (evt) {
controlPanel._visible = !evt.target.selected;
}
hideCP.addEventListener("click", handleHideControlPanel); //注释1
function handleMaskeeSelect (evt) {
for (var i in maskees) { //注释2
if (maskees[i] == eval(evt.target.selectedRadio.data)) { //注释3
currentMaskee.setMask(); //注释4
maskees[i].setMask(currentMask); //注释5
eval(maskees[i])._visible = true; //注释6
currentMaskee = maskees[i]; //注释7
} else {
eval(maskees[i])._visible = false;
}
}
}
controlPanel.content.maskeeGroup.addEventListener("click", handleMaskeeSelect); //注释8
function handleMaskSelect (evt) {
for (var i in masks) {
if (masks[i] == eval(evt.target.selectedRadio.data)) { //注释9
currentMaskee.setMask(masks[i]); //注释10
eval(masks[i])._visible = true;
currentMask = masks[i];
} else {
eval(masks[i])._visible = false;
}
}
}
controlPanel.content.maskGroup.addEventListener("click", handleMaskSelect); //注释11

function handleDragging (evt) {
if (evt.target.selected) {
this.onEnterFrame = function () { //注释12
with (currentMask) {
_rotation += 5;
_x += (_root._xmouse - _x) * .3;
_y += (_root._ymouse - _y) * .3;
}
}
} else {
delete this.onEnterFrame;
currentMask._x = 275;
currentMask._y = 200;
}
}
controlPanel.content.cbDrag.addEventListener("click", handleDragging);
var currentMaskee:MovieClip; //注释13
var currentMask:MovieClip;
controlPanel.content.rCity.selected = true;
city._visible = true;
controlPanel.content.rStripes.selected = true;
stripes._visible = true;
currentMaskee = city;
currentMask = stripes;
currentMaskee.setMask(currentMask);
stop();

　　注释1：这里是检查是否显示Window组件。
　　注释2：对maskees数组中的每一个元素都去检查一次，也就是所谓的遍历了。
　　注释3：检查选中的Button的值是否与数组中的元素相匹配。
　　注释4：setMask()的参数为空的话，就是清除之前的遮照效果。
　　注释5：设置新的遮照背景。
　　注释6：显示新的遮照背景。
　　注释7：将当前的遮照背景保存到currentMaskee，以便操作。
　　注释8：这里是侦听Window中前面三个Radio的鼠标点击情况。
　　注释9：检查选中的Button的值是否与数组中的元素相匹配。
　　注释10：设置新的遮照效果。
　　注释11：这里是侦听Window中后面三个Radio的鼠标点击情况。
　　注释12：这些代码是设置遮照效果跟随鼠标而运动。
　　注释13：初始化，设置最初的遮照效果为City效果。

　　三、实际用途

　　本实例中的setMask()方法在制作遮照效果的时候很有用。其用法为my_mc.setMask(mask_mc)，其中my_mc是遮照的背景，mask_mc是遮照的效果（为空的话则是清除遮照效果）。

<评论文章列表><评论点ID>7076<数量>0<主题>Flash MX 2004新特性实例学习五<主题地址>

文章评论

查看所有0条评论>>

热门文章 没有查询到任何记录。