COAP:COAP-2110

Introduction

I use materials I developed in this wiki for my Fall I 2007 Webanimation course (COAP 2110) at Webster University, Geneva.

This page does not replace the official syllabus file, but it allows students to navigate more efficiently through the materials

• Alternatively, start from the Flash article

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 animations
4. Creating and using layers
5. Using motion and shape tweening to create animations
6. Reusable Flash: symbols, instances and templates
7. Incorporating non-Flash media files (graphics, sound and video)
8. Create animated Splash pages in Flash
9. Simple interactivity in Flash, e.g. image maps and menus

Teaching materials

• This wiki (see the program below)
• Veer, E.A. Vander and Chris Grover (2007). Flash CS3: The Missing Manual. ISBN 0596510446 - 527 pages.
  • O'Reilly page for the book
  • Missing CD-ROM, materials used in the book.
• Flash Tutorials on the Internet
  • See the Flash article for some good links

Program

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

Week 1

Elements of the Flash Desktop

• Handout: Flash CS3 desktop tutorial

Creating simple Drawings

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

• Handout: Flash drawing tutorial

Simple use of Layers

• Handout: Flash layers tutorial

Importing clipart and textures

• Handout:Clipart and texture (in particular to find such resources)

Week 2

Frame-by-frame animation

• Previews: Shakin hello, Rocket
• Handout: Flash frame-by-frame animation tutorial

Introduction to motion animation

• Previews: Moving cat, Moving, changing cat, Flying Rocket
• Handout: Flash motion tweening tutorial

Week 3

More about drawing / Transformation of graphic objects

• Handout: Flash object transform tutorial

Shape tweening

• Previews: Simple shape morph, Simple shape and motion morph, traced bitmaps morph
• Handout: Flash shape tweening tutorial

Week 4

Introduction to buttons

• Previews: Simple slide show, Rocket launcher
• Handout: Flash button tutorial

Mid-term Exam

• Will probably be a *.fla file to complete/repair.
• All materials allowed (open book)

Week 5

(later)

Homework

Homework 1

COAP 2110 - Fall 1 2007 - Week 2

Assignment

Think about a simple animation that you would like to create, e.g. something that could evolve into a comic strip, a splash page, a moving logo, an explanatory animation, etc. Then create a Flash file that includes:

• At least a frame-by-frame animation
• At least a motion tween
• Some sort of background

Submission date and format

• To be returned by Monday, at start of week 3 lesson
• Use the following Flash file name p1-familyname-firstname.fla, e.g.

p1-miller-joe.fla

... I must be able to distinguish these files and we want to avoid overwriting.

Just bring the *.fla to class. I will tell you where to transfer it.

Other constraints

• Reuse of objects: 1/3 must be drawn by yourself, max. 1/3 imported but customized, max. 1/3 imported as is. (So you also can do everything by yourself).
• The motion tween must be made by yourself.
• You must fill in a document description using a template (see below)
• Note: A motion tween that includes frame-by-frame changes (i.e. several tweens in a row) does count as both frame-by-frame and motion animation).
• Homework projects are individual. If you work with others, make sure that the individual projects differ, i.e. the "reuse of objects" criteria above apply.

Evaluation criteria - bonus and malus points

1. Purpose - Does the animation fit the purpose ? / ergonomics (i.e. can we understand the "message" ?): -/0/+
2. Artwork - Aesthetic quality of the animation: --/0/+/++
3. Complexity - e.g. use of a motion guide: -/0/+/++
   • however there will be a threshold, make it rather simple and perfect than difficult and complicated
4. Task requirements - Does the work respect the task and the constraints ? --/-/0/+
5. Documentation - Quality of the document description: -/0/+
6. Errors - Presence/Absence of errors: --/-/0
7. Global - Overall coherence, a bonus for the coherence of all elements: +

Grading

• I will use a simple 1-4 point grading scale and add/remove points according to evaluation criteria
• Late homework policy: See the syllabus

The document description

Your p1-xxx-xxx.fla file must include a document description.

• Insert it with menu Modify->Document
• Enter a title and description
• You may first cut/paste the template below into a notepad and edit, then paste contents to Flash.
• Please keep the titles surrounded by "===" and use "*" for bullets as in the example that follows.

Cut/paste this template:

=== Author and Date ===


=== Objectives ===
 
 
=== Production steps (summary) ===
 
  
=== Difficulties and self-evaluation ===
 
 
=== Credits and bibliography ===

Example:

=== Author and Date ===
Daniel K. Schneider, sept 1 2007.

=== Objectives ===

A flying rocket that I could insert on top of a web page to give it a feel of dynamism.
It should be flaming, not just moving.
 
=== Production steps (summary) ===

* Copied a rocket in SVG from the Internet
* Made a frame-by-frame animation with 4 frames
* I broke apart the rocket and changed size and shape of the flames
* Saved this animation as a *.swf file
* Imported the rocket to a new file
* Made the rocket smaller and turned it with the transform tool
* Changed background to blue
* Made a motion tween from right to left (rocket will enter and leave the stage)
  
=== Difficulties and self-evaluation ===
 
* I didn't find this difficult.
* Please teach me how to stop the animation.
* I am quite happy with the result, but I think that the flame animation could be improved,
  i.e. the flames are hard to see in the motion animation.

=== Credits and bibliography ===

* Rocket: http://commons.uncyclomedia.org/wiki/Image:Rocket.svg
* I just used the handouts and textbook

Hints

• Go for something that is simple, e.g. animation of something with "sticks" is just fine.
• Type of background depends on your objectives, it can be just a color.
• Use this exercise to prototype some feature of your term project.
• Remember the academic honesty policy ! Homework without credits given to external resources used will be refused.