Foundation Silverlight 3 Animation- P5 doc

And the event handler code to call the new animation goes outside of the I]ejL]ca$% structor: The first Lkejp=jei]pekj in the IkraLkejpQl storyboard has the following P]ncapLnklanpu:...

STORYBOARDS AND ANIMATIONS

6. Add the animation to the storyboard and the storyboard to the H]ukqpNkkp object:

IkraNecdp*?deh`naj*=``$=jei%7

H]ukqpNkkp*Naokqn_ao*=``$IkraNecdp(IkraNecdp%7

7. All that’s left is to add an event listener and an associated event handler Add the event listener

at the bottom of the I]ejL]ca$% constructor

8. If you are using the method described earlier, Visual Studio will create the event handler tion for you All you need to do is add the code that calls the storyboard:

story-Y transform of the object

10. Add the following code to the project, just after IkraNecdp*?deh`naj*=``$=jei%7 Notice that the new animation’s name is u=jei and the P]ncapLnklanpu has been adjusted to affect the Y transform of the Rectangle object

IkraNecdp*Behh>ad]rekn9Behh>ad]rekn*Opkl7

If you’d like to take a look at the final version of the code described here, it’s in the

DoubleUsingKeyframesCompleted project.

CHAPTER 3

ColorAnimation

Now, let’s take a look at how color animations can be implemented via code The ColorFromToWithCode

project illustrates how to work with ?khkn=jei]pekj objects In this example, we will create a

?khkn=jei]pekj that turns a red ellipse blue when the IkqoaAjpan event is raised The storyboard equivalent for this animation looks like this:

>hqa?khkn*OapR]hqa$Opknu^k]n`*P]ncapJ]iaLnklanpu(Na`Ahheloa%7

>hqa?khkn*OapR]hqa$Opknu^k]n`*P]ncapLnklanpuLnklanpu(

jasLnklanpuL]pd$$Od]la*Behh%*$Okhe`?khkn>nqod*?khkn%%%7

4. In the previous example, `kq^ha data types were being used In this example, data of type

?khkn will be manipulated To change a color fill for an object, define the target color as a color from alpha, red, green, and blue color values Note that the code shown here is using

an=nc^ value (alpha, red, green, blue) to specify a color, whereas the storyboard produced in Blend utilizes a hex value =nc^ color values get their value from four byte values (0 through 255), separated by commas This is probably a familiar format for you if you’ve worked in almost any paint program Once a color has been defined, it can be assigned to the Pk property

STORYBOARDS AND ANIMATIONS

7. The event handler is placed after the closing curly brace of the I]ejL]ca$% constructor method:lner]parke`Na`Ahheloa[IkqoaAjpan$k^fa_poaj`an(IkqoaArajp=ncoa%

w

Pqnj>hqa*>acej$%7

y

Compile and run this project, and place the pointer on the red ellipse The object’s color will shift

to blue Take a few minutes to add another storyboard and ?khkn=jei]pekj that will turn the ellipse’s color to red when the IkqoaHa]ra event is raised If you need a little help, look in the

1. Open the PointFromToWithCode project in Visual Studio Open the I]ejL]ca*t]ih*_o file for editing

2. As with @kq^ha=jei]pekj and ?khkn=jei]pekj, everything begins with the declaration of a storyboard Before the I]ejL]ca$% constructor, add the following code to declare a storyboard calledIkraLkejp@ksj:

lner]paOpknu^k]n`IkraLkejp@ksj9jasOpknu^k]n`$%7

CHAPTER 3

3. Inside the I]ejL]ca$% constructor, the P]ncapJ]ia property for the storyboard is set to the Na`L]pd object This is a deviation from the previous examples where the target was set on the individual animations While it is also acceptable to set the target for each Lkejp=jei]pekjobject, all three animations affect the same object, so it saves a couple of lines of code doing

it this way

Opknu^k]n`*OapP]ncapJ]ia$IkraLkejp@ksj(Na`L]pd%7

4. Next, each of the three Lkejp=jei]pekj objects is created Let’s go through each of them in order Begin by declaring a new Lkejp=jei]pekj object for the first point Place this code just below the storyboard declaration before the I]ejL]ca$% constructor:

8. Finish up by adding the animation to the storyboard:

IkraLkejp@ksj*?deh`naj*=``$L-=jei%7

9 Points 2 and 3 from the XAML example are coded in the same way Start by declaring two more

Lkejp=jei]pekj objects before the I]ejL]ca$% constructor:

One of the nuances in working with Lkejp=jei]pekj types is that an animation to return the point to

its starting location does not return the values to 0, as was done in the examples that used

transla-tions Instead, the points need to be returned to the locations that are specified in the XAML tion of the object Here’s the code for the object:

