Many people at Remix08 were asking about the slide deck I had collated in Deep Zoom for the Building Immersive Media Applications in Silverlight presentation. This post is a brief overview of how to create a Deep Zoom slide deck, such as the one below. Click / drag / scroll around on it and you will get the idea. If you can’t see it you will need Silverlight 2 (currently beta) installed.
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.
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.
Lay out your slides in order, as this will ensure the layers implicitly are correct. Remember to play around with positioning and zoom levels.
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.
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.
- 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.
- 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.
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.