Yesterday at PDC09 Scott Guthrie announced that Silverlight 4 Beta is available for download; which is pretty exciting news! Silverlight 3 just shipped in July; so the Silverlight team must have been crazy busy at work to come up with new features in such a short time.

There have been numerous blog posts since yesterday about Silverlight 4 and I decided to just post info about a few interesting pointers; instead of rewriting the same story. Here are my pointers:

Silverlight 4 Beta Release Whitepaper

Silverlight 4 Training Course on Channel9

What’s new in Silverlight 4 Beta on Channel9

Silverlight 4 Beta videos on Silverlight.Net

Silverlight Cream #735 - with links to all the cool articles/blogs about SL4 Beta

I am especially happy about the Microphone support coming with Silverlight 4!  I was working on an app, which required client voice recording and I had postponed that feature for a while, since I didn’t wanted to do it in Flash. There is already a video on Silverlight.Net about Microphone and Webcam support by Tim Heuer. No more excuses not to finish my app!

You can also find many tweets about blog articles tagged with #SL4; there have been zillions of tweets as of yesterday. In the meantime, I discovered a website called sl4.org; SL4 meaning “Shock Level Four” … Well, I guess, having a SL4 Beta release in such a short time could be considered as some sort of shock.

The Grid container is sometimes compared to the HTML Table; but  I’d rather consider the Grid as a matrix and with this in mind, I decided to add some matrix magic to it. You can check out the demo by clicking on the image. The action starts, once you move over the “?“.

My initial plan was to create dynamic squares in each grid cell by moving along the edges of the grid until I would reach the center. The movement’s direction is clockwise and each directional movement is as follows:

RIGHT: Move through columns until you have reached the right edge; increment columns, row=top-edge

DOWN: Move through rows until you have reached the bottom edge; increment rows, column=right-edge

LEFT: Move through columns until you have reached the left edge; decrement columns; row=bottom-edge

UP: Move through rows until you have reached the top edge; decrement rows; column = right-edge

So basically without any optimiziations and no recursion, this is a pretty straightforward algorithm. There are 4 for-loops that race through the matrix in 4 different directions. The boundaries narrow once a round has been completed. But no wonder,  when I ran the application, the operation was too fast to actually see anything else than a solid color grid. So as to delay the event, I had to add some kind of timer to delay the event. For the UI thread I figured out I needed to use the Dispatcher class and DispatcherTimer to fire the dynamic creation/placement of the rectangles. This is the timer definition:

DispatcherTimer timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 0, 0, 1);

timer.Tick += new EventHandler(timer_Tick);
timer.Start();

Since the timer is processed at a specified interval of time, the actual flow of the app had to change too. Therefore I based each movement and iteration on a conditional statement, which the timer’s event handler (timer_Tick) would evaluate.

Once the timer started working, I modified the code to add a reverse the movement from the center to the edges and vice-versa. This made my app run as long as the browser window is open. In case of any form of web-dizzyness, I also included a stylized toggle button to stop/start the action! The little controller button is inspired by a sample rotating button I had seen in the “Adding a Rotating Button to the Swivel Behavior Demo” article by John Papa.

When all inward/outward movements seemed to cooperate, it was time to add a stylish touch to the dynamic squares. With a modern fashion sense of less is more, the squares only have rounded corners and are assigned random colors. You can pick random colors with the following method that I used (random is an instance of the Random class):

private Color pickRandomColor(){

byte redChannel = Byte.Parse(random.Next(256).ToString());
byte greenChannel = Byte.Parse(random.Next(256).ToString());
byte blueChannel = Byte.Parse(random.Next(256).ToString());
byte transparent = Byte.Parse(“255″);
Color randomColor = Color.FromArgb(transparent,redChannel,greenChannel,blueChannel);
return randomColor;
}

For the reverse and forward movement I didn’t recreate the squares; they just get a new random color. That’s why the movements also seem to speed up after the first round. Each rectangle has a unique name, based on the grid cell they are placed at, which makes it very easy to locate each square when needed. Another fine detail to mention is probably the HandVetica font, I used in each TextBlock.

The final addition to the app was to flip squares randomly based on a second timer; which starts when all squares have been created. The flip action uses a Storyboard and adds a PlaneProjection to the selected square. It flips the square 180 degrees on its RotationYProperty and back, so that each square is neatly back at its original place when the animation is completed.  The  “PlaneProjection and Perspective 3D” article on SwitchOnTheCode was very helpful when I lost perspective trying to rotate/reverse/flip the squares!

So after all, what’s the functionality of  a Jungle of Squares, you might ask? Well;  what is the Matrix – any way?

I had my daily dose of brainy exercise and a few extra colors to light up my day. Hope you have a colorful time with the demo too!

