テレビにTwitterの関連TLをオーバーレイ表示するAIRアプリを作ってみた

May 15, 2010

部屋にアプリキャストというガジェット機能が使えるブラビアがあるんですが、このガジェットはオーバーレイできないので実際の映像がHD見られなくなってしまいます。そもそも放送法とやらでテレビ上に別の表示を出すのはNGらしいです。まったく不便な話ですね。

で、最近PCでデジタル放送を見たり録画する環境が整ったので、専用PCにHDMIでそのブラビアを繋げてモニターにしてます。F1とか見るときは横目でPCで上げてるTweetDeckを追ってたんですがやっぱり映像に重ねてみたいなと思い、Adobe AIR を使って作ってみました。

できたのが↓です。(F1モナコGPの予選)
f:id:tilfin:20100515211208j:image

ちょうど、アナログ→デジタルの過渡期なんで、スーパーが表示されないスペースが左右にあります。そこに乗っけると文字に文字が被って見づらいこともなくなります。

最近覚えた BlendMode = ERASE によるアルファチャネルグラーデーションをかけたりしてます。一応、技術ブログなのでこの部分のソースも書いておきます。下記のコンポーネントの parent には BlendMode.LAYER を設定します。

public class AlphaMask extends UIComponent
{
public function Overlay() {
super();
blendMode = BlendMode.ERASE;
}
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
var matrix:Matrix = new Matrix();
matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0);
var g:Graphics = graphics;
g.clear();
g.beginGradientFill(GradientType.LINEAR, [0, 0, 0, 0], [1, 0, 0, 1], [0, 25, 230, 255], matrix);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
}

テレビ用に作りましたが別にプレゼンでもなんでも使えるということに気付きました(笑)
タイムラインの流れが速すぎた場合の調整等は入れてないんで、反応をみて公開したいと思います。

tilfin freelance software engineer