Archive for the ‘Flash’ Category

Advanced Text Layout Framework for Flash Open-Sourced (Adobe)

Thursday, July 23rd, 2009


[Editor's note: Finally, Adobe's purchase of Macromedia is bearing fruit! The fine-control that Illustrator and InDesign have over typography (text layout) is now available in Flash and Flex as an ActionScript 3.0 framework. There are even a few controls I wish would make it back to Illustrator, like where in the text container the text starts from (not always the top-left hand corner) and allowing images and graphics to be embedded in the text frame, ala Freehand. Also note the Photoshop style numerical control scrubbers!]

Republished from Adobe Labs.

Welcome to the beta release of the Text Layout Framework for Adobe® Flash® Player 10 and Adobe AIR® 1.5. The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flash CS4 Professional or Adobe Flex®, and is already included in the next version of Flex, code named Gumbo. Developers can use or extend existing components, or use the framework to create their own text components. Source code and component library for TLF are now available as open source at no charge under the Mozilla Public License at

Together with the new text engine in Flash Player 10 and AIR 1.5, the Text Layout Framework delivers multi-lingual, print-quality typography for the web, including support for:

  • Bidirectional text, vertical text and over 30 writing systems including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, and others
  • Selection, editing and flowing text across multiple columns and linked containers, and around inline images
  • Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography
  • Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
  • Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
  • Rich developer APIs to manipulate text content, layout, markup and create custom text components.

For a complete list of features and more information regarding this beta, please see the release notes. Please help us ensure that the final release of the Text Layout Framework will be of the highest quality by installing and using this beta version and sending us your feedback on the Text Layout Framework forum.

Open Source

The Text Layout Framework is now an open source project.

Jackson’s Billboard Rankings Over Time (NY Times)

Wednesday, July 8th, 2009

