最近 CORA 都在趕一些案子，所以今天又沒人更新，因此我就來更新一些技術文吧，不過這篇應該是由我們的新朋友組羊來寫的，不過諒在他目前也是處於被追殺中，所以我代替他來寫這篇吧 ( 不是代替月亮來懲罰你喔 !! )

使用 FLEX 來製作的朋友有時候應該會用到一些重複的背景圖案，不過 FLEX 中可不像 HTML 那麼好用，想要設定不斷重複的背景可沒那麼容易，預設的話只會放一張圖片作背景而已，所以需要用一下人家寫好的元件，這樣子就方便多啦。( 老實說這個也是某位老師級的前輩告訴我的啦 )

預設的 FLEX 可是沒有提供四方連續的背景圖功能呢，還好有人寫好元件可以用了

要達成連續的背景圖案我們必須要使用到由 Degrafa 所提供的元件來進階修改 CSS ， 因此我們先到 Degrafa 的官方網站下載 SWC 元件檔。

Degrafa 官方網站 : http://www.degrafa.org

這篇文章是使用 FLEX 3.1 BETA 完成的，不過 FLEX 2 也是可以用的喔。

之後我們只需要把容器元件設定 Style 以及設定好 CSS 就可以達到連續的背景圖功能喔，真的非常的快速。

CODE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">
 
	<mx:Style>
		.tilebackground
		{
			background-image: Embed("010.gif");
			background-repeat: repeat;
			borderSkin: ClassReference("com.degrafa.skins.CSSSkin");
		}
	</mx:Style>
 
	<mx:Label text="使用 Degrafa 來進階修改 CSS 達成 連續底圖"/>
	<mx:Canvas width="600" height="400" styleName="tilebackground">
	</mx:Canvas>
 
</mx:Application>

這樣子就可以製作很漂亮的表格啦，有製作網頁表格的應該都知道，表格的長度會隨著內容增長或是變寬，那就必須要做重複的底圖囉。所以這是很重要的工具喔~~

官方的說明文件在 : http://www.mikehuntington.com/?p=31

Degrafa 還有提供很多好用的 UI 等等功能，所以真的要進去挖寶喔~~

Random Posts

相關文章 :

• 使用 FLEX 製作動態更換的背景圖案 (方案二) tile background
• 從 FLASH 中繪製元件，並匯出 SWC 檔轉至 FLEX 當類別使用
• 將 FLEX 的 IMAGE 元件加上讀取圖片時的進度顯示
• FLEX on PHP , RemoteObject 實作範例 [使用者登入]
• FLEX 一次開啟多個檔案 & 限制檔案類型

Ausir FLEX, 程式設計 Actionscript, FLASH, FLEX 3, tile background, 網頁背景圖, 重複背景