ブラウザに合わせて背景画像が拡大縮小
最近、Flashの勢いが復活してきたようだ。一時期はSEOに弱いと言われ、Webにとって諸悪の根元のように嫌われていたのだが、映像を取り込むという伝家の宝刀を手に入れたコトによってWeb表現の可能性が飛躍的に上がった。その影響が大きいんだろう。やっぱり見ていて楽しい方が良いからね。
作り手にとっては、技術やセンスが今まで以上に問われるので厳しい時代だが、面白い時代に突入してきたと思ってちょっとワクワクだ。
さて、前置きが長くなってしまいましたが、今回はブラウザのサイズに合わせて背景画像は拡大縮小、しかし、その他の要素は各ポジションを保つというサンプルです。htmlの方でもエラスティックレイアウトという手法が出てきているけれど、ディスプレイ解像度がドンドン高くなっている現在、知ってて損はないスキルだと思います。
［仕様］ブラウザに合わせて背景画像が拡大縮小。メイン画像は常に中央に配置。同様に上下の黒いラインと右下隅のロゴも位置をキープする。
→サンプルを新規ウィンドウで開く
→このFlashデータをダウンロードする
［ポイント］背景、メイン画像などの各MCは_rootのフレーム上には置かず、フレームアクションattachMovie();を_rootの1フレーム目に記述して読み込みます。
〜実際のActionScript（_root 1フレーム目）〜
/*初期設定*/
Stage.scaleMode = "noScale";
Stage.align = "TL";
resizeListener = new Object();
resizeListener.onResize = function() {
fixMenu();
};
/*各MCの読込*/
Stage.addListener(resizeListener);
this.attachMovie("backImage", "backImage", 1);
this.attachMovie("mainImage", "mainImage", 2);
this.attachMovie("topLine", "topLine", 3);
this.attachMovie("btmLine", "btmLine", 4);
this.attachMovie("copyright", "copyright", 5);
/*ステージサイズの設定*/
var backWidth = 1000;
var backHeight = 800;
/*fixMenu関数実行*/
function fixMenu() {
if (Stage.width/backWidth > Stage.height/backHeight) {
scale = Stage.width/backWidth;
} else {
scale = Stage.height/backHeight;
}
/*背景の設定*/
_root.backImage._xscale = _root.backImage._yscale = 100*scale;
/*メインイメージの設定*/
_root.mainImage._x = Stage.width * 0.5 - 300;
_root.mainImage._y = Stage.height * 0.5 - 150;
/*上の帯の設定*/
_root.topLine._xscale = 100*scale;
/*下の帯の設定*/
_root.btmLine._xscale = 100*scale;
_root.btmLine._y = Stage.height -20;
/*右下rロゴの設定*/
_root.copyright._x = Stage.width - 200;
_root.copyright._y = Stage.height -20;
}
fixMenu();
