Adding HTML formattted text with Scrollbar
1. Unzip and save the files to your hard drive. The folder will contain a
text file and an FLA project file.
2. Open the loadhtmltext.fla project file into your flash MX. Test this
movie. It is the result of the
Dynamic Text
Outputs tutorial here.
Highlight the text box on the stage and open the properties inspector. In
the properties inspector turn on the HTML switch.
3. Open a notepad from your accessories folder. Click file=> Open and
browse to the files you unzipped and saved to your hard drive. Open the file
called formattedtext.txt. This is just a simple text file. We are going to
add some formatting in html.
4. There are a few HTML tags that Flash MX will recognize and interpret
in a text field. Valid HTML to use in flash MX are as follows:
- Font size <font size></font>
Add <font size> to the Page
title. Put <font size="24"> </font> around your title.
<font size="24">Welcome to the Homestead Real
Estate Brokerage!</font>
Add Add <font size> to the ending statement just above the copyright.
Put <font size="16"> </font> around your ending statement
<font size="16">We look forward to hearing from you!</font>
- Font Color <font color></font>
Add <font color> to the title. Put <font color="#000080"></font> around
your title.
<font size="24"><font color="#000080">Welcome to
the Homestead Real Estate Brokerage!</font></font>
All font tags can combine to form one font tag with all the attributes
in front of the text and end of font tag behind the text. combine the Font
color and size to produce this:
<font size="24" color="#000080">Welcome to the Homestead Real
Estate Brokerage!</font>
Add <font color> to the ending statement. Put <font
color="#000080"></font> around your ending statement.
<font size="16" color="#000080">We look forward to hearing from
you!</Font>
- Font Face <font face></font>
Add the font face tag
combined with the other font tags so that Verdana is the font. The font
face is case sensitive to the exact name of the font.
<font size="24" color="#000080"
face="Verdana">Welcome to the Homestead Real Estate Brokerage!</font>
- Paragraph <P></P>
Add Paragraphing for spacing. Add <p> at the
beginning of each line and at the end of each line. Put them on each blank
line also.
- Bold <B></B>
Add Bold around the first statement after the title.
Place the bold inside the Paragraphing.
<p><B>You will find all the local listings for your favorite
communities to live in.</B></p>
Add Bold around each point.
<P>- To view the <B>Listings</B>, click the listings button above.
</p>
<P></P>
<p>- If you are looking for a <B>Directory of services</B> in the
Homestead community, click the directory link above.</p>
<P></P>
<p>- Find out <B>About Us</B> by clicking the about button. </p>
<P></P>
<p>- <B>Contact Us</B> by clicking the contact button above. </p>
- Italics <I></I>
Add Italics around each of the points. Make sure you
include the italic statement completely inside or completely outside the
bold. * Rule of thumb: Cliose the html tags in the reverse order you
opened them in.
<P>- To view the <B><I>Listings</I></B>, click the listings button
above. </p>
<P></P>
<p>- If you are looking for a <B><I>Directory of services</I></B> in the
Homestead community, click the directory link above.</p>
<P></P>
<p>- Find out <B><I>About Us</I></B> by clicking the about button. </p>
<P></P>
<p>- <B><I>Contact Us</I></B> by clicking the contact button above. </p>
- Underline <U></U>
We will not use underline in this
tutorial.
- Anchor <A></A>
Used for hyperlinking, <a href=""></a>
and for naming for bookmark targets,<a name=""></a>, we will add a
hyperlink to developingwebs around the word below.
<p>Copyright © <A HREF="http://www.developingwebs.net">Developingwebs</a></p>
5. Save your text file. It should now look like this:
6. Back in Macromedia flash MX, highlight your text box and open the
properties inspector. Turn off selectable text and name the text box
instance name "mytext". (
selectable text was the only way we could get to the bottom of the text
box when we tested the movie before. Now we will script buttons to scroll
for us.
7. Click on your textbox layer. Insert a new layer and call it buttons.
8.
Open your library by hitting F11 or control L. Drag out two copies of the
button into the buttons layer frame 1. Highlight one of the instances of the button using your arrow tool.
Click modify=> Transform=> Flip vertical to make a down arrow.
Position the upward arrow at the upper right of the text box. Position
the downward arrow on the lower right of the text box.
9. Highlight the top button. Open your action script panel. Click
objects=>movie=>text fields=> properties=> scroll
Add the scroll script to your Action panel.
10.
Place your cursor in front of the .scroll in the expression box.
Click the target button. Select the text instance called mytext, which we
had previously named and click ok. Your expression now has the pathway to
your text box and the named instance in the expression line in front of the
.scroll.
Click in the Expression box at the end of the line. Add "-=1" (minus
equals one). This tells the text in the text box to move the text down one
line to view the next line up.
Resulting script:
11. Repeat steps 9 and 10 on the downward arrow, but instead of "-=1" use +=1
to move the text up inside the box so you can see the next line.
Resulting script:
12. Publish your movie.
|