1 Week 1 Program and assignment
- Main topics
- Simple drawing and frame-by-frame animation
- What you will learn
- 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
- 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
- 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)
1.3 Homework 1 project - Week 1
- 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)
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
- 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 !
- The frame-by-frame animation must be made by yourself
- Provide credits for all imported assets
- You must fill in a document description using a template (see below)
- 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
- 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
- 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.