<?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>Wed, 16 May 2012 04:06:09 +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>FlashCS6でProgressionが使えるか試してみた</title>
		<link>http://utweb.jp/blog/archives/1533</link>
		<comments>http://utweb.jp/blog/archives/1533#comments</comments>
		<pubDate>Fri, 11 May 2012 16:08:27 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=1533</guid>
		<description><![CDATA[正宗です。ついに出ましたね。Adobe Creative Suite6。月額5千円（CS3以降を持ってる人は最初の一年間は月額3千円のキャンペーンもやってます）で使えるAdobe Creative Cloudという目新し [...]]]></description>
			<content:encoded><![CDATA[<p>正宗です。ついに出ましたね。<a href="http://www.adobe.com/jp/products/creativesuite.html" target="_blank">Adobe Creative Suite6</a>。<br />月額5千円（CS3以降を持ってる人は最初の一年間は月額3千円の<a href="https://creativecloud-specialoffer.adobe.com/special-offer/?loc=ja_JP&amp;cc=jp" target="_blank">キャンペーンもやってます</a>）で使える<a href="http://www.adobe.com/jp/products/creativecloud.html" target="_blank">Adobe Creative Cloud</a>という目新しいライセンス形態も話題となり、購入を検討しているクリエイターや企業も多いのではないでしょうか？<br />ちなみに私は悩んだあげくCreative Cloudにしました。<br />うちの制作所単位では、 <a href="http://www.adobe.com/jp/products/creativesuite/design-web-premium.html" target="_blank">Design &amp; Web Premium</a>+<a href="http://www.adobe.com/jp/products/aftereffects.html" target="_blank">After Effects</a>あたりがあれば十分なんですが、特にAfter Effectsはそんなに最新版買ってもまだ使いこなせない機能のほうが多いですし、さらに私個人としては<a href="http://www.adobe.com/jp/products/flash.html" target="_blank">Flash</a>、<a href="http://www.adobe.com/jp/products/flash-builder.html" target="_blank">FlashBuilder</a>、<a href="http://www.adobe.com/jp/products/fireworks.html" target="_blank">Fireworks</a>、<a href="http://www.adobe.com/jp/products/dreamweaver.html" target="_blank">Dreamweaver</a>、とこの4つさえガチ最新であれば業務のほぼ全ては作業可能なため自分のAdobeIDでCreative Cloudにする必要があるのかと言われれば実はあんまりないんですよね。<br />なので私はWeb Premiumのアップグレードライセンスを購入して、実際により多くのAdobe製品を使いこなしているうちのデザイナのみCreative Cloudライセンスにする方法のほうが合理的なので、それに加えて自分がCreative Cloudにする必要があるのかをずっと悩んでしました。</p>
<p>でも、私もCreative Cloudにしちゃいました。理由としてはやっぱり新しいもの好きなので最新機能が使いこなせなくてもいつまでも最新版を追いかけていたいことと、あこがれのAdobe製品使い放題！なことと、実際問題としてAdobe製品はうちのソフトウェア資産なのでそれが何世代までアップデート出来るのかなど面倒な運用管理を考える暇があればそのぶん明確に常にソフトウェアを最新版に保てる今回のライセンス形態はかなり興味があったからだというのが大きいです。<br />何より、クリエイティブ系ツールのアップデートってワクワクするんですよね。自分の腕が上がったわけではないのに、何かこう、新しいもの生み出せそうで。</p>
<p>というわけで、 さくっとCreative Cloudを購入しましてですね。一番気になるのはやはりFlashCS6でもProgressionが使えるのか！？です。<br />結論から言いますと使えました。<br /><span style="text-decoration: line-through;">全く、何も、問題なく、普通に、使えましたよ。</span></p>
<p><span style="text-decoration: line-through;">以下、ごくごく普通にインストールメモです。</span></p>
<hr />
<h3>2012/5/12追記</h3>
<p>すいません、現時点で私の環境で少し問題が発生しました。記事の最後に追記しています。</p>
<hr /><span id="more-1533"></span>
<p>Adobe Creative CloudのFAQページにも載っていますが、FlashCS6はCreative Cloudに入って無くても、つまり今まで通りソフトウエア単品を購入しても、他のCS製品を購入しても、どちらでも使えます。</p>
<p>まずは自身の使い方に合わせたいずれかの購入方法でFlashCS6が正しくインストールされているのが前提で進めていきます。</p>
<p>最初に<a href="http://progression.jp/" target="_blank">Progressionのサイト</a>にいき、メニューからダウンロードを選んでください。</p>
<p><a href="http://progression.jp/ja/download/" target="_blank">ダウンロードページへの直接リンクはこちら</a>。</p>
<p>この記事を執筆時点ではまだFlashCS5用のダウンロードリンクがありますが、気にせずダウンロード。<br />きっと近々更新があると思います！ </p>
<p><img title="dl0.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/dl0.png" alt="ダウンロード" width="600" height="445" border="0" /></p>
<p><strong>Progression4 日本語版パッケージ</strong>と書かれてあるリンクをクリックするとダウンロードが始まると思います。</p>
<p><img title="dl_1.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/dl_1.png" alt="ダウンロードしたProgression" width="456" height="393" border="0" /></p>
<p>上のようなファイルがダウンロード出来ると思います。</p>
<p><img title="dl_2.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/dl_2.png" alt="ExtentionManagerCS6で開けるか確認してみて" width="600" height="362" border="0" /></p>
<p>この時点で先にFlashCS6が正しくインストールされてあるなら、ダウンロードしてきたファイルをダブルクリックするだけでインストールが出来るんですが、念のためMacですと右クリックから「このアプリケーションで開く」を選択してちゃんとExtentionManagerCS6で開くか確認しておくことをおすすめします。<br />Windowsの場合はファイルの関連づけを確認してみてください。 </p>
<p><img title="install_0.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/install_0.png" alt="インストールなう" width="600" height="449" border="0" /></p>
<p>ExtentionManagerCS6が立ち上がると免責事項が出ますのでよく読んで、条件が合うなら<strong>承認する</strong>ボタンを押して先に進んでください。</p>
<p><img title="install_1.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/install_1.png" alt="署名されてないなう" width="600" height="449" border="0" /></p>
<p>署名の警告が出ます。<br />Adobeが「身元不確かなファイルをインスコするけどいい？」って聞いてきています。基本的には問題ありませんので、ご自身の判断で間違いないと思ったら<strong>インストール</strong>を押して先に進みます。</p>
<p><img title="install_2.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/install_2.png" alt="インストールできたなう" width="600" height="446" border="0" /></p>
<p>インストールできたなう。<br />ExtentionManagerは閉じてかまいません。</p>
<p>FlashCS6を立ち上げます。へーFlashCS6の起動時スプラッシュウインドウはこんななんだ。 </p>
<p><img title="run.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/run.png" alt="起動なう" width="600" height="508" border="0" /></p>
<p>起動が完了したら、Flashのメニューから「<strong>ウインドウ</strong>」→「<strong>その他のパネル</strong>」→「<strong>Progression プロジェクト</strong>」があれば成功です！</p>
<p><img title="run0.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/run0.png" alt="成功なう" width="600" height="269" border="0" /></p>
<p>特に何も問題なくインストール完了＆立ち上がりました！</p>
<p><img title="panel.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/panel.png" alt="パネルなう" width="312" height="350" border="0" /></p>
<p>まずは立ち上がったのでとりあえずのところ今日の検証はお終いです。<br />冒頭にも書きましたがクリエイティブツールのアップデートはわくわくします。このわくわくに負けないくらい、誰もが楽しめるコンテンツをうちもよりいっそう作れるように精進します！とCS6のアップデートに誓いを立てたのでした。</p>
<hr />
<h3>2012/5/12追記</h3>
<blockquote class="twitter-tweet" lang="ja">
<p>［B!］FlashCS6でProgressionが使えるか試してみた / 敢えて言うと、Flash Player 11書き出しの場合は、CastDocument (ExMovieClip)でコンフリクトのエラーが発生するのでそこだけ調整… <a title="http://htn.to/6RFKH1" href="http://t.co/WoV6qLhB">htn.to/6RFKH1</a></p>
<p>— clockmaker_botさん (@clockmaker_bot) <a href="https://twitter.com/clockmaker_bot/status/200983494938198016" data-datetime="2012-05-11T16:19:33+00:00">5月 11, 2012</a></p></blockquote>
<p><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></p>
<p>はやくも補足ありがとうございます！！！！近日中に調べてアップします。</p>
<hr />
<h3>2012/5/12追記</h3>
<p>拡張のインストールまではできたものの、新規プロジェクトを作ることが出来ませんでした。</p>
<p><img title="cp_0.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/cp_0.png" alt="なにやら様子がおかしいなう" width="600" height="472" border="0" /></p>
<p>ちょっと様子がおかしい…。</p>
<p><img title="cp_1.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/cp_1.png" alt="プロジェクト失敗なう" width="579" height="112" border="0" /></p>
<p>ううう残念…。ここは今後のProgressionのアップデートに期待です。<br />気分を変えてCS5で新規プロジェクトを作ってCS6で立ち上げてみます。</p>
<p><img title="cmp_0.png" src="http://utweb.jp/blog/wp-content/uploads/2012/05/cmp_0.png" alt="コンパイルエラー" width="600" height="231" border="0" /></p>
<p>ああ〜〜〜…。</p>
<p>どうもFlashPlayer11.1からMovieClipに今さらisPlayingプロパティが追加されたようで、競合しちゃうようです。今のところ解決方法としましては自分でソースを書き換えるのが一番はやいかと思います。</p>
<p>jp.nium.display.ExMovieClip.as</p>
<p>を開いて、126行目付近（見つからなければ「isPlaying():Boolean」でファイル内検索）の</p>
<pre class="brush:as3;first-line:126">public function get isPlaying():Boolean { return _isPlaying; }</pre>
<p>となっているところを</p>
<pre class="brush:as3;first-line:126">override public function get isPlaying():Boolean { return _isPlaying; }</pre>
<p>と書き換えてください（行の先頭に「override&lt;半角スペース&gt;」を書き加える）。</p>
<p>これでコンパイルは通りますし理屈では問題ないはずですが、コードを勝手に書き加えているので（ライセンス的にはたぶん<a href="http://progression.jp/ja/overview/license/#PPL-Basic" target="_blank">Progression™ Library License Basic</a>の権利3で条文に抵触しない範囲でソースコードの利用・修正・改変・複写・掲載・頒布を行うことが認められているので問題ないはずですが）今のところ僕も未検証な部分が多すぎるので、商用案件などではProgressionのアップデートを待つか、FlashPlayer10.3以下で書き出すようにしたほうがいいかと思います。</p>
<p>とりあえずは僕もこの新しいツールCS6でまずいろいろ遊びながら使い慣れていきたいと思います！</p>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/1533/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/1533" />
	</item>
		<item>
		<title>ノンプログラマーにこそお勧めしたい！Tween24というFlashのトゥイーンライブラリ</title>
		<link>http://utweb.jp/blog/archives/1398</link>
		<comments>http://utweb.jp/blog/archives/1398#comments</comments>
		<pubDate>Fri, 27 Apr 2012 12:36:22 +0000</pubDate>
		<dc:creator>正宗</dc:creator>
				<category><![CDATA[未分類]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[チュートリアル]]></category>

		<guid isPermaLink="false">http://utweb.jp/blog/?p=1398</guid>
		<description><![CDATA[まさむ寝です。間違えました。正宗です。眠は春いですね。
Flashのタイムラインアニメーションはなんとか触れるんだけどActionScript3は怖い、ましてやトゥイーンライブラリとかトゥイーンエンジンって何？という人向 [...]]]></description>
			<content:encoded><![CDATA[<p>まさむ寝です。間違えました。正宗です。眠は春いですね。</p>
<p>Flashのタイムラインアニメーションはなんとか触れるんだけどActionScript3は怖い、ましてやトゥイーンライブラリとかトゥイーンエンジンって何？という人向けに、ぜひとも一回Tween24というトゥイーンライブラリを使って試しに遊んでみてほしいと思って記事を書いてみました。<br />タイトルでノンプログラマー向けと書いていますが、ノンプログラマーとはつまりプログラムを書くことが得意でない人全般を指していますが、楽しくトゥイーンを作る話しですので特にWEBデザイナーさんに読んで欲しいと思っています。<br />以下トゥイーンライブラリを含むActionScriptクラスライブラリの事をライブラリと省略して書きます。Flashのライブラリウインドウのライブラリとは別ものとして読んでいってください。 </p>
<p>誤解を恐れずものすごく断定的な言い方をすれば、Flashを苦手と感じている人の多くはタイムラインアニメーションと比べるとActionScriptが難しいと感じていて、ましてやライブラリなんて難しすぎて使えないんじゃないかという印象を抱いている人は少なくないかと思います。<br /> 僕の個人的な考えとしては、タイムラインは直感的に使うのに非常に優れたものなのでそれと比べると確かにActionScriptは慣れないと難しいものではあると思います。少なくとも僕は慣れるまでは難しかったです。<br /> さらにそのActionScriptを駆使するライブラリという奴は難しいものの親玉みたいに考えていました。<br />しかしながら実際のところはライブラリはほとんどが<strong>難しい事を簡単にする目的で作られた</strong>ものであるため、ActionScriptの難しいところを簡単にしてくれます。</p>
<p>その中でも特に、Flashのモーションを制御する事に特化したライブラリ、Tween24は使いやすいことは言うまでもなく「<strong>使ってて楽しい</strong>」ライブラリでして、今までこういうActionScriptのライブラリと無縁だったノンプログラマーな方々にもこの楽しさは是非とも体験して貰いたい！と思って紹介記事を書いてみました。</p>
<p>最終的にTween24を深く知るようになるためにはActionScriptの知識が必要ですが、とりあえず動いて楽しいレベルくらいまではActionScriptがわからなくても体験できると思います。 <br />この記事でもActionScriptについては出来るだけ「何故そうなるのか」の説明を省いてTween24を動かすことだけに特化して紹介してみたいと思います。 <br />この春からWEB系クリエイターになった新人さんや、ほかにも今さらFlashをいちから勉強したくない人にもおすすめしてみたいです。</p>
<h3>目次</h3>
<ol>
<li>この記事が対象としている人</li>
<li>用意するもの</li>
<li>ブックマークしておきたいURL三傑</li>
<li>さっそくライブラリをダウンロードしよう</li>
<li>Tween24とは？</li>
<li>はじめてみよう</li>
<li>動かすものを作ってみる</li>
<li>とりあえず動かしてみる</li>
<li>コピペサンプル3つ</li>
<li>奥義、自動補完とメソッドチェーン</li>
<li>おまけ：自動補完がきかない！？</li>
</ol>
<p>普通なら一番最初にくるはずの「Tween24とは？」「はじめてみよう」の前にいろいろと能書きがありますが、いきなりはじめる前に自分が昔ライブラリを使い始めるまでに敷居が高いと感じてたところをいっこずつ潰していきたいと思います。</p>
<h3>この記事が対象としている人</h3>
<p>Flashはあんまり得意じゃないな〜とは思っているけど、とりあえずタイムラインアニメーションくらいは触ったことある人。<br />他にも一回くらいはActionScript3を勉強しようと挑戦してみたけど挫折したことがある人。<br /> もっと限定的に言うと、<strong>うちのデザイナーに説明する気持ちで書いています</strong>。</p>
<p>僕がノンプログラマーにTween24をおすすめしたい理由は主に3つあります。</p>
<ol>
<li>ActionScript3ぽくないすっきりした書き方！</li>
<li>addEventListenerとおさらばできるかも！？</li>
<li>とにかく使ってて楽しい自動補完</li>
</ol>
<p>理由についても後ほど説明を書きますが特に過去にActionScript3を難しいと思った人にTween24はおすすめしたいです。</p>
<p><span id="more-1398"></span><br />
<h3>用意するもの</h3>
<p>Tween24を使うにあたって用意するものは次のとおりです。</p>
<ol>
<li>Flash Professional CS5以降</li>
<li>Tween24</li>
</ol>
<p>Tween24はActionScript3で書かれているので、ActionScript3が書けるFlash CS3以降であれば使えるのですが、この記事ではCS5以降をおすすめします。<br /> この記事をかいている時点ではCS5、CS5.5、そして発売されたばかりのCS6が対象です。 <br />理由はあとでも詳しく触れますがCS5以降にはActionScriptを書くときの自動補完という機能がついているのですが、これとTween24の組み合わせが最高に楽しくて是非ともこの体験をしてもらいたいからです。</p>
<h3>ブックマークしておきたいURL三傑</h3>
<p>次にブックマークしておきたいURLを紹介します。いろいろと紹介したいところですが、いきなり沢山の情報を参考にしても迷うと思うので思い切って最初に読みたいURLを三つに絞ってみました。 <br />この3つをブックマークしておけばTween24はもう極めたも同然です（だいぶ誇張して言ってます）。</p>
<ul>
<li><a href="http://package.a24.cat/tween24/" target="_blank">Tween24</a>
<ul>
<li>Tween24の配布サイトです。ダウンロードの他、紹介、チュートリアル、サンプルコード、ASDoc（リファレンスというTween24の説明書）など、ドキュメントが抱負なのでひととおり読むだけでなくTween24を使っている間は何度もここを訪れることになります。</li>
</ul>
</li>
<li><a href="http://package.a24.cat/2011/11/24/tween24/" target="_blank">メソッドチェーンでスラスラ書ける！AS3トゥイーンライブラリ「Tween24」</a>
<ul>
<li>先ほど紹介したTween24配布サイト内の関連記事ですが、作者のa_24さんがTween24について紹介記事を書いています。作者さん本人が書いているのでこれ以上無いくらいわかりやすく紹介されてあるうえにチュートリアルは特に参考になるので是非とも個別にブックマークしておきたいところです。</li>
</ul>
</li>
<li><a href="http://www.project-nya.jp/modules/weblog/details.php?blog_id=1568" target="_blank">にゃあプロジェクト [AS3.0] Tween24のイージング</a>
<ul>
<li>にゃあプロジェクトさんがたくさんTween24記事を書かれてあってそのどれもが大変参考になるんですが、その中でも特に１ページだけ挙げるとすればこのリンク先を真っ先にブックマークしておくことをおすすめします。記事の最後に<a href="http://www.project-nya.jp/images/flash/Tween24_easing2.html" target="_blank">イージングのチートシート</a>があるんですが、これがみやすくて何度も参考にすることになります。ちなみにイージングとは「だんだん遅くなる」とか「だんだん速くなる」とか動きの速度に変化をつけるためのものなんですが、これを使いこなすと動きがとても活き活きとしてくるので断然お勧めです。</li>
</ul>
</li>
</ul>
<p>上に挙げた3つのURL以外にも、参考にさせて頂いた記事はたくさんあるんですが今回はあえて三つに絞って紹介してみました。</p>
<h3>さっそくライブラリをダウンロードしよう</h3>
<p>先ほども紹介したTween24のサイトにいって、ライブラリをダウンロードします。<br /> <a href="http://package.a24.cat/tween24/" target="_blank">Tween24</a><br />この記事を書いている時点ではバージョンが1.0.1なので、ここから最新版を入手します。<br /><a title="ダウンロード" href="http://utweb.jp/blog/wp-content/uploads/2012/04/sc0.png"><img class="size-medium wp-image-1408" title="ダウンロード" src="http://utweb.jp/blog/wp-content/uploads/2012/04/sc0-151x300.png" alt="最新版をダウンロードしよう。" width="151" height="300" /><br /></a>ZIPファイルでダウンロード出来ると思うので解凍してください。<br /> 解凍して出来たファイルをどこかお宝フォルダに入れて大事に保存してください。 <br /><a title="保存" href="http://utweb.jp/blog/wp-content/uploads/2012/04/ss1.png"><img class="size-medium wp-image-1411" title="保存" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss1-300x144.png" alt="フォルダごとどこか大事なファイル入れに保存しておいて下しあ。" width="300" height="144" /><br /></a>ダウンロードはこれで完了です。 <br />いちおうダウンロードしたファイルの中身をみてみましょう。<br /> 「src」というフォルダがあってその中に「Tween24_＜バージョン番号＞.swc」というファイルがあると思います。これがTween24のライブラリです。使い方は後ほど説明します。 <br /><a title="ss2" href="http://utweb.jp/blog/wp-content/uploads/2012/04/ss2.png"><img class="size-full wp-image-1416" title="ss2" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss2.png" alt="中にあるswcファイルを今後使うことになる。" width="194" height="139" /><br /></a>swcファイルの他に「a24→tween→」フォルダにいろいろな.asファイルがあります。<br />これらはTween24.swcライブラリのソースファイル（スクリプトが書かれたActionScriptのファイル）です。ActionScriptに興味のある方や、ソースファイルからライブラリを使用したい場合はこちらを使いますが、多くの方はあまり関係ないのでこちらは特に意識しなくても大丈夫です。</p>
<h3>Tween24とは？</h3>
<p>ここまで読んでもらうとわかるように、Tween24とはActionScript3でトゥイーンをするためのライブラリです。<br /> @a_24さんが個人で開発をされていて、誰でも気軽に使えるようにMITライセンスで公開されています。<br /> 非常に使い勝手が良いのが特徴で、動作が軽いこととメソッドチェーンと呼ばれる書き方で高機能なことをバランスよく使うことが出来るため、公開直後から大人気となった日本製トゥイーンライブラリです。 <br />「Actionscript3」の「ライブラリ」などとなにやら難しげなキーワードが出ましたが、ライブラリ本体そのものは先ほどダウンロードしてきたswcファイルが正体です。どうやって使うのかは次の項目で説明します。</p>
<h3>はじめてみよう</h3>
<p>はじめるまでに嫌になるくらい前置きが長かったですね。 まずはflaファイルを入れるための新しいフォルダを作ります。<br /> <img title="ss_createfolder.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_createfolder.png" alt="作業用フォルダを作ります" width="235" height="175" border="0" /><br />そしてその中に実験用のflaを作ります。<br /><img title="ss_createfla.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_createfla.png" alt="flaファイルを作ります" width="469" height="420" border="0" /><br />フォルダ名とファイル名に若干愛が感じられないですが次に行きます。<br />先ほどダウンロードしてきたライブラリから、swcファイルをflaと同じフォルダに<strong>コピーします</strong>。<br /> swcファイルはこうやってflaを作るたびにコピーして使うことになります。<br /> <img title="ss_swc.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_swc.png" alt="さっきダウンロードしてきたライブラリ" width="194" height="139" border="0" /> <br />これでフォルダの中はこうなっているはずです。<br /> <img title="ss_moveswc.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_moveswc.png" alt="swcファイルをコピーしてきます" width="469" height="420" border="0" /><br />ファイルの準備が整ったら、Flashを立ち上げてそのFlashのメニューの「ファイル」から「ActionScript設定」を選びます。</p>
<p><img title="ss_asconfig.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_asconfig.png" alt="ActionScript設定" width="422" height="600" border="0" /><br />何やら恐ろしげなウインドウが開きますが、中段にある「ライブラリパス」を選択後、「＋」プラスボタンを押して新しく指定するフォルダに「./」（半角でドットとスラッシュ）と入力します。<br /><img title="ss_setting.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_setting.png" alt="設定方法" width="464" height="600" border="0" /><br />これで準備完了です！FlashでTween24を使う準備が出来ました。</p>
<h3>動かすものを作ってみる</h3>
<p>トゥイーンのためのライブラリなのでまずは動かすものを作ってみましょう。なんでもいいのでとりあえず丸でも書いておきます。<br /> <img title="ss_create_circle.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_create_circle.png" alt="丸を書きます。" width="548" height="393" border="0" /><br />「シンボルに変換」でムービークリップにしておきます。中心点は真ん中にしておくと使い勝手が良いと思います。<br />さいごに、Actionscript3から呼び出せるようにするためにインスタンス名をつければ完了です。<br /> <img title="ss_instancename.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_instancename.png" alt="インスタンス名をつけてください" width="543" height="274" border="0" /><br />名前のつけかたには規則があるんですが、とりあえずは<br /><strong>最初の文字が半角アルファベットか半角アンダーバーであること、<br />あと途中にアンダーバー以外の他の半角記号や<strong>半角スペース</strong>が混じらないこと、<br />この二つが守られていればまあ何でも良い</strong>です（あまのじゃくな方は「じゃあ日本語でも入れてみよう」とすると思いますが、太字で書いた決まりさえ守っていれば日本語が混じってもまあ大丈夫です。おすすめはしませんが）。<br />ここでは半角で「maru」 と書きました。サンプル素材とインスタンス名に若干愛が感じられないですが次に行きます。</p>
<h3>とりあえず動かしてみる</h3>
<p>とりあえず何も考えずにコピペでTween24を使って動かしてみます。<br /> ActionScript3を書く用のレイヤーを新しく作ります。<br /> <img title="ss_add_layer.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_add_layer.png" alt="ActionScript書く用のレイヤーを作ります" width="498" height="367" border="0" /><br />こうやって、ActionScriptを書くための専用のレイヤーを作っておくと、便利です。<br />右クリックでメニューを出して「アクション」を選んで、アクションパネルを開きます。<br /> <img title="ss_action.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_action.png" alt="アクション" width="600" height="448" border="0" /><br />出てきたアクションパネルに次のスクリプトをコピー＆ペーストしてみてください。</p>
<pre class="brush:as3">import a24.tween.Tween24;
Tween24.tween(maru, 10).x(500).play();</pre>
<p>そこでおもむろにCmmand+Enter（WindowsだとCtrl+Enter）でプレビューします。 <br />丸が ゆっくり右に移動するのが確認できると思います。</p>
<p>サンプルが微妙すぎて全然面白くないかもしれないですが、ちょっとだけ画像でTween24の説明させてください。<br /> <img title="ss_script0.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_script0.png" alt="スクリプトはこうなってる" width="561" height="331" border="0" /><br />Tween24では、<strong>何を何秒かけてどう動かすか</strong>、を指定するだけで動かせます。そして最後に</p>
<pre>.play();</pre>
<p>と繋げて書くことでトゥイーンが実行されます。<br />ActionScriptがわからなくても勘のいい人ならこれなら多少は思った通りに動かせる気がしてきませんか？</p>
<p>最初のimport文は、Tween24を使ってActionScript3を書くときのおまじないですが、実際に動かしているスクリプトは「Tween24.〜」から始まる下の一行になります。<br /><strong>スクリプトとしては呼び名が正確ではないですが</strong>、この記事では説明しやすくするためにこの1行のActionScriptをコマンドと呼んで説明していきたいと思います。 </p>
<h3>コピペサンプル3つ</h3>
<p>先にも書きましたがTween24は豊富な機能を簡単に使えるためのバランスがすごくよくって、最初に紹介したリンク先にもたくさんのサンプルがあります。<br />ここでもできれば豊富な機能の全てを紹介したいのですが、 プログラミングが出来なくてもそれなりに動かせるサンプルを3つに絞って紹介してみました。</p>
<h4>順番に動かす</h4>
<pre class="brush:as3">import a24.tween.Tween24;
Tween24.serial(
	Tween24.prop(maru).x(50).y(50),
	Tween24.tween(maru, 2).x(500).y(50),
	Tween24.tween(maru, 2).x(500).y(200),
	Tween24.tween(maru, 2).x(50).y(200),
	Tween24.tween(maru, 2).x(50).y(50)
).play();</pre>
<p>順番に動かすにはコマンドをTween24.serial()で囲んでやります。最後に</p>
<pre>.play();</pre>
<p>で実行させる命令を繋げて書くのを忘れずに。<br />中のそれぞれの動きコマンドは半角カンマで区切ります。<br />順番に動かすやり方を本家サイトでは<a href="http://package.a24.cat/2011/11/24/tween24/#serial" target="_blank">直列トゥイーン</a>としてさらにわかりやすく書かれてあります。  </p>
<pre style="margin: 8px;">Tween24.prop(maru)</pre>
<p>と書かれてあるところは</p>
<pre style="margin: 8px;">Tween24.tween(maru, 0)</pre>
<p>と書いてもいいです。言い方が変ですが、要は動きに時間をかけたくないとき、tweenの時間の指定をゼロにするか、tweenのかわりにpropを使うか、好みの書き方が出来ます。<br />厳密にはpropを使った方が良いんですがtweenでゼロ秒指定したほうがわかりやすい人はそうしても特に間違いではないです。 </p>
<pre>.x(50).y(200)</pre>
<p>X座標とY座標など複数のプロパティを変化させたい場合はこのように半角のドットで繋げて書きます。これがメソッドチェーンと呼ばれる書き方で、jQueryが特に有名だと思います。<br />他にもXY座標などよく使われる書き方にはTween24で短く書ける他の書き方もありますが興味のある方は本家<a href="http://package.a24.cat/2011/11/24/tween24/#special" target="_blank">特殊プロパティ</a>を参考にしてみてください。</p>
<h4>同時に動かす</h4>
<p>スクリーンショットのように複数のインスタンスがある場合、これを同時に動かすにはいろいろ書き方があります。<br /> <img title="ss_parallel.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_parallel.png" alt="Ss parallel" width="600" height="247" border="0" /></p>
<h5>個別に動かす書き方</h5>
<pre class="brush:as3">import a24.tween.Tween24;
Tween24.tween(maru0, 5).y(200).play();
Tween24.tween(maru1, 5).y(200).play();
Tween24.tween(maru2, 5).y(200).play();
Tween24.tween(maru3, 5).y(200).play();</pre>
<p>コマンドをそのまま個別に書く書き方です。</p>
<h5>動かす対象を配列に入れるやり方</h5>
<pre class="brush:as3">import a24.tween.Tween24;
var a:Array = [maru0, maru1, maru2, maru3];
Tween24.tween(a, 5).y(200).play();</pre>
<p>動きが全く一緒であれば動かす対象を配列に入れるやり方もあります。</p>
<pre class="brush:as3">import a24.tween.Tween24;
Tween24.tween([maru0, maru1, maru2, maru3], 5).y(200).play();</pre>
<p>上の二つは少し書き方を変えましたが全く同じ動きになります。<br />配列に入れるこの方法は、ActionScriptに慣れてない人だと難しく感じてしまうかも知れないので、特に覚える必要はないかもしれませんがTween24に慣れたときにいろんな書き方があることも紹介しておきたかったのでいちおう載せておきました。</p>
<h5>Tween24.parallel()で囲むやり方</h5>
<p>先ほど「<strong>順番に動かす</strong>」でTween24.serial()を使ってコマンドを囲むやり方を紹介しましたが、同時に動かすときはコマンドをTween24.parallel()で囲んで書くやり方が便利です。</p>
<pre class="brush:as3">import a24.tween.Tween24;
Tween24.parallel(
	Tween24.tween(maru0, 2).y(100),
	Tween24.tween(maru1, 10).y(200),
	Tween24.tween(maru2, 5).y(-10),
	Tween24.tween(maru3, 20).y(300)
).play();</pre>
<p>なんともイラつく動きをしますが許してください。スクリプトで各々のコマンドがどういう動きを指定しているのかわかりやすく書こうとしたらこうなりました。<br />動きはコピペしたあとぜひとも数値をいろいろいじってみなさんで楽しんでください。</p>
<p>これだけだと「個別に動かす」やり方と変わらないんですが、parallelで囲むやり方を使うと先に紹介した順番に動かすserial()と組み合わせて使えるようになるので非常に強力になります。</p>
<pre class="brush:as3">import a24.tween.Tween24;
Tween24.serial(
	Tween24.tween(maru0, 0.5).x(100),
	Tween24.tween(maru1, 1).x(250),
	Tween24.parallel(
		Tween24.tween(maru2, 1).x(500),
		Tween24.tween(maru3, 1).x(500)
	)
).play();</pre>
<p>毎度毎度なんともイラつく動きをしますが許してください。Tween24が悪いんじゃなく、僕のサンプルがしょぼいんです。<br />スクリプトをコピペして、どの数字をいじったらどうなるか、わかって頂ければ幸いです。<br />本家サイトに<a href="http://package.a24.cat/2011/11/24/tween24/#parallel" target="_blank">並列トゥイーン</a>として詳しく書かれてあります。 <br />いろいろ組み合わせると複雑な動きもすっきり書けそうな気がしてわくわくしてきます。 </p>
<p>過去に一度でもActionScript3を難しいなと思った方は、ここまでサンプルを見て気付いたかも知れません。<br />そう、Tween24はあんまりActionScript3っぽくない書き方で使えるんです。 これが冒頭で述べた、Tween24をお勧めしたい理由のひとつです。<br />僕のこのブログの過去の記事でもActionScript3のコードはいろいろ載せているんですが、ActionScript3はどうしても初心者から見るとごちゃごちゃ複雑そうに見えてしまうんですが、Tween24は非常にすっきり書くことが出来るんです。</p>
<h4>クリックされたら動かす </h4>
<p>僕がTween24をおすすめする理由ふたつめ、「簡単なイベント連動ならaddEventListenerとおさらばできるかも！？」がこの書き方です。<br />ActionScript3が苦手な方のほとんどが、ボタンを押したりマウスでロールオーバーしたときのスクリプトの書き方を複雑に感じていると思います。それがTwee24ではこんなにすっきり書けます。<br /> <img title="ss_event.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_event.png" alt="またインスタンス名maruを確認しておく" width="497" height="312" border="0" /></p>
<pre class="brush:as3">import a24.tween.EventTween24;
import a24.tween.Tween24;
//ロールオーバーすると明るくなってちょっと拡大
EventTween24.onRollOver(maru,
	Tween24.tween(maru, 0.2).bright(2.55).scale(1.1)
);
//ロールアウトで明るさ元通り、拡大率も元通り
EventTween24.onRollOut(maru,
	Tween24.tween(maru, 0.1).bright(0).scale(1)
);
//クリックするとビヨヨンと大きくなる
EventTween24.onClick(maru,
	Tween24.tween(maru, 0.5, Tween24.ease.ElasticOut).scale(2)
);</pre>
<p>クリックの箇所の書き方が若干今までの書き方と違いますが、これはイージングをかけているためで、イージングについてはまた後ほど説明を入れます。<br />このコピペサンプルのようにクリックやマウスオーバーなどの簡単なイベントと連動してトゥイーンさせる命令だけだと、ActionScript3でaddEventListenerを駆使して書くよりもかなり簡単に書くことが出来るのがおわかりいただけたでしょうか。 <br />本家サイトでは<a href="http://package.a24.cat/2011/11/24/tween24/#event" target="_blank">イベント連動トゥイーン</a>についてもっと詳しく書かれてあります。 </p>
<h3>奥義、自動補完とメソッドチェーン</h3>
<p>僕がTween24をお勧めしたい理由3つめ。</p>
<p><strong>CS5以降の自動補完という機能と、Tween24のメソッドチェーンという書き方をあわせると、この上なく楽しいのです。</strong></p>
<p>もう一度言わせてください。</p>
<p><strong>CS5以降の自動補完という機能と、Tween24のメソッドチェーンという書き方をあわせると、めちゃくちゃ楽しいのです。</strong></p>
<p>どのくらい楽しいかというと、こればっかりは実際に使ってみて楽しさを体験してください。<br />今までこの記事ではコピペだけでも動くように紹介してきましたが、ここからは実際に入力する楽しさも味わって貰うために自動補完とメソッドチェーンについて紹介してみたいと思います。</p>
<p>一回アクションパネルのActionScriptを全部削除して、最初から次のようにキーボードを入力してください。</p>
<p>tween2　と入力したところでCommand+Space（WindowsはCtrl+Space）</p>
<p><img title="ss_pic.jpg" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_pic.jpg" alt="何か出てきた" width="320" height="240" border="0" /><br />スクリーンキャプチャが撮れなかったのできたない写真でごめんなさい。<br />何か出てきたと思います。そう、これこそがCS5以降のAdobe奥義、<strong>自動補完</strong>です。スクリプトで必要なスペルを自動的に選んでくれる頼もしい機能です！<br />もし写真のように補完用の小窓が 開かなかった場合は、いちおうこの記事の最後にトラブルシュートを載せていますのでそれも参考にしてみてください。</p>
<p>この小窓からマウスか矢印キーで「Twee24」を選んでEnterを押すとほら！<br /> <img title="ss_add0.png" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_add0.png" alt="補完してくれる！" width="600" height="232" border="0" /><br />こうやって補完してくれます。ありがたいことに、ActionScript3苦手な人だとかなり苦手意識のあるimport文もちゃんと補完してくれます。<br />驚くのはまだこれからです。この状態で、マウスカーソルは3行目のTween24と書かれたおしりにあると思いますが、そこで続けて半角ドットを押してください。<br /> <img title="ss_add1.jpg" src="http://utweb.jp/blog/wp-content/uploads/2012/04/ss_add1.jpg" alt="どんどん補完してくれる！" width="594" height="337" border="0" /><br />どんどん補完してくれます。</p>
<p>この補完小窓が開いたら、あとは矢印キーかマウスで目的のスペルを選んでも良し、途中まで続けてスペルを入力して補完候補を絞るも良し、とにかく面倒臭いコードの入力がかなりサクサク進むことになります！<br /><strong>さらに、自動で補完してくれるって事はスクリプトのスペルミスでエラーになる日々ともサヨウナラです！！！！</strong> </p>
<p>自動補完の技を身につけたらこんどはTween24のメソッドチェーンの奥義を試してみましょう。<br />次のコードをコピペじゃなく手で入力してみてください。</p>
<pre class="brush:as3">Tween24.tween(maru, 5).x(100).y(100).bright(1).scale(1.5).blur(32, 2).play();</pre>
<p>長いスクリプトももう怖くない。半角ドットを入力するたびに補完小窓が出てくると思いますが、消えてしまった場合は適宜Command+Spaceを押して自分で小窓を出します。<br />Tween24ではメソッドチェーンといって命令をドットで繋げて書くことが出来るのですが、例えば上のスクリプトはActionScript3を知らなくてもTween24をはじめたばかりでも、読めばなんとなく命令の意味がわかると思います。インスタンス名maruを5秒かけてX座標を100、Y座標を100、明度を1、拡大率を1.5倍、ぼかしを横32縦2になるようにトゥイーンさせています。<br />こういう複雑な命令をドットで繋げて書けるので、非常に書きやすく、あとで読んでも読みやすい、ごちゃごちゃしない作り方ができるようになります。</p>
<p>最後にTween24でイージングをする方法について紹介します。<br />トゥイーンを活き活きとしたものにするためにイージングといって動きに緩慢をつけることが多いのですが、これがやはりTween24ではメソッドチェーンとCS5以降の自動補完と組み合わせて非常に便利なのです。</p>
<p>Tween24でイージングをつけるにはtweenコマンドの秒数の指定の後にイージングを指定するようにします。<br />言葉にすると複雑そうですが実際に書いてみます。</p>
<pre class="brush:as3">import a24.tween.Tween24;
Tween24.tween(maru,2,Tween24.ease.BackOut).x(300).play();</pre>
<p>このサンプルではTween24.ease.BackOutこの部分で、行って戻るというイージングを加えています。<br />イージングについては冒頭で紹介したリンク先の<a href="http://www.project-nya.jp/modules/weblog/details.php?blog_id=1568" target="_blank">にゃあプロジェクトさんのサイト</a>がかなり詳しく載ってあるので是非とも参考にしてください。<br />本家サイトでも<a href="http://package.a24.cat/2011/11/24/tween24/#ease" target="_blank">イージングの設定</a>について書かれてあります。</p>
<p>いかがだったでしょうか。<br />自分でも書いてて誰に向けた記事なのか全然わからなくなってきました。サンプルもしょぼいし。<br />それでも、なんかこう、僕も私もやってみようかな、って人が増えるとうれしいです。紹介した甲斐があります。 <br />Tween24は使えば使うほど楽しさの発見があるので、長々と書いた割にこの記事ではTween24の楽しさの1割も紹介し切れていないのが残念ですが、 興味を持つきっかけくらいになれば幸いです。<br />興味もった方は是非とも最初に紹介したリンクを読みまくってTween24を楽しんでみてください！ </p>
<h3>おまけ：自動補完がきかない！？</h3>
<p>Command+Spaceを押してもこの記事のように自動補完小窓が開かない人、あわてずに次のことを確認してみましょう。</p>
<ol>
<li>わかっているとは思いますが、Command+Spaceの「Space」とはスペースキーの事です。</li>
<li>flaを保存しているフォルダの絶対パスに「日本語フォルダ名」が含まれていませんか？flaの保存フォルダの絶対パスの途中に日本語が入るとどうも自動補完ができなくなる場合があるようです。</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://utweb.jp/blog/archives/1398/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://utweb.jp/blog/archives/1398" />
	</item>
		<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>
	</channel>
</rss>

