In the image you have 3DSMax in the background with all it’s wireframe goodness.  The render on the right, and as you can see, the Silverlight output in Firefox on the left.

Features in the short term will be more .NET features, as full scene rotation would give fantastic interactivity, and open up the door for useful Silverlight transitions.  Texture mapping is another one I want to look at, mainly focusing on texture scaling and offset.

Enter 3DSMax.  3D Studio has an awesome scripting capability in the form of MaxScript.  Writing 3DSMAX exporters is a past time of mine, and having had a conduit to John Wainwright (aka Mr MaxScript) at that time I became very fond of 3DSMax and MaxScript.  But here ends the history lesson.

The main aim of the Silverlight 3D Studio Max exporter is to create a pipeline for 3D authoring, through to Silverlight in browser, and convenient stops in between.  It shouldn’t ignore or outcast Visual Studio or Blend (or Photoshop etc), and should not replace them.  But where as Visual Studio is a coding environment, Blend an awesome behavioural and layout authoring environment, neither are good 3D authoring environments.  The Silveright 3DSMax Exporter hopefully will fill that gap.

So first up, lets take the following image.

In the screenshot below I’ve taken the above image, applied it as a textures to planes (rectangles), replicated them helix/spiral paths in various directions, textured, translucent, with a blue environment background.  This process took about 2 minutes.

You can see in the image above the front perspective wireframe, the render, and an angled perspective view showing the planes along the various paths.

But with a click of a button, this 2 minutes of work gets exported to XAML in a second.  Alt tab to Blend (Visual Studio doesn’t like ImageBrush for some reason) and voila, instant 3D.

Note that the background is actually blue, but Blend doesn’t stretch it to the full view by default.  A quick stop over in Visual Studio and every object is named and available in Intellisense.

And the real test, taking it to the the browser.  Firing up Firefox gives us…

So in 2 steps, 1) Export, 2) Build, we have a 3D Studio scene in Firefox.

Currently in v0.001 pre alpha, but I thought I’d post some information about what I’ve been working on.  But it truly is 1 click, 1 build.  No smoke, no mirrors.

So what features does it currently have?  For the time being I’m focusing on only 1 shape, being a rectangle.  Simple shape rotation can be done in Blend.  Max is for full scene creation.  Shapes are the easy part, and the hard part is getting coordinate transformations, texturing, and full scene rotation.  These are the real features that I’m currently working on, and I’ll let you all know when it’s ready to get your dirty mitts on.  Stay tuned.

Yarr!  So how do you get the paper look and feel on the map?  It’s a simple, and doesn’t require any C#, you can do it purely via the XAML.

<grid x:name="LayoutRoot" background="#FF000000">
      <img x:name="Paper" source="images/ye_atlas.jpg" />
      <m:map x:name="MainMap" opacity="0.5" />
</grid>

Yes, that’s how easy it is.  The aged paper look doesn’t zoom, I played around with having the paper scroll and zoom with the map, and it gave me a headache.  One of those times when you spend an hour or so finding that your cool idea wasn’t as cool as you thought.  When you zoom in, what does it look like?

But what is missing from the map?  Treasure of course!  YARRR!  Pushpin marks the spot!  So add a few custom pushpins, a bezier path later, and the map shows you the way.  How do you add a pushpin?  The best way is to create a layer to put all your pushpins, that way you can hide/show them all together quite easily.  So your XAML becomes…

<Grid x:Name="LayoutRoot" Background="#FF000000">
    <Image x:Name="Paper" Source="images/ye_atlas.jpg" />
    <m:Map x:Name="MainMap" Opacity="0.5" >
        <m:Map.Children>
        <m:MapLayer x:Name="PushpinLayer"/>
        </m:Map.Children>
    </m:Map>
</Grid>

… and by adding the following function which takes the position, the pixel size to resize your image/pushpin icon, and the title text of the pushpin …

