New Vectorform Blog - Microsoft Surface


Posted on August 21, 2008
Filed Under:   News | 2 Comments

Just a bit of news today. We are launching a new blog on the Microsoft Surface. We’ve been doing Surface development over the last 6 months so we’ve posted just a few of the things we’ve been working on. Enjoy!

Now Hiring Silverlight Developer


Posted on June 9, 2008
Filed Under:   1.0 Javascript, 1.1 Alpha, Application, Career Opportunities, XAML | 1 Comment

Due to the great demand that we have received for products developed using Silverlight, we are now looking to expand our team. To be considered for employment at Vectorform, you must have the desire to work in a collaborative environment, but also have the ability to research and develop new applications leveraging Silverlight as the main development technology. Below you will find the specific requirements for the position;

Qualifications

Requirements

To apply for this position, please forward your curriculum vitae to: msheldon@vectorform.com

Silverlight Streaming for video assets only


Posted on February 6, 2008
Filed Under:   1.0 Javascript, streaming, video | 1 Comment

The Silverlight Streaming service is great for hosting your applications but what if you just want to host your assets there, particularly your heavy bandwidth assets like videos? Well the process is a bit like uploading an application (covered in the previous post) but with a few differences. You still need to create a manifest.xml file but this time since you have no code files to upload you will just reference a dummy.xaml file. You dont need to include this phantom xaml file in your zip but you do have to reference it in the manifest like so…

<SilverlightApp>  
   <source>dummy.xaml</source>
</SilverlightApp>

So just add the above snippet to your “manifest.xml” file, and include it in your zip with your video(s) file and upload to the Silverlight Streaming service.

Now for the tricky parts. You need to make a modification to your code to reference not your local copy of silverlight.js but the remote version supplied by the service, something like http://agappdom.net/h/silverlight.js

Another important change is in your createSilverlight function:

function createSilverlight() {  

   Silverlight.createHostedObjectEx({  

        source: "interface.xaml",  

        parentElement: document.getElementById("Wrapper_MultipleVideos"),  

        id: "SilverlightControl",  

        properties: {  

            width: "940",  

            height: "600",  

            background:"#bb5619",  

            isWindowless: "false",  

            framerate:"30",  

            version: "1.0"  

        },  

        events: {  

        },  

        initParams:"streaming:/48598/MultipleVideos/"  

    });  

}

Two things to note here: 1) use the Silverlight.createHostedObjectEx function call and 2) the additional initParams property.

The initParams property takes a string as input, and should point to your AccountID and Application’s Name listed on the Silverlight Streaming service site, in this case it’s “MultipleVideos”.

What happens here is that the service will convert the string specified into a proper URL. This URL is NOT permanent and will change so you cant just write it down and hard code it into your functions or xaml. Therefore you need to programmatically set the source of your MediaElement.

So for example you could do something like this in your initial start up function of your app (or in the Loaded event call for your main Canvas)

function mainCanvasLoaded(s) { 
   plugin = s.getHost()
   main=s.findName("mainCanvas")
   vid1=main.findName("videoElement1")
   vid2=main.findName("videoElement2")  

   //dynamic URL assignment happens here
   vid1.source=plugin.initParams+"/my_video1.wmv"
   vid2.source=plugin.initParams+"/my_video2.wmv"
}

If you want to upload and reference multiple videos under different application name’s you would need to tweak the initParams property like so to be a comma separated list:

initParams:"streaming:/48598/MondaysVideo/, streaming:/48598/ThursdaysVideo/"

And then in your video source assignment code you could handle that with a split(”,”) call like this:

   urlArray=plugin.initParams.split(",")
   vid1_url=urlArray[0]
   vid2_url=urlArray[1]

Official info on the subject can be found here at this MSDN article, but I didn’t find it too helpful.

Silverlight Streaming Service


Posted on February 5, 2008
Filed Under:   1.0 Javascript, streaming, video | 1 Comment

Another post on some info that I thought was intially hard to find. Using the Silverlight Streaming service provided by Windows Live.

The Silverlight Streaming service is meant to be a convenient place where designers and developers can host Silverlight Applications they build for free.

To use the service to host your application you must sign-in to http://silverlight.live.com/ with a windows Live ID, hotmail, messenger or passport account.

After creating an account you will get an Account ID and an Account Key. The Silverlight Streaming Account ID is public and you will need to use it in your code of your Silverlight Applications. Your Account Key is private and should be treated like a password.

