HOME

Teaching Online Journalism

21 examples of Flash journalism

These are interactive news packages I’ve selected to show to journalism students as we discuss some of the capabilities of Adobe Flash. Many are very recent.

1. Motion

The first thing students learn to do in Flash is animation. Although a lot of animation is merely eye candy, it can help to tell the story more effectively.

The motion in Super Stadium (2010) is window dressing, but there’s nothing wrong with that. In this segment, there’s a zoom on each level of the stadium as it flies out. In other segments, we see an alpha fade. These animation effects are easy to do on the Flash Timeline.

In Last Minutes of Flight 3407 (2009), a 3-D plane rotation illustrates what happened in the air. Other animation in this graphic traces the plane’s path on a map; the map then zooms in close to indicate where the plane went down.

An extraordinary feat of reporting: What happened: Death of Jean Charles de Menezes (2007) shows in 25 steps how London police pursued and killed an innocent man. With this level of detail, it’s essential to make sure the motion is fully accurate. The story is enhanced by inset videos taken from closed-circuit cameras throughout the city.

Manufacturing Chocolate from Seed to Sweet (2007) presents a step-by-step explanation of a process, with animations (such as milk pouring from a bottle) that are initiated by the user.

Four years ago, every winter sport appeared in these detailed animated graphics: Turin 2006 Winter Olympic Games. They offer particularly good examples of motion used strategically to explain. Even if you don’t know a word of Spanish, you can learn from watching these.

2. Button symbols

To add interactivity to a Flash graphic or animation, you’ll need to master buttons — and that means dipping into ActionScript. It’s well worth the effort, as I hope these examples will show.

The rollover buttons in Damage in Haiti (2010) cause pop-up panels to appear. It’s possible for relative beginners at Flash to create this kind of typical map effect.

Black Tides: A Timeline (2005?) offers a more complex map interface, but the circles on the world map and on the timeline bar at bottom are buttons. Not shown: A vertical stack of buttons on the left side of the graphic. (Unfortunately, the photos that used to be in this package have now all gone missing.)

The Mekong: A River and a Region Transformed (2010): This beautiful interface, integrated loosely with a map, uses a photo button and a separate text button to open a slideshow; another text button takes you to a story page with audio.

In The Debt Trap (2008), a sequence of 10 invisible buttons display information about each year in the selected decade slice — a great data graphic. (To see this segment, select Start, then go to Lifetime/Explore.)

TKTS – A House of Glass (2008) uses the Times’s standard button bar with numerals + NEXT. I think the first time they deployed this button bar was in Small Plane Hits Building in Manhattan (2006).

3. Movie clip symbols

After a student masters simple interactivity with buttons, it’s time to tackle the real power of Flash — and that means movie clips. Movie clips make possible a lot of functionality that can’t be accomplished with basic Timeline animation.

What causes earthquakes? (To see this cutaway diagram, click the second tab at the top.) The moving red arrows and the radiating circles are movie clips.

Slot machine (2009): The rolling sections inside the machine and the light on top are movie clips.

Budget Forecasts, Compared with Reality (2010): The drag slider at the bottom and the rollovers on the fever chart are movie clips.

In Scenes from a Ruined Boulevard (2010), a different kind of slider movie clip (bottom center) drags across a long panorama to show the destruction of the 2010 earthquake in Haiti. Four pop-up text panels distinguish this design from the typical 360-degree panorama.

Produced for the U.S. Library of Congress in 2001, Churchill and the Great Republic remains one of the great digital information packages (select the “Timeline” option to see this view). The way the timeline bars (lower portion of the screen) work in concert with the main display area is typical of movie clip functionality.

4. Maps and Data

Three of these examples are data-driven maps. Now you’re looking at the hard stuff — the integration of large data sets tied to dynamically generated objects.

Visualizing the U.S. Electric Grid (2009): Both of the maps above come from the same package. Users have a lot of opportunities to explore and view the data that interests them.

Haiti, territorio devastado (2010): This beautiful 3-D map of Haiti allows the user to select various kinds of information to display as overlays. (There’s also an animated cutaway that shows earthquake activity beneath the surface.)

Top: Geography of a Recession (2009) provides data for each county in the United States. Compare that with the map below it — Immigration Explorer (2009) — and you’ll see how much sense it makes to build interactive graphics that use external data sources. Once you’ve got a map like this working the first time, you can swap out the data set and tweak it to serve a wholly different story.

Gay marriage chronology (2009): This map interacts with the timeline below it to show how states have changed their laws to allow or prohibit gay marriages.

