Book VI Chapter 9 Publishing Your Web Site 667 Getting Connected 10. Click the Test button to test your connection. If the connection is made successfully, Dreamweaver will let you know. If not, you may need to double-check the information you entered and try again. If you experience difficulty connecting to your remote server or the con- nection is taking unusually long, select the Use Passive FTP checkbox under the More Options section at the bottom. (You’ll need to expand this by clicking the arrow next to More Options.) Passive FTP can also be a workaround if you’re trying to connect from behind a firewall. 11. If your settings are correct, click Save to create the Server connection. 12. Click Save again to exit the Site Setup dialog box. Your Web site — live! After your connection is up and running, you’re ready to upload files and present your Web site to the world. Files can be transferred to and from your remote Web server by using the built-in FTP functionality of the Files panel. It displays files in your local directory and the remote server, and between them, you can put, get, or synchronize site files. Follow these steps to upload your Web site to a remote Web server: 1. Choose Window➪Files to open the Files panel. 2. Click the Expand to Show Local and Remote Sites icon. The panel expands so that you see both the local site and the remote site to which you want to copy (upload) the files. 3. Make sure that the correct site definition is selected in the Show drop- down list in the upper left corner of the panel. Your local files appear on the right. 4. To connect to and display files on the remote Web server, click the Connect button at the top of the panel. When the connection is made, all files (if any) are displayed on the left side of the panel. 5. To copy files, select and drag them from the local files on the right to the remote files on the left, as shown in Figure 9-6. Alternatively, select the files you want to copy on the right and click the Put button at the top of the Files panel. You can put all of the files within your site on your Web server at once by selecting the root folder at the top of the local files panel and clicking the Put button. 64_607466-bk06ch09.indd 66764_607466-bk06ch09.indd 667 5/25/10 8:58 AM5/25/10 8:58 AM 668 Getting Connected Figure 9-6: Drag and drop files from your local machine to your Web server to copy and update them. Connect Get Put Synchronize Expand 6. After you copy all files to the remote Web server, test your site by opening a browser and typing the Web site’s URL. The URL is a full address, such as www.mywebsite.com, or an IP address, such as http://192.1.1.1. If you notice broken images or files, return to Dreamweaver to double- check whether all files were copied to the server and then run the Link Checker by choosing Site➪Check Links Sitewide. To retrieve files from a remote Web server, follow these steps: 1. Select the files you want to retrieve from the remote files on the left side of the Files panel. 2. Click the Get button (which appears as a green, downward pointing arrow) at the top of the panel or drag the files to the local root folder on the right. To return the Files panel to its original position on the right side of the work- space, click the Expand button in the upper right corner of the panel to dese- lect it. The Files panel minimizes and docks back with the panel group on the right. 64_607466-bk06ch09.indd 66864_607466-bk06ch09.indd 668 5/25/10 8:58 AM5/25/10 8:58 AM Book VI Chapter 9 Publishing Your Web Site 669 Getting Connected Synchronizing your site The handy Dreamweaver site synchronization feature compares files between your local and remote sites to ensure that both are using the same, and most recent, versions of your site files. This check is essential if there’s a chance that files on the remote server may be more up-to-date or if you’re unsure which files have been updated since the last time you worked on a Web site. Follow these steps to synchronize your local and remote directories: 1. If the Files panel isn’t already visible, choose Window➪Files to open it. 2. Select the site you want to synchronize in the Show drop-down list in the upper left corner of the panel. Your local files appear on the right. 3. Click the Connect button at the top of the panel to connect to the remote server. If you’re not viewing your Files panel in Expanded view, choose Remote Server from the drop-down list at the top to display your remote files. 4. Click the Synchronize button at the top of the Files panel. The Synchronize Files dialog box appears. 5. From the Synchronize drop-down list, choose whether you want to synchronize the whole local site or only files selected in the Files panel (if any). 6. From the Direction drop-down list, choose whether you want newer files put to the remote server, retrieved from the remote sever, or both. 7. To clean up unused or old files on the remote server, select the Delete Remote Files Not on Local Drive check box. 8. Click the Preview button to begin the process. This step may take a while, depending on the number of files in your site. The Synchronize Files dialog box appears and displays all changes that will be made between the local and remote folders. 9. Select, change, or delete any actions as necessary. 10. Click OK to have Dreamweaver complete the synchronization process. Be careful when using the Delete Remote Files Not on Local Drive option; some files on the remote server are installed by the Web hosting company and are necessary for the operation of your site. 64_607466-bk06ch09.indd 66964_607466-bk06ch09.indd 669 5/25/10 8:58 AM5/25/10 8:58 AM 670 Improving Your Site Improving Your Site Remember that a site is like a living organism: It continues to grow and will still need care after it’s live. As you add to your site, find new and innova- tive ways to present information to site visitors; after all, it’s all about giving them what they came looking for. To improve your site and keep visitors coming back, try these tips: ✦ Solicit feedback from focus groups or colleagues in different fields. Let them tell you the best and worst features of your site, and then use this feedback to assist in design, layout, and content decisions. ✦ Use Web statistics to your advantage. Use these statistics, often pro- vided for free by Web hosting companies, to see where users are spend- ing the most time and where they leave your site. ✦ Provide a feedback form. Site visitors can then comment on the service and information they receive, with the opportunity to provide comments and suggestions. ✦ Always keep your content fresh. Stale information and features can deter return visits and ruin first impressions. ✦ Respond immediately to problems that surface. Don’t ignore or put off broken links, images, or misspellings. 64_607466-bk06ch09.indd 67064_607466-bk06ch09.indd 670 5/25/10 8:58 AM5/25/10 8:58 AM Book VII Flash Professional CS5 65_607466-pp07.indd 67165_607466-pp07.indd 671 5/24/10 10:35 PM5/24/10 10:35 PM www.zshareall.com Contents at a Glance Chapter 1: Getting Started in Flash CS5 . . . . . . . . . . . . . . . . . . . . . . . . .673 Chapter 2: Drawing in Flash CS5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .687 Chapter 3: Symbols and Animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . .707 Chapter 4: Creating Advanced Animation . . . . . . . . . . . . . . . . . . . . . . .729 Chapter 5: Importing Graphics and Sounds. . . . . . . . . . . . . . . . . . . . . .753 Chapter 6: Lights, Camera, Movie Clips! . . . . . . . . . . . . . . . . . . . . . . . .775 Chapter 7: Controlling Your Movie with ActionScript. . . . . . . . . . . . .787 Chapter 8: Getting Into the (Work)Flow . . . . . . . . . . . . . . . . . . . . . . . . .809 Chapter 9: Publishing and Final Delivery. . . . . . . . . . . . . . . . . . . . . . . .823 Chapter 10: Working with Flash Catalyst CS5. . . . . . . . . . . . . . . . . . . .841 65_607466-pp07.indd 67265_607466-pp07.indd 672 5/24/10 10:35 PM5/24/10 10:35 PM Chapter 1: Getting Started in Flash CS5 In This Chapter ✓ Creating, saving, and opening documents ✓ Getting familiar with the workspace and tools ✓ Creating and saving workspaces ✓ Introducing Flash Player 10 ✓ Understanding layers ✓ Importing and exporting files ✓ Understanding the publishing process W elcome to the world of Flash, one of today’s hottest applications for creating eye-catching motion graphics featuring sound, video, and visual effects. In this minibook, you explore the whole process, from basic graphics creation and animation to complex effects and user interaction. Flash can create full Web sites, complex games, and highly functional, rich Internet applications. One or more of the sites you visit each day is likely to use Flash. Creating Your First Flash Document You can start creating a new, blank Flash document and set up your work- space in one of two ways: ✦ From the start page, choose Flash File (ActionScript 3.0) under the Create New column. ✦ Choose File➪New➪Flash File (ActionScript 3.0). Your new document is created and the workspace appears. Before you get to work, specify some important settings, such as width and height, for your file by using the Document Properties dialog box. 66_607466-bk07ch01.indd 67366_607466-bk07ch01.indd 673 5/25/10 8:59 AM5/25/10 8:59 AM 674 Getting Familiar with the Workspace To open the Document Properties dialog box, choose Modify➪Document and set these options: ✦ Frame Rate: Because Flash files behave like movies, the frame rate is an important setting that affects the performance and playback speed of your movie. The default setting of 24 frames per second (fps) should work well. ✦ Dimensions: The width and height you specify determine the size of your stage and in turn, the visible area of your finished movie. For now, leave the default setting of 550 pixels wide by 400 pixels high. ✦ Background Color: Click the swatch to pick a background color for your stage from the Web-safe color palette. This setting also determines the background color of any Web pages created by Flash when you publish your movie to the Web. ✦ Ruler Units: Select from this drop-down list the unit of measurement used for all measurement values in your document, including document size, width and height values, and ruler increments when rules are vis- ible in the workspace. When you’re done fine-tuning your document’s properties, click OK. Getting Familiar with the Workspace On the Flash workspace, shown in Figure 1-1, you create your Flash movies. The most prominent item you’ll notice is at the top of your screen: The stage is where the action happens — where you draw, build, or import graphics, create text, and construct layouts. The gray area surrounding the stage is the pasteboard. Items placed on it aren’t visible in your finished movie because they’re outside the bounds of the stage. However, it helps to think of this area as backstage — where text, artwork, and images can make their entrances or exits or be placed until they’re ready to appear in your movie. The Tools panel What CS5 application would be complete without a fancy toolbar? Flash has a comprehensive set of tools for just about any drawing task you need to wrap your hands around. Table 1-1 gives you a rundown and description of the tools you’ll find. The Tools panel has been redesigned to make your work area flow more smoothly. A double arrow at the top lets you toggle between expanded and icon views to maximize your work area. 66_607466-bk07ch01.indd 67466_607466-bk07ch01.indd 674 5/25/10 8:59 AM5/25/10 8:59 AM Book VII Chapter 1 Getting Started in Flash CS5 675 Getting Familiar with the Workspace Figure 1-1: The Flash workspace. Pasteboard Timeline Stage Panels Table 1-1 The Tools Panel Button Tool Name/Keyboard Command What You Can Do with It Selection (V) Select and move objects on the stage and work area Subselection (A) Select and move specific points on a path or a shape Free Transform (Q) Change an object’s dimensions, rotation, or proportions Gradient Transform (F) Change the size, intensity, and direction of a gradient fill 3D Rotation (W) Translate 2D artwork into the 3D plane and rotate it around an x, y, and z axis (continued) 66_607466-bk07ch01.indd 67566_607466-bk07ch01.indd 675 5/25/10 8:59 AM5/25/10 8:59 AM 676 Getting Familiar with the Workspace Table 1-1 (continued) Button Tool Name/Keyboard Command What You Can Do with It 3D Translation (G) Click and drag artwork along the x, y, or z axis to illustrate depth and distance Lasso (L) Create freehand selections around one or more points Pen (P) Create accurate, point-by-point straight and curved paths Add Anchor Point (=) Add anchor points along an existing path Delete Anchor Point (-) Remove anchor points from an existing path Convert Anchor Point (C) Change the curve orientation of an exist- ing point Text (T) Create text on the stage Line (N) Draw straight lines Shape Tools (R, O) Create rectangular, oval, or multisided shapes on the stage Primitive Tools (R, O) Create rounded rectangles and multiradi- used ovals that can be modified Pencil (Y) Draw freehand paths Brush (B) Draw broad, freehand fill areas Spray Brush (B) Create a spattered, airbrush-like painting with symbols from the library 66_607466-bk07ch01.indd 67666_607466-bk07ch01.indd 676 5/25/10 8:59 AM5/25/10 8:59 AM [...]... movements to precise 45- degree increments 696 Transforming Artwork and Shapes Using the Transform panel For those times when you need to dial in exact transformation values, you can use the Transform panel (shown in Figure 2-9); choose Window➪ Transform to open it The Transform panel displays text boxes you can use to enter exact transformation values for width and height or a specific rotation angle... Gradients 701 Transforming type You can transform type just like shapes and artwork by using either the Transform tool or the Transform panel Regardless of any transformations your type undergoes, it remains editable To transform a line of type, make sure that it’s active by first selecting it using the Selection or Text tools To transform, choose the Transform tool or open the Transform panel Distorting... transformation applied If you’re not happy, don’t fret; simply click the Remove Transform button in the lower-right corner of the Transform panel to restore your normal settings Working with Type If you’re looking to display important information in your Flash movie or you simply want to add creative text elements to your design, the flexible Text tool in Flash can create attractive type for design. .. choose a location on your hard drive to save it You can save Flash work files in fla format or the new xfl file format Book VII Chapter 1 682 FLA vs XFL File Format FLA vs XFL File Format If you used previous versions of Flash, you probably noticed that Flash CS5 features a new file format: xfl Thus new, uncompressed file format results in a project folder containing a number of xml files and any original... of precision you’re looking for, you can do this in two ways: manually by using the Transform tool or by dialing in exact values on the Transform panel Using the Free Transform tool Select a shape or some artwork on your stage and then choose the Free Transform tool from the Tools panel A bounding box with handles at all four sides and corners appears, as shown in Figure 2 -8 You can drag any of the side... value higher than 0 degrees, and press Enter Rotation is performed clockwise; to rotate counterclockwise, enter a negative number Skewing your artwork Skewing transforms your artwork on a 3D plane and can add interesting perspective to shapes You can perform skewing from the Transform panel by selecting the Skew option button and entering values for horizontal and vertical skew amounts Working with Type... have direct access to assets you’ve imported into your project; for most purposes, however, the standard FLA file format is suitable, especially if Flash CS5 Professional is your sole editor for Flash applications Saving a document in an older version of Flash may make some newer features unavailable Avoid saving files in an older file format unless you absolutely need to make them available to an older... specific rotation angle in degrees Figure 2-9: Enter precise amounts of scaling, rotation, and skewing Follow these steps to transform artwork by using the Transform panel: 1 Select the object you want to transform on the stage and open the Transform panel by choosing Window➪Transform 2 To increase the size of the artwork, enter width and height percentage values higher than 100 percent; to decrease the... hidden underneath Click and hold the Rectangle tool to reveal the Oval and Polystar tools; select the shape tool you want to use Before you draw the shape, set some colors for it by using the two swatches at the bottom of the Tools panel The Fill color swatch (indicated by the 688 Drawing Shapes and Lines paint bucket icon) lets you specify a color to fill your shape The Stroke Color swatch (indicated by... which version of Flash to save the file For example, you can save files one version earlier into Flash CS4 format Getting Started in Flash CS5 Always save a document after you make significant changes or additions to it, and always save (though it isn’t necessary) a new document immediately after you create it To save a document, choose File➪Save Enter a name for the file and choose a location on your . 67064_607466-bk06ch09.indd 670 5/ 25/ 10 8 : 58 AM5/ 25/ 10 8 : 58 AM Book VII Flash Professional CS5 65_ 607466-pp07.indd 671 65_ 607466-pp07.indd 671 5/ 24/10 10: 35 PM5/24/10 10: 35 PM www.zshareall.com Contents. file. For example, you can save files one version earlier into Flash CS4 format. 66_607466-bk07ch01.indd 681 66_607466-bk07ch01.indd 681 5/ 25/ 10 8 :59 AM5/ 25/ 10 8 :59 AM 682 FLA vs. XFL File Format FLA. the Library panel for later use. 66_607466-bk07ch01.indd 684 66_607466-bk07ch01.indd 684 5/ 25/ 10 8 :59 AM5/ 25/ 10 8 :59 AM Book VII Chapter 1 Getting Started in Flash CS5 6 85 Publishing Your Movie