2009年7月22日 星期三

StepByStep(30):Silverlight 3動畫-魚兒水中游

開發工具 : Visual Studio 2010 Beta1 + Expression 3

1.使用Visual Studio 2010 Beta1 建一個Silverlight App
2.新增一個測試專案
3. 開啟Blend設計畫面


4.用鋼筆先畫出魚的輪廓

5.修飾魚的外觀 (選鋼筆工具,按 ALT,拉出弧線)

6.填色

7.畫上眼睛,兩個圈
8.將魚,兩個圈分組到Canvas
9.產生Storyboard加動畫

10.拉黃色時間軸,在0秒時,讓魚出現在最右邊
11.拉黃色時間軸,到1秒時,把魚移到畫面中間,依次類推...
12.拉黃色時間軸, 4秒時,把魚移到外面,順便將魚放大

13.儲存修改
14.回到Visual Studio
15.在Page.xaml.cs加上程式,啟動動畫
16.Build Solution
17.在測試專案中,執行測試網頁MySilverlightTestPage.html,魚就會游了...

2 則留言:

WizardWu 提到...

請問老師,請問您有無試過,VS 2010 Beta1,安裝 SL tookkit 後,是否真如對岸網友所說,Silverlight 3 的控制項,已可直接用滑鼠施曳了?謝謝~~

米米貓學開發 提到...

我還沒有用過SL tookkit提供的control
還在試哩~目前我還是silverlight初學者...

總網頁瀏覽量