Angel Beats! PV6 タイトルをExpression Blend で作ってみた

AB PV6 タイトルをExpression Blend で作ってみた

Expression Blendで、３０分ぐらいあれば、ノーコーティングで作れます。

もともとのデザインがあって、その通りWPFで作るのは簡単だけど、ゼロからデザインするのは、本当にデザインセンスが問われますね。

<Window
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
x:Class=”WpfApplication6.MainWindow”
x:Name=”Window”
Title=”MainWindow”
Width=”640″ Height=”480″>
<Window.Resources>
<Storyboard x:Key=”OnLoaded1″>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)” Storyboard.TargetName=”image”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”227″/>
<EasingDoubleKeyFrame KeyTime=”0:0:0.5″ Value=”5.667″/>
<EasingDoubleKeyFrame KeyTime=”0:0:2″ Value=”5.667″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”5.667″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)” Storyboard.TargetName=”image”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”26″/>
<EasingDoubleKeyFrame KeyTime=”0:0:0.5″ Value=”5.667″/>
<EasingDoubleKeyFrame KeyTime=”0:0:2″ Value=”5.667″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”5.667″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)” Storyboard.TargetName=”viewbox”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”0″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”20″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)” Storyboard.TargetName=”viewbox”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”0″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”20″/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty=”(TextElement.Foreground).(SolidColorBrush.Color)” Storyboard.TargetName=”textBlock”>
<EasingColorKeyFrame KeyTime=”0″ Value=”#0087CEFA”/>
<EasingColorKeyFrame KeyTime=”0:0:1″ Value=”LightSkyBlue”/>
<EasingColorKeyFrame KeyTime=”0:0:2″ Value=”LightSkyBlue”/>
<EasingColorKeyFrame KeyTime=”0:0:3″ Value=”#0087CEFA”/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)” Storyboard.TargetName=”textBlock”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”10″/>
<EasingDoubleKeyFrame KeyTime=”0:0:0.5″ Value=”1″/>
<EasingDoubleKeyFrame KeyTime=”0:0:2″ Value=”1″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”1″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)” Storyboard.TargetName=”textBlock”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”10″/>
<EasingDoubleKeyFrame KeyTime=”0:0:0.5″ Value=”1″/>
<EasingDoubleKeyFrame KeyTime=”0:0:2″ Value=”1″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”1″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)” Storyboard.TargetName=”textBlock”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”3″/>
<EasingDoubleKeyFrame KeyTime=”0:0:1″ Value=”0″/>
<EasingDoubleKeyFrame KeyTime=”0:0:2″ Value=”0″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)” Storyboard.TargetName=”textBlock”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”1″/>
<EasingDoubleKeyFrame KeyTime=”0:0:1″ Value=”0″/>
<EasingDoubleKeyFrame KeyTime=”0:0:2″ Value=”0″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.Opacity)” Storyboard.TargetName=”image”>
<EasingDoubleKeyFrame KeyTime=”0″ Value=”1″/>
<EasingDoubleKeyFrame KeyTime=”0:0:1″ Value=”1″/>
<EasingDoubleKeyFrame KeyTime=”0:0:2″ Value=”1″/>
<EasingDoubleKeyFrame KeyTime=”0:0:3″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent=”UIElement.MouseLeftButtonDown”>
<BeginStoryboard x:Name=”OnLoaded1_BeginStoryboard” Storyboard=”{StaticResource OnLoaded1}”/>
</EventTrigger>
<EventTrigger RoutedEvent=”FrameworkElement.Loaded”>
<BeginStoryboard Storyboard=”{StaticResource OnLoaded1}”/>
</EventTrigger>
</Window.Triggers>

<Grid x:Name=”LayoutRoot”>
<Image x:Name=”image” Margin=”0,95,-82,-22″ Source=”CS001.jpg” Stretch=”Fill” RenderTransformOrigin=”0.5,0.5″ HorizontalAlignment=”Right” Width=”290″>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Viewbox x:Name=”viewbox” Margin=”215,166,268,158″ RenderTransformOrigin=”0.5,0.5″>
<Viewbox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Viewbox.RenderTransform>
<Viewbox.Effect>
<BlurEffect/>
</Viewbox.Effect>
<Ellipse Fill=”#00F4F4F5″ Height=”100″ Stroke=”LightSkyBlue” Width=”100″/>
</Viewbox>
<TextBlock x:Name=”textBlock” Margin=”161,199,161,160″ TextWrapping=”Wrap” FontFamily=”AR DESTINE” FontSize=”21.333″ Foreground=”LightSkyBlue” TextAlignment=”Center” RenderTransformOrigin=”0.5,0.5″>
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform><Run Language=”ja-jp” Text=”Chief Architect”/><LineBreak/><Run FontSize=”53.333″ Language=”ja-jp” Text=”Uchukamen”/></TextBlock>
</Grid>
</Window>