Flash MX 2004 Movie Tutorials
For best results, open browser window at least as wide as the banner graphic (above) before proceeding

Preview

This SWF shows a few of the skills that you'll learn in the following tutorials. (The tutorials, for the most part, only teach the basics. You take the next steps on your own.) Right-Click to download the source files for That SWF. Full tutorial on loading dynamic content are below (under "New!").

Opening SWFs in a Second, Correctly-Sized Window

Want your SWFs to open in a second, correctly-sized window? Here's the tutorial

Shortcuts to Turorials

Drawing Tools | Selecting & Editing | Layers | Shape Tween | Gradients | Motion Tween | Motion Guide | Masking | Scenes | Controlling Scenes Project (skill building) | Buttons | Pull Down Menu | ActionScript | Controlling MovieClips Project (skill building) | Scrolling Text | Slide Show Project (skill building) | Preloader | Draggable Objects | Trace Bitmap | Zoom & Pan | Digital Portfolio

New!

Animating Your Photoshop Masterpieces

Here's the how-to animate your Photoshop masterpieces (thanks to Michael Werner for creating this gem). Here's the swf we'll be making. Right-Click to download the source files if you want to work with the same image in the tutorial or just Resize your psd to fit into Flash and Save As (don't overwrite the original!). Turn off visibility of all layers except your base image and Save for Web (rename in a logical manner!). Repeat for additional layers -- it's not necessary to save each and every layer separately, you've got to use your head to figure a strategy for animating your image. Set the size and color of the Stage to fit your project. Import your images to the Library (Shift-Click to select the group) and position the first image on the Stage. Convert to Symbol (MovieClip), Insert Keyframe, Create Motion Tween, and lower Brightness on Frame 1. Insert and rename Layers then repeat steps on second layer -- but use Alpha rather than Brightness! Repeat steps on the third Layer. Here's the swf we have so far. We need some Frames so the image is visible before fading out (-100 Brightness). Depending on your image, you'll have to tweak the Timeline to make your animation look good. Here's my final Timeline.

More examples of animating Photoshop: 01 | 02 | 03 | 04 | 05 -- Now let's see what you can do!

The One-Scene Website

Building the fla that leads to this SWF holds the key to learning many skills -- up to and including building a Flash-based Website Right-Click to download the source file for reference. Ready? Begin by creating a gradient background | Add and name six additional layers | Create a looping animation | Create custom buttons | Duplicate, position, and add rollovers | Add text, duplicate, and Rename buttons (we're using a pixel font so the rules are a bit different -- pay attention to the settings) | Add placeholder text -- our "content" | Add Labels (for navigation) | Add Stop Action (F9) | Add Behaviors (let Flash write our ActionScript!) | And yes, I know you want Sound | That's it. Now try and tell me you can't build a Website in Flash!

Here's a little more developed self-contained site. (And here are the source files) This project developed in stages. Here's how it progressed: Step 1 | Step 2 | Step 3 | Step 4 Now it's your turn to make "a more developed site." Refine your work!

Dynamic Content Part 1

You'll script this swf in the following tutorial. Right-Click to download (and examine) the starter files. Open loader_01_starter.fla and create a movie clip for the swfs to load into | Add behaviors to the first 3 buttons | Add behaviors to the next 3 buttons (I only show the first step -- you're starting to get it, right?) | Add behaviors to the last 3 buttons (you know the drill) | See these buttons? | Open load_me_07.fla and add behaviors to the buttons >> DON'T TARGET THE MOVIECLIP THIS TIME (We're loading a swf into a swf that's been loaded into a swf -- think about it...) Test the movie to generate a new swf that has the behavior scripted | Repeat for 08 and 09 | Open loader_01_starter.swf and notice how the 07, 08, and 09 swfs load into each other. Open loader_01_starter.fla, select a button, and press F9 to see the ActionScript Flash wrote for us (don't forget to say, "Thanks!") | Note: We're going to be using loadMovie extensively so you might want to think about mastering this skill. So, you might ask, how is this dynamic? Download this file and try this (the loader just looks for a file name -- it doesn't know that you've changed the content) | Are you beginning to see the possibilities?

Dynamic Content Part 2

Here's The swf you're going to script in this tutorial. Right-Click to download the starter files | Open tutorials_01.fla and add behaviors to Motion Tween and Page 2 buttons | Open tutorials_02.fla and add behavior to Page 1 button | Open motion_tween_000.fla and add behavior to Main Page button | Now your swfs load into each other and you have round-trip navigation. Adding new pages is just a matter of following the same steps. Now for loading into the target (as we learned how to make in the prior tutorial) | Open motion_tween_000.fla and add behaviors as shown | Now think about how you'll use these skills to build a dynamic project.

The Squishing Bouncing Ball

Because you asked (but you should have been able to figure it out on your own) The rubber ball (see the Motion Tween tutorials) Click on the buttons in this swf to see a bit more

Shape Tweens Gone Wild

This SWF shows what can happen when you play with an idea. It began with this Simple Shape Tween and grew in stages 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14

Controlling Multiple Timelines

This swf demonstrates how to control MovieClips from the Main Timeline (or the Main Timeline from within a MovieClip). It also employs animated invisible buttons to allow the user to stop the spheres by rolling over them. Try for yourself then download the source files to examine the ActionScript. Easy!

 

