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:
- Error (Play outermarker.swf )
- Success, work object is entered or advanced (Play notify.swf )
- Success, work object is resolved (Play cymbal.swf )
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:
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.
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://docs-previous.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:.
Using a standard when rule @baseclass.hasMessages, the red x and the sound occurs only if the primary page contains one or more messages.
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.)
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.
- 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.
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.
Similarly, a second validation rule overrides Work-.Validate to require that pyDetail not be blank.
When a work object becomes resolved, the confirmation harness announces the success.
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.
- How to customize the presentation of errors on work object forms
- How to include paragraph rules in section and harness rules
- Why is that thing beeping?: A sound design primer (Max Lord)
- www.icad.org (International Community for Auditory Display)