Chapter 3: Introduction to the Flash Workspace

Transcription

1 Chapter 3: Introduction to the Fash Workspace Page 1 of 10 Chapter 3: Introduction to the Fash Workspace In This Chapter Features and Functionaity of the Timeine Features and Functionaity of the Stage Features and Functionaity of the Toobox Changing Your View Viewing the Defaut Layout Panes Using the Launcher Bar Before you can begin to use any appication, you need to understand the appication s workspace area. Fash is no different. If you are famiiar with the Fash 4 or any earier version of Fash, the Fash 5 version has a new ook and fee to the workspace. It now is very simiar in its interface to other Macromedia products, such as Dreamweaver and Fireworks. If you haven t yet, aunch Fash 5 so you can begin to expore this new workspace. Components of the Fash Workspace Before you can begin to use Fash to create graphics and animation, you need to understand your workspace in Fash. When you first aunch Fash, it opens into a new bank document. The Fash workspace is divided into various features with their own functionaity. The workspace is comprised of these six major areas: Timeine, Stage, work area, ayers, panes, and the toobox (see Figure 3.1). Figure 3.1 The Fash workspace might ook famiiar to you in some aspects and dauntingy different in others. As you progress through this chapter, you wi become comfortabe with this workspace. The Stage is the area on which you position a the content of your movie. The work area aows you extra space for organizing graphics and images that you want to incude in a movie but might not be ready for yet on the Stage. The panes are a new feature of Fash 5 and aow you easy access to the customization and editing features of the Fash toos and menu commands. The Timeine contros your animation and heps organize your Stage content. A the toos you need to create graphics are ocated on the toobox. These features comprise the Fash workspace. Exporing the Features of the Timeine The Fash Timeine contros the fow, interactivity, and organization of the movie. The Timeine contains a the ayers that are used in the movie, as we as a the frames and scenes used in the movie (see Figure 3.2). You can compare the Timeine to a caendar. A scene can be compared to a month and a frame or keyframe can be compared to a day. With a caendar, if you want to see what is

2 Chapter 3: Introduction to the Fash Workspace Page 2 of 10 happening on a certain day in a certain month, ocate that day within the month. Same with the Timeine, if you want to see what is happening in a certain frame or keyframe in a certain scene of the movie, you woud cick that frame within the scene. The payback head advances to that frame and the contents of the frame dispay on the Stage. You wi use this technique a ot as you deveop your movie. Figure 3.2 Each frame or keyframe presents a movie s content in the order that they need to be to create the effect of animation. Note - When a new Fash document is opened, the Timeine appears with ony one frame occupied and it contains a bank keyframe. The remainder of the frames in the Timeine are actuay photoframes, segmented in groups of five. A photoframe is a bank hoding space for you to create your frames and keyframes. Timeine Features This anaogy of comparing the Timeine to a caendar is very simpe when truy compared to the functionaity of the Timeine. A coser ook at the Timeine reveas many other features and the functionaity of the Timeine, such as ayers (see Figure 3.3). Figure 3.3 Layers offer you the fexibiity that you need to work on a compex animation or image. You can use the Show/Hide feature to dispay ony the ayer that you want to work on, as we as ock other ayers so they cannot be worked on. Layers Layers are a fundamenta buiding bock for your movie. They hep you organize your images as we as organize your animation. You can create as many ayers as you want to hep you keep track of your images and the animation. Cick the Insert Layer button to add a new ayer and cick the Deete Layer button to deete a ayer. Simiar to Adobe Photoshop, you can aso hide and ock ayers, which enabes you to focus on one ayer s contents and not disturb any other ayer s content. You can aso show a ayer and its contents in outine format, which can be usefu for troubeshooting animation. Editing Features There are other features and buttons avaiabe on the Timeine (see Figure 3.4). These are the Onion Skin buttons, the Edit Scene button, and the Edit Symbos button. The onion-skinning feature is comprised of three buttons ocated on the bottom of the Timeine window. These features aow for the Stage contents to be converted into an outine view or dimmed view. You wi find this feature exceent for fine-tuning animation or for tracing images. As you can see, the Timeine is essentia for animation and has many features and the functionaity for creating and troubeshooting animation. Figure 3.4 Additiona buttons are avaiabe on the Timeine that can hep you design and troubeshoot your

