Flash GO! 讓圖片置中

就連我自己也不知道為什麼突然要使用這麼有精神的標題,大概是因為Flash通通忘光光後所產生的心虛吧!

前一陣子,因為忙著網站改版的工作所以有好一段時間沒有碰Flash,現在好不容易網站告一段落,準備處理Flash的工作內容時,居然發現自己把Flash全忘得一乾二淨!?OMG,真是要命…所以決定要把之前所做的東西寫成文件,起碼忘掉以後,還知道要怎麼把之前的東西找回來。

之前花了不少時間處理圖檔置中的問題,主要是因為要做一個照片瀏覽器,除了要動態載入外部圖檔以外,還希望它能夠美美的置中;這個方法是在國外的Flash照片播放器範例當中看到的,是我覺得最有用的方法,以下是簡化過後最基本的程式及步驟說明。

製作一個空的movie clip元件,拖曳到畫面當中,x座標與y座標設為(0,0),並且把這個元件命名為img。接者請新增一個script專用的圖層,並且在第一個影格當中加入以下的程式碼:

stop();
loadMovie('圖檔路徑',img);

圖檔路徑使用相對路徑或是絕對路徑都可以,後面的img則是指定圖檔要載入進去的元件名稱,也就是我們剛剛弄出來的movie clip元件。接著請點選img這個物件,並且把以下程式碼加入該物件當中(記住,不是加在影格上喔!):

onClipEvent (data) { 
	var realWidth = 550;//設定版面寬度 
	var realHeight = 400;//設定版面高度 
	var floatR1 = realWidth / realHeight; 
	var floatR2 = this._width/this._height; 
	if (floatR1 > floatR2) { 
		this._height = realHeight; 
		this._width = this._height*floatR2; 
	} else { 
		this._width = realWidth; 
		this._height = this._width/floatR2; 
	} 
	this._x = (realWidth/2)-(this._width/2); 
	this._y = (realHeight/2)-(this._height/2); 
}

基本上,版面寬高我在這個範例當中是設定成影片的長寬,因此當我插入到網頁頁面當中時,即使圖片大小不一樣,它也一定會在我的flash尺寸範圍當中縮放並且置中。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s