• home
  • forum
  • my
  • kt
  • download
  • Formatting your Adobe Flash 8 website using CSS

    Author: 2007-06-16 10:25:17 From:

    In this tutorial it will be explained how to format an Adobe Flash 8 website text by using CSS.
    Cascading Style Sheets (CSS) save a lot of time because a you can use an external .css file for formatting a large amount of .HTML, .XML and even Adobe Flash 8 documents. Another advantage is that you can use the same .css file for display data in your both html and Flash versions of your website.
    Let¡¯s start our example by creating a new Flash 8 document with 550x400 dimensions and Frame rate 12 fps.

    Draw a text field on the stage using the Text tool from the Tools panel. In the Properties Inspector set the following formatting for the text field:
    W:450, H:375, Arial, size 14, color #000000, from Text Type choose Dynamic Text and from Line Style drop down list select Multiline. Give to the text field the instance name css_txt.

    Save the document as csstext.fla.

    Now create a .css file in the same directory with your csstext.fla file, name it csstext.css, and put this code in:

    AnaS {
    color:#009900;
    font-size: 25px;
    font-family: Georgia , "Times New Roman", Times, serif;
    font-weight:bold;
    }

    red {
    color:#CC0099;
    font-family:"Courier New", Courier, monospace;
    font-size:20px;
    text-align:center;
    text-decoration:underline;
    }

    beautiful {
    font-family:"Monotype Corsiva",Arial, Helvetica, sans-serif;
    color:#333366;
    font-size:40px;
    text-align:right;
    }

    Great! Now go back to csstext.fla, open the Action Panel (F9) and write the following code:

    //set the html property of the text field to true
    news_txt.html = true;
    //create a StyleSheet object
    var myCSS:TextField.StyleSheet = new TextField.StyleSheet();
    myCSS.onLoad = function(success){
    if(success){
    css_txt.styleSheet = myCSS;
    css_txt.htmlText = "<AnaS>This is AnaS formatting!</AnaS><br><br><red>This is a red text.</red><br><br><beautiful>This is a beautiful text!</beautiful>";
    }else{
    trace("Sorry! There was an error!");
    }
    }
    myCSS.load("csstext.css");


    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      3D (20)
      Math Physics (14)
      3rd Party (5)
      Navigation (60)
      Actionscripting (26)
      Optimization (16)
      Animation (32)
      Projector (9)
      Audio (46)
      Special Effects (112)
      Backend (25)
      Text Effects (65)
      Drawing (18)
      Tips and Techniques (41)
      Dynamic Content (25)
      Tricks (6)
      Games (66)
      Utilities (19)
      Getting Started (71)
      Video (10)
      Interactivity (21)
      Web Design (22)

    New

    Hot