Webdesigner's memo

tagCoding

アニメの他にもイメージ重視のサイトで使いたいフラッシュ。
イメージを大きく左右する動画や写真も大きく使いたいですよね。


そこで、そういったフラッシュサイト制作の準備として、その土台を作ってみました。
やりたいことは、ウインドウサイズに従って、背景が伸縮すること。
しかし、ただの伸縮ではなく、写真の使用を想定していて、縦横の比率を保持します。
調べながらなんとかできたサンプルがこちら。

http://masakey.net/samp/fullsakura/sizefull.html


ポイントは背景写真の最小サイズで縮小を止める事と、ウインドウの縦横のサイズ比率が、背景写真の比率に比べ、横長か縦長かで場合分けすること。


下記、flaファイルのソースを抜粋します。フッタと見出しのオブジェクトについては省略。
基本、ステージには背景写真のムービークリップ”img”と、フルスクリーンボタンの”btn_mc”しか置いてない設定で。
パブリッシュ設定>HTMLのサイズを100×100パーセント。
パブリッシュしたHTMLでは上下左右の余白をcssで取り除く。
フルスクリーンモードの設定には、パブリッシュで吐き出しているjavascriptのAC_FL_RunContentの引数、
‘allowFullScreen’を ‘true’にします。


追記:コードをワードプレスに貼り付けると、省いてしまっているみたいです…
正確に貼り付ける方法を調べますのでしばらくお待ちください。
↑SyntaxHighlighterというスクリプトを使用して、解決しました。

//ソース始まります

stage.align =StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

//背景画像の幅の最小サイズ
var MIN_WIDTH:int=800;
//背景画像の高さの最小サイズ
var MIN_HEIGHT:int=430;
var tent:int=0;
var nWidth = img.width;
var nHeight = img.height;

var img_prop:Number=430/800;
// img_prop は背景画像の height / widthをした比率

//ウインドウサイズが背景画像に比べ、縦長の場合
 if(stage.stageHeight/stage.stageWidth > img_prop){

                if( stage.stageHeight>MIN_HEIGHT){ //最小サイズより大きい場合のスケール
 					img.height=stage.stageHeight;
					img.width=stage.stageHeight/img_prop;

					//フルスクリーンボタンの移動
					btn_mc.x=stage.stageWidth* 11/80;
					btn_mc.y=stage.stageHeight* 22/43;
                }
				else{  //最小サイズより小さい場合
					img.height = MIN_HEIGHT;
					//フルスクリーンボタンはステージ初期設定の位置

                }
//ウインドウサイズが背景画像に比べ、横長の場合
}else if(stage.stageHeight/stage.stageWidth < img_prop){
if( stage.stageWidth>MIN_WIDTH ){ //最小サイズより大きい場合のスケール
		  img.width=stage.stageWidth;
		  img.height=img.width*img_prop;

//フルスクリーンボタンの移動
		btn_mc.x=stage.stageWidth* 11/80;
		btn_mc.y=stage.stageHeight* 22/43;

                }else{//最小サイズより小さい場合
                img.width = MIN_WIDTH;
					                }
 }

stage.addEventListener(Event.RESIZE, resizefunc);

 btn_mc.addEventListener(MouseEvent.CLICK,fullscreen);

 function fullscreen(e:MouseEvent):void{
 stage.displayState = StageDisplayState.FULL_SCREEN;
 }

 function resizefunc(event:Event){
    //ステージリサイズの時の処理
//※上で書いたソースと同じですが、面倒でコピペしちゃいました。普通なら関数化ですね。

//背景画像の幅の最小サイズ
var MIN_WIDTH:int=800;
//背景画像の高さの最小サイズ
var MIN_HEIGHT:int=430;
var tent:int=0;
var nWidth = img.width;
var nHeight = img.height;

var img_prop:Number=430/800;
// img_prop は背景画像の height / widthをした比率

//ウインドウサイズが背景画像に比べ、縦長の場合
 if(stage.stageHeight/stage.stageWidth > img_prop){

                if( stage.stageHeight>MIN_HEIGHT){ //最小サイズより大きい場合のスケール
 					img.height=stage.stageHeight;
					img.width=stage.stageHeight/img_prop;

					//フルスクリーンボタンの移動
					btn_mc.x=stage.stageWidth* 11/80;
					btn_mc.y=stage.stageHeight* 22/43;
                }
				else{  //最小サイズより小さい場合
					img.height = MIN_HEIGHT;
					//フルスクリーンボタンはステージ初期設定の位置

                }
//ウインドウサイズが背景画像に比べ、横長の場合
 }else if(stage.stageHeight/stage.stageWidth < img_prop){

                if( stage.stageWidth>MIN_WIDTH ){ //最小サイズより大きい場合のスケール
		  img.width=stage.stageWidth;
		  img.height=img.width*img_prop;

//フルスクリーンボタンの移動
		btn_mc.x=stage.stageWidth* 11/80;
		btn_mc.y=stage.stageHeight* 22/43;

                }else{//最小サイズより小さい場合
                img.width = MIN_WIDTH;
					                }
 }

}
//ソース終了


参考になりましたらはてぶ、ツイートやコメントなどして頂けたらうれしいです。

---この記事をお読みの方にはこちらの記事もおすすめです。---