[Editor's note: Like him or not, Michael Jackson had 30 years of sustained hits, comparing well statistically with other pop music legends as this interactive from the New York Times shows.]

Republished from the New York Times. June 25, 2009.

A timeline of how Michael Jackson’s songs performed on the Billboard Hot 100 chart.

(Screenshot below) Interact with the original at New York Times . . .


Matthew Bloch, Shan Carter, Jonathan Corum, Amanda Cox and Matthew Ericson/The New York Times

Using Data Visualization as a Reporting Tool Can Reveal Story’s Shape (Poynter)

Friday, June 26th, 2009

[Editor's note: My colleague Sarah Cohen at The Washington Post was recently interviewed by Poynter about creating data visualizations to help readers understand and reporters research complicated stories. Sarah is on her way to a big new gig at Duke University.]

Republished from Poynter.
By Steve Myers at 6:12 AM on Apr. 14, 2009

Readers have come to rely on interactive presentations to understand complicated stories, using them to zoom in on periods of time and highlight areas of interest. Yet to investigate these stories, reporters often create what amounts to handcrafted investigative art: flow charts with circles and arrows, maps shaded with highlighters and stuck with pins.

More and more, though, some reporters are using data visualization tools to find the story hidden in the data. Those tools help them discover patterns and focus their reporting on particular places and times. Many of the presentations, which can have rough interfaces or less-than-sleek design, are never published.

At the recent National Institute for Computer-Assisted Reporting (NICAR) conference, Sarah Cohen, database editor for The Washington Post‘s investigative team — and recently named professor of computational journalism at Duke University — showed how reporters can use interactive graphics for their exploratory reporting. [PDF]

Cohen described this approach to me via e-mail. Here’s an edited version of our exchange.

Steve Myers: How would creating a digital, visual representation of data help a reporter? What does it tell you that you wouldn’t be able to find otherwise?

Sarah Cohen
Sarah Cohen

Sarah Cohen: The same way that visualizations and graphics help readers cut through a lot of clutter and display dense information in an efficient way. The most common things that early visualizations help with are place and time — two of the most important elements in reporting a complex story. Those two things are really hard to see in text. They’re really, really hard to see in combination. So the graphics can show you where to go to find your subjects or where to go to find the most typical subjects. They can also show you when the story you are trying to find peaked. Put them together, and you can start finding the very best examples for your story.

That’s pretty general, so let me give you a couple of examples. During a story on disaster payments in the farm subsidy system, we wanted to make sure that we went to places that had received the payments year after year after year. Using a database, we could find farms that had received multiple payments pretty easily. But looking at repeated images of density maps that I made of the payments, it was really obvious where to go — specific areas of North Dakota and Kansas.

Crop payments
Sarah Cohen/Poynter illustration
Cohen used density maps to figure out what areas of the country had received disaster payments year after year.

In another example, we were working last year on a story on practices used by landlords to empty their buildings, partly in order to avoid strict laws on condo conversions (visualizations: research version, published version. We knew one neighborhood of the city was Ground Zero — an area called Columbia Heights, in Northwest D.C. But making an interactive map with a slider that showed the timing, we could see that it was moving into other areas of the city, especially in Southeast. We could also quickly see that the most affluent areas of the city had none of them.

Continue reading at Poynter . . .

Yahoo! Geo Technologies

Monday, June 22nd, 2009

[Editor's note: Yahoo! provides advanced mapping capabilities including GeoPlanet, a Web 2.0 gazetteer of world placenames (see also GeoName's post on the relational ontology / the semantic web).]

Republished from Yahoo!

Yahoo! wants to connect the Web to the World; here you can access our increasing portfolio of platforms to help you geo-enrich your applications and make the Internet more location-aware:

GeoPlanet™: Provides the geographic developer community with the vocabulary and grammar to describe the world’s geography in an unequivocal, permanent, and language-neutral manner. (Blog post)

GeoPlanet Data: Tab-delineated files containing WOEIDs and the corresponding place-names that underlie GeoPlanet.

Placemaker™: Identify, disambiguate, and ‘extract’ places from unstructured and structured textual content to help create local- and location-aware applications. (Blog post)

Fire Eagle™: Allows users to share their location with sites and services through the Web or a mobile device.

Maps: Embed rich and interactive maps into your web and desktop applications.

Visualization: Geomap (Google)

Friday, June 19th, 2009


[Editor's note: Google has made freely available the curious choropleth (colors by country) and graduated symbol (bubble) maps found in their Google Analytics tools as part of their charting - visualization kit. You set-up a HTML JavaScript object with the map parameters (country-value pairs or city-value pairs) and the colors and Google will make you an interactive Flash map (data brushing reveals country value on mouseOver) color coded via uninformative class breaks and terrible cartography linework (look at the US, Canada border) and a terrible world map projection (cylindrical with gross distortions in the higher latitudes). But it is free and fast and several regional base map are also available. There is certainly an oportunity for someone else to come up with a better API that uses the same function calls but draws better maps with meaningful data classes. Screenshot above is static, click on it to go to interactive version.]

Republished from Google Visualization.

Overview: A geomap is a map of a country, continent, or region map, with colors and values assigned to specific regions. Values are displayed as a color scale, and you can specify optional hovertext for regions. The map is rendered in the browser using an embedded Flash player. Note that the map is not scrollable or draggable, but can be configured to allow zooming.

We have two examples here: one that uses the regions display style, and another that uses the markers display style.

Regions Example

The regions style fills entire regions (typically countries) with colors corresponding to the values that you assign. Specify the regions style by assigning options['dataMode'] = ‘regions’ in your code.

Markers Example

The “markers” style displays a circle, sized and colored to indicate a value, over the regions that you specify. To use markers, you must include the following Google Maps API script with a key, unless you specify locations using latitude and longitude values.

Continue reading at Google . . .

PatchPanel: Flash Panels for Multiple CS Applications (Adobe)

Thursday, June 18th, 2009


[Editor's Note: ]

Republished from Adobe Developer Connection.

By Dr. Woohoo @

Follow along with this tutorial to expand on what we created in the previous tutorial, PatchPanel: Integrating your ExtendScript, with the objective of using a framework that embraces running our Flash plug-in in multiple Creative Suite applications (Photoshop and Illustrator). When we are done, our Flash plug-in will work in all three CS applications using code that is appropriate for each host application― keeping in mind that this is necessary due to the differences in the DOMs of each application.

Our Flash plug-in will get the RGB values of the foreground color of the host CS4 application. You will integrate a separate ActionScript file for each host application within the Flash plug-in that you develop within a Flex Builder MXML project using the PatchPanel SWC library as the mechanism for communicating between your SWF and the host application, which will dynamically be defined in this example.

After completing this tutorial, you should be able to:

  • Add the Adobe PatchPanel SWC library, cs4.swc, to your Flex Builder Project
  • Import the host CS applications ExtendScript DOM
  • Copy your ExtendScript code from ExtendScript Toolkit to Flex Builder
  • Know what the appropriate color object structure is within the DOM of the three possible host applications
  • Install the SWF and accompanying JSX/JS file so that it is accessible from within Photoshop and Illustrator

Continue reading at Adobe Developer Connection . . .

CIA World Factbook Relation Browser (moritz.stefaner)

Wednesday, June 10th, 2009


[Editor's note: This interactive visualization browses the CIA World Factbook topology of geography by country. Featured edge relationships include neighboring countries, spoken language, and more.]

Republished from Moritz.Stefaner.

This radial browser was designed to display complex concept network structures in a snappy and intuitive manner. It can be used to visualize conceptual structures, social networks, or anything else that can be expressed in nodes and links.

The CIA Factbook demo displays the relations of countries, continents, languages and oceans found in the CIA world factbook database. Click the center node for detail information or click adjacent nodes to put them in the center. The arrows on the top left can be used to navigate your click history. Use the dropdown in the upper right to directly access nodes by name. The varying distance to the center node for nodes with many neighbors was only introduced to enhance legibility and does not have a special semantics.

INTERACTIVE: In Search of Health-Care Reform (Kelso via Wash Post)

Tuesday, June 9th, 2009

[Editor's note: This panel-based audio narrative tracks the debate over reforming the United States health-care system, one of the most expensive in the world. The interactive was conceptualized in tandem with a large, full page print graphic and related article.]

Republished from The Washington Post. June 9, 2009

President Obama campaigned on promises to improve the nation’s health system. This summer, Congress will attempt to deliver on the pledge. Remaking a sector that represents one-fifth of the nation’s economy won’t be easy. Here’s a look at the present health system and its challenges, along with some of the solutions under consideration.

Screenshot below. Interact with the original . . .


SOURCES: Centers For Medicare and Medicaid Services, Office of Management and Budget, Kaiser Family Foundation, Alliance for Health Reform, Organization for Economic Co-operation and Development, Senate Finance Committee, Commonwealth Fund

Interactive by Karen Yourish, Laura Stanton, Nathaniel Vaughn Kelso, Sarah Lovenheim and Ceci Connolly — The Washington Post

Shapefiles, Actionscript 3.0, and Google Maps (Box Shaped World)

Monday, June 8th, 2009

[Editor's note: Tutorial for using the vanrikom classes to read in shapefiles in Flash and Flex AS3 and display them on a Google Maps mashup.]

Republished from the Box Shaped World blog. 28 April 2009.

I’m working an Adobe AIR application and I wanted to be able to have the user select a shapefile, and then parse it to create a KML file.  I didn’t want to have the user be responsible for creating a KML file.  I thought I might try and crack the shapefile enigma since it is a well documented format, but that would have taken time and I suddenly realized I’m not actually a developer :).  Instead, I found this set of Actionscript Classes to parse a shapefile in Flash.  Unfortunately, I didn’t find a very good tutorial on how to work with the classes.  The example is a little confusing (at least for me) and also uses a far file.  I’d never heard of far compressed files.  So I took the classes and created my own parser.  I thought I would post a tutorial on how to use these shapefile classes in conjunction with AIR and the Google Maps API for flash.  This technique would work with flex as well, I just didn’t want to have to write the code to upload a file.  I presume a few things with this.  The shapefile you are using for this should already have a geographic projection (e.g. latitude and longitude Geographic NAD 83).  In order to use the Google Maps API with AIR, you need a URL with a key associated with it.  Below are two zipfiles available for download.  The is the shapefile I was using.  The is the downloaded actionscript classes from the Google Code repository.  I had trouble downloading the using an svn so I did it manually.  I’ll save you the time by making it available here…unless the original author asks me to remove them.  There are parts that I find confusing with the way the reader was set up.  For some reason polyline inherits from polygon.  Intuitively to me it should be the other way around…but like I said, I’m not a developer.

This was all done using FlashDevelop and the Flex SDK 3.  There are 4 custom classes in addition to the mxml file.  Each are shown here.

Continue reading at Box Shaped World . . .

SND Multimedia Award: Head Count – Tracking Obama’s Appointments

Friday, June 5th, 2009

My group interactive Head Count – Tracking Obama’s Appointments from March 2009 received an award from the SND: The Best of Multimedia Design Competition Q1 2009 in the 2a “news” category. This makes it eligible for the annual contest. Not bad for a project that’s gotten over 500,000 page views in 3 months!

Judges Comments:
An incredible set of data coupled with innovative presentation, tracking mechanisms and layers of detailed biographic and editorial information.Comprehensive, sophisticated example of a database-driven graphic. So much information, so many ways to explore it. The cross-linking and interconnectedness of the information is impressive. All in all, an impressive database graphic.

See my earlier post about this project.