CHAPTER 3

Let’s do a quick walkthrough to see what happens when the points are returned to 0,0

14. Add a second Opknu^k]n` object to the project above the I]ejL]ca$% constructor:

STORYBOARDS AND ANIMATIONS

20. And the event handler code to call the new animation goes outside of the I]ejL]ca$% structor:

The first Lkejp=jei]pekj in the IkraLkejpQl storyboard has the following P]ncapLnklanpu:

CHAPTER 3

21. From the P]ncapLnklanpu, we know that the L->]_g animation is working with segment 1, and needs the coordinates for point 1, which are 44.7715263366699,200 (which we will clean up to 45,200) Update the Pk property for the L-=jei>]_g animation as shown:

overwhelm-Remember that storyboards are just containers for animations, and animations are containers for keyframes I talked about the three main types of animations provided by Silverlight—`kq^ha for manipulating many of an object’s properties; ?khkn for changing an object’s fill color using a series of four 1-byte values to represent the alpha, red, green, and blue channels; and Lkejp for moving the points that make up paths

Each animation type has two variations: from/to animations move an object from one position to another, while animations using keyframes define a series of keyframes that contain positions to which

an object will move With keyframe animations, there are different methods of interpolating the ment from keyframe to keyframe Easing functions allow you to utilize predefined mathematical func-tions to create interesting motions on your objects Linear interpolation will move an object smoothly from keyframe to keyframe in a linear fashion Spline keyframes define ease, which describes how an object might accelerate or decelerate as it approaches or leaves a keyframe Discrete keyframes cause

move-an object to hold the position of the last keyframe until the next keyframe is reached

We also took a good look at how storyboards and animations can be created entirely with code This is useful if you need to create animations on the fly or create a reusable generic function that produces animations for you

As you gain some experience with storyboards and animations, you will find that they become easier

to manipulate In Chapter 4, we will take a look at a variety of animation techniques that make use of the methods described in Chapters 2 and 3

In this chapter, we’re going to take a little time and look at some ways to animate objects using the techniques covered already The projects presented here should help open the door for you a bit when it comes to thinking through the different ways to work with objects that you want to include in your own animations

Converting objects to paths

Any shape object you work with in Blend can be converted to a path This can be used if you want to manually deform an object or text outside of the standard deformations available via the built-in transforms Let’s take a look at how to go about converting a couple of text objects to paths and creating some storyboards to deform them

Open the ObjectToPath project for Chapter 4 It contains two text elements—one

says TEXT, and the other WARP Both text elements in this project are currently TextBlock objects, meaning that the text is currently live and can be edited Once a text object has been converted to a path, the text will no longer be editable

ANIMATION TECHNIQUES

Chapter 4

CHAPTER 4

1 Click the TxtText element in the Objects and Timeline

panel, and then Ctrl-click the TxtWarp object so that both items are selected

2 Right-click the grouped elements in the Objects and Timeline panel, and select Path ¢ Convert to Path from the pop-up menu, as shown in Figure 4-1 Blend will con-vert both text elements to paths and update the Objectsand Timeline list and the artboard Note that when an object is converted to a path, its type changes, and Blend will change the name of the text objects to [Path] in the

Objects and Timeline list

3 It’s a good idea to rename the two text elements to

something meaningful in order to keep track of them, so rename the two paths to TxtText and TxtWarp

4 Create a new storyboard, and move the timeline play

head to 1 second

5. Select the TxtText element on the Objects and Timeline panel, and press A to change to the

Direct Selection tool The control points that make up the path will become visible, allowing you

to manipulate them You can now modify the objects in whatever way you’d like Figure 4-2 shows a quick-and-dirty bulge deformation

Figure 4-2 Simulating a bulge deformation on a Path object

Figure 4-1 Select Path¢ Convert to Path to

convert objects to editable paths

ANIMATION TECHNIQUES

Converting objects to paths with the intention of deforming them works well either as a design technique,

or for animation, as we’ve done here If you’d like to take a closer look at the final animation shown here,

