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• 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 2


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


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


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


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


Reviewing Types of Web Media


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


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


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


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


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


Starting Flash


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



• 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



– 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





• Tools Panel– Provides tools to create graphics and animations in a Flash

document











• 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





• 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




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


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


Changing the View of the Stage


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






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




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


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


Working with Objects in Flash


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


Working with Objects in Flash


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


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


Selecting Objects


Selecting Objects


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


Selecting Objects


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


Exporting a Graphic


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


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


Using the History Panel




Using the History Panel• Undoing Steps– Can undo one step or as many as 100 steps– Backtracks through a series of steps until documents

returns to the desired state– Document-level undo• Steps undone affect the entire document

– Object-level undo• Can undo steps performed on individual objects

without affecting other objects– Slider in History panel points to last step performed




Getting Help in Flash• Flash Help displays in two-panel window and is organized

topically– Left column contains list of available categories and a

search feature– Right column displays the Help content of the selected

topic


Closing a Document and Exiting Flash

• Save and close a document when work is finished• Flash will display a save prompt if document is not already

saved

Date post:	24-Feb-2016
Category:	Documents
Upload:	atira
View:	52 times
Download:	0 times