Friday, November 19, 2010

DemoMate Enhancements - November 2010

The DemoMate Team is proud to announce that a new version has been released (Version 1.2), introducing a number of new features, including a step fade effect, rotatable click bubbles, and a new splash screen. Take a look:

DemoMate Tutorial:

November 2010 New Feature Demo

Get Microsoft Silverlight

New Splash Screen: The first thing you'll notice is the new DemoMate "Splash Screen." Now, the DemoMate application launches in a new way, with new options to choose from to help you save time, and delight your customers with your work.

WYSIWYG Editing Experience: Once inside DemoMate, you'll notice a new look and feel within the DemoMate editor. Based on feedback from the DemoMate Community, we've updated the shape and behavior of the Click Instruction bubble inside the editor, so it accurately reflects the experience your viewers will see, and gives you more design control at a greater level of detail. This size and color of the click bubble matches what customers see in play mode, and you can now freely rotate and move the click instruction bubble to place it exactly where you want it to appear.

Step Fade Transition: As requested by the DemoMate Community, you will notice a new step control is available in the Editor, called a Step Fade. By selecting this option, you can add a "Fade-In" effect to any step of your demo, allowing you to create a graceful transition between steps or sections.

Dramatic Performance Enhancements: When you're ready to package or publish your demos, you will certainly notice the dramatic new performance enhancements our technical team has delivered for you. Packaging speeds are literally ten times faster in this new release than they were previously ... with these time-saving enhancements, demos that once took minutes to package or share, now take seconds.

Event Logging for Scripting and Analytics: As requested by our more technical customers and partners, we've made available a complete set of Event Logging Options that can accommodate advanced Analytics and Scripting. For example, you can now track when a given demo begins and ends, enabling you to pull reports or create sequential events on your website. To view the documentation on this new capability, click here. Developers can also follow us on Twitter to receive alerts whenever new content is posted.

General Maintenance: New “Cue Type” selector in Options Menu, improved ESC and Left CTRL key performance in Windows 7 environments, increased font size in Click Instruction Bubble, updated Help Text, various other enhancements.

Thursday, November 18, 2010

Implementing DemoMate Event Logging

The DemoMate Silverlight Tutorial Player has support for reporting events to the host HTML page, allowing for dynamic, interactive pages based on the progress of the tutorial. This support is in beta form and is subject to change; please contact DemoMate support if you have any questions or concerns about the behavior of the Tutorial Player when Scripting Support has been enabled.

Packaging Your Tutorial

Before you can enable scripting support, you must first package your demo as a Tutorial. Both the “Multiple Files” and the “Single File” Output options support scripting. The “Single Executable” option is not Silverlight based, and thus cannot be used for scripting.

Writing Your Scripting Functions

The packaged Tutorial contains a simple sample HTML file that demonstrates how the XAP file should be embedded into a website. You can use this file as a starting point for your own design. Before you can enable Scripting Support, you must write two functions that will be used by the Silverlight Tutorial Player to report events to your host HTML page.

The <object> Tag

The tag in the sample HTML file places the Silverlight Tutorial Player on your web page. In order to register for Scripting Events, you’ll need to make two changes to the sample code as indicated:

<object id="myTutorialPlayer" data="data:application/x-silverlight," type="application/x-silverlight-2" width="399px" height="346px">
<param name="onload" value="tutorialLoaded" />
<!-- other param tags -->

The sections indicated in italics are the additional changes. There are two settings that are important in the next steps:

  • The id attribute: this can take any value, and is used to identify the Silverlight Tutorial Player when registering to receive events.
  • The value attribute of the onLoad parameter: This attribute can also take any value, and is used to tell the Silverlight Tutorial Player what function to invoke to allow your code to register for additional events.

Both of these attributes are used in the section “Registering to Receive Events”, below.

The Event Handler

The event handler function takes the form:

function trackTutorialEvent(tutorialPlayerObject, tutorialEvent)
var eventAction = tutorialEvent.EventName;
var tutorialName = tutorialEvent.TutorialName;
var tutorialId = tutorialEvent.TutorialId;
// Your event handling code:}

This event handler is later used in the section “Registering to Receive Events”, below.

The arguments to this event handler are:

  • tutorialPlayerObject: This is an opaque reference to the Tutorial Player Engine. At this time it has no supported attributes for inspection.
  • tutorialEvent: This object represents the event being emitted. Possible attributes are:
    • EventName: The name of the event being emitted. The current supported values are “TutorialBegun” and “TutorialCompleted”. There may be other events emitted that are unsupported at this time.
    • TutorialName: The name of the tutorial that generated the event.
    • TutorialId: A unique Id for the tutorial.

