history of 1989

Soviet music

Tuesday, May 22nd, 2007 | Uncategorized | No Comments

I’m looking for some good soviet music to use as a light background music to the flash timeline. Here are two good sites that catalog and preserve the history of the former USSR in music.
http://www.sovmusic.ru/english/index.php

http://www.hymn.ru/index-en.html

Popularity: 7% [?]

Tags:

The MA is done, but the map is not….

Wednesday, May 16th, 2007 | Uncategorized | No Comments

I just turned in my last thing for the MA! I’m a Master! I do the commencement and walking and stuff tomorrow night.

Well, I showed the Yahoo Map and the Flash movie to the 1989 group. They really liked it, but as is always the case, there are some very good suggestions for improvement. And since I have a vested interest in the project (my academic research interests are all about this topic), and since I’m pretty much the only one at work who can do this stuff, I will be continuing the project until it’s completion.

Some suggestions and modifications are:

  • Move the text out of the Flash and into the html. This makes it available to search engines and styling.
  • Have the timeline only be for 1989, and put tick marks, or some other designator for months on the bar.
  • Change the fading of countries. Russia, Latvia, Estonia, Lithuania, and Yugoslavia should not fade out.
  • Change Soviet Union to Russia, and outline or shade the Yugoslavia and Soviet Union groups to show they are a group.
  • Take out the events for China.
  • For the yahoo Map: recenter the map on marker click, and take out the word wrapping.

So here’s the latest version of the Flash movie. 1989events

Popularity: 6% [?]

Tags:

Making progress

Friday, May 11th, 2007 | Uncategorized | No Comments

I took out the audio from the intro because it just wasn’t working. Perhaps a voice recording about the fall of communism would be better.

I worked on the timeline a lot the past couple of days. It took many, many attempts to finally get the dot that represents an event to look nice. Fifteenth times a charm, they say! I also have the events coming in by year, month, and day. There’s probably an easy way to do that with actionscript, but I couldn’t think of it. So instead I have a layer for the years, divided into the three years (1987-1989). Then another layer for the months. Each of the three years gets it’s own set of months. Then a third layer for days (1-31, depending on how many days in the month). The days layer only has frames for November and March of 1989, when most of the events happened. So, on each section of frames I wrote a variable like theYear, theMonth, and theDay in the actionscript. This variable is then checked for in the main actionscript, and matched against the events day, month, year before it is allowed to be displayed.

It works pretty well, except for the 1989 events for December. The all show up at the same time. So, now I have to fix that, and add another 40+ coordinates to the xml file by deciding where it is located, finding the x, y coords, then typing it into the xml file.

Anyhow, here’s the latest and greatest Intro_Timeline

Popularity: 7% [?]

Tags:

How does the yahoo/flash map work…

Friday, May 11th, 2007 | Uncategorized | No Comments

There’s a lot of tutorials out there, but here’s how I got it to work.

The Plan

Got what? Oh, well, basically it’s being able to use yahoo maps, flash, xml, php, mysql, and data to display a bunch of markers on a map. Each marker contains data pulled from the database, and has a link to a page that displays the full information. For now, I just made a display page. But sometime latter, it will be implemented into the fine Omeka install that the 1989 project will use.

The Steps

Here’s an outline of what I did.

  1. Create a flash file using the yahoo flash map api component. Available at Yahoo.
  2. Add some ActionScript to the first frame that will import data from an xml file.
  3. Create a php page that pulls in data from a MySQL database and displays as an xml file.

Create the swf

In order to make Yahoo and flash play nicely, you need to install the component linked above. Follow directions there. This will add a new component to your Flash program, available in your components window (Window->Components->Yahoo->com.yahoo.maps.api.flash.YahooMap).

Once that’s installed, create a new empty fla. Make a keframe in the first frame on layer one. Drag the yahooMap component onto your stage.

Next, add another layer for your actionscript.

the ActionScript

