Changing the Font by Using HTML in Flash
by
kirupa chinnathambi
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:
-
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.
-
Once you have opened the font_user.fla file you
downloaded from the above link, you should see four
buttons only.
-
Click the text tool, and draw a text field above the row
of buttons:
[ draw the
text field above the row of buttons ]
-
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 ]
-
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 ]
-
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 ]
-
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:
[ copy and
paste the above lines of code into the Actions dialog box ]
-
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:
[ paste the
above code as an Action on the second button ]
[ paste the
above code as an Action on the third button ]
[ paste the
above code as an Action on the fourth button ]
-
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:
-
You forget to check the "Render Text as HTML"
button in the Properties panel for your text
field.
-
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.
-
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. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|