宇都宮ウエブ制作所

正宗です。ついに出ましたね。Adobe Creative Suite6。
月額5千円（CS3以降を持ってる人は最初の一年間は月額3千円のキャンペーンもやってます）で使えるAdobe Creative Cloudという目新しいライセンス形態も話題となり、購入を検討しているクリエイターや企業も多いのではないでしょうか？
ちなみに私は悩んだあげくCreative Cloudにしました。
うちの制作所単位では、 Design & Web Premium+After Effectsあたりがあれば十分なんですが、特にAfter Effectsはそんなに最新版買ってもまだ使いこなせない機能のほうが多いですし、さらに私個人としてはFlash、FlashBuilder、Fireworks、Dreamweaver、とこの4つさえガチ最新であれば業務のほぼ全ては作業可能なため自分のAdobeIDでCreative Cloudにする必要があるのかと言われれば実はあんまりないんですよね。
なので私はWeb Premiumのアップグレードライセンスを購入して、実際により多くのAdobe製品を使いこなしているうちのデザイナのみCreative Cloudライセンスにする方法のほうが合理的なので、それに加えて自分がCreative Cloudにする必要があるのかをずっと悩んでしました。

でも、私もCreative Cloudにしちゃいました。理由としてはやっぱり新しいもの好きなので最新機能が使いこなせなくてもいつまでも最新版を追いかけていたいことと、あこがれのAdobe製品使い放題！なことと、実際問題としてAdobe製品はうちのソフトウェア資産なのでそれが何世代までアップデート出来るのかなど面倒な運用管理を考える暇があればそのぶん明確に常にソフトウェアを最新版に保てる今回のライセンス形態はかなり興味があったからだというのが大きいです。
何より、クリエイティブ系ツールのアップデートってワクワクするんですよね。自分の腕が上がったわけではないのに、何かこう、新しいもの生み出せそうで。

というわけで、 さくっとCreative Cloudを購入しましてですね。一番気になるのはやはりFlashCS6でもProgressionが使えるのか！？です。
結論から言いますと使えました。
全く、何も、問題なく、普通に、使えましたよ。

以下、ごくごく普通にインストールメモです。

2012/5/12追記

すいません、現時点で私の環境で少し問題が発生しました。記事の最後に追記しています。

まさむ寝です。間違えました。正宗です。眠は春いですね。

Flashのタイムラインアニメーションはなんとか触れるんだけどActionScript3は怖い、ましてやトゥイーンライブラリとかトゥイーンエンジンって何？という人向けに、ぜひとも一回Tween24というトゥイーンライブラリを使って試しに遊んでみてほしいと思って記事を書いてみました。
タイトルでノンプログラマー向けと書いていますが、ノンプログラマーとはつまりプログラムを書くことが得意でない人全般を指していますが、楽しくトゥイーンを作る話しですので特にWEBデザイナーさんに読んで欲しいと思っています。
以下トゥイーンライブラリを含むActionScriptクラスライブラリの事をライブラリと省略して書きます。Flashのライブラリウインドウのライブラリとは別ものとして読んでいってください。 

誤解を恐れずものすごく断定的な言い方をすれば、Flashを苦手と感じている人の多くはタイムラインアニメーションと比べるとActionScriptが難しいと感じていて、ましてやライブラリなんて難しすぎて使えないんじゃないかという印象を抱いている人は少なくないかと思います。
僕の個人的な考えとしては、タイムラインは直感的に使うのに非常に優れたものなのでそれと比べると確かにActionScriptは慣れないと難しいものではあると思います。少なくとも僕は慣れるまでは難しかったです。
さらにそのActionScriptを駆使するライブラリという奴は難しいものの親玉みたいに考えていました。
しかしながら実際のところはライブラリはほとんどが難しい事を簡単にする目的で作られたものであるため、ActionScriptの難しいところを簡単にしてくれます。

その中でも特に、Flashのモーションを制御する事に特化したライブラリ、Tween24は使いやすいことは言うまでもなく「使ってて楽しい」ライブラリでして、今までこういうActionScriptのライブラリと無縁だったノンプログラマーな方々にもこの楽しさは是非とも体験して貰いたい！と思って紹介記事を書いてみました。

最終的にTween24を深く知るようになるためにはActionScriptの知識が必要ですが、とりあえず動いて楽しいレベルくらいまではActionScriptがわからなくても体験できると思います。
この記事でもActionScriptについては出来るだけ「何故そうなるのか」の説明を省いてTween24を動かすことだけに特化して紹介してみたいと思います。
この春からWEB系クリエイターになった新人さんや、ほかにも今さらFlashをいちから勉強したくない人にもおすすめしてみたいです。

目次

1. この記事が対象としている人
2. 用意するもの
3. ブックマークしておきたいURL三傑
4. さっそくライブラリをダウンロードしよう
5. Tween24とは？
6. はじめてみよう
7. 動かすものを作ってみる
8. とりあえず動かしてみる
9. コピペサンプル3つ
10. 奥義、自動補完とメソッドチェーン
11. おまけ：自動補完がきかない！？

普通なら一番最初にくるはずの「Tween24とは？」「はじめてみよう」の前にいろいろと能書きがありますが、いきなりはじめる前に自分が昔ライブラリを使い始めるまでに敷居が高いと感じてたところをいっこずつ潰していきたいと思います。

この記事が対象としている人

Flashはあんまり得意じゃないな〜とは思っているけど、とりあえずタイムラインアニメーションくらいは触ったことある人。
他にも一回くらいはActionScript3を勉強しようと挑戦してみたけど挫折したことがある人。
もっと限定的に言うと、うちのデザイナーに説明する気持ちで書いています。

僕がノンプログラマーにTween24をおすすめしたい理由は主に3つあります。

1. ActionScript3ぽくないすっきりした書き方！
2. addEventListenerとおさらばできるかも！？
3. とにかく使ってて楽しい自動補完

理由についても後ほど説明を書きますが特に過去にActionScript3を難しいと思った人にTween24はおすすめしたいです。

(続きを読む...)

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

最初ぼく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とあわせて是非ともマスターしたい技術だと思います。

(続きを読む...)