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.
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)
- Term project
- Discussion/work on projects
- Interactivity (Wednesday)
- Previews: Cat manipulation - [ http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-simple-object-manipulation-remote.html 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)
- Term project / Homework 6
- 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.
Old Homework
Current and next homework
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
- ... 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 artwork and movie clips: 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 (so the 1/3 rule doesn't apply for the video).
- 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 6
COAP 2110 - Fall 1 2007 - Week 7
- Assignment
Create a flash application. Please choose from one of the two following options:
- Create a Flash animation that includes at least two special effects, i.e. built-in timeline effects or mask layers.
- Create a Flash animation that uses some ActionScript instructions. I require at least 2 "constructs" that are different from timeline navigation, e.g. gotoAndPlay(), gotoAndStop(), stop (). For example, you can play flash movies with "play()" or change properties of objects on the stage, e.g. change their position or hide/unhide these.
- Reuse of prior homework
- 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.
- Submission date and format
- To be returned by Monday, at start of week 8 lesson
- Use the following Flash file name p6-familyname-firstname.fla, e.g.
- p6-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 artwork and movie clips: 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 (so the 1/3 rule doesn't apply for these).
- 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 xxx.fla file must include a document description.
- Insert it with menu Modify->Document
- Enter a title and description
- See the template
Term project
Date
- Monday, october 15
- Each student will present his/her project
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)
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.