Microsoft Silverlight: Difference between revisions

From Citizendium
Jump to navigation Jump to search
imported>Paul Nikolas Phoa
imported>Paul Nikolas Phoa
Line 35: Line 35:
The more advance types of animations in Silverlight incorporate a set of KeyFrames. '''DoubleAnimationUsingKeyFrames''', '''ColorAnimationUsingKeyFrames''', '''PointAnimationUsingKeyFrames''', and '''ObjectAnimationUsingKeyFrames''' are the advance types of animations. Each of these types of animations animates the value of its object property (such as double, point, color, and object) along with a set of KeyFrames over a specified duration.
The more advance types of animations in Silverlight incorporate a set of KeyFrames. '''DoubleAnimationUsingKeyFrames''', '''ColorAnimationUsingKeyFrames''', '''PointAnimationUsingKeyFrames''', and '''ObjectAnimationUsingKeyFrames''' are the advance types of animations. Each of these types of animations animates the value of its object property (such as double, point, color, and object) along with a set of KeyFrames over a specified duration.


An example of simple animation created in Silverlight 2.0 Beta 2 can be found here http://nikolas6.com/SilverlightSample/SilverlightSample.html.
An example of simple animation created in Silverlight 2.0 Beta 2 can be found in this link http://nikolas6.com/SilverlightSample/SilverlightSample.html.