3 Chapter 3: Introduction to the Fash Workspace Page 3 of 10 images and animations. Use the Edit Symbos to quicky ocate and edit a symbo or the Edit Scene button to quicky switch to another scene in your movie. Resizing the Timeine You can resize the Timeine to aow for more or ess viewing area of your Stage or to view a ayers in your Timeine. The defaut size is spaced to show four ayers, but you wi find that your movies wi consist of many more ayers than just four. So, you need to be abe to resize your Timeine to view these features. To do this, just grab the ower Timeine window border and drag up or down to resize the window (see Figure 3.5). Figure 3.5 Your cursor changes to a doube arrow resize too when you position it on the Timeine window s ower border. Hiding the Timeine There might be times when you want to hide the Timeine so you can see your Stage in a fu view. This can be accompished through the menu command View, Timeine. After you hide the Timeine, you can dispay it again by choosing the menu command again. This command is a togge switch that wi togge the Timeine between hidden and dispayed. Examining the Stage Thinking back to the caendar anaogy of the Timeine, you can think of the Stage as a day-timer schedue for a seected date. A day-timer schedue contains a activities for a date just as the Stage presents a content for the active frame. Stage Area Anything that you pace on the Stage appears in your movie. If you position something haf on the Stage and haf in the work area, ony the part of the image that is on the Stage appears in your movie. This aows for many specia effects with animation. If you want something to appear to fy into a movie, position the image in the work area first and then create the animation to carry it onto the Stage. This creates the iusion of the image fying into the movie. Work Area The Fash work area is simiar to the work area of other graphic packages. It can be compared to your desktop area. When you are working on a particuar document, you have a this extra desktop space surrounding the document. This extra space aows you to keep on hand any additiona toos, papers, or notes that you might need to compete your main document. The Fash work area can be compared to extra desktop space. You can use this to store other images or graphics that you might want to use in a movie but do not need yet on the Stage. Tip - You can turn the work area on and off through the View, Work Area menu command.

4 Chapter 3: Introduction to the Fash Workspace Page 4 of 10 Examining Movie Properties Every movie has its own set of properties that determine the size and appearance of the Stage, as we as many parameters of the movie. Choose Modify, Movie to dispay the Movie Properties diaog box (see Figure 3.6). Tip - You can doube-cick the Timeine s Frame Properties setting of fps (frames per second) at the bottom of the Timeine to dispay the Movie Properties diaog box. Figure 3.6 You can set the Frame Rate in the Movie Properties diaog box by inputting a number for the fps (frame per second) setting. Tweve fifteen fps is a good setting for Web deivery of animation, but you might want to set this higher for offine deivery of a movie. Note - Cicking the Match Printer button sets the movie size to the maximum print area based on your settings in the Page Setup diaog box. Cicking the Match Content button sets the movie size to the minimum Stage area required to dispay your movie's contents. Sizing Your Stage You wi create a trave company Web site as you progress through this book. This Web site represents a fictitious company caed Whirwind Adventure Trave. To begin this project, you need to set your Stage dimensions for dispaying the home page in the user's browser. A common size for Web pages that can be viewed easiy on an 800x600 resoution screen dispay is 650x500 pixes. This size aows most visitors to easiy view your Web site pages within their browser's window without having to scro to see any of the contents on the page. In the Dimensions setting area, set the screen dimensions of 650x500px by cicking in the Width box and entering 650px. Then cick in the Height box and enter 500px. This wi set your movie's dimensions. Do not cose the Movie Properties diaog box yet because we need to set the background coor, which wi be covered next. Note - The defaut unit setting for the Dimensions Width and Height input box is px, which is short for pixe. You can type in a number without px foowing the number and Fash wi automaticay assume you mean pixe and add this unit to your number entry. Background Coor You can use the Movie Properties diaog box to set your background coor for the Whirwind Adventure Trave movie to be dispayed throughout this Web site. To dispay the coor paette from which you can choose a new background coor, foow these steps:

