1 / 55

Tutorial 1

Tutorial 1. Getting Started with Adobe Flash Professional CS6. Objectives. Explore the types of Web media created in Flash Compare vector graphics and bitmap graphics Learn how Flash media are displayed in a Web page View Flash files in a Web browser

atira
Télécharger la présentation

Tutorial 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 1 Getting Started with Adobe Flash Professional CS6

  2. Objectives Explore the types of Web media created in Flash Compare vector graphics and bitmap graphics Learn how Flash media are displayed in a Web page View Flash files in a Web browser Start Flash and explore its main workspace components Change the view of the Stage Display the rulers and guides New Perspectives on Adobe Flash Professional CS6

  3. Objectives Change a document’s settings Work with strokes, fills, and colors Draw and group objects Select and modify objects Export a graphic object Use the History Panel Use Flash Help New Perspectives on Adobe Flash Professional CS6

  4. Reviewing Types of Web Media • Web pages are comprised of various Web media including : • Text • Graphics • Animations • Sounds • Videos • HTML is used to integrate media into Web pages • Adobe Flash CS6 Professional (Flash) is a software program used to create interactive graphics and animations • Originally designed to create small, fast-loading animations • Has evolved into an advanced authoring tool for creating interactive Web media and engaging content for mobile devices New Perspectives on Adobe Flash Professional CS6

  5. Reviewing Types of Web Media • Bitmap and Vector Graphics • Bitmap Graphics • Row-by-row list of every pixel along with its color • Pixel • The smallest element making up a picture • Popular formats include JPEG, GIF, and PNG • Photographs are bitmap graphics New Perspectives on Adobe Flash Professional CS6

  6. Reviewing Types of Web Media • Vector Graphics • Specified with mathematical instructions that describe the color, outline, and position of all the shapes of the image • Shapes are defined by numbers that represent the shape’s position in the window • Other numbers represent the points that establish the shape’s outline • Images are resolution independent and scale well • Images created in Flash are vector graphics New Perspectives on Adobe Flash Professional CS6

  7. Reviewing Types of Web Media New Perspectives on Adobe Flash Professional CS6

  8. Reviewing Types of Web Media • Bitmap and Vector Animation • Animation • A series of still images displayed in sequence to make it look like motion • Bitmap Animations • Created by putting bitmap images into one file and playing back in a sequence • Bitmap motion graphics are usually limited to small display sizes and short sequences • Vector Animation • Listing of shapes and their transformations played back in sequence to produce the perception of motion • Resolution independent New Perspectives on Adobe Flash Professional CS6

  9. Developing Web Media in Flash • Web media created in Flash is called a document • Include text, static images, sound, video, and animations • Animations created from a series of graphic objects that are sequenced • Are primarily vector graphics but can include bitmaps • Flash supports many different import formats • Can export Flash graphics and reference them in HTML files • Flash files must be referenced in an HTML page file to be viewed as a Web page New Perspectives on Adobe Flash Professional CS6

  10. Developing Web Media in Flash • Types of Flash Documents • FLA (.fla) file • Used to author Flash content • SWF (.swf) file • Flash document viewed by end-user in a Web browser • The SWF file is also called a Flash movie • SWF files require a Flash Player plug-in • ActionScript is code used to enhance interactivity New Perspectives on Adobe Flash Professional CS6

  11. Starting Flash • Welcome Screen • Provides access to commonly used actions • Opening a recently used file • Creating a new Flash document • Creating a document using a template • Flash program window appears after a document is opened or a new one is created • Called the workspace • Contains toolbars, windows, and panels that can be rearranged • Preset workspace layouts include Designer, Developer, and Essentials New Perspectives on Adobe Flash Professional CS6

  12. Starting Flash • Previewing Documents • Preview Flash document to review changes made • Preview or play animation within Flash workspace • Previewing in the Flash workspace is the quickest • Some animation effects and interactive functions only work in the published format • Publish file to play in a separate Flash Player window • Publish file to play in your default Web browser • In the Flash window, play the animation manually by scrubbing, or dragging the playhead back and forth through the frames • Good for testing an animation during development New Perspectives on Adobe Flash Professional CS6

  13. Starting Flash New Perspectives on Adobe Flash Professional CS6

  14. Exploring the Workspace Components • Stage • Site for creating, importing, assembling graphic objects • Shows only the objects that are visible at a particular point in an animation • Similar to a stage in a dramatic production • Pasteboard • Gray storage area surrounding the Stage • Objects and portions of objects on the pasteboard are not shown on the Stage New Perspectives on Adobe Flash Professional CS6

  15. Exploring the Workspace Components • Timeline • Controls and coordinates layers and frames in document • Frame • Container representing a unit of time • Appear in rows along the Timeline • Playhead • Marker indicating currently selected frame • Layers • Organize the contents of a Flash document • New document contains one layer • Added animations increase the number of layers New Perspectives on Adobe Flash Professional CS6

  16. Exploring the Workspace Components • Different objects are placed in different layers • Can draw or change something in a layer • Only the contents of the active layer are affected • Layers do not add to the overall size of the file New Perspectives on Adobe Flash Professional CS6

  17. Exploring the Workspace Components New Perspectives on Adobe Flash Professional CS6

  18. Exploring the Workspace Components • Tools Panel • Provides tools to create graphics and animations in a Flash document New Perspectives on Adobe Flash Professional CS6

  19. Exploring the Workspace Components New Perspectives on Adobe Flash Professional CS6

  20. Exploring the Workspace Components New Perspectives on Adobe Flash Professional CS6

  21. Exploring the Workspace Components New Perspectives on Adobe Flash Professional CS6

  22. Exploring the Workspace Components New Perspectives on Adobe Flash Professional CS6

  23. Exploring the Workspace Components • Panels • Provide controls to: • Align objects • Transform objects • Mix and select colors • Can organize panels according to your preference • Panel group • Two or more panels displayed together • Docked panel bar • Collection of individual panels or panel groups New Perspectives on Adobe Flash Professional CS6

  24. Exploring the Workspace Components New Perspectives on Adobe Flash Professional CS6

  25. Exploring the Workspace Components • Property Inspector • Panel that displays information about the document or a selected object • Provides easy access to common attributes • Contents of the Property inspector change to reflect the selected tool • When Selection tool is clicked, the Property inspector displays information about the document • When an object on the Stage is selected, the Property inspector displays properties specific to that object New Perspectives on Adobe Flash Professional CS6

  26. Exploring the Workspace Components New Perspectives on Adobe Flash Professional CS6

  27. Changing the View of the Stage • Magnifying and Moving the Stage • Zoom Tool • Used to adjust magnification level of Stage and pasteboard • Click Zoom tool on part of the Stage to enlarge or reduce it • Selection Marquee • An outline that encloses an area to be selected New Perspectives on Adobe Flash Professional CS6

  28. Changing the View of the Stage • View Menu • Zoom in and out • Set magnification level • Fit the Stage to fill Document window • Show all content of current frame • Show frame to make entire Stage visible New Perspectives on Adobe Flash Professional CS6

  29. Changing the View of the Stage New Perspectives on Adobe Flash Professional CS6

  30. Changing the View of the Stage • Displaying the Rulers and Guides • Rulers • Vertically displayed on left edge of Stage window • Horizontally displayed on the top edge of Stage Window • Guides • Lines used in conjunction with rulers to align objects • Can be moved to a specific part of the Stage • Can change the color, snap objects to them, lock them in place • Visible only while working with a document New Perspectives on Adobe Flash Professional CS6

  31. Changing the View of the Stage New Perspectives on Adobe Flash Professional CS6

  32. Changing the View of the Stage New Perspectives on Adobe Flash Professional CS6

  33. Changing the View of the Stage • Changing the Document Settings • Use the Document Settings dialog box to change values such as title, description, Stage size, background color, frame rate, and ruler unit • Title and description embedded with the SWF file • Other settings are set at default values • Stage size: 550 x 400 pixels • Stage color: white • Frame rate: 24 frames • Ruler units: pixels New Perspectives on Adobe Flash Professional CS6

  34. Changing the View of the Stage New Perspectives on Adobe Flash Professional CS6

  35. Working with Objects in Flash • Creating Strokes and Fills • Strokes • Straight or curved lines • Individual line segments, or • Connected together to form shapes • Fills • Areas painted with color • Can be enclosed by strokes New Perspectives on Adobe Flash Professional CS6

  36. Working with Objects in Flash • Drawing and Grouping Objects • Merge Drawing mode • Objects in a layer occupy the same plane • Object drawn or moved on top of other objects merges with or segments the existing objects • Group objects to prevent them from impacting each other • Object Drawing mode • Drawn shapes are separate objects • Group objects to prevent them from impacting each other New Perspectives on Adobe Flash Professional CS6

  37. Working with Objects in Flash New Perspectives on Adobe Flash Professional CS6

  38. Working with Objects in Flash • Using the Color Controls and the Color Panel • Strokes and fills can be drawn with different colors • Use the Stroke color or Fill Color controls in the Tools panel to select colors • The color palette contains color swatches (color squares) for 216 Web-safe colors based on RGB (red, green, blue) • Select colors • Using the Property Inspector • Using the Color panel New Perspectives on Adobe Flash Professional CS6

  39. Working with Objects in Flash New Perspectives on Adobe Flash Professional CS6

  40. Selecting Objects • Selection Tool • Used to select strokes or fills • Can also be used to select groups of objects • The Selection tool includes Snap to Objects, Smooth, and Straighten modifiers New Perspectives on Adobe Flash Professional CS6

  41. Selecting Objects • Subselection Tool • Used to display and modify anchor points • Click and drag an anchor point on a straight line segment to change the angle or the length of the line • Click an anchor point on a curved line and tangent handles appear next to the selected point; drag the tangent handles to change the curve New Perspectives on Adobe Flash Professional CS6

  42. Selecting Objects New Perspectives on Adobe Flash Professional CS6

  43. Selecting Objects New Perspectives on Adobe Flash Professional CS6

  44. Selecting Objects • Lasso Tool • Use when the Selection or Subselection tools cannot be used • Select one or several objects at one time • Select an irregularly shaped area of an object • Move the selection • Change color of all selected fills at one time New Perspectives on Adobe Flash Professional CS6

  45. Selecting Objects New Perspectives on Adobe Flash Professional CS6

  46. Exporting a Graphic • Documents created in Flash are saved in the Fla format • Contains all elements created in Flash • Revise the document by opening the file • Must publish or export the image to place it in a Web page • Published document is in SWF format and is called a Flash movie • When a graphic does not contain animation, it can be exported rather than published • Process of converting document into another file format, i.e., GIF, JPEG, PNG files • Combines all elements of a document into one graphic New Perspectives on Adobe Flash Professional CS6

  47. Exporting a Graphic New Perspectives on Adobe Flash Professional CS6

  48. Using the History Panel • History panel holds a record of steps performed in the current document • History is maintained until document is closed or its history is cleared • Selected steps can be saved by creating a command based on those steps. • Command can be used again in the same document or in other documents New Perspectives on Adobe Flash Professional CS6

  49. Using the History Panel • Replaying Steps • One or more selected steps in the History panel can be replayed • Create a shape • Select the steps that created the shape and replay them to create a duplicate of the shape • Formatting can also be replayed and applied to selected objects New Perspectives on Adobe Flash Professional CS6

  50. Using the History Panel New Perspectives on Adobe Flash Professional CS6

More Related