How to Make Games on Adobe Flash CS3 Professional

Flash lets you make colorful games online.

Online games created with Adobe Flash CS3 Professional are one way to make your educational website interesting and fun. If you're a teacher, online Flash games will not only attract students to your website but also give you an avenue to try fun learning concepts.



One element that is often used in Flash games is the textField. The textField element can be used to display the current scores in a game or the running score on a test or quiz.

Things You'll Need

• Adobe Flash Professional, CS3 Version

Instructions

1. 

   Set up the Flash project.

   Start Adobe Flash Professional. Select Flash File (Actionscript 3.0) from below the Create New category on the splash screen that appears. Open the tools panel. Select "Window>Properties." Open the tools panel. Select "Window>Tools."

2. 

   Place the text field on the stage.

   Select the text field icon within the tools panel. Position your cursor over the text field icon (the T icon) and depress and release the mouse button. Position your cursor on the stage where you want to place your text field. Depress the mouse button again and drag your mouse (with the mouse button still depressed) until the text field is the size you want it. Now release the mouse button.

3. 

   Set the text fields properties.

   Type in an instance name in the "Instance Name" text box at the top of the properties panel. Use the name "textBoxOne." Select the Dynamic Text option from the "Text Type" list box beneath the Instance Name text box. Select the Family list box within the "Character" subpanel in the properties panel. Scroll down the list box and select "Roman Times." Select the "Size" text box, also in the "Character" panel. Select and type in "12" in the Size text field. Select from the "Behavior" list box in the Paragraph panel the "Single Line" option.

4. 

   Write ActionScript code.

   Open the Actions editor, "Window>Action." Code an event listener for textBoxOne. Code the associated event listener function such that it will display the words "Score a Point" when the mouse is positioned over the stage and the mouse is clicked:

   stage.addEventListener(MouseEvent.CLICK, displayText);

   function displayText (event:MouseEvent) :void

   {

   textBoxOne.text = "Score a Point";

   };

5. 

   Check and test the code.

   Select the "Syntax Check" check icon on the Action's editor's menu. Correct any errors that the syntax checker reports. Test the movie. Select "Window>Test Movie." Correct all errors that may appear in the Output window. Position your cursor over the stage and click your mouse. Check to see if the words "Score a Point" appear on the stage.

Tips & Warnings

• Another way to create text fields is with ActionScript code. When you create a text field with ActionScript code, don't use the textField tool in the tool panel. Instead, you instantiate the textField directly with ActionScript code in the Action editor.

• You may also want to place a border around your textField. In the Character subpanel of the Properties panel, select the "Show border around around text icon." You can set the border property with ActionScript code also. For this example, the ActionScript command would be textBoxOne.border = true,

• Remember that if you want to display data based based on user interactions, you will have to use the Dynamic text fields. The static and input text fields are not designed to output dynamic data. The input text field is used to only accept text input from the user. The static text box field is used to display words that will not change and are a fixed part of your layout.

References

• Adobe Systems: TextField -- ActionScript 3.0 Language Reference
• Adobe Systems, Flash CS3 Documentation, Basics of working with text
• Life Videopedia: How to Create a New Text Field in Adobe Flash CS3 ActionScript
• Life Videopedia: Learn How to Create a Text Field in Adobe Flash CS3 ActionScript 3

Resources

• YouTube: Adobe Flash CS3: How to create a Simple Maze game