という日本語訳本が出てますね。ActionScript での画像処理にフォーカスして良著だった原典：

Foundation ActionScript 3.0 Image Effects (Foundations)

を既にもっている（まだあんま読んでない）だけに、買おうかどうしようか迷います。

今やビットマップ処理系のスキルが必須なのは、wonderfl本

ブラウザで無料ではじめるActionScript 3.0 ―It’s a wonderfl world―

で多くの記事が draw メソッドを使ったビットマップの転写テクニックを使っていたことでも明らかなので、時間があればじっくり勉強したいところ。

1. 再生の途中で途切れない程度に十分にダウンロード（バッファ）できたら再生開始
2. それでも途中でバッファがなくなったら「ローディング中ですよ」アイコンとか表示
3. そこからある程度バッファが貯まったら再生開始

という実装が良さそう。
まず1は FLVPlayback コンポーネントのデフォルトのバッファ時間は0.1らしい(via:godagoda.net)ので、5秒ぐらいにする。僕もプログレッシブダウンロードなんで「低速環境で画質アップ」効果を期待。

//バッファタイムをデフォルト0.1から５秒に変更
my_flvPlayback.bufferTime = 5;

2は bufferingStateEntered イベントを監視して、途中でバッファの為に動画が一時停止したらローディングアイコンをaddChildして表示する。bufferingStateEntered は途中で止まる時だけじゃなく、しょっぱなも呼び出されるイベントだということに注意。

再び再生が開始されたら playingStateEntered イベントでローディングアイコンを消す。
このときの再生って、また bufferTime で設定した秒数ぶん（5秒）バッファできたら再開するってことでいいのかな。
（※今から2,3を実装するところ）
FLVPlayback コンポーネント上に FLV ロードするような場合、ローカル環境上の「ダウンロードのシュミレート」ではシュミレートできないらしく、サーバーにアップして試すんだけど、今時ネットも高速回線なので、なかなかこういった低速回線用のデバッグが面倒。

追記：Firefox Throttle(Windowsのみ) というアドオンを使えば、回線速度を低速シミュレートできると kinkuma_design さまに教えていただきました。

追記2：上記2,3も実装。シークバーのないビデオコンテンツだとしても、ローディング状況を確認しつつ開発したい時は、コンポーネントインスペクタから、SeekBarをステージ上に配置して、インスタンス名 sb（任意）とした時

my_flvPlayback.seekBar = sb;

とするだけでローディング状況をバーで知ることができて簡単。あとはお好みで BufferingBar も使えます。こちらはバッファ状態になった時だけ床屋のくるくるみたいなのが表示されるというパーツ。
別方法として FLVPlayback コンポーネントにスキンをあてる方法もあるけど、なぜか当て込むと コンポーネントのwidthが２倍に算出されておかしかったのでやめた。スキンの場合はスキン用のswfも別途アップロードするのを忘れずに。

追記3：バッファ状況も十分なのに映像が止まることがある。裏側でガベージコレクションが発動してる疑惑。もしそうなら、動画再生中は強制的に GC を止めたい。できるのか？

追記4：ここまでの記事を全部見直し。再生が始まった後で、ダウンロード待ちの状態に戻して十分にダウンロードされてから自動的に再生を再開するには、pause() メソッドを使用し、次に playWhenEnoughDownloaded() メソッドを使用します。とある。3 の playingStateEntered も「バッファリング状態に移行してから再生状態に移行することが多いので、play() メソッドを呼び出した直後または対応するコントロールをクリックした直後には、イベントが発生しない場合があります。」とあるので、上記リスト通りの実装すると信頼性低くなるなこりゃ。

playingStateEntered がデリケートなんだったら stateChange で監視しようと思ったんだけど、同じ動画を再度見ようとすると STATE_CHANGE すら動かない場合がある。困った。
ここまでわかったのは、VideoEvent.READY だからといって、即 playWhenEnoughDownloaded() とは限らないので、playWhenEnoughDownloaded() で再生スタートしたタイミングで任意メソッドを動かしたいんだけど、playingStateEntered も stateChange も（ローカルでは動くのに、ネットに上げると）バッファされないケース（でもstateは変わってるのになぁ？）で呼び出されないケースがあるからこれから独自実装しようとしている。

