米米貓學開發

2011年8月2日星期二

Expression Blend(26)-Tips:Silverlight內建字型

在Expression Blend設計Silverlight應用程式時，若要使用屬性視窗設定字型，有些字型後方加上了一個Silverlight小圖示，代表它是內建的字型。

使用內建字型的好處是，未來不管在任何平台、任何瀏覽器看到的，字看起來都一模一樣。

2011年8月1日星期一

Expression Blend(25)- 漸層與GradientBrush

本文介紹基本漸層使用以及GradientBrush

建立一個Silverlight應用程式(或WPF)
加一個Ellipse

設Fill屬性，由紅色漸層到白色

切換成Radial gradient

切換到Tools的Gradient Tools，試著拉動Gradient Tools上的小圈，並觀察它的變化

選取Fill後方的Advanced Options (方型小方塊) –> Convert to New Resource

設一個key

後續加入Ellipse可以套用Brush Resources，就可以有相同的漸層效果

XAML看起來如下

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="BlendDemo.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <RadialGradientBrush x:Key="Brush1" RadiusY="0.673" RadiusX="0.673" GradientOrigin="0.686,0.347">
            <GradientStop Color="#FFFBF7F7" Offset="0.061"/>
            <GradientStop Color="#FFFD0404" Offset="0.576"/>
        </RadialGradientBrush>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Ellipse Margin="128,96,0,216" Stroke="Black" HorizontalAlignment="Left" Width="168" Fill="{StaticResource Brush1}"/>
    </Grid>
</UserControl>

Expression Blend(24)- 不規則影片撥放視窗

本範例使用Silverlight專案，不適用WPF

若想為自己設計的影片撥放程式設計一個不規則的撥放介面，而不是四方型的，你可以使用Video Brush來達成。

建立一個Silverlight專案
畫三個圓，排列成米老鼠的頭狀

合併三個圓，這樣就很像米老鼠的頭了。

在Project雙擊專案的媒體檔，就會自動加入MediaElement到Artboard

選取Artborad上新加入的MediaElement項目，Make Video Resource

取一個名稱

選米老鼠頭，Fill套用VideoBrush

按F5執行，影片便會自動在不規則的米老鼠區塊撥放

Expression Blend(23)- 文字動畫-使用Visual Brush

若要讓文字具備動畫的效果，可以將文字轉成Image，如此就可以針對Image製做3D的動畫效果，以下說明透過Visual Brush來幫文字做動畫。

建立WPF應用程式
加一個TextBlock到Artboard，設定Foreground顏色與字型大小

將TextBlock轉成Visual Brush

取一個名稱

加一個Image Control到Artboard

將Image轉成3D

在Objects and Timeline視窗，找到位於Image下層的ImageModel套用myBursh

加一個Storyboard

拉動playHead到0秒，你可以自行發揮創意囉。例如，0秒時將Image移動到最左邊

例如，1秒時將Image移動到中間

例如，2秒時將Image做旋轉

結束動畫錄製

Expression Blend(0)-常用快速鍵

TAB鍵，切換ArtBorard到最大化，工具箱會自動隱藏，再按Tab可切換回來 (或按F4)

再按Tab可切換回來 (或按F4)

捲動滑鼠滾輪，放大縮小ArtBorard
CTRL +滑鼠滾輪上下移動ArtBorard
SHIFT +滑鼠滾輪左右移動ArtBorard
按SPACE 暫時切換成手，可以上下左右移動ArtBoard

按F6切換到動畫編輯模式，按F6切換回來

訂閱：文章 (Atom)