Accessibility

Table of Contents

  1. Introduction
  2. Presentation Engine
  3. Playback Support

Director and SCORM 1.3 SCORM SCO Presentation Engine (S2PE)

Playback Support

One goal of the S2PE is to leverage the content creator's vision. The support for a variety of media asset types includes graphics, 3D, text, video, audio, Flash and Shockwave. Their implementation by the author is not limited to merely placing elements on the screen. Support for event synchronization allows media elements to have their location, transparency, visibility, z-ordering, playback rates, video locations, and so forth set and tweened automatically at runtime. All necessary mathematical in-between calculations are performed by the PE. The author need only specify key event times.

For many designers, they're content appears on screen as delivered to the programmer. Yet, with the S2PE they are able to easily set many properties that they relied on the programmer for. For example, the "render" tag maps directly to Director's sprite "ink" property. "Blend", "background" color ,etc are all exposed to encourage creativity. For many designers this is something new to work with. In general, properties of sprites map to a specific tag within the CPM XML file.

Multi-state buttons, graphical and textual hotspots, pop-up images and pop-up text all offer additional capabilities in support of the author. All on screen items are referred to as media elements. Nearly all media elements share a set of common attributes (Figure 8).

Media Element
Source
FilePath Relative file path to linked media.
Location
Origin X,Y coordinates of media location on screen.
Relative Determines whether the Origin attribute is relative to the Content window or the overall GUI.
Horizontal Reg Sets the left edge, right edge, or center position of the element as the horizontal value set by the Origin attribute.
Vertical Reg Sets the top edge, bottom edge, or center position of the element as the vertical value set by the Origin attribute.
Render
Compositing Method Determines the final appearance of the rendered image in the video buffer on a per pixel basis. Based upon the elements pixel color and the color of the media elements rendered beneath this element.
BackGroundColor Sets the overall background color of the element. Can be combined with the Render attribute for basic masking or matting. Set as an RGB value.
Size
Height Height of the element in pixels..
Width Width of the element in pixels.
State
Transparency Set the transparency of the media element.
Visible Show or hide the media element.
Mouse
Draggable When true, the user may drag the element with the mouse.
Refresh When false, disables erasing of previous renderings of the element within the video buffer.

Figure 8. Common media element attributes

Specific media elements have their own applicable attributes. Graphic attributes are shown in Figure 9.

Graphic

Supported Formats ( PNG, JPG, GIF, BMP, TIF, PSD) Note: PSD (Photoshop) files depend on the state of the PSD when it was last saved. Hidden layers are discarded and the visible layers are flattened to yield the final image.

Inherits from Media Element Properties

State
OnSubmit When True, the graphical asset remains hidden until the user selects the Submit button.
HotSpots
Yes See HotSpot description.
Synchronization
Location See Location.
Transparency See Transparency.
Z-Ordering See Z-Ordering.
Visibility See Visibility.
ZoomStack See ZoomStack blend and target rects.

Figure 9. Graphic Media Element Attributes

Any media element may have hotspots assigned to it. Hotspots are described as areas within a sprite area. This is similar to an HTML image map. For textual elements, it is done on a per word, or word range basis. Hotspots support unlimited pop-up graphics and text for each spot.

Though a basic overview, the previous information allows inspection of a simple CPM XML file (Listing 7).

<graphics>
    <graphic filename=":::ashleym.png" origin="320,200"/>
</graphics>
 	 
<text>
    <head render="bgtransparent"> Adobe > Thank You Director</head>
    <prompt color="255,255,255" align="center" render="bgtransparent"/>  
</text>

Listing 7. CPM XML file with a single graphic

All graphics are enclosed within the graphics tag. In this case there is only the single ashleym.png file. Also included with that graphic's information is its layout location.

This XML file does not indicate any text to be rendered on screen but does take advantage of the built-in support for header text and a user prompt. The next example includes audio, graphics, and a linked Director movie (LDM) containing an independent 3D world (Listing 8).

<audio>
    <synch filename=":::shelbym.mp4" start="-1" stop="-1"/>
</audio>

<graphics>
    <graphic filename=":::type4.jpg" origin="center,center" blend="60"/>  
</graphics>

<ldm>
    <ldm filename=":::butzi.dcr" origin="center,center" visible="true"/>  
</ldm>

<text>
    <head>Compound/Element > Compound</head>
    <prompt>Click Continue.</prompt>
