Interactive Prototyping with Flash

Cristian Bogdan, cristi@kth.se

Why prototyping?

• identify problems and misunderstandings before it's too late and/or too expensive
• re-respresent problems, explore solutions, get inspired
• common understanding based on shared representation (compare formal requirement gathering)
• but some famous people think otherwise

Prototype:

• representation: off-line vs on-line
• precision (low or high, also referrred to as fidelity)
• interactivity (the "look" only, or also parts of the "feel")
• evolution: rapid, iterative (but "plan to throw one away2), evolutionary (into the final system)

Flash: on-line and interactive. Not necessarily rapid. Can be iterative and even evolutionary.

On-line interactive prototyping:

• "screen changers" (HTML, PowerPoint and corresponding, earlier Hypercard)
• multimedia presenters (Flash, Director)
• interface builders

Flash basics

• vector graphics: great size and download time
• movie clip
• stage
• timeline (was called "score" in Director)
  • frames
• keyframes
• layers
• library, symbols ("cast" and "sprite" in Director)
• scenes: "sections" of a clip, each with its set of frames

Basic animation through tweening

• draw or import an element
• convert to symbol
• define a key frame
• edit both ends
• publish to the Web
• now we know how this animation is done

A basic interactive UI

• download the .fla file
• make the "stages" in a a graphical program
• or through screenshots
• or through scans
  • maybe scans of earlier paper prototypes
• add small scripts for looping
• debug: trace()
• add transparent buttons
• add small scripts for button pressing
• now we havea an idea how instant messaging can be done
  • see, Java applets are out, Flash is in :-)

A more complex interactive UI

• look in the Flash standard examples for "ScriptableMasksPart2.fla"
• composing:
  • sub-movie clips can become symbols
  • have their own timeline and layers
  • "composite" but not real encapsulation since the names of elements are generally exported to the
• standard GUI elements
  • "components"
  • can define new components
• Actionscript language resembles a lot object-oriented approaches to GUI programming
  • you can redefine object methods on the fly
• an action layer
• drag and drop

Other:

• easy manipulation from Dreamwaver
• sound is yet another symbol, you can set for how many frames it should play
• video playback

Alternatives to Flash for IxD prototyping?

• an example
• trends: generates HTML, more portable
• trends: generates prototype documentation!