Skip to Navigation | Skip to Content

MAT 150 - Flash 1: Animation and Interactivity

Menu

Class Schedule

Week 1 (1/22)

TOPICS

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

LAb/Homework/ONLINE

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

Explore the drawing tools in Animate CC 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 class and in the video tutorials.

Your animation should be at least 5 seconds long (or around 60 frames minimum with a frame rate of 12 fps). Set your screen size to 858 x 480. 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 publish it to create .swf and .html files. Additionally, explore creating an animated gif from the file, using Explort > Export Animated GIF. Upload the .gif, .fla, .swf, and .html files to the exercise1 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

LINKS & Resources

  • CollegeBuys.org (discounted software through the Foundation for California Community Colleges - This is best pricing on the software)
  • The recommended textbook for free via Safari Books Online.

The Art of Animation, Some History, and Inspiration

  1. The Art of Animation and Motion Graphics (from PBS Off Book)
  2. Some History and Inspiration for Step Animation (interactive toys)
  3. Film Before Film - Phenakistoscope, Zootrope, Praxinoscope (YouTube)
  4. Emile Cohl - The Puppet's Nightmare - The first animated film (YouTube)
  5. Winsor McCay - Gertie the Dinosaur - The first animated film using keyframe animation techniques (YouTube)

SITES of INSPIRATION

> Go to Top

Week 2 (1/27 + 1/29)

TOPICS (1/27)

  • Overview/Introduction to the Class and Syllabus (continued)
  • Step Animation/Animation Basics (continued)
  • Drawing in Animate
  • 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/ONLINE

Exercise #2: Kinetic Typography - MOtion As Metaphor tweened animationS (Due 2/12, Due date Extended until 2/19)

In Animate/Flash, use motion tweening and/or shape tweening to explore animation possibilities. Animate two of the words listed below (or choose your own words). 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 animations should symbolically represent your chosen words. Animate each word within the same timeline or use Insert > Scene to create a separate scene for each word. Use a stage size of 854 x 480 pixels.

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

  • Anxious
  • Lethargic
  • Bloated
  • Excited
  • Sad
  • Angry
  • Nervous
  • Bursting
  • Kinetic
  • Rhythm
  • Momentum
  • Strong
  • Weak
  • Depressed
  • Amplify
  • Sever
  • Cry
  • Laugh
  • Stress
  • Breathe
  • Ignite
  • Power
  • Haphazard
  • Mischievous
  • Bitter
  • Connect
  • Share
  • Creepy
  • Whisper
  • Turbulent

Name your file with the naming convention lastname-e2 (ie. "cleveland-e2.fla") and publish it to create .swf and .html files. Additionally, explore creating a video from the file, using Explort > Export Video/Media (the default format should be H.264 .mp4 video, which is what you want). Create a folder with the naming convention lastname-e2 (ie. "cleveland-e2"). Put all of your files inside of this folder. Upload your folder (with the .fla, .swf, .html, and .mp4 files) to the exercise2 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

LINKS & RESOURCES

SITES of INSPIRATION

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

> Go to Top

Week 3 (2/3 + 2/5)

TOPICS

  • 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 / Animation Techniques

LAB/HoMEWORK/ONLINE

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 4 (2/10 + 2/12)

TOPICS

  • Working with Text / Animation Techniques (continued)
  • Anticipation and Follow-Through (animation principles continued)
  • Break Apart and Distribute to Layers
  • Shape Tweening
  • Motion Paths
  • Working with Graphic Symbols and Movie Clips

LAB/HoMEWORK/ONLINE

Exercise #3: Haiku Banner Ad (DUe 3/2)

Animate/Flash is commonly used for creating the ad banners that are ubiquitous across the web. Such interactive advertising is generally governed by the Interactive Advertising Bureau (IAB), which establishes guidelines for such ads. Your task is to explore animation techniques and principles while creating an ad using Animate/Flash. But, rather than advertising a commercial product or service, your ad banner should feature a haiku poem.

