<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>flair4 blog</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/" />
    <link rel="self" type="application/atom+xml" href="http://blog.flair4.jp/atom.xml" />
    <id>tag:blog.flair4.jp,2007-11-08://1</id>
    <updated>2009-11-09T18:43:02Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Publishing Platform 4.01</generator>

<entry>
    <title>AS3.0 TimerEventOptimizer の性能を調べてみた</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/11/as30-compare-optimizer.html" />
    <id>tag:blog.flair4.jp,2009://1.63</id>

    <published>2009-11-09T17:19:27Z</published>
    <updated>2009-11-09T18:43:02Z</updated>

    <summary>というわけで 前記事で作った TimerEventOptimizer を 早速、...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="enterframe" label="EnterFrame" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="optimizer" label="Optimizer" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="timerevent" label="TimerEvent" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[というわけで <a href="http://blog.flair4.jp/2009/11/as30-timerevent-optimizer.html">前記事</a>で作った TimerEventOptimizer を
早速、性能比較しちゃいます。<br/>
<br/>]]>
        <![CDATA[<br/>
もう文章書くの疲れたのでちゃちゃっとやります。<br/>
<br/>
端的に言うと、Timer と EnterFrame 両方と<br/>
以下の条件で速度比較してみるってテストをやりました。<br/>
<br/>
<ul>
<li>fps 50</li>
<li>8000個 の Sprite</li>
<li>Timer を用いる場合は delay = 20 ms ( 50 fps ) で行う
</ul>
<br/>
では、もうぱぱぱっとキャプチャ貼っちゃいましょう！<br/>
<br/>
<h2>EnterFrame</h2>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="EnterFrame.png" src="http://blog.flair4.jp/2009/11/10/EnterFrame.png" width="400" height="400" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></span><br style="clear:both"/>
<br/>
まぁ・・・流石に重い<br/>
<br/>
<br/>
<h2>Timer</h2>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="Timer.png" src="http://blog.flair4.jp/2009/11/10/Timer.png" width="400" height="400" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></span><br style="clear:both"/>
<br/>
うーんやっぱ重い<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
さて、それではお待ちかね、TimerEventOptimizer さんのご登場。<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>TimerEventOptimizer</h2>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="TimerEventOptimizer.png" src="http://blog.flair4.jp/2009/11/10/TimerEventOptimizer.png" width="400" height="400" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></span><br style="clear:both"/>
<br/>
<span style="font-size:90px;color:#ff0000;text-weight:bold;">ktkr!!</span><br/>
<br/>
けっこう速いんじゃないでしょうか！？<br/>
せっかくなので、EnterFrameEventOptimizer との性能比較もやっちゃいます！
<br/>
<br/>
<h2>EnterFrameEventOptimizer</h2>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="EnterFrameEventOptimizer.png" src="http://blog.flair4.jp/2009/11/10/EnterFrameEventOptimizer.png" width="400" height="400" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></span><br style="clear:both"/>
<br/>
<span style="font-size:120px;color:#ff0000;text-weight:bold;">！！！</span><br/>
<br/>
<br/>
EnterFrameEventOptimizer を 超えちまった！<br/>
心境的には複雑！！かなり複雑！！！<br/>
<br/>
でもまあ速かったからいいか。<br/>
<br/>
<br/>
というわけで速度比較でございました。<br/>
<br/>
ちなみにソースは<a href="http://blog.flair4.jp/2009/11/as30-timerevent-optimizer.html">前の記事</a>にあげてありますので<br/>
この記事から見た人はそちらをどうぞ。]]>
    </content>
</entry>

<entry>
    <title>AS3.0 EnterFrameに引き続きTimerEventの最適化クラスを作ってみた</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/11/as30-timerevent-optimizer.html" />
    <id>tag:blog.flair4.jp,2009://1.62</id>

    <published>2009-11-09T16:27:03Z</published>
    <updated>2009-11-10T15:36:17Z</updated>

    <summary>ちょっと前に、EnterFrameはまとめると速いという 内容の記事を書いたわけ...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="optimizer" label="Optimizer" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="timerevent" label="TimerEvent" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[ちょっと前に、<a href="http://blog.flair4.jp/2009/10/as30-enterframe.html">EnterFrameはまとめると速い</a>という<br/>
内容の記事を書いたわけですが<br/>
今度は TimerEvent をまとめる便利クラス書いてみたので晒します。<br/>
<br/>
<div style="color:#ff0000;font-weight:bold">11/10の昼時点のファイルにバグがありました<br/>
現在は修正版をアップロードしてあります。<br/>
すいません。すいません。すいません。＞＜<br/>
</div>]]>
        <![CDATA[<br/>
とりあえず、ファイル的にはこれになります<br/>
サンプルflaとかも入ってます<br/>
<br/>
<a href="http://flair4.jp/download/src/TimerEventOptimizer.zip">TimerEventOptimizer.zip</a><br/>
<br/>
<br/>
では、早速使い方をば<br/>
<br/>
<h2>基本的な使い方</h2>
<br/>
先ずはインスタンスの生成ですが基本Timerと一緒です。<br/>
第一引数に delay, 第二引数に repeatCount を指定します。<br/>
(挙動は基本Timerに則るので細かい説明は割愛します)<br/>
<br/>
<pre class="as_code">// delay 1000 ms で optimizer を生成.
var opt:TimerEventOptimizer = new TimerEventOptimizer( 1000 );</pre>
<br/>
で、後は突っ込む・・・のですが<br/>
今回は EnterFrame 版とちょっと違います。<br/>
<br/>
EnterFrame 版の引数はリスナのみだったのですが<br/>
今回は引数が三つあります。<br/>
<br/>
<br/>
◆ type<br/>
　　TimerEvent.TIMER か TimerEvent.TIMER_COMPLETE を指定<br/>
<br/>
◆ listener<br/>
　　これはいつも通りのイベントリスナです。<br/>
<br/>
◆ repeatCount [ default : 0 ]<br/>
　　これはちょっと特殊なので後述します。<br/>
<br/>
<br/>
第三引数を考えなければ、ほぼ普段のTimerと変わりません。<br/>
で、とりあえず普通の使い方。<br/>
<br/>
登録 / 削除 は普段の感じで出来ます。<br/>
<pre class="as_code">// optimizer に登録.
opt.addEventListener( TimerEvent.TIMER, closure );
opt.removeEventListener( TimerEvent.TIMER, closure );
</pre>
<br/>
このように、ほぼTimerと同じ感覚で使えるので<br/>
それなりに使いやすいんじゃないかなと思います。<br/>
<br/>
<br/>
<br/>
ですが、このクラスはこれだけでは終わらせません。<br/>
これだけならあんまり利点無いですからね。<br/>
<br/>
<br/>
<br/>
<h2>便利な機能</h2>
<br/>
Timerっていろいろと使い方があるじゃないですか。<br/>
でも結構使う時面倒なことが多いというか<br/>
repeatCount を 1 にしてちょこっと使いたいだけなのに<br/>
わざわざ作るのだるいなー。みたいな事があったりして。<br/>
<br/>
なので、そんなめんどくさい事を<br/>
手助けする機能を盛り込みました。<br/>
<br/>
その機能は、先ほどあえて説明をしなかった<br/>
addEventListner の第三引数 repeatCount に隠されています。<br/>
<br/>
<br/>
<h3>回数指定 リスナ登録</h3>
<br/>
例えば、10回だけタイマー回したい。<br/>
そんなときはこの機能を使うと便利です。<br/>
<br/>
<pre class="as_code">// 10回だけ TimerEvent.TIMER を受け取る.
opt.addEventListener( TimerEvent.TIMER, closure, 10 );</pre>
<br/>
こうすることで、10回だけ closure を実行したのち<br/>
リスナの登録から勝手に外されます。<br/>
<br/>
<h3>気軽に TimerEvent.TIMER_COMPLETE</h3>
<br/>
10回だけタイマー回ったのを知りたい。<br/>
delayは一緒だけど、ここでは10回で、こっちでは12回。<br/>
そんな面倒な状況に出くわした時はこの機能が便利です。<br/>
<br/>
以下の方法で、それらを解決できます。<br/>
<br/>
<pre class="as_code">// タイマーが10回実行されたタイミングで
// TimerEvent.TIMER_COMPLETE を受け取る.
opt.addEventListener( TimerEvent.TIMER_COMPLETE, closure, 10 );</pre>
<br/>
こうすることで、10回タイマーが実行されたのち<br/>
closure が実行され、リスナの登録から勝手に外されます。<br/>
<br/>
<br/>
この二つが、TimerEventOptimer の便利機能になります。<br/>
<br/>
<br/>
<h2>まとめ</h2>
<br/>
これらの機能は、作った本人が言うのもなんですが<br/>
ただの Timer に比べてかなり便利です。<br/>
<br/>
ただ、一点だけ注意点がありまして、それは<br/>
Timer が既に start された状態で、これらの関数を実行すると<br/>
delay のタイミングによっては正確なタイミングとならない事です。<br/>
<br/>
例えば,delay が 3000 とかだと 1500msたったタイミングで関数実行すると<br/>
一回目の TimerEvent.TIMER は 1500ms 後に実行されてしまいます。たぶん<br/>
<br/>
まあ、これはもともと Timer にも、ついてまわる問題なので<br/>
あまり気にならないかもしれませんが。<br/>
<br/>
個人的には delay を 100 とか小さい値にしといて<br/>
第三引数の repeatCount で時間調整してに使ってます。<br/>
これだけでもかなり軽量化が望めます。<br/>
<br/>
またまた地味なクラスですが、よかったらどうぞ。<br/>
ただ、バグとかあっても責任はもてませんが・・・<br/>
<br/>
でも言ってくれれば直します。<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
おっと、TimerEvent をまとめる事で<br/>
結局どんだけ速くなんのよって部分が書けていない・・・<br/>
<br/>
まあ、そこ気になる人もいますよね。(いてほしい)<br/>
なにより、自分が気になっているわけです。<br/>
<br/>
ただ、この記事そこそこな長さになってしまったので<br/>
そこに関しては、これからもう一記事書きまする。<br/>]]>
    </content>
