テキストにぼかし効果をかける(BlurFilter)

2010/08/18 15:50
カテゴリーAdobe Flash CS

テキストにぼかし効果(ブラー:Blur)をかける方法を記載します。
以下はCentury GothicというフォントにBlurFilterをかけたサンプルです。
太めのハッキリしたフォントの方が綺麗に表示できます。

実行環境

ActionScript3.0 / Adobe Flash CS 5

サンプルプロジェクト

ここで使用するプロジェクトは以下からダウンロードできます。
サンプルプロジェクトのダウンロード

解凍すると以下の構成になっています。

    ./sample
       + user
       |  + spec
       |     + Main.as       ----> メインクラス(ドキュメントクラス)
       + text_blur.as3proj   ----> FlashDevelopプロジェクト
       + text_blur.fla       ----> Flash本体

BlurFilterの使い方

　ここでは以下の手順でブラーフィルタをかけています。
　１．埋め込みフォントを適用したテキストフィールドを生成
　２．テキストフィールドをビットマップに変換
　３．ビットマップにブラーフィルタを適用
　４．ビットマップをステージに配置
　埋め込みフォントについては埋め込みフォントをASから使用するを参照してください。
　埋め込みフォントを使用しない場合、28行目の [ myFont.fontName ] 部分を
　 "MS UI Gothic" などのフォント名を直接指定すればよいです。

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.

61.

62.

63.

64.

65.

66.

67.

68.

69.

70.

package user.spec

{

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.MovieClip;

import flash.filters.BlurFilter;

import flash.text.TextField;

import flash.text.TextFieldAutoSize;

import flash.text.TextFormat;

‌

public class Main extends MovieClip

{

public function Main():void

{

// ====== 埋め込みフォント(ImplementFontと命名した)のインスタンスを生成

var myFont:ImplementFont = new ImplementFont;

‌

// ====== テキストフィールドのインスタンスを生成

var myTextField:TextField = new TextField();

‌

// ====== 埋め込みフォントを使用する

myTextField.embedFonts = true;

‌

// =======================================

// テキストフィールドのスタイルを設定

// =======================================

myTextField.defaultTextFormat = new TextFormat(

myFont.fontName, 35, 0xA0A0FF, false, false, false, null );

            //      |                 |      |      |     |      |      +- URL

            //      |                 |      |      |     |      +

--- アンダーライン有無

            //      |                 |      |      |     +





 Italicにするかどうか

            //      |                 |      |      +







- Boldにするかどうか

            //      |                 |      +









--- フォント色(RGB)

            //      |                 +













 フォントサイズ(pt)

            //      +



















--- フォント名

‌

// =======================================

// テキストを設定して左寄せ

// =======================================

myTextField.text = "sample Blur text";

myTextField.autoSize = TextFieldAutoSize.LEFT;

‌

// =======================================

// ビットマップにテキストフィールドを描画する(TextField→BitMap)

// =======================================

var myBitMapData:BitmapData

= new BitmapData(myTextField.width, myTextField.height, true, 0);

myBitMapData.draw(myTextField);

// ====== ビットマップデータからビットマップのインスタンスを生成

var myBitMap:Bitmap = new Bitmap( myBitMapData );

‌

// =======================================

// BlurFilterのインスタンスを生成し、ビットマップに適用(ぼかし効果)

// =======================================

var myBlur:BlurFilter = new BlurFilter( 4, 4, 1 );

            //                                      |  |  +

 ぼかし実行回数

            //                                      |  +

--- 垂直方向のぼかし量(?255)

            //                                      +



- 水平方向のぼかし量(?255)

myBitMap.filters = [myBlur];

‌

// ====== ビットマップをステージに追加

myBitMap.x = 0;

myBitMap.y = 0;

addChild(myBitMap);

}

このコードは CodePublisher で生成しています

てすとぺーじ v0.0.8