Although it’s simpler than the preceding map examples, History of Religion tells a story efficiently and clearly with the help of color and motion, with a minimum of text.

If you have other examples to suggest, I’d be happy to see the links!


Categories: data, examples, multimedia, storytelling


10 Comments

  1. Dan Mason says:

    A great list, Mindy. It also speaks volumes about the creative talent out there. Here’s to the reporters and designers who weaved this magic.

    I have a question, but first a couple of links:

    National Geographic’s ‘Inside 9/11′ is brilliant (although the outstanding, haunting intro isn’t loading on my machine today, I notice): http://bit.ly/92o4Hm

    I also greatly admire Graeme Smith’s ‘Talking to the Taliban’ for the Globe & Mail. No so much for its design polish, but for its sheer power as a piece of digital storytelling: http://bit.ly/cRWavs

    My question is: How important is it for journalism students (or upskilling journalists) to learn Flash, and what can be expected in a given teaching timeframe?

    I’m in two minds. Flash (CS4) is an essential online tool, of course. But it’s definitely not an easy application to learn or dip into.

    So while I will give an introduction to Flash during a 1/4-week training programme, usually what I do is show journalists how to ‘think Flash’ and hopefully whet the appetite of a few journalists (often production-based) who might want to put in some dedicated learning. (I mainly teach established journalists in Africa, the Middle East and eastern Europe)

    With so many highly-productive multimedia tools to juggle (and without the aid of an Audacity- or iMovie-style app for Flash), I fear Flash is just too difficult to maintain as a core skill for most working journalists.

    So should we teach Flash to all? Or focus on other tools and leave Flash to a dedicated few?

    Interested to hear the views of other educators and trainers …

  2. Thanks for the comment and the links, Dan!

    “How important is it for journalism students (or upskilling journalists) to learn Flash, and what can be expected in a given teaching timeframe?”

    Probably 95 percent of journalists should not even think about learning Flash.

    First, it does take a big investment of time before you can get stuff done with Flash. Second, if you’re not already a designer or graphic artist, the stuff you make will probably be ugly, hard to use, or both. Third, Flash is not going to help your reporting or newsgathering.

    The 5 percent of journalists who absolutely SHOULD learn Flash are the graphic reporters, the infografistas (I love that Spanish term!), the news artists. Those who create the maps, the diagrams, the charts.

    I spend 10 weeks, with 5 classroom hours per week, to teach Flash to advanced online journalism students. The syllabus is here (Flash starts in Week 6):

    http://www.macloo.com/syllabi/advancedonline/calendar.htm

    I can get a room of 20 journalists started with Flash in 4 hours, although a full-day workshop is much more useful.

    The changes in Flash with CS4 and ActionScript 3.0 make it more difficult to teach, in my opinion. But I’m working on that.

  3. [...] Teaching Online Journalism » 21 examples of Flash journalism (tags: web visualization data flash journalism) [...]

  4. [...] And there are methods which are accepted as being more useful than others. Mindy McAdam’s had an excellent illustration of wht flash graphics can add to stories, in particular [...]

  5. Tom Fid says:

    The Debt Trap example is pretty bad, because it essentially compares a stock (debt, $) with a flow (annual savings, $/yr). That’s likely to confuse people about the cumulative nature of debt and savings. I think some basic numeracy and understanding of dynamics needs to precede Flash knowledge.

  6. [...] 23, 2010 · Deixe um comentário A intrépida Mindy McAdams selecionou 21 exemplos (aquela coisa americana de números irregulares) de infografias interativas em flash, algumas bem [...]

  7. [...] Last week I posted 7 examples of exceptional Flash packages. Those seven examples indicate a range of what authoring in the Flash application makes possible. Note that I said “range” — I’d like to emphasize that it’s a pretty broad range. Then, if you’re really interested, you could have a little browse through an earlier post here, 21 examples of Flash journalism. [...]

  8. Darko says:

    I don’t think it’s ‘flash journalism’ — flash is just a technology, like Photoshop or HTML or print.

    What you’re talking about is ‘visual journalism’ or ‘multimedia journalism’ as they sometimes call it. Limiting it just to Flash (or HTML) isn’t getting to the core of it — building rich, interactive media presentations which greatly help get your message in a visually better way. (and thus, making more people get the message)

    btw, nice list!

  9. [...] some of the best examples of Flash journalism online. Let’s look at Mindy McAdams’ 21 examples of Flash journalism for a starting point. Below are some highlights of her [...]

Leave a Reply