<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Corey Schuman &#187; Blend</title>
	<atom:link href="http://www.85turns.com/tag/blend/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.85turns.com</link>
	<description>Silverlight Consultant</description>
	<lastBuildDate>Tue, 26 Apr 2011 20:57:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>Editing a ToolTip Style in Blend 3</title>
		<link>http://www.85turns.com/2009/07/10/editing-a-tooltip-style-in-blend-3/</link>
		<comments>http://www.85turns.com/2009/07/10/editing-a-tooltip-style-in-blend-3/#comments</comments>
		<pubDate>Fri, 10 Jul 2009 20:41:11 +0000</pubDate>
		<dc:creator>Corey</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Blend]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[tooltip]]></category>

		<guid isPermaLink="false">http://www.85turns.com/2009/07/10/editing-a-tooltip-style-in-blend-3/</guid>
		<description><![CDATA[ToolTips are a great way to display mouse over information, while increasing your applications accessibility.&#160; UI designers are increasingly demanding the use of rich overlays in applications.&#160; Meaning, instead of a standard Tooltip, a designer might want to add polish by adding animation or having a rich UI to a overlay.&#160; Initially you may consider [...]]]></description>
			<content:encoded><![CDATA[<p>ToolTips are a great way to display mouse over information, while increasing your applications accessibility.&#160; UI designers are increasingly demanding the use of rich overlays in applications.&#160; Meaning, instead of a standard Tooltip, a designer might want to add polish by adding animation or having a rich UI to a overlay.&#160; Initially you may consider wiring up a <strong>MouseEnter</strong> and <strong>MouseLeave</strong> event, then handle an overlay through the code; however, I would encourage you to take a look (or second look) at the Tooltip.</p>
<p>Out of the box, styling a Tooltip in Blend is a manual process.&#160; The below screenshots/descriptions show how to do this.</p>
<ol>
<li>First, add a Tooltip; do this in the Xaml view to look like the below Xaml.<a href="http://www.85turns.com/blog/wp-content/uploads/2009/07/image.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/07/image-thumb.png" width="587" height="118" /></a>       </li>
<li>Next, click, in Xaml, on the <strong>&lt;ToolTip </strong>tag.&#160; This will change the breadcrumb at the top of the Artboard to show <strong>[ToolTip]</strong>.&#160; Click on the breadcrumb and select <strong>Edit Template </strong>&gt; <strong>Edit a Copy</strong>.
<p><a href="http://www.85turns.com/blog/wp-content/uploads/2009/07/image1.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/07/image-thumb1.png" width="480" height="469" /></a>       </li>
<li>After creating the Template, there is a chance your Artboard will look like the below image.&#160; You’ll notice that you’re in the context of editing the ToolTip template without visuals.&#160; If you experience this, go to step 4 to see how you can edit the visuals.
<p><a href="http://www.85turns.com/blog/wp-content/uploads/2009/07/image2.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/07/image-thumb2.png" width="600" height="455" /></a>       </li>
<li>To edit the ToolTip, click the Resources tab, locate the ToolTip style, right click and select Edit.&#160; The Artboard will show the visuals for the ToolTip.&#160; You can now edit the ToolTip like any other control.
<p><a href="http://www.85turns.com/blog/wp-content/uploads/2009/07/image3.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://www.85turns.com/blog/wp-content/uploads/2009/07/image-thumb3.png" width="537" height="298" /></a> </li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.85turns.com/2009/07/10/editing-a-tooltip-style-in-blend-3/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Animations in Blend</title>
		<link>http://www.85turns.com/2008/05/01/animations-in-blend/</link>
		<comments>http://www.85turns.com/2008/05/01/animations-in-blend/#comments</comments>
		<pubDate>Thu, 01 May 2008 17:51:14 +0000</pubDate>
		<dc:creator>Corey</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[Blend]]></category>

		<guid isPermaLink="false">http://simplesilverlight.wordpress.com/?p=77</guid>
		<description><![CDATA[The addition of the animation engine in Windows Presentation Foundation (WPF) allows designers and developers to animate objects without using third party software. Before getting into an example of how to work with animations, it is important to know the basics. Animations are time based. After setting a target value the animation interpolates the values [...]]]></description>
			<content:encoded><![CDATA[<p>The addition of the animation engine in Windows Presentation Foundation (WPF) allows designers and developers to animate objects without using third party software.  Before getting into an example of how to work with animations, it is important to know the basics.</p>
<ul>
<li>Animations are time based.  After setting a target value the animation interpolates the values from the current value to the target value.</li>
<li>Storyboards are the container holding animations.  Each Storyboard can hold multiple animations.</li>
<li>Animation types include colors, numeric properties, points, and strings.</li>
</ul>
<p>A simple example of a ball bouncing will show how to create animations in Blend.</p>
<p>Tip<br />
Press the Shift key while drawing your ellipse.  This ensures a perfect circle.</p>
<p><strong>Create the Storyboard</strong><br />
First things first, create a ball.  Use the ellipse tool from the toolbox and draw a circle on the Artboard.  The next step is to create a Storyboard to hold the ball dropping animation.  On the Interactions panel click the plus sign, Figure 1.  A box will pop up asking what you would like to name your animation.  Everyone has their own naming conventions.  For simplicity, this example will stick with the default Storyboard1 name.</p>
<p>Figure 1<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig1.png"><img class="alignnone size-medium wp-image-78" src="http://simplesilverlight.files.wordpress.com/2008/05/fig1.png?w=271" alt="" width="271" height="181" /></a></p>
<p>After creating the Storyboard you will notice the interface has changed.  The Interactions panel expanded, a timeline appeared, and a red border lines the Artboard.  This lets you know it is time to animate.</p>
<p><strong>Animation workspaces</strong><br />
Blend accommodates for two different views when designing animations, the Design workspace and the Animation workspace.  To switch between views click Window -&gt; Activate Workspace -&gt; Design Workspace/Animation Workspace.  Figure 2 and Figure 3 show the difference between the two views.</p>
<p>Figure 2- Design workspace<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig2.png"><img class="alignnone size-medium wp-image-79" src="http://simplesilverlight.files.wordpress.com/2008/05/fig2.png?w=300" alt="" width="300" height="197" /></a></p>
<p>Figure 3 &#8211; Animation workspace<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig3.png"><img class="alignnone size-medium wp-image-80" src="http://simplesilverlight.files.wordpress.com/2008/05/fig3.png?w=300" alt="" width="300" height="197" /></a></p>
<p>Keyboard shortcut<br />
F6 toggles between the Design Workspace and the Animation Workspace</p>
<p><strong>Add animation to the Stoyboard</strong><br />
Now the Storyboard has been created, add the ball dropping animation.  Click on the first second in the timeline, and then move the ball to the bottom of the screen.  Notice a white dot appears on the timeline across from the ellipse.  This indicates a keyframe has been created for that element at that time.  Click on the play icon above the timeline to test the animation.</p>
<p>Figure 4<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig4.png"><img class="alignnone size-medium wp-image-81" src="http://simplesilverlight.files.wordpress.com/2008/05/fig4.png?w=300" alt="" width="300" height="203" /></a></p>
<p><strong>What values are changing &#8211; Transforms</strong><br />
The value that was changed when you moved the ball down was the Y value of the TranslateTransform.  Transforms are used for positioning, sizing, and rotating.  There are four types of transforms: Translate, Scale, Skew, and Rotate.  When moving or sizing in the Artboard, Blend changes the value of the transforms by default.  It is possible to animate the Height and Width properties, but you will have to do this by using the property window instead of changing the size of the object on the Artboard.<br />
Every UI element has a Transform.  You can find the Transform palette in the properties window.  There are six tabs Translate, Rotate, Scale, Skew, Center Point, and Flip in that order.</p>
<p>Figure 5 – Transform palette<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig5.png"><img class="alignnone size-medium wp-image-82" src="http://simplesilverlight.files.wordpress.com/2008/05/fig5.png?w=279" alt="" width="279" height="122" /></a></p>
<p><strong>Make the bounce look natural</strong><br />
Up to this point you only have a ball that falls.  There are three actions left to make the ball bounce look more natural: add easing, change the shape of the ball once it hits the ground, and make the ball bounce back up.</p>
<p><strong>Easing</strong><br />
Currently the ball is falling at the same rate, making the animation feel unnatural.  In general to make animations more natural you need to add acceleration and deceleration.  In Blend this is done by Easing.  Click on the white dot on the timeline.  The Easing palette appears in the properties window.  Click and drag the bottom left dot until you get a curve similar to that in Figure 6.  With this curve, the ball will slowly drop then pick up speed as it approaches the ground, simulating gravity.</p>
<p>Figure 6<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig6.png"><img class="alignnone size-medium wp-image-83" src="http://simplesilverlight.files.wordpress.com/2008/05/fig6.png?w=261" alt="" width="261" height="300" /></a></p>
<p><strong>The ball hits the ground</strong><br />
Think of a racquetball hitting the ground.  Once on the ground it changes shape, even if only for a split second.  Along with simulating gravity this makes the bouncing ball animation more natural.  Just like creating the first animation, click on timeline around 1.2 seconds.  Then on the Artboard make the height of the ball smaller.  Press play.</p>
<p>Figure 7 &#8211; Ball hitting the ground<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig7.png"><img class="alignnone size-medium wp-image-84" src="http://simplesilverlight.files.wordpress.com/2008/05/fig7.png?w=201" alt="" width="201" height="300" /></a></p>
<p><strong>Finally, make it bounce </strong><br />
Storyboards have the ability to automatically reverse themselves along with repeating the animation.  To make the ball bounce you will make the Storyboard reverse and have the behavior repeat.  On the Interaction panel click the title of the Storyboard, Figure 8.  In the properties window the Common Properties for the Storyboard appear, Figure 9.  Check AutoReverse and set the RepeatBehavir to Forever.  Press Play<br />
Figure 8<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig8.png"><img class="alignnone size-medium wp-image-85" src="http://simplesilverlight.files.wordpress.com/2008/05/fig8.png?w=300" alt="" width="300" height="160" /></a></p>
<p>Figure 9<br />
<a href="http://simplesilverlight.files.wordpress.com/2008/05/fig9.png"><img class="alignnone size-medium wp-image-86" src="http://simplesilverlight.files.wordpress.com/2008/05/fig9.png?w=276" alt="" width="276" height="74" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.85turns.com/2008/05/01/animations-in-blend/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
	</channel>
</rss>

