Macromedia MX: Creating Learning Objects

by Ann Gallenson, Jay Heins and Tanya Heins December 2002

Copyright 2002 Macromedia, Inc. All rights reserved. The information contained in this document represents the current view of Macromedia on the issue discussed as of the date of publication. Because Macromedia must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Macromedia, and Macromedia cannot guarantee the accuracy of any information presented after the date of publication. This white paper is for information purposes only. MACROMEDIA MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. Macromedia may have patents, patent applications, trademark, copyright or other intellectual property rights covering the subject matter of this document. Except as expressly provided in any written license agreement from Macromedia, the furnishing of this document does not give you any license to these patents, trademarks, copyrights or other intellectual property. Flash Player, Flash MX, Flash Communications Server MX, Flash Remoting, ColdFusion MX, Dreamweaver MX are either trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Macromedia, Inc. 600 Townsend Street San Francisco, CA 94103 4152522000

Macromedia MX: Creating Learning Objects

Contents

Creating Dynamic Learning Objects................................................................................ 2 A Brief History of the LO Demo ....................................................................................2 Anatomy of a Learning Object......................................................................................2 Audience .....................................................................................................................3 Enhancing User Experience.........................................................................................3 Architecture ...................................................................................................................... 5 Tools ........................................................................................................................5 Database .....................................................................................................................6 Data Glue: Client/Server/Database Communication.................................................9 The Learning Object Interface ......................................................................................... 11 The Learning Area .....................................................................................................11 Adaptive Navigation ...................................................................................................13 Data Transfer ............................................................................................................14 The Learning Object Workbench .................................................................................... 16 Variations on a Theme: Deleting and Creating Objects...............................................20 Uploading Media ..................................................................................................23 Inside the Workbench: Screen Level - Edit .................................................................25 Editing Tasks Preview and Delete Screens .........................................................25 Form View Add and Change Screens .................................................................26 Server/Database Communications ......................................................................27 Conclusion ...................................................................................................................... 29 Next Steps .................................................................................................................29 Macromedia Learning Objects Development Center..............................................30

December 2002

Page iii

Macromedia MX: Creating Learning Objects Creating Dynamic Learning Objects

This white paper outlines the anatomy of a learning object, offers design and development strategies, and suggests technical best practices for building and deploying dynamic learning objects using the Macromedia MX product suite. This document describes the LO Demo application that is used to create dynamic Learning Objects. It is suggested that readers download and install the accompanying demo files prior to reading this paper. The demo files are available for download from the Macromedia Learning Object Development Center at http://www.macromedia.com/resources/elearning/objects/. The Learning Object Demo application provides an example of reusable content maintained in an open-source architecture and is branded using the fictional Darby University theme. In its second version, the LO Demo is constructed using a Rich Internet Application (RIA) approach. Where previous versions of the LO Demo used a RIA for the presentation layer of the actual Learning Object and a HTML/CFMX presentation for the development environment, the revised LO Demo uses a RIA for both the presentation and the LO assembly interfaces, thereby enhancing the user experience. The Learning Object Demo provides a means to build and display dynamic Learning Objects. It doesnt contextualize them in a course or learning context. Each organization has its own, unique and specific methodology and technical parameters for contextualizing LOs. Because of this, related issues like metatagging choices, integration into a LMS, administrative permissions and controls and asset management are not discussed in this document or addressed within the Learning Object Demo application. Please Note: The approach, working files and database structure for version 2 have been advanced from the first version of the Learning Object Demo. Before installing version 2 of the LO Demo please be sure to save earlier versions of the files should you want to continue developing Learning Objects using version 1 of the LO Demo (that is, using the HTML/CFMX Workbench format).

December 2002

Macromedia MX: Creating Learning Objects Creating Dynamic Learning Objects

Creating Dynamic Learning Objects

