Teaching Examples

Your very first Flash package
June 28, 2007, 2:11 pm
Filed under: Flash, graphics, interactive, journalism, photojournalism, tools

It takes me eight weeks to teach Flash to undergraduate journalism students. That’s starting from zero. If they do all the homework and study all the examples, they can be very good at the end of eight weeks. Mostly it takes time and dedication, rather than any special talent or computer aptitude.

When I do training for professional journalists, I don’t have eight weeks. So I always face this dilemma: Do I begin at zero, and just get them started? Or do I begin at a later point, assuming they already know certain things? (Usually I have only three to four hours in a training session!)

The trouble with running a beginner session: At the end, the attendees still can’t really make anything on their own. The trouble with running an intermediate session: Too many people in the room don’t yet understand some of the key techniques.

Yesterday I did half a day of Flash training at a newspaper, and I developed a new teaching tool for the occasion. It’s called Simple Flash Project: Single SWF and the point is for you, the student, to download the FLA and use it as a learning tool. (Go ahead, look at the SWF and then download the FLA.)

I deliberately built the SWF to leave out everything that I consider “post-beginner” in Flash authoring. So it includes NO MOVIE CLIPS. No scenes. No externally loaded assets of any kind. It also includes nothing that was drawn — the graphics are all photos.

There are three separate segments, as any news graphic might have. The SWF is only 73 KB. The entire Timeline is 80 frames long.

There are three different animations, using photographs.

Most important, there are buttons and frame labels. You’ve got to have those if you are going to create separate parts in the package. People often ask me, “How to you make it skip from one section to another?” Buttons and frame labels. That’s how.

Here’s a list of beginner Flash journalism skills. These are the skills you have to nail down before you can build a journalism package.

  1. Simple animation, both tweened and frame-by-frame (Graphic symbols)
  2. Importing photos and other bitmaps
  3. Use of layers
  4. Use of keyframes
  5. Buttons — both making them and scripting them (Button symbols)
  6. Use of frame labels
  7. ActionScript: stop();
  8. ActionScript: gotoAndPlay(“framelabel”);

Now, I will be the very first to admit that not everyone in the newsroom needs to learn Flash. But somebody in your newsroom should learn it! Ideally, I would say that all your news graphic artists should know everything listed above. Then, also ideally, there should be one person — artist, photojournalist, online producer — who goes beyond the list and learns how to develop more sophisticated interactive graphics.

Technorati tags: | | | | | | |


Interactive graphic: Wealth calculator
June 11, 2007, 11:48 am
Filed under: data, graphics, interactive, journalism

I don’t use the word “interactive” carelessly. (Most things that people typically call interactive are not one bit interactive. Video games are interactive. Newspaper Web sites? Not!)

Wealth Calculator from The New York Times
With all the journalists chattering about Adrian Holovaty these days, some are feeling that they must transform themselves into programmers to compete in the 21st century. I’m not convinced that we need to clone Adrian (although having more like him couldn’t hurt).

I offer you this example as a starting point for 21st century thinking about journalism: The New York Times’s Interactive Wealth Calculator. (Adrian was not involved!)

The “programmer” is only one part of this excellent production.

The database design is vital to its success. Not all “programmers” know how to design a database properly. Many database designers would not know how to program this for the Web. (I have learned a lot from the non-software-specific book Database Design for Mere Mortals.)

The graphic design — the interaction design — make this project usable, clear, and fun to play with. Note too that the accuracy of the project depends on having a well-trained graphic designer — and not just someone who knows how to “make a Web page” or “animate in Flash.” If this concept is new to you, go to the library and check out Edward Tufte’s classic book Envisioning Information (or buy it).

The journalism know-how makes it accurate and reliable (click the Source Information link at bottom left in the graphic). Go ahead, try sending your programmer out to bring back reliable, up-to-date population statistics. I dare you! (See Mark Hartnett’s take on this. Matt Waite shows us how to tackle a mapping challenge.)

When Adrian designed and produced his famous Chicagocrime.org site, he collaborated with a skilled and talented Web designer, Wilson Miner, to make the thing work visually.

In my experience, far too many editors, publishers, news directors — and even trainers and educators — fail to understand the roles and skill sets that are part of the production of a real interactive journalism project.

All this fussing about “programmers” won’t get you anywhere if you don’t have savvy, professional information designers working hand-in-hand with your Django and PHP and Ajax and MySQL wizards.

