List of Figures

Chapter 1: The Flash Authoring Tool

Figure 1.1: The Color Mixer panel allows you to change the color of things.

Figure 1.2: Panels can be collapsed when they're not being used, so they don't waste desktop space.

Figure 1.3: The stage is where all the action happens.

Figure 1.4: The Tools panel allows you to select and manipulate objects on the stage as well as create original art.

Figure 1.5: The Create New Symbol dialog box is used to create new objects and art assets.

Figure 1.6: The top of the stage has icons that represent different timelines you have open for editingin this case, Scene 1 and ball.

Figure 1.7: The library is a storehouse for all your Flash assets, including art, sound, movie clips, buttons , animations, and the like.

Figure 1.8: The mouse pointer changes when you are ready to drag an object on the stage.

Figure 1.9: Different symbol types have different icons for easy identification.

Figure 1.10: The Properties panel allows you to edit properties of anything on the stage.

Figure 1.11: The Properties panel shows properties for a text field when one is selected.

Figure 1.12: The Transform panel allows us to scale, rotate, and skew a movie clip instance on the stage.

Figure 1.13: The Skew property allows you to do some strange -looking stretches. It uses an angle measure for its calculations.

Figure 1.14: The timeline breaks down a movie clip into frames .

Figure 1.15: The timeline has layers that can be locked, hidden, named, and ordered.

Figure 1.16: When a frame is selected, the Properties panel has a field used to name it.

Figure 1.17: A labeled frame contains a red flag to let you know it has a name.

Figure 1.18: If blank frames follow a labeled frame, the name is displayed in the timeline.

Figure 1.19: Many settings can be altered to customize the way that a movie is published.

Chapter 2: Flash ActionScript

Figure 2.1: The Actions panel has a large set of options to make your life as a programmer easier.

Figure 2.2: You can drag the reference window closed until you need it.

Figure 2.3: By naming a movie clip on the stage, you can affect it with ActionScript that is attached to a frame in the same timeline that the clip exists in.

Figure 2.4: ActionScript has been attached to frame 5 of the Balls layer.

Figure 2.5: Each ball has its own event handler that does something different.

Figure 2.6: The Output panel alerts you to syntax errors in your scripts.

Figure 2.7: You can use the trace function to print messages to the Output panel during movie testing.

Figure 2.8: If you print something every frame, your Output panel becomes flooded with text.

Figure 2.9: You can use trace to print the current value of a variable into the Output window.

Figure 2.10: The output of both statements is the same because of operator precedence.

Figure 2.11: The pre- and post-increment operators both add 1 to a variablethe difference is when it happens.

Figure 2.12: The pre- and post-decrement operators work identically to increment except that they subtract 1 instead of adding it.

Figure 2.13: The modulus operator gives the remainder after integer division.

Figure 2.14: Strings can be concatenated using the addition operator.

Figure 2.15: The if conditional allows you to execute a code block when some condition is true and skip the block when the condition is false .

Figure 2.16: The if else conditional allows you to execute one code block when some condition is true and execute a different code block when the condition is false .

Figure 2.17: The else if conditional allows you to test a second if statement only when the first if has evaluated as false .

Figure 2.18: You can place an else conditional on the end of an else if conditional that will execute only if both previous if statements evaluate as false .

Figure 2.19: You can nest an if conditional inside the code block of another if conditional. Sometimes these nestings can become deep and complex.

Figure 2.20: A while loop executes its block of code repeatedly until its condition tests false .

Figure 2.21: A do while loop always executes its code block one time before testing the condition.

Figure 2.22: A for loop is a handy way to execute a code block a specific number of times.

Chapter 3: Programming Interactivity: Mouse Chaser

Figure 3.1: The Math object contains many functions that you can use to do mathematical calculations.

Figure 3.2: When we type the name of a predefined object followed by the dot operator, Flash gives us a pop-up box listing all known member names .

Figure 3.3: Flash helps us remember arguments by giving us a hint when we are typing.

Figure 3.4: User -defined functions are written once but can be called many times from anywhere in your script.

