Table of Contents

Article

How to provide audio feedback in your application using SWF

Summary

Based on their experiences with cell phones, bank ATM machines, Microsoft Outlook and other software, many users like audible confirmation from a device or software application. Other users prefer silence.

Audio confirmation (such as chimes or short beeps lasting less than half a second) allow users to focus on their next task, such as reading from a source document or another window, rather than continuously watch the Process Commander session. Research shows that such sounds can improve productivity and accuracy, in fast-response-time situations as well as situations with poor or unpredictable response times.

You can incorporate short sound effects in work object forms to provide such feedback using paragraph rules, binary file rules, and short audio-only Flash files. This example provides three sounds:

This technique requires that users have the free Adobe Flash Player add-on. If the users's workstation has WWW access, the Flash Player is downloaded (from Adobe) upon first need. (This example tested with V5.4 WorkUser and WorkManager portals and Internet Explorer 7.)

Suggested Approach

1. Select and convert sound files

Identify the situations in your application where audio signals are useful. Locate SWF files that are meaningful and appropriate to each situation.

Numerous WWW sites offer free or inexpensive "SoundFX" files, many in the Windows WAV format. You can also "repurpose" sound files already on your workstation (subject to legal restrictions). Widely available utilities can convert WAV files to SWF format. The SWF files in this example are less than 5 kilobytes in size.

2. Create binary file rules

Upload each SWF into a binary file rule. For example, the error sound in this application uses a Flash file named outermarker.swf, saved in a binary file rule named webwb.outermarker.swf:

Binary File rule

As with JPG and GIF files, Process Commander extracts and serves the SWF files at runtime into an /images subdirectory.

3. Create paragraph rules

Web pages use an HTML <OBJECT ..> element to cause a Flash file to be served and play. A paragraph rule provides a direct way to include both an image file (such as a GIF or JPG) and the <OBJECT> tag. (In other situations, an HTML fragment rule may be used.) The application's harness and flow action rules can include the paragraph and still use auto-generated HTML.

In this example, a paragraph rule named outermarker includes the familiar red X image followed by the <OBJECT > tag.

Paragraph

Click to place the Paragraph tab in Source mode. Enter the following <OBJECT > tag, or copy and paste the tag from the standard rule Data-Gadget.WelcomeScreen, adjusting parameter values and two file reference. (Windows may supply additional parameters when you save the rule.)

<OBJECT
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=5,0,0,0"
width=20 height=20>
<PARAM NAME=movie VALUE="outermarker.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="https://community.pega.com/%3Cstrong%3Eoutermarker%3C/strong%3E.swf" quality=high
bgcolor=#FFFFFF width=20 height=20
type="application/x-shockwave-flash"
pluginspace="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

This sample application used a second paragraph named notify and with a green checkmark (image greencheckmark.gif) for "success"., and a third paragraph named "cymbal" with a green circle checkmark (image zok_tree.gif) for "resolved".

Save the Paragraph form. Click the Preview toolbar button to confirm that the paragraph "plays".

4. Update harness rules

You can include the paragraphs into any cell on a harness or flow action rule, choosing a portion of the form that is refreshed upon submit.

In this example, a custom section overrides the standard Work-. AllErrorMessages section, adding the outermarker paragraph to a new cell:.

Section

Using a standard when rule @baseclass.hasMessages, the red x and the sound occurs only if the primary page contains one or more messages.

Panel

Next, add this section is added to the bottom of the New harness of the application, being careful to place it in an area that is always displayed (not deferred or collapsed.)

New harness

Confirm harness

In this application, the confirm harness appears when the user enters or updates a work object successfully. The confirm harness includes two paragraphs, each made visible conditionally.Confirm harness'

  • The first paragraph Notify includes the standard image greencheckmark.gif and the Notify.swf sound. It appears when the work object is not resolved.
  • The second paragraph includes the standard image zok_tree.gif and the cymbal.swf sound, and appears if the standard when condition rule Work-.Resolve is true.

Flow Actions

By default, when a user submits a flow action form but validation errors occur, Process Commander refreshes only the flow action portion of the form.

In this example, the paragraph added to the New harness form is also added to the bottom of each flow action rule, conditionalized to appear only when @baseclass.hasMessages is true.

Flow action

5. Test

By default, Flash files, like JPG and GIF files, are cached by Internet Explorer.

When testing your audio effects, clear your Internet Explorer cache frequently, or test using a separate workstation and Operator ID.

In this example, a custom validation rule overrides the default standard rule Work-.OnAdd to require that the pyLabel field be at least 12 characters long when a new work object is created. Otherwise, the error paragraph plays.

New work object

Similarly, a second validation rule overrides Work-.Validate to require that pyDetail not be blank.

flow action test

When a work object becomes resolved, the confirmation harness announces the success.

Resolved

Note

In this example, the sounds play for all users. To conditionalize for users who prefer silence, you can allow users to set a Boolean property value that determines, through circumstance tests, whether the audible or a silent version of the paragraphs are sent to the browser.

Published April 25, 2008 — Updated September 9, 2008

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.