零元學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(上一章有詳細教學嚕!)

clip_image001

 

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

 

03 製作幽浮光線

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

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

範例Fill顏色為:

0%     #33FFF500       Alpha 20%

100% #A5FFFFFF       Alpha 65%

clip_image003

 

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

clip_image004

 

04 Checked時的狀態

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

clip_image006

 

05 回到一般編輯模式

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

這邊請發揮您的創造力~

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

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

18-1

 

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

 

 

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

 

 

 

本篇的教學就到此。

 

 

 

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

 

 

一步一步邁向HIE之路

 

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

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