You can find a haiku poem (see below for resources) or write one of your own. Use motion tweening, shape tweening, or step animation to animate the phrases, words, and/or individual letters of the poem. Be sure that your choices for color, font, style, and most importantly motion/animation are thematically consistent with the poem. In other words, use motion as metaphor. Your animation and design should function to communicate the theme(s) of the poem.

While your focus should be on typographic design and animation, import and include at least one image in your ad/poem (even if it is not animated and just used for background texture).

You may choose to animate properties such as position, scale, rotation, 3D rotation, tint, alpha transparency, brightness, and/or filter effects. Consider contrasting these properties in your animation (such as very small to very big; very slow to very fast; completely transparent to completely opaque, etc). Attempt to use animation principles such as acceleration and deceleration, squash and stretch, and anticipation and follow-through. Whatever you choose, your animation should symbolically represent your poem.

Choose a stage size from one of the following common ad unit sizes (as per the IAB guidelines for width x height in pixels):

  • Leaderboard: 728 x 90
  • Billboard: 970 x 250
  • Rectangle: 180 x 150
  • Medium Rectangle: 300 x 250
  • Wide Skyscraper: 160 x 600
  • Half Page: 300 x 600

Name your file with the naming convention lastname-e3 (ie. "cleveland-e3.fla") and publish it to create .swf and .html files. Upload the .fla, .swf, and .html files to the exercise3 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

Haiku Resources

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 5 (2/17 + 2/19)

No class on 2/17. It's the presidents' day holiday.

TOPICS (2/19)

  • Review Exercise #2
  • Shape Tweening
  • Importing Graphics
  • Working with Symbols
  • Movie Clip Symbols
  • Graphic Symbols

LAB/HOMEWORK/ONLINE

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 6 (2/24 + 2/26)

TOPICS

  • Shape Tweening (continued)
  • Importing Graphics
  • Button Symbols
  • Button States (Normal, Over, Down, Hit)
  • Invisible Buttons
  • Creating Complex/Animated Buttons with Movieclips
  • Rotoscoping
  • The Adobe Media Encoder
  • Building Complexity using Movieclips
  • Nesting Movieclips and Symbols
  • Actionscripting and Interactivity

LAB/HOMEWORK/ONLINE

Exercise #4: Button dance - Rotoscoping and Nesting (Due 3/9)

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

View Rotoscoping Button Samples

You are welcome to explore creative and/or alternative styles of rotoscoping animation, but the instructions and examples focus on creating a "silhouette-style" animated button. Check out how rotoscoping is used in Waking Life and A Scanner Darkly for more sophisticated examples of rotoscoping techniques. You might also check out YouTube videos such as this one and this one.

1) Shoot around two seconds of video of yourself (or a friend or pet) in motion. You can use any digital camera that can take simple video (and create .avi, .mov, or .mp4 files). If you cannot create your own video, you can download and use this video of me. Import the video (File > Import > Import Video) onto the stage in Flash and choose to "Embed H.264 video" (or "Embed FLV"). Note that flash does not natively support all video formats, so you must convert your video to H.264 encoded video in the .mp4 format or .flv encoded video prior importing your video into Flash. You can accomplish this with the Adobe Media Encoder (AME). 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 Animate/Flash, paint (rotoscope) on top of the video. To create "silhouette-style" artwork, outline the shape of your body and then fill 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 publish it to create .swf and .html files. Upload the .fla, .swf, and .html files to the exercise3 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and a video tutorial.

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 7 (3/2 + 3/4)

TOPICS

  • Working with Buttons and Rotoscoping (continued)
  • Project #1 - Introduction and Demos
  • Building Complexity using Movieclips
  • Nesting Movieclips and Symbols
  • Character Development

LAB/HOMEWORK/ONLINE

Project #1 - CHARACTER Animation (Due 4/15 now due 4/22)

Create an animated character and scene.

Using the drawing tools in Animate/Flash (and/or imagery created in Photoshop, Illustrator, or elsewhere), create an animated character of your choice (this can be an animal, bird, fish, robot, spaceship, or anything you can think of). Using nested movieclips and/or graphic symbols, 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.

