[AS3]フルブラウザ、リキッドレイアウト

| | トラックバック(0)

今日は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

このブログ記事について

このページは、が2009年1月24日 00:30に書いたブログ記事です。

ひとつ前のブログ記事は「【OS】Vista,FirefoxでFlashが表示されない」です。

次のブログ記事は「[AS3]xmlと連携したフォトギャラリー ver1」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。