A Brief History of the LO Demo
The Learning Object Demo project was initiated by Macromedias Solutions Marketing team to illustrate the integration of MX suite of products, specifically: Flash MX, ColdFusion MX, Flash Communication Server and Dreamweaver MX as the IDE. Originally intended for demonstration purposes only, the LO Demo is used by the Macromedia Sales Teams as a presentation tool. Clients were interested, not only with the companys products, but with the Learning Object application itself. It was recognized that a dynamic Learning Object application fulfilled a greater need in the eLearning and higher education communities. This demo has therefore been made publicly available as an example of dynamic LO implementation with the MX product line. It is the hope of the Learning Object demo team, that eLearning developers will adapt the LO application to their own particular needs. Only by a process of deconstructing, analyzing and re-assembling the application in short, by breaking it and rebuilding it will developers create a model that works within their organizations specific instructional design framework and related taxonomies. In this way, we aim to advance the technology, encourage adoption and improve implementation of reusable content.

Anatomy of a Learning Object

For a moment, let us review the pedagogical structure of a Learning Object as described in the Macromedia MX: Strategies and Architectures for E-Learning Content whitepaper: it is a unit of instructionally sound content centered on a learning objective or outcome intended to teach a focused concept. A LO may contain opportunities for practice, simulation, collaborative interaction, assessment, and educational resources.

Figure 1: Structure of a Learning Object

Page 2

December 2002

Macromedia MX: Creating Learning Objects Creating Dynamic Learning Objects

A LO is constructed from Media Assets, such as paragraphs of text or html, screen titles, captions, video, animation, diagrams, and sound narration. It is using this model that the Learning Object Demo application has been built.

Audience
When examining the Learning Object Demo application, it is important to consider the audience, which can be separated into two groups. The first group is the technical team involved in the implementation of the application. The second includes the users of the application itself, the content developers, instructional designers and subject matter experts. The technical, or IT team will be responsible for installation, management, customization and administration of the application on the organizations server. The skills required for this individual or group includes skills of a: general web developer, server administrator, database administrator, Flash developer and ColdFusion developer. The second team is comprised of those that will be using the application. These include SMEs, instructional designers, graphic designers and usability and QA testers who will design, build and test the use of the Learning Objects.

Enhancing User Experience

Version 1 of the LO Demo project began by constructing a ColdFusion back end (development environment) and a Flash MX front end (delivery environment). The communication model between the two was primarily a one-way street with ColdFusion packaging up the data in XML and sending it to the Learning Object to parse. The only two-way communication would come through a chat screen layout using the Flash Communication Server. On review of the first version of the demo it became clear that the Workbench could provide an enhanced user experience that is more responsive and intuitive if a Rich Internet Application interface was used to communicate with the server via Flash Remoting. This coupling harnessed data manipulation web service power of ColdFusion and the interactive presentation ability of Flash to produce a web-able application without the standard browser-based HTML limitations.

December 2002

Macromedia MX: Creating Learning Objects Creating Dynamic Learning Objects

ColdFusion / HTML Interface

Flash MX Interface
Figure 2: Before and after views of the LO Workbench environment

Page 4

December 2002

Macromedia MX: Creating Learning Objects Architecture

Architecture
The architecture behind the second version of the LO Demo application is comprised of the Database, Flash Communication Server MX, the ColdFusion MX server application and the use of the Flash Player 6 in the users web browser. The Flash user interface communicates with ColdFusion component web services through Flash Remoting MX and the browser to server communication for the Flash Communication Server MX components are handled through shared objects.

Figure 3: Architecture of the Learning Object Demo Application

Tools
Table 2 summarizes the Macromedia tools used to develop the Learning Object architecture. For further details and documentation please visit the appropriate product area of the Macromedia website.

December 2002

Macromedia MX: Creating Learning Objects Architecture

Logo

Product

Description

Flash MX

A developers tool to create rich Internet content and applications. Allow end users to view rich content and applications as stand-alone applications or through a web browser. Connects Macromedia Flash applications to server side application logic and web services. A server solution for uniting communications and applications Server Environment to rapidly build and deploy Internet applications. A development tool for building websites and web applications.

Flash Player

Flash Remoting MX

Flash Communication Server MX ColdFusion MX

Dreamweaver MX

Table 1: Tools used to develop the Learning Object Demp app architecture.

Database
The design of the database (see Figure 4) was created directly from the Learning Object instructional design model discussed in the whitepaper: Macromedia MX: Strategies and Architectures for E-Learning Content. The database (filename: learningobjects2.mdb) tables reflect a particular learning object model and the fields have a specific relationship to each other. For resources on designing databases and using SQL please visit the Macromedia website at: http://www.macromedia.com/support/training/ instructor_led_curriculum /ft_to_sql.html.

