Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

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.



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2024 All Rights Reserved
Privacy and Legal