Registering to Receive Events

Once you’ve written an event handler that does what you want, you can register your event handler with the Silverlight Tutorial Player. This function takes the form:

function tutorialLoaded()
var tutorialPlayer = document.getElementById("myTutorialPlayer").Content.TutorialPlayer;
tutorialPlayer.TutorialEvent = trackTutorialEvent;

This function loads the tutorial player object from the DOM and registers the TutorialEvent event handler that we previously wrote. Note:

  • The name of the function must match the value attribute of the onLoad parameter added to the object tag
  • The argument to getElementById must match the id attribute of the object tag.
  • The value assigned to TutorialEvent must be the name of the event handler function.


Contact DemoMate Support at or your Impresys Corporation representative for further information regarding this feature.

Merge / Insert Demos Captured at Different Screen Resolutions

We’ve heard from customers that the ability to merge demos is an important capability of DemoMate that allows them to append and combine demo assets that have been captured separately. In some cases, however, the demos in question were captured at different screen resolutions, and won’t combine.

What to do?

Here’s a quick solution.

Simply resize the screenshot images from one demo to match those of the other -- using an image resizing tool. Programs like SimpleSizer, available from FileBuzz, let you resize images in bulk so you can adjust all the screenshot images in one demo to match the size of those in another demo. For example, let’s say you have a demo with screens captured at 1280x1024 and another at 1024x768, and you want to merge the two. Use SimpleSizer to resize the 1280x1024 images down to 1024x768, and then merge the two demos. Please note that this process has limitations — resized screenshots will blur slightly and the relative size of objects on screen will be different for the two demos. However, for some purposes, the result may be sufficient and justified by the time and effort you’ll save by not having to recapture an entire demo.

SimpleSizer can be downloaded from Simply point the application at the demo assets folder for the demo you want to resize (make sure to have it search subfolders) and specify the new size for your screenshot images. Once you have resized the images, merge the two demos by inserting one into the other.

Wednesday, July 7, 2010

DemoMate Enhancements - July 2010

The DemoMate Team is proud to announce that the latest version has been released (Build 1078), introducing a number of new features, and a major new enhancement: “Video Boxes.” Take a look:

DemoMate Tutorial:

Video Boxes Demo

Get Microsoft Silverlight

Video Boxes: Now you can add video to your demos! Video Boxes are a great way to add a “Wow Factor.” DemoMate Video Boxes let you embed any video created in the Windows Media format (.wmv). You can use Video Boxes to simulate streaming video in an application or through the web, conducting video chats, and more. You can also use Video Boxes to add animated intros to your demos, such as an exported 3-D effect. Other great uses are to embed a customer testimonial video, or a few words from a key executive. Video Boxes are flexible/resizable, and can be set to play automatically, or on demand.

Video Boxes Supported in all Playback Modes: Video Boxes are supported in all DemoMate playback modes, including Preview, Present, all embeddable Silverlight Players, the “Click-to-Run” .EXE Player, and the hosted Player on

Simulated “Drag and Drop”: We have updated Presentation mode so that when you click and drag the mouse cursor, a new cursor is displayed that increases realism.

Highlight Boxes on Demo Scripts: Highlight Boxes are now displayed on exported scripts, making it even easier to use your demo scripts as training materials in hands-on labs.

Turn Mouse Pointer On / Off: As requested by the community, you can now Turn Off the Mouse Pointer on any step. This is helpful when you are displaying presentation graphics or video.

Keyboard Shortcuts: As requested by the community, we have added keyboard shortcuts to DemoMate for many commonly used commands. Please check the DemoMate Help available in the client for a complete list of shortcuts.

Fewer times to “Make an Editable Copy”: As requested by the Community, DemoMate no longer locks demos for editing when you press “Present.” This will significantly reduce the number of situations where you will be prompted to “make an editable copy” of a demo you are creating.

Increased Tutorial Font Size: As requested by the Community, we have increased the font size in the script pane of the Tutorial Player to make on-screen scripts more readable.

Ongoing Optimization: The process of packaging stand-alone auto-play demos as .EXE files (from the Package Tutorial option) is now 400% faster. The packaging process for Installers has also been optimized.

General Maintenance: Various enhancements.

Tuesday, July 6, 2010

Set Silverlight Tutorials to 100%

