http www limingchstudio com n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
主講人:章立民 http://www.limingchstudio.com PowerPoint Presentation
Download Presentation
主講人:章立民 http://www.limingchstudio.com

Loading in 2 Seconds...

play fullscreen
1 / 54

主講人:章立民 http://www.limingchstudio.com - PowerPoint PPT Presentation


  • 104 Views
  • Uploaded on

今日主題. Silverlight 3.0 專題精研 - 探索「行為」、「動畫」與「狀態」 探索 Microsoft Silverlight Media Framework(SMF) Expression Blend 3.0 超實用技巧總整理. 主講人:章立民 http://www.limingchstudio.com. 章立民老師簡例. 台灣微軟公司資深顧問與講師,從 1992 年開始。 資深電腦圖書作家,著作數目 80 本以上。 連續 7 年獲選微軟最有價值專家 MVP 。. 動畫的使用原則. 自然地融入於介面中,具生動的外觀與質感。

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '主講人:章立民 http://www.limingchstudio.com' - xenia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
http www limingchstudio com

今日主題

  • Silverlight 3.0 專題精研 - 探索「行為」、「動畫」與「狀態」
  • 探索 Microsoft Silverlight Media Framework(SMF)
  • Expression Blend 3.0 超實用技巧總整理

主講人:章立民

http://www.limingchstudio.com

slide2

章立民老師簡例

台灣微軟公司資深顧問與講師,從1992年開始。

資深電腦圖書作家,著作數目 80 本以上。

連續 7 年獲選微軟最有價值專家 MVP 。

slide3

動畫的使用原則

  • 自然地融入於介面中,具生動的外觀與質感。
  • 天氣動畫
  • 圖表動畫
  • 翻頁動畫
  • 控制項動畫
slide4

動畫的形成原理

  • 屬性動畫
    • Opacity
    • OpacityMask
    • 2D 轉換
    • 3D 轉換
    • 色彩
    • 像素著色器效果
  • 視覺暫留。
  • 甚麼屬性可以作為動畫處理對象?
slide5

相依性屬性(Dependency Properties)

  • 動畫的目標屬性
  • 資料繫結的目標屬性
  • 樣式的設定對象
  • 屬性變更回呼
slide7

自訂類別的相依性屬性

public static readonly DependencyProperty AquariumGraphicProperty =

DependencyProperty.Register(

"AquariumGraphic",

typeof(Uri),

typeof(AquariumObject),

new PropertyMetadata(null, new

PropertyChangedCallback(OnUriChanged)

)

);

public Uri AquariumGraphic

{

get { return (Uri)GetValue(AquariumGraphicProperty); }

set { SetValue(AquariumGraphicProperty, value); }

}

slide8

