Michigan TechMichigan Tech Home PageSearchA2ZMap
NUE

NUE 2003-2004

Participants

NSF NSE

Curriculum Materials Support

General Functions of Flash

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

Return to Participant Support Page

Macromedia FlashTM 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.


***** Examples *****

Demo Page for the Michigan Tech Vision Initiative 2002


***** Animation *****
  1. 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

  2. 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

  3. Masks (hide and reveal layers)
    1. Mask moving over background (spotlight)
      Example: Pod Mask
    2. Background moving behind mask (panning)

  4. Movie Clips (mini-Flash movies used inside main movie)
    1. Independent timeline
    2. Multiple instances for complexity

  5. 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)

  6. 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

Return to Top


***** Interactivity *****
  1. 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

  2. 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)

  3. 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

Return to Top


***** Best Uses of Flash *****
  1. 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

  2. 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

  3. 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

Return to Top


***** Client Specifications *****
  1. 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.

  2. Flash movies can run as a stand-alone executable for Windows without requiring a plug-in.

  3. 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

  4. Flash elements download as needed, so the entire animation does not have to load before the user can begin experiencing the movie.

  5. 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.

Return to Top


***** Designing and Collaborating on an Animation *****
  1. 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.

  2. Visualize the animation as concretely as possible. Schematic interpretations are generally more effective than literal details for teaching purposes.

  3. Describe the process in a scientific or technical manner.

  4. 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

  5. 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

  6. 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.

  7. Animations can be viewed over the web, run from a computer as a local presentation, or distributed on CDs.

Return to Top


***** Suggestions *****
  1. Visualize and compare physical, chemical, and engineering processes, models, or scenarios

  2. Demonstrate equipment and lab set-ups

  3. Explore concept flows and timelines
    Example: Norman Dynasty

  4. Design assessment that has graphics and animation as feedback

  5. Balance fundamentals (longer life-span) with applications (more engaging)

  6. Design a large number of small, single-scene animations and a small number of complex, interactive animations

Return to Top