OPTIMIZING AND PUBLISHING FLASH MOVIES 779 Figure 15-14. We start by drawing a shape containing a lot of vector points. 3. Copy your shape to the clipboard. Select each of the remaining three key frames in layer 1, and select Edit ➤ Paste in Place. 4. Select the shape in frame 2, and select Modify ➤ Shape ➤ Advanced Smooth. The new Advanced Smooth dialog box, shown in Figure 15-15, opens, and not a lot seems to happen. Make sure the Preview check box is selected, set the Smoothing strength to 100, and scrub across the Smooth angle below hot text. Note the changes to the object when you change the value to one greater than 90 degrees. Figure 15-15. The new Advanced Smooth dialog box www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 15 780 5. Select the shape in frame 3, and select Modify ➤ Shape ➤ Advanced Straighten to open the Advanced Straighten dialog box. Scrub across the Straighten strength hot text, and the curves will start to come to attention as you increase the value. 6. Select the shape in frame 4, and select Modify ➤ Shape ➤ Optimize. This time, you are presented with the Optimize Curves dialog box. Select Show totals message and Preview. Move the slider all the way to the top, and click OK. The dialog box will close and be replaced by an alert box, telling you how many curves were found, how many were optimized, and the size of the reduction as a result of the optimization (see Figure 15-16). Figure 15-16. Using shape optimization 7. Test the movie. The graph shows you the file size of the content in each frame and the effect that modifying the shape has in each frame. As you can see in Figure 15-17, the results are quite dramatic. This book was purchased by flashfast1@gmail.com www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. OPTIMIZING AND PUBLISHING FLASH MOVIES 781 Figure 15-17. Smoothing, straightening, and optimizing curves can have a profound effect on download times. You are most likely looking at the graph and thinking, “Wow, I am going to start optimizing all of my vector shapes!” Not so fast. Each of the three methods presented did a good thing and a bad thing. They did indeed reduce the bandwidth load. However, they also introduced distortions into the image. If you are happy with the distortions, fine. If you aren’t, then you might want to consider doing the optimization manually, by selecting the shape with the Subselection tool and manipulating the shape and the points. So, why was there such a drop in the graph between the object in frame 1 and its counterpart in frame 4? Remember that vector nodes require bandwidth. You removed a few of them using the Optimize Curves dialog box, which accounts for the drop in required bandwidth. If you import vector artwork from outside sources, such as Illustrator files, you may find shape optimization quite challenging. Obviously, it depends on the intricacy of the artwork, but industrial-strength tools like Illustrator CS5 naturally have more complex features than the drawing tools provided by Flash. When Flash imports vectors from other tools, it does its best to “translate” those anchor points into the “language” it uses internally. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 15 782 This can lead to some rather interesting missteps between Illustrator CS5 and Flash CS5. You can see this in Figure 15-18. The image on the left is the image, on the Illustrator CS5 page, as it was drawn in Illustrator CS5 using the Extrude filter and a couple of effects to create the splatter. The whole thing is vectors. The image on the right is the same image on the Flash stage. The top version is the result of importing the AI file into Flash. The bottom version is one saved in Illustrator as an FXG image. The difference is, when the FXG file was created, Illustrator rasterized the extrusion, which sort of defeats the purpose. Your “take away” from this is that all vectors are not equal, and, in certain instances, something could become “lost in translation.” Figure 15-18. Just because Illustrator CS5 draws vectors, don’t get lulled into complacency. Just be mindful of the pipe. If elaborate vector artwork seems to weigh more than you would expect, consider exporting it from the original application as a bitmap or FXG file and compare file sizes. If you don’t have the original application, import the artwork into Flash, situate it on the timeline of a temporary stand-in FLA, and then use File ➤ Export ➤ Export Image to select a suitable raster format. Aren’t vectors supposed to be smaller? Generally speaking, yes. But every rule has its exception, and it goes both ways. Giulia Balladore (www.juniatwork.com), a self-taught artist featured on www.FlashGoddess.com, produces jaw-droppingly beautiful artwork directly in Flash. Her vector drawings rival the sort of detail that normally requires a camera and meticulous studio lighting. And yet, because she works in Flash and optimizes her vectors, images like “Sole” (see Figure 15-19) can be resized in the browser without ever getting pixelated. And the depicted SWF weighs a minuscule 23KB! www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. OPTIMIZING AND PUBLISHING FLASH MOVIES 783 Figure 15-19. Yes, this image was drawn entirely with Flash’s drawing tools, by Giulia Balladore (www.juniatwork.com/). Publishing and web formats Tattoo this to the inside of your left eyelid: The SWF isn’t a web document. Nothing drives us crazier than someone telling us, “Dudes, check out my Flash site,” only to have that individual double-click a SWF on his computer’s desktop. Flash SWFs should appear on the Web only if they are embedded into an HTML page. Why? Because you can use the HTML to control aspects of the SWF—scaling, context menu items, and more—that you can’t do without the HTML wrapper. Thus, a “Flash site,” to be precise, is composed of an HTML page that points to the SWF, along with any media— audio, video, images, text—that the SWF may need from external sources. Creating the SWF is a bit more complicated than selecting File ➤ Publish Preview and merrily clicking away in the Publish panel. As we pointed out in the previous chapter, you need a solid grounding in what’s under the hood before you create the car. Again, as we have been saying since the first page of this book: keep it small! This is the reason for Flash’s broad acceptance on the Web and where an understanding of the publishing process is invaluable. Up to this point, we have essentially created a bunch of FLA files and asked you to test them. The time has arrived to get off the test track and put the vehicle on the street. When you publish your movie, Flash compresses the file, removes the redundant information in the FLA, and what you are left with—especially if you’ve been taking this chapter to heart—is one sleek, mean web presentation. The default output file format—yes, there is more than one—is the SWF. The SWF is wrapped in HTML through the use of <object> and/or <embed> tags, plus extra information about how the browser should play the SWF. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 15 784 Yes, you can link directly to a SWF without that bothersome HTML. Just be aware that the SWF will expand to the full size of the browser window, meaning all of the content on the stage will also enlarge. In many respects, linking directly to the SWF is rookie error number one. Before we move into actually publishing a movie, let’s look at some of the more common file types used on the Web, listed here:  Flash (.swf)  HTML (.htm or .html)  Images (.gif, .jpg, and .png)  QuickTime (.mov) Flash Before there was Flash, there was Director. Though used primarily for interactive CDs, DVDs, and kiosks, it was at one time the main instrument employed to get animations to play on the Web. The technology developed by Macromedia to accomplish this was named Shockwave, and the file extension used was .dcr. Flash also made use of this technology, and in order to differentiate between them, it became known as Shockwave for Flash and used the .swf file extension. Flash Player is the technology that allows the SWF to play through a user’s browser. Through a series of clever moves, Flash Player has become ubiquitous on the Web. In fact, Adobe can rightfully claim that Flash Player, regardless of version, can be found on 98 percent of all Internet-enabled computers on the planet. This means, in theory, that you can assume your movies are readily available to anyone who wants to watch them. But the reality gets a bit more complicated. For you trivia buffs, the first couple of iterations of Shockwave for Director used a small application named Afterburner to create the DCR files. When Director developers prepared a presentation for the Web, they didn’t just create the DCR; the movie was “shocked.” One of the authors happened to be around on the night Macromedia quietly released Shockwave and Afterburner to the Director community. He still remembers the excitement generated by members of the group as they posted circles that moved across the page, and he remembers the “oohs” and “ahs” that followed as the circles moved up and down. Each new Flash Player version brings with it new functionality. Flash Player 8 introduced filter and blend effects, which can’t be displayed in Flash Player 7. FLV video can’t be played in Flash Player 5. Any movie you prepare using ActionScript 3.0 can be played only in Flash Player 9 or newer. Flash Player 9,0,115,0 was the first to display HD video content. The current version, 10.1, moves Flash onto practically any device, including smartphones, home television systems, and game systems found on the planet. Though you may initially think the Flash Player version is a nonissue, you would be making a gross miscalculation. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. OPTIMIZING AND PUBLISHING FLASH MOVIES 785 Corporations, through their IT departments, have strict policies regarding the addition or installation of software to corporate-owned computers. We personally know of one organization that isn’t budging, and its Flash Player policy is Flash Player 6 or lower to this day. Shrewd Flash designers actually ask potential clients which versions of Flash Player are to be targeted for the project. The last thing you need is to find yourself rewriting every line of code and reworking the project, because you assumed the target was Flash Player 9, but corporate policy dictates Flash Player 7 or older. Flash Player 10 follows a tradition that each successive version of Flash Player will play content faster than its predecessors. When Flash Player 9 was released, Adobe claimed it provided a 75 percent speed increase over Flash Player 8, which was partly because of the support for ActionScript 3.0 introduced in Flash Player 9. This sort of increase is usually enough for most users to install the new version. Even so, in many instances, actually downloading and installing the plug-in is becoming a thing of the past. Flash Player has the ability to download and install in the background, but, as one of the authors is quick to point out: “It takes a programmer to make it work.” HTML HTML is short for Hypertext Markup Language. Where HTML and ActionScript part company is that HTML is a formatting language, whereas ActionScript is a scripting language. This means HTML is composed of a set of specific instructions that tell the browser where content is placed on a web page and what it looks like. ActionScript has nothing to do with the browser. It tells Flash how the movie is to perform. The HTML instructions, or tags, are both its strength and its weakness. HTML was originally developed to allow the presentation of text and simple graphics. As the Web matured, HTML found itself hard-pressed to stay current with a community that was becoming bored with static content on pages. The emerging version of HTML, HTML 5.0, deals with this in a rather fascinating manner, but it is still in its infancy, and we don’t see it gaining broad adoption for a few more years. The real problems with HTML start when you try to drop multimedia or interactive media into a web page. HTML simply wasn’t designed for this sort of heavy lifting, which explains why JavaScript (a language that shares roots with ActionScript) is now so widely used. For a Flash designer, knowledge of how HTML works is critical, because it is an enabling technology: it enables your movies to be played on the Web. Of course, this isn’t as difficult as it once was. Today, through the use of Dreamweaver CS5 and even Flash, creating the HTML involves nothing more than a couple of mouse clicks. You will still need to play with the HTML—you saw this in Chapter 10 when you had to dig into the JavaScript code to enable full-screen playback of a Flash video—because your HTML document can do things that Flash can’t. This would include such features as alt attributes for screen readers and keywords used to attract search engines. The other thing to stick in the back of your mind is that Flash-only web pages aren’t as common as they once were. Web pages consisting solely of one SWF are still around, but Flash is also becoming a medium of choice for the delivery of banner ads, videos, and other interactive content that are elements of an HTML web page. To see an example of this, you need look no further than our beloved publisher. If you www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 15 786 hit the friends of ED home page at www.friendsofed.com, you will see a Flash banner at the top of the home page (see Figure 15-20), while the rest of the page is composed of HTML. Figure 15-20. A typical Flash/HTML hybrid page Animated GIFs Before there was Shockwave, there was the infamous animated GIF file. These files were the original web animations, and you still can export your Flash movie as an animated GIF. Why would you want to do this if Flash Player is so ubiquitous? Because users don’t need to install the Flash plug-in to view them. In fact, it is a two-way street: you can import a GIF animation into a Flash movie, and you can export a Flash movie as an animated GIF. In fact, it is not uncommon to encounter situations where the client wants both the SWF and a backup GIF animation. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. OPTIMIZING AND PUBLISHING FLASH MOVIES 787 Exporting as an animated GIF Let’s reuse our now-familiar parrot to see how animated GIF exporting works: 1. Open the YawningParrot.fla file in this chapter’s Exercise folder. This is the file to be exported as an animated GIF. Flash will convert each frame of the movie to a GIF image. There are 355 frames in this animation, meaning you should prepare yourself to create 355 separate GIF images. OK, web-heads, settle down. Creating an animated GIF consisting of 355 frames is, as our editor Ben Renow-Clarke would say, “Simply not done, old chap.” We know that, but if you understand what happens—in a big way—you’ll be more cautious in your efforts. Anyway, the parrot is pretty cool and makes for a rather interesting workout for Fireworks CS5. 2. Select File ➤ Export ➤ Export Movie (press Ctrl+Alt+Shift+S on Windows or Cmd+Option+Shift+S on a Mac) to open the Export Movie dialog box (see Figure 15-21). Navigate to the Parrot folder in the Chapter 15 Exercise folder, and select GIF Sequence in the Format drop-down menu. Then click Save. Figure 15-21. Select GIF Sequence as the export format. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 15 788 3. In the Export GIF dialog box, specify these settings (see Figure 15-22):  Dimensions: 570  550 pixels  Colors: 256  Smooth: Selected Figure 15-22. Preparing to export the Flash timeline as a GIF animation You may notice that when you change the dimension settings, there is a corresponding reduction in the Resolution value. If you click the Match Screen button, you will be returned to the original settings for this image. The physical reduction of each frame and its corresponding reduction in resolution have the net effect of creating a rather small GIF image. In this case, you need to just ignore size. That can be dealt with in Fireworks CS5. 4. Click the OK button. A progress bar will appear, showing you the progress of the export. This is a fairly quick process and should take only a few seconds. When it finishes, the progress bar will disappear, and you will be returned to the Flash stage. At this point, you are now the proud owner of the 355 GIF images that will be used to create the animation. We aren’t going to get into the nitty-gritty of creating the GIF animation in Fireworks CS5. The process is fairly simple, and the next steps give you the general idea. 5. Launch Fireworks CS5, and then select File ➤ Batch Process. Navigate to the folder containing the GIF images and import all of them. 6. Scale the images to a size of 113  109, and save the scaled images to a new folder. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... View area, Flash Properties panel, 209, 506, 512, 515, 523 3D Position and View strip, Flash Properties panel, 52 3D Position option, Flash, 510 3D Position property, Flash, 510 3D Position Z value, Flash, 524 3D Rotation area, Flash Transform panel, 209, 515, 523 3D Rotation tool, Flash, 70, 71, 499, 508, 516, 517, 518, 525 3D Rotation X value, Flash Properties panel, 524 3D Rotation Y value, Flash Properties... ActionScript panel, Flash, 744, 745 ActionScript section, Flash, 218 ActionScript Settings area, Flash, 252 ActionScript Settings menu option, Flash, 252 ActionScript tab, Flash Font Embedding dialog box, 327, 691 :active pseudo-class, Flash, 689 :active tag, Flash, 688 Add a New Item to the Script button, Flash Script pane, 217 Add Anchor Point option, Pen tool, 103 Add blend mode, Flash, 180 Add Classic... snippet, Flash, 310 audio2 layer, Flash, 290 AudioPlayer.ai Assets folder, 714 AudioVisualization.fla file, 309 elements, XML, 653, 655, 658 authortime feature, Flash, 187 Auto Format button, Flash Script pane, 218 Auto High quality setting, 802 Auto kern property, Flash Properties panel, 333 Auto Set Transformation Point option, Flash, 476, 477, 489 Auto-Collapse Icon Panels option, Flash Preferences... INDEX Blobs movie clip, Flash Library panel, 582 block elements, styling, 680–682 blockindent parameter, 587 Blossoms clip, 75 BlowUp button, Flash, 157 Blue layer, Flash, 451, 452 Blue Springs layer, Flash, 196 BlueMoon.fla file, 413 Blur filter, Flash, 50, 51, 56, 175 Blur pop-up menu option, Flash, 50 Blur property, Flash, 54 Body layer, Flash, 45, 410 Body movie clip, Flash, 45, 47 tag,... 529, 571 BottomFlower movie clip, Flash, 49 Bounce context menu item, Flash, 441 Bounce ease, Flash, 442 bounce-smoosh preset, Flash, 455 Box layer, XML, 664 box.addEventListener method, ActionScript, 231 tag, HTML, 586 Break Apart menu item, Flash, 744 Break setting, Flash Advanced character properties, 336 Bring Forward menu item, Flash, 190 Bring to Front option, Flash, 190, 524 Bringhurst, Robert,... your new best friend Tips and tricks for optimizing content for fast download How to prepare a SWF for web playback How to export a Flash movie as a GIF animation and how to import a GIF animation into Flash How to deal with remote content needed by the SWF This chapter dealt with the “end game” in Flash We think you are now aware that preparing your Flash files for web output involves a lot more than... is quite extensive For more information about Extensible Metadata Platform (XMP), see www.adobe.com/ products/xmp/ Export SWC: Unless your name is Grant Skinner or you have been living and breathing Flash for most of your natural life, leave this one alone It is used to create a component for Flash Password: This option works in conjunction with the Debugger workspace, but only for ActionScript 2.0... allowMultipleSelection parameter, Flash List component, 624 allowMultipleSelections check box, Flash Properties panel, 625 Alpha blend mode, Flash, 180 Alpha property, Flash Color panel, 378 alpha video, 572–574, 593–596 AlphaEx.fla file, 574 Alpha.mov file, 573 Alsop, Will, 522 Always Show Markers option, Flash Timeline panel, 398, 399 Always update before publishing option, Flash Convert to Symbol dialog... out its own tab Deselect everything but the Flash (.swf) option before continuing Flash settings Click the Flash tab to open the Flash settings, as shown in Figure 15-28 Figure 15-28 The Flash settings in the Publish Settings dialog box 794 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark OPTIMIZING AND PUBLISHING FLASH MOVIES Let’s review each of the areas... OPTIMIZING AND PUBLISHING FLASH MOVIES Figure 15-25 Flash animations can be output to video Flash is gaining ground as a broadcast animation technology, and no matter how you slice it, QuickTime is the way to go with digital video Up until the previous release of Flash, QuickTime and Flash have had a rather uneasy relationship It was extremely difficult to get Flash animations into QuickTime for editing in a . the Flash (.swf) option before continuing. Flash settings Click the Flash tab to open the Flash settings, as shown in Figure 15-28. Figure 15-28. The Flash. Illustrator CS5 and Flash CS5. You can see this in Figure 15-18. The image on the left is the image, on the Illustrator CS5 page, as it was drawn in Illustrator CS5