Building Engagement with Re-Usability

on Saturday, June 13, 2009

In a recent project I had the opportunity to convert a learning activity developed in 2001 to be re-usabile and in Flash. The original learning activity used a image map and javascript popups to present information. The learner was presented a literal map from Winnie the Pooh and had to find 9 places to click. The activity was completely custom and thus not reusable. The presentation was very much HTML 1.0.

The process of converting the activity to Flash could have involved simply using an actionscript library which would have read the HTML image map coordinates. Instead I designed with usability in mind and developed an XML data file with the content from the previous activity and some additional nodes of information to reference from actionscript. The programming was created so that the same project could be re-used with a different XML file loaded at runtime. A common technique in the projects I make is to specify an XML file to be loaded at runtime. The URL for the XML file is specified on the page in which the SWF is called instead of in the actual flash file.

 public function initApp():void
 {

 var thisXML:String = Application.application.parameters.thisXML;

  var loader:URLLoader = new URLLoader(new URLRequest(thisXML));
  loader.addEventListener(Event.COMPLETE, loadNewXML);

 }

 public function loadNewXML(event:Event):void
        {
     
         loadedXML = new XML(event.target.data);
      
        }

The first step in this project involved our graphic artist updating the map image to remove the iconography that users previously clicked on. The resulting image created the background for the interaction. While in this case the background was the same as the previous activity, it could have been any background image. In creating the Flash project, I set it up to dynamically place a background image specified in the XML file.

The next step was to get the iconography overlayed onto the background like the original activity. The previous javascript popups already had the icon images that appeared on the map. Thus, I was able to use them to dynamically place them on the map in Flash. The XML was formed to include x,y coordinates for placement and a path to the image file. A sample node:

 
480,60
 http://localhost/scribble.png

You may be afraid to ask questions because you know enough to realize that you can't "Do something" about the 
patient's problems.  The only person expecting you to have an answer for everything is you.  You can always refer the
patient to a competent mental health professional  if you need to, but you may also be surprised at how powerful
your listening.]]> 

After the actionscript code loaded the XML the following two functions were executed to create a button that combined the icon and text title for each node and placed it as the specified coordinates.

 public function setupStage(mapXML:XML):void{

 // loop thru XML and call function to add objects to stage
      for each (var node in mapXML..node)
  {

   var image = node.logo.toString();
   var imageLabel = node.@id.toString();
   var theseCoords =  node.coordinates;
   var title = node.title;
   var popupStyle = node.type;
   var coords = theseCoords.split(/,/);
 
   var x = coords[0];
   var y =  coords[1];

   // call function to create clickable object
      
   var thisFixture = setupFixture(image,imageLabel,x,y,title,popupStyle);
 
   // event listsener to call popup func
   thisFixture.addEventListener(MouseEvent.CLICK, viewItem);
 
   // add object to stage
   main_area.addChild(thisFixture);
   }

 }


 public function setupFixture(icon:String, label:String, x:int, y:int, title:String,popupStyle:String):HBox
 {

  //create Hbox to hold icon images and title of object
  var thisDodad:HBox = new HBox();
       thisDodad.x = x;
    thisDodad.y = y;
    thisDodad.data = label;
    thisDodad.buttonMode = true;
    thisDodad.useHandCursor = true;
    thisDodad.horizontalScrollPolicy = "off";
    thisDodad.verticalScrollPolicy = "off";
  
  var thisTitle:Text = new Text;
   thisTitle.text = title;
   thisTitle.data = label;
 
   thisTitle.buttonMode = true;
   thisTitle.useHandCursor = true;
   thisTitle.mouseChildren = false;
   thisTitle.selectable = false;
   thisTitle.setStyle("leading", "-3");
   thisTitle.styleName = popupStyle;

   //dimming text evaluation

   for each (var item:String in selectedArray) {

    if(item == thisTitle.data) {
     thisTitle.styleName = popupStyle + "Selected";
    }
  
   }

  var thisIcon:Image = new Image();
  thisIcon.source = icon;
  thisIcon.data = label;
  thisIcon.width = 25;
  thisIcon.height = 25;


  thisDodad.addChild(thisIcon);

  thisDodad.addChild(thisTitle);

  return(thisDodad);
 }

In the previous HTML 1.0 design for this activity a learner had to remember what items they had clicked on. There was no visual feedback to indicate their progression thru exploring the map. I created an array in which I captured each of the nodes a user clicked. Then you will notice on lines 59 I evaluated if the current node was on that list. Thru the use of CSS styles, I changed the color of the text label to be dimmed for those which had been selected.

In the future, this same Flash SWF can be re-used with different visual assets and learning content. The design is very engaging for the user in that they can explore a visual space and receive information in a fun way. While I can't show the actual project here, I will try to make a derivative and post it soon.