When working with DemoMate Silverlight Tutorials, you can set them to expand automatically to fill all available browser space by changing the Height and Width parameters in the OBJECT embed HTML that is generated by DemoMate as part of the packaging process. Simply change the default values for both Height and Width to 100%, and your tutorial will automatically expand when launched.

Monday, July 5, 2010

New DemoMate Shortcut Keys

Here’s a quick summary of the new Shortcut Keys available in the newest DemoMate release (Build 1078):

CTRL + N: New Demo
CTRL + O: Open Demo
CTRL + W: Close Demo (also CTRL + F4)
CTRL + S: Save Demo
F1: Help
F4: Preview Demo
F5: Present Demo
F6: Play Demo
F9: Capture Demo
DELETE: Delete Step

Monday, April 5, 2010

DemoMate Enhancements - April 2010

The DemoMate Team is proud to announce that the latest version has been released (Build 1020), introducing a number of new features, and a major new enhancement: “Guided Steps.” Take a look:

DemoMate Tutorial:

Guided Step Tutorial

Get Microsoft Silverlight

Here are all the new and enhanced features in the latest release:

Guided StepsTeach the world how to use your software! By adding Guided Steps to your demos, you can create interactive training sessions that combine both auto-play content with interactive steps where the user clicks the mouse or enters text to move forward.

Guided Labs - At events, you can now use DemoMate to create “Guided Labs,” offering a delightful experience to your customers and prospects, and a cost-effective compliment to traditional “Hands-On Labs.” Because you create these labs in DemoMate, the same content can be instantly available on-site, distributed as a take-away, or hosted online for those unable to attend. We created this “Guided Lab” logo you can use. To download, just click here, or on the logo below.

Guided Support on all DemoMate Players – You can easily deploy Guided Tutorials and Guided Labs to your training and support portals. Guided Steps are supported in all DemoMate Players, including all embeddable Silverlight players, the “Click-to-Run” .EXE player, and the hosted player on

Jump Boxes Active in all Tutorial Players – Now you can add user-directed navigation to your Guided Tutorials. Jump Boxes are now supported on all DemoMate Players, including all embeddable Silverlight players, the “Click-to-Run” .EXE player, and the hosted player on In addition to in-demo navigation, this enables users to link to external content, such as websites or hosted documents.

Hover States Display in all Tutorial Players – As requested by the community, "hover states" are now supported on all DemoMate Players, including all embeddable Silverlight players, the “Click-to-Run” .EXE player, and the hosted player on Just press Play and you will see the difference - providing maximum realism!

Highlight Boxes – As requested by the community, you can now place a Highlight Box (a rectangular red frame) on any step. This can be a great way to call attention to a potion of the screen that is discussed in your presenter script or audio track.

Open Asset Folder – As requested by the community, we’ve added a new right-click context item to the Step Menu that will open the asset folder for that step in Windows Explorer, making it easier to edit demo screenshots when necessary.

Informative Progress Bars – As requested by the community, new Progress Bars appear when packaging demos that include the estimated time remaining.

General Maintenance – Ongoing file-size optimization, performance optimization, refinement of the Control Bar pop-up in all tutorial players, Animated Click Beacon now displays elegantly in all tutorial players. IPL (1017, 1018)

Thursday, April 1, 2010

Adding Text Boxes to Your Demo

As part of our most recent release of DemoMate, we introduced text boxes, which allow you to simulate typing into text fields during your product demonstrations. In addition, text boxes will automatically animate typing text in during an auto-play demo, making your online tutorials more realistic.

Click below to learn how to work with text boxes in DemoMate:

DemoMate Tutorial:

Capturing and Creating Text Boxes

Get Microsoft Silverlight

You can add a text box control to a demo step by clicking the Add Text Box button. Clicking this button will place a new text box (shaded orange) on the screenshot for the current step, which can then be dragged and resized to be positioned over the field where you want to simulate typing. You can then type whatever text you want to display directly into the text box field, and even adjust the font type and size. Each step can have a single text box control placed on it.

When you arrive at a step with a text box control while presenting your demo, you’ll be able to simulate typing on your keyboard, while the pre-defined text string types itself in with each key pressed. The actual text you type on your keyboard doesn’t matter, because the text that will be displayed has already been defined in the editor. Pressing SPACE on a step with a text box will automatically complete all the remaining text for that text box. Pressing ENTER on a step with a text box will automatically complete all the remaining text for that text box and automatically advance to the next step in the demo (after the text has finished typing in).

When a demo is displayed in auto-play mode (by clicking Play in the client or when watching a packaged Silverlight version of a demo), the text will automatically type itself in when a demo step with a text box is reached.

