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 -->
</object>

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.

Questions

Contact DemoMate Support at support@demomate.com 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 http://www.filebuzz.com/fileinfo/30118/SimpleSizer.html. 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.