Figure 3.5: This is the output from several calls to the function we have defined. Notice the missing argument in the third line.

Figure 3.6: This is the result of a call to our division function. Notice that the "just did division" message is not displayed.

Figure 3.7: Each ball has its own variable called myString that contains its personal description.

Figure 3.8: The stage is a Cartesian plane with the origin in the upper-left corner. Positive x goes right, and positive y goes down.

Figure 3.9: The black plus symbol is the clip's registration point. When you position a clip with the Info Panel or by setting its _ x and _ y properties, its registration point is placed exactly at the prescribed position.

Figure 3.10: We rotate a clip by adding to its _rotation property. Flash automatically converts the _rotation into the range of 180 to 180.

Figure 3.11: The ball clip contains an instance of the square clip, which in turn contains an instance of the triangle clip.

Figure 3.12: The three shapes are combined as one instance on the stage. This is how mine looked before I started adding script.

Figure 3.13: The triangle clip has script attached that sets its _parent 's _xscale to 50.The square clip, which contains this triangle instance, is affected.

Figure 3.14: The square clip has script attached that sets its _parent 's _xscale to 20. The ball clip, which contains this square instance, is affected.

Figure 3.15: The _xmouse and _ymouse properties indicate the position of the mouse pointer relative to the movie clip to which they are attached.

Figure 3.16: The _root._xmouse and _root._ymouse properties indicate the position of the mouse pointer relative to the stage.

Figure 3.17: Here's a freehand drawing of what I think the Mouse Chaser game will look like.

Figure 3.18: My artist, Rachel, decided that the critter would be a fat purple bat with flapping wings. I then created some tweened animation for it.

Figure 3.19: The critter's home makes the backdrop of the game.

Figure 3.20: The target movie clip has flashing text and will be moved about the stage for the user to click on.

Figure 3.21: The scoreboard symbol contains two text boxes. The second one, a dynamic text field, is selected in this figure and its Var field is set to _root.score .

Figure 3.22: After you implement the first half of the moveBat function, you can test the move and watch the bat fly after the mouse pointer.

Figure 3.23: The new moveBat function traces a message when the bat collides with the mouse pointer. We'll now need to swap this trace call for a function call to one of our own functions.

Figure 3.24: The hitTest function will return true only if the coordinates we supply are within the area of the movie clip that the function is called on.

Figure 3.25: With the testTarget function complete, we are fully implemented and ready to test our game.

Chapter 4: Creating Instances Dynamically: The Button Menu

Figure 4.1: The external linkage of a library symbol is used when a clip is created dynamically.

Figure 4.2: Checking Export for ActionScript lets you type an identifier.

Figure 4.3: Three clips are created. The order in which they are stacked depends on their depth setting.

Figure 4.4: After you have set a clip's properties, you can duplicate it and save yourself the trouble of setting up many clips the same way.

Figure 4.5: When clips are attached to a parent clip and the parent clip has a property changed, all child clips are displayed with the changes applied to them as well.

Figure 4.6: You can define a function once and then attach it to multiple clips. Because the clips use the this keyword, each is affected by its own handler.

Figure 4.7: The onMouseDown handler is called whenever the user clicks the mouse, no matter where on the stage the mouse is located.

Figure 4.8: The onMouseUp handler is called whenever the user releases the mouse, regardless of where on the stage the mouse is located.

Figure 4.9: The onMouseMove handler is called whenever the user moves the mouse, regardless of how far it moved, where it is located on the stage, or if the mouse buttons are up or down.

Figure 4.10: The first step in creating a button is to draw the button's _up state in the first frame.

Figure 4.11: After you have labeled your _up , _over , and _down frames, Flash knows automatically which frame to go to for the correct display.

Figure 4.12: The onPress event will only occur when the user presses the mouse button over the clip to which the handler is attached.

Figure 4.13: By using the various button event handlers, a movie clip can be turned into a fully interactive button.

Figure 4.14: The hit area of a button can be defined as any movie clip on the stage using the hitArea property of the button clip.

