NUE 2003-2004

Participants

Examples
Animation: Graphics, Tweening, Masks, Movie Clips, Motion Paths, Sound
Interactivity: Programmability, User Interface, Learning Interactions
Best Uses of Flash | Client Specifications | Designing and Collaborating on an Animation | Suggestions

Macromedia Flash^TM is a vector-based animation format that supports both creative animation and educational interactivity.

Macromedia^® does not sponsor, affiliate, or endorse Michigan Tech products or services.

Graphics
1. Vectors (lines and fills)
2. Bitmaps (rasters or pixel arrays)
3. Drawing objects: Oval, rectangle, line, freehand
4. Gradients: Linear, radial
5. Import many file types for vector or bitmap files
6. Convert bitmap to vector
Tweening (continuous property change)
1. XY position
2. Scale, Skew, Rotate
3. Shape morph
4. Tint, Transparency, Brightness
5. Reference (pivot point)
6. Gradient or solid fill
7. Line shapes
Masks (hide and reveal layers)
1. Mask moving over background (spotlight)
  Example: Pod Mask
2. Background moving behind mask (panning)
Movie Clips (mini-Flash movies used inside main movie)
1. Independent timeline
2. Multiple instances for complexity
Motion Paths (animated object follows a predetermined path)
1. Hand drawn
2. Follow portion of a drawing object shape
3. Imported graph
4. Multiple objects can follow the same path with independent characteristics (distance from the path, CW or CCW tumbling, speed)
Sound
1. Event sounds (independent of movie timeline)
2. Stream sounds (synchronized with movie)
3. Basic sound editing (start, finish, volume, fade)
4. Sound effects and music loops available royalty-free on the web

Programmability
1. Enter data or text
2. Pass variables
3. Call functions
4. Conditionals
5. Toggle states
6. Change object properties
7. Drag objects
8. Cause objects to follow the cursor
9. Static and dynamic text
10. Basic math; sines and cosines but no higher transcendental functions
User Interface (pre-defined)
1. CheckBox (multiple selections)
2. ComboBox (scrollable single-selection drop-down list)
3. ListBox (scrollable single- and multiple-selection list box )
4. RadioButton (exclusive selection)
5. ScrollPane (add window panes with vertical and horizontal scroll bars to display movie clips)
6. PushButton (simple button acts on mouseover, mousedown, mouse release, drag over, drag out, release outside, or key press events)
7. ScrollBar (adding vertical and horizontal scroll bars to text fields)
Learning Interactions (pre-defined) can assess correct and incorrect answers, provide feedback, and perform an action based on the answer.
1. Drag and Drop (move items to correct position)
2. Fill in the Blank (question and answer)
3. Hot Objects (choose the correct object)
4. Hot Spot (choose the correct image area)
5. Multiple Choice
6. True or False

Show a process
1. Looping and periodic clips are ideal for Flash
2. Control a process timeline: pause, step, reverse, slow
3. Compare processes over time
4. Playback image sequences generated from other authoring tools
5. Process can be conceptual rather than physical
6. Examples: Nanotubes, River Meanders, Erosion, Ripple Superposition
Efficient use of stage area
1. Display different images in the same stage area for rapid comparison
2. Interactive display of labels, advisories, information, specifications, etc. on objects
3. Hide and reveal parts and layers
4. Control an image scale: zoom, pan
5. Examples: Fluorite Structure, Spectroscope
Build complexity
1. Create unlimited instances of movie clips with variations on properties
2. Mask multiple layers
3. Attach multiple sprites (animated objects) to a motion path
4. Do onion-skinning for cartoon animation
5. Import sound and video
6. Create multi-scene animation
7. Link animations together directly or within a web page
8. Open web sites and other documents from Flash

Flash movies embedded in a web page require Macromedia Flash plug-in for the browser. This plug-in is small in size and available for all platforms.
Flash movies can run as a stand-alone executable for Windows without requiring a plug-in.
Flash is ideal for kiosk presentations, as it loops continuously by default and can be made to fill the screen. Use of vectors over bitmaps permits optimum scaling quality of images.
Example: MTU Physics Open House 2002
Flash elements download as needed, so the entire animation does not have to load before the user can begin experiencing the movie.
Flash animations can be used by themselves or in context with a web page. Generally, HTML is best for displaying large amounts of text or static images, with Flash on the page for animation only.

Pedagogy rules. First decide what you want to teach, how you would like to divide or categorize your materials, topics, or models, and what demonstrations or interactivity would optimize the learning process. Conceptualize the module, workshop activity, or animated process. Stay focused and don’t try to do too much with a single animation. Build up lessons and explorations from smaller components.
Visualize the animation as concretely as possible. Schematic interpretations are generally more effective than literal details for teaching purposes.
Describe the process in a scientific or technical manner.
Re-describe the process as a storyboard sequence. Include:
1. Angle or point of view: cross-section, perspective, multiple views
2. Timing
3. Controls: pause/play, loop, switch views, labels or references on/off
4. Colors and contrast
Decide how much text is needed and whether the animation should be used by itself or in context with HTML text and images.
Flash Example: Norman Dynasty
Flash with HTML Example: String Vibration
Sketches and images can be used directly in the animation or as reference material. Flash imports many formats. Copyright permission is not needed for use of images as guides only within the authoring environment, as they are not exported with the movie.
Animations can be viewed over the web, run from a computer as a local presentation, or distributed on CDs.

Visualize and compare physical, chemical, and engineering processes, models, or scenarios
Demonstrate equipment and lab set-ups
Explore concept flows and timelines
Example: Norman Dynasty
Design assessment that has graphics and animation as feedback
Balance fundamentals (longer life-span) with applications (more engaging)
Design a large number of small, single-scene animations and a small number of complex, interactive animations