• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this document? Why not share!

Introduction to Flash

on

  • 759 views

From a workshop series offered in Fall 2007.

From a workshop series offered in Fall 2007.

Statistics

Views

Total Views
759
Views on SlideShare
759
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to Flash Introduction to Flash Document Transcript

    • Introduction to Flash MX Sarah Bombich AIntroduction to Flash MXGoals  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 toolsWhat 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 [macromedia.com].  Vector-based  Interface is driven by ActionscriptWhat 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 imagesPrerequisite 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) 1/6
    • Introduction to Flash MX Sarah Bombich A 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 marqueeSelecting Lines and Shapes with the Lasso Tool (*Page 7-8)  Lasso tool > Make selections by dragging a freehand or straight-edged selection areaArrow tool + Property Inspector = Apply new line styles, thickness, and color to lines.  Changing line properties  Changing fill properties 2/6
    • Introduction to Flash MX Sarah Bombich AReshaping Lines and Shapes (*Page 9) > Use the Arrow tool to reshape lines and shapeswithout 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 lineScaling and Rotating  Free Transform tool > Scale, rotate, stretch, skew lines and shapes  Transform Panel > Enter the exact amount of scaling and rotationSegmenting and Grouping (*Page 10) > When you place shapes or lines on top of eachother, 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 connectingby 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 groupedAdding and Editing TextLessons/Work Files/Text.flaCreating 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 3/6
    • Introduction to Flash MX Sarah Bombich A 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 shapesCreating and Editing SymbolsLessons > 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 interactivityCreate 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 unchangedEditing Symbols (*Page 3)  Select an instance of the car o Edit > Edit Symbols o Edit > Edit Document to return to the documentUnderstanding LayersLessons/ 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 4/6
    • Introduction to Flash MX Sarah Bombich ACreating Tweened AnimationLessons/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 movementUsing 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 > PlayTweening 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 > PlayUsing 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 5/6
    • Introduction to Flash MX Sarah Bombich A 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 animationTweening 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 animationShape 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 6/6