Aplicar estilo CSS com Action Script 2.0

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<br />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<br />var estilosCSS:StyleSheet = new StyleSheet();<br />var objetoDeEstiloj:Object = new Object();<br />objetoDeEstiloj.color = "#666666";<br />objetoDeEstiloj.textDecoration = "underline";<br />estilosCSS.setStyle("A", objetoDeEstiloj);<br />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<br />var estilosCSS:StyleSheet = new StyleSheet(); // criamos o objeto StyleSheet<br />var<br />texto:String="Clique <a<br />href='http://www.onblogs.com.br/blog_do_jonathan'>aqui</a><br />para mais informações."; // texto HTML a formatar<br />estilosCSS.onLoad = function(success:Boolean) { // função executada para receber dados externos<br /> if (success) { // se o arquivo foi carregado corretamente<br /> caixa_txt.styleSheet = estilosCSS; // aplicamos os estilos<br /> caixa_txt.htmlText = texto; // aplicamos ao texto HTML<br /> } else { // se o arquivo não foi carregado corretamente<br /> trace("Erro ao carregar o arquivo CSS");<br /> }<br />};<br />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.