Technorati tags: | | | | | | |

Compact package combines video and infographics
May 29, 2007, 12:37 pm
Filed under: animation, graphics, journalism, multimedia, video

A nice story-as-graphic from USA Today:

The future of car safety is avoiding crashes

Yeah, I know, it doesn’t sound sexy. But it incorporates video and informative animations and text in a classy, clean layout, and it’s nice and big — but not TOO big. The three tabs at the top organize the story neatly.

Technorati tags: | | | |

Disappearing multimedia: This is nuts
May 27, 2007, 3:50 pm
Filed under: graphics, journalism, multimedia, news, usability

Deadly Rampage at Virginia Tech
You have eight talented journalists working for hours under deadline pressure. They produce one of the best-ever examples of online storytelling. You post it on your Web site. You link it very prominently to the related stories. You feature it in the printed newspaper. And rightly so! It is a great achievement. It is a work worthy of study and appreciation long after the news event dims in memory.

For heaven’s sake, give the thing a permanent URL. What the heck is the matter with you people?!

I have Times Select, the paid premium service that provides access to The New York Times archives, video, etc. I’m not asking to get something for free. But you can’t even bookmark this graphic. I have tried everything. And you can’t properly search for it. Just try. NYT Multimedia search (only videos and slideshows come up). Archives search (only text stories).

You can search for “Deadly Rampage at Virginia Tech”; “Viginia Tech shootings”; “Virginia Tech graphic” — all useless. You can bookmark http://www.nytimes.com/2007/04/17/us/20070417 _SHOOTING_GRAPHIC.html — but it will take you to an April 17 column called “The TV Watch.” And if you bookmark the full URL (including all the numeric garbage following .html), it will work for about 24 hours and then revert to “The TV Watch.”

So the only solution I have found, so far, is to go to this omnibus page about the shootings, scroll down to where you read “INTERACTIVE GRAPHIC: Recounting the Events at Virginia Tech,” and click that.

Doesn’t The New York Times understand bookmarking? People like to bookmark things. They like to e-mail links to their friends and work colleagues. This is Online Usability 101, folks: Use permanent URLs.

Technorati tags: | | |

Visual literacy in multimedia journalism
May 25, 2007, 2:43 pm
Filed under: education, graphics, ideas, storytelling

Building on my earlier post: How do we tell stories visually?

Let me begin with still photos. I know that many photographers like to put up a photo as a stand-alone, a work that answers to itself. In an art gallery, I can appreciate that. But it’s not a story, any more than a painting is a story all by itself. There’s a story in it, but it’s not told by the image alone. (You can infer a story from a single image, but that’s usually as far as it can go.)

Move on to the photo story, an established story form in journalism (Kenneth Kobré traces its origin to Life magazine in 1936 and the form we know today to 1948). Page layout contributes much to the print photo story, but it must also have words. Not necessarily a lot of words — but it’s just not a story if we don’t understand what’s going on in the images.

I’d like to ask you to think about comic strips, comic books, manga and graphic novels. In their more detailed sequences (more detailed, that is, than a photo story), they do occasionally tell a complete story without using any words at all. But only occasionally. (Manga do this especially well.)

My point: It’s hard to tell a story without words. The visuals do a lot of the work in storytelling, but rarely can they carry the full weight of the story without help.

When we add motion, however, some of our reliance on words can be eliminated.

I was thinking about this last night as I watched Martin Scorsese’s The Departed. The early scenes are so short, with so few words — it’s the kind of opening that leaves you totally lost when you’re a kid. (You ask your parents, “What’s happening?” and they say “Shh!”) But as you learn the grammar of film, you get more out of such terse scenes.

Then I went back to the list of seven visualization types (sketches, diagrams, images, maps, objects, interactive visualizations, stories) and started mulling over each one of them. I was thinking, for example, “When is an interactive visualization not a story?” I was thinking, “Doesn’t a diagram tell a story?”

That’s when I arrived at this idea about completeness, or fullness, of a story. Go back to a single photograph, alone on a wall, without any caption. There’s probably a story there. But I don’t know what it is.

This brings me to maps. A map alone doesn’t tell a story. Some words are needed. But an animated map can tell a story — with very few words, or maybe no words at all.