private void AddPushpin(double latitude, double longitude, double size, string title)
{
    // Grab our map layer
    MapLayer ml = MainMap.FindName("PushpinLayer") as MapLayer;

    // Create the title for the pushpin
    TextBlock t = new TextBlock();
    t.Text = title;
    t.SetValue(MapLayer.MapPositionProperty,
                    new Location(latitude, longitude));
    t.SetValue(MapLayer.MapPositionMethodProperty,
                    PositionMethod.Center);

    // ... and the Pushpin image
    Image img = new Image();
    img.Width = size;
    img.Height = size;
    img.Source = new BitmapImage(new Uri("images/skull.png",
                                                UriKind.Relative));
    img.SetValue(MapLayer.MapPositionProperty,
                        new Location(latitude, longitude));
    img.SetValue(MapLayer.MapPositionMethodProperty,
                        PositionMethod.TopCenter);
    ml.AddChild(img);
    ml.AddChild(t);
}

Note the use of the PositionMethod to have the bottom of the title aligned with the top center of the image.  Having this makes life so easy when plotting pushpins on a map around a particular coordinate.

Call AddPushpin in your public Page() constructor, and play around with adding pushpins.  Lots of fun to play around with.  Then by simply adding a bezier path method (which I’m still not happy with yet) and vary the pushpins and voila, there be treasure! YARR!

If only the sailors of yesteryear had zoomable pannable treasure maps!  Features to come are some pirate ships that float around in the water… and I’d love to add a little mini-canon fight, but time is of the essence.

So why is this exciting?  Well, aside from our privateering friends out there, what it does open up is a great way to communicate hiking trails, cycling tracks, walks.  Feed in a heap of map data and you can overlay anything!  Add a custom map data source and you can really start to expand the possibilities.

Virtual Earth integration from Silverlight was the highlight. Once again a nice clean API allows developers to pick it up, with fully integrated customised maps in Silverlight developed faster than previously possible. Video and media asset integration, scaling/zooming/”deep zoomesque” capabilities, and the ability to feed in your own map data.

So how easy is it?  Well, first up you need the control DLL.  And once you’ve done that, you’ll need the following XAML…

<UserControl x:Class="MapControlInteractiveSdk.Tutorials.Tutorial1"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:m="clr-namespace:Microsoft.VirtualEarth.MapControl;
                assembly=Microsoft.VirtualEarth.MapControl">
   <Grid x:Name="LayoutRoot" Background="White">
     <m:Map />
   </Grid>
</UserControl>

BAM!  Map with controls in Silverlight in 3 seconds.  Even more impressive is all the small tweaks you can do in only a few lines of code.  Chris Pendleton has a wrap up and other posts over at the Virtual Earth Evangelist’s Blog, so check out further details.

Another session I found interesting was Pigmap. All I could ascertain is that the translated meaning behind the brand could probably translate to ‘cash cow’, and although the presentation had a lot to be desired, the Korean markets tend to push online community concepts many years before the western world picks them up.

Pigmap will be a social networking site.  It leverages Virtual Earth, flickr, and other services (OpenID, Live ID etc). To provide users with mapping, it searches Virtual Earth for certain locations and venues. So search for Las Vegas NV, and BAM, Las Vegas turns up on the map. But then type in ‘Venetian’ as a point of interest, and the platform searches Flickr for photos matching Venetian, grabs their geo coordinates, and drops thumbnails on the map (“The End of Theory” theory strikes again).

The questionable feature of the site is the ability to set “Missions” for people using the product. To be able to go “Dear X, I challenge you to go to this location” doesn’t really appeal to me, but “Dear X, you want to head here tonight?” might work, but many other services provide that functionality. Possibly Korea is too far ahead culturally with social networking that it zips over my head.

And that’s a wrap from MIX09. There is just so much more to talk about, and many of that will come with some of the posts that grow out of playing with the new toys. Head on over to the downloads page to grab your favourite preview/beta/CTP/SDK… and remember to check out the sessions at sessions.visitmix.com.

MIX oh-ten has been announced, and I’m excited to see where the designer and developer community has taken these tools by then. 

Catch you online when I land back in Australia. 

