Ejemplo de utilización de estilos con HTML -- Flash CS3

En esta sección se ofrece un ejemplo de utilización de estilos con las etiquetas HTML. Puede crear una hoja de estilos que contenga estilos para algunas etiquetas incorporadas y defina algunas clases de estilos. A continuación, podrá aplicar dicha hoja de estilos a un objeto TextField que contenga texto en formato HTML.

Cree un archivo nuevo en el editor de texto o de CSS que prefiera.

Añada al archivo la siguiente definición de hoja de estilos:

p {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    display: inline;
}

a:link {
    color: #FF0000;
}

a:hover{
    text-decoration: underline;
}

.headline {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
    display: block;
}

.byline {
    color: #666600;
    font-style: italic;
    font-weight: bold;
    display: inline;
}

Esta hoja de estilos define los estilos para dos etiquetas HTML incorporadas (<p> y <a>) que se aplicarán a todas las instancias de dichas etiquetas. También define dos clases de estilos (.headline y .byline) que se aplicarán a párrafos y espacios de texto específicos.

Guarde el archivo como html_styles.css.

Cree un nuevo archivo de texto en un editor de texto o HTML y guarde el documento como myText.htm.

Añada el siguiente texto al archivo:

<p class='headline'>Flash adds advanced anti-aliasing rendering technology!</p><p><span class='byline'>San Francisco, CA</span>--Adobe Inc. announced today a new version of Flash that features a brand new font rendering technology called Advanced Anti-Aliasing, most excellent at rendering small text with incredible clarity and consistency across platforms. For more information, visit the <a href='http://www.adobe.com'>Adobe Flash web site.</a></p>

NOTA

Si copia y pega esta cadena de texto, asegúrese de que quita los saltos de línea que puedan haberse añadido a la cadena de texto.

Cree un nuevo documento de Flash en la herramienta de edición de Flash.

Seleccione el primer fotograma de la Capa 1 de la línea de tiempo (Ventana > Línea de tiempo).

Abra el panel Acciones (Ventana > Acciones) y añada el siguiente código al mismo:

this.createTextField("news_txt", 99, 50, 50, 450, 300);
news_txt.border = true;
news_txt.html = true;
news_txt.multiline = true;
news_txt.wordWrap = true;

// Crear una nueva hoja de estilos y un objeto LoadVars.
var myVars_lv:LoadVars = new LoadVars();
var styles:TextField.StyleSheet = new TextField.StyleSheet();

// Ubicación de los archivos CSS y de texto que se van a cargar.
var txt_url:String = "myText.htm";
var css_url:String = "html_styles.css";

// Definir controlador onLoad y cargar archivo CSS.
styles.onLoad = function(success:Boolean):Void {
    if (success) {
        /* Si la hoja de estilos se ha cargado sin errores,
            asígnela al objeto de texto, 
            y asigne el texto HTML al campo de texto. */
        news_txt.styleSheet = styles;
} else {
        trace("Unable to load CSS file.");
    }
};
styles.load(css_url);

// Definir controlador onData y cargar el texto que se va a mostrar.
myVars_lv.onData = function(src:String):Void {
    if (src != undefined) {
        news_txt.htmlText = src;
    } else {
        trace("Unable to load HTML file");
    }
};
myVars_lv.load(txt_url);

NOTA

En este código ActionScript, el texto se carga de un archivo externo. Para más información sobre cómo cargar datos externos, consulte Utilización de imágenes, sonido y vídeo.

Guarde el archivo como news_html.fla en el mismo directorio que contiene el archivo CSS creado en el paso 3.

Seleccione Control > Probar película para ver los estilos aplicados al texto HTML automáticamente.

Ejemplo de utilización de estilos con HTML

Para aplicar formato a HTML con una hoja de estilos: