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
関連記事
-
-
サブメニューなどのリンクリストの書き方
ほんとのほんとに基本ですが、ぱっと使えるようにメモ。 リンクリストのHTML&CSSの書き方。 リ
-
-
ウィジェットを使わずtwitterをデザインして表示
忘備録的な記事です。 ツィッターのウィジェットは簡単に設置できるけど デザインを合わせづらいんですよ
-
-
flashを使わないスライドのサイト作ってみました
今更感もありますが、HTML5の初歩とJSでメインイメージのスライドを作ってみたくてサイ
-
-
工数短縮。便利なワードプレスで地域紹介サイトを作る
ウェブ関係の方はもうご存知でしょうが、ワードプレスを使えば最低2ページをデザインするだけで、何百ペー
-
-
自己紹介に最適!1カラムでスクロールするシングルページ
ちょっと前に1ページで完結するサイトのデザインが海外で流行ってました。 なので、自分も試しに自己
-
-
WordPressでページをカテゴリ別に分ける
ワードプレスで各ページのレイアウトをつくってるとき、たとえばこっちのカテゴリーは普通に文章を、こっち
-
-
firefoxで印刷するとカラム落ち?…解消法
firefoxで左メニュー2カラムの2ページにまたがるサイトを印刷しようとすると、2ページ目以降、右
-
-
フリーの新世代HTMLエディタ、BlueGriffon
html5やcss3に対応してるHTMLコードエディタを知りました。 BlueGriffonっていい
-
-
Windowsのフォントにお嘆きの方に朗報!
たまたま知ったのですがこんなフリーソフトが。 MacType インストールしてみたら良い感じです
PR
- PREV
- デジタルで使える定番無料色彩ツール
- NEXT
- 一工夫加わったかっちりめ企業サイト【2011年3月頃】