HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

 

 

 

Flash Basics I:  Re-Imagining Flash

An Artist's Approach to the Application

 

 

What Flash Is

• An authoring environment (.fla) for vector-based animation, design and interactivity, primarily for web delivery
• One of the standard file formats (.swf) for web delivery of animation and interactivity.

 

What Flash Is Not

• Not THE total solution for all websites all the time.
• Not available 100% of the time, immediately, to all internet users, without additional installations. Flash requires the Flash Player plug-in to your browser (Free, but new versions pop up about every 9 or 10 months, requiring you to update), so your user might have last year's plug-in.
• Not the best solution for moving lots of pixels around on a big screen. And, as a related statement, Flash is not a great solution when you work with lots of embedded media (It means you'll wait a while for everything to load).
• Not free or open-source. If you want that, go to processing.org. 

 

Some Great Uses of Flash

• Vector-based animations and interactivity. Simple, clean, geometric design asked to animate simply (move, rotate, scale, skew, change opacity, etc.). More sophistication is always possible, but these are things you can do very easily, effectively, and immediately in Flash. Animations can range from simple eye-candy motion graphics (here's a neat work by Erik Natzke), and experimental animations (one by James Patterson, of Presstube.com) to long-form narrative (Mumbleboy The Discovery).
• Proof-of-concept or prototyping of design or interactivity. Here's the grand-daddy of them all (circa 1999), MONO•crafts by Yugo Nakamura, creator of the Yugop site.
• Rich media (audio/video) streaming. This is what made YouTube possible. If you want to do media streaming on an industrial scale, you need to invest in a streaming service or find someone willing to host your .flv files for free. Video is also possible as progressive download without a streaming server, but it's not going to look as good as embedded Quicktime. Playing audio files through Flash has always been a fairly painless and useful affair.

 

FLASH GUIDING PRINCIPLES:

• Think SOUND, MOTION, INTERACTIVITY, and TOTAL DESIGN. THERE IS NO EXCUSE FOR BAD LOOKING FLASH!
• STYLISTIC, ABSTRACT, GRAPHIC, and SIMPLE still wins over PHOTOREALISTIC and LITERAL. Why? FASTER LOADING (smaller, crisper files). This doesn't mean you can't use photos or photorealistic elements - just be aware of DOWNLOAD time. But also, be careful of TOO MANY VECTORS, TOO MANY CURVES, especially if you duplicate movie clips with Actionscript, because this can bog down your processor (even in a multi-gigaHerz world).
• Think of ways of RE-USING and NESTING (i.e., animations within animations, etc.) the same graphics, animations, and interactive elements. Here is a simple loading animation made of many NESTED tiny animations. (total size, 8K).
• Think in terms of MULTIPLE TIMELINES (much more on this later). 

 

Some Awful Uses of Flash

• If you're building an enterprise site, you will certainly use Flash for special presentations or the multimedia section (and The New York Times is something of a standard-bearer in that area) but you really shouldn't build EVERYTHING in Flash, exclusively. You'll run into search engine optimization issues, but also there is a whole world of web applications that you will use on the enterprise level that are just better choices (XHTML, CSS, PHP, javascript, java, Apache, Ruby on Rails, etc. etc). Ask your friendly local Webmaster what he uses.

 

DON'T DO THIS IN FLASH:

• DON'T use or move BIG, BIG (big in file size) graphic files (usually jpegs). Don't make the final Flash file so big it takes FOREVER to load.
• DON'T use Flash without a PRE-LOADER. We'll cover this fairly early in the course.
• DON'T feel compelled to stuff as much information as possible into each page or screen or section.
• DON'T use DEFAULT SETTINGS (such as the 550 X 400 pixel stage size), and avoid GRADIENT FILLS (unless you're making superneat shiny robots). These are two design notions in Flash that will mark you as a novice.
• DON'T start building ANYTHING right on the stage. Think in terms of the SYMBOLS in Flash (see Hierarchy, below).

 

 

Flash Basics - The Flash Hierarchy Overview

 

The Flash Hierarchy starts with small building blocks (symbols), and moves on to larger units (scenes) to entire, complete units (movies, the .swf files we see on the web). And beyond that, movies can be layered on top of each other through levels. 

 

SYMBOLS

EVERYTHING IN FLASH SHOULD BE A SYMBOL. All Symbols will appear in the LIBRARY.

 

The three types of symbols that make up a Flash movie are:

 

1. Graphics- Reuseable static visual elements.(NOTE: Graphics do not USE timelines, although they HAVE timelines. IGNORE the timeline in a Graphic.) Here are the three most common forms of Graphic symbols:

• Native to Flash - Basic geometric elements & drawing & painting tools. May behave like pixels, but are essentially vector-based. Method: Create in Flash, convert to symbol.
• Imported Bitmap - Photorealistic elements (adds much 'weight"; use carefully). Method: Create in PS, import into Flash, break up (or trace bitmap), convert to symbol.
• Imported Vector - Vector elements from AI or Freehand. Method: Create in AI, copy & paste into Flash, break, group, convert to symbol. You may have luck also in EXPORTING AS .SWF, but not everything works, all the time. Rule of Thumb: The more complicated you build these in AI, the more you will regret when you bring it into Flash.

 

2. Movie Clips - Animations and/or sequenced graphics. (NOTE: The timeline is the essential feature of the Movie Clip, and all timelines LOOP unless otherwise instructed by Actionscripting) The Movie Clip is the basic unit of animation in Flash: timeline plus other visual elements. Can contain Actionscripts.

• Frames (F5), Key Frames (F6) , Empty Frames (F7)
• Motion Tween: Very useful, very Flash.
• Shape Tween: Good if used effectively, much more processor-intensive than motion tween.
• Keyframe Animation: One complete image per keyframe. Very labor intensive, but most control, craft.

 

3. Buttons- 4-state interactive elements

• Basic interface element, gives user a 'handle' on interactivity. Only symbol that can have "mouse" actions attached to it.
• 4 States: Up, Over, Down (correspond to mouse action), and Hit ('hotspot'; active area, not visible to user)
• Can contain other buttons or movie clips.

 

     UNLESS YOU ARE A FLASH NINJA, ALL YOUR BUTTONS NEED HIT STATES.

     (And, by the way, HIT STATES SHOULD NEVER BE JUST TEXT) 

 

LARGER UNITS

COLLECTIONS OF SYMBOLS & TIMELINES:

 

4. Scenes- Collections of elements into a single timeline

• Larger collection of sequential or non-sequential activity on a single timeline.
• SCENES ARE NOT THE MOST FLEXIBLE UNIT OF STRUCTURE IN FLASH. They suck, really. If you build something in a scene, you can't put it in other scenes (unlike movie clips). They're hard to target with Actionscript, too. . . I guess they're useful if you're an animator, and you want to build your animation as a series of scenes, otherwise, I'd recommend NOT USING THEM.

 

5. Movies- Complete editable (.fla) or player (.swf) file

• Flash works with two file formats - KNOW THE DIFFERENCE: .FLA (authoring/editing environment) and .SWF (published, standalone, runtime application viewable in your web browser). 
• What you author is the .fla file. These are like .psd's in PhotoShop: they're your totally editable authoring environments, and contain all the scripting (unless you output the script as a .as file - more on this later) , symbols, and text/visual/sonic material (unless you use dynamic media - more on this later). 
• The .fla file does NOT go out on the web. When you want to publish what you've done in Flash, you EXPORT a FLASH MOVIE (an .swf file). This is the version of your Flash work that's viewable and functional in a Web Browser (Firefox, Mozilla, Safari, Opera, and that other one. What's it's name? Oh, yeah, Internet Explorer.) (Netscape? What's that?) 

 

6. Levels - Now things get a little more interesting!

• Once you've created an entire Flash movie (.swf file), you can LAYER these .swf files ON TOP OF EACH OTHER (use the loadMovieNum function).
• You can also NEST .swf files, or EMBED an .swf file within another .swf file DYNAMICALLY ( use the loadMovie function).
• Usually, when I do this, I'm thinking of DIVISION OF LABOR/SEPARATION OF FUNCTION. That is, maybe you have the background as a separate .swf file, the navigation as a separate .swf file, the content as a separate .swf file, etc. It's more complicated, but it's also a richer end result (if you do it well . . .).  

 

Flash’s Programming Language

Actionscript. We will use Actionscript 2.0 in this course. Actionscript 3.0 is available, and it's much advanced from its predecessor, but its learning curve is STEEP. 

 

Flash Interface

Flash's interface is notorious for being overly complicated and not user friendly. This is true. But, once you start getting a CLEAR SENSE OF WHERE YOU ARE AT ALL TIMES in your authoring environment, you'll be OK.

 

1. Know when you're on the Main Stage ('scene 1"), utilizing the Main Timeline, 

2. Know when you're Editing a Symbol (or a symbol within a symbol, etc.)

3. Then, locate these windows: Library, Actions, Toolbar, Properties, Properties Inspectors

 

 

 And Down The Road, You'll Encounter More Advanced Elements:

Components (plug-ins) - extend the functionality of Flash. They're pre-built Flash objects, and if you know how to SKIN them, you will not starve in the foreseeable future.

Dynamic media - allows you to load images, text, sounds, video, and entire Flash movies as needed. Beginners embed media - advanced authors load it dynamically.

 

OK - That's All You Need To Know To Get Started! Now, get started!

 

Flash Tasks:

     Here's what you need to be able to do in Flash, in the order in which it will be presented:

 

1. Familiarize yourself with Flash's Interface

2. Graphic Symbols (static, reuseable graphic element)

3. Button Symbols (clickable 4-state graphic)

4. Create the Foundation Interface in a Movie Clip 

 

Some additional things to learn, once you've done all of the above:

 

• Movie Clips 2: Three Animation Styles (Motion Tweens, Shape Tweens, Onion Skinning
• Make an Animated Button
• Working with Text in Flash (embedded and broken-apart)

 

 More Examples

• Design Notions: sofake (you've seen this one before); ar media and fondation daniel langlois
• Ideas: Whitney ArtPort
• Technique: Manuel Tan, and Erik Natzke. 
• Four Interface ideas in BAD MIND TIMEâ„¢:  
  • One: separate HTML frames for navigation and content (1997-2000);
  • Two: single panel of content you move around (2004-2005);
  • Three: hierarchy (clickable index) (2006);
  • Four: faux 3D navigable space (2007).
  • (Text Index to everything - - Outlines are still good!)