</entry>

<entry>
    <title>AS3.0 KAYACの自習室に参加したついでに出来たものを晒す</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/11/as30-kayac-jisyushitsu-1107.html" />
    <id>tag:blog.flair4.jp,2009://1.61</id>

    <published>2009-11-07T18:24:50Z</published>
    <updated>2009-11-07T19:03:54Z</updated>

    <summary>今日、といっても日付的には昨日ですが KAYAC の 自由が丘オフィス (ART...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="debug" label="Debug" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="slider" label="Slider" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[今日、といっても日付的には昨日ですが<br/>
<a href="http://www.kayac.com/">KAYAC</a> の 自由が丘オフィス (<a href="http://www.art-meter.com/">ART-Meter</a>の店舗でもある)で<br/>
自習室なる、ただ集まって黙々と作業するという<br/>
なんとも不思議なイベント？に久々に参加しまして<br/>
そこで、ちょっとしたものを作ったので晒します。<br/>
<br/>]]>
        <![CDATA[<br/>
んで、早速作ったのがこれ<br/>
<br/>
◆ 超簡易パラメタ変更ツール<br/>
<embed width="420" height="300" align="middle" type="application/x-shockwave-flash" name="Sample"
 bgcolor="#ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://blog.flair4.jp/2009/11/08/Sample.swf"/><br/>
<br/>
なんか某所で似たようなものを最近見たことあるぞ？<br/>
という方も居るかもしれませんが<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="font-size:20px;color:#ff0000;font-weight:bold;">気のせいです！！！！！！</div>
<br/>
<br/>
<br/>
<br/>
<br/>
まあ、スライダーとかUI系のパーツ作ってたんですが<br/>
それが一番生かせるのがこれだろうっつー事で作りました。<br/>
<br/>
で、出来ることを簡単に列挙<br/>
<ul>
<li>スライダの追加</li>
<li>区切り線の追加</li>
<li>ドラッグ</li>
<li>矩形右下のつまみでサイズ変更 ( 地味に便利 )</li>
<li>ダブルクリックで”超”最小化 ( 地味に小さすぎ )</li>
<li>左上にはみ出た状態で最小化しても平気 ( 地味に優しい )</li>
<li>TextInputに数値を直接指定 ( 地味に大事 )</li>
<li>TextInputにFocus時、Tabキーで次のTextInputへ  ( 地味に嬉しい )</li>
</ul>
<br/>
みたいな感じです。使い方は簡単(たぶん)。<br/>
例えば sp という Sprite を作って x とか y の値をいじりたい時。<br/>
(前述のサンプルもこのコードで動いています)<br/>
<br/>
<pre class="as_code">// sp という Sprite を生成.
var sp:Sprite = new Sprite();
sp.graphics.beginFill( 0x000000, 1 );
sp.graphics.drawRect( -50, -50, 100, 100 );
            
sp.x = 100;
sp.y = 150;
addChild( sp );

// スライダの入れ物を生成.            
var box:ParameterSliderBox = new ParameterSliderBox();

// x, y を変更する スライダ を追加.
box.addSlider( sp, "x", 0, 200, 10 );
box.addSlider( sp, "y", 100, 200, 10 );

// 区切り線の追加.
box.split();

// scale を変更する スライダ を追加.
box.addSlider( sp, "scaleX", 0, 2, 0.1 );
box.addSlider( sp, "scaleY", 0, 2, 0.1 );

// 区切り線の追加.
box.split();

// rotation を変更する スライダ を追加.
box.addSlider( sp, "rotation", 0, 360, 1 );

box.x = 190;
box.y = ( stage.stageHeight - box.height ) / 2;

addChild( box );
</pre>
<br/>
こんな感じです。どうでしょう。<br/>
ちなみに、addSlider の引数は左から<br/>
<br/>
対象Object, 対象プロパティ名, 最小値, 最大値, インターバル<br/>
<br/>
になっとります。<br/>
インターバルは 10 とかすると、数値が10 単位で変更できます。<br/>
<br/>
で、ソースやサンプルは<a href="http://flair4.jp/download/src/ParameterSliderBox.zip">こちら</a>。<br/>
短時間で作ったのでバグがあるかもしれません。<br/>
<br/>
如何でしょうか。<br/>
今後の展望としては、敢えて引数に関数を渡せないようにした分<br/>
簡単だけど、自由度は下がってるので、その辺はうまいこと<br/>
出来るようにしたいと思ってます。<br/>
<br/>
まあ正直、今回最も力入れたのは、このパラメタ変更ツールより<br/>
スライダーなので、どっちかっつーとそっち単体の方が使い勝手いいかも。<br/>
<br/>
とりあえず、眠いので細かい説明はまたの機会に・・・<br/>]]>
    </content>
</entry>