Once signed in, click on Manage Applications on the left. Here you can upload your Silverlight Application. Before jumping right in and selecting the files you want to upload you need to do a few things first. You need to create an xml file called ”manifest.xml” listing all the files your app will be using and the order of the JS files. Here is a sample manifest.xml file:

<SilverlightApp>   
   <source>name of the initial XAML file</source>    

   <version>[empty | 1.0 | 1.1]</version>    

   <width>[value in browser units or percentage]</width>    

   <height>[value in browser units or percentage]</height>    

   <jsOrder>    

      <js>[js file to load first]</js>    

      <js>[js file to load second]</js>    

      <js>...</js>    

   </jsOrder>    

</SilverlightApp>

Check out this MSDN Article for more info on the manifest file.

Once you have created this file, name it “manifest.xml” and place it in the root folder of your application. Zip up the entire contents of your application (including the manifest file) and now you’re ready to upload to the Silverlight Streaming service site.

After you’ve successfully uploaded your zip file containing your application, you’ll be directed to a page where you can upload an updated version, launch a test page containing your app, or delete your app. You’ll also be given 3 steps necessary to embed your app on a web site. Embed the scripts given to you on your site and test it out. If all goes well you should see your Silverlight app on your page but hosted through the Streaming service.

In the next post I’ll show how you can host assets only (particularly video) using this service. One would think you could just upload your assets and be given a reference to them but this is not the case and there’s a little more to it…

Compressing XAML to save on file size


Posted on February 1, 2008
Filed Under:   1.0 Javascript, Design | Leave a Comment

Silverlight is great at being able to use vector art work so that you maintain quality at any viewing size. The problem is sometimes vector artwork can actually get larger in file size than raster images. To save on bandwidth, a good strategy for optimizing Silverlight is to create a skeleton XAML file with a basic loader, you would then have all of your layout XAML, images, fonts within a ZIP file. This would then provide a dual benefit.

  1. It gives you a way to have a preloader for an entire Silverlight application that would show up almost instantly upon loading the page.
  2. It also has the potential of compresses XAML code into 1/3 the file size.

[view example] [download source]

Controlling Silverlight outside of the plugin - the .Content property


Posted on January 31, 2008
Filed Under:   1.0 Javascript, Uncategorized | Leave a Comment

This one is pretty basic but it is useful and the info doesn’t seem to be easily accessible so I decided to post a quick example. You can use the content property of the plugin to gain access to elements in your XAML.

So say you want to have a link or button on your page control some aspect of your Silverlight App, like load a new Video into a MediaElement, you could do something like this:

function loadVideo(wmv_file) {    

   var videoRef
   var controlRef
   controlRef=document.getElementById("SilverlightControl")
   videoRef=controlRef.content.findName("videoElement")
   videoRef.source=wmv_file 

}

and then in you could just call the loadVideo function within an onclick, onmousdown, or in the href like so:

a href="javascript:loadVideo('my_video.wmv')" mce_href="javascript:loadVideo('my_video.wmv')"

Accessing the canvas in a Silverlight 1.1 User Control


Posted on January 30, 2008
Filed Under:   1.1 Alpha, Application, Components, User Interface, XAML | Leave a Comment

When you create a Silverlight User Control from a piece of XAML, you expect to be able to modify the Canvas using the a standard property. After all, the control’s XAML is a Canvas.

Foo.xaml
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="100"
Height="100"
Background="CornflowerBlue"
>
</Canvas>

However, the Control interface doesn’t have an accessor for the Canvas. Looking at the control in the debugger, you find that the Canvas is buried down deep in the control in a non-public area.

Control Canvs

So, how do you access the Canvas?
Well, there’s a simple 3-step process.


public class Foo : Control
{
// STEP1: Save the canvas locally
private Canvas _TheCanvas;


// STEP2: Add a public property so that clients can access
// the canvas easily.
//
// Control.Canvas
public Canvas Canvas
{
get { return _TheCanvas; }
}

    public Foo()
{
// STEP3: Save the canvas as the control is being created.
System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("UserControls.Foo.xaml");
_TheCanvas = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd()) as Canvas;
}
}

That’s it. Now you can access the canvas of your control at any time.

Happy Silverlight Holidays from Vectorform


Posted on December 11, 2007
Filed Under:   1.1 Alpha, Games | 1 Comment

Vectorform is proud to present Xmas Drop a new Silverlight 1.1 game with full C# source.