At minimum, you are required to create one animated character/scene. This requirement is purposely broad so that you can adapt this assignment to your own creative goals and level of expertise. However, you are encouraged to expand upon your animation and/or explore animation techniques in one of several ways, such as:

  • Using your animation to tell a simple short story, wherein you include a beginning, middle, and end (or have a narrative structure of some kind such as a setup, a conflict, and and a resolution).
  • Alternatively (or in addition), you are encouraged to explore voice-over and lip-syncing techniques so that you make your character sing or talk.
  • Alternatively (or in addition), you are encouraged to explore rigging a character and animating it using layer parenting and/or inverse kinematics (and the bone tool).
  • Alternatively (or in addition), you are encouraged to explore using the Camera tool to stage and animate your scene using panning and zooming as appropriate.
  • Alternatively (or in addition), you are encouraged to explore "parallax scrolling" wherein you animate the foreground, middleground, and background at varying relative speeds such that it appears that the background graphics move more slowly than foreground graphics, creating the illusion of depth in your 2D scene. If your character is in the foreground, for example, you may choose to create simple panning (and perhaps looping) animations for the background (such as clouds or mountains) and middleground (such as trees or objects) and animate the foreground/middleground graphics so that they are faster than the background graphics to give a sense of perspective, realism, and immersion.

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 a "Play" (start or launch) button/link that is scripted to begin the project. Optionally, you may choose to add a "Credits" and/or "About" button to your interface to provide additional project details.

I recommend a stage size of 1280x720 for the project, but you may use any size you feel is appropriate.

Name your file with the naming convention lastname-p1 (ie. "cleveland-p1.fla") and publish it to create .swf and .html files. Upload the .fla, .swf, and .html files to the project1 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 8 (3/9 + 3/11)

TOPICS

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

LAB/HOMEWORK/ONLINE

Exercise #5: Interactive SLIDESHOW Application - Working with BitmAps, Buttons, and Actions (Due 3/25 now due 4/6)

Create an interactive slideshow of bitmap images.

Begin by creating a new Animate/Flash document that uses Actionscript 3.0. Import your images into your library 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 scripting "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 strongly preferred that you use your own photos for the slideshow, but you can explore working with the images from the demo by downloading them from here.

Name your file with the naming convention lastname-e5 (ie. "cleveland-e5.fla") and publish it to create .swf and .html files. Upload the .fla, .swf, and .html files to the exercise5 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions and a video tutorial.

Note: If using Animate 2019, be sure to go to Modify > Document and turn off/uncheck the "Use Advanced Layers" mode. This mode may interfere with your scripting.

Add this ActionScript to frame one (and be sure to give instance names to your next and previous button instances):

stop();

next_btn.addEventListener(MouseEvent.CLICK, onClickNext);

function onClickNext(e:MouseEvent) {
nextFrame();
}

prev_btn.addEventListener(MouseEvent.CLICK, onClickPrev);

function onClickPrev(e:MouseEvent) {
prevFrame();
}

Add the following 'conditional' code to allow the movie to return to the beginning once you hit the end (and vice versa).

stop();

next_btn.addEventListener(MouseEvent.CLICK, onClickNext);

function onClickNext(e:MouseEvent) {
if (currentFrame == totalFrames) {
gotoAndStop(1);
} else {
nextFrame();
}
}

prev_btn.addEventListener(MouseEvent.CLICK, onClickPrev);

function onClickPrev(e:MouseEvent) {
if (currentFrame == 1) {
gotoAndStop(totalFrames);
} else {
prevFrame();
}
}

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Spring Break (no class on 3/16 + 3/18)

TOPICS

  • There will be no topics.
  • Sleep? Maybe go outside? Maybe dip your toes in the sand?

> Go to Top

Week 9 (3/23 - 3/29) - Transition Week - No Class

All classes at MiraCosta are 'paused' this week as the campus prepares to transition to online instruction due to the coronavirus. Students have a 2nd week of spring break. All classes will resume in an online format beginning March 30. See our agenda for next week. Note that some assignments and deadlines have been (or will be) revised, including the due date for Exercise #5 (which is now due on 4/6) and Project #1 (now due on 4/22).

