<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>宇都宮ウエブ制作所 &#187; Flash</title>
	<atom:link href="http://utweb.jp/blog/archives/tag/flash/feed" rel="self" type="application/rss+xml" />
	<link>http://utweb.jp/blog</link>
	<description>宇都宮さんっていう、夫婦でやってるウエブサイト制作請負の大阪下町家内製手工業業務日誌</description>
	<lastBuildDate>Thu, 02 Feb 2012 14:35:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/tag/flash/feed" />
		<item>
		<title>FlashのひよこがPixel Benderではじめる並列処理入門 後編</title>
		<link>http://utweb.jp/blog/archives/1158</link>
		<comments>http://utweb.jp/blog/archives/1158#comments</comments>
		<pubDate>Mon, 05 Sep 2011 16:51:37 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=1158</guid>
		<description><![CDATA[前編の続きです。

ではFlashで呼び出してみよう！
ここまでの道のりが長かったですね。安心してください。それまでのほとんどが僕のゴタクです。
僕がはじめるにあたって先ず理解しておかないといけないことが多すぎただけで、 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://utweb.jp/blog/archives/1071">前編の続き</a>です。<br />
<span id="more-1158"></span></p>
<h3>ではFlashで呼び出してみよう！</h3>
<p>ここまでの道のりが長かったですね。安心してください。それまでのほとんどが僕のゴタクです。<br />
僕がはじめるにあたって先ず理解しておかないといけないことが多すぎただけで、ほとんどの人は実際にはここまですいすいと来られたはずです。</p>
<p>PixelBenderのpbjファイルをFlashのActionScriptで使うには二種類の方法があります。<br />
実行時に外部ファイルとして読み込むか、Embedであらかじめ埋め込んでおくかです。</p>
<p>前者はXMLや外部JPEGファイルと同じく、URLLoaderを使って読み込む方法です。<br />
Progressionだとこんな感じで</p>
<pre class="brush: as3">
addCommand(
	new LoadURL(new URLRequest(Directory.PBJ_DIR + "myPixelBender.pbj"), {dataFormat:URLLoaderDataFormat.BINARY}),
	function():void{
		var t:Command = this as Command;
		_shader = new Shader(t.latestData);
	}
);
</pre>
<p>Progressionを介さずに普通にAS3で書く場合も、URLLoaderのdataFormatをちゃんとURLLoaderDataFormat.BINARYにしておけばうまくいくと思います。<br />
こんな感じ。</p>
<pre class="brush: as3">
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, _onCompleteHandler);
loader.load(new URLRequest(Directory.PBJ_DIR + "myPixelBender.pbj"));
private function _onCompleteHandler(e:Event):void
{
	var shader:Shader = new Shader(loader.data);
}
</pre>
<p>実際にはエラーハンドリングなんかも行う必要ありますがそれはまた別の話なのでここではあえて触れないでおきます。</p>
<p>Embedであらかじめ埋め込んでおく方法は、こんな感じで</p>
<pre class="brush: as3">
[Embed(source="/../shaders/myPixelBender.pbj", mimeType="application/octet-stream")]
private var _myPixelBenderKernel : Class;
private var _myPixelBenderShader : Shader;
</pre>
<p>クラスのインスタンス変数として埋め込んでおいて、適切な場所で</p>
<pre class="brush: as3">
_myPixelBenderShader = new Shader(new _myPixelBenderKernel());
</pre>
<p>として呼び出してやるやり方です。</p>
<p>実行時に外部ファイルとして読み込むか、Embedであらかじめ埋め込んでおくか、どちらのやり方もメリットデメリットあるので自分で適切だと思う方法で呼び出せばいいのですが、もしその判断が出来ない・迷うようであれば後者のEmbedで埋め込む方法をおすすめしておきます。<br />
シェーダーを外部読み込みにするメリットが思いつかないのであればほとんどの場合外部読み込みのデメリットのほうがEmbedする方法のデメリットを上回るからです。</p>
<h3>呼び出したのでどうやって使おう？</h3>
<p>2種類の呼び出しの方法のどちらを使っても、ActionScriptではShaderクラスとして読み込まれることがわかりました。<br />
<a href="http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/display/Shader.html" target="_blank">ここでActionScriptリファレンスのShaderクラスとそれに付随するShader何々クラスを一読しておくとだいたい何すればいいかわかるかと思います。</a><br />
僕みたいにクラスの動作が全て頭に入っているわけではないひよここそ、リファレンスの存在は欠かせません（いまだにArrayにさえ、こんなメソッド無いかな〜とリファレンス引きながら作業してるくらいです）。</p>
<p>FlashがPixelBenderをShaderで読み込んだら、いろいろ出来ることがあるんですが、いまのところ僕はShaderJobを使うことをおすすめします。<br />
理由としてはShaderJobが圧倒的に速いからです。<br />
ブレンドモードとして使ったり、塗りに使ったり、フィルタとして使ったり、も確かに面白いのですがそれらがどうしても最終的にFlashの処理を挟む必要があるのにたいして、ShaderJobは同じ事が出来てしかも完全にFlashと処理が切り離せるので「<strong>Flashの処理速度という概念を無かったことに出来る</strong>」という冒頭の売り文句が発揮できるからです。<br />
しかもFlashとの同期処理・非同期処理のどちらで処理するかを実行時に選べるのです。<br />
これのおかげでShaderJobを使うことによってFlashの描画処理を徹底的にチューニングすることが出来るようになると思います。僕もまだそこまでには達していませんが、少なくともその入り口には立てた気がします。</p>
<p>ShaderJobを使うには、まず入力側のBitmapDataと出力先のBitmapDataが必要になります。<br />
入力の指定については、PixelBenderのKernelの書き方によって違うのですが、</p>
<pre class="brush: as3">
_shader.data.src.input = _inputBitmapData;
</pre>
<p>こんな感じで指定してやります。<br />
「src」っていう変数名が、ここがKernelで使ってる変数名によって違うので注意が必要です。<br />
PixelBenderで<br />
input image4 src;<br />
と書かれてあれば</p>
<pre class="brush: as3">
_shader.data.src.input = _inputBitmapData;
</pre>
<p>と書きますし、もし<br />
input image4 sauce;<br />
だと</p>
<pre class="brush: as3">
_shader.data.sauce.input = _inputBitmapData;
</pre>
<p>こういう感じでActionScriptを書くようになるかと思います。</p>
<p>あとはShaderJobの処理のさせ方ですが、<br />
<a href="http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/display/ShaderJob.html" target="_blank">ShaderJobのリファレンスを読むと</a>コンストラクタの第二引数に出力先のBitmapDataを指定しないといけないことになっているのがわかります。<br />
そこでこんなふうに</p>
<pre class="brush: as3">
var _shaderJob:ShaderJob = new ShaderJob(_shader, _outputBitmapData);
</pre>
<p>ShaderJobクラスのインスタンスを生成します。<br />
そのあとおもむろに</p>
<pre class="brush: as3">
_shaderJob.start();
</pre>
<p>してやってもいいんですが、面白いことにShaderJobはstartする際に処理を非同期で実行するか同期して実行するかを選べます。</p>
<pre class="brush: as3">
//_shaderJob.start();
_shaderJob.start(false);
</pre>
<p>このいずれの場合も非同期で実行します。<br />
なので</p>
<pre class="brush: as3">
_shaderJob.addEventListener(ShaderEvent.COMPLETE, _onShaderJobCompleteHandler);
//_shaderJob.start();
_shaderJob.start(false);
</pre>
<p>こんな感じでイベントリスナーを登録しておくとシェーダーの処理が完了したタイミングを捕捉できるようになります。<br />
画面の処理のために入力や画面の更新などFlashの他の処理を遅らせたくない場合に、完全に処理を分離できるので非常に効果を発揮します。</p>
<pre class="brush: as3">
_shaderJob.start(true);
</pre>
<p>こうした場合には同期して実行します。<br />
どのみち同期しててもPixelBenderのShaderJobの処理はほとんどの場合は一瞬で終わるので誤差は一瞬ですが、画面更新のタイミングと処理を完全に同期させておきたい場合に効果的です。</p>
<h3>さいごに</h3>
<p>書いててほんと自分でもびっくりするくらい長い記事になったのですがどうでしょうか。<br />
ほとんどがPixelBenderの技術の話しではなくてPixelBenderとはどういう動作をするものなのかの概念の話しばかりだったと思います。<br />
それだけ僕にとってPixelBenderは概念的な障壁が高く、でも一旦概念を理解してしまえば技術的にそんなにハードルの高いものではない、むしろとっつきやすく奥の深いとても楽しいものだと言うことが解りました。<br />
それに一旦こうして記事にして書いてしまえば、次からPixelBenderの技術的な記事書くときに「概念についてはこちらを参考にしてください」と言えるので、むしろ今後PixelBenderを研究していく布石になったと思います。</p>
<p>僕がPixelBenderを学びはじめるに当たって参考にしたAS3アニメーションのオライリー本にも書かれてあることですが、PixelBenderはOpenGLのシェーダー言語GLSLに非常によく似た言語で、そのノウハウがだいぶ参考になるかと思います。</p>
<p>僕個人の考えとしては、ブラウザ上での描画に限って言えば並列処理を実現するための方法はさまざまに企画が立ち上がっていますが、3年以上も前から提供されていてしかもFlashさえ走ればブラウザを問わず納品レベルできちんと動くPixelBenderには一日の長があるかと思います。<br />
PixelBenderそのものが意外にもとっつきやすくて奥が深く、それでいてFlashが何十倍も楽しくなる面白い技術なのも今回学ぶに当たって新鮮な驚きでした。</p>
<p>この技術がもっと普及して研究がされたら、もっと面白い使いどころが増えると思いますし今までFlashの処理速度が枷だったことがいろいろと解決する可能性が高いかもしれません。<br />
今回の記事ではあえて書かなかったのですが、僕はPixelBenderをByteArrayとかVectorで処理する方法にも非常に興味を持っています。<br />
この記事がきっかけになって、少しでもPixelBenderの使いどころの上手い人が増えて今まで処理速度がネックになっていた問題が解決できれば、WEBの表現はもう一段階自由になるのではないでしょうか。</p>
<p>そこまでは夢見すぎだとしても、少しでも処理速度による表現の限界を解決するヒントになれば幸いです。</p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/1158/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/1158" />
	</item>
		<item>
		<title>FlashのひよこがPixel Benderではじめる並列処理入門 前編</title>
		<link>http://utweb.jp/blog/archives/1071</link>
		<comments>http://utweb.jp/blog/archives/1071#comments</comments>
		<pubDate>Mon, 05 Sep 2011 16:45:28 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=1071</guid>
		<description><![CDATA[最初ぼくPixelBenderのこと「pixel bLender」と勘違いしていました。
 証拠 
 証拠その2
 僕、得意げになって何か言ってますね…。終始間違いの多い男です。
  僕たちの失敗。こんばんは。森田童子で [...]]]></description>
			<content:encoded><![CDATA[<p>最初ぼくPixelBenderのこと「pixel b<strong>L</strong>ender」と勘違いしていました。<br />
 <a href="https://twitter.com/#!/masamunet/status/101699832657358848" target="_blank">証拠 </a><br />
 <a href="https://twitter.com/#!/zendenmushi/status/102767979346927617" target="_blank">証拠その2</a><br />
 僕、得意げになって何か言ってますね…。終始間違いの多い男です。<br />
  僕たちの失敗。こんばんは。森田童子です。嘘です。正宗です。</p>
<p> さてさて、今さらながらPixelBenderについて勉強してみました。PixelBenderって登場したの確か3年以上も前ですよねえ。<br />
普段から情報共有が 盛んなFlashにおいて、僕が今まで3年もPixelBenderを使っていなかった理由はひとえに「PixelBenderが何をするものなのかわかりにくい！」からでした。<br />
 PixelBenderを使うとどうなるのか、Flashのどんな場面で使えるのか、どうやって使うのか、いやいやそれ以前の問題でただひたすら「PixelBenderが何をするものなのかわかりにくい！」のでした。<br />
もちろん、Adobeの告知不足とかそういった事が言いたいわけではなくて、僕のスペックではPixelBenderはわかりにくいからとっつきにくかった。というお話です。</p>
<p>で、勉強してみてわかった結果は、「PixelBender、かなり使える」ということです。<br />
簡単に言うとFlashの処理能力が<strong>別次元</strong>で向上します。<br />
おおげさですがおおげさでない表現として「<strong>Flashの処理速度という概念を無かったことに出来る</strong>」ほどのパフォーマンスです。<br />
「別次元」とか「処理速度という考え方を無かったことに」というのは、太字にしたのは煽りでもなんでもなく実際に本当に処理方法が違うからです。これに関しても出来るだけ簡単に説明します。<br />
いったんサンプルを見てください。</p>
<div style="width:300px;height:200px;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="200" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://utweb.jp/samples/pixelbender_practice/index.swf" /><param name="allowFullScreen" value="true" /><embed type="application/x-shockwave-flash" width="300" height="200" src="http://utweb.jp/samples/pixelbender_practice/index.swf" style="width:300px;height:200px;" allowFullScreen="true"></embed></object>
</div>
<p>ウエブカメラがあれば接続の許可を求められると思いますので許可してください。<br />
ウエブカメラがない、あっても許可しなかった場合は、僕が今年の夏にバラ園にいったときの思い出の写真がかわりに表示されることになると思うので、そういった悲しい事故がないよう、是非ともウエブカメラを使って遊んで頂くことを強くおすすめします。</p>
<p>マウスをうごかしてもらうとわかると思うんですが、昔からよくある、水面の波紋のような画像処理を効果に加えたサンプルです。<br />
DisplacementMapFilterとかで手垢がつきまくっているので、アンテナの高い人には今さらなサンプルです。<br />
ここで見て貰いたいのは、処理のほとんどをPixelBenderにまかせたことによる処理速度の安定です。</p>
<p>サンプルのソースコードはこちら。<br />
<a href="https://github.com/masamunet/blog_samples_pixelbender_practice" target="_blank">https://github.com/masamunet/blog_samples_pixelbender_practice</a></p>
<p>ソースコードをみてもらってもわかるように、基本的に僕はなにもしていません。処理のほとんどを外部のPixelBenderファイルに頼っています。<br />
具体的には<a href="http://www.derschmale.com/2009/04/23/return-of-the-ripples-shallow-water-simulation-with-pixel-bender/" target="_blank">こちら</a>のソースをほとんどの部分で使用しています。<br />
僕がやったことと言えば、もともとDisplacementMapFilterで処理していた部分もShaderJobを用いてPixelBenderで行うように変更したくらいですが、そのPixelBenderも<a href="http://www.boostworthy.com/blog/?p=245" target="_blank">こちら</a>の記事を参考にしてあります。<br />
このように、PixelBenderの概念を一旦理解したら、あとは自分でオリジナルなPixelBender処理を書くもよし、海外にあるいろいろなPixelBenderのファイルを（ライセンスに従って）使いこなすも良し、いずれにせよ処理速度という表現の枷からかなり自由に解き放たれるPixelBenderは是非是非習得すべき楽しい技術だと思います。</p>
<p>ちなみにPixelBenderの習得にあたって参考にした本はこちら。<br />
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&nou=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=yamayu-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4873114373" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><br />
この本の第9章にPixelBenderについて書かれています。<br />
だからこの本以上のことはこのブログに書かれていないのでこの本を読んだ方はあんまり期待できる記事ではないと思いますが、PixelBenderについて僕なりに理解したことをまとめてみました。</p>
<p>PixelBenderはそんなに敷居の高い技術ではないです。<br />
実験レベルならすぐにはじめられて、効果は非常に高い（なにせ処理速度が別次元になるので）技術なので、ぜひともわかりやすく説明出来るようにまとめられたらと思います！<br />
<span id="more-1071"></span></p>
<p>とはいえさて何から書こう。<br />
やっぱり初心者にとってはそもそもまずPixelBenderが何かを知らないですよね。並列処理というちょっと特殊な処理の流れもあって、非常にとっつきにくい印象を受けるので、先ずはPixelBenderについて少し細かく説明してみたいと思います。<br />
なお、僕という初心者が理解した程度の説明を初心者を対象に説明するので情報の正確性については基本的に自信がないです。<br />
しかもピクセルシェーダーとかプログラマブルシェーダーと呼ばれる技術を意図的に全て「PixelBender」という名称を用いて説明しています。<br />
並列処理についても仮想化の話しとかまで説明し出すと僕が混乱するので、すべてハードウェアとして、つまり「並列処理を行う、そういう機械があるものとして」書いています。<br />
つまりここに書かれてあることをそのまま人に話すと笑われるかもしれないということです。</p>
<h3>はじめよう。先ず最初に、PixelBenderって何なん？</h3>
<p>PixelBenderとは、Adobeが開発したピクセルシェーダーを記述する言語のことです。その言語の記述やテスト、ビルドコンパイルするソフトのことをPixelBenderツールキットと呼びます。<br />
<div id="attachment_1099" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/08/db155b9b01b4fc02f1ceb4d7198a374c.png" title="PixelBenderツールキット2"><img src="http://utweb.jp/blog/wp-content/uploads/2011/08/db155b9b01b4fc02f1ceb4d7198a374c-300x203.png" alt="画像はCS5についてきてたPixelBenderツールキット2" title="PixelBenderツールキット2" width="300" height="203" class="size-medium wp-image-1099" /></a><p class="wp-caption-text">画像はCS5についてきてたPixelBenderツールキット2</p></div><br />
ピクセルシェーダーとはある一つのピクセルを計算して描画するプログラムの事です。<br />
このブログのこの記事ではピクセルシェーダーとPixelBenderを意図的に「PixelBender」と統一して説明しています。それは例えば「スクリプト言語全般に言えることだけれどActionScriptに於いても同様に」とか説明していくとかえって混乱する場合が多いのと同じ理由で、ピクセルシェーダー全般のことなのかPixelBenderに限った事なのか、PixelBenderを習い始めたい初心者にとっては行きすぎた情報の正確性はかえって混乱すると思ったからです（そしてどのみちこのブログ記事に情報の正確性を求めても無駄だと僕が知っているからです）。</p>
<h3>なるほど、わからん。もっと簡単に説明して？</h3>
<p>そのためにはまず最初に「パソコンはどうやって画面が表示されるのかな？」について考えないといけません。<br />
PixelBenderは凄く簡単に言うと「ピクセルを処理する言語」、もっと限定的に言うと「画像を処理するための言語」だからです。</p>
<h3>ではパソコンはどうやって画面が表示されるのかな？</h3>
<p>パソコンの画面の最小単位は1pxからできていることは説明の必要がないと思います。<br />
では仮に1pxだけ表示するディスプレイがあるとして、その1pxに赤を表示させてみましょう。<br />
<div id="attachment_1133" class="wp-caption alignnone" style="width: 245px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p1.png" title="p1"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p1.png" alt="1ピクセルの画面に赤を描く" title="p1" width="235" height="231" class="size-full wp-image-1133" /></a><p class="wp-caption-text">1ピクセルの画面に赤を描く</p></div><br />
殴り書きの絵ですいません。<br />
こんな感じでCPUは赤を表示させています。<br />
ピクセルが増えて横に2ピクセルの画面ではどうでしょうか。<br />
<div id="attachment_1134" class="wp-caption alignnone" style="width: 292px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p2.png" title="p2"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p2.png" alt="CPUは1ピクセルずつ処理している" title="p2" width="282" height="226" class="size-full wp-image-1134" /></a><p class="wp-caption-text">CPUは1ピクセルずつ処理している</p></div><br />
あたりまえですがCPUは1ピクセルずつ描画を処理していることになります。<br />
ところで最近のディスプレイはかなり高解像度ですが、仮に620ピクセル×480ピクセルの画面を表示させようとするとCPUはどのように動いているでしょうか。<br />
<div id="attachment_1136" class="wp-caption alignnone" style="width: 269px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p3.png" title="p3"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p3.png" alt="620×480の画面に表示する" title="p3" width="259" height="248" class="size-full wp-image-1136" /></a><p class="wp-caption-text">620×480の画面に表示する</p></div><br />
一度に描画する処理の回数は解像度にそのまま匹敵するので620×480＝297600回の処理が必要になります。<br />
さらにこの画面を60フレームレートで動かそうと思うと297600×60＝17856000。一秒間に1千785万6千回ものCPUの処理が行われることになります。<br />
一個一個の処理は赤を出したり青を出したり程度なのでたいして重くない処理なのですが、コンピューターにとって画像の表示って意外と回数がかかる作業なのです。</p>
<p>こればっかりはCPUが進化して速くなっても、画面の表示処理だけはまともにやると解像度の処理回数がかかってしまうのはかつては避けられない問題でした。<br />
この問題を面白い方法で解決したのが次の考え方です。<br />
<div id="attachment_1137" class="wp-caption alignnone" style="width: 263px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p4.png" title="p4"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p4-253x300.png" alt="1ピクセルずつに専用のCPUを割り当ててしまう" title="p4" width="253" height="300" class="size-medium wp-image-1137" /></a><p class="wp-caption-text">1ピクセルずつに専用のCPUを割り当ててしまう</p></div><br />
「画像を表示させるための機械」を作ってその中に、620×480の画面なら、620×480個。つまりCPUを297600個並べて、それぞれ1ピクセルを描画すればいい、と。<br />
ものすごいパワープレイすぎてそんな馬鹿なと思うかもしれません。だいたいパソコンのCPUなんて安くても一個1万円くらいするのにそんなのを297600個も並べてどうすんねんと。<br />
その気持ちはよくわかります。ただ、画面表示専用のこのCPUは、一個一個は赤か青かとかを表示するだけなのですごく簡単な仕事を任されているのみなんです。このくらいの仕事なら僕にも出来るかもしれません。<br />
さらに普通のパソコンのCPUと違うところは、パソコンのCPUはそれこそ一秒間に何兆回、いやもっと処理を行わないといけないのにたいして、この画面表示専用のCPUは極端に言えば一秒間に60回だけ処理できればいいのです。それも物凄く簡単な仕事だけを。</p>
<div id="attachment_1138" class="wp-caption alignnone" style="width: 246px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p5.png" title="p5"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p5-236x300.png" alt="全ては同時に行われる" title="p5" width="236" height="300" class="size-medium wp-image-1138" /></a><p class="wp-caption-text">全ては同時に行われる</p></div><br />
色の出力しかできない簡単な処理を、しかも一秒間にたった60回しかできなくても、全ての処理は同時に行われるので一瞬で終わります。今までどんなに高性能なCPUでも処理回数がかかって仕方なかったところを、この画像処理の方法は一瞬で終わらせることができるのです。この「画像を表示させるための機械」はたいしたものです。</p>
<p>実際には本当に297600個も並べているのかというと半分本当で半分嘘になります。本当のところはもうちょっとソフトウェアやハードウェアレベルで仮想化なども行われているのですが、画像処理の並列処理についての考え方は基本的にこれまで説明したような処理で行われていることになります。<br />
しかもここまでの説明を「GPU」と説明すればわかるひとには一発でわかるものを、なぜ「仮想化とかそういう処理は置いておいて、「画像を表示させるための機械」というものがあることにしておく」などとまわりくどい説明を行ったかというと、PixelBenderはGPUが無くても動くからです。</p>
<h3>では改めて問う。PixelBenderとは何ぞや。</h3>
<p>PixelBenderとは、<br />
「つーかその1ピクセルごとに専用のCPUがあるならさ、そのCPUにプログラム走らせれば良いんじゃない？」という発想の元に生まれた、ピクセルを描画するためだけのプログラムです。</p>
<p>先ほど説明した「画像を表示させるための機械」が行っている1ピクセルの描画処理の流れはこんな感じです。<br />
<div id="attachment_1141" class="wp-caption alignnone" style="width: 260px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p6.png" title="p6"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p6.png" alt="1ピクセルの描画処理の流れ" title="p6" width="250" height="300" class="size-full wp-image-1141" /></a><p class="wp-caption-text">1ピクセルの描画処理の流れ</p></div><br />
これが620×480個、とにかく沢山並んでいて、一斉に、同時に、処理するんでしたね。<br />
これにPixelBenderというプログラムを走らせるとこうなります。<br />
<div id="attachment_1142" class="wp-caption alignnone" style="width: 260px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p7.png" title="p7"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p7.png" alt="PixelBenderの処理の流れ" title="p7" width="250" height="300" class="size-full wp-image-1142" /></a><p class="wp-caption-text">PixelBenderの処理の流れ</p></div>
<p>なんとなくPixelBenderというものがわかってきたでしょうか。<br />
冒頭（といっても記事の中盤）で説明した言葉をもう一回書いてみます。<br />
<strong>PixelBenderとはある一つのピクセルを計算して描画するプログラムの事です。</strong></p>
<h3>正体が分かればそんなに怖くない</h3>
<p>つまりPixelBenderが行う処理は、言ってしまえばRGBの値（正確にはあとアルファ値も）だけが入力されることと、出力もRGBの値（と正確にはあとアルファ値と）を出力するためだけのプログラムです。<br />
一個のプログラムは1ピクセルの色だけを出力するためのものです。<br />
そしてそれが何万個（場合によっては何千万個）も同時に実行されます。<br />
ActionScriptやJavaScriptなどのように、順番に実行される言語でプログラムしていると最初ちょっと戸惑いますが、PixelBenderは</p>
<ol>
<li>一個のピクセルを描画するためだけの言語
<ul>
<li>そしてそれだけしかできないのでたいして難しいわけではない</li>
<li>そもそも言語的にそれ以上の難しい事を出来るようにはなっていない</li>
</ul>
</li>
<li>全てが同時に実行される</li>
</ol>
<p>という二点のミソを理解すれば最初感じていた取っつきにくさは消え去りました。</p>
<h3>PixelBenderをFlashで使うことのメリット・デメリット</h3>
<p>そしてこのPixelBenderはFlashでもノーコストで使用できます。<br />
FlashのActionScriptにおいて、<br />
保守管理しやすい綺麗なコードを<strong>白魔法</strong><br />
高速化のために全てを犠牲にするような過激なチューニングが為されたコードが<strong>黒魔法</strong><br />
とするなら、PixelBenderはさしずめ<strong>召喚魔法</strong>です。<br />
全く異世界の力を借りることになり、威力は絶大。しかもノーコストです。</p>
<h4>メリット</h4>
<ul>
<li>同時に実行しなければならない処理がノーコストで一瞬にして終わる。</li>
<li>FlashのFPSを落とさない。</li>
</ul>
<p>実際にはFlashPlayerの実行環境の構成によりますが、理論上はFlashのFPSを落とすことはありません。</p>
<h4>デメリット</h4>
<li>PixelBenderの言語について多少なりとも習得が必要</li>
<li>処理できる型がBitmapDataかByteArrayに限られている</li>
<p>ByteArrayについてはまた別途書きます。</p>
<blockquote><p>2011/09/08追記<br />
<a href="https://twitter.com/#!/zahir1929/status/111511440271212544">ByteArrayと同じくVector.<Number>型も使えると教えて頂きました。</a></p></blockquote>
<p>ピクセルを描画するというPixelBenderの仕組み上、扱える描画オブジェクトがBitmapDataに限られます。<br />
BitmapData型を保持していない描画オブジェクトの場合、処理の前に常にbitmapData.draw()を発生させなければいけないので、このコストがいちばんの悩みどころになります。<br />
逆に言えば、BitmapData型を保持していればどんどん積極的にPixelBenderを使っていきたいところです。</p>
<h3>さっそく使ってみよう！PixelBender！</h3>
<p>とここまで書いておいてなんですが、悩んだんですがこの記事ではPixelBenderの言語については解説は書かないことにしました。<br />
理由は僕もまだはじめたばかりなので説明出来るほど言語にたいして理解が深くないためです。<br />
みなさんと同じく僕も目下勉強中なので、いずれ記事に出来るくらいには理解を深められたらと思います。</p>
<p>ただし、PixelBenderについては「PixelBender お目当ての処理」で検索するとけっこうな数で海外のPixelBenderのソースがヒットします。<br />
それらを参考にするも良し、ライセンス的に問題がないのであればそのままFlashに使用するもよしなので、およそ汎用的な処理であればPixelBender初心者でもかなりなことができてこの技術を手っ取り早く楽しむことは出来ます。</p>
<p>PixelBenderというプログラム言語についての解説は今回は省きますが、PixelBenderツールキットの使い方について、おおまかに説明してみたいと思います。<br />
ちなみに冒頭（といってもこの記事の中盤頃）でも書きましたがPixelBenderツールキットとはPixelBenderというプログラムを書いたり実行したりテストしたりコンパイルしたりするアプリツールのことです。Flashを作るあのソフトのことをFlashIDEと呼んだりするのと同じです。</p>
<p>PixelBenderツールキットは、AdobeCS4かAdobeCS5を買ってインストールしていれば標準で入っていると思います。CS5.5ではどうかわかりませんし、CS以外の他の方法で手に入れるやり方はわかりませんが、とにかくCSでインストールされているものとして話しをすすめてみます。<br />
ちなみにCS5ではPixelBenderツールキット2が入っていました。1と比べてどこか新しくなったんですかね？<br />
Macだと<br />
/アプリケーション/ユーティリティ/Adobe ユーティリティ<br />
/アプリケーション/ユーティリティ/Adobe ユーティリティCS5<br />
あたりに入ってると思います。</p>
<p><div id="attachment_1147" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p8.png" title="p8"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p8-300x159.png" alt="New Kernelで新規作成" title="p8" width="300" height="159" class="size-medium wp-image-1147" /></a><p class="wp-caption-text">New Kernelで新規作成</p></div><br />
立ち上げるとメニューから「File」→「New Kernel」で新規作成です。<br />
PixelBenderのプログラムはこのKernelという単位で動きます。<br />
今までくどくど説明してきたように、このKernelという小さなプログラムが1ピクセルを描画するためのプログラムとなります。<br />
<div id="attachment_1099" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/08/db155b9b01b4fc02f1ceb4d7198a374c.png" title="PixelBenderツールキット2"><img src="http://utweb.jp/blog/wp-content/uploads/2011/08/db155b9b01b4fc02f1ceb4d7198a374c-300x203.png" alt="画面は大きく3つにわかれています。" title="PixelBenderツールキット2" width="300" height="203" class="size-medium wp-image-1099" /></a><p class="wp-caption-text">画面は大きく3つにわかれています。</p></div><br />
画面は大きく3つに別れていて、上が画像の表示領域。<br />
下がプログラムのソースコードを書く場所、右側にいろいろな情報やパネルが並ぶようになっていると思います。<br />
このツールでPixelBenderの処理を書いたりテストしたりすることになります。<br />
プログラムはpbk（PixelBenderKernelFile）として保存されます。<br />
ひととおりプログラムを書いて満足できる結果が得られれば、さっそくFlashで使いたいと思います。その際はPixelBenderをFlashで使えるようにコンパイルしてやる必要があります。<br />
メニューの「File」→「Export Filter For Flash Player...」を選んでください。<br />
<div id="attachment_1148" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2011/09/p9.png" title="p9"><img src="http://utweb.jp/blog/wp-content/uploads/2011/09/p9-300x168.png" alt="Export For Flash Player..." title="p9" width="300" height="168" class="size-medium wp-image-1148" /></a><p class="wp-caption-text">Export For Flash Player...</p></div><br />
Flashでいうflaファイルがpbk。swfファイルがpbjファイルということになります。</p>
<p><a href="http://utweb.jp/blog/archives/1158">後半へ続きます。</a></p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/1071/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/1071" />
	</item>
		<item>
		<title>大阪ひよこの会でやった内容を少し</title>
		<link>http://utweb.jp/blog/archives/986</link>
		<comments>http://utweb.jp/blog/archives/986#comments</comments>
		<pubDate>Mon, 07 Mar 2011 05:22:49 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Progression]]></category>
		<category><![CDATA[イベント]]></category>
		<category><![CDATA[セミナー]]></category>
		<category><![CDATA[勉強会]]></category>
		<category><![CDATA[飲み会]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=986</guid>
		<description><![CDATA[Flashの今さら人に聞けない初歩的な何かをみんなで勉強する大阪ひよこの会。
その第三回「シーン遷移とは？」を開催しました。
シーン遷移と言えばFlashの画面展開として最も重要な部分。
FlashサイトからFlashゲ [...]]]></description>
			<content:encoded><![CDATA[<p>Flashの今さら人に聞けない初歩的な何かをみんなで勉強する大阪ひよこの会。<br />
その<a href="http://www.project-nya.jp/modules/weblog/details.php?blog_id=1362" target="_blank">第三回「シーン遷移とは？」</a>を開催しました。</p>
<p>シーン遷移と言えばFlashの画面展開として最も重要な部分。<br />
FlashサイトからFlashゲーム、Flashアニメに至るまで、必ずといっていいほど考えなくてはいけない部分です。<br />
必ずぶち当たる問題なのに、ほとんど直接作品とは関係ない部分でもありますし、かといってこれまた必ず制作の途中段階で変更を余儀なくされる部分でもあります。<br />
なので本来の作品性に関係ない部分を出来る限り省力化をしながら作らないといけないし、かといって出来る限り柔軟に作っておかないと作品の作り込みに影響するという、ほぼ全てのFlasherのジレンマとして君臨し続けているのではないでしょうか（言い過ぎか）。</p>
<p>そんなシーンに対する、僕たちひよこたちの方法とは？<br />
僕はProgressionのシーン遷移の部分に焦点を当てて（本来僕はProgressionの目玉を大きく三つにわけて、シーン遷移、キャスト、コマンドとしています。今回はそのシーン遷移の部分）、技術的なお話はおいておいて「何故Progressionを使うのか」についてお話しさせて頂きました。<br />
ほとんど資料無しのお粗末な内容ですが、皆様ご静聴ありがとうございました！<br />
「本やネットにある情報だけど、あえて口頭で説明した方がわかりやすいな」みたいな内容も交えてたので、ブログに残せるほど有意義な情報はありませんでしたが、一旦レポートしておきたいと思います。<br />
<span id="more-986"></span></p>
<h3>そもそも何故Progressionを使うのか</h3>
<h4>Progressionとは何かをあえて間違って定義してみる</h4>
<p>Progressionとかフレームワークとか、何かをインストールしないといけないとか勉強しないといけないとか、一旦難しい事はおいておいて、シーン遷移だけに限って言えばProgressionはとても便利なクラスライブラリと考えていいと思います。<br />
クラスライブラリというのは、AS3を書く方なら一回は使ったことがあると思いますが、Tweenerとか、ああいったような、誰かがあらかじめ作ってくれたとても便利なクラスということになります（誰かが、とか言い回し失礼します）。</p>
<p>AS1やAS2しか触ったことがなくても、色を変えるColorとか時間を計算するDateとかあれもクラスですので、やはり一回は使ったことあると思うんです。<br />
ですので、誤解を恐れずあえて極端なことを言うと、「Progressionのシーン遷移も、Dateなどのクラスと一緒なのだから、使い始めるのに何も特別なことはない」と言えると思います。</p>
<p>Progressionに対して抱いている（おそらく必要以上に）高い敷居を下げるためにあえて極端なお話をしましたが、この方法が正しいかどうかはわかりませんが、もちろん最終的には<a href="http://progression.jp/ja/" target="_blank">公式ページ</a>や技術書などでしっかりと理解することをお勧めします。</p>
<h4>Progressionは難しい？</h4>
<p>Progressionのシーン遷移は難しいか？いいえ簡単です。<br />
難しいのはシーン遷移のほうです。<br />
僕は長年シーン遷移に悩まされてきました。<br />
最初は簡単なgotoAndPlayの分岐にはじまり、attachmovieやaddChildなどのアクションスクリプトに頼り、デザインパターンやMVCを引っ張り出しても完璧なものができませんでした（その原因の全てはデザパタやMVCが悪いんじゃなくて僕自身のスキル不足にあります）。<br />
将来的な作り込みを見越して柔軟性に富んだ作りにしたつもりが、使いにくいAPIとスパゲッティな内部を持ったゴミの固まりみたいなのが出来たり、全く想定してなかった箇所に変更が入って作り直しを余儀なくされたり…。思い出すだけでも胃に穴が空きそうです（苦笑）。</p>
<p>そういった、「シーン遷移の難しさ」を簡単にしたものがProgressionのシーン遷移なのです。<br />
ここは誤解でも極論でもないです。</p>
<h4>具体的に知りたいProgressionのシーン遷移のこと</h4>
<p>Progressionのシーン遷移で重要なクラスは<br />
<a href="http://asdoc.progression.jp/4.0/jp/progression/scenes/SceneObject.html" target="_blank">SceneObject</a>です。<br />
（注意：公式のASDocのフレームに直リンク張っています）<br />
このSceneObjectの主に四つの関数を呼ばれるタイミングを駆使するだけで複雑なシーン遷移をコントロールします。<br />
その4つとは<br />
<a href="http://asdoc.progression.jp/4.0/jp/progression/scenes/SceneObject.html#atSceneGoto()" target="_blank">atSceneGoto()</a><br />
シーンから出発したときに呼び出される関数。</p>
<p><a href="http://asdoc.progression.jp/4.0/jp/progression/scenes/SceneObject.html#atSceneLoad()" target="_blank">atSceneLoad()</a><br />
シーンが読み込まれたときに呼び出される関数。</p>
<p><a href="http://asdoc.progression.jp/4.0/jp/progression/scenes/SceneObject.html#atSceneInit()" target="_blank">atSceneInit()</a><br />
シーンが到着したときに呼び出される関数。</p>
<p><a href="http://asdoc.progression.jp/4.0/jp/progression/scenes/SceneObject.html#atSceneUnload()" target="_blank">atSceneUnload()</a><br />
自分より上の階層のシーンに移動して、自分が必要なくなったときに呼び出される関数。</p>
<p>です。<br />
こちらも公式サイトに直リンクを張っていますので詳しくはリンク先でお調べ下さい<br />
（注意：フレーム内に張っています）。</p>
<p>これについては、どの解説書でも丁寧に説明がなされています。<br />
詳しくはそういった技術書で身につけることをお勧めしますが、まずはひよこのとっかかりとして口頭でこれらがどういった動きをするかを会では説明させて頂きました。</p>
<p>慣れないうちはとくにatLoadとatInitの使い分けに苦しんだ記憶がありますが、<br />
それでも複雑なシーン遷移をこの４つの関数が呼び出されるタイミングで処理するやり方はとても理にかなったものなので、慣れれば多階層シーンの移動の際に、<br />
atLoadはメモリの初期化など<br />
atInitは描画処理など<br />
atUnloadeでメモリの解放など<br />
というようにうまく使い分けることで破綻せずシーン遷移が楽に行えるようになるかと思います（注意：ここに書かれてあるのは必ずしもatLoadでメモリの初期化をしないといけない、ということではないです）。</p>
<h4>さいごに</h4>
<p>まいどまいど長いばっかりで中身のないブログ内容で本当ごめんなさい。<br />
基本的には技術的な検証あんまりしないし文章も推敲しないし自分の駄文レポートなので、読んでくださってる方には毎回申し訳ない気持ちで一杯です。</p>
<p>まあそんなありがたくも申し訳ない心情をつらつらと書いてても仕方がないので話を進めますと、あのあと帰ってから次の日にぎっくり腰になりまして、ただいま寝返りも打てない状態で安静中です（笑）。<br />
ぎっくり腰になったきっかけというのも、ゴホンゴホンと咳き込んでいたらいきなりぐきっといったという地上最弱生物の名をまたしてもほしいままにしてしまいましたｗ</p>
<p>ひよこの会も僕が幹事とはいえあんまり何もしてない派なので、いつも細やかに仕切ってくださるひろゆきさんはじめ皆さんのご協力あって成り立っています。お忙しい中、ご協力もご参加も本当に感謝です！<br />
「初歩的な質問をする会」なので、決して上級者お断りではないので、初心者も上級者もいろんな「いまさらな話」でみんなで盛り上がれたらと思います。</p>
<p>かといって「ひよこの会と聞いたけど自分ばかりが初心者でまわりがとてもレベルが高く感じた。こんな初歩的な質問していいのか迷った」という方が居ましたら、それこそまさしく初歩的な質問ですのでどしどし参加してくださいね！<br />
僕ももうちょっと緊張しないようにやっていきますので、これからもよろしくお願いします。</p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/986/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/986" />
	</item>
		<item>
		<title>この冬挑戦したいFlashBuilderことはじめ</title>
		<link>http://utweb.jp/blog/archives/928</link>
		<comments>http://utweb.jp/blog/archives/928#comments</comments>
		<pubDate>Thu, 30 Dec 2010 13:28:26 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[FlashBuilder]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=928</guid>
		<description><![CDATA[今回の記事はFlashBuilderを生まれて一度も立ち上げたことのない人向けの記事です。
「そんなのアイコンダブルクリックしたら立ち上がるしあとは使うだけだよ」って方は、まさにごもっともですしここに書かれてあるのはその [...]]]></description>
			<content:encoded><![CDATA[<p>今回の記事はFlashBuilderを生まれて一度も立ち上げたことのない人向けの記事です。<br />
「そんなのアイコンダブルクリックしたら立ち上がるしあとは使うだけだよ」って方は、まさにごもっともですしここに書かれてあるのはその程度のことなのでお役に立てないかもしれません。<br />
僕がFlashBuilderを使い始めるに当たって敷居が高いなーと感じたところをまとめましたので、まだFlashBuilderを使ったこと無い方の何かの参考になれば幸いです。<br />
<div id="attachment_950" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2010/12/86c3ca9de6fc16dcab817c32291afebe.png" title="FlashBuilderの画面"><img src="http://utweb.jp/blog/wp-content/uploads/2010/12/86c3ca9de6fc16dcab817c32291afebe-300x181.png" alt="FlashBuilderの画面。なにやら小難しそうだが…？" title="FlashBuilderの画面" width="300" height="181" class="size-medium wp-image-950" /></a><p class="wp-caption-text">FlashBuilderの画面。なにやら小難しそうだが…？</p></div><br />
<span id="more-928"></span></p>
<h3>そもそもFlashBuilderって何？</h3>
<p>FlashBuilderは<strong><a href="http://ja.wikipedia.org/wiki/Eclipse_(%E7%B5%B1%E5%90%88%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83)" target="_blank">Eclipse</a>というソフトのプラグイン</strong>です。<br />
もともとはFlexBuilderという名前だったそうですが、AdobeCS5のときに名前が変わってFlashBuilderとなりました。<br />
EclipseについてはWikipediaにリンクを張りましたので、詳しく知りたい方はそちらを参考にして下さい。<br />
ようはEclipseとはJAVAのコードを書くのにとっても便利なフリーソフトなんです。<br />
で、ただJAVAを書くのに便利なだけでなく、プラグインでいろいろな機能を追加できるようになっているので、そのEclipseでActionScript3を書けるようにしたプラグインをAdobeが発売してる、そのプラグインがFlashBuilderということになります。</p>
<p>FlashBuilderを入れるとEcripseでAS3が書けるようになると言うことは、ほかにもPHPが書けるプラグインとか（有名なのはPDT）HTML+CSS＋JavaScriptが書けるプラグインとか（aptanaとか）いろいろプラグインを入れることによってEclipseをどんどんいろんな物を作れる便利な開発環境にすることもできます。<br />
できます、が、そういう「ぼくのかんがえたさいきょうのえくりぷす」は実際使いにくいですしプラグイン同士の競合や不具合で壊れたりもするので、おおまかにプラグインごとにいくつもEclipseをインストールする事を僕はおすすめします。<br />
そう、EclipseはひとつのPCにいくつもインストール出来るんです。<br />
なので、AS3用のFlashBuilder入りEclipse、PHP用のPDT入りEclipse、HTML用にAptana入りのEclipse、データベース設計用にERMaster入りEclipse、というように僕は大きく分けて４つのEclipseをインストールしてあります。FlashBuilder以外でも興味もたれたプラグインありましたら是非検索して使ってみて下さい。<br />
<a href="http://www.adobe.com/jp/products/flashbuilder/" target="_blank">FlashBuilderのAdobeのページはこちら。</a></p>
<h3>FlashBuilderは2種類ある</h3>
<p>FlashBuilderは機能によって2種類に分けられます。<br />
Standard Edition ¥31,500-<br />
Premium Edition ¥89,250-<br />
高いですね。<br />
僕は、自分の作るFlashっていつも激重なので、どこに処理の負荷がかかってるのか知りたいと思いプロファイラー付きの高い方買いましたが、ふつうは安い方で全く問題ないです！<br />
高いFlashBuilder買ったのに、相変わらずへぼいFlash野郎の僕を見てれば、Flashを作るのに高いソフトは必要ないことがよくわかると思います。</p>
<h3>どうやって手に入れるの？</h3>
<p>FlashBuilderは大きく分けて３つの方法で手に入ります。</p>
<ol>
<li>Adobe Creative Suite 5 webpremiumを買ったらStandard Editionがついてくる</li>
<li>FlashBuilderを直接買う（AdobeStoreでオンラインで買えます）</li>
<li>60日間無料の体験版をDLする</li>
</ol>
<p>この記事を読む人はたぶん1番の方法が多いんじゃないでしょうか。<br />
この記事の最初で「FlashBuilderはEclipseのプラグインです」と書きましたが、単純にプラグインだけのやつとEclipseとセットになったやつの2種類あるので、初めての人はEclipseとセットになったやつを選ぶと良いです<br />
（実際に1番の方法でインストールされてるのはEclipseとセットのやつです）。</p>
<h3>FlashBuilderを使うとなにが嬉しいの？</h3>
<p>そもそもFlashのアクションパネルだけでも手一杯なのに、FlashBuilderなんてプログラマーの使うような小難しいソフトの使い方なんて覚えてられない、なんて方も多いと思います。<br />
半分正解で半分間違いです。<br />
確かにFlashBuilderはちょっとだけ敷居が高いですが、使いこなせばプログラムが苦手な人ほど重宝するようになるかと思います。<br />
FlashBuilderの魅力は<strong>強力なコード補完</strong>。これに尽きると思います。<br />
例えばブラウザ上で「ほげー」とアラートを表示させるためだけにAS3では</p>
<pre class="brush: as3">
package
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;
	public class Main extends Sprite
	{
		public function Main():void
		{
			ExternalInterface.call('alert', 'ほげ〜');
		}
	}
}
</pre>
<p>こんだけのコードを書かないといけないのですが、<br />
（AS2までは<br />
getURL('javascript:alert("ほげ〜");');<br />
とタイムラインの一行書いてただけでいけてた）<br />
FlashBuilderではここまでのコードをほとんど自動化で作ってくれます。<br />
Mainっていうクラスを作るまではマウスでちょいちょいするだけだし、<br />
キーボードといえば「Ex」の二文字しか入力せず、あとは自動的に出てくる候補からスクリプトを選んでいくだけです。<br />
さいしょにほんのちょっとだけ、FlashBuilderの使い方を覚えればあとはほとんど自動的にコード書いてくれるようになるので、面倒なことはFlashBuilderにまかせて作ることに集中できるかと思います。<br />
僕みたいな、プログラムに自信のないひよこにこそ、こういったFlashBuilderやFlashDevelopなどのツールは必須アイテムなのでもっと早く使っとけば良かったと思います。</p>
<h3>さっそく立ち上げてみよう</h3>
<p>ここまでFlashBuilderのたいしたことない紹介で埋まってしまったので、そろそろ実際にFlashBuilderを立ち上げてみましょう。<br />
僕はFlashBuilderをただ立ち上げるだけのことをするまでに、ここまで心の準備が必要だったので。<br />
新しいツールってわくわくすると同時にちょっと怖いですよね。</p>
<h3>Eclipseの洗礼、ワークスペース</h3>
<p>はじめて立ち上げた場合、Eclipseのワークスペースの場所をどこにするか聞かれるかと思います。<br />
<div id="attachment_936" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2010/12/327031c9eb0bcf22d18df9153dc704ff.png" title="ワークスペース"><img src="http://utweb.jp/blog/wp-content/uploads/2010/12/327031c9eb0bcf22d18df9153dc704ff-300x167.png" alt="これはいったいなんなんだ！？" title="ワークスペース" width="300" height="167" class="size-medium wp-image-936" /></a><p class="wp-caption-text">これはいったいなんなんだ！？</p></div><br />
ワークスペースって何だ！？おれはただFlashのActionScriptを楽して書きたいだけなんだ！<br />
はっきり言って僕はこの時点で混乱しました。FlashBuilderもう無理と思いました。<br />
なのでワークスペースについて僕が知ってる限りの事しか書けないですが、<br />
どうやら<strong>ワークスペースとはEclipseの設定を保存する場所</strong>のようです。<br />
ワークスペースを複数設定しておけば、メニューの「ファイル」→「ワークスペースの切り替え」からいつでも切り替えられるようです。<br />
<div id="attachment_937" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2010/12/ac0aaf8320d1f6f857ec633b44bdfcc8.png" title="ワークスペースを切り替える"><img src="http://utweb.jp/blog/wp-content/uploads/2010/12/ac0aaf8320d1f6f857ec633b44bdfcc8-300x215.png" alt="ワークスペースを切り替えている様子。" title="ワークスペースを切り替える" width="300" height="215" class="size-medium wp-image-937" /></a><p class="wp-caption-text">ワークスペースを切り替えている様子。</p></div><br />
そんなことして何の得があるのかはわかりませんが、どうやらそういうことのようです。</p>
<p>ワークスペースについてもう少し。<br />
僕は元々、ワークスペースを「作業ファイルもここに保存する」場所だと思っていたんですが、どうやらワークスペースと別の場所にあるファイルを読み込めるので、作業ファイルとワークスペースは別のフォルダにしておいたほうがよさそうです。<br />
何故かというと、僕は作業ファイルをDropbox上においているんですが、同じ場所をワークスペースにも設定してしまうと、Dropboxが複数台のPCで同期したときにFlashBuilderのライセンス違反が起きてとんでもないことになるんです。<br />
「お前ッ！2台のPCでFlashBuilderライセンス認証しただろッ！このくされワレザーめ！二度とお天道様拝めなくしてやる！」といわんばかりにFlashBuilderが凄いことになって、それはもう怖かったです。</p>
<p>そういうこともあるので、というか別にDropbox使って無くてもFlashBuilderみたいにライセンス認証のいらないフリーのプラグイン使ってる場合でも、とにかく僕はワークスペースと作業ファイルは別々にして運用しておくことを今はお勧めしています。<br />
なのでここではワークスペースを「設定ファイルの保存場所を決める」くらいにとどめておきます。</p>
<h3>プロジェクトを作ってみる</h3>
<p>やっとFlashBuilderを使ってみましょう。ただ使うだけでここまで僕のチラシの裏が続いたのって、たぶんEclipseの記事でも世界最長ではないでしょうか。<br />
そんくらい僕には最初の敷居が高かったんですよ…。</p>
<p>FlashBuilderでは、ひとつモノを作るたびに<strong>「プロジェクト」という単位で管理</strong>します。<br />
このへんも「ちょっと何か作ってみよう」と考えたらさっとflaファイル作ってパブリッシュできるFlasherからするとありえへんくらい敷居が高いと思います。<br />
そうなんですが、逆に言うとプロジェクト単位でものをつくっておけば、プロジェクト内のコードのやりとりがびっくりするくらいFlashBuilderが補完してくれるようになるのでここはぐっと我慢です。</p>
<p>FlashBuilderでプロジェクトを作るには大きく分けて3つの方法があります。</p>
<ol>
<li>FlashIDEプロジェクトを作る</li>
<li>ActionScriptプロジェクトを作る</li>
<li>すでにあるプロジェクトをインポートする</li>
</ol>
<p>他にもFlexプロジェクトを作るなんて方法もありますが、Flexに関しては完全に僕は分からない世界なので説明できませんです。<br />
今回は１の<strong>FlashIDEプロジェクトを作る</strong>方法をとってみましょう。<br />
最終的にはおすすめは２と３です。それぞれ僕の拙い過去の記事ですが<br />
2に関しては<br />
<a href="http://utweb.jp/blog/archives/910">SWC+Progressionで快適コーディング生活はじまる！</a><br />
3に関しては<br />
<a href="http://utweb.jp/blog/archives/815">Progression4をいい感じにFlashBuilderで作業できるようにする</a><br />
あたりを参考にしてみてください。<br />
そのものずばりなことは書いていませんが、ヒントになれば幸いです。</p>
<p>あとちなみに、FlashIDEって何のことかというと、Flashのことです。<br />
あのタイムラインとかライブラリとかの、フツーのいつものFlashのことをこのブログではFlashIDEと呼んでいます。<br />
IDEというと統合開発環境という意味らしいです。プレイヤーのFlashと区別するため、Flashを作るほうのFlash（flaファイルを開くやつね）をFlashIDEと呼ぶことに決めてます。ややこしくてすいません。</p>
<h3>おれはFlashプロジェクトを作るぞオォッ！</h3>
<p>実はこの記事書くに当たって僕も初めてこのプロジェクト作ってみましたｗわくわくしますねｗ<br />
<div id="attachment_939" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2010/12/87554d4489139c1470c539e4c1beb0f5.png" title="Flashプロジェクト"><img src="http://utweb.jp/blog/wp-content/uploads/2010/12/87554d4489139c1470c539e4c1beb0f5-300x47.png" alt="おっそれらしいのがあった" title="Flashプロジェクト" width="300" height="47" class="size-medium wp-image-939" /></a><p class="wp-caption-text">おっそれらしいのがあった</p></div><br />
メニューの「ファイル」→「新規」→「Flash Professionalプロジェクト」というそれらしいのがあったのでたぶんこれでしょう。<br />
<div id="attachment_941" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2010/12/9710b6c873ab2441337f90a14c0bf02d.png" title="flaファイルを選ぶ"><img src="http://utweb.jp/blog/wp-content/uploads/2010/12/9710b6c873ab2441337f90a14c0bf02d-300x223.png" alt="flaファイルを選べばいいみたい。" title="flaファイルを選ぶ" width="300" height="223" class="size-medium wp-image-941" /></a><p class="wp-caption-text">flaファイルを選べばいいみたい。</p></div><br />
へ〜ここでflaファイルを選べばいいのね〜。<br />
<div id="attachment_942" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2010/12/87a29b4a2224d454380994eabb8fc5f2.png" title="できた"><img src="http://utweb.jp/blog/wp-content/uploads/2010/12/87a29b4a2224d454380994eabb8fc5f2-300x181.png" alt="できたできた〜！" title="できた" width="300" height="181" class="size-medium wp-image-942" /></a><p class="wp-caption-text">できたできた〜！</p></div><br />
さっそくプレビューしてみましょう！<br />
<div id="attachment_943" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2010/12/4b3e9e8d0c12ba53bb8b13b99825c030.png" title="ムービーをプレビュー"><img src="http://utweb.jp/blog/wp-content/uploads/2010/12/4b3e9e8d0c12ba53bb8b13b99825c030-300x249.png" alt="プレビュー！" title="ムービーをプレビュー" width="300" height="249" class="size-medium wp-image-943" /></a><p class="wp-caption-text">プレビュー！</p></div><br />
メニューの「実行」→「ムービーをプレビュー」を選ぶか、Control+Enter（MacではCommand+Enter）の「いつものやつ」をすれば、FlashIDEでプレビューできるはずです！</p>
<p>ちょっと使ってみたんですが、このFlashIDEとFlashBuilderの連携は、どうやら今までFlashIDEでASするよりはマシ、みたいな感じですね。<br />
今までASをFlash上で書いてた所をFlashBuilderに徐々に移行していって、最終的にはActionScriptプロジェクトなんかに移行するのをおすすめしますよ。</p>
<h3>その他FlashBuilderで僕がつまづいたところ</h3>
<p>基本的にまじでFlashBuilderを立ち上げて使えるようになるまでを記事に書きましたんで、具体的なFlashBuilderでの使い方はこの記事ではやめておこうかと思います。<br />
そのかわり、僕が一番最初にFlashBuilderをつかってつまづいたところを少しだけ補足しておきます。</p>
<p><div id="attachment_945" class="wp-caption alignnone" style="width: 310px"><a href="http://utweb.jp/blog/wp-content/uploads/2010/12/e30a327e56be10f68fc16b83145a6234.png" title="パースペクティブ"><img src="http://utweb.jp/blog/wp-content/uploads/2010/12/e30a327e56be10f68fc16b83145a6234-300x181.png" alt="これはパースペクティブ" title="パースペクティブ" width="300" height="181" class="size-medium wp-image-945" /></a><p class="wp-caption-text">これはパースペクティブ</p></div><br />
FlashBuilderは小さいウインドウがたくさん並んでいますが、このレイアウトのことをEclipseで「パースペクティブ」と呼ぶそうで、画像の赤丸で囲ったところで切り替えられます。<br />
僕は最初これを知らなかったので、画面レイアウトがいきなり変わって元に戻せなくて泣きそうになりました。</p>
<h3>具体的な使い方はまた機会を設けて…</h3>
<p>まじで立ち上げるまでをごちゃごちゃつまらない話しで長々と説明してしまいました。<br />
記事中も何度も言いましたがひとえに僕が立ち上げるまでの敷居が高かったからです。<br />
実際は立ち上げてさえしまえば、あとは適当に使ってると使えるようになるかと思いますが、とりあえず僕が一番最初に書きたかった「立ち上げるまで」を記事に書けたのでまた今度ぜひとも機会を見つけて実際の使い方も記事でまとめてみたいと思います。<br />
僕自身も最近FlashBuilderさわり始めたぴよぴよのひよこちゃんですので、「こういう使い方できるよ！」みたいなお話ありましたら是非ともお聞かせ下さい。<br />
これを機会に、実際にお会いした方ともそうでない方とも、ネット上や居酒屋でFlashBuilderひよこ談義とかできるようになれば僕は嬉しいです！</p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/928/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/928" />
	</item>
		<item>
		<title>SWC+Progressionで快適コーディング生活はじまる！</title>
		<link>http://utweb.jp/blog/archives/910</link>
		<comments>http://utweb.jp/blog/archives/910#comments</comments>
		<pubDate>Thu, 21 Oct 2010 05:52:53 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[FlashBuilder]]></category>
		<category><![CDATA[Progression]]></category>
		<category><![CDATA[swf]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=910</guid>
		<description><![CDATA[いきなりですがswcファイルって「スウィック」って読むらしいですね。アドビの中の人もそう読んでたんで確かな情報です。
しかしながら僕は慣れなくていつも「エスダブルシー」って読んでしまうんですね。そこらへんのモサさが自分流 [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_911" class="wp-caption alignnone" style="width: 276px"><a title="SWC書き出し" href="http://utweb.jp/blog/wp-content/uploads/2010/10/51700dd1ba12bada0e02bb945011cba5.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/10/51700dd1ba12bada0e02bb945011cba5-266x300.png" alt="中段あたりにチェックボックスがあるよ" title="SWC書き出し" width="266" height="300" class="size-medium wp-image-911" /></a><p class="wp-caption-text">中段あたりにチェックボックスがあるよ</p></div>
<p>いきなりですがswcファイルって「スウィック」って読むらしいですね。アドビの中の人もそう読んでたんで確かな情報です。<br />
しかしながら僕は慣れなくていつも「エスダブルシー」って読んでしまうんですね。そこらへんのモサさが自分流さ、なんて無頼を決め込んで今日も「エスダブルシーエスダブルシー」と 読んでいます。<br />
僕が「エスダブルシー」って言う度に周りが若干イラっとした顔されるんですが、それでもかわまず「エスダブ…エスダボースィー」とか呼び続けてるのに未だ怒られた事がないのは 、ひとえに僕の人徳だと思います。</p>
<p>無駄な軽口はこのくらいにして、先日行われたひよこの会で少しだけ要望があったのでSWCと連携してProgressionでのFlashサイト開発環境を超快適にする方法をご紹介したいと思います。<br />
今までのやり方にもよりますが、体感100倍速いと言っても全くおおげさでないくらい、爆速開発が可能になりますよ！<br />
<span id="more-910"></span></p>
<h3> そもそもパブリッシュが遅い…</h3>
<p>Progressionに限らずですが、Flashサイトを作っていて一番のネックになるのが「パブリッシュに時間がかかる」事なんですよね。<br />
それもflaファイルが肥大すればする程パブリッシュに時間がかかるようになり、納品間近の追い込みの時期になるにつれてパブリッシュだけで1分以上かかるようになるし…（ヒーッ）。</p>
<p>デバッグなんかもそうですが、「よりわかりやすく、より気持ちよく」動くことを心がけているFlashサイトにとって、1pxの位置や0.1秒の速度までこだわってなんべんも動かしてみて作り込むことはよくあることなのに、パブリッシュに時間がかかるようになるとそれもままなりません。</p>
<h3>書き出せるものは先に書き出しておけば…</h3>
<p>そこで今回ご紹介するswcなんですが、これは言ってしまえば頻繁に変更しない素材はあらかじめswc形式で書き出しておいて 、それを使うことによって開発を進めていこう、という方法なんですね。<br />
この方法自体は、僕もkatapadさんから教えて頂きました。<br />
ちなみに僕というひよこ向けの備忘録なので、最初はswcとは何か、どうやってswcを書き出すのかなどの事が書かれてありますが、Progression連携のミソは一番最後なので、swc書き出しに精通されてる方はこのまま最後まですっ飛ばして読まれてもいいかもしれません。</p>
<h3>ものには順序がある。まずはFlashBuilderとProgressionを連携させるようにしておく</h3>
<p>僕の現在のFlash開発環境は100％FlashBuilder+Progressionなので、その方法でご説明します。<br />
基本的なところは同じなので他の開発環境 でも工夫してswc連携スタイルが作れることと思います。</p>
<p>まずは僕の以前の記事<br />
<a href="/blog/archives/815" target="_self">Progression4をいい感じにFlashBuilderで作業できるようにする </a><br />
を参考にしてください。<br />
これはFlashBuilderがsrcにあるflaファイルを勝手にbin-debugフォルダにコピーしてしまう現象を回避できなかったので、思い切ってflaファイルを削除してそれでもちゃんとswfがパブリッシュできるように設定し直した方法ですが、基本的にこのスタイルで開発を進めていくことになります。</p>
<p>記事に沿って、index.flaとかpreloader.flaを思い切って捨てちゃって下さい。次に進みます。</p>
<h3>新規flaファイルを作る</h3>
<p>FlashCS5の「ファイル」→「新規」から新規flaファイルを作ります。Progressionと連携させるのでASのバージョンはもちろんAS3です。<br />
僕はFlashBuilder連携を前提にこの記事を書いていますんで、今回FlashCS5指定ですがFlashDevelopとかFDT、FlexBuilderなどお使いの環境に合わせて読まれてる方にとっては、特にFlashCSのバージョンは関係はありません。</p>
<p>新規flaファイルの保存場所はどこでもかまいません。どこでもかまいませんがFlashBuilderのワークスペース以外のところに作るのがおすすめです。flaファイルのファイル名も何でもいいですが、ここでは<strong>material.fla</strong>と名付けました。</p>
<h3>SWCファイルを書き出す</h3>
<div id="attachment_912" class="wp-caption alignnone" style="width: 160px"><a title="おやこんなところにSWC書き出しのチェックが！" href="http://utweb.jp/blog/wp-content/uploads/2010/10/bad291777fba55d2fb440901354724a7.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/10/bad291777fba55d2fb440901354724a7-150x150.png" alt="おやこんなところにSWC書き出しのチェックが！" width="150" height="150" class="size-thumbnail wp-image-912 " /></a><p class="wp-caption-text">おやこんなところにSWC書き出しのチェックが！</p></div>
<p>そのままFlashの「ファイル」→「パブリッシュ設定」で真ん中らへんに「SWC書き出し」というチェックボックスがあるので、ここにチェックを入れます。<br />
そのままパブリッシュしたらflaファイルと同じフォルダに「material.swf」が出来たと思います。</p>
<div id="attachment_913" class="wp-caption alignnone" style="width: 160px"><a title="swcファイル書き出し" href="http://utweb.jp/blog/wp-content/uploads/2010/10/61f5826cf97f3819d29b2e1895fddeb9.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/10/61f5826cf97f3819d29b2e1895fddeb9-150x150.png" alt="おやこんなところにSWCファイルが出来ちゃった！" title="swcファイル書き出し" width="150" height="150" class="size-thumbnail wp-image-913 " /></a><p class="wp-caption-text">おやこんなところにSWCファイルが出来ちゃった！</p></div>
<h3>material.flaのライブラリの中はリンケージ書き出しのシンボルでいっぱい！</h3>
<p>さてさて、これでswc書き出し用のflaファイルが新規作成できましたので、早速作業に入っていきましょう。<br />
基本的にはmaterial[素材]というファイル名からも想像がつくように、このflaファイルの役割は「<strong>素材倉庫</strong>」です。長年慣れ親しんできたflaファイルをただの素材倉庫にするのは僕もしのびないですが快適環境作りのため。最終的にはFlash全体の開発環境が快適になることによって自然とこのflaファイルの活躍の場も以前より増してきますのでご心配なく！</p>
<p>最終的にライブラリの中にたくさんリンケージ書き出しのシンボルが作れました。</p>
<div id="attachment_915" class="wp-caption alignnone" style="width: 160px"><a title="ライブラリの様子" href="http://utweb.jp/blog/wp-content/uploads/2010/10/d9ec38aebee13f49f0a6f2382e344fc1.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/10/d9ec38aebee13f49f0a6f2382e344fc1-150x150.png" alt="ライブラリの中は血と汗と夢で一杯" title="ライブラリの様子" width="150" height="150" class="size-thumbnail wp-image-915  " /></a><p class="wp-caption-text">ライブラリの中は汗と涙と夢でいっぱい！</p></div>
<h3>書き出したSWCファイルをProgression開発環境にコピーする</h3>
<p>この記事ではProgression開発環境イコールFlashBuilderのワークスペースな意味合いで使っています。<br />
先ほど書き出したswcファイルを早速Progressionの開発環境で使ってみましょう。</p>
<p>具体的にはProgression開発環境のlibというフォルダに先ほどのswcファイルをコピーするだけで良いです。</p>
<div id="attachment_916" class="wp-caption alignnone" style="width: 310px"><a title="swcをlibフォルダに持ってきた" href="http://utweb.jp/blog/wp-content/uploads/2010/10/727373cc45b1639f577f17f80ce4d8c7.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/10/727373cc45b1639f577f17f80ce4d8c7-300x181.png" alt="わかりにくくてすみません。スクリーンショットでは800_material.swcとリネームされていますが特に意味はないです。" title="swcをlibフォルダに持ってきた" width="300" height="181" class="size-medium wp-image-916" /></a><p class="wp-caption-text">わかりにくくてすみません。スクリーンショットでは800_material.swcとリネームされていますが特に意味はないです。 </p></div>
<h3>たったこれだけ！</h3>
<p>FlashBuilder+Progression環境だと、この「swcをlibフォルダに入れる」だけであとは何もせずにswcの中にあるリンケージをそのままクラスとして読み込めるようになります！</p>
<div id="attachment_917" class="wp-caption alignnone" style="width: 310px"><a title="自動的に使える！" href="http://utweb.jp/blog/wp-content/uploads/2010/10/63251d6e1ca21681db35b6288b5ca9f3.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/10/63251d6e1ca21681db35b6288b5ca9f3-300x178.png" alt="快適すぎて死ぬｗｗｗ！" title="自動的に使える！" width="300" height="178" class="size-medium wp-image-917" /></a><p class="wp-caption-text">快適すぎて死ぬｗｗｗ！</p></div>
<p>他の環境だとクラスパスの設定とかしないといけないかもしれないですが、本来はひよこ的には「クラスパスって何？」ってところから記事を書きたいところなのですが今回の記事ではそれは割愛して、まあ他の環境でよくわからない場合は本番開発用flaと同じフォルダにswcファイルも入れておけば同じような感じにはなるかと思います。</p>
<h3>まじで便利なコンポーネント連携！</h3>
<p>さてさて、ここまでは普通にswc書き出しとの連携なんですが、Progressionが凄いのはここからなんです。</p>
<p>とちょっとそのまえにProgressionのAddChildコマンドについて少しお話を…。</p>
<p>FlashのActionScript3では、表示オブジェクトを画面上に入場/退場させる命令としてaddChildとremoveChildがあります。<br />
Progressionではそれをさらに便利にしたjp.progression.commands.displayパッケージがあって、ようはわかりやすく言うとAddChildコマンドやRemoveChildコマンドっちゅうのがあります。<br />
（他にもAddChildAtコマンドやRemoveAllChildrenなどなどいろいろ便利なコマンドもありますが、ややこしくなるのでこの記事では一律AddChildコマンド、RemoveChildコマンドと呼ぶことにします）<br />
ただ便利なだけでなく、Progression側で何が表示されてて何が退場していったのかの管理とか、それこそ重なり順とか、表示されたときに実行される処理とか、かなりProgressionの根幹に関わる処理が、このAddChild系コマンドの実行されたタイミングで行われています（いるような気がします）。<br />
なのでAddChildコマンドを使わずにaddChildだけで表示した場合、これがProgressionが管理しきれない表示オブジェクトとなってしまうので、使ってる経験上こういうのが思いがけずちょっとしたトラブルを招くことが多いです。</p>
<p>Progression始めた人で、僕が個人的にはまりやすいなと思うのが、この部分なので、例えばCastSpriteやCastMovieClip系の表示オブジェクトをAddChildコマンド経由せずにふつうにflashの addChildで表示させてしまってatCastAddedが正しく実行されないなどのミスで戸惑っている人がいるんじゃないかなと思っています。</p>
<p>swc連携に限ったことではないですが、Progressionでは特に初心者の場合でAddChildコマンドが何しちょるのかようわからん、といった場合はパフォーマンスを稼ぐなどの特別な理由がない限りはaddChildは使わずほぼ全てAddChildコマンドを使うようにしよう！と決めておくとそこらへんのミスが減るんじゃないかと僕は思います。</p>
<p>で、少し脱線したんで本題に戻りますが、とにかく<strong>ProgresisonのAddChild系コマンド、RemoveChild系コマンドはコンポーネントとも連携が利く</strong>ので、ここからが本領発揮です。</p>
<p>Flashの強力なタイムライン機能を活かしてInOutMovieコンポーネントでわしわしアニメーション描くもよし！</p>
<div id="attachment_919" class="wp-caption alignnone" style="width: 310px"><a title="InOutMovieコンポーネント" href="http://utweb.jp/blog/wp-content/uploads/2010/10/4b6b4a199c7c595116aa3c4e9c835218.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/10/4b6b4a199c7c595116aa3c4e9c835218-300x191.png" alt="複雑なアニメーションもInOutMovieコンポーネントで思いのまま！" title="InOutMovieコンポーネント" width="300" height="191" class="size-medium wp-image-919" /></a><p class="wp-caption-text">複雑なアニメーションもInOutMovieコンポーネントで思いのまま！</p></div>
<p>ボタンなんかもRollOverButtonコンポーネントでさくさく！</p>
<div id="attachment_920" class="wp-caption alignnone" style="width: 310px"><a title="RollOverButtonコンポーネント" href="http://utweb.jp/blog/wp-content/uploads/2010/10/40bde7fe2c065055784fb82c79febede.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/10/40bde7fe2c065055784fb82c79febede-300x196.png" alt="どうせswcの中に素材としてボタン置いてるんだからついでにコンポーネントでボタン化までしておいてしまえ！" title="RollOverButtonコンポーネント" width="300" height="196" class="size-medium wp-image-920" /></a><p class="wp-caption-text">どうせswcの中に素材としてボタン置いてるんだからついでにコンポーネントでボタン化までしておいてしまえ！</p></div>
<h3>new AddChildするだけの簡単なお仕事</h3>
<p>あとはリンケージさえ設定してもらえれば、あとはプログラム側ではnew AddChildするだけの簡単なお仕事です。本当に。<br />
ビジュアルとロジックの分離は当制作所でも必須課題なのですが、Progression導入でそこらへんも本当にやりやすくなりました。タイムラインでしっかり作り込みたいところはタイムラインで作って、Tweenerなどでぴっちり制御したいところはロジックを作って、それらの違いを意識せずに最終的に扱えるようになるのは、本当にパワフルな開発環境を整えることが出来ます。</p>
<p>この記事中、ほとんどが僕の無駄口で長くなってしまいましたが、実際はやってみると本当に簡単なので是非試してみて下さいね！<br />
デメリットとしては先ほど書いたように今まで慣れ親しんだflaファイルをただの素材置き場としてしか使わなくなる事への心の抵抗くらいですが、最終的にはFlashのタイムラインというパワフルな環境を十二分に発揮できるスタイルに移行するわけなので、かえって以前よりFlashCS5の出番が増えるようになります。<br />
「もっとこうしたほうがいいよ」とか「うちではこうしてるよ」ですとか、「うそばっかりやんけ！」などのご意見ありましたらコメント下さいね。<br />
最近「ブログ読んでます」という反応が少しだけ得られるようになって、本当嬉しいです。</p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/910/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/910" />
	</item>
		<item>
		<title>【Flash】タイムラインですごくゆ～～っくり動かしたい時のTIPS</title>
		<link>http://utweb.jp/blog/archives/881</link>
		<comments>http://utweb.jp/blog/archives/881#comments</comments>
		<pubDate>Fri, 06 Aug 2010 08:56:45 +0000</pubDate>
		<dc:creator>頼子</dc:creator>
				<category><![CDATA[実験]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[アニメーション]]></category>
		<category><![CDATA[タイムライン]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=881</guid>
		<description><![CDATA[あまりニーズはないかと思われますが、例えばアハ体験のように対象物を数十秒かけて、ゆっくりじんわりと動かす時のtipsです。 まずはサンプルをご覧下さい。

このサンプルでは30fpsで30秒かけてちょうど30px移動して [...]]]></description>
			<content:encoded><![CDATA[<p>あまりニーズはないかと思われますが、例えばアハ体験のように対象物を数十秒かけて、ゆっくりじんわりと動かす時のtipsです。 まずはサンプルをご覧下さい。</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="90" height="80" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://utweb.jp/blog/wp-content/uploads/flash/smoose2.swf" /><embed type="application/x-shockwave-flash" width="90" height="80" src="http://utweb.jp/blog/wp-content/uploads/flash/smoose2.swf"></embed></object></p>
<p>このサンプルでは30fpsで30秒かけてちょうど30px移動しています。</p>
<div id="attachment_888" class="wp-caption alignnone" style="width: 310px"><a title="cap_0806_02" href="http://utweb.jp/blog/wp-content/uploads/2010/08/cap_0806_02.jpg"><img src="http://utweb.jp/blog/wp-content/uploads/2010/08/cap_0806_02-300x38.jpg" alt="ただトゥイーンさせているだけという素材そのものを活かした作りになっております。" title="cap_0806_02" width="300" height="38" class="size-medium wp-image-888" /></a><p class="wp-caption-text">ただトゥイーンさせているだけという素材そのものを活かした作りになっております。</p></div>
<p>・・・なんですが1pxごとにしか進まないような感じで、カクついた動きになってしまっているのがお分かりになりますでしょうか。 これを解消するためにはこの為だけにAS仕込むか、別途FLV化させるか、と悩んでいたのですが、とっても簡単な方法で解決することができました。</p>
<p><span id="more-881"></span><br />
みなさんもよくご存知の「<strong>スムージング</strong>」。</p>
<div id="attachment_887" class="wp-caption alignnone" style="width: 310px"><a title="「スムージング」" href="http://utweb.jp/blog/wp-content/uploads/2010/08/cap_0806.jpg"><img src="http://utweb.jp/blog/wp-content/uploads/2010/08/cap_0806-300x102.jpg" alt="ライブラリ上のビットマップを右クリック→「プロパティ」にあるコレ！" title="「スムージング」" width="300" height="102" class="size-medium wp-image-887" /></a><p class="wp-caption-text">ライブラリ上のビットマップを右クリック→「プロパティ」にあるコレ！</p></div>
<p>これをポチっとチェックをいれるだけでほらこの通り。</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="90" height="80" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://utweb.jp/blog/wp-content/uploads/flash/smoose1.swf" /><embed type="application/x-shockwave-flash" width="90" height="80" src="http://utweb.jp/blog/wp-content/uploads/flash/smoose1.swf"></embed></object></p>
<p>画像のジャギー解消だけに有効なのかと思ったら、こんな使い方もあったんですね。 よく使ってた機能なだけにびっくりしました。</p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/881/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/881" />
	</item>
		<item>
		<title>Progression 4 Flashフレームワーク入門ノート発売！</title>
		<link>http://utweb.jp/blog/archives/834</link>
		<comments>http://utweb.jp/blog/archives/834#comments</comments>
		<pubDate>Mon, 19 Jul 2010 11:47:19 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[お知らせ]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Progression]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=834</guid>
		<description><![CDATA[著者である大重美幸様より、2010/7/17に発売したばかりの「詳細！Progression 4 Flashフレームワーク入門ノート」（クリック先はアマゾンで買う）を献本いただきました！
著者である大重様、発送いただいた [...]]]></description>
			<content:encoded><![CDATA[<p>著者である大重美幸様より、2010/7/17に発売したばかりの「<a href="http://amzn.to/cV5b54" target="_blank">詳細！Progression 4 Flashフレームワーク入門ノート</a>」（クリック先はアマゾンで買う）を献本いただきました！</p>
<div id="attachment_836" class="wp-caption alignnone" style="width: 234px"><a title="Prog4入門ノート！" href="http://amzn.to/cV5b54" target="_blank"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/prog_bok-224x300.jpg" alt="俗に言う「大重本」　この写真はクリックするとアマゾンへ" title="Prog4入門ノート！" width="224" height="300" class="size-medium wp-image-836" /></a><p class="wp-caption-text">俗に言う「大重本」この写真はクリックするとアマゾンへ</p></div>
<p>著者である大重様、発送いただいたソーテック社様、この場をお借りしてお礼申し上げます。</p>
<p>献本していただくなんていう体験、僕自身の人生の中でそうあることでもないのでものすごくうれしいです。ましてやAS3を覚えるときに相当お世話になった大重さんからとなっては、これはもう本気でレビューするしかありません！！<br />
僕も業務フレームワークとしてProgressionをがっつり使っている人間の一人として、また実際に自分が入門の時にどこでつまづいたのかとかも思い出しながら、かなり突っ込んでレビューしたいと思います！<br />
考えてみれば本のレビューなんてそんなにやったことがなくて、もしかしたらかなりとんちんかんなことになるかもしれませんが、少しでも皆さんのほんの購入時の参考になればと思います。がんばります。</p>
<p><span id="more-834"></span></p>
<h3>最初の印象</h3>
<p>基本的には、AS3入門書で有名な「詳細！ActionScript3.0入門ノート」と雰囲気が一緒で前ページ青と黒の二色刷。<br />
チャプター1でProgression4の基礎をひととおり習った後は、Proression4をフルパワーで使うためにほぼすべてのチャプターでクラススタイルでの説明になります。<br />
なのでメインとなる読者の対象としては「詳細！ActionScript3.0入門ノート」などでAS3をある程度入門した方、といったところでしょうか。<br />
技術書である以上、専門用語やスクリプトもよく出てきますが同じように画面写真も豊富なので、特に難解な印象は受けません。<br />
多くの人が入門書を手にするとき「この本は自分のレベルにみあった入門書か」を気にすると思いますが、何をもって簡単そうとか難しそうと印象するのかは人それぞれですので、このへんは先もいったようにAS3入門ノートの雰囲気と一緒なのでそちらを読まれたことがある方はそれを参考にするといいでしょう。</p>
<div id="attachment_839" class="wp-caption alignnone" style="width: 310px"><a title="prog_book_0" href="http://utweb.jp/blog/wp-content/uploads/2010/07/prog_book_0.jpg"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/prog_book_0-300x224.jpg" alt="入門ノートの名に恥じない、細やかな操作手順。こっから先の写真はクリックすると拡大します。" title="prog_book_0" width="300" height="224" class="size-medium wp-image-839" /></a><p class="wp-caption-text">入門ノートの名に恥じない、細やかな操作手順。こっから先の写真はクリックすると拡大します。</p></div>
<h3>目次ごとの感想</h3>
<p>全部でチャプター７まであります。</p>
<ul>
<li>チャプター1：Progression4の基礎
<ul>
<li>Progressionとは何なのかの説明に始まり、インストールから各プロジェクトの作成方法、さらにはコンポーネントスタイル、タイムラインスタイル、クラススタイルの3つのスタイルで実際にHelloWorldを表示させるまでが説明されています。<br />
このチャプターでひとまず全体にわたって動かしてみて、徐々に順を追ってこれから学習を進めるという構成になっているようです。</li>
</ul>
</li>
<li>チャプター2：シーンツリーの基本パターン
<ul>
<li>Progressionの肝のひとつである「シーン」についてかなり詳細な説明がされています。<br />
シーンの概念は、HTMLでいう「ファイル（ページ）」と同じく場面を構成する1単位なわけです。ほとんどの場合シーン構造がそのままサイトマップになりますので、このシーンの概念にチャプターをまるまる一つ費やして説明されているのはかなりわかりやすいと思いました。</li>
</ul>
</li>
<li>チャプター3：シーンの移動とシーンイベント
<ul>
<li>シーンの構造が理解できたら、次はいよいよシーンの移動を行います。<br />
このへんからスクリプトの記述が多くなってきます。<br />
<div id="attachment_844" class="wp-caption alignnone" style="width: 310px"><a title="prog_book_1" href="http://utweb.jp/blog/wp-content/uploads/2010/07/prog_book_1.jpg"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/prog_book_1-300x224.jpg" alt="ぱっと見でくじけそうになる人も！" title="prog_book_1" width="300" height="224" class="size-medium wp-image-844" /></a><p class="wp-caption-text">ぱっと見でくじけそうになる人も！</p></div><br />
もしかしたらスクリプトに慣れていない方はこのへんから難しく感じるかもしれません。でも、大重さんの本（というかプログラミング技術書全般）には読み方のコツがあって、長いスクリプトの中でも重要なのは1行だけだったりするので、あとのほうにその重要な1行を抜き出してちゃんと説明されてあるんです。<br />
<div id="attachment_846" class="wp-caption alignnone" style="width: 310px"><a title="prog_book_2" href="http://utweb.jp/blog/wp-content/uploads/2010/07/prog_book_2.jpg"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/prog_book_2-300x224.jpg" alt="ちゃんと重要なところを抜き出して説明してくれる！" title="prog_book_2" width="300" height="224" class="size-medium wp-image-846" /></a><p class="wp-caption-text">ちゃんと重要なところを抜き出して説明してくれる！</p></div><br />
なので長いスクリプトが苦手な方も、そこを読み飛ばして後から書かれてある重要なところだけを注目していけばいいのでそういう読み方をすれば安心です。<br />
シーンの移動に関してですが、前章でわざわざシーン構造だけを一章使って学習したことが活きてきます。シーン構造さえわかってしまえばProgressionは「前のシーンへ」「次のシーンへ」「上のシーンへ」「いきなり孫のシーンへ」などという便利なシーン移動がいろいろとできるので、この章はその移動方法が書かれただけですので一見スクリプトが多くてややこしいそうに見えますが、コツさえわかってしまえば易しいと思います。</li>
</ul>
</li>
<li>チャプター4：コマンドとコマンドリスト
<ul>
<li> ここから本の厚み的に後半に向かいます。<br />
コマンドもProgressionの機能の中核をなす技術の一つですが（ちなみにほかには、さっきやった「シーン」と次にやる「キャスト」）、配列を用いたSerialListとParalelListの入れ子など、かなり実践的な機能の紹介まで踏み込んで説明されています。<br />
あと173ページの虫がかわいいです。</li>
</ul>
</li>
<li>チャプター5：キャストオブジェクトを利用する
<ul>
<li>この章は全体から見るとさらっと流されているようにも見えますが、先ほどもいいましたようにProgression三本柱のひとつ（キャスト）について学習できます。<br />
僕が特に重要だと感じたのが、本で言うと185ページあたりに実際のFlashのムービークリップからCastMovieClipを作るやり方でして、これを知らないと多くの人が入門できたはいいけど実際のサイト作るにはどうしたらええのん？ってなっちゃうと思うんです。なのでこの説明からもこの本がより実践向けに書かれてあるんだなあと重ね重ね感じたのでした。</li>
</ul>
</li>
<li>チャプター6：外部ファイルの読み込みとプリロード
<ul>
<li> FlashのActionScriptの中でも特に難しいと感じる人が多いのが「外部ファイルの読み込み」だと思うんですが、Progressionはそこを比較的簡単に扱うことができます。<br />
簡単とはいっても、Progressionなりの書き方を覚えないといけないのはそれはもう仕方がないので、この章で勉強します。<br />
一括読み込みやリソース管理や先読み機能など、覚えるのも難しいけど自分で作るともっと難しい、つまり是非とも覚えて使いこなしたいかなり便利な機能もあります。<br />
こういった機能を、じっくり読みながら学習が進められるのも本ならではですね。</li>
</ul>
</li>
<li>チャプター7：さらに進んだ使い方
<ul>
<li>フルフラッシュサイトのディープリンク機能についてのつまづきやすい点の説明やカスタムコマンドなど基本的な機能をさらに突っ込んだ使い方からSWFをそのままシーンとして読み込む、リキッドレイアウトなどの夢のような機能までひととおり学習できます。<br />
ここまで読めば、もうProgression4の機能はひととおり学習したと言えますし、実際にFlashサイト制作に投入してもかなりの部分で応用できるようになるでしょう。</li>
</ul>
</li>
</ul>
<h3>総評</h3>
<p>気になった点としましては、たとえば82ページなどの「contentloaderInfo.bytesTotal」と「contentloaderInfo.bytesLoaded」など、説明ページの英数字が<del datetime="2010-07-19T12:11:35+00:00">半角全角がどちらかに統一されていないところでした。</del>文字の間隔がそれぞれ違うので少し見づらい点でした。見づらいのは説明文だけで、見たところソースコードなどは大丈夫だったので、問題はないんですがちょっと気になるな、というところです。<br />
<span style="font-size:0.9em">※大重さんより、半角全角統一されていないんじゃなくて、半角で統一されているけど均等割り付けで文字幅が広がっているとの事でした。長い単語を途中で改行しないようにするとどうしてもこうなってしまうらしいです。</span><br />
それ以外に関しては先ほどから繰り返し言ってきた言葉なんですが、この本はProgression4の機能紹介だけにとどまらず、実際に使う側の立場としてどう学習していけば本当にFlashサイトが作れるのかを突き詰めた「<strong>かなり実践的で使える参考書</strong>」だと感じました。<br />
僕の周りでも「Progression4の機能や出来ることについてはわかったし、今までも本やネットで基本的な作り方も学べたけど具体的に自分のFlashサイトでどう適用して良いのかわからない」といった声を多く聞きました。「<a href="http://amzn.to/cV5b54" target="_blank">詳細！Progression 4 Flashフレームワーク入門ノート</a>」は機能紹介から一歩踏み込んだ、まさに使えるようになるための入門ノートとして最適ではないでしょうか。<br />
Flashの開発環境はCS3/CS4/CS5にまたがって対応している点もありがたいですね。<br />
今日からでもこの本読みながら学習したことを仕事に投入していきます！</p>
<p>最後に、僕自身がProgressionのファンであり大重さん本のファンでもあるので、こんな僕のつたないレビューですが皆さんの購入の判断にちょっとでもお役に立てれば幸いです。</p>
<p>あ、あと本の中身の写真に関しては著作権を侵害しないよう最大限配慮したつもりですが、もし至らない点などありましたらお知らせください。</p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/834/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/834" />
	</item>
		<item>
		<title>Progression4をいい感じにFlashBuilderで作業できるようにする</title>
		<link>http://utweb.jp/blog/archives/815</link>
		<comments>http://utweb.jp/blog/archives/815#comments</comments>
		<pubDate>Wed, 07 Jul 2010 15:01:29 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[FlashBuilder]]></category>
		<category><![CDATA[Progression]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=815</guid>
		<description><![CDATA[FlashBuilderはじめてみました。正宗です。
Progression4がFlashBuilderとの連携ができるようになっていたのがきっかけだったのと、あとFlashのコンパイル（パブリッシュ）がその都度グラフィ [...]]]></description>
			<content:encoded><![CDATA[<p>FlashBuilderはじめてみました。正宗です。</p>
<p>Progression4がFlashBuilderとの連携ができるようになっていたのがきっかけだったのと、あとFlashのコンパイル（パブリッシュ）がその都度グラフィックを書き出し直すので時間がかかるようになったのが嫌でグラフィックはあらかじめswc書き出ししておいてFlashBuilderからasだけをコンパイルできるようになったらいいなと思ったので、FlashBuilderを使いこなせるように勉強してみることにしました。</p>
<p>常々お伝えしているように、うちのFlash請負制作業務のほぼ100%をProgressionフレームワークを使用していますので、ProgressionとFlashBuilderがうまいこと連携できていないと困ります。いろいろ試してみてうまい感じに連携できるようになったので書いておきたいと思います。</p>
<p>あとFlashBuilderについての本や情報が多いですがだいたいがFlex技術者向けになっていて、MXMLとか僕もよくわからないのですが僕のやりたいFlash開発とは微妙に違う気がするので、Flash向けにFlashBuilderの設定方法なんかの情報があっても良いなーと思っていたので、今回の記事はProgressionとあわせて是非ともマスターしたい技術だと思います。</p>
<h3><span id="more-815"></span>先ずはFlashを立ち上げて</h3>
<p>最初はFlashを立ち上げてProgressionプロジェクトを作成するところからはじめます。</p>
<div id="attachment_816" class="wp-caption alignnone" style="width: 310px"><a title="新規プロジェクトを作成" href="http://utweb.jp/blog/wp-content/uploads/2010/07/d12d66eea7bc86d8b40dee99ab888a4a.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/d12d66eea7bc86d8b40dee99ab888a4a-300x76.png" alt="はじまりはいつもFlash" title="新規プロジェクトを作成" width="300" height="76" class="size-medium wp-image-816" /></a><p class="wp-caption-text">はじまりはいつもFlash</p></div>
<div id="attachment_817" class="wp-caption alignnone" style="width: 310px"><a title="クラススタイル" href="http://utweb.jp/blog/wp-content/uploads/2010/07/d2db931f0a9236b9238e0374210ea9e0.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/d2db931f0a9236b9238e0374210ea9e0-300x233.png" alt="種類：「クラス」にするのを忘れないで！" title="クラススタイル" width="300" height="233" class="size-medium wp-image-817" /></a><p class="wp-caption-text">種類：「クラス」にするのを忘れないで！</p></div>
<div id="attachment_818" class="wp-caption alignnone" style="width: 310px"><a title="FlashBuilderに対応させる" href="http://utweb.jp/blog/wp-content/uploads/2010/07/a0ad78e2cd8f01a66b01028beb29134d.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/a0ad78e2cd8f01a66b01028beb29134d-300x233.png" alt="「FlashBuilderに対応させる」のチェックも忘れるな！" title="FlashBuilderに対応させる" width="300" height="233" class="size-medium wp-image-818" /></a><p class="wp-caption-text">「FlashBuilderに対応させる」のチェックも忘れるな！</p></div>
<p>プロジェクトの設定で気をつけるところはここまでです。<br />
おもむろに「作成」ボタンを押すとしばらくしてProgressionプロジェクトが作成されるはずです。</p>
<div id="attachment_821" class="wp-caption alignnone" style="width: 310px"><a title="プロジェクトが作成された" href="http://utweb.jp/blog/wp-content/uploads/2010/07/82c4df06b28409daa3f1e12876f4d600.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/82c4df06b28409daa3f1e12876f4d600-300x184.png" alt="できたできたー！" title="プロジェクトが作成された" width="300" height="184" class="size-medium wp-image-821" /></a><p class="wp-caption-text">できたできたー！</p></div>
<p>プロジェクトが出来てしまえばもうFlashには用がありません（ひどい）。<br />
Flashはそのまま終了しましょう。</p>
<h3>ここからFlashBuilderで作業する</h3>
<p>ここから先はFlashBuilderで作業します。長年使い慣れたFlashを捨てて慣れないFlashBuilderを使っての作業になりますのでかなりドキドキします。</p>
<p>FlashBuilderのワークスペースの概念はおわかりでしょうか？<br />
もしまだでしたら今後FlashBuilderを使っていくにあたってワークスペースはよく切り替えることになるのでこの記事を読む前に「Eclipse ワークスペース」などで調べておく事をお勧めします。それ以前にFlashBuilderとEclipse との関係についても調べておいて損はありません。<br />
ワークスペースやEclipseについてよくはわかってないけど、手っ取り早くこの記事を読む場合、「<strong>とりあえずワークスペースとは作業フォルダを決める事なので、先ほどProgressionプロジェクトを作成したフォルダーの一階層上を選択しておけば良い</strong>」とだけ覚えておいてください。<br />
（僕の理解度もだいたいそのへんです）</p>
<blockquote><p><span style="color: #ff0000;"><strong> ※</strong>2010/11/10追記</span><br />
最近Dropboxで作業スペースを同期とってるんですが、ワークスペースをDropbox内に設定すると他のPCと同期をとったときにFlashBuilderのライセンス違反が起こるらしく、えらい大変なことになります。<br />
Dropboxなどで共有してる人は、プロジェクトファイルはDropbox上で、FlashBuilderのワークスペースは各PC固有のディレクトリで設定するのがお勧めです。</p></blockquote>
<p>ワークスペースを決めたら、先ほど作ったProgressionプロジェクトフォルダをFlashBuilderに登録します。</p>
<div id="attachment_823" class="wp-caption alignnone" style="width: 310px"><a title="Flexプロジェクトを開く" href="http://utweb.jp/blog/wp-content/uploads/2010/07/d871abcb461ba7b134548c47a5272bbc.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/d871abcb461ba7b134548c47a5272bbc-300x52.png" alt="ファイルメニューから開く" title="Flexプロジェクトを開く" width="300" height="52" class="size-medium wp-image-823" /></a><p class="wp-caption-text">ファイルメニューから開く</p></div>
<p>FlashBuilderのメニュー「ファイル」→「Flexプロジェクトを読み込み」を選びます。</p>
<div id="attachment_824" class="wp-caption alignnone" style="width: 310px"><a title="プロジェクトフォルダーを選ぶ" href="http://utweb.jp/blog/wp-content/uploads/2010/07/23a902f8711d84ba6da65c57dc94d6d5.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/23a902f8711d84ba6da65c57dc94d6d5-300x140.png" alt="プロジェクトフォルダーからさっき作ったフォルダを選ぶ" title="プロジェクトフォルダーを選ぶ" width="300" height="140" class="size-medium wp-image-824" /></a><p class="wp-caption-text">プロジェクトフォルダーからさっき作ったフォルダを選ぶ</p></div>
<div id="attachment_825" class="wp-caption alignnone" style="width: 148px"><a title="読み込み" href="http://utweb.jp/blog/wp-content/uploads/2010/07/bb82949cf87d656aef993ac263abbeb0.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/bb82949cf87d656aef993ac263abbeb0-138x300.png" alt="うまく読み込めた！" title="読み込み" width="138" height="300" class="size-medium wp-image-825" /></a><p class="wp-caption-text">うまく読み込めた！</p></div>
<p>上手く読み込めました！</p>
<p>ただ、ファイル構成をよくよくみてみると、srcフォルダにあるはずのflaファイルがbin-debugフォルダにもコピーされるんですね。このままではまずいですよね。</p>
<p>どうしたらいいかというと解決方法は簡単で、srcフォルダにあるflaファイルを削除すればいいんです。<br />
index.fla と preloader.fla の二つを削除します。</p>
<p>で、Progressionプロジェクトを作った時に自動的に「Index.as」が「bin-debug/index.swf」にパブリッシュされるようにFlashBuilderプロジェクトを設定してくれているんですが、同じように「Preloader.as」ファイルを「bin-debug/preloader.swf」として書き出すようにFlashBuilderプロジェクトを設定し直す必要があります。</p>
<p>他にもFlashBuilderのみでパブリッシュできるようにFlashBuilderプロジェクトの設定をいろいろ変更しておきましょう。</p>
<h3>FlashBuilderプロジェクトの設定をいい感じに設定し直す</h3>
<p>FlashBuilderプロジェクトの設定を変更するには、プロジェクトそのものを右クリックして「プロパティ」を選びます。</p>
<div id="attachment_826" class="wp-caption alignnone" style="width: 269px"><a title="プロジェクトを右クリックで「プロパティ」" href="http://utweb.jp/blog/wp-content/uploads/2010/07/e614e993033d708aa8a01225093edcad.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/e614e993033d708aa8a01225093edcad-259x300.png" alt="プロジェクトを右クリックで「プロパティ」" title="プロジェクトを右クリックで「プロパティ」" width="259" height="300" class="size-medium wp-image-826" /></a><p class="wp-caption-text">プロジェクトを右クリックで「プロパティ」</p></div>
<div id="attachment_827" class="wp-caption alignnone" style="width: 310px"><a title="Flexコンパイラ" href="http://utweb.jp/blog/wp-content/uploads/2010/07/bdff880318ca258df7f18234c4aace5c.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/bdff880318ca258df7f18234c4aace5c-300x227.png" alt="Flexコンパイラでは「HTMLラッパーファイルの生成」のチェックを消す。Hey YO!" title="Flexコンパイラ" width="300" height="227" class="size-medium wp-image-827" /></a><p class="wp-caption-text">Flexコンパイラでは「HTMLラッパーファイルの生成」のチェックを消す。Hey YO!</p></div>
<p>「HTMLラッパーファイルの生成」の<strong>チェックを外す</strong>んですよ。つけるんじゃないですよ。</p>
<div id="attachment_828" class="wp-caption alignnone" style="width: 310px"><a title="Flexモジュールの追加" href="http://utweb.jp/blog/wp-content/uploads/2010/07/3e78bccb1e0b72508a3c4775c2480e21.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/3e78bccb1e0b72508a3c4775c2480e21-300x227.png" alt="Flexモジュールでは追加ボタンを押す" title="Flexモジュールの追加" width="300" height="227" class="size-medium wp-image-828" /></a><p class="wp-caption-text">Flexモジュールでは追加ボタンを押す</p></div>
<div id="attachment_829" class="wp-caption alignnone" style="width: 310px"><a title="モジュールの追加" href="http://utweb.jp/blog/wp-content/uploads/2010/07/3a0b69052ed28d1652683bfd9298cf46.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/3a0b69052ed28d1652683bfd9298cf46-300x169.png" alt="書き出されるswfファイル名の大文字小文字に気をつけて" title="モジュールの追加" width="300" height="169" class="size-medium wp-image-829" /></a><p class="wp-caption-text">書き出されるswfファイル名の大文字小文字に気をつけて</p></div>
<p>「モジュールの追加」画面で気をつける事と言ったら、通常「<strong>P</strong>reloader.as」からは「<strong>P</strong>reloader.swf」が書き出されようとするので、大文字小文字に気をつけることですね。index.htmlを書き換えたくないのであれば、ここで出力SWFのファイル名を「<strong>p</strong>reloader.swf」と小文字に直しておきましょう。<br />
モジュールSWFのサイズは「最適化しない」にしておきましょう。</p>
<p>これでFlashBuilderプロジェクトの設定は完了です。<br />
いろいろ警告が出るとは思いますが、警告文を良く読むとほとんどの方にとっては問題ないケースかと思われますので、理解して問題ないならOK連打で元の作業画面に戻りましょう。</p>
<div id="attachment_830" class="wp-caption alignnone" style="width: 154px"><a title="ファイルを一旦削除してみる" href="http://utweb.jp/blog/wp-content/uploads/2010/07/0f3cb4a2b65b1a51666b2508b0923be9.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/0f3cb4a2b65b1a51666b2508b0923be9-144x300.png" alt="選択したファイルを削除だ！" title="ファイルを一旦削除してみる" width="144" height="300" class="size-medium wp-image-830" /></a><p class="wp-caption-text">選択したファイルを削除だ！</p></div>
<p>あとはsrcのindex.fla 、preloader.fla、bin-debufのindex.swfとindex.fla、preloader.swfとpreloader.flaを削除してみましょう。</p>
<p>そしてFlashBuilderメニューの「プロジェクト」→「クリーン」で一回プロジェクトをやり直して、bin-debugフォルダにflaファイルが出来なくなって、さらにindex.swfとpreloader.swfが作られていればOKです！</p>
<p>あとはがんがん開発するのみ！よいProgression+FlashBuilderライフを！</p>
<h3>おまけ</h3>
<p>MacではFinderからswfを右クリックして「情報を見る」で</p>
<div id="attachment_831" class="wp-caption alignnone" style="width: 139px"><a title="情報を見る" href="http://utweb.jp/blog/wp-content/uploads/2010/07/c98eb53655efd7153d3991a2bdf764de.png"><img src="http://utweb.jp/blog/wp-content/uploads/2010/07/c98eb53655efd7153d3991a2bdf764de-129x300.png" alt="「このアプリケーションで開く」を設定" title="情報を見る" width="129" height="300" class="size-medium wp-image-831" /></a><p class="wp-caption-text">「このアプリケーションで開く」を設定</p></div>
<p>「このアプリケーションで開く」で Flash Player Debuggerを選んでおいてね。</p>
<h3>flaファイルは死んでしもうたん？</h3>
<p>このやり方ではindex.flaとpreloader.flaを大胆にも削除してしまうので、今後一切をasファイルで行わなければならなくなります。flaファイルは果たして使えないのでしょうか？</p>
<p>いいえ違います。</p>
<p>flaファイルはswc書き出しをするようにして、プロジェクトフォルダのlibsフォルダに突っ込むようにしましょう。<br />
InOutMovieコンポーネントなどを使ったMCをリンケージ書き出ししておけば、「タイムラインを上手く使いつつ爆速コーディング可能な」Progression4+FlashBuilderというなかなか厨房臭いほど最強なコーディング環境が整うかと思います。</p>
<p>これはかなり万人向けな便利スタイルですので、また今後是非とも掘り下げて紹介したいとおもいますが、swcを駆使してうまいことFlashBulderとFlashとの両立スタイルも研究していきましょう！</p>
<h5>※2010/10/27追記</h5>
<p>さらにswcを駆使して使う方法はこちらの記事に書きました。<br />
<a href="http://utweb.jp/blog/archives/910">SWC+Progressionで快適コーディング生活はじまる！</a></p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/815/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/815" />
	</item>
		<item>
		<title>jQuery,ActionScript,Progressionで関数を登録する際に引数を渡す</title>
		<link>http://utweb.jp/blog/archives/789</link>
		<comments>http://utweb.jp/blog/archives/789#comments</comments>
		<pubDate>Sat, 12 Jun 2010 04:47:53 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=789</guid>
		<description><![CDATA[子供時代は痩せてたので口の悪い上級生から「ホネホネロック」とからかわれていましたが、その呼ばれ方、けっこう気に入ってました。正宗です。
JavaScriptでもActionScriptでも、関数を登録する場面ってけっこう [...]]]></description>
			<content:encoded><![CDATA[<p>子供時代は痩せてたので口の悪い上級生から「ホネホネロック」とからかわれていましたが、その呼ばれ方、けっこう気に入ってました。正宗です。</p>
<p>JavaScriptでもActionScriptでも、関数を登録する場面ってけっこうよくあって、ActionScriptでいえば特にaddEventListenerですね。そんなときに引数を渡したい事もあると思うんです。<br />
その方法を書いておきたいと思います。<br />
<span id="more-789"></span></p>
<h3>jQuery（JavaScript）の場合</h3>
<pre class="javascript">jQuery<span style="color: #66cc66;">&#40;</span> <span style="color: #3366CC;">'#hogehoge'</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">load</span><span style="color: #66cc66;">&#40;</span> <span style="color: #3366CC;">'nanika.html'</span>, myFunc <span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">function</span> myFunc<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span> <span style="color: #3366CC;">'こんにちは'</span> <span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre>
<p>こういうやつのmyFuncに引数を渡したいとき。</p>
<pre class="javascript">jQuery<span style="color: #66cc66;">&#40;</span> <span style="color: #3366CC;">'#hogehoge'</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">load</span><span style="color: #66cc66;">&#40;</span> <span style="color: #3366CC;">'nanika.html'</span>, myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #3366CC;">'こんにちは'</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
<span style="color: #003366; font-weight: bold;">function</span> myFunc<span style="color: #66cc66;">&#40;</span> argment <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
		<span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>argment<span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre>
<p>渡され先でreturn functionするのがコツです。コツなのです！</p>
<h3>ActionScriptの場合</h3>
<p>どんどんいきましょう</p>
<pre class="actionscript">_mc.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> MouseEvent.<span style="color: #006600;">CLICK</span>, __click__<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">'クリックされたよ'</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
functioin __click__<span style="color: #66cc66;">&#40;</span> argment <span style="color: #66cc66;">&#41;</span>:<span style="color: #000000; font-weight: bold;">Function</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:MouseEvent <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> argment <span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre>
<h3>Progressionの場合</h3>
<p>こういう書き方が出来るってことはProgressionのaddCommand内でも使えるはず！</p>
<pre class="actionscript"> <span style="color: #000000; font-weight: bold;">new</span> SerialList<span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">null</span>,
	myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">'コマンドにFunctionを登録するときにも引数がわたせる'</span> <span style="color: #66cc66;">&#41;</span>,
	myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">'どんどん渡そう'</span> <span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#41;</span>;
<span style="color: #000000; font-weight: bold;">function</span> myFunc<span style="color: #66cc66;">&#40;</span> argment <span style="color: #66cc66;">&#41;</span>:<span style="color: #000000; font-weight: bold;">Function</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> argment <span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre>
<h3>何故こうなるの？</h3>
<p>書き方だけわかっても、理屈がわからないと気持ち悪いですよね。一見意味不明な書き方にも見えるし、まる覚えしないと次もういちど書けないようでは身につけたとは言えません。<br />
僕なりに解釈した考え方を書いていこうと思います。<br />
ちなみに型が明記できるActionScriptで書いていきます。</p>
<h4>function は（）で実行される</h4>
<pre class="actionscript"><span style="color: #000000; font-weight: bold;">function</span> myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">'hogehoge'</span> <span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #808080; font-style: italic;">//関数を実行</span>
myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span>;</pre>
<p>当たり前のルールなんですが、一度作った関数は、その関数の名前のお尻に() 「括弧」を付ける事で実行されます。<br />
ということは逆に言うと括弧を付けないと実行されないという事です。</p>
<h4>関数を実行せずとりあえず登録だけしておく</h4>
<pre class="actionscript"><span style="color: #000000; font-weight: bold;">function</span> myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:MouseEvent <span style="color: #66cc66;">&#41;</span> :<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">'クリックされました'</span> <span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
_mc.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> MouseEvent.<span style="color: #006600;">CLICK</span>, myFunc <span style="color: #66cc66;">&#41;</span>;</pre>
<p>こういう書き方をしている場合、ようは「マウスクリックされたときにmyFuncっていう関数を実行してね」と書いている訳です。</p>
<pre class="actionscript">_mc.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> MouseEvent.<span style="color: #006600;">CLICK</span>, myFunc<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//まちがい</span></pre>
<p>こう書いちゃうと、マウスクリックの時に実行してほしい関数なのに今実行してしまいます。<br />
つまり、「あとで実行したい関数は、名前だけ登録しておく」のが正解なわけで、通常はそう書いている訳ですね。</p>
<h4>関数の「戻り値」をおさらいしよう</h4>
<p>本来関数を登録だけしておくはずの場所で、あえて実行する訳ですから通常だとエラーなわけです。間違いです。そこをあえて実行してみた場合、スクリプトの世界ではどのような事が行われるでしょうか。<br />
その謎を考える前に関数の「戻り値」というやつをもう一回おさらいしてみます。</p>
<pre class="actionscript"><span style="color: #000000; font-weight: bold;">function</span> myFunc1<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span> :<span style="color: #0066CC;">int</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">100</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000000; font-weight: bold;">var</span> a:<span style="color: #0066CC;">int</span> = myFunc1<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//変数aには数字の100が入る</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> myFunc2<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span> :<span style="color: #0066CC;">String</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #ff0000;">&quot;こんにちは&quot;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000000; font-weight: bold;">var</span> b:<span style="color: #0066CC;">String</span> = myFunc2<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//変数bには文字の「こんにちは」が入る</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> myFunc2<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span> :<span style="color: #0066CC;">Object</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#123;</span> test:<span style="color: #ff0000;">&quot;ごはんおいしいです&quot;</span> <span style="color: #66cc66;">&#125;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000000; font-weight: bold;">var</span> c:<span style="color: #0066CC;">Object</span> myFunc3<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//変数cにはObjectが入る</span></pre>
<h4>関数が関数を返す</h4>
<p>結論から言うと、イベントリスナーやコールバック関数など、「関数を今実行せず登録だけしておく」場所で「あえて実行させてみる」わけですから、そこで実行された関数が関数を返してしまえばいい、とある頭のいい誰かが考えた訳ですね。</p>
<pre class="actionscript"><span style="color: #000000; font-weight: bold;">function</span> myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span> :<span style="color: #000000; font-weight: bold;">Function</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">1</span><span style="color: #cc66cc;">+1</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000000; font-weight: bold;">var</span> f:<span style="color: #000000; font-weight: bold;">Function</span> = myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//変数fに関数が入る</span>
f<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//関数が実行され1+1の計算結果が表示される</span></pre>
<p>たとえばイベントリスナーの第二引数には</p>
<pre class="actionscript"><span style="color: #000000; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:Event<span style="color: #66cc66;">&#41;</span> :<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #66cc66;">&#125;</span></pre>
<p>この形が入れば言い訳ですから、</p>
<pre class="actionscript"><span style="color: #000000; font-weight: bold;">function</span> myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span> :Functioin <span style="color: #66cc66;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:Event<span style="color: #66cc66;">&#41;</span> :<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #66cc66;">&#125;</span>;
<span style="color: #66cc66;">&#125;</span></pre>
<p>こういう形を返す関数を作っておいて</p>
<pre class="actionscript">_mc.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> Event.<span style="color: #006600;">ENTER_FRAME</span>, myFunc<span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;</pre>
<p>こういうふうにイベントリスナーの登録時にはmyFuncを実行してしまえば、関数が返ってくるので、その返ってきた関数のほうをイベントリスナーは登録してくれる、というのがこの書き方の謎の正体です。</p>
<p>はじめに発見した人はそうとう頭良いと思います。ぼくはこの理屈を発見したとき芸術性すら感じました。<br />
実用性もさることながら、こういった動作の合理性を考えていくのもかなり楽しいです。昔中学校の技術の時間にエンジンの仕組みを勉強して以来、その動作の合理性に魅せられて車オタクバイクオタクというよりはエンジンオタクになったのを思い出します。</p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/789/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/789" />
	</item>
		<item>
		<title>Progressionのリファレンスの場所</title>
		<link>http://utweb.jp/blog/archives/784</link>
		<comments>http://utweb.jp/blog/archives/784#comments</comments>
		<pubDate>Fri, 11 Jun 2010 01:06:26 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=784</guid>
		<description><![CDATA[小ネタの備忘録なんですが、Progressionをインストールしたときに自動的にリファレンスもローカルに保存されます。リファレンスは読み方さえわかれば、非常に有用な情報源なのでブックマークしておくと何かと便利です。
ちな [...]]]></description>
			<content:encoded><![CDATA[<p>小ネタの備忘録なんですが、Progressionをインストールしたときに自動的にリファレンスもローカルに保存されます。リファレンスは読み方さえわかれば、非常に有用な情報源なのでブックマークしておくと何かと便利です。<br />
ちなみにアドレスの「Flash%20CS5」と なっている部分はFlashCSのバージョンです。この場合はCS5の例です。</p>
<p>Windowsの場合（vista）<br />
file:///C:/Users/＜ユーザー名＞/AppData/Local/Adobe/Flash%20CS5/ja/Configuration/Progression/Help/ASDoc/index.html</p>
<p>Macの場合（Snow Leopard）<br />
file:///Users/＜ユーザー名＞/Library/Application%20Support/Adobe/Flash%20CS5/ja_JP/Configuration/Progression/Help/ASDoc/index.html</p>
<p>あわせてActionScriptそのもののリファレンスのローカルの場所を探す場合には次の記事も参考にしてみてください。<br />
<a href="http://utweb.jp/blog/archives/247">ActionScriptリファレンスをダウンロードする</a></p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/784/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/784" />
	</item>
	</channel>
</rss>

