locked
Microsoft Expression in Action Website template RRS feed

  • Question

  • Hi , Can Anyone help me or giving me some direction to find an example or source code(template like) for "Microsoft Expression in action" website ?

    the url for website is "http://www.microsoft.com/expression/in-action/"

    dont know what effect they are using  :( but those are pretty cool.

    btw im new in Expression blend.

    any help would be appreciated :)

     

     

     

    Sunday, January 22, 2012 9:04 PM

Answers

  • The flipping is done by changing the 3d settings in either a storyboard or via visual states, you can try this yourself by creating a storyboard, and over time changing the Transform -> Rotation -> x/y/z settings, the 2nd block of settings under transform in SL.

     

    You would probably also need to have another object that becomes visible in the middle of the storyboard, so you can hide one and show the other.

     

    Here is a simple example using 2 rectangles, one is red, the other blue. At the start, the blue one is rotated -90 degrees so it is essentially invisible. The storyboard rotates the red one to 90 degrees and then rotates the blue one back to 0 so it becomes visible. If you paste the xaml below into a SL app (and fix the class name to match your project) you can try this out to see how it works.

     

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="SilverlightApplication23.MainPage"
    	Width="640" Height="480">
    	<UserControl.Resources>
    		<Storyboard x:Name="Flip_and_expand">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="68"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="68"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="82"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="82"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="68"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="112"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="82"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="126"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-90"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.88"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.88"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Rectangle x:Name="rectangle" Fill="Red" HorizontalAlignment="Left" Height="100" Margin="49,31,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5">
    			<Rectangle.Projection>
    				<PlaneProjection/>
    			</Rectangle.Projection>
    			<Rectangle.RenderTransform>
    				<CompositeTransform/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Rectangle x:Name="rectangle1" Fill="Blue" Margin="49,31,491,349" Stroke="Black" Width="100" Height="100" RenderTransformOrigin="0.5,0.5">
    			<Rectangle.Projection>
    				<PlaneProjection RotationX="-90"/>
    			</Rectangle.Projection>
    			<Rectangle.RenderTransform>
    				<CompositeTransform/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    	</Grid>
    </UserControl>
    


     


    • Edited by Chuck HaysModerator Monday, January 23, 2012 3:46 PM Forgot the end of a sentence.
    • Marked as answer by Ahad porkar Monday, January 23, 2012 5:02 PM
    Monday, January 23, 2012 3:45 PM
    Moderator

All replies

  • The flipping is done by changing the 3d settings in either a storyboard or via visual states, you can try this yourself by creating a storyboard, and over time changing the Transform -> Rotation -> x/y/z settings, the 2nd block of settings under transform in SL.

     

    You would probably also need to have another object that becomes visible in the middle of the storyboard, so you can hide one and show the other.

     

    Here is a simple example using 2 rectangles, one is red, the other blue. At the start, the blue one is rotated -90 degrees so it is essentially invisible. The storyboard rotates the red one to 90 degrees and then rotates the blue one back to 0 so it becomes visible. If you paste the xaml below into a SL app (and fix the class name to match your project) you can try this out to see how it works.

     

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="SilverlightApplication23.MainPage"
    	Width="640" Height="480">
    	<UserControl.Resources>
    		<Storyboard x:Name="Flip_and_expand">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="68"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="68"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="82"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="82"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="68"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="112"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="82"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="126"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-90"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.88"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="rectangle1">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.88"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Rectangle x:Name="rectangle" Fill="Red" HorizontalAlignment="Left" Height="100" Margin="49,31,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5">
    			<Rectangle.Projection>
    				<PlaneProjection/>
    			</Rectangle.Projection>
    			<Rectangle.RenderTransform>
    				<CompositeTransform/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<Rectangle x:Name="rectangle1" Fill="Blue" Margin="49,31,491,349" Stroke="Black" Width="100" Height="100" RenderTransformOrigin="0.5,0.5">
    			<Rectangle.Projection>
    				<PlaneProjection RotationX="-90"/>
    			</Rectangle.Projection>
    			<Rectangle.RenderTransform>
    				<CompositeTransform/>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    	</Grid>
    </UserControl>
    


     


    • Edited by Chuck HaysModerator Monday, January 23, 2012 3:46 PM Forgot the end of a sentence.
    • Marked as answer by Ahad porkar Monday, January 23, 2012 5:02 PM
    Monday, January 23, 2012 3:45 PM
    Moderator
  • Thanks For response , yeah its kinda what i want with some minor change :)
    i made my project with the code your provided and it works well , but there is 1 more question :

    when i apply Image to fill the rectangle  with this code

     

     

    <Rectangle.Fill>
    <ImageBrush ImageSource="1.jpg" Stretch="Fill"/>
    </Rectangle.Fill>


     

    , in start up and also in X rotate the image get kinda blury and quality of picture drops , is it possible to have the same quailty as the one showing in solution ? btw the picture quality is fine in solution.


    thank you

    Monday, January 23, 2012 5:02 PM
  • What is the resolution of 1.jpg that you are using? Can you post the rest of your xaml so I can look at the transforms used? I am thinking maybe the image is set to a small size and a scale transform is used, possibly making it blurry?
    Monday, January 23, 2012 5:04 PM
    Moderator
  • Thanks for reply The problem fixed automaticly :O just inserted the second rect with Bitmap Fill properties and it goes ok ! the funny thing is that , now both of the rec filled with image is ok !! i think its kinda bug for blend 5 preview edition

    btw i used the source above with modification of

    <ImageBrush ImageSource="1.jpg" Stretch="Fill">

    thanks for help :)

    Monday, January 23, 2012 6:47 PM