Figure 4: Relationship of database tables in the LO Demo Application

Page 6

December 2002

Macromedia MX: Creating Learning Objects Architecture

The descriptions below provide a reference for each of the fields in the database tables and their relationships as certain fields key off information in other tables.
Field Name Description

LO_ID LO_TITLE LO_OBJECTIVE LO_PREREQUISITE LO_THEMEIMAGE

Primary Key. Unique identifier for each Learning Object Title of the Learning Object The objective for the Learning Object The prerequisite knowledge needed to successfully complete the Learning Object Linked to the MEDIA table, MEDIA_ID field. The graphic that appears as a faded background of the Objective Screen

Table 2: LEARNING_OBJECTS Table

Field Name

Description

SCREEN_ID LO_ID SCREEN_TYPE

Primary Key. Unique identifier for each Screen Direct relationship to the LEARNING_OBJECTS table, LO_ID field Linked to the LAYOUTS table, LAYOUT_ID field. Each screen may be classified as either a Learn, Practice or Assess screen type Linked to the LAYOUTS table, LAYOUT_ID field. Each screen uses a layout from a library of pre-determined layout templates. The order in which the screen should appear The Title of the Screen Text content. This field is used as required by the screen layout template. Linked to the MEDIA table, MEDIA_ID field. JPG Image or Flash SWF file. This field is used as required by the screen layout template. Text Caption. This field is used as required by the screen layout template. Text content. This field is used as required by the screen layout template. Linked to the MEDIA table, MEDIA_ID field. JPG Image or Flash SWF file. This field is used as required by the screen layout template. Text Caption. This field is used as required by the screen layout template. Audio File. This field is not currently implemented. Estimated time to complete the Screen of content. These durations are added together to provide an estimate duration for the entire Learning Object

LAYOUT_ID

SCREEN_ORDER SCREEN_TITLE SCREEN_TEXT_ASSET1 SCREEN_MEDIA_ASSET1

SCREEN_MEDIA_ASSET_ CAPTION1 SCREEN_TEXT_ASSET2 SCREEN_MEDIA_ASSET2

SCREEN_MEDIA_ASSET_ CAPTION2 SCREEN_NARRATION SCREEN_DURATION

Table 3: SCREENS Table

December 2002

Macromedia MX: Creating Learning Objects Architecture

Field Name

Description

SCREEN_TYPE_ID SCREEN_TYPE SCREEN_TYPE_ORDER

Primary Key. Unique identifier for each Screen Type Each screen may be classified as either a Learn, Practice or Assess screen type The order in which the Learn, Practice or Assess buttons are presented in the Learning Object

Table 4: SCREEN_TYPE Table

Field Name

Description

LAYOUT_ID LAYOUT_DESCRIPTION LAYOUT_ICON

Table 5: LAYOUTS Table

Primary Key. Unique identifier for each screen layout template Text describing the screen layout template. Filename of the icon representing the screen layout template

Field Name

Description

MEDIA_ID MEDIA_FILE MEDIA_TYPE

Table 6: MEDIA Table

Primary Key. Unique identifier for each media asset The name of the file on the server Type of file. 1=jpeg, 2= Flash swf

Developers implementing the LO Demo may use their choice of ODBC compliant databases by importing the learningobjects.mdb file into the appropriate database. Once the database is in place a Data Source Name needs to be setup. This is accomplished by registering the database in the ODBC Data Source Administrator on the server (see Figure 5). The ODBC DSN also needs to be registered with the ColdFusion Server. (see Figure 6)

Page 8

December 2002

Macromedia MX: Creating Learning Objects Architecture

Figure 5: Control Panel ODBC settings.

Figure 6: ColdFusion DSN settings.

Data Glue: Client/Server/Database Communication

Whether it is by parameters, arguments, XML, Flash Communication components or Coldfusion components; lines of communication must be open between the Client, Server, and Database. ColdFusion components (CFCs & Flash Remoting) were selected as communication methods in the LO Demo application because they are an easily a customizable solution that delivers clean, fast data.

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Interface

