First of all thank you very much for your wonderful response for my last four articles on basic lap around articles on Silverlight 3 Beta, now today I am going for fifth one.
We all know how Rich UI and amazing animations can be made using Silverlight Technology, Silverlight is all about richness and jazz on web, so how can Ads [Advertising] will left behind?? , Here you can download Silverlight Advertising Creation Kit which is actually targeted to Silverlight 2, but since we already started our journey for Silverlight 3, so I am directly modifying and going to discuss few samples given in that kit. Below is mix application ad where I have mixed “createTAG” and “ExpandAd” projects together from the SACK Kit. Idea behind is not to replicate something is already there, but to make you aware, so that you can implement and give a way to your wild imaginations and create some knock-out Ads.
Download SACK Bits :
Download SACK Publishing and Serving Guide :
We see few logos or Images everywhere on sites occupying small small sections and are continuously catching our attention, when we click on them, it redirect to us at desired location.To give example, I created small Microsoft MVP ad which redirects me to nomination page and also shows URL on my Page like this :
Once I click on this Image, it will redirect me to destination URL like this :
You can see that it redirect me to MVP nomination URL and I have also printed URL on my page in Blue color, looks simple?? yes, it is damm simple, This is what they are calling as SACK ;)
Now lets come to our actual example where I am mixing above example with some animation. I am carrying same bits and images, So I am using some of the images which are already in SACK kit examples like Halo Banner etc.
XAML Code :
<Grid x:Name="LayoutRoot" Background="Transparent" MouseLeave="LayoutRoot_MouseLeave">
<Grid.Clip>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="0,0">
<LineSegment Point="728,0"/>
<LineSegment Point="728,90"/>
<LineSegment Point="0,90"/>
</PathFigure>
</PathGeometry>
</Grid.Clip>
<Grid x:Name="Expandable" Height="360" Margin="0,-271,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Image Source="TechEd.png" MouseLeftButtonUp="SwirledBackground_MouseLeftButtonUp" Width="600" Height="600" Margin="0,90,0,0" Opacity=".50" Stretch="Fill" x:Name="SwirledBackground" />
</Grid>
<Image Source="haloBanner.jpg" Margin="0,0,0,270" x:Name="BannerImage" MouseMove="BannerImage_MouseMove"/>
</Grid>
Animation for Expanding image like this :
<UserControl.Resources>
<Storyboard x:Name="AdExpand">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Expandable" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="271">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00.7000000" Value="728,360">
<SplinePointKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplinePointKeyFrame.KeySpline>
</SplinePointKeyFrame>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00.7000000" Value="0,360">
<SplinePointKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplinePointKeyFrame.KeySpline>
</SplinePointKeyFrame>
</PointAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="AdCollapse">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Expandable" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="271"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0">
<SplineDoubleKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplineDoubleKeyFrame.KeySpline>
</SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00.7000000" Value="728,90">
<SplinePointKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplinePointKeyFrame.KeySpline>
</SplinePointKeyFrame>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" BeginTime="00:00:00">
<SplinePointKeyFrame KeyTime="00:00:00.7000000" Value="0,90">
<SplinePointKeyFrame.KeySpline>
<KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
</SplinePointKeyFrame.KeySpline>
</SplinePointKeyFrame>
</PointAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
Right now I have not taken much pain to re-tweak that animation, but yes it can be done as we want it to behave.
C# Code :
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Browser;
namespace SL_ExpandAd
{
enum ExpandableState { Expanded, Collapsed };
public partial class MainPage : UserControl
{
private int AdState = (int)ExpandableState.Collapsed;
public String adurl = null;
public MainPage(StartupEventArgs e)
{
InitializeComponent();
adurl = e.InitParams["TechEdIndia"].ToString();
}
private void LayoutRoot_MouseLeave(object sender, MouseEventArgs e)
{
if (AdState == (int)ExpandableState.Expanded)
{
AdCollapse.Begin();
AdState = (int)ExpandableState.Collapsed;
}
}
private void BannerImage_MouseMove(object sender, MouseEventArgs e)
{
if (AdState == (int)ExpandableState.Collapsed)
{
AdExpand.Begin();
AdState = (int)ExpandableState.Expanded;
}
}
private void SwirledBackground_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (adurl != String.Empty)
{
HtmlPage.Window.Navigate(new Uri(adurl), "_blank");
HtmlPage.Window.Alert(adurl);
}
else
{
HtmlPage.Window.Alert("Sorry, TechEd 2009 India Registration is closed !!");
}
}
}
}
Now lets understand C# code, firstly enum ExpandableState { Expanded, Collapsed }; will maintain state whether it is collapsed or not and that is passed as initial values to another variable AdState like this :
private int AdState = (int)ExpandableState.Collapsed;
Then, public String adurl = null; which is right now null, basically it will hold URL which are passing through “initParams” [Hope you all aware of usage of initParams and how to set it in HTML test page of Silverlight application.], Right now I have declared it like this :
<param name="initParams" value="TechEdIndia=http://www.microsoft.com/india/teched2009/" />
This basically holds like KV pair, you have “TechEdIndia” as key and url is value. we are then fetching that URL like this :
adurl = e.InitParams["TechEdIndia"].ToString();
Remember, I made some changes in Page constructor and in App.xaml.cs like :
private void Application_Startup(object sender, StartupEventArgs e)
{
this.RootVisual = new MainPage(e);
}
I am passing “e” as argument and in MainPage.xaml.cs it is changes to :
public MainPage(StartupEventArgs e) { … }
Using statement
HtmlPage.Window.Navigate(new Uri(adurl), "_blank"); I am redirecting user to the url which we got from initParam and also throwing the same in alert box, as far as pulling that image down and stuff, will be taken care by animation. So final output will be like this :
Above is the first initial screen once I start my Ad, when I take mouse over that Halo image, by animation given above, it will pull another image like this :
You can see that “TechEd” image is now rolled down from top Halo image on mouse over.Now I have set URL of TechEd Portal using initParam in my HTML and I have already given explanation about it above, so after clicking on this image it will redirect me to TechEd portal and also will throw an alert like this :
You can see a small alert showing url below the instance of IE and in IE Instance you can clearly see the TechEd portal. Well thats all about Ads in Silverlight from me, soon I am ending this series with Effects and Deep linking, then I will start with other untalked scenarios. Hope you will find this useful.
Vikram.
2 comments:
Nice article dude !!! Keep going..!!
Hope to read many more of your creations.
Thanks Vijay !!
Post a Comment