About 6 months ago I wrote a little piece about how to create simple animations. It would seem that the thing people liked best about that post was not the animation itself but the way in which I included it inline with text. So here’s a little post on how to create that effect.
Creating this look is incredibly easy. While working on another post here at I built this sample, so now I’ll share it with you. I almost feel silly even explaining this in a post as it’s so simple, but hey, I’ll go for it anyway.
This example is just a hyperlink to Ascentium but has a couple of animations that are beyond what you can accomplish with HTML/CSS.
Silverlight App
Your Silverlight application itself is created just like you would any other and can be as simple or complex as you want. The key thing to remember is that the app needs to be as small as possible. I’ve found that about 12 pixels works great for the height and whatever width fits your purpose.
Embedding it inline
This part is also pretty easy if you know HTML at all. All you need to do is to include the object tag within the text that is being displayed. As you can see from the following sample, the height and width are also defined on the object itself.
Considerations
There are a few things to be aware of when adding Silverlight inline like this, some of which are demonstrated above.
First, no Silverlight. Be sure to include a “downlevel” experience for viewers that do not have Silverlight installed. This can be the standard “Download Silverlight” button if you like but be careful as it will probably not fit in the space allotted. What I chose to do in this case was to just show a text link to the same destination, this way the user has a consistent performance although with a less fancy link.
Second, whitespace. Some browsers, like Internet Explorer, will not honor whitespace before or after the object. The fix for this is simple, and you can see it above as well. What I did was just use a non-breaking space before and after the object. Another solution would be to build the padding into your application itself.
Next, background colors. I built this sample with a white background but sometimes that may not suit your needs. If you need a transparent background you need to set the background to be transparent in both the Silverlight app and in the object params. Further, you also need to set windowlessmode to true in the object params. This can have a negative effect if you are running video but otherwise would be fine.
Also, text scaling. By using this technique to display text inline with HTML, you lose the browsers ability to scale the text for the user. You may be able to create a workaround for this limitation but I’m not going into that at the moment.
Finally, text & link. This sample has the text (Ascentium) and the link destination (www.ascentium.com) both hard-coded into the application. It would also be possible to load one or both of those from initialization parameters set on the object. This would allow you to have a Silverlight app that has a cool effect on it and use it in multiple places.s