ColdFusion is an efficient tool for working with databases. With a new partner, Flash, ColdFusion comes into its own and they make a spectacular combination. In ColdFusion you can write your own communication components. Dont panic, it is truly straightforward and not too complicated. Developers will need a good SQL guide. As mentioned earlier there is a good intructor-led course available on the Macromedia website at: http://www.macromedia.com/support/training/ instructor_led_curriculum /ft_to_sql.html. In this demo, this Learning Object presentation UI uses one CFC with two functions (loData.cfc) and the Workbench uses one CFC with eleven functions (loWorkbenchData.cfc). All the LO Demo application methods in one place! Flash Remoting MX provides the connection between Flash MX and the web application server. It has a powerful yet simple programming model, you can easily integrate Flash user interfaces with applications built using Macromedia ColdFusion MX, and also Microsoft .NET, Java, and SOAP-based web services. A download of pre-built Flash Remoting MX components along with the Macromedia Rich Application Starter Kit can be found for free download at; http://www.macromedia.com/software/flashremoting/downloads/.

Page 10

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Interface

The Learning Object Interface

The Learning Object Interface is the view that the learner or content expert testing the Learning Object would use. It consists of three basic parts:
1

The communication / instructional delivery area and the forward and back arrows. This is the Learning Object content. Adaptive navigation areas that include titles and navigation based on screen type and duration. The invisible communications between the Flash interface and the server/database (and potentially a Learning Management system).

Figure 7: The users view of the Learning Object. Learning space headed with adaptive

navigation.

The Learning Area

Let us compare two views of the learning area from users perspective (Figure 8) as well as from the developers position (Figure 9):

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Interface

Figure 8: The users view of the learning area.

Figure 9: The developers view of the learning area.

The learning space is essentially a multimedia slide show focused around a learning objective. The categories listed in Figure 9 (layout, screen parameters, media assets, caption, etc.) are common to all screens. Some of the values are default settings and the specified layout may not use them (for example: image information is not required in a text only layout).

Page 12

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Interface

A technical definition of a learning object screen is that each screen is identified by its screen identification number (ID) and the learning object number (lo_id) to which it belongs. The content is divided into screen duration, screen media asset caption1, screen media asset file name, test and title. The form this content takes is determined by the layout_id and its context is screen_type (for example: screentype 2 is a learning screen, as opposed to objective, practice or assess) and its order in the series of slides. That is the essence of a screen object. The code for the learning screen delivery is simple and linear users are able to navigate both forward and backward using linear directional arrows.

Adaptive Navigation
Now we put the screen in the context of the learning process and we give the user/learner the ability to peruse the entire object in different ways.

Figure 10: Navigation that identifies screens based on their type: Objective; Learn; Practice and Assess.

Figure 11: Estimated duration of the Learning Object

The Learning Object title orients the learner to the LO content. Rolling over the screen buttons reveals the title of each screen. Random navigation is possible by clicking on any of the screen number buttons. The user can also isolate screens by clicking the screentype buttons (these include: objective, learn, practice or assess). If Assess is clicked, the assess screens are highlighted (4 and 10 in this example) and the screen buttons may then be clicked on for display. This navigational feature accommodates differences in learning styles and allows for quick review of relevant material and prior learning assessment. A learner may, for example, jump to an assessment, which results in a screen that indicates the specific screen numbers that still require review. The developers view of this is that each screens type is stored in an array when the data is loaded. The other screentypes include 1=Learn, 2=Practice, 3=Assess (Figure 10). Developers extending this demo application may choose to add their own screentypes.

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Interface

Figure 12: Developers view of screentype ID and screen order.

The screentype ID and screen order determines the individual coloring of the screen icons, as well as which buttons are active or inactive when a particular screentype button is pressed. When a screentype button is clicked an active area variable is declared (the value is an integer between 1 and 4) and the array (objectList) is scanned to determine which numbered buttons are active.

Figure 13: Flash ActionScript function to determine whether a screentype button is for Learn, Practice or Assess.

Data Transfer
There are two sets of data that are passed to the learning object. The first occurs in the lo.cfm document that houses the lo.swf (the learning object) file.

Page 14

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Interface

Figure 14: CFM page showing the passing of the LO_ID to the Flash file.