I wanted to test the Adobe Photoshop (PSD) File import feature in Expression Blend3 for a while now and it  just worked flawlessly.  So I decided to take my plan one step further and create a sample Splash screen with my illustration files. You can find the final result by clicking on the image:

In order to observe the loading experience and get a chance to test a simple animation, I included two sample video files in the project. Therefore the initial loading is incredibly slow. The animation has no complicated tricks; it only manipulates the opacity property and runs forever in autoreverse mode. Actually it runs until you are hypnotized by all the blinking!

As for the progress bar, I basically used the same idea explained in the “Splash Screen in Silverlight 3“  article by  Diptimaya Patra. I track the download progress with a “onSourceDownloadProgressChanged” Javascript function and increase the size of the colored content based on the progress percentage.

A few tips+tricks

Splash Screen – Design

Your Splashscreen Xaml will be placed in your Web project folder, which will make it  available for display while your Silverlight app is downloading (loading). But once you try to open that file in Blend to do some fixes, you will discover that you don’t have the option to display it in design mode. In fact, while playing around with the animation, I copied my Splash screen Xaml file back and forth between the Web and Silverlight project folders. Not very practial, yet it works.

File Paths

The blinking belle is made up of several illustrations. When I placed the splash screen Xaml in my Web project folder, I had to reset the images’ source info and point the file path to the Web project folder.

Browser Cache

Despite enlarging the project file to test the splash screen,  it is sometimes necessary to clear the browser cache. In fact, once the content is cached by the browser, the slow loading experience might completely disappear.

Event Triggers

When you create an animation Storyboard through the Objects and Timeline panel in Expression Blend 3, the Storyboard will be placed as a resource in your Container (Grid/Canvas etc.). Since there is no option to start the Storyboard explicitly (except with Javascript), the Storyboard has to be attached to an object  with an event trigger. In this particular example, once the Grid is loaded the event trigger starts the animation:

<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
    <BeginStoryboard>
      <Storyboard x:Name="Storyboard1" RepeatBehavior="Forever" AutoReverse="True">
        ........
        ........
        {ANIMATION Definitions}
        .......
        ........
      </Storyboard>
    </BeginStoryboard>
</EventTrigger>
</Grid.Triggers>

For further information on Silverlight Splash Screen scenarios and displaying animations, check out the Splash screen articles in the MSDN library.

This is a quick ”IllustrationFriday” work of mine; this week’s topic is “Blur”.

I really enjoyed the accompanying quote “The supreme accomplishment is to blur the line between work and play” (Arnold Toynbee). That’s an ultimate goal I suppose.

The little miss depicted here in the illustration seems to apply a “touch of blur” to anything that crosses her mind. Some helpful pointers about her brain traffic: Need new shoes, call mom, call friends, reply to emails, read that book, promotion?, sale, what to wear, what to cook, plan weekend, plan vacation, diet, exercise more often, this bag doesn’t match, new cosmetics?, house cleaning, gained weight, need chocolate, work too much, talk less, talk more, bad hair day, kids, love, happiness, career plan, 401K, money, chocolate, meditate, freedom, music … la la la la….

Besides doing freelance web development, I’m also attending a Typography class this fall at California State University. Recently I worked on 2 AIGA typography posters, that were some kind of experimental public advertisement work to visually communicate typographic terms. I based my work on notes that I took while reading AIGA’s mission statement.

Term1: STEM

Definition: The stem is the main vertical stroke of a letter.

AIGA Mission Statement: Stimulate creative thinking

Stem has a pretty straightforward explanation. So to stick to the mission and make my target audience think, I took a playful approach and chose to leave out (vertical) strokes from the letters of the alphabet. The end result is like a simple puzzle and in my belief more engaging for the viewer than just listing down the definition of the term.

Sometimes if something is very obvious, we take it for granted and don’t notice it. Once it disappears; it strikes our attention. That’s the basic idea I had, while working on the design.

Term2: Widow/Orphan

Definition: (built into image)

AIGA Mission Statement: Improve the human experience

