COAP:COAP-2110: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 2: Line 2:
== Introduction ==
== Introduction ==


This was a resource page for my Fall I 2007 Webanimation ([[Flash]]) COAP 2110 course at [http://www.webster.ch/ Webster University], Geneva. '''This page did not replace the official syllabus file nor does it contain the same information'''. This page had been made to allow students to navigate more efficiently through the lecture notes and the examples.
This is a revised sample template for a introductory Flash course. It is based on my Webanimation ([[Flash]]) COAP 2110 courses at [http://www.webster.ch/ Webster University], Geneva. '''The actual syllabi were different'''.


; Course level learning outcomes (roughly)
; Course level learning outcomes (roughly)
# Know the organization and tools of the Macromedia CS3 Flash Desktop
# Know the organization and tools of the Macromedia CS3 Flash Desktop
# Create simple drawings
# Create simple drawings
# Manipulation of graphics (e.g. envelope transforms, color gradients)
# Creating and using layers
# Frame-by-frame, motion and shape animations
# Frame-by-frame, motion and shape animations
# Creating and using layers
# Use of embedded movie clips
# Reusable Flash: symbols, instances and templates
# Incorporating non-Flash media files (graphics, sound and video)
# Incorporating non-Flash media files (graphics, sound and video)
# Create animated Splash pages in Flash
# Simple interactivity in Flash, e.g. use of buttons, button components and some action script
# Simple interactivity in Flash, e.g. use of buttons and some action script


; Teaching materials
; Teaching materials
Line 22: Line 22:


; Reference and overviews
; Reference and overviews
* See the [[Flash]] article for some good links to the Adobe web site (introductions and reference manuals)
* [[Flash tutorials]] (a list of Flash tutorials in this wiki, not all are used here)
* [[Flash CS3 keyboard shortcuts]]
* [[Flash CS3 keyboard shortcuts]]
* [[Flash formats and objects overview]]
* [[Flash formats and objects overview]]
; Tips of the week
* '''Lock''' all the layers, except the one(s) you work with !
* Be aware at which level you edit (scene or symbol edit mode!)


== Program ==
== Program ==

Revision as of 17:46, 26 October 2008

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

Introduction

This is a revised sample template for a introductory Flash course. It is based on my Webanimation (Flash) COAP 2110 courses at Webster University, Geneva. The actual syllabi were different.

Course level learning outcomes (roughly)
  1. Know the organization and tools of the Macromedia CS3 Flash Desktop
  2. Create simple drawings
  3. Manipulation of graphics (e.g. envelope transforms, color gradients)
  4. Creating and using layers
  5. Frame-by-frame, motion and shape animations
  6. Use of embedded movie clips
  7. Incorporating non-Flash media files (graphics, sound and video)
  8. Simple interactivity in Flash, e.g. use of buttons, button components and some action script
Teaching materials
  • Flash tutorials in this wiki (lecture notes)
  • Veer, E.A. Vander and Chris Grover (2007). Flash CS3: The Missing Manual. ISBN 0596510446 - 527 pages.
  • Flash Tutorials on the Internet
Reference and overviews

Program

We shall introduce 1-2 new topics per week. For the first 6 weeks we will assign mini-projects that will help you to learn the most important techniques.

Week 1

Theme: Simple drawing and frame-by-frame animation

Elements of the Flash Desktop
Creating simple Drawings

Topics: Stage size, Drawing modes, Selecting objects, Drawing and painting tools, Erasing and alignment, Colors, Adding text

Simple use of Layers
Importing clipart and textures
Frame-by-frame animation

Week 2

Theme: Motion animation and embedded movie clips

Introduction to motion animation
Symbols and embedded movie clips

Week 3

Theme: Transformation of graphics and morphing

Layers (again)
Transformation of objects
  • Topics: Simple transformation (scaling, rotating, skewing, distorting), envelope transformation of a shape with either the select tool, envelope transforms or the sub-selection tool.
  • Handout: Flash object transform tutorial
Arranging objects
Colors and gradients
Shape tweening

Week 4

Theme: Basic interactiviy

Introduction to buttons and some ActionScript

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

Theme: Using sound and the button component

Discussion
  • Some past homework
  • mid-term exam and term projects
  • planning of term projects, the design process
  • What do we mean by "quality?"
  • The Term project
Flash components, in particular the button component
Sounds
Term projects
  • Objectives must be defined

Week 6

Theme: Importing and augmenting videos

Flash Video topics

Week 7

Theme: Special effects, masks and more interactivity

Special effects
Mask and masked layers
Interactivity
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 projects
  • Final advise

Week 8

Presentation of term projects

Each student will present his/her term project (unless the class is too big) 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 focused on interactivity and students received a *.fla file to complete/repair. Several tasks had to 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:
  • 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

Kinds of projects

The term project could 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

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