<entry>
    <title>AS3.0 いろいろ便利なMovieClipクラスを晒してみる</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/11/as30-movieclip.html" />
    <id>tag:blog.flair4.jp,2009://1.60</id>

    <published>2009-11-02T17:06:23Z</published>
    <updated>2009-11-02T17:23:38Z</updated>

    <summary>前回の EnterFrame の管理に引き続き 便利そうなオレオレライブラリを晒...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="library" label="Library" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[前回の EnterFrame の管理に引き続き<br/>
便利そうなオレオレライブラリを晒してみる。<br/>
<br/>]]>
        <![CDATA[<br/>
今回晒すクラスは ExMovieClip。 ファイルは以下に置きました。<br/>
今回は関連ファイルがいくつかあるため package を jp.flair4.lib で切ってあります)<br/>
<br/>
<a href="http://flair4.jp/download/src/flair4lib.zip">flair4lib.zip</a><br/>
<br/>
この zip には以下のものが含まれています。<br/>
<br/>
<ul>
<li>jp.flair4.lib.display.ExMovieClip</li>
<li>jp.flair4.lib.display.IExMovieClip</li>
<li>jp.flair4.lib.events.EnterFrameEventOptimizer</li>
<li>flash.display.IInteractiveObject</li>
<li>flash.display.IDisplayObject</li>
<li>flash.display.IDisplayObjectContainer</li>
<li>flash.display.ISprite</li>
<li>flash.display.IMovieClip</li>
</ul>
<br/>
前半の３つが今回の自作クラス。<br/>
IExMovieClip は単純に interface です。<br/>
<br/>
最後の５つは、おなじみの各クラスの public メンバを<br/>
ひたすら列挙した Interface です。<br/>
その辺の細かい説明は後ほど。<br/>
<br/>
で、こういう晒す系は落として使ってもらおうというよりも<br/>
どういう設計思想なのかとかそういう所のほうがニーズがあると思うので<br/>
作ろうと思った背景に焦点をあてて説明していきます。<br/>
<br/>
<h2>EnterFrameOptimizer</h2>
<br/>
これの設計思想はいたって単純です。<br/>
<br/>
前回の記事でも述べたとおり、EnterFrameは個々に持つと重いから<br/>
一箇所でまわしちゃおうという思想から作られています。<br/>
<br/>
とはいえ、停止・再開したいといった状況や<br/>
こいつらは止めたいけど、こいつらは動かし続けるといったような<br/>
動作単位があると思ったので、new でインスタンス生成でき<br/>
pause(); resume(); といったメソッドを用意してあります。<br/>
<br/>
また、稀に１フレーム後だと参照がとれるんだけど・・・とか<br/>
１フレーム待つとうまく行く、みたいな状況に出くわす事があります。<br/>
そんな時に簡単に１フレーム後の処理を記述できるように<br/>
EnterFrameEventOptimizer.once(); という静的メソッドを用意しています。<br/>
<br/>
<br/>
<br/>
<h2>ExMovieClip</h2>
<br/>
さて、このクラスが今回のメインです。<br/>
このクラスは MovieClip の単なる拡張というだけでなく<br/>
けっこうな改造が施してあります。<br/>
<br/>
前提となる設計思想は、動作を軽く出来て、無駄を省く という<br/>
夢のような話なのですが、具体的に言うと シンタックスの省略と<br/>
EnterFrame イベントの管理が主です。<br/>
<br/>
以下 ExMovieClip インスタンスを eMC と表記します<br/>
また、大きく分けて 描画管理系 と イベント管理系 に分けて解説します<br/>
<br/>
<h3>描画管理系</h3>
<br/>
描画管理といいつつも、addChild 周りの実装がメインです。<br/>
ちょっと書くのが面倒って処理を簡略化しようというもの。<br/>
<br/>
◆ 右端 下端 を取得する<br/>
<pre class="as_code">// x + width
eMC.right

// y + height
eMC.bottom;
</pre>
<br/>
これの思想は単純明快。並べ替える時に<br/>
いちいち x + width とか書くのが面倒だっただけです。<br/>
<br/>
◆ 複数の DisplayObject を一気に 追加/削除 する<br/>
<pre class="as_code">// 単純な連続 addChild
eMC.addChildren( mcA, mcB, ... );

// 指定の index (今回は 0 ) に連続 addChildAt
eMC.addChildrenAt( 0, mcA, mcB, ... );

// 一気に削除系
eMC.removeChildren( mcA, mcB, ... );
</pre>
<br/>
これも何度も書くのが面倒だったからつくりました。<br/>
<br/>
◆ 特定の DisplayObject の 手前/後ろ に addChild する<br/>
<pre class="as_code">// mcA の手前に mcB を addChild
addChildFront( mcA, mcB );

// mcA の後ろに mcB を addChild
addChildBehind( mcA, mcB );
</pre>
<br/>
これもまたまた、index調べて云々というのが面倒だったので・・・<br/>
<br/>
◆ 自らを removeChild する<br/>
<pre class="as_code">eMC.removeOwn();</pre>
<br/>
これも面倒(ry<br/>
これは実際には親( parent )がいるか調べ、いれば<br/>
parent.removeChild(this); をしています。<br/>
いなければ何もしません。<br/>
地味だけどif文かかなくて良くなるので便利です。<br/>
<br/>
<h3>イベント管理系</h3>
<br/>
こちらの実装が ExMovieClip のメインです。<br/>
このクラスを使う利点の大半がここに集約されています。<br/>
<br/>
まず EnterFrame はまとめた方が良いという話は<br/>
前回述べましたが、いちいち考えてやるのって面倒ですよね。<br/>
<br/>
加えて、EnterFrame が持つもう一つの問題に<br/>
EnterFrame イベントは removeChild しても続行されるため<br/>
ゴミとして CPU 等のリソースを食いやすいというのがあります。<br/>
<br/>
で、これらを上手いこと解決しようというのがイベント管理系実装です。<br/>
<br/>
◆ stage から remove されたら外れる addEventListener<br/>
<pre class="as_code">eMC.addManagedEventListener( eventType, closure );</pre>
<br/>
この addManagedEventListener を用いると<br/>
stage から自分が外された瞬間にイベントリスナを<br/>
勝手に removeEventListener してくれます。<br/>
<br/>
また、再度 stage に追加され描画されたタイミングで<br/>
addEventListner しなおしてくれます。<br/>
<br/>
ちなみに 明示的に removeEventListener した場合は<br/>
完全に削除となるので、復元されることはありません。<br/>
<br/>
でも毎回 Managed 書くのめんどくさいという人には<br/>
以下の使い方を提供しています。<br/>
<br/>
◆ [static] 管理するイベント名を追加する<br/>
<pre class="as_code">ExMovieClip.addAutoManagedEventType( ...eventTypes );
ExMovieClip.removeAutoManagedEventType( ...eventTypes );
</pre>
<br/>
この設定をあらかじめしておくと<br/>
そのイベントタイプを addEventListener するときは<br/>
勝手に管理され removeChild 時に外すようになります。<br/>
<br/>
まあ使いどころ今のところ Event.ENTER_FRAME しか<br/>
無いんですけども・・・<br/>
<br/>
◆ [static] EnterFrameOptimizer を利用する<br/>
<pre class="as_code">ExMovieClip.useOptimizer = true;</pre>
<br/>
これをあらかじめ記述しておくと<br/>
Event.ENTER_FRAME が勝手に EnterFrameEventOptimizer に<br/>
ぶっこまれて管理されるようになります。<br/>
<br/>
EnterFrame まとめると早いのはわかったけど<br/>
なんか色々面倒だわって人にオススメです。<br/>
<br/>
<h3>まとめ</h3>
<br/>
まあ要するに、いかに EnterFrame 系の処理負荷を減らすか<br/>
そしてそれらを楽に行うかに特化した MovieClip です。<br/>
<br/>
<br/>
<h2>flash.display.IXXXX</h2>
<br/>
これに関しては、そもそも作らなくても、元からあるんじゃないの？<br/>
と思う人もいるかもしれませんが、実際これビルトインではありません。<br/>
<br/>
どんな時に使うかというと、 MovieClip を拡張したクラスの型を<br/>
interface で解決したい場合等が挙げられます。<br/>
<br/>
例えば、多種多様なキャラクターが存在するコンテンツで<br/>
それらのキャラクタを強い順に並べるクラス<br/>
CharacterLayout.as というものがあったとします。<br/>
<br/>
でも、それらのキャラクター達は本当に多種多様で<br/>
実装自体も千差万別、また修正頻度も多いという<br/>
聞いていると泣きたくなるような仕様だったとします。<br/>
<br/>
そんな時は以下のような方法で<br/>
interface を使って型解決をすることがあります<br/>
<br/>
◆ キャラクタ用 interface<br/>
<pre class="as_code">public interface ICharacter{
   // キャラクタの強さ.
    function get strength():Number;
}
</pre>
<br/>
◆ キャラクタレイアウト用クラス<br/>
<pre class="as_code">public CharacterLayout extends MovieClip{
   public function addCharacter( character:ICharacter ):void{
      addChild( character as DisplayObject );
      // --- character.strength を用いて並べる処理
      character.x = 100 * character.strength;
   }
</pre>
<br/>
こんな感じで、キャラクタ追加するメソッドの引数を<br/>
ICharacter で解決して、strength の値が取れれば何でも<br/>
突っ込めるようにしちゃったとします。<br/>
<br/>
一見すると大丈夫そうですが、ここで一つ問題が起こります。<br/>
何も考えずに実行すると x を指定する所でエラーになります。<br/>
なぜなら ICharacter は x というプロパティを持っていないからです。<br/>
<br/>
で、そうか！DisplayObject の interface を継承すリャいいじゃん！<br/>
そう思った瞬間わかります。あ、ねえや・・・と。<br/>
<br/>
関数内で、as MovieClip とかでキャストとかしちゃえばいいじゃん<br/>
とかそういう考え方もあるかとおもいますが、だったらはじめから<br/>
引数の型を MovieClip にするなり、 Character にするなりすれば良い。<br/>
<br/>
でも、前述のような状況で interface で解決することが<br/>
必須になる場合、これらが必要になるわけです。<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
以上です、気に入った物があればご自由にお使いください。<br/>
<br/>
他にもいろいろあるわけなんだけど、Sparkにコミットした方がいいのかな<br/>
教えて、beinteractive! ><]]>
    </content>
</entry>

<entry>
    <title>AS3.0 EnterFrameをまとめると速いよの話のやつ</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/10/as30-enterframe.html" />
    <id>tag:blog.flair4.jp,2009://1.59</id>

    <published>2009-10-27T16:30:35Z</published>
    <updated>2009-11-02T15:14:46Z</updated>

    <summary>昨日twitter上で、やっぱEnterFrameはまとめた方が速い という話が...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="enterframe" label="EnterFrame" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[昨日twitter上で、やっぱEnterFrameはまとめた方が速い<br/>
という話が出ていて、自分も結構前からやっているのですが<br/>
自分が使ってるクラスを公開しまする。<br/>
<br/>]]>
        <![CDATA[<br/>
とりあえず、ファイル的にはこれになります<br/>
(あえてパッケージはきらなかった)<br/>
<br/>
<a href="http://flair4.jp/download/src/EnterFrameEventOptimizer.zip">EnterFrameEventOptimizer.zip</a><br/>
<br/>
去年作ったので実装は微妙、でもバグは今のところない・・・はずw<br/>
<br/>
で、これの使い方<br/>
先ずはインスタンスの生成。<br/>
<br/>
<pre class="as_code">// optimizer の生成.
var opt:EnterFrameEventOptimizer = new EnterFrameEventOptimizer();
</pre>
<br/>
で、後は突っ込む<br/>
<br/>
<pre class="as_code">// optimizer に登録.
opt.addEventListener( closure );
</pre>
<br/>
これで終わり。
<br/>
もちろん remove も出来る。<br/>
<pre class="as_code">// optimizer から削除.
opt.removeEventListener( closure );
</pre>
<br/>
地味に入ってる機能<br/>
<br/>
EnterFrame処理の停止<br/>
<pre class="as_code">opt.pause();</pre>
<br/>
EnterFrame処理の再開<br/>
<pre class="as_code">opt.resume();</pre>
<br/>
各種プロパティ<br/>
<pre class="as_code">// 登録されているリスナ数 return uint;
opt.numListeners;
// EnterFrame処理が走っているか return Boolean;
opt.running;
</pre>
<br/>
指定フレーム後に一度だけ実行（static）<br/>
<pre class="as_code">// 10フレーム後に実行;
EnterFrameEventOptimizer.once( closure,10 );
</pre>
<br/>
falseを返すまで毎フレーム実行（static）<br/>
<pre class="as_code">EnterFrameEventOptimizer.every( closure );
</pre>
<br/>
などなど。<br/>
まあ地味ですが、よかったらどうぞ。<br/>
ただ、これを使って被ったあらゆる事項に責任はもてんでござる。]]>
    </content>
</entry>

