Macromedia Flash 8 (P2)

Chia sẻ: Vong Phat | Ngày: | Loại File: PDF | Số trang:20

lượt xem

Macromedia Flash 8 (P2)

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

Undo command works (the Undo feature is accessible by pressing Ctrl+Z). The default, Document-level Undo, means that every time you undo (by pressing Ctrl+Z), you go back to the state before the last change. Perhaps this is the most intuitive behavior. However, the other option, Object-level Undo, is very useful. With this option, if you make changes while inside one movie clip and then make changes to another movie clip, you can return to the first clip and press Ctrl+Z to undo the last thing you did in that clip! It’s the way Flash used to work (before version MX2004),...

Chủ đề:

Nội dung Text: Macromedia Flash 8 (P2)

  1. Undo command works (the Undo feature is Overflow setting of Extend makes your gradi- accessible by pressing Ctrl+Z). The default, ent fade off infinitely; a setting of Repeat lets Document-level Undo, means that every time the gradient fade from the beginning to the you undo (by pressing Ctrl+Z), you go back end and then repeat and fade from the begin- to the state before the last change. Perhaps ning to the end; a setting of Reflect fades the this is the most intuitive behavior. However, gradient from the beginning to the end, fades the other option, Object-level Undo, is very it back up to the beginning, and continues to useful. With this option, if you make changes fade it up and down. Another change to the while inside one movie clip and then make way gradients work in Flash 8 is that radial changes to another movie clip, you can gradients support a focal point, which means return to the first clip and press Ctrl+Z to you can create oblong off-center radial undo the last thing you did in that clip! It’s gradients. the way Flash used to work (before version Some of the new Flash 8 features appear MX2004), and it’s back as a preference. subtle or esoteric—and they are. Although the The margins for your text fields are also 9-slice feature can be hard to see initially, it’s easier to modify in Flash 8. You can now quite powerful. When you select the Enable grab any one of the six handles, as shown in Guides for 9-slice Scaling option in a movie Figure 1.6. In previous editions, there was clip’s Symbol Properties dialog box (shown in only one special margin-changing handle; Figure 1.7), you are given four special guides dragging any other handle scaled and that make a tic-tac-toe pattern on the clip’s stretched the text rather than the text field. In contents. (The guides are editable only while Flash 8, if you want to scale the text, you can you’re editing the symbol from the Library— use the Free Transform tool or the Properties that is, not by double-clicking an instance on panel’s W (width) and H (height) fields. the stage.) The contents of your clip in the four outer FIGURE 1.6 Drag any handle on a text field to modify the squares don’t get scaled when the clip is margin width in Flash 8. scaled. The midsections stretch as needed but not the corners. This means you can use a single symbol scaled to multiple sizes and dimensions, but the corners won’t stretch or appear distorted. You can see the difference In addition to the previously mentioned fact between shapes scaled in various ways with that gradients can be applied to strokes, 9-slice scaling in Figure 1.8. Notice how the gradients also sport a new overflow setting word close doesn’t appear stretched even (accessible in the Color Mixer panel). An though the clip’s width and height vary. 14 CHAPTER 1: Exploring Flash 8
  2. FIGURE 1.7 The Enable Guides for 9-slice Scaling option lets you identify which portions of your clip shouldn’t scale (the four corner squares). FIGURE 1.8 The same symbol scaled to different dimen- Flash Player sions, yet the corners don’t scale. Interestingly, it took a separate team about the same size as the team that built Flash 8 Professional just to build the new Flash player! Flash (the authoring tool) just creates .swf files, but the Flash player has to render those .swf files—plus work with all kinds of browsers on different operating systems. And it does all this with a file size under 1MB. My point is that the Flash player makes many of the new features possible. For example, Flash player 8 now lets you load .png or .gif files. You don’t even need to author your applica- tion in Flash 8 to take advantage of this NOTE feature, but your users will need the Flash One drawback of the Enable Guides for 9-slice Scaling player 8 to properly load the content of your option is that it doesn’t work when your clip contains files. nested clips. Everything inside the movie clip on which you want 9-slice scaling to work must be plain shapes This also means that, if you want to employ (not clip instances). one of the new Flash 8 features, your users must have the Flash player 8 plug-in What’s New in Flash 8 15
  3. installed. One nice new feature when plan- Two ways to face the prospect of forcing a ning to deliver to an earlier version of the plug-in upgrade on your users are to look at Flash Player is that you’re given feedback (as which new features you want (or need) and to which features are not available) while to look at the upgrade experience the users authoring. Say you select File, Publish will have to endure. Every Flash version has Settings; click the Flash tab; and pick an older some killer feature that—for the right target Flash player version (such as Flash project—makes an upgrade requirement player 7). In that case, any newer Flash 8 worthwhile. I’d imagine the video quality or features that don’t work in the older Flash alpha channels will be enough to convince player version you selected are grayed out. many users to make the leap to Flash player In fact, if, after you select an older Flash 8. Only you can answer whether a new player, you attempt to access a grayed-out, feature is profound enough or saves you off-limits feature such as 9-slice, you are enough time in production to require Flash presented with a dialog box and the option to 8—but there’s a lot of new stuff that could revisit your Publish Settings (as shown in easily tip the scale. Figure 1.9). The upgrade process to Flash player 8 has been vastly improved through what’s called FIGURE 1.9 Flash informs you when a feature is off-limits Express Install. If your user has Flash player to the Flash player you’re targeting. 6.0r65 or later, he already has an integrated feature you can trigger to install Flash player 8 inline. That is, the user doesn’t have to download something, quit the browser, run an installer, and so on. He simply clicks Yes in a security dialog box that appears right inside the Flash application (shown in Figure 1.10); a new browser window opens with Although you, the developer, undoubtedly your content, and Flash player 8 has been want to require your users to upgrade to Flash installed! player 8 so you can use all the cool new features, your boss, client, or customers might FIGURE 1.10 The inline Express Install dialog box not be so eager to upgrade their browser plug- appears inside your Flash application. ins to Flash player 8. On one hand, I under- stand this reality. It’s going to be a matter of time before Flash player 8 is an accepted minimum requirement for websites. However, it’s also important that you educate your boss, client, or customers. Express Install is not the only upgrade approach and has its drawbacks, such as needing to first check which version the user 16 CHAPTER 1: Exploring Flash 8
  4. has and creating a Flash player 6 .swf to Flash interface to control filters or blends, perform the Express Install. Just read the 25- producing videos that use the new On2 VP6 page document and associated sample files codec, and using advanced FlashType text in the Flash Deployment Kit (www. settings—none of which are fully supported, and in Flash Basic. you’ll learn all the available options. I Granted, Flash Basic is almost half the price predict that this Express Install feature, along of Flash Professional. But it’s not even that with the killer features such as filters and easy to purchase it. You can’t purchase Basic video, will greatly accelerate the adoption as part of Macromedia Studio 8 (the bundle rate for Flash 8 (historically taking 12 that also includes Dreamweaver, Fireworks, months for a new player version to reach and Contribute). And all upgrades from any 80% of all Internet users). older version of Flash lead to Flash Professional. Ultimately, the only good NOTE feature in Flash Basic is the fact there’s an integrated upgrade system to turn your The express install is simply the most advanced option version of Basic into Flash Professional 8. available because it performs the install from within the older Flash player.Traditional ways of upgrading users still exist. For example, the default .html gener- ated when you publish automatically presents the user ActionScript Additions with a traditional Active X install dialog box in Internet Explorer or the Missing Plug-ins button in Netscape ActionScript hasn’t gotten the same facelift it and Firefox. did when AS2.0 was introduced in Flash MX2004. Nevertheless, there are some pretty major additions to the ActionScript feature Flash Professional 8 and Flash Basic 8 list—too many, in fact, to list them all here. However, I’ll list the major new features in I suppose this is a bit of a sour way to end an the following sections because most appear otherwise exciting section about what’s possi- in later chapters (even if the appearance is ble with Flash 8, but I have to explain the often hidden away in the support files). differences between the two versions of the Flash 8 product. Unlike the confusing and subtle differences between Flash MX 2004 and A Programming Primer Flash MX 2004 Professional, the split between Because the section that follows this section Flash Professional 8 and Flash Basic 8 is covers new ActionScript features, you’ll find it profound. In a nutshell, the only reason to peppered with terms such as variables, purchase Flash Basic is if you need supple- instances, and properties. If this kind of infor- mental copies for machines dedicated for mation is familiar to you, feel free to skip some sort of Flash assembly line. Macromedia ahead to the next section (on the says Basic is for the “occasional user,” which flash.filters package). If such terms are is accurate if you don’t plan on using most of new to you, you’ll find additional definitions the new Flash 8 features, including using the for such terms in the Glossary (as well as in ActionScript Additions 17
  5. Chapter 2). However, instead of having you underscore in their names). Movie clip keep one thumb in the Glossary while you instances are the easiest type of object to read this chapter, here’s a narrative defini- understand because you can see them. But tion of the terms that appear throughout the there are also instances of the Sound and rest of this chapter and the book. Let me Date classes—just to name two. stress two things before I start: First, if you find this material basic, don’t worry, I promise you’ll get plenty of opportunities to NOTE adapt the projects in this book and flex your I capitalized Sound and Date because, when you programming skills. (I won’t treat anyone create an instance of these object types, you must use like a baby.) If, on the other hand, this mate- the exact, case-sensitive spelling. rial is totally new to you, this explanation will only provide an introduction to the Think of this analogy: People have properties terms I use in this book. I don’t suspect this (such as hair color, weight, and age) and cars quick lesson will turn you into a hardcore have properties (such as horsepower, make, programmer, but at least you can follow and model). Interestingly, sometimes two along when I explain the code behind the different object types share the same property. scenes of each project. You don’t have to add Cars and humans both have a weight prop- any custom programming to build the proj- erty. Similarly, movie clip instances and ects, but you can. And for me to explain button instances both have a width property. what’s going on, I have to use a program- Often, however, the available properties mer’s vocabulary. depend on the type of object you’re working It’s easiest to start with the most common with. Sound instances have a duration prop- object type, movie clips, because they have a erty, but movie clip instances don’t. visual representation on stage. A movie clip The good news is that the code you write to symbol on stage is called an instance. You address clips and their properties uses the can give each instance on stage a unique same form (or syntax) in every case regardless instance name by using the Properties panel. of the object type. Namely, the syntax to refer The instance name is used in your to an instance’s property always looks like ActionScript code to refer to the clip—or, this: myInstance.myProperty (or “object dot more technically, to address the clip. The property”). I use the prefix my to indicate reason you don’t use the symbol name (from something I made up so you don’t think the the master Movie Clip symbol in the Library) terms myInstance or myProperty are built in is because you might have multiple instances to ActionScript. Note that sometimes you of that same symbol on stage and you want want to set a property (perhaps set a clip to address each one individually. Why would instance’s _rotation property to make it you want to address a clip? Usually to spin); other times you’ll just need to get a change one of its properties such as its posi- property’s value to use within a larger tion on stage (either its _x property or _y statement. (A statement is a complete property, although there are many other properties and they don’t always have an 18 CHAPTER 1: Exploring Flash 8
  6. instruction—basically one line of code.) or presses a key. Naturally, there are all kinds Check out this example: of events, and like properties and methods, myClip._x = otherClip._x events vary depending on the object type. For example, Sound instances trigger or fire events when the event onSoundComplete is When Flash encounters this line of code, it encountered (that is, when the sound ends). interprets the code and executes the instruc- A button instance has an onPress event (but tions (meaning it does what the code says to no onSoundComplete event). Just as trees can do). In this example, the instance called fall in the woods without anyone to hear myClip gets its _x property set to a value them, events can fire in Flash and—unless equal to the _x property of another instance your code is listening for that event—they go called otherClip. (Anytime you see a single unnoticed. You have to write code to trap (or equals sign, it’s an assignment meaning “is listen for) an event and define exactly how now equal to,” as in “myClip’s _x is now you want to handle that event. What’s a little equal to otherClip’s _x”.) Notice that you’re freaky is that events are really properties to setting the _x property of myClip but only which you assign a value. Just as you might getting the property of otherClip. say myClip._x = 100 (to make the clip appear at the x position of 100), you Another important concept is methods. could say myClip.onEnterFrame = Methods are like processes or procedures myAnimationFunction—that says the myClip’s applied to a single instance. You can also onEnterFrame event (which fires every 1/12 of think of methods as the capabilities a partic- a second if your frame rate is 12 fps) ular object type supports. Back to the human is now equal to something called analogy: walk, talk, and comb your hair are myAnimationFunction. In both cases, a prop- all methods—they’re all things an instance of erty (_x or onEnterFrame) is assigned a value. a human being is capable of doing. Methods In this case, the value of the _x property is you can apply to movie clip instances assigned a value in the data type Number. If include play(), stop(), and gotoAndPlay(). I you were to assign the label property for a like to compare properties to methods Button component, you would want to use a because their syntaxes are nearly identical. value of the data type String. The value you It’s always “object dot method,” as in assign to an event is of the type Function. An easy way to distinguish methods is that they always have parenthe- You can create variables as a way to store ses. Some methods accept parameters (also data for later use. For example, you could called arguments) that provide needed addi- assign a variable’s value with this code: tional details. For example, when you say myName = “Phillip” (which means the vari- myClip.gotoAndPlay(1), 1 is a parameter able named myName is now equal to the string indicating which frame you want to go to. “Phillip”). You can change the value of a variable by simply reassigning a value, but Events are things that happen while a Flash at any one instant, a variable has a single movie plays. The most intuitive event types value. You can store any data type in your are things the user does, such as clicks, drags, variable, but you’ll often want to type your ActionScript Additions 19
  7. variables—that is, to define the variable with Sometimes the class you instantiate is part of the data type it is allowed to contain. Here is Flash and other times the definition for its an example of typing the myName variable as behavior resides in a class file (, a String data type: for example). For instance, I created an EventChannel class (in a file named var myName:String = “Phillip”; for Chapter 3. You create an instance by using the following syntax: The reason you type a variable is simply so myECInstance = new EventChannel(); that Flash will give you a warning when you publish if you write code that tries to assign a value that doesn’t match the data type you After you have an instance of a class stored declared. That way, Flash helps you uncover in a variable, you can do anything you want mistakes in your code. with that instance. That is, the class will probably expose public methods, which are methods you’re allowed to access and trigger. NOTE Just as you can say, In future versions of the Flash player, typing your vari- you can also say myECInstance. ables will make your projects perform much faster. startMonitoring() because I defined a public method called startMonitoring(). (Exactly what happens when that method Finally, terms such as object and class are gets triggered depends on what the program- thrown around a lot, but they’re actually mer designed the class to do.) I should note quite simple. I’ve been talking about movie that private methods can be triggered only clip instances because they’re so common, from within the class itself; they are like but they’re actually instances of the class internal utilities to help the class do its work. MovieClip. You could say that their object type is MovieClip. Instances of the class Many times, you need to reference a class’s MovieClip are easy to understand because complete path, as in this example: you make an instance by simply dragging the myInstance = new symbol from the Library onto the stage. For foldername.subfolder.MyClass() most other object types, you must formally instantiate them (as in “make an instance I’ll discuss class paths in Chapter 2, but just of”). You always instantiate an instance of a realize that there may be a MyClass class in class by using this syntax: the previous path shown and another— myInstance = new MyClass() completely different—version of the same name in another path. There’s no conflict You replace MyClass with the class you’re because the code doesn’t refer to MyClass but instantiating. (By convention, all class names rather to foldername.subfolder.MyClass. begin with an uppercase character.) Think how we have a president (like the 20 CHAPTER 1: Exploring Flash 8
  8. president of the United States), but you can code applies a BlurFilter with a factor of 50 also have the Portland Cactus Collectors to a clip instance named myClip when the President—and they reference different posi- user clicks the stage; it then applies a differ- tions. A class path is like a qualifier. ent filter, with a factor of 5, when the user lets go: With your ActionScript primer out of the way, we will move onto the key new ActionScript onMouseDown = function(){ features in Flash 8. var veryBlurry = new flash.filters.BlurFilter(50,50); myClip.filters = [ veryBlurry ]; The flash.filters Package } onMouseUp = function(){ Filters can be applied using the Filters panel var lessBlurry = (while authoring) or using ActionScript code. new flash.filters.BlurFilter(5,5); This enables you to write scripts that modify a myClip.filters = [ lessBlurry ]; filter’s effect at runtime. For example, you } could make some text get blurrier as the user moves the mouse away and sharper as the The flash.filters package lets you create mouse moves closer. Writing the code to any kind of filter the Filters panel can create, apply a filter at runtime is a two-step process. but you do it with ActionScript so it can First, you create a filter instance and store it respond to any event, such as the user’s in a variable. Second, you apply the filter to a mouse movement. One other thing to note is movie clip instance through its filters prop- that movie clip instances in Flash 8 have a erty. If you want to change the filter applied filters property. to a clip, you simply modify the filter or create another filter with different properties In addition to ActionScript equivalents to all and (in either case) overwrite the clip’s the filters in the Filters panel, ActionScript filters property. Here’s a simple example in offers three other classes (in the which we apply a blur filter to a movie clip flash.filters package) for even more instance named myClip: advanced effects—namely, ColorMatrixFilter, DisplacementMapFilter, myFilter = new flash.filters.BlurFilter(); and ConvolutionFilter. You’ll learn more myClip.filters = [ myFilter ]; about these in Chapter 9, “Creating Special Effects.” They’re identical to the Notice that the filters property is assigned an flash.filters package in that you still array that contains just one item (myFilter). apply them to the filters property, but the By putting more filters in the array you can way in which you create them is much more apply more than one filter. In addition, you involved. can set various parameters when you first call the BlurFilter() function to affect how much of a blur you want. For example, this ActionScript Additions 21
  9. myClip.attachBitmap(myBitmap, 0); Package Names Many of the names used in the section headings that For some reason, I often forget that second follow are based on the respective class package name. parameter (the level number), but this A package is simply the folder path to where the class parameter works the same way as how files are defined (within the Classes\FP8 folder attachMovie() places a clip into a level inside the FirstRun folder adjacent to your installed version of Flash).The reason you’ll want to become number. Every object, BitmapData or familiar with these paths is that you need to include MovieClip, that you create dynamically is the full package path in your ActionScript code. For placed into its own level within another example, to use the BitmapData class, you have to say movie clip—even if that movie clip is the flash.display.BitmapData. Chapter 2,“Producing main Timeline. The higher level numbers a Flash Project,” covers more of the technical details of make the object appear above objects in referring to ActionScript classes (including how to use lower-numbered levels. For the preceding the import statement), but for now, realize that I code to work, you’d have to have previously included the package names in the following descrip- created the myBitmap instance. Chapter 2 tions to be more explicit and help begin to make them shows a simple example using the more familiar. BitmapData class. I use the BitmapData class constantly to effec- The flash.display.BitmapData Class tively take a snapshot of part of the screen. For example, if I need to fade out one image There’s just one class in the flash.display while another image fades in, I simply make package, and it’s a powerful one. Many a BitmapData instance by copying the pixels people believe the BitmapData class is the from the outgoing image. Then I attach that biggest improvement in Flash 8. Basically, it’s BitmapData copy to a new clip (that I place a way to store raster images, which are really on top of the old clip) and then load a new just grids of pixels, into variables. You can image into the old clip. When the new image create a bitmap image from scratch (for is fully loaded, I can fade out the clip with example, you can create a grid of 10 × 10 the BitmapData instance. This is the same white pixels); you can load a bitmap from an technique used in Chapter 4, “Creating a image in your library (effectively copying the Portfolio.” pixels from an imported image); or you can copy pixels from an area or a clip on stage. After the bitmap data is stored in a variable, The flash.geom Package you can modify it—for example, you can On the surface, you might think the classes change its contrast or shape—and then in the flash.geom package would be attrac- display it on stage. This key step (necessary tive only to a true geometry nerd. And, in to see a BitmapData instance) is the fact, when you look at flash.geom.Point MovieClip class’ attachBitmap() method. and flash.geom.Rectangle, they’re pretty This method works just like attachMovie(), much as you might expect: They offer as you can see in the following example: methods for such things as calculating the 22 CHAPTER 1: Exploring Flash 8
  10. distance between two points or determining scrolling) a camera’s view of an object. For the union between two rectangles. First, example, this code makes it appear as doing those sorts of operations in the past though the myClip instance’s contents are was much harder—so this package actually shifting to the left when in fact it’s just the makes things easier. In the past, for example, scrollRect that is moving to the right: calculating the distance between two clips var panX:Number = 0; (say, instances mc1 and mc2) required you to onEnterFrame = function (){ remember the Pythagorean Theorem (you panX++; know, a squared plus b squared equals c myClip.scrollRect = squared—except to solve for c you need to new flash.geom.Rectangle(panX, 0, take the square root) and this not-so-lucid 200, code: 200); a = mc1._x - mc2._x; } b = mc1._y - mc2._y; cSquared = (a * a) + (b * b); c = Math.sqrt( cSquared ); Another movie clip property related to the trace(“distance is “ + c); flash.geom package is transform. This prop- erty actually contains several other proper- ties, but I’ll start with just transform.matrix. Using the new flash.geom.Point class makes The transform.matrix property is a way to it much clearer, I believe: store all of a clip’s properties (such as _x, _y, a = new flash.geom.Point(mc1._x, mc1._y); and _xscale) in a single array (really, a b = new flash.geom.Point(mc2._x, mc2._y); matrix of six numbers). In fact, you never c = flash.geom.Point.distance(a, b); have to use _x or _y again if you don’t trace(“distance is “ + c); want—all you have to do is modify the clip’s transform.matrix property. The In addition to helping you solve geometry transform.matrix can get very complicated. problems, you’ll also end up using the classes I have a simple and practical example in in the flash.geom package because several case you think matrixes are necessarily more other classes require that you pass parame- complex than properties such as _x and _y. ters with the data type Point or Rectangle. Suppose you want to set all the properties of In fact, every project in this book uses this one clip (instance name oneClip) to match package! another clip (with an instance name Like the new filters property for movie clip otherClip). The “old” way would look like instances, movie clips have new properties this: related to the flash.geom package. For oneClip._x = otherClip._x; example, there’s a new scrollRect property oneClip._y = otherClip._y; you can set equal to a Rectangle instance. oneClip._xscale = otherClip._xscale; This is like a mask because it reveals a oneClip._yscale = otherClip._yscale; //and so on ad infinitum rectangular portion of the clip, but the scrollRect property is more like panning (or ActionScript Additions 23
  11. The first line of code says, “the _x of the programming, you’ll find that they will dras- oneClip instance is now equal to the _x prop- tically simplify your ActionScript code. erty of the otherClip instance.” Then it continues for every property. Not only is that The flash.external.ExternalInterface wordy, but there’s no property for skew or tint. Class This class provides an easy way for Flash to Check out the “new” way that uses only one trigger JavaScript code (contained in the line: HTML web page that is hosting your .swf oneClip.transform.matrix = file) or for JavaScript code to trigger otherClip.transform.matrix; ActionScript code in your .swf file. Although you could send messages between JavaScript Because the transform.matrix property only and ActionScript in the past, doing so wasn’t reflects a clip’s scaling, rotation, and position very consistent and always required that the (called the translation on a clip), you must values being passed back and forth be of the use the transform.colorTransform property String data type. Now you can pass any to grab any tinting applied to the otherClip data type, such as an Array or a Number. In instance. You could add this line to copy the addition, calls are synchronous now, tint as well: meaning you can call a remote method and get an immediate response. oneClip.transform.colorTransform = otherClip2.transform.colorTransform; Going from Flash ActionScript code to JavaScript code is really simple: Just use the call() method and pass the function name Like I said, classes from the flash.geom you want to trigger as a string followed by package (and, perhaps more to the point, any parameters, which, incidentally, don’t movie clip properties such as scrollRect and have to be strings. Listing 1.1 shows the basic transform) appear in most of the projects in form of the call() method, and Listing 1.2 this book. After you grasp the core concepts shows specifically how to trigger JavaScript’s of using these classes in your ActionScript built-in alert() method. LISTING 1.1 Triggering“methodName”,”parameter”); JavaScript from Inside Flash LISTING 1.2 Triggering“alert”, “hello”); JavaScript’s alert() Method from Inside Flash 24 CHAPTER 1: Exploring Flash 8
  12. In Chapter 6, “Saving and Evaluating Quiz Explorer gets a reference to the Flash object Results,” you’ll see the ExternalInterface class (line 13) is different from how it is for used as a way for a .swf file to ask JavaScript Netscape or Firefox (line 16). This code to parse a query string in the HTML. assumes just two items not shown. First, the object and embed tags for your Flash movie Going from JavaScript to Flash ActionScript need to contain id=”example” and isn’t much more difficult, but because we name=”example”, respectively, because that’s don’t do it in any projects in this book, it’s the object name being referenced in line 8. worth detailing here. Letting JavaScript talk to (Those tags are added automatically if you Flash involves two steps: Make the call from publish a file called example.swf.) In addi- inside JavaScript and, from inside your Flash tion, somewhere in the HTML file, you need to file, identify the methods you want to expose trigger the doit() function. For example: to JavaScript. Here’s how: In the HTML file, you must include the code in Listing 1.3. homemade function called exposedFunction() and passes an array called myArray. The thisMovie() method gets The Flash ActionScript side of this example is a reference to the Flash object. You can see in shown in Listing 1.4. lines 12–17 that the exact way Internet LISTING 1.3 JavaScript 1 Triggering a Function Inside 2 function doit() { Flash 3 var myArray = new Array(); 4 myArray.push(“this”); 5 myArray.push(“that”); 6 myArray.push(“the other”); 7 8 thisMovie(“example”).exposedFunction(myArray); 9 } 10 11 function thisMovie(movieName) { 12 if (navigator.appName.indexOf(“Microsoft”) != -1) { 13 return window[movieName] 14 } 15 else { 16 return document[movieName] 17 } 18 } 19 ActionScript Additions 25
  13. LISTING 1.4 How Flash function exposedFunction(data:Array){ Exposes a Function for var total = data.length; JavaScript to Trigger results_txt.text = “got an array with “ +total + “ items”; } var methodName:String = “exposedFunction”; var methodReference:Function = exposedFunction; flash.external.ExternalInterface.addCallback(methodName, null, methodReference); The exposedFunction() method is plain old (that is, your code) from seeing the file’s full Flash code. The last three lines of code are the path. A user won’t want to reveal her steps you need to take to grant access to computer’s folder structure to your application exposedFunction(). That is, JavaScript can’t because that information could get sent back just reach in and trigger Flash code without up to your server. Because of this security the formal step of using the addCallback() feature, you can’t ask the user to select a file, method. such as an .mp3, and then immediately play that music file for her. (You could upload it The ExternalInterface class is a huge step and then play it, but that’s totally different forward for any project that needs to pass and a very slow prospect considering how data back and forth to a hosted environment. large files can be.) This time I said hosted environment instead of JavaScript to draw attention to the fact that When the user points to a file, she’s granting ExternalInterface is not limited to working you access to copy that onto your server. only with JavaScript. As you’ll see in Chapter There’s also a download() method that shows 8, “Creating a CD-ROM Front End,” there are the user a save as dialog box to allow her to third-party projector-making tools, and these download files from your server to her hard can benefit from the ExternalInterface class. drive. Integrating this sort of file upload/download The Package functionality into a Flash project in the past The package lets you present a required complex and, ultimately, clunky use standard file open dialog box that viewers of multiple HTML windows. Now you can do can use to browse to and select a file they it all from inside a Flash application. In fact, want to upload. Then your code can upload you will do exactly that in Chapter 10, that file. This process is secure for the user “Building a Photo Share Application,” where because the Flash player prevents the .swf file you make a photo-sharing application. 26 ActionScript Additions
  14. TIP Here’s a tiny addition that’s not documented and doesn’t really fit into any of the chapters in this book—but it’s quite useful and officially supported. The setTimeout() and clearTimeout() methods are just like the existing setInterval() and clearInterval() methods, but setTimeout() fires only once. setInterval() lets you trigger the same code repeatedly on a specified time interval—say, every 2 seconds.You can use it to animate something across the screen. Although that’s great for something that continues indefinitely, it’s a bit of a chore to keep track of all your intervals and clear them using clearInterval()—but that’s just the way it works. For the situations when you want something to happen, but not right away, and you want it to happen only once, you can use the new setTimeout() func- tion. For example, if you want a display that reads time’s up to appear after 10 seconds, you can use this code: clip._visible = false; setTimeout(function(){ clip._visible = true; }, 10000); The last parameter is in milliseconds. Final Thoughts I’m sorry if this chapter sounded like a sales job, but I actually restrained myself. The rest of the book is more matter of fact. The project-based chapters are all focused on specific tasks. Throughout the project chap- ters, I point out potential pitfalls and an occasional opinion based on my experiences. But in this chapter, my purpose was to get you psyched for the sorts of stuff you can do with Flash 8. Final Thoughts 27
  15. This page intentionally left blank
  16. CHAPTER 2: Project Producing a Flash @ work There are three general things you do in Flash: create graphics, animate in the timeline, and add programming (which, in addition to making your project behave differently based on data or user input, can in turn produce graphics and anima- tions). This chapter focuses on the programming. However, I want you to see how the graphics, animations, and programming elements are all connected. The most important question answered in this chapter is, “Where do I put stuff to make it behave the way I want?” I hope that most of the basic Flash information covered in this chapter is familiar to you. But, even if it seems too straightforward, please read it anyway because I make many statements about what I believe are best practices. My recommendations should help you avoid frustration. It’s alright if you don’t agree with my prefer- ences, but at least hear where I’m coming from. Everything is based on my experi- ence teaching Flash to many students over the years. Besides, the content here is very concise. In the last section of this chapter, you’ll get a good sense of exactly how you’ll be creating the projects that follow in the remaining chapters. Although each project chapter is different, they all draw from a few general frameworks. I’m sure that after you build a few projects, you’ll begin to see similarities; this chapter introduces everything more formally. You can download the source and starter files from the accompanying CD-ROM. Flash’s File Structure Flash is unlike many document-creation tools in that you don’t have a “document” (what the user sees) and the “tools” required to create or modify the document. It’s fair to say Flash’s stage is the document and the various panels (all accessible from the Windows menu) are the creation tools. But there’s so much more when you consider such facts as these: The timeline can have multiple frames; movie clips have their own timelines and can contain nested movie clips; and the scripts you write can cause the movie to jump around the different frames in a timeline in a nonlinear fashion, as well as change the appearance of any movie clip. Let’s discuss
  17. some of the big concepts and the pitfalls to The timeline shown in Figure 2.2 has dots in avoid. every frame, meaning each frame is a keyframe. That would be the case if you drew a unique image on every frame using a Scripting, Programming, Coding traditional frame-by-frame animation tech- All three of these terms refer to the same thing. All nique. If the dot is filled in, it simply means you’re doing is writing instructions you want Flash to something is present on the stage at that follow.The instructions you write when you program frame. Hollow dots mean that nothing is in for Flash must be very specific and use the ActionScript the keyframe, as might be the case when you language. want to remove something from the screen (perhaps a blinking effect where every other frame is blank). Timeline Animation Some programmers have a disdain for the FIGURE 2.2 This timeline shows a keyframe dot in every timeline. However, it’s important to realize frame. that animation can be a powerful way to communicate an idea or suggest a theme. Flash’s timeline automatically plays from frame 1 through to the last frame you create. Naturally, you can write a script to stop() on any frame you want or choose to create What you draw into each keyframe is up to everything in just a single frame. Compare you. But be sure to avoid adding a keyframe the timeline to a flip book that has a different unless there’s going to be something different picture on each page; the frames in the time- or new in that frame. That is, if you want a line are like the various pages in the flip title graphic to appear and then go away book. However, in Flash, only frames that are after a few seconds, you need one keyframe keyframes display something new. The time- when it first appears followed by 36 frames line in Figure 2.1 shows a keyframe in frame (not keyframes). On frame 37, you can add 1 followed by additional frames. Something another keyframe in which you delete the new such as a background image appears on title, thus making the keyframe a blank—and the first keyframe, but then nothing changes therefore changed—frame. in that layer for the following 10 frames. I came up with 36 frames based on the default frame rate of 12 frames per second FIGURE 2.1 This timeline shows a keyframe (the circle) at (fps). As a reference, conventional movies use the 1-second marker, followed by additional frames. 24 fps and television is approximately 30 fps. You can change the file’s frame rate to make the animation appear to move faster or slower by selecting Modify, Document and changing the fps value there, but that’s not the only way to make something appear to 30 CHAPTER 2: Producing a Flash Project
  18. move faster or slower in Flash. If you want a motion tweens over shape tweens because ball to move across the screen more quickly, motion tweens are much simpler to manage you can simply make the object move a and generally produce smaller files. bigger distance from frame to frame, thus Tweening is nice because it can relieve you making the trip across the screen take less from the otherwise meticulous work of frame- time. Realize, too, that using a higher frame by-frame animation. However, frame-by- rate can mean more work if you’re drawing frame animation is often the best option. Just something unique into each frame. a few strategically designed frames in your frame-by-frame animation can often NOTE communicate a feeling or message much better than a long, drawn-out tween the Flash’s frame rate has no impact on external Flash computer has created. A 1-second animation video (.flv) files.Their frame rate is set at the time with 12 carefully created frames playing at you create the video. 12 fps can look better than 36 frames played at 36 fps. Plus, your animation will appear The flip book analogy is great, but you proba- much snappier if you use fewer frames. bly don’t want to draw every keyframe your- Figure 2.3 shows a simple example in which self. For this, Flash has tweening. To tween, the frame-by-frame version uses half as you put an object in one keyframe and then many frames as the motion tween. add a keyframe to a later frame (not the very next frame) that contains the object in a FIGURE 2.3 Sometimes just a few frames in a frame-by- different location or physical state. Select the frame animation (bottom) is more effective than a long, first frame and use the Properties panel to set drawn-out tween (top). the Tweening values. In the first keyframe, you tell Flash how to interpolate the in- between frames so your object ends up looking like the object in the ending keyframe. You draw two frames, and Flash tweens the differ- ence. There are two kinds of tweens: Motion and Shape. Motion tweens require you to have a symbol instance (usually a movie clip) in both the first and last keyframes. Flash can tween any property of that clip, including its posi- tion, scale, rotation, tint, and the new filter The example in Figure 2.3 might be an exag- effects such as a drop shadow. Shape tweens geration, but my point is that drawing a few require that you have no symbol instances carefully crafted frames can be more effective (only shapes) in the two keyframes. Shape than having Flash tween. tweens can morph between any odd shapes You probably already know that the Flash you want, such as between a man and a timeline supports the concept of layers. werewolf. Given a choice, you should choose Flash’s File Structure 31
  19. Objects in higher layers appear in front of depict the first object and its change from the the objects in lower layers. In addition, first keyframe to the last keyframe; the special layer options are accessible from the second layer would treat the second object Layer Properties dialog box shown in Figure the same way. When played together, the two 2.4. You can specify one of the following layers would show the two objects moving in types of layers: possibly different directions (such as two balls bouncing). To put one ball in front of the . Normal layer—Anything you draw in other, you’d simply change the order of the a Normal layer (the default) appears in layers in the timeline. your final movie as it appears while authoring. FIGURE 2.4 Each layer has its own set of properties, as . Guide layer—You can draw reference defined in the Layer Properties dialog box. images that won’t export with the movie. . Guided layer—A motion tween follows a path drawn in a Guide layer. . Mask layer—Objects serve to reveal what’s in a lower layer that is set to the Masked layer type. If you wanted to create a round window port looking out on the ocean moving by, you’d draw a circle in a Mask layer. . Masked layer—You draw the content you want to reveal only where the Movie Clip Hierarchy content of the parent Mask layer After all this talk about the things you can do appears. For example, you could with multiple frames in the timeline, you animate an image of the sea in a might be surprised to discover that every Masked layer as it’s revealed through project in this book uses just one frame! That’s the circular window shape in the Mask true because there are two ways, other than layer. using multiple frames, to make something animate: You can use code to set a movie clip’s properties such as _x and _y (the x and To specify which type of layer you are y coordinates to see it change position on working with, select Modify, Timeline, Layer stage), or you can use the timeline contained Properties. in every movie clip. Try this: Create a movie In addition to how layers stack images (and clip by drawing a shape; selecting it; and arguably more importantly), each layer then selecting Modify, Convert to Symbol. contains a single animation track. So, if you Then click the Movie Clip option and click want to make a motion tween with two OK. In place of the shape you drew you’ll things moving at the same time, you can use have an instance of the clip you just created; two layers. One layer’s motion tween could 32 CHAPTER 2: Producing a Flash Project
  20. double-click it to edit its contents to see that the cell in frame 20 (underneath the 20 in the it contains a timeline of its own. timeline but inside your layer) and press F6 to insert a keyframe. Finally, select the first Notice in Figure 2.5 that the Edit bar shows keyframe in Animating Wheel and use the you are inside the movie clip symbol named Properties panel to select Motion from the Box. The content of this symbol is simply a Tween drop-down list. Also, select CW to drawn shape, the dark square in the lower- make the Wheel instance rotate once between left corner (when a shape is selected, the frames 1 and 20. Return to the main timeline Properties panel says Shape). The other and create another instance of the Animating objects on stage appear faded because, Wheel symbol by copying the instance on although you’re inside the Box clip, you’re stage or by dragging a new one from the editing it in the context of other objects on Library panel. Now draw a car body around the stage. Alternatively, if you open the the two wheels, select everything, and press Library and select a symbol to edit, you F8 to create another movie clip—this time won’t see anything except that clip’s called Car. You’ll be able to use an instance contents. of the Car symbol to make a motion tween in What you must take away from this the main timeline, perhaps making the car overview is that you must always know move across the screen. When you publish it, where you are in your movie. The Edit bar, not only will the car move, but its contained shown in Figure 2.5, shows you where you rotating wheels will also move. are at all times. Because you can nest instances of other symbols inside a symbol, the hierarchy can get tricky; however, the Instances Versus Symbols Edit bar tracks the nesting of the symbols It’s important to understand that, when you make one and helps you determine just where you are. master symbol, you can create multiple instances of The Edit bar helps you maintain your bear- that symbol anywhere in the movie except inside the ings when creating complex symbols such as master symbol itself.The terms symbol and instance are a car with rotating wheels—you’d have a car not interchangeable. Equally important is the fact that symbol instance that animates across the a symbol always has a name that appears in the screen, with its wheels also rotating. First Library. Each instance of that symbol on stage can be draw a wheel with spokes; select it; and select given an instance name that certainly doesn’t have to Modify, Convert to Symbol. Then select the match the original symbol’s name. Because you can Movie Clip option, and click OK. Select the have many instances of a particular master symbol, the instance names let you address each instance inde- instance of the Wheel now on stage and select pendently using ActionScript. So, you don’t say,“set the Modify, Convert to Symbol to nest the Wheel height of the box symbol to 100,” but rather you say, inside a new symbol; this time, though, call “set the height of the instance of the box symbol with the movie clip Animating Wheel. Go inside the instance name littleBox to 100.” (The actual code is the instance of Animating Wheel by double- easier to read: littleBox._height = 100.) clicking it, where you’ll find an instance of Wheel. While inside Animating Wheel, click Flash’s File Structure 33
Đồng bộ tài khoản