</text>

Listing 8. CPM XML file with a graphic, LDM and audio track

Note that in the audio section there are start and stop times listed. The values of -1 indicate play from start to end. However, any value in 1/60 second increments may be used.

The graphic section places the location of the image at "center, center". The XML specification allows this value as shorthand. Besides specifying the term "center" or absolute pixel locations, you can also use fractions such as "1/4" to indicate one-fourth of the way in the specified direction.

Finally, Listing 9 is a more complex XML file. This is a partial list of a file used to run a 60-second sequence of animation, art, video, and music. The main feature to note is the synch attribute, which is used to interpolate media element states in reference to the movie time of the audio filename at the top of the file.

<audio>
    <synch filename=":::shortPhili.mp4" start="-1" stop="-1"/>
</audio>
                                                                                                
<video>
  <video filename=":::drmiller.mp4" origin="center,center"  width="640" height="420" visible="0">
    <synch>
        <playrate>
            <playrate event="start" playrate="1.0"/>
            <playrate event="100" playrate="6.0"/>
            <playrate event="2800" playrate="0"/>
        </playrate> 
        <visible>
            <visible event="start" visible="1"/>
            <visible event="100" visible="0"/>   
            <visible event="110" visible="1"/>
        </visible> 
        <playtime>
            <playtime event="start" playtime="1100"/>
            <playtime event="1850" playtime="4600"/>
            <playtime event="2450" playtime="11000"/>
        </playtime>
    </synch>
</video>

<graphics>
  <graphic filename=":::collage_01.jpg" origin="center,center" visible="0">
    <synch>                                                                                     
        <zoomstack timebase="audio">
            <zoomitem filename=":::collage_01.jpg" targetrect="85,110,90,115"  method="rect" direction="in" prescale="true" steps="30" blendinat="-1" blendoutat="925"   startzoomat="900"  stopzoomat="951"/>  
            <zoomitem filename=":::common:images:collage_02.jpg" targetrect="85,110,90,115"  method="bestfit" direction="in" prescale="true" steps="30" blendinat="951"   blendoutat="1100"   startzoomat="925" stopzoomat="1150"/>  
            <zoomitem filename=":::common:images:collage_03.jpg" targetrect="85,110,90,115" method="bestfit" direction="out" prescale="true" steps="30" blendinat="1200" blendoutat="1400" startzoomat="1150" stopzoomat="1500"/>  
        </zoomstack>
    </synch>                                                                                     
  </graphic>
      
  <graphic  filename=":::collage_10.jpg" origin="200,-100" width="100" height="75" blend="100">
    <synch>
        <zorder>   
            <zorder event="3130" top="1"/> 
        </zorder>
    </synch>
    <hotspots click="0">
        <hotspot item="left" rect="10,10,90,65"  >
            <popimage filename=":::sm_collage_10.jpg" origin="350,130" />
            <popText origin="220,40" width="275" regH="left" regV="top" italic="true" pt="18" text="end"/>
            <popText align="center" origin="250,95" width="250" regH="left" regV="top"  pt="26" bold="true"  text="End"/>    
        </hotspot>  
    </hotspots>
  </graphic>
<graphics>

Listing 9. Partial file for an immersive, artistic SCO

With regards to quizzes and interaction within the LMS, all scoring, determination of correctness, objective mapping, and LMS interaction is handled automatically. An initial library of approximately 150 JavaScript functions dedicated to LMS interaction supports all required messaging between the S2PE and the LMS. For clarity, the libraries are split into SCORM sections dealing with the API, Comments From Learner, Comments From LMS, Date and Time, Interactions, Objectives, SCO's, and Sequencing and Navigation. Whether you implement SCORM content with Director or some other method, JavaScript is a requirement for communication with the LMS.

Future Vision

The current working version supports limited messaging between media elements. Increasing that support will allow media elements to interact with greater detail and robustness.

The inclusion of support for speech and accessibility standards will round out the needs of most content. Director offers the most flexible 508 authoring solutions available. It is a little known fact that the Windows version of Director supports the Microsoft SAPI XML TTS. As such, Director is a natural for notably exceptional speech within SCORM content.

Throughout it all, the vision remains clear, bringing LMS and SCORM into the public arena by facilitating the creation of robust content that can present one's vision.

Additional Resources

© 2006 Concurrent Technologies Corporation

Page 3 of 3
Previous Page