Using the History Panel
Open History: Window > Other Panels >
To undo/redo steps: Move the slider up
CAUTION: When a step is undone and a new performed, all of the undone steps will be erased.
Creating and Using Symbols
History and down action is
To create a symbol: select drawing object; Modify >
Convert to Symbol, OR hit F8
The following properties may be changed when creating the symbol or in the Properties Panel:
o Name => appears in the Library. o Symbol type => movie clip (a self contained movie), button (with separate click states), or a graphic (which is coordinated with the main timeline). o Registration Point => defines the X/Y coordinate of the symbol. Upper left is default.
To Edit the symbol: Edit > Edit in Place, OR double clicking the symbol in the library, OR double click the instance on the stage.
The transformation point of a symbol affects how transformations are applied to it when creating the symbol and using the Free Transform Tool.
To Move this point: drag it outside around, even off the symbol.
Properties of a symbol
instance can be edited using the
Properties panel. Changes made using this panel will NOT change other instances of the symbol. Properties: o Instance name is for ActionScript. o The type of the instance can be changed. o Position and size of instance. o Color Effect styles include brightness, tint, and alpha
(transparency). o Filters are similar to filters and layer styles in
Photoshop. To add filters: select Filters and clicking the “Add
Filter” button in the bottom left of the panel.
Drawing: There are two drawing modes, merge and object.
The mode is selected by clicking the icon at the bottom of the Tool Panel when brushes, pencils, and shapes tools are selected. o Merge Mode: creates shapes that merge together when drawn on top of each other erasing what is underneath. The fill and stroke are selected individually with a single click, OR both together with a double-click. o Object Mode: creates drawing objects. Drawing objects don’t merge when overlapping. Doubleclicking on a drawing object allows it to be edited like a shape.
The stroke and fill of drawings are changed in the Properties Panel, OR at the bottom of the Tool Panel.
When the brush is selected, the following properties become available at the bottom of the Tool Panel: o Brush size, shape, mode (for painting in certain ways), are changed at the bottom of the tool panel.
When the pencil is selected, the following properties become available at the bottom of the Tool Panel: o Smoothing alters lines drawn to be smoother or straighter/more edgy
Editing Lines: When an object is not selected, use the dark arrow selection tool to drag curves and corners in lines. A curve point can be turned into a corner point by holding option (mac) or control
(windows) and clicking and dragging the line. The white arrow selection tool will allow you to edit individual points on the line and the curves they make.
To turn symbol/drawing object into shape: select the symbol and Modify > Break Apart.
STCM-22000 I NTERACTIVE M EDIA / William Ryan, Ph.D. (guide courtesy of Zach Gilson) 1
To turn shape into drawing object: select the symbol and Modify > Combine Objects > Union.
Using the Library
Open Library: Window > Library.
The library stores all of the symbols and media used in a Flash document. Create an Instance of a
Symbol: Drag a library item onto the stage (double check the layer you want).
To bring pictures, movies, and audio into library: File > Import to Library; select multiple files at once using control (windows) or command (mac). o You can import JPEG images, GIF/PNG for transparent images, WAV/MP3 for audio,
FLV/MPEG/MOV for video.
To create folders for organizing library items: Click the folder icon in the bottom left corner. Items
can be dragged onto a folder to place it.
To delete items and folders: select the item and click the trash can icon.
CAUTION: Deleting an item will remove any instances of it from the stage. Deleting a folder will delete all items in it.
Color
Colors can be changed in multiple ways: o Tools panel: Before creating a shape or object, the colors can be adjusted before drawing by using the color panels in the bottom of the Tools panel. o Properties panel (Window > Properties): Multiple shapes and objects can be selected and changed
at the same time. o Color panel (Window > Color): Fill and stroke can be adjusted on a finer level. o Swatches (Window > Swatches): Swatches are saved colors. Colors can be added to the Swatch panel by selecting the desired color in the Color panel and clicking the upper-right menu and choosing “Add Swatch.”
Choosing No Fill or Stroke: you can choose to have neither by selecting the icon.
Swapping Fill and Stroke: click the icon.
Eyedropper: the cursor can be moved off the panel; it will change into the eyedropper and a color can be selected from any object on the stage or off.
Gradients
To make a gradient: open the Color panel, clicking the drop-down in the upper-right, and selecting a
gradient option: Linear (one uniform line) or Radial (from a center point).
To edit points on the gradient: Boxes showing the color at each position can be moved by dragging the point along the color bar.
To remove points from the gradient: grab the box and dragging a point off the bar.
To add points to the gradient: Click anywhere along the color bar.
Transforming
To transform any object: select the Transformation Tool, OR go to Modify > Transform and selecting a type of transformation: o Scale: The size of the object. Hold shift to keep the width and height proportions intact. Hold command (for mac) or control (for PC) for fine-grain scaling control. o Rotate: Angle of the object. Hold shift to rotate the object in 45° angles. o Envelope: Grab a point and create a curve in the object. o Distort: Moves the corner or edge of a shape object. o Skew: Slants the side of an object.
The Text Tool: There are two types of text, Text Layout Framework (TLF) and classic text. TLF text has more editing options.
To create a text box: select the text tool (with a T icon) and click on the stage, OR drag out the box to
get an exact size for the text box.
To change the text box size: drag on the solid black boxes on the corners and edges, OR specify them in the Properties panel.
To thread text to other text boxes: When you type too much text to fit inside of one box, click the red
2 STCM-22000 I NTERACTIVE M EDIA / William Ryan, Ph.D. (guide courtesy of Zach Gilson)
plus button on the text box, and your cursor will change, when you hover over another text box,it will change to chain links. Clicking on them will connect the text boxes.
Change the text alignment with the icon in the top-right of the properties panel.
The properties panel contains all of the formatting and editing options, including: o Character: Change the font, style, size, leading, color, rotation, and highlighting. o Advanced Character: Add hyperlinks to text. o Paragraph: Change the alignment, margins, indents, and spacing. o Container and Flow: Add columns, padding, and a border around the text box. o Color Effect: Edit the brightness, tint, and alpha. o Filters: Add a filter to the text box.
The Timeline
Just like in Photoshop, the higher up a layer is arranged the “closer” it will be to the screen.
Folders are used to organize multiple layers. A single folder with multiple layers can be hidden, locked, rearranged, and deleted.
Hidden layers are not visible and cannot be edited while they’re hidden.
Locked layers stay visible but cannot be edited.
A keyframe is a frame that defines a change in animation. Empty keyframes have nothing on the stage for that frame.
To create a mask: Right click on a layer, select Properties, and any object on the layer will act as a mask.
To have some thing underneath, you need to drag a layer so that the bubble is inside the mask layer.
Frames & Keyframes & Animations
To add frames: selecting the layer, right-clicking on a frame in the timeline, and selecting “Insert
Frame.”
To create a motion tween: right-clicking on the frames and selecting “Create Motion Tween.” o On the timeline, move the scrubber to where the animation will go to. Now, move the symbol to the new location for the animation, OR change one of the properties in the Property panel. A diamond will appear on the timeline where the scrubber is. This is a keyframe on a motion tween.
To create an ease: select a frame of the motion tween and adjust the ease in the Properties panel. A high ease (positive number) starts the tween quickly and ends slowly; a low ease (negative number) starts slowly and ends quickly.
To create a shape tween: right click on the frame that will be the length of the animation, add a keyframe at that spot. o Right click on the frames in between the two keyframes and select “Insert Shape Tween.
STCM-22000 I NTERACTIVE M EDIA / William Ryan, Ph.D. (guide courtesy of Zach Gilson) 3
To create a shape hint: select the object on the first keyframe and click Modify > Shape > Add Shape
Hint o A red button should appear. Move it to a trouble area of the shape tween. Select the second keyframe and move the corresponding button to the trouble area. You can add up to 26 shape hints per tween.
To create a classic tween: right click on the frame that will be the length of the animation, add a keyframe at that spot. o Right click on the frames in between the two keyframes and select “Insert Classic Tween. (Almost
identical to Shape Tween).
To use a motion preset: Select object, open Window > Motion Presets, select desired motion, and click apply. o Motion preset can be edited just like any other animation.
To save a motion preset: Right click on a tween you want to save, and select “Save as Motion Preset”.
Aligning and Arranging Objects
To edit alignment and arrangement: Window > Align. From here, there are many options: o Align: Horizontal and vertical alignment options. o Distribute: Any objects selected will be spread across the stage. o Match Size: Changes the width and/or height of the objects to that of the stage. o Space: Spreads the objects evenly across the stage. o Align to Stage: Makes the alignment changes relative to the stage. If this is unchecked, the changes will be relative to the other objects selected.
The Bone Tool aka Inverse Kinematics
This tool uses a skeleton to group objects that move together. Characters’ arms and legs can be animated quickly and easily using the bone tool.
To add a skeleton: convert the components to multiple symbols.
Before using the bone tool, separate the character’s moving parts into individual movie clips.
o Select the bone tool o Click and drag the tool to place joints from one symbol to the next. Place joints where movement will occur. o All the symbols that are part of a skeleton are put onto a new armature layer. o After connecting the bones, use the selection tool to move parts of the skeleton. o To move the armature: Tweens made with skeletons are called poses. Right-click a point on the timeline and insert a pose. Move the bones on stage. o To move the whole skeleton: convert all of the bones into one big movie clip symbol.
Each joint has its own properties. All bone properties can be edited by double-clicking a bone. o Speed: The movement speed of the bone. o Joint Rotation: Adjusts rotation options. Constraints limit the angle of rotation. o Joint X Translation: Enables the bone to stretch horizontally. o Joint Y Translation: Enables the bone to stretch vertically. o Spring: Gives the bones weight. Strength determines how much weight the object has, dampening determines how quickly the springiness stops.
Adobe offers great videos to help learn the ins and outs of Flash. This is an excellent bone tutorial: http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/flash-professional-cs55-ik-support/
STCM-22000 I NTERACTIVE M EDIA / William Ryan, Ph.D. (guide courtesy of Zach Gilson) 4