In Xmas Drop, you play the role of Milo. The only security elf on duty when the toy factory exploded. It’s up to you and Milo to save Christmas.

Help Milo catch presents using the arrow or A/D keys. When Milo catches three presents in a row, his elf magic puts them safely away. Use the Up/Down or W/S keys to cycle the stack and setup for a 3 in a row.

Play the game. Download the source. Check out our other demos.

XmasDrop_0_2 screenshot

Silverlight Shooter nears completion


Posted on December 6, 2007
Filed Under:   1.1 Alpha, Games | 9 Comments

The Vectorform Shooter project (codename VectorLight) is almost complete. Check out version 0.7.

Vectorlight_0_7.jpg

New in this update:

Things to do:

We’ve learned a lot about Silverlight 1.1 while making this game. With the ability to cross-compile to WPF and XNA, we think that Silverlight can be a viable game platform for the web. Looking forward to the official 1.1 release.
If you’d like to help us out, please play the game and send us your feedback.

Microsoft Surface Animation - The making of “Infinite Possibilities”


Posted on November 21, 2007
Filed Under:   Animation, Team Members, Uncategorized | 2 Comments


We thought we’d give a glimpse behind the scenes of the making of the Surface video. The video serves as a showcase piece for the Silverlight video players we post and this spot introduces you to the gurus who create the magic.

Client: Internal
Title:  “Infinite Possibilities”
Artists:
Aaron Mustamaa
    Concept / Storyboarding / Direction / Compositing / SFX
John Einselen
    3D Environment Animation Pipeline / Matte Painting / Compositing
Anthony Denha
    Additional Animation / Production Assistance
Victor Fohrme
    3D Character Animation Pipeline

Creative Direction:  “It’s all about placement.”

We knew ahead of time that the virtual environment we chose to create for Infinite Possibilities would have to fully acknowledge the places where the Microsoft Surface would be positioned in the real world.  Since the Surface computer is all about the next generation of a user’s interaction with the environment, we began by researching the Surface computer’s interaction in culture.    From our observations, the places where you might see an actual surface computer in action tended to be bars, restaurants, hotel lobbies, casinos, and the like, which are all places that are usually very loud and chaotic.  When it came time to choosing an environment, we decided to produce a concept that would be a departure from the chaotic nightlife and entertainment realm, into a pure organic environment: one that was quiet, serene, and even Zen.   We felt this would provide a foil to the typical user experience, and expand the possibilities of the Surface’s commercial placement and application development.   The simple water ripple application that comes installed on the surface computer led us to the idea of a waterfall, then the natural environment, and finally, to the overall narrative and direction.  It was kind of like reverse-engineering.   Ironically, somewhere along in production, we realized that the Surface’s logo happened to contain the infinity symbol, so we used this concept to develop the title, Infinite Possibilities, as well as the final logo animation.  In the end, our creative goal was to visually demonstrate that this is only the beginning of the Surface’s infinite possibilities and power.
Aaron Mustamaa
Motion Graphics Designer, Vectorform

Silverlight Viewports


Posted on November 14, 2007
Filed Under:   1.1 Alpha, Components, Games, User Interface | Leave a Comment

One thing you usually recognize about web-based games is that they generally have a fixed view. With a fixed view, your game world matches the web control 1:1. What if you want the game to take place in a larger space, like an entire world, or a galaxy. In the game world, you’d create a viewport or a camera that only displays a portion of the world. Unfortunately, Silverlight doesn’t have native support for viewports into a larger space. We decided to make it.

CanvasViewport Class Diagram 

Source: CanvasViewport C# class 

The CanvasViewport is a simple plugin class that can be used to create a viewport on any Canvas (it doesn’t have to be the main page). It works by manipulating the Canvas’ RenderTransform in response to programmed parameters.

Usage:
// Create a viewport on this canvas.
CanvasViewport _Viewport = new CanvasViewport(this);

// Create a viewport that is 320x240 in logical (original canvas) units
_Viewport.Size = new Size(320, 240);

// Set the center of this viewport to 500, 800 on the canvas
_Viewport.Center = new Point(500, 800);

// In a game, you can have the viewport track a player like this:
void Update()
{
  _Player.Update();
  _Viewport.Center = _Player.Position;
}
An added advantage to using viewports in XAML is that since XAML graphics are all vector based, zooming in and out dosen’t have all of the pixelation problems that working with raster graphics has. Here’s the orignal game without the viewport.
 Shooter without viewport 

