2009年7月29日 星期三

StepByStep(33) Sliverligt 3動畫-轉轉花

自轉

繞左上角轉


step:
1.
2.
3.

4. 最後記得要按 [Apply]

5.
6.
7.

8.
9.
10.

11.
12.測試花自轉
13.
14.測試繞左上角轉

2009年7月28日 星期二

Silverlight 3動畫 - 數字倒數

Silverlight 3動畫-照片輪播

這次請到米米貓的朋友米米喵來站台

2009年7月27日 星期一

StepByStep(32):Silverlight 3動畫-自製重複使用的按鈕

自製圓型按鈕-Demo

StepByStep(32):Silverlight 3動畫-自製按鈕步驟

步驟
1.建立Silverlight應用程式,為簡單起見只建一個專案外加測試網頁

2.加一個Button
3.Edit Template
4.Name
5.加Ellipse,填漸層色
6.設外框顏色,與粗細
7.設State,當任一狀態轉變到MouseOver時
8.加事件,設0.3s,Fill設為填籃色
9.轉換成Control
10.設Name
11.回到Page.xaml設計畫面,後續可以從工具箱加入自製的MyButton
12.加兩個MyButton到Page.xaml

StepByStep(31):Silverlight 3動畫-轉轉圖


做出以下效果的Silverlight動畫:




開發工具 : Visual Studio 2010 Beta1 + Expression 3
1.使用Visual Studio 2010 Beta1 建一個Silverlight App
2.加一張圖片到Silverlight App 專案
3.開啟Blend設計Page.xaml
4.將圖片拖到 page.xaml設計畫面

5.設定圖片Layout
6.Add state group
7.Add state,做兩次,一個命名為Normal;一個命為Bigger (目前測試不能命中文,無法Run)
8.設Bigger State 的Scale , 放大兩倍,x=2;y=2;
9.設定旋轉 Rotate角度
10.設定Default Transition時間
11.存檔,回到Visual Studio
12.選取畫面上的Image,設定MouseEnter為goBigger;MouseLeave為goNormal;


13. 程式碼:

1 private void goBigger(object sender, MouseEventArgs e)

2 {

3 VisualStateManager.GoToState(this, "Bigger", true);

4 }

5

6 private void goNormal(object sender, MouseEventArgs e)

7 {

8 VisualStateManager.GoToState(this, "Standard", true);

9 }


14.執行測試網頁,滑鼠未移到圖片上時,Image是標準大小
15.滑鼠移到圖片上方,將放大並旋轉

2009年7月23日 星期四

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,魚就會游了...

總網頁瀏覽量