Monday 22 November 2010

Week Three - Map Development (Continuation)

Map Development

Weekly Targets

  • To create a function that refreshes the XML data at every 25th and 55th minute of every hour. 
  • To create the metric clock using the users desktop current time 

Finalised the XML refresh function which updates the XML feeds 5 minutes after they're updated by yahoo. The five minute delay will hopefully counter act any delay that yahoo actually encounter. Yahoo update there feeds every 30 minutes at twenty minutes and fifty minutes past the hour so the feeds on my project will update at 25 minutes and 55 minutes past the hour.

Its a fairly simple function which uses a timer event:

var refreshTimer:Timer = new Timer(1000);
var the_date:Date;
var time_array:Array = [];
var minuteCounter:int;

refreshTimer.addEventListener(TimerEvent.TIMER, timer);
refreshTimer.start();

function timer(e:TimerEvent):void {

    the_date = new Date();
    time_array.push(the_date.hours + ":" + the_date.minutes + ":" + the_date.seconds);
    trace(time_array);

    if (time_array[0].indexOf(":25:0") > 0) {

        u = 0;
        trace(userMapArray);
        trace("XML Refreshed");
        loadMap();
      

    } else if (time_array[0].indexOf(":55:0") > 0) {

        u = 0;
        loadMap();
        trace("XML Refreshed");


    }
    if (time_array.length == 1) {

        time_array.length = 0 ;
    }
    minuteCounter = (((the_date.hours * 60) + the_date.minutes));
    minuteCounter.toFixed(0);

    trace(minuteCounter);

}

Using the date class i am able to collect the exact time from the users operating system. The function is executed every second, so each second the new date is then displayed in flash which is then stored into an array which resets itself to a length of 0 before then time is pushed into it. Because the function is triggered every second its possible to use an if statement to check the index for a certain string, for instance:

if (time_array[0].indexOf(":25:0") > 0)

 The if statement will check for this exact entry in the array to be equal to :25:0 which is twenty five minutes and zero seconds past any hour, when it is equal to it it will execute and code, in my case the loadMap function which will reload the XML feed in flash. The major problem was that this would reload the actual movieclips used for buttons and thus cause a great deal of extra unwanted loading time. So i created a boolean which was set to false at runtime which would then change to true once the the map had been populated the first time round. If the boolean is set to true then flash would ignore the function to create new movieclips as the locations and in effect just update the RSS feeds.

The metric clock is going to be used to position the sun and the moon and to set off specific animations which create a  day and night effect. The actual day and night effect is a simple 2d movieclip set up as the background to the users garden and for each minute of the day would animate toward either a black or blue colour. Its a fairly simple process using some basic maths:

minuteCounter = (((the_date.hours * 60) + the_date.minutes));
minuteCounter.toFixed(0);

The minute counter is  equal to a very simple equation the dates hours (on a 24hr clock) multiplied by the amount of minutes in an hour plus the minutes past the hour. This would give me a number to 2 decimals points which are not needed so to remove them we simply use the toFixed command to only use the numbers up to the decimal point leaving a round figure

I then added this to the previous prototype. The new auto refreshing version can now be found here

This concludes the coding side of the map without any user testing upto the present development point. Ive already discovered one small bug with the mouse over on the locations which will need addressing at some point after the user testing stage.

No comments:

Post a Comment