Using Flash Studio Pro

< Day Day Up > Using Flash Studio Pro In the following exercise, you'll create an enhanced standalone Flash application using Flash Studio Pro and FSCommands. Before proceeding, you need to install the Flash Studio Pro trial version (Windows only) on your computer by following these steps: 1. Locate the file flashstudiopro_trial_setup.exe on the CD-ROM for this book and double-click the file to open it. 2. Follow the installer's instructions to install Flash Studio Pro. 3. After installation, launch the application. When launching Flash Studio Pro for the first time, you get a Flash Studio Pro tips pop- up window. Close that window. You can control a variety of Flash Studio Pro settings (see figure). The following is a brief overview of the available options and settings: TAB DESCRIPTION Input File Flash Studio Pro creates an executable file that holds at least one SWF file. On this tab, you specify the location on your hard drive for that SWF file. Style On this tab, you can change visual properties of the file and the window in which it launches. This includes properties such as the window title, the window borders, and the icon used for the executable file. Size/Position Here you can specify the size of the window and where on the screen it should position itself when launched. Mouse/Keyboard On this tab, you can define how you want the window to respond to certain keypresses and mouse interactions. For example, you can set the right-click to be, ignored or to drag the window. Flash This tab allows you to specify a few playback options for the Flash file, such as quality and background color. Also, you can select the option to include the Flash Player OCX with your executable file. Files Flash Studio Pro gives you the option to include files, such as extra SWF files or text files, in the final executable. You can specify on this tab which files to include. Output File On this tab, you specify certain properties of the executable file, such as its name, output directory, compression, and even an expiration date. Batch You can specify multiple SWF files and convert them to executable files. All SWF file names entered in this tab are processed with the same options. Now that you're acquainted with Flash Studio Pro's interface, let's use it to create an enhanced Flash game. This game creates a text file (used for holding a high score), shakes the projector window, and even talks to you! 1. Open Game1.fla in the Lesson20/Assets directory. Notice that there are five layers—Background, Assets, Top Bubbles, Actions, and Labels—as well as three frame labels (which we'll discuss in a moment). The Labels layer contains no content. It's just used to place empty frames that are given a frame label. The Background layer contains the project's background graphics. The Assets layer contains most of the remaining visual elements for the game, except for a bitmap of some bubbles on the Top Bubbles layer (this graphic was added to give the game some depth). As usual, the Actions layer will contain the ActionScript used in this project. The game that you're going to build is very simple. You move a ship left and right using the Left Arrow and Right Arrow keys. You can fire a projectile upward from the ship, using the Spacebar. Bubbles appear from the left side of the screen and move to the right. The goal is to destroy as many bubbles as you can within a certain time limit. When finished, your score is saved to a text file if you have attained a new high score. The Initial frame label will contain script to load the current high score data from a text file. Also on this label is a button that we'll use to begin gameplay. When the user clicks the button, the timeline moves to the Game label, which contains the script and assets for playing the game. After the game's time limit has been exceeded, the timeline moves to the Game Over label, where the current score is saved to a text file if the score is higher than the previously saved high score. Other than the specific FSCommands used in this exercise, all the ActionScript used in this project should be familiar from earlier lessons. There are functions, arrays, duplicated movie clips, and the hitTest() function. Instead of dissecting each script line by line, we'll focus more on what a group of code accomplishes, and in some cases how it relates to the use of FSCommands. Before we begin scripting, you should be aware of two important assets you'll use in the exercise, both of which are contained in the Lesson20/Assets directory. Both of these assets must be in the same directory as the final project file. The first asset is a text file named highest_score.txt. This file contains the variable declaration score=0. We'll explain this in a moment. The second asset is a file named mask.bmp, which is a black-and-white bitmap image that acts as a mask for the game application's window. 2. Move the playhead to the Initial frame label. This frame contains two important assets—a text field named score_txt that displays the current high score, and a button instance named play_btn that moves the timeline to the Game frame label. We'll script both of these elements in a moment. 3. With the Actions panel open, select the frame in the Actions layer (at the Initial frame label) and add the following script: 4. 5. var mask:String = "mask.bmp"; 6. 7. fscommand("flashstudio.maskon", "mask"); 8. These actions execute an fscommand() when the resulting SWF is wrapped in a Flash Studio Pro executable file, sending the executable a command that it has been programmed to act upon. In this case, the command tells the executable file to apply the specified bitmap file as a mask to the playback window. The end result is an executable file in the shape defined by the black-and-white image of the bitmap. The command specified here is flashstudio.maskon. (All Flash Studio Pro FSCommands start with flashstudio, so the command is actually just maskon.) The second parameter of the command specifies the path to the bitmap to be used as a mask. As you can see, we've referenced the value "mask", which actually refers to the value contained in the mask variable (mask.bmp). Although variables within Flash are not referenced in scripts by using quotes, they are when using Flash Studio Pro commands. This functionality may seem strange at first, but you'll quickly become accustomed to it. NOTE To reference the path of the bitmap directly, the syntax would look like this: fscommand("flashstudio.maskon", "\"mask.bmp\""); 4. Add the following script to load and display the previously saved high score: 5. 6. var highscore:Number; 7. 8. function scoreLoaded() { 9. 10. score_txt.text = "Most bubbles destroyed: "+ lv.score; 11. 12. highscore = Number(lv.score); 13. 14. } 15. 16. var lv:LoadVars = new LoadVars(); 17. 18. lv.onLoad = scoreLoaded; 19. 20. lv.load("highest_score.txt"); 21. This script creates an instance of the LoadVars class and loads the contents of the highest_score.txt text file into it. When the text file is loaded, the string "Most bubbles destroyed: 37" is displayed in the score_txt text field. The number of bubbles destroyed varies depending on the current value of score in the loaded text file. The first line of the script in this step declares highscore as a variable on the main timeline. In the scoreLoaded() function, when the text file is loaded the value of score in the file sets highscore's initial value. The highscore variable is declared on the main timeline because we need to keep it around for the duration of gameplay. At the end of the game, the current score is compared to this value to determine whether a new text file containing the updated high score should be created. 5. Add the following script for the Play button: 6. 7. play_btn.onRelease = function() { 8. 9. gotoAndStop("Game"); 10. 11. }; 12. 13. stop(); 14. When the play_btn button instance is clicked, the timeline moves to the Game frame label. The final action list keeps the movie from playing automatically when the application is opened. 6. Move the playhead to the Game frame label. This frame contains three movie clip instances: bubble_mc, ship_mc, and projectile_mc. The ship is controlled with the arrow keys, allowing it to move left or right depending on which arrow key is pressed. The bubble_mc clip is duplicated at certain times, with the duplicates acting as potential targets. The projectile_mc clip is duplicated when the Spacebar is pressed. These duplicates are used to shoot down (pop) bubbles as they move across the screen. 7. With the Actions panel open, select the Actions layer at the Game frame label and add the following actions: 8. 9. var ship_speed:Number = 2; 10. 11. var projectile_speed:Number = 4; 12. 13. var bubble_speed:Number = 3; 14. 15. var projectiles:Array = new Array(); 16. 17. var bubbles:Array = new Array(); 18. 19. var hits:Number = 0; 20. 21. var depth:Number = 0; 22. 23. var game_length:Number = 60 * 1000; 24. 25. var shooting:Boolean = false; 26. The ship, projectiles, and bubbles all move at their own speeds. A speed value is the amount that the object can move (in pixels) during one frame. The variables ship_speed, bubble_speed, and projectile_speed define these speeds. Arrays of projectiles and bubbles are also created, named projectiles and bubbles, respectively. These arrays store and keep track of bubbles and projectiles that are created and used during gameplay. Using arrays makes it easy to loop through the existing projectiles and bubbles to check for collisions or to remove them all from the screen. The hits variable stores the number of bubbles destroyed. The depth variable stores the current highest unused depth. The game_length variable stores the amount of time that the game lasts, in milliseconds (we set it to last 60 seconds). The shooting variable stores a value of false. These variables will be discussed later. 8. Add the following onEnterFrame event at the end of the current script: 9. 10. this.onEnterFrame = function() { 11. 12. generateBubbles(); 13. 14. captureKeyPresses(); 15. 16. moveProjectiles(); 17. 18. moveBubbles(); 19. 20. detectCollisions(); 21. 22. }; 23. This onEnterFrame event executes these five functions (none of which have been created yet) for every frame: o generateBubbles() creates a new bubble at a random time. o captureKeyPresses() checks whether the arrow keys or Spacebar have been pressed. Depending on which key is pressed, this function moves the ship left or right, or fires a projectile. o moveProjectiles() moves fired projectiles upward. o moveBubbles() moves bubbles to the right. o detectCollisions() loops through the projectiles and bubbles looking for collisions. Let's add these functions next and briefly discuss how they work. 9. Add the generateBubbles() function at the end of the current script: 10. 11. function generateBubbles() { 12. 13. if (random(50) == 0) { 14. 15. ++depth; 16. 17. var name:String = "bubble" + depth; 18. 19. var clip:MovieClip = bubble_mc.duplicateMovieClip(name,depth); 20. 21. bubbles.push(clip); 22. 23. clip._xscale = clip._yscale = 50 + random(50); 24. 25. } 26. 27. } 28. If random(50) evaluates to 0, a new bubble is created. Statistically this should occur once every 50 frames. When a new bubble movie clip instance is created, a reference to it is stored in the bubbles array. The generated bubble instance is given a random size by setting its _xscale and_yscale properties to values between 50 and 100. 10. Create the captureKeyPresses() function: 11. 12. function captureKeyPresses() { 13. 14. if (Key.isDown(Key.LEFT) && ship_mc._x > 185) { 15. 16. ship_mc._x -= ship_speed; 17. 18. } else if (Key.isDown(Key.RIGHT) && ship_mc._x < 370) { 19. 20. ship_mc._x += ship_speed; 21. 22. } 23. 24. if (Key.isDown(Key.SPACE) && !shooting) { 25. 26. shooting = true; 27. 28. shoot(); 29. 30. } else if (!Key.isDown(Key.SPACE)) { 31. 32. shooting = false; 33. 34. } 35. 36. } 37. If the Left Arrow or Right Arrow key is pressed and ship_mc is within a horizontal boundary of 185 on the left and 370 on the right, the ship_mc instance is moved the amount of ship_speed in the appropriate direction. The boundary exists to prevent the instance from moving beyond the area of water in the tub. [...]... the Escape key, and then close Flash Studio Pro Return to the Flash authoring environment and save your work as Game2.fla You have created an enhanced executable file using Flash Studio Pro Flash Studio Pro and other third-party tools offer hundreds of custom FSCommands to enhance your content You might find it interesting to read through the help files for Flash Studio Pro to learn about the other... last tasks are creating an SWF file and then wrapping that file in an executable generated by Flash Studio Pro 20 Choose File > Publish to create an SWF file Next you will be using Flash Studio Pro to create an executable file NOTE This step assumes that the default publish settings are used 21 With Flash Studio Pro open, select the Input File tab At the bottom of the tab is the option Please Select an... ship), and adds a reference to the new projectile in the projectiles array 12 Now create the moveProjectiles() function: 13 14 function moveProjectiles() { 15 16 for (var i:Number = projectiles.length - 1; i >= 0; i) { 17 18 var clip:MovieClip = projectiles[i]; 19 20 clip._y -= projectile_speed; 21 22 if (clip._y < 40) { 23 24 clip.removeMovieClip(); 25 26 projectiles.splice(i, 1); 27 28 } 29 30... function serves two purposes: moving any projectiles that have been created as a result of the user pressing the Spacebar, and removing the projectiles if they get too high on the screen This loop processes every projectile instance referenced in projectiles array With every iteration, each instance referenced in the array is moved up on the screen by the amount of projectile_speed If the y position of... 20 var projectile_clip:MovieClip = projectiles[i]; 21 22 for (var j:Number = bubbles.length - 1; j >= 0; j) { 23 24 var bubble_clip:MovieClip = bubbles[j]; 25 26 if (projectile_clip.hitTest(bubble_clip)) { 27 28 ++hits; 29 30 projectile_clip.removeMovieClip(); 31 32 projectiles.splice(i, 1); 33 34 bubbles.splice(j, 1); 35 36 bubble_clip.play(); 37 38 fscommand("flashstudio.shake", "\"5\""); 39 40 }... other available commands You might also want to play around with different Flash Studio Pro options when creating your executable files, such as assigning an icon to the file or having it fade in when the file is opened If you're bored with plain ol' ActionScript (yeah, right), learning to use third-party tools such as Flash Studio Pro can open up a new and powerful means of creating incredibly dynamic... two steps: it's physically removed from the screen by using the removeMovieClip() method; then the reference to the instance in the projectiles array is deleted, using the splice() method of the Array class You may wonder why this particular loop call requires i to be counted backward (-i) Think of the references to projectile instances in the projectiles array as a stack of nine books, with the book... 16 17 var name:String = "projectile" + depth; 18 19 var clip:MovieClip = projectile_mc.duplicateMovieClip(name, depth); 20 21 clip._x = ship_mc._x; 22 23 clip._y = ship_mc._y; 24 25 projectiles.push(clip); 26 27 } 28 This function is called when the Spacebar is pressed It creates a new projectile, positions it on top of the ship_mc movie clip instance (so it appears that the projectile is being fired... message:String = "Game Over! You destroyed " + hits + "bubble!"; 26 27 } 28 29 fscommand("flashstudio.say", "message"); 30 Both Windows 2000 and Windows XP come with a speech pack built in, allowing them to render strings of text to voice This script formats a dynamic message and has Windows play the message using the flashstudio.say command The second parameter of this command specifies a variable whose... Game1.swf file on your hard drive Obviously, this is where you select the file that you want to convert into a Flash Studio Pro executable 22 Click the Style tab In the lower-left corner of the tab, click the No Border radio button This option setting is necessary for the bitmap mask to fit the movie properly 23 Click the Output File tab At the bottom of the tab is the option Please Select the Output File . Day Up > Using Flash Studio Pro In the following exercise, you'll create an enhanced standalone Flash application using Flash Studio Pro and FSCommands Flash Studio Pro. 3. After installation, launch the application. When launching Flash Studio Pro for the first time, you get a Flash Studio Pro tips pop-