Nhóm Sport: Nguyễn Công Cường (*) Trịnh Xuân Quảng Đinh Ngọc Duy Graphics and Animation in SilverLight

AGENDA 1234 Graphic Animation Deep Zoom Multimedia 5 Style

1.Graphic Describes how to draw and paint using Silverlight. Shapes and Drawing Brushes VideoBrush Geometries Transforms 3-D Effects (Perspective Transforms) Imaging Layout

1.1 Shapes and Drawing Shape Objects 1.Silverlight provides a number of ready-to-use Shape objects, including Ellipse, Line, Path, Polygon, Polyline, and Rectangle. 2.Shape objects share the following common properties: Stroke: Describes how the shape's outline is painted. StrokeThickness: Describes the thickness of the shape's outline. Fill: Describes how the interior of the shape is painted. Data properties to specify coordinates and vertices, measured in device-independent pixels.

1.1.2 Using Paths and Geometries The Path class enables you to draw curves and complex shapes. These curves and shapes are described by using Geometry objects. To use a Path, you create a Geometry and use it to set the Path object's Data property. The LineGeometry, RectangleGeometry, and EllipseGeometry classes describe relatively simple shapes.

1.1.3 Transforming Shapes Transform objects can be used to transform shapes in a two- dimensional plane The different types of transformations include rotation (RotateTransform), scale (ScaleTransform), skew (SkewTransform), and translation (TranslateTransform).

1.1.4 Layout Silverlight includes a derived suite of Panel elements that enable many complex layouts. Common scenarios, such as stacking elements, can easily be achieved using the StackPanel element, while more complex layouts are possible using a Grid.

1.1.5 Examples Shapes Example Shapes Object Using Path and Geometries Transforming Shapes

1.2 Brushes 1.You can use Silverlight brush objects to paint with solid colors, linear gradients, radial gradients, and images. 2.Some kinds of brushes  Painting an Area with a Solid Color  Painting an Area with a Gradient Linear Gradients Radial Gradients  Specifying Transparent or Partially Transparent Gradient Stops  Painting with Images  Painting with Video

1.3 VideoBrush A VideoBrush paints an area with video. A VideoBrush is a type of Brush object similar to a LinearGradientBrush or an ImageBrush. You can use a VideoBrush to paint the Fill of a Rectangle, the Background of a Canvas, or the Foreground of a TextBlock.

1.3 VideoBrush VideoBrush Properties VideoBrush provides the following additional properties: SourceName: The name of the MediaElement that supplies the brush's video. Stretch: One of the following values that describes how the video content is stretched to fit the painted area: None, Stretch, Uniform, and UniformToFill. The default value is Stretch.

1.3 VideoBrush MediaElement and VideoBrush

1.4 Transform A Transform defines how to map, or transform, points from one coordinate space to another coordinate space. You can use the two-dimensional (2-D) Transform classes in Silverlight to rotate, scale, skew, and move (translate) objects.

1.4 Transform You can apply 3-D effects to any Silverlight UIElement using what are called "perspective transforms." RotateX = “-35” RotateY = “-35” RotateZ = “-45”

2. Animation Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. The brain perceives the group of images as a single changing scene. Storyboard: Controls animations with a timeline, and provides object and property targeting information for its child animations. Silverlight provides two categories of animation types: From/To/By animations and key-frame animations.

2. Animation Classification  From/To/By animation DoubleAnimation ColorAnimation PointAnimation  Key-frame animation DoubleAnimationKeyFrame ColorAnimationKeyFrame PointAnimationKeyFrame

2. Animation

The following table shows several common animation types and some properties that they are used with.

2.1 Key-frame animations Key-frame animations enable you to animate using more than two target values, and control an animation's interpolation method. Like a From/To/By animation, a key-frame animation animates the value of a target property, but a single key-frame animation can create transitions among any number of target values. Unlike a From/To/By animation, a key-frame animation has no From, To, or By properties with which to set its target values. Instead, you describe a key-frame animation's target values by using key-frame objects.

2.2 Key-Frame Animation Types

2.3 Example Animation FromToAnimationOpacity AnimationFromTo DemoAnimation DemoAnimationKeyFrame

3. DeepZoom Deep Zoom provides the ability to interactively view high- resolution images. You can zoom in and out of images rapidly without affecting the performance of your application. Deep Zoom enables smooth loading and panning by serving up multi-resolution images and using spring animations.

