宇都宮ウエブ制作所

前編の続きです。
(続きを読む...)

最初ぼくPixelBenderのこと「pixel bLender」と勘違いしていました。
証拠
証拠その2
僕、得意げになって何か言ってますね…。終始間違いの多い男です。
僕たちの失敗。こんばんは。森田童子です。嘘です。正宗です。

さてさて、今さらながらPixelBenderについて勉強してみました。PixelBenderって登場したの確か3年以上も前ですよねえ。
普段から情報共有が 盛んなFlashにおいて、僕が今まで3年もPixelBenderを使っていなかった理由はひとえに「PixelBenderが何をするものなのかわかりにくい！」からでした。
PixelBenderを使うとどうなるのか、Flashのどんな場面で使えるのか、どうやって使うのか、いやいやそれ以前の問題でただひたすら「PixelBenderが何をするものなのかわかりにくい！」のでした。
もちろん、Adobeの告知不足とかそういった事が言いたいわけではなくて、僕のスペックではPixelBenderはわかりにくいからとっつきにくかった。というお話です。

で、勉強してみてわかった結果は、「PixelBender、かなり使える」ということです。
簡単に言うとFlashの処理能力が別次元で向上します。
おおげさですがおおげさでない表現として「Flashの処理速度という概念を無かったことに出来る」ほどのパフォーマンスです。
「別次元」とか「処理速度という考え方を無かったことに」というのは、太字にしたのは煽りでもなんでもなく実際に本当に処理方法が違うからです。これに関しても出来るだけ簡単に説明します。
いったんサンプルを見てください。

ウエブカメラがあれば接続の許可を求められると思いますので許可してください。
ウエブカメラがない、あっても許可しなかった場合は、僕が今年の夏にバラ園にいったときの思い出の写真がかわりに表示されることになると思うので、そういった悲しい事故がないよう、是非ともウエブカメラを使って遊んで頂くことを強くおすすめします。

マウスをうごかしてもらうとわかると思うんですが、昔からよくある、水面の波紋のような画像処理を効果に加えたサンプルです。
DisplacementMapFilterとかで手垢がつきまくっているので、アンテナの高い人には今さらなサンプルです。
ここで見て貰いたいのは、処理のほとんどをPixelBenderにまかせたことによる処理速度の安定です。

サンプルのソースコードはこちら。
https://github.com/masamunet/blog_samples_pixelbender_practice

ソースコードをみてもらってもわかるように、基本的に僕はなにもしていません。処理のほとんどを外部のPixelBenderファイルに頼っています。
具体的にはこちらのソースをほとんどの部分で使用しています。
僕がやったことと言えば、もともとDisplacementMapFilterで処理していた部分もShaderJobを用いてPixelBenderで行うように変更したくらいですが、そのPixelBenderもこちらの記事を参考にしてあります。
このように、PixelBenderの概念を一旦理解したら、あとは自分でオリジナルなPixelBender処理を書くもよし、海外にあるいろいろなPixelBenderのファイルを（ライセンスに従って）使いこなすも良し、いずれにせよ処理速度という表現の枷からかなり自由に解き放たれるPixelBenderは是非是非習得すべき楽しい技術だと思います。

ちなみにPixelBenderの習得にあたって参考にした本はこちら。

この本の第9章にPixelBenderについて書かれています。
だからこの本以上のことはこのブログに書かれていないのでこの本を読んだ方はあんまり期待できる記事ではないと思いますが、PixelBenderについて僕なりに理解したことをまとめてみました。

PixelBenderはそんなに敷居の高い技術ではないです。
実験レベルならすぐにはじめられて、効果は非常に高い（なにせ処理速度が別次元になるので）技術なので、ぜひともわかりやすく説明出来るようにまとめられたらと思います！
(続きを読む...)

Flashの今さら人に聞けない初歩的な何かをみんなで勉強する大阪ひよこの会。
その第三回「シーン遷移とは？」を開催しました。

シーン遷移と言えばFlashの画面展開として最も重要な部分。
FlashサイトからFlashゲーム、Flashアニメに至るまで、必ずといっていいほど考えなくてはいけない部分です。
必ずぶち当たる問題なのに、ほとんど直接作品とは関係ない部分でもありますし、かといってこれまた必ず制作の途中段階で変更を余儀なくされる部分でもあります。
なので本来の作品性に関係ない部分を出来る限り省力化をしながら作らないといけないし、かといって出来る限り柔軟に作っておかないと作品の作り込みに影響するという、ほぼ全てのFlasherのジレンマとして君臨し続けているのではないでしょうか（言い過ぎか）。

そんなシーンに対する、僕たちひよこたちの方法とは？
僕はProgressionのシーン遷移の部分に焦点を当てて（本来僕はProgressionの目玉を大きく三つにわけて、シーン遷移、キャスト、コマンドとしています。今回はそのシーン遷移の部分）、技術的なお話はおいておいて「何故Progressionを使うのか」についてお話しさせて頂きました。
ほとんど資料無しのお粗末な内容ですが、皆様ご静聴ありがとうございました！
「本やネットにある情報だけど、あえて口頭で説明した方がわかりやすいな」みたいな内容も交えてたので、ブログに残せるほど有意義な情報はありませんでしたが、一旦レポートしておきたいと思います。
(続きを読む...)

