COAP:COAP-2110

The educational technology and digital learning wiki
Jump to navigation Jump to search

<pageby nominor="false" comments="false"/>

Introduction

This is the resource page for my Fall I 2007 Webanimation (Flash) COAP 2110 course at Webster University, Geneva. This page does not replace the official syllabus file, but it allows students to navigate more efficiently through the lecture notes and the examples.

Course level learning outcomes (roughly)
  1. Know the organization and tools of the Macromedia CS3 Flash Desktop
  2. Create simple drawings
  3. Frame-by-frame, motion and shape animations
  4. Creating and using layers
  5. Reusable Flash: symbols, instances and templates
  6. Incorporating non-Flash media files (graphics, sound and video)
  7. Create animated Splash pages in Flash
  8. Simple interactivity in Flash, e.g. use of buttons and some action script
Teaching materials
  • Flash tutorials in this wiki (lecture notes)
  • Veer, E.A. Vander and Chris Grover (2007). Flash CS3: The Missing Manual. ISBN 0596510446 - 527 pages.
  • Flash Tutorials on the Internet
Reference and overviews
Tips of the week
  • Lock all the layers, except the one(s) you work with !
  • Be aware at which level you edit (scene or symbol edit mode!)

Program

The program will be adjusted according to students' progress. However, grading scheme, homework policy and such will remain stable.

Week 1

Elements of the Flash Desktop
Creating simple Drawings

Topics: Stage size, Drawing modes, Selecting objects, Drawing and painting tools, Erasing and alignment, Colors, Adding text

Simple use of Layers
Importing clipart and textures

Week 2

Frame-by-frame animation
Introduction to motion animation

Week 3

More about drawing / Transformation of graphic objects
Shape tweening

Week 4

Introduction to buttons and some ActionScript

Mid-term Exam (Week 4)

I will test points mentioned in the Flash animation summary (read this to check what you should know)

  • Contents: You will receive a *.fla file to complete/repair. Several tasks must be completed, some easy and some more difficult.

Prepare for the following subjects:

  • Motion guide tweening
  • Motion tweening with a shape modification (simple transform or tint)
  • Shape tweening
  • Color gradients
  • Simple transforms (e.g. size)
  • Drawing (only a little bit)

Other information:

  • All materials are allowed (e.g. books, handouts, web pages)
  • Use of communication tools is strictly forbidden (no chat, no mail, etc.). No talking between students. Offenders may get an F.

Note: You can look at the Mid Term exam 2007

Week 5

  • Using sound and the button component
  • The Term project
Discussion
  • Some past homework
  • mid-term exam and term projects
  • planning of term projects, the design process
  • What do we mean by "quality?"
Flash components
Sounds

Week 6

IMPORTANT: The Wednesday October 3 class is cancelled. To catch up we decided to add 20 minutes to four classes, starting Monday, October 1.

Flash Video

Week 7

Special effects and masks (Monday)
Interactivity (Wednesday)
Publishing on a web site (Wednesday)
  • Copy all the files *.swf *.js *.html and resources (e.g. sound or video)
  • Fix the generated HTML
  • You also may modify some publish settings
Term project / Homework 6 (Monday/Wednesday)
  • Work on homework 6 or term projects

Week 8

Presentation of term projects

Each student will present his/her term project. You will have to show the application on the teacher's machine and the projector. There is no need to prepare slides but be prepared to answer questions !

Final exam

The final exam will focus on interactivity.

Contents: You will receive a *.fla file to complete/repair. Several tasks must be completed, some easy and some more difficult.

Prepare for the following subjects:

  • Buttons:
    • Using library *.fla buttons (just change the label)
    • Using button components (label, change of width)
    • Making your own buttons from simple (!) drawings (including drawings for the different button states)
  • Videos and Sound:
    • Sound embedded into the timeline
    • Videos embedded into the timeline
    • Simple use of the video component
  • ActionScript:
  • You also should remember subjects from the previous exam (drawing and animation principles)

Not covered in the exam:

  • ActionScript program flow (e.g. if and switch statements)
  • Special effects
  • Video captions, Video cue points
  • Loading of external sources other than video.
  • Keypress events

Other information:

  • All materials are allowed (e.g. books, handouts, web pages)
  • Use of communication tools is strictly forbidden (no chat, no mail, etc.). No talking between students. Offenders may get an F.

Note: You can look at the Final exam 2007 (i.e. what I finally did)

Homework

Term project

Date

  • Due Monday, October 15
  • Each student will shortly present his/her project. Prepare for questions.

Kinds of projects

The term project can take several forms, e.g.

  • A splash page
  • A multimedia presentation (audio, pictures, movie clips etc.)
  • An educational animation (explaining a concept)
  • An animated comic strip
  • A sophisticated animated logo
  • Part of a game (difficult)

There is no obligation to use all techniques learnt so far.

Constraints and major evaluation criteria

  • Clear objectives and that are met
  • Aesthetics
  • Usability
  • Good code

You may reuse 1/3 of imported artwork as is, 1/3 imported and modified. 1/3 must be drawn by yourself.

Elements that must be included

  • Button that leads to a credits page
  • A 1-page report (as Word, PDF or HTML File) handed in separately. Use the same kind of structure as in the homework template, but make it a bit longer and better than for a typical homework.

Advice

  • Make it a reasonable project
  • Typically, it should not exceed three times the length of a typical homework project
  • Focus on quality.

Evaluation grid

Note: I finally didn't use this, but sorted productions into four piles. Feedback was given during student's presentation of the projects.

A  = Very good
A- = almost very good
B- = pretty good
B  = good

If had applied the grid I initially prepared, some would have received lower marks. In particular there were missing reports and doubtful code (e.g. strange tweens).

  • O: Clear objectives and that are met (global coherence): -/0/++
  • A: Aesthetics: -/0/++
  • U: Usability: -/0/+
  • Q: Good code and Flash documentation: -/0/+
  • R: Report and credits "page": -/0/++
  • C: Complexity: -/0/++
  • L: Late/no presentation: -