COAP:COAP-2110

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

Introduction

This is the resource page 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

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
• 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

• Use layers !
• Use symbols for motion tweens !
• Use only one object per layer for tweening !

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
• 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.). Offenders may get an F.

Week 5

(provisional planning)

Flash components

• Handout: Flash components tutorial
• Handout: Flash Video component tutorial
• Handout: Flash sound tutorial (adding sound to Frames)

• Using external pictures, sound and video
• Flash "web sites" with buttons and a little action script
• Preloaders ?
• Discussion of term projects you can do.

Week 6

(provisional planning)

Special effects for motion animation

• Timeline special effects

More ActionScript components (?)

Interactivity

• Preview: Drag and drop edutainment
• Handout: Flash drag and drop tutorial

Week 7

(provisional planning)

• Fine tuning publishing
• Preloaders
• More interactivity, e.g. short introduction to ActionScript 3 and Flex

Week 8

(provisional planning)

• Final exam
• Presentation of term projects

Homework

• Help:COAP-2110/hw1

Homework 2

COAP 2110 - Fall 1 2007 - Week 3

Assignment

Think about a simple shape 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 shape tween

Reuse of homework 1

• If you wish you can build the shape tween on top of your homework 1 (in any way you like). But this is by no means an obligation nor does it have an influence on grading.

Submission date and format

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

p2-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 shape tween must be made by yourself.
• 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.

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. Flash documentation - Good layer and symbol names for example,
7. Errors - Presence/Absence of errors: --/-/0
8. 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
• Late homework policy: See the syllabus

The document description

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

• Insert it with menu Modify->Document
• Enter a title and description
• See homework 1 for the template you should use.

Homework 3

COAP 2110 - Fall 1 2007 - Week 4

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 four buttons that you can place either on single frames, extend over several frames or over the whole timeline. These buttons should position the playhead (i.e. the user) in a new frame.

Reuse of homework 1 and 2

• If you wish you can add buttons 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.

Submission date and format

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

p2-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 launch motion/shape/frame animations.
• You can take either buttons from the library or make your own.
• 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)

Evaluation criteria - bonus and malus points

1. Purpose - Does the animation fit the purpose ? / ergonomics (i.e. can we understand the "message", does the user understand the buttons ?): -/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. Flash documentation - Good layer and symbol names for example: -/0
7. Errors - Presence/Absence of errors: --/-/0
8. 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 p2-xxx-xxx.fla file must include a document description.

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

Term project

At some point, plans for term projects will be discussed in class...

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)