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: | | | | | | |


Something amusing for the weekend
June 17, 2007, 3:53 pm
Filed under: Flash, interactive

Brought to you by Current TV.

Link via Seth in my del.icio.us network.

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: | | | | | | |

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: | | | | | |

MVPs for March
April 15, 2007, 1:23 pm
Filed under: blogging, blogs, graphics, interactive, journalism, online

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

  1. Why Al Jazeera English is blocked in the U.S.
  2. The changing skill set for journalists
  3. Multimedia for beginners
  4. Best journalism schools in the U.S.
  5. Doing blogs well at The Sydney Morning Herald, Part 2

See past MVP lists for this blog.

Technorati tags: | | | | | |

Package analysis: Explore the Human Heart
April 6, 2007, 3:00 pm
Filed under: Flash, graphics, interactive, journalism, multimedia, online, usability

This beautiful animated graphic from National Geographic provides a wonderful example of how to construct a multipart package:

Explore the Human Heart

The first thing to think about is simplicity. It’s big, it’s clear, it’s easy to read, and there’s nothing wasted on the intro screen, the entry into the package. You have exactly three choices — the one flaw is that you might be a little confused because two of the choices are available (to be clicked) twice.

Explore the Human Heart
Packages often work best with a small number of segments, or chapters. This one has two real content segments and two other features: a quiz and printable items (quite nice for schoolchildren, I would think). The real content is divided into “Healthy Heart” and “Heart Attack.”

Explore the Human Heart
Sometimes this kind of division — two things are informational and the other two are quite different — can really cause trouble for the user. In this case, the options for the printable items open inside the same viewing space as the content, so that’s no problem at all. But the quiz segment loads a new browser window (within the same window) and disrupts your experience. That’s not as bad as some packages, where they throw you out into something that doesn’t even look or feel like the same content. (In this package, you might not even notice it if you have a large screen.)

Short chunky text (good!)

When you go into either of the two content segments, you see new tabbed sections for that segment. In each case, you begin with an the overview, and you get 30-60 words of text in bold, very readable type that prepares you for the information in the segment. I suggest you compare the two blocks of text. In my view, the text on the first screen of “Heart Attack” is about 100 times better than the text on “Healthy Heart.”

In “Heart Attack” you can see how this really is a linear presentation of information — and yet the designer has cleverly provided options to prevent the user from feeling trapped in a next-next-next sequence. Not only do you have the three tabs (Overview, Blocking the Artery, and Treatment); you also have buttons on the main content to control the pace.

Again, I have to praise these folks for use of text. It’s always short, and it’s always clear and inviting. Too many packages have tiny text or an over-abundance of text — both of those are very offputting when you’re using a graphic.

Explore the Human Heart
The photographs used in the Treatment section are nice and BIG. This is great — too many information packages sadly shortchange the photos by making them too small.

There’s a scripting glitch in the “Heart Attack” segment. You should be able to click any of the three tabs at any time and go back to the start of that individual section, but if you click Overview from within a different section, that’s not what happens. This is easy to fix, but it highlights the need for QA testing on all Flash packages! You really must click all your buttons dozens of times to make sure you didn’t screw them up.

Does this really need to move (or make noise)?

Another plus for this package is the intelligent use of both animation and sound. When should something move? Does it have to move? Does motion help tell the story, or is it just a stupid addition? Ask the same questions about sound. This package has sound in exactly two sections — and in one of those (“Healthy Heart”: Pumping Action), it’s brilliant.

The “Healthy Heart” segment has four sections (Overview, Pumping Action, Inside the Heart, and Anatomy), and I think there’s another small usability problem here. On the first screen, Overview, you see a large button below the text: Continue. This is not bad — but what does it do? Where does it take you? In this case, it moves forward to a second screen that’s still part of the Overview. Turns out, the Overview has three screens. But similar buttons are used elsewhere in this package to take you to a new tabbed section — not to a screen inside the same section. This is an important distinction for an interactive designer to understand. An inconsistent result ends up confusing people, making them feel like the package is not easy to use.

Explore the Human Heart
The solution for this is already evident in several other sections: Supply numbered buttons when there are multiple “pages” within one section. That makes it completely clear to the user and raises no questions. Also, numbered buttons eliminate the user’s concern that “if I click that, maybe I can’t get back to this.” When we see a row of numbered buttons, we instantly assume the row will still be available to us after we have clicked one of the buttons.

A tiny bit of Flash goes a long way

Apart from the very high quality content (both text and images), this package also serves as a great example of how knowing a relatively small amount of Flash can allow a news organization to build fantastic interactive packages.

If you’re new to Flash, you might think I’m crazy to say that. But I know Flash, and believe me, this is so easy to do! The hard part is creating the beautiful graphics — you need a real artist to do that. But the Flash? In both “Healthy Heart” and “Heart Attack,” there is no high-level ActionScript at all. There’s nothing in those two segments except buttons, frame labels and Timeline animation.

The Flash in this package is literally covered completely in pages 45-143 of my Flash Journalism book — and not just my book, but in countless free tutorials on the Web and in dozens of other books too. No, I did NOT write this post to sell books (I only get, like, $2 if you buy one new). I’m trying to tell you that not all great Flash packages required super-amazing Flash know-how. And this package is a perfect example of that.

I’ve been learning how many newsrooms do NOT have a graphic artist on staff. When there IS a news artist, he or she is often buried in minor daily work. This is one of the things that is going to have to change, I think, if we are going to communicate journalism to the public in the future. Graphics speak effectively. They get the message across. And people like them. People like graphics not because they are easy or dumbed down but because they are CLEAR and EFFICIENT.

Go and spend five minutes with National Geographic’s heart package and find out what I mean.

(Thanks to my student Alex for finding this graphic.)

Update/Addendum: This package uses both SWFObject and SWFAddress (which handles the integral deep linking), both of which are FREE — and infinitely useful.

Technorati tags: | | | | | | |

Interactive map: Islam in Europe
April 2, 2007, 3:10 pm
Filed under: design, Flash, graphics, interactive, journalism, maps, online

This map from MSNBC.com is a great example of a clear, easy-to-understand interface. You don’t need any instructions at all to figure out how it works.

Islam in Europe

I’m a huge fan of the single-screen, no-scrolling approach. This package fits on my 1024 x 768 screen with absolutely no scrolling, and even the text blocks that open up are short enough that no scrollbars are required. That is writing for the Web at its most savvy. Plus, the whole package loads like lightning.

What’s missing? A date. When was this package last updated? How current are these numbers? That’s the only flaw.

Taking it to the next level: Hook this graphic up to the live news database and show us, when we click on an individual country, the latest stories that mention BOTH that country and either Islam or Muslim. And offer an RSS alert too, while you’re at it.

Technorati tags: | | | | | | | |