前のエントリーで、初見で分かりにくいけど、触って気付けると快感っていう UI はサイトじゃなくってツール向きだって書いたけれども、そういや真骨頂はゲームだった。
「Squareball」という iPhone アプリがあります。（無料体験版もあります。）
このゲームを導入部分を一切見ずに、いきなりゲームしてみてください。「あーなるほど！」ってなります。

前のエントリで挙げたのと同様に、画面がシンプルだからとりあえず触ってみたくなる。気づいた時の嬉しさ。人に教えたくなる説明しやすさ。それらもちゃんとあります。
※ただこのゲーム、僕自身が下手すぎてイラッとするｗ。

ものすごく当たり前のことを書いてるけども、でもそういう独自 UI であることの向き不向きを考えることで、独自 UI であることが多い（or ならざるを得ない）、Flash コンテンツの向き不向きを考える時の参考にもなるかと思う。

あとは音。この Squareball といい、以前紹介した「CANABALT」や「Continuity」といい、BGM がすごく効いてる。そんなに長尺じゃなくてもいいので、DTM もかじってみたいところ。

無料iPhoneアプリとして「PaPaPaRoulette（パパパルーレット）」というルーレットアプリを公開しました。
http://mtl.recruit.co.jp/sandbox/terai/roulette/

アプリ自体はシンプルですし、上記リンクをご覧いただけばと思いますが、今回このiPhoneアプリのUIを作っていたときに考えた仮説、自分の趣向に気づきました。

分かりにくい UI の効能？

上のビデオのとおり、このルーレットアプリは左下の小さなボタンをクリックすると「人数設定」モードに切り替わります。実は背景のどこをクリックしてもモード切り替えになります。リリース寸前まで左下のボタンすらなく、ただ背景をクリックして切り替えるという仕様にしていました。
その段階で知人数名にテストしてもらったところ、ほとんどの人が（背景をクリックすることなく）人数設定モードに気付きませんでした。偶然背景にタッチしてモード切り替えになっても、今度は黒い輪を指で回すことに気づきませんでした。
でも、５人に一人ぐらいの割合で、なんとなく背景にタッチして、なんとなく黒い輪を回した人もいました。

一旦話を変えます。

Rotring のトリオペンを一目惚れして購入しました。

ボールペン（黒・赤）、シャープペンの3つのペン先を選ぶのですが、その切り替え方がとても好きなんです。

柄の部分にそれぞれの機能のマークが描かれていて、各マークを上にした状態でノックすると、その上にしたイラストのペン先が出てくるんです。何も言わずに人に貸すと、ほぼ誰も気付けないUIです。僕も店頭で知らずに触ったときはしばらく気付けず、不良品かと勘違いしたくらいでした。

でも3色ペンなのにこのシンプル過ぎるUI、絶対何かある！という確信はありましたので、店頭でしばらく触っていると、偶然そのルールに気付けたんです。とても気分がスッとしました。

この時思ったのは、初見で分かりにくい UI であったとしても、

• もうすこし機能があるはずなのに、それに比べてUIがシンプル過ぎる場合、ユーザーは対象をいじくりまわす
• その中で偶然の発見があり、嬉しい気持ちになる
• 一度気づいてしまえば、それ以後は支障なく使える UI であれば
• その難解・癖のあるUIを使いこなせることに優越感を感じ
• 癖があるが故に、他の人にも教えたくなるのではないか

と思ったんです。実際僕は上のように感じましたし、この UI の面白さを人にも教えました。そして当時3000円ぐらいお金払ってこのペンを買ってるわけです。嫌消費の傾向がある僕がずぶずぶにアクションしたわけです。

