Lab 3 Examples

Interactive layers in Flash

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. 

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. The challenge of this visualization approach is to produce multiple maps that retain legibility when layered together (as if looking through 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.

And Iraq animation has layers in addition to temporal content (could inspire a final project)
National Geographic's Antarctica map
Forbe's American Migration
NYT's Jobless rate (2009) -- a graph instead of a map

Two other interesting maps (different styles):

2008 Campaign Finance Tracker has a variety of ways to search through the data.

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

27 Hilariously Bad Maps that Explain Nothing

Sometimes we learn just as much from bad examples as good ones. Please don't make these mistakes...

Map to Find and Post to your Blog! #3

A map similar to Lab 3 -- uses toggles/radio buttons/checkboxes of some form to allow the map reader to interact with the data. Layers turn on/off. The user decides how many layers to view at a time. Any topic. Any style.

Getting your Flash movie on you blog! (UPDATED)

In order to get our Flash output (the .swf file) on Blogger, we need to host the file on a different site, note the web address of it, and then paste that address in our Blogger post.

Dropbox and Google Sites are both options I proposed in class last week. Dropbox, currently, is being a pain. Google Sites, however, is working well. Both Nicole and Anuraag have had success and posted their steps on their blogs. (Thanks!!)

Nicole's post

Anuraag's post

Helpful hints for new Flash users

I asked 411 students at the end of the semester to write up hints for a student just starting out in Flash. Here are two lists. Hope these help!

1.  Understand that Flash will almost NEVER work the way you want it to

2.  Going off of #1:  Don't get discouraged.  There is almost always a work-around if you can't get your original idea to work

3.  Spend that first week really playing around with Flash and all of the tools as the more familiar you are with it, the easier it will be.

4.  Understand early that certain tools will not work the way you may be used to it.  For instance, when you draw a square, you need to select all 4 sides and the fill area together if you want to move it or resize it (group them)

5. Learn to incorporate other software programs into your work with flash...such as Illustrator, Photoshop, power point, etc.

6.  ASK FOR HELP if you find yourself stuck.  Trust me, the sooner you do that, the less confused you will be.

7.  Understand that Flash is NOT a GIS program (like ArcGIS)...so don't treat it like it is if things don't work

8.  When looking for graphics to add to a project, try and find vector layers as they tend to look a lot cleaner and crisper on your final maps

9.  Don't be afraid to used the help tool or google if you can't get ahold of your professor and you find yourself stuck.  There are many great tutorials out there on almost all the major features that you will be utilizing.

10.  Try and have fun with it.  Knowing how to properly used this software can open up so many doors to new skills in your map making ability.

1. Save early, save often and save in several different locations.

2.  Using the touchpad will drive you mad, go for an actual mouse.

3.  Focus on masks, there some of the more useful things out there.

4. It’s better to have too many layers than too few and run the risk of deleting something.

5.  Learn how to use buttons backwards and forwards, you’ll need it.

6. Use colors that facilitate easy reading for words, not what looks good.

7. Make notes in the margins of lab instructions, it’s a lot more helpful than it sounds.

8. For the love of god, if you don’t understand something, please just ask for help.

9. Balance things out, use illustrator and photoshop as well, it’ll make your life easier.

10. Test your work as often as possible, best to find something that doesn’t work earlier than later.

Lab 2 part Info!

Last week I decided to cut Lab 2 into two parts (A & B) as I felt it was just too much to tackle in one class. It was the right move, but in doing so I accidentally gave you a lab that was missing 2 key parts: how to Publish your movie and how to get it on Blogger. Your Lab 2 part A writeup ends abruptly after step 19 -- right where the scripting begins. 

Several of you have asked how to turn it in. Here's the plan:

We are going to do it all in class this Monday. We will work together to get your buttons scripted (steps 20 and onward). After we have a scripted, functional movie, we will learn how to Publish it. And then we will go through steps to get it viewable on Blogger.  I will hand out new instructions that will get us all the way through the end (and then onto our next exercise…).

What do you need to have done before class? Everything through step 19.

Do you need to have something posted on your blog by the time class starts? No.

Weekly Map to Find and Post #2

This week we are going beyond a simple static map and will be learning how to bring buttons into our movie. I want you to find an online map that uses buttons to control the playback of the information -- a flip book style where you click to move ahead in time.

Lab 2: Adding sound into the mix

Today we went over how to add sounds to the buttons you're creating for Lab 2. Simple sounds, like a beep or ping, add an addition layer of user feedback to a button. We attach sounds to the "Down" stage of a button to let the user know their click was successful (adding sound to the "Hit" doesn't work well as the action happens so quickly -- the sound may seem to play after the button has completed its action). 