Here’s the tricky part. Here’s the code I used, heavily commented:

  1. /*********************************
  2. *  File: yahoomap.as
  3. *  Author: Ammon Shepherd
  4. *  based off of many tutorials and code snippets, mostly from Yahoo! documentation.
  5. ********************************/
  6. //Set the URL where the xml file is.
  7. var xmlURL = “http://chnm.gmu.edu/1989/maps/xml.php”;
  8.  
  9. //Import Yahoo map tools
  10. import com.yahoo.maps.LatLon;
  11. import com.yahoo.maps.markers.CustomPOIMarker;
  12. import com.yahoo.maps.tools.PanTool;
  13. import com.yahoo.maps.widgets.*;
  14.  
  15.  
  16. //Create a listener associated with the instance of the Yahoo map component.
  17. //  Set the map to pull down the yahoo map and get the setting/changes from
  18. //  the onMap function.
  19. euroMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onMap);
  20.  
  21. //This will add a zoom tool and set it as closed by default
  22. var zoomer:NavigatorWidget = new NavigatorWidget(“closed”);
  23.  
  24.  
  25.  
  26. //The onMap function adds the tools, settings, and markers to the map.
  27. function onMap(eventData) {
  28.     //create a new PanTool and name it pantool
  29.     var pantool:PanTool = new PanTool();
  30.  
  31.     //tell the instance of the map to use the new PanTool called pantool
  32.     euroMap.addTool(pantool, true);
  33.  
  34.     //Add the Navigator widget
  35.     euroMap.addWidget(zoomer);
  36.  
  37.     //Create a variable called xmlData of the type XML
  38.     var locations_xml:XML = new XML();
  39.  
  40.     //igore white space
  41.     locations_xml.ignoreWhite = true;
  42.  
  43.     //when the xml file is loaded, do the fuction within
  44.     locations_xml.onLoad = function(success){
  45.         //if the xml file loaded successfully run the function addMarkers
  46.         if (success) addMarkers(this);
  47.     };
  48.  
  49.     //then actually load the xml file.
  50.     locations_xml.load(xmlURL);
  51.  
  52.     /*******************************************
  53.     * Used this for testing, you don’t really need it. I was thinking of using
  54.     *   this in the future to display the lat and long to the user.
  55.     //Get the center of the map and store them in the variable called points.
  56.     var points = euroMap.getCenter();
  57.     //trace("before convert" + points);
  58.     //swap the points, so long->long and lat->lat
  59.     convert(points);
  60.     //trace(points);
  61.     ******************************************/
  62.  
  63. }
  64.  
  65.  
  66.  
  67. //This is the function that adds the markers to the map.
  68. function addMarkers(xml:XML):Void {
  69.     //the addresses variable holds the path to the right xml element.
  70.     //firstChild is the <locations> and childNodes is an array of the <location /> tags
  71.     var addresses = xml.firstChild.childNodes;
  72.  
  73.     for(var i=0; i<addresses.length; i++){ //loop through the xml data
  74.         //address grabs the next child. so as the for loop reiterates, it grabs the
  75.         //  first <location /> then the second and so on for all of them.
  76.         address = addresses[i];
  77.  
  78.         /***************************************************************
  79.         * MarkerData is the object that holds the info for each marker.
  80.         *   index: is the text that shows up on the marker (usually just A or
  81.         *       what have you. you could use the variable i to show an
  82.         *       incremented number (each marker has it’s own number).
  83.         *   title: sets the title of the marker and corresponds to the title
  84.         *       parameter in the location tags in the xml file.
  85.         *   description: is the larger text. It corresponds with the description
  86.         *       parameter in the location tag in the xml field.
  87.         *   markerColor: sets the color of the marker, duh :) It’s the border
  88.         *       color, and the color when not expanded.
  89.         *   strokeColor: is the background.
  90.         ***************************************************************/
  91.         var MarkerData:Object = {index: ‘\’89′, title:address.attributes.info, description:address.attributes.description, markerColor:0xcc0000, strokeColor:0xceccc7};
  92.  
  93.         /****************************************************************
  94.         *   This actually adds the address to the map using the custom point of
  95.         *       interest style of marker (you can use your own style if you like.
  96.         *       the address.attributes.loc grabs the latitude and longitude from
  97.         *       the loc="" part of the location tag in the xml file. MarkerData
  98.         *       is the stuff we just set above.
  99.         ****************************************************************/
  100.         euroMap.addMarkerByAddress(CustomPOIMarker, address.attributes.loc, MarkerData);
  101.     }
  102. }

Download yahoomap.as

(Special thanks to CodeSnippet for providing a way to show code. This was the 5th one I tried that finally worked.)

The PHP/XML

Next we need an xml file. I need to pull the data from a database, so I used a php script which pretends to be an xml file. The basics of that is to put this in the php file:

  1. // Date in the past
  2. header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
  3. // always modified
  4. header(“Last-Modified: “ . gmdate(“D, d M Y H:i:s”) . ” GMT”);
  5. // HTTP/1.1
  6. header(“Cache-Control: no-store, no-cache, must-revalidate”);
  7. header(“Cache-Control: post-check=0, pre-check=0″, false);
  8. // HTTP/1.0
  9. header(“Pragma: no-cache”);
  10. //XML Header
  11. header(“content-type:text/xml”);

Then, because our database doesn’t store the geocodes by default yet, nor do the items have any type of specific address or what not associated with them, I created an array with specific places and their lat, long. Each of the items in the database have tags associated with them. The array corresponds to tags that have countries names on them. This poses a problem if the tag name is changed, but for now it works OK.

  1. $countries = array(
  2.     array(“Poland”, “52.1874047455997″, “19.072265625″),
  3.     array(“East Germany”, “52.517474393230245″, “13.41156005859375″),
  4.     array(“Czechoslovakia”, “49.210420445650286″, “17.490234375″),
  5.     array(“Hungary”, “47.45780853075031″, “19.05029296875″),
  6.     array(“romania”, “45.98169518512228″, “25.07080078125″),
  7.     array(“Yugoslavia”, “44.26093725039923″, “18.96240234375″),
  8.     array(“Bulgaria”, “42.601619944327965″, “25.24658203125″),
  9.     array(“Soviet Union”, “55.70235509327093″, “37.79296875″)
  10. );