話をルーレットアプリに戻します。
以上のような思いもあり、テスト段階で数名しか気づいてもらえなかった UI でしたが、ほぼそのままリリースしてみました。まぁ Rotring のトリオペンほどのデザイン的解決は（僕の力不足で）達成できていないかもしれませんが、それでも前述の5項目を満たすことを目指して作りました。

使いこなしてる姿がカッコいいか

もうひとつ。ふと街中や飲み会で使うことも多いiPhoneアプリは、そのアプリを使っているユーザーの所作がカッコよく見える・スマートに見えるというのも UI を作る上で考慮すべきポイントかと思います。

ただしツール系アプリに限る？

一方、不特定大多数のユーザーにアクセスしてもらい、そこでユーザーを漏らさずきっちりコンテンツの中身まで読ませることが第一目的であるような Flash サイトでは、分かりにくい UI では完全に失敗ですが、今回のルーレットのようなツール系アプリであれば、そういう「一見分かりにくい」「ユーザーの気づきに期待する」ような UI も結構面白いのではないかなと思った次第です。

そういう経緯があって、こういうアプリになりました。無料なので是非どうぞ。
> PaPaPaRoulette
ただ、一世代前の iPhone 3G だと動作がもっさりしてしまうのは、完全に僕の力量不足ですすいません。

鑑賞してて、口が開いてしまう系のFlashとその制作者のオンパレード。Flasherというかアーティストとか数学者が混ざったような明らかに天才な人達。Flash vs HTML5 論争といった俗世の騒動とは別次元のモノヅクリをしてらっしゃる。

以前どっかのエントリで、クリエイターとしてPS3派かWii派かみたいなこと書いた記憶があるけど、作品を見て圧倒されて口がポカーンと開いてまう点で、FITC の登壇者の作品はPS3派なのかしら。Wii派はこちらの宮本茂さんのような、モニタの外側でコミュニケーションが生まれることに念頭をおいたものづくり。どちらも素晴らしくかっこいいですが、みなさんはどちら派なのでしょう。

そんな FITC を見にカナダ・トロントへツアーで行こうよ！っていうプロジェクトが、CINRA.net さんと CBCNET さんコラボで実現。募集締め切りもうすぐなので http://www.tour-project.com/ をチェックしなはれ。
コードでアートする登壇者の作品に口開けっ放しのヨダレダラダラ、さらに作品を盛り上げる重低音サウンドが子宮に響きます。（ないけど）

1. FLV動画をタイムラインに貼付け、タイムライン上で所定の場所にフレームスクリプトを書いて制御する
2. 動画にキューポイントを設定し、制御する

で、1を選ぶデメリットって何だろうなと。
→追記：swf全部ロードしてからでないと再生が始まらないことか。
→さらに追記：これ嘘でした。子swfのルートのタイムラインに貼り付けたFLVはプログレッシブダウンロードできます。feb19様にいただいたコメントを参照！

親swfから子swfをロードする構成で、子swfのタイムラインに直接貼るか、子swfにFLVPlaybackコンポーネントを貼るかの違いであれば、どっちでもいいような、むしろ1の方が手っ取り早いように思えてきた。親swf自体にFLVPlaybackコンポーネントを用意するのが（unloadのやり方が下手くそな僕には）メモリリーク対応的にはベストかもだけど、今回それはやらないとして。やっぱりそうしたほうがいいな。最終的にはコメントに追記したような仕様にしました。メモリリークも解決しました。

1. FLV動画をタイムラインに貼付け、タイムライン上で所定の場所にフレームスクリプトを書いて制御する
2. 動画にキューポイントを設定し、制御する

が思い浮かびます。
ただ、1の方法は動画がFLVならOKですが、F4Vだと駄目です。FLVに変換する必要があります。手元にあったのがF4Vだったので2をやってみようと思いました。（結局キューポイントを埋め込むのでFLV変換してもいいんですけどね。）

次に、SWF上にビデオを埋め込むには