A text box control should be placed on a step in the demo where the text field is empty. Depending on what the next step in the demo is, you might then position the Click box to be either directly behind the text box, or on top of a Submit / OK button of some kind.

Tuesday, February 23, 2010

DemoMate Enhancements - February 2010

The DemoMate Team is pleased to announce that the latest version has been released (Build 969), introducing a number of new features and enhancements. We’ll be adding numerous new tutorials over the next few days to give you a complete overview of the team’s great work. Check back often!

Scenario Branching: In this release, we’re proud to deliver one of the most-requested features from the DemoMate community, Scenario Branching. This enables you to create non-linear demonstrations driven by the interest of your audience, and opens a world of presenter-driven demonstration options. The new feature that enables branching is called a “Jump Box.” Check it out in this tutorial:

DemoMate Tutorial:

Scenario Branching

Get Microsoft Silverlight

External Links: The new Jump Boxes can also be used to create links from your presenter-driven demonstrations to any URL or URI, so you can link to Videos, Websites, or Supporting Documents such as Worksheets, Quotes, Proposals, or Technical Specifications. To create an link, just add a Jump Box and select “Add New Address” from the drop-down menu.

Interactive Text Boxes: Need to simulate secure sign-in? Now you can. Text Boxes are another new feature in this release. With Text Boxes, you can simulate typing into a text field during your demonstration. Font and size options help you with match text or select “password” style (dots).

Animated Text Boxes: In all DemoMate Auto-Play modes, Text Boxes animate elegantly. This includes Auto-Play in the client, the hosted Silverlight Player on, the embeddable Silverlight Players, and the “Click to Run” EXE.

Click-and-Drag Click Boxes: We’ve updated the Click Boxes (includes Jump Boxes and Text Boxes) so you can Click and Drag or Click and Resize.

Persistent Click Here Cue: As requested by the community, pressing Tab in Preview or Present modes displays the “Click Here” cue persistently as you move from step to step until you press Tab again to remove it.

Show/Hide Click Bubble (Editor): As requested by the community, you can now show or hide the Click Here bubble while working in the Editor.

Capture “Glossy” Overlays: DemoMate now supports capturing the newer “glossy” overlays, being used for pop-up windows, hover states, sidebars, and application menus in advanced applications such as Visual Studio 2010.

The Need for Speed: As mentioned in our January Twitter post, we’ve launched numerous client- and server-side enhancements to optimize launch times, bandwidth, and memory management.

IPL Release (969): General updates.

Thanks to the Community for all of your ideas and input. We’ve worked hard to bring you these enhancements and we’re already well on our way to the next release.

Go forth and demo!

Monday, February 22, 2010

Working with Jump Boxes and Click Boxes

Each step in DemoMate requires you to have a Click Box in order to ensure that the user can click through the entire demo in a linear fashion. There are several ways you can approach having both click boxes and jump boxes on the same step:

  • You can have one of your buttons set as the “default” or preferred choice, and use the click box as the overlay on that button. Clicking on that button would then take the user to the next step or section in the demo. You can then place Jump Boxes on all the other buttons on that screenshot.

  • You can also simply minimize the size of the click box and drag it into a corner on the screenshot. You would still get a “Click Here” cue over the click box in this instance, so the first option might be the better choice if that is a concern. This approach is best when the sections you want to link to are further up or down in the demo navigation pane, and you don't necessarily want the demo presenter to advance to the very next step in the demo.

Introduction to Jump Boxes

By adding a jump box control to a demo step, you can provide some additional flexibility in demo navigation by allowing you to “jump” or “branch” to a different section in the demo. For example, you might have an introductory screenshot that allows the demo presenter to click on one of several choices, each of which jumps to a different section in the demo. The same approach could be used at the end of a demo section, to allow the presenter to choose where to go next in the demo.

In addition, jump boxes can also be used to embed hyperlinks to external content in your demo. This can be used to create a “For More Information” link at the end of a demo, or perhaps to link to a series of related documents that are hosted on a publicly-accessible web server.

To add a jump box to a demo step, click on the Add Jump Box button on the step controls. This will place a new jump box control on the current demo step. Multiple jump box controls can be placed on a single step. To customize the location of a jump box, expand the “Jump To” menu and select the demo section you want that jump box to point to. With the Jump To: menu open, you can also click the “Add New Address” button to type in a URL for the jump box.

Currently, Jump Boxes are only active in the Present / Preview modes for a demo. They will not be displayed in auto-play mode.