The University of Maryland’s New Voters project blossomed out of a challenge of how to deal with more than 100 man on the street interviews with young people and their perspectives on how America should or is changing politically.

Maryland will continue to refine their invention this summer, as they embark on a reporting project that explores environmental, socio-cultural and other challenges to the Chesapeake Bay.

The idea for the Video Tag Player arose from a brainstorming session with News21 fellows at Maryland. One of their ideas centered around using keywords and tagging to create an online experience that enables users to explore a collection of video interviews by clicking on related tags.

As the interactive design consultant on the project, I opted to use Flash and XML to set up this interactive. I would
like to note that this is not the only way to develop such an interface. A similar player interface could be designed with CSS/HTML and developed with JavaScript or another scripting language.

However, several factors led me to choose the Flash-XML solution. In addition to my familiarity/specialty with it, Flash is prevalent on computers and has minimal issues with cross-browser compatibility (i.e. we don’t have to fight with Internet Explorer). Additionally, it makes for quick design and development as well as enhanced visual interface and transitions.

To store the data presented, it is only logical to use XML. It allows for easy updating and a dynamic reusable interface. Plus it is pretty easy to use and update — it is basically the equivalent of an Excel spreadsheet of data in the language of the web.

The basic design goal was a media player that would present beside tags or keywords, which users would click to show related videos in a grid on the other side. As with similar tag “clouds” on the Web, the font size of each keyword would vary depending on how many related videos were available on that topic. You can read more about how we wanted the player to work and see it in action here.

The technical aspects used to create this player can be explained by breaking it into three main elements:

• The photo/video files used to populate it
• XML file — the information that populates the interface
• Flash interface (.swf file) — the interface our user sees/interacts with

The photos and videos are stored online and loaded into the Flash interface dynamically at runtime. This enables us to change them out easily and quickly. It also eliminates large files and heavy load times.

The XML file is our basic data storage. It contains general information about our player and about each video that it plays. The XML makes the player dynamic and reusable, meaning that we can use the same interface (Flash .swf) file without making changes. The general things you can alter simply by using the XML file include the colors, the headline, the labels and the “about” text. For each video, the XML stores information, including the title, the urls of the photo and video assets, the assigned tags and the priority (used to display the “featured” videos on the initial landing screen).

Once the XML file is created, the user interface (i.e. Flash component) can literally read the values it contains to load and display the images and videos in the player, create the tag menu and sort the videos by tags.

Many people are familiar with SoundSlides, an easy-to-use software program for creating audio slideshows (with still images and sound) that relies on simple forms or templates. Our goal is to make the Video Tag Player equally easy to use by enhancing and annotating the interface to develop a templated version that will let anyone create their own video projects in the player.

After I finish developing the templated version and we put it through a robust round of testing, we hope to release the code so others will be able to create and customize video tag clouds by using simple forms to add their own media elements (videos, audio files, images, titles and so forth.)

Maryland’s 2010 News21 fellows are planning to test the templated version that I am developing by using it in their Chesapeake Bay reporting project this summer. The idea is for them to develop and publish a video project using the template, to ensure that it is simple enough for people without expertise in Flash or XML to be able to use.

Feel free to send any questions or thoughts you may have about the video tag player. I welcome your suggestions and
comments.

– Kristen Novak, News21 interactive design consultant
kristen.novak@gmail.com

Support for the development of this invention by News21 comes from the Carnegie Corporation of New York and the John S. and James L. Knight Foundation, sponsors of the Initiative on the Future of Journalism Education.