Building Conscientious Components
|
|
We've come to the conclusion that any project can use many components at once, and we should therefore be mindful of the preloading aspect. However, a completely conscientious component-one that is "aware" of what is going on elsewhere in the Flash movie-will do more than simply improve the preloading; it will be able to handle whatever the user throws at it, whatever the rest of the movie is doing, and all of this in an efficient manner.
Tracking a Component's Mode
With the preloading problem fixed, the next most important thing to keep in mind when creating a component is efficiency-its effectiveness at taking care of a task. Always remember that the user of your component will have many components in their projects, so you cannot tie up the CPU with many calculations. Your component is hardly ever going to be the only one in use; if you lose track of this, you will end up bringing the computer to its knees.
If your component is quite large and complicated, it is a good idea to have a mode variable that keeps track of the current mode of the component from a selection of many modes. For example, the audio and video components covered in Chapter 8 had modes for when the media played, stopped, paused, streamed, and so on. By keeping track of the mode of a component, you can make sure that you are performing calculations specific to some mode and not executing surplus actions that will not do anything, but nonetheless take up CPU cycles.
Tracking a Component's Mode by Strings
There are many ways to implement a mode system in your components, but we'll discuss two popular customs here. The first is using strings to determine a stage. Simply declare the variable mode in your component's ActionScript class and assign a string to it describing the mode it is in. Keep track of the modes that you allow the component to be in, maybe by making a commented list of the modes at the top of your actions. To change the mode of the component, simply reassign the mode variable to another string. Then, when you want to determine what mode the component is in, you can do a series of if statements:
if (this.mode == "Mode0") { // actions for Mode0 } ... if (this.mode == "ModeN") { // actions for ModeN }
Tracking Mode by Bitwise Operations
Another way to set up a similar system takes advantage of the bitwise operations Flash can perform. To understand bitwise operations, consider the fact that every positive integer can be represented as a string of 0s and 1s, called the binary representation of the number. You do not need to know anything about how to convert binary numbers to decimal or vice versa, because the idea is very simple. All you need to know is that each digit is associated with a decimal number that is a power of 2; the first digit is associated with 2, the second with 4, the third with 8, and so on to the nth digit, which is associated with 2n.
 |
The more modes there are, the bigger the advantage of this "bitwise ops" method over the "strings" method.
|
To see how this information helps us, imagine a long string of digits, containing only 0s or 1s, where each digit has a mode linked with it. If the digit for a mode is 0, then the component is not in that mode, but if the digit for a mode is 1, then the component is in that mode. Therefore, instead of keeping track of strings, which use more memory than integers, we can use one binary representation to keep track of many modes once. In fact, if needed, we can have a component be in multiple modes at once.
Before we can use this type of mode tracking, we must first familiarize ourselves with bitwise operators. Each digit of a binary number is called a bit, so a bitwise operation is something that acts on the individual bits of the number. Given two binary numbers, say X and Y, the operator & is called the bitwise AND, and it performs a logical operation on each pair of bits in X and Y and returns a new binary string. If each bit in a pair is a 1, then the new string has a 1 in the same bit, otherwise there is a 0 in the bit. As an example, consider the following two binary numbers and the binary number that results from the action of &:
1001101010 & 1100101000 1000101000
Another bitwise operation is |, which is called the bitwise OR. Consider the action of the operation on two binary numbers X and Y. Taking each pair of bits in X and Y, we assign the resultant binary number a 0 if the pair consists of two 0s, and a 1 otherwise. For example, here is the previous example using | instead of &:
1001101010 | 1100101000 1101101010
Finally, the bitwise operation ^ is called the bitwise XOR, where XOR stands for exclusive OR. The ^ operation is the same as |, except for the case when both digits in a pair are 1, in which case the resultant binary number has a 0 in its digit. Here is our example using the ^ operator:
1001101010 ^ 1100101000 0101000010
We construct this binary system for controlling the mode of a component by first declaring constants. The constants hold values of powers of 2 that represent each possible mode. For example, the AudioPlayer component discussed in Chapter 8 used the following constants for its modes:
this.PLAYER_INITIALIZING = 2; this.PLAYER_PLAYING = 4; this.PLAYER_STOPPED = 8; this.PLAYER_PAUSED = 16; this.PLAYER_CHANGING_VOLUME = 32; this.PLAYER_CHANGING_PAN = 64; this.PLAYER_STREAMING = 128;
Remember that we use the variable mode to keep track of the current mode of the component. Before, when using strings, we would have to reassign the mode variable another string, but now we only need to find the bit associated with the mode we want to change to and set its value to 1. To do this, we concatenate the mode variable with whatever mode you want to change the component to by means of the | operator. In reverse, removing a mode from the mode variable is done with the ^ operator. Listing 12.1 is an example use of the bitwise operators.
Listing 12.1: Using the | and ^ Operators to Add and Remove Modes to the Component
|
// initial mode of the audio player this.mode = this.PLAYER_INITIALIZING; // change the mode to stopped and streaming this.mode |= this.PLAYER_STOPPED; this.mode |= this.PLAYER_STREAMING; // remove the streaming and stopped modes, and set to playing mode this.mode ^= this.PLAYER_STOPPED; this.mode ^= this.PLAYER_STREAMING; this.mode |= this.PLAYER_PLAYING;
|
Since the mode manager has been vastly changed through the use of bitwise operators, the way of checking which mode the component is in has also changed. To determine if the mode variable has a 1 in the bit associated with a certain mode, you merely concatenate the mode variable and the mode constant; it will return a 0 if the mode is inactive and return a nonzero positive integer if the mode is active. In other words, the series of if statements and string comparisons are replaced with the code in Listing 12.2.
Listing 12.2: Using the & Operator to Test Whether a Mode Is Active
|
if (this.mode & this.PLAYER_INITIALIZING) { } if (this.mode & this.PLAYER_PLAYING) { } if (this.mode & this.PLAYER_STOPPED) { } if (this.mode & this.PLAYER_PAUSED) { } if (this.mode & this.PLAYER_CHANGING_VOLUME) { } if (this.mode & this.PLAYER_CHANGING_PAN) { } if (this.mode & this.PLAYER_STREAMING) { } |
By utilizing this new structure, we can manage many modes at once and mix and match distinct modes with each other. For example, using the binary mode system, the audio player was able to be in multiple modes at once. If the modes had been implemented via strings, I would have had to use many more string values. If you are wondering just how much "many more" is, then suppose your component can be in seven disjoint modes, much like the audio player. In that case, there are 128 ways to combine the modes into new modes. This is obviously very messy to keep track of.
Sizing a Component Interactively
Your component must be able to handle almost anything that happens to it. Flash MX provides some new tools that allow you to integrate components seamlessly. For example, the Stage object gives you access to properties of the stage that were unavailable in Flash 5, such as its width and height. If in your HTML page you have a Flash movie filling an entire frameset, table cell, or even the entire web page, then the embedded movie will change dimensions as you resize the browser window. Previously, it was impossible to get the data of how much of Flash's stage was visible, but now it is all public information, available through the Stage.width and Stage.height properties.
Before using the Stage.width and Stage.height properties, you must be familiar with the alignment conventions that Flash uses and its scaling modes. The Stage.align property is used to set the alignment of the Flash movie. The possible values you can assign to the property are listed in Table 12.1.
|
| VALUE | FLASH MOVIE ALIGNMENT |
|---|---|
| | |
| T | The top of the stage is always at the top of the movie. |
| B | The bottom of the stage is always at the bottom of the movie. |
| L | The left edge of the stage is always at the far left of the movie. |
| R | The right edge of the stage is always at the far right of the movie. |
| TL | The top-left corner of the stage is always at the top-left corner of the movie. |
| TR | The top-right corner of the stage is always at the top-right corner of the movie. |
| BL | The bottom-left corner of the stage is always at the bottom-left corner of the movie. |
| BR | The bottom-right corner of the stage is always at the bottom-right corner of the movie. |
| [Default] | Any value different from the previous eight aligns the Flash movie such that the center of the stage is always at the center of the movie. |
|
The Stage.scaleMode property forces the movie to a specified scale mode. Examples of these modes are when you right-click a Flash movie and select either 100% or Select All. The possible values you can assign to the property are listed in Table 12.2.
|
| VALUE | FLASH MOVIE SCALING |
|---|---|
| | |
| exactFit | The movie's stage (defined in the Document Properties dialog box) fits exactly in the player. This means that the contents of the Flash movie are stretched and distorted in order to fit into the player. |
| showAll | All of the movie's contents are visible and undistorted no matter how the user sizes the player. |
| noBorder | Nothing outside of the movie's stage is visible, but the movie is undistorted. |
| noScale | The movie does not scale at all in this mode. |
| [Default] | Any value different from the previous values sets the scaleMode to noScale. |
|
| On the CD | To see how each of these values affects the alignment and scale of a movie, open the AlignOptions.fla file in the Chapter 12 folder on the CD. A border has been drawn around the perimeter of the stage so that we can see where the stage is positioned when using the various alignment values. Open the actions for the first frame, and you will see that each alignment value has been assigned to the Stage.align property, but all are commented out except for one. Experiment with the values by uncommenting one setting, commenting out all others, and then testing the movie. |
| On the CD | Using this knowledge of alignment and scaling with the Stage.width and Stage.height properties, we can make movie clips that always stay in a certain corner of the movie even when the user goes wild with resizing the player. In the Chapter 12 folder you will find the file CornerAlign.fla. Four movie clips have been created in this file, and actions attached to them force them to stay in each of their respective corners no matter how the user resizes the player. It is best for you to see this yourself. Open the file, test it, and resize the Flash player to any crazy dimensions you want. In previous versions of Flash this was unheard of; there was no way to get the dimensions of the visible stage, let alone control the properties of the stage. |
The file was entirely made from the actions in the first frame of the Actions layer. The first thing the actions take care of is setting the properties of the stage. Since we want to place movie clips in the corners of the stage, there should be no scaling involved when the user changes the dimensions of the player. Therefore, Stage.scaleMode is set to noScale. The top-left stage alignment was used, although any of the possible values could have been used. Top-left was chosen because the stage's origin (0,0) will always be at the very top-left corner of the player.
Next, the onEnterFrame handlers for each movie clip were set. These are functions attached to the movie clips that are called every frame. The functions take care of positioning the movie clips. The top-left movie clip is simply placed at (0,0), the top-right movie clip is placed at (Stage.width,0), the bottom-left movie clip is placed at (0,Stage.height), and finally the bottom-right movie clip is placed at (Stage.width,Stage.height).
Knowing this feature, you can build powerful components-for example, drop-down menus or audio players that snap to the sides of the screens. One component you might want to experiment with to test your knowledge of the Stage object and creating components is a BorderComponent: a component that will tile a graphic around the edges of the player. Since you can determine the edges of the player with the Stage object, all that's left is to position and scale some images around the border.
Making a Component Robust
Outside of making your component handle any situation, you also need to thoroughly test it to make sure there are no bugs. The first determinant of your component's stability is if it works with many instances of the component on the stage. Simply drag a few instances of your components, and even other components, to the stage and make sure your component functions as it should. Testing a component's functionality means experimenting profusely with the component's parameters. Try all combinations of the values, and make sure to try a few extreme cases, the types of values you do not expect a user to ever enter but that might break your component. Take debugging your component very seriously. In most cases, the foundation of your movie rests on the solidity of the components you use. You are in a sense trusting the components you use with the very idea and movement of your project, so you are in trouble if the basis of your system is buggy.
|
|
EAN: 2147483647
Pages: 111