Adobe Air Bible

Adobe Air Bible

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.

Another 3D example in Silverlight

After playing around with the previous examples (focal length and camera objects), I have combined the two into a new application.  This examples shows objects in a random star field floating in space.  Principles used in this example are:

  • 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.

ishot-8

Two particular controls to check out

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

image

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.

image

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.

3D example in Silverlight

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.

Video slider control

image The updated Slider control in Silverlight 2 Beta 2 burned a number of developers, including myself.  I relied heavily on the MouseLeftButtonDown and MouseLeftButtonUp events that are now handled by the Slider.  Another feature lacking in the Slider is the ability to show the amount of content downloaded.  This is a pretty standard feature of web based video players.  Time to call the CustomControl to write a new Slider that enables you do both clicking on the slider track which moves the Thumb to the clicked location and adding a download progress indicator.

Here is the resulting control:

image
Common slider

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

 image 
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!

Styling a Play/Pause button for Silverlight video

image

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.


NBC Olympics Video Player

I meant to post about this awhile ago, but I have been quite busy lately. I was fortunate enough to be one of the lead developers at Schematic working on the Silverlight video player for NBCOlympics.com. We worked closely with Microsoft the whole way and it was definitely a great learning experience.

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.

Drag and drop Silverlight example

This is a quick and simple example of how to create a draggable object in Silverlight 2.

  1. Create a Rectangle and set the RenderTransform to a TranslateTransform.
  2. <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>

  3. Register the MouseLeftButtonDown, MouseLeftButtonUp, and the MoseMove events for the rectangle.
  4. this.rect.MouseLeftButtonDown += new MouseButtonEventHandler(rect_MouseLeftButtonDown);
    this.rect.MouseLeftButtonUp += new MouseButtonEventHandler(rect_MouseLeftButtonUp);
    this.rect.MouseMove += new MouseEventHandler(rect_MouseMove);
  5. 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.

  6. // 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;
    }
  7. Finally, update the position if the mouse is captured and the mouse is moving.

  8. 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:

image

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.
  2. private Point clickPosition;
  3. Save the position of where the mouse is located on the MouseLeftButtonDown event.  The updated MouseLeftButtonDown event looks like:
  4. void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        clickPosition = e.GetPosition(sender as UIElement);
        this.rect.CaptureMouse();
        isRectMouseCapture = true;
    }
  5. Finally, in MouseMove event subtract the clickPosition from the mouse position.
  6. 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

    8 days left to the Olympics

    After months and months the Olympics are almost here.  This will be a big day/week(s) for internet broadcasting and for Silverlight.  I can’t wait!!!

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

    image

    Silverlight and the NBA

    imageToday when I was looking Silverlight.net I noticed the headlining application was the NBA Website.  I HAD to click it.  All in all it was disappointing.  Granted, this is probably a preview application of things to come for the upcoming season, still, I was expecting more. 

    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.

    General Silverlight 2 concerns

    As I continue working on Silverlight projects, a concern keeps creeping up…What happens after the first wave of really cool Silverlight applications?  A number of applications being released are done with large teams and are rooted in usability and have design teams working in Blend.  My biggest fear is after the RTM release we are going to see a year or two of really ugly Silverlight 2 applications designed by developers. 

    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.

    Follow

    Get every new post delivered to your Inbox.