Skip to Navigation | Skip to Content

Class Schedule

Week 1 (1/27)

TOPICS

  • Overview/Introduction to the Class and Syllabus
  • Introduction to Flash
  • The Flash Environment: Tools, Windows, Inspectors, Menus
  • Movie Properties
  • Flash Drawing Tools
  • Raster vs. vector graphics
  • Modifying Shapes and Paths
  • Grouping/Arranging
  • Color in Flash
  • Keyframes and Frames
  • Understanding Frame Rate
  • Onion-Skinning
  • Step Animation/Animation Basics

LAb/Homework

Exercise #1: STEP ANIMATION (due 2/3)

Explore the drawing tools in Flash to create representational or abstract graphic artwork. Animate your artwork using step animation (also known as frame-by-frame or straight ahead animation), as demonstrated in the video tutorials listed above.

Your animation should be at least 5 seconds long (or around 60 frames minimum). Set your screen size to 775 x 425. 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 (by hitting F7 or 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 forward and back in the timeline. Also, remember the quick keys: F5 = Insert Frame, F6 = Insert Keyframe, and F7 = Insert Blank Keyframe).

Name your file with the naming convention lastname-e1 (ie. "cleveland-e1.fla") and turn it in to the Exercise 1 folder on the shared network drive (NAS1).

LINKS & Resources

SITES of INSPIRATION

> Go to Top

Week 2 (2/3)

TOPICS

  • Reivew of Step Animation
  • Motion Tweening
  • Working with Frames, Keyframes, and Blank Keyframes
  • Adding, removing, moving, and copying frames
  • Timing and Frame Rates
  • Symbols and Instances
  • Animation Principles
  • Easing
  • Working with Text

LAB/HoMEWORK

Exercise #2: Kinetic Typography - MOtion As Metaphor tweened animation (Due 2/17)

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, style, and most importantly motion/animation are thematically consistent with your word of choice. You may choose to animate properties such as position, scale, rotation, tint, alpha transparency, and/or filters such as blur and glow. Use animation principles such as acceleration and deceleration, squash and stretch, and anticipation and follow-through. Whatever you choose, use motion as a metaphor. In other words, your animation should symbolically represent your chosen word. Use a stage size of 775 x 425 pixels.

Choose one of the following words (or choose your own word):

  • Anxious
  • Lethargic
  • Bloated
  • Excited
  • Sad
  • Angry
  • Nervous
  • Bursting
  • Kinetic
  • Rhythm
  • Momentum
  • Strong
  • Weak
  • Depressed
  • Sever
  • Cry
  • Laugh
  • Stress
  • Smile
  • Breathe
  • Ignite
  • Power
  • Haphazard
  • Mischievous
  • Bitter
  • Sunshine
  • Rain
  • Whisper

Name your file with the naming convention lastname-e2 (ie. "cleveland-e2.fla") and turn it in to the Exercise 2 folder on the shared network drive (NAS1).

LINKS & RESOURCES

SITES of INSPIRATION

  • Born Magazine (inspirational poetry and projects that marry design, interactive media, and the literary arts)
  • Favourite Website Awards (lots of cool, inspirational Flash sites)
  • Media Storm (journalism, documentary forms, multimedia storytelling)
  • Big Spaceship (design agency known for their cutting-edge Flash work)

> Go to Top

Week 3 (2/10)

TOPICS

  • Working with Text / Animation Techniques (continued)
  • Break Apart and Distribute to Layers
  • Shape Tweening
  • Motion Paths
  • Working with Movie Clips

LAB/HoMEWORK

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 4 (2/17)

TOPICS

  • Buttons in Flash
  • Rollover Buttons
  • Invisible Buttons
  • Creating Complex/Animated Buttons with Movieclips
  • Rotoscoping
  • Building Complexity using Movieclips
  • Nesting Movieclips and Symbols

LAB/HoMEWORK

Exercise #3: Button dance - Rotoscoping and Nesting (Due 2/24)

In Flash, create an animated button using rotoscoping and nested symbols.

View Rotoscoping Button Samples

Check out how rotoscoping is used in Waking Life and A Scanner Darkly for more sophisticated examples of this technique.

1) Shoot around two seconds of video of yourself (or a friend) in motion. You can use any digital camera that can take simple video (and create .avi, .mov, or .mpeg files). Import the video (File > Import > Import Video) onto the stage in Flash as an "embedded swf" or "embedded flv" (In CS4, you must convert your video to the FLV format prior to importing using the Adobe Media Encoder). 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.

