Teaching Examples


Your very first Flash package
June 28, 2007, 2:11 pm
Filed under: Flash, graphics, interactive, journalism, photojournalism, tools

It takes me eight weeks to teach Flash to undergraduate journalism students. That’s starting from zero. If they do all the homework and study all the examples, they can be very good at the end of eight weeks. Mostly it takes time and dedication, rather than any special talent or computer aptitude.

When I do training for professional journalists, I don’t have eight weeks. So I always face this dilemma: Do I begin at zero, and just get them started? Or do I begin at a later point, assuming they already know certain things? (Usually I have only three to four hours in a training session!)

The trouble with running a beginner session: At the end, the attendees still can’t really make anything on their own. The trouble with running an intermediate session: Too many people in the room don’t yet understand some of the key techniques.

Yesterday I did half a day of Flash training at a newspaper, and I developed a new teaching tool for the occasion. It’s called Simple Flash Project: Single SWF and the point is for you, the student, to download the FLA and use it as a learning tool. (Go ahead, look at the SWF and then download the FLA.)

I deliberately built the SWF to leave out everything that I consider “post-beginner” in Flash authoring. So it includes NO MOVIE CLIPS. No scenes. No externally loaded assets of any kind. It also includes nothing that was drawn — the graphics are all photos.

There are three separate segments, as any news graphic might have. The SWF is only 73 KB. The entire Timeline is 80 frames long.

There are three different animations, using photographs.

Most important, there are buttons and frame labels. You’ve got to have those if you are going to create separate parts in the package. People often ask me, “How to you make it skip from one section to another?” Buttons and frame labels. That’s how.

Here’s a list of beginner Flash journalism skills. These are the skills you have to nail down before you can build a journalism package.

  1. Simple animation, both tweened and frame-by-frame (Graphic symbols)
  2. Importing photos and other bitmaps
  3. Use of layers
  4. Use of keyframes
  5. Buttons — both making them and scripting them (Button symbols)
  6. Use of frame labels
  7. ActionScript: stop();
  8. ActionScript: gotoAndPlay(“framelabel”);

Now, I will be the very first to admit that not everyone in the newsroom needs to learn Flash. But somebody in your newsroom should learn it! Ideally, I would say that all your news graphic artists should know everything listed above. Then, also ideally, there should be one person — artist, photojournalist, online producer — who goes beyond the list and learns how to develop more sophisticated interactive graphics.

Technorati tags: | | | | | | |



Flash journalists: I need your help
June 22, 2007, 7:57 pm
Filed under: design, Flash, journalism, multimedia

I have been working for some time on ways to teach people how to manage bigger Flash projects. This is one of those cases where I’m finding it hard to figure out how to teach something I know how to do, because (a) the process is so holistic; and (b) every project is different.

So I wrote a document and posted it as a PDF:

Managing Large Story Packages in Flash (PDF file, 410 KB, illustrated, 6 pages)

It’s not hard to read, and there’s no code in it. What I need your help on: Is this what you need to know, when you’re at that stage of knowing enough Flash to build a little thing, but not sure where to go next? Am I on the right track to help you get to that next level?

E-mail or comments — either way, I’ll be grateful.

Technorati tags: | | | | | | | |



Something amusing for the weekend
June 17, 2007, 3:53 pm
Filed under: Flash, interactive

Brought to you by Current TV.

Link via Seth in my del.icio.us network.

Technorati tags: | | | | | | |



Multimedia project: St. Louis Blues
June 12, 2007, 2:59 pm
Filed under: Flash, multimedia, music, online

Wowee! That’s my reaction to this sweet project from the St. Louis Post-Dispatch:

St. Louis Blues

I love the cigar box! And the “Roots” section: Wow! WOW!

This is the real American music, and St. Louis has a special stake in it.

Flash programming by Brian Williamson. Assistant programmer: Jacob Piercy.

Technorati tags: | | | | | | |



Photojournalism: American Diversity Project
May 22, 2007, 3:02 pm
Filed under: Flash, journalism, multimedia, online, photojournalism, storytelling

The 2007 American Diversity Project is set in Clarksdale, Mississippi. It’s a photojournalism package with audio, multimedia, and traditional (silent) photo stories that documents a place.

2007 American Diversity Project
The photo work is excellent, well worth a look.

The Flash package has some very good points and a few unfortunate bits.

