Adobe Air Bible

Today is a big day for my boy Ryan Taylor.  His book Adobe Air Bible came out.  Congrats dude, all those long hours have paid off.

Amazon - http://www.amazon.com/AIR-Bible-Wiley-Benjamin-Gorton/dp/0470284684/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1222832865&sr=8-1

Update

Just got the book from Amazon.  Below is the unboxing with his other book sitting next to it, now that is baller.

• Camera – to zoom in and out,
• ZBuffer – to ensure the objects closest in the Z order are visually on top,
• Fog line – gives the appearance the objects are coming from the distance.

Two particular controls to check out

1.) Click the Zoom In button (below figure), to start a loop that “zooms in”.

2.) Click the Move button to enable the move tool.  Once you have clicked this the cursor becomes an Hand indicating you can click and drag on the screen to move the objects around.  The technique I’m using for this is similar to a previous post – Drag and drop Silverlight example.

Again, many thanks goes out to Ryan for showing me how to do this correctly.  Instead of creating arbitrary values to the scale and Z; this example truly uses 3d math to render the images.

Talking with my boy Ryan made me start thinking about trying new things in Silverlight…3D.  Here is an example of images in Z space.  I am working on getting a camera object implemented so you can zoom in and out on the objects.

Here is the resulting control:

Common slider

 
 
With the new Slider you can click on both the right and left sides of the Thumb to update the position.

  
Now you can send the DownloadProgress from the MediaElement to this control and it will update the the download progress bar.

The control is on CodePlex (Download the code).

Enjoy!

You have created a video player, and you want to change a button make a standard Play/Pause button.  (Much like YouTube or iTunes).  If you are  a designer, you probably already know how, however, if you are like the rest of us developers this can be a little frustrating.  So, after taking a billion screenshots putting this post together, I thought it would be easier to do a screencast instead.  This is my first screencast, so bear with me.

Overview

Basically this tutorial shows you how to style a ToggleButton and how to update the Visual States of a control in Blend.  For reference, here are the basic steps needed to create the play/pause button:

1. Open Expression Blend,
2. Place a ToggleButton on the Artboard,
3. Create a copy of the template,
4. Remove all the unnecessary objects from the Objects and Timeline panel,
5. Draw a Play head and Pause icons,
6. and Update the opacity of the icons for the States.

Altogether, there were a total of 1.3 billion hits during the two week span of the Olympic games; 50 million were unique visitors. The stats make this the single largest streaming video project in the history of the internet…pretty crazy!

At some point I would like to post up somewhat of a case study to share my experience from this project and some of the great things that I learned. Keep an eye out for that post in the weeks to come.

1. Create a Rectangle and set the RenderTransform to a TranslateTransform.

<Rectangle x:Name="rect" Width="50" Height="50" Fill="Blue" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="rectTranslateTransform" X="0" Y="0" />
</Rectangle.RenderTransform>
</Rectangle>

2. Register the MouseLeftButtonDown, MouseLeftButtonUp, and the MoseMove events for the rectangle.

this.rect.MouseLeftButtonDown += new MouseButtonEventHandler(rect_MouseLeftButtonDown);
this.rect.MouseLeftButtonUp += new MouseButtonEventHandler(rect_MouseLeftButtonUp);
this.rect.MouseMove += new MouseEventHandler(rect_MouseMove);

3. In the MouseLeftButtonDown and MouseLeftButtonUp event you will capture and release the capture of the mouse, respectively.  Also, you will need to store if the mouse is captured.




// Stores if the mouse is captured
private Boolean isRectMouseCapture = false;

void rect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    this.rect.ReleaseMouseCapture();
    isRectMouseCapture = false;
}

void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.rect.CaptureMouse();
    isRectMouseCapture = true;
}

4. Finally, update the position if the mouse is captured and the mouse is moving.




void rect_MouseMove(object sender, MouseEventArgs e)
{
    if (isRectMouseCapture)
    {
        this.rectTranslateTransform.X = e.GetPosition(this).X;
        this.rectTranslateTransform.Y = e.GetPosition(this).Y;
    }
}

Final product:

Maintain mouse position on object while dragging

The above example snaps the pointer to the top left of the object.  Face it, it’s annoying, what you really want is the mouse to maintain the position on the element while dragging. To solve this problem is simple.

1. Add a variable to save the position when the user clicks the object.

private Point clickPosition;

2. Save the position of where the mouse is located on the MouseLeftButtonDown event.  The updated MouseLeftButtonDown event looks like:

void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    clickPosition = e.GetPosition(sender as UIElement);
    this.rect.CaptureMouse();
    isRectMouseCapture = true;
}

3. Finally, in MouseMove event subtract the clickPosition from the mouse position.

this.rectTranslateTransform.X = e.GetPosition(this).X - clickPosition.X;
this.rectTranslateTransform.Y = e.GetPosition(this).Y - clickPosition.Y;

Update

Drag and drop with physics (friction)

After playing around, I have updated this example to incorporate physics.  Take a look:

http://www.coreyschuman.com/Silverlight/Prototypes/DragDropPhysics/Proto1TestPage.aspx

It looks like Microsoft has a page promoting the site http://www.microsoft.com/silverlight/NBCOlympicsonMSN/getsilverlight.html

A few thoughts:

1.) Why fullscreen?  It is a mistake to have features the user can only use in fullscreen.  This is a big problem.  The high-res images are great, but make the browser window resize instead of the SL piece.

2.) Use of the Hand cursor.  Clickable objects on the screen should have a visual indicating clickablity.  Just having an object on the screen is not enough to let the user know action can be performed on it.

3.) The animations don’t feel thought out.  Specifically the bottom right animation. Why is the bottom menu animating opacity and the transform?  It is nice to see some easing on the menus…they need to be tighter.

4.) Video.  Where is the video?  I know I know, this is probably a prototype to generate interest, but how cool would that be to have Video in this app.

Microsoft has always had an army of .NET developer.  With this new offering (Silverlight 2) developers are going to be chopping at the bit to get season in those skills. 

So here it is…to all developers interested in Silverlight: Think of usability first.  Design your application with the user in mind.  Take time to talk to a user. 

That’s all I have today.