<entry>
    <title>AS3.0 マウスイベントの伝播の理解とTIPS</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/10/as3-mouse-event-tips.html" />
    <id>tag:blog.flair4.jp,2009://1.58</id>

    <published>2009-10-24T16:10:13Z</published>
    <updated>2009-11-02T15:15:54Z</updated>

    <summary>そもそもこいつが無いと成り立たない！というくらい Flash制作する際に最も重要...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="mouseevent" label="MouseEvent" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[そもそもこいつが無いと成り立たない！というくらい<br/>
Flash制作する際に最も重要といっても過言ではないもの<br/>
それは MouseEvent ではないでしょうか。<br/>
<br/>
なにかとお世話になる MouseEvent ですが<br/>
意外と細かい扱い方を知っている人は少なかったりします。<br/>
<br/>
ですので今回は MouseEvent の伝播の仕組みについてです。<br/>
ちなみに、capture bubbling に関しての話は<br/>
ひとつの記事に収めるには複雑になりすぎるので今回は触れません。<br/>
<br/>]]>
        <![CDATA[<br/>
<h2>◆ MouseEvent の伝わり方</h2>
<br/>
例えば、以下のサンプルのように、ステージに配置された要素をクリックすると<br/>
ランダムで位置が変わるとしましょう。<br/>
<br/>
<embed width="300" height="200" align="middle" type="application/x-shockwave-flash" name="SampleA"
 bgcolor="#ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://blog.flair4.jp/2009/10/25/SampleA.swf"/><br/>
<br/>
構造的にはこう<br/>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="image01.jpg" src="http://blog.flair4.jp/2009/10/25/image01.jpg" width="343" height="141" class="mt-image-left" style="margin: 0 20px 20px 0;"/></span><br/>
<br/>
例えば、B をクリックした場合<br/>
内部では以下の経路でイベントが通知されます<br/>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="image02.jpg" src="http://blog.flair4.jp/2009/10/25/image02.jpg" width="343" height="141" class="mt-image-left" style="margin: 0 20px 20px 0;"/></span><br/>
<br/>
実際はもう少し複雑(capture とか bubbling とか)なのですが<br/>
端的に言うとこういったイメージでイベントが伝播します。<br/>
<br/>
ちなみに、A と B が重なった場合には B をクリックする事は基本的に出来ません。<br/>
重なりが上になっているものがクリックできる
というのは、感覚的にも想像しやすい挙動だと思います。<br/>
<br/>
ちなみに、コレを逆手に取った Tips として<br/>
透明な塗りの要素をステージの最上位に addChild してしまう事で<br/>
あらゆる要素をクリックできなくする事が出来ます。<br/>
<br/>
<embed width="300" height="200" align="middle" type="application/x-shockwave-flash" name="SampleA"
 bgcolor="#ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://blog.flair4.jp/2009/10/25/AmikakeSample.swf"/><br/>
<span style="color:#ff0000; text-size:8px;">※ わかりやすくするため網掛けにしてあります</span><br/>
<br/>
これは、ステージの直下に塗り（ サンプルでは sheet というMovieClip ）を置く事で<br/>
イベントの伝播が、以下のようになるからです。<br/>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="image05.jpg" src="http://blog.flair4.jp/2009/10/25/image05.jpg" width="343" height="177" class="mt-image-left" style="margin: 0 20px 20px 0;"/></span><br/>
<br/>
まあ、言わずもがなといったところでしょう。<br/>
最上部に塗りがあって、下に到達する事をブロックしているため<br/>
塗り以下のレイヤにイベントが行かないというわけです。<br/>
<br/>
これは結構使われている手法ですし<br/>
直感的に理解しやすい（重なりが上のものにイベントが行く）ものですので<br/>
そんな Tips は知ってるよ、という方も多いでしょう。<br/>
<br/>
まあ、ここまではウォーミングアップです。<br/>
次はこのイベントの伝播を制御してみようと思います。<br/>
<br/>
◆ MouseEvent の伝播の制御方法<br/>
<br/>
さて、先ずは以下のFlashを触ってみてください。<br/>
さっきと同じに見えますが、ちょっとした違いがあります。<br/>
<br/>
<embed width="300" height="200" align="middle" type="application/x-shockwave-flash" name="SampleA"
 bgcolor="#ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://blog.flair4.jp/2009/10/25/ThroughSample.swf"/><br/>
<br/>
触ってもらえばわかっていただけるかと思いますが<br/>
このFlashは上に半透明の要素を被せているのに下の要素がクリックできます。<br/>
意外とこれのやり方を知らない人は多いんじゃないでしょうか。<br/>
<br/>
イベントの伝播と制御方法を理解すると<br/>
こんなFlashを作る事が可能になります。<br/>
<br/>
伝播の経路を制御する方法として<br/>
Flashには mouseEnabled と mouseChildren<br/>
という２つのプロパティが存在します。<br/>
<br/>
<h3>◆ mouseEnabled  : MouseEventを受け取るかの設定</h3>
<br/>
mouseEnabled は Sprite や MovieClip が、MouseEvent の通知を<br/>
受けるか否かを設定できます。 false の場合は通知をうけません。<br/>
<br/>
<pre class="as_code">var spriteA:Sprite, spriteB:Sprite, spriteC:Sprite;

spriteA.addChild( spriteB );
spriteB.addCHild( spriteC );

// MouseEvent の通知を受けない.
spriteB.mouseEnabled = false;
</pre>
<br/>
イメージとしては以下のような状態です。<br/>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="image06.jpg" src="http://blog.flair4.jp/2009/10/25/image06.jpg" width="382" height="278" class="mt-image-left" style="margin: 0 20px 20px 0;"/></span><br/>
<br/>
このプロパティを false にしても、MouseEventを受け取らないだけであって<br/>
自分の子に対してはイベントが伝播する事に注意してください。<br/>
<br/>
<h3>◆ mouseChildren : MouseEventを子に通知するかの設定</h3>
<br/>
mouseChildren は Sprite や MovieClip が、MouseEvent の通知を<br/>
自分に addChild されている要素に通知するかを設定できます。<br/>
false の場合は、子要素に通知を行いません。もちろん、孫以下にも通知されません。<br/>
<br/>
<pre class="as_code">var spriteA:Sprite, spriteB:Sprite, spriteC:Sprite;

spriteA.addChild( spriteB );
spriteB.addCHild( spriteC );

// MouseEvent を子に通知しない.
spriteA.mouseChildren = false;
</pre>
<br/>
イメージとしては以下のような状態です。<br/>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="image07.jpg" src="http://blog.flair4.jp/2009/10/25/image07.jpg" width="382" height="278" class="mt-image-left" style="margin: 0 20px 20px 0;"/></span><br/>
<br/>
このプロパティをfalse にしても、自分自身はイベントを<br/>
受け取るという事に注意してください。<br/>
<br/>
<br/>
◆ 実際に制御してみる<br/>
<br/>
さて、この２つをうまく使ってあげると<br/>
前述したようなマウスイベントが貫通するFlashを作ることが出来ます。<br/>
<br/>
では具体的にどうやるのかというと<br/>
以下のような構成にすることで実現しています。<br/>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="image08_1.jpg" src="http://blog.flair4.jp/2009/10/25/image08_1.jpg" width="382" height="239" class="mt-image-left" style="margin: 0 20px 20px 0;"/></span><br/>
<br/>
これでイベントが貫通します。<br/>
layer というMovieClip があり、その子要素として<br/>
sheet という半透明の塗りの MovieClip がぶら下がっています。<br/>
( 要素の名称などに意味は無いので自由につけてください )<br/>
<br/>
しかし layer は mouseEnabled, mouseChildren 共に false であるため<br/>
全くイベントを受け取れません。そのため、重ね順では下にあるはずの<br/>
mcA,　B,　C が次の通知対象となり、マウスイベントが伝播するというわけです。<br/>
<br/>
まあ、視覚的には貫通したように見えているだけで<br/>
正確には、イベントの伝播経路が変わったというべきでしょうか。<br/>
<br/>
<span class="mt-enclosure mt-enclosure-image"><img alt="image08.jpg" src="http://blog.flair4.jp/2009/10/25/image08.jpg" width="382" height="252" class="mt-image-left" style="margin: 0 20px 20px 0;"/></span><br/>
<br/>
また、今回は mouseEnabled, mouseChildren 両方を説明する意味もかねて<br/>
あえて子階層を持つ要素（layer）を MouseEvent が貫通するように作っています。<br/>
もし、layer が子要素を持っていないような場合においては<br/>
layer.mouseEnabled = false; のみで貫通します。<br/>
ただ、上記のような構成にしておくと、手前に置くけど MouseEvent とりたくない<br/>
という要素を、ひたすら layer に突っ込めば良くなるので、実装上は便利です。<br/>
<br/>
これが貫通Flashのトリックです。<br/>
<br/>
これの何が便利なのかって話がありますが、例えば<br/>
サイト全体に網掛けするとか、光で白く薄くなっている部分を作りたいとか<br/>
あとは、静物の後ろに隠れているキャラクタをクリックさせたいとか<br/>
表現の都合上手前に表示したいけど<br/>
MouseEventを奪ってほしくないものに絶大な効果を発揮します。<br/>
<br/>
地味ーーーに使いどころがあったります。<br/>
<br/>
<h2>◆ まとめ</h2>
<br/>
あんまりうまく説明できていなくて申し訳ないのですが<br/>
MouseEvent の伝播の仕組み、知っておくと何かと便利でっせ。<br/>
というお話です。<br/>
<br/>
<br/>
今回はこの辺で。
なにか質問等がありましたら、メッセージでも <a href="http://twitter.com/flair4jp">twitter</a> でもお気軽にどうぞ。]]>
    </content>
</entry>