Good points: Single-screen interface, no pop-up windows, no scrolling. Easy to use, consistent. The interface does not interfere with the stories or your experience of viewing, listening and reading. SEPARATE HTML PAGES: This is AWESOME. It means you can bookmark, for example, Stories or Multimedia or Photographers. Each segment has its own unique URL. Too cool!

2007 American Diversity Project
Unfortunate bits: The package design is too tall for 1024 x 768 (but the width is perfect). It is only just barely too tall — but the menu and navigation for almost everything in the package is at the BOTTOM. This became increasingly frustrating for me the longer I spent in the package. The tiny overflow in height would not have been a real problem except that I had to scroll to navigate on every single segment.

The maximum dimensions my screen can accommodate at 1024 x 768: 1005 pixels in width, 588 pixels in height. According to recent stats at Browser News, about 81 percent of today’s Web page accesses show a monitor resolution of 1024 x 768. PLEASE convey this information to your designers and multimedia producers!

2007 American Diversity Project
The text has that slightly blurry problem that Flash text is prone to if you don’t make the proper choices while authoring in Flash. In other words, you don’t need to settle for fuzzy fonts in Flash! But you have to know what to do to ensure that the text is sharp and clear.

For me, the site menu had too many items on it. I would rather have seen section pages that clustered the photo work, the “about” materials, and the backgrounders.

Also, what about a map, folks? Where is Clarksdale, Mississippi?

Technorati tags: | | | | | | | |



Popular Flash Journalism tips
May 21, 2007, 10:39 pm
Filed under: Flash, journalism, multimedia, online

I was poking around in the stats for my Flash Journalism site and noticed that a few of the very short “tips” tutorials are quite popular — there seem to be a lot of searches for these.

Also popular: The page of links to professional examples.

Technorati tags: | | |



Screen Design 101: New York Times Slideshow
May 3, 2007, 12:57 pm
Filed under: design, Flash, journalism, multimedia, online, usability

So, you have decided to venture out beyond Soundslides and design an original interface for your site’s slideshows (or videos). Let’s take a look at a good example from The New York Times. Amazing Girls is a package of five audio slideshows that accompanied a text story about high-achieving students at Newton North High School, near Boston.

Amazing Girls, The New York Times
I’ve long admired how the typical Times design gives full emphasis to the photos without making the controls or other features hard to find or understand.

New York Times player controls
The main player controls could not be more clear or easy to use. The added color cue (for those of us who are not red-green colorblind, that is) makes a nice extra.

New York Times package info
I’m very fond of how the credits and other information work. (These are opened by the controls in the lower right corner of the package.) First, the slideshow pauses automatically when this opens. Second, everything else dims to give visual priority to the overlay box. Third, the information about the package — including a link to the text story it goes with — is all bundled into the package, so it won’t get separated or disconnected in the future. Notice that the publication date is embedded in the package — what a great idea! (Too many online packages fail to include any date at all, even a year.)

New York Times preloader
The preloader graphic is unobtrusive and easy to understand. Each of the five slideshows loads on demand, which is a smart choice for handling the downloads.

There are two things in this design that I would like to see improved.

New York Times tool tips
The first is very simple. The pop-up “tool tip” labels for the secondary controls (those in the lower right corner) are, unfortunately, partly hidden by the mouse cursor. The solution would be to float the labels above the button text instead of below it.

New York Times segment buttons
The second change I suggest would take more effort, but I think the benefit to the visitor or viewer would really be worth it. There are five buttons across the top of the package that link to the five segments, or slideshows, in the package. They provide nice, clear feedback — when you roll over one, the appearance changes. But what’s missing is a preview. The labels on these buttons are sort of evocative, but they are not very informative.

I think you could preview the content in each slideshow in one of two ways. The first would be a simple teaser, just a text overlay or slide-down panel that told us a little bit about Kat or Colby — so we would know if we really want to click. The second way would be a nice audio snippet, in the girl’s own voice, no more than five seconds. Of course, you could provide both on rollover.

This isn’t hard to do, but it would mean more content work. That is, the editors and producers would have to spend maybe an additional hour on the package to add five previews. But consider the possible pay-off in extra viewing time and satisfaction. After I have already viewed two or three of these slideshows, I might be thinking, “Eh, Kat, Colby, I’ll just skip them.” But if I rolled over and you hooked me with the teaser — then I would click.

I really like the way the Times’s slideshows and other package templates have evolved. As other news organizations start to develop their own templates for audio and visual content, they can learn a lot just by exploring and experiencing the Times’s online packages and thinking about what works well in them — and why.

Technorati tags: | | | | | |