The LO_ID variable (the learning object identification number from the database) is passed in the URL when the window is first opened. A CF recordset retrieves specific parameters from the database, based on the LO_ID. These are then passed to the movie in the Flash Object/Embed tags. Once the preliminary data is passed the movie then establishes a link with the database through a web service (this is Flash Remoting) and calls two queries that download the data. Note: the netservices gateway URL for Flash Remoting is set to localhost in the LO Demo asset files.

Figure 15: Flash Action Script establishing a Flash Remoting Service call

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

When a Flash Remoting service is established and a data call is made, only the minimum amount of required data is delivered in the form of an object. This object can now be stored as a variable or used directly as a data source for a component.

The Learning Object Workbench

Login

Workbench App

Object Level

View Object List (default view)

Create Object

Edit Object

Delete Object

Manage Assets

LO Popup
Screen Level

Preview Screens (default view)

Add Screen

Change Screens

Reorder Screens

Delete Screen

Logout

Figure 16: Workflow for users in the Learning Object Workbench

When first viewing the Learning Object Workbench, users are presented with a list of available Learning Objects. The Status light at the bottom of the screen indicates that a user is on line and connected. A red status light indicates a lack of positive connection. Users might try to refresh the screen in order to gain a connection. The task combo box at the left allows navigation through all of the Object tasks. Clicking through the list of learning objects allows a user to view each Learning Objects unique Objectives and the Prerequisites. As well, the Learning Object may be launched in a separate pop-up window for review. A banner on the Workbench indicates the active task and which Learning Object is in progress. The area by the Status light will provide messages regarding Workbench functions and secondary task status. Task instructions and components appear on the left, the main workspace is on the right.

Page 16

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Figure 17: The interface user are presented with after logging into the Workbench

There is a preliminary Service call that checks the connection and controls the status indicator. Lets look at the communication loop, starting with the Flash call:

Figure 18: Flash MX Actionscript funtion testing that a user is connected

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

During the establishment of the connection the service is named, in this case it is named loWorkbenchService, which will persist throughout the use of that service. The call loWorkbenchService.onlineTest() can be abstracted for meaning as - <serviceName.method>. The service will respond with a <method>_Result(); in this case, onlineTest_Result(). For further information, please refer to the Flash Remoting documentation at; http://www.macromedia.com/software/flashremoting/. By examining the ColdFusion code for the method we find that this function (the first in the series that makes up the cfcomponent) simply returns true if the connection is made. This is a way to test the connection while the connecting the indicator provides a real-time reading of the server status.

Figure 19: ColdFusion component summary.

The method appears in the component summary as:

Figure 20:

Component summary.

Looking around the interface, the main UI focus is on the task at hand and all of the shell functions are understated and on the periphery. Instructions for a specific component or area is adjacent to the component or work area. The main work area is divided into an instruction/subtask column and a primary working space. The Log out panel is in the banner and can send a message to end the server session. The task combo box is populated by an internal array. The basic rule here is that if the information (variable, array or object) is relatively stable (tasks wont change very often, if ever) then the information resides in the application code, otherwise it resides in the database.

Page 18

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

There are two Message areas. The first is the task message that is adjacent to the combo box and displays the active task and the object being worked on. The second is the status area. This is where a function method (creation, deletion) result is reported, screen editing and other secondary messages (connection, screen editing task activation) are displayed. Heres one more bit of initiating code before looking at tasks. Global variables and initial conditions are set in an initiating method. In this code there is one convention worth showing.

Figure 21: Flash MX Actionscript setting the wb_root for all movie clips as a global variable

The root is given a global variable, in this case wb_root (where wb is short for Workbench). When you want to refer to the root, use wb_root. This allows you to load this movie clip into another movie or incorporate it and not lose functionality no more root confusion. Lets now examine a specific task the View Object List. The list itself is a listbox that has been populated by a service call (loWorkbenchService.getLOScreens) for the entire contents of the Learning Object table of the database. The listbox label is the title of the object and the data is the object ID. This organization assumes a linear learning object structure. When a Learning Object title is clicked on, the adjacent text boxes display the Objective and Prerequisite text. The full Learning Object may be viewed by selecting a title from the list and clicking the View button on the bottom of the screen. The onClick code on the button gets the learning objects ID and sends a javascript command through Get URL. The javascript then passes the learning object id as a variable to the child window that is launched. The Learning Objects ID could be obtained getting the data from the selected listbox item:
lb_objects.getSelectedItem().data

