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