Motion Tween

This week we are jumping into one of the best features of Flash: tweening. By defining starting and stopping points of a symbol, Flash will interpolate all the intermediate steps to create a nice, smooth animation. It can be a simple, straight movement, or a complex curve with color changes and rotations and lots of bells and whistles.

This new CS4 version of Flash has a new tool for creating tween in fewer steps and with potentially more control. If you have played around with motion tweens in the past version (now known as "classic tweens"), you can still do that. I will show you both approaches.

There are several nice video tutorials online that introduce you to the Motion Editor and tweening. I'd like you to view them before jumping into Lab 5.
Good startervideo.
Motion Editor and presets (though we're not using the presets at this point)
A different video on Motion Editor.

A bit about easing which is fine tuning the motion movements

How about some motion tween examples?
Historical Trade Routes
Hurricane Emily

And a teaser of the final Lab5/Lab6 combo
And lastly, a very nice professional version of the operation.

Invasion of Russia

We're delving into historical cartographic animations today. The map we are using is a bit complicated since it is trying to portray a temporal component in a static map. I want to give you a link to a map that is a simplified version of the original. It does not have enough detail to make the animation, but it may assist in your interpretation of the original map. Here is also the Wiki reference on the event (with more graphics).

It is quite helpful to have a color version of the original map. You may use the color printer in the lab for this purpose.

Lab 5is much easier from a scripting standpoint but more complicated from a graphics/design/visualization standpoint. If you find handy tricks or hints, please post comments to this post for all to see. Thanks!!

NYTimes Visualization of Movies

Here is the link to the very interesting visualization of movie box office receipts for 1986-2007. Very interesting. Check it out!!

Looking into Interfaces and Interactive maps

This week we are examining more interfaces for map animations and visualizations. It is a complex interplay of legibility and intuitiveness versus graphic design and screen real estate. It is paramount that the user can quickly and correctly figure out what they can do (don't assume your audience is all that computer savvy). But do think creatively with regard to your topic and design theme. This website called Pattern Browser is an attempt to categorize a multitude of online visualizations with reference to the interface. It has a strong emphasis on geographic data and the needs of spatial info.

The other main component this week is learning a new approach for visualizing complex data -- the "faux-GIS." This is a layering technique where a static map image is overlaid with a variety of pre-made maps of the same geographic location. The user is given the ability to control the viewing of the maps (which layers to see and how many to overlap), but the maps themselves are all pre-made (dynamic maps are very doable and quite compelling...but we're not up to that level yet).

The issues with this visualization approach stems with the concentration of data symbols. It is challenging to produce multiple maps that retain legibility when layered together (as if a stack of overhead transparencies). Simplicity is key. It is possible to retain detailed info, but you have to think carefully. Below are some examples of this layering approach:

A "faux-GIS" style animation
Here is one on Sudan by the Washington Post which is very nice.
Another one about Michigan
And this one has layers in addition to temporal content (could inspire a final project)
And one from Discovery channel that incorporates real-time data on a 3D globe (and brings my laptop to its knees)

And this is just an interesting way to search for news geographically

Lab 4 Notes -- Transparency and Layers lab

Wondering what Lab 4 is supposed to look like when you have it all scripted?
Check out these 2 examples
Republicans
Democrats

Note that these examples display 8 maps...but we'll be showing 6. Also note the "checkbox" is a set size and font...but you'll need to allocate space for it on your image. You can also decide if you want the map to appear blank or have the initial 1976 year visible (your call).

There are 2 main scripts for the lab. They are printed in the write-up...but there are digital copied you can cut and paste into your action window (read the instructions to get it in the correct place). Remember to modify the name of the maps...

Election1988Map._visible = false;
(which makes that map invisible when the movie starts)

on (click) {
if (this.selected) {
_root.Election1988Map._visible = true;
} else {
_root.Election1988Map._visible = false;
}
}

(which directs the checkbox to turn the map on or off if the box is checked or not)

Timeline Design

This week we are pushing farther into Flash and will be analyzing one of the key design components of an animated map: the timeline. No, I'm not referring to the "timeline" in Flash but rather the component of the animation that relates key legend information and controls. A poorly designed timeline is difficult to use and interpret, and takes away from the animation regardless of how nice the maps are. The goal is to have buttons and dates and visuals that are intuitive and easy. You want the viewer to spend their time on the map, not figuring out how to play it!

Here are some links to some animated maps with timelines from a similar class at Univ of Wisconsin:
Poverty in America
History of the UW Campus
Central Africa's Rainforest
Peak Oil
School Finance in Wisconsin
FEMA Disaster Declarations

We'll discuss these in class today and will have our first Topic Review. See you in IN320!

Topic Reviews

Here is the list of the Topic Reviews:

2-10 Timelines: John
2-17 Interactive Interfaces: Jeremy
2-24 Objects that Move: Tori
3-3 Objects that Morph: Kelsey
3-10 [spring break]
3-17 Professional Effects: Javier
3-24 Shaded Relief and Draping: Sara
3-31 3D Maps and Modeling: Virginia

This info can also be found in an updated version of the calendar in the class syllabus. It is posted on Blackboard.

Census Map examples

Please take some time to check out the Census Atlas of the United States. It is a comprehensive atlas covering data all the way back to 1790 (the first decennial census). The maps are very nice (slightly different than the 2000 Census maps we looked at in 310) and cover a wider range of map styles and areas. Even the Intro is nice -- it has a short guide to the different map styles.

I encourage you to use these maps for ideas -- they follow all the conventions and are visually pleasing. Look at all the map details -- how they show no data, the scale bars, the layout, the legend numbering and orientation, labeling, etc.

And also look at the topics mapped -- so many animation ideas in there! The historical comparisons between 1900-1950-2000 are always interesting.

Lab day!

Just want to remind everyone that we are meeting in RA113 this morning for Lab 2.

See you then!

Uploading your Flash movie to your Blog...

Blogger accepts pictures and movies and hyperlinks, but it does not like Flash movies (I'm guessing they are used as advertisements too much). Therefore, we need to use a different website to store our .swf and .html files (the 2 files generated when you Publish your movie) and then link to that site from our blog.

I've searched for the best online options and I've struck out over and over (sites I have used in the past are either gone or no longer accepting new accounts). The best approach right now is to use your Mason webspace account. Simply ftp the 2 files to your public.html folder and then link to them in you blog post (follow the instructions in the lab). The good things with your Mason webspace are: reliable, individual, no ads, and a good chuck of server space.

If you haven't set-up your account, follow the instructions at the ITU Support page or swing by the STAR lab in the Johnson Center (they are generally helpful). Setup is sometimes glitchy, but once done it is not hard to use. Let me know if you are having problems!

Links for Animation lecture

Here are some sites we will be examining in class today:

Staring with some basic, old gif animations:
Illinois Land Records
USGS Earthquake animation
US Urban Growth
DC and Baltimore urban growth

Some nicer, but still simple time series ("flip-book") animations:
NY Subway History
Spread of Walmarts
2005 Hurricanes
Black Sea
US Election results

Just to get us started....