Basics (1.1)
Flash Interface
opening new files, a look at the main windows, using tabs, tool window, context sensitive nature of Flash, re-sizing windows, undocking windows, classic view, lost windows.
video
archiveProject Properties
how to find and adjust project wide properties including the frame rate, dimensions and background color.
Text (1.2)
Text Tool
selecting the text tool, changing font family, placing textbox, adding text, moving, and text properties like size and color.
Text Filters
applying filters (like drop shadow, bevel, and glow) to a text box.
Link Text
creating text that links to a URL or an email address, If you watch one thing here the project preview gives you and end user's look at your work. Will come in especially handy as you get into tweens and movie clips.
Art/Drawing (1.3)
Pencil Tool
selecting the tool, changing mode (straighten/smooth/ink), changing stroke size, eraser, eye dropper to select existing color. Example consists of drawing a jack-o-lantern.
Importing Graphics
how to import graphics to the library, bring the graphic onto the scene and resize the project so it can accomidate the graphic.
Moving Objects
selecting objects with the selection tool, snapping, changing the snapping settings, 1 pixel changes with arrow keys, 10 pixle changes with shift + arrow keys, selecting/moving multiple objects, changing via the properties window
Object Union (1 of 3)
combining vector art that shares an identical color. Selecting and moving until they are touching or overlap on the same layer, deselecting, and reasons why it might not work (one object is grouped, or there is a different stroke color).
Shaping and Edit Points (2 of 3)
Using the selection tool to modify the position of different points in a piece of vector art, or bend the lines of a piece of vector art.
Object Subtraction (3 of 3)
Using vector art to take a bite out of another piece of vector art. Also covers drawing perfect circles using shift + drag and the oval tool.
Free Transform Tool
Change the dimensions individually or to scale, rotate, and skew. The tool is demonstrated on simple vector art, text, as well as more complex vector art.
Color Window and Gradient Transform Tool
Using the color window to apply changes to stroke and fill colors of vector art as well as apply gradients (radial and linear gradients are shown). Changes to those gradients are then demonstrated using the gradient transform tool as well as shifting, adding, and deleting colors to the color slider.
Alignment Window
Demonstrates how to evenly space out objects, or uniformly align them on the stage or relative to each other.
Organization (1.4)
Layers
naming layers, adding layers, adding content to layers, move content from one layer to another, cut/paste in place, stacking order, changing the stacking order, locking layer content, undo command, show/hide layers, outline view for layers. If you watch one thing here the undo command is a life saver.
Grouped Objects
Grouping items together, shown with vector art to get around object union and object subtraction. Continues with the van used in object union, shaping and edit points, and object subtraction.
Tweens or Animation (1.5)
Frame Span
Adding frames, overall discussion of how time is shown on the timeline, covers keyframes, end frames, and adding frames
Edit Frame Span
Using insert frames to extend the length of a framespan, using remove frames to drop single or a range of frames to contract it. Selecting a framespan and moving it to a different location on the timeline.
Classic Tween
Creating classic tweens for text boxes and symbols, independence of objects on different keyframes, creating a change in location, downside to applying the tween on the wrong kind of object. Clearing keyframes (another form of timeline manipulation) is also shown.
Shape Tween
Creating shape tweens with vector art, creating a change in position, color and fundamental shape of the object. Potential for unexpected results.
Broken Tween
How to break a classic or shape tween.
Classic Motion Guide
How to create a guide layer for a classice tween in order to have objects follow a path. Includes snapping, following a simple arc and a more complex spiral shape. Reasons why the object might not follow the path are also shown.
Motion Tween
Setting up a framespan, creating a motion tween and adding keyframes on the fly. Fade in and motion are demonstrated. Built in guide path is also shown. Motion tweens must be used with symbols.
Rotation
Using a motion tween to rotate an object. Covers rotation points using the free transform tool, some discussion of instances vs symbols. Also discusses how to set up a tween so it loops continuously with no visual pauses.
Easement
Changing the pace over time in a tween for classic or shape tweens. Covers how to select the tween and edit the easement in the properties window. Covers ease out (fast at first, slowing down towards the end) and ease in (slow at first, getting faster over time).
Motion Editor
A look at fine-tuned control over the pacing of tweens. Different dimensions and features that can be animated. Bounce in for a y-axis change is demonstrated. 0,0 point of the stage is discussed.
3d Rotation Tool
In conjunction with a motion tween, the rotation tool can spin 2d objects on their x or y axis. The companion 3d translation tool creates motion on the x, y, and z axis.
Symbols (1.6)
Graphic Symbols
How to create graphic symbols, the difference between a symbol (blueprint) and an instance of that symbol. Symbols vs instances are a key thing to understand going forward.
Button Symbols
Using samples from the common libraries, discusses different button visual states and some best practices for setting them up (single framespan for text, center alignment). Goes on to cover the critical difference between making another instance of a symbol vs making a duplicate of it in the library. Also covers a common problems of dragging an instance of a symbol inside itself or accidently nesting a button symbol inside another.
Buttons Nested Graphics
Creating buttons with graphic symbols as a foundation so that sweeping changes can be made throughout a project.
Movie Clips Nested Timelines
An example with with a basketball showing vertical change (bounce) nested within a horizontal change to have it bounce in from off screen. Highlights the independent nature of timelines and also covers how to cut/paste frames (different than other cut/paste operations) to move a tween from one timeline (in this case the main timeline) to a another (in this case a new movie clip).
Movie Clips Independent Timelines
An example with two gears showing how timelines operate indpendently of each other.
Cut Frames/Paste Frames
If you already have tweens or multiple layers that you want to package into a movie clip, this is a look at how to Cut and Paste Frames into a timeline. Note that you have to do it by selecting and right clicking on frames in the timeline, you cannot see this option in the edit menu or do it with the typical keyboard shortcut. Covers cutting frames, inserting a new movie clip symbol, pasting frames, cleaning up the previous timeline and adding an instance of the new movie clip.
Actionscript, Timeline Control (1.7)
stop(); Function
Covers a convention (putting all actions into an actions layer), when actions get run, introduces the stop(); function, also covers how to verify where your code is being written
gotoAndStop(); Function
Instead of stopping on the current frame gotoAndStop() can take a frame number and move the playhead to that frame before stopping.
gotoAndStop(); w/ Frame Labels
Instead of using numbers you manually type in you can refer to a frame label, a sort of instance name for a frame of content. If the label gets moved to a new frame, the actionscript keeps working. Covers both creating the frame label and referring to it in actionscript.
nextFrame(); and prevFrame(); Functions
Each figures out what the current frame is, then moves you forward one frame and stops nextFrame(); or moves you back to the prior frame in the timeline prevFrame(); Note that this change is linear, not like a browser's history feature.
Controlling "Child" Objects (1 of 2)
You have have used the stop(); function to stop the current timeline (such as the main timeline) this is a look at how to control timelines nested within your current timeline. Includes "turn by turn" directions to the timeline using the "target object" button in the actions window as well as a discussion of why it doesn't work quite right and how to fix it.
Controlling "Sibling" Objects (2 of 2)
A look at how the target path needs to change when you are talking to a sibling--on the same level of the heirarchy as the place where you are writing the code. Which involves going "up" to a parent before pointing at the sibling.
Actionscript, Buttons (1.8)
Button Actions
Covers the three fundamentals of buttons: An instance name, an event listener (paired with an instance name and an event, and a custom function), and a custom function to run when the event for that button is triggered.
.visible Property
Using the visible property to set two buttons up as a toggle, where you alternate showing/hiding as the other button is clicked.
Button Listener Limits
You cannot attach an Event Listener to a button, using the addEventListener() function, unless the button "exists" at that point in the timeline. Shows the error you might see if you try it and dicusses how to fix the problem (move the event listener to where the button shows up).
Actionscript, Variables/Properties, Conditionals, Control Structures (1.9)
Variables and Properties
Discusses properties (data about objects built into Flash) vs variables (which you create and name to hold data). Shows an example of updating the .alpha property of three movie clip instances.
Variables
Declaring variables and giving them a type, updating variables, giving variables an initial value. Forcing data to conform to a given variable type.
Variable Scope
Variables live in a certain space, if created on say the root timeline, then anything (including functions) can access them or even update them. If created inside a function those variables live inside that function alone, and go away when the function finishes running. Also discusses the fact that variables inside a movie clip go away if you
If, Else If, Else
We make similar kinds of decisions all the time. If the smog level is extreme, don't go outside, else if it is mild, then limit outdoor activity, else (in all other cases), don't limit activity because of smog. Example reads the .x coordinate of a movie clip (a happy/sad face) and adjust it's playhead to show a relevant disposition.
Conditionals (Are These The Same?)
Actionscript is very literal. Setting myVariable = 4 is an "assignment" updating the value of the variable. That is much different than checking to see if myVariable == 4, which checks to see of the current value of the variable is equivalent to the stated value.
Conditionals ("and", "or")
Checking for complex conditions, such as two things having to be true, using "and" && as well as either of two things being true, using "or" ||. For example, an employee might get a raise if (budget == "flexible" && jobPerformance == "good"). As another example, you might use an umbrella if (weather == "rain" || weather == "hail").
Debugging Tools (1 of 2)
Setting break points in the actions window to pause the actionscript and allow you to check "live" variable/property values using the debbuging tools.
Avoiding Initial Values (2 of 2)
Actionscript gets run twice, once to set up space in memory for variables objects and functions, then again to actually execute the code. If you set an initial value for a variable (for example var myVariable = 5;) then the value will be set to 5 every time you visit the frame that code is on. This example sets up an if check that takes advantage of actionscript being run twice so that initial variables only get set the "2nd" time the code is run, immediately after memory is reserved for variables. But not when the code is visited again.
Functions (1.10)
Custom Functions (1 of 5)
Starts with a sample of two custom functions that read data from a specific text field and use that data to update a variable. The relationship between these user generated custom functions is compared to built in functions.
Function Reuse (2 of 5)
Shows the true power of custom functions by re-writing very similar functions to be more generic. As part of that process and making them generic the function reads in data (the text box to pull information from) and then returns the data it gets.
Multiple Arguments (3 of 5)
What happens when you need to pass two or more pieces of data to your custom fuction? A look at passing two arguments to a function and using both pieces of data in a calculation before returning the result.
Chaining Functions (4 of 5)
If a function gets you really close to what you want, you don't need to duplicate your efforts use it for the part of the job it can do, and do the rest in your new custom function. By chaining functions together you can do a wider set of tasks.
Nesting Functions (5 of 5)
Many times you want a function to run a whole set of instructions, or only run certain instructions at certain times. In this example, a function reads in a percentage score, and using a series of if/else if/else checks it uses that data to figure out a letter grade from A-F. Discusses how to use uniform tab stops so your actionscript is more readible.
Text Fields and Strings (1.11)
Update Text Field
You can use actionscript to update the contents of a text field. It needs to have an instance name, you have to point at it, then you need to update the .text property. For example: myTextField.text = "you just got updated!";
Adding Strings Together
Many times you may want to add strings together, such as a couple of String variables, or adding a String to an existing variable. You can do this with the plus sign. For example: newString = myString1 + myString 2;
Embedded Fonts
TLFText fields, and classic text fields than can be altered with actionscript will default to small file size at the expense of looking good. If you care at all about aesthetics you should "embedd" your font along with the .swf file (this can be done using the properties window).
Actionscript, Drag and Drop (1.12)
Drag and Drop Setup
Before you can get started with actionscript you need draggable objects and drop targets that are movie clips, both of which need instance names. You need some kind of background to avoid a null reference if they miss your targets. Make sure your draggables are above the drop targets, ideally above other layers too. Also discusses using centered registration points, making sure font inside draggable movie clips is not selectable.
Start Drag (1 of 11)
Think of drag and drop as being similar to buttons. Instead of looking for MouseEvent.CLICK you can begin a drag and drop by listening for MouseEvent.MOUSE_DOWN. Instead of doing something like changing the playhead (what you might do for a button) you can point to your draggable movie clip and call the startDrag() function.Stop Drag (2 of 11)
Think of drag and drop as being similar to buttons. Instead of looking for MouseEvent.CLICK you can begin a drag and drop by listening for MouseEvent.MOUSE_UP. Instead of doing something like changing the playhead (what you might do for a button) you can point to your draggable movie clip and call the stopDrag() function.Snapping Back (3 of 11)
Setting varialbes to store the starting x, y coordinates of a draggable object. Storing those coordinates before dragging begins, then forcing the object back onto those coordinates after dragging stops.Selectable Text (4 of 11)
When you have selectable text in a draggable object it can mess with the cursor and even trap a mouse event you wanted to go to the movie clip as a whole.Detecting Drop Target (5 of 11)
Dragging and dropping is one thing, figuring out where you landed is another. Uses the dropTarget property of the draggable object (typically used as <draggable>.dropTarget.parent.name) to figure out the instance name of the object that the mouse is over when the user released the button. Also walks through "pseudo coding" the logic of what you might want to check for and updating a feedback text field when certain targets get hit.Updating Alpha (6 of 11)
You might want to make visual changes to your draggable object depending on what happens, if you still want the learners to interact with it (say because they didn't do what you wanted) you might keep it opaque. If they did want you wanted (say because they found the correct target) you might want to gray it down. This covers setting variables for a couple of alpha levels and then using those varaibles to make changes on the draggable object.Copying Correct Target (7 of 11)
A look at copying/pasting and then modifying code for a drag and drop with a "correct response" option, or a drop target you actually want it to find.Copying Incorrect Target (8 of 11)
A look at copying/pasting and then modifying code for a drag and drop in which there is no correct response available. In this particular case it's not just a matter of changing instance names and text strings for feedback, the logic needs to be changed slightly.Custom Start (9 of 11)
If you are going to be doing more than a few drag and drop interactions the code starts to get really repetative. Rather than give yourself the headache of having to make changes in multiple places you can write a custom function, passing in the data you need (like a reference to your draggable object) and let the custom function deal with things from there.Custom Correct (10 of 11)
Custom function to handle cases where there is a correct drop target.Custom Incorrect (11 of 11)
How to handle a custom function when there is no correct drop target.
Actionscript, Sound (1.13)
Sound With Actionscript
Covers a lot of ground including: how to add a "linkage name" to something in the library so that you can pull it into your project using actionscript, creating an instance of your custom Sound class, playing the audio, placing all of that in a custom function so you can access it multiple times. Using SoundMixer.stopAll() to keep other sounds from playing before you do something new.
Sound Volume
Shows how to set volume for video files (using the FLVPlayback component) for audio in the timeline as well as audio using actionscript. The actionscript approach requires saving the SoundChannel, adding a SoundTransform, updating the volume and then applying the SoundTransform to the SoundChannel. Simple enough right?
Video/Sound (1.14)
Adobe Media Encoder
Briefly shows the Adobe Media Encoder, how to add video, choose different compression settings and output an .f4v file, which can be used as an external video resource in flash projects.
Embedded Video
One approach to adding video to a flash project is to embed it as part of the .fla file. This can only be done with the older .flv format of video and also presents some potential challenges associated with increase .fla file sizes.
FLVPlayback Component Video
Another approach is to pull externally "housed" video files into the FLVPlayback component and play them that way. This allows you to use some built in player controls and skins, as well as use video across several different flash projects.
Sound in Timeline
For short sounds, it can be effective to run them in the timeline, discusses briefly how to important a sound but focuses on pulling one from the common library and then adding to to help reinforce the visual animation of a basketball bouncing.
Music in Timeline
When sounds are longer (such as a piece of music) then using the timeline can be more challenging. Discusses how to add sound to the timeline but also stop it from played when you move to another frame (again using timeline controls for the sound).