论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Flash AS编程教程
Tag:2.0,3.0菜鸟,游戏,类,cs,技巧,源码,层,文本,文字,函数,音乐,随机,拖拽,asp,access,xml,mc,视频教程

Flash8 字体特效

文章类别：Flash AS编程 | 发表日期:2008-10-6 17:35:48


    我想创建一个类用来管理和创建看起来费时又费力的字体效果制作过程，使用它可以允许我们轻松的创建自定义的效果，经过一系列的不同方式的试验，我最终完成了一个类，把它称之为TextScript.它预置了一些字体效果在里面，但最重要的是你可以使用这个类来创建你想象中的字体效果。如下面的效果。

  TextScript类有两个基本方法(Constructive和Deconstructive)按在类方法中译为构建和拆分。Constructive方法用来创建一个moviclip holder用来承载你所附加的字体断段，并且要把它们以单个字符的形式显示出来。而deconstructive就更简单一些，因为它针对moveclip holder工作，并对constructive方法返回的结果应用我们想要的效果。
   下面就让我们开始试一下。首先先下载the TextScript class并将它保存在你所设置的类路径下。如果你没有设置类路径,你可以在flash中按下ctrl+u.在左边选择择actionscript然后在下面选择as2.0设置。把你存放此类的路径添上即可。（译者：如果你不添路径也可以，只要保证你的fla文件在TextScript路径也可，只要文件能找到类即可，但这种方式对于日后的应用会麻烦一点。）

下一步，在flash8中创建一个新的fla文件，选择字体工具，在场景中拖动创建一个动态文本框.它不需要实例名称。我们要做的只是要嵌入字体，注意如果你没有嵌入字体，你的字体效果是不会显示出来的。
选择动态文本框，然后选择一种字体，不要选择非系统字体如_sans,_serif或_typewriter等字体。如我们的例子，使用的是Arial Black加粗字体。 如果你要使用加粗字体，在对文本框设置时一定要它显示出为粗体字样。然后点击右边的”embed”选择你要嵌入的字符范围，点击ok。

现在将下面的代码加入到你的时间线的第一帧上。
如下代码：
代码:
 

import com.actionscript.text.TextScript;

var myFormat:TextFormat = new TextFormat();
myFormat.font="Arial Black";
myFormat.bold = true;
myFormat.size = 22;
myFormat.color = 0x550000;

var phrase:String = "Dynamic Effects with TextScript";
var xLoc:Number = 50;
var yLoc:Number = 70;
var delay:Number = 3;

m = TextScript.blurIn(this, phrase, xLoc, yLoc, myFormat, delay);
 

测试你的影片，你应能看到非常漂亮的模糊字体效果出现，如果你没能看到字体体效果出现，请你先确何你的字体是否已正确的嵌入到flash中。如果你使用了粗体。要确保在你选中文本框时， 粗体的B是按下去的。
在这段代码中，我们需要在开始的位置导入TextScript类，然后我设置我们想要显示的字体段落,并通过创建字体格式Textformat来格式化字体。最后我们设置constructive方法所需要的参数。
所有constructive方法都需要下面所列的参数。如下：
TextScript.constructiveMethod(scope,phrase,xLoc,yLoc,textFormat,delay);
Scrop:MovieClip – 你所要展示的文本所放的地方。也就是在哪个movieclip中。
Phrase:String – 你所要展示的文本内容。
xLoc:Number –展示文本所在movieclip中的_x位置
yLoc:Number --展示文本所在movieclip中的_x位置
textFormat:TextFormat –TextFormat对象，用于设定文本属性
delay:Number –出现在场景中字符之间的延时，以帧数为计数单位
Constructive方法总是返回包含你文本的movieclip的实例，你通常应将它保存在一个变量中（我把它命名为”m”）因为在后面你可以使用它来做为deconstructive方法的一个参数。

作为一个名称习惯，所有的deconstructive方法都以”remove”字样开头加上原有的constructive方法名称。因些如constructive方法名为”blurin”,那么它的deconstructive方法的名称就应用removeBlurin.但是它并不是一定要使用这种组合应用在deconstructive方法，任何的constructiv和deconstructive方法组合都可以创建出有效的效果来。
根据我们上面的例子，加入下面的代码：
代码:
 

onMouseUp = function() {
   TextScript.removeBlurIn(m, delay);
}
 

现在测试你的影片,你会看到你的字体模糊的出现，然后单击clear按钮,你会发现字体在消失。
演示文如下：