<entry>
    <title>Flash制作に欠かせない3つのツール・flair4jp編</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/10/flash-tools-flair4jp.html" />
    <id>tag:blog.flair4.jp,2009://1.57</id>

    <published>2009-10-13T16:10:51Z</published>
    <updated>2009-10-13T17:15:57Z</updated>

    <summary>いろいろと盛り上がっているようなので便乗します。 元ネタはKAYACさんの_le...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="tool" label="Tool" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[いろいろと盛り上がっているようなので便乗します。<br/>
元ネタはKAYACさんの<a href="http://level0.kayac.com/">_level0.KAYAC</a>での<br/>
ツール紹介祭りですが、僕もさっそく始めます。<br/>
<br/>]]>
        <![CDATA[<br/>
ぶっちゃけて言えば<br/>
皆さんが紹介しているツールが基本的にオススメです！以上！<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
ごめんなさい、嘘です。ちゃんと紹介します。<br/>
でもかぶりそうなので、チューニングマニアらしく、マゾい路線でいきます。<br/>
主にWindowsの話になってしまいますがそこはご愛敬。<br/>
<br/>
<br/>
<h2>1. 通信監視ツール</h2>
<br/>
まぁ言わずもがなといったところでしょうか。<br/>
いろいろ作ってて、実際にサーバに上げると、ほんとにちゃんと通信してんのかよ！<br/>
って思ったときに使うツールですね。<br/>
<br/>
<br/>
<b>■ Firebug ( Firefoxアドオン )</b><br/>
<br/>
言わずと知れたトレーサ <a href="https://addons.mozilla.org/ja/firefox/addon/1843">Firebug</a> が好きです。<br/>
ログ取れるしJSトレース出来るし言うことなし。<br/>
<br/>
<b>■ inetSpy+横取り丸 ( IE用 )</b><br/>
<br/>
<a href="http://hide.maruo.co.jp/software/inetspy.html">inetSpy</a>+<a href="http://hide.maruo.co.jp/software/ydm.html">横取り丸</a> はフリーの通信監視ソフトです。<br/>
以下のような感じで通信内容を監視できて便利です。<br/>
<span class="mt-enclosure mt-enclosure-image"><a href="http://blog.flair4.jp/2009/10/14/inetspy.png"><img alt="inetspy.png" src="http://blog.flair4.jp/2009/10/14/inetspy-thumb-200x249.png" width="200" height="249" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></a></span><br/>
<br style="clear:both"/>
まあブラウザ依存の少ないFlashではIEの通信監視は別に要らんのですが。<br/>
稀に依存が存在するので知っておいて損はないでしょう。<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>2.Celeron マシン</h2>
<br/>
皆さんは Celeron という CPU をご存じだろうか。<br/>
そう、あの Pentium じゃない方の Intel だ。<br/>
<br/>
なんでCeleronが必須ツールなのかって？<br/>
それはチューニングと深い関係があるんだ。<br/>
<br/>
これは Celeron マシンと戦った漢達の真実の記録である。
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
あれは今年の４月、某プロジェクトでのテストでの興味から始まった。<br/>
チューニングに次ぐチューニングを重ね、自負もあった。<br/>
1GHz 512MB の Pentium M マシンでの負荷テストでも80fps(100fps設定)。<br/>
もう敵などいない、そう思っていた。<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
ある時、ちょっとした興味からこんな話題になった<br/>
「そういえば、CeleronマシンてFlashと相性悪いよね。」<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
冗談半分で笑いながら Celeron チェックが執り行われた。<br/>
まさか、あんなことになろうとは、誰も知らずに。<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
テスト用に駆り出されたマシンスペックは、 2GHz 1GB Windows XP。<br/>
これといった問題のない、いわゆる普通のマシンといった性能。<br/>
皆余裕の表情で画面を見つめた・・・<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
そして絶句した<br/>
((( (  ( (゜Д(゜Д(゜Д゜;) )  )  ) )))　ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
画面に叩き出されたfps<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p style="color:#ff0000; font-size:150px;">11fps</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
断言しよう。<br/>
<br/>
Celeronマシンを経験するとFlashチューニング開発は鬼のように上達する。<br/>
特に2006年より前くらいのやつがいい。<br/>
<br/>
まぁ、最近のCeleronはかなりお利口になったようだけどね<br/>
<br/>
ちなみにその後のチューニングで23fpsまで持ち直しました。<br/>
めでたしめでたし。<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>3. 毒舌</h2>
<br/>
最後のオチがもはやそれかよ！！<br/>
ってお思いの方、すいません。でも違うんです。<br/>
<br/>
正確には、突っ込まれたくないところを突っ込んでくれる人<br/>
というべきでしょうか、自分の中ではあらゆるバグチェッカ<br/>
プロファイラよりも強力なのがこの毒舌と呼ばれるツールです。<br/>
<br/>
毒舌で攻められたら、毒舌で返す。<br/>
そこには暗黙の信頼関係と、敵対関係の程よいバランスがあるわけです。<br/>
<br/>
まあ要するに仲間ってことっすよ！（いいこと言った！！）<br/>
<br/>
ひとりで仕事してると、細かいとこ否定されるとムカつくけど<br/>
それでいて安心したりしない？僕だけ？<br/>
<br/>
<br/>
<br/>
まあ、いいこと言ったのでこの辺で去ります。<br/>
以上、必須ツールでした。<br/>]]>
    </content>
</entry>

<entry>
    <title>AS3.0 パフォーマンス検証用のWonderflを作った</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/10/template-4-performance-check-wonderfl.html" />
    <id>tag:blog.flair4.jp,2009://1.56</id>

    <published>2009-10-10T10:14:42Z</published>
    <updated>2009-10-10T10:22:13Z</updated>

    <summary>昨晩のパフォーマンスチェックを踏まえ 毎回毎回１からコードを書くのが面倒になって...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="array" label="Array" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="performance" label="Performance" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wonderfl" label="Wonderfl" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[昨晩のパフォーマンスチェックを踏まえ<br/>
毎回毎回１からコードを書くのが面倒になってきたのですが<br/>
そんなときに wonderfl あるじゃんと思ったので、検証用 wonderfl 作りました。<br/>
<br/>]]>
        <![CDATA[<br/>
以下を fork してご自由にお使いください。<br/>
主な使い方も、ソース内に記述してあるので、ここでの説明は割愛します。<br/>
<br/>
<a href="http://wonderfl.net/code/ebadb7b873bad164ad62b1448b5bccea1884f36e">Template for Performance Check.</a><br/>
<br/>
参考までに昨晩の記事を試してみますた。<br/>
下の方が切れちゃってますが、キーボードの下カーソルキーでスクロールできます。<br/>
<br/>
<br/>
<div style="text-align:center;width:465px;"><iframe title="Array Performance Check - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/514f6ed819a8f0618c44cb7c74fdda811a231cbc" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.net/code/514f6ed819a8f0618c44cb7c74fdda811a231cbc" title="Array Performance Check - wonderfl build flash online">Array Performance Check - wonderfl build flash online</a></div>
<br/>
<br/>
うーん、これで検証が楽になったｗ<br/>
やはり環境差が出るようなので、実際に動かしてみることって大事ですね。<br/>
<br/>
さて、作ったはいいものの、使いたい人がはたして何人いるやら・・・<br/>]]>
    </content>
</entry>

