Posted on March 10, 2010
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.
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.)
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!