Foundation Flash CS4 for Designers- P23 pdf

658 CHAPTER 15 The _na]paHappan$% function is how the letters arrive in the movie. The first variable, bip, creates a PatpBkni]p$% instance, which is used to format text fields, as you learned in Chapter 6. With the bip instance created, we need to give it some formatting information. The size of the text is set by using a custom function, n]j`ki>apsaaj$%, which determines the maximum and minimum size of the letters. That function is coming in step 4. The color is set by picking a random value between 0 and 1 and then multiplying that result by 16,777,216. Where did that number come from? That’s how many colors you can find in the 24- bit color space. We then create a movieclip and add a text field to its display list. Before it is added to the display list, the text field is centered, and random letters are added to it. That’s accomplished with this line: pb*patp9Opnejc*bnki?d]n?k`a$n]j`ki>apsaaj$53( %%7 This looks rather complex, but it makes sense when you break it down. We needed random values, so we reused that n]j`ki>apsaaj$% function and told it to return a value between (and inclusive of) 97 and 122. What numbers are those? Those represent ASCII values for the lowercase letters a through z. The Opnejc*bnki?d]n?k`a$% method converts those into their corresponding characters. The next two lines tell Flash to apply the text formatting to the text field—pb*oapPatpBkni]p$bip%— and finally, to add the text field to the movieclip’s display list—i_*]``?deh`$p%. The remainder of the code tells Flash where to position the text- containing movieclip (including the configuration of two custom properties: ]jc and n]jca, used in an event handler function you’re about to write). The final line tells Flash to animate the movieclip by using a custom odeiiu$% function. Let’s write that function. 3. Press Return (Enter) twice and enter the following code, which puts the letters in motion: bqj_pekjodeiiu$arp6Arajp%6rke`w r]ni_6Ikrea?hel9Ikrea?hel$arp*p]ncap%7 i_*u)9n]j`ki>apsaaj$2(-,%7 i_*t'9$i_*n]jca&I]pd*_ko$i_*]jc'9,*0%%7 i_*o_]haU)9,*,.7 eb$i_*o_]haU89,%w i_*naikraArajpHeopajan$Arajp*AJPAN[BN=IA(odeiiu%7 naikra?deh`$i_%7 y y7 Before we start explaining this code, remember that all motion in Flash is either across the stage on the x axis or up and down the stage on the y axis. Objects moving from the top to the bottom of the stage have increasing Y values, and all objects moving from right to left have decreasing X values, and vice versa. This code block determines the stage movement of the movieclip containing a random letter from the previous code block. Each one is randomly placed on the y axis, and the cosine method of the I]pd class—I]pd*_ko$%—is used to add a right to left shimmy, as the letters move upward. As the letters move up the stage along the y axis, they are continuously scaled down by 2%—i_*o_]haU )9,*,.7—every time the Peian instance “ticks.” The last three lines essentially tell Flash, “Look, this thing is going to eventually scale down to a value of 0. When you hear that, get rid of the movieclip.” 659 OPTIMIZING AND PUBLISHING FLASH MOVIES To finish off the code, let’s write that n]j`ki>apsaaj$% method. 4. Press Return (Enter) twice and type the following: bqj_pekjn]j`ki>apsaaj$iej6Jqi^an(i]t6Jqi^an%6Jqi^anw napqnj$I]pd*n]j`ki$%&$i]t)iej%%'iej7 y7 This function picks a random number using the parameters sent by the code that calls it. The napqnj statement sends the chosen number back. Let’s see how this works in regard to setting the size of the letters. The following line does that: bip*oeva9n]j`ki>apsaaj$4,( ,%7 This means the calculation would be as follows: napqnj$I]pd*n]j`ki$%&$ ,)4,%%'4,7 Let’s assume the I]pd*n]j`ki$% value is 0.35, so the calculation would be like this: napqnj$,*/1&$ ,)4,%%'4,7 napqnj$,*/1&0,%'4,7 napqnj$-0%'4,7 napqnj507 Therefore the size of this letter would be 94 pixels. If you get any errors, you might want to check your code against ours. The file— >q^^hejcHappano*bh]—can be found in the Chapter 15 ?kilhapa folder. 5. Save and test the movie. You should see letters moving up the stage in a wavy motion (see Figure 15-17). They get smaller as they move upward and eventually disappear. Figure 15-17. Letters randomly generated, formatted, and put into motion using ActionScript 660 CHAPTER 15 6. Select File ° Export ° Export Movie. In the Export Movie dialog box, navigate to the folder where you want to save the file and select QuickTime (*.mov) from the Save as type drop- down list, as shown in Figure 15-18. Then click Save. Figure 15-18. Exporting a Flash file as a QuickTime movie 7. In the QuickTime Export Settings dialog box, select Ignore stage color (generate alpha channel) and change the After time elapsed: value to 10, as shown in Figure 15-19. Click the Export button. Figure 15-19. The QuickTime Export Settings dialog box 8. A progress bar will appear, and you’ll eventually see an alert that tells you where the export log can be found. Click OK and quit Flash. 9. Open your new QuickTime movie. Pretty neat! 661 OPTIMIZING AND PUBLISHING FLASH MOVIES Let’s return to the QuickTime Export Settings dialog box and briefly review its options: Render width and Render height: These values match the current stage size and will be the physical dimensions of the video. You can change these values by clicking the QuickTime Settings button. Maintain aspect ratio: When checked, this option ensures distortion is not added if you resize the video. Ignore stage color: Selecting this option essentially turns the stage color invisible, which makes it ideal if you want this animation to play over content in After Effects CS4 or some other video editor. Stop exporting: The choices in this section give Flash an idea of when to stop the process. The first choice should be used if you have content on the timeline. The second one is ideal for situations such as this exercise, where content is generated by ActionScript. In this case, we are producing a clip with a duration of 10 seconds. Store temp data: This is used during the render process. You can choose to store this data in memory for short movies, or choose to create the temporary file on the desktop or some other location. QuickTime Settings: This button opens a QuickTime settings dialog box, where you can change the codec and audio settings for the final movie. As we said earlier, you can export these Flash- created movies as animations for use in other applica- tions. For example, one of the authors dropped the file into an After Effects CS3 project, as shown in Figure 15-20, and then created the QuickTime movie named >q^^hejcHappanoBej]h*ikr that is found in this chapter’s ?kilhapa folder. Figure 15-20. The video is used in After Effects CS3. 662 CHAPTER 15 Publishing and web formats If there is one fundamental fact regarding publishing your Flash movie to the Web, it is this: 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 with- out 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, we stress the same theme we have been repeating since page 1 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 8k^fa_p: and/or 8ai^a`: tags, plus extra information about how the browser should play the SWF. 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 (*osb) HTML (*dpi or *dpih) Images (*ceb, *flc, and *ljc) QuickTime (*ikr) 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 exten- sion used was *`_n. Flash also made use of this technology, and in order to differentiate between them, it became known as Shockwave for Flash and used the *osb file extension. Flash Player is the technology that allows the SWF to play through a user’s browser. Through a series of clever moves, 663 OPTIMIZING AND PUBLISHING FLASH MOVIES 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% of all Internet- enabled computers on the planet. This means, in theory, that you can assume your movies are readily available to anyone who wishes 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 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 higher. Flash Player 9,0,115,0 was the first to display HD video content. Though you may initially regard this as a nonissue, you would be making a gross miscalculation. 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 lower. 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% speed increase over Flash Player 8, which was partly due to 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 becom- ing 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 pro- grammer 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 devel- oped 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. 664 CHAPTER 15 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 lan- guage that shares roots with ActionScript) is now so widely used. For a Flash designer, knowledge of how HTML works is critical, because it is the technology that 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 CS4 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 ]hp 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 ele- ments of an HTML web page. To see an example of this, you need look no further than our beloved publisher. If you hit the friends of ED home page at dppl6++sss*bneaj`okbA`*_ki, you will see a Flash banner at the top of the home page (see Figure 15-21), while the rest of the page is composed of HTML. Figure 15-21. 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. 665 OPTIMIZING AND PUBLISHING FLASH MOVIES Exporting as an animated GIF Let’s reuse our now- familiar parrot to see how animated GIF exporting works. 1. Open the U]sjejcL]nnkp*bh] file in this chapter’s Atan_eoa 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. Okay, 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 CS4. 2. Select File ° Export ° Export Movie (press Ctrl+Alt+Shift+S on the PC or Cmd+Option+Shift+S on the Mac) to open the Export Movie dialog box (see Figure 15-22). Navigate to the L]nnkp folder in the Chapter 15 Atan_eoa folder and select GIF Sequence (*.gif) in the Save as type drop- down menu. Then click Save. Figure 15-22. Select GIF Sequence (*.gif) as the image type. 3. In the Export GIF dialog box, specify these settings (see Figure 15-23): Dimensions: 570  550 pixels Colors: 256 Smooth: Selected 666 CHAPTER 15 Figure 15-23. Preparing to export the Flash timeline as a GIF animation You may notice that when you change the Dimensions 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 CS4. 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 less than 10 or 15 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 ani- mation. We aren’t going to get into the nitty- gritty of creating the GIF animation in Fireworks CS4. The process is fairly simple, and the next steps give you the general idea. 5. Launch Fireworks CS4, and then select File ° Batch Process. 6. Scale the images to a size of 113  109 and save the scaled images to a new folder. 7. Still in Fireworks CS4, click the Open button on the Welcome screen, and navigate to the folder containing your GIF images. Select all of them in the Open dialog box and select Open as ani- mation , as shown in Figure 15-24. Then click the Open button. Fireworks will create the animated GIF by putting each image in a frame. You can then do what you need to do and export the file from Fireworks CS4 as an animated GIF. 667 OPTIMIZING AND PUBLISHING FLASH MOVIES Figure 15-24. Importing the GIF files into Fireworks. The key is to select Open as animation. Only the main timeline is considered when Flash content is converted to an ani- mated GIF. Nested movieclip timelines and ActionScript do not make it through the translation process. The simple rule of thumb is that if you can see it move while you manually scrub the timeline, the GIF can, too. If you can’t, it won’t show. Yes, this exercise was partly mischievous. If you select File ° Export ° Export Movie, you can bypass the need to restitch the GIF sequence in Fireworks by choosing Animated GIF from the Export Movie dialog box. Still, it’s good to know your options! Importing an animated GIF Now that you know how to create a GIF animation in Flash, let’s look at the reverse process. Here’s how to import a GIF animation into Flash: 1. Open a new Flash CS4 document and select File ° Import ° Import to Library. 2. Navigate to the L]nnkpBS*ceb file in the Atan_eoa folder for this chapter and click Import to Library . When the process finishes, you will see that each image in the animation, along with a movieclip, has been added to the library. 3. Drag the movieclip to the stage and test the movie. You have a low- resolution version of the yawning parrot, as shown in Figure 15-25. [...]... quite extensive For more information about Extensible Metadata Platform (XMP), see 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 672 OPTIMIZING AND PUBLISHING FLASH MOVIES Figure 15-30 The ability to add metadata to a SWF is a major addition to Flash CS4 Advanced:... 680–681 showtime for, 668–681 streaming of, 642–644 web page request for, 643 Flash Player, loading content in, 580–590 Flash Player 8, filter and blend effects introduced in, 663 Flash Player 9, increased speed of over version 8, 663 Flash Player 10, 195 Flash settings panel areas in, 671–675 opening in Publish Settings dialog box, 670 Flash slide show See slide show Flash video format, filename extensions... Deselect everything but the Flash (.swf) option before continuing 670 OPTIMIZING AND PUBLISHING FLASH MOVIES 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 Let’s review each of the areas in this panel: Player: This drop-down menu allows you to choose any version of Flash Player from versions 1... a browser Before you start, click the OK or Cancel button to close the Publish Settings dialog box and return to the Flash stage Save the to the folder in your Chapter 15 folder We’ll explain why in a moment Now open the Publish Settings dialog box and let’s get busy 1 Click the Formats tab and select the Flash and HTML formats 2 Click the Flash tab and specify these settings: Version: Flash Player... How Flash movies are streamed to a web page A couple of ways of turning the Bandwidth Profiler into 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. .. file formats it can import, 92 importing Photoshop CS4 documents into, 109–115 managing your workspace, 7–8 optimizing a drawing in, 96–97 two kinds of artwork in, 56–57 using bitmap images in, 91–115 using GIF files in, 101–102 using JPG files in, 98–100 web site address, 4 Welcome screen, 4 Flash CS4 Professional interface See also Flash CS4 Professional exploring panels in, 13 learning, 3–53 Flash. .. movie, 660 Flash JavaScript API (JSFL), 212 Flash movies building, 33–52 exploring publish settings for, 669–670 exporting as animated GIFs, 665–667 general guidelines for, 642 importing animated GIFs into, 667 mapping out a plan for, 650 optimizing and fine-tuning, 649–661 optimizing and publishing, 637–682 optimizing elements in, 654–656 planning yours, 649 publishing and web formats for, 662–668... choice, your user is in for a really bad day We’ll provide that explanation after the description of the next, and last, item in the Flash panel Script time limit: Sometimes your scripts will get into a loop, sort of like a dog chasing its tail This can go on for quite a long time before Flash sighs and gives up Enter a value here, and you are telling Flash exactly when to give up For the Hardware Acceleration... frames with, 307 families, fonts, 262 file formats, audio, 222–223 Fast-Forward button, up and down handlers for, 628 fastforward() custom function, writing event handler for, 632 file paths, a word about, 460 file types, common on the Web, 662 filters adding and using, 145 applying a drop shadow, 142–143 applying, 141, 265–267 applying to tweens, 342 available in Flash, 141 filters and blend modes, 141–149... shine with, 46 Fireworks CS4 documents, importing, 103–104 PNG image, importing, 103–104 using as a planning aid, 650 Flash audio formats See audio history of, 662–663 importing audio to, 226 love-hate Internet relationship, 638–642 optimizing content for use in video, 657–661 playing sound from outside, 241–242 users community, 642 Flash 3D Cheats Most Wanted (friends of ED), 418 Flash alignment options, . tab. Deselect everything but the Flash (.swf) option before continuing. 671 OPTIMIZING AND PUBLISHING FLASH MOVIES Flash settings Click the Flash tab to open the Flash settings, as shown in Figure. 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 chasing its tail. This can go on for quite a long time before Flash sighs and gives up. Enter a value here, and you are telling Flash exactly when to give up. For the Hardware Acceleration option,