Where lb_objects is the instance name of the listbox component that contains the list of objects.

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Figure 22:

Flash MX Actionscript using the global variable loID

The method used to declare a global variable loID when an item in the object listbox is selected declares its unique ID as the global loID. The loID is a unique identifier for structuring the Learning Object. This LO_ID field in the database and is used almost all of the SQL statements to create a Learning Object. The same method is applied to the ScreenID (declare a global variable).

Variations on a Theme: Deleting and Creating Objects

The Delete Pane is almost identical to the View Pane. A list of objects is presented, where a user clicks on a LO title to see the Objective and the Prerequisite for that LO. The full Learning Object can be launched from the View button. Clicking Delete causes a prompting - a warning dialog box that allows you to cancel the action or continue a Learning Object deletion. The Cancel button closes the window without changing the list. By clicking on the dialog box Delete button and the Learning Object that is selected in the list box is deleted, thence the window closes and the object list is refreshed.

Page 20

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Figure 23:

Confirmation of the Delete LO task.

The Create Learning Object is very simple and presents a screen that compliments the View Object screen. From this screen the Title, Objective and Prerequisite for the new Learning Object are filled in to the text fields. Clear, removes all of the text from the form and Create validates the form and enters the new Learning Object into the database. When the database transaction is complete the View screen appears with your new learning Object in place. The Delete Screens ActionScript function is identical to that of the View screen except that when the Delete button clicked a Message Box component is placed on the screen. The user is given two opportunities to cancel before the delete service call is made. Clicking the Delete button in the message box makes a service call to the server, which activates a SQL delete item statement (the loID is passed to the server). Here is the ColdFusion components function:

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Figure 24:

ColdFusion Component Function to delete a Learning Object

When the deletion is complete the server returns a string and the Flash Movie updates the list (by calling getLearningObject method used to populate the list in the first place). The Workbench reuses a few simple functions and variables to keep the database information up to date and to make the application responsive to the users actions. In addition to refreshing the list, the status area shows that the object (by title) was deleted. The responsiveness (refreshing lists without refreshing the whole screen, displaying status messages, sliding up windows when needed and removing them when the task is complete) of the interface puts the user in an application environment. This allows the user to focus on their primary task without being deterred by clunky browser page redraws typical of an HTML-style environment. The Create pane is a simple compliment to the Learning Object views we have seen thus far. It is three input text boxes, a Clear (to remove text) and a Create button. Notice that the action buttons (View, Delete, and Create) are disabled upon first entering the pane. An action (clicking a title or entering text) enables them. When the user clicks the Create button the form is validated and a function call is made to the server. As it is not possible to pass a blank variable, default values must be inserted into the empty fields. When the new object is created the server returns a string which prompts the Workbench to return the user to the View Object List pane and refresh the list.

Page 22

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Uploading Media

Figure 25:

Media Asset Library List

Media Assets can be added from the Object or Screen Level of the Learning Object Workbench. This pane in the Workbench lets the user peruse the media library for assets and then up if user doesnt find what they want they click a button and are given a popup form to upload files. Clicking on the Upload Media button opens a popup window containing a file named Upload_Media.cfm. This cfm page uses ColdFusion MX server functionality to transfer a suitable media file to the server through the browser. The figure below shows the UI of the Media upload window that allows the user to browse for the image or Flash file they wish to upload from a location on their computer.

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Figure 26:

Uploading Media Assets

A second page, Upload_File_Action.cfm then processes the file and saves it to a specific location on the server. The LO demo saves the files to C:\Inetpub\wwwroot\LO_Demo\media_assets. From within the ColdFusion <cffile> tag we can control the type of file that is uploaded and the location in which it is placed on the server. The cffile upload also checks that it is the correct file type and control the read/write access to the file once it is saved. The screen snap below illustrates the cfml code used to place a media file on the server.

Page 24

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Figure 27:

ColdFusion cffile tag for uploading media assets

For further information on using the cfml upload tag, see the ColdFusion MX documentation on Uploading files with the cffile tag and the section on Securing Applications.