<entry>
    <title>AS3.0 配列あれこれ</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/10/as3-array-performance.html" />
    <id>tag:blog.flair4.jp,2009://1.54</id>

    <published>2009-10-09T17:04:57Z</published>
    <updated>2009-10-09T19:53:08Z</updated>

    <summary>ついさっき何かとお世話になる配列についていろいろ調べてました せっかくなのでここ...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="array" label="Array" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="for" label="for" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="vector" label="Vector" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[ついさっき何かとお世話になる配列についていろいろ調べてました<br/>
せっかくなのでここにまとめておきます。<br/>
相変わらず、アウトプットとかが全然ない地味な検証系blogだww<br/>
しかもJS書く人ならだいたい知ってそうなノウハウという・・・<br/>
<br/>
まあ、というわけで久々の記事でございます。<br/>
<br/>]]>
        <![CDATA[<h2>◆ 生成速度</h2>
<br/>
実は new Array() するよりも [] のほうが３倍速い<br/>
型とか、挙動に差があると思ったら全くない（検証した範囲内では）<br/>
<br/>
<h2>◆ push</h2>
<br/>
push するより array[array.length] = value; のほうが10〜20%早い<br/>
ちなみにVectorでもこの記述方式が 10〜20％早い<br/>
(1000000アイテムの追加で検証）<br/>
<br/>
あと Array と Vector のpush実行の差は約20% Vector が早いです。<br/>
<br/>
<h2>◆ 配列へのアクセス</h2>
<br/>
配列のアクセス方法は多々あり悩みますが<br/>
結論から言うと速度は<br/>
<br/>
for > for each > while > for( key in arr ) > forEach > map<br/>
<br/>
となりました。その速度は1000000アイテムの処理に対して平均<br/>
<br/>
50ms, 65ms, 95ms, 100ms, 140ms, 195ms<br/>
<br/>
となりました。(PCの環境によっては若干の違いがあるかもしれません)<br/>
<br/>
また、Vector に関しては以下の順で早いです。<br/>
<br/>
for > while > for( key in vec ) > forEach > map<br/>
<br/>
その速度は1000000アイテムの処理に対して平均<br/>
<br/>
20ms, 90ms, 90ms, 140ms, 320ms<br/>
<br/>
となり、Vectorのmap関数は相当おそいという事になります。<br/>
にしてもfor文だけで比べた場合、やはりVectorは早いですね。<br/>
<br/>
あと、細かい話ですが配列へ for文 でアクセスする際に
結構こう書いちゃう人が居たりします。
<pre class="as_code">for( var i:uint = 0; i < arr.length; i++ ){
    arr[i] = ....;
}
</pre>
<br/>
こう書くと、 i < arr.length のと記述すると、 for文内が１度処理されるたびに<br/>
arr.length を調べるためかなり無駄が多いです。<br/>
面倒でも、以下のように記述する事をお勧めします。<br/>
<pre class="as_code">var len:uint = arr.length;
for( var i:uint = 0; i < len; i++ ){
    arr[i] = ....;
}
</pre>
<br/>
ちなみに速度差は Array で２倍、Vector だと4倍違います。<br/>
けっこうでかいので、大きな配列をまわすときは注意です。<br/>
<br/>
<h2>◆ おまけ</h2>
<br/>
文字列連結も、+ 使うより、配列使う方が若干速いです。<br/>
<pre class="as_code">var str:String = [
   "hoge","fuga",............,"nemui"
].join(""); 
</pre>
<br/>
みたいな書き方です。まあ本当に若干ですけども。<br/>
<br/>
<h2>◆ まとめ</h2>
<br/>
まあここら辺に書いた事って、今くらいのPCスペックになると<br/>
気にするほどの事じゃないんですが、でもちょっとえぐい処理をやろうとすると<br/>
やはり細かな事の積み重ねで、パフォーマンスが変わるので<br/>
覚えておいて損はないかと。あと、やっぱ Vector 速いね<br/>
<br/>
<br/>
さて、今日はこの辺で。]]>
    </content>
</entry>

<entry>
    <title>AS3.0 バグ発見、と思ったけど仕様だった</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/07/post-8.html" />
    <id>tag:blog.flair4.jp,2009://1.53</id>

    <published>2009-07-09T16:05:20Z</published>
    <updated>2009-07-09T17:43:00Z</updated>

    <summary>Flash起動して以下をコピペして実行すると幸せになれます。 trace(0.1...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="バグ" label="バグ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="計算" label="計算" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[Flash起動して以下をコピペして実行すると幸せになれます。<br/>
<br/>
<br/>
<pre class="as_code">trace(0.18+0.23)</pre>
<br/>]]>
        <![CDATA[<br/>
<br/>
<br/>
　　(　ﾟдﾟ)<br/>
＿(__つ/￣￣￣/＿　<br/>
　　＼/　　　/<br/>
　　　￣￣￣<br/>
<br/>
<br/>
<br/>
　　( ﾟдﾟ )<br/>
＿(__つ/￣￣￣/＿　<br/>
　　＼/　　　/ <br/>
　　　￣￣￣<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
どうしたらいいんだ　orz...<br>
<br/>
(´・ω・｀) ちなみに 0.18 + 1 + 0.23 - 1 とかもすごいことになります。<br/>
<br/>
<span id="added">◆ 追記</span><br/>
<br/>
. .: : : : : : : : :: :::: :: :: : :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::<br/>
　　　　. . : : : :: : : :: : ::: :: : :::: :: ::: ::: ::::::::::::::::::::::::::::::::::::::<br/>
　　　.　. .... ..: : :: :: ::: :::::: :::::::::::: :<a href="javascript:alert('0.18+0.23='+(0.18+0.23));">お前</a>もか・・・::::::::::<br/>
　　　　　　　 Λ＿Λ . . . .: : : ::: : :: ::::::::: :::::::::::::::::::::::::::::<br/>
　　　　　 　/:彡ミ゛ヽ;）ー､　. . .: : : :::::: :::::::::::::::::::::::::::::::::<br/>
　　　　　 / :::/:: ヽ、ヽ、 ::i . .:: :.: ::: . :::::::::::::::::::::::::::::::::::::::<br/>
　　 　　 / :::/;;: 　 ヽ　ヽ ::ｌ　. :. :. .:: : :: :: :::::::: : ::::::::::::::::::<br/>
￣￣￣（_,ノ ￣￣￣ヽ､_ノ￣￣￣￣<br/>
<br/>
◆ さらに追記<br/>
よく考えたらバグといっていいレベルではなく仕様か。<br/>
これは2進数で計算するコンピュータのサガですな。<br/>
小数点以下は状況によっては無限小数になっちゃうってことか・・・<br/>
<br/>
やっぱ浮動小数点演算て精度が全然変わるなぁ<br/>
もう全部COBOLで計算すればいい。(え<br/>]]>
    </content>
</entry>

<entry>
    <title>生きてます</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/06/post-7.html" />
    <id>tag:blog.flair4.jp,2009://1.52</id>

    <published>2009-06-27T10:23:46Z</published>
    <updated>2009-06-27T10:24:18Z</updated>

    <summary> 一月一記事を最低でも守ろうと思ってたら 気がついたら6月も後半になっていた＞＜...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[ 一月一記事を最低でも守ろうと思ってたら<br/>
気がついたら6月も後半になっていた＞＜<br/>
<br/>
とりあえず生存確認かねて最近やったこと、やってることをまとめてみる<br/>
<br/>]]>
        <![CDATA[<br/>
<h3>◆ やったこと</h3>
・いろいろリリースした<br/>
・BIG BEACH FES行ってきた(STAFFサイドで)<br/>
<br/>
<h3>◆ やってること・やること</h3>
・ライブラリ整備<br/>
  便利そうなライブラリ作り。<br/>
  よさげだったらSparkコミット。<br/>
・Box2Dの抽象化<br/>
  簡単に使えるようにラップする的な。<br/>
  よさげだったらSparkコミット。<br/>
・お仕事<br/>
  まあ当たり前に<br/>
・健康改善<br/>
  最近一向によくなりまへん・・・<br/>
・イベントに参加する<br/>
  最近キャンセルばっかりだったので・・・<br/>
<br/>
とりあえず僕は生きています。<br/>
<br/>
そろそろ携帯Flash系の記事をひたすらまとめてみようかなと<br/>
こうご期待！しない！<br/>]]>
    </content>
</entry>

<entry>
    <title>AS3.0 リンケージシンボルの生成・描画速度検証(ソース付)</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/04/as3-linkage-symbol-factory.html" />
    <id>tag:blog.flair4.jp,2009://1.49</id>

    <published>2009-04-20T17:09:00Z</published>
    <updated>2009-04-21T06:01:42Z</updated>

    <summary>先日、アクセスログを見たのですが、様々な方がこのブログを見てくれているようで チ...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="bitmap" label="Bitmap" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="bitmapdata" label="BitmapData" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="displayobject" label="DisplayObject" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="linkage" label="Linkage" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[先日、アクセスログを見たのですが、様々な方がこのブログを見てくれているようで<br/>
チューニング情報くらいしかない、地味なブロガーとしては非常に嬉しく思っとります。<br/>
<br/>
ありがとうございます。<br/>
そしてまた飽きもせずチューニング話です。<br/>
<br/>
今まではプログラム的なものが多かったので<br/>
たまには、描画速度やらを検証してみたので公開します。<br/>
<br/>
そして今回は何気にニーズが多そうですし<br/>
描画が軽いのはユーザの利益にも繋がると思ったので<br/>
ざっくりとクラスも公開してしまいます。<br/>
<br/>]]>
        <![CDATA[<h2>はじめに</h2>
<br/>
今回の検証結果とクラスは、主に検索系のUIや<br/>
一覧を表示する系のFlashで効果を発揮します。<br/>
<br/>
Flashでのコンテンツ制作では、ライブラリに、アイテムの背景だとかアイコンだとか<br/>
要するに描画上の変化が無く  <b>ただ表示するだけ</b>  のものが結構あると思います。<br/>
<br/>
何気なく生成しているこのパーツを<br/>
より早く・より軽く・効率的に扱うことが出来れば<br/>
全体のパフォーマンスに大きな変化をもたらす事が出来る。<br/>
そう考えたのが、今回の検証のきっかけです。<br/>
<br/>
(内容とか結果とかいいからクラスだけさっさとくれよ<br/>
  というひとは一番下まで読み飛ばしてください。)<br/>
<br/>
<h2>getDefinitionByName は若干遅いよ</h2>
<br/>
一般的に、リンケージをつけたシンボルは<br/>
以下の方法で動的に生成が可能です。<br/>
<pre class="as_code">
var clazz:Class = getDefinitionByName(リンケージ名) as Class;
new clazz();
</pre>
とはいえ、この方法ではわざわざ<br/>
getDefinitionByName にリンケージ名を指定してから new する<br/>
という非常に面倒な方法を取らねばなりません。<br/>
これがおっくうだという人も居るんじゃないでしょうか。<br/>
<br/>
しかもこれ、毎回実行すると若干遅いです。<br/>
もし何度も同じリンケージシンボルを作る場合は<br/>
一度参照解決したクラスは使いまわすようにしましょう。<br/>
<pre class="as_code">
// 毎回 getDefinitionByName する場合. -----------------------------
for( var i:uint = 0; i < 10000; i++ ){
    var clazz:Class = getDefinitionByName(リンケージ名) as Class;
    new clazz();
}
// 230ms

// getDefinitionByName を一回だけする場合. ---------------------
var clazz:Class = getDefinitionByName(リンケージ名) as Class;
for( var i:uint = 0; i < 10000; i++ ){
    new clazz();
}
// 200ms
</pre>
この通り若干ではありますが速度差があります。<br/>
とはいえコレは生成コストは変わりますが、肝心の描画コストは変わりません。<br/>
というわけで描画コストを下げる方法を探ります。<br/>
<h2>cacheAsBitmap を使おう</h2>
<br/>
これは複雑なシェイプやテキストを扱う上では鉄板中の鉄板ですね。<br/>
描画管理を一度ビットマップにキャッシュすることで、飛躍的に描画速度があがります。<br/>
<br/>
リンケージシンボルが画像データでなないかぎり<br/>
cacheAsBitmapしてあげるのが、高速化への第一歩です。<br/>
(中身が既に画像のシンボルをcacheAsBitmapすると生成コストが上がり逆効果)<br/>
まだ使ったことが無い人は、だまされたと思って使ってみてください。<br/>
<br/>
ひとまず<a href="http://flair4.jp/download/swf/test_cacheAsBitmap.html">あり</a>と<a href="http://flair4.jp/download/swf/test_normal.html">なし</a>のサンプルをどうぞ(注：重いです)<br/>
<h2>opaqueBackground の指定をしよう</h2>
<br/>
cacheAsBitmapを行った際に特に意識してもらいたい項目です。<br/>
表示すべきシンボルで、透過すべき領域の色が確定している場合には<br/>
cacheAsBitmapと併せてopaqueBackgroundを指定すると更に速くなります。<br/>
<br/>
例えば上の画像のようなシンボルや、テキストの描画では<br/>
以下の実装をすると描画コストが下がります。お試しあれ。<br/>
ちなみにサンプルは<a href="http://flair4.jp/download/swf/test_opaqueBackground.html">こちら</a>。ただ、マシンによっては差が解りにくいかも。<br/>
<pre class="as_code">
cacheAsBitmap = true;
opaqueBackground = 0xffffff; 
</pre>
<h2>まだまだ速くしたいぞ</h2>
<br/>
上記の３つに気をつけるだけでも、結構な速度改善があるのですが<br/>
まあこの程度の検証は色々な所でされていますので、もう一歩踏み込みんでみます。<br/>
むしろここからがこの記事の最も言いたかった事です。<br/>
今から説明する方法は、現在の自分の経験上、生成コストも描画コストも最速です。<br/>
<br/>
その方法とは<br/>
<br/>
<b>初回生成時にリンケージシンボルを bitmapData に draw して Bitmap クラスで使いまわす</b><br/>
<br/>
という、よく考えると当たり前すぎる方法です。<br/>
<br/>
この方法をとると、3000個のリンケージシンボルを生成する際に<br/>
生成時間が僕の環境では 140ms -> 70 ms と短くなっただけでなく<br/>
fpsも環境によっては倍近く変わるというなかなかの効きっぷりを見せてくれました。<br/>
しかも、bitmapDataを使いますのでメモリの使用量も最小に抑えられます。<br/>
サンプルは<a href="http://flair4.jp/download/swf/test_Bitmap.html">こちら</a>。<br/>
<br/>
<font color="red">
&lt;追記&gt;<br/>
なんか一部マシンによって結果が変わるかも・・・Flashおそるべし・・・<br/>
</font>
<br/>
<h2>というわけでクラス公開</h2>
<br/>
いろいろ説明されたけどよくわからんとか<br/>
そんなん意識するの面倒だし、実装もめんどうだよ<br/>
とかそういう人の為に、今日の内容を簡単にまかなってくれる<br/>
クラスとサンプルを公開します。(使う人居るかはわからないけど・・・)<br/>
<br/>
<a href="http://flair4.jp/download/src/StLinkageSymbolFactory.zip">StLinkageSymbolFactory.zip</a><br/>
<br/>
使い方は以下のような感じで簡潔です。<br/>
import して使うだけ。Staticクラスなので、特に準備もいらないです。
<pre class="as_code">
import jp.flair4.core.display.StLinkageSymbolFactory;
// リンケージ名 hoge のアイテムを生成する.
var hoge:DisplayObject = StLinkageSymbolFactory.create("hoge");
// リンケージ名 fuga のアイテムを画像化して取得する.
var fuga:Bitmap = StLinkageSymbolFactory.createAsBitmap("fuga");
</pre>
このクラスを使って createAsBitmap によってリンケージシンボルを生成すれば<br/>
２回目以降は全て bitmapData を使いまわすように勝手にやってくれます。<br/>
<br/>
また、リンケージシンボルが左上揃いではない(中心よせなど)場合でも<br/>
その位置を加味してBitmapしてくれたりするので便利です。<br/>
<h2>利用上の注意</h2>
<br/>
とはいえ、前述したとおり、この実装が生かされるのは<br/>
あくまでも表示後に変化しないアイコンのようなパーツを作るとき限定です。<br/>
また、bitmapDataを使いまわすので、bitmapDataをいじると<br/>
全インスタンスに影響が出てしまいます。その辺はご注意ください。<br/>
<br/>
また、このクラスを使って起こった如何なる問題・損害も<br/>
保障いたしかねますので、その点だけご理解いただければと。<br/>
<h2>おわりに</h2>
<br/>
いままでリンケージシンボルの作成が面倒だった方<br/>
ちょっと描画速度が気になっていた方は、試してみてください。<br/>]]>
    </content>
</entry>

<entry>
    <title>AS3.0 TextField生成処理の速度検証</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/04/as30-textfield.html" />
    <id>tag:blog.flair4.jp,2009://1.48</id>

    <published>2009-04-14T17:30:29Z</published>
    <updated>2009-04-14T18:23:34Z</updated>

    <summary>Flashはかなりテキストを扱うことが苦手です 大量のテキストを扱うとすぐに重く...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="textfield" label="TextField" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[Flashはかなりテキストを扱うことが苦手です<br/>
大量のテキストを扱うとすぐに重くなってしまいます。<br/>
<br/>
僕が仕事をする場合にも、テキスト情報が多いときには<br/>
先ず間違いなく、HTMLを推奨するわけですが<br/>
でもやっぱFlashで、ということも少なくないですね。<br/>
<br/>
今回は、いつも特に気にせずやってしまっている<br/>
TextFieldの生成処理が、実は処理順で速度が違うのでは<br/>
という疑問から、検証をしてみたのでまとめてみました。<br/>
<br/>]]>
        <![CDATA[<h2>前提条件</h2>
<br/>
今回の検証では、非常に面白い結果を見ることができました。<br/>
ですが、この検証結果には、注意すべき点がひとつだけあります。<br/>
それは、<b>addChildされているかいないか</b> という点です。<br/>
<br/>
TextField の処理系は、addChild されているかいないかで<br/>
その処理速度の優劣が変わります。(レンダリングの問題が濃厚)<br/>
<br/>
今回の検証は、主にaddChildする前の状態で検証しています。<br/>
また、全体的に addChild 前に処理する方が高速であることがわかりました。<br/>
<br/>
それでは結果を発表してきたいと思います。<br/>
<h2>TextFormatの設定</h2>
<br/>
defaultTextFormat を用いるよりも<br/>
setTextFormat したほうが倍以上早い。<br/>
( addChild している場合差はほとんどありませんでした )<br/>
<br/>
<pre class="as_code">
tf = new TextField();
tf.defaultTextFormat = new TextFormat();
tf.text = "hogeeeeeeeeeeeeee";
//--------------------------- 234ms/3000回
</pre>
<pre class="as_code">
tf = new TextField();
tf.text = "hogeeeeeeeeeeeeee";
tf.setTextFormat( new TextFormat() );
//--------------------------- 110ms/3000回
</pre>
<h2>textの設定タイミング</h2>
<br/>
自分の知人の多くに尋ねたら text の設定タイミングは<br/>
最後にしてるという人が多かったのですが<br/>
蓋を開けてみると、最初に設定するのが最速でした。<br/>
<pre class="as_code">
tf = new TextField();
tf.text = "hogeeeeeeeeeeeeee";
tf.autoSize = TextFieldAutoSize.LEFT;
tf.defaultTextFormat = new TextFormat();
tf.width = 10 + Math.random() * 100;
tf.wordWrap = true;
//--------------------------- 125ms/3000回
</pre>
<pre class="as_code">
tf = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.defaultTextFormat = new TextFormat();
tf.width = 10 + Math.random() * 100;
tf.wordWrap = true;
tf.text = "hogeeeeeeeeeeeeee";
//--------------------------- 320ms/3000回
</pre>
特に、TextFieldAutoSize の設定前が有効です。<br/>
<h2>TextFieldAutoSize</h2>
<br/>
この設定は少々特殊で、前述のようにtext設定後に行うのが吉です。<br/>
また、addChildされていないときに、widthを変更する事がある場合<br/>
一度 NONE にしてから width を変更し、その後設定しなおす<br/>
この方法をとることが最速です。<br/>
<br/>
<pre class="as_code">
tf = new TextField();
tf.text = "hogeeeeeeeeeeeeee";
tf.setTextFormat( new TextFormat() );
tf.wordWrap = true;
tf.multiline = true;
tf.autoSize = TextFieldAutoSize.LEFT;
</pre>
と設定後<br/>
<pre class="as_code">
for( var i:uint = 0; i < 10000; i++){
    tf.width = 10 + i % 200;
}
//--------------------------- 297ms
</pre>
<pre class="as_code">
for( var i:uint = 0; i < 10000; i++){
    tf.autoSize = TextFieldAutoSize.NONE;
    tf.width = 10 + i % 200;
    tf.autoSize = TextFieldAutoSize.LEFT;
}
--------------------------- 16ms
</pre>
とかなりの速度差がでます。<br/>
また、addChild した後に限り、AutoSizeを使うよりも<br/>
<pre class="as_code">tf.height = tf.textHeight + 4;</pre>
とする方が早いようです。<br/>
<br/>
<br/>
普段何気なく作っているTextFieldですが<br/>
作り方に少し工夫をしてみるのも面白いかもしれません。
]]>
    </content>