Figure 4.15: In the Create New Symbol dialog box, you can open the Advanced panel and set your linkage properties during creation.

Figure 4.16: When we are finished, our button menu will look like something like this.

Figure 4.17: The example button has three layers in its timeline one for labels, one for button art, and one for the button's text field.

Figure 4.18: The buttons are in a column now, but their timelines are being played repeatedly, their text is not set, and they are unresponsive to the mouse.

Figure 4.19: After initialization, the buttons should appear in a column with the appropriate text in each.

Figure 4.20: The buttons should now be responsive to the mouse. However, they don't have activity functions yet, so they won't do anything when clicked other than change appearance.

Chapter 5: Arrays: Match 'Em up and Sliders

Figure 5.1: An array is a block of variables .

Figure 5.2: An array populated with a for loop using the script myArray[i] = i*10; .

Figure 5.3: Skipping elements in an array causes Flash to fill in missing elements with undefined .

Figure 5.4: The toString method prints out all the values in an array separated by commas.

Figure 5.5: The join method is like toString , but it allows you to choose your separator.

Figure 5.6: A concatenated array contains copies of all the values in the array it's called on, as well as the values given as arguments.

Figure 5.7: The reverse method swaps all the elements in an array so that their order is reversed .

Figure 5.8: The pop method can be used to remove the last element in an array and return its value.

Figure 5.9: The push method allows you to add a new element to the end of an array without knowing the index of the last element.

Figure 5.10: The shift method removes and returns the first element in an array. The remaining elements are copied down one location.

Figure 5.11: The unShift method adds a new element to the beginning of an array. All elements in the array are first copied up one space.

Figure 5.12: Our array gets sorted by the sort method, but not alphabetically .

Figure 5.13: By using our own comparison function we can get sort to alphabetize our array of strings.

Figure 5.14: The slice method can be used to copy a portion of an array into a new array.

Figure 5.15: The slice method can take negative arguments. When doing so, it counts backward from the last element, instead of from the front of the array as it did with positive arguments.

Figure 5.16: The splice method adds and deletes elements from an array. Unlike slice , the original array is altered with this method call.

Figure 5.17: Nested arrays are powerful tools. Here, join is called to print a set of nested arrays.

Figure 5.18: A one-dimensional array is just one long block of elements. A two-dimensional array is divided into rows and columns .

Figure 5.19: A multidimensional array can be used with a double index. The first index is the row and the second index is the column.

Figure 5.20: An array can have as many dimensions as you like; this one has three. I divide them up into blocks, rows, and columns.

Figure 5.21: The eval function gives an absolute path , whereas array notation gives a relative one.

Figure 5.22: The tiles are all scaled and in place with their blocker on top.

Figure 5.23: The shuffleTiles function mixes up all the tiles. By removing the blocker attachment line, you can see this random shuffling of tiles.

Figure 5.24: The game is working correctly, but perhaps not as well as we would like.

Figure 5.25: After implementing a pause and a reset game routine, our matching game is running like a dream.

Figure 5.26: Rachel created a goofy yellow face for the sliding tile game so that it could be easily identified even when scrambled.

Figure 5.27: With multiple movies open, you can drag symbols between libraries to make copies of old symbols in your new movie's library.

Figure 5.28: The Chapter 5 button has been stripped down to be used in sliders.

Figure 5.29: A scoreboard is easy to implement. Just create the text fields and tie the dynamic one's Var field to the variable of your choice.

Figure 5.30: All the tiles are placed on the stage and positioned. Soon we'll scramble them.

Figure 5.31: The buttons and scoreboard are in, but because we can't scramble the tiles yet, neither button does anything when clicked.

Figure 5.32: The game should be working perfectly now. Everything has been implemented.

Chapter 6: Objects: Critter Attack

Figure 6.1: The Boolean , Number , and Array reference are of type object . The function is of type function , and the primitive, x , is of type number .

Figure 6.2: The core and movie objects are broken into two groups global objects and instance objects.

