読者です 読者をやめる 読者になる 読者になる

FlashEff2でテキストアニメーションしてみました。

Flex

FlashEff2でテキストアニメーションしてみました。
こんな感じ
http://moeten.info/flex/20091201_flexTest/bin-release/test3D.html

それにしてもTextFieldなんて初めて使ったからてこずった汗
追記:あ、マニュアルみたらUITextFieldってものがあった。こっちを使おう。
FlexでTextFieldを使うときに注意する点。

addchildはUIcomponentへ

×

var txt:TextField = new TextField();
addChild(txt);

var txt:TextField = new TextField();
var ui:UIComponent = new UIComponent();
ui.addChild(txt);
addChild(ui);

FlashコンポーネントはUIComponentを介してFlexステージへaddchildするのがルール。

フォントの埋め込みはEmbedを使用

×フォントが表示されない

var txt:TextField = new TextField();
var tf:TextFormat = new TextFormat();
tf.font = "Bauhaus 93";
txt.embedFonts = true;

○先にEmbedしておいてから利用すればOK

[Embed(source = "BAUHS93.TTF",fontName = "Bauhaus 93",mimeType = 'application/x-font')]
private var Font_Bauhaus:Class;
var txt:TextField = new TextField();
var tf:TextFormat = new TextFormat();
tf.font = "Bauhaus 93";

Flexでの埋め込みはなにはともあれEmbed
すべてのソースはこちら。そのうちFlex用に簡単化しておきます(^^;

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"
    creationComplete="init()" backgroundGradientAlphas="[1,1]" backgroundGradientColors="[0xffffff,0x222222]"
    verticalScrollPolicy="off" horizontalScrollPolicy="off" viewSourceURL="srcview/index.html" xmlns:text="flash.text.*">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import com.jumpeye.Events.FLASHEFFEvents;
import com.jumpeye.flashEff2.text.glow.FETGlow;
import com.jumpeye.flashEff2.text.bubbles.FETBubbles;
//フォントの埋め込み
[Embed(source = "BAUHS93.TTF",fontName = "Bauhaus 93",mimeType = 'application/x-font')]
private var Font_Bauhaus:Class;
//初期化関数
private function init():void{
    //textの作成。TextFieldでないとエフェクトが動作しない。
    var ctxt:String = "hogeho\ngeho asdlfjaslkdjfalksdjf jaslkdjfalksjaslkdjfalksjaslkdjfalks jaslkdjfalks jaslkdjfalks alskjdfalksjd http://d.hatena.ne.jp/haru-komugi/";
    var txt:TextField = new TextField();
    var tf:TextFormat = new TextFormat();
    tf.font = "Bauhaus 93";
    tf.size = 30;
    tf.color = 0xffffff;
    tf.align = "center";
    txt.defaultTextFormat = tf;
    txt.mouseEnabled = false;
    txt.antiAliasType = "advanced"
    txt.type = "dynamic";
    txt.multiline = true;
    txt.wordWrap = true;
    txt.width = 300;
    txt.height = 8000;
    txt.embedFonts = true;
    txt.autoSize = TextFieldAutoSize.CENTER;
    //txt.border = true;           // デバック時確認用
    txt.text = ctxt;
    txt.x = 200;
    txt.y = 100;
    //ステージにtextを追加
    var ui:UIComponent = new UIComponent();
    ui.addChild(txt);
    addChild(ui);
    //エフェクト処理
    var fe:FlashEff2Flex = new FlashEff2Flex();
    fe.addEventListener(FLASHEFFEvents.TRANSITION_END , restargShowEffect);
    this.addChild(fe);
    fe.target =txt;
    //hideEffect
    var pattern0:FETGlow = new FETGlow();
    pattern0.preset=27;
    pattern0.color=3381759;
    pattern0.maxGlow=2;
    pattern0.maxBlurX=3;
    pattern0.maxBlurY=15;
    pattern0.alphaPercentage=10;
    pattern0.groupDuration=0.5;
    pattern0.partialGroup='letters';
    pattern0.partialPercent=100;
    pattern0.partialBlurAmount=0;
    pattern0.partialStart=50;
    pattern0.tweenDuration=1;
    pattern0.tweenType='Quadratic';
    pattern0.easeType='easeOut';
    fe.hideTransition=pattern0
    //showEffect
    var pattern1:FETBubbles = new FETBubbles();
    pattern1.preset=9;
    pattern1.distance=50;
    pattern1.sinusSize=6;
    pattern1.numberOfSinusoids=3;
    pattern1.speedBlurAmount=2;
    pattern1.alphaPercentage=32;
    pattern1.blurQuality=2;
    pattern1.groupDuration=1;
    pattern1.partialGroup='letters';
    pattern1.partialPercent=100;
    pattern1.partialBlurAmount=0;
    pattern1.partialStart=50;
    pattern1.tweenDuration=1.5;
    pattern1.tweenType='Back';
    pattern1.easeType='easeInOut';
    fe.showTransition=pattern1;
}
//エフェクト終了イベント
private function restargShowEffect(evt:FLASHEFFEvents):void{
    var effectInstance:FlashEff2Flex = evt.target as FlashEff2Flex;
    if( effectInstance.currentTransitionType == "hide" ){
        effectInstance.show();
    }
}
]]>
</mx:Script>
</mx:Application>

参考リンク
Flex備忘録:MXMLでTextFieldの使用方法
TextField
Actionscriptで埋め込みフォントを利用する