Learning Systems Design Consultant
2010
In late 2009, the Tempe Historical Museum (THM) underwent a major overhaul of their floor plan and exhibit spaces, modernizing the experience across four threads or themes of Tempe and Arizona history, including general history, Tempe as a college town, the diverse peoples of Tempe, and the history and future of the environmental relationship Tempe has with the surrounding desert.
I was contracted to design and develop print and interactive pre-visit and post-visit learning materials and experiences, as a way to extend the newly overhauled museum experience for local fifth grade students and their families.
As part of this project, I created a Materials Development Checklist that outlined all materials to be included in the project “package” delivered to THM, and how teachers could use different versions of the materials before and after bringing their students to the new exhibits.
Pre-Visit Materials
These materials included a series of activity workbooks: Building Community, College Town, Living Together, Surviving The Desert, Tempe Four Ways. There was also an Executive Summary, a Participation Guide, a Question Sheet, and a Vocabulary List.
All of these were color coded to match the THM exhibit themes, and built for consistency using Adobe InDesign, exported as lightweight web-ready PDF documents.
Post-Visit Materials
Two additional activity sheets were made for use after students left the THM exhibit: Participatory History and Sense of Place. As above, these web-ready PDFs were made with InDesign matching the color coded themes.
I also designed and developed an interactive timeline activity, built in Adobe Flash. The timeline was coded with ActionScript 2 (a little over 1100 lines of code), populated with external images and thumbnails and xml files for text contents from an external folder structure, allowing for updating and extending the contents of the timeline without any new code required. The entire GUI of the timeline was generated with code.
As we all know, Flash Player is now a thing of the past. As I work to convert many old Flash experiences into HTML5, for now take a look at a mockup of how the timeline GUI was constructed with code.
Here is some of the ActionScript 2 code from the original development:
//import flash.filters.DropShadowFilter;
//
///*
//Global variables
//*/
//
////sets initial state of Date Column status (0 = even, so odd is false)
//var gDateColOdd:Boolean = new Boolean(false);
//
////initialize global marker counter (for prevention of marker erasure)
//var gMarkerCount:Number = new Number(1);
//
////tracking variable for currently chosen theme (thumbs visible in picbox)
//var gCurrentThemeArray:String = new String("empty");
//var gCurrentThemeID:String = new String();
//
//var startYear:Number = new Number(1840);
//var spanYear:Number = new Number(10); //decades = 10, centuries = 100;
//var themeCount:Number = new Number(4);
//
////personal variables (set during login);
//var gUserName:String = new String();
//var gBirthYear:Number = new Number();
//var gGuestUser:Boolean = new Boolean(false);
//var personalX:Number = new Number(90);
//var personalW:Number = new Number(40);
//var personalH:Number = new Number(10);
//
////text variables for splash Intro screen
//var gIntroText:String = new String();
//var gIntroPersonalized:String = new String();
//
////set initial values for placing date headers
//var dateheadX:Number = new Number(90);
//var dateheadW:Number = new Number(40);
//var dateheadH:Number = new Number(30);
//var dateheadMax:Number = new Number(18);
//var dateYear:Number = startYear;
//
////set initial values for placing theme strips
//var stripY:Number = new Number (70);
//var stripMax:Number = new Number (4);
//
////set inital values for markerCallout
//var calloutTxtY:Number = new Number(0);
//var calloutW:Number = new Number(0);
//var calloutDate:Number = new Number(0);
//var calloutDesc:String = new String();
//
////set initial value of show/hide logic for National Events timeline
//var natlShow:Boolean = new Boolean (false);
//
////processing arrays
//var arrThemeURLs:Array = new Array();
//var arrThemeLT:Array = new Array();
//var arrThemeBC:Array = new Array();
//var arrThemeSD:Array = new Array();
//var arrThemeCT:Array = new Array();
//var arrNatlDates:Array = new Array();
//
///*
//process US-AZ data
//*/
//var usazXML:XML = new XML();
//usazXML.ignoreWhite = true;
//usazXML.onLoad = processUSAZ;
//usazXML.load("xml/usaz-dates.xml");
//
///*
//process theme data
//*/
//var themesXML:XML = new XML();
//themesXML.ignoreWhite = true;
//themesXML.onLoad = processThemes;
//themesXML.load("xml/themes.xml");
//
///*
//process game prep data
//--> this gets the whole ball rolling. once this XML has been parsed, BuildUI is called, which draws the stage, etc.
//*/
//var prepXML:XML = new XML();
//prepXML.ignoreWhite = true;
//prepXML.onLoad = processPrep;
//prepXML.load("xml/gameprep.xml");
//
////global drop shadow creation
//var distance:Number = 2;
//var angleInDegrees:Number = 45;
//var color:Number = 0x333333;
//var alpha:Number = 0.5;
//var blurX:Number = 3;
//var blurY:Number = 3;
//var strength:Number = 1;
//var quality:Number = 3;
//var inner:Boolean = false;
//var knockout:Boolean = false;
//var hideObject:Boolean = false;
//var dropShadow:DropShadowFilter = new DropShadowFilter(distance, angleInDegrees, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
//var filterArray:Array = new Array();
//filterArray.push(dropShadow);
//
And here is an example of one of the XML files used to manage the contents delivery:
<?xml version="1.0" encoding="UTF-8"?> <prep> <introtext> <paragraph><![CDATA[<b> Welcome to the Virtual Timeline presented by the Tempe Historical Museum!</b><br><br>This activity provides you a chance to re-visit the four themes from the Tempe Historical Museum:<br><ul><li>Building Community</li><li>Surviving in the Desert</li><li>Living Together</li><li>College Town</li></ul><br>Please follow the directions below to get started!]]></paragraph> </introtext> <personalize> <instructions><![CDATA[If you would like to have your own personal timeline included in this activity, please enter your name and birth year into the form below to the left. Once you have entered your name and birth year, click the "Create Login" button to continue. If you don't want your own personal timeline, just login as a guest!]]></instructions> </personalize> <endgame> <paragraph><![CDATA[<b>Good Job!!</b> You have finished dragging all the historical events into the timeline themes.]]></paragraph> <paragraph><![CDATA[Even though you have completed this part of the activity, there is still plenty more exploring to do...]]></paragraph> <paragraph><![CDATA[<b>Personal Timeline</b>]]></paragraph> <paragraph><![CDATA[If you haven't checked out your personal timeline at the top of the screen, now would be a good time to do so. If you originally logged in as a guest, you can click the "Create Login" button at the top of the screen to login and add your own personal timeline.]]></paragraph> <paragraph><![CDATA[<b>US and Arizona Events</b>]]></paragraph> <paragraph><![CDATA[If you haven't viewed all the historical events in the US and AZ timeline, you can always click the American Flag icon at the top of the screen to show the extra timeline with those dates.]]></paragraph> <paragraph><![CDATA[<b>Comparisons and Connections</b>]]></paragraph> <paragraph><![CDATA[How would the personal timeline be different if you changed your birth year to an earlier year? You can click "Change User" at the top of the screen to reset the personal timeline to start at an earlier or later date. (If you never logged in, you can click "Create Login" instead, and then enter a name and birth year.]]></paragraph> <paragraph><![CDATA[What if you play along with an older brother or sister and they put in their own birth year?]]></paragraph> <paragraph><![CDATA[What if your mom or dad played the game with you, using her or his birth year? How would that be different?]]></paragraph> <paragraph><![CDATA[Maybe your grandma or grandpa would like to play along, and you can help them add all the important events that have happened since they were born (including the birth of you, their favorite grandchild!).]]></paragraph> </endgame> </prep>
Hopefully these code elements give you an idea of the project scope and functionality.