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

 
spacer
 

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

 
spacer
 

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

 
spacer
 

SPRING BREAK - 4/13/06

         
spacer
 

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

 

 
spacer
 

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

 
spacer
 

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

 
spacer
 

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

 
spacer
 

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

 
spacer
 

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

 
spacer
 

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.

         
spacer
 

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.