Thursday, May 7, 2009

Final Project

Final Project:
So here it is all done. There are plenty of things I would have done differently and lots of things I still wanted to implement but had no time to do so. I'm very happy with how it turned out except a few behind-the-scenes coding problems that were way to messy for my liking and I didnt like the intro screen/preloader. Maybe later....

Anyways, here it is:

View at correct size (will not work on some browsers-if it doesn't click other link)

Final Project

Tuesday, April 21, 2009

More Final Project progress and comments

There have been a few problems I've run into while designing this that still need figuring out, mainly design and look-wise problems, along with a few back-end problems.

Here are some things that still need figuring out:
  • In showing 1 hour data, should there be separation of color for earthquakes that happened within the last ten minutes as opposed to quakes that happened within the last 45 minutes?
  • In one day data, color will also be used to differentiate the time between the earthquakes. How many classes is best? 3 Colors, RED ORANGE YELLOW for 1 hour, 6 hours, 12+hours? Four classes? A smooth gradient going from red to yellow over a 24 hour span?
  • Same problem for 1 week data- 1 day, 3 day, 5+ days? etc?
  • Splash screen - needs alot of love and more a better and more appealing flow. (although I do like the seismogram I made, just not its placement etc)

  • BACKEND PROBLEMS:
  • Keep track of earhquake markers to allow for on the fly changes of size or other options by user
  • Keep track of earthquake markers in different data sets (1 hour, 1 day, 1 week) to allow the user to toggle between them without having to redraw everytime
  • Catch errors when user tries to view earthquakes when an active internet connection is not available - display cached data? Same problem for GoogleMap tiles not loaded.
  • fix pan left up down right buttons.
  • fix 'show source' content.
  • change the info content
  • Preloader to load all data before trying to display the map.
I didn't want to show the progress of my final project but decided to do so anyways. I figured who best to ask for opinions and ideas than the people I'm presenting it to.

If you guys have any ideas on visual changes and/or backend programming changes pleasseee let me know!


http://mason.gmu.edu/~jgonzalf/earthquakev2as3.html
(note this is NOT the most recent update)

Final Project Progress

For my final project I really wanted to make a map that would be constantly changing; Something that could, whenever it were viewed, tell you what was going on at the moment in time. With technology increasing and the availability of live feeds from so many sources, this seemed like a great idea.

I ended up deciding to use the feeds from the USGS to map earthquake data around the world. Its very impressive actually see the amount of earthquakes we have in the US daily, even though most go unnoticed and not felt.

To view the data I'm using, click HERE to view 1 days data, and HERE to view a weeks worth.

Now some example code and explanation of it:
---------------------------------------------------------------
  1. var url:String="http://earthquake.usgs.gov/eqcenter/catalogs/eqs1day-M1.txt";
  2. var usgsDataLoader:URLLoader = new URLLoader();
  3. usgsDataLoader.addEventListener(Event.COMPLETE, textLoaded);
  4. usgsDataLoader.load(new URLRequest(url));
  5. function textLoaded(event:Event):void {
  6. var usgsDataDay:String=event.target.data as String;
  7. }
---------------------------------------------------------------
Line 1 makes a new variable called url which contains the location to the data file we are trying to fetch and read.
Line 2 creates a new url loader - this will read information from a URL and load it into flash.
In line 3, we add an event listener to our url loader - once the URL is loaded into flash, the function "textLoaded" is run.
We finally load our usgsDataLoader variable with the info from our URL.
upon completion of loading our data, we call our textloaded function and make a new variable of type string which holds the data from our loader

There you have it...how to load external data into flash. Although we now have our data loaded into flash, there is alot we have to do before we can actually make use of it such as parsing and splitting it up or searching through our text to find parts of interest, and even more work before we can incorporate it into our FLASH ide, making information in the text actually affect something in our flash movie.

If you have any questions on how this code works feel free to post up.

switching over to AS3.0

So yea - Not that I'm a big ActionScript coder (actually...not one at all) - I had been used to using the simple functions of AS2.0 - But a few weeks ago, I finally made the switch. Not because I wanted to do, but mainly because I wanted to use a map API that required the use of actionscript 3.0.

Surprisingly, the switch was pretty painless and only took a little bit to figure out its work-flow. Maybe I do have an advantage since I am a computer science major and the structure and work flow of as3 is something I'm much more used to.

Although AS3.0 will most likely look more intimidating to new coders because its a much more verbose and full language which separates the programming side with the flash IDE side, it really is much more flexible and easier to debug.

If you guys are thinkign about switching over, I say do so. Although it'll require a learning curve, there are many tutorials out there on switching over.

Actionscript.org is a great resources for any AS related questions and topics - heres a good as3 tutorial:
Getting started with AS3
and there are many more if you need some resources!

Thursday, April 9, 2009

Geog411 - Lab 10 - Tsunamis and PSDs

Pre-Tsunami

Post-Tsunami

Geog411: Labs 8 and 9

Forgot to post lab 8 last week since I was away, so a double lab post today:

Google earth KMZs

Placemarks HERE

GMU Campus Buildings HERE

Also got a headstart on my final project over the weekend and am pretty happy with the idea and how its coming along

Thursday, March 19, 2009

Geog 411-Lab 7

Came out nice - Didn't change too much. Added some external links to other sources on the splash screen and a few popups.

Here it is:
Lab 7

Monday, March 16, 2009

Tip: A Few Flash Tutorials

Although these tutorials aren't about doing things on a map, they are basic flash tutorials with cool ideas that can be incorporated into a map.

Keep in mind there are a million ways in flash to do the same things, so these are just some ways of doing things

Changing Colors in flash

Fade-in fade-out
- This also has links to a few other cool and simple effects like zooming and masking

Mouse-over effects - pretty simple way for mouse over effects - could be used for showing data somewhere when mouse goes over city/country etc

morphing - a pretty simple way to learn how to morph - video tutorial too.

I'll add more as a find them. Hope it helps a bit

Professional Effects

"Professional Effects" contain an endless amount of tricks and artistic effects that make a map look just that...professional.

With what we've learned in class so far, we are already able to make maps similar to those maps we see published on NBC, CNN, and other great map sources.

Shape Tweens, Motion tweens, timeline control and basic scripting are all we need to make the basics. It is the little details now that turn a map from a basic map, to a professional looking map.

Here are some examples of things that make a map look good:

http://www.nytimes.com/ref/world/20070622_CAPEVERDE_GRAPHIC.html

Starting off with a simple map. This map looks very clean and neat, mainly due to its simplicity. Although it has alot of information, it is very easy to navigate.
One of the things the publisher did for this map to make it look as professional as it does was to simplify everything.
-Lines are thin and neat.
-White space is very balanced.
-Very simple and good looking interactive controls (the tabs at top) - easy and intuitive to use.




http://www.nytimes.com/interactive/2008/06/09/business/20080609_GAS_GRAPHIC.html?scp=8&sq=map&st=cse#tab1

The NewYork times loves making simple maps. Little things in this map that add to its professional look include:
-quick fading in and out when switching from dataset to dataset - Easy to do, tweens with alpha changes do the job



http://www.eyesondarfur.org/satellite.html

This eyesondarfur map looks very nice.
-The contrasting colors add alot of visual appeal - the way they have boxed in the map, and the layout of the whole scene works very well.
-ZOOMING - the zooming effect is very appealing. It allows you to start with a far view of the land, and zoom in to the a desired level. Tweens (enlarging a base map) make this effect very easy to create.
-Blur Effects - sometimes when switching from one set to another, a different basemap must be used - adding blur effects give an impression of a satellite refocusing, making the map seem more 'real'
- Again, similar to the NYTimes map (and most other good looking maps), objects fade in and out quickly, instead of just appearing on the page.




http://www.washingtonpost.com/wp-srv/world/interactives/sudan/?hpid=artslot

I know we already looked at this map in class, but the little details in it make the map look so good. I'll name a few 'artistic' effects that make this look professional, whethere the map be static or dynamic
-Drop shadows on boxes make the objects stand out - gives map depth
-Borders around countries of interest define an area for our eyes to focus - choosing right size, color and alpha make this work!
-Land effects - showing mountains, rivers, etc from satellite imagery or drawn images and make more appealing and again add depth
-Layout, this makes or breaks a map I think. a fluid and well thought-out layout works well, plan this!
-Font - I love typography. The font you select, how you space it, size it, etc does alot to the look of a map (or any other design for that matter). Although the computers in the geog lab don't offer a huge list of fonts, we still have alot of work with.
Some typgraphy hints:
-Use fonts that work with what you are presenting. Somethign old or classical or historical might use some script fonts, or fonts with serifs.
- More modern designs might call for straight fonts. simple and square or rounded
- When using multiple fonts, use fonts that are the same and/or fonts that contrast. Avoid using fonts that are very similar but not. Viewers might think its a mistake.

I guess thats all for now, if I think of other things i'll post them up

Geog411 - Lab 6 - Operation Barbarossa

Flash 6 is finally complete. Although I originally liked how it was coming out, I didn't like the end result. Maybe it was because I looked at it too much. Or maybe not looking at it for most of spring break and coming back to see it didn't help.

Either way, here it is:



Little details make this map look good I think. The faded Country borders on the side. The glow of the borders on the main map. The textured land effect, and small alpha effects throughout make it look smooth. The animations themselves are decent although mapping this was difficult due to multiple data sets and undefined boundaries (Countries were different back then than these borders show).

I Added the question mark button which showed some map info (like on my previous lab) but realized in retrospect that I did not fill it in and is full of dummy text.