Now that you’ve done that, we’ll continue.

The biggest benefit I see for agencies and services companies is the seamless integration, and to close the loop built in streamlined review mechanisms. Although Silverlight is a great technology and the obvious place Sketch Flow would help most, Sketch Flow will be useful for any type of web project. From presales through to design, it opens the door for rapid prototyping, with the cost of finding the best user experience drastically reduced. The documentation and auto data population features are so obvious and simple, yet dream features for developers. So big thumbs up for Sketch Flow.

Yesterday’s Live Services session had me falling off my chair. It was just too easy. If you aren’t looking at Mesh, you are being left behind… the possibilities are huge.

Second on the agenda was the VERTIGO presentation. Lots of sites developed in short periods of time, using some great Microsoft technologies such as Deep Zoom and Silverlight 3. KEXP, Rolling Stone magazine archive, March Madness, and the big one, www.playboyarchive.com. The presentation covered projects of catalogued back issues of magazines, radio station download managers, and interactive live video streaming. Such a broad consumer offering, based on the same core technology stack. The Playboy archive consists of over 2 million individual files that make up the multiscaleimage, coming in at 30GB of data. But what is even truly mind blowing, is the fact all text in the deep zoom is searchable, including the advertisements, the comics, and the articles.

To go over www.playboyarchive.com in a bit more detail (assuming you are still reading and haven’t clicked the link in the first few seconds), from the home page you click through to the DeepZoom based Silverlight application.

Then clicking on a cover takes you into an issue. Clicking on pages brings that page into full view.

And an example of searching, with full highlighting, deep linked to from the search results below.  (Just don’t ask how they afforded the army of chimps to highlight all the text.)

For those that feel dubious heading over and checking it out, the older 1960’s magazines are generally work safe for the first 60 pages, if not cover to cover.

Bill Burton and Scott Guthri were impressive. Their views were insightful, reinforcing, and the technology announcements presented were just as impressive. I recommend checking out the keynote over at live.visitmix.com. The technology announcements and demos were impressive. From Expression Blend, to IIS administration, the new features are market driving. Some are ‘about time’ and others ‘just in time’, others ahead of their time. The consistency and pipeline Microsoft provide for delivery between developers and designers with Expression, or the ease with which IIS and IIS applications can be managed are needed.

Not only were the Microsoft demos impressive, so were Netflix and BONDI/Vertigo. With Netflix being able to offer to a broader sprectrum of the consumer market, and release fortnightly instead of annually, their business has transformed. Similarly BONDI, specialists in back catalogue magazine capitalisation, created an entire new business, with the entire back catalogue of Rolling Stone magazine indexed, searchable, leveraging Silverlight 3 and deep zoom for a completely new visual experience.

Silverlight is a technology that is moving so fast I find it hard to keep up. The new pixel shader effects are exciting, and so easy it feels like cheating. Being able to splash them around on *any* control is too much fun. Be prepared for gratuitous overload for the first few months/years. Scott Guthri’s demo is worth watching to understand this. Even though Scott jokes, someone will put perspective and ripple effects on forms, and 10 people will copy that, and so on. Impressive features now in Silverlight include the ability to pump videos to FTP/WebDav locations direct from encoding, adaptive streaming over HTTP. Silverlight 3 also brings thick client “out of browser” applications. These also come with auto update features, online and offline synchronisation and data binding, and all out of the box. This isn’t just a Silverlight .NET shell for apps to run under windows, it comes with a full blown API for network connectivity detection. These applications are also running under OSX, as was demo’d in the keynote by KEXP radio. KEXP have an offline player, with online synchronisation and features, single click install (The install was such a non event most people missed it!).

Lunch consumed, and session 2 is about to start, the room looks empty. With 10 sessions going at the same time, this is a great way to have small intimate groups with audience participation/interaction.

The team over at Microsoft have laid down the gauntlet with a deep zoom collage of the photography going back to 1978!  There are hundreds of photos, all easily filtered in realtime, and the experience is impressive.  The entire application was developed in just 6 days, and is stored on the Windows Azure Storage Services.