Inside the Workbench: Screen Level - Edit

Figure 28:

Editing a Learning Object in the Workbench

The Edit Pane locates users at the Screen Level. The drop-down box on the left of the user interface allows the user to select a specific Learning Object for editing. Once the object is selected the balance of functionality is revealed. There are basically two views in Edit: Preview and Forms. Preview allows users to see how the LO content will be presented while Forms view allows users to add, modify or delete LO content.

Editing Tasks Preview and Delete Screens

The first task in the dropdown list is the View Learning Object. Here users may preview Learning Objects by selecting from the list and clicking the View button.

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

When the Delete editing task is selected, the user is prompted to select a screen to edit. Once selected, the Delete button is made available and when clicked, a warning dialog box prompts the user to confirm the action. If the user continues by clicking the Delete button the screen is deleted, the popup closes, the list is reordered and refreshed. If the user tries to Delete the first screen the Objective the popup warns the user that by deleting that screen the entire object will be deleted from the database. If the user clicks Delete the object is deleted and interface changes to the View Object list.

Form View Add and Change Screens

Screen layouts are derived from templates. When you select Add from the editing task drop down window and a window slides open to reveal the screen templates.

Figure 29:

Screen layout templates.

The user selects an appropriate template and determines where to place it into the screen list. By default, the new screen will be added to the bottom of the list. Please notice that some of the main controls have been intentionally disabled in this view; Cancel closes the forms pane and returns you to preview. When Add is clicked the screen is added and the Change form is revealed.

Page 26

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Figure 30:

Editing the content in the screen layout

As a user clicks through the screen list the layout templates change depending on the layout of the page. Edit allows change to all of the properties of a screen and view each screen in Change mode. Click Submit Changes and when the submission is complete the Status bar indicates success and the screen information is for the entire object is refreshed. Click Close to leave the forms mode. It is possible to return to Add by selecting it from the task dropdown. Selecting a task other than Add will cause the form window to close and you will return to preview mode. Users can preview Learning Object from most screens in edit mode to get a better feel for the end user experience.

Server/Database Communications
Edit is the entry to the Screen level. Lets summarize the types of server/database communication being used in the application. There are two types of methods being utilized: the get and the set functions.

December 2002

Macromedia MX: Creating Learning Objects The Learning Object Workbench

Get functions query the database for particular data. This is defined by the functions in the ColdFusion Component. On receipt of the recordset (what the Server returns to the Client from the Database) the Flash MX Workbench UI extracts bits to populate components in the user interface. The Workbench may also use the recordset directly as a Data Provider for a component. Get methods are used to populate the dynamic lists used in the Workbench, i.e. Learning Object List and Screen List. These methods are called whenever the user performs a task or action that changes the list. Tasks are composed of actions. Set functions make changes to the database by inserting, changing or deleting data. The Workbench passes an argument to the server, which performs the method via an SQL statement and passes the response to the Workbench. This is often a string or a Boolean value. The receipt of this response elicits a secondary call to get the new data and refresh the lists. These methods are called when the user performs a task that changes the data content or order, e.g. Reorder, Change. The challenge is to determine which mode (environment) is best to perform these tasks. These fall into two basic categories: preview and form. Preview mode is where it is of use to see a screen in context with the full object. The Preview task is the most obvious example of this case, the other two are Reorder and Delete. Form mode is dictated by a need to isolate the task. Isolation is determined by complexity. The Workbench screen tasks, Add and Change are perfect examples of two types of complexity. Add is a simple action with lots of possible choices and Change is a simple choice with lots of actions. Enough theory lets review the screen level. When users enter Edit visible is a rather simple interface. The Learning Object is embedded into the viewing area and muted, and the instruction area has morphed into a control panel with one instruction Select a Learning Object to Edit and a combo box populated with a list of Learning objects (populated by a getter method) and the re-occuring View (Learning Object) button. When the Learning Object is selected from the combo box more of the controls are revealed. An Objective screen for your selection is available in the view area and are presented with a Task List (combo box populated with an internal array) a Screen list and Hints for each task. Preview is just that, move through the list box to see different screens. When you click on the items in the list box two global variables are redefined Screen_ID and Screen_Layout. Selecting Delete prompts the user to then click a screen title to delete. When clicked the expected Message Box appears. If the first screen is select the user will delete the entire object and be taken out of Edit and directed back into View on the Object level. The message boxes are different depending on which is selected; a stern warning on screen one a more gentle alert on other screens. The severity of warning is shown in the icon. There is another consideration: if a screen is selected that is in the middle of the list then the list will need to be reordered.

