Data is big these days. That’s why I’m excited to be teaching a new course at the City University of New York Graduate School of Journalism, Data-driven Interactive Journalism, which will be offered for the first time in the Spring of 2012.

I proposed and developed the 15-week 3-credit course which explores new ways of telling stories with data. Students are required to pitch, report, conceptualize, design, and produce compelling data-driven pieces. My goal is to introduce students to this exploding new field that encompasses statistical and design literacy, data visualization, programming, and interactivity. My assignments challenge them to think of data in broader terms, and to deal with multiple approaches for gathering data–whether they be extracting numbers from published reports, scraping the web, or hitting the pavement and collecting their own. Our tool set is broad, but we’re relying on Tumult Hype, a relatively new and inexpensive (Mac only) tool to visually author HTML5 content.

Joining me in this adventure is Amanda Hickman, previously the Deputy Editor at New York World, Program Director of DocumentCloud, and Director of Technology at Gotham Gazette. Together I think we can address the growing need for journalists not just to be thinking about data, but  to be specifically thinking about data visually, interactively, and with narratives.

To see the options for a Flash movie, and to change the data that it can save, move your mouse cursor over the Flash movie and right-click (control-click for Macs) to access the contextual menu.

Choose the Settings option at the bottom of the menu. The Flash Player settings dialog box appears–click on the Local Storage tab, which looks like a folder with a green arrow pointing into it. The tab will indicate what site controls the Flash content and the origin of any Flash cookie that may be saved on your computer. You can move the slider bar to increase or decrease the amount of data that the particular Flash movie can save. The default amount of data that Flash can store is 100KB.

How do Flash cookies actually work? Flash ActionScript uses the class called SharedObject to save, store, and retrieve data from Flash movies. When you use a SharedObject, you can store a highscore from a game, a login or password to make it convenient for repeat visitors, or keep track of videos that have already been viewed. It’s important to know that a SharedObject is stored locally on a particular computer, so any data that is stored doesn’t follow you if you visit the same site on a different computer.

To keep track of information in a Flash movie, first instantiate a SharedObject and call the getLocal() method like so:

var mysharedobject:SharedObject = SharedObject.getLocal(“mycookie”);

The getLocal() method looks for a cookie called “mycookie” on the user’s computer, and retrieves any existing data. If the cookie doesn’t exist, Flash creates one. You can have multiple pieces of data stored within a single cookie–there is no need to create multiple SharedObject instances.

Now, simply assign information to a variable of the data property of your SharedObject instance, like so:

mysharedobject.data.firstname = “Russell”;

You can store any kind of data that Flash can handle. For example, you can retrieve and store the date and time that the user visited your Flash movie with the following code:

var mydate = new Date();
mysharedobject.data.thedate = mydate.getDate();
mysharedobject.data.thehour = mydate.getHours();
mysharedobject.data.theminute = mydate.getMinutes();
mysharedobject.data.thesecond = mydate.getSeconds();

To write the information in the cookie, now call the flush() method. When you quit the Flash movie (or leave the site), the flush() method is automatically called, saving the information, but the flush() method lets you choose when to save the information.

mysharedobject.flush();

When the user returns to your Flash movie, you can retrieve any of the stored data by using the getLocal() method and then reading the information in the data property of your SharedObject instance, like so:

var mysharedobject:SharedObject = SharedObject.getLocal(“mycookie”);
trace(mysharedobject.data.firstname);
trace(mysharedobject.data.thedate);
trace(mysharedobject.data.thehour);
trace(mysharedobject.data.theminute);
trace(mysharedobject.data.thesecond);

Test out how a SharedObject works by entering your name in the following Flash movie. Then close your browser window and return to this post. You’ll see how my Flash movie remembers and displays your name on your return visit in addition to the time that you last entered your name.

Source Files

Download the FLA source files for the tasks in the book, along with sample movies, images, and audio files. Study how they were put together, explore the ActionScript code, and use them as launching off points for your own experiments.

Companion site with source file downloads

Adobe Home

Adobe’s corporate site features software updates, documentation, tutorials, a searchable database of tech notes, profiles of Flash work, and a dedicated Developer center. Learn more about the product, purchase it, and find related software.

Adobe Flash product site

Adobe Flash Developer Center

General Resource Sites

You can find just about anything and everything related to Flash on the Web, but you can start your search with these sites. Most offer tutorials, FLA source files, news, links to even more Flash sites, resources such as music clips and fonts, and message boards organized by topic and experience level, where you can post questions. Connect with the international community of Flash fans through these portals.

www.Flashkit.com

www.ActionScript.org

www.Flashmagazine.com

www.Kirupa.com

www.GoToAndLearn.com

www.FlashPerfection.com

Flash Blogs

Read what’s on the minds of many designers and developers doing Flash and enjoy their random musings, opinions, tips, current work, rants, and raves. These bloggers have their eyes constantly on the web, scouring it for all the latest developments so you don’t have to.

Adobe Weblogs, the launching point for many blogs.

Emmy Huang, Product Manager for Flash Player

Lee Brimelow (the FlashBlog)

Tinic Uro (blog.Kaourantin.net)

Colin Moock

Peter deHaan

Trevor McCauley (Senocular)

Justin Everett-Church

Paul Robertson , contributing author for the previous version of this Visual Quick Pro book

Design, Commercial, and Experimental Sites

See what other designers, animators, and programmers are doing to push the limits of Flash. Many of these folks have been with Flash for long time and are early creative pioneers. Although you’ll find a mix of commercial and free content, they are still noteworthy for their originality and aesthetics.

Jonathan Harris

www.Etsy.com

Joshua Davis

www.natzke.com