Hurry!  You can still check it out HERE. And for more information on how those delicate geniuseseses put it together, head over the Michael Kordahi‘s blog.

Javascript is an exteremely powerful language, and for products such as Sproutcore and Silverlight, it is a great thing.  I questioned it in Silverlight initially, but came to love the Javascript support.  Rather than being proprietary, it opens the door to so many more businesses who can not step into the realm of Flash due to lack of skills and toolsets within their delivery teams.  With Silverlight 2 just around the corner, you will be able to take an array of languages that have excellent application building tools, even allowing Ruby could power your applications front and back, with Silverlight as the glue.  These languages have a solid history, experienced developers, MVC frameworks, mature tools, and online communities.

Of course the main place Sproutcore is going to be exciting for Apple, adding ease of development, and more depth to browser applications, is on the iPhone.  In general the current selection of iPhone applications are good.  Not great, not cool, just good.  But writing iPhone applications is cool.  With the cool factor driving development and innovation, Sproutcore applications written for iPhone are likely targets for the Nokias and LGs in the market. 

Could it be that the ultimate mobile combo a Silverlight RIA front end with a Sproutcore MVC driving it in the background?  Only if banner advertising is brought to you by Flash.

First up, my usual disclaimer… I don’t recommend using this format for real architecture diagrams.  They will have too much detail that will make this process too fiddly and prone to error.  I do however recommend this for Deep Zoom presentations.

Creating architecture in deep zoom is easy.  But there are a few hurdles.  The main issue people face that their diagram software does not allow for minute fonts.  I use Visio, and have exactly that issue.  Here is the solution…

1. Create your overview architecture.

   

2. Create place holders where you require extreme detail.  A space, an X, a tiny descriptor, whatever works for you.
3. Create new slides with GIANT versions of the slides you have made placeholders for.

   
   

4. Either print to PDF and import into Photoshop, or save
   the document as PNG.  Unlike Powerpoint, Visio and other vector drawing
   tools allow you to pick your export dpi.  I use very high dpi for great
   results.  It is probably overkill.

   

5. Import all the images into Deep Zoom, and lay out the architecture overview.
6. Export
7. Done

Note
that if you are doing this as part of a presentation, first lay your
architecture overview slide, then start laying out the pieces
architecture.  Working from the bottom up is the best approach. 
However, you will need to rejig it from time to time, and using ‘layer
view’ in Deep Zoom Composer will stop your brain doing back flips when
trying to find components of the architecture.

Now you have stopped playing with it, and decided to read this paragraph, there is one thing I should say.  I do not recommend everyone jumping ship and moving to a Deep Zoom slide deck, it is slightly technical, but there are certain situations where it shines.

So here are some easy steps to moving from a Powerpoint slide deck, to a high quality Deep Zoom slide deck.

Thinking about it

The Deep Zoom slide deck was always something I was thinking of doing… time permitting.  I had a grand vision for something that was more driven by the multimedia experience than any practical reasons.

What I found however was that I had produced a high level architecture diagram in Visio for the presentation of the ABC Preview Player and video download project.  At the same time I wanted to be able to include fine details alongside the broader view.  Deep Zoom was a natural fit allowing me to show minute detail, while still having the context of where the detail sat in the overall architecture.  Initially only the achitecture diagram was going to be in Deep Zoom, but then it made too much sense to do the entire thing in Deep Zoom.

So what did Deep Zoom give me that Powerpoint could not?  First up was the ability to zoom right into architecture diagrams, right down to code.  The big general bonus was the ability to include hi-res screenshots on a slide as a thumbnail, and being able to zoom in, let everyone take in what they were seeing, and then return to the discussion.

Step 1 – Creating Your Slides

Easiest thing to do, create your slides in Powerpoint.  Where you wish to have high detail, leave placeholders, or blank spaces.  If you are using images in your slides, ensure you use the highest resolution version of the image you have available.  This becomes important when presenting your deck.

Step 2 – Export to Extremely High Resolution