2) Using the brush tool in Flash, paint (rotoscope) on top of the video, outlining the shape of your body and then filling in the outlines with the paint bucket tool. Create a series of 12 - 24 frames in this manner, choosing to paint the series of frames that contain the most interesting motion.

3) Once complete, copy the frames (without the video). To copy frames, select the sequence of frames you wish to copy and right click to choose Copy Frames (or Edit > Timeline > Copy Frames. Paste your copied frames into a movieclip (Insert > New Symbol > Movieclip). Paste them again a second time, and then reverse the second sequence of copied frames (Modify > Timeline > Reverse Frames) so that your created animation loops seamlessly back and forth inside the movieclip symbol.

4) Create a new button symbol (Insert > New Symbol > Button). Nest the movieclip created in step 3 into the Up frame of the button by dragging it in from the library. Then, hit F6 or Insert Keyframe to copy the movieclip into the Over frame of the button. Return to the Up frame of the button, select the MovieClip and break it apart (Modify > Break Apart) so that it will not animate in the Up frame, only in the Over frame. Insert a keyframe in the "Hit" frame to continue your movieclip through the down and hit states (you may wish to create a slightly larger "Hit" state).

5) Return to the main movie scene, create a new layer and add your button (from the library) to the stage. You can delete your other layers (or turn them into guides). Name your file with the naming convention lastname-e3 (ie. "cleveland-e3.fla") and save into the Exercise 3 folder on the shared network drive.

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 5 (2/24)

TOPICS

  • Actionscripting and Interactivity
  • Controlling the Timeline with Actionscript
  • Controlling MovieClips with Actionscript
  • Building Complexity using Movieclips
  • Nesting Movieclips and Symbols
  • Project #1 - Introduction and Demos

LAB/HoMEWORK

Project #1 - Animation (Due 4/7)

Create an animated character and scene. Using the drawing tools in Flash (and/or imagery created in Photoshop or elsewhere), create an animated character of your choice (this can be an animal, bird, fish, spaceship, or anything you can think of). Using nested movieclips, animate at least two elements on the character (such as the wings and eyes).

Place your character within a scene that contains a foreground, middleground, and background. Animate the scene. If your character is in the foreground, for example, you may choose to create simple panning (and looping) animations for the background (such as clouds or mountains) and middleground (such as trees or objects) and animate the middleground so that it is faster than the background, giving a sense of correct perspective and speed.

At minimum, you are required to create one animated character/scene. However, if you wish, you are encouraged to expand your animation into a simple short story, wherein you include a beginning, middle, and end.

Your animation project must include appropriate sound (background sounds, event sounds, or both).

Lastly, your project must include an interface with the project’s title and your name, and that includes a start or launch button/link that is scripted to begin the project.

Name your file with the naming convention lastname-p1 (ie. "cleveland-p1.fla") and and put it into the Project 1 folder on the shared network drive.

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 6 (3/3)

TOPICS

  • Working with Bitmaps
  • Bitmap compression, fills, converting to vector
  • Bitmaps with Transparency (using PNG)
  • Creating a Slideshow of Bitmap Images
  • Actionscripting and Interactivity
  • Masking Effects
  • Filter Effects and Blend Modes

LAB/HoMEWORK

Exercise #4: Interactive SLIDESHOW - Working with BitmAps, Buttons, and Actions (Due 3/17)

Create a slideshow of bitmap images. Begin by creating a new Flash document that uses Actionscript 2.0. Import your images into your library in Flash and place them sequentially on the stage/timeline. Create buttons and add actions/interactivity that give the user some control over the slideshow. The actionscript for creating "Next" and "Previous" buttons and other scripting examples are below. You may also wish to review Basic Actionscripting Samples. Optionally, you may wish to animate the transitions between your slideshow images (such as adding crossfades, etc.) and/or apply a mask to them. It is preferred that you use your own photos for the slideshow, but optionally you can use the images provided in the "photos" folder in the class files on the shared/network drive (NAS1). Name your file with the naming convention lastname-e4 (ie. "cleveland-e4.fla") and save it into the Exercise 4 folder on the shared/network drive.

Add this action to your next button:

on (release) {
nextFrame();
}

Add this action to your previous button:

on (release) {
prevFrame();
}

Add this action to frame 1 of your movie to prevent it from automatically playing:

stop();

Add this action to a button to make it go to a particular frame (frame 10 in the example below):

on (release) {
gotoAndStop(10);
}

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 7 (3/10)

TOPICS

  • Importing Sound and Music in Flash
  • Compressing and Editing Sound within Flash
  • Background Sounds and Event Sounds
  • Lip Syncing and Streaming Sounds
  • Controlling Sound

> Go to Top