更深一步，如果你打开debugger面板，你就会发现TextScript deconstructive方法清除了所有在constructive方法中创建的元素。
内置在TextScript中的constructive方法如下：
typewriter  打字机效果
zoomIn    放大效果
zoomOut   缩小效果
blurIn      模糊效果
dropIn     下落效果
randomDropIn  随机下落

相应的deconstructive方法如下：
removeTypewriter   移除打字机效果
removeZoomIn     移除放大效果
removeZoomOut   移除缩小效果
removeBlurIn      移除模糊效果
removeDropIn     移除下落效果
removeRandomDropIn  移除随机下落效果

上面这些方法已经可以创建出足够好的效果，但在这个类中相对来说包含了很少的效果，实际上这个类可以创建出任何你想要的效果，你需要仔细查看这个类，这一节中我们将研究如何自定义字体效果。

第二节自定义字体效果


在这一节中我们学习如何自定字体效果，并提供了三个范例，在一个字体效果中，将动画中的每一个字符当做是一个元件符号(一个独立具有指定行为的元素),要创建一个字体效果，你不能对整个文本段落进行代码编写，你需要针对一个独立的字符进行代码编写。
关于TextScript 元件你需要了解6件事情：
§在字体动画中每一个字符就是一个元件。
§每个元件是一个movieclip，它具有所有movieclip的所有功能定义。
§元件具有一个属性命名为framCount，当一个新的效果应用于它时它的初值为0.
§元件具有称为delay的属性。当动作执行之前这个元件需要延迟出现的帧数间隔
§效果代码附加在元件的onEnterFrame事件中，覆盖元件的onEnterFrame事件将会覆盖它的效果动作。
§在constructive效果中(也就是场景中出现字的效果)，所有元件以它们最终的位置和缩放出场，所以你可以在动画之前保存他们的这些变量。

Constructive效果

       在前面一节的TextScript文章中，constructive效果是在场景中创建的文本效果，Constructive 效果总是返回movieclip实例，并且这个movieclip中承载着所有字符元件，我们可以使用返回的这个movieclip做为deconstructive效果的一个参数来从场景中移除它。

     自定义constructive方法我们称之为”createEffect”,它的参数类似于内置在类中的constructive函数，只是增加了一个或多个参数在结尾处（也就自定义的函数）.它的参数如下：
代码:
 

TextScript.createEffect(
     scope:MovieClip,
     phrase:String,
     x:Number,
     y:Number,
     textFormat:TextFormat,
     delay: Number,
customEffect:Function);
 


简单的打字效果：

如下演示效果：

一种简单的效果就是创建打字效果,要创建这种效果，我们将编写些效果的函数并将其附加在字符元件上。如下代码：
代码:
 

typeOn = function() {
  if(this.frameCount++ > this.delay) {
    this._visible = true;
    this.onEnterFrame = undefined;
  }
}
 

在打字效果中（查看源文件sample1），typeon函数附加在元件的onEnterFrame事件中，第二行是最重要的一行如下：if(this.frameCount++>this.delay)-这一行不断的增加帧数并且如果帧数超过了在TextScript类所设计的delay属性值( delay的间隔时间也是以帧数为单位的),那么元件就会知道它可以开始执行动作了,在此例中的动作是把每个元件字符显示出来并清除掉onEnterFrame动作。
此效果的所有代码：

代码:
 

import com.actionscript.text.TextScript;

var tf:TextFormat = new TextFormat();
tf.font="Arial Black";
tf.bold = true;
tf.size = 36;
tf.color = 0x55FF55;

typeOn = function() {
  if(this.frameCount++ > this.delay) {
    this._visible = true;
    this.onEnterFrame = undefined;
  }
}

var frameCounter:Number = 0;
this.onEnterFrame = function() {
    if(frameCounter++ % 50 == 0) {
        m.removeMovieClip();
        m = TextScript.createEffect(this, "Hello World!", 50, 10, tf, 2, typeOn);
    }
}
 


旋转效果：

演示效果：

这个效果仍是使用我们上面范例的方式，通过frameCounter的值来检验字符元件是否要开始动作，一旦frameCounter值超过delay值，字符元件就开自身旋转180度并且可见，然后覆盖onEnterFrame事件来动画自身旋转回初始位置。（查看源文件sample2）
代码:
 

rotateIn = function() {
  if(this.frameCount++ > this.delay) {
    this._rotation = -180;
    this._visible = true;
    this.onEnterFrame=function() {
      this._rotation += 10;
      if(this._rotation >= 0) {
        this._rotation = 0;
        this.onEnterFrame = undefined;
      }
    }
  }
}
 

