Demystifying Flash

Daigo Fujiwara

Information Graphic Artist,
The Boston Globe/Boston.com
daigo[at]daigofujiwara.com

Summary of this workshop

Have you ever wanted to fix a typo in a published Flash piece after the designer has gone home for the day?

In this session, reporters and editors get a brief introduction to Flash and learn how to make changes to a completed project without breaking it.

This class aims to demystify the widely-used product by explaining what it does and how it is used on a news organization's Web site.

Flash designer/developer jargon is explained. No Flash experience is required.

Post conference note: Exercises are designed to be done with instructor in the room, so those slides do not contain detail instructions.

What is Flash?

Adobe Flash is a multimedia creation (authoring) tool currently developed and distributed by Adobe Systems Incorporated.

A "Flash movie" can display content (text) and shapes, simple animation, video, and sound.

It is a powerful tool that is also used to create Rich Internet Application (RIA).

But before you continue... (1/3)

The web in a nutshell

Using web browser (such as Internet Explorer, FireFox, Safari, or Google Chrome), a user on an internet-enabled machine connects to a remote machine (web server, identified by Uniform Resource Locators (URL)), requests specific documents, downloads them and view them on the local machine.

But before you continue... (2/3)

The web in a nutshell

But before you continue... (3/3)

The web in a nutshell

While web documents can conceivably be in any format, Hyper Text Markup Language (HTML, .html) is the most widely used document format on the web.

Other familiar formats include .jpg, .gif, or .png for images, .mp3 for music, or .pdf for downloadable documents.

Flash Movie is one of those document format. Most modern web browser with Flash Player plug-in installed can view and use the downloaded Flash Movie.

Why use Flash?

According to Millward Brown survey, conducted June 2009, Flash Player 7 is installed on 99.0% of Internet-enabled desktops in US, Canada, UK, France, Germany, and Japan.

98.8% has Flash Player 8, and 86.7% has Flash Player 9.

Flash has benefitted greatly from popularity of websites like MySpace or YouTube, which use the Flash technology to display their video or sounds.

Example of Flash use in news

How is it used on a news organization's Web site? Some links:

Creating Flash movies

To create your own Flash movies, you do need to have (buy) a Flash software.

If you do not have Flash, you can download a 30 days free trial version of Flash from Adobe (click on "Get the trial" on the left).

In this workshop, I will assume that you have access to a computer that has Flash loaded.

Flash file types

You will see following files when dealing with Flash.

About FLA vs SWF. Those who used PhotoShop, think .psd file vs .jpg files. Or in Microsoft Word, .doc file vs .pdf file - users won't be able to edit the produced files.

Finding .swf on the web page

By reading the html source of the page, you can locate the problem .swf file containing misspelling. To view html source of web page:

Editing the problem file

You are going to need to replace the .swf file on the web server. To do that, you may need FTP (File Transfer Protocol) software or use your company's CMS (Content Management System). Every company have different way of doing this. Ask your web operations.

But first, you need to re-publish a correctly spelled .swf file.

In order to do so, you need to have access to the original .fla which is editable.

It is generally good idea to have your co-workers keep the original .fla files stored somewhere others can get to, just in case others has to make a simple update.

Opening .fla file

Once you have .fla file, you now need to locate the misspelling in the file. When you open a .fla file, this is what you'll see.

Flash interface explained (1/2)

Flash interface explained (1/2)

Items in toolbar

Exercise 1: Fix misspelled words

(You need "example1" files.)

View this example flash movie.

In the train-crash.fla file, locate misspelled words. There are three.

Exercise 2: Fix misspelled words

(You need "example2" files.)

View this example flash movie. (Originally appeared on Boston.com, July 30, 2009)

In the ortiz-chart.fla file, locate misspelled words. There are two.

NOTE: to get Tweener class working, File > Publishing Settings > "Flash" tab > Actionscript Version "Settings" > and in "Classpath" select the "aslibrary" included in the example file

Exercise 3 (1/3)

(You need "example3" files.)

Build train-crash movie from scratch, using following text and simple ActionScript instruction.

Your final product will look something similar to this.

Use train-crash-blank.fla file as a base.

Exercise 3: continued, text (2/3)

Green line Train Crash

  1. Collision was between Government Center and Park Street stations
  2. The first train was waiting at a red light to enter Park Street Station
  3. The other train crashed into the rear of the stationary vehicle. The impact jolted the trolley about 100 feet toward the Park Street station. Both trolleys derailed and sustained significant damage at the point of impact.
  4. 49 people were taken to the hospital and 75 others walked away on their own. Some people had to be removed from the trolley with extrication equipment.

Exercise 3: continued, script (3/3)

A simple button to "Play" the movie

  1. Drag "Next" symbol from the library.
  2. Name it "next_mc" in the properties panel.
  3. Write the following code
    next_mc.addEventListener(MouseEvent.CLICK, onClick);
    function onClick(e){
      this.play();
    }

Action Script 3

Some keys to learning ActionScript 3

Resources