動畫構建模式

  • 替固定的物件套用動畫:只需使用 Blend 3。
  • 替固定的物件套用動畫並變更物件的來源:使用 Blend 3 製作動畫並使用程式碼來變更物件來源。
  • 替不定數目的物件套用動畫:如果在設計階段無法確認物件的數目,必須在執行階段完全使用程式碼(C# 或 VB)來建立腳本與其中的動畫。
  • 動畫涉及複雜的數學運算:使用程式碼(C# 或 VB)來建立動畫。並非一定使用 Storyboard 物件。
slide9

使用 Expression Blend 3 建立動畫

  • 動畫工作區。
  • 腳本(Storyboard 物件)
    • 時間軸
    • Timeline
  • 播放點。
  • 主要畫面格。
  • 針對主要畫面格進行加減速處理。
  • 設定腳本的屬性。
slide10

Expression Blend 3 建立動畫實作

  • 基本動畫實作
    • 實作展示:BasicAnimation_Start
  • 以動畫顯示路徑或裁剪路徑上的點
    • 實作一個愛心動畫
  • 製作一個彈跳的球
    • 實作展示: PracticeforBouncing.sln
  • 製作翻頁效果的相簿
    • 實作展示: PracticeforPhotoPageTurn.sln
    • 實作展示: PracticeforIPageStyle.sln
  • 在「使用者控制項」中建立動畫時間軸以便反複使用
    • 實作展示: PracticeforLoading.sln
slide11

關於腳本您還必須知道

  • 專案可以內含任意數目的腳本。
  • 以資源的形式存放。
  • 開啟、刪除與重新命名一個腳本。
  • 複製與反轉腳本。
    • 實作展示: PracticeforStoryboardReverse.sln
slide12

執行 Silverlight 應用程式時的動畫播放與控制

  • 使用程式碼(C# 或 VB)控制動畫的播放
    • 呼叫特定 Storyboard 物件的 Begin、Stop、Pause、Seek 或 Resume 方法。
  • 使用行為控制動畫的播放
    • 實作展示: ControlStoryboardAction
  • Completed 事件
    • 實作展示: PracticeforCompleted_002.sln
  • FillBehavior 屬性
    • HoldEnd
    • Stop
slide13

文字動畫的考量

  • 縮放時該變更哪一個屬性
  • 以文字的可讀性或動畫效能作為優先考量?
  • 實作展示: PracticeforTextAnimation.sln
  • 可以使用程式控制方式靈活設定。
  • 將 TextBlock 轉換成路徑。
slide14

如何使用 WPFSLFx 2.0 的轉場特效

  • 範例展示:
    • Demo_PhotoAlbum_006.xaml
    • Demo_PhotoAlbum_007.xaml
    • SLEffectHarness.aspx
  • 下載點:http://wpffx.codeplex.com/
  • 使用方式
slide15

使用 C# 程式碼建立腳本動畫

  • 建立 Storyboard 物件。
  • 設定 Storyboard 物件的相關屬性,並決定當 Completed 事件引發時是否要執行特定的事件處理常式。
  • 依序建立各個要內含於 Storyboard 物件中的動畫物件,並且設定這些動畫物件的屬性。
  • 呼叫 Storyboard 物件之 Children 屬性的 Add 方法將各個動畫物件加至腳本中。
  • 呼叫 Storyboard 物件的 SetTarget方法來設定各個動畫物件的目標物件。
  • 呼叫 Storyboard 物件的 SetTargetProperty方法來設定各個動畫物件的目標屬性。
  • 設定目標屬性在特定時間點的目標值。
  • 視需要撰寫 Completed 事件處理常式。
  • 呼叫 Storyboard 物件的 Begin 方法來播放動畫。

實作展示: PracticeforAnimationByCode.sln

slide21

實作計時器

DispatcherTimer myDispatcherTimer =

new DispatcherTimer();

myDispatcherTimer.Interval =

new TimeSpan(0, 0, 0, 0, 100); // 100 毫秒

myDispatcherTimer.Tick +=

new EventHandler(Each_Tick);

myDispatcherTimer.Start();

public void Each_Tick(object o, EventArgs sender)

{

}

slide22

實作計時器

Storyboard _timer = new Storyboard();

_timer.Duration =

new Duration(TimeSpan.FromMilliseconds(100));

_timer.Completed +=

new EventHandler(_timer_Completed);

_ timer.Begin();

private void _timer_Completed(

object sender, EventArgs e)

{

// 再次播放動畫來形成循環的效果。

_timer.Begin();

}

slide23
實作計時器

<Storyboard x:Name="Timer" Duration="00:00:00.00"/>

slide24

範本(控制項範本)

  • 樣式(Style)、範本(Template) 與面板(Skin) 的差異。
  • 只有衍生自 Control 類別而擁有 Template 屬性的控制項才支援範本。UserControl 不支援範本。
  • 範本的製作方式
    • 由視覺化設計人員繪製外觀,再轉換成實質的範本並套用至 控制項。
    • 藉由編輯控制項預設範本的複本來建立新的範本。
  • 範本實作
    • PracticeForRoundPurpleButtonStyle.sln
  • 自訂控制項實作
    • PracticeForCustomControl.sln
slide25

範本

  • 狀態群組與狀態
    • 控制項必定處於特定狀態群組中的某一個狀態。
    • 同一狀態群組中的各個狀態是彼此互斥的。
  • 自行建立狀態群組與狀態
  • 如何切換至特定的狀態
    • GoToStateAction 行為
    • VisualStateManager.GoToState 方法
slide26
進階動畫
  • 使用三角學製作動畫。
  • 在 2D 平面模擬出 3D 效果。
  • 碰撞。
  • 運動。
  • 粒子。
slide27

行為(Behavior)

  • Expression Blend 3 所提供。
  • 不需要撰寫程式碼,就可以替應用程式加入互動功能。
  • 將行為拖放至物件上,然後設定一些屬性即可。
  • 讓開發人員與設計人員更緊密且順暢地協同運作。
  • 同一物件可以套用多個行為。
slide28

內建的行為

  • ChangePropertyAction
  • ControlStoryboardAction
  • FluidMoveBehavior
  • GoToStateAction
  • HyperlinkAction
  • MouseDragElementBehavior
  • PlaySoundAction
  • RemoveElementAction
slide29

內建的行為

  • 實作展示:PracticeforBehavior.sln
  • Demo_Behaviors_001.xaml
  • PracticeforBehavior.sln
  • FluidMoveBehavior
    • 監控項目(或一組項目)的版面配置變更,並在需要時將項目平順地移至新位置的行為。
  • Demo_Behaviors_002.xaml
  • Demo_Behaviors_003.xaml
  • SL-FluidMoveChildren.html
slide30

觸發程序類型

  • EventTrigger
  • TimerTrigger
  • KeyTrigger
  • StoryboardCompletedTrigger
slide31

使用程式碼套用行為

using Microsoft.Expression.Interactivity.Layout;

MouseDragElementBehavior dragBehavior = new MouseDragElementBehavior();

dragBehavior.Attach(Image3);

  • 務必加入組件參考並匯入適當的命名空間
  • Microsoft.Expression.Interactions.dll
  • System.Windows.Interactivity.dll
slide32

建立自訂的行為

  • 行為:衍生自 Behavior<T>類別
  • 觸發程序:衍生自 TriggerBase<T>類別
  • 動作:衍生自 TriggerAction<T>類別
  • 如果動作要以所附加之項目以外的項目作為處理對象,請衍生自 TargetedTriggerAction<T>類別。
slide33

建立自訂的行為

  • 範例展示。
  • 自訂行為範例探索。
  • BeeHive 自訂行為實作。
  • PhysicsHelper 自訂行為展示。
silverlight media framework smf
Silverlight Media Framework(SMF)
  • Microsoft Silverlight Media Framework v1.1 with Progressive Download Support
  • 建立一個穩固、延展性佳且可自訂的視訊播放器來播放IIS Smooth Streaming 。
  • 植基於 Smooth Streaming Player Development Kit的核心功能。
  • 範例
    • http://www.iis.net/media/experiencesmoothstreaming
    • http://localhost/BigBuckBunny/Default.html
  • 案例驗證
    • Wimbledon
    • Sunday Night Football on NBCSports
    • UEFA Super Cup on Canal+
    • Roland Garros
    • Tour de France on France Télévisions
slide35
SMF 使用方式
  • 自 http://smf.codeplex.com/下載 Silverlight Media Framework。
  • 下載IIS Smooth Streaming Player Development Kit。
  • 建立 Silverlight 應用程式專案並匯入相關的 .dll檔。
  • 建立 Player 控制項。
  • 新增 MediaElement 。
  • 設定 SmoothStreamingSource 屬性。

視訊串流必須先使用 Expression Encoder 3 編碼並部署至已安裝 IIS Media Services 3.0 的 IIS 7.0 上。

slide36
除了視訊串流之外
  • SMF 亦支援邊下載邊播。
  • 使用 Source 屬性指定視訊來源。
  • 務必使用絕對路徑。
slide37
所需的 DLL 檔
  • Microsoft.SilverlightMediaFramework.dll- 內含一些有用的公用程式類別。
  • Microsoft.SilverlightMediaFramework.Player.dll- 內含視訊播放器與相關控制像和視覺化項目。
  • Microsoft.SilverlightMediaFramework.Data.dll- 內含用來簡化外部資料提取作業的公用程式類別。
  • Microsoft.SilverlightMediaFramework.Logging.dll- 內含一個共用的訊息架構。
  • Microsoft.Web.Media.SmoothStreaming.dll -來自 IIS Smooth Streaming Player Development Kit 。
slide39
SMF 實作
  • 我需要匯入所有的 DLL 檔嗎?
  • 我可以自訂視訊播放介面嗎?
    • 範例:使用樣式與範本自訂視訊播放介面。
  • 我可以擴充視訊播放介面嗎?
    • 範例:加入額外的按鈕。
    • 範例:於時間拉桿上加入標記。
    • 範例:顯示自訂的位元速率錶來呈現目前所播放的視訊品質。
    • 範例:移動捲動方塊檢視視訊內容。
  • 我可以自行建立視訊播放介面嗎?
settings api
如何使用 Settings API
  • 用途:將應用程式設定儲存在 Web 伺服器上,於執行階段存取並藉此更新您的應用程式。
  • 務必參考組件 Microsoft.SilverlightMediaFramework.Data.dll
  • 不需要替 XAML 介面中替CoreSmoothStreamingMediaElement設定視訊串流來源。
  • 於網站中建立一個資料夾來存放 XML 設定檔。
  • 建立一個繼承自 SettingsBase 的類別。
  • 替 XAML 介面程式碼後置檔撰寫程式碼,以非同步方式提取設定檔內容。
logging api
如何使用 Logging API
  • 用途:記錄應用程式執行過程,以茲後續分析之用。例如:記錄事件。
  • 務必參考組件Microsoft.SilverlightMediaFramework.Logging.dll
expression blend 3 0
Expression Blend 3.0 超實用技巧總整理
  • 於VS 中快速將一個 .xaml檔開啟於 Expression Blend 中。
  • 大小
    • 如何快速將 Width 與 Height 屬性設定成 Auto。
    • 瞭解 Width 與 Height 屬性之預設值 Auto 所代表的意義。
  • 快速鍵
    • Tab
    • Space+滑鼠拖曳
  • 選取範圍最適化
  • 變更版面配置類型
  • 群組置入
    • 快速加框。
    • 實作展示: PracticeforGroupObject.sln
expression blend 3 01
Expression Blend 3.0 超實用技巧總整理
  • Grid
    • 新增列。
    • 新增欄。
    • 移除列。
    • 移除欄。
    • 高度與寬度的單位:
    • Auto 表示高度或寬度由位於儲存格中之 XAML 物件的大小來決定。
    • Pixel 表示以像素為單位。
    • 星號(*) 表示等比例使用剩餘的空間。您還可以在星號前面加上數字(例如:2*),以便表示要佔用剩餘空間的加權比重。
    • 位於儲存格中的XAML物件可以橫跨列與欄,欲達此目的,請設定 RowSpan與 ColumnSpan附加屬性。
    • ShowGridLines屬性。
    • 試著繪製巢狀化 Grid 。
expression blend 3 02
Expression Blend 3.0 超實用技巧總整理
  • 快速複製
  • 圖案
    • Ellipse(橢圓形)
    • Rectangle(矩形)
    • Line(直線)
    • Polyline(多線段)
    • Polygon(多邊形)
    • Path(路徑)
  • 重要輔助按鍵
    • 持續按著Shift鍵:繪製圓形與正方形
    • 持續按著Alt鍵:由中心點往外擴散
    • 調整矩形的圓角:當指標變成圓角半徑控點 時,開始拖曳控點即可。此外,您只要在拖曳圓角半徑控點 時按住 SHIFT 鍵,就可以單獨調整圓角半 徑 RadiusX 或 RadiusY 。
expression blend 3 03
Expression Blend 3.0 超實用技巧總整理
  • 路徑
    • 繪製由多條直線組成的路徑。
    • 如何結束繪製。
    • 繪製由水平線、垂直線與45度折線組成的非封閉路徑。
    • 繪製曲線組成的路徑。
    • 實作展示: PracticeforPath.sln
    • 實作展示:繪製一個愛心
  • 取消屬性設定,快速將屬性重新設定成預設值。
  • 色彩 
    • 輸入R、G、B與A值。
    • 輸入十六進位值。
    • 使用色彩滴管。
expression blend 3 04
Expression Blend 3.0 超實用技巧總整理
  • 單色筆刷
  • 漸層筆刷
    • 線性漸層
    • 放射漸層
    • 如何加入漸層停駐點
    • 如何移除漸層停駐點
    • 反轉漸層停駐點
    • 如何選取上一個或下一個漸層停駐點
    • 如何使用漸層工具
  • 如何將筆刷儲存成資源
  • 如何使用筆刷資源
    • 透過進階屬性選項來使用
    • 透過筆刷資源頁面來使用
    • 從資源面板中直接拖放至畫板中的物件
expression blend 3 05
Expression Blend 3.0 超實用技巧總整理
  • 如何變更筆刷資源的顏色
    • 在屬性面板中操作
    • 在資源面板中操作
  • 拼貼筆刷(影像筆刷)
    • 快速製作影像筆刷資源
  • 視訊筆刷
    • 使用 Expression Blend 3 來製作視訊筆刷資源
    • 使用 Expression Blend 3 來套用視訊筆刷資源
    • 實作展示: PracticeforVideoBrush.sln
  • 轉換
    • 以每次增加 15 度的方式來旋轉物件。
  • 套用像素著色器
    • 實作展示:如何使用Windows Presentation Foundation Pixel Shader Effects Library
expression blend 3 06
Expression Blend 3.0 超實用技巧總整理
  • 文字
    • 建立多行文字並讓單一或多個文字個別格式化。
    • 如何讓 TextBlock 控制項進入編輯模式。
    • 字型管理員。
    • 如何將 TextBlock 控制項轉換成路徑。
  • 如何快速找到所需的控制項。
  • 按鈕
    • 快速編輯按鈕文字與多行文字。
    • 快速建立多樣化內容的按鈕。
    • 綜合運用上述兩項技巧。
    • 實作展示: PracticeforContentControl.sln
  • ListBox
    • 快速新增 ListBoxItem 。
    • 快速建立多樣化內容的 ListBox 。
    • 實作展示: PracticeforHorizontalListBox.sln
expression blend 3 07
Expression Blend 3.0 超實用技巧總整理
  • 範例資料
    • 定義新的範例資料。 實作展示
    • 從 XML 匯入範例資料。 實作展示
    • 變更套用範例資料之 ListBox 的版面。實作展示
      • ItemTemplate
      • ItemContainerStyle
      • ItemsPanel
    • 變更套用範例資料之 DataGrid 的版面。 實作展示
      • CellStyle
      • ColumnHeaderStyle
      • DragIndicatorStyle
      • DropLocationIndicatorStyle
      • RowDetailsTemplate
      • RowHeaderStyle
      • RowStyle
      • 如何替 DataGrid 新增 DataGridTemplateColumn 並自訂其 CellTemplate
expression blend 3 08
Expression Blend 3.0 超實用技巧總整理
  • 製作選項水平排列的 ListBox。
  • 製作以 WrapPanel 作為 ItemsPanel 的 ListBox
    • 範例: Demo_PhotoAlbum_014.xaml
    • 實作展示:PracticeforWrapPanelListBox.sln
  • 製作圓盤式的 ListBox
    • 範例:Demo_PhotoAlbum_012.xaml
    • 實作展示:04
  • 製作斜面式的 ListBox
    • 範例: Demo_PhotoAlbum_013.xaml
    • 實作展示:PracticeforCollectionFlow.sln
expression blend 3 09
Expression Blend 3.0 超實用技巧總整理
  • 項目對項目繫結
    • 將某一個物件的某一個屬性繫結至另外一個物件的某一個屬性。
    • 使用 ElementName屬性來指定要繫結至哪一個項目。
    • 實作展示:PracticeforE-To-E-Binding.sln
  • 導覽實作
  • 匯入其它應用程式檔案
    • 匯入 Adobe Photoshop 檔案
    • 匯入 Adobe Illustrator 檔案
    • 匯入 Microsoft PowerPoint 檔案
slide52
中文正式版已經全面推出

Available Mix 2009

March 17

  • Silverlight Version 3
  • www.microsoft.com/silverlight
  • Expression Studio 3
  • www.microsoft.com/expression
slide54

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.