Flash

CS5

Opening Screen File Types Create New ActionScript 3.0 (.fla) publish .swf ActionScript 2.0 (.fla) - publish .swf Adobe AIR 2 (.fla) publish for desktop iPhone (.fla) Flash Lite 4 (.fla) publish for applications ActionScript File (.as) Flash JavaScript File (.js) Flash Project (.flp) organize fla, swf and as files) ActionScript 3.0 Class ActionScript 3.0 Interface templates for actionScript files New Document Set Document Properties Modify>Document Properties Panel>Properties>Edit Working Environment White area stage (visible area for your application) Grey area pasteboard off the stage. Use pasteboard to deselect objects Timeline (by default is below the stage). Organizes for file into layers and frames. Top Scene, Edit Scene, Edit Symbol, percent Work Space Essentials (default) Panels All Properties found under Window - Properties Panel This panel (like dreamweaver's properties panel) is contextual. The options vary depending on what you have selected. - Library Panel - Tool Bar Options Area Changes options depending on which tool has been selected. - Color Panel - Swatches Panel - Align Panel - Info Panel info about selected object and where your cursor is on the stage. - Transformation - Timeline (bottom of screen) - Motion Editor (bottom of screen) used to fine tune animations Some Panels are icons click expand Panels to show panelPanels can be separated and regrouped. Can change order by clicking and dragging horizontally.

 Tool Bar Some of the tools have a black triangle in the lower right. This means that there is a fly-out menu if you hold the mouse down on that tool. If you hover over a tool, you'll get the tools name and the keyboard short cut. Hit the short cut letter to jump to that tool. (V) Selection Tool (A) Subselection Tool (Q) Free Transform Tool (F) Gradient Transform Tool (in fly out menu) (W) 3D Rotation Tool (G) 3D Translations Tool (in fly out menu) (L) Lasso Tool (P) Pen Tool (=) Add anchor point Tool (in fly out menu) (-) Delete anchor point Tool (in fly out menu) (C) Convert anchor point Tool (in fly out menu) (T) Text Tool (N) Line Tool (R) Rectangle Tool (O) Oval Tool (in fly out menu) (R) Rectangle Primitive Tool (in fly out menu) (O) Oval Primitive Tool (in fly out menu) PolyStar Tool (in fly out menu) (Y) Pencil Tool (U) Deco Tool (B) Brush Tool (B) Spray Brush Tool (in fly out menu) (K) Paint Bucket Tool (M) Bone Tool (M) Bind Tool (in fly out menu) (K) Paint Bucket (S) Ink Bottle Tool (in fly out menu) (I) Eyedropper Tool (E) Eraser Tool (H) Hand Tool To Temporarily Toggle between Select and Hand Tool, hold down the space bar. (Z) Zoom Tool (use as default, you can zoom in by holding down the option key). You can also select an area and zoom in. This is true with other Adobe products. View>Magnification. 1 100% 2 Show Frame 3 Show All 4 400% 8 800%

 - to zoom out + to zoom in Note: If an object on the stage is selected, flash will zoom in/out from it. Drawing in Flash Native format vector (like Illustrator) Object Drawing vs Merge Drawing For Object Drawing - Select Drawing tool (pen, pencil) and then click on at the bottom of the toolbar. When you're in the Object Drawing Mode this icon will be a darker gray. This only applies if selected BEFORE you draw your shape. Your object will have a blue outline around it. To edit a shape once you've created it, double click on it. To convert an Object Drawing to a merge drawing go to Modify>Break Apart ( B). To convert a merge drawing to an object drawing go to Modify>Combine Objects>Union. Merge Drawing Objects that overlap with delete the overlapped portion of the bottom object. If the objects are the sample color, they will merge into one object. Objects need to either be on separate layers or Object Drawing (grouped or a symbol) in order to stay as separate objects. Line Tool Select Line Tool set properties in Properties Panel. Draw line. You can also change properties by reselecting the line and adjusting in the Properties Panel. Checking the Hinting Box sets your line to the nearest pixel (if your line isn't directly at a pixel). This helps keep the line crisp once you publish your file. Note that you can customize the stroke by clicking on the "pencil" to the right of Style: Oval Tool Hold Option key when you draw to draw oval from the center. Hold Shift key when you draw to constrain the shape to a circle. Note: You can also change start or end angle and an inner radius. Rectangle Tool You can adjust the radius of the corners in the Property Panel. Unlink the corner radius to individually set the radius for each corner. You can also have a negative radius in flash. Oval & Rectangle Primitive Tools You can adjust the radius and angles AFTER the shape has been created. PolyStar Tool Select the PolyStar in the Tools Panel. In the Properties Panel under Options you can choose polygon or star and set the number of sides and the star point size. If you hold the shift key, the stars angles are restrained to 45.

Deco Tool You can use prebuilt or customizable artwork. Change in the Drawing Effect Drop Down Menu in the Properties Panel. Number of the Effects have advanced settings as well. Check out the various options under each effect. Selecting fills and lines If you've drawn a merged shape and want to move it or edit part of it there are selection options that are unique to flash. If you click once in the fill, flash just selects the fill. If you double click on the fill, it will select the fill and the stroke. If you click once on a portion of a stroke, it selects just that section. You need to double click to select the whole outline. You can also select a portion of a shape and drag it to another part of the stage. Vector Artwork in Flash (Similarities and differences from Illustrator) Once you've drawn a shape in flash whether a rectangle, oval, polygon, star or random shape you can adjust the shape in a number of ways. If you hover over the edge of a circular edge you'll get an arc shape. By dragging the shape, you can manipulate the edges. If you are on a straight line or a corner, an angle will appear. You can adjust as well. If you choose the sub-select arrow, you will have anchor points (similar to illustrator). If you split a shape, you can use the ink well to add a stroke to the side that you've cut. If you have a number of complicated vector objects it can slow down the run time of your flash file. Try Modify>Shape>Optimize to simplify your vector shapes. Brush Tool Paints fills vs strokes. With the brush selected, Check Brush size, Brush shape & Brush Modes at bottom of Tools Panel. Eraser Tool Like the Brush Tool, there are a number of erasing modes. The "faucet" allows you to contiguously erase a colored fill or stroke. Eyedropper Sample colors and apply the selected color will show under the fill color. Fill Objects With the paint bucket selected, check out the options at the bottom of the Tools Panel. If your stroke has a gap check the Gap size options. If you have the largest option chosen and it still doesn't fill, zoom out and try to fill again. Zaps will be filled depending on your level of zoom. Cmd A select all Cmd G group Shift Cmd G ungroup

Cmd R import to stage Color Panel Note: Different box for Fill and Stroke. Make sure correct one is selected. B&W fill, no-fill, swap fill and stroke Color slider, also sliders next to HSB and RGB and A(alpha) Top half of color preview shows the colors you're changing to and the bottom half shows the current color. Also have Hexadecimal value. First two numbers represents RED, second two represent the GREEN values, and the final two represent the BLUE values. 0-9 and A-F. Hexadecimal is a 16 digit base. 0 is lowest and F is the highest (think #000000 is black and #FFFFFF is white). Swatches Swatches allow you to create and save colors. With color selected, mouse of Swatches (a paint bucket will appear) click to add your new color. You also export and import colors. Arrow on upper right corner has a fly-out menu. Save Colors name your set and add .clr as the extension. You can add a palette by using the same fly-out menu and choose Replace Colors . And choose your .clr file. Gradients In flash, you create gradients in the color panel. Select your color and open Color Panel. Choose Linear or Radial gradient. Color on the right is the outer color and the color on the left is the inner color. Note: you can choose the same color for both and just adjust the brightness. With the gradient you get some additional options, Flow: Extend, Reflect or Repeat depending on how you use the gradient transform tool. You can click right below the color fill area to add additional colors (note + sign next to mouse arrow). To remove a color, click and drag it down. Gradient Transform (fly-out menu with the transform tool). Gradient Transform allows you to customize your gradient's position. Once you have the gradient Transform selected, you can click on any gradient on the stage to modify it. Handles allow you to move the gradient. Circle in the middle you can move the origin of the gradient. Upper right corner allows you to drag and rotate gradient. Side handles allow you to scale gradient. If you use snap to objects (magnet at bottom of tool bar) your gradient will snap to 90 angles. Hold the shift key to restrain to 45 angles. If you scale a gradient down, you can see how flow works in the color panel. Free Transform Allows you to scale, skew and transform objects in flash. Grab Top handles to scale. Note keeps bottom position. To scale from center, hold down Option key while you drag. Handles on corners can scale horizontally and vertically. To keep in aspect ration, hold down shift key while you drag it. Hover outside one of the corners to rotate the shape. Note the curved arrow. Click and drag to rotate the shape. Hold the shift key and will rotate at 45 angles. Select in between the handles to skew the object. Everything scales from the center transformation point. When you're in Free Transform mode, you can change the position of this point by dragging it to a new location.

Align The Align panel is a powerful tool for aligning, distributing, and spacing objects in Flash. Window > Align. Note Align to stage option. Alignment options are very similar to alignments in powerpoint. 3D Tools Flash doesn't allow you to create a 3D object, it just gives you a three-dimensional effect (kind of like moving a piece of paper around in 3D). In order to an object in 3D space, you need to convert it to a movie clip. Modify>Convert to Symbol (F8). So for the Type, I am going to choose Movie Clip. The 3D tools are in the toolbar right below the Free Transform tool, and there's the 3D Translation tool and the 3D Rotation tool. You can adjust your 3D settings in the properties panel. 3D Rotation Tool With the 3D Rotation tool, you have the different axis. Y-Axis is up and down, the X-Axis is left and right, and the Z-Axis goes into and out of your screen. The Y-Axis is actually the horizontal line (it's the green one). X, Y, Z corresponds to RGB. Red is the X-Axis, Green is the Y-Axis, and Blue is the Z-Axis. If you click and drag on the X-Axis, you will see that the object rotates around the horizontal plane. Click and drag on the green line that represents the Y-Axis and it's going to rotate around the Y-Axis. The Z-Axis basically gives you regular rotation. This is the same kind of rotation you would get with the Free Transform tool. You will notice the outer orange circle actually works with all axis at the same time. 3D Translation This allows you to move an object in 3D space. I can move it along the X-Axis, that's the red arrow, on the Y-Axis, that's the green arrow, and on the Z-Axis, which is the blue arrow. You can click and drag to move it forward and back. Rulers and Guides View>Show Rulers or View>Show Guides. Drag similar to other Adobe products. New in CS5, you can double click on a guide and the Move Guide Dialogue box appears. You can change the exact position of the guide. When you snap something to a guide, you want to make sure that you have the Snap to Objects option selected (magnet at bottom of tool bar). Layers & the Timeline Library Stores all reusable assets. Allow you to save and organize your assets. Can organize by name, date, and use count. Can organize in folders. You can use "pin" to pin library through multiple open flash files. Import Bitmap 1. Jpg, GiF, png (supports transparent bkgd) 2. Can import directly to the library or import to stage.

3. If you've imported a bitmap and then change the original (outside of flash), you can update the file in the flash library right click update. 4. You can adjust the compression without changing the original image. a. Double click image (in Library) to bring up Bitmap Properties Window. b. Adjust size and test movie. c. Check SWF History in the Properties window to see if file size has decreased.

Break Apart Bitmap 1. Cmd B to break apart. Can now edit like a vector object. 2. Lasso Tool and Magic Wand Bitmap Fill You can apply a bitmap image to a fill as a shape. Fill>Bitmap Fill Use Gradient Transform to align bitmap to shape. Advantage, is that vector path can always be edited. Can use a jpg vs a png smaller file size. Trace Bitmap Modify>Bitmap>Trace Bitmap Adjust color threshold & minimum area (higher numbers less complex shape/lower numbers more complex shape) Optimize Trace Bitmap Working with PhotoshopCS5 Files 1. Import>Import to Stage or Import to Library. 2. New in CS5 Photoshop (jpg) file in Library a. Right Click and choose Edit with Adobe Photoshop CS5 b. When you make an edit this way, photoshop over rights the original file 3. Set Preferences>PSD Importer (these are default settings). a. To adjust layer by layer i. Import>Import to Stage (cmd R) b. You can choose to create movie clips, keep text editable, etc. c. Layers (and layer names) import into photoshop with the same names and order of your original photoshop file. Working with IllustratorCS5 Files 1. One method is to copy illustrator elements and paste in Flash. Choose paste as bitmap or Paste Using AI File Importer Preferences. Apply recommended import settings to resolve incompatibilities. Maintain Layers. a. I can export a flash file (so you can import into illustrator). File>Export>Export Selection (Adobe format fxg). An xml image based file format. It's compatible with other adobe applications.

 Symbols in Illustrator

2. Illustrator files can be imported (just like photoshop files). You can also set the default preferences for illustrator import (AI File Importer settings).