Opening SWFs and QuickTime movies in a separate window

Make Link (with a # in Property Inspector) | Note: You may have to Show Events For IE 5.0 to see the Open Browser Window behavior | Set Behavior (you must know the dimensions of your file) | Link Directly to the Movie (Dreamweaver Tip: Hold Shift Key while dragging to bypass Property Inspector) | In Explorer the Files Open in New Windows | In Safari QuickTime opens in the same window (No way I'm going to set an individual behavior for each of these movies. Hit the Back button to return to the tutorials.)

Personalize Flash

Customize Panel Layout | Save the Layout | Create Your Own Default Document | Prove that it Works

Drawing Tools See Selecting & Editing (below) to modify the shapes Top

Line Tool: Settings (Property Inspector) | Shift Key Constrains (45 degrees) | Option Key Starts Line in Center | Shift + Option Draws from Center (only 45 Degrees -- no 90) | Snap Option | Color

Pencil Tool: Options Control the Line | Smooth | Smooth v Ink (Ink doesn't smooth the line) | Properties | Shift Key Constrains (90 degrees -- Option has no effect)

Oval Tool: Draws with Stroke & Fill | No Stroke (or no fill) | Shift Key Constrains (to circle) | Option Draws from Center | Shift + Option Draws Circles from Center | Properties

Rectangle Tool: Draws with Stroke & Fill | No Stroke (or no fill) | Shift Key Constrains (to square) | Option Draws from Center | Shift + Option Draws Squares from Center | Properties | Rounded Corners Option | Press Up or Down Arrows (as you draw to alter corner radius in real time)

Brush Tool: Paints with Fill | Brush Size (Options) | Brush Shape (Options) | Smoothing (don't overlook this setting!) | Paint with a Gradient (see Color Mixer or Gradients for more information about creating gradients) | Brush Mode: Starter FLA File (There's a bug in Flash dealing with the Stroke you'll be painting) Paint Normal | Paint Fills | Paint Behind | Paint Selection | Paint Inside | And just because someone will ask... Starter FLA | Paint with a Bitmap Fill You must first import a bitmap graphic (supplied in the Starter FLA) Click link for more information about the Fill Transform Tool (shown resizing the bitmap fill)

Pen Tool: Click Click Click (to Draw Lines) | Complete Path to Fill | Click and Drag (curved lines) | Properties

Text Tool: (Static Text) Click and Type (do NOT draw a text box unless you are writing a paragraph) | Paragraph Formatting (experiment with settings) | Font, Color & Size | Tracking | Word Level Tracking (and letter-by-letter kerning) | Word, Font & Color Change | Text Orientation (vertical text)

Color Mixer: (Don't be limited to 216 colors) | Stroke & Fills | Alpha (transparency) | Linear Gradient | Radial Gradient | Adding Color Stops | Deleting Color Stops | Starter FLA (for bitmap fill) | Bitmap Fill | Fill Transform Tool: Adjust Bitmap Fill

Fill Transform Tool: Linear Gradient Transform | Radial Gradient Transform | See Animating Gradients for more techniques

Ink Bottle Tool: Starter FLA | Add Stroke to Objects | Add Stroke to Text (will not work unless you Break Apart the text twice)

Selecting & Editing (Basic Skills) Top

Selection Tool (Lines): FLA | Selecting & Moving Lines (segments & wholes) | Modifying Lines (do NOT select first) | Modifying Lines (part 2) | Revert (to last saved state) | Color, Size, and Shape Change (part 1) | Part 2

Subselection Tool (Lines): FLA | Selecting, Moving & Modifying Lines (segments & wholes) | Modifying Lines (first select point then Option-Drag to access Bezier handles) | Modifying Lines (with both selection tools) | (we will build on these techniques in later tutorials)

Selection Tool (Shapes): FLA | Single Click Selects... | Double Click Selects... | Modifying Shapes (without selecting) | Color, Size, and Shape Change

Subselection Tool (Shapes): FLA | Can Only Select Lines | Modifying Lines (part 1) | Modifying Lines (first select point then Option-Drag to access Bezier handles) | Curves to Corners (and corners to curves) | (we will build on these techniques in later tutorials)

Free Transform Tool: FLA | Single Click Selects (and transforms)... | Double Click Selects (and transforms)... | Shift Key Constrains Proportions (only on corner handles) | Option Key Resizes from Center | Shift-Option Constrains from Center (corners only) | Rotate | Shift Key Constrains (45 degrees) | Skew | Options: Rotate & Skew | Scale | Distort | Envelope

Other Basic Skills: Select & Option-Drag (to duplicate) | Shift-Option-Drag (to duplicate & constrain angle) | Combing Shapes (same color) | Combing Shapes (different color) | Lines & Shapes Don't Mix | Punching Holes | All Editing Skills Work (even on odd shapes) | Selecting Chunks

Layers Top

Insert Layer (also found in the menu but why waste time?) | Layer Inserted (above active layer) | Reorder Layers (just click and drag) | Content on Layers Part 1 (solid keyframe indicates content) | Part 2 | Reorder Layers (topmost layer is foremost) | Visibility (invisible elements will be visible in SWF) | Locking (prevents editing) | Outlines (will not appear as outlines in SWF) | Rename Layers (Double-Click and replace generic names so you know what's what) You should rename your layers as soon as you add a second layer (and each layer thereafter) | Adjust Width | Adjust Height | Delete Layer | Essential Layers (On most projects -- it's very common to have a dozen or more layers. More on this later) | And speaking of dozens or more layers... Folders: Inserting | Naming (Double-Click) | Adding Existing Layers | Adding New Layers | Removing Layers (from folder) | Open & Close (kinda obvious but...) Keep Layers named and organized! (A real time-saving habit to cultivate)

Shape Tween 101 Top

SWF | FLA | Shape Tween | Shape Hints | Loop Animation (Option-Drag to copy) | Finishing Touches

SWF | FLA | Shape Tween | Extend Animation | Add Easing | Change Color

SWF | FLA | Shape Tween | Intermediate Keyframes | Bend Surface | Tweak & Loop | Tweak More

SWF | FLA | Tween & Hint | Copy Keyframe & Hint | Copy & Test | Tweak to Complete Loop

Gradients Top

SWF | FLA | Making & Applying | Adding & Deleting Color Stops | Fill Transform Tool | Animating the Gradient | Tweaking the Transform | Tweaks & Loop | Remove Frames (to shorten the lag) | Test Movie

SWF | FLA | Making a Gradient Background | Directing the Gradient | Transforming the Gradient

SWF | FLA | Making | Transforming | Animating | Test Movie | Loop (select, Option-Drag to copy & reverse frames) | Test Movie | Change your mind and want to change the direction of the gradient? See next tutorial.

SWF | Starter FLA | Ending FLA | Remove Frames | Change Angle | Test Movie | Loop | Test Movie | Tweak Tricks (part 1) | Part 2 (Option-Drag to copy) | Test Movie

SWF | Starter FLA | Ending FLA | Break Apart (x2) | Apply Gradient | Re-Direct the Gradient | Modify the Gradient (Gray to White) | Add Outline (3 pixels) | Shift-Click to Select Fill then Copy & Paste in Place on New Layer | Place Outline Above Fill | Transform Gradient | Add Keyframe, Frames & Shape Tween | Animate Gradient | Test Movie | Alter the Animation (Option-Drag to copy keyframe) | Loop & Test | Now experiment on your own (and make something much better that that!)

Motion Tween 101 Top

SWF | FLA | Motion Tween | The Need to Ease for more realistic motion | Adding the Squish Factor (hold Option key to squish the ball from the top down) | Adding Sound (on its own layer!) | Adding the gradient (editing the symbol) | Resizing the entire animation using edit multiple frames (hold Option while dragging to resize from center) | Add shadow (be sure the anim layer is locked so you don't select it accidentally) | Soften the shadow's edges and Convert to Symbol (be sure to select the entire shadow or you'll get a broken tween in the next step) | Copy and Paste Frames, resize as necessary, and add Motion Tween | Tweak the Alpha for a more realistic shadow | Add layer and Buttons (use Arrow keys to nudge selections one pixel at a time) | Add ActionScript to buttons (press F9 to bring up the Actions Panel) | Way to go! That's a lot of skills you just picked up. Repeating this exercise would help to make these skills your own. Repetition is the key to learning a program as complex as Flash.

SWF | FLA | Motion Tween | Tweak to Loop (using onion skinning) | Change Color by Tinting (using the color mixer) | Change Size

SWF | FLA | Sound File | Motion Tween (Shortcuts) | Add Sounds (Layers)

SWF | FLA | Motion Tween | Add Keyframes | Brightness | Tint | Alpha (1% not 0) | Free Transform (Option-Drag)

Motion Tween Text Top

SWF | FLA | Set Font & Tracking | Break Apart & Convert to Symbol | Distribute to Layers | Insert Keyframes | Transform Text | Apply Alpha | Move Frames | Add Frames | Clean up | Add Frames

SWF | FLA | Set the Stage Again | Keyframes, Tween, Transform & Tint | Extend & Ease | Add Frames

SWF | FLA | Sound Files | Open Starter FLA | Keyframe, Ease, Tween & Move | Move & Add Frames | Add Rebound (Shift-Up Arrow twice to move up 20 pixels) | Add Rebound on Other Layers | Add Easing for Realism (Command-Click to select more than one Keyframe at a time) | Remove Broken Tween | Insert Sound Layer & Keyframes | Import Sounds | Place Sounds

SWF | Starter FLA | Ending FLA | Break Apart Text x2 (already done for you in Starter FLA -- just in case you don't have the font I'm using -- and yes, I realize <now> that I spelled the file name incorrectly) | Select & Shift-Drag Portion of Text | Convert to Symbol x3 | Select All & Align (NOT to Stage) | Nudge into Place (with Arrow Keys -- if necessary) | Zoom in & Nudge (if necessary) | Distribute to Layers (and reorder Layers) | Insert Keyframes & Add Motion Tween | Shift-Drag to Repostion | Add Easing | Shift Keyframes (Option-Drag to Copy when necessary) | Continue Shifting | Insert Keyframes & Motion Tween | Set Alpha to 1%

Make Something Cool

Motion Guide Top

SWF | FLA | Motion Tween & Guide Layer | Ride the Guide

SWF | FLA | Motion Tween & Guide Layer | Erase & Ride The Guide | Orient to Path

Masking Top

SWF | FLA | Text Layer | Mask Layer | Animate Text | Fade Text | Add Easing

SWF | Starter FLA | Ending FLA | Mask Layer | Assign Mask | Animate Mask | Alter Mask | Easing

SWF | Starter FLA | Ending FLA | Mask | Animate Mask | Animate & Ease | Tweak & Animate | Complete Loop

SWF | Starter FLA | Ending FLA | Sound File | Text Mask (Break Apart twice) | Animate Mask | Optional: Eliminate the Tween Glitch (in this SWF) | Set up Masked Animation | Begin Masked Animation | Extend & Tweak | Tweak | Tweak | More Tweaking (not shown) | Add Sound | Change Background Color

SWF | Starter FLA | Ending FLA | Examine the Instances (on the Stage & Work Area) | Draw the Mask, Resize & Align (on the mask layer) | Zoom in and Nudge (with Arrow Keys so mask is not over letters) | Double-Click on Zoom Tool to return to 100% | Add Frames (just so things don't disappear as we work) | Insert Keyframes & Motion Tween | Align Right Line to Center of Stage | Repeat for Left Line | Add Keyframes & Motion Tween | Lock Layers, Select & Shift-Drag Right Line off Stage | Repeat for Left Line (down) | Nudge Lines (if necessary) | Remove Extra Frames, Select & Reverse Frames | Move & Insert Keyframes then Shape Tween | Change the Mask's Width & Position (as shown) | Right-Click, Select Mask & Test Movie (Oops! We've got a problem ;-) | Option-Drag Keyframe (to copy) & Remove Tween | Add Frames & Remove Tween | Lock All Layers, Add Layer & Keyframe | Open Library, Place Instance of Name on Stage, Insert Keyframe & Motion Tween | Alpha to 1% | Test Movie | Add Frames & Add Some Life to the Tween | Test Movie

Scenes Top

Insert New Scene (also found in the menu) | Scene Inserted (below active scene) | Reorder Scenes (just click and drag) | Topmost Scene Plays First | Reorder Scenes (to see proof) | Rename Scenes (Double-Click and replace generic names so you know what's what -- pick names that are meaningful to you) You should rename your scenes as soon as you add a second scene (and each scene thereafter) | Duplicate Scene (this can be very handy!) | Delete Scene

Can I combine two FLA files? Sure! Here's a simple example:

SWF | First FLA | Second FLA | Ending FLA | Open scenes_01.fla and Add Scene | Name it (and move it) | Open motion_tween_04.fla | Click Edit Multiple Frames (and drag the slider to cover all frames) | Click on the Layer Name (to select all frames and everything on the stage) | Right-Click (or Control-Click) and Copy Frames (this method copies the contents of the Timeline and the Stage -- very, very useful skill!) | Remember to turn off Edit Multiple Frames when you're done using it (in this case it doesn't matter but if you work with this feature turned on, chances are you'll ruin your project) | Close motion_tween_04.fla (and don't save the changes) | Right-Click and Paste Frames (on the motion tween scene in scenes_01.fla) | Test Movie

We need to learn a bit about Buttons and ActionScript to control the playback. Here's a Preview of what we'll make (the animation isn't much but the skills are essential)

Controlling Scenes Part 1 Top

SWF | Starter FLA | Ending FLA | Make Buttons (F8 is the shortcut to Convert to Symbol) | Add Stop Action (see Action Preferences if your ActionScript window looks different than mine -- you don't need to increase the font size unless you want to) | Add Play Action | Test Movie | Notice how the mouse has to be directly over the text to turn into the finger | Customize Stop Button (Double-Click to edit) | Test Movie | Customize Play Button | Test Movie

Controlling Scenes Part 2 Top

SWF | Starter FLA | Ending FLA | We want the button at the lower left to control jumping between scenes but first we should Customize the Button (no Hit State is necessary) | Test Movie | Script the Button via the Behavior Panel (we are going to have 3 scenes: red, green & blue) | Check ActionScript (generated via Behaviors) | We want this scene to be the red one so... Change Background Color (Double-Click on the fps) | So the SWF will not play automatically, Add a Stop Action | Test Movie | Move Frames (to get around that Stop Action) | Add Frames | Add Keyframe (and Behavior) | Now our movie has a glitch Test movie to see | Move Action to fix it | Add Sound | Copy Sound (Option-Drag) | Add Label | Name Scene | Test Movie

This scene now is as complete as it needs to be so we can take advantage by Duplicating it twice (and renaming it) | Testing the Movie gives us This Warning (we'll fix it next)

Controlling Scenes Part 3 Top

SWF | Starter FLA | Ending FLA | Correct Labels | Oh no! We forgot to (Option-Drag) Duplicate our Scene Buttons (not really -- good shortcuts ahead!) | Align | Change ActionScript | Tint Buttons | Test Movie (and our ActionScript works but some buttons are missing!) | Copy, Delete, and Paste in Place | Test Movie (since all the scenes are red how do really know it works?) | Change Background (of green scene) | Background Color Trick (be sure rectangle has No Stroke) | Copy and Paste in Place (on blue scene then edit color) | Make sure the Background Layer is at the Bottom of the Stack! | Test Movie and YIKES a flaw! (there's almost always at least one) | Fix Flaw in our otherwise perfect project (with labels -- NO SPACES IN LABEL NAME) | If you're a neat freak you can Clean up the Extra Frames (but not in the actions layer -- we need that one) | Test Movie and now you can celebrate your success!

Lastly: Lock Layers (we should have done this much sooner to protect our work -- my bad)

Button Basics Top

swf | fla | sound file | Creating and Positioning the Button (work with whole pixels) | Adding the Over and Down States (Double-Click to edit the button symbol) | Adding Text with a Pixel-Based Font (on its own layer) | Adjust Colors (as necessary for legibility) | Adding Sound (on its own layer) | Adding an Animation to the Over State | Duplicate Buttons and Text and you've got a set of buttons to use for your project

swf | fla | sound file (same as previous tutorial) | Add text, adjust tracking, and position on stage | Select and Covert to Symbol (make sure to specify "button") | Double-Click to edit the button and add a rollover effect as shown | Add (and name) a layer for sound, insert a keyframe, and add sound to over state as shown | Add a hit state so the button is user-friendly!

SWF | FLA | Gradient Background | Lock Layer & Add New Layer | Draw Rectangle (No Stroke -- Resize as shown) | Convert to Symbol | Add Text Layer | Add Text | Duplicate Buttons (Option-Drag) & Align | Duplicate Text (Option-Drag) | Align Text | Edit Text | Edit Button (Opacity Changes) & Test Movie | Add Label Layer & Name | Add Frames & Add Behavior to Button | Add Marker (to its own layer) | Add Stop Action (to its own layer) | Duplicate Scene x4 & Rename | Change Labels | Move Marker on each Scene (Nudge with Up & Down Arrows -- Shift-Arrow to move 10 pixels at a time) | Oops! I forgot this step (should have been done before Duplicating Scenes) Here's a good work-around to learn! Copy ActionScript, Paste & Edit (on each button in Info1) | Copy Buttons and Paste in Place (after deleting in other Scenes) | Test Movie

Pull Down Menu Top

SWF | Starter FLA (Slightly modified from This Tutorial) | Ending FLA | Add Keyframes & Frames | Add Labels | Remove Link Buttons (on Frame 1) | Add Stop Action | Add Button Behavior | Test Movie (you must click to open -- not good) | Modify Behavior | Test Movie | Copy Stop Action & Test Movie | To make the menu close we must Add Layer then an Invisible Button | Add Behavior to Button | Modify Behavior & Test Movie | Duplicate Button (Option-Drag -- Add Shift Key to constrain angle) | Test Movie

SWF | Starter FLA | Ending FLA | Edit Multiple Frames, Select All (Click & Shift-Click to select all layers) & copy Frames | Paste All Frames into MovieClip in New Document | Edit Multiple Frames, Select All & Reposition | Turn Off Edit Multiple Frames (Never leave it on unless you are using it!) and return to the main Timeline | Place an Instance of the MovieClip on the Stage | Test Movie | Free Transform & Test | Option-Shift-Drag to Make Copies, Align & Test | Group, Center Horizontally & Ungroup | Only there's one Big Problem | Delete Copies & Duplicate (as shown) | Place Duplicates on Stage | Transform, Position & Align | Edit Text | Test Movie (May take a while -- bug in Flash 7.0.1) -- See the problem? | Edit Text (Edit all) | And it Works!

SWF | Starter FLA | Ending FLA | Edit Text | Set Link (to button) | Test Movie

Navigating Between Scenes with Pull-Down Menus is Here

ActionScript Basics (Behaviors too) Top

The Stop Action (Time-Based Action) The Play and Stop Action (User-Based Actions)

Starter SWF | Starter FLA | Ending SWF | Ending FLA | Actions Preferences (You don't need to increase your font size) | Assigning the Stop Action (Time-Based) | Positioning the Buttons on the Stage (whole integer on Y-axis) | Assigning the Play Action | Assigning the Stop Action

The Goto Behavior (Time-Based Action via the Behavior Panel) Top

Starter SWF | Starter FLA | Ending SWF | Ending FLA | Labels Layer | Assign the Behavior | Fix the Loop | Look at the Actions

The Goto Action (Time-Based Action via the Actions Panel) Top

Starter SWF | Starter FLA | Ending SWF | Ending FLA | Labels Layer | Assign the Action | Fix the Loop | Compare the ActionScript with you generated with the script written with Behaviors (Both work)

The Go to Web Page Behavior (User-Based Action via the Behavior Panel) Top

SWF | Starter FLA | Ending FLA | Assign the Behavior to the Button

The getURL Action (User-Based Action via the Actions Panel) Top

SWF | Starter FLA | Ending FLA | Assign the Action to the Button | Compare the ActionScript with you generated with the script written with Behaviors (Both work)

Controlling MovieClips 101 Top

Controlling a MovieClip with Buttons

SWF | Starter FLA | Ending FLA | Creating a MovieClip from an Existing Animation: Edit Multiple Frames, Select All & Copy Frames | Insert Layer & Delete Layer | Remove Frames & Insert New Symbol | Paste Frames & Return to Main Timeline | Open Library, Drag Instance on Stage & Align | Test Movie (the Shape Hints don't copy -- See Shape Tween for Hinting) | Oh heck, Here's How (plus you'll see how to edit a MovieClip) | Add & Name Layers | Buttons in Common Libraries | Check Library | Instance Name (to control a MovieClip it must have one) | Script Stop Button | Test Movie | Script Play Button | Or, if you'd rather Learn a Shortcut | How to prevent the MovieClip from playing automatically: This Method won't Work | This Method will Work (Since the MovieClip has a separate Timeline it only makes sense that the Stop Action should go there, right?) | And just in case you aren't ready to type ActionScript yet -- The Stop Action (for about the fifteenth time) | Test Movie (now it stops because of the Action on Frame 1) | Make it Loop Again: Move Frames & Add GoTo Action | Fill in the Blank (Option-Drag to copy keyframe) | Housekeeping: If you have more than 1 Layer, Name It! | And don't forget that we've been working Inside the MovieClip's Timeline

Navigating Between Scenes with a Pull Down Menu Top

SWF | Starter FLA | Ending FLA | Test the Starter FLA | Examine the 4 Scenes (each one has a label) | Edit the Pull Down Menu MovieClip (Double-Click on it) | Add ActionScript to Scene 1 Button (the label in scene_one is "one") | Test Movie | Copy ActionScript, Paste & Edit on Buttons 2, 3 & 4 | Test Movie (No Menu yet on other scenes) | Copy MovieClip, Paste in Place in Scene 2 & Test Movie | Paste in Place in Scenes 3 & 4, and Test Movie

Scrolling Text Top

SWF | FLA | Text File | Using the Text Area Component (Command-V to paste text in Property Inspector then click on the component to see it) | Resize as Necessary

SWF | Starter FLA | FLA | Text File | Draw Your Own Dynamic Text Box (and paste in the text) | Add a Button Layer (and add a button to it) | Instance Name & Button Action | Button Action Continued | Option-Drag to Duplicate Button (and modify ActionScript) | Tweak Layout as Necessary | Optional: Change Scroll Rate

SWF | Starter FLA | Ending FLA | Text File | Dynamically Loaded Text File (must be .txt) | Dynamic Text Box | Set the Variable Name | Actions Layer | Variable URL | Buttons Layer | Scroll Action | Duplicate Button (and modify ActionScript) | Edit Text File | Look, Ma. No Flash! | Restore Text File (Optional)

Draggable Objects (With reset button) Top

SWF | Starter FLA | Ending FLA | Set the Stage | Start Drag Behavior | Stop Drag Behavior | Script Other Movie Clips | Duplicate & Rename Scenes | Add Label to First Scene | Add Stop Action | Add Goto Behavior (to reset the draggable objects)

Make Something Draggable (with reset button) | FLA

Slide Show (With Next & Previous Buttons) Top

SWF | Starter FLA | Ending FLA | Images | Open and Test (the Starter FLA) | Import Images | Extend & Lock Buttons Layer | Position Images on Stage (Edit Multiple Frames) | Turn off Edit Multiple Frames (will cause problems if left on) | Add Stop Action (on its own layer) | Script Next Button | Script Previous Button | Make Second Buttons Layer (and rename) | Verify that You're on Track | Buttons on Own Layer | Duplicate Buttons in Timeline (Option-Drag) | Labels on Labels Layer | Enable Next Loop (by changing ActionScript via the Behavior Panel) | Enable Previous Loop | (Top Buttons continued below)

Slide Show (With Top Navigation) Top

SWF | Starter FLA | Ending FLA | Add Keyframes (to Labels Layer) | Name Labels | Remove Unnecessary Frames | Lock Layers (we should have done this sooner) | Script Button (via Behavior Panel) | Duplicate Button (Option-Drag and position as shown) | Make 6 More Copies | Align (Space evenly horizontally) | Modify ActionScript as Shown (use label names)

Slide Show (With Fade-in -- Step 1) Top

SWF | Starter FLA | Ending FLA | Room to Work | We just broke ActionScript not tied to Labels -- Test Movie (to see for yourself) Moral: ActionScript tied to Labels is flexible and can save you lots of time! | Repair ActionScript (on first button) | Repair ActionScript (on second button) | Shortcut: Copy Second Button (Option-Drag) | Modify ActionScript (replace Label name -- for all buttons) | Remove Unnecessary Action (made in Step 1) | Test Movie | If it doesn't work, check your ActionScript against the Ending FLA

Slide Show (With Fade-in -- Step 2) Top

SWF | Starter FLA | Ending FLA | Convert to Symbol (repeat for all images) | Verify Symbols are in Library | Add Keyframes | Add Motion Tween | Set 1% Alpha (0% sometimes causes jittery playback) | Test Movie (don't panic) | Copy Stop Actions (Option-Drag keyframe in anticipation of making it work) | Change Stop Action to Play (in top buttons layer) | Change Stop Action to Play (in bottom buttons layer) | Remove Stop Action (on Frame 1) | Now it Works! Text Movie to prove it

Slide Show (With Rollover Effects) Top

SWF | Starter FLA | Ending FLA | Second Label Layer (set keyframes -- Option-Drag to copy) | Name Labels | Add ActionScript (to first button) | Copy, Paste & Edit ActionScript (to all remaining buttons) | Test Movie

Slide Show (Build Preloader) Top

SWF | Starter FLA | Ending FLA | Move All Frames (to make room for the preloader) | Insert Layer (for preloader) | Type 5 Characters (any font) | Center on Stage (as shown) | Convert to Symbol | Double-Click Instance (to edit) | Convert to Symbols (names start with letters -- I used p1, p2, etc.) | Distribute to Layers (and rearrange) | Set Keyframes (and Tween) | Transform & Alpha | Set Easing | Stagger the Animation | Add Frames | Copy Keyframes | Remove Unnecessary Tween (nothing's happening there) | Add Stop Action (on Main Timeline) | Test Movie

Slide Show (Script Preloader) Top

SWF | Starter FLA | Ending FLA | Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Test Movie (don't panic) | Inset Blank Keyframe | Simulate Download (to prove it really works)

Building a Preloader (Stand Alone) Top

SWF | FLA | Create MovieClip | Break Apart Text | Convert to Symbols (names start with letters -- I used i1, i2, etc.) | Distribute to Layers | Set Keyframes and Tween | Transform & Alpha | Set Easing | Stagger the Animation | Add Frames | Copy Keyframes (Option-Drag) | Remove Unnecessary Tween | Return to the Main Timeline

Placing Your Preloader in Another Flash Project Top

Starter Files | Open Slides_01a (as shown) | Unlock & Move all Frames | Copy & Resize Background Layer | Open preloader_01.fla (and its Library) | Open Slides_01a Library (and Drag the preloader into it) | New Layer (for the Preloader) | Close preloader_01.fla (and Test Movie) | Insert Blank Keyframe

Scripting the Preloader Top

SWF | Starting FLA (Put inside example_text folder then open it -- only if you need it!) | Stop Action | Scripting the Preloader: Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Test Movie (the preloader only seems like it's not working | Simulating the Download (See, it really does work!)

Trace Bitmap Top

SWF | Sunset Image | Starter FLA | Ending FLA | Import & Position on Stage | Insert Keyframes (as shown) | Trace Bitmap (with default settings) | Trace Bitmap (at 75 & 6 -- more detail) | Trace Bitmap (at 50 & 4 -- even more detail) | Insert Keyframes | Optimize (with default settings) | Undo & Optimize (at maximum) | Optimizing is a judgment call -- you choose the settings you like | Optimize Again (at max) | Test Movie | Touch-Up (optimize3 -- nothing outside the Stage shows so you don't have to be neat) | So I'm a Neat Freak (Optional Clean-Up) | (Not shown: Clean-up bottom of optimize1, 2 & 3-- you can do that on your own if you want) | Change Frame Rate & Test Movie (we'll use this file again below)

SWF | Bridge Image | FLA | Open a New Document (and Import Image) | Position The Image | Insert Keyframe & Trace Bitmap (Since this image is more complex the trace takes longer -- experiment with different settings on your own) | The image is quite beautiful! | Insert Keyframe & Optimize (this may take a while) | We Lost a lot of Detail | Undo Twice | Try Optimizing with Lower Settings | Much Better! (and a 33% reduction in curves -- smaller file) | Add Frames, Lower Frame Rate & Test Movie (we'll use this file again below)

Zoom & Pan Top

SWF | Starter FLA | Ending FLA | Watch SWF & Test Starter FLA to See Where We're Starting From | Keyframe, Label & Add Frames | Insert Keyframes (Option-Drag to copy) | Motion Tween & Ease | Apply Transform for Red Zoom (there seems to be a slight bug in the Transform Panel) | Position Zoom (use Arrow keys to nudge into position) | Repeat Transform (for green & blue) | Position (green & blue) | Test Movie | Add Stop Action (first Keyframe & at end of each zoom -- Option-Drag to copy first Stop Action) | Lock Layers & Add Behaviors to Buttons | Test Movie

SWF | Starter FLA | Ending FLA | Create an Invisible Button (No Stroke!) | Place & Resize Invisible Button (as shown) | Add Behavior to Button | Copy Button (Option-Drag as shown) | Test Movie | Insert Blank Keyframe & Test Movie

SWF (Choppy playback is caused by complexity of image) | Starter FLA | Ending FLA | Zoom in to see Pixelation | Back to 100% (in center of Stage) | Trace Bitmap (any settings you like) | Optimize (any settings you like) | Clean-Up (edges -- not shown) & Convert to Symbol | Keyframe, Motion Tween & Transform | Position Zoom | Easing and Test Movie | Move Frames (and copy Keyframe [Option-Drag] to let the viewer see the image before it zooms in) | Set Keyframes and Pan | 100%, Ease & Test | Insert Keyframe, Copy Keyframe, Add Tween, Ease & Test

Digital Portfolio (part 1) Top

SWF | FLA | Photoshop Preliminaries: Arrange files (first step) | Flatten and Save As (do not overwrite your original file) | Sharpen and Save Large Image | Sharpen and Save Midsize Image | Sharpen and Save Thumbnail | Examine your Files | On to Flash: Set the Stage | Import to Library | Make Buttons | Examine Your Library | Position the Buttons | Midsize Image (first step) | Add Other Midsize Images | Check to see that all are Positioned Correctly | Add Labels | Check Labels | Add a Stop Action | Add the First Behavior | Test Movie | Copy and Paste Behavior (change the label too) | Test all Buttons | Add Large Images | Check Large Images | Create an Invisible Button (and place on its own layer) | Add Behavior to Button | Add Keyframes (and edit ActionScript) | Verify the ActionScript | Invisible Buttons (on Large Images) | Verify Again

Digital Portfolio (part 2) Top

SWF | FLA | Add Alpha to Button | Alpha on All Buttons | Alpha on Midsize (for fade-in effect) | Edit ActionScript (so the fade can be seen) | Add Stop Action | Last Three Steps Again | Repeat for All | Alpha on Large Images | Edit ActionScript Again | Add Stop Actions | Adjust the Timeline (so the buttons can fade-in) | Finishing Touches

Now do it better than me! Make these skills you own.

Extensions

Installing Extensions Add cool new features to Flash (this one's got some great drawing tools for you to use)

Draggable Objects

Add draggable objects via behaviors in a fraction of the time it used to take

Here's the Alpha.fla file if you want to see how to build your own (with reset button).

Flash MX 2004 uses ActionScript 2.0 Here are some of the basics:

Stop on Actions Layer Here's the rgb_base.fla file

Stop and Play Buttons Here's the rgb_play.fla file

Go to Scene action Here's the rgb_scene.fla file

Using Behaviors and Labels to navigate Here's the rgb_labels.fla file

Making a simple slideshow (next/previous frame action) here's the slideshow_simple.fla file

Looping the simple slideshow (by modifying button ActionScript) here's the slideshow_simple_loop.fla file

Dynamic text 01, 02, and 03 Learn how to make a scrolling text box (like the example below) that you can update without opening Flash!

The plus sign (+) does not show up in steps 13 and 15 in the swf (above). Why not?!

Step 13 should read: Add +=1 after .scroll
Step 15 should read: Change the + to a - for the up arrow and test your movie.

  Create custom buttons and make your text flash.
  Just work along with the tutorials and set your imagination free!

Jump to a new page using a button and a Go to Web Page Behavior

Make this slideshow (then make your own) here's the source files.

Step 1: 1 2 3 4 5 6 7 8 9 10 11 12 swf_01
Step 2: 13 14 15 16 swf_02
Step 3: 17 18 19 20 21 22 23 24 25 swf_03
Step 4: 26 27 28 swf_04
Step 5: 29 30 31 swf_05
Step 6: Show me your finished product before proceeding.

Now upgrade the file by turning the jpgs into MovieClips. Here's the source fla for steps 32 to 35.
Note: You must place the fla file into the example_text folder for the dynamic text feature to work.

Important: Only the first few steps are shown in the following movies. When necessary, repeat steps for all frames.

Step 7: 32 33 34 swf_06 (the fade-in seems a bit too long so let's fix that)
Step 8: 35 swf_07 (the shorter fade-in looks better, eh?)
Step 9: Show me your finished product before proceeding.

Step 10: (optional): Now add your own finishing touches. Here's an example of what you might do (but you can do better than this).

Special Thanks for Helping to Support the Mac Lab!
A new Mac Lab section with tutorials for these great resources is coming soon
Maxon for continued support of our 3D students — Long live Cinema 4D!
Cineversity for the ever-growing Cinema 4D video tutorial library — 500+ tutorials and counting
3D Attack for the great monthly Cinema 4D magazine
MiniFonts and FontsForFlash for the best pixel fonts in the world!
CartoonSmart for the terrific Flash tutorials — An absolute treasure for the cartoonists in class
Pro Photo Secrets for Shane Goldberg's fabulous Photoshop tutorials — More treasure!
Stupendous Software for a myriad of iMovie plugins — Titles and effects galore
PotionFactory for PodcastMaker and VoiceCandy — Are students supposed to have this much fun?
SmileOnMyMac for DiscLabel — No more Sharpies for our CDs and DVDs!
Lemkesoft for the Graphic Converter — Opens and coverts any odd image formats
Graphic Authority for the Photoshop resources — Brushes and backgrounds and frames, oh my!
Realmac Software for RapidWeaver — For when we don't have time to Dreamweave(r)
Ergonis Software for PopChar X, KeyCue, and Typinator — Brilliant, time-saving programs
Flash Valley for the killer components — Fantastic new tools for the advanced students!
Linecraft for 7 Web Behaviors — Open browser windows with ease from within Flash
Rainmaker Research for SpellCatcher X — Not that students ever misspell words ;-)
Flying Meat (yes, Flying Meat) for FlySketch — Onion skinning the monitor (very cool program!)
Pangea Software for all those games — For the Game Art and Design program we're going to pilot

Flash MX Tutorials

**New Tutorials** | Slideshow | Preloader

 

Motion Tween Basics | Adding Sound

Basics (and Common Problems)

Intro to Animation

Text Basics | Animating Text | Scrolling Text

Drawing Basics | Adding Outlines

Intro to Motion Guides

Intro to Shape Tweening | Intro to Shape Hinting

Learning to Loop

Intro to Easing

Intro to Buttons | Intro to Button Actions | Button Actions 02 | Actions 03

Invisible Buttons | Creating Links with Invisible Buttons

Intro to Movie Clips (animating a button) | Button Sounds

Common Libraries

Exporting Flash Files | Dreamweaver Integration Basics | Exporting to QuickTime

Masking Basics

Photoshop to Flash via GIF

Auto Play Slide Show