Page 28

December 2002

Macromedia MX: Creating Learning Objects Conclusion

Selecting Reorder changes the control column. View Object becomes Submit Object Order and a Cancel button appears. Two arrow buttons under the screen list appear and users are instructed to select an item and reposition it using the arrows. The user can preview the Learning Object and when satisfied may submit to the database. An update function then loops through the list box and resets the order. When the list is complete and the last response is sent the user is back in Preview and all controls have been reset. Selecting either Add or Change obscures the embedded learning object with a sliding screen (its roll bar has been visible at the bottom of the view area in the Edit this entire time). The learning object behind the screen is made invisible Users can move between Add and Change via the task list. Adding a screen requires the user to select one of a series of layout templates. Once selected the user can determine where the screen will insert be inserted- the default is at the bottom of the list. The Add Screen button does one of two things. If insert is not specified it invokes a simple add method. Otherwise it invokes the add method and when that is accomplished it reorders everything after the new screen. No screen can be added before the first because that is the Objective screen. When the server responds the Add form is replaced by the Change form for further editing.

Conclusion
The authors of the Learning Object Demo application see this release as marking the next step in the ongoing evolution of Learning Objects concepts and practice. By making the working source-code and documentation freely available to developers in the eLearning and higher education industries, Macromedia hopes to encourage wider debate and best-practices around the reusable Learning Object content model.

Next Steps
While the Learning Object Demo application has evolved, there yet remains features and considerations the developers would like to add that would further enhance the LO Demo app. These include: conformance with common eLearning standards like SCORM, AICC and others; integration into Learning Management Systems (LMSs); accessible Learning Object content for those with disabilities. Macromedia would like to encourage developers and organizations that have implemented real-world examples of the Learning Object Demo application to contact the authors. We look forward to seeing quality examples of the Learning Object Demo in action.

December 2002

Macromedia MX: Creating Learning Objects Conclusion

Macromedia Learning Objects Development Center

Macromedia is committed to help businesses, educational institutions, and government agencies create personalized, relevant learning experiences. The Macromedia Learning Objects Development Center hosts a series of whitepapers, development assets, and implementation models that will help organizations leverage their technology investments to improve organizational and employee productivity and performance. Visit www.macromedia.com/go/objects to access the full set of resources available. Download version 2 of the Learning Object Demo application from the Macromedia web site at: http://download.macromedia.com/pub/solutions/downloads/elearning/org_lobject s_demo.zip. _____________________ Ann Gallenson is the founder of A Charles Design, Inc.; an interactive multimedia development and design consultancy. Ann is a user interface and product designer and developer whose career spans eighteen years and includes designs for educational courseware, commercial software, medical, video, and broadcast products. She is formally trained in science and mathematics and has a background in teaching, fine arts, and graphic design. You can contact Ann at ann@acharlesdesign.com Jay Heins is an eLearning consultant with a background in fine arts, video and electronic media, Jay provides direction in the appropriate use of emerging web technologies for Numen Communications. He manages all aspects of the studios development process, including client relations, site architecture, programming, production, and visual design. His creative leadership provides Numen's work with a clear sense of structure and visual aesthetics. Jay has a B.F.A. in Fine Arts from the University of Ottawa in Ontario, Canada. You can contact Jay at jay@numen.ca Tanya Heins is the Sr. Product Manager eLearning and Higher Education at Macromedia, where she works on the company's eLearning and Higher Education product strategy. Over the course of Tanya's career she has focused on content design and development, eLearning architectures and the development of eLearning environments that adapt to a student's preferred learning style. Tanya Heins has a background in teaching, fine arts, and applied research in eLearning. She holds an M.F.A from the University of Victoria in British Columbia, and has nine years of professional interactive design and development experience, ranging from designing CD-ROMs and database-driven eLearning to custom development of award winning learner and content management systems. You can contact Tanya at theins@macromedia.com

Page 30

December 2002