Introduction to Flash


Published on

From a workshop series offered in Fall 2007.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Flash

  1. 1. Introduction to Flash MX Sarah Bombich A 1/6 Introduction to Flash MX Goals  Familiar with Flash’s capabilities  Knowledge of when it is (or is not) appropriate to recommend Flash as a solution  Understanding of learning curve  Familiar with Flash’s workspace and basic tools What is Flash?  Macromedia Flash MX is a powerful environment for creating a broad range of high- impact content and rich applications for the Internet. The approachable environment includes powerful video, multimedia, and application development features, which allow designers and developers to create rich user interfaces, online advertising, e-learning courses and enterprise application front ends [].  Vector-based  Interface is driven by Actionscript What Can I Make With Flash?  Web sites  Web site interfaces  CD-ROM interfaces  Web-based presentations  Computer-based training modules (eLearning), such as online quizzes  Animated images Prerequisite and Helpful Knowledge  Familiar with basic scripting concepts, such as those behind interactive web pages (i.e. difference between html and javascript) is essential  Experience with vector drawing tools (such as Adobe Illustrator or Macromedia Freehand) helpful  Familiarity with non-linear video editing helpful  Familiarity with using layers in graphics programs helpful (such as Adobe Photoshop)
  2. 2. Introduction to Flash MX Sarah Bombich A 2/6 Introduction to the workspace  Stage  Toolbox  Panels  Timeline  Layers  Library  Property Inspector  ActionScript Illustrating in Flash Lessons > Work Files > illustrate.fla Drawing lines, rectangles, and ovals (*Page 1) Use the Pencil tool (*Page 2) > Draws lines, shapes, freehand forms  Choose Straighten from the Pencil Mode modifier  Choose Smooth Painting and Filling Shapes (*Page 3)  Brush tool > Create brushlike strokes as if painting  Paint Bucket tool > Change the color of existing paint & fill empty areas surrounded by lines Erasing (*Page 5)  Eraser tool > Erases lines and fills. Can customize to erase only lines, only fills, only selected fills, only the fill on which you started erasing. Selecting Lines and Shapes with the Arrow Tool (*Page 6) > Use Arrow or Lasso tool  Click the Arrow tool  Click the center of the oval, border, double-click to select both, selection marquee Selecting Lines and Shapes with the Lasso Tool (*Page 7-8)  Lasso tool > Make selections by dragging a freehand or straight-edged selection area Arrow tool + Property Inspector = Apply new line styles, thickness, and color to lines.  Changing line properties  Changing fill properties
  3. 3. Introduction to Flash MX Sarah Bombich A 3/6 Reshaping Lines and Shapes (*Page 9) > Use the Arrow tool to reshape lines and shapes without using handles  Arrow tool o Drag the lines in the upper triangle without selecting them first o Pointer changes to show how the line can be reshaped  - You can adjust the end point of a line  - You can adjust the midpoint of a line Scaling and Rotating  Free Transform tool > Scale, rotate, stretch, skew lines and shapes  Transform Panel > Enter the exact amount of scaling and rotation Segmenting and Grouping (*Page 10) > When you place shapes or lines on top of each other, Flash connects or segments them  Arrow tool > If 2 shapes are the same color, Flash connects them when you deselect. (So, you cannot moves the tree away from the house.) Segmenting and Grouping, Part 2 (*Page 11)  Arrow tool > Flash segments the orange house where the green tree overlapped it. If shapes or lines are different colors, Flash segments the lower shape or line. Segmenting and Grouping, Part 3 (*Page 12) > You can prevent segmenting and connecting by grouping lines and shapes. Once grouped, they are treated as a single object.  Arrow tool > Draw a selection rectangle around the tree o Select Modify > Group  Arrow tool to still edit the contents of the group  Use the Property Inspector to determine if a shape is grouped Adding and Editing Text Lessons/Work Files/Text.fla Creating and Formatting Type (*Page 1)  Text tool o Click and type > expanding one-line text block with circle in upper right-hand corner o Drag the resize handle to define width of block > width is fixed and words wrap to the next line with square in upper right-hand corner (double-click the square handle to convert back) Working With Fonts (*Page 2)  Property Inspector > Format fonts
  4. 4. Introduction to Flash MX Sarah Bombich A 4/6 o Device fonts (_sans, _serif, etc.) Reshaping Text (*Page 5)  Convert text to basic shapes so that you can reshape characters with the Arrow tool or fill characters with a gradient.  Text converted to shapes cannot be edited as text  Arrow tool > select text object o Modify > Break Apart >> Converted to individual characters o Modify > Break Apart >> Converted to shapes Creating and Editing Symbols Lessons > Work Files > symbols.fla  Symbol is a reusable image, animation, or button  Help keep file sizes small and simplify movie editing  Required to create sophisticated interactivity Create a Symbol (*Page 1)  Open Library Panel (Window > Library)  Arrow Tool > Select car and drag it to the library o Convert to Symbol dialog box displayed  Drag symbol from Library Panel to the Stage to create an instance of the symbol o If you change a single instance of a symbol, the others remain unchanged Editing Symbols (*Page 3)  Select an instance of the car o Edit > Edit Symbols o Edit > Edit Document to return to the document Understanding Layers Lessons/ Work Files/layers.fla  Layers appear in the timeline  Clicking on the column under the eye hides/unhides a layer  Clicking on the column under the lock locks a layer so that it cannot be modified  Reorder layers by dragging and dropping to reorder them in the timeline
  5. 5. Introduction to Flash MX Sarah Bombich A 5/6 Creating Tweened Animation Lessons/Work Files/tweening.fla  Creating Animation o Frame-by-frame vs. Tweened  Tweened Animation o Create the starting and ending points and let Flash create the frames in between o Can vary the object’s size, rotation, color, or other attributes evenly between the starting and ending frames to create the appearance of movement Using Keyframes in Animations (*Page 1)  Indicated by circles in a frame  Draw a selection border around car o Insert > Create Motion Tween  Select Frame 15 in the Car layer and drag the car to the blue X o Flash automatically inserts a new keyframe and makes the dotted line solid  Select Frame 1 >> Control > Play Tweening Size and Rotation (*Page 2)  Select Frame 23 in the Wheel layer o Insert > Keyframe  Window > Transform o Select Constrain; Scale=200 & Rotate=180  Select frame between 17 & 22 o Insert > Create Motion Tween  Select Frame 16 and Control > Play Using a Motion Path (*Page 3)  Use a motion guide layer (guide icon to left of layer name) to draw a path for an object to follow.  Select Car layer o Insert > Motion Guide  Select Frame 31 in Timeline in Guide:Car layer o Insert > Keyframe  Use Pencil tool to draw a curving line from the car to the end of the path  Select Frame 31 in the Car layer  Select the Arrow tool and click the Snap modifier  Move the car so that its center point is over one end of the line
  6. 6. Introduction to Flash MX Sarah Bombich A 6/6 o A black ring appears at the center point when it is locked to the motion guide o Insert > Create Motion Tween  Select Frame 45 & insert keyframe in the Car layer o Move car so that it snaps to the other end of the line  Select Frame 31 of Car layer o Choose Motion from the Tweening pop-up menu in the Property Inspector’s frame settings  Play the animation Tweening Color (*Page 4)  Insert Keyframe at Frame 59 of Color layer  Select the object on the Stage  Choose Tint from the Color pop-up menu in the Property Inspector o Click the Tint color box and select a color o Select 50 in the Percentage pop-up menu  Select any frame between 47 & 58 in the Color layer o Insert > Create Motion Tween o Select Frame 46  Play the animation Shape Tweening (*Page 5)  Must use ungrouped objects to tween shapes  Insert keyframe in Frame 75 of Shape layer  Select the keyframe in Frame 61 of the Shape layer  Use the Arrow tool to deselect and modify the shape  Select a frame between 61 and 75 in the Shape layer o Property Inspector: select Shape from Tween pop-up menu  Select a value from the Ease pop-up menu o Negative value: to begin the shape tween gradually and accelerate the tween towards the end of the animation o Positive value: to begin the shape tween rapidly and decelerate the tween toward the end of the animation  Select Frame 61  Play the animation