*

flashで縦横比そのままに全画面表示(as3)

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

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

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;
					                }
 }


}
//ソース終了

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

PR

関連記事

no image

サブメニューなどのリンクリストの書き方

ほんとのほんとに基本ですが、ぱっと使えるようにメモ。 リンクリストのHTML&CSSの書き方。 リ

記事を読む

no image

IE6の印刷対応

ie6にA4サイズの印刷対応をしたので 各バージョンのCSSハックをメモ。 印刷用CSSで横幅95

記事を読む

no image

ウィジェットを使わずtwitterをデザインして表示

忘備録的な記事です。 ツィッターのウィジェットは簡単に設置できるけど デザインを合わせづらいんですよ

記事を読む

no image

flashを使わないスライドのサイト作ってみました

今更感もありますが、HTML5の初歩とJSでメインイメージのスライドを作ってみたくてサイ

記事を読む

no image

工数短縮。便利なワードプレスで地域紹介サイトを作る

ウェブ関係の方はもうご存知でしょうが、ワードプレスを使えば最低2ページをデザインするだけで、何百ペー

記事を読む

no image

自己紹介に最適!1カラムでスクロールするシングルページ

ちょっと前に1ページで完結するサイトのデザインが海外で流行ってました。 なので、自分も試しに自己

記事を読む

no image

WordPressでページをカテゴリ別に分ける

ワードプレスで各ページのレイアウトをつくってるとき、たとえばこっちのカテゴリーは普通に文章を、こっち

記事を読む

no image

firefoxで印刷するとカラム落ち?…解消法

firefoxで左メニュー2カラムの2ページにまたがるサイトを印刷しようとすると、2ページ目以降、右

記事を読む

no image

フリーの新世代HTMLエディタ、BlueGriffon

html5やcss3に対応してるHTMLコードエディタを知りました。 BlueGriffonっていい

記事を読む

no image

Windowsのフォントにお嘆きの方に朗報!

たまたま知ったのですがこんなフリーソフトが。 MacType インストールしてみたら良い感じです

記事を読む

PR

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


PR

no image
ムームードメイン

新たにドメインを取得することにしました。 コスト重視でサーバーは

ルーベンス デッサン模写

アトリエでの課題制作

色彩検定の復習しながらイラスツ

お久しぶりの更新です。 せっかく色彩検定を取ったので、 錆

イラスト フリー素材 円満退社

検索用のタイトルで始まりましたが、 イラスト素材を公開しますー!

更新情報で記事のカテゴリータグを色別で表示【WORDPRESS】

ワードプレスの記事です。 ビギナー向けですが、ネットにちらばって

→もっと見る

PAGE TOP ↑