Figure 6.3: The charAt function prints each character in the string, one at a time.

Figure 6.4: The string is printed one character at a time, but ASCII values are printed instead of the actual character.

Figure 6.5: The concat method can be used to create a large string from several smaller strings.

Figure 6.6: Slice is used to extract a substring from a String , given a starting index.

Figure 6.7: A negative argument to slice causes Flash to count from the end of the string, not the beginning.

Figure 6.8: The substr method is similar to the slice method, except that the second argument is a length and not an index.

Figure 6.9: The substring method is named in a similar way to substr but behaves much like slice .

Figure 6.10: The split method returns an array of substrings, created using a delimiter handed in as an argument to split .

Figure 6.11: The toUpperCase and toLowerCase functions are used to convert strings into all uppercase or all lowercase.

Figure 6.12: The call method can call a method of one object as if it were a method of another object.

Figure 6.13: By cycling through the scale modes, you can get a feel for them.

Figure 6.14: By cycling through alignments, you can get a feel for each.

Figure 6.15: The first two hex digits are red, the next two are green, and the final two are blue.

Figure 6.16: The output of getRGB is unreadable unless you call toString(16 ) on its result.

Figure 6.17: A color transform application is a good way to get a feel for the transform parameters.

Figure 6.18: The _target property gives an absolute path name to the clip using slash syntax.

Figure 6.19: The getBounds method finds the bounding box around a movie clip.

Figure 6.20: The localToGlobal method takes a point that is relative to a clip and converts it into stage coordinates.

Figure 6.21: The globalToLocal method turns a point relative to the stage into a point relative to the clip you called globalToLocal on.

Figure 6.22: The lineTo method call draws a line, assuming you have set a line style with a call to lineStyle .

Figure 6.23: The curveTo method draws a curve from the current drawing point to a given point ( x , y ), using another given point ( controlx , controly ) as a guiding point for the curve.

Figure 6.24: After calling beginFill , Flash fills all enclosed shapes you draw with calls to lineTo .

Figure 6.25: The ship is now controllable with the keyboard.

Figure 6.26: The aliens are now moving about the stage.

Figure 6.27: The aliens can fire bullets at the player, and the player can fire his own bullets back.

Figure 6.28: The Game Over panel appears when the player dies.

Figure 6.29: The randomly attached dots create a nice star effect.

Figure 6.30: The Instructions panel tells the player which keys to use and requires him to click a button to give your movie focus.

Chapter 7: Real-Time Programming: Shoot 'Em Up

Figure 7.1: The optional arguments at the end of a setInterval call are used to give arguments to the function that the internal event is calling.

Figure 7.2: A simple state machine shows the state changes that Flash does for you in your button movie clips.

Figure 7.3: A simple state machine for a unit in a realtime strategy game.

Figure 7.4: Rachel has created a chubby yellow hippo that our user will be able to hunt.

Figure 7.5: The forest where the player will hunt Lester.

Figure 7.6: Lester looks like he's really hurting when the player puts a slug into his thick yellow hide.

Figure 7.7: Lester is tweened and appears to run from frame 1 to frame 39.

Figure 7.8: Lester appears hurt beginning at frame 40.This continues through frame 78 where he is reset to frame 1 again.

Figure 7.9: The dead Lester needs no tweening, so it's only a single frame long.The only thing we need is a frame label of dead .

Figure 7.10: A bullet hole with a tweened drop of blood running out of it.

Figure 7.11: The library contains a folder that, in turn, contains each of the trees, the pond pieces, and the background.

Figure 7.12: Lester's text bubble is used to explain the rules of the game to the player.

Figure 7.13: The scoreboard has one line for the score (the number of times Lester has kicked the bucket) and a second line for the remaining time.

Figure 7.14: The frame counter symbol tells us how many frames are actually being displayed each frame.

Figure 7.15: The crosshair symbol will be used instead of the mouse pointer when the game is played.

Figure 7.16: The bullet symbol will be used to show the player how many more rounds he has before he must reload the shotgun.

