|
|
实例四、Device Font Masking
一、涉及特性
本实例主要涉及遮照效果的制作和Scroll Pane组件的利用，都是一些有趣的特性，跟之前在Flash MX中的制作思路有比较大的不同。初初一看，文本内容都在图库当中，但让人迷惑的是在场景中会显示文本的内容。这就涉及到Scroll Pane组件的属性了。
二、制作过程
1、按“Ctrl + F8”新建一个Clip，命名为“textClip”，类型为Movie Clip，选取“Export for Action Script”（这个就是文本内容不在场景中，但可以显示在场景中的秘密了），在Identifier中输入“textClip”。在此Clip的场景中用文本工具输入比较多的文本，以便在最后结果中可以明显地看到效果。
2、按“Ctrl + F8”新建一个Clip，命名为“Frame”，类型为Movie Clip，用矩形工具绘制一个正方形边框。
3、按“Ctrl + F8”新建一个Clip，命名为“mask”，类型为Movie Clip，用矩形工具绘制一个与第二步中的大小差不多的正方形边框，并用填充工具填充为黑色。
4、按“Ctrl + F8”新建一个Clip，命名为“maskClip”，类型为Movie Clip，选取“Export for Action Script”，在Identifier中输入“maskClip”。
5、在maskClip中，在Time Line中新建一个层，命名为“mask”，将图库中的Frame 拖到此层中，在属性面板上命名为“box”。在“mask”层上面再建一个层，命名为“frame”，将图库中的mask拖到此层，在属性面板上命名为“frame”。在“frame”层上面再建一个层，命名为“actions”，在它的action面板上添加下面的语句：
textClip.setMask(box); // 注释1
this.onEnterFrame = function () { // 注释2
box._x = _root._xmouse - this._parent._x; // 注释3
box._y = _root._ymouse - this._parent._y;
frame._x = _root._xmouse - this._parent._x;
frame._y = _root._ymouse - this._parent._y;
}
注释1：将在场景中的box Clip设置为textClip的遮照。从这里也可以看出，现在可以直接在Action Script中创建遮照了。
注释2：设置函数，当进入此Movie Clip帧的时候，触发此函数。
注释3：设置遮照用的box的位置跟随鼠标移动，frame的位置也跟随移动。
6、回到主场景中，将两个Radio Button组件拖到场景中，将其中一个设置参数如下：命名为“rComponents”，data的值为“component”，“Group Name”为radioGroup，“label”为Masking with Components。将另一个设置如下：命名为“rGraphics”，data的值为“graphic”，“Group Name”为radioGroup，“label”为Masking with Graphics。
7、将一个Scroll Pane组件拖到场景中，将其参数设置如下：命名为“spMasking”，contentPath为“textClip”，hLineScrollSize为5，hPageScrollSize为20，hScrollPolicy为auto。ScrollDarg为false，vLineScrollSize为5，vPageScrollSize为20，vScrollPolicy为auto。
8、在Time Line中新建一个层，命名为“action”，在它的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.
*/
function switchExample (evt) { //注释1
var choice = evt.target.selectedRadio.data; //注释2
if (choice == "component") { //注释3
spMasking.contentPath = "textClip"; //注释4
spMasking.hScrollPolicy = "on"; //注释5
spMasking.vScrollPolicy = "on";
} else if (choice == "graphic") { //注释6
spMasking.contentPath = "maskClip"; //注释7
spMasking.hScrollPolicy = "off";
spMasking.vScrollPolicy = "off";
}
}
radioGroup.addEventListener("click", switchExample); //注释8
rComponents.selected = true; //注释9
来解释一下上面的代码：
注释1： 定义一个函数，参数为evt。
注释2： 定义一个变量，它的值是场景中的所选择的radio的值。
注释3： 如果选取的radio的值是component，则执行下面的语句。
注释4： 将场景中的Scroll Pane的contentPath设置为“textClip”，textClip是在图库中的，这个是Scroll Pane的特性。
注释5：设置Scroll Pane的滚动条为显示。
注释6：如果选取的radio的值是graphic，则执行下面的语句。
注释7：将场景中的Scroll Pane的contentPath设置为“maskClip”，maskClip是在图库中的一个遮照效果。
注释8：为场景中的两个Radio添加监听函数，当点击的时候触发。
注释9：默认选择的Radio为rComponents。
三、实际用途
本实例的用途广泛，可以直接在Scroll Pane中放置Clip，Graphic，swf文件等等，用Action Script控制起来也比较方便。所以可以制作文本框，图片框，也可以做Flash movie的播放框，而且是带滚动条的喔。
|
|
