ET34 Web Animation 1 - Using Flash for Interactive Media: SYLLABUS
Winter 2006

Section 4048M 5:30 p - 9:50 p, AET Room 108

Santa Monica College - A.E.T.
Graphic Design Dept.
Instructor: James Reilly

Course Description


This course is an introduction to Macromedia "Flash". Even though this is an "introduction" to Flash, it is not a course for students unfamiliar with computer graphics applications**. Flash is a vector-based, interactive animation creation program designed to enable the addition of dynamic full-screen character, scene, interface and motion graphics animation to websites. And, with its ability to be easily integrated into HTML pages, Flash is now being used to completely design many interactive websites that deliver both visual and textual content, as browsers are including the Flash Player plugin with their newest versions.

Additionally, producers of animated "cartoons" have discovered that the unique drawing characteristics in Flash; and the relatively short learning curve for creating 2-D animation with the program make it an ideal tool for the development of new projects for on-line entertainment, as well as television show production.

The goal of this course is to allow students to gain a introductory knowledge of Macromedia Flash, and begin to create projects that will enhance their portfolios, and allow them the ability to integrate dynamic, interactive flash intros, interfaces and navigation into websites.

Pre-requisites

ET34 is open to all SMC students**. Students will be expected to exhibit proficiency in the creation of digital graphics, meaning that you must already be comfortable with Photoshop© and/or Illustrator© and the use of standard graphics applications tool pallets. It is also highly recommended that students understand and have had some experience with Interactive Media developement (such as HTML and/or Dreamweaver© or Director©).**

** Classes in the subjects/applications described in this section are available at AET to all SMC students; and the completion of such courses will allow you to achive the highest level of quality in your Flash work, and to create elements which will enhance your personal portfolio. The lack of experience in these subjects/applications will probably cause those students to fall behind or produce poor quality work and possibly risk failing the course.

Textbooks

  • Beginning Flash book: Flash MX 2004: Grphics, Animation & Interactivity; by James L. M.S.Ed. Mohler:
    Flash MX 2004: Graphics, Animation & Interactivity

Materials Needed

  • USB Jump Drive
  • Mini headphones

Recommended

  • Sound effects CD;
    "A Zillion Sounds" available from: www.beachware.com ($24.95 or less) or the AET Bookstore ($17.95)

Free Trial version of Macromedia Flash (lasts 30 days, so time it carefully)

Schedule


Week

1

Flash: what can it do, and how does it do it?
What is vector based drawing?
The Flash interface.
Drawing with Flash: the tools that make lines, shapes, colors and text.
Creating "symbols": graphics, movie clips,and buttons. The "library".
Using the layers: locking, hiding, outlines.
Organization: naming symbols, layers, and instances before you get overwhelmed.
Naming your files and projects.
Frames and animation: "keyframes", frame-by-frame animation, tweening.
Moving, scaling, and rotating "instances".
Color and transparency effects.
Text and fonts: "breaking apart" text and file size issues. Cross browser capability.

This week's advice: Read your book, use the "online reference manual", lock layers that you are not working on, name items as you create them, do not animate (move, zoom in/out, fade in/out) anything bigger than quarter-screen.

Cool site of the month: Jib Jab

Homework: Recreate an art "masterpiece" using the Flash Tool Pallet. You may import a bitmapped image from a scan or the web to "trace" over. DO NOT use the "Trace Bitmap" function within Flash to turn a bitmap into a vector image (you will not be given credit for the assignment).

 

Week

2

*CLICK HERE for "Rotating Spheres" Instructions & Demo

The elements of a good Flash animation

Sound effects: using SoundForge to create loops and optimize effects sounds.
Importing sounds and adding them to symbols or timelines.
Creating high-quality images with the Flash drawing tools.
Using bitmapped images in Flash: size matters!
The "Trace Bitmap" fuction.
File size for web delivery: our goal is 100k for a short piece.
Using gradient fills to simulate 3-D in vector art.
Traditional animation principles: stretch & squash, anticipation & reaction.
Traditional drawing rules apply: use scale, color values, and perspective to create distance.
Online resources available to Flash producers:

Homework: Create a cool "logo animation", with sound, which may be used for an intro to your final project, (which can be a "mini Flash website" consisting of all your assignments). 10 seconds, or 120 frames maximum length.


Week

3

*CLICK HERE for "Bomb Demo" Instructions & Demo
Using multiple Scenes for interactivity

Adding, naming and organizing Scenes to set up a "viewer's choice" scenario.
Intro and optional outcome Scenes; copying and pasting visuals (frames) from scene to scene to allow a seamless transition.
Creating Buttons for movie navigation and interactive selection.