A chart or graph can tell a story with very few words. An animated graphic can sometimes tell the story more effectively. Why? It leads you through a sequence of events (Update: That link needed to be replaced). It begins with a small amount of information and builds on that. It can end with an obvious climactic event (such as a steep plunge in the stock market, or a large increase in toxic gases) that illustrates a result, a conclusion. (Learn more from one of the great online infografistas, Alberto Cairo, in an OJR interview.)

I arrived at some questions we can ask when we are planning to tell a story:

  1. Can I use any kind of images or graphics to tell this story?
  2. Can motion help tell this story? Does any kind of motion — in space, or in time — play a part in the story?
  3. How many words are really necessary? (Let’s cut out as many words as possible without losing clarity.)

Do not underestimate the role of motion in visual storytelling. Do not overestimate the role of words, whether in text or in audio.

Let’s work on editing our multimedia the way we edit a text story: Omit unnecessary words. Get to the point. If establishing a mood or a scene helps advance the story, then do it. Anything that doesn’t contribute to the actual story you’re telling right now — cut it out.

Technorati tags: | | | | | |

Visual literacy: Do you have it?
May 25, 2007, 4:27 am
Filed under: education, graphics, ideas, storytelling

There are seven visualization types, according to a demo tutorial at the Visual-Literacy.org e-learning course:

  1. Sketches
  2. Diagrams
  3. Images
  4. Maps
  5. Objects
  6. Interactive visualizations
  7. Stories

I found this interesting because I am fond of telling people there are five online media types:

  1. Text
  2. Photos
  3. Graphics
  4. Audio
  5. Video
  6. User interaction

(Yes, I know that’s six, but user interaction might include any or all of the others, while any of the others might exist without any significant interaction. So, um, call it five plus one.)

From my point of view, graphics can be either animated or static. Video and animation are not in the same class, as I see it. Neither do video and still photography overlap — you might disagree, but I find them to be opposites. Video is moving and alive, immersive, fluid; photography is a way of freezing the world, stopping time, making us appreciate a single instant that otherwise we might never see.

As I continued poking around at Visual-Literacy.org, I found a Breeze presentation (how I hate those!) in which a lecturer listed six “static” visualization fields:

  1. Art
  2. Advertising
  3. Graphic design
  4. Visual communication
  5. Information design
  6. Film

He went on later to list “interactive” visualization fields:

  1. Interaction design
  2. Game design
  3. Geographic Information Systems (GIS)
  4. Medical visualization
  5. Scientific visualization
  6. Computer graphics
  7. Information visualization
  8. Human-computer interaction (HCI)
  9. Virtual reality
  10. Augmented reality
  11. Storytelling
  12. Knowledge visualization

As you might imagine, the presentation degraded after this list. Having two lists is one thing, and not a bad idea. Having 12 things on one list is not going to help people learn very well. (Talk about a need for good information design!)

In an online text called Literacy in the Digital Age, I found this —

Students who are visually literate:

1. Have working knowledge of visuals produced or displayed through electronic media

  • Understand basic elements of visual design, technique, and media.
  • Are aware of emotional, psychological, physiological, and cognitive influences in perceptions of visuals.
  • Comprehend representational, explanatory, abstract, and symbolic images.

2. Apply knowledge of visuals in electronic media

  • Are informed viewers, critics, and consumers of visual information.
  • Are knowledgeable designers, composers, and producers of visual information.
  • Are effective visual communicators.
  • Are expressive, innovative visual thinkers and successful problem-solvers.

If you’re wondering where all this is leading — so am I. But I can tell you, it’s those last three I’m very concerned about. I think the college students I see every day are pretty savvy visual consumers, but they’re not the producers I’d like them to be. They can stick things on a MySpace page, but they can’t necessarily conceive and execute a visual project. They write, but they don’t sketch.

You may want to tell me this is my job — as a journalism educator, I need to get them up to speed on this visual stuff. I won’t say you’re wrong. But they can’t even sketch.

I have no solutions yet. I’m thinking about it. Any ideas?

Technorati tags: | | |

MVPs for April
May 15, 2007, 3:31 am
Filed under: blogging, blogs, graphics, interactive, journalism, online

Most visited posts on this blog from April 1 through May 1, according to Google Analytics and FeedBurner:

  1. What a hiring editor looks for (or, what’s your URL?)
  2. Why Al Jazeera English is blocked in the U.S.
  3. Allan Detrich resigns after photo fallout
  4. Best journalism schools in the U.S.
  5. HD video frame grabs for Page One

See past MVP lists for this blog.

Technorati tags: | | | | | |