Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
24. Make a new layer and call it text field.
25. Select the Text tool (T). Pick the following options in the Property inspector (see numbers on the image below):
Most of these options are self-explanatory. I just want to point out two options: the _sans generic font type and the Use device fonts rendering option.
The first one is a wise thing to do, because it makes the user's operating system pick the default sans serif font. Basically, this will allow for all users to see almost the same thing. If you had chosen the Arial font for example, some Mac users wouldn't see it. Likewise, if you are working on a Mac and you want to select Helvetica, most Windows users won't see this font, because it doesn't come pre-installed with the operating system. The _sans option automatically selects the default sans serif font on any system.
The Second option, for using the device fonts, means that your final SWF file intended for the Web will be much smaller in size. Had you selected any other option, like Anti-alias for animation or readability for example, you would have to select a non-generic font family and after that, embed the characters in your SWF document. Embedding makes the SWF file larger in size, because Flash must store the vector shape data of the font's characters into itself.
Sure, if you need a specific design with a specific font in mind, you may want to embed the font data into your Flash movie. If you choose this method, every single user will see the font you chose, regardless if it's installed on their system or not.
26. Click and drag out a long text field on the stage, somewhere along its vertical middle point. It should span the whole stage width. When done, press Esc on your keyboard to exit the text field.
Now, you should be aware of a property here: the number of characters that can appear in the text field. If you have made it as wide as I did, with the same characteristics such as font type an size, it should be able to display about 34 characters. Most of the words used in a hangman game don't have such a high letter count, so you should be safe with the text field that you just created.
On the other hand, if you plan to make your game include some less commonly used words, like latin animal species names, words used in science, etc, you should either make your text field (and the size of your document) wider, or pick a smaller font size. If you go for the second option, don't pick a font size that is too small, because the word and the guessed letters must be clearly visible.
27. With the dynamic text field still selected, go again to the Property inspector and give it an Instance name: call it guessWord_txt.
That's it for the text field. It's good and ready to be manipulated with via ActionScript.
The title of this section mens the following: you will create a movie clip which will be used at runtime. At runtime means while the SWF movie is running. Instead of creating each letter button (for the player to press — to guess a letter in the word) separately on stage, you will save lots of time by making a single movie clip, and then writing some ActionScript code that will create all the buttons for the entire alphabet.
28. Lock the current layer and make a new one: call it start screen.
This layer will in fact host the starting screen for the game. It is here that you will create the movie clip with the text field, since it will be erased anyway. This movie clip is going to be stored in the Library, so it really isn't necessary to create a separate layer for it.
29. Select the Rectangle tool (R) and draw a 31 by 31 pixel borderless square on the stage. If you prefer buttons with borders, by all means do make a border. Pick any color you like.
30. Select the square and press F8 to convert it into a symbol. Pay attention to the following: select Movie clip as type and make sure to select the upper left corner for the Registration point. Enter letter button as name and click OK.
Selecting this particular registration point will make the positioning of the many letter buttons much easier later.
31. Double-click the newly made movie clip on the stage to enter inside it.
32. Once inside it, call the first layer background and lock it. Make a new layer and call it text field.
33. Choose the Text tool (T). In the Property inspector, all the options should be the same as the ones in step 25 of this tutorial, except one: the font size. Make it smaller, change it to 18.
Click and drag over the square and make a text field that covers almost all of it. Press Esc to exit the text field.
34. Go to the left side of the Property inspector and assign an Instance name to the text field: name it letter_txt.
35. Click on the Scene 1 link to go back to the main scene and timeline.
36. Delete the movie clip that you have just made from the stage. It is stored in the Library, so there is no need to have it on the scene and/or assign it an Instance name. You will pull it out dynamically, thanks to an identifier. You will see how to do just that in a moment.
37. Open the Library if it isn't open already (Window > Library). You will see your letter button movie clip nicely sitting there, along with the hanging sequence movie clip.
38. Right-click on the letter button movie clip and select Linkage from the menu.
39. The Linkage Properties window will appear. Check the Export for ActionScript option. The Export in first frame option will automatically follow. In the Identifier field write letterButton and click OK.
This movie clip is now ready to be manipulated via ActionScript, thanks to the Identifier name you gave it and the Export for ActionScript option.
The Export in first frame option means (if checked, like in this case) that this movie clip will begin to load before any other content in your SWF. This can cause problems with large, graphics-intensive movie clips, because if you happen to have a preloader in your SWF, it won't be visible until that particular movie clip has completely loaded. But there is a simple solution to that: make a SWF with just a preloader in it, which in turn loads the main SWF with the movie clip in question inside it. Here, you don't have to worry about that because the letter button movie clip's size is around 180 bytes :) !
40. Still in the start screen layer, select the Rectangle tool (R). Draw a big square on the stage, the width and height of which should be about 430 pixels.
41. Convert this square into a Movie clip symbol, call it start screen and click OK. The registration point for this one isn't important.
42. Double-click on the newly made movie clip to enter inside it.
43. Inside the start screen movie clip, call the first layer (containing the square) background and lock it. Make a new layer and call it play button.
44. In this layer, create a 160 by 50 pixel rectangle, with round corners if you like, choosing any colors you like. Place it over the lowest third of the background square and center it horizontally.
45. Use the Text tool (T) to write the message "Play!" on top of it. This time, choose any font you like and make sure that you have selected Static text for your text field. This is a design element, not a dynamic one.
46. Using the Selection tool (V), select both the rectangle and the text field. Press F8 to convert it into a Movie clip — call it play it again sam or whatever you like :) and click OK.
47. This movie clip will need an Instance name, so that you can tell it via ActionScript what to do when a player presses it. So do just that: name it play_mc.
48. Lock the play button layer and make a new one above it, with the name message.
49. Select the Text tool (T) again. Make sure that you have selected Dynamic text. Make the same choices for this tool as you did earlier in step 25, with one change: select the Multiline option, NOT the Single line one.
50. Create a big text field on the stage, that goes from the top of the background square, down to the play button and spans the square from side to side. Hit Esc to exit the text field. You can see the text field's blue border in the image below.
51. This text field will display the welcome message, with a piece of dynamic data inside it, so it needs an Instance name. Call it message_txt.
52. Go back to the main scene and give the start screen movie clip the Instance name startScreen_mc.
53. Lock the start screen layer.
Fine! That's it concerning the graphical elements of the hangman game. Whew! :) What follows is pure ActionScript, explained on the next page.