1. Videoクラスを作って自力でいろいろ実装していく
2. FLVPlaybackコンポーネントを使う

方法があって、（いろいろ不評ポイントはあるものの）コンポーネントを使う方が簡単なのでここも2にする。

さて、F4VってのはCS4の時に採用した動画形式で、要はH.264なんですが、H.264と違ってキューポイントが埋め込めるのがメリット。
キューポイントといっても

1. ナビゲーションキューポイント
2. イベントキューポイント
3. ActionScriptキューポイント

の3タイプがあり、1と2はFLV/F4Vに直接埋め込むキューポイントでAdobeMediaEncoderを使って埋め込みます。3はASやFlashIDE上であとから設定できます。

ただ、動画再生ヘッダを所定位置に移動させるseek系の指定先は（時間を直接指定する方法もありますが、キューポイントを指定先に使う場合は）ナビゲーションキューポイントしか使えません。

キューポイントによるナビゲーションの移動は

FLVPlaybackインスタンス.seekToNavCuePoint("キューポイント名")

でいけるとあるが、これが”Invalid seek”だと怒られる。ちゃんとナビゲーションキューポイントを指定しており、他につまづくような箇所はなさそうに思える。

なんだこれと１時間ぐらい格闘したけどわからんかったので、結局seekSeconds(秒数)メソッドを使うようにした。seekSecondsメソッドはseekと違い、引数に小数点以下 3 桁までの精度 (ミリ秒精度)で設定できる。もちろん分は秒に直して指定。１分23秒04(1:23:04)なら、83.04と指定。seekSeconds直後はコンポーネントが停止するみたいなんでmyFLVblayback.play();で再開させる。

それにしてもseekToNavCuePointが使えないのが気になる。海外でも同じInvalid seek症状な人を散見。今後deliciousして情報を追います。

追記：

FLVPlaybackコンポーネントを含む子swfをアンロードした時にFLVの音が残り続ける現象に遭遇。ipuhekeさんと同様の現象だと考え、activeVideoPlayerIndexを設定しようとするも、コンポーネントのプロパティパネルからは設定できないらしく、スクリプトから設定することになる。
もはや設計を見直した方が早そうなので、FLVPlaybackコンポーネント１個用意して、このあたりのサンプルコードを参考に作り直すことにした。

追記：

MetadataEvent.CUE_POINTイベントを監視して、ハンドラ内でキューポイント名分岐させたいとする。
eventObject.vpでインデックス（チャンネル番号的なもの）は取得できるが、eventObject.infoだと[Object Object]が返ってくるので Spark の Dumper を使って

import org.libspark.utils.Dumper;
trace(Dumper.toString(eventObject.info));

のようにして中身を覗くと、

$var = {
           'type' =< actionscript,←キューのタイプ
           'name' =< showTitle,←キュー名
           'time' =< 3,←キュー設定した時間
       }