5 Chapter 3: Introduction to the Fash Workspace Page 5 of Dispay the Movie Properties diaog box by doube-cicking the fps button on the Timeine. 2. Cick the Background Coor icon and move your mouse into the paette. Notice that it is now a dropper too. 3. Cick the third yeow coor from the bottom on the far right coumn, Hexidecima number FFFF99 (see Figure 3.7). Your Background Coor icon wi change to the ight yeow coor that you seected in the Background Coor paette. 4. Cick OK to cose the Movie Properties diaog box. Your Stage background is now the ight yeow coor that you seected. Figure 3.7 The background coor paette contains the 216 Web-safe coors. Setting Frame Rate You can aso set the frame rate for your Whirwind Adventure Trave movie in the Movie Properties diaog box. The Fash defaut setting is 12 fps (frames per second). This is the standard rate for viewing a movie on the Web by the average browser and average connection speed. You can go up to higher frame rates, but you are counting on your viewing audience having fast-processing computers and fast connections to the Internet. Typicay 12 to 15 fps is common for Web deivery of movies. Increase this setting to 12 by cicking the fps box and typing 12. Cick OK to cose the Movie Properties diaog box. Saving Your Movie Before you go any further, you need to save your movie. It is recommended that you set up a specia foder to save a the fies that you create for the Web site. Set up this foder on your oca drive in the ocation that you fee is appropriate. Cick the Fie, Save menu command and name your movie whirwind. Cick OK when you are ready to save the movie. Overview of the Toobox The toobox is where you wi find a the toos you need to create images and graphics, as we as manipuate your Stage view. It has been redesigned in the Fash 5 version. The toobox is now more consistent in its presentation of toos and too options (see Figure 3.8). This new ayout of toos, views, and options of the toobox is consistent with other Macromedia products and their toobox features. Figure 3.8 When Fash is aunched, the toobox dispays foating in the appication window. You can quicky access any of the toos by cicking them. The toobox contains the toobar, which is very simiar to other graphic package s toobars. You wi find that many of the toos in the toobar function ike many of the toos that you have used in other graphics packages. New with Fash 5 is the Pen too, which is a Bézier drawing too. You aso have a

6 Chapter 3: Introduction to the Fash Workspace Page 6 of 10 new Subseect too. Each too has its own set of option settings that aow you to change or ater a feature of the too. When you seect a too, the option area dispays option settings under Coors or Options for that too. You can aso ater the view of the Stage through the View settings. View the Toobox By defaut, the toobox dispays when Fash is aunched. But this toobox can be cosed and opened through a menu command. You woud cose the toobox so that you have a fu view of your Stage. Use the menu command of Window, Toos to dispay or hide the toobox. Tip - You can aso cose the toobox by cicking the cose button on the Toobox tite bar. Note - You can dock and undock the toobox on a PC machine. Typica of docking any toobar, if the toobox is foating, seect it by cicking on any part of the toobox that is not a too and drag it to the right or eft edge of the Fash appication window. The toobox wi dock itsef in that ocation, becoming a toobar. You cannot dock the toobox on the top or bottom of the Fash appication window. If you want to undock the Fash toobar, again cick any part of the toobar that is not a too and drag it away from the edge of the Fash appication window. It wi become a foating toobox. Note - A toobox on the Macintosh is aways foating. It can be moved to any ocation in the Fash appication window by cicking on the tite bar or the very edge of the toobox, and dragging it to a new ocation. Toos and Options As discussed, the toobox is comprised of a toobar and various options. See Figure 3.9 for a isting of a toos avaiabe in the toobox. You can seect a too from the toobar or view area of the toobox by cicking it. Cick each too and notice that the Coors and Options areas change to refect specific features that are avaiabe for the active too. Figure 3.9 The toobar contains a the toos you wi need to create vector images and graphics. You wi aso use these toos, in conjunction with menu commands and panes, and other options when you convert bitmapped images into vector graphics. Note - Another very nice feature that Fash offers (especiay to peope new to Fash) is TooTips for a toos and options of each too. Position your mouse over the Text too but do not cick. A TooTip dispays with the too name (see Figure 3.10).

7 Chapter 3: Introduction to the Fash Workspace Page 7 of 10 Figure 3.10 TooTips quicky identify a too or option feature. This is a wonderfu feature for those new to Fash. Accessing Toos Through Keyboard Commands Fash provides a keyboard shortcut for quicky seecting toos from the toobox. You might have noticed that when you dispay a TooTip, at the end of the TooTip abe is a etter in parentheses. This is the keyboard shortcut or hotkey for quicky accessing a too. Press the assigned hotkey and you wi activate the too in the toobox. This way your hands do not need to eave the keyboard. The foowing tabe ists a toos and their assigned hotkeys. Tabe 3.1 Hotkeys Too Hotkey Arrow too V Subseect too A Lasso too L Line too N Pen too P Text too T Ova too O Rectange too R Penci too Y Brush too B Ink Botte too S Paint Bucket K too Dropper too I Eraser too E Hand too H Zoom too M, Z Tip - You can activate the Hand too at any time, by pressing the spacebar. Your mouse wi change to the Hand too. Let go of the spacebar and the Hand too disappears. Using the Zoom Feature