Here’s the game with a smaller viewport into the original world. (Notice that the UI and the Reticle doesn’t change size).
Zoomed in view of the shooter

Have fun with your viewports.

Breakout - Silverlight Style


Posted on November 8, 2007
Filed Under:   1.1 Alpha, Games, Uncategorized | 1 Comment

A full breakout clone with source. The demo features 9 levels loaded from embedded XML. There is also an “attract” mode which makes for a nice screen saver.

We also wrote a level editor in WPF because it was so similar to Silverlight. The editor can be released upon request.

Silverlight 1.1 - C#

Example, Source

Silverlight Pong - 1.1 C#


Posted on November 1, 2007
Filed Under:   1.1 Alpha, Games | 2 Comments


We wanted to start exploring some game development with Silverlight so we started where one should start… good ol’ Pong! Then with the functionality in place we couldn’t help but skin it with some nice imagery of a beat-up ping pong table. Enjoy!

Example, Source

This is our first 1.1 example and we plan on doing more as time allows so check back often.

and for the Javscript folks, here’s the 1.0 version…

Example, Source

Image Carousel


Posted on October 23, 2007
Filed Under:   1.0 Javascript | 2 Comments


Inspired by Nikhil Kothari  and Lee Brimelow, I decided to make my own image carousel. Clicking/dragging left or right controls the rotation speed…

View Example, Source

Combo Box Component


Posted on October 19, 2007
Filed Under:   1.0 Javascript, Components | 2 Comments


Here is a basic Combo Box component that is easy to implement and customize. It supports automatic scrolling when the number of items exceed the specified height and is fed by an array.

Example, Source

Silverlight portal and demos page


Posted on October 12, 2007
Filed Under:   News | Leave a Comment


We have set up a Silverlight portal showcasing some examples we’ve been working on as well as a demo page listing all the stuff we’ve thrown together. The source code is included so dive in and have look…

http://www.vectorform.com/silverlight/
http://www.vectorform.com/silverlight/demos.html

Twitter


Posted on October 11, 2007
Filed Under:   1.0 Javascript, Web Service | Leave a Comment


This user interface example access the twitter.com API, parses the loaded XML and displays the latest Tweets. It also incoporates a custom skinned scrollbar.

Example, Source

Browser Scaling Video Player


Posted on October 9, 2007
Filed Under:   1.0 Javascript | Leave a Comment


This video player scales with the browser to be any size the user wishes. Also features auto hiding controls.

Scaling Version: Example, Source

Fixed Size Version: Example, Source

Silverlight scrollbar component: Updated for easy implementation


Posted on October 2, 2007
Filed Under:   1.0 Javascript, Components | Leave a Comment


Another update to the scrollbar component. Just made some tweaks to make it easier to implement/instantiate. It’s getting closer to more of an OOP style but it’s not all the way there yet. Now all you have to do is call/instantiate the scroller like this:

myScrollPanel=new createScrollablePanel(”sp1″, 10, 10, 100, 160, “V”, the_text, “#FFF”, 9, null, “#0000FF”)

with the following parameters…

unique name, xpos, ypos, width, height, direction, text, [text_color, text_size, text_font, bg_color]

bracketed items are optional, I haven’t converted the horizontal portion yet so only “V” (vertical) is available ;-)

This makes it way easier when you have multiple scrollers on the page. The mouse wheel support also got carried over and works when the mouse is over the particular textfield you want to wheel thru. There are now properties in the constructor to control other options like color, spacing, etc.

Example, Source.

Silverlight scrollbar component: Updated with MouseWheel Support


Posted on September 26, 2007
Filed Under:   1.0 Javascript, Components | Leave a Comment


Here is an updated version of the scrollbar component I released earlier but this new version has Mouse Wheel Support:

Example, Source.

Thanks to Adomas Paltanavičius for the Javascript that handles the Mouse Wheel events!

Silverlight with some Flickr


Posted on September 25, 2007
Filed Under:   1.0 Javascript, Web Service | Leave a Comment


Here’s a quick example of how to call a method from the Flickr API and display some goodies in Silverlight. This grabs the 100 most interesting photos…

flickr1 - thumbnails: Example, Source

Next uses a larger canvas, 1400×1000, so beware puny monitors/weak video cards!

flick2 - medium size images :  Example, Source

Reposition/Resize Content on Browser resize


