Foundation Flash CS5 For Designers- P4

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

131
lượt xem 36
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Foundation Flash CS5 For Designers- P4: Flash is one of the most engaging, innovative, and versatile technologies available-allowing the creation of anything from animated banners and simple cartoons to Rich Internet Applications, interactive videos, and dynamic user interfaces for web sites, kiosks, devices, or DVDs. The possibilities are endless, and now it just got better

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Foundation Flash CS5 For Designers- P4

GRAPHICS IN FLASH CS5 Figure 2-66. A traced bitmap is on the right, and the original image is on the left. If you have used previous versions of Flash, you will find the Preview button in the Trace Bitmap dialog box a welcome addition to Flash CS5. 4. Click OK to apply the change and close the dialog box. 5. Now you’ll see what happens when you use even closer tolerances. Select the image on the right of the stage, and open the Trace Bitmap dialog box. Specify these values: Color threshold: 5 Minimum area: 2 Corner threshold: Many corners Curve fit: Pixels 6. Click the Preview button. The progress bar will take a bit longer this time, and when it finishes, the difference between the original image and the vector image is not readily evident. Click OK to apply the changes. You are about to find out that there is indeed a major difference between the original bitmap and the traced image. The difference becomes evident when you optimize the image. Let’s get real clear on one aspect of tracing: Flash should be your last resort. Illustrator CS5’s Live Trace feature is far superior and more accurate. 129 www.zshareall.com
CHAPTER 2 Optimizing the drawing In Flash, optimizing a drawing means you are reducing the number of corners in a traced image and smoothing out the lines in the traced image to give you a smaller and less-precise image. Though you can optimize any drawing you have in Flash, this technique is best applied to traced images. Here’s how: 1. Change to the Selection tool, and marquee the image you traced. Select Modify ➤ Shape ➤ Optimize to open the Optimize Curves dialog box shown in Figure 2-67. This book was purchased by flashfast1@gmail.com Figure 2-67. The Optimize Curves dialog box lets you reduce the size of a traced image. 2. Drag the Smoothing slider up to the Maximum value of 100, and click OK. The process starts, and when it finishes, you will be presented with an Alert box telling you how many curves have been optimized (see Figure 2-68). The downside is the image loses a lot of its precision, and some of the curves become spiky because Flash converted all the pixelated smoothness to vectors. If you repeat the process on the second image but only move the Smoothing slider to the midpoint, the process will take a lot longer than the previous one, and the curve reduction will be minimal. This is because you essentially created a high-resolution vector image, so there are a lot more curves to check out. The bottom line here is the decision regarding using a bitmap, tracing it, and optimizing the curves is up to you. 130 www.zshareall.com
GRAPHICS IN FLASH CS5 Figure 2-68. A 26 percent curve reduction means a hefty file size reduction. JPEG files and Flash The JPG/JPEG file format is the one used for photos. As mentioned earlier, JPEG stands for Joint Photographic Experts Group and is a method of compressing an image using areas of contiguous color. The file size reductions can be significant with minimal to moderate image quality loss. This explains why this format has become a de facto imaging format for digital media. In this exercise, you are going to learn how to optimize a JPEG image in Flash. Before you do this, it is extremely important you understand that the JPEG format is lossy. This means each time a JPEG image is compressed in the JPEG format, the image quality degrades. The point here is you have to make a decision regarding JPEG images before they arrive in Flash. Will the compression be done in Photoshop or Fireworks, or will Flash handle the chores? If the answer is Flash, always set the JPG Quality slider in Photoshop or Fireworks to 100 percent to apply minimal compression. If you don’t know where the image came from or what compression was used, don’t let Flash handle the compression. 1. Open the JPGCompression.fla file in your Chapter 2 Exercise folder. When it opens, you will notice the movie contains nothing more than a single JPEG image, and the stage matches the image dimensions. In short, there is no wasted space that can skew the results of this experiment. 131 www.zshareall.com
CHAPTER 2 2. Minimize Flash, and open the Chapter 2 Exercise folder. Inside the folder is a file named JPGCompression.swf. It is the compiled version of the FLA file, and if you check its file size, you will see it comes in at about 176KB. Let’s see whether we can shed some weight from this file. 3. Return to Flash, and save the open Flash file to your Exercise folder by selecting File ➤ Save As and naming the file JPGCompression2.fla. 4. Double-click the image in the Library to open the Bitmap Properties dialog box shown in Figure 2-69. Be aware that any changes made in this dialog box ripple through the entire movie and will override the defaults used in the Publish dialog box. Figure 2-69. The Bitmap Properties dialog box Let’s examine this dialog box. To start, the image on the left side is the preview image. As you start playing with some of the settings, this image will show you the final result of your choices. This is a good thing because changes you make in this dialog box are visible only when the SWF file is running; they won’t be reflected in the image on the stage. The other areas are as follows: Name: This is the name of the file. If you want to rename the file, select it and enter a new name. This only changes the name by which Flash knows the file—it does not “reach outside of Flash” and rename the original image. Path, date, dimensions: These are fairly self-explanatory. There will be the odd occasion where this information will not be displayed. The reason is the image was pasted in from the Clipboard. 132 www.zshareall.com
GRAPHICS IN FLASH CS5 Update button: If you have edited the image without using the Edit with feature, clicking this button will replace the image with the new version. This button will not work if you have saved or moved the original image to a new location on the computer. To “reconnect” such a broken link, respecify the image file’s location with the Import button, explained next. Import button: Click this, and you open the Import Bitmap dialog box. When using this button, the new file will replace the image in the Library, and all instances of that image in your movie will also be updated. Allow smoothing option: Think of this as anti-aliasing applied to an image. This feature tends to blur an image, so use it judiciously. Where it really shines is when it is applied to low-resolution images because it reduces the dreaded jaggies. Compression drop-down menu: This allows you to change the image compression to either Photo (JPEG) or Lossless (PNG/GIF). Use Photo (JPEG) for photographs and Lossless (PNG/GIF) for images with simple shapes and few colors, such as line art or logos. To help you wrap your mind around this, the image in the dialog box uses Photo (JPEG) compression, and if you click the Test button, the file size is about 2.4KB. Apply Lossless compression and click the Test button, and the file size rockets up to 142KB. Use Imported JPEG data option: Select this check box if the image has already been compressed or if you aren’t sure whether compression has been applied. Selecting this avoids the nasty results of applying double compression to an image. Quality option: If you deselect the Use Imported JPEG data check box, you can apply your own compression settings. In fact, let’s try it. 5. Make sure your compression setting is Photo (JPEG) and that you have deselected the Use Imported JPEG Data check box. Change the Quality value to 10 percent, and click the Test button. The image in the preview area, shown in Figure 2-70, is just plain awful. The good news is the file size, at the bottom of the dialog box, is 4.6 KB. Figure 2-70. At 10 percent quality, the image is terrible. 133 www.zshareall.com
CHAPTER 2 6. Change the Quality setting to 40 percent, and click the Test button. Things are a little better, but the text in the banner a bit looks pixelated, and the file size has gone up to 16KB. 7. Change the Quality value to the normal 80 percent value used by imaging applications, and click the Test button. The text issue is resolved, but the file size has risen to 43.1KB. As you are seeing, there is an intimate relationship between the Quality setting and file size. 8. Knowing the quality between 50 percent and 80 percent is a vast improvement; let’s see if we can maintain quality but reduce the file size. Set the Quality value to 65 percent, and click the Test button. The difference between 65 percent and 80 percent is minimal, but the file size has reduced to 3KB. Click OK to apply this setting and close the dialog box. 9. Save the movie, and press Ctrl+Enter (Windows) or Cmd+Return (Mac) to test the movie. This will create the SWF you need. Minimize Flash and the SWF window, and navigate to your Exercise folder. The results are, to say the least, dramatic. The file size, as you see in Figure 2- 71, has reduced to 29KB from 176KB. Save and close the open movie. Figure 2-71. Applying compression in Flash can result in seriously smaller and more efficient SWF files. Using GIF files in Flash CS5 There was point a few years back where many web and Flash designers were preparing to celebrate the death of the GIF image and the GIF animation. The reason was simple: in a universe where bandwidth is plentiful and every computer on the planet is able to display 16-bit color, the limited color range and small file size of a GIF image that made the format so important were irrelevant. GIF images were developed for a time of limited color depth—monitors that could only display 256 colors—and dial-up modems. Then a funny thing happened on the way to the wake; they arose from their deathbed. The reason was banner advertising. Ad agencies and their clients were discovering the Web really was a viable advertising medium and that Flash was a great interactive tool for ads. The problem was, standards for banner advertising appeared on the scene, and the agencies discovered they were handed a file size limit of 30KB. This tended to go against the grain, and as they grappled with the requirement for small files, they rediscovered the GIF image and the GIF animation. This isn’t to say you should use the GIF format only in banner ads. It can be used in quite a few situations where size, or even transparency for that matter, is a prime consideration. 134 www.zshareall.com
GRAPHICS IN FLASH CS5 Working with GIF images Here’s how to use GIF images and GIF animations in Flash: 1. Open the GIF.fla file in your Chapter 2 Exercise folder. When the file opens, open the Library. There are two GIF files in the Library. 2. Drag the Figurines image from the Library to the stage. Notice how you can see the stage color behind the image. This image is a transparent GIF. When it comes to GIF transparency, you have to understand it is an absolute. It is either on or off. There are no shades of opacity with this format. GIFs may contain up to 256 colors, and one of those colors may be transparent. 3. Drag the FigurinesNoTrans file to the stage, and place it under the image already there. This image is a GIF image with no transparency applied. 4. Select the image you just dragged onto the stage, and press the Ctrl+B (Windows) or Cmd+B (Mac) combination to break the image apart. Hold on, that isn’t right. Only the figurines in the image break apart (see Figure 2-72). That is an expected behavior. Remember what we said in the previous step? The background in a GIF image is either on or off. If it is on, it can’t be removed in Flash. When you break apart an image like this, here’s what’s really going on. That image is simply translated into a shape with a bitmap fill. It is the same thing as drawing a shape and filling it with that bitmap. This is why file size is identical between the white and transparent versions of this image. The GIF is the same in all respects—except that the color slot in one file’s color table is white and in the other file the color table is transparent. But both GIFs have the same number of colors and weigh the same. 5. To “get rid of” the white background, you can drag in the edges of the shape that contains the white version, just like the star shape from the earlier bitmap fill example. Obviously, this would be nearly impossible by hand with an image of this complexity, but any portion of the bitmap fill can be hidden by changing the shape hat contains it. 6. Close the file, and don’t save the changes. 135 www.zshareall.com
CHAPTER 2 Figure 2-72. Transparent and regular GIFs are treated differently in Flash. Working with GIF animations Animated GIFs are a bit different. They are a collection of static images—think of a flip book—that play, one after the other, at a set rate, all stored inside a single GIF file. These flip book “pages” can be imported either directly into the main timeline (not a good idea) or into a separate movie clip. Here’s how: 1. Open a new Flash document, and create a new movie clip named Counterforce. The Symbol Editor will open. 2. Select File ➤ Import ➤ Import to Stage, and when the Open dialog appears, locate the Counterforce.gif file, select it, and click the Open button. 136 www.zshareall.com
GRAPHICS IN FLASH CS5 3. When the import is finished, you will see that each frame of the animation has its own Flash frame, and each image in the animation, as shown in Figure 2-73, has its own image in the Library. 4. Press the Enter key to test the animation or click the Scene 1 link to return to the main timeline, add the movie clip to the stage, and test the movie. A good habit to develop is to place the images in the Library in a folder. This way, your Library doesn’t end up looking like what your mom would call “a pigsty.” Figure 2-73. Importing GIF animations into a movie clip Importing Fireworks CS5 documents into Flash CS5 When Macromedia was acquired by Adobe in 2006, the betting in the Macromedia community was that Fireworks, Macromedia’s web imaging application, would simply not make the cut. The reason was the market regarded Fireworks as a competitor to Photoshop—it wasn’t—and, as such, the application was doomed to extinction. What the Macromedia community failed to comprehend was that Adobe, prior to the acquisition, had quietly announced it was no longer supporting ImageReady, which was the web imaging application for Photoshop. When the acquisition was settled, Fireworks did indeed make the cut, and in fact Adobe had decided to reposition Fireworks as a rapid prototyping application for web designers. Along the way, Adobe improved how Fireworks PNG files integrate with Flash CS5 along with Illustrator CS5, Flex Builder 2, and Photoshop CS5, and the movement of files from Photoshop and Illustrator into Fireworks. The end result is Flash designers now have a tool that will seriously improve their workflow. We will be showing you elsewhere in this book techniques in which Fireworks integration will be a huge timesaver. For now, though, let’s concentrate on getting a PNG image—the native file format used by Fireworks—into Flash. 137 www.zshareall.com
CHAPTER 2 As you can see in Figure 2-74, the Fireworks file we will be working with is composed of one layer, Background, and three sublayers. When you import this PNG image into Flash, you will see these layers move, intact, into the movie. Figure 2-74. We start with a Fireworks CS5 PNG image. To import the PNG image, follow these steps: 1. Open a new Flash document. When the New Document dialog box opens, click the Templates button, select Advertising from the Category list, and select 728 x 90 Leaderboard from the Template list, as shown in Figure 2-75. Click OK to open the template. Figure 2-75. Opening a Flash CS5 template 2. Select File ➤ Import to Library, and navigate to the Banner.png image in the Chapter 2 Exercise folder. 138 www.zshareall.com
GRAPHICS IN FLASH CS5 3. When you click the Open button, the dialog box will close, and the Fireworks PNG Import Settings dialog box, shown in Figure 2-76, will open. Figure 2-76. The Fireworks import dialog box Let’s review the options: Import: The important aspect of this is not the scene but the fact you are being asked to import pages. This feature was first introduced to Flash CS3. Because it is a rapid prototyping application, Fireworks CS5 is able to create multipage documents for websites. If the PNG file contains multiple pages, you can select the page to be imported from the drop- down menu. Into: Select Current frame as movie clip so all the layers in the Fireworks image are placed into separate layers in the movie clip. When this occurs, Flash creates a new folder in the Library named Fireworks Objects and places the movie clip in this folder. The second choice allows you to add the selected page as a new layer on the main timeline. Objects: The choices are to flatten everything on the Fireworks layer or keep each object editable. Text: This has the same choices as objects. We tend to keep text editable just in case there is a typo. Import as a single flattened bitmap: This option flattens all the layers into a bitmap. 4. Go with the default values for this example. Click OK to import the image into Flash. 139 www.zshareall.com
CHAPTER 2 5. When the import finishes, you will see the Fireworks Objects folder in the Library. Open it, and you will see that Flash has created a folder for the page just imported, and if you open that folder, you will see the movie clip and a flattened bitmap of the file. 6. Double-click the movie clip to open it. Compare the Flash file (shown in Figure 2-77) to the Fireworks file in Figure 2-74. You can now either save the file or close it without saving the changes. This book was purchased by flashfast1@gmail.com Figure 2-77. The Flash movie clip layers match those in the Fireworks PNG image. Importing Illustrator CS5 documents into Flash CS5 Flash lets you import Illustrator AI files directly into Flash and generally allows you to edit each piece of the artwork when it is in Flash. The Illustrator file importer also provides you with a great degree of control in determining how your Illustrator artwork is imported into Flash. For example, you can now specify which layers and paths in the Illustrator document will be imported into Flash and even have the Illustrator file be converted to a Flash movie clip. The Flash Illustrator file importer provides the following key features: Preserves editability of the most commonly used Illustrator effects such as the Flash filters and blend modes that Flash and Illustrator have in common. Preserves the fidelity and editability of gradient fills. Imports Illustrator symbols as Flash symbols. Preserves the number and position of Bezier control points; the fidelity of clip masks, pattern strokes, and fills; and object transparency. Provides an improved copy-and-paste workflow between Illustrator and Flash. A copy-and-paste dialog box provides settings to apply to AI files being pasted onto the Flash stage. 140 www.zshareall.com
GRAPHICS IN FLASH CS5 To many Flash designers, that list is “nirvana,” but there are two critical aspects of the Flash-to-Illustrator workflow that must be kept in mind: Flash supports only the RGB color space. If the Illustrator image is a CMYK image, do the CMYK- to-RGB conversion in Illustrator before importing the file into Flash. To preserve drop shadow, inner glow, outer glow, and Gaussian blur in Flash CS5, import the object to which these filters are applied as a Flash movie clip. In Flash, these filters can be applied only to movie clips. Let’s import an Illustrator CS5 drawing to see what is causing all of the joy. The file we will be using, Mascot.ai, contains a number of Illustrator layers and paths (see Figure 2-78). One path—in the Head layer—contains a drop shadow. Figure 2-78. The Illustrator CS5 file for this example contains a number of layers and paths. The authors would like to thank Mischa Plocek for the use of the Mascot.ai file. Mischa is a flash developer/artist based in Zurich, Switzerland, and his work can be seen at www.styleterrorist.com . Follow these steps to import an Illustrator CS5 document into Flash CS5: 141 www.zshareall.com
CHAPTER 2 1. Open a new Flash document, and import the Mascot.ai file into the Flash Library. The Import dialog box, shown in Figure 2-79, will appear. Keep in mind the Head layer contains a Drop Shadow filter, and as you can see, Flash will import that layer as a movie clip in order to retain the drop shadow. Figure 2-79. The Import dialog box used for an Illustrator CS5 image If you select File ➤ Import to Stage, the Import dialog box will contain a couple of choices not shown here. You will be asked whether you want the images in each layer to be placed at their original position in the Illustrator document, and you will also be asked whether you want to trim the stage to the dimensions of the Illustrator document. 142 www.zshareall.com
GRAPHICS IN FLASH CS5 2. Select the remaining layers, not the paths, and select Create movie clip, as shown in Figure 2-80. Don’t bother with instance names because there is no need for ActionScript here. The Convert layers to drop-down menu allows you to convert your Illustrator layers to Flash layers or to a series of Flash keyframes (this is handy if they are animated) or allows you to put the whole image into one Flash layer. You are also given the opportunity to import unused symbols created in Illustrator or to flatten the image and bring it in as a bitmap. Figure 2-80. Illustrator layers can be converted to movie clips. The Import unused symbols option may be a bit confusing. Illustrator allows you to create symbols, and these symbols can be imported directly into Flash from Illustrator. We will show how this works in the next chapter. 3. Click OK, and when the import process finishes, open the Library, as shown in Figure 2-81. The image has been directly imported to the stage, but each of the layers has its own folder containing the movie clip you created in the Import dialog box. 143 www.zshareall.com
CHAPTER 2 Figure 2-81. The Illustrator image in the Flash Library. Note the drop shadow on the star. At the top of this section, we mentioned how developers would simply copy Illustrator documents and paste them into Flash to avoid “issues.” This can still be done, but when you paste the drawing into Flash CS5, the dialog box shown in Figure 2-82 appears. This dialog box is fairly self-explanatory, though you may be wondering about the Paste using AI File Importer preferences choice. Figure 2-82. Pasting a drawing from Illustrator to Flash will open this dialog box. 144 www.zshareall.com
GRAPHICS IN FLASH CS5 You can get to the preferences by selecting Edit ➤ Preferences (Windows) or Flash ➤ Preferences (Mac). When the Preferences dialog box opens, click the AI File Importer selection at the bottom of the Category list. This will open the AI File Importer preferences, as shown in Figure 2-83. As you can see, many of the choices are also available in the Import dialog box. Figure 2-83. The AI File Importer preferences You are most likely looking at the Mascot image in the Library and thinking, “That’s all well and good, but how do I get the dang document onto the Flash stage and play with it?” Here’s how: 1. Drag the Mascot.ai file from the Library to the Flash stage. 2. Double-click the image on the stage. When the Symbol Editor opens, you will see the image is actually composed of the movie clips in the Mascot.ai.Assets folder from the Library and that each movie clip is on a separate named layer. 145 www.zshareall.com
CHAPTER 2 Importing Photoshop CS5 documents into Flash CS5 We’ll wind up this overview of Flash’s drawing features with the import of Photoshop CS5 images into Flash. As you saw with Illustrator CS5, the process has been streamlined, and you are in for a rather pleasant surprise. Follow these steps to import a Photoshop document into Flash: 1. Open a new Flash document. When the document opens, select File ➤ Import ➤ Import to Stage, and navigate to the IglooVillage.psd document. Click Open to launch the PSD File Importer, shown in Figure 2-84. Figure 2-84. The PSD file importer The dialog box looks similar to its Illustrator counterpart. Still, there are a couple of major differences. The inclusion of a Place layers at original position check box option ensures the contents of the PSD file retain the exact position that they had in Photoshop. For example, if an object was positioned at X = 100, Y = 35 in Photoshop, it will be placed at those coordinates on the Flash stage. If this option is not selected, the imported Photoshop layers are centered on the stage. The other check box option, Set stage to same size as Photoshop canvas, is a real godsend. In the case of this image, the canvas size is not the default Flash size—500 by 400—but 468 by 146. When the file imports, the Flash stage will be resized to the dimensions of the Photoshop document. 146 www.zshareall.com
GRAPHICS IN FLASH CS5 The manner in which PSD files are imported into Flash is set in the Preferences. You can reach them by selecting Edit ➤ Preferences (Windows) or Flash ➤ Preferences (Mac) and selecting PSD File Importer in the Category listing. 2. Hold down the Shift key, and click the first two layers to select them. The Merge Layers button lights up. This means you can combine the selected layers into one layer. This works for selected adjacent layers only. Deselect the layers. 3. Select the check box beside the first layer. What you have just done is to tell Flash to ignore importing that layer. Reselect the check box. 4. Click the name of the first layer. The import options, as shown in Figure 2-85, appear on the right side of the dialog box. The first thing you should notice is the Importer has figured out you clicked a text layer. You have three choices as to how the text will be handled, and if you want, you can put the selection in its own movie clip. Select the Editable text import option. If the text in the PSD file is PostScript or TrueType, always select Editable text. If you select the other two options, typos move, cemented, into Flash. Figure 2-85. The text import options 147 www.zshareall.com
CHAPTER 2 5. With the layer still selected, select the Create movie clip for this layer check box option, and enter Headline as the instance name. Notice the placement of a movie clip icon on the layer strip. 6. Click the BackgroundImage layer. Pay attention to how, as shown in Figure 2-86, the import options change to reflect the selection of a bitmap. You can choose to put the layer in a movie clip—Bitmap image with editable layer styles—or import a flattened bitmap image. It makes sense with this image to choose the first option to maintain the layer transparency. Figure 2-86. The text import options for a bitmap image Hold on, does this mean you have to repeat this step with the remaining five layers? No. Shift-click each layer to select all of them, and click the first option. A movie clip icon, as shown in Figure 2-87, will appear beside each layer. Figure 2-87. How to import a series of bitmap layers as movie clips 148 www.zshareall.com