Week 10 (3/30 - 4/5) - OUR CLASS IS NOW ONLINE

start by watching this video:

TOPICS

  • Character Development
  • Slideshow Exercise Techniques
  • Importing Sound and Music
  • Compressing and Editing Sound
  • Background Sounds and Event Sounds
  • Lip Syncing and Streaming Sounds
  • Controlling Sounds
  • External Sounds

TASKS

VIDEO TUTORIALS

The video tutorials below include review of some topics we've covered already in the class, such as creating a slideshow for Exercise #5 and about Character Development for Project #1. These videos are optional; review them as needed. However, there are also new videos about using Sound, which are required.

Exercise #5 Demos - Creating A Slideshow (optional)

  1. Creating a Slideshow - Importing and Arranging Images (9:07)
  2. Creating a Slideshow - Scripting Basic Interactivity (14:36)
  3. Creating a Slideshow - Scripting Conditionals (11:01)
  4. Creating a Slideshow - Editing and Decoration (17:46)
  5. Creating a Slideshow - Adding an Animated Mask (20:02)
  6. Creating a Slideshow - Animated Slideshow and Motion Presets (16:19)
  7. Creating a Slideshow - Animated Slideshow with Interactivity (22:18)

Character Development and Drawing (for Project #1, optional)

  1. Character Development - Research + Creative Investigation - Part 1 (7:47)
  2. Character Development - Drawing - Primitive Shapes, Width Tool and Profiles, Face, Eyes, and Ears - Part 2 (19:41)
  3. Character Development - Drawing - Nose and Mouth- Part 3 (20:37)
  4. Character Development - Drawing - Texture, Shading, Brushes - Part 4 (22:03)

Working with Sound - Basics, Importing, Compression, Syncs, Editing (required)

  1. Sound - Importing and Adding Sound (6:28)
  2. Sound - Properties and Compression (8:25)
  3. Sound - Syncs and Background Sounds (7:03)
  4. Sound - Event and Button Sounds (6:57)
  5. Sound - Editing and Effects (16:47)
  6. Sound - Streaming Syncs and Split Audio (10:13)

Working with Sound - Lip Sync Demo with the Monkey Character (required)

  1. Sound - Lip Sync Demo (23:21)
  2. Sound - Auto Lip Syncing (7:49)

Working with Sound - External Sounds, Sound Controllers (recommended)

  1. Sound - Creating a Sound Controller (16:34)
  2. Sound - Loading and Playing External Sounds Using Actionscript 3.0 (7:04)
  3. Sound - Controlling External Sounds (9:17)

LINKS & RESOURCES

SITES of INSPIRATION

  • Incredibox (inspirational sound site, beatbox using Flash)
  • TheTurn.tv (multimedia artist/musician Fredo Viola using Flash)
  • Audiotool (A cool online app to create and edit audio)
  • Communication Arts (interactive annual winners)
  • The FWA (a showcase of lots of cool, creative, and cutting edge sites)

> Go to Top

Week 11 (4/6 - 4/12)

TOPICS

  • Working with Scenes
  • Project #1 Finishing Touches, Adding Sound, Creating the Project Interface
  • Creating a Character using Bitmap Images with Transparency (PNG-24)
  • Controlling Movieclips

TASKS

VIDEO TUTORIALS

Working with Scenes

  1. Working with Scenes (9:01)
  2. Controlling Scenes with Scripting - Interactive Navigation and Intercutting between Scenes (16:24)

Creating a Character and Building Complexity Using Nested Movieclips (Project #1 Demos - This first set is optional for review; we did this in class already. The videos below turn this into a more complete project.)

  1. Creating the "Bee" Character - The Body - Part 1 (8:05)
  2. Creating the "Bee" Character - The Eyes - Part 2 (11:14)
  3. Creating the "Bee" Character - The Antennae - Part 3 (11:05)
  4. Creating the "Bee" Character - The Mouth - Part 4 (9:22)
  5. Creating the "Bee" Character - The Wings - Part 5 (16:26)
  6. Creating the "Bee" Character - The Face (2.5D) - Part 6 (10:36)

Project #1 Demos Continued - Creating the Animated Scene, Creating the Interface, and Adding Sound

  1. Creating the "Bee" Character - Intro to Next Steps - Part 7 (2:10)
  2. Creating the "Bee" Character - Adding Background Clouds - Part 8 (22:20)
  3. Creating the "Bee" Character - Adding Middleground Trees - Part 9 (11:41)
  4. Creating the "Bee" Character - Using Scenes for Sequences - Part 10 (10:36)
  5. Creating the "Bee" Character - Creating the Interface - Part 11 (25:56)
  6. Creating the "Bee" Character - Adding Sound - Part 12 (8:00)
  • Download The Final Bee Movie FLA File (.fla)

Controlling MovieClips and Creating a Character Using PNG Bitmap Images

  1. "Barracuda" Character - Using PNG images and Nested Movie Clips (11:45)
  2. "Barracuda" Character - Controlling Movie Clips (24:51)
  • Download Barracuda Demo (.fla)

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 12 (4/13 - 4/19)

TOPICS

  • Photoshop to Animate/Flash - Bitmap Animation and the Puppet Tool
  • Asset Warping
  • Layer Parenting
  • The Camera Feature
  • Inverse Kinematics and the Bone Tool
  • Work on completing/refining Project #1 - Animation

TASKS

VIDEO TUTORIALS

Photoshop to Flash - Bitmap Animation and the Puppet Tool (optional)

  1. Photoshop to Flash - Frame by Frame Bitmap Animation Using the Timeline and the Puppet Tool (15:54)

Asset Warping - Animate CC New Feature (required)

  1. Asset Warping and Animation (12:18)

Layer Parenting - Animate CC New Feature (required)

  1. Layer Parenting (13:29)

Working with the Camera in Animate (required)

  1. Working with the Camera Feature in Animate (16:41)

Inverse Kinematics and the Bone Tool (optional)

  1. Introduction to Inverse Kinematics and the Bone Tool (5:16)
  2. Adding and Editing Bones (13:22)
  3. Adjusting Bones and Adding Constraints (10:30)
  4. Creating a Spider Character using Symbols and the Bone Tool (30:37)
  5. Rigging and Animating a Character with I.K. and the Bone Tool (18:22)
  6. Spring Strength and Dampening Adjustments (5:45)
  7. Using the Bone Tool on Shapes and Working with Pins (10:06)
  • Download Sample Art Manikin Starter FLA File (.fla)

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 13 (4/20 - 4/26)

TOPICS

  • Optional Online Lab Session at 11:30 am on 4/20 using the link to Zoom provided in Canvas.
  • Finish and Review Project #1
  • Introduce Project #2 - Interactive Interface
  • Building Interfaces in Animate/Flash - Strategies for Navigating Content
  • Scripting Frame to Frame, Off-Screen to On-Screen, and Movie to Movie Navigation

TASKS

  • Complete Project #1 (due Friday, 4/24)
  • Participate in class conversations on Canvas (Project #1 critique instructions will be posted on 4/24)
  • Review project details and begin work/research/conceptual development for Project #2 (due 5/11)
  • View the Week #13 Video Tutorials

VIDEO TUTORIALS

Building User Interfaces in Animate - Strategies for Navigating Content

  1. Introduction to UI Design and Navigation Strategies (11:39)
  2. Anatomy of a User Interface - Core Elements (11:11)
  3. Frame to Frame - Basic Navigation Using AS3 (11:33)
  4. Off-Screen to On-Screen - Fly Out or Drop Down Content Using AS3 (15:17)
  5. Movie to Movie - Dynamic Content Loading Using AS3 (24:20)

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 14 (4/27 - 5/3)

TOPICS

  • Integrating Animate/Flash with Photoshop or Illustrator
  • Dynamically loading content (.swf and .jpg files)
  • Adding animation and complexity to the interface and navigational system
  • Movieclips and menus
  • Creating animated buttons and menus
  • Scrolling Text

TASKS

VIDEO TUTORIALS

Project #2 Demos - Photoshop Integration, Dynamically Loading Content, Scrolling Text, Movie Clips for Flyout Menus/Content

  1. Interface Project - Integrating Photoshop Content with Animate/Flash (18:00)
  2. Interface Project - Preparing the Buttons and UI Elements (14:29)
  3. Interface Project - Dynamically Loading Content (27:13)
  4. Interface Project - Scrolling Text (32:36)
  5. Interface Project - Final Touches - Loading Images and Using Movie Clips for Flyout Content (20:49)
  • Download Source FIles (.zip)

Animated Buttons and Menus in Animate/Flash (Exercise #6 Demos)

  1. Part 1 - Creating Animated Buttons Using MovieClips and AS3 (25:25)
    Download Source File (.fla)
  2. Part 2 - Creating an Animated Drop Menu using AS3 (24:21)
    Download Source File (.fla)

    Note: This was posted earlier, but also relates to Exercise #6 techniques
  3. Off-Screen to On-Screen - Fly Out or Drop Down Conent Using AS3 (15:17)
    Download Source File (.fla)

Exercise #6: Animated Drop DOWN MENu or FLYOUT COntent (Due Monday, 5/4)

Create your own animated drop down menu or flyout content using Animate/Flash.

As demonstrated in the video lectures above and documented in the source FLA files provided, create your own drop down, pop out, or fly out menu/content. Animate the menu/content so that some of the menu items and/or content is hidden behind a mask or off-screen initially and then revealed when the user clicks on or rolls over a menu/view button of some kind. Invent your own button labels, styles, colors, and/or animation effects. Name your file with the naming convention lastname-e6 (ie. "cleveland-e6.fla") and publish it to create .swf and .html files. Upload the .fla, .swf, and .html files to the exercise6 folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed instructions on publishing and uploading files.

Note: Some versions of Animate contain a bug in relation to Actionscript code and using 'Advanced Layers.' If you run into repeated, inexplicable coding errors, you may wish to simply turn off 'advanced layers' via the checkbox in the Modify > Document settings.

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 15 (5/4 - 5/10)

TOPICS

  • Video in Animate/Flash
  • The Adobe Media Encoder
  • Creating Video Players
  • Custom Video Controls
  • ActionScripting for Video

TASKS

VIDEO TUTORIALS

Video in Animate/Flash

  1. Video - Introduction to Flash Video and the Adobe Media Encoder (16:30)
  2. Video - Using and Customizing Video Playback Components (14:09)
  3. Video - Creating Your Own Video Player (14:04)
  4. Video - Creating and Scripting Custom Video Player Controls (24:19)
  5. Video within HTML5 Canvas - Components and Controls (16:56)

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Week 16 (5/11 - 5/17)

TOPICS

  • Exporting and Publishing Animate/Flash Content
  • HTML and Flash Player Publishing Options
  • Publishing to HTML5 Canvas
  • Publishing Images, Image Sequences, and Sprite Sheets
  • Exporting Video
  • Publishing Desktop Applications and Projector Files (and FS Commands)
  • Publishing for Mobile Devices (Android and iOS)

TASKS

VIDEO TUTORIALS

Publishing and Deploying Animate/Flash Content

  1. Publishing - Overview of Flash Content Runtimes and Publishing to Multiple Platforms (6:04)
  2. Publishing - HTML and Flash Player/SWF Options and Recommendations for Publishing Project #2 (24:35)
  3. Publishing - HTML5 Canvas (21:49)
  4. Publishing - Images, Image Sequences, and Sprite Sheets (16:23)
  5. Publishing - Video (4:43)
  6. Publishing - Desktop Applications, Executable Projector Files, and FS Commands (13:29)
  7. Publishing - Mobile Apps (Android and iOS) (9:45)

LINKS & RESOURCES

SITES of INSPIRATION

> Go to Top

Finals Week (5/18 - 5/24)

TOPICS

TASKS


The final day to turn in any work for grading consideration is Friday, 5/22. i cannot accept any late work beyond this date.

> Go to Top