Faça o curso: jQuery na Prática

Desde o Flash Player 7 podemos aplicar estilos CSS a caixas de texto geradas como HTML. Para isso temos à disposição a Classe StyleSheet no Action Script 2.0 e no Action Script 3.0. Vamos descrever seu uso na versão 2.0 do Action Script.

Como fazer

Para podermos inserir estilos CSS no Flash necessitamos, em primeiro lugar, que o texto a ser formatado seja renderizado como HTML, isto é, independente da versão do Action Script utilizada. No tutorial vamos utilizar uma caixa de texto dinâmico com nome da instância "caixa_txt". Escolhemos uma caixa de texto dinâmico onde o código é igualmente válido para aplicar estilos a componentes TextArea e Label, cuja propriedade HTML tem o valor TRUE. 

A primeira coisa a fazer é criar um novo objeto StyleSheet, para isso começamos o código com:

import TextField.StyleSheet; //necessário para poder criar o objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet();

O passo seguinte é completar o objeto estiloCSS com definições de estilos. Isto pode ser feito de duas maneiras.

A primeira opção é inserir definições de estilo com ActionScript, de forma concreta com o método setStyle. Neste bloco de código cria-se um objeto StyleSheet e insere-se nele uma definição de estilo para a etiqueta A, de modo que fique personalizado o aspecto dos links. O método setStyle recebe dois parâmetros, o primeiro é o nome da etiqueta ou a classe a personalizar e o segundo são as próprias definições de estilo expressadas na forma de objeto com propriedades.

Código AS 2.0

import TextField.StyleSheet; //necessário para poder criar o objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet();
var objetoDeEstiloj:Object = new Object();
objetoDeEstiloj.color = "#666666";
objetoDeEstiloj.textDecoration = "underline";
estilosCSS.setStyle("A", objetoDeEstiloj);
delete objetoDeEstiloj;

Esse código é a versão estendida. As últimas cinco linhas podem ser substituídas por esta, mesmo que seja menos legível:

estilosCSS.setStyle("A", {color:'#666666',textDecoration:'underline'});

Se fixar os nomes das propriedades, verá que textDecoration é parecida, mas não igual, a text-decoration, propriedade empregada em CSS. Isto indica que se definimos estilos com ActionScript, os nomes das propriedades são um pouco diferentes e terão que ter equivalências muito claras. A seguir veremos a correspondência entre propriedades do ActionScript e do CSS.

Até aqui vimos a primeira maneira de completar um objeto StyleSheet com definições de estilo, vejamos agora a segunda opção, que é mais interessante.

Essa segunda alternativa consiste em carregar as definições a partir de um arquivo externo com o método load. Isto nos permite manter totalmente a independência entre os estilos e o filme swf, evitando ter que compilar novamente o swf para aplicar as modificações. Além do mais, não teremos que nos preocupar com as propriedades equivalentes em ActionScript, já que este arquivo externo é uma folha de estilo CSS com as propriedades próprias do CSS.

Para chamar o método load é necessário enviar como parâmetro a url do arquivo externo que contém as definições de estilo.

Além do mais, deverá ser definida a função que será executada para receber e carregar o arquivo externo. Nesta função terá que ser testado se o arquivo foi carregado corretamente, e se foi, aplicar os estilos à caixa de texto através de sua propriedade StyleSheet.

import TextField.StyleSheet; //necessário para poder criar o objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet(); // criamos o objeto StyleSheet
var
texto:String="Clique <a
href='http://www.onblogs.com.br/blog_do_jonathan'>aqui</a>
para mais informações."; // texto HTML a formatar
estilosCSS.onLoad = function(success:Boolean) { // função executada para receber dados externos
 if (success) { // se o arquivo foi carregado corretamente
 caixa_txt.styleSheet = estilosCSS; // aplicamos os estilos
 caixa_txt.htmlText = texto; // aplicamos ao texto HTML
 } else { // se o arquivo não foi carregado corretamente
 trace("Erro ao carregar o arquivo CSS");
 }
};
estilosCSS.load("folha1.css");

Para finalizar, uma coisa muito importante a ser levada em conta é que o estilo deve ser aplicado antes do valor do texto HTML, caso contrário não serão aplicados os estilos.