| Comments

Last week I was wanting to do something on my site sort of a ‘breaking news’ style banner that would span the entire site width but only when I wanted it too – based on a cookie or something else.  And I didn’t want to do something server side, because I was sick of doing stuff like that.

Not having played with jQuery, I thought I’d take a dive.  Prior to MIX09, I’d been testing something that the MIXOnline team had been toying with, which has just been released: Glimmer.  Glimmer is described as a jQuery Interactive Design Tool.  A helper for those like me who know nothing about it.  Sure, jQuery has a ton of resources, and my Twitter peeps came through helping me navigate some of the things that aren’t glaringly obvious for noobs like me :-).

But Glimmer got me started, and I think that’s the point.  I had an overall HTML structure already and had the div element that I wanted to work with in jQuery – my goal was to animate it in a ‘breaking news’ sort of manner (or at least what’s in my head when I think of that concept).  I opened up my HTML in Glimmer and went to work.  I simply added the action (the function I wanted to trigger), then pointed it to the element to target.  Here’s what my simple Glimmer UI action setup looked like:

Glimmer UI

I clicked save and it created a JavaScript file for me with the completed code:

   1: jQuery(function($) {
   3: function loadBreakingNews(event)
   4: {
   5:      $("#info").css("top","-50px");
   6:     $("#info").animate({"top":0}, 894, "easeOutBounce", null);
   7: }
   9: loadBreakingNews();
  11: });

Sure, to you jQuery pros, this looks simple, but this tool helped me quickly use a design-time tool to generate this without previous knowledge of jQuery.  Now, I’ve learned a few things about jQuery since my first incarnation – all of which took 2 seconds with Glimmer.  I decided I wanted to use the built-in “slideDown” feature in jQuery.  Some things like this aren’t supported in Glimmer yet, but simple things are…and quite frankly, the combination of Y position animation and an easing function accomplished the same goal.

I made a few hand-modifications to fit my needs (checking for cookies to trigger the banner, etc), but Glimmer got me started right away figuring things out quickly…it was awesome.  I think it comes with a free ShamWow as well, I’m not sure, but I swear Karsten told me that. :-)  Check out Glimmer today if you are new (or even seasoned) to jQuery.  There is a plugin model I haven’t explored, but check out the Glimmer project site for more information.

Next maybe I should explore working with jQuery and Silverlight as I know there is more to jQuery than animations and I think it would make a helpful library for the HTML interop layer.

| Comments

Two new resources came to my attention recently that could be helpful resources for Flash developers wanting to learn Silverlight.  The first has been out there for a bit actually, but the other is new.  Let’s start with the new one, (video).  As Adam Kinney said this week while in meetings in Redmond, “because we need another web site.”

Project Rosetta describes itself as:

Project Rosetta is a site dedicated to helping designers and developers build applications in Silverlight while taking advantage of skills they already know.

There are two articles up there now, The New Iteration and From Flash to Silverlight.  The newest article involves a Flash maestro, .  The articles aren’t blog posts, but rather more in-depth discussions of various aspects of design/development where your skills can be re-used while doing development for Silverlight.

The second resource is a blog called Shine Draw from Terence Tsang and describes itself as Your Flash and Silverlight Repository.  Terence has 6 years of Flash experience, but even concedes he is not as much of an expert as he aspires to be.  This site is great in that he combines the knowledge of Flash with the concepts of image and animation to see how things are done in each respective technology.  Terence starts with a concept/question to himself (i.e., 3D image navigation) and then goes about creating that sample in both Flash and Silverlight…with the goal of an same experience in each technology.  He provides code for both (Flash 9/AS3 and Silverlight 2/C#) as well as documents the time it took to do each example.  It’s really an intriguing read and some helpful nuggets of code as well.  Oh yeah, and he takes requests.

I hope you find these useful, or at least interesting…I certainly have.

| Comments

just yesterday tim sneath posted a video on creating video with overlays.  as i saw that come in my reader, i was just finishing testing my code for a screencast i was recording on creating video with timed overlays.  i figured, what the heck, you can never have enough tutorials, and mine was demonstrating a different method for accomplishing the same thing.

the scenario i was thinking of came to mind when i was lazy and watching television.  i saw a commercial where the person in the commercial said "if you call the number that is at the bottom of your screen" and then the number popped up.  i thought this concept would make a good tutorial on using markers in media files.  for advertisers, this would allow media to be re-used, but leverage different messaging in the form of language, promotional offers maybe,  especially in the web space, you'd probably want to provide specific marketing depending on the placement of the media advertisement.  or at least that was my thinking...

Creating Video with Timed Overlaysanyhow, so i put the screencast up and added it to my TimCast feed.  it demonstrates first using (preview) to import a quicktime movie file recorded with my isight camera and placing media markers within the media, then encoding the file to a consumable format by .  the next step is leveraging expression blend 2 (preview) to render the media and add event handling looking for the media markers and responding to them with different animations and functions.

it's about 19 minutes, and might be some good peripheral learning.  i'm hoping to do more of these, so any suggestions of topics is appreciated...feel free to leave a comment about a suggested topic.

you can also view the video on channel9 if you don't like subscribing to podcast feeds.