Multimedia and interactive guides to the U.S. Supreme Court
Tuesday, May 26, 2009
With President Barack Obama's recent nomination of Judge Sonia Sotomayor for appointment to the U.S. Supreme Court, many are left wondering who are the justices and what exactly it is the Supreme Court. Thanks to the internet, the inner workings of the Court can be explained visually, bringing to life the centuries-old government institution.
In response to news of the nomination, Congressional Quarterly has detailed the sometimes lengthy nomination process in an easy to use interactive bar chart. The stages of each nominee's confirmation are lined up side-by-side to give the user an idea of the complicated process.
Congressional Quarterly also has a compelling slideshow of the history of Supreme Court nominees that is worth a look. Other news media that have taken the online slideshow approach include the Huffington Post, which showcases photos of Sotomayor's childhood and family, and Pinko Magazine, which, in a more humorous approach, selects the top 13 television judges Obama should have nominated to the vacant seat.
Earlier this month, the New York Times asked its online readers who they thought should be President Obama's pick for the court. Visitors were presented with an interactive graphic that contained bios of possible candidates. Readers overwhelmingly chose Sotomayor to replace Justice David Souter after his retirement.
Back in 2005, the Times published a comprehensive interactive graphic of major court decisions and the judges that presided over them that is still relevant today. The information is sortable by year or by issue.
PBS has a wealth of online information about the Supreme Court itself, including a video series that traces the history of the Court back to the early 1800s and a text-based timeline that reviews some of the major court cases. The site also hosts an interactive quiz that questions visitors on the Supreme Court cases that affect our daily lives.
CNN has an entire multimedia package devoted to the Supreme Court and Sotomayor's nomination, including videos, timelines and a photo of gallery of the eight remaining justices. HowStuffWorks also has several videos that detail the history of the Court.
With all this talk about the inner workings of the Supreme Court, wouldn't it be better to just to see it for yourself? The Oyez Project, the go-to online resource for all things SCOTUS-related, has virtual tours of the Supreme Court building, the courtroom and the justices' chambers. The 360° panoramic images are made possible by the internet and are an invaluable inside look that in the pre-internet age could only be described with text.
Also on 10,000 Words:
• How to invigorate boring courtroom sketches
• Post-Inauguration Wrap Up: High-tech coverage of the tech president
• 15 Ways to follow the 2008 election online
• 7 Eye-popping interactive timelines (and 3 ways to create one)
In response to news of the nomination, Congressional Quarterly has detailed the sometimes lengthy nomination process in an easy to use interactive bar chart. The stages of each nominee's confirmation are lined up side-by-side to give the user an idea of the complicated process.
Congressional Quarterly also has a compelling slideshow of the history of Supreme Court nominees that is worth a look. Other news media that have taken the online slideshow approach include the Huffington Post, which showcases photos of Sotomayor's childhood and family, and Pinko Magazine, which, in a more humorous approach, selects the top 13 television judges Obama should have nominated to the vacant seat.
Earlier this month, the New York Times asked its online readers who they thought should be President Obama's pick for the court. Visitors were presented with an interactive graphic that contained bios of possible candidates. Readers overwhelmingly chose Sotomayor to replace Justice David Souter after his retirement.
Back in 2005, the Times published a comprehensive interactive graphic of major court decisions and the judges that presided over them that is still relevant today. The information is sortable by year or by issue.
PBS has a wealth of online information about the Supreme Court itself, including a video series that traces the history of the Court back to the early 1800s and a text-based timeline that reviews some of the major court cases. The site also hosts an interactive quiz that questions visitors on the Supreme Court cases that affect our daily lives.
CNN has an entire multimedia package devoted to the Supreme Court and Sotomayor's nomination, including videos, timelines and a photo of gallery of the eight remaining justices. HowStuffWorks also has several videos that detail the history of the Court.
With all this talk about the inner workings of the Supreme Court, wouldn't it be better to just to see it for yourself? The Oyez Project, the go-to online resource for all things SCOTUS-related, has virtual tours of the Supreme Court building, the courtroom and the justices' chambers. The 360° panoramic images are made possible by the internet and are an invaluable inside look that in the pre-internet age could only be described with text.
Also on 10,000 Words:
• How to invigorate boring courtroom sketches
• Post-Inauguration Wrap Up: High-tech coverage of the tech president
• 15 Ways to follow the 2008 election online
• 7 Eye-popping interactive timelines (and 3 ways to create one)
New York City, a mecca of multimedia journalism
Thursday, May 07, 2009
New York City...center of the universe. Okay not quite, but there are a lot of great multimedia stories and interactive projects emerging from the City that Never Sleeps.
There is perhaps no better way to take in the many landmarks of Manhattan than an aerial tour of the area. In today's economy, a helicopter ride perhaps isn't the most efficient means of transportation, but thanks to Pixelcase you can still take in magnificent views of the city. The interactive, panoramic photographs let users zoom across the New York skyline, above the noise and traffic. More on how to create similar panoramas here and here.
The following map of a horizonless Manhattan has been circulating around the internet for good reason: it is a unique take on the flat map we are so used to seeing. The map, created by London design studio Schulze & Webb, was created and fine-tuned using 3D imaging software.
The City Concealed, a project of THIRTEEN, explores some of the hidden gems of New York City through a series of online videos. Offbeat locales such as the tombs and catacombs of Green-Wood Cemetery and Brooklyn Navy Yard — places likely overlooked by even native New Yorkers — are profiled. (Link courtesy of @fgeorge)
While the sights and sounds of NYC are fascinating, it is the city's more than 8 million residents that bring it to life. Tough Times, a project created by students at the Columbia University Graduate School of Journalism, uses a combination of print stories, Flash, audio slideshows and video to tell the stories of New Yorkers struggling with the current economic crisis.
For example, the harrowing story of Maisha Morales, a single mother from Brooklyn, is detailed in a print story, but her raw emotion emerges from the accompanying video. A thoughtful analysis of Morales' situation is explained in an easy-to-navigate Flash infographic.
Local publication amNY also has a comprehensive collection of interactive photo slideshows and video, including "Young and Muslim in NYC," a series of video interviews complemented by traditional print stories.
Of course, one cannot discuss multimedia in New York City without mentioning the New York Times. The new media powerhouse is known for its captivating projects that explore global and national issues, but some of its most intriguing are those that focus on the city itself.
One such example is One in 8 Million, a series of audio slideshows that explore the lives of average New Yorkers. Stories include those of Melissa Dixson, a painter turned taxidermist and Christian Hubert, a bicyclist who suffers from vertigo.
The project is reminiscent of the Going to the End of the Line photo story featured in this post. The project focused on stations at the end of train lines where most commuters never venture.
The Water Dance, another photo slideshow from the New York Times, takes a simple, often overlooked moment and visualizes it as a metaphor for humanity. The result is one of the most captivating multimedia pieces to emerge this year.
One point should remain clear: While New York attracts creative minds from all over the world, the city does not have a monopoly on multimedia journalism. Large papers like the New York Times may have vast resources, but compelling multimedia projects can be created by anyone anywhere.
Have a multimedia story or project you're proud of? Share it in the comments and it just might be featured here on 10,000 Words.
Also on 10,000 Words:
• Multimedia: Chicago, in Color
• Innovative multimedia centered on the ordinary and everyday
• Exploring the human body through multimedia
• Great online journalism from non-traditional journalists
• Museums as Inspiration: Museum of Modern Art
There is perhaps no better way to take in the many landmarks of Manhattan than an aerial tour of the area. In today's economy, a helicopter ride perhaps isn't the most efficient means of transportation, but thanks to Pixelcase you can still take in magnificent views of the city. The interactive, panoramic photographs let users zoom across the New York skyline, above the noise and traffic. More on how to create similar panoramas here and here.
The following map of a horizonless Manhattan has been circulating around the internet for good reason: it is a unique take on the flat map we are so used to seeing. The map, created by London design studio Schulze & Webb, was created and fine-tuned using 3D imaging software.
The City Concealed, a project of THIRTEEN, explores some of the hidden gems of New York City through a series of online videos. Offbeat locales such as the tombs and catacombs of Green-Wood Cemetery and Brooklyn Navy Yard — places likely overlooked by even native New Yorkers — are profiled. (Link courtesy of @fgeorge)
While the sights and sounds of NYC are fascinating, it is the city's more than 8 million residents that bring it to life. Tough Times, a project created by students at the Columbia University Graduate School of Journalism, uses a combination of print stories, Flash, audio slideshows and video to tell the stories of New Yorkers struggling with the current economic crisis.
For example, the harrowing story of Maisha Morales, a single mother from Brooklyn, is detailed in a print story, but her raw emotion emerges from the accompanying video. A thoughtful analysis of Morales' situation is explained in an easy-to-navigate Flash infographic.
Local publication amNY also has a comprehensive collection of interactive photo slideshows and video, including "Young and Muslim in NYC," a series of video interviews complemented by traditional print stories.
Of course, one cannot discuss multimedia in New York City without mentioning the New York Times. The new media powerhouse is known for its captivating projects that explore global and national issues, but some of its most intriguing are those that focus on the city itself.
One such example is One in 8 Million, a series of audio slideshows that explore the lives of average New Yorkers. Stories include those of Melissa Dixson, a painter turned taxidermist and Christian Hubert, a bicyclist who suffers from vertigo.
The project is reminiscent of the Going to the End of the Line photo story featured in this post. The project focused on stations at the end of train lines where most commuters never venture.
The Water Dance, another photo slideshow from the New York Times, takes a simple, often overlooked moment and visualizes it as a metaphor for humanity. The result is one of the most captivating multimedia pieces to emerge this year.
One point should remain clear: While New York attracts creative minds from all over the world, the city does not have a monopoly on multimedia journalism. Large papers like the New York Times may have vast resources, but compelling multimedia projects can be created by anyone anywhere.
Have a multimedia story or project you're proud of? Share it in the comments and it just might be featured here on 10,000 Words.
Also on 10,000 Words:
• Multimedia: Chicago, in Color
• Innovative multimedia centered on the ordinary and everyday
• Exploring the human body through multimedia
• Great online journalism from non-traditional journalists
• Museums as Inspiration: Museum of Modern Art
Do you have a multimedia emergency plan?
Wednesday, April 08, 2009
A news story that will make national or international headlines is breaking. Quick...what do you do? If you don't have already have a game plan for how to report a crisis online, now's the time to start making preemptive plans. Most newsrooms already have reporters to turn to for print stories and broadcast news coverage, but here are few multimedia components to consider so the internet audience is informed as well.
Maps
The first multimedia component that should be added to a breaking news story is a map that shows exactly where the incident occurred. This can be as simple as a computer-generated map created with Illustrator or mapping software, like the one included in this BBC News story to illustrate where Burma and its 2007 protests took place. Or it could be an uncomplicated Google Map like the one adjacent to a Record story on a bear attack.
Interactive Google map mashups can be created fairly quickly with a number of online programs, the easiest of which is likely FM Atlas. Addresses and locations can be plotted on a map and made ready to embed within minutes. Just be sure to verify the location before posting it online to avoid the Georgia/Georgia screwups that happened last year.
Flash animation/timeline
If a major catastrophe occurs, people want to know how it happened. A very basic interactive graphic or even a flat infographic should be built to better internet readers understanding of the crisis. Examples include washingtonpost.com's interactive explanation of the 2007 Minneapolis bridge collapse and the Press & Sun Bulletin's illustration of last week's Binghamton shooting. Flash graphics can be overwrought and complicated if you allow them to be, but sometimes it just takes a simple illustration to communicate a story. The interactive can be embellished later when time is less of a factor.
Audio slideshow
As disasters occur, telling photos come streaming in from staff photographers or from wire services. Creating an audio slideshow that combines these photos with raw or edited audio collected by field reporters is a fast way to showcase both the story and the emotion behind it. Also, interactive slideshows are often the most popular stories on any news site.
A simple slideshow, with or without audio, can be created using a pre-existing template or with slideshow maker Soundslides. Examples include Reuters' slideshow of reporter David Gray's response to the 2008 Sichuan earthquake and its recent encapsulation of the Italian earthquake.
Resources
Once readers are informed of how a disaster happened, it's up the news outlet to provide resources to victims and their families. Post-Hurricane Katrina, MSNBC put together message boards and useful links, as well as comprehensive list of ways readers could donate to relief efforts. In the midst of the fires that raged through California, the Los Angeles Times created a Google map of evacuation centers that showed exactly where victims could go for help.
Landing page
Most importantly, all the print stories, multimedia, interactive graphics and blog posts should be aggregated on one page to serve as a single destination for those looking for information related to the crisis. Not only does a landing page make content easily accessible but it makes the hunt for the latest news less of a struggle when time may be a factor.
Also on 10,000 Words
• 5 Ways to create a Google Map in minutes
• How to save time when using Flash
• How the internet is changing how natural disasters are covered
• Landmark moments in citizen journalism
• 7 Eye-popping interactive timelines (and 3 ways to create one)
• How to quickly track natural disasters online
Maps
The first multimedia component that should be added to a breaking news story is a map that shows exactly where the incident occurred. This can be as simple as a computer-generated map created with Illustrator or mapping software, like the one included in this BBC News story to illustrate where Burma and its 2007 protests took place. Or it could be an uncomplicated Google Map like the one adjacent to a Record story on a bear attack.
Interactive Google map mashups can be created fairly quickly with a number of online programs, the easiest of which is likely FM Atlas. Addresses and locations can be plotted on a map and made ready to embed within minutes. Just be sure to verify the location before posting it online to avoid the Georgia/Georgia screwups that happened last year.
Flash animation/timeline
If a major catastrophe occurs, people want to know how it happened. A very basic interactive graphic or even a flat infographic should be built to better internet readers understanding of the crisis. Examples include washingtonpost.com's interactive explanation of the 2007 Minneapolis bridge collapse and the Press & Sun Bulletin's illustration of last week's Binghamton shooting. Flash graphics can be overwrought and complicated if you allow them to be, but sometimes it just takes a simple illustration to communicate a story. The interactive can be embellished later when time is less of a factor.
Audio slideshow
As disasters occur, telling photos come streaming in from staff photographers or from wire services. Creating an audio slideshow that combines these photos with raw or edited audio collected by field reporters is a fast way to showcase both the story and the emotion behind it. Also, interactive slideshows are often the most popular stories on any news site.
A simple slideshow, with or without audio, can be created using a pre-existing template or with slideshow maker Soundslides. Examples include Reuters' slideshow of reporter David Gray's response to the 2008 Sichuan earthquake and its recent encapsulation of the Italian earthquake.
Resources
Once readers are informed of how a disaster happened, it's up the news outlet to provide resources to victims and their families. Post-Hurricane Katrina, MSNBC put together message boards and useful links, as well as comprehensive list of ways readers could donate to relief efforts. In the midst of the fires that raged through California, the Los Angeles Times created a Google map of evacuation centers that showed exactly where victims could go for help.
Landing page
Most importantly, all the print stories, multimedia, interactive graphics and blog posts should be aggregated on one page to serve as a single destination for those looking for information related to the crisis. Not only does a landing page make content easily accessible but it makes the hunt for the latest news less of a struggle when time may be a factor.
Also on 10,000 Words
• 5 Ways to create a Google Map in minutes
• How to save time when using Flash
• How the internet is changing how natural disasters are covered
• Landmark moments in citizen journalism
• 7 Eye-popping interactive timelines (and 3 ways to create one)
• How to quickly track natural disasters online
Labels: audio, flash, maps, photos, site management
The Typography of East Hollywood
Thursday, March 19, 2009
I'm not sure if it's just an L.A. thing but many apartments in the city are given alluring names which are spelled out in beautiful type on the front of the building. The signage is easy to overlook, but when viewed as a group is pretty inspiring. In an ode to my now former neighborhood of East Hollywood/Little Armenia, here is some of the typography that adorns the area.
You can also check out the photos on Flickr. The slideshow was built in Flash; for the template email info@10000words.net or send a tweet to @10000Words.
Also on 10,000 Words
• 7 Fonts that should die
• The Typography of 'Milk'
• DVD design: Great menus are great inspiration (Part I)
You can also check out the photos on Flickr. The slideshow was built in Flash; for the template email info@10000words.net or send a tweet to @10000Words.
Also on 10,000 Words
• 7 Fonts that should die
• The Typography of 'Milk'
• DVD design: Great menus are great inspiration (Part I)
Visual and interactive guides to the economic crisis
Monday, March 02, 2009
As the economy continues to take a turn for the worse, many media organization and citizen journalists are finding creative and innovative ways to explain the complex factors that contribute to the slump.
USA Today uses a Flash-based map to compare homeowners who took on large amounts of debt to purchase a new home in 2000 versus 2007. Viewers of the interactive project can use a scrubber to toggle between the two years and make direct comparisons.
The New York Times also uses a scrubber to illustrate the ups and downs (but mostly downs) of the nation's stocks and commodities in 2008. Along with facts and figures, the interactive also provides a chilling narrative that explains the dwindling numbers.
Nothing's scarier than a sea of red, whether it's tons of edits scribbled in red ink or an indicator of a declining stock market. The S&P 500 Heatmap is a visual representation of the stock index that more cleverly illustrates just how bad things are.
MapLib takes the stock market/mapping idea in another direction with its Google Maps mashup of the world's financial centers. Bad news is it's red all over the world.
CNN has blended video of the everyday people who have been affected by the economic downturn with an interactive map of the unemployment rates, job losses and foreclosure rates in each of the 50 states. The project puts a face on what otherwise would be a series of sobering numbers.
The Crisis of Credit Visualised by Johnathan Jarvis is a unique video that explains one cause of economic woes through motion typography and animation. And because even a global financial meltdown sounds great when put to song, "Mortgage Crisis Blues" aural interpretation of why many homeowners found themselves in more debt than they could afford is depressing, yet catchy.
The New York Times asks "Has your portfolio plummeted? So has ours." It would be funny if it wasn't both serious and true. Nevertheless, the Times' "Calculate Your Financial Comeback" lets users input a set of variables, including current portfolio value, to determine how long it will take to recover from financial lows. The time span can be either heartbreaking or optimistic, depending on the answer returned.
Also on 10,000 Words
•Exploring the human body through multimedia
•8 Ways of visualizing the news
•Where to find the best in Flash journalism
USA Today uses a Flash-based map to compare homeowners who took on large amounts of debt to purchase a new home in 2000 versus 2007. Viewers of the interactive project can use a scrubber to toggle between the two years and make direct comparisons.
The New York Times also uses a scrubber to illustrate the ups and downs (but mostly downs) of the nation's stocks and commodities in 2008. Along with facts and figures, the interactive also provides a chilling narrative that explains the dwindling numbers.
Nothing's scarier than a sea of red, whether it's tons of edits scribbled in red ink or an indicator of a declining stock market. The S&P 500 Heatmap is a visual representation of the stock index that more cleverly illustrates just how bad things are.
MapLib takes the stock market/mapping idea in another direction with its Google Maps mashup of the world's financial centers. Bad news is it's red all over the world.
CNN has blended video of the everyday people who have been affected by the economic downturn with an interactive map of the unemployment rates, job losses and foreclosure rates in each of the 50 states. The project puts a face on what otherwise would be a series of sobering numbers.
The Crisis of Credit Visualised by Johnathan Jarvis is a unique video that explains one cause of economic woes through motion typography and animation. And because even a global financial meltdown sounds great when put to song, "Mortgage Crisis Blues" aural interpretation of why many homeowners found themselves in more debt than they could afford is depressing, yet catchy.
The New York Times asks "Has your portfolio plummeted? So has ours." It would be funny if it wasn't both serious and true. Nevertheless, the Times' "Calculate Your Financial Comeback" lets users input a set of variables, including current portfolio value, to determine how long it will take to recover from financial lows. The time span can be either heartbreaking or optimistic, depending on the answer returned.
Also on 10,000 Words
•Exploring the human body through multimedia
•8 Ways of visualizing the news
•Where to find the best in Flash journalism
Multimedia... but why?
Monday, February 09, 2009
I was browsing through last month's issue of Complex magazine when I stopped at a timeline of the history of Calvin Klein.
"They should have made that into a multimedia presentation," I thought. I then paused and asked myself why. Why would this already nicely designed infographic need the interactive treatment?
The short answer: to attract more viewers and stand out in a sea of online graphics.
There are so many sources of news in the crowded online market that making print articles available online is enough to attract a substantial readership, but not enough to stand out from the crowd. Considering many web readers skim content rather than read it, interactive and multimedia news stories force users to interact with the content rather than passively consume it.
In addition, a good interactive story can yield thousands of Diggs and Stumbles, hundreds of mentions on Twitter and other social networks, and a slew of saves on social bookmarking sites like delicious, which in turn means hundreds of thousands, if not millions, of visitors. All that is worth the extra man hours if it means higher page views which also translates to, for those concerned with the business side of journalism, greater revenue.
A nice multimedia presentation doesn't even have to be a complex database like those created by the New York Times. Popular Mechanics' interactive map of proposed North American high-speed train projects could have been a simple infographic, but its interactive Flash graphic was Dugg more than 1,700 times, bookmarked on delicious by more than 60 different users and was Stumbled a gajillion times.
In the same vein, the Associated Press' relatively simple interactive graph of the 2008 U.S. Presidential candidates' fundraising receipts was Dugg 545 times and Portfolio.com (which is already a great source of Flash journalism) created a simple six-slide slideshow on the "World's Most Worthless Money" was Dugg a whopping 1,045 times.
What these interactive graphics all have in common is they are simple but compelling ideas that are presented in an interesting way. One could argue that the examples illustrate their respective issues better than they would be with plain text or a flat graphic. Web users are spending more and more time online and are better served with content that piques their interest rather than puts them to sleep.
In the end, the most important thing is that interactive news stories encourage the reader to walk away with a greater understanding of the concept presented before them and encourage a larger audience to do so. After all isn't the point of journalism to spread the news to as many people as possible?
Also on 10,000 Words:
• Online news games are fun (and informative!)
• Where to find the best in Flash journalism
• Eyetrack studies: What we've learned and how to conduct your own
"They should have made that into a multimedia presentation," I thought. I then paused and asked myself why. Why would this already nicely designed infographic need the interactive treatment?
The short answer: to attract more viewers and stand out in a sea of online graphics.
There are so many sources of news in the crowded online market that making print articles available online is enough to attract a substantial readership, but not enough to stand out from the crowd. Considering many web readers skim content rather than read it, interactive and multimedia news stories force users to interact with the content rather than passively consume it.
In addition, a good interactive story can yield thousands of Diggs and Stumbles, hundreds of mentions on Twitter and other social networks, and a slew of saves on social bookmarking sites like delicious, which in turn means hundreds of thousands, if not millions, of visitors. All that is worth the extra man hours if it means higher page views which also translates to, for those concerned with the business side of journalism, greater revenue.
A nice multimedia presentation doesn't even have to be a complex database like those created by the New York Times. Popular Mechanics' interactive map of proposed North American high-speed train projects could have been a simple infographic, but its interactive Flash graphic was Dugg more than 1,700 times, bookmarked on delicious by more than 60 different users and was Stumbled a gajillion times.
In the same vein, the Associated Press' relatively simple interactive graph of the 2008 U.S. Presidential candidates' fundraising receipts was Dugg 545 times and Portfolio.com (which is already a great source of Flash journalism) created a simple six-slide slideshow on the "World's Most Worthless Money" was Dugg a whopping 1,045 times.
What these interactive graphics all have in common is they are simple but compelling ideas that are presented in an interesting way. One could argue that the examples illustrate their respective issues better than they would be with plain text or a flat graphic. Web users are spending more and more time online and are better served with content that piques their interest rather than puts them to sleep.
In the end, the most important thing is that interactive news stories encourage the reader to walk away with a greater understanding of the concept presented before them and encourage a larger audience to do so. After all isn't the point of journalism to spread the news to as many people as possible?
Also on 10,000 Words:
• Online news games are fun (and informative!)
• Where to find the best in Flash journalism
• Eyetrack studies: What we've learned and how to conduct your own
Labels: flash, news on the news, social networking
8 Interactive online projects that educate and captivate
Monday, January 19, 2009Obama's Team
Sure you could read the in-depth reports or watch the tiresome press conferences to find out more about Barack Obama's cabinet team members. Or you can just use the interactive infographic from Spiegel Online that uses a carousel menu to illustrate the President-elect's political circle (learn how to create a similar effect here). The text is in German, but you don't have to speak the language to understand how engaging this project is.
Going to the End of the Line
Anyone who was ever lived or visited New York will recognize areas like Canarsie and Far Rockaway as a sort of a mythical no man's land, the end of the line where many subway riders rarely venture. The New York Times brought these and several other train stops to life through a compelling photo project that functions as an multi-level slideshow.
wordia
The dictionary has been around for centuries, but even its current digital form not much has changed since they were first being printed. Wordia is giving the lexicon a Web 2.0 makeover by providing a forum for anyone to upload what particular words mean to them. "Refuge" is commonly defined as "shelter or protection," but the user in the screenshot below describes refuge as "jumping into a hot shower after being trapped outside in the cold for hours." You won't find that in Webster's.
Breathing Earth
Because we can't physically see CO² emissions, it's hard to imagine the possible destruction the gas is causing the planet. The Breathing Earth simulation attempts to visualize the effects of greenhouse gases and blends an interactive infographic with changing statistics.
Obama's "Whistle Stop" Train Tour
CNN again makes use of its iReport feature to let citizen journalists be the ones to capture Obama's ride on the rails as he made his way to Washington, D.C. User-generated video is blended with CNN reports and mapped to give the user an interactive feel for the journey.
AfricaMap
There are likely hundreds of thousands of maps that document the African continent, but internet users can find all the map they'll need at this Harvard-created interactive project. The simple map can become more and more complex as various levels of data are layered on top of each other. Below, a 2007 index of Africa's power plants rests atop a 1770 historical map.
Perspectives
Imagine talking heads who don't talk at all. The video series from BaseMotion asks several people for their opinion on an issue and instead of showing their answers, shows only the pauses, breaks, ums and aahs. The stripped-down interview is a demonstration of human idiosyncrasies and reactions, rather than an attempt to gather opinions.
Whack-A-Bone
It's a human anatomy lesson cleverly disguised as a game! Players attempt to drag and drop bones in their correct locations while facing a timer. After playing the game, you'll not only know where the phalanges and humerus bones are, but you'll be able to identify them in record time.
Also on 10,000 Words:
• Exploring the human body through multimedia
• Create brilliant multimedia projects from the mundane
• Online news games are fun (and informative!)
Labels: citizen journalism, database, flash, photos, video
Essential resources for panoramic photography
Monday, January 05, 2009
You've seen panoramas used to illustrate the wondrous beauty of the world such as the interactive landscapes of Australia available at Panedia, the beautiful 360º images at Virtual Africa and the hundreds of images available at 360Cities.net (including this stunning image of London on New Year's night).
In fact, panoramic technology has grown so rapidly that many long-existing tools for creating virtual images have grown in popularity even in the last few months since this last post on panoramas. Here are some of the useful tools and resources for those interested in visualizing their own interactive corner of the world:
Software
Image editors can take their pick from any of the available panorama programs including WPanorama, hugin and Microsoft Image Composite Editor. These tools offer a dizzying number of features and can be used to create anything from basic image stitching to, in some cases, 360º imaging and perspective correction.
Photoshop CS users needn't download any new software — the program comes equipped with Photomerge, a useful tool for creating panoramas.
iPhone
Can your phone do this?
Griffith Observatory, Los Angeles; Mouse over to pan
Creating panoramas doesn't necessarily mean expensive equipment or cameras. The above panoramic image was created with the $3 iPhone app Pano, color corrected in Photoshop and uploaded into Flash (download the .FLA here). Pano makes stitching easy by showing an overlay of the edge of the last photograph, enabling seamless transitions.
Other iPhone applications include PanoLab (free) and Panorama ($9.99). If you'd rather view panoramic images instead of creating them, there's also the free application Pangea VR.
Social networking
In today's web 2.0 world, it's not enough to simply create and post panoramas on your site or blog, you must also share them with other panoramists. GigaPan provides such a space for users to view and share brilliant panoramas from all over the world. Read more about the technology behind GigaPan at contentious.com.
Photosynth offers a similar experience for those with Windows Live accounts. Users can download the available editing software and allow others to view the results.
Blogs
For constantly updated information on the application of panoramas to news photography, check out The Panoramist, an essential blog for fans of the medium. Blogger Gary O'Brien shares fascinating tidbits about panoramic photography as well as panoramas created by news organizations. Panoramic technologist may also be interested in panospace, which touches on useful equipment, among other things.
Have you created an amazing panorama or spotted one on the web? Share it with us in the comments!
In fact, panoramic technology has grown so rapidly that many long-existing tools for creating virtual images have grown in popularity even in the last few months since this last post on panoramas. Here are some of the useful tools and resources for those interested in visualizing their own interactive corner of the world:
Software
Image editors can take their pick from any of the available panorama programs including WPanorama, hugin and Microsoft Image Composite Editor. These tools offer a dizzying number of features and can be used to create anything from basic image stitching to, in some cases, 360º imaging and perspective correction.
Photoshop CS users needn't download any new software — the program comes equipped with Photomerge, a useful tool for creating panoramas.
iPhone
Can your phone do this?
Griffith Observatory, Los Angeles; Mouse over to pan
Creating panoramas doesn't necessarily mean expensive equipment or cameras. The above panoramic image was created with the $3 iPhone app Pano, color corrected in Photoshop and uploaded into Flash (download the .FLA here). Pano makes stitching easy by showing an overlay of the edge of the last photograph, enabling seamless transitions.
Other iPhone applications include PanoLab (free) and Panorama ($9.99). If you'd rather view panoramic images instead of creating them, there's also the free application Pangea VR.
Social networking
In today's web 2.0 world, it's not enough to simply create and post panoramas on your site or blog, you must also share them with other panoramists. GigaPan provides such a space for users to view and share brilliant panoramas from all over the world. Read more about the technology behind GigaPan at contentious.com.
Photosynth offers a similar experience for those with Windows Live accounts. Users can download the available editing software and allow others to view the results.
Blogs
For constantly updated information on the application of panoramas to news photography, check out The Panoramist, an essential blog for fans of the medium. Blogger Gary O'Brien shares fascinating tidbits about panoramic photography as well as panoramas created by news organizations. Panoramic technologist may also be interested in panospace, which touches on useful equipment, among other things.
Have you created an amazing panorama or spotted one on the web? Share it with us in the comments!
Where to find the best in Flash journalism
Wednesday, December 10, 2008
Last week a poster on the MediaBistro bulettin boards asked "What place does Flash have in journalism?"
The answer is a pretty big place. Journalists use Flash to create interactive infographics, computer simulations, audio slideshows, games or anything that requires animation. The only problem is the computer program has become such a ubiquitous tool in the industry that many news organizations use Flash for Flash's sake, rather than using more appropriate media such as video, audio or even flat graphics.
To see Flash done right, check out a few of the sites that are showcasing the extensive possibilities of the medium:
The multimedia stories on Interactive Narratives are all fascinating combinations of audio, video or photos, but some of the best, like Mexico Under Siege, use Flash to take interactive storytelling to a whole new level.
The key to good business reporting? It doesn't have to be boring. The interactive staff at Portfolio.com know this and inject a wink and a smile into what could be a slew of staid infographics.
The crew at Swarm has wrangled hurricanes, captured erupting volcanoes and sunk to the bottom of the ocean, all in the name of interactive journalism. The company produces some of the most thrilling Flash simulations that give users the interactive experience that an ordinary graphic cannot.
The Times is inarguably one of the media companies at the forefront of cutting-edge Flash journalism. Why you say? The paper and its team of developers have created awe-inspiring Flash projects on everything from simple subjects like Mad Magazine fold-ins to complex subjects like the sentiments of 2008 election voters.
It doesn't take a team of highly paid developers to put together an amazing Flash project. Heck, if you're one of the Berkeley students featured on the school's multimedia site, you may have just flown solo. The site lists a number of stories that exhibit the fundamentals of storytelling and just happen to be created in Flash.
The Spanish language site brings las noticias to life with interactive stories on subjects ranging from technology and the economy to sports and entertainment.
The National Press Photographers Association has been holding its monthly multimedia contest for some time now, so, as should be expected, there is some pretty stunning work here. Winning entries run the gamut from audio slideshows to interactive features.
The FWA site does not specifically feature journalism, but by clicking "category" and selecting "education," "photography" and "resource & community" you can check out some journalistic applications of Flash, usually from those outside the journalism community.
If you are a Flash novice and want to learn some of the basics of the program, check out the following online resources:
• Knight Digital Media Center
• Flash Journalism (Mindy McAdams)
• Tutorialized
• lynda.com
If you're ready to move on to the more tricky advanced features check out gotoandlearn.com, FlashKit, FlashPerfection, or any of the sites on this long list of Flash tutorial sites.
If you're a hands on, classroom setting kind of learner, consider enrolling in a Flash course at a local community college. Chances are you'll walk away with a basic understanding of the program without spending a lot of money.
Side note: I picked up the basic Flash skills in J-School, but quickly forgot them after the semester was over. After I graduated, I picked up a copy of "Flash 8 for Dummies" which put me right back on track. Not only is the book a simple to follow learning tool, but a handy reference guide for the finer points of the program. You can check out some of my Flash work here.
Previously on 10,000 Words:
• 8 Flash tips and tricks + one big cheat sheet
• Be inspired! 12 ways to find the best in data visualization
• 8 Ways of visualizing the news
The answer is a pretty big place. Journalists use Flash to create interactive infographics, computer simulations, audio slideshows, games or anything that requires animation. The only problem is the computer program has become such a ubiquitous tool in the industry that many news organizations use Flash for Flash's sake, rather than using more appropriate media such as video, audio or even flat graphics.
To see Flash done right, check out a few of the sites that are showcasing the extensive possibilities of the medium:
Interactive Narratives
The multimedia stories on Interactive Narratives are all fascinating combinations of audio, video or photos, but some of the best, like Mexico Under Siege, use Flash to take interactive storytelling to a whole new level.
Portfolio.com
The key to good business reporting? It doesn't have to be boring. The interactive staff at Portfolio.com know this and inject a wink and a smile into what could be a slew of staid infographics.
Swarm Interactive
The crew at Swarm has wrangled hurricanes, captured erupting volcanoes and sunk to the bottom of the ocean, all in the name of interactive journalism. The company produces some of the most thrilling Flash simulations that give users the interactive experience that an ordinary graphic cannot.
The New York Times
The Times is inarguably one of the media companies at the forefront of cutting-edge Flash journalism. Why you say? The paper and its team of developers have created awe-inspiring Flash projects on everything from simple subjects like Mad Magazine fold-ins to complex subjects like the sentiments of 2008 election voters.
Berkeley Graduate School of Journalism
It doesn't take a team of highly paid developers to put together an amazing Flash project. Heck, if you're one of the Berkeley students featured on the school's multimedia site, you may have just flown solo. The site lists a number of stories that exhibit the fundamentals of storytelling and just happen to be created in Flash.
ELPAÍS.com
The Spanish language site brings las noticias to life with interactive stories on subjects ranging from technology and the economy to sports and entertainment.
NPPA Multimedia Contest Winners
The National Press Photographers Association has been holding its monthly multimedia contest for some time now, so, as should be expected, there is some pretty stunning work here. Winning entries run the gamut from audio slideshows to interactive features.
Favourite Website Awards
The FWA site does not specifically feature journalism, but by clicking "category" and selecting "education," "photography" and "resource & community" you can check out some journalistic applications of Flash, usually from those outside the journalism community.
If you are a Flash novice and want to learn some of the basics of the program, check out the following online resources:
• Knight Digital Media Center
• Flash Journalism (Mindy McAdams)
• Tutorialized
• lynda.com
If you're ready to move on to the more tricky advanced features check out gotoandlearn.com, FlashKit, FlashPerfection, or any of the sites on this long list of Flash tutorial sites.
If you're a hands on, classroom setting kind of learner, consider enrolling in a Flash course at a local community college. Chances are you'll walk away with a basic understanding of the program without spending a lot of money.
Side note: I picked up the basic Flash skills in J-School, but quickly forgot them after the semester was over. After I graduated, I picked up a copy of "Flash 8 for Dummies" which put me right back on track. Not only is the book a simple to follow learning tool, but a handy reference guide for the finer points of the program. You can check out some of my Flash work here.
Previously on 10,000 Words:
• 8 Flash tips and tricks + one big cheat sheet
• Be inspired! 12 ways to find the best in data visualization
• 8 Ways of visualizing the news
Labels: flash
8 Flash tips and tricks + one big cheat sheet
Wednesday, September 10, 2008
Flash, like many other computer programs, is full of hidden secrets to make work easier and faster. Whether you're a beginner or you've been working with tweens since the Clinton administration, here are helpful hints for the program.
Once a motion tween has been created, select anywhere in the shaded area and take a look at the Properties window. In the box marked "Ease," slide the value up to naturally decelerate the tween or down to speed it up.
Kirupa.com has a quick tutorial on optimizing your images using the "Trace Bitmap" function in Flash. The entire process can take less than a minute, depending on the size of the image.
A common mistake among Flash beginners is creating Flash files that have audio tracks of someone speaking, but in the final project the audio quality is distorted and the speaker is rendered unrecognizable. To correct this, click anywhere in the audio on the timeline. In the drop down menu select File > Publish Settings... Click the "Set..." buttons next to "Audio Stream" and "Audio Event" and change the compression to "Speech."
Sometimes creating invisible buttons on an existing background is necessary like in this project where the movie posters were laid out in Photoshop. To create this effect, simply create a button with blank up, over and down frames, and create a polygon that corresponds to the hit state you desire. The empty button will show up as a light blue on the stage, but invisible in the final product.
Instead of coding ActionScript to go to frame numbers, create frame labels so if the timeline is adjusted, the routing will still be consistent.
To nudge something across the workspace faster, hold down the Shift key while pressing the arrow buttons.
Sites like FlashKit, iStockPhoto and VCL Components offer Flash components like menus, audio players and scrollers that can be downloaded for free or for a fee. These sites will easily cut down on the time spent putting together the little things.
The Effect Generator is an incredibly simple and useful online tool for creating slideshows, scrollers, effects and more. The irony of the site having a Flash-based interface shouldn't be lost on anyone.
Nothing makes life easier than a cheat sheet. Here is a Flash cheat sheet of keyboard shortcuts for PC, available in both PDF and in JPG formats.
Make animations more natural
Once a motion tween has been created, select anywhere in the shaded area and take a look at the Properties window. In the box marked "Ease," slide the value up to naturally decelerate the tween or down to speed it up.
Convert bitmap images to vector
Kirupa.com has a quick tutorial on optimizing your images using the "Trace Bitmap" function in Flash. The entire process can take less than a minute, depending on the size of the image.
Make your audio crisp
A common mistake among Flash beginners is creating Flash files that have audio tracks of someone speaking, but in the final project the audio quality is distorted and the speaker is rendered unrecognizable. To correct this, click anywhere in the audio on the timeline. In the drop down menu select File > Publish Settings... Click the "Set..." buttons next to "Audio Stream" and "Audio Event" and change the compression to "Speech."
Create invisible buttons
Sometimes creating invisible buttons on an existing background is necessary like in this project where the movie posters were laid out in Photoshop. To create this effect, simply create a button with blank up, over and down frames, and create a polygon that corresponds to the hit state you desire. The empty button will show up as a light blue on the stage, but invisible in the final product.
Label everything
Instead of coding ActionScript to go to frame numbers, create frame labels so if the timeline is adjusted, the routing will still be consistent.
Move that symbol faster
To nudge something across the workspace faster, hold down the Shift key while pressing the arrow buttons.
Download what you need
Sites like FlashKit, iStockPhoto and VCL Components offer Flash components like menus, audio players and scrollers that can be downloaded for free or for a fee. These sites will easily cut down on the time spent putting together the little things.
Skip Flash altogether
The Effect Generator is an incredibly simple and useful online tool for creating slideshows, scrollers, effects and more. The irony of the site having a Flash-based interface shouldn't be lost on anyone.
Use a cheat sheet
Nothing makes life easier than a cheat sheet. Here is a Flash cheat sheet of keyboard shortcuts for PC, available in both PDF and in JPG formats.
Labels: flash
Innovative multimedia centered on the ordinary and everyday
Wednesday, September 03, 2008
Sometimes the best multimedia projects aren't those that cover elaborate and complicated news stories. The following stories show that ordinary concepts make for extraordinary multimedia.
Can you tell the $1,600 Jimmy Choo handbag from the $55 knockoff? Portfolio.com wants to know. The test puts the users plagiarism-detecting skills to use and is a simple but fun twist to the Flash quiz.
Everyone knows climbing gas prices are scary but this animated chart from Flowing Data may cause heart attacks. The chart illustrates how gas prices have climbed in the US from an average of about $1 a gallon to today's hefty $4 a gallon price tag.
Visitors to the actual Vietnam Vets memorial can only stare at the granite walls and wonder about who the soldiers were. Visitors to the interactive version can read about the stories behind each name.
Journalists and audiences alike are big fans of This American Life in both its radio and TV incarnations. The animated video illustrated by Chris Ware takes a simple premise (the differing recollections of a single event by a husband and wife) and brings it to life.
Mad Magazine's fold-ins are a great piece of Americana (as well as an encapsulation of the concerns of the times). The New York Times gives them a digital makeover, decreasing the need for actual folding.
Along the lines of the aforementioned gas chart is this map of the spread of Wal-Mart stores across the country. It is interesting to see the megachain begin as a small clump of stores in Arkansas to several thousand stores that cover a large portion of the Western hemisphere.
Box office charts make good filler for the evening news broadcast or as anecdotal evidence for entertainment stories, but this well-designed chart shows the fluctuation of box office popularity for the entire year.
Last but not least is this visualization of the frequency of mentions of specific body parts in different genres of music. Not surprisingly, the rear end is popular among hip hoppers and the hand is big among gospel artists. Possibly NSFW if you're scared of (literally) a little booty.
Spot the Knockoff
Can you tell the $1,600 Jimmy Choo handbag from the $55 knockoff? Portfolio.com wants to know. The test puts the users plagiarism-detecting skills to use and is a simple but fun twist to the Flash quiz.
Rising Gasoline Costs
Everyone knows climbing gas prices are scary but this animated chart from Flowing Data may cause heart attacks. The chart illustrates how gas prices have climbed in the US from an average of about $1 a gallon to today's hefty $4 a gallon price tag.
Interactive Vietnam Veterans Memorial
Visitors to the actual Vietnam Vets memorial can only stare at the granite walls and wonder about who the soldiers were. Visitors to the interactive version can read about the stories behind each name.
Judgement to the Wife
Journalists and audiences alike are big fans of This American Life in both its radio and TV incarnations. The animated video illustrated by Chris Ware takes a simple premise (the differing recollections of a single event by a husband and wife) and brings it to life.
Fold-Ins, Past and Present
Mad Magazine's fold-ins are a great piece of Americana (as well as an encapsulation of the concerns of the times). The New York Times gives them a digital makeover, decreasing the need for actual folding.
Watching the Growth of Wal-Mart Across America
Along the lines of the aforementioned gas chart is this map of the spread of Wal-Mart stores across the country. It is interesting to see the megachain begin as a small clump of stores in Arkansas to several thousand stores that cover a large portion of the Western hemisphere.
2008 US Movie Box Office
Box office charts make good filler for the evening news broadcast or as anecdotal evidence for entertainment stories, but this well-designed chart shows the fluctuation of box office popularity for the entire year.
Fleshmap: Listen
Last but not least is this visualization of the frequency of mentions of specific body parts in different genres of music. Not surprisingly, the rear end is popular among hip hoppers and the hand is big among gospel artists. Possibly NSFW if you're scared of (literally) a little booty.
Multimedia: Chicago, in Color
Friday, July 25, 2008
As part of the "Multimedia Shootout" held at this week's UNITY conference, I created a project called "Chicago, in Color" aimed at celebrating diversity in Chicago. I knew the obvious story would be to go to Chinatown and barbershops to interview local residents, but I wanted to give a voice to those who couldn't speak for themselves: the monuments and statues of the Windy City. The entire project was created in a span of 48 hours.
Here's how I did it. There was no easily accessible existing resource on Chicago public art so I went to Flickr and searched for "Chicago statues" and "Chicago monuments." I whittled down the list to four: The Chicago Mural, The Spearman/The Bowman, Benito Juárez and Willie Dixon's Blues Garden. All four are mapped on an interactive Flash map (download FLA here). The accuracy of the map was created by using Photoshop to trace over an existing Google Map which was created in 5 minutes with MapBuilder (download PSD here). The icons were also silhouetted in Photoshop.
1. Chicago Mural
All the photos for the project were taken with an iPhone. Although the mural seems like one seamless photo it is actually several stitched together in Photoshop using layers and the cloning tool. The sliding element was created in Flash (download FLA here) using one of my favorite tutorials from kirupa.com on interactive image panning.
2. The Spearman/Bowman
The rotating effect used in this interactive image was created by taking one photo at a time with the iPhone and taking a step to the left or right to create the intervals. Because the photos didn't line up accurately, all of them were layered on top of each other in Photoshop (download PSD here) and resized and color corrected to ensure continuity. All the photos were then imported into Flash and distributed over several keyframes (download FLA here).
3. Benito Juárez
The Flash slideshow of the Mexican leader was perhaps the easiest facet of the project. The photos were taken with the iPhone, only one of which was (badly) color corrected, and uploaded into Flash (download FLA here). The audio was recorded with a $450 Olympus recorder in an empty room in my hotel, but could have just as easily been done with an El Cheapo recorder. The track was edited for pauses, ums and ahs in about ten minutes using Adobe Audition.
4. Willie Dixon's Blues Garden
The backlighting in this photo project could have been corrected with a more high end camera, but one was not available so I simply used the same technique I had used for The Spearman...click, step, click, step. The photos were also aligned in Photoshop and imported into a simple Flash slideshow (download FLA here). The music (and this is a big NO NO) was stripped from YouTube using online file converter Zamzar. It was then edited in Audition and uploaded into Flash. This is a likely violation of copyright law (even though the clip is less than 30 seconds), but in this case was only used for demonstration and will likely be pulled some time in the very near future.
Design
The design was created in Photoshop and exported as one big background image with a hole for the Flash projects (a big design no no, but less time-consuming than coding the necessary CSS). The menu on the right is actually a Flash project with transparent buttons overlaid on top of the Photoshopped background (download FLA here). The whole thing was cobbled together in Dreamweaver.
Needless to say, this was the only project of its kind submitted for the Multimedia Shootout which was both a blessing and a curse. The project, which mirrors what a mainstream news outlet is likely to produce, stood out from the other 20 entries that were simply slideshows or video. I acknowledge that everyone doesn't have such a varied skilled set, but this type of project can be put together with the right team and the right tools.
Here's how I did it. There was no easily accessible existing resource on Chicago public art so I went to Flickr and searched for "Chicago statues" and "Chicago monuments." I whittled down the list to four: The Chicago Mural, The Spearman/The Bowman, Benito Juárez and Willie Dixon's Blues Garden. All four are mapped on an interactive Flash map (download FLA here). The accuracy of the map was created by using Photoshop to trace over an existing Google Map which was created in 5 minutes with MapBuilder (download PSD here). The icons were also silhouetted in Photoshop.
1. Chicago Mural
All the photos for the project were taken with an iPhone. Although the mural seems like one seamless photo it is actually several stitched together in Photoshop using layers and the cloning tool. The sliding element was created in Flash (download FLA here) using one of my favorite tutorials from kirupa.com on interactive image panning.
2. The Spearman/Bowman
The rotating effect used in this interactive image was created by taking one photo at a time with the iPhone and taking a step to the left or right to create the intervals. Because the photos didn't line up accurately, all of them were layered on top of each other in Photoshop (download PSD here) and resized and color corrected to ensure continuity. All the photos were then imported into Flash and distributed over several keyframes (download FLA here).
3. Benito Juárez
The Flash slideshow of the Mexican leader was perhaps the easiest facet of the project. The photos were taken with the iPhone, only one of which was (badly) color corrected, and uploaded into Flash (download FLA here). The audio was recorded with a $450 Olympus recorder in an empty room in my hotel, but could have just as easily been done with an El Cheapo recorder. The track was edited for pauses, ums and ahs in about ten minutes using Adobe Audition.
4. Willie Dixon's Blues Garden
The backlighting in this photo project could have been corrected with a more high end camera, but one was not available so I simply used the same technique I had used for The Spearman...click, step, click, step. The photos were also aligned in Photoshop and imported into a simple Flash slideshow (download FLA here). The music (and this is a big NO NO) was stripped from YouTube using online file converter Zamzar. It was then edited in Audition and uploaded into Flash. This is a likely violation of copyright law (even though the clip is less than 30 seconds), but in this case was only used for demonstration and will likely be pulled some time in the very near future.
Design
The design was created in Photoshop and exported as one big background image with a hole for the Flash projects (a big design no no, but less time-consuming than coding the necessary CSS). The menu on the right is actually a Flash project with transparent buttons overlaid on top of the Photoshopped background (download FLA here). The whole thing was cobbled together in Dreamweaver.Needless to say, this was the only project of its kind submitted for the Multimedia Shootout which was both a blessing and a curse. The project, which mirrors what a mainstream news outlet is likely to produce, stood out from the other 20 entries that were simply slideshows or video. I acknowledge that everyone doesn't have such a varied skilled set, but this type of project can be put together with the right team and the right tools.
Exploring the human body with Flash and video
Thursday, July 17, 2008
Scientists have made amazing discoveries about the human body over the years, but because journalists and scientists speak two different languages, trying to explain those discoveries can be difficult. What better way to explain the complex processes of the body than through new media?
Specialized Bicycle Components has put together an amazing interactive Flash animation to demonstrate how bicycles, and more specifically the company's products, interact with the human body. The centerpiece of the project is a figure stripped down to blood, bone and sinew that mimics the different movements of a bicycle rider. Users can toggle between a number of bike moves, including the spin and the hammer, and simultaneously isolate several systems in the body, including the nervous and circulatory systems.
The next presentation isn't for the faint of heart (pun intended). Hybrid Medical Animation, in order to present the viewer with a clearer understanding of the beating heart, has created the Hybrid Interactive Heart. Users can toggle between the opaque tissue of the organ and a "glass" version that shows the inner workings of the heart. The result is absolutely mind-blowing and somewhat hypnotic. A similar video animation shows the beating heart with blood flow.
As part of its "Design and the Elastic Mind" exhibit, the Museum of Modern Art hosts a project entitled The Inner Life of the Cell. According to the creators "We follow a macrophage as it patrols the wall of a capillary and encounters a chemical signal from a capillary cell indicating that an inflammatory event has occurred in surrounding tissue." In layman's terms, it is a visually stunning video that shows with scientific accuracy what's going on beneath the skin.
(Note: The next site is admittedly a little morbid but is safe to view at work.)
Interactive Autopsy, as it's name suggests, allows visitors to go through the steps of performing an autopsy, including removing and weighing the internal organs and cutting and stitching the body. In the middle of the interactive is a brief video of a forensic pathologist who discusses the removal of the brain. At the end of the project is a link to read more about the instruments used in autopsy that, honestly, rival those used in any Hollywood horror movie.
Specialized Bicycle Components has put together an amazing interactive Flash animation to demonstrate how bicycles, and more specifically the company's products, interact with the human body. The centerpiece of the project is a figure stripped down to blood, bone and sinew that mimics the different movements of a bicycle rider. Users can toggle between a number of bike moves, including the spin and the hammer, and simultaneously isolate several systems in the body, including the nervous and circulatory systems.
The next presentation isn't for the faint of heart (pun intended). Hybrid Medical Animation, in order to present the viewer with a clearer understanding of the beating heart, has created the Hybrid Interactive Heart. Users can toggle between the opaque tissue of the organ and a "glass" version that shows the inner workings of the heart. The result is absolutely mind-blowing and somewhat hypnotic. A similar video animation shows the beating heart with blood flow.
As part of its "Design and the Elastic Mind" exhibit, the Museum of Modern Art hosts a project entitled The Inner Life of the Cell. According to the creators "We follow a macrophage as it patrols the wall of a capillary and encounters a chemical signal from a capillary cell indicating that an inflammatory event has occurred in surrounding tissue." In layman's terms, it is a visually stunning video that shows with scientific accuracy what's going on beneath the skin.
(Note: The next site is admittedly a little morbid but is safe to view at work.)
Interactive Autopsy, as it's name suggests, allows visitors to go through the steps of performing an autopsy, including removing and weighing the internal organs and cutting and stitching the body. In the middle of the interactive is a brief video of a forensic pathologist who discusses the removal of the brain. At the end of the project is a link to read more about the instruments used in autopsy that, honestly, rival those used in any Hollywood horror movie.
Multimedia projects that bring the world to life
Friday, May 23, 2008
It's a complex world out there...a world that is better explained through multimedia. The following projects capture what could have been belabored or excessively long print stories and turned them into visually arresting online works.
"Who has the Nuclear Weapons?" isn't the first expository video from GOOD Magazine, but it may be one of the best. The magazine explains who is controlling the world's nuclear weapons in a video that is a cross between Sesame Street and a Nine Inch Nails music video with a little Michael Moore thrown in for good measure. Most importantly, the magazine presents facts in a visual, easy to digest way.
Non-profit organization Just Vision documents the history of the Israeli-Palestinian conflict through an interactive timeline, which is itself made of interviews with the people who lived/are living through it. The project mixes personal and historical events to provide a multi-faceted view of the conflict.
Flight and Expulsion from new media designer Christian Behrens is an interactive map that shows the flight patterns of refugees around the world based on UN statistics. The Flash map has some technical issues (tiny hit states), but is a sobering way visualization of where the incredible number of refugees are fleeing.
The BBC's History of Stonehenge is a computer-simulated time lapse video of one the world's most mysterious structures. The video delineates the position and degradation of the monument over thousands of years.
The Discovery Channel online's Volcano Explorer is a bit of creative genius — after learning about the fire-breathing mountains, users can adjust viscosity and gas levels to create their own virtual volcano and watch it erupt. It's definitely a step up from the baking soda and vinegar models made in grade school.
Ironic Sans' 60 Seconds series is proof that sometimes the news is happening right in front of us, if we take a moment to look. Each video spotlights a slice of life or nature in just a minute. There is something serene and American Beauty-esque about videos like 60 Seconds in the Life of Summer, 60 Seconds in the Life of an Aquarium or even 60 Seconds in the Life of a Fly. The videos are proof that you don't have to go far to find great ideas for multimedia.
"Who has the Nuclear Weapons?" isn't the first expository video from GOOD Magazine, but it may be one of the best. The magazine explains who is controlling the world's nuclear weapons in a video that is a cross between Sesame Street and a Nine Inch Nails music video with a little Michael Moore thrown in for good measure. Most importantly, the magazine presents facts in a visual, easy to digest way.
Non-profit organization Just Vision documents the history of the Israeli-Palestinian conflict through an interactive timeline, which is itself made of interviews with the people who lived/are living through it. The project mixes personal and historical events to provide a multi-faceted view of the conflict.
Flight and Expulsion from new media designer Christian Behrens is an interactive map that shows the flight patterns of refugees around the world based on UN statistics. The Flash map has some technical issues (tiny hit states), but is a sobering way visualization of where the incredible number of refugees are fleeing.
The BBC's History of Stonehenge is a computer-simulated time lapse video of one the world's most mysterious structures. The video delineates the position and degradation of the monument over thousands of years.
The Discovery Channel online's Volcano Explorer is a bit of creative genius — after learning about the fire-breathing mountains, users can adjust viscosity and gas levels to create their own virtual volcano and watch it erupt. It's definitely a step up from the baking soda and vinegar models made in grade school.
Ironic Sans' 60 Seconds series is proof that sometimes the news is happening right in front of us, if we take a moment to look. Each video spotlights a slice of life or nature in just a minute. There is something serene and American Beauty-esque about videos like 60 Seconds in the Life of Summer, 60 Seconds in the Life of an Aquarium or even 60 Seconds in the Life of a Fly. The videos are proof that you don't have to go far to find great ideas for multimedia.
What a good Flash preloader looks like and how to create one
Wednesday, May 21, 2008
The preloader is perhaps the most often overlooked element of most Flash projects. In its most basic form, the preloader consists of a moving bar or changing percentage that indicates the load time of a Flash file. Preloaders are especially important for large files and/or video for which the user may have to wait some time before the Flash file is ready.
There are a number of tutorials on the web for creating preloaders, including an incredibly detailed rundown from senocular.com, a preloader that is itself detailed can be found at LukaMaras.com, and a preloader that displays load progress from 10,000 words favorite kirupa.com.
And they don't have to be bars either. They can be games, animated timelines, fill an object like the one at Game Boy micro, or circular like the one found at Mohammad Rahimi. Detailed instructions on how to create a circle preloader can be found here.
If your Flash project is related to health or medicine, this tutorial on how to create an EKG-like preloader will come in handy. An exhaustive list of tutorials can be found at VCL Components. Once a preloader is developed it can be used repeatedly by copying and pasting the movie clip into a new or existing Flash file and tweaking a couple of parameters.
If you need a little inspiration, Smashing Magazine has a great gallery of Flash preloaders as does Flash Speaks Actionscript. If you're not quite ready to code your own preloaders, sites like istockphoto have many stock preloaders that run the gamut from easy and basic to extraordinary and unusual like this pencil preloader, this vertical liquid loader and one that resembles a speedometer.
For an inspiring gallery of Flash preloaders, check out Pretty Loaded
There are a number of tutorials on the web for creating preloaders, including an incredibly detailed rundown from senocular.com, a preloader that is itself detailed can be found at LukaMaras.com, and a preloader that displays load progress from 10,000 words favorite kirupa.com.
And they don't have to be bars either. They can be games, animated timelines, fill an object like the one at Game Boy micro, or circular like the one found at Mohammad Rahimi. Detailed instructions on how to create a circle preloader can be found here.
If your Flash project is related to health or medicine, this tutorial on how to create an EKG-like preloader will come in handy. An exhaustive list of tutorials can be found at VCL Components. Once a preloader is developed it can be used repeatedly by copying and pasting the movie clip into a new or existing Flash file and tweaking a couple of parameters.
If you need a little inspiration, Smashing Magazine has a great gallery of Flash preloaders as does Flash Speaks Actionscript. If you're not quite ready to code your own preloaders, sites like istockphoto have many stock preloaders that run the gamut from easy and basic to extraordinary and unusual like this pencil preloader, this vertical liquid loader and one that resembles a speedometer.
For an inspiring gallery of Flash preloaders, check out Pretty Loaded
Labels: flash
Magazine archives just as important as fresh content
Friday, May 02, 2008
The latest trend in online magazines is to have an online gallery of the covers of past issues. It's a great idea and invokes nostalgia in readers who remember the fond memories tied to each issue. There are a few magazines who are making use of the online space and giving their cover galleries a little extra zip:
Wired includes links to each issue's stories:
Seventeen has video and slideshows documenting each cover girl:
LIFE has slideshows of its covers as well as quizzes and the option for users to vote on their favorite covers:
Rolling Stone has a great flash interface for searching for covers:
VIBE posts not only its covers, but also the links to its cover stories:
For more on the story behind the magazine fronts, check out Cover Awards, a unique blog that covers the covers. For today's newspaper front pages, visit Newseum. More online cover archives after the jump.
Vogue (UK)
Time
Sports Illustrated
Esquire
Vanity Fair
New York Magazine
O, The Oprah Magazine
Wired includes links to each issue's stories:
Seventeen has video and slideshows documenting each cover girl:
LIFE has slideshows of its covers as well as quizzes and the option for users to vote on their favorite covers:
Rolling Stone has a great flash interface for searching for covers:
VIBE posts not only its covers, but also the links to its cover stories:
For more on the story behind the magazine fronts, check out Cover Awards, a unique blog that covers the covers. For today's newspaper front pages, visit Newseum. More online cover archives after the jump.
Vogue (UK)
Time
Sports Illustrated
Esquire
Vanity Fair
New York Magazine
O, The Oprah Magazine
Labels: design, flash, site management
How to invigorate boring courtroom sketches
Thursday, March 27, 2008
Here is an example of a typical courtroom sketch (okay it's actually a Photoshopped screengrab from A Few Good Men, but work with me here). Like other sketches, it's basically just a flat graphic.
Here is the same sketch with a little multimedia treatment. (Roll over the characters with your mouse. Click here for the .FLA)
Or if you have a series of sketches at your disposal or just cropped versions of a single one, you can create a quick slideshow using Flash, SoundSlides, or by uploading to your content management tool. See an example below (click here for the .FLA)
Both of these Flash files took less than ten minutes to build and add an incredibly useful multimedia element to an otherwise old news standard. For more on the artists behind some of the most recognizable court sketches, check out this post at Ironic Sans.
Here is the same sketch with a little multimedia treatment. (Roll over the characters with your mouse. Click here for the .FLA)
Or if you have a series of sketches at your disposal or just cropped versions of a single one, you can create a quick slideshow using Flash, SoundSlides, or by uploading to your content management tool. See an example below (click here for the .FLA)
Both of these Flash files took less than ten minutes to build and add an incredibly useful multimedia element to an otherwise old news standard. For more on the artists behind some of the most recognizable court sketches, check out this post at Ironic Sans.
Labels: flash
How to cover the news from every angle
Tuesday, March 04, 2008
During a Hillary Clinton rally on CNN last week, it was obvious that nearly every supporter behind her had some sort of camera in his or her hand. Assuming there were hundreds of cameras positioned around the auditorium, the experience of the rally, or any other event, could be enhanced through multimedia. Using the different camera locations could give the online user the ability to pick the angle from which they view a news story instead of letting a media outlet choose for them.
The hundreds of cameras in the one room was reminiscent of the bullet time technology used in the movie The Matrix that positioned a number of cameras around an actor to create the effect of stopping time. That same thinking can be married with what is visually represented in the end credits of the movie Dreamgirls: the film editor's job of selecting different camera shots (see below for examples). We can, in effect, let the user be his or her own film editor.
Left: Actor Keanu Reeves is captured in bullet time; Right: Film editing represented in the end credits of Dreamgirls
Below is a visual example of the possibilities of this technology. Using user-submitted photos, in this case, from Flickr, a site visitor can select the angle from which they view a news event (in this case a Barack Obama campaign rally in Oakland, Calif. last year).
Photos from Flickr users solsken, juicyrai, oso, js42, Barack Obama, y-cart used under Creative Commons license
The project above was built in Flash in less than 30 minutes and can be done for political speeches, sporting events, red carpet coverage, you name it. Many news outlets already have tip lines in place like for example CNN's I-Report and the submissions can be harnessed to provide the online visitor with a unique experience. This can also be recreated by a quick-on-their-feet photographer or videographer who can literally be in many places at once.
The hundreds of cameras in the one room was reminiscent of the bullet time technology used in the movie The Matrix that positioned a number of cameras around an actor to create the effect of stopping time. That same thinking can be married with what is visually represented in the end credits of the movie Dreamgirls: the film editor's job of selecting different camera shots (see below for examples). We can, in effect, let the user be his or her own film editor.
Left: Actor Keanu Reeves is captured in bullet time; Right: Film editing represented in the end credits of Dreamgirls
Below is a visual example of the possibilities of this technology. Using user-submitted photos, in this case, from Flickr, a site visitor can select the angle from which they view a news event (in this case a Barack Obama campaign rally in Oakland, Calif. last year).
Photos from Flickr users solsken, juicyrai, oso, js42, Barack Obama, y-cart used under Creative Commons license
The project above was built in Flash in less than 30 minutes and can be done for political speeches, sporting events, red carpet coverage, you name it. Many news outlets already have tip lines in place like for example CNN's I-Report and the submissions can be harnessed to provide the online visitor with a unique experience. This can also be recreated by a quick-on-their-feet photographer or videographer who can literally be in many places at once.
Labels: citizen journalism, flash, photos
Multimedia journalism, one year later
Monday, February 18, 2008
In honor of my birthday tomorrow, I am taking a look back at the most interesting multimedia projects I have created or contributed to this year.
After a traumatizing event several years ago involving a day care van flipped over on a freeway, I vowed to steer clear of cop reporting. So I was dismayed when I was asked to organize the data from Jill Leovy's homicide blog so it could be made into a searchable database of facts and figures. I was horrified at one of the hundreds of murders I had to read through and cursed ever accepting the assignment.
The outcome was well worth the psychological damage. The team who built the database did an excellent job and I commend Jill for taking on such as arduous task.
By now most people have seen a tag cloud like the one in the rail of this blog, but I believed that the concept could be taken further. While brainstorming for ideas for coverage of the Academy Awards for Entertainment Weekly, I realized that many of the Best Song lyrics contained similar themes. To find if this was true, I tracked down the lyrics to 40 years worth of best song lyrics, put them all in one document and uploaded the results to TagCrowd, an online tag cloud creator. Love, of course, was number one with 75 occurrences.
I then took the results and manually weighted and arranged them into the shape of an Oscar statuette. The process required the painstaking creation of more than 200 buttons in Flash, but the results were both stunning and satisfying.
The idea for a graphic of rapper Kanye West's influences and production credits came from this print graphic by Andrew Saeger of the Times-Union. I had saved the graphic in my inspiration files and pulled it up when the opportunity to do a story on West arose. The print graphic itself is amazing and well-researched and lent itself to creating a very visual online piece.
Entertainment Weekly's gay Hollywood cover story got an online punch with a couple of YouTube videos and a whole lot of research. The examination of pivotal films that explored gay content required endless movie watching, several trips to the bookstore and a couple of days combing YouTube for supporting videos. The subject matter took me out of my box and required several readings of the NLGJA Stylebook Supplement on LGBT Terminology, but like many reporters I became an expert (in my mind) on the subject after writing the story. The piece is currently nominated for a GLAAD Media Award for digital journalism.
Creating this graphic about California wildfires for the L.A. Times was itself an uphill battle. The Flash project is a fully animated version of a static, full-page graphic that had ran in the paper some time before. The project took weeks to create and required the conversion of an Illustrator file into Flash vector graphics. It was further complicated by the addition of animated elements like spinning helicopter blades, moving fire, spraying water, moving embers and rolling fire trucks. In short it was a nightmare, but became one of the go-to graphics during wildfire season.
I previously mentioned my thoughts on Black History Month, yet I created this piece on black Oscar winners and nominees not as a tie-in to the observance, but because it was an untold story. It also happens that Black History Month and awards season happen at the same time. There are (mostly incomplete) lists of said honorees circulating the Internet, but I believed adding the stories behind the trophies, in addition to pictures and video, would make for a stronger multimedia piece. My favorite part of this project was watching the video of actors like Halle Berry, Hattie McDaniel and Cuba Gooding, Jr. accepting the Academy Award and the deep meaning it had for them.
I have a pair of dirty, ripped, worn out shoes that were brand new when I bought them, but after two weeks walking on dirt roads under the heat of the African sun became the disheveled pair I own today. I refuse to discard them because of what they represent: my time in spent in Ghana researching the lives of gay men and women for whom simply living is a struggle. Homosexuality is illegal in Ghana and those accused of the "crime" face public ostracism and jail time. So it wasn't easy for an American to waltz into the country and start interviewing people. Like many of the aforementioned stories, the project required untold amounts of research to track down the hidden enclaves where gay men congregated, the beaches where men sold their bodies to male tourists and the gay leaders fighting for rights in a country that refused to recognize them.
The project, which was funded through a grant from UC Berkeley School of Journalism, ultimately consisted of three detailed print stories and three multimedia pieces.
The multimedia components were belabored by last minute design flaws, but ultimately went on to win the NLGJA award for Student Journalism. The people I met and the lessons I learned while reporting the project will stay with me forever, kind of like those shoes.
Los Angeles Times' Homicide Map
After a traumatizing event several years ago involving a day care van flipped over on a freeway, I vowed to steer clear of cop reporting. So I was dismayed when I was asked to organize the data from Jill Leovy's homicide blog so it could be made into a searchable database of facts and figures. I was horrified at one of the hundreds of murders I had to read through and cursed ever accepting the assignment.
The outcome was well worth the psychological damage. The team who built the database did an excellent job and I commend Jill for taking on such as arduous task.
Best in Song
By now most people have seen a tag cloud like the one in the rail of this blog, but I believed that the concept could be taken further. While brainstorming for ideas for coverage of the Academy Awards for Entertainment Weekly, I realized that many of the Best Song lyrics contained similar themes. To find if this was true, I tracked down the lyrics to 40 years worth of best song lyrics, put them all in one document and uploaded the results to TagCrowd, an online tag cloud creator. Love, of course, was number one with 75 occurrences.
I then took the results and manually weighted and arranged them into the shape of an Oscar statuette. The process required the painstaking creation of more than 200 buttons in Flash, but the results were both stunning and satisfying.
Exploring the Kanye-verse
The idea for a graphic of rapper Kanye West's influences and production credits came from this print graphic by Andrew Saeger of the Times-Union. I had saved the graphic in my inspiration files and pulled it up when the opportunity to do a story on West arose. The print graphic itself is amazing and well-researched and lent itself to creating a very visual online piece.
Landmark Moments in Gay Hollywood
Entertainment Weekly's gay Hollywood cover story got an online punch with a couple of YouTube videos and a whole lot of research. The examination of pivotal films that explored gay content required endless movie watching, several trips to the bookstore and a couple of days combing YouTube for supporting videos. The subject matter took me out of my box and required several readings of the NLGJA Stylebook Supplement on LGBT Terminology, but like many reporters I became an expert (in my mind) on the subject after writing the story. The piece is currently nominated for a GLAAD Media Award for digital journalism.
Fighting Wildfires: An Uphill Battle
Creating this graphic about California wildfires for the L.A. Times was itself an uphill battle. The Flash project is a fully animated version of a static, full-page graphic that had ran in the paper some time before. The project took weeks to create and required the conversion of an Illustrator file into Flash vector graphics. It was further complicated by the addition of animated elements like spinning helicopter blades, moving fire, spraying water, moving embers and rolling fire trucks. In short it was a nightmare, but became one of the go-to graphics during wildfire season.
Black & Gold
I previously mentioned my thoughts on Black History Month, yet I created this piece on black Oscar winners and nominees not as a tie-in to the observance, but because it was an untold story. It also happens that Black History Month and awards season happen at the same time. There are (mostly incomplete) lists of said honorees circulating the Internet, but I believed adding the stories behind the trophies, in addition to pictures and video, would make for a stronger multimedia piece. My favorite part of this project was watching the video of actors like Halle Berry, Hattie McDaniel and Cuba Gooding, Jr. accepting the Academy Award and the deep meaning it had for them.
Somewhere Over the Rainbow
I have a pair of dirty, ripped, worn out shoes that were brand new when I bought them, but after two weeks walking on dirt roads under the heat of the African sun became the disheveled pair I own today. I refuse to discard them because of what they represent: my time in spent in Ghana researching the lives of gay men and women for whom simply living is a struggle. Homosexuality is illegal in Ghana and those accused of the "crime" face public ostracism and jail time. So it wasn't easy for an American to waltz into the country and start interviewing people. Like many of the aforementioned stories, the project required untold amounts of research to track down the hidden enclaves where gay men congregated, the beaches where men sold their bodies to male tourists and the gay leaders fighting for rights in a country that refused to recognize them.
The project, which was funded through a grant from UC Berkeley School of Journalism, ultimately consisted of three detailed print stories and three multimedia pieces.
The multimedia components were belabored by last minute design flaws, but ultimately went on to win the NLGJA award for Student Journalism. The people I met and the lessons I learned while reporting the project will stay with me forever, kind of like those shoes.
How to save time when using Flash
Monday, February 11, 2008
I'm going to let you in on a little secret. 95 percent of the multimedia work I do is hand-coded and designed from scratch. But once in a while I am pressed for time or the project I'm working on requires technical knowhow I just don't have...yet. That's when I turn to sites that offer stock Flash and ActionScript elements that can be tweaked to fit the project I'm working on.
For example, a couple of months ago I scoured the web and several books for hours, trying to find ActionScript that would allow me to build a multiple choice quiz. When I was close to giving up, I remembered Flash Kit, an excellent resource for Flash templates and other multimedia elements. I quickly found a multiple choice quiz that I dissected and whose code became the basis for two quizzes: "Which 'Hero' are you?" and the Movie Prop Quiz.
(click thumbnails to enlarge)
For a long time, I had a kirupa.com Flash tutorial on interactive image panning buried in by bookmarks before I realized the ActionScript could be used for an interactive, virtual tour of the W.E.B. DuBois Center in Accra, Ghana (the full project can be viewed here). You can see how the original script came into play, but also how it was added to and built upon. There are many sites that offer online tutorials on Flash and other multimedia programs, but I am a fan of kirupa.com for its straightforward and easy to understand tutorials.
(click thumbnails to enlarge)
Sites like iStockphoto, a stock agency that carries photos, illustrations, video and Flash files, are an excellent resources for finding Flash components that would otherwise take hours, if not days, more to build. I used this file and others like it for a recent Flash feature on dancing celebrities that had to be finished in less than 5 hours. The results were outstanding and amusing, and incorporated the stock files into a unique Flash project.
(click thumbnails to enlarge)
iStockPhoto isn't free, and depending on the complexity of the file, isn't cheap, but it can really come in handy. I also use some of the site's stock illustrations on 10,000 Words posts when time is a factor.
iStockPhoto illustration before and after
There is also Soundslides, of course, which facilitates creating quick slideshows and a number of other Flash-based image galleries. I must reiterate that I believe wholeheartedly in originality and recognize that Flash is a time-consuming tool. But when you're in a time crunch or need a push in the right direction, the aforementioned sites can be of great service. Just be sure to make them your own, because originality trumps speed any day.
Also on 10,000 Words:
• 8 Flash tips and tricks + one big cheat sheet
• Move over Soundslides: 4 Free online slideshow creators
• Where to find the best in Flash journalism
• Do you have a multimedia emergency plan?
For example, a couple of months ago I scoured the web and several books for hours, trying to find ActionScript that would allow me to build a multiple choice quiz. When I was close to giving up, I remembered Flash Kit, an excellent resource for Flash templates and other multimedia elements. I quickly found a multiple choice quiz that I dissected and whose code became the basis for two quizzes: "Which 'Hero' are you?" and the Movie Prop Quiz.
(click thumbnails to enlarge)
For a long time, I had a kirupa.com Flash tutorial on interactive image panning buried in by bookmarks before I realized the ActionScript could be used for an interactive, virtual tour of the W.E.B. DuBois Center in Accra, Ghana (the full project can be viewed here). You can see how the original script came into play, but also how it was added to and built upon. There are many sites that offer online tutorials on Flash and other multimedia programs, but I am a fan of kirupa.com for its straightforward and easy to understand tutorials.
(click thumbnails to enlarge)
Sites like iStockphoto, a stock agency that carries photos, illustrations, video and Flash files, are an excellent resources for finding Flash components that would otherwise take hours, if not days, more to build. I used this file and others like it for a recent Flash feature on dancing celebrities that had to be finished in less than 5 hours. The results were outstanding and amusing, and incorporated the stock files into a unique Flash project.
(click thumbnails to enlarge)
iStockPhoto isn't free, and depending on the complexity of the file, isn't cheap, but it can really come in handy. I also use some of the site's stock illustrations on 10,000 Words posts when time is a factor.
iStockPhoto illustration before and after
There is also Soundslides, of course, which facilitates creating quick slideshows and a number of other Flash-based image galleries. I must reiterate that I believe wholeheartedly in originality and recognize that Flash is a time-consuming tool. But when you're in a time crunch or need a push in the right direction, the aforementioned sites can be of great service. Just be sure to make them your own, because originality trumps speed any day.
Also on 10,000 Words:
• 8 Flash tips and tricks + one big cheat sheet
• Move over Soundslides: 4 Free online slideshow creators
• Where to find the best in Flash journalism
• Do you have a multimedia emergency plan?
Labels: flash
DVD design: Great menus are great inspiration (Part I)
Thursday, January 31, 2008
I've long admired the subtle connection between DVD menus and interactive/multimedia projects created in Flash, which are often styled and laid out in a similar fashion. Below you'll find screengrabs of some great DVD menus that are designed well and can be related to a online multimedia package.
NOTE: I'm more than a little wary of using Flash to design an entire multimedia project because Flash is not search engine friendly. There are some things you can do if you want to produce a self-contained Flash piece and still increase your SEO. Instead of having an entire project designed in Flash, simply animate the things that need animating (do not animate text) and insert the smaller files into a more searchable HTML document. If the entire project is created in Flash, include a text description that contains keywords about the content of the .swf file. Also, it may be cumbersome, but try breaking up the Flash project into multiple files with text links to the different .swf files. CNET has great advice on helping Google "see" your Flash content. More information on creating a Google friendly website can be found at Digital Inspiration.
On to the menus:
The Hitchhiker's Guide to the Galaxy
More DVD menu goodness after the break
Click thumbnails to enlarge the screengrab.
William Shakespeare's Romeo + Juliet (1996)
Artificial Intelligence: AI
Rent
The Simpsons Movie
War of the Worlds (2005)
Also on 10,000 Words
• DVD design: Great menus are great inspiration (Part II)
• DVD design: Great menus are great inspiration (Part III)
• What is design?
NOTE: I'm more than a little wary of using Flash to design an entire multimedia project because Flash is not search engine friendly. There are some things you can do if you want to produce a self-contained Flash piece and still increase your SEO. Instead of having an entire project designed in Flash, simply animate the things that need animating (do not animate text) and insert the smaller files into a more searchable HTML document. If the entire project is created in Flash, include a text description that contains keywords about the content of the .swf file. Also, it may be cumbersome, but try breaking up the Flash project into multiple files with text links to the different .swf files. CNET has great advice on helping Google "see" your Flash content. More information on creating a Google friendly website can be found at Digital Inspiration.
On to the menus:
The Hitchhiker's Guide to the Galaxy
More DVD menu goodness after the break
Click thumbnails to enlarge the screengrab.
William Shakespeare's Romeo + Juliet (1996)
Artificial Intelligence: AI
Rent
The Simpsons Movie
War of the Worlds (2005)
Also on 10,000 Words
• DVD design: Great menus are great inspiration (Part II)
• DVD design: Great menus are great inspiration (Part III)
• What is design?
Bring music to life with interactivity
Thursday, October 04, 2007
Do you know what a shamisen sounds like? Do you know what it is?
If you don't, this simple multimedia project will help you become more familiar with the banjo-like Japanese instrument.
Have a musical instrument, singer or band that would make an amazing multimedia project? Get it, them, him or her into a recording booth and upload the audio files onto the web or in a Flash project. Create a replica of the instrument or take photos of the musician to make the project come alive.
Now Play It has video tutorials that teach users how to play guitar chords from their favorite songs. The site includes from an impressive lineup of artists like Radiohead, Coldplay and KT Tunstall (who actually does the teaching herself.) The chords are shown in the foreground while the music video plays. You'll be rocking out in no time.
Buckle's virtual drum set is a killer way of learning how all the different sounds come together. The interactive project shows how basic drumbeats are constructed and allows the user to make a few beats of their own with a few clicks of the keyboard.
When you're ready to put it all together, you must check out this fun animated band. Each individual band member can be selected to make a catchy samba tune. The site is in Portuguese, but a língua da música é universal.
If you don't, this simple multimedia project will help you become more familiar with the banjo-like Japanese instrument.
Have a musical instrument, singer or band that would make an amazing multimedia project? Get it, them, him or her into a recording booth and upload the audio files onto the web or in a Flash project. Create a replica of the instrument or take photos of the musician to make the project come alive.
Now Play It has video tutorials that teach users how to play guitar chords from their favorite songs. The site includes from an impressive lineup of artists like Radiohead, Coldplay and KT Tunstall (who actually does the teaching herself.) The chords are shown in the foreground while the music video plays. You'll be rocking out in no time.
Buckle's virtual drum set is a killer way of learning how all the different sounds come together. The interactive project shows how basic drumbeats are constructed and allows the user to make a few beats of their own with a few clicks of the keyboard.
When you're ready to put it all together, you must check out this fun animated band. Each individual band member can be selected to make a catchy samba tune. The site is in Portuguese, but a língua da música é universal.
The great "click here" debate
Friday, September 28, 2007
At the beginning of my multimedia journalism career, I used the phrase "click here" to direct users to different components of a multimedia project or web page. I never had a real reason, I just did it. Later, a mentor from the New York Times told me to eliminate click here in favor of more natural wording. She instead used a few words from a complete sentence as her link text. I used this same technique until I arrived at the Los Angeles Times where "click here" was absolutely necessary element of Flash projects and links were better if they blinked or were a very different color.
So who is right? A quick, unscientific Google search of the nation's 10 largest newspapers revealed that "click here" is getting some major play.
Click heres per site
1. USA Today - 86,600
2. The Wall Street Journal - 462,000
3. New York Times - 11,300,000
4. L.A. Times - 7,140
5. Denver Post/Rocky Mountain News - 231,000
6. Chicago Tribune - 47,900
7. The Washington Post - 29,900
8. New York Daily News - 5,290
9. New York Post - 25,700
10. Houston Chronicle - 4,530
USA Today ranks highest amongst major news sites in Google Search for its use of the phrase. CNN and Fox News follow close behind.
A recent study shows that "click here" does indeed make users click there. Another study found that "click to continue" works much better than "continue to article" or "read more."
So who is right? A quick, unscientific Google search of the nation's 10 largest newspapers revealed that "click here" is getting some major play.
Click heres per site
1. USA Today - 86,600
2. The Wall Street Journal - 462,000
3. New York Times - 11,300,000
4. L.A. Times - 7,140
5. Denver Post/Rocky Mountain News - 231,000
6. Chicago Tribune - 47,900
7. The Washington Post - 29,900
8. New York Daily News - 5,290
9. New York Post - 25,700
10. Houston Chronicle - 4,530
USA Today ranks highest amongst major news sites in Google Search for its use of the phrase. CNN and Fox News follow close behind.
A recent study shows that "click here" does indeed make users click there. Another study found that "click to continue" works much better than "continue to article" or "read more."
Labels: flash, site management
How to create drag and drop objects in Flash
Wednesday, August 29, 2007
Kirupa.com has a easy and helpful tutorial on how to create interactive objects in Flash that can be dragged and dropped. The insanely addictive Stardoll makes great use of a similar technique to create interactive paper dolls. This technique can also be used to create draggable photos or interactive games.
Here's an example that I produced last year for the Contra Costa Times. Click "continue" and select "Carolyn Dundes." The remote is both draggable and interactive.
As you can see, the remote is an odd shape and has a transparent drop shadow. To create draggable items in Flash that are not rectangles or squares, create your image in Photoshop or Illustrator with a transparent background. In the File menu, click save for web and select the "PNG-24" option. You can then import that object into Flash and it will retain its shape and/or transparency.
Here's an example that I produced last year for the Contra Costa Times. Click "continue" and select "Carolyn Dundes." The remote is both draggable and interactive.
As you can see, the remote is an odd shape and has a transparent drop shadow. To create draggable items in Flash that are not rectangles or squares, create your image in Photoshop or Illustrator with a transparent background. In the File menu, click save for web and select the "PNG-24" option. You can then import that object into Flash and it will retain its shape and/or transparency.
Labels: flash
How did they do that? How to deconstruct websites and Flash files
Thursday, August 16, 2007
When viewing a stellar website or multimedia project, the temptation exists to figure out how they did it. A lot of it is having a good eye, but there are some tools that will help you discern how the site was put together.
One of the quickest ways to see the inner workings of a site is to scan the source code. In Firefox or Internet Explorer select "View" from the file menu and choose either "Source" or "View Source." A text document with the source code of the website you are viewing should appear.
An easier alternative is to use the site BuiltWith. Simply enter the web address of the site you are interested in and BuiltWith will tell you what elements are used on the site. For example, here are the elements that make up the 10,000 words site (Hint: Google Custom Search, Blogger, Flash, Feedburner and RSS, plus other things.)
Deconstructing a Flash file is not as simple, but there are tools like Sothink's Flash Decompiler and Eltima's SWF Decompiler that convert SWF files to FLA files. Both are free to try.
One of the quickest ways to see the inner workings of a site is to scan the source code. In Firefox or Internet Explorer select "View" from the file menu and choose either "Source" or "View Source." A text document with the source code of the website you are viewing should appear.
An easier alternative is to use the site BuiltWith. Simply enter the web address of the site you are interested in and BuiltWith will tell you what elements are used on the site. For example, here are the elements that make up the 10,000 words site (Hint: Google Custom Search, Blogger, Flash, Feedburner and RSS, plus other things.)
Deconstructing a Flash file is not as simple, but there are tools like Sothink's Flash Decompiler and Eltima's SWF Decompiler that convert SWF files to FLA files. Both are free to try.
Labels: flash, site management
Essential Reading: Flash 8 for Dummies
Sunday, July 22, 2007
It is tempting to call Flash 8 for Dummies the Flash Bible but that already exists. Nevertheless, this title from the ...for Dummies line is the standard for anyone looking to improve their Flash skills. The book starts off with the basic steps of creating a Flash movie and gradually discusses more advanced nuances like embedded video and ActionScript. Intermediate Flash users can skip ahead a couple of chapters and not miss a beat. The book includes detailed how-tos on adding interactivity, using buttons and actions and even creating preloaders. All in all, this a go-to guide that every multimedia reporter should have handy.
Visit the ...for Dummies website to order a copy or purchase a previously owned copy here.
How to create your own panoramic images
Sunday, July 22, 2007
Interactive panoramic images are popping up all over the web. Some of the best, like this Google Street View of Miami, give users a 360° view of a particular area. In the past this required an expensive camera or a lot of time. Now all you need is a digital camera and a little bit of patience. The following instructions will help you build a panorama similar to this interactive panorama of the WEB DuBois Centre in Ghana. Most digital cameras have a feature that allows the photographer to line up the viewfinder to create a series of photographs that eventually become a panorama. If your camera doesn't come with this feature you can either eyeball the area and merge the images in Photoshop or use AutoStitch to create the panorama.
Once you have the final image, follow the instructions at Kirupa.com to upload the image into Flash. Add a little ActionScript and voila! Panorama!
Also on 10,000 Words:
4 Sites for viewing panoramas (and 3 ways to create them)
Online virtual worlds bring history to life
Sunday, July 15, 2007
UC Berkeley Journalism professor and recent Knight News Challenge grant recipient Paul Grabowicz and the students of UC Berkeley are on to something big. Their online video game, "Remembering 7th Street," is a virtual recreation of 1940s and 50s Oakland that will allow users to explore the city as it existed during the jazz and blues era. Read Grabowicz' interview with Anthony Wojtkowiak of Poynter here.
A similar project, Virtual Lower East Side, allows users to create avatars and take a virtual tour of the neighborhood. Users can chat with others, upload blog entries and upload music and photos.
Recreating a virtual city takes time and a lot of research. Consider creating a virtual tour on a less grand scale such as the animated (and pixelated) Flash-based worlds of Postertronic or the even simpler Google Maps-based Virtual Tourism (check out this Google Map mashup of Independence Hall in Philadelphia. Regardless of how it is done, a tour of a neighborhood or city is better enhanced by user contributions and social interaction.
A similar project, Virtual Lower East Side, allows users to create avatars and take a virtual tour of the neighborhood. Users can chat with others, upload blog entries and upload music and photos.
Recreating a virtual city takes time and a lot of research. Consider creating a virtual tour on a less grand scale such as the animated (and pixelated) Flash-based worlds of Postertronic or the even simpler Google Maps-based Virtual Tourism (check out this Google Map mashup of Independence Hall in Philadelphia. Regardless of how it is done, a tour of a neighborhood or city is better enhanced by user contributions and social interaction.
