全画面動画Flashによく見られるドットスクリーンの張り方

2月 12th, 2009 by ipuheke

全画面に動画(FLV)をバシッと貼り付けて、いい感じにカッコ良いサイトを最近よく見ますが、たいていその動画の上にドット模様の付いたスクリーンが貼り付けられているのが多いと思います。あのスクリーンが張ってある理由は、実際に作ってみるとわかるのですが、VideoやFLVPlayBackの大きさをWindowサイズ(stageのサイズ)にあわせて大きくすると、映像がもんやりしてしまいます。しかしどうでしょう。その上に件のドット調を載っけるとあら不思議。なんだかブラウン管やオーロラビジョンで映像を見ているような、イイ感じに仕上がります。

僕がこういう「ドット調+全画面FLV」にすれば、いい感じになるんだねぇ~と最初に気付いたのがベルギーのgroup94のサイトを見たときでした。で、ここでその素敵っぷりをご紹介しようとしたのですが、どうやら今は動画は流れていません(泣)。

というわけで、他ですとMARGARET HOWELLとか、yodabaz.comとかが、ドット調スクリーンを使っているサイトになります。

で、肝心の作り方ですが、

1. ドットの元となる小さな「透明GIF」or「透明PNG」を作る。
2. そいつをリンケージするなり、外部ファイルとしてロードするなりして参照できるようにし、
3. それをタイル上に並べたSpriteをべたっと貼り付ける。

という感じになりますが、1. 2. は割愛しまして 3. のやり方だけ。あくまで僕のやり方です。

ActionScript
< view plain text >
  1. package{
  2.     import flash.display.BitmapData;
  3.     import flash.display.Sprite;
  4.     import flash.system.Capabilities;
  5.     public class SampleSprite extends Sprite{
  6.         /**
  7.         * コンストラクタ
  8.         */
  9.         public function SampleSprite():void {
  10.         //ドット調模様を作るためのSprite
  11.         var dotSprite:Sprite = new Sprite();
  12.  
  13.         //ドット調の小さな画像のビットマップデータを使ってbeginBitmapFill
  14.         dotSprite.graphics.beginBitmapFill(ドット調の小さな画像のBitmapData);
  15.         //stageリサイズ毎に大きさ変えたり、タイル張りなおしたりするのがめんどいのでCapabilities.screenResolutionを使ってモニターサイズ分四角を書いちゃう
  16.         dotSprite.graphics.drawRect(0, 0, Capabilities.screenResolutionX, Capabilities.screenResolutionY);
  17.         dotSprite.graphics.endFill();
  18.  
  19.         //ドット調模様のスプライトを置く。
  20.         addChild(dotSprite);
  21.         }
  22.     }
  23. }

[ 2011年6月9日追記 ]
記事をご覧いただいたKIMURA Webデザインの木村さまからメールにてご指摘いただきましたが、
Capabilities.screenResolutionX、Capabilities.screenResolutionYは、マルチモニタ環境(スクリーン2台以上)では、メインスクリーンの解像度しか取得しません。
Adobe AS3 リファレンスガイドにも

画面の最大水平解像度を指定します。サーバーストリングは R で、画面の幅と高さの両方を返します。このプロパティはユーザーの画面解像度で更新されず、代わりに Flash Player または Adobe AIR アプリケーションの起動時の解像度だけを示します。 また、この値はメイン画面のみを指定します。

とあります。
マルチモニタでも正しく表示するには、stageのEvent.RESIZE発生時に、graphicsをclear()して、再びdrawRectする必要があります。木村さま、ご指摘いただきありがとうございました。

Tags:

Comments are closed.