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

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;
}
}
}
//ソース終了
参考になりましたらはてぶ、ツイートやコメントなどして頂けたらうれしいです。