www.yugop.com

www.Orisinal.com

Nosepilot

www.VectorPark.com

www.wireframe.co.za

www.Hillmancurtis.com

www.Ultimatearcade.com

Flash Collections

Explore the many more excellent Flash sites showcased and collected in these galleries.

Smashing Magazine, 50 Most Beautiful Flash Sites

www.TheFWA.com

www.DopeAwards.com

Interactive Narratives

In this simple example, you’ll see how the y-position of the cursor can map to the horizontal and vertical scaling of an image. When you map one property to another, consider the following:

1. Listen for the MOUSE_MOVE or ENTER_FRAME event

You want to provide immediate visual translation based on your viewer’s input. As your viewer moves their mouse over the controls, they should receive visual/auditory feedback. So, use the MOUSE_MOVE event or the ENTER_FRAME event to listen for the different changes in mouse position. The MOUSE_MOVE event fires whenever the mouse moves. The ENTER_FRAME event fires constantly at the frame rate of your Flash movie (so if your movie is set at 30 frames per second, the ENTER_FRAME event fires 30 times a second, even if you only have a single frame on your timeline).

2. Keep track of the mouseX and mouseY properties

The mouseX and mouseY property represents the horizontal and vertical position of the mouse cursor. As the user moves their mouse, the MOUSE_MOVE or ENTER_FRAME event gets triggered, and you can track the changing values of mouseX and mouseY.

3. Translate the changing values of mouseX and mouseY to a range of values appropriate for another set of properties

Do some algebraic manipulation to map the mouseX and/or mouseY values to a range that’s acceptable to your target property. For example, if you want the mouseX or mouseY value to map to the volume of a sound, you’ll want to generate a range of values from 0 (no volume) to 1 (full volume).

Look at this example and the AS3 code that generates the interactivity:

scale_mc.buttonMode=true;
bar_mc.buttonMode=true;

scale_mc.addEventListener(MouseEvent.MOUSE_MOVE, scalemap);
function scalemap(e:MouseEvent):void{
 map_mc.scaleX=.5+(mouseY-scale_mc.y)/scale_mc.height
 map_mc.scaleY=map_mc.scaleX

 bar_mc.y=mouseY
}

In this example, the y-position of the cursor changes the properties scaleX and scaleY. How is this done? First, the position of the cursor is mouseY. We subtract the position of the scale_mc movie clip, so the resulting value ranges from 0 to the height of the scale_mc movie clip. Dividing by the height results in a range from 0 to 1. We add .5 to this so the map doesn’t actually get so small that it disappears. So the final range is from .5 to 1.5.

The last line in the function simply moves the black bar to the same y-position as the mouse cursor to serve as a marker. That is also a mapping, but a direct one, with no algebraic manipulation needed.

I recently gave a talk, which is now up at The Data Visual. The Data Visual is a new blog from the Spatial Information Design Lab at the Columbia Graduate School of Architecture. Its purpose is to document the way data is structured and visualized in contemporary society.

The Lab itself has spearheaded a cross-disciplinary discussion series to bring together the work from different parts of the school, including the Architecture School, Computer Science, and the Journalism School.

I started off the series discussion last year. Read a summary of my talk and the resulting discussion on the blog.

Tracking audio changes assume that louder scenes (explosions, musical crescendos, shouting) correspond to higher levels of drama. Rapid visual changes (quick motion across the screen, camera motion, or quick edits) also correspond to a quicker tempo and higher levels of drama. I measured visual change by calculating differences in adjacent RGB histograms every tenth of a second. A combined index graphed over the length of the movie represents its unique fingerprint, revealing its dramatic highs and lows.

This screenshot shows the real-time analysis of Star Wars. Click to explore the Story Analysis tool. Use it to analyze your own movies (FLV or MP4), output the data and post the results here.

Analysis of forty movies–the top ten of all time, the worst ten, the ten highest grossing films, and the previous ten Best Pictures–not surprisingly reveal no common pattern, but it does provide an objective way of tracking a film’s dramatic peaks and valleys–their position, duration, and intensity. This screenshot is a profile of Star Wars. Note the dramatic beginning when Princess Leia’s vessel is boarded, and the three dramatic peaks at the end: the rescue from the Death Star, the duel between Darth Vader and Obi-Wan Kenobi, and the destruction of the Death Star. Click to explore the Story Visualizer tool. You can choose to visualize any of the forty movies or data of your own.

The compilation of story profiles for the following categories are posted:

• The TOP ten films of all time, as judged by the American Film Institute (AFI)
• The WORST ten films, as rated by Rotten Tomatoes
• The ten HIGHEST GROSSING films
• The previous ten ACADEMY AWARD winners for Best Picture

Ballistic: Ecks vs. Severs

Alone in the Dark

Crossover

Pinocchio

King’s Ransom

Superbabies: Baby Geniuses 2

National Lampoon’s Gold Diggers

Twisted

The Master of Disguise

Half Past Dead

Titanic

The Dark Knight

Star Wars

Shrek 2

E.T: The Extra-Terrestrial

Star Wars: The Phantom Menace

Pirates of the Caribbean: Dead Man’s Chest

Spider-Man

Star Wars: Revenge of the Sith

The Lord of the Rings: The Return of the King

Slumdog Millionaire

No Country for Old Men

The Departed

Crash

Million Dollar Baby

The Lord of the Rings: The Return of the King

Chicago

A Beautiful Mind

Gladiator

American Beauty

Citizen Kane

Casablanca

The Godfather

Gone with the Wind

Lawrence of Arabia

The Wizard of Oz

The Graduate

On the Waterfront

Schindler’s List

Singing in the Rain