look at the ObjectToPathCompleted project in Chapter 4 Opknu^k]n`- is the animated deformation

One thing you may find helpful when deforming text is to use a tool like Photoshop or Illustrator to create an image of text deformed in a way you like You can then add the image to Blend as a back-ground layer and lock it from selection in the Objects and Timeline panel in order to avoid accidentally moving it Once the image is in place, you can move the timeline play head and start moving the control points for the object

If you find yourself needing to animate individual letters, it will be necessary to create a text object for each letter, and then convert each one to a path After that, the process is the same

Ghosting effects

Ghosting is an effect that is used in a lot of interactive applications—you click a button or an element, and a copy of the element scales up and fades out over a second or two This lets users know that the action they took was recognized The effect can also be used when an application first loads in order

to draw attention to a particular part of the interface

To create this type of effect, a copy of an object is created and hidden Event listeners on the original object are used to capture user input When the desired action takes place on the original, the copy

is unhidden and animated

The GhostingEffects project contains a TextBlock that mimics an About Us text menu item and a

gra-dient-filled ellipse When performing this action on a text object, remember that TextBlock objects have theirSe`pd and Daecdp properties set to =qpk, so any transforms you apply may look as though they do not originate from the correct center point To correct this, add an actual value to the Se`pd and Daecdpproperties of your TextBlock In the example project, the text object already has height and width values

1. Once the project is open, use Ctrl+C and Ctrl+V to copy and paste the TxtAboutUs object in the

Objects and Timeline list The new object will paste as TxtAboutUs_Copy

2. Create a new storyboard named =^kqpQo[?he_ga`, and move the timeline play head to 1

3. Use the Scale tab on the Transform pane to change both the x and y scale values for the

TxtAboutUs_Copy object to 3

4 Enter0 in the Opacity field

5. ClickPlay to preview the storyboard The copy of the text object should scale up to three times its original size as it fades out

6. Close the storyboard, and change the object’s visibility to Collapsed on the Appearance pane This will effectively hide the object from view until it is needed

7. To add event listeners, select TxtAboutUs in the Objects and Timeline list, and click the Events

icon In the MouseLeftButtonUp field, type AboutUs_MouseUp, and press Enter Visual Studio should open with the appropriate function already added:

lner]parke`=^kqpQo[IkqoaQl$k^fa_poaj`an(Ikqoa>qppkjArajp=ncoa%

w

y

9. Next, the event handler needs a bit of code to play the animation The storyboard was called

=^kqpQo[?he_ga`, and you should already know how to make storyboards play from previous examples

ani-11. In Blend, press F11 to enter XAML view, and locate the =^kqpQo[?he_ga` storyboard

12. Attach an event listener to the ?kilhapa` event for the storyboard that calls a function called

ANIMATION TECHNIQUES

18. Create a new storyboard called Na`>]hh[?he_ga` and move the timeline play head to 1

19. On the RedBall_Copy object, set the x and y scale values to 3 and the Kl]_epu to 0

20. Test the animation to be sure it works as expected, and then close the storyboard

21. Set the Reoe^ehepu of RedBall_Copy to ?khh]loa` to hide it until needed

22. Next, add the event listeners to the original object Select the RedBall element in the Objectsand Timeline list, and click the Events icon

23. Add an event handler called Na`>]hh[IkqoaQl to the IkqoaHabp>qppkjQl event listener

24. In Visual Studio, wire up the event just as you did for the text object:

each A finalized version of the code shown here is available in the GhostingEffectsCompleted project.

Figure 4-3 Scaling/fading effects applied to a TextBlock and an Ellipse

be using event listeners for IkqoaAjpan and IkqoaHa]ra to play the necessary animations

Figure 4-4 An image of a yellow flower that will be blurred with the built-in blur filter

Open the ImageBlur project from Chapter 4 to follow along with this example This project already

has the basic structure in place, which consists of the H]ukqpNkkp Canvas element and an Image ment named Flower The intended action for this project is that when the user moves the pointer over the image, it will scale up as it comes into focus When the pointer leaves the image, the image will scale back down and become blurred

ele-The effects filters are available on the Appearance pane in Blend This pane is shown in Figure 4-5

ANIMATION TECHNIQUES

Figure 4-5 Bitmap effects filters

are accessible through the ance pane of the Properties panel

Appear-in Blend

1. Begin by selecting the Flower element in the

Objects and Timeline panel, and then click the

New button on the Appearance pane to add a

new bitmap effect to the image object

2. In the Select Object window that opens, pick the

BlurEffect item, as shown in Figure 4-6

The flower image will become blurred as the effect is

applied with the default radius of 5 Blend added the

effect for you in the XAML If you take a look at the

XAML code, you will see that the image now contains

the following code:

8Ei]ca*Abba_p:

8>hqnAbba_p+:

8+Ei]ca*Abba_p:

You will also notice that the Appearance pane

has changed to reflect the available properties

for the selected effect In this case, a Radius

field is available, as shown in Figure 4-7

Figure 4-7 The Radius property of

the blur effect that was added to the

flower image

3. Create a new timeline called Flower_Enter

4. Move the timeline play head to 5 seconds

5. With the Flower element selected, change both the X and Y scale fields on the Transform pane

to2

Figure 4-6 To add a blur to an object, select the

BlurEffect item as shown