が入っている。よってキューポイント名は eventObject.info.name で取得できる。


]]> http://www.trick7.com/blog/2010/02/15-185843.php/feed 0 http://www.trick7.com/blog/2010/02/10-132711.php http://www.trick7.com/blog/2010/02/10-132711.php#comments Wed, 10 Feb 2010 04:27:11 +0000 tera http://www.trick7.com/blog/?p=1830 flvビデオをタイムラインに貼付けてちょっとフレームアクション追加してswf化、それを子swfとして、親swfからロードして使うというケースがあるとします。 その中で再生中のムービーのあるタイミングで親swfのメソッドを実行したいことがあります。 つまり表題のように子swfから親swfの変数・メソッドを呼び出すというケース。 僕のケースでは親swfのドキュメントクラス(Main.as)内で定義したメソッドを呼び出したかったので、子flaのフレームアクション上から、Main(root.parent.parent).hoge()みたいにキャストして呼び出そうとしたら、子swfの単品flaパブリッシュ時に「未定義である可能性が高いメソッド Main の呼び出しです。」と当然怒られる。（失敗１） で、キャストするのをやめて root.parent.parent.hoge() だと、 「未定義である可能性のあるメソッド hoge を、静的型・・・」と怒られる。（失敗２） ネットで調べて下記記事を拝見： 外部swfから親を呼ぶ | Miscellaneous notes var ld:Loader = loaderInfo.loader; var maintl:MovieClip = ld.root as MovieClip; maintl.hoge(); // 親の関数 と子flaのフレーム上に書いてパブリッシュ成功。親swfへのアクセスも成功。（成功１） あれ？Main型でキャストしなくてもhoge()たたけるの？と不思議に思って失敗１のアプローチで MovieClip(root.parent.parent).hoge(); でもいけた。（成功２） ※こちらの記事も参考に。あとで試させてもらおう。 AS3 読み込んだ子swfにアクセス　読み込んだ子swfから親swfにアクセス | as3 | メモ | pandama flvビデオをタイムラインに貼付けてちょっとフレームアクション追加してswf化、それを子swfとして、親swfからロードして使うというケースがあるとします。
その中で再生中のムービーのあるタイミングで親swfのメソッドを実行したいことがあります。
つまり表題のように子swfから親swfの変数・メソッドを呼び出すというケース。

僕のケースでは親swfのドキュメントクラス(Main.as)内で定義したメソッドを呼び出したかったので、子flaのフレームアクション上から、Main(root.parent.parent).hoge()みたいにキャストして呼び出そうとしたら、子swfの単品flaパブリッシュ時に「未定義である可能性が高いメソッド Main の呼び出しです。」と当然怒られる。（失敗１）

で、キャストするのをやめて root.parent.parent.hoge() だと、
「未定義である可能性のあるメソッド hoge を、静的型・・・」と怒られる。（失敗２）

ネットで調べて下記記事を拝見：

外部swfから親を呼ぶ | Miscellaneous notes

var ld:Loader = loaderInfo.loader;
var maintl:MovieClip = ld.root as MovieClip;
maintl.hoge(); // 親の関数

と子flaのフレーム上に書いてパブリッシュ成功。親swfへのアクセスも成功。（成功１）

あれ？Main型でキャストしなくてもhoge()たたけるの？と不思議に思って失敗１のアプローチで

MovieClip(root.parent.parent).hoge();

でもいけた。（成功２）

※こちらの記事も参考に。あとで試させてもらおう。
AS3 読み込んだ子swfにアクセス　読み込んだ子swfから親swfにアクセス | as3 | メモ | pandama


]]> http://www.trick7.com/blog/2010/02/10-132711.php/feed 2 http://www.trick7.com/blog/2010/02/05-123455.php http://www.trick7.com/blog/2010/02/05-123455.php#comments Fri, 05 Feb 2010 03:34:55 +0000 tera http://www.trick7.com/blog/?p=1827 ご回答いただいた皆様ありがとうございました。結果はリアルタイムに反映されますので、まだ未回答だという人はぜひ回答いただいてから結果をお楽しみいただくのがおすすめです。 血液型「逆」判定　第３回 その他これまでの血液型エントリはこちらから。trick7 > 血液型逆判定カテゴリ ということで以下第３回の結果となります。 晩酌って日常のストレスと関連してるのでしょうかね。僕(O型)下戸なんでわからないです。 今現在回答してくれた人の比率は、男182／女71人ということもあり、青が人気。 とくに顕著な差はないみたいです。 結構面白いデータかも。AとBは同じ感じで食重視。O型が住。AB型が結構顕著に食重視であまり住は重視してない。 パン派／ごはん派／食べないが同数ぐらい。結構ちゃんと食べてるんですね。 特に目立った血液型差は見られず。 A型でレーシックに興味ある人多そう。 ユッケ善戦。AB型はまんべんなく食べてくれる？ 血液差は見られなかったですが、防水機能人気なのがわかりました。 B型なのにBlackじゃないじゃん。みたいな。 次のお題も作りましたので、２分少々お時間ありましたらご協力いただけると嬉しいです。 「第４回 血液型逆判定アンケート」

