Foundation Flash CS4 for Designers- P7 ppsx

162 CHAPTER 3 6. In frame 1, move the mountain upward until the bottom of the image is sitting on the top edge of the text. Add a motion tween to the layer. 7. Click in any frame of the Image layer and select the Motion Editor panel. 8. Drag the playhead to frame 60 of the Motion Editor timeline and twirl down the Basic motion properties. Click the diamond in the Y grid to add a keyframe at frame 60 and scrub the Y hot text to a value of high enough that the mountains move past the bottom of the text. If you now scrub across the Motion Editor timeline, the mountains move down the stage. 9. Select the Timeline panel, lock the two layers to reapply the mask, and scrub across the timeline. The image appears inside the text, as shown in Figure 3-51. Figure 3-51. The image is animated in the text field mask. You can also add a bit of graphic interest to the mask by applying a filter to the text. If you intend to go this route, though, keep in mind that filters can’t be applied to anything that’s being used as a mask. Instead, the filter needs to be applied to a copy of the text in its own layer. You can move the copy layer under the mask to give the illusion that a filter has been applied in the usual way. Let’s try that. 10. Add a new layer named Filter to the timeline. 11. Unlock the Text layer, select the text on the stage, and copy the text to the clipboard. 12. Relock the Text layer to apply the mask. Select frame 1 of the Filter layer, and select Edit ° Paste in Place to position the text directly over the mask. 163 SYMBOLS AND LIBRARIES 13. Select the text in the Filter layer and apply the Gradient Glow filter using the following settings in the Property inspector (see Figure 3-52): Blur X: 7 Blur Y: 7 Strength: 100% Quality: High Angle: 295 Distance: 6 Knockout: Selected (this turns the text transparent; the glow stays on the edges) Type: Outer Start Color: #FFFFFF (white) End Color: #999900 (olive green) 14. Drag the Filter layer above the Text layer. As you can see in Figure 3-52, the effect gives the mask a bit of a 3D look. Feel free to save the file before moving on. Figure 3-52. Filters can add a bit of zing to mask effects. Your turn: Create a soft mask in Flash You may have gone through the previous sections and thought, “Gosh, the masks all have a hard edge. Is there a way to create a mask that gently fades out an image along the edges of the mask?” Great question. Prior to the release of Flash 8, it could be done, but the process was rather complex and, we might add, time- consuming. With the help of the filters and blend modes, this task has now become quick and painless. 164 CHAPTER 3 In this exercise, you are going to create a soft mask. Setting up the stage To begin, set up your document and objects: 1. Create a new Flash document and save it as OkbpI]og*bh] in your Atan_eoa folder. 2. Select File ° Import ° Import to Stage, and import the F]_k^oH]``an*flc image to the stage. 3. Click the pasteboard (the area just outside the photo), and in the Property inspector, click the Edit button to open the Document Properties dialog box. Click the Contents radio button to expand the stage to the size of the image, and then click OK. 4. Create a new layer above the first and name it silk. Import the oehg*flc image to the stage. When the image appears on the stage, select it and convert it to a movieclip named softmask. This time, the stage was initially smaller than its content. If you’re designing Flash movies and the stage is larger than the stuff on it, get into the habit of reducing the stage size. Wasted space, in the Flash universe, translates into increased download times. Remember that when you think Flash, think small. 5. Add a new layer to the timeline above the other two. 6. Select the Oval tool, turn off the stroke, and pick a fill color in the Tools panel. 7. Make sure you are not in Object Drawing mode, and draw an oval shape on the new layer, large enough to cover a lot of the silk image (see Figure 3-53). This shape will be used to create the mask. Figure 3-53. The stage is set for a soft mask. 8. Select the oval shape and convert it to a movieclip named mask. 165 SYMBOLS AND LIBRARIES Creating the cutout for the mask With the objects imported and created, and the mask items converted to movieclips, you can turn your attention to the creation of the effect. First, you need to simulate a mask by manipulating the mask movieclip. 1. Double-click the mask movieclip to open it in the Symbol Editor. 2. Add a new layer below the current layer in the symbol’s timeline. 3. Select the Rectangle tool. Making sure you’re not in Object Drawing mode, specify a fill color that contrasts with the fill color of the oval—they need to be different colors for what you’re about to do. In the new (lower) layer, draw a large rectangle that goes well beyond the edges of the oval. 4. Select the oval, and then select Edit ° Cut to move the oval to the clipboard. 5. Select the bottom layer containing the rectangle, and select Edit ° Paste in Place to paste the oval into the rectangle. Deselect the oval. You can delete the oval’s layer now, because you won’t be needing it anymore. 6. Select the oval and press the Delete key to cut a hole in the rectangle (see Figure 3-54). You should see the oehg*flc image showing through the hole. Why not just do the delete thing when the oval is pasted onto the rectangle? When you pasted the oval, it was actually floating over the rectangle. Deselecting the object actually commits it to the rectangle and makes it a part of that shape. Only after you commit to the drop can you cut the oval out of the rectangle. Figure 3-54. Poking a hole through an object creates a cutout that can be used as a mask. 166 CHAPTER 3 A mask without a masking layer It should be obvious that this effect is going to involve the background image showing through the hole you just created in the rectangle. Through the clever use of filters and blend modes, you are going to remove the solid color around the hole and feather the edges of the oval to create the soft mask effect. Here’s how: 1. Click the Scene 1 link to return to the main timeline. 2. Double-click the softmask movieclip—it’s in the silk layer—to edit it in place. 3. Create a new layer above the existing layer and drag a copy of the mask movieclip from the library to the stage. Select the mask movieclip and click to open the Filters twirlie of the Property inspector. When the filters appear, click the + sign and select the Blur filter. 4. When the Blur filter properties appear, use these settings: Blur X: 40 Blur Y: 15 Quality: Low The outside edges of the rectangle and the inside edges of the cutout will have a blur applied to them, as shown in Figure 3-55. Figure 3-55. Applying a Blur filter to the masking object 167 SYMBOLS AND LIBRARIES 5. Select the mask movieclip. In the Display area of the Property inspector, select Erase from the Blending drop- down list. The whole in- progress mask disappears . . . or does it? The Erase blend mode removes the base color from the pixels of the object to which it is attached. It also removes anything behind it. In this case, the content will show through the hole. Also, as we pointed out in an earlier masking exercise, content on a masking layer can’t have a filter applied to it. The blend modes allow filters, which means that the content showing through the hole will gradually fade out. 6. To complete the effect, return to the main timeline by clicking the Scene 1 link. Click the soft- mask movieclip on the stage to select it. 7. With the softmask movieclip selected, apply the Layer blend mode in the Property inspector. The mask effect now becomes apparent, as shown in Figure 3-56. Figure 3-56. Apply the Layer blend mode to the movieclip on the stage to create the effect. 8. Save the movie. What happened? There are 11 blend modes in Flash, and 2 of them—Alpha and Erase—require that a Layer blend mode be applied to the parent movieclip or object. In this exercise, the softmask mov- ieclip is the parent of the mask movieclip. The parent is required because of the hierarchy that Flash uses for managing content on the stage, which is different from how Photoshop CS4 and Fireworks CS4 work. This is why the Alpha and Erase modes require that an additional movieclip be set to the Layer blend mode. Flash treats this movieclip as an entirely different canvas. In this specific case, the embedded blending modes are first calculated, and then the parent— softmask—is redrawn using the Normal blend mode. This is needed because you can’t have an invisible stage on the main timeline. This is awfully techie, but you now know how to use the Erase and the Layer blend modes to create a soft mask effect. 168 CHAPTER 3 What you have learned In this chapter, you learned the following: How to create and use symbols in Flash animations and movies How to create and share libraries among Flash movies The power of filters and blend modes A variety of methods for managing onstage content How to create and use a mask A rather neat technique for creating soft masks In the next chapter, you will be exposed to ActionScript 3.0, the most up-to- date version of Flash’s programming language. Don’t worry if you’ve never thought of yourself as the programmer type. We’re not here to make digitheads out of anyone, but we guarantee you’ll run into at least a smidgen of coding in your Flash travels. To get a leg up, just turn the page. 171171 Chapter 4 Programming is a discipline all its own. In fact, Flash has grown so much over the ten years of its existence that people are actually earning fairly decent incomes as ActionScript programmers, or as they are known in the industry, Flash developers. This is not to say our intention is to turn you into a programmer outright, but an understanding of the ActionScript 3.0 language and the fundamentals of its use will make your day-to- day life easier. Here’s what we’ll cover in this chapter: Using the Actions panel Understanding the fundamentals of objects Commenting code Creating and using variables Using data types, operators, and conditionals Getting help The following files are used in the exercises in this chapter (located in ?d]lpan,0+ Atan_eoaBehao[?d,0): psejgea*bh] L]qoaPeiaheja*bh] ACTIONSCRIPT BASICS 172 CHAPTER 4 Additionally, we’ve provided completed versions of several exercises for your reference (located in ?d]lpan,0+Atan_eoaBehao[?d,0+?kilhapa+). The source files are available online from either of the following sites: dppl6++sss*Bkqj`]pekjBh]od?O0*_ki dppl6++sss*bneaj`okbA@*_ki+`ksjhk]`*dpih;eo^j9534-0/, ,5/- Using ActionScript is a lot like owning a car. Our hunch is that most of you own one, or have at least thought about owning one. We also suspect that some of you (including one of the authors) find the mechanics of a car so mystifying that you prefer to let a mechanic handle routine maintenance. Others of you won’t be happy unless the hood is up and you’re covered in grease up to your elbows. Whichever way you lean, it’s hard to argue against acquiring at least the basic skills necessary to change the oil and maybe fix a flat tire. You never know when you’ll be stuck on the side of the road without a cell phone! This chapter gives you an introduction to programming as it relates to Flash CS4. We trust the follow- ing information will guide you past the first few mile markers. If you find yourself inspired, we encourage you to pursue ActionScript further with Foundation ActionScript 3.0 with Flash CS3 and Flex by Steve Webster, Todd Yard, and Sean McSharry (friends of ED, 2007)—useful from a coding standpoint, even though it was written for Flash CS3—or Object- Oriented ActionScript 3.0, by Todd Yard, Peter Elst, and Sas Jacobs (friends of ED, 2007). The power of ActionScript When Flash first appeared on the scene (first as FutureSplash Animator, and then later as Flash), web designers were quite content to populate sites with small movies that moved things from here to there. The result was the rise of bloated Flash movies and, inevitably, the infamous Skip Intro button. But once ActionScript was introduced into the mix, Flash started its march forward. Today, Flash is a mature application, and Adobe now refers to the use of Flash CS4 as part of the Flash Platform, an umbrella term that includes industrial- strength programming tools like Flex and AIR. This means that SWF files are no longer the exclusive property of the Flash authoring environment. Flex Builder 3 also produces SWFs. They’re fundamentally the same as SWFs built in Flash—they all run in the same Flash Player 9 or higher—but Flex is geared toward programmers who normally work in applications like Microsoft Visual Studio or Borland JBuilder—not at all the domain of artsy types! As you have seen in the preceding chapters, Flash can still be used to move things from here to there. On the one hand, you have an animation tool for building scalable, lightweight motion graphics that renders animated GIFs extinct, and many Flash designers are using the application to create broadcast quality cartoons for display on the Web and television. On the other hand, even without Flex Builder 3, Flash developers have plenty of room to spread their wings. They use the platform for everything from building online banking applications to fully realized clones of Super Mario Brothers. In between is a wealth of content ranging from interactive banner ads to MP3 players, from viral e- cards to video- enhanced corporate multimedia presentations. How far 172 173 ACTIONSCRIPT BASICS you go, and the directions you take, are up to you—that’s an exciting prospect! These are all possible thanks to ActionScript. Put simply, ActionScript brings your movies to life. No matter how impressive your sense of graphic design, the net result of your artistry gets “baked,” as is, into a published SWF. What’s done is done— unless you introduce programming to the picture. With ActionScript, your opportunities extend beyond the bounds of the Flash interface. You can program movies to respond to user input in orderly or completely random ways. ActionScript also has a pragmatic side. You can reduce SWF file size and initial download time by pro- gramming movies to load images, audio, and video from external, rather than embedded, files. You can even make things easier for yourself by loading these files based on information stored in XML documents and styled with CSS (these topics are covered in Chapters 12 and 13). ActionScript 3.0 is the latest and most mature incarnation of the programming language used by Flash. As a point of interest, it was supported a full year before Flash CS3 came to market by two related, but distinct, Adobe products: Flex Builder 2 and Flash Player 9. This was an all- time first in the history of Flash. The decision to do so was a wise one on the part of Adobe. What it meant was that Flash developers had already become familiar with the new features and improvements of ActionScript 3.0 by hearing about it around the watercooler. If you were in an academic or office setting during the release of Flash CS3, chances were good that a kind and wise soul had already forged ahead and cleared the path. With the release of Flash CS4, few are looking back. Numerous tutorials and articles on ActionScript 3.0 are already available online at the Adobe Developer Connection (dppl6++sss* ]`k^a*_ki+`arjap+). All of the examples in this book use the ActionScript 3.0 language. Flash CS4 is perfectly capable of using ActionScript 2.0 and even older versions of the language. But do note that ActionScript 1.0, the first iteration, is on its last legs, and ActionScript 2.0 is heading for that status as well. The adoption of ActionScript 3.0 has become more rapid than in the past due to the intro- duction of Flex and the fact that the Flash developer community was exposed to the language so far in advance of Flash CS3. So where did ActionScript come from? Before Macromedia joined the Adobe family, it looked at the programming languages used for web interactivity and realized JavaScript was predominant. Rather than add yet another language, the decision was made in Flash 5 to stay within the parameters of something called the ECMA- 262 specification. This makes ActionScript a close cousin of JavaScript, so if you’re already comfortable with that, you may find ActionScript encouragingly familiar. Ecma International (formerly the European Computer Manufacturers Association) is an industry standards association that governs a number of specifications for data storage, character sets, and programming languages, including specs for C++ and C#. It’s something like the World Wide Web Consortium (W3C), which manages the specifications for HTML, XML, and CSS. So much for history. Let’s roll up our sleeves and get covered in electrons up to our elbows by getting to know the interface for ActionScript: the Actions panel. 173 [...]... on the Check Syntax feature back in Flash 8, be prepared for a bit of disappointment This button behaves very differently for ActionScript 3.0 documents, though it still works the same for ActionScript 2.0 documents For details, see the “Syntax checking” section later in this chapter Auto Format: Sweeps through your code to correct its posture, based on your own formatting preferences In a pinch, this... far—to boost what’s possible with the Flash interface alone Of the script editors mentioned, the Actions panel has been around the longest It has evolved through significant changes since its introduction in Flash 4, and even reveals a handful of new features since Flash 8 Actions panel components Let’s take a look at what the Actions panel has to offer Create a new Flash File (ActionScript 3.0) document... The Flash interface allows you to “physically” manipulate certain objects—movieclips, text fields, and so on—by means of the Free Transform tool, the Property inspector, and other tools and panels But that’s only the tip of the iceberg, and merely one way of looking at the “reality” of the parts of a Flash movie In ActionScript, objects aren’t physical things, but if you place yourself mentally into Flash. .. colored black, blue, green, or gray The words and are reserved for ActionScript and are blue by default, though you can customize these colors by selecting Edit (Flash) Preferences ActionScript Gray is the default color for commented code, which is nonfunctional as long as it remains a comment Keep an eye on the code color If the word , for example, is not blue, you may have a problem (maybe a typo)... of these already For example, is a keyword that means something to Flash (it declares a function); the term is a Boolean value that tells you if something is true; the term gives you a reference to the current scope These words aren’t part of the class structure that defines ActionScript’s objects, but they’re essential to the language, so you can’t commandeer them for your own uses For example, you... what was going on For example, doesn’t this make your life easier? 190 ACTIONSCRIPT BASICS You can even put the two slashes at the end of line, if you like You may also use a comment to temporarily “undo” or “hold back” a line of ActionScript For example, you might want to experiment with a variety of possible values for a property Single-line comments make it easy to switch back and forth Just copy... , then , and so on The broader you go, the more these group members have in common It’s when you get more narrow—down the branch, for example—that specifics come into play Mammals, for example, don’t lay eggs (with very few exceptions!); they feed their young milk, and so forth This distinguishes mammals from other vertebrates, such as fish or amphibians; and yet, as vertebrates, all backbone animals... spine is, because all mammals are vertebrates—along with fish and amphibians—so it would be redundant for each group of animal to restate that definition All of these animals share a spine, and therefore all of their classes rely on the definition of “spine” from the class, from which they all inherit information Bearing that in mind, let’s take a closer look at properties, methods, and events 178 ACTIONSCRIPT... carried out As with properties, each unique object type has its own set of methods The class, for example, provides for the selection of text in various ways These methods are absent in the class, which makes perfect sense, because movieclips do movieclip things and text fields do text field things The class provides for the loading of files and data from outside a SWF It makes equally good sense that its... were optionally responsible for loading external SWFs and images There was also a class called that did the same thing, but in a more useful way Thanks to the new virtual machine in Flash Player 9 and higher, ActionScript 3.0 slices through that sort of legacy ambiguity Let’s keep exploring our movieclip instance, because movieclips are arguably the most important object in Flash to learn Why? Because . parent is required because of the hierarchy that Flash uses for managing content on the stage, which is different from how Photoshop CS4 and Fireworks CS4 work. This is why the Alpha and Erase modes. relates to Flash CS4. We trust the follow- ing information will guide you past the first few mile markers. If you find yourself inspired, we encourage you to pursue ActionScript further with Foundation. the rise of bloated Flash movies and, inevitably, the infamous Skip Intro button. But once ActionScript was introduced into the mix, Flash started its march forward. Today, Flash is a mature