Email the Instructor

Upload a File

Flash 1 - Beginning

Class ends Sunday June 29, at 5pm

×

Drag your file here to upload it.

Text Fields

There are three kinds of text fields in Flash:

Static– this is “regular” text; that which you use for button labels or body copy. It’s the default text field type.

Dynamic– this is text that will change during the movie (for example, the readout on a calculator).

Input– this is a field for user input, such as a form field or a password field.

Flash CS5 introduced the Text Layout Framework, (TLF Text) which is the default setting on the Text tool; to follow these lessons, change this setting to the "Classic" option on the Properties panel when you select the Text tool (Text Layout Framework supports robust text field settings like those found in InDesign and Illustrator, including threaded text and multi-column text fields). To see an overview of these features, see a demo on Adobe TV or read this technote for complete information (TLF text requires FlashPlayer 10 or higher).

You define the type of text field by selecting the Text tool, and setting the second option on the Properties panel (or select an existing textfield and doing the same). You can highlight specific text and assign a hyperlink under the Options section of the Properties panel NOTE: Placing a hyperlink on text does not change its appearance like it does in HTML—you must do that manually (linked text shows a dotted line in the authoring environment but this doesn't show in the exported movie).

When you publish a Flash movie containing static text, Flash creates outlines of the text and uses the outlines to display the text in the Flash Player. You can reduce the memory allocated to drawing these outlines by using device fonts (_sans, _serif, or _typewriter) which are installed when you install Flash. These will use the closest available font on the user's computer (possibly causing the text to appear a different size, or line breaks to happen in different spots than in your authoring environment).

When you publish a Flash movie containing dynamic or input text fields, Flash stores the names of the fonts used. The Flash Player uses the names to help locate identical or similar fonts on the user’s system when the Flash movie is displayed. You should export font outlines with dynamic or input text by clicking the Character Embedding... button on the Properties panel and selecting desired subsets, to guarantee the user sees the text in the way you intend it to be seen (NOTE: if the text field is transformed in ANY way—rotated, scaled, skewed, 3D transformed—and you haven't embedded fonts, it won't show at all!).

Text Field instance names

Instances of Input and Dynamic text fields can have names. These are necessary for Flash to know which text to change or which input value to use during playback. In object-oriented programing, all objects have intrinsic properties. Text fields are objects, and their properties include text (the characters in the text field) and tabIndex (the order the user can TAB through to each text field). You can assign these properties in ActionScript thusly:

myTextFieldName.text="Howdy!"

myTextFieldName.tabIndex=1

A simple Flash Application

In this exercise you'll build a calculator like this one:

  1. In a new Flash file, draw a light grey rectangle as large as you want your calculator to be.
  2. Draw an input text field at the top of the rectangle.
  3. Give the field the instance name “operand1”. Select the Show border around text button on the Properties panel (this makes it appear white against your grey rectangle, and will be easy for the user to find, and recognize as an input field).
  4. After ensuring the font is the desired format, and the field is the desired size (see illustration in sidebar), Option-drag (PC users Alt-drag) the field downward, allowing space between the two fields for the four operation keys.
  5. Change the instance name of the lower input field from “operand1” to “operand2”.
  6. Draw a horizontal line below the Operand2 field.
  7. Create a dynamic text field below that line, and assign it an instance name of “­answer”. Deselect the Show border around text button if it is selected.
  8. Open the Buttons common Library:
    CS6 users:     WINDOW > Common Libraries > Buttons
    CC Users: Flash CC removed the Common Libraries; you can download it here. After unzipping, choose FILE > Import > Open External Library... and target the Buttons.fla file (ignore the warning About ActionScript 2.0)
  9. Inside the Classic Buttons set is a Key Buttons set. From it, select the “Key labeled” button. Drag one instance of it between the two input text fields (where the “+” button is in the example above). Scale it so four of these can fit on the same row.
  10. Double-click the instance of the Key labeled button, and delete the Arrows layer (this makes it a blank button).
  11. Return to Scene 1, and give this button the instance name “plusBTN”.
  12. Draw a static text field on top of the button, and type “+” in it.
    NOTE: recent versions of Flash changed the default "selectable" property of a static text field so it's enabled by default. This makes clicking a button behind a selectable field difficult. Disable the 'selectable' property in the Character section of the Properties panel:
  13. Select both the button and the static text field, and Option-drag them (PC users Alt-drag) three times to create three additional instances in a row. Edit the static text in each field to the mathematic operators pictured above, and assign the corresponding instance names to each button: minusBTN, multiplyBTN, divideBTN
  14. Select frame 1 and add the following ActionScript:
  15. Test the movie.

NOTE: it doesn't add the numbers; it concatenates them! (anything typed into a textfield is regarded as a string by Flash).

Data Types

In programming, there are several data types, including:

Strings– a series of characters with no intrinsic value. Variable names like “operand1” are strings. Strings almost always appear inside quotes.

Numbers– any positive or negative value, including floating points: 7, -31, 3.14159, etc.

Integers– whole numbers (no floating points; can be positive or negative).

Unsigned Integers– positive whole numbers.

Expressions– a calculated value or implicit function built into the program. 2+7 is an expression with a value of 9. Whereas “2+7” is a string of three specific characters that has no specific value. Flash has many built-in expressions (see “Math” in the Flash HELP menu for ActionScript for the many, many examples).

Booleans– a true or false value. In Flash, “true” and “false” are keywords which have the values 1 and 0, respectively (e.g. you can create a variable and set its value to true in two ways: myVariable = true; or myVariable = 1;

    In order to add the string data in the input text fields, it must first be converted into numbers:

  1. Change the Add function to:
    answer.text=Number(operand1.text)+Number(operand2.text);
  2. Test the movie (You’ll get the following compiler error since the data assigned to a text field’s .text value must be a string too, not a number):
    Implicit coercion of a value of type Number to an unrelated type String.
  3. Make one final change to the Add function:
    answer.text=String(Number(operand1.text)+Number(operand2.text));
  4. Add the following to the script in frame 1 to complete the other buttons' functionality:

Tab order

It would be nice if pressing the TAB key switched the focus from the Operator1 field to the Operator2 field (as it normally would on a web form). You can achieve this with the tabIndex property of text fields:

Select frame 1, and add to the ActionScript:

operand1.tabIndex=1;
operand2.tabIndex=2;