|
This course will provide "hands on" experience with the tools and techniques used by designers and artists to create effective interfaces and engaging, sophisticated multimedia products and experiences. Topics include graphical user interface design, creating and optimizing graphics, audio, and video for multimedia applications and the web, designing for interactivity, and creating motion graphics and animation. Design skills, design process, personal expression, content development, and trends in visual communication as they relate to interactive media will be emphasized along with the learning of tools and techniques.
View/Download
Printable Syllabus in Acrobat PDF |
|
|
|
RTVC 157
Spring 2006
San Diego City College
Instructor: Karl Cleveland
Voicemail: (619) 388-4054
E-Mail: sdcc@karlcleveland.com
|
|
|
|
Week
I - 2/9/06
Topics:
- Introduction to the Course
- Review of Photoshop
- Layer-Based Step Animation Using Photoshop and Flash
Exercise #1: Animated Digital Morph
Capture a digital image or yourself and a fellow student
(according to the sequence described in class) using the digital camera(s)
provided. Using layers in Photoshop, and the techniques demonstrated in
class, create an animation that creatively transitions or morphs from
your picture into the next student's picture in around 10 steps (i.e.
using around 10 images).
To start, be sure to set your image size to 400 x 300, but
do not crop the image. Remember to isolate your image from the background
and save it as a transparent PNG-24 file (according to the naming convention
established in class... ie. "A01.png"), prior to creating the
rest of the images in your morphing sequence. Once you've created and
saved your starting PNG file, open it and open the PNG of the person you
are morphing into (i.e. open A01.png and B01.png). Put both of these images
into two different layers in new document and lock them as they are the
starting and ending points of your morphing sequence. Using layer effects
(or blending modes), filter effects, image adjustments, and/or other effects,
creatively transition from your image to the next student's image, as
demonstrated in class.
Save all of your images as transparent PNG-24 files and
put them into the Exercise 1 images folder according to the naming convention
established in class (i.e. A01.png, AO2.png, A03.png etc.).
Create a step animation in Flash using the PNG images you've
created. Set your movie size to 400 x 300. Import the full sequence of
images. Then, copy frames 1 through 10 and paste them into frames 11 through
20. Reverse the sequence of these copied frames (select frames 11 - 20
and then go to Modify/Timeline/Reverse Frames) so that your created animation
loops seemlessly back and forth. Save your work to the Exercise 1 folder
on the shared drive using your first name plus "e1" and the
extension ".fla" (i.e. "karle1.fla").
We will also compile these files together and import them files into
Flash to create one seemless animation that transitions to and from each
student in the class. |
|
|
|
Resources
Software and Resources
Macromedia
http://www.macromedia.com
Adobe
http://www.adobe.com/
Publishing
Peach Pit Press
http://www.peachpit.com
Friends of Ed
http://www.friendsofed.com
New Riders
http://www.newriders.com
Design Tutorials, Inspiration
http://www.lynda.com |
|
|
|
Week
II - 2/16/06
Topics:
- The Flash Interface, Menus, Tools, and Palettes
- Movie Properties
- Flash Drawing Tools
- Color in Flash
- Keyframes and Frames
- Step Animation/Animation Basics
Exercise #2: Step Animation
Explore the drawing tools in Flash to create representational or abstract
graphic artwork. Animate your artwork using step (or frame-by-frame) animation,
as demonstrated in class. Set your screen size to 600 x 400. You may wish
to use a series of keyframes, erasing and modifying your artwork as you
go. Or, you may wish to create straight-ahead animations by creating a
series of blank keyframes (Modify/Timeline/Convert To Blank Keyframes)
and filling the blank keyframes with novel imagery as you progress in
time (tip: be sure to turn on onion-skinning and use the comma (",")
and period (".") keys to quickly move through the timeline).
Save your work using your first name plus "e2" and the extension
".fla" (i.e. "karle2.fla"), and put it on the in the
Exercise 2 folder on the shared drive. |
|
|
|
Homework
Make your first post to the blog
Before next class, e-mail me with 2 or 3 ideas for the
theme for the Final Project Interactive Collage.
Resources
Flash Kit
http://www.flashkit.com
Macromedia Flash Support Center
www.macromedia.com/support/flash
Flash Forward Conferences
http://www.flashforwardconference.com |
|
|
|
Week
III - 2/23/06
Topics:
- Animation Principles
- Motion Tweening
- Shape Tweening
- Working with Text
- Symbols and Instances
Exercise #3: Motion as Metaphor
In Flash, use motion tweening and/or shape tweening to animate one of
the words listed below. Be sure that your choices for color, font face,
style, and most importantly motion/animation are thematically consistent
with your word of choice. In other words, use motion as a metaphor; your
animation should symbolically represent your chosen word. Use a stage
size of your choice, provided it is no larger than 780 pixels or smaller
than 250 pixels in height or width. Save your work to the shared drive
in the Exercise 3 folder with your first name plus e3 plus the .fla extension
(i.e. karle3.fla).
Choose one of the following words (or choose your own word):
- Anxious
- Lethargic
- Bloated
- Excited
- Sad
- Angry
- Nervous
- Burst
- Kinetic
- Rythm
- Momentum
- Strong
- Weak
- Depressed
|
- Sever
- Cry
- Laugh
- Stress
- Smile
- Breathe
- Ignite
- Power
- Haphazzard
- Mischevous
- Bitter
- Sunshine
- Rain
- Whisper
|
|
|
|
|
Homework
Before next class, e-mail me with 2 or 3 ideas for the
theme for the Final Project Interactive Collage.
Studio/Artist Exploration
Design Exploration
View Exploration Dates
Resources
View
Resource List
Kirupa
http://www.kirupa.com
Praystation
http://www.praystation.com
Colin Moock
http://www.moock.org
Adobe Motion Design Center
http://www.adobe.com/motiondesign
|
|
|
|
Week
IV - 3/2/06
Topics:
- Buttons
- Movie Clips
- Rotoscoping
- Actions and Interactivity
Exercise #4: Button Dance (Rotoscope Animation)
As demonstrated in class, create an animated button using rotoscoping.
Shoot two seconds of Quicktime video of yourself in motion. Import the
video onto the stage in Flash as a "link to the external video file."
Lock the video layer, and create a new layer on top of it. Insert a series
of blank keyframes (Modify/Timeline/Convert To Blank Keyframes) into the
new layer. Using the brush tool in Flash, paint (rotoscope) on top of
the video, outlining the shape of your body. Create a series of 12 - 24
frames in this manner. Once complete, copy the frames (without the video)
and paste them into a movieclip. Paste them again, and then reverse the
second sequence of copied frames so that your created animation loops
seemlessly back and forth. Then, copy the first frame of this movieclip;
create a new button symbol (Insert/Create New Symbol/Button) and paste
this first frame into the "Up" state of the button; then place
your movieclip across the "Over" state and "Down"
and "Hit" states (you may wish to create a slightly larger "Hit"
state). Return to the main movie scene, add your button to the stage,
and delete everything else. Save your work to the shared drive in the
Exercise 4 folder with your first name plus e4 plus the .fla extension
(i.e. karle4.fla).
View Rotoscoping Button Samples
Project #1: The Flash Project (due 4/27)
Begin to explore ideas for the Midterm Project. |
|
|
|
Homework
Before today's class, e-mail me with 2 or 3 ideas for the
theme for the Final Project Interactive Collage. Come to class prepared to talk about your ideas
for the theme.
Develop ideas for Midterm Project.
Midterm Project Preproposal due 3/9
Post to the class blog
Studio/Artist Exploration
Design Exploration
View Exploration Dates
Resources
View Resource List
Web and Multimedia Design Principles
RHIZOME
http://www.rhizome.org
Born Magazine
http://www.bornmag.com
Poems That Go
http://www.poemsthatgo.com
The Remedi Project
http://www.theremediproject.com
Becoming Human (documentary)
http://becominghuman.org |
|
|
|
Week
V - 3/9/06
Topics:
- Simple Buttons and Complex Buttons
- Scenes
- Working with Bitmaps (compression, fills, converting
to vector)
- Masking Effects
- Actionscripting and Interactivity
- Controlling the Timeline with Actionscript
- Controlling Movie Clips with Actionscript
- Basic Actionscript Samples
Exercise #5: Control Yourself
As demonstrated in class, create an interactive Flash movie wherein the user can control the movement of your body, head, and/or facial features. The exercise will explore using buttons, movieclips (including nested movieclips) and actionscript to control the timeline and any movieclips that are on the timeline.
Start by shooting 3 or 4 pictures of yourself in different positions (ie. mouth open and mouth closed). Edit these photos as necessary in Photoshop, reducing their size to 640 x 480 (or less) and isolating the image elements using masks. Save the images as transparent PNGs and import these images into Flash. Optionally, you may convert them into vector images using the trace bitmap feature. Put each element into its own movieclip, as well as into one primary top-level movieclip, aligning the elements as needed. Remember to name each instance of your movieclips, so that you can control those instances using actionscript. Create a series of buttons (with rollovers) and script these buttons to control the movieclips on the stage (such as buttons that controls whether your mouth is open, closed, or moving up and down). To complete the exercise, you must have buttons controlling at least two different movieclips.
Project #1: The Flash Project (due 4/27)
Begin to explore ideas for the Midterm Project. |
|
|
|
Homework
Midterm Project Preproposal
due 3/9
Midterm Project Proposal and Flowchart/Storyboard due on 3/30
Start collecting assets for the Midterm and Final Projects.
Post to the class blog
Studio/Artist Exploration
Design Exploration
View Exploration Dates
Resources
Basic Actionscript Samples
View Resource List
Flash Kit
http://www.flashkit.com
Actionscript.org
http://www.actionscript.org/
Macromedia Flash Support Center
www.macromedia.com/support/flash
Kirupa.com
http://www.kirupa.com
Ultrashock.com
http://www.ultrashock.com |
|
|
|
Week
VI - 3/16/06
Topics:
- Buttons, Movieclips, and Actionscript (continued)
- Sound Capturing and Editing
- Using Sound in Macromedia Flash
- Controlling Sound with Actionscript
Exercise #5: Control Yourself
See description above.
Project #1: The Flash Project (due 4/27)
Begin to design/produce your Midterm Project. |
|
|
|
Homework
Production for Midterm Project.
Bring any necessary assets/materials to class to work with during lab
time.
Midterm Project Proposal and Flowchart/Storyboard due on 3/30
Assets Due (MP and/or FP)
Develop ideas/collect assets for the Final Project Interactive Collage.
Post to the class blog
Studio/Artist Exploration
Design Exploration
View Exploration Dates
Resources
View Resource List
Web and Multimedia Design Principles
Organic Unity and Grading Considerations
Communication Arts Network
http://www.commarts.com
Surfstation
http://www.surfstation.lu
Kaliber 10000
http://www.k10k.net |
|
|
|
CLASS CANCELED - 3/23/06
I'm sick and have canceled the class for tonight. We will proceed with working with Flash Video and other topics next week.
The midterm project proposal and storyboard will now be due on April 6th.
The Exploration dates have been readjusted (pushed back one week). Check the new Exploration Dates Schedule. |
|
|
|
Homework
Production for Midterm Project.
Bring any necessary assets/materials to class to work with during lab
time.
Midterm Project Proposal and Flowchart/Storyboard due on 4/6
Collect Assets for Midterm or Final Project
Develop ideas/collect assets for the Final Project Interactive Collage.
Post to the class blog
Studio/Artist Exploration
Design Exploration
New Media Exploration
View Exploration Dates
Resources
View Resource List
Education, Inspiration at Kurzweilai.net
http://www.kurzweilai.net
Alt Pick Creative Sourcebook
http://www.altpick.com
Wired Magazine
http://www.wired.com |
|
|
|
Week
VIII - 3/30/06
Topics:
- Video in Flash
- FLV Video and Cue Points
- Actionscripting and Interactivity
Exercise #5: Control Yourself
See description above.
Project #1: The Flash Project (due 4/27)
Work on the design and production of your Midterm Project. The Midterm Project Proposal and Storyboard is due on April 6th. |
|
|
|
Homework
Production for Midterm Project.
Bring any necessary assets/materials to class to work with during lab
time.
Midterm Project Proposal and Flowchart/Storyboard due on 4/6
Collect Assets for Midterm or Final Project
Develop ideas/collect assets for the Final Project Interactive Collage.
Post to the class blog
Studio/Artist Exploration
Design Exploration
New Media Exploration
View Exploration Dates
Resources
View Resource List |
|
|
|
Week
IX - 4/6/06
Topics:
- Actionscripting
- Scripting Advanced Interactivity
Project #1: The Flash Project (due 4/27)
Work on the design and production of your Midterm Project. The Midterm Project CD-ROM is due on 4/27/06. |
|
|
|
Homework
Production for Midterm Project.
Bring any necessary assets/materials to class to work with during lab
time.
Midterm Project Proposal and Flowchart/Storyboard due on 4/6
Collect Assets for Midterm or Final Project
Develop ideas/collect assets for the Final Project Interactive Collage.
Post to the class blog
Studio/Artist Exploration
Design Exploration
New Media Exploration
View Exploration Dates
Resources
View Resource List
GotoAndLearn -- Actionscripting Tutorials
http://gotoandlearn.com
Adobe Motion Design Center
http://www.adobe.com/motiondesign
Blue Vertigo - Web/Multimedia Resources
http://bluevertigo.com.ar |
|
|
|
SPRING BREAK - 4/13/06 |
|
|
|
|
|
|
|
Week
X - 4/20/06
Topics:
- More Actionscripting Tips and Tricks
- Publishing
- Creating Projectors and the FSCommands
- Creating Executable CD-ROMs
- The basics of autorun and ico files
(see Creating an AutoPlay CD)
Project #1: The Flash Project (due 4/27)
Work on the production of your Midterm Project. The Midterm Project CD-ROM is due on 4/27/06. |
|
|
|
Homework
Production for Midterm Project.
Bring any necessary assets/materials to class to work with during lab
time.
Assets Due (MP and/or FP) for Midterm or Final Project
Develop ideas/collect assets for the Final Project Interactive Collage.
Post to the class blog
Studio/Artist Exploration
Design Exploration
New Media Exploration
View Exploration Dates
Resources
View Resource List
Basic Actionscript Samples
|
|
|
|
Week
XI - 4/27/06
Topics:
- Introduction to Director
- The Director Environment
- Assembling Casts
- Working with the Paint and Vector Windows
- Working with the Stage and Score in Director
- Director Animation Basics, Animating Sprites
- Step v. Tweened Animation in Director
- Animating Using Real-Time/Step Recording
- Film Loops
- Understanding Basic Lingo Handlers and Navigation
Exercise #6: Animation and Navigation Button Exercise
Using the imagery provided in class, create three buttons that navigate to three different kinds of animation (one tweened, one step, and one real-time recording).
Use the exercise to practice creating animations in Director and using lingo to navigate the timeline. Practice writing different kinds of scripts and using common handlers and lingo navigational commands such as:
HANDLERS
- on mouseUp
- on mouseDown
- on mouseEnter
- on mouseLeave
- on enterFrame
- on exitFrame
|
GO NAVIGATIONAL COMMANDS
- go to the frame
- go to the frame + x
- go to the frame - x
- go to frame x
- go to "yourmarker"
|
See additional handlers, common "go" commands, and lingo syntax information at: Understanding Basic Lingo Handlers and Navigation |
Save your work (i.e. "karle6.dir") to the shared drive. |
|
|
|
Homework
Midterm Project due 4/27
Develop ideas/collect assets for the Final Project Interactive Collage.
Post to the class blog
Studio/Artist Exploration
Design Exploration
New Media Exploration
View Exploration Dates
Resources
View Resource List
Macromedia Director Support Center
www.macromedia.com/support/director
Director Developer
http://www.diretordev.com
Update Stage
http://www.updatestage.com |
|
|
|
Week
XII - 5/4/06
Topics:
Exercise #7: Button Drama
Using the theme of "HOME" create an animated "button"/scene in Director.
With a stage size of 780 x 390, create a "button" of any size that fits on the stage. Your button should include a rollover state (mouseenter, mouseleave), and should also do something/animate when user clicks on it (mousedown or mouseup or both). Don't think about boring, traditional buttons, such as the rollover buttons most sites on the Web employ. Your button does not have to look like a button (at least not in the traditional sense). Rather, using the examples presented in class as inspiration, think in dramatic terms... the rollover state should build intrique, inviting the user to click on it. When they do click, they should be rewarded with an interesting animation/climax. You should develop your imagery in Photoshop first, and then import your PNG, JPEG, or PICT images into Director (Note: You'll probably want to use transparent PNG-24 files). Save your work (i.e. "karle7.dir") to the shared drive. |
|
|
|
Homework
Develop ideas/collect assets for the Final Project Interactive Collage. Bring in some imagery assets to work with for Exercise #7 on 5/4.
Post to the class blog
Studio/Artist Exploration
Design Exploration
New Media Exploration
View Exploration Dates
Resources
View Resource List
Director Web
http://www.mcli.dist.maricopa.edu/
director
Director Online User Group
http://www.director-online.com
Yugo Nakamura
http://www.yugop.com
Set Pixel
http://www.setpixel.com
Infourm
http://www.infourm.com
Sound of Design
http://www.soundofdesign.com |
|
|
|
Week
XIII - 5/11/06
Topics:
- Properties of Sprites and Members
- Controlling Sprite and Member Properties with Lingo
- Randomizing things using Lingo
- Working with Text and Field Members
- Essential Lingo Programming Skills
- Variables
- Conditionals
Project #2: The Director Project (due 6/1)
Work on the Final Project Interactive Collage. |
|
|
|
Homework
Work on the Final Project Interactive Collage. Bring your assets to work with.
I. Present Ideas and One Interactive/Animated Element (due 5/11). Present your project / idea, showing at least one fully complete button or interactive element with animation and other related imagery / animations / elements that you have complete or partially complete.
Post to the class blog
Studio/Artist Exploration
Design Exploration
New Media Exploration
View Exploration Dates
Resources
View Resource List |
|
|
|
Week
XIV - 5/18/06
Topics:
Project #2: The Director Project (due 6/1)
Work on the Final Project Interactive Collage. |
|
|
|
Homework
Work on the Final Project Interactive Collage. Bring your assets to work with.
II. Complete Foreground and Background (due 5/18). Present your project / idea, showing its continued development with foreground elements (at least one fully complete button/interactive element) and background elements/contextual scene. Ideally, you should have added or started working on a 2nd interactive element/button by this stage.
Studio/Artist Exploration
Design Exploration
New Media Exploration
View Exploration Dates
Resources
View Resource List
Lingo Programmer
http://lingoprogrammer.com
Animation Math in Lingo
http://www.jmckell.com
Lingo Worshop
http://www.lingoworkshop.com |
|
|
|
Week
XV - 5/25/06
Topics:
- Behaviors
- Repeat Loops
- Custom Cursors
- Timers
- Transitions
Project #2: The Director Project (due 6/1)
Work on the Final Project Interactive Collage.
You will need to integrate
your project with the other student projects that you link to (see the links.txt document in the shared drive). Use shared imagery or other strategies to create smooth
transitions between the projects.
Remember to save your movies with the proper naming convention
(i.e. "karl.dir") and to put your Director movie directly in the "Final Project" folder and not inside a sub folder.
The script to make a button link to another director movie
is as follows:
on
mouseUp
go to movie "moviename.dir"
end
To go to a specifc marker (or frame #) within another director
movie:
on
mouseUp
go to "markername" of movie "moviename.dir"
end
or
on
mouseUp
go to frame 20 of movie "moviename.dir"
end
You may need to end (or fadeout) any sounds that are playing before moving
to the next movie, such as with the following script:
on
mouseUp
sound
fadeout 1
sound
stop 2
go to movie "moviename.dir"
end
|
|
|
|
Homework
Work on the Final Project Interactive Collage. Bring your assets to work with.
III. Bring the Noise and Refine (due 5/25). Your button(s)/scene should be essentially complete with all elements and sound, and all interactivity. At this point you are functionally done with your individual project and have started to work on the buttons/transitions to the two other student projects.
New Media Exploration
View Exploration Dates
Resources
View Resource List |
|
|
|
Extra Lab Time - Saturday, 5/27
I'll be in the lab to help students from at least 9:30 a.m. - 12:30 p.m. on Saturday, 5/27. |
|
|
|
|
|
|
|
Week
XVI - 6/1/06
Topics:
- Final Project Link/Transition Debugging
- Burn all Final Projects to CD-ROMs for each student
- Final Project Critiques
|
|
|
|
Homework
Work on the Final Project Interactive Collage. Bring your assets to work with.
IV. Link and Collaborate (due 6/1). Integrate your project so that it links/transitions to two other student’s projects. Use shared imagery and create smooth transitions between projects.
|
|