</entry>

<entry>
    <title>FlashCS4の不可解な挙動とその回避策の覚書</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/03/flashcs4.html" />
    <id>tag:blog.flair4.jp,2009://1.47</id>

    <published>2009-03-21T14:30:27Z</published>
    <updated>2009-03-21T15:48:03Z</updated>

    <summary>発売日に購入したものの、あまりCS4を使用してこなかったのですが 最近になって、...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="etc." scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="cs4" label="CS4" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="debug" label="Debug" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="error" label="Error" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[発売日に購入したものの、あまりCS4を使用してこなかったのですが<br/>
最近になって、ようやくさわり始めました。<br/>
<br/>
ところがどっこいCS4。なかなかの難物です。<br/>
CS3で普通に動いていたものが動きませんでした。<br/>
<br/>
発生した問題と、検証した結果、その回避策について<br/>
ここに覚書として書いておきます。<br/>
<br/>
(前回もそうでしたが、早くも追記しました。)<br/>
<br/>
注：おそらくCS4のバグなので、修正はいるかもです<br/>
<br/>]]>
        <![CDATA[<br/>
今回書く『不可解な挙動』に絡んでいるのは<br/>
private class です。要するにこういうやつですね。<br/>
<pre class="as_code">
package{
    public class Hoge{
        //...
    }
}
class Fuga{} // ←これ
</pre>
この private class はとある条件下で<br/>
かなり厄介な症状を引き起こします。<br/>
<br/>
<h2>症状と回避策</h2>
<br/>
その厄介な症状とは、複数の private class を作った場合<br/>
もしくは、何のクラスも継承せずに<br/>
インターフェースだけ実装した場合などに<br/>
○○が無い、○○が未定義というエラーがやたら起こります。<br/>
特に、インターフェース実装している場合に多いです。<br/>
<br/>
例えば以下のようなコードはエラーになります。<br/>
<br/>
・IHoge インターフェース
<pre class="as_code">
package{
    public interface IHoge{
        function myfnc():void;
    }
}
</pre>
<br/>
・Hoge クラス
<pre class="as_code">
package{
    public class Hoge implements IHoge{
        public function myfnc():void{}
    }
}
class Fuga{}
</pre>
<br/>
この場合、myfnc が実装されていません。<br/>
という怒られ方をします。<br/>
解せませんね・・・、実装してるっちゅうに。<br/>
<br/>
これ以外にもいろいろ発生条件があり、調査中なのですが<br/>
とにかく private class を書く人は要注意です。<br/>
<br/>
打つ手なしか・・・と思ってたのですが<br/>
つい先ほど、回避策を発見しました。<br/>
それはなんとも無駄な実装なのですが<br/>
<b><font color="red">なんでもないクラスを一個作りそれを継承させる</font></b><br/>
という方法です。<br/>
<br/>
まず、こういうなにもないクラスを作ります。
<pre class="as_code">
package{
    public class Foo{}
}
</pre>
これを private classに継承させます
<pre class="as_code">
package{
    public class Hoge implements IHoge{
        public function myfnc():void{}
    }
}
class Fuga extends Foo{}
</pre>
これでなぜかエラーが出なくなります。<br/>
不思議です。まさに不可解です。<br/>
ちなみに複数 private class があるときは、片方でもOKでした<br/>
こんな感じで<br/>
<pre class="as_code">
package{
    public class Hoge implements IHoge{
        public function myfnc():void{}
    }
}
class Fuga extends Foo{}
class Fuga2{}
</pre>
ただしいくらなんでもこの方法は無駄すぎるので<br/>
もう少し調べる必要がありそうです。<br/>
<br/>
完全な原因、もしくはもうすこしマシな回避方法が見つかったら<br/>
また、記事にまとめようと思います。<br/>]]>
    </content>
