Map Brief: interactive animation timeline

By: Andres and Ben


The real fun with Flash begins when you start to make your art and animations interactive.
Interactivity means that a computer user’s input triggers immediate changes on the computer screen, which the user can then respond to further. Examples can be as simple as clicking a button to go to another web page, or as complex as a video jukebox.

Flash uses a computer language called Action Script to specify how the interactivity works. Action Script statements are short instructions that tell Flash what to do next. By combining them, you can produce complex sets of instructions to create amazing animated graphics and to give your flash movies sophisticated interactivity capabilities. Action Script is based on the same language specification as JavaScript, the popular computer language used in web design


1. http://www.nola.com/katrina/graphics/flashflood.swfThis map illustrates the flooding of New Orleans during Hurricane Katrina. The map is very specific showing time in very small increments. The animations on the map are designed to show the areas that got covered by water at various times during the course of the storm from the pre storm surge to the end results of what all got hit with the flood. Animated arrows show the path of the storms surge and its relative location to actual places on the map. The timeline on this text is not in a line format. The time on this document is kept digitally and the time on the clock is syncrinized to the actual time that the events happened involving Hurricane Katrina. Once again text is apparent on this map in “pop-up” format. When you get to the end of a frame, a text pops up that tells the story of what you have just seen or in some cases digs alittle deeper into what happened in that particular frame. There are 2 versions to this map. One version is the one that pauses to bring up text that allows you to read and the second version is a continous frame that doesn’t stop at all and gives no text. There is also another option available to you with this map and its to view a map showing the depth of water during the flood. This comes up as a smaller pop up map. The design of this map is very complicated and like i said before it has no "official line of time" as it is kept digitally. I like the digital touch to it because with this map your dealing with events that occur in mere hours of each other instead of months and years. I also like the fact it gives you the option to see it in increments or see it all at once. This allows you to get a better feel for what is happening and when some of the key moments in the disaster occurred. The placement on this map can be better too. The clock should be at the top as it is more of a central focus on the map. Because the complexity of the map, a legend is required. However the symbol for flooded land was not an aspect that they needed to put on the map. The play of the timeline is simple on the main map where you click the play button and you go through the entire scene with all the explanations of it popping up at the end. There is no visible way to "go to a point" in the timeline where an event took place without hitting the next or back buttons. This map compromises alot of the elements of an actual timeline but it also provides alot more depth in it than a regular timeline map.

2. http://www.bbc.co.uk/radio4/history/empire/map/This map shows the history of the british empire over the past 900 years. Map is designed to show british settlements, wars, and established trading partners that the empire has acquired and released over the last 900 years of its exsistance. The timeline is back to the original timeline that we had back in the first map. The timeline is at the top of the page but unlike in the first map the timeline does not move very fast and it is also stretched out over a longer period of time. The animations of this map are meant to show how much of what land did the british either acquire or lose during a certain period in time. A second animation lays down dots where the empire has established colonies and trading. Arrows are also used to show path of travel to different locations as some of the early travels were done before there was knowledge of the rest of the world. Text accompanies each document explaining what exactly happened at various points in the animations. For the most part they provide a name and an event to describe the action on the screen. I really liked the design of this map but the first thing that you notice is how slow the timeline goes. It literally feels like 900 years are passing before you get to the end of the timeline. That is one adjustment that I would make. Make this timeline go by faster. The placement of the timeline is fine on top of the screen, but the legend is in a bad spot on the map that takes up some of the space for the map. I woulda put the legend in the lower spots of the map, perhaps on the right side. The text that accompanies the map is also in "map space" taking up part of South America. Aspects like the text especially when it is permanent like that and not pop up should be to the far south of the diagram. The other option with this map is that you could put things in the ocean, however that will fail when the arrows go through and the true path won't be seen. This map is not very confusing and if it was the timeline goes slow enough for u to look at the legend and figure out whats happening before it gets to the next frame. The timeline is activated through the "play timeline" feature on the top right of the map. The timeline can be paused at anytime and the user can also skip to a century by clicking on that century.

3. http://www.mapbureau.com/shipwrecks/index.htmlThis is the simplest map thus far. It documents shipwrecks that occurred in the opening of the Columbia River in Washington state. The timeline is brief and goes through the action rather quickly. The timeline is based on 200 years of shipwrecks from the 1800’s to the 2000’s. The animation serves 2 purposes: 1. Allows you to see the land development and the differences in the coastline over the 200 years and; 2. Pop up animation allows you to see volume and # of shipwrecks that occurred and when they did. The last element of the text comes in when you click on a point that represents a shipwreck, the information on that shipwreck pops up in a box on the right side of the map. Information such as date, type of ship, and lives lost all provide interesting data to the user about each individual spot. There is nothing that is particularly confusing about the map other than the fact that the increase in the land is not explained on the map. The design and the placement of the timeline are good and the speed in which it goes through the events is fairly quickly and the volume of ships over time is well noticed. Operating this timeline is simple. Users can activate the timeline by clicking the play button on the far right of the screen. The user can also stop the timeline at any given spot and view the animation at that point, however the timeline will not stop itself once it gets going lest the user elects to stop it manually.

Map#4

This map illustrates the sea monsters during the dinosaours era.

I think the design is pretty good in terms of color selection and pictures. The main screen offers a description of the content and flahing pictures of each creature.

It offers the user different ways to access the content. For example, you could start the animation by clicking on the button displayed on the animation screen. This command will take you in order through the the different eras, and it will show you the the changes in the map over time. Another option is to click on an era name and the time. Once you start, you are able to interact with the different map features.For example, you can look at a picture and a description of each monter. You can also zoom in and in some cases , be able to get 3D images. Moreover, you can also see each monster by continent. This option will you all the 3D features with just one click. It is very easy to use and appealing to the user.

http://www.nationalgeographic.com/seamonsters/timeline/index.html?fs=plasma.nationalgeographic.com#introduction

Map#5

This map shows the Atlas of the Human Journey. It shows the archeological findings that try to explain the journey of human species. It offers interactivity by clicking under the timeline at a desired order. One you click on it, the map changes and it offers you a window with video and sound. You can also have a text version of the video. Once the video ends, you have to click on the time line again to see the next feature. Even though you have video interaction, I do not like this map because it does not show the places the video is talking about. When you move trough the time lime, it only shows the retreat of the snow.



https://www3.nationalgeographic.com/genographic/atlas.html


This video shows you how to build a simple animated banner in Flash, and publish it in order to create a SWF and HTML file. The video introduces you to some of the core concepts of Flash while you create the banner, such as document creation, importing, text, frames, assets, and simple Action Script.
http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0118

This video shows you how to use Script Assist to add Action Script 3.0 to your FLA file. You learn about some of the core Action Script concepts, such as events, functions, properties, and listeners, while you add code for a button. The button you create plays a movie clip after you finish adding the code and compil.

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0131


Getting started with Action Script
http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0130