Posted on September 24, 2007
Filed Under:   1.0 Javascript | Leave a Comment


Resize the browser and the content gets repositioned accordingly.

Example, Source

Resize the browser and the content gets scaled accordingly.

Example, Source

Silverlight Media Viewer


Posted on September 21, 2007
Filed Under:   1.0 Javascript, Application | Leave a Comment


This sample application incorporates some of the previous examples (scrollbars, image viewers, etc) into a working Silverlight app. The Media Viewer includes a video player, an image viewer and an RSS reader pulling stories from Yahoo News.

Media Viewer - Example, Source

We’ve also developed a nice looking portal for these examples at http://www.vectorform.com/silverlight/

Silverlight Flyout Navigation


Posted on September 18, 2007
Filed Under:   1.0 Javascript, User Interface | Leave a Comment


This example leans a little more towards traditional web site navigation with the tried and true flyout menu. I didn’t really have a need to make one of these but I thought it might come in handy in the future. I’ll also have to write an N-level version but I’ll put that off til later as the need for that rarley seems come up any more. 3 versions including source.

Flyout nav, hide/show - Example, Source

Flyout nav, fade in/out - Example, Source

Flyout nav, animate up/down - Example, Source

Silverlight Tile Navigation


Posted on September 17, 2007
Filed Under:   1.0 Javascript, User Interface | Leave a Comment


Im gonna try to do the next couple of examples relating to navagtion elements. Ill start off with this one which uses image tiles for buttons. On rollover they animate and scale to give the illusion of depth. Reflections thrown in of course.

The tiles are generated and placed by code so the xaml file will be relatively empty.

Horizontal Tile Nav - Example, Source

Horizontal Tile Nav with stagered depths - Example, Source

Silverlight Image Viewer


Posted on September 13, 2007
Filed Under:   1.0 Javascript, Application | Leave a Comment


This one was a little tricky because I have the images lined up horizontally. Since the images are different sizes and ratios, to place them correctly you need to know the width of the image, but Silverlight doesn’t know the width and height of the loaded image until slightly after the image fires its Loaded event. At first I was just setting a timeout of 150ms and that seemed to work, until I moved the files to an actual remote server, then it worked sometimes. So then I ended up doing a setInterval to check whether each image has a width and height>0. That did the trick. I could then position each one accordingly. Here are two versions. 1st one loads images individually, 2nd one pulls images from a zip file and has animation for both enlarging and shrinking images. Drag left and right (or throw) to scroll through the images. Click (or drag and drop) to enlarge.

Load Individual Files - Example, Source

Load From Zip - Example, Source

Also, here is a Mac type slideshow that auto plays with a Ken Burns effect (click for fullscreen). Although this seems to only run nicely on faster machines. I used images at 800×600 to reduce the choppiness but it still seems to lag on my P4 2.8Ghz PC with 2Gb Ram. But it does run nice and silky though on my MacBook Pro 2Ghz with 2Gb ram. I guess the Core 2 Duo proc helps move those big images around.

Mac type slideshow - Example, Source

Silverlight 1.0 Slideshow


Posted on September 12, 2007
Filed Under:   1.0 Javascript, Application | Leave a Comment


This is a simple slideshow for viewing a single image at a time. And since reflections are all the rage, I threw those in there just for some style. Here are 3 examples showing some variation in functionality:

Slideshow with a fixed size: Example, Source

Slideshow that scales with the browser window: Example, Source

Slideshow that has autoplay and Fullscreen mode: Example, Source

Click Screen title to launch Fullscreen and autoplay (new image every 3 seconds). Click an arrow to stop autoplay. Click Screen title again to exit Fullscreen or just hit Esc.

Next up: Image viewers and nav bars.

Silverlight 1.0 is official


Posted on September 6, 2007
Filed Under:   News | Leave a Comment


We’ve been playing around with WPF/e Silverlight since the December CTP release but now thats its official with the recent 1.0 release we thought we’d start to throw out some components/examples. The first will be a scrollbar component. It’s supports dynamic content, horizontal/vertical layouts, and animated scrolling, along with other customized parameters such as position and size. Here are a few examples with source code:

Simple Vertical Scrollbar: Example, Source

Vertical Scrollbar with extras (scroller size based on content length and fading text): Example, Source

Horizontal Scroller: Example, Source


Coming up next will be a simple slideshow component, so stay tuned!

Recently


Categories


Archives


Resources