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

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

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

できたのが↓です。（F1モナコGPの予選）

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

最近覚えた 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();
  }
}

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