COAP:COAP-2110

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

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

Note: You now can study theMid 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

• 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
• Dealing with cue points (jumping to cue points, using events generated by cue points)
• 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

Week 7

Special effects and masks (Monday)

• Timeline special effects (short summary)
• Previews: flash-cs3-special-timeline-effects.html,
• Mask and masked layers:
• Previews: flash-cs3-mask.html.
• Handout: Flash special effects tutorial (not handed out, print it or see chapter 6 of the textbook)

Interactivity (Wednesday)

• Previews: Cat manipulation - Remote cat manipulation - Drag and drop edutainment
• Handout: ActionScript 3 interactive objects tutorial
• Handout: Flash drag and drop tutorial (not distributed, contains longer AS code)
• Handout: Flash games tutorial (not distributed, only contains an example)

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

(provisional planning)

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:
  • Simple event handling functions and registration of mouse events
  • Simple ActionScript "instructions". No more than described in the Summary of essential events and action script tricks
  • Timeline organization: being able to stop animation and to jump to frames.
• 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: Note: You now can study the Final exam 2007

Homework

• Homework 1
• Homework 2
• Homework 3
• Homework 4
• Homework 5
• Homework 6

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

I finally didn't use this, but sorted productions into three piles

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

If had applied the grid, 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: -