1. 程式人生 > >零元學Expression Blend 4 - Chapter 18 用實例了解互動控制項「CheckBox」II

零元學Expression Blend 4 - Chapter 18 用實例了解互動控制項「CheckBox」II

efault add ffi content icon col 若有 one clip

原文:零元學Expression Blend 4 - Chapter 18 用實例了解互動控制項「CheckBox」II


延續上一章的CheckBox教學,本章將以實作繼續延伸更靈活的運用CheckBox。
看Blend如何把CheckBox變成飛碟!

?

延續上一章的CheckBox教學,本章將以實作繼續延伸更靈活的運用CheckBox。

看Blend如何把CheckBox變成飛碟!

?

?

?

靈感取自經典動畫!「怪獸大戰外星人」!!!!!!

?

?

?

本章需要兩張圖片,一為幽浮、另一個是怪獸毛毛蟲

(是的!它就是「怪獸大戰外星人」裏的毛毛蟲怪,實在太可愛了>"<)

如果你手邊沒有類似的圖片,又想跟著一步一步做的話,小猴子已經幫你準備好嚕!!

請點此下載

?

01 置入Import Adobe Photoshop File

首先,請把小猴子已經幫你準備好的Photoshop檔案置入Blend裏面

該怎麼置入,先前已經有教過嚕!

(復習請點此)

?

02 轉換成控制項

接著,請把幽浮轉換成控制項->CheckBox

右鍵Make Into Control->CheckBox(上一章有詳細教學嚕!)

技術分享圖片

?

轉換完成後,請記得刪除不需要用到的Content Presenter

?

03 制作幽浮光線

預先做好Checked狀態時變化的光線

使用Pen繞著原本的光線,繪出一樣的區域,並且調整Fill(忘記Pen嗎?點我復習)

範例Fill顏色為:

0%???? #33FFF500?????? Alpha 20%

100% #A5FFFFFF?????? Alpha 65%

技術分享圖片

?

請記得在Normal時的Opacity調為 0%

技術分享圖片

?

04 Checked時的狀態

Checked時光線亮起,所以在時間軸設定1秒Opacity100%

技術分享圖片

?

05 回到一般編輯模式

離開樣版編輯模式後,我們來設計怪獸毛蟲的動畫

這邊請發揮您的創造力~

動畫設計完成後,請置入ControlStoryboardAction->Trigger

記得這邊最重要是EventName別設置錯喔!

技術分享圖片

?

因為是配合CheckBox,觸發條件就非MouseLeftButtonDown嚕!而是選擇Checked,才能配合剛剛我們所設置的CheckBox樣版。

?

?

本篇範例的圖片僅供教學之用,若有侵權請告知。

?

?

?

本篇的教學就到此。

?

?

?

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

?

?

一步一步邁向HIE之路

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

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

零元學Expression Blend 4 - Chapter 18 用實例了解互動控制項「CheckBox」II