COAP:COAP-2110

The educational technology and digital learning wiki
Jump to navigation Jump to search

<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.
  • Flash Tutorials on the Internet
Reference and overviews
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
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

Week 2

Frame-by-frame animation
Introduction to motion animation

Week 3

More about drawing / Transformation of graphic objects
Shape tweening

Week 4

Introduction to buttons and some ActionScript 2
Mid-term Exam
  • Will probably be a *.fla file to complete/repair.
  • All materials allowed (open book)

Week 5

(provisional planning)

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

Week 6

(provisional planning)

Special effects for motion animation
  • Timeline special effects
More ActionScript components (?)
Interactivity

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

Homework 1

COAP 2110 - Fall 1 2007 - Week 2

Assignment

Think about a simple 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 frame-by-frame animation
  • At least a motion tween
  • Some sort of background
Submission date and format
  • To be returned by Monday, at start of week 3 lesson
  • Use the following Flash file name p1-familyname-firstname.fla, e.g.
p1-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 motion tween must be made by yourself.
  • You must fill in a document description using a template (see below)
  • Note: A motion tween that includes frame-by-frame changes (i.e. several tweens in a row) does count as both frame-by-frame and motion animation).
  • 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. Errors - Presence/Absence of errors: --/-/0
  7. 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
  • Late homework policy: See the syllabus
The document description

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

  • Insert it with menu Modify->Document
  • Enter a title and description
  • You may first cut/paste the template below into a notepad and edit, then paste contents to Flash.
  • Please keep the titles surrounded by "===" and use "*" for bullets as in the example that follows.

Cut/paste this template: 



=== Author and Date ===


=== Objectives ===
 
 
=== Production steps (summary) ===
 
  
=== Difficulties and self-evaluation ===
 
 
=== Credits and bibliography ===

Example: 

=== Author and Date ===
Daniel K. Schneider, sept 1 2007.

=== Objectives ===

A flying rocket that I could insert on top of a web page to give it a feel of dynamism.
It should be flaming, not just moving.
 
=== Production steps (summary) ===

* Copied a rocket in SVG from the Internet
* Made a frame-by-frame animation with 4 frames
* I broke apart the rocket and changed size and shape of the flames
* Saved this animation as a *.swf file
* Imported the rocket to a new file
* Made the rocket smaller and turned it with the transform tool
* Changed background to blue
* Made a motion tween from right to left (rocket will enter and leave the stage)
  
=== Difficulties and self-evaluation ===
 
* I didn't find this difficult.
* Please teach me how to stop the animation.
* I am quite happy with the result, but I think that the flame animation could be improved,
  i.e. the flames are hard to see in the motion animation.

=== Credits and bibliography ===

* Rocket: http://commons.uncyclomedia.org/wiki/Image:Rocket.svg
* I just used the handouts and textbook
Hints
  • Go for something that is simple, e.g. animation of something with "sticks" is just fine.
  • Type of background depends on your objectives, it can be just a color.
  • Use this exercise to prototype some feature of your term project.
  • Remember the academic honesty policy ! Homework without credits given to external resources used will be refused.

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.

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)
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2110&oldid=14642"