Tuesday, May 14, 2013
Monday, April 29, 2013
Other Interactive Map Examples
A Song of Ice & Fire
Game of Thrones
Conflict History Map
3-D Map of the Galaxy
Lab 10: Photoshop
Weekly Blog 10: Interesting Map
This was a set of maps done by a geograpy professor at Michigan State depicting where the Miami Heat and Oklahoma City Thunder make their shots. The first two graphics show where the two teams make their shots and then it gets broken down by players. I LOVE how the graphic changes from an image of the player to a graphic depicting where they make their shots upon roll over. Also when you roll over any given location it gives the points per attempt, number of attempts and total points. It's a very intuitive graphic, but it also has a lot of information packed into it!
http://www.nytimes.com/interactive/2012/06/11/sports/basketball/nba-shot-anal...
Weekly Blog 9: 3-D Map
This is an excellent example of a 3-D map showing the Hackley School Campus in Tarrytown, NY. It will play a few different tours as well as allow the user to select buildings they want to see and it comes complete with panning and zooming options. It also has roll overs with additional information. I really like the style of the map and even though I am not familiar with the campus I think it does a great job conveying the important information to potential students and visitors to the school. The link to the map is:
http://www.myatlascms.com/map/index.php?id=40
Weekly Blog 8: Neat Map Effect (panning, zooming, camera effects, scale changes, unusual rollovers)
This map on the DHL website is very well done. Upon entering the site one can select a country and the camera zooms into the country and brings up all kinds of facts and information. The user can also use the buttons on the left hand side of the screen to pan and zoom.
Lab 9: Building Maker & Google Earth
Here is the building I modeled in building maker and then posted to Google Earth. It's the tall white building. It's located at the intersection of Huntington Ave. and Massachusetts Ave. in Boston, MA. The building is comprised of apartments that are part of the Retirement Housing Foundation. Overall I enjoyed this lab and being able to model something that exists.
Lab 9: Geogamathing--Google 3-D SketchUp
Presenting the M & D Playhouse. It's every parent's dream come true...a back yard playground/babysitter for your children. It comes complete with a temperature controlled play house featuring a telescope, slide, and tv. Outdoor amenities include a pool, hopscotch, four square, geometric climbing centers and see-saw. Last, but not least it has wonderful security features such as an 8 foot fence and full time nanny. What more could any kid, or parent for that matter, want? To use: insert children and enjoy knowing your child will have fun and be safe!!
Lab 8: Part B Virtual Camera
For this part of Lab 8 I chose to "explore" Splash Down Waterpark in Manassas, Virginia. This lab was not difficult and I like the effect of the virtual camera. It does take a little practice, however, to get the tweening to flow nicely.
Lab 8: Part A Panning and Zooming
I enjoyed this lab a whole lot! I really liked the basemap I chose and that made it easier to create a nice map. The techniques in this lab were not hard and very useful to know. I will try to incorporate the panning and zooming into my final project.
Weekly Blog 7: Splash Screen
This map of the Battle of Antietam is reall well done. It has a nice splash screen and introduction. I like the interactivity of this map.
http://www.civilwar.org/battlefields/antietam/maps/antietam-animated-map.html
Weekly Blog 6: Shape Tween
This is a movie showing shape tweens depicting the movement of Allied troops across Europe against Nazi Germany. I think it does a nice job with the shape tweens. It also has a great example of a splash screen!
Weekly Blog 5: Motion Tween Effects
This is an awsome map I found showing the motion tween effect. The best part is that you can use the app to plan your trip and it creates a completely animated map for you! While it is not a flash product it is still very cool. It would also be a fantastic way to preserve a trip you've already taken.
Weekly Blog 4: User Buttons to Turn Visible Elements On and Off
This is a really neat map of the environmental impacts of the gulf oil spill that has cool buttons the user can click on and off to turn on and off certain visible elements. The link provided takes you to the effects on the environment and recreation, but if you click on the other tabs at the top of the map graphic there are additional maps with buttons. Also, this map was actually done in flash (bonus). It's a very informative map and I love the level of interactivity it has while maintaining a clean feel.
http://usatoday30.usatoday.com/_common/_fragments/_tabs/0615-oil-environment/...
Weekly Blog 3: Timeline
This is an interactive map from National Geographic of the westward journey of Lewis and Clark. I really liked the timeline on this website. In general I find this map to be very well done. I like how you can click on a number in the timeline and it highlights the route and also shows an inset of where this section of the trail fits in with the larger trail. Other great features include the pictures and sketches of the plants, wildlife, and native american tribes as well as the journal entries. All in all it is very high quality, but what else do you expect from National Geographic?
Final Project Proposal
For my final project I would like to do a map depicting the Moorish Invasion of Spain and the Reconquista. This would probably be done in two separate maps, but as the subjects are related I feel it will work well. It will be similar to the maps we did in Labs 5, 6, & 7 on Operation Barbarossa and will involve motion tweens, shape tweens, and user controlled buttons. Also I liked the faux GIS map we did so if I could incorporate that I would like to do that too. I want it to have an old world feel and still be clean and sophisticated. I don’t want the user to feel too overwhelmed. I picked this topic because I feel it lends itself well to that style of map. As much trouble as I had with some of the elements of those maps I feel it will be a good way to showcase my newly learned skills. In a previous life I studied Spanish and one component of that was Spanish history. I found the invasion of the Moors and the Christian Reconquista to be pretty interesting. I hope I can capture that in the map I plan to do. For this map the audience will be the academic world, specifically professors and students, or history buffs. I found a couple of examples that I think I can improve on. They are animated, but seem lacking in many ways. For instance one shows the movement of the invasion but doesn’t offer any additional information in the form of roll-overs or hyperlinks. Also I feel a time line would be very beneficial. I have found a few websites, including Wikipedia and the History Channel that have good timelines that I will use to get my information. I will use Adobe Flash, ArcGIS to get a base map (possibly), and other Adobe software such as Illustrator. To stay on track and get my project completed on time I plan to spend about a week and a half on the invasion and a week and a half on the Reconquista. That should allow me to be done with a substantial amount of the project in time for peer critiques. I feel like I can definitely improve upon the examples I already have. I know one of my obstacles is going to be getting a good base map, since modern boundaries don’t necessarily apply.
http://en.wikipedia.org/wiki/Moors
http://staff.esuhsd.org/balochie/studentprojects/moorchristian/
Lab 7: Flash Effects
Lab 6: Shape Tweens
The fun continues! Seriously though, I finally finshed my Lab 6 that took Operation Barbarossa one step further and added shape tweens to show the advancement of the German Army into Russia. It wasn't too difficult. I actually spent more time fixing things from Lab 5 and getting my buttons to work properly. Overall, I'm pleased with my product and look forward to posting the additional enhancements in Lab 7.
Professional Effects Presentation
Professional Effects in Flash
by Erin Davis and Elena Ball
*Roll-over
A complex button that is animated when rolled over/out.
Ex. http://www.kirupa.com/developer/mx2004/button_effect.h
*Hyperlink
Text or a button (or movie clip) that the user can click on that will link them to additional information. This provides the user greater access to more information without cluttering the map with larger amounts of text.
*Pop- up
This is a window that pops up independently when you click on a button.
Ex. http://www.kirupa.com/developer/mx/centered_popup.htm
*Splash Screens (intro pages)
This is an introductory page that a user sees before being given an option to continue to, in our case, the map. Basically, they are a tool used to provide more polish and info to the user. They can be still images, but more often they include animation and audio. They are meant to make a “splash” and grab the audience’s attention.
Ex.
http://www.civilwar.org/battlefields/fredericksburg/maps/fredericksburg-animated-map/
http://www.umesc.usgs.gov/terrestrial/migratory_birds/loons/migrations.html
http://www.bradshawfoundation.com/journey/
http://www.ushmm.org/wlc/en/media_nm.php?ModuleId=10005131&MediaId=7826
When the following tools are incorporated into your flash presentation they provide an overall more refined product. It’s these small things that really make a huge difference in the look and feel of your product. Perhaps you’ve looked at a map and asked, “I wonder how they did that?” More than likely they used some or all of the above techniques to give their product a polished, sophisticated, and professional quality.
Lab 5: Operation Barbarossa (Motion Tweens)
Here is my flash map depicting Operation Barbarossa. In this lab I used motion tweens. The motion tweens weren't too difficult. I just had trouble getting them to adjust the way I wanted. I actually found the other elements such as the timeline and buttons to be a little more difficult.
Lab 4: Transparency
This is a flash map showing the states democrats won in presidential elections for the years 1996 through 2012. It uses transparency to allow the map user to select what they want to see. The user can select one or any of the five elections represented by checking or unchecking the boxes and then can easily tell how many years a particular state was won by a democrat.
I really enjoyed designing this map and felt like the technical aspects were not as difficult as in previous maps I've done in flash. I like the abilty of the user to be able to select the years they are interested in seeing as it is very useful and informative.
Weekly Blog 2: Population Map Example
I came across this awesome interactive map on National Geographic's website. It is very interactive and jam packed with a wealth of facts and information. The link I provided below is a small part of the series and is titled The Human Condition where one can explore, among many topics, trends on population density. I love everything about this map, but my favorite feature is the imagery that is displayed when one clicks on a button. I highly recommend checking it out.
http://www.nationalgeographic.com/earthpulse/population.html
Lab 3: Interactive Timeline; The 49ers Road to the Super Bowl*Updated*
This is an improved version of my Lab 2, 49ers road to the Super Bowl. One difference is that it includes an interactive timeline. As a person who benefits from interactive learning I'm really excited to be learning these techniques to make interactive products. Overall I'm much happier with this map than I am of my Lab 2 product. I think I'm finally getting a little more comfortable with Adobe Flash and hope to see steady improvment in future labs.
Lab 1: Introduction to Flash
Lab 2: Buttons (Flip Book Style Animation in Flash); The 49ers Road to the Super Bowl
This is my first animated map done in flash and I'm super proud that I was able to make the control buttons work on the first try. All things considered I think I created an interesting product centered around the San Francisco 49ers road to the Super Bowl. I'm still learning my way around flash and find it's harder, if not impossible to do some of the little stylistic things I'm used to being able to do in Adobe Illustrator that aren't super dramatic, but add a lot of interest visually. Hopefully I will figure out how to do them in Flash too. Either way it is exciting to learn how to make animated products because who doesn't want an interactive map?
Weekly Blog 1: Interactive/Animated Map Example
Fascinating interactive map: Where U.S. secretaries of state have traveled since 1989
I picked this interactive map of where the U.S. secretaries of state have traveled since 1989. I really enjoyed being able to see where each individual secretary has traveled as well as the map with their combined travels. Also, I found it very convenient to roll over a particular country and immediately see who has been there and how many trips they have made there. Additionally, I found the color scheme to be eye pleasing.
http://www.washingtonpost.com/blogs/worldviews/wp/2013/01/24/fascinating-inte...