[AS3]フルブラウザ、リキッドレイアウト
今日はAS3でリキッドレイアウトのメモです。
まず、HTMLの設定、「swfobject1.5」を使ってます。
使い方はこちら
使い方はこちら
CSSはこんな感じ
html {
height: 100%;
overflow: hidden;
}
#flashcontent{
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
Actionscriptはこんな感じ
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.StageScaleMode;
import flash.text.TextField;
import caurina.transitions.Tweener;
public class Main extends MovieClip
{
private var parH:Number;
private var parW:Number;
public function Main()
{
init();
}
private function init():void {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = "TL"
parH = stage.stageHeight/backGround_mc.height;
parW = stage.stageWidth/backGround_mc.width;
backGround_mc.scaleY = parW*100;
backGround_mc.scaleX = parH*100;
title_mc.y = 10;
title_mc.x = 10;
main_mc.x = stage.stageWidth / 2;
main_mc.y = stage.stageHeight / 2;
header_mc.y = 5;
header_mc.width = stage.stageWidth;
footer_mc.y = stage.stageHeight-5;
footer_mc.width = stage.stageWidth;
stage.addEventListener(Event.RESIZE, resized);
}
private function resized(e:Event):void {
title_mc.y = 10;
title_mc.x = 10;
Tweener.addTween(main_mc,{transtion:"easeOutExpo",x:stage.stageWidth / 2,y:stage.stageHeight / 2,delay:0.6,time:1})
/*main_mc.x = stage.stageWidth / 2;
main_mc.y = stage.stageHeight / 2;*/
header_mc.y = 5;
header_mc.width = stage.stageWidth;
footer_mc.y = stage.stageHeight-5;
footer_mc.width = stage.stageWidth;
backGround_mc.scaleY = parW*100;
backGround_mc.scaleX = parH*100;
}
}
}
こちらはリサイズ時にメインのムービークリップだけイージングします。
なんとなくつけて見ました。イージングにはTweenerを使ってます。
使い方はこちら
今回のサンプル
今回のソースファイル
追記:(2010/4/2) 背景画像のリサイズのスケール比率の計算が間違ってたので修正しました。
ソースをお使いの方は格等部分を下記に修正してお使い下さい。
var parH:Number = stage.stageHeight / オリジナルの画像の高さ;
var parW:Number = stage.stageWidth / オリジナルの画像の横幅;
if (parH < parW) {
_backGround_mc.scaleX = parW;
_backGround_mc.scaleY = parW;
}else {
_backGround_mc.scaleX = parH;
_backGround_mc.scaleY = parH;
}
トラックバック(0)
このブログ記事を参照しているブログ一覧: [AS3]フルブラウザ、リキッドレイアウト
このブログ記事に対するトラックバックURL: http://alwaysfinetuning.com/mt/mt-tb.cgi/65