今回の記事はFlashBuilderを生まれて一度も立ち上げたことのない人向けの記事です。
「そんなのアイコンダブルクリックしたら立ち上がるしあとは使うだけだよ」って方は、まさにごもっともですしここに書かれてあるのはその程度のことなのでお役に立てないかもしれません。
僕がFlashBuilderを使い始めるに当たって敷居が高いなーと感じたところをまとめましたので、まだFlashBuilderを使ったこと無い方の何かの参考になれば幸いです。

FlashBuilderの画面。なにやら小難しそうだが…？

中段あたりにチェックボックスがあるよ

いきなりですがswcファイルって「スウィック」って読むらしいですね。アドビの中の人もそう読んでたんで確かな情報です。
しかしながら僕は慣れなくていつも「エスダブルシー」って読んでしまうんですね。そこらへんのモサさが自分流さ、なんて無頼を決め込んで今日も「エスダブルシーエスダブルシー」と 読んでいます。
僕が「エスダブルシー」って言う度に周りが若干イラっとした顔されるんですが、それでもかわまず「エスダブ…エスダボースィー」とか呼び続けてるのに未だ怒られた事がないのは 、ひとえに僕の人徳だと思います。

無駄な軽口はこのくらいにして、先日行われたひよこの会で少しだけ要望があったのでSWCと連携してProgressionでのFlashサイト開発環境を超快適にする方法をご紹介したいと思います。
今までのやり方にもよりますが、体感100倍速いと言っても全くおおげさでないくらい、爆速開発が可能になりますよ！
(続きを読む...)

あまりニーズはないかと思われますが、例えばアハ体験のように対象物を数十秒かけて、ゆっくりじんわりと動かす時のtipsです。 まずはサンプルをご覧下さい。

このサンプルでは30fpsで30秒かけてちょうど30px移動しています。

ただトゥイーンさせているだけという素材そのものを活かした作りになっております。

・・・なんですが1pxごとにしか進まないような感じで、カクついた動きになってしまっているのがお分かりになりますでしょうか。 これを解消するためにはこの為だけにAS仕込むか、別途FLV化させるか、と悩んでいたのですが、とっても簡単な方法で解決することができました。

(続きを読む...)

著者である大重美幸様より、2010/7/17に発売したばかりの「詳細！Progression 4 Flashフレームワーク入門ノート」（クリック先はアマゾンで買う）を献本いただきました！

俗に言う「大重本」この写真はクリックするとアマゾンへ

著者である大重様、発送いただいたソーテック社様、この場をお借りしてお礼申し上げます。

献本していただくなんていう体験、僕自身の人生の中でそうあることでもないのでものすごくうれしいです。ましてやAS3を覚えるときに相当お世話になった大重さんからとなっては、これはもう本気でレビューするしかありません！！
僕も業務フレームワークとしてProgressionをがっつり使っている人間の一人として、また実際に自分が入門の時にどこでつまづいたのかとかも思い出しながら、かなり突っ込んでレビューしたいと思います！
考えてみれば本のレビューなんてそんなにやったことがなくて、もしかしたらかなりとんちんかんなことになるかもしれませんが、少しでも皆さんのほんの購入時の参考になればと思います。がんばります。

(続きを読む...)

FlashBuilderはじめてみました。正宗です。

Progression4がFlashBuilderとの連携ができるようになっていたのがきっかけだったのと、あとFlashのコンパイル（パブリッシュ）がその都度グラフィックを書き出し直すので時間がかかるようになったのが嫌でグラフィックはあらかじめswc書き出ししておいてFlashBuilderからasだけをコンパイルできるようになったらいいなと思ったので、FlashBuilderを使いこなせるように勉強してみることにしました。

常々お伝えしているように、うちのFlash請負制作業務のほぼ100%をProgressionフレームワークを使用していますので、ProgressionとFlashBuilderがうまいこと連携できていないと困ります。いろいろ試してみてうまい感じに連携できるようになったので書いておきたいと思います。

あとFlashBuilderについての本や情報が多いですがだいたいがFlex技術者向けになっていて、MXMLとか僕もよくわからないのですが僕のやりたいFlash開発とは微妙に違う気がするので、Flash向けにFlashBuilderの設定方法なんかの情報があっても良いなーと思っていたので、今回の記事はProgressionとあわせて是非ともマスターしたい技術だと思います。

(続きを読む...)

子供時代は痩せてたので口の悪い上級生から「ホネホネロック」とからかわれていましたが、その呼ばれ方、けっこう気に入ってました。正宗です。

JavaScriptでもActionScriptでも、関数を登録する場面ってけっこうよくあって、ActionScriptでいえば特にaddEventListenerですね。そんなときに引数を渡したい事もあると思うんです。
その方法を書いておきたいと思います。
(続きを読む...)

小ネタの備忘録なんですが、Progressionをインストールしたときに自動的にリファレンスもローカルに保存されます。リファレンスは読み方さえわかれば、非常に有用な情報源なのでブックマークしておくと何かと便利です。
ちなみにアドレスの「Flash%20CS5」と なっている部分はFlashCSのバージョンです。この場合はCS5の例です。

Windowsの場合（vista）
file:///C:/Users/＜ユーザー名＞/AppData/Local/Adobe/Flash%20CS5/ja/Configuration/Progression/Help/ASDoc/index.html

Macの場合（Snow Leopard）
file:///Users/＜ユーザー名＞/Library/Application%20Support/Adobe/Flash%20CS5/ja_JP/Configuration/Progression/Help/ASDoc/index.html

あわせてActionScriptそのもののリファレンスのローカルの場所を探す場合には次の記事も参考にしてみてください。
ActionScriptリファレンスをダウンロードする