本例通过使用动态遮罩绑定以及简单的影片剪辑复制来实现文字扭曲的效果。至于本例的实现原理,示意如图1:
图1 原理示意图
可以试想现在摆在面前的有一叠6张一模一样带字的圆形纸片,然后把倒数第2张并将其外围剪去宽度为整个圆半径1/6的圆环,把倒数第3张剪去2/6大小的圆环,倒数第4张3/6,第5张4/6,第6张5/6。剪完之后,仍然按照原来的顺序,对齐中心叠好。这样的一叠纸片就能够用来粗略地实现扭曲效果了。还不明白?试着转动不同层次的纸片看看。
图1左边的6个instance就可以看作是上面那个场景中所提到的6张纸片,然后instance 2-6上的黑边就可以看作是被剪去的部分。而图1-76边的那个圆饼就相当于是6张纸片对齐叠好后的样子。也许各位已经发现了:纸片数量越多,产生的模拟扭曲的效果就越好。很显然如果只胡两层,其制作示意如图2所示:
图2 单个instance的制作原理
图1-77展示的是单个instance的制作原理:将用来作为遮罩的影片剪辑Mask和要实现扭曲效果的影片剪辑Text通过Flash MX中的新函数SetMask联系起来。这个SetMask函数的出现,使得可以在运行时任意指定某个影片剪辑作为遮罩,实现动态遮罩绑定,从而大大简化了以往制作动态遮罩的步骤。在制作过程中主要用到了 最终效果如图3所示,要实现这一效果,其具体制作步骤如下:
图3 最终效果图
1.新建一个电影,在属性面板中设置其尺寸为500pxX400px,选择一种颜色(本例为#FFFFFF)作为背景色。
2.双击时间线上的“Layer 1”,并将其改为“main”,如图1-79所示。选择“插入/新建元件”菜单命令或直接按Ctrl+F8,打开“创建新元件”对话框。“名称”一栏中输入“Text”,并设置其行为为“影片剪辑”,单击确定按钮新建一个名为“Text”的影片剪辑
3.选择“插入/图层”菜单命令或直接点击时间线窗口上的 图标,新建一个图层。分别将图层命名为text和background,影片剪辑text的时间轴窗口如图4所示:
图4 影片剪辑text的时间轴窗口
4.选中“background”层,选择“文件/导入”菜单命令,打开”导入“对话框。然后选择一张图片(本例为“apple.jpg”)导入到“background”层上作为背景。如果导入的图片太大,就得使用Transform(变形)工具将其缩小到合适大小。选择“窗口/变形”菜单命令或直接按Ctrl+T,打开“变形”面板,修改面板上的垂直和水平缩放比例至合适的值。导入后的图片如图5所示:
图5 导入后的图片
5.接下来该是在背景上写字了。选中“text”层,在工具箱中选取“文本”工具,然后在舞台上写上“Apple”几个字符,在属性面板中,根据需要将刚才所写的“Apple”的字体、大小、颜色设置妥当,本例中设置字体为“Ruach LET”,颜色为“CCFFCC”,文本大小为“60”,这样,“纸片”就做好了。
修复一提的是为什么一定要在字的后面加背景呢?这个问题是这样的。知道,图层就好像透明的玻璃一样,可以透过一层看到下面的一层。如果这里不使用什么东西做背景的话,那么你写的字就会象剪纸一样有镂空的地方,那么,在下一步进行“纸片”重叠旋转的时候就会露馅儿了。所以,字的后面一定得有背景,不管你所用的是图片还是色块。另外,其实这里并不一定要使用两个图层。因为文字和图片或者色块都是独立的对象,就算把它们都堆在一起也是不会有影响的(除非你把文字和图片打散)。但是,请记住,把不同的对象放在不同的层是一个能让你受益匪浅的好习惯。如果操作系统中没有这样的字体,是看不到如图6的效果的。
图6 加上文字后的图片
二.制作遮罩
1.选择“插入/新建元件”菜单命令或直接按Ctrl+F8,打开创建新元件对话框。在“名称”一栏中输入“Mask”,并设置其行为为“影片剪辑”,新建一个名为Mask的影片剪辑,将缺省的图层“图层1”改名为“mask”。从工具箱中选取“椭圆”工具,按住Shift键不放在舞台上随便画一个正圆。因为是制作遮罩,所以圆的边框色和填充色可以随便是什么颜色。并把这个圆放到舞台正中。打开排列面板排列先点击 按钮,将整个舞台作为参照物,接着再分别点一下 (垂直居中)和 (水平居中)按钮,这样代表舞台中心的十字就落到圆的中央了。如图7所示。
图7 圆中央放到舞台中心
三.编写代码
1.回到主场景在时间轴中选中第一帧。选择“窗口/动作”或直接按F9,打开“动作”面板,按F11,打开“库”面板,单击 按键,从弹出的功能菜单中选择“联接”,打开“联接属性”对话框。不必修改什么选项,直接按确定按钮将“Text”元件导出,“标识符”为Text,将元件导出是为后面代码中“attachMovie”函数所服务的,因为此函数的一个参数要求必须使用元件的导出标识符。用同样的方法,将Mask元件也导出。
2.输入如下Action代码(注释号“//”及其后面的文字可以不输):
iInitX = Stage.width/2;
//初始横坐标
iInitY = Stage.height/2;
//初始纵坐标
iMax = 30;
iDirection = 1;
//旋转方向
for (i=1; i<=iMax;//影片剪辑个数
iCounter = 1;
//旋转计数器
iBound = 3;
//旋转终止界限 i++) {
this.attachMovie("Text", "text"+i, 2*iMax-2*(i-1));
//通过捆绑复制创建文字影片剪辑Text的第i个实例
this.attachMovie("Mask", "mask"+i, 2*iMax-2*(i-1)-1);
//通过捆绑复制创建遮罩影片剪辑Mask的第i个实例
this["text"+i]._x = iInitX;
//设定刚生成的文字影片剪辑text i的初始横坐标
this["text"+i]._y = iInitY;
//设定刚生成的文字影片剪辑text i的初始纵坐标
this["mask"+i]._x = this["text"+i]._x+5;
//设定刚生成的遮罩影片剪辑mask i的初始横坐标
this["mask"+i]._y = this["text"+i]._y+5;
//设定刚生成的遮罩影片剪辑mask i的初始纵坐标
this["mask"+i]._width = i*5;
//设定遮罩影片剪辑的宽度
this["mask"+i]._height = i*5;
//设定遮罩影片剪辑的高度
this["text"+i].setMask("mask"+i);
//将影片剪辑Mask设定为影片剪辑Text的遮罩
}
程序详解:
看到上面密密麻麻的程序是不是有点头昏了?不急,下面就来分析分析这程序是怎么做事的吧:第1到第12行进行的是一些变量的赋值工作。其中第1、3行的变量iInitX和iInitY分别代表了影片剪辑们在舞台上出