sample2全部代码：
代码:
 

import com.actionscript.text.TextScript;

var tf:TextFormat = new TextFormat();
tf.font="Arial Black";
tf.bold = true;
tf.size = 36;
tf.color = 0x55FF55;

rotateIn = function() {
    if(this.frameCount++ > this.delay) {
        this._rotation = -180;
        this._visible = true;
        this.onEnterFrame=function() {
            this._rotation += 10;
            if(this._rotation >= 0) {
                this._rotation = 0;
                this.onEnterFrame = undefined;
            }
        }
    }
}

var frameCounter:Number = 0;
this.onEnterFrame = function() {
    if(frameCounter++ % 70 == 0) {
        m.removeMovieClip();
        m = TextScript.createEffect(this, "Hello World!", 50, 10, tf, 2, rotateIn);
    }
}

 


Deconstructive 效果

      Deconstructive效果是从场景中移除掉字符元件。它的方法名称为”removeEffect”.作为参数，它需要一个movieclip（这个movieclip是由constructive 方法生成的）和Delay（两个字符元件动作之间的帧数间隔）还有我们自定义的效果。如下：
代码:
 

TextScript.removeEffect(m:MovieClip, delay:Number, effect:Function);
 


关于字体元件更多的一些内容：
    §元件有一个特殊的方法称为remove.它用常用来替代removeMovieClip，用来从场景中移除字符元件。它允许上一级movieclip收集所有的不用的元素并且清除掉

淡出效果：

演示效果：

     编写deconstructive效果非常类似于编写constructive效果，当一个deconstructive效果被应用，所有的字符元件都会将它的frameCounter属性值设置为0.因此我们可以开始我们的下一行代码，以决定什么时候再次让它动起来。
如下代码：
代码:
 

fadeOut = function() {
  if(this.frameCount++ > this.delay) {
    this.onEnterFrame = function() {
      this._alpha -= 10;
      if(this._alpha <= 0) {
        this.remove();
      }
    }
  }
}
 

这个效果是等待frameCounter值超过delay.然后覆盖它自身的onEnterFrame事件在每一帧上减少alpha值直到它不可见，最后字符元件调用remove将其从内存中移出。查看源文件sample3.
全部代码：
代码:
 

import com.actionscript.text.TextScript;

var tf:TextFormat = new TextFormat();
tf.font="Arial Black";
tf.bold = true;
tf.size = 36;
tf.color = 0x55FF55;

fadeOut = function() {
  if(this.frameCount++ > this.delay) {
    this.onEnterFrame = function() {
      this._alpha -= 10;
      if(this._alpha <= 0) {
        this.remove();
      }
    }
  }
}

var frameCounter:Number = 0;
this.onEnterFrame = function() {
    if(frameCounter++ % 65 == 0) {
        m.removeMovieClip();
        m = TextScript.createEffect(this, "Hello World!", 50, 10, tf, 2, function(){});
        //下面的代码是轮询出每一个字符元件，因为我们没有给出constructive方法（如上例中方法为function(){},前没有给出具体的constructive方法）我们需要让它们都可见，以便显示出来destructive方法。
        for(var i in m) {
            m._visible = true;
        }
        TextScript.removeEffect(m, 2, fadeOut);
    }
}
 


附加演示文件:


深入：

当使用TextScript创建字体效果时，记住你使用的都是movieclip的强大功能。你可以改变字体的色彩，应用滤镜和融合效果，重建复杂的物理效果，并且不要忘记也可以使用声音或其它媒体。这个类编写的相对比较简单，但是它的伸缩性很强，加上你的一点点创意，你应能创建出更有趣的效果来。你可以在TextScript类中查看切换效果函数（从类的第108行开始）.它们是内置的createEffect和removeEffect方法。如果你创建出的很酷的效果，不要忘记分享啦。J

egoldy提示：在做中文体效果时，我们同样需要嵌入字体，如上面范例制作时嵌入的“方正简美黑”,但大家可能会担心会变大，这是肯定的，如果制作很长的段落是不合适的，用于制做文字不是很多的内容还是很合适的，在上面的范例中如我使用的文本为” 欢迎来到webstudio”那么在嵌入字体时只需要将这一行字嵌入就可以了，这样每个文件并不会超过10k.同样也会满足我们的大多数需求。Cheers J..

全部源文件下载

视频教程列表
文章教程搜索
 
Flash AS推荐教程
Flash AS热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058