Changing the Font by Using HTML in Flash

by kirupa   | filed under Flash and ActionScript

A short while ago I was requested for some help dealing with font usage in Flash. More specifically, I was asked if it was possible to change the font of text in a text using ActionScript instead of having to modify the text field. After pouring over a few pages and sites on the Net, I found the solution in the language we have come to love/hate HTML.

In this tutorial, you will learn how to use HTML code in Flash MX to create an animation that changes the font for a text field. You will create something similar to the following animation:

[ rollover/click on the colored buttons above ]

Let's create the above animation:

1. Click here to open an FLA that contains nothing but the interface. Don't worry, you will add the code and text field to change the font yourself.
    
2. Once you have opened the font_user.fla file you downloaded from the above link, you should see four buttons only.
    
4. Click the text tool, and draw a text field above the row of buttons:

[ draw the text field above the row of buttons ]

5. Once you have drawn the text field, select the text field with your mouse pointer. You will see the Properties panel appear towards the bottom. Click the drop-down menu on the left and select "Dynamic Text":

[ select Dynamic Text from the drop-down menu on the left ]

6. Now, we need to make add some more tweaks to the text field via the Properties panel. Click on the Render Text as HTML button with your mouse pointer:

[ the Render Text as HTML button should be clicked ]

7. Once you pressed the Render Text as HTML button, look a little to your right at the Var text field. In the Var text field, enter the words "font2":

[ enter "font2" in the Var text field ]

8. It's time to add the actions to the buttons to make them work. Right click on the first button and select Actions. The Actions dialog box will appear. Copy and paste the following section of code into the Actions dialog box:

                      on (release, rollOver) {
 font2 = "<font face=\"Times New Roman\"  >Times New Roman</font>";
}

[ copy and paste the above lines of code into the Actions dialog box ]

9. Save and preview the animation. When you hover the mouse over the first button, the animation will display the font. Let's add the remaining lines of code to the other buttons. Add the following lines of code into their appropriate buttons:

                      on (release, rollOver) {
 font2 = "<font face=\"Arial\"  >Arial</font>";
}

[ paste the above code as an Action on the second button ]

                      on (release, rollOver) {
 font2 = "<font face=\"Courier New\"  >Courier New</font>";
}

[ paste the above code as an Action on the third button ]

                      on (release, rollOver) {
 font2 = "<font face=\"Comic Sans MS\"  >Comic Sans MS</font>";
}

[ paste the above code as an Action on the fourth button ]

10. When you save and preview the animation, the font will change for the text as you hover your mouse over the different buttons.

ActionScript Explained

Not to leave you in the dark, I will explain what each line of the code accomplishes. I will use the code in the first button as an example:

                    on
  (release,
  rollOver) {

  font2 = "<font face=\"Times New
  Roman\" >Times New Roman</font>";

  }

In the second line, I am telling the variable font2 to equal the HTML code for displaying the text "Times New Roman" in the the Times New Roman font. If you remember, font2 is also the variable name of the text field. That is why the results from the HTML code are displayed in the text field.

FREQUENTLY ASKED QUESTION!

You may be wondering "How do I know what the HTML code for displaying text is? I don't know any bit of HTML". Also, you may also be wondering how to input the Actions in Flash. There are a lot of strange slashes and symbols that one would usually not remember to place in the code. I will explain that and more in the following section: Adding the HTML Code: Launch a program such as FrontPage or DreamWeaver. Add some text and format it in any way you choose.   Click on that program's HTML view. Copy the HTML code for the text you just added.   Go to Flash. Right click on a button and select Actions. The Actions dialog box will appear. Make sure you are in Normal mode. It is very important that you are in Normal mode!   Click on the plus arrow ( + ) and navigate to Actions | Variable | Set Variable: [ the set variable command ] Once you have selected set variable, you will see two text fields labeled Variable and Value, respectively.   In the Variable text field, enter the variable name of your text field you created. In our case, it would be font2. In the Value section, copy and paste the HTML code you copied from either FrontPage, DreamWeaver, or other HTML editing program.   If you preview the animation, you will notice that your text field displays the HTML formatted text.

Common Mistakes

The following list displays some common mistakes that you may make while creating this effect on your own:

1. You forget to check the "Render Text as HTML" button in the Properties panel for your text field.
    
2. The HTML code you used was not pasted in Normal mode. Flash adds some extra tags to the HTML code to make it functional. Directly pasting the code in Expert mode might lead Flash to interpret some HTML tags as something other than HTML and cause errors.
    
3. Make sure you give the text field a variable name and that variable name is called in the code. Also, don't do what I did and place the text field's variable name in the instance field instead of the var field.

As always, I have provided the source code for this tutorial. Click the download for Flash MX link below to download the file.
 

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