COAP:COAP-2110/week1

Week 1 Program and assignment

Main topics

• Simple drawing and frame-by-frame animation

What you will learn

• Demo of some term projects (See the N: drive)
• exams2007/
• exams2008/
• exams2010/

Monday

Elements of the Flash Desktop

• Handout: Flash CS6 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
• In a nutshell: Get SVG objects from http://openclipart.org/ and import via Illustrator

Wednesday

Frame-by-frame animation

• Previews: flash-cs6-simple-fbf.html. Stickman, Shakin hello, flash-cs6-rocket, flash-cs6-rocket-symbol
• Handout: Flash frame-by-frame animation tutorial (includes explanations for the above)
• Example files directory: http://tecfa.unige.ch/guides/flash/ex6/frame-by-frame-intro/

Using Symbols (optional)

• Handout: Flash embedded movie clip tutorial (only section 2 - Creation and manipulation of embedded movie clips. Skip the rest, i.e. the ActionScript parts)

Importing SVG clipart via Illustrator

• Get it from http://openclipart.org
• Rather go for simple objects ...
• Open the SVG file in Illustrator, select all (CTRL-A), and copy (CTRL-C)
• Paste to Flash (CTRL-V)
• Immediately hit ALT-CTRL-S (press all three keys) for resizing
• If you want to edit an imported object, you may have to break it apart (right-click menu) and/or "ungroup" (Edit menu), and finally distribute to layers (ask for advice)

Homework 1 project - Week 1

Due

• Wednesday week 2, before class (but try to finish the project before Monday week 2 !)

Learning materials

• See the "handouts" recommended above. It's all in there. If you need more, consult the textbook.
• Textbook, chapter 1 (in particular panels and toolbars)
• Textbook, chapter 2 (you can skip "creating original artwork" with the pen tool, except if you truly wish to learn how to draw)

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 one frame-by-frame animation
• This frame-by-frame animation must be embedded in a movie clip symbol (Do not use the main timeline !)
• Some sort of background, e.g. a simple landscape. You can create a layer in the main timeline for that.

Submission format

• Upload the the *.fla file in Worldclassroom

Other constraints

1. Reuse of assets (vector graphics, etc.): 2/3 imported but customized, max. 1/3 imported as is. Of course, you also can draw everything by yourself !
2. The frame-by-frame animation must be made by yourself
3. Provide credits for all imported assets
4. You must fill in a document description using a template (see below)
5. Homework projects are individual. If you work with others, make sure that the individual projects differ somewhat, i.e. the "reuse of objects" criteria above apply.

Evaluation criteria - bonus and malus points

• See the Grading form
• Notice:
  • Students who turn in an animation that is not embedded in a movie clip symbol will get a lesser grade.
  • Do not forget the documentation part (see just below)!

The document description

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

• Insert it with menu File->File Info... (Change Author, Title and Description).
• Enter a title and the description
• You may first cut/paste the template below into a text editor (e.g. notepad) and edit, then paste its contents to Flash.
• Please keep the titles surrounded by "===" and use "*" for bullets as in the example that follows.

Here is an example of a filled in homework template

=== 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.
 
=== Production steps (summary only) ===

* Copied a rocket in SVG from openclipart.org
* Made a frame-by-frame animation with 4 frames
* I broke apart the rocket and changed size and shape of the flames
* Made the rocket smaller and turned it with the transform tool
* Changed background to blue
  
=== 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 relatively simple but nice and finished, e.g. animation of something with "sticks" is just fine.
• Do not try to create "flying" animations with this technique. Rather work on objects that stay in place or that move just a little bit. "Flying" is better created with motion tweens (something you will do in homework 2).
• The type of background depends on your objectives, it can be just a color.
• You may use this exercise to prototype a single feature of your term project.
• Remember the academic honesty policy ! You must give credits to external resources that you used in your work.