COAP:COAP-2110

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 materials

Course level learning outcomes (roughly)

Know the organization and tools of the Macromedia CS3 Flash Desktop
Create simple drawings
Frame-by-frame, motion and shape animations
Creating and using layers
Reusable Flash: symbols, instances and templates
Incorporating non-Flash media files (graphics, sound and video)
Create animated Splash pages in Flash
Simple interactivity in Flash, e.g. use of buttons and some action script

Teaching materials

Flash tutorials in this wiki
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

Reference and overviews

See the Flash article for some good links to the Adobe web site (introductions and reference manuals)
Flash CS3 keyboard shortcuts
Flash formats and objects overview

Tips of the week

Lock layers when you don't work with them !

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

Handout: Flash CS3 desktop tutorial
Handout: Flash CS3 keyboard shortcuts

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

Resource: Clipart and texture

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
Summary: Flash animation summary

Week 3

More about drawing / Transformation of graphic objects

Previews: Colors
Handout: Flash object transform tutorial
Handout: Flash arranging objects tutorial
Handout: Flash colors tutorial

Shape tweening

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

Week 4

Introduction to buttons and some ActionScript

Previews: Simple slide show, Rocket launcher, Menus with buttons, Image maps with pictures.
Handout: Flash button tutorial

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.

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

Previews: Slide show with component button menu,
Handout: Flash components tutorial

Sounds

Previews: Cloud animation with sound, (Drag and drop edutainment
Handout: Flash sound tutorial (adding sound to Frames)

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

The FLV Video playback component
The captioning component
Previews:
- Simple use of the FLVPLayback component
- flash-cs3-video-simple-server-caption.html (captions)
- flash-cs3-video-simple-server-caption2.html (captions)
- flash-cs3-video-simple-embedd.html (simple embedding)
- flash-cs3-video-timeline-embedd.html (embedding with animation)
- flash-cs3-video-cue-events.html (use cue points to trigger animations)
Handout: Flash Video component tutorial

Special effects for motion animation

Timeline special effects (short summary)
Handout: Flash special effects tutorial (will not be distributed in class)

Term project

Short follow-up discussion

Week 7

(provisional planning)

Interactivity

Preview: Drag and drop edutainment
Handout: Flash drag and drop tutorial
Fine tuning publish settings
Preloaders

Week 8

(provisional planning)

Final exam
Presentation of term projects

Old Homework

Current and next homework

Homework 4

COAP 2110 - Fall 1 2007 - Week 5

Assignment

Think about an 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, a slide show, etc. Then create a Flash file that includes:

At least 2 sound tracks. Sound can be attached to a frame or included with AS code
At least one component (e.g. a video component or a component button)

Try to focus on quality.

Reuse of homework 1, 2 and 3

If you wish you can add sound on top of your previous homework (in any way you like). But this is by no means an obligation nor does it have an influence on grading. However, make sure to improve drawing, animation, navigation etc. if you didn't get a top grade for previous work. Adding just some sound and a button to a not so well done prior homework will not get you a very good grade.

Submission date and format

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

p4-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).
There is no restriction on the subject, e.g. you can do a slide show or motion/shape/frame animations.
You can import sound and video from any source.
If your Flash file is an animation (vs. a menu-based architecture), make sure that the animation stops at some point (unless you can argue that your animation should run as a loop).
You must fill in a document description using the same template as in homework 1.
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.
If you reuse old homework, make sure that certain errors are fixed (e.g. use only a single non-editable object in a motion tween). Also get rid of unused tween objects in your library. These are most often indicators of badly done tweens. Finally, try to improve the aesthetics of your drawings.
Your *.fla should be error free. No broken tweens, no strange tween objects in your library, etc.

Evaluation criteria - bonus and malus points

Purpose - Does the animation fit the purpose ? / ergonomics (i.e. can we understand the "message", does the user understand the buttons ?): -/0/+
Artwork - Aesthetic quality of the animation: --/0/+/++
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
Task requirements - Does the work respect the task and the constraints ? ---/--/-/0/+
Documentation - Quality of the document description: --/0/+
Flash documentation - Good layer and symbol names for example: -/0
Errors - Presence/Absence of errors: --/-/0
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 above
Roughly, a plus or minus is worth about 0.2 points on a 1-4 scale.
Late homework policy: See the syllabus

The document description

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

Insert it with menu Modify->Document
Enter a title and description
See the template

Homework 5

COAP 2110 - Fall 1 2007 - Week 6

Assignment

Create a flash page that includes some video and add some "interaction" between the video and the rest. You can choose among several options:

Create and play captions
Embed the video into the timeline and add animations and/or buttons. This is probably the easiest option, but make sure that your video is not too long. Also, if you work with an older Flash version you may try this (I don't have any AS2 examples for the other two options since both captions and cue points were less well supported in older version).
Use cue points to generate events

For each of these options, there is an example or two you can download from the Flash video component tutorial.

Reuse of homework 1, 2, 3 and 4

If you wish you may reuse artwork and animations from previous homework (in any way you like). But this is by no means an obligation nor does it have an influence on grading. However, make sure to improve drawing, animation, navigation etc. if you didn't get a top grade for previous work. Adding just some sound and a button to a not so well done prior homework will not get you a very good grade.

Submission date and format

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

p5-miller-joe.fla