8 Chapter 3: Introduction to the Fash Workspace Page 8 of 10 There are various techniques for changing the view of objects on your Stage. You wi find that these techniques are very usefu when you need to reay fine-tune an image or graphic. You can zoom in on the entire shape or just a part of it. With this increased magnification, you can edit the image with precision. You can aso zoom out from your Stage to view the entire Stage and a items on it. Zooming In on the Stage Use your zoom contro in the ower-eft corner of the Fash appication window to change your magnification view of the Stage. To view your Stage at a 100% magnification, you can cick the arrow on the zoom contro and cick 100% from the menu ist (see Figure 3.11). To have your Stage fit within your monitor dispay, cick the arrow on the zoom contro and cick Show Frame from the menu ist. Your Stage wi be proportioned to dispay fuy on your monitor screen. Figure 3.11 The zoom contro option aows you to zoom in or out on your Stage. Tip - You can change views by using menu commands. Choose View, Magnification, 100% menu command to change to a 100% magnification view of your Stage or choose View, Magnification, Show Frame to dispay your Stage fuy on your screen. Tip - You can aso enter a number in the zoom contro box to access any magnification at which you want your Stage to dispay. This provides the fexibiity you need to attain any magnification view. Tip - Use (Cmd-3) on a Mac or [Ctr+3] on a PC to quicky dispay your movie so it fits to your monitor size. Tip - If you seect your Hand too, you can cick and drag on your Stage area to move to a new ocation or view of the Stage. Zooming In and Out on an Object By using your Zoom too, you can zoom in on an object on your Stage or work area. Seect the Zoom too and, when you move your mouse within the Stage area, notice that your mouse cursor has changed to a magnifying gass icon with a pus sign in the midde of it. Move your cursor over the object on your Stage where you want to zoom in and cick your mouse button. You wi doube your magnification view of the object. If you want to zoom in more, cick your mouse again on the object.

9 Chapter 3: Introduction to the Fash Workspace Page 9 of 10 Repeat this process unti you have the magnification you want. Just as you earn how to zoom in on an object, you can aso zoom out in magnification view. Seect the Zoom too and move your mouse onto the Stage. Then hod down your (Option) key on a Mac or your [At] key on a PC. Notice that your magnifying gass icon representing the Zoom too changes to a magnifying gass with a minus sign in the midde of it. Cick on the Stage area or on the object that you want to zoom out of and you wi decrease your magnification by doube its present setting. Tip - You can designate a certain area that you want to zoom in or out of by seecting the Zoom too and setting the zoom out or zoom in setting by using the minus or pus sign. Then cick and drag a seection rectange or marquee around the area that you want to view in a different magnification. Panes A new feature of Fash 5 is the use of panes for commony used Fash features. When you first aunch Fash 5, you wi see four panes that are set as the defaut ayout panes (see Figure 3.12). These panes are free foating and can be rearranged anywhere on your screen. You can aso cose them by cicking the cose button on the pane tite bar. Figure 3.12 If you cick the associated pane icon from the Launch Bar, you wi cose that defaut ayout pane. Launcher Bar A new feature of Fash 5 is the Launcher Bar. You wi find this bar in the ower-right corner of your Fash appication window (see Figure 3.13). This bar aows you to aunch panes and features that are frequenty used in Fash. This feature aso makes Fash as consistent in its operation as that of other Macromedia products that have this same feature. You can activate any of the Launcher Bar features by cicking the appropriate icon. After the icon is cicked, you wi aunch a pane. Cick the icon again to hide the dispayed pane. The Launcher Bar icons are togge switches. Figure 3.13 You can quicky access commony used commands and panes with the Launcher Bar. Where You ve Been! This chapter covered the Fash workspace. You have been introduced to the Timeine, ayers, panes, the Stage, your work area, and the toobox. You ve earned how to set your movie s properties for the Whirwind Adventure Trave Web site. You have aso earned how to increase or decrease your view of the Stage and items on the Stage. You shoud now fee more comfortabe with the Fash workspace and have started your project. You shoud have a Fash fie saved on your oca hard drive caed whirwind.fa.

10 Chapter 3: Introduction to the Fash Workspace Page 10 of 10 What s Next? In the next chapter, you wi begin to pan your Whirwind Adventure Trave Web site. You wi create a storyboard for the fow of the site, as we as identify the architecture and ayout of the site. You wi ocate a graphics and images that wi be used. Upon competion of the next chapter, you wi have a pan and structure to foow for buiding the Whirwind Adventure Trave Web site! Copyright Macmian USA. A rights reserved.