全画面動画Flashによく見られるドットスクリーンの張り方
2009 年 2月 12 日
全画面に動画（FLV）をバシッと貼り付けて、いい感じにカッコ良いサイトを最近よく見ますが、たいていその動画の上にドット模様の付いたスクリーンが貼り付けられているのが多いと思います。あのスクリーンが張ってある理由は、実際に作ってみるとわかるのですが、VideoやFLVPlayBackの大きさをWindowサイズ（stageのサイズ）にあわせて大きくすると、映像がもんやりしてしまいます。しかしどうでしょう。その上に件のドット調を載っけるとあら不思議。なんだかブラウン管やオーロラビジョンで映像を見ているような、イイ感じに仕上がります。
僕がこういう「ドット調＋全画面FLV」にすれば、いい感じになるんだねぇ～と最初に気付いたのがベルギーのgroup94のサイトを見たときでした。で、ここでその素敵っぷりをご紹介しようとしたのですが、どうやら今は動画は流れていません（泣）。
というわけで、他ですとMARGARET HOWELLとか、yodabaz.comとかが、ドット調スクリーンを使っているサイトになります。
で、肝心の作り方ですが、
1. ドットの元となる小さな「透明GIF」or「透明PNG」を作る。
2. そいつをリンケージするなり、外部ファイルとしてロードするなりして参照できるようにし、
3. それをタイル上に並べたSpriteをべたっと貼り付ける。
という感じになりますが、1. 2. は割愛しまして 3. のやり方だけ。あくまで僕のやり方です。
Actionscript:
-
package{
-
import flash.display.BitmapData;
-
import flash.display.Sprite;
-
import flash.system.Capabilities;
-
public class SampleSprite extends Sprite{
-
/**
-
* コンストラクタ
-
*/
-
public function SampleSprite():void {
-
//ドット調模様を作るためのSprite
-
var dotSprite:Sprite = new Sprite();
-
-
//ドット調の小さな画像のビットマップデータを使ってbeginBitmapFill
-
dotSprite.graphics.beginBitmapFill(ドット調の小さな画像のBitmapData);
-
//stageリサイズ毎に大きさ変えたり、タイル張りなおしたりするのがめんどいのでCapabilities.screenResolutionを使ってモニターサイズ分四角を書いちゃう
-
dotSprite.graphics.drawRect(0, 0, Capabilities.screenResolutionX, Capabilities.screenResolutionY);
-
dotSprite.graphics.endFill();
-
-
//ドット調模様のスプライトを置く。
-
addChild(dotSprite);
-
}
-
}
-
}
Tags: flv