ご回答いただいた皆様ありがとうございました。結果はリアルタイムに反映されますので、まだ未回答だという人はぜひ回答いただいてから結果をお楽しみいただくのがおすすめです。

血液型「逆」判定　第３回

その他これまでの血液型エントリはこちらから。trick7 > 血液型逆判定カテゴリ

ということで以下第３回の結果となります。




晩酌って日常のストレスと関連してるのでしょうかね。僕(O型)下戸なんでわからないです。



今現在回答してくれた人の比率は、男182／女71人ということもあり、青が人気。



とくに顕著な差はないみたいです。



結構面白いデータかも。AとBは同じ感じで食重視。O型が住。AB型が結構顕著に食重視であまり住は重視してない。



パン派／ごはん派／食べないが同数ぐらい。結構ちゃんと食べてるんですね。



特に目立った血液型差は見られず。



A型でレーシックに興味ある人多そう。



ユッケ善戦。AB型はまんべんなく食べてくれる？



血液差は見られなかったですが、防水機能人気なのがわかりました。



B型なのにBlackじゃないじゃん。みたいな。

次のお題も作りましたので、２分少々お時間ありましたらご協力いただけると嬉しいです。
「第４回 血液型逆判定アンケート」


]]> http://www.trick7.com/blog/2010/02/05-123455.php/feed 0 http://www.trick7.com/blog/2010/02/04-223940.php http://www.trick7.com/blog/2010/02/04-223940.php#comments Thu, 04 Feb 2010 13:39:40 +0000 tera http://www.trick7.com/blog/?p=1823 ※Chrome ブラウザで見ると結構クラッシュするので注意。でもいいサイトです！ 昔、下みたいな動画の時間軸を、画面上のオブジェクトをマウスドラッグして動かせる動画プレイヤーの提案があったじゃないですか。それを Flash で再現してみせてくれたのが上の WRANGLER のサイト。 時間をコントロールできる神様的な万能感、しかも人を自由自在に動かせているような万能感。気功で人を転がせる気持ちよさを疑似体験できます。 自分を省みると、ネット・テレビ・本・暮らし等の中で日々新しい表現を目にすることができるようになったのに、そのエッセンスを自分で Flash で実際に作ってみるとこまで全然手が動いていないので悲しい。 あ、別に表現をパクってワーイ！という気持ちではなくって、こういう表現を Flash でやりたい時は、例えばコントロール対象の素材を動画で用意すべきか、静止画の連番で用意すべきかとか、ドラッグの軌跡とフレーム数の結びつけをどう実装したらいいか、とかを知っておきたいという気持ちがあって、それは実際に手を動かしてみるのが一番良いということで、頑張らななぁと。
※Chrome ブラウザで見ると結構クラッシュするので注意。でもいいサイトです！

昔、下みたいな動画の時間軸を、画面上のオブジェクトをマウスドラッグして動かせる動画プレイヤーの提案があったじゃないですか。それを Flash で再現してみせてくれたのが上の WRANGLER のサイト。

時間をコントロールできる神様的な万能感、しかも人を自由自在に動かせているような万能感。気功で人を転がせる気持ちよさを疑似体験できます。

自分を省みると、ネット・テレビ・本・暮らし等の中で日々新しい表現を目にすることができるようになったのに、そのエッセンスを自分で Flash で実際に作ってみるとこまで全然手が動いていないので悲しい。

あ、別に表現をパクってワーイ！という気持ちではなくって、こういう表現を Flash でやりたい時は、例えばコントロール対象の素材を動画で用意すべきか、静止画の連番で用意すべきかとか、ドラッグの軌跡とフレーム数の結びつけをどう実装したらいいか、とかを知っておきたいという気持ちがあって、それは実際に手を動かしてみるのが一番良いということで、頑張らななぁと。


]]> http://www.trick7.com/blog/2010/02/04-223940.php/feed 0