Figure 7.17: The stage has been set; now we're ready to create Lester's introduction.

Figure 7.18: A generalization of the state machine used in Lester's introduction.

Figure 7.19: Lester's introduction is now complete and you can watch him give you instructions.

Figure 7.20: The entire game is implemented, with the exception of the sound effects.

Chapter 8: Advanced Timing and Trigonometry: Blow 'Em Up

Figure 8.1: A few right triangles with their right angles marked .

Figure 8.2: A right triangle has its legs labeled a and b and its hypotenuse labeled c. The angles are labeled A, B, and C.

Figure 8.3: We want to find the distance between two points, A and B.

Figure 8.4: We draw a right triangle between the points A and B. The sides opposite points A and B are labeled a and b.

Figure 8.5: The point B is inside a bounding circle.

Figure 8.6: The ratio of the required distance and the actual distance is the same as the ratio between the required change in x and the actual change in x.

Figure 8.7: We create a right triangle between the bat and the mouse so that we can compute the bat's new coordinates.

Figure 8.8: Angles on the Cartesian plane are drawn starting at the X axis. These angles are given in degrees. The angle is usually labeled theta ( ).

Figure 8.9: A segment drawn from (0,0) to (1,0) can help us visualize the sine and cosine functions.

Figure 8.10: As you move the line segment (which always has length of 1) around the origin, the sine of the angle gives the Y value and the cosine gives the X value of the segment's endpoint.

Figure 8.11: The sine wave occurs often in nature.

Figure 8.12: The cosine function is identical to sine except that it starts at y=1.

Figure 8.13: The tangent function varies from negative infinity to infinity across the period of .

Figure 8.14: The sides in a right triangle are labeled relative to the angle we're looking at.

Figure 8.15: The library contains a ship folder that has all of the player's ship art assets.

Figure 8.16: The badguy folder has three bad guys, but creating more bad guys would be trivial.

Figure 8.17: Each powerup is colored differently and has a different letter so that the player can tell them apart.

Figure 8.18: The scoreboard gives the player vital feedback about his game. The library contains a folder that has all the scoreboard pieces inside.

Figure 8.19: The instructions, Start button, and powerup key should be visible when you test your game.

Figure 8.20: The ship can now fly around the stage, even off it. However, the flames don't work yet because we haven't implemented setFlame .

Figure 8.21: The shields are now controlled by the Shift key.

Figure 8.22: The bullets should now be working properly. Notice how the bullets move off the stage and onto the other side of the stage, like the ship.

Figure 8.23: The ship's flames now work based on which keys the user is pressing.

Figure 8.24: The ship explodes when its life drops to 0 or below.

Figure 8.25: The badGuyArray is used to place an order for multiple batches of bad guys.

Figure 8.26: The bad guys are working now; everything looks great except that there are no powerups yet.

Figure 8.27: Powerups are now working. They are dropped from bad guys sometimes, and each does something different to the player.

Chapter 9: Object-Oriented Programming with as 2.0

Figure 9.1: The Output panel tells you that you cannot define a class within the .fla.

Figure 9.2: Preferences panel with ActionScript. Settings dialog box open.

Figure 9.3: Each of the subclasses inherits from its parent, Alien . The subclasses have the features of MovieClip because Alien inherits from MovieClip .

Figure 9.4: Instances can only access public properties and methods .

Chapter 10: Artificial Intelligence: Tic Tac Toe

Figure 10.1: This first factorial function correctly computes factorials using loops .

Figure 10.2: The factorial function is called by itself several times with lesser values of n each time. When n becomes 1, everything returns.

Figure 10.3: The new recursive factorial function gives identical output to the old iterative solution.

Figure 10.4: The power function produces correct results for a base of 2 raised to powers from 0 to 9.

Figure 10.5: The power function is called by itself successively each time the value of the exponent ( exp ) is reduced by 1. The function starts returning when exp is 0.

Figure 10.6: The output of our recursive power function is identical to the previous iterative solution.

Figure 10.7: A tree structure contains a root node, interior nodes, and leaf nodes.