Frame Actions for movie / scene control; and Button Instance Actions for navigation and interaction.
Duplicating Symbols in the Library, and other ways to create stages of Instances or Buttons.
Details that make the TOTAL product.
Introduction to "with _root"
*Here is a sample of what can be done with the "with" action:

This week's advice: Do not settle for low quality graphics. Unless you INTEND to include "stick figures" or childish artwork in your Flash pieces, take the time to create high-quality visual elements. Use books, photographs, ect. as reference material. Cartooning is great, and is a special skill that must be learned. Even with interface design, quality is paramount. Whether the look you want is "Tooney" or faux 3-D, do it as good as possible, or don't do it at all!

Homework: Create "Good - Bad" alternate outcome animation using "Scenes": An Intro or "set-up", then the resultant scenes depending on the viewers choice.

 

Weeks

4

"with _root": the foundation of interactivity in Flash
Naming instances and the effect of keyframes on instance actions.
Preparing a Movie Clip to receive a "with" command.
Controlling the movie's Time-line with the "with _root" command.
Mouse Event options and "Go to... and Play/Stop"
"with's use as a Button Instance action or a Frame Action.
Communicating with multiple Targets; Targets 'talking to' Targets.
Making sophisticated Buttons, with sounds, motion and interactivity.
Creating Symbols specifically for use as Button stages.
Creative 'Hot Spots' or "Hit" areas.
More Button Issues; sometimes you have to 'fake' it.
*Check out this game I made using "with" commands:

This week's advice: As your projects get more sophisticated, and complicated, Pre-planning or Storyboarding becomes a neccessity. Designing on the computer screen will ultimately result in an inferior product. Don't be afraid to sketch out your ideas on paper. This will help you pre-inventory which Symbols you must create within Flash, and what must be created in other programs to be imported (bitmapps, sounds, ect.)

Homework: Make an Interactive Game or Virtual Greeting Card using multiple "with" commands to include in your Final Project.

Cool site of the month: Balthaser.com

 

Week

5 - 6

Using the main timeline in Flash to animate walking/talking characters.
Body parts as Symbols: A blank face, mouth shapes, eye blinks, (arms & legs).
Frame-by-frame "In-betweening" for smooth character motion.
Using "Mask" Layers; Tweening the Mask Layer and the Mask"ed" Layer.
Masking multiple layers to create a cleanly 'cropped' SWF movie.
Creating a Loading Loop with the "If Frame is Loaded..." action.
Multiple Loading Loops, and 'Game' Loading Loops.
Outputting Flash movies for display in browsers.
"Make Movie" settings; bitmap quality;, sound compression.
Using the "Bandwidth Profiler" to assist in file size reduction.
Flash's "Publish" function: building a basic HTML page.
"Publish Settings"
Taking the next step with an HTML editing program such as 'Dreamweaver'.
Building a Flash driven website with the "Get URL" action.
Items not previously covered, or which require special attention

Homework: Finnish your Final Project

 

Week 6

Presentation of Final Projects

LAB
TIME
Students are expected to perform 3 hours of lab time, on their own schedules, per class meeting. But I expect that you will spend MUCH more than that creating exquisite work that just might get you a job!

*Course contents may be adjusted as determined by the progress of the class.
**Due to School Holidays , there will be no class on ...

Monday, January. 15 (Martin Luther King Day)

Project List

The assignments:

  • "Cartoon" Style Self Portrait or Inanimate Object drawn in Flash (10 points)
  • Motion graphics "Logo Animation" with sound (20 points)
  • "Viewer's choice" alternate outcome animation (20 points)
  • Interactive game (using "with _root") (20 points)

  • Final Project - Student Choice. Examples are: Walking / Talking Character(s) animation, Flash Interface / menu within mini-website displaying all previous assignments, Animated Self-Portrait or Art "Masterptece" with sound (minimum 20 seconds on timeline), or New Work consisting of combination of techniques learned in class or elsewhere. (20 points)

  • *There will be a written Mid-term Exam given at the begining of the 8th week. (10 points)

 

**This syllabus is subject to change

Missing classes can cause you to fall behind. Therefore, please attend every class and be on time. Students who are absent excessively will be dropped. Attendance will be considered in the calculation of your final grade.
Total Points / Grade
100 - 90
A
Credit
89 - 80
B
Credit
79 - 70
C
Credit
69 - 60
D
No Credit
< 60
F
No Credit


Contact James Reilly
reilly@jamesreilly.com

Link to JAMESREILLY.COM | Return to James Reilly's SMC Info Page

Santa Monica College | AET

Link to
                          Postcard AMERICA.com