Flash CS3 Tutorials
The majority of these tutorials are courtesy of the excellent work of Mike Scocko at Vallhalla High School. My tutorials are mixed in throughout the site. My library will be expanding as time permits.
Sources of Inspiration
What are Sources of Inspiration? | What we're going to learn: Animating the Interface and Interactivity | One More ExampleGetting Started with Flash
Might as well watch these as I expect you to know all of this before you begin to work in Flash. Intro (yes, I slipped at the beginning and called it Flash 8) | 2.0 or 3.0? | Bug #1 and Trashing the Preferences | Dealing with Bug #1 and Working at 100% | Creating and Saving Custom Panel Sets | Creating and Saving Custom Project Settings | A Tale of Two Windows (woe to those who ignore this movie) | Another Way to Fix the Problem | Collapsing and Expanding Panels | Final Words for the Wise (and the Foolish)Symbols 101
What You'll Build (your versions will be different) | Download the Files | Right-Click and Save Linked File to the Desktop: Over State Script | Sample Project | Examining the Sample Project | Movie Clips 101 (it's your fate: Fate = F8) | Buttons Without Buttons (step 1: Movie Clip within Movie Clip | Animating the Nested Movie Clip (avoid the inevitable pitfalls by following instructions) | Two Small Corrections | The Actions Panel | Adding the ActionScript (the quick and painless way) | Variations on a Theme (and a few extra pointers)Assignment #01
Design a minimum of 5 unique "buttons without buttons" to prove that you understand the concept. Here's an Example (and here's the fla) | Be Sure to Save Your Work <Required> I'll be featuring the best student solutions to these assignments right here on this page. Who wants to be first?Controlling the Timeline — The Basics
The Secret to Flash (and it's so easy you won't believe it!) | What You'll Build | The 4 Essential Layers | Finding One's Place | The First (and only) Button (in this project) | Planting the Flags (adding our labels) | Scripting the First Button | Stopping the Playhead | Adding the Content | Adding Additional Buttons | Adding Additional Content and Editing the ActionScript | Tinting the Movie ClipsControlling the Timeline — Working Smarter
What You'll Build | Working Quicker and Smarter | Real-World Button Primer | Button Primer Part II | Label and Content Workflow (you won't always copy the content in future projects) | Animating the Content | Animating the Interface Preview (just watch this one) | Animating the Interface (step-by-step)Assignment #02
Assignment Preview Design a very simple (yet unique) project along the lines of the last set of tutorials that proves that you understand the concept behind them. Yours should have different buttons and content than in the prior example. Remember that the content should animate in. <Required> Tips and Tricks: Animating the Buttons' Position | Adding Extra Content | Customizing the Content Animations Source Files (fla): timeline_02 | timeline_02_var_01 | timeline_02_var_02Controlling of the Timeline — Mastering the Techniques
Skill-Building Project! Project Preview | What You'll Build | Right-Click to Download Images and The Layout | Examining the Layout and Taking Notes | Setting the Stage | Importing and Positioning the Thumbnails | Adding Frames and Layers | Adding Labels and Blank Keyframes | Adding and Positioning Content | Rapid Fire Movie Clip Conversion | Rapid Fire Scripting | Rapid Fire Movie Clip Conversion Revisited | Adding the Before Images and Labels | Movie Clip Conversion (last time for this project :) | Oops! Watch This | Scripting to the Before Images | Scripting to the After Images | Animating the Buttons | Animating the After Images (including Blur and saving as Preset) | Animating the Interface | Adding the Preloader (here's the RIGHT-CLICK to download preloader_basic.fla) | Bandwidth Issues, Skills You've Learned, and The Secret of Flash (revisited)ßAssignment #03
You are expected to understand the basics of controlling the timeline—importing, positioning, moving the playhead across one or multiple timelines, using labels, animating content, animating the interface, adding a preloader, etc. If you feel unsure about your comprehension, repeat the previous tutorial (Mastering the Techniques) as necessary. You will be required to build your own projects using these skills all year long so there's no escaping this responsibility. Now, even if that's crystal clear, Watch this Movie. <Required>Sources of Inspiration
Believe | The Video | An Unrealized Idea | The First fla | The First AnimationFundamentals of Text
Project Preview | Don't Draw a Text Box! (unless you're writing a paragraph) | Static Text | Kerning and Tracking (download the Starter File) | Anti-Aliasing | The Rest of the Properties Panel | Words and Letters and Shapes, Oh My! | Don't Shape Tween Text | Animating Text (using Motion Tweens)Sources of Inspiration
The Week That Didn't Work | The Project That DidAnimating Text (Before the Interface)
Project Preview | What You'll Build | Compare: What You'll Build if You Noodle | Setting the Stage | Text and Symbols | Add Layers and Distribute to Layers | Animating the Letters | Adding the Easing | A Note Before Staggering the Animation | Staggering the Animation | Moving the Playhead | Adding the Behavior to the Enter Button | Adding the Hit State and the Over State Animation | Watch These: Noodling — Satisfying the Artist Within | Noodling Part II | Noodling Part III | Continue with the next set of tutorials to finish this project (and to grab a copy of the noodled version if you want it)Animating the Interface (After the Text)
Project Preview | Starter File (the noodled version) | What You'll Build | Here's the Concept | Laying Out the Interface | Tweaking the Layout | Breaking Apart and Converting to Symbols | Duplicating and Repositioning the Pipe | Script the Buttons | Script the Replay Button | Animate the Over State | Add the Hit State | Critical: The Magic Step | Consider Our Objective | Distribute and Reorder Layers (also trashing the hit state) | Let the Animating Begin! | Pesky Pipes and Replay | Tweaking the Animation | Adding Content (just to prove it works) | Final Thoughts (and the Final fla if you want it)Assignment #04
Create a bouncing animation of your name with overstate — Watch this Movie <Required>Masking 101
Project Preview | Quick Word About the Starter File | Starter File | What You'll Build | The First Mask (start with the ending) | Top to Bottom | Bottom to Top | Don't Use this Mask | Zooming Circle Mask | Zooming Rectangular Mask | Bendy Mask | Zig-Zag Mask | Something Completely Different | Dual MasksMasking 102
Project Preview | New Starter File | What You'll Build | Center Outwards | Angled Mask | Diamond Mask | Wandering Spotlight | Text as a Mask | Faded/Blurred Image/Mask Trick | Faded/Blurred Image/Mask Trick Part IIMasking 103
Project Preview | New Starter File | What You'll Build | Sports Center Corners | Stroke Me (then convert to fill) | Copying and Pasting Multiple Frames | Oops! Forgot to Tell You This | Customized Strokes (listen to what I say about when and where this might work well) | Four Square | Slits and Slats | Animating the Slats | Modifying the Animation | Animating the Four Square (while we're on a roll)Assignment #05
Using This Starter File, build a series of custom masks of your own invention using ideas from the previous tutorials. <Required>Sources of Inspiration
Masking Examples and Random Thoughts Former students unmasked! Peter | Brian | DanielFrame-By-Frame Masking
Project Preview | Starter File | What You'll Build | Converting to Symbols | Distributing to Layers (and adding layers, frames, and masks) | Revealing the Circle | The Finished Reveal (with a new idea) | Erasing the Circle (with Reverse Frames) | Skating Around the Circle (using blank keyframes) | Duplicating the Skate (and a few strategies) | Revealing the Typing | Adjusting the Animation | Adding Sound (here's the Sound File)Assignment #06
Using your own ideas, create a custom animated frame-by-frame mask that reveals... (surprise me) <Required> Okay, if you're stuck, Here's an IdeaMultiple Masks Within Movie Clips
Project Preview | Starter File | What You'll Build | Preparing the File | Beginning the Animated Mask | Multiple Symbols, Multiple Timelines | Animation Strategies (the slow road so we can understand the process) | Staggering the Animation | Duplicating the Animation | Last Tweak and Correction | Preparing the Second Mask (using the Polystar Tool) | Animating and Staggering the Animation (more quickly, though not yet at full speed) | Duplicating and Tweaking the Animation | Preparing and Animating the Third Mask | Duplicating and Tweaking the Animation | The ChallengeAssignment #07
Starter File | Using the starter file, and starting from scratch, create a series of 5 unique animated masks to demonstrate your mastery of this technique you learned in the Multiple Masks Within Movie Clips Tutorials. Watch This Movie <Required>Sources of Inspiration
When is a Mask Not a Mask? | Project Preview | Starter File | What You'll Build | Set the Stage | Create the Not-Mask | Duplicate and Position It | Scripting the Buttons | (Watch this next video before trying it yourself) Animating the Image | Scripting the Roundtrip Action | Adding the Preloader (here's the Preloader File) | Final Thoughts | If you want, here's The Final fla for the ProjectRandomness and Repetition
What I'm Talking About (here's the fla) | Repetition Without Randomness | A Random Idea | The Initial Animation | Adjusting the Animation and Duplicating It | Adjusting the DuplicatesMotion Guides 101
Project Preview | What You'll Build | The First Motion Guide | The Car | Orienting to the Guide | Riding the Guide (making the road visible) | Adding Color (to the hills and sky) | Wrap Up | If you want, here's the Road Trip flaMotion Guides and the Fly
Project Preview | Starter File | What You'll Build | The Initial Animation | Adjusting the Animation and Adding the Stop Action | Adding the First Interaction | Adding Additional Interactivity (and custom easing) | One More Time | Animating the Movie Clip | Adding Randomness (or at least the appearance of randomness) | The Return of the Fly | Is There More? | Here's the Final fla if you're interestedAnimating Multi-Layered Graphics
Project Preview | Starter Files | What You'll Build (in theory) | What You'll Actually Build | True Confession | New Keyframes and Labels | Importing the Images (from another fla — here's the fla) Note: This movie is intended to inform you of a wonderful feature you may want to use in the future (hint, hint) | Benefits of Organizing the Library | Why You Must Make New Symbols | Making New Symbols and Beginning the Animation | The First Primitive Animation | Adding the Sub Navigation | Converting and Scripting the Sub Navigation | Adjusting the Animation | Adding the Second Animation | Editing the Sub Nav | Adding the Third Animation (yes, I named the Movie Clips with a "c" rather than an "a") | Fixing the Names | You Animated All Five of Those, Right? | Customizing the Sub Nav | Adding and Scripting the Next Button | Duplicating the Keyframe and Editing the Script | Doing it Again with a Twist | One More Time So You Have it (I end up doing them all just in case you're having trouble) | Final WordsAssignment #08
Add a "Previous" Button to the project you built in the prior tutorials. There's no starter file since you already have one (if you've completed the Animating Multi-Layered Graphics tutorials). I absolutely insist that you learn this skill for yourself; however, since I'm such a softie, here's a little How To Movie to get you started. (Hint: if it takes longer than 5 minutes, you're not working smart <<Watch This) Here's What You'll NeedSources of Inspiration
Next up is a project You'll Want to Make Your Own | What Others Have CreatedThe Only Scrolling Text Box You'll Ever Need
Project Preview | Starter Files (it's a movie you need to watch) | What You'll Build | Resizing the Stage | Establish Size and Position | Start at the Beginning | Naming the Symbol (to avoid confusion) | Naming Conventions (important!) | Adding and Naming the Layers | One Correction | Creating the Up and Down Arrows | Creating the Bar | Creating the Dragger | Creating the Main (download this Text File) | Creating the Mask | Editing the Text | Adding the ActionScript (here's the ActionScript) | Assigning the Instance Names | Adding the Over State | Finishing the Interactive Elements | Selectable Text (and fixing the Mask) | Animating the Text Box | And Now We're Ready for the Next StepDuplicating Symbols (i.e. The Scrolling Text Box)
Project Preview | Starter File (it's a movie you need to watch) | What You'll Build | Why Duplicate Symbols? | Duplicating, Swapping Symbols, and Repositioning | One More Time | Last Time (do you really need me to do this?) | Adjusting One Mask to Adjust them All | Bonus: Edit Multiple Frames | Glitch?Assignment #09
Build a custom scrolling text box using the techniques taught in the prior movies. Watch This Movie for details <Required>If You Need Two Scrolling Text Boxes...
Project Preview | Starter File (it's a movie you need to watch) | What You'll Build | Two Scrolling Text Boxes in One (keyframe) | Change the Instance Names | Alter the Script for up_btn2 | Alter the Script for down_btn2 | Alter the Script for dragger2 | Alter the Script for bar2 | Alter the Script for mask_mc2 | Alter the Script for main2 | Does It Work? | Hunting for the Problem | What About the Other One? | Save the Script | Last but not least... Three Scrolling Text Boxes! | Take the ChallengeThe Horizontal Scroller
Project Preview | Starter File | What You'll Build | Size, Position, and Nested Movie Clips | Add and Rename Layers | Create the Bar | Create the Dragger | Create the Main | Create the Mask | Add the ActionScript (here's the ActionScript) | Add the Instance Names (Important: Watch This) | Script the Buttons | Animate the Dragger | Do You See the Looming Problem? | Change the Instance Names | Alter the ActionScript | Oops, Forgot One | Comparisons | Final ThoughtsAssignment #10
Build a custom horizontal scroller to demonstrate that you've learned the process. Watch This Movie for details <Required>The Only Pull-Down Menu You'll Ever Need
Project Preview | Starter File | What You'll Build | What We End Up Building (it's better!) | The Over State Object | Adding and Renaming Layers | Adding Buttons | Animate the Buttons | Hit State Trick | Add Over State and Behavior | Animate it Backwards? | Multiple Pull Down MenusAssignment #11
Build a custom pull down menu to demonstrate that you've learned the process. Watch This Movie for details <Required>Easing — Organic Animation
Starter File for 5 Bouncing Balls | Starter File for 5 Sliding Squares | Starter File for Other Easing Options | Bonus Skill Builder: Creating the 5 Bouncing Balls (learn how to copy and edit multiple frames!) | Important: Watch This True ConfessionDynamic Content and the Bouncing Ball
Skill Building Project! Project Preview | What You'll Build | Strategies for Working with Dynamic Content | The Bouncing Ball | Squishing the Ball | Adding the Sound (here's the sound file) | Building the Pause Button | Building the Play Button | Adding the Over State Script (here's the script) | Adding the Hit State Movie Clip | Adding the Stop and Play Actions (Hint: Listen to the tip at the end of the movie) | What We Need | Constructing the Master fla (quick and dirty) | Scripting the First Button | Shortcuts to the Other 3 Buttons (so easy!) | Wrap-up and What's Up NextButtons Without Buttons (But With Text)
Assignment Preview | Starter File | What You'll Build | Adding the Text to 1 Nested Movie Clip (and it ends up in all of 'em!) | The Joy of Duplicating Symbols | Editing the Background Color | Adjusting the Color of the Text | Preparing to Animate the Interface | Animating the Interface | Last Words About Text Buttons (and the obligatory dynamic content pitch!) | New Dynamic Content TutorialsAssignment #12
Build a new master fla to load our bouncing ball swfs. It must have an animated interface and utilize buttons with text. Yes, I want you to practice this and come up with your own solution! Watch this Movie <Required>Portfolio Review
New tutorials for those having trouble with this project for the 1st semester finalStarter files: Preloader
Tutorials: Overview | The Cheat Sheet | Preparing to Animate the Interface | Frames and Layers | Animating the Interface | Adding the Preloader | Building the Scrolling Text Box in a MovieClip | Animating and Duplicating the Scrolling Text Box | Scripting the MovieClip Buttons | Animating the MovieClip Buttons | Strategies and Shortcuts for the Sub Navigation