[[Image:QuestionMark2.jpg|right|thumb|200px|{{#ifexist:Template:QuestionMark2.jpg/credit|{{QuestionMark2.jpg/credit}}<br/>|}}QuestionMark2.jpg]]
[[Image:QuestionMark2.jpg|right|thumb|200px|{{#ifexist:Template:QuestionMark2.jpg/credit|{{QuestionMark2.jpg/credit}}<br/>|}}QuestionMark2.jpg]]
Line 42: Line 42:
The easiest way to create a Silverlight animation is by using Microsoft Expression Studio, in particular Expression Blend 2.5 June Preview (latest version of Expression Blend), and Microsoft Visual Studio 2008. The Expression Blend is used to design the layout and most of the stuffs related to the XAML, while the Visual Studio 2008 is used to edit the supported C# code.  
The easiest way to create a Silverlight animation is by using Microsoft Expression Studio, in particular Expression Blend 2.5 June Preview (latest version of Expression Blend), and Microsoft Visual Studio 2008. The Expression Blend is used to design the layout and most of the stuffs related to the XAML, while the Visual Studio 2008 is used to edit the supported C# code.  


In the case of the sample animation above, it uses two still images, which are then shown in sequence to create the illusion of a motion. The first step in doing this is to create a new Silverlight 2 Application project in Expression Blend. It will automatically generate two XAML files called App.xaml and Page.xaml. Page.xaml contains a UserControl and Grid (named LayoutRoot by default) objects. Behind the Page.xaml, there is a file called Page.xaml.cs. The two still images are then imported to the project folder, which can be done by either selecting the "Add Existing Item" option under "Project" or dragging the images to the Expression Blend.  
In the case of the sample animation above, it uses two still images, which are then shown in sequence to create the illusion of a motion. The first step in doing this is to create a new Silverlight 2 Application project in Expression Blend. It will automatically generate two XAML files called App.xaml and Page.xaml. Each of these files contains a C# code behind, App.xaml.cs and Page.xaml.cs. Furthermore, Page.xaml contains a UserControl and Grid (named "LayoutRoot") objects by default.  
A Storyboard object is needed to create an animation. So, the next step is to add a new Storyboard to the project. The Storyboard has a time line property which allows user to set how objects behave for a specific duration. At time 00:00:00 (hour:minute:second) set QuestionMark2.jpg file to be visible and QuestionMark1.jpg file to be not visible. Then, at time 00:00:01, change the setting to QuestionMark2.jpg file be not visible and QuestionMark1.jpg file be visible. And finally, at time 00:00:02, set QuestionMark2.jpg file back to be visible and QuestionMark1.jpg file to be not visible. With this sequence of behavior, the two still images create an illusion of one image that has a motion. To have the behavior repeated several times or forever, Storyboard has a property called "RepeatBehavior" which can be set to 1x, 2x, 3x, and forever. Once the animation is set up, the Storyboard must be set to begin the time line.
Once the project files are created, the two still images are then imported to the project folder, which can be done by either selecting the "Add Existing Item" option under "Project" or dragging the images into the Expression Blend project. The images are then inserted into the Grid (LayoutRoot).  
A Storyboard object is needed to create an animation. So, the next step is to add a new Storyboard to the project. The Storyboard has a time line property which allows user to set how objects behave for a specific duration. At time 00:00:00 (hour:minute:second) set QuestionMark2.jpg file to be visible and QuestionMark1.jpg file to be not visible. Then, at time 00:00:01, change the setting to QuestionMark2.jpg file be not visible and QuestionMark1.jpg file be visible. And finally, at time 00:00:02, set QuestionMark2.jpg file back to be visible and QuestionMark1.jpg file to be not visible. With this interchanging sequences of behavior, the two still images create an illusion of one image that has a motion, just like the example found in this link http://nikolas6.com/SilverlightSample/SilverlightSample.html. To have the behavior repeated several times or forever, Storyboard has a property called "RepeatBehavior" which can be set to 1x, 2x, 3x, and forever. Once the animation is set up, the Storyboard must be set to start the time line. This can be done by editing the code behind Page.xaml.cs. Right click the Page.xaml and select "Edit in Visual Studio". This will open Visual Studio and the solution in which the Page.xaml belongs to. In this case, to start the Storyboard, the code behind should look like the followin:
 
namespace SilverlightApplication2
{
public partial class Page : UserControl
{
public Page()
{
// Required to initialize variables
InitializeComponent();
                        Storyboard1.Begin();  // Start the Storyboard
}
}
}
 
Once the modification is done in the code behind, save, rebuild and test the solution.


====How to put Silverlight into a web page?====
====How to put Silverlight into a web page?====

Revision as of 13:56, 15 August 2008

This article is developing and not approved.
Main Article
Discussion
Related Articles  [?]
Bibliography  [?]
External Links  [?]
Citable Version  [?]
 
This editable Main Article is under development and subject to a disclaimer.
Nuvola apps kbounce green.png
Nuvola apps kbounce green.png
This article is currently being developed as part of an Eduzendium student project. The project's homepage is at CZ:CIS 700 Special Topics 2008. One of the goals of the course is to provide students with insider experience in collaborative educational projects, and so you are warmly invited to join in here, or to leave comments on the discussion page. However, please refrain from removing this notice.
Besides, many other Eduzendium articles welcome your collaboration!



Microsoft Silverlight, previously known as Windows Presentation Foundation/Everywhere, is Microsoft's flagship cross-platform, cross-browser web client runtime for developing rich interactive applications such as graphics, animations and video playback. Silverlight extends the web development technique beyond the limitations of traditional HTML or JavaScript.

History

Silverlight aims to compete with Adobe Flash and the presentation components of AJAX. It also competes with Sun MicrosystemsJavaFX, which was launched a few days after Silverlight.[1] By Microsoft's description[2], Silverlight has these features:

  1. Compelling Cross-Platform User Experiences
  2. Flexible programming model with collaborative tools
  3. Efficient, lower-cost delivery, and more capable media solution
  4. Connected to Web, servers, and services

The first edition Silverlight 1.0 has been released on September, 2007, which is the first milestone for Microsoft's ambition on rich internet media. [3] However, the limitation is still there. Because JavaScript is not flexible enough, so Microsoft proposed Silverlight 1.0 Alpha later. In November, 2007 Microsoft announced that they are renaming Silverlight 1.1 to Silverlight 2.0. Silverlight version 2 (currently available as an beta version) supports languages other than JavaScript, including .NET Framework languages such as C# and Visual Basic. [4]

Technical Perspective

Why Silverlight Is Important?

Silverlight will be the platform of choice for developers who build rich Internet applications. It makes Flash/Flex look like an absolute toy. [5]

Features

The CLR

Multimedia

Services

Mobile

Examples

How to make an animation using Silverlight?

Creating an animation in Silverlight is different from Flash. The first step to animate an object in Silverlight is to create a Storyboard. Storyboard is an object in Silverlight which controls animations with a timeline. It is equipped with interactive methods to start, stop, pause and resume an animation. There are several type of animations in Silverlight. DoubleAnimation, ColorAnimation, and PointAnimation are the basic type of animations.

DoubleAnimation animates the value of a double property between two target values using linear interpolation over a specified duration. An example of DoubleAnimation is the type of animation which makes use of the opacity property of the object, since opacity property is of type double.

ColorAnimation animates the value of a color property between two target values using linear interpolation over a specified duration. This type of animation is used to animate the colors of its objects.

PointAnimation animates the value of a point property between two target values using linear interpolation over a specified duration. An animation that moves objects or enlarges objects is the type of animation which falls into PointAnimation category.

The more advance types of animations in Silverlight incorporate a set of KeyFrames. DoubleAnimationUsingKeyFrames, ColorAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, and ObjectAnimationUsingKeyFrames are the advance types of animations. Each of these types of animations animates the value of its object property (such as double, point, color, and object) along with a set of KeyFrames over a specified duration.

An example of simple animation created in Silverlight 2.0 Beta 2 can be found in this link http://nikolas6.com/SilverlightSample/SilverlightSample.html.

(CC) Image: Ganggang Hu
QuestionMark2.jpg
(CC) Image: Ganggang Hu
QuestionMark1.jpg

The easiest way to create a Silverlight animation is by using Microsoft Expression Studio, in particular Expression Blend 2.5 June Preview (latest version of Expression Blend), and Microsoft Visual Studio 2008. The Expression Blend is used to design the layout and most of the stuffs related to the XAML, while the Visual Studio 2008 is used to edit the supported C# code.

In the case of the sample animation above, it uses two still images, which are then shown in sequence to create the illusion of a motion. The first step in doing this is to create a new Silverlight 2 Application project in Expression Blend. It will automatically generate two XAML files called App.xaml and Page.xaml. Each of these files contains a C# code behind, App.xaml.cs and Page.xaml.cs. Furthermore, Page.xaml contains a UserControl and Grid (named "LayoutRoot") objects by default. Once the project files are created, the two still images are then imported to the project folder, which can be done by either selecting the "Add Existing Item" option under "Project" or dragging the images into the Expression Blend project. The images are then inserted into the Grid (LayoutRoot). A Storyboard object is needed to create an animation. So, the next step is to add a new Storyboard to the project. The Storyboard has a time line property which allows user to set how objects behave for a specific duration. At time 00:00:00 (hour:minute:second) set QuestionMark2.jpg file to be visible and QuestionMark1.jpg file to be not visible. Then, at time 00:00:01, change the setting to QuestionMark2.jpg file be not visible and QuestionMark1.jpg file be visible. And finally, at time 00:00:02, set QuestionMark2.jpg file back to be visible and QuestionMark1.jpg file to be not visible. With this interchanging sequences of behavior, the two still images create an illusion of one image that has a motion, just like the example found in this link http://nikolas6.com/SilverlightSample/SilverlightSample.html. To have the behavior repeated several times or forever, Storyboard has a property called "RepeatBehavior" which can be set to 1x, 2x, 3x, and forever. Once the animation is set up, the Storyboard must be set to start the time line. This can be done by editing the code behind Page.xaml.cs. Right click the Page.xaml and select "Edit in Visual Studio". This will open Visual Studio and the solution in which the Page.xaml belongs to. In this case, to start the Storyboard, the code behind should look like the followin:

namespace SilverlightApplication2 { public partial class Page : UserControl { public Page() { // Required to initialize variables InitializeComponent();

                       Storyboard1.Begin();  // Start the Storyboard

} } }

Once the modification is done in the code behind, save, rebuild and test the solution.

How to put Silverlight into a web page?

Market

Why and Where to use Silverlight?

Market Share

Allies and Competitors

The relationship of Silveright to other applications

Competitors

Future Developments

The problem is everything else. Can Microsoft truly be trusted to commit themselves to a cross-platform environment with an equally rich experience across platforms? History says no. And even it could be trusted the fact is that it’s google that is showing leadership where Microsoft should be. Its google thats taking the fight to Viacom. If any company in the tech industry is in a position to dictate to old media the terms of fair use and stand up and tell them - not ask - that the new paradigm is more sharing not less, it’s Microsoft. But it doesn’t, instead it tries to push DRM and kowtow to the media industry for some inexplicable reason. What we need from Microsoft is to stop acting like the rest of the tech industry is its enemy and assume a position of leadership. Instead, Microsoft comes out with another kickass developer suite, its been doing that since the 80’s, why you find that impressive is beyond me.

Reference

  1. Why Silverlight? Microsoft Explains… http://www.simonwhatley.co.uk/why-silverlight-microsoft-explains
  2. Learn Silverlight http://msdn.microsoft.com/en-us/silverlight/bb187401.aspx
  3. People can use the XAML Syntax markup language and JavaScript to create applications http://msdn.microsoft.com/en-us/library/cc189007(vs.95).aspx
  4. Silverlight 2.0 release date looking like August. http://blogs.zdnet.com/Stewart/?p=702
  5. Michael Arrington "Why Silverlight Is Important" http://www.techcrunch.com/2007/05/01/take-time-to-understand-silverlight-its-important/