当前位置：首页 → 问答吧 → [教程]flash打造文字翻页效果

[教程]flash打造文字翻页效果

时间：2011-08-14

来源：互联网

此教程转载自爱闪客,源文地址

此篇教程将创建一个文字翻页特效，当鼠标悬停的时候文字将作360度旋转。完成这个特效需要用到actionscript 3.0和flash player 10的3D功能。
示例如下：
http://www.flashigot.com/files/image/articles_images/137/flipLetter.swf
1. 打开flash CS4 新建一个actioin script 3.0的flash文档，并保存为flipLetter.fla
2. 重命名layer 1层为letters,然后使用文字工具在舞台上输入一些文字，文字属性任意。选择住文字，然后选择“修改”（modify）菜单，点击“打散”（break apart）将文字打散。
然后将每个字母转换为影片剪辑，注册点选择中心。放置位置任意。
3. 新建一层，名为actions，然后打开动作面板。此时我们将用到Tweenlite 引擎组件，点击下载组件，下载完后解压zip文件，将得到gs文件夹，将此文件夹和fla文件放在同一文件夹下
4. 为了使用tweenlite引擎，在脚本面板第一行输入如下代码：

复制内容到剪贴板

代码:

import gs.*;

5. 下面在舞台上循环所有对象（此例循环所有字母），将为每个对象添加MOUSE_OVER侦听事件。

复制内容到剪贴板

代码:

for (var i:int =0; i < numChildren; i++) {
var mc:MovieClip = getChildAt(i) as MovieClip;
mc.addEventListener(MouseEvent.MOUSE_OVER,flip);
}

6. 在flip函数中，我们声明一个局部变量，名为letter，类型为影片剪辑，此变量将存储含有事件处理的字母。然后我们移除MOUSE_OVER侦听，此侦听在完成翻页后重新加上。使用tweenlite在字母的旋转Y属性上加上一个动画补间，当缓动特效完成了重新加上的Mouse_Over侦听事件后，整个360度的旋转将产生。

复制内容到剪贴板

代码:

7. 以下是全部代码，测试一下并了解其中的动作原理

复制内容到剪贴板

代码:

import gs.*;
for (var i:int =0; i < numChildren; i++) {
   var mc:MovieClip = getChildAt(i) as MovieClip;
mc.addEventListener(MouseEvent.MOUSE_OVER,flip);
}
function flip(e:MouseEvent):void{
var letter:MovieClip = e.currentTarget as MovieClip;
letter.removeEventListener(MouseEvent.MOUSE_OVER,flip);
TweenLite.to(letter, 1,
      {rotationY:letter.rotationY - 360,
      onComplete:function(){letter.addEventListener(MouseEvent.MOUSE_OVER,flip);
         }
      }
);
}