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
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
|
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).
|
|
*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.
|
|
*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.
|
|
"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
|
|
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
|