3.1 Deep Zoom Features Deep Zoom uses multi-resolution images to achieve a high frame-rate and fast open experience for even very large images. Deep Zoom uses spring animations, which gives users the impression of a smooth movement (pan or zoom) around image. Deep Zoom images only support the image files supported by the BitmapImage class.

3.2 Adding Interactivity to a Deep Zoom Image After you load a Deep Zoom image, the user cannot yet interact with the image. To enable interaction, you need to handle MultiScaleImage events and use code to provide the zooming and panning functionality.

4. Multimedia 4.1 Supported File Types  For audio, Silverlight supports the following: Windows Media Audio (WMA), versions 7, 8, and 9 MP3, with fixed or variable bit rates from 8 to 320 kbps  When it comes to video, Silverlight supports the follow standards: Windows Media Video 7 (WMV1) Windows Media Video 8 (WMV2) Windows Media Video 9 (WMV3) Windows Media Video Advanced Profile, non-VC-1 (WMVA) Windows Media Video Advanced Profile, VC-1 (WMVC1)

4.2 MediaElement Objects In Silverlight, all the audio and video functionality is built into a single class: the MediaElement. Adding media to a page is as simple as adding a MediaElement to your markup and providing a Uniform Resource Identifier (URI) to the media to play. The following example creates a MediaElement and sets its Source property to the URI of a video file.

4.3 MediaElement Properties The MediaElement class provides several media-specific properties: AutoPlay: Specifies whether the MediaElement should begin playing automatically. The default value is true. IsMuted: Specifies whether the MediaElement is silenced. A value of true mutes the MediaElement. The default value is false. Stretch: Specifies how video is stretched to fill the MediaElement object. Possible values are None, Uniform, UniformToFill, and Fill. The default is Fill. Volume: Specifies the volume of the MediaElement object's audio as a value from 0 to 1, with 1 being the loudest. The default value is 0.5.

4.4 Timeline Markers (Synchronization Points)  A timeline marker is metadata associated with a particular point in a media file.  MediaElement uses TimelineMarker objects to represent the collection of markers returned by the Markers property. Time: A TimeSpan structure that specifies the time when the marker is reached. Type: A string that specifies the marker's type. This value can be any user-defined string. Text: A string that specifies the marker's value. This value can be any user-defined string.

4.5 MediaElement State You can detect MediaElement states by using the CurrentState property and detect state changes by using the CurrentStateChanged event. The current state of a MediaElement (Buffering, Closed, Error, Opening, Paused, Playing, or Stopped) can have an impact on users who consume your media.

4.6 MediaElement State VideoMedia demo

5. Styles in Silverlight A Style is a collection of property values that you can apply to an element in one step. A style allows us to encapsulate control property values as a reusable resource. Silverlight supports only explicit styles. Styles are similar to CSS (Cascading Style Sheet) standard in HTML markup. We can set different properties for an element and store it in a name and then we can re-use it in our application. Before going to create a style, we should decide where to put it. We can store the Style in Resource property of a Control.

Every Style Element requires a Key, so that we can refer it anywhere using their Key. It supports only named types. It requires TargetType, which is the type of an element on which you r applying a style. There are three ways to use Styles: You can apply styles to particular page. You can apply styles to particular Control. You can apply styles globally.

5.1 Applying Styles to a particular page First we need to define the style in UserControl.Resource. A Setter element is a definition of one property to set on the target object. A Setter has a two Property one is Property naming the property to set on the target and another one is Value property defining the value to set on the property. Here is your Page.xaml code: entationhttp://schemas.microsoft.com/winfx/2006/xaml

Applying: Then you can apply the style which you have created using the Style property of a Button as shown in the below code.

5.2. Applying Styles to a particular Control To use Style for a particular Control, place the style directly in the control. Here, no need to mention the x:Key attribute.

entationhttp://schemas.microsoft.com/winfx/2006/xaml

5.3. Applying Styles Globally: To use the Styles globally, i.e., you can use the Styles in any xaml pages throughout your application, for that you need to define the Style in Application.Resource in App.xaml file:

xaml file: ml/presentationhttp://schemas.microsoft.com/winfx/2006/ xaml

Link demo: Browser/index.htm#/?sref=animation_ovw_intro

THANK FOR LISTENING !!! Team Sport is number one