Fortunately, adding sounds to buttons is simple. I'll highlight the steps here. 

1. Get the sounds file. For this lab, I've assembled 18 basic wav files that work well for buttons. The sounds are in a folder on Blackboard. Download the file, unzip (if needed) and then "Import to Library" the whole lot. To hear what the sounds "sound" like, double click on the icon for the sound in the Library. In the pop-up window, there is a Test button on the right. Click it to hear the sound. Use the same sound for each instance of one button. If you wish to use a custom sound, that is fine. Just make sure it is short in length. We will do more elaborate sound additions later this semester (there is no requirement to go beyond the sounds provided for Lab 2A).

2. Attaching the sound to the button is done in the editing mode. Select the instance of the button on the stage and double-click to jump into the 4 button states. Click on the frame for "Down" then go to the Library and drag the icon for the sound onto the Stage. In class I said you have to drop it on top of the button, but anywhere on the stage works. Don't drag the sound icon to the keyframe...it won't attach there. How do you know if it worked? In the keyframe for the Down, you will see a small blue horizontal line (it is actually a small histogram of the sound). To test, leave the editing mode by clicking on Scene 1 near the top, turn on Enable Simple Buttons from the Control menu, and try clicking on the button. Nice thing is that it will beep even if there is no action on the button. Apply the same sound to all weeks on the timeline. 

3. Using the same technique, add sounds to the forward and backward buttons. 

If you are doing this step in a campus computer lab, you may want to bring along some headphones so you can verify it all works. 

If you run into any issues, please let me know via email. Feel free to attach the .fla file to your email so I can look into the issue. 

Lab 2 Examples from the past

Note: in the past the class had to map out an entire season for one team (not just the playoffs). But I wanted to show you layout ideas and how the buttons work.

Theo's Superbowl map

Jessica's football map

Lab 1 Grade Form

I have posted the grading form for Lab 1 on Blackboard. For those of you new to my style, it is out of 50 points and you earn points for completing components of the lab assignment. I breakdown the different components into sections -- reading through those sections on the grade form before you turn in your lab is a good way to make sure you have included the pieces I'm looking for. It is *always* better to turn in a partial lab than nothing at all. I will give you as many points as I can.

Why does it have 2 identical sides? I print and cut the forms in half lengthwise to save a bit on paper (there is a method behind the madness...). If you ever have any questions please ask!!

Animation Basics and Photoshop

Today we will being our foray into geographic visualizations with a quick survey of early cartographic animation. Yes, these will seem painfully basic and slow (or will play way.too.fast) but they set the mark as to where the field began and how much progress has been made in a relatively short period of time. They will also give us the chance to discuss the core elements of map animations -- components we will be learning to craft in the next couple of labs.

We will also be fiddling with Photoshop for Lab 1. The initial plan was to do little Photoshop with some Flash mixed in but our copies of Flash have not magically appeared yet. While we wait for Flash we will be working with some satellite imagery. I will also show you a few tricks in Photoshop that can help you modify graphics for your animations during the semester (be gone pesty white box!). https://www.youtube.com/watch?v=SV38L4c4JKY

And lastly, I will discuss the metaphor of Flash so that we can jump into the program a little faster next week.

Send me your blog addresses

If you don't see your name linked in the middle of the right sidebar on this page:

-email your blog address (http://*****.blogspot.com) to jhallden@gmu.edu

-include your preferred first name

Make sure you get your first post up as well!