零元學Expression Blend 4 - Chapter 32 簡單輕鬆的學會如何使用Visual States(上)


Visual State Manager中文翻譯為視覺狀態管理器,這是Blend的強大功能之一

這項功能賦與了視覺設計師更大的空間

 

Visual State Manager中文翻譯為視覺狀態管理器,這是Blend的強大功能之一

這項功能賦與了視覺設計師更大的空間

 

以一般製作Html網頁所使用到的Button舉例來說:

通常會出現的三種基本狀態:NormalMouseOverPressed可能就需要三張不同的圖片來組成

 

但是在Blend內卻是完全不同的設計方法:

你只需要修改預設Button的基本樣式,或是使用一張圖片甚至是用內建工具拖拉出的圖型,就能轉化成Button,直接能擁有Button的基本屬性

若是你看過我之前的文章介紹,很多都有使用到Visual State這項功能:自製玻璃質感的Button就是一個很好的例子

 

這次不一樣的是我們從Create Empty開始!

 

01

拉出一個Button後,在Button上單擊右鍵Edit Template->Create Empty,命名完成點擊OK

image

 

會看到Objects and Timeline下存在一個空白的Gird,並且取代了原本的Button

image

 

切換到State,這邊顯示了Button提供的所有Visual States(視覺狀態)

(如果找不到State這個Tab,請到TopMenu->Window勾選)

image

 

在上面,目前被選中的是Base(基本),這裡列出了所有允許我們定義Button的狀態列表:

分為CommonFocus兩種

CommonStates包含了Normal、MouseOver、pressed以及Disabled

FocusStates包含了Unfocused與Focused

image

 

02

然後,我們在Base狀態中,加入一些圖型把我們的Button外觀製作好

你可以跟著範例做,或是放入圖片

 

範例使用Eliipse拖拉出兩個圓形兩個顏色為漸層的橢圓型,使用漸層以及圖層堆疊的方式做出類反光效果

深藍色碼:#FF333E93

淺藍色碼:#FFB0C3E3

(想看更詳細的圖形工具介紹,請到這裡)

image

 

拖拉一個橢圓至於圓形下方,形成此圓的陰影部分,直接調整ZIndex為-1就可以把陰影置於圓形後方

(不了解ZIndex嗎?這裡有更詳細介紹)

image

 

使用兩個橢圓型製作出一個愛心的形狀

Translate->Flip->Flip X axis翻轉其中一個橢圓再使之交疊就可以達成

image

 

接著把兩個橢圓選起來,單擊右鍵->Combine->Unite

image

 

到此前置作業大致完成

image

 

你可以按下F5預覽看看,你會發現自訂的Button完全沒有任何反應,得不到任何操作時視覺上的反饋

 

如果是以其他的工作或是以傳統的合作方式,視覺設計師的工作就到這邊了,但是有了Visual State這項功能,設計師就可以繼續發揮

想知道更多嗎?看下篇就知道。

 

 

本篇的教學就到此。

 

 

 

(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)

一步一步邁向HIE之路

 

喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您