Figure 10.8: A tic tac toe board is played halfway. X has made two moves, and O has made one.

Figure 10.9: The tic tac toe boards are organized in a tree structure, with the given board as the root and each possible move as a child of the root.

Figure 10.10: Every possible next move for X is added to the tree. Note that only two lower branches are shown in this figure for space considerations.

Figure 10.11: The search tree is divided into layers named min and max. These min and max layers alternate.

Figure 10.12: The two-player game works now.

Figure 10.13: If a script takes too long between frames, this dialog box appears asking if you want to terminate it.

Figure 10.14: Our AI is playing as O and is about to make a move.

Chapter 11: Physics: Pachinko

Figure 11.1: A vector is drawn starting at the origin and going to the point (7,6).

Figure 11.2: v1 is added to v2, and the result is v3.

Figure 11.3: v2 is subtracted from v1 and the result is v3 .

Figure 11.4: The vector v <2, 3> is multiplied by the scalar k (2).

Figure 11.5: Vector v is normalized by scaling it down so that its magnitude is 1.

Figure 11.6: Vector v is scaled so that its magnitude is 4.

Figure 11.7: Given two vectors v and u , we can compute the angle between them using the dot product divided by the product of their magnitude.

Figure 11.8: The marbles are all different sizes and scattered randomly. We're going to let the user click marbles to apply forces to them.

Figure 11.9: Collisions can occur between a circle that is moving and several points that are stationary.

Figure 11.10: The circle has collided with the pin. We have options as to how to proceed from here.

Figure 11.11: The circle needs to bounce off the point in a realistic way.

Figure 11.12: The velocity, reflected velocity, and collision vectors are drawn so that you can see exactly how things are resolving.

Figure 11.13: Our marble is moving quickly and has skipped over another marble, missing the collision that should have happened .

Figure 11.14: The point is outside the circle before the update and after the update; there should have been a collision.

Figure 11.15: Pachinko is a lot like pinball. Steel ball bearings bounce around a table. Unlike pinball , however, pachinko has no flippers.

Figure 11.16: The library contains many symbols, most organized into folders.

Figure 11.17: The timeline has a number of layers, each with one or two symbols instantiated in it.

Figure 11.18: The backgrounds layer contains two symbols that form the back plate of the Pachinko game.

Figure 11.19: The pachinko machine's background has a face and a water dragon on it. This art resides in the fascia layer.

Figure 11.20: The ring border is the boundary for the balls in our Pachinko game.

Figure 11.21: The ballPath layer contains animation of the ball being fired so that we don't have to do this in script.

Figure 11.22: The gutter , which is the black slice in this figure, traps balls that reach the bottom of the ring border.

Figure 11.23: There are eight instances in the board layer.

Figure 11.24: The pockets are special places the user shoots for.

Figure 11.25: Pins are aligned under the pocket art. The bottom pin is colored differently and is an instance of a special pin.

Figure 11.26: Zones are created such that each pin is contained in one zone. We can then test only the zones that are adjacent to the ball for collisions.

Chapter 12: Server-Side Support for Flash: Highscore Boards

Figure 12.1: The veggie.swf movie has been loaded into our loadMovie.swf file.

Figure 12.2: The veggie.jpg graphic has been loaded exactly as if it were an .swf.

Figure 12.3: The progressBar symbol will show the user how much of the load has been completed after we attach the code.

Figure 12.4: The preloader symbol contains several items that show the user how the load is progressing.

Figure 12.5: We're loading veggie with strength and hitPoint variables, but when we trace these, they are undefined .

Figure 12.6: The onData event is triggered when the text that loadVariables is loading is completely in.

Figure 12.7: The _blank window argument opens a new browser window for the veggie.swf file.

Figure 12.8: The highscore board has a button that retrieves the scores and a text field that displays them.

Figure 12.9: There are dynamic text fields for a name and score, as well as a Submit button to call the Perl script with the new name and score.

Figure 12.10: The getScores.fla now works by calling our getScores.pl Perl script.