Since you’ll be zooming in to 1000+%, you don’t want your fonts pixelating.  Powerpoint does come with a few features to export at higher resolutions, and also has the ability via reg-hacks to push the boundaries of this.  The problem is that this isn’t enough.  1000 or 2000dpi will not cut it.

For best results print a PDF document to pre-press quality.  There are plenty of PDF print drivers out there.  Once printed to file, import this into Adobe Photoshop, Illustrator, or any PDF to Raster program, and you can get 9000 dpi output.  Note in the deep zoom below the difference from the original through to the Powerpoint PNG export. The images have not been resized to give an indication of the loss of quality. Also, in the previous Deep Zoom above you can notice the impact of using original images. Check out the two large images, both similar quality, and then check out the two smaller images. The high res original really shines at high zoom.

TIP: When converting the PDF to Raster, save each slide numerically with a title.  For example: ’4 – Architecture Diagrams.png’.  This will help massively when you are trying to find slides using Deep Zoom composer.

Step 3 – Import into Deep Zoom

Create a new Deep Zoom project.  If you don’t know how to use Deep Zoom, you may pick it up in 5 minutes, or struggle. 

NOTE: If you struggle with composing in Deep Zoom after a while, then porting all your slide decks to Deep Zoom is going to be an expensive and painful process.  Either get someone else to do them, or stick with static decks.

Step 4 – Composition

Once you have imported all your high resolution slides, it’s time to start composing.  General rules for composing slide decks.

1. Start with the slide that will be your first slide, and make it fill the intial Deep Zoom working canvas.  When you load your Deep Zoom deck, it will automatically start on that slide, full screen.  It is important that you play around with your decks, so do not try to perfect them if this is your first go, as many of the concepts become clearer as you play around with it more.

   NOTE: Not having the deep zoom load on your first slide will lead to you digging for your first slide, which in turn spoils the entire wow factor when you move to slide 2.
   

2. Lay out your slides in order, as this will ensure the layers implicitly are correct.  Remember to play around with positioning and zoom levels.
3. Ensure you don’t zoom too deep too many times.  Nested slides look excellent, however Deep Zoom composer will fail during export (and fail silently) if your zoom goes too deep.  The Deep Zoom powers that be inform me that this is a composer issue, and is likely to be fixed going forward.
4. Ensure your slides are easy to locate.  A 10 second search for a tiny 0×0 pixel slide during your presentation will make you look clumsy.  It is better that your slides look good, and you impress, than your slides look great, but you look stupid.

Step 5 – Export

Hit the 3rd step, and export as a Silverlight project and preview in browser once exported.  It looks great… but it is not big enough. Almost there!

Step 6 – Pump the Resolution

You’ve created your project, but it’s too small.  You want full screen 1280×1024 for your projector, or maybe 1024×768 (which was the case at Remix08).  First we round the numbers down.  I used 1000×750 at Remix08.  This gives room for the toolbar and status bar, and avoids any scrollbars turning up. You can modify the code so it automatically lands full screen, but this may be undesirable. I went this way, and then returned to static sizing. Also, I often make the body background black in the HTML so I know exactly where the borders are of the slide deck so I don’t have to double check the projector while presenting. Once again, play around and see what suits you best

Open up the project in Visual Studio 2008.  There are two files within which you need to tweak the resolution.

1. HTML Page – The Silverlight plugin will be loading at a particular resolution.  This needs to be changed from the default to your nicely trimmed full screen resolution.
2. Page.xaml – Any proportions associated to the grid and the multiscale image should be adjusted to the same resolution as used on the page.

Now run the web project.  When the browser opens, hit F11 for full screen browsing. 

Note that you can do deep zoom using Silverlights full screen mode (instead of full screen browsing) but you will lose mouse scroller capabilities which is generally crucial to Deep Zoom.

Done!

Now sit back and enjoy the slides. Practice moving your deck around as much as possible. That wasn’t so bad was it? One would guess that Microsoft will evolve this into their entire Office product range to make this pipeline easier, but until then, happy exporting.