For the second poster, I wanted to explain the term yet it had to be more than that. In paragraph anatomy, there’s no place for widows and orphans, because it’s simply poor typography. I wished to emphasize that widows/orphans are a BIG NO NO in your paragraphs and columns. Some might not care if there’s a single lonely word (widow) in the last/first line of a column, however little tiny details are what make an experience different (Mission #2) after all.   If you look closer, the definition is there too, so that those interested in the information can check it out. The texture of the sign is somewhat worn out and grungy and the typeface looks rather destroyed. This is also to highlight, that the rule of avoiding widows/orphans is old and shouldn’t be forgotten.

How cool would it be, if AIGA actually used these posters? Especially since I’m the only one, who isn’t a Graphic Design major in class. Now I’m definitely in tune with my blog tagline; non-stop daydreaming!

Los Angeles has a new Meetup group - LA SLUG – for interaction designers and developers interested in Microsoft Expression tools, Silverlight and RIA. The first meetup is just one week ahead – it’s going to be next Wednesday, October 28th.

Victor Gaudioso, author of “Foundation Expression Blend 3 with Silverlight“  and Rick Barraza, Senior Experience Architect at Cynergy, are going to be at the first meeting. Currently, Victor Gaudioso is collecting info from members on which topics they would like to see at LA SLUG presentations/meetings. Don’t wait to send in your comments on this page.

See you there!

This week’s Illustration Friday theme is “flying” and here’s my contribution; a little bird named Tombix. She turned out looking clumsy, out of place and obviously out of shape… yet so bright, colorful and determined to fly!

Tombix would perfectly survive without any attempts to fly; yet what’s life without any trials/errors, struggle and adventure? Hence the title “Life is more than merely staying alive“. Enjoy!

 For a project I am recently working on, I needed a quick intro into the Silverlight 3 Navigation Framework and as ever so often I found myself checking out the tutorial videos on Silverlight.NET.

Tim Heuer’s Navigation Framework video is quite helpful and I would recommend it to anybody who needs a speedy introduction to the navigation framework introduced with Silverlight 3. The video shows the Navigation references and SDK controls needed, it talks about UriMapping and deeplinking plus some NavigationService and NavigationContext methods.

Instead of downloading the code right away, I decided to follow along and do the coding, while watching the video. But when I ran the app, an error message was awaiting me:

So I went through the most recent comments on the video’s page and discovered a very helpful blog entry from Mister GoodCat.

The video had been recorded in March 2009, when Silverlight 3 Beta was out. Clearly the Silverlight 3 RTM had some breaking changes in store for the navigation framework! To fix the problem I first tried out the  first step outlined in Mister GoodCat’s article and added  a preceeding “/”s to all URI’s throughout the app  (Files: MainPage.xaml, CustomerList.xaml.cs). In fact; the error message gives you also a precise clue in that direction!

Running the app again, I could see that the error message had changed. This was error#2:

So I went on to try out the second fix; which was to add a UriMapper to the navigation:Frame declaration in MainPage.xaml. Here it is:

<navigation:Frame x:Name=”MainFrame” Source=”Home”  HorizontalContentAlignment=”Stretch” VerticalContentAlignment=”Stretch” Margin=”20″ UriMapper=”{StaticResource uriMapper}”/>

This time the app just worked perfect!

Code Fix – Discovery:

I thought I should just make the code available here; as it’s almost identical to the code for the video except for the minor fix. 

That’s when I decided to check out all the code differences line by line and made an interesting discovery! Once you add the UriMapper as a static resource; the preceeding “/” are no longer needed. I’m sure there is a very scientific explanation for that; which I haven’t had time to find out so far…

So – in brief; if you define the UriMapper as a static resource in the frame, your app should be good to go! You might not even come across this problem in newer tutorials; however this video is pretty good and the source fix is not that hard; right?

Source Download:

You can download the source code here.

The only difference is the app name; instead of NavigationSample, you will see SLNavigationSample. Probably page titles may also differ; but the code is identical in syntax. I started out with a clean Silverlight 3 + Web App and didn’t use the Silverlight Navigation Application option available in Visual Studio 2008.

Hopefully this tiny source fix will save you some time + trouble!

Sometimes we fit too easily in the crowd of unnoticed identities. Only few of us act brave and make an effort to distinguish their precious self.

What makes us invisible is our behavioral pattern to act calm, content, happy, silent and indifferent, while we might have a screaming giant, a murmuring poet or a confused illusionist deep down inside. 

The drawing is supposed to be a reflection of my almost weird idea. A tidy recurrent pattern forms an exterior, which safely hides the intricately wired interior. Pretty much - a chaos in disguise.

This is my first IllustrationFriday submission; it’s not hard to guess – this week’s topic is “pattern“. Hope you enjoy!

There is still two more weeks to the next Inland Empire .NET UG  meeting, which will be on October 13th, 2009. This month’s speaker is Jason Campbell, UX Evangelist for Microsoft for the Southwest based out of Los Angeles. His presentation is going to be about “Rich Internet Applications with WPF and Silverlight”. I find the intro on the IEDOTNETUG site extremely promising; it simply states that the talk will outline the paradigm shift of the role of the developer from plain coder to a designer/developer.  Basically Developer + designer = devigner.

I’m looking forward to the meeting; since I have been trying to polish my developer identity with design skills for some time now, through design classes, experimental UI work and acting as a co-founder for Devign34. 

A transformation is never easy; daily self-motivation is needed along the way; but I’m determined to summarize my UX down this road as “Per aspera ad astra” - Through difficulties to the stars ★★★