The problem I ran into next was that there were over 15 markers that would share the same lat an long. This makes it hard to click on a marker when it’s buried under 20 other markers. So at first I tried just adding a couple of digits to the lat and long as it looped through the array. This led to a long line of markers, and didn’t look very good. Random numbers to the rescue! To create a clustering affect I generated two random numbers, one for the lat and one for the long. This number was added giving the markers a clustered appearance. Here’s that part of the code:

  1. echo “<?xml version=’1.0′ ?>
  2.             <locations>
  3.             “;
  4.  
  5. for($g=0; $g<count($countries); $g++){
  6.     $query = mysql_query(“SELECT i.item_id, i.item_title, i.item_description FROM items i JOIN items_tags it WHERE i.item_id=it.item_id AND it.tag_id = (SELECT tag_id FROM tags WHERE tag_name = ‘”.$countries[$g][0].“‘) LIMIT $limit”);
  7.     while($result = mysql_fetch_array($query)){
  8.         $x = rand(10,100)/100;
  9.         $y = rand(20,100)/100;
  10.         $lat = $countries[$g][1]+($x);
  11.         $lon = $countries[$g][2]+($y);
  12.         echo ‘
  13.                 <location loc="’.$lat.‘, ‘.$lon.‘" info="’.htmlentities($result[‘item_title’], ENT_QUOTES).‘" description="’.description($result[‘item_id’], $result[‘item_description’]).‘" />’;
  14.  
  15.     }
  16. }
  17.  
  18. echo ‘
  19.             </locations>’;

You may notice my call to the description function (which, in turn, calls a function called truncate, but you wouldn’t know that yet). This simply turns all HTML characters into their HTML entity characters. HTML in an XML file will break the XML file… more specifically the < and " ' characters. The truncate function I grabbed from php.net's comments for substr_replace. The truncate function shortens long text to a set number of words, and adds an ellipse at the end to signify more text. Here are those two functions:

  1. function description($id,$text){
  2.     $description = wordwrap(htmlentities(truncate($text,200), ENT_QUOTES),30);
  3.  
  4.     $fulltext = $description.“\n&lt;a target=’_blank’ href=’http://chnm.gmu.edu/1989/maps/results.php?id=$id’>Show item&lt;/a>”;
  5.  
  6.     return $fulltext;
  7. }
  8.  
  9. function truncate($text,$numb) {
  10.     // source: www.kigoobe.com, please keep this if you are using the function
  11.     //$text = html_entity_decode($text, ENT_QUOTES);
  12.     if (strlen($text) > $numb) {
  13.         $text = substr($text, 0, $numb);
  14.         $text = substr($text,0,strrpos($text,” “));
  15.         $etc = ” …”;
  16.         $text = $text.$etc;
  17.     }
  18.     //$text = htmlentities($text, ENT_QUOTES);
  19.     return $text;
  20. }

Here’s the whole php file.
That basically does it.

Popularity: 12% [?]

Tags:

xml, and lots of time.

Saturday, May 5th, 2007 | Uncategorized | No Comments

Back again. Only two weeks left of school.

I spent the past two days trying to work XML into the picture for the time line aspect. The thought was, if all of the data for the ‘flash point’ or points of the events of 1989 were kept in an xml file, the the flash could dynamically add them in at the right place and time.  I can bring in the xml data, but I can’t get it to display the correct information for each event. It always shows the last events data. I have a for loop to grab all of the data from the xml file, then it attaches the ‘flash point’ movie clip in the correct place. Then I assign an onRollOver and onRollOut to that movie clip (dynamically named). But the onRollOver just holds the data from the last element in the xml instead of each attached movie clip holding the data for it’s respective event.

This would be really cool to do, because then to add or remove events from the timeline, just edit the xml file.  The xml filed could even theoretically pull the data in from the database, making so that each person can have their own specific timeline.  That would be way cool. But it unfortunately seems a bit beyond me. The other obstacle is about the time aspect. How can I get the flash point to show up at the right time. I’d have to come up with a bunch of mathematical voodo on where the timeline bar is (the _x position on the stage) and the percentage left and compare that with the date of the event somehow. Aargh! Way too confusing for my feeble brain.

I’ll just have to do the easy hard code the events into the timeline. Anyhow, here’s what I have so far on the intro/timeline (which, I’m realizing, I’ll need to have a front page where you select which one you want to view, or have them separate instead of one after the other). Version 0.0.2.3.9.5 (or something like that)

Popularity: 6% [?]

Tags:

« Older Posts

Search

Categories