</entry>

<entry>
    <title>Flashが何故かうまく動かない時に疑うべき8つの要素</title>
    <link rel="alternate" type="text/html" href="http://blog.flair4.jp/2009/03/flash-debug-pattern.html" />
    <id>tag:blog.flair4.jp,2009://1.46</id>

    <published>2009-03-17T16:01:58Z</published>
    <updated>2009-03-17T17:54:27Z</updated>

    <summary>プログラムは間違っていないのに動かない！ 修正したはずなのに修正が反映されない！...</summary>
    <author>
        <name>kawakita</name>
        
    </author>
    
        <category term="ActionScript 3.0" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Flash" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript" label="ActionScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="debug" label="Debug" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.flair4.jp/">
        <![CDATA[プログラムは間違っていないのに動かない！<br/>
修正したはずなのに修正が反映されない！<br/>
俺のPCでだけうまくパブリッシュされない！<br/>
<br/>
Flashやってるとこういう事がけっこう起こります。<br/>
気がつくと１時間くらい格闘するとかあって非常に困ります。<br/>
<br/>
今日はそんな時に疑うべき要素とその解決(するかもしれない)方法を<br/>
あたりまえじゃんという所から<br/>
ちょっと深く突っ込んだ内容まで含め８つほど紹介します。<br/>
ちなみに若干長いです。<br/>
<br/>
(基本的に FlashCS3 でAS3.0 での話です)<br/>
(早くも若干追記しました)<br/>
<br/>]]>
        <![CDATA[<br/>
<h2>文字コード</h2>
<br/>
XML等を使っている時確認すべき内容<br/>
基本中の基本ですね<br/>
<br/>
Flashは基本UTF-8が推奨なわけですが<br/>
Shift-JISだったりとかUTF-8Nだったりとか・・・<br/>
<br/>
しっかりと確認しましょう。<br/>
<br/>
もしどうしてもUTF-8以外を使わなければならない場合には<br/>
<pre class="as_code">System.useCodePage = true; </pre>
を使えば利用可能ですが、UTF-8以外は非推奨とされており<br/>
文字を扱う系の挙動が安定しませんので要注意です。<br/>
<br/>
<h2>ベースパス</h2>
<br/>
FlashをHTMLに組み込む時はベースパスに注意が必要です<br/>
<br/>
例えば相対パスで読み込む画像を
<pre class="as_code">./images/photo.jpg</pre>
と指定していた場合<br/>
読みに行くのはあくまでも HTML からの相対パスなので<br/>
もしもディレクトリ構造が以下のような場合には<br/>
画像を読み込むことが出来ません。<br/>
<pre class="as_code">
~/index.html
~/swf/main.swf
~/swf/images/photo.jpg
</pre>
なぜかというと、 ./images/photo.jpg はHTMLからの参照になるので
<pre class="as_code">~/images/photo.jpg</pre>
を読みに言ってしまうためです。<br/>
このような場合には、ベースパスを指定してあげることで解決できます。<br/>
<br/>
objectタグの場合
<pre class="as_code">&lt;param base="./swf"/&gt;</pre>
embedタグの場合
<pre class="as_code">&lt;embed ....  base="./swf" .... /&gt;</pre>
<br/>
と指定すれば動くはずです。(はずって)<br/>
意外とこれではまる人が多いです。<br/>
<br/>
<h2>クラスパス</h2>
<br/>
実は僕自身これではまった経験ありです・・・<br/>
Flashのクラスパス設定は、IDE自体の指定と<br/>
flaファイル個別の指定の二種類があります。<br/>
<br/>
前者はFlashの 編集 > 環境設定 > ActionScript の項で<br/>
後者はFlashの ファイル > パブリッシュ設定 > Flashタブ<br/>
でそれぞれ設定が可能です。<br/>
<br/>
ちなみに、ファイル側に何も指定していない場合<br/>
IDEで指定したパスが優先的に扱われるようです。<br/>
<br/>
<h2>ブラウザ依存</h2>
<br/>
Flashにブラウザ依存は無いと信じている人<br/>
まず、その信仰を捨てることをオススメします。<br/>
<br/>
Flashにも若干のブラウザ依存が存在します。<br/>
ここで全てを語ることは出来ませんが、２つほど例を挙げます。<br/>
<br/>
◆ ExternalInterface<br/>
<br/>
FlashとJavascriptを連携させる時には<br/>
ExternalInterface というものを使いますが<br/>
IEに限り、ExternalInterface を扱う時<br/>
object タグのidに <b><font color="red">external という文字列がないと動きません。</font></b><br/>
<br/>
例えば以下のような感じです<br/>
<pre class="as_code">&lt;object id="externalSWF"&gt;&lt;/object&gt;</pre>
<br/>
含まれていれば動くので、externalSWF でも SWFexternal でも<br/>
SWexternalF でも動きます。これは注意です。<br/>
<br/>
◆ stage<br/>
<br/>
稀に1フレーム目で stage.stageWidth を参照すると<br/>
きちんとした値が取れないという現象に遭遇することがあります。<br/>
<br/>
この現象は、自分自身が読み込み終えているかを監視し<br/>
読み込み終えてから処理を開始することで回避出来ます。<br/>
<br/>
ドキュメントクラスのコンストラクタに書くとしたらこんな感じです
<pre class="as_code">
// コンストラクタ.
public constructer():void{
    if( loaderInfo.bytesLoaded == loaderInfo.bytesTotal ){
        _onComplete();
    }else{
        loaderInfo.addEventListener(Event.COMPLETE, _onComplete);
    }
}

// 読み込み完了時の処理.
private function _onComplete( e:Event = null ){
    // ...
}
</pre>

<h2>ファイルの読み込み順序</h2>
<br/>
例えば、A.swf, B.swf という二つの swf を A > B の順で読み込む<br/>
という処理を行うようなFlashを作っている時に疑うべき要素です。<br/>
<br/>
このようなFlashで、A, B 両者とも同じクラス<br/>
(今回の例では OriginalClass というクラスで説明します。)<br/>
を内部の実装で使っていたら完全に怪しいです。<br/>
<br/>
このようなFlashを開発中に、故あって B.swf の改修が必要となり<br/>
その改修は OriginalClass の修正も必要だということになって<br/>
OriginalClass を修正し B.swf をパブリッシュし直したはいいものの<br/>
実際に読み込むFlashを開いて直ってるか確認したら<br/>
なおってNEEEEEEEEEEE!!!!となったら、多分これが原因でしょう。<br/>
<br/>
実はこの現象は、同じクラスが複数のファイルで使われている場合<br/>
<b><font color="red">先に読み込まれたファイルのクラス実装が優先される。</font></b><br/>
という挙動に起因しています。
<br/>
今回の例の場合、OriginalClass の実装が先に読みこんだ<br/>
未修正である A.swf の状態として扱われてしまったため<br/>
B.swf の修正が反映されなかった為に修正が反映されなかったわけです。<br/>
<br/>
大きめの開発になってくると、このように各コンテンツを切り分け<br/>
複数のswfをつくり、後で順番に読み込んで使うという方法は<br/>
よく使われている開発手法のひとつだと思います。<br/>
<br/>
こうすることで、コンテンツ毎に開発者を切り分けたり<br/>
コンテンツの修正が容易になるなど非常に便利なためです。<br/>
しかし、この挙動を知らないと、プログラムを修正しても<br/>
全然修正が反映されない！なぜだ！？という事になってしまいます。<br/>
<br/>
これは結構はまると抜け出せないです。<br/>
でも毎回全部パブリッシュする癖がある人は経験したこと無いかも<br/>
もしくは、こういう経験があったから毎回全パブリッシュ！<br/>
という人も結構いるんじゃないでしょうか。<br/>
<br/>
<h2>swfファイル</h2>
<br/>
実は、Flashでパブリッシュを実行しても<br/>
includeされるクラス群が変わらない時が稀にあります。<br/>
(正直遭遇した時は、おいおいマジかよ・・・って思いました)<br/>
<br/>
修正したのに、全然反映されない・・・<br/>
という経験がある方はこの可能性を疑ってみてください<br/>
<br/>
この問題は、swfファイルを一度削除してから<br/>
再度パブリッシュすることで解決できます。<br/>
<br/>
<h2>flaファイル</h2>
<br/>
消したはずのライブラリシンボルからエラーが出る<br/>
全然関係ないところでエラーが発生する<br/>
<br/>
そんな時は ファイル > 保存して最適化 を行うと直ることがあります。<br/>
試してみてください。<br/>
<br/>
<h2>Flash自体</h2>
<br/>
これは最後の手段です・・・<br/>
Flash自体を再インストールすると直ることがあります<br/>
<br/>
<br/>
<br/>
とまあ、いろいろな解決策を挙げてみました。<br/>
皆さんのお役に立てれば幸いです。<br/>
とはいえ、解決策としては一例に過ぎません。<br/>
<br/>
